440 lines
15 KiB
Plaintext
440 lines
15 KiB
Plaintext
|
@{
|
||
|
|
ViewData["Title"] = "Parking_spaces_total_table";
|
||
|
|
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
|
||
|
|
var token_check_1 = ViewBag.token_check;
|
||
|
|
}
|
||
|
|
<input type="hidden" id="token_check_id" value=@token_check_1 />
|
||
|
|
|
||
|
|
|
||
|
|
<h1 id="position_id">校園總停車區域</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="size2">
|
||
|
|
<button class="btn btn-primary" onclick="add_park_space_view.showModal();map_show()" id="add_park_space_id">新增停車區</button>
|
||
|
|
<!--<button class="btn btn-primary" onclick="add_violation_view.showModal();map_show_1()" id="add_violation_id">新增違規區域</button>-->
|
||
|
|
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
|
||
|
|
<input type="text" style="float:right" placeholder="請輸入您的車牌" id="serch_text_id" />
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>
|
||
|
|
停車區域
|
||
|
|
</th>
|
||
|
|
<th>
|
||
|
|
總車位
|
||
|
|
</th>
|
||
|
|
<th>
|
||
|
|
剩餘車位
|
||
|
|
</th>
|
||
|
|
<th>
|
||
|
|
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody id="demo">
|
||
|
|
</tbody>
|
||
|
|
|
||
|
|
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- css -->
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
||
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||
|
|
crossorigin="" />
|
||
|
|
<!-- js -->
|
||
|
|
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
||
|
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
||
|
|
crossorigin="">
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
#myMap {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#myMap_1 {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
<!--新增停車場-彈跳視窗-->
|
||
|
|
<div>
|
||
|
|
<dialog id="add_park_space_view" style="width:100%;">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<button class="btn btn-danger" style="float:right" onclick="add_park_space_view.close();"> 關閉</button>
|
||
|
|
停車區名稱 : <input type="text" id="add_park_space_name_text_id" /></br></br>
|
||
|
|
停車位數量 : <input type="text" id="add_park_space_num_text_id" /></br></br>
|
||
|
|
<button class="btn btn-outline-success" onclick="GPS_text_clicked()">停車場位置</button>緯度<input type="text" size="10" id="add_park_space_GPS_lat_text_id" />經度<input type="text" size="10" id="add_park_space_GPS_lng_text_id" /></br></br>
|
||
|
|
<div id="myMap"></div>
|
||
|
|
<button class="btn btn-success" onclick="add_park_space()">上傳</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--新增違規區域-彈跳視窗-->
|
||
|
|
<div>
|
||
|
|
<dialog id="add_violation_view" style="width:100%;">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<button class="btn btn-danger" style="float:right" onclick="add_violation_view.close();"> 關閉</button>
|
||
|
|
違規區域名稱 : <input type="text" id="add_violation_name_text_id" /></br></br>
|
||
|
|
|
||
|
|
<button class="btn btn-outline-success" onclick="GPS_text_clicked()">停車場位置</button>緯度<input type="text" size="10" id="add_violation_GPS_lat_text_id" />經度<input type="text" size="10" id="add_violation_GPS_lng_text_id" /></br></br>
|
||
|
|
<div id="myMap_1"></div>
|
||
|
|
<button class="btn btn-success" onclick="add_violation()">上傳</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--map_show_停車場位置-->
|
||
|
|
<script>
|
||
|
|
var map
|
||
|
|
let lat ,lng
|
||
|
|
function map_show() {
|
||
|
|
var map_center = [23.691951, 120.535318]
|
||
|
|
map = L.map("myMap", {
|
||
|
|
|
||
|
|
center: map_center,
|
||
|
|
//center: seriesData,
|
||
|
|
zoom: 17
|
||
|
|
});
|
||
|
|
|
||
|
|
// 載入圖資
|
||
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||
|
|
}).addTo(map);
|
||
|
|
const popup = L.popup();
|
||
|
|
function onMapClick(e) {
|
||
|
|
lat = e.latlng.lat; // 緯度
|
||
|
|
lng = e.latlng.lng; // 經度
|
||
|
|
popup
|
||
|
|
.setLatLng(e.latlng)
|
||
|
|
.setContent(`緯度：${lat}<br/>經度：${lng}`)
|
||
|
|
.openOn(map);
|
||
|
|
console.log(lat, lng)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
map.on('click', onMapClick);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
var map_1
|
||
|
|
function map_show_1() {
|
||
|
|
var map_center = [23.691951, 120.535318]
|
||
|
|
map_1 = L.map("myMap_1", {
|
||
|
|
|
||
|
|
center: map_center,
|
||
|
|
//center: seriesData,
|
||
|
|
zoom: 17
|
||
|
|
});
|
||
|
|
|
||
|
|
// 載入圖資
|
||
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||
|
|
}).addTo(map_1);
|
||
|
|
const popup = L.popup();
|
||
|
|
function onMapClick(e) {
|
||
|
|
lat = e.latlng.lat; // 緯度
|
||
|
|
lng = e.latlng.lng; // 經度
|
||
|
|
popup
|
||
|
|
.setLatLng(e.latlng)
|
||
|
|
.setContent(`緯度：${lat}<br/>經度：${lng}`)
|
||
|
|
.openOn(map_1);
|
||
|
|
console.log(lat, lng)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
map_1.on('click', onMapClick);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--紀錄位置-->
|
||
|
|
<script>
|
||
|
|
function GPS_text_clicked(){
|
||
|
|
document.getElementById("add_park_space_GPS_lat_text_id").value=lat
|
||
|
|
document.getElementById("add_park_space_GPS_lng_text_id").value=lng
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--顯示車輛位置-彈跳視窗-->
|
||
|
|
<div>
|
||
|
|
<dialog id="serch_view" style="width:100%;">
|
||
|
|
<div>
|
||
|
|
<button class="btn btn-danger" style="float:right" onclick="serch_view.close();"> 關閉</button>
|
||
|
|
停車區名稱 : <input type="text" id="park_space_name_text_id" /> </br></br>
|
||
|
|
車牌號碼 : <input type="text" id="license_plate_number_text_id" /></br></br>
|
||
|
|
圖 片 : <img id="car_img_text_id" style="width:30%" /></br></br>
|
||
|
|
進入時間 : <input type="text" id="in_time_text_id" /></br></br>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--透過車牌號碼搜尋-->
|
||
|
|
<script>
|
||
|
|
function serch_click() {
|
||
|
|
var license_plate_number = document.getElementById("serch_text_id").value
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_instant/license_plate_number-" + license_plate_number,
|
||
|
|
data: {},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
document.getElementById("park_space_name_text_id").value = Model[0].parking_spaces_name
|
||
|
|
document.getElementById("license_plate_number_text_id").value = Model[0].license_plate_number
|
||
|
|
document.getElementById("car_img_text_id").src = Model[0].car_img
|
||
|
|
document.getElementById("in_time_text_id").value = Model[0].in_time
|
||
|
|
serch_view.showModal()
|
||
|
|
//set_data(Model)
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--獲取資料-->
|
||
|
|
<script>
|
||
|
|
var token_ckeck //= document.getElementById("token_ckeck_id").value
|
||
|
|
var position //職位
|
||
|
|
function get_data(){
|
||
|
|
console.log("start")
|
||
|
|
//token_check = document.getElementById("token_check_id").value
|
||
|
|
console.log(token_check)
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
|
||
|
|
data: {},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
//console.log(Model)
|
||
|
|
set_data(Model)
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--放置資料-->
|
||
|
|
<script>
|
||
|
|
function set_data(Model){
|
||
|
|
|
||
|
|
if(token_check == "true"){
|
||
|
|
document.getElementById("add_park_space_id").style.display= "block"
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById("add_park_space_id").style.display = "none"
|
||
|
|
}
|
||
|
|
if (position == "engineer"){
|
||
|
|
document.getElementById("position_id").innerHTML = "<p " + ' onclick="engineer_mode()"' + '>校園總停車區域-工程模式</p>'
|
||
|
|
}
|
||
|
|
else if (position == "manager") {
|
||
|
|
//document.getElementById("position_id").innerHTML = "<p " + ' onclick="manager_mode()"' + '>校園總停車區域-管理者模式</p>'
|
||
|
|
document.getElementById("position_id").innerHTML = '校園總停車區域-管理者模式'
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById("position_id").innerHTML ='校園總停車區域'
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
table ="<tr>";
|
||
|
|
//console.log(Model.length)
|
||
|
|
if (Model.length>0){
|
||
|
|
for (var i=0 ;i<Model.length;i++){
|
||
|
|
if (Model[i].parking_spaces_name!=null){
|
||
|
|
table += "<td>" + Model[i].parking_spaces_name +"</td>"
|
||
|
|
table += "<td id='" + Model[i].parking_spaces_name + "_total'>" + Model[i].parking_spaces_total_num + "</td>"
|
||
|
|
table += "<td id='" + Model[i].parking_spaces_name + "_total'>" + Model[i].parking_spaces_now_num + "</td>"
|
||
|
|
//table += "<td id='" + Model[i].parking_spaces_name + "_now'>" + "</td>"
|
||
|
|
//get_single_parking_space_car(Model[i].parking_spaces_name)
|
||
|
|
//table += "<td>" + '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">刪除</button>'
|
||
|
|
table += "<td>"
|
||
|
|
if (token_check == "true") {
|
||
|
|
table += '<button class="btn btn-outline-success " onclick="detail_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">詳細</button>' + ' ' + ' '
|
||
|
|
}
|
||
|
|
//table += "<td>" + '<button class="btn btn-outline-success " onclick="detail_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">詳細</button>' +' '+' '
|
||
|
|
table += '<button class="btn btn-outline-warning " onclick="map_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">地圖</button>' + "</td>"
|
||
|
|
}
|
||
|
|
table += "</tr>"
|
||
|
|
table += "<tr>"
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.getElementById("demo").innerHTML = table
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--獲取當下停車數量-->
|
||
|
|
<script>
|
||
|
|
function get_single_parking_space_car(name){
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_instant/parking_space_area-" + name,
|
||
|
|
data: {},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
var total = document.getElementById(name+"_total").innerHTML
|
||
|
|
console.log(total)
|
||
|
|
var now = Model.length
|
||
|
|
document.getElementById(name + "_now").innerHTML = total - now
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
console.log()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--上傳資料-->
|
||
|
|
<script>
|
||
|
|
function add_park_space(){
|
||
|
|
var parking_spaces_name = document.getElementById("add_park_space_name_text_id").value;
|
||
|
|
var parking_spaces_total_num = document.getElementById("add_park_space_num_text_id").value;
|
||
|
|
var latitude = document.getElementById("add_park_space_GPS_lat_text_id").value;
|
||
|
|
var longitude = document.getElementById("add_park_space_GPS_lng_text_id").value;
|
||
|
|
var obj = { parking_spaces_name: parking_spaces_name, parking_spaces_total_num: parking_spaces_total_num, longitude: longitude, latitude: latitude }
|
||
|
|
var stringify_obj = JSON.stringify(obj);
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
|
||
|
|
//url: "http://140.125.20.183:7700/api/Postural_Analysis_1",
|
||
|
|
//data: {test_id: test_id, test_date: test_date, test_time: test_time, test_analyst: test_analyst, img: img, data_creat_time: "2022-10-04T18:47:40.887014" },
|
||
|
|
data: stringify_obj,
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (msg) {
|
||
|
|
console.log(msg)
|
||
|
|
add_park_space_view.close()
|
||
|
|
alert("上傳完成");
|
||
|
|
get_data()
|
||
|
|
//test_upload_bt_2()
|
||
|
|
//wait_view()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--刪除資料-->
|
||
|
|
<script>
|
||
|
|
function delet_data(name){
|
||
|
|
$.ajax({
|
||
|
|
type: "DELETE",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_total_table/"+name,
|
||
|
|
data: {},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (msg) {
|
||
|
|
console.log(msg)
|
||
|
|
get_data()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--前往詳細頁面-->
|
||
|
|
<script>
|
||
|
|
function detail_data(name){
|
||
|
|
window.location = "/Park_spaces/Single_parking_spaces_detail/" + name;
|
||
|
|
}
|
||
|
|
function map_data(name) {
|
||
|
|
window.location = "/Park_spaces/Single_parking_spaces_map/" + name;
|
||
|
|
}
|
||
|
|
function engineer_mode() {
|
||
|
|
window.location = "/Engineering/Engineering_Index";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--檢查token-->
|
||
|
|
<script>
|
||
|
|
function token_check() {
|
||
|
|
// 检查本地存储中是否存在JWT令牌
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
console.log(token)
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/token_check',
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (response) {
|
||
|
|
console.log(response)
|
||
|
|
token_check = "true"
|
||
|
|
from_token_import_id()
|
||
|
|
},
|
||
|
|
error: function (xhr) {
|
||
|
|
token_check = "false"
|
||
|
|
get_data()
|
||
|
|
// 处理错误响应，例如跳转到未授权页面
|
||
|
|
//window.location.href = 'https://example.com/unauthorized_page';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function from_token_import_id(){
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/token-' + token,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (response) {
|
||
|
|
console.log(response)
|
||
|
|
from_id_import_user_data(response)
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function from_id_import_user_data(id){
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (model) {
|
||
|
|
model = model.result
|
||
|
|
position = model.lastname
|
||
|
|
console.log(position)
|
||
|
|
if (position == "engineer") {
|
||
|
|
get_data()
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.location.href = '/';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--開機自啟-->
|
||
|
|
<script>
|
||
|
|
window.onload = token_check;
|
||
|
|
</script>
|
||
|
|
|