276 lines
11 KiB
Plaintext
276 lines
11 KiB
Plaintext
@{
|
|
ViewData["Title"] = "停車紀錄查詢";
|
|
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
|
|
}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@ViewData["Title"]</title>
|
|
<link rel="stylesheet" href="/bootstrap_1/css/bootstrap.min.css">
|
|
<style>
|
|
.table th, .table td {
|
|
text-align: center;
|
|
}
|
|
|
|
#loading {
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.pagination {
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-1">
|
|
<h1>查詢車位數</h1>
|
|
<div class="col-xl-32 col-lg32">
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3 d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 font-weight-bold text-primary">停車紀錄查詢與下載</h6>
|
|
<button class="btn btn-success" onclick="downloadParkingLogsExcel()">下載 Excel</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="startDate">開始日期和時間:</label>
|
|
<input type="datetime-local" id="startDate" class="form-control" />
|
|
<label for="timeInterval">時間間隔:</label>
|
|
<select id="timeInterval" class="form-control mb-2">
|
|
<option value="none">不需要間隔時間</option>
|
|
<option value="1">間隔1小時</option>
|
|
<option value="3">間隔3小時</option>
|
|
<option value="5">間隔5小時</option>
|
|
</select>
|
|
<label for="endDate">結束日期和時間:</label>
|
|
<input type="datetime-local" id="endDate" class="form-control" />
|
|
<button class="btn btn-primary mt-3" onclick="fetchParkingLogs()">查詢紀錄</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 class="font-weight-bold text-primary">停車紀錄</h6>
|
|
<div id="loading">加載中...</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>時間</th>
|
|
<th>星期</th>
|
|
<th>總車位</th>
|
|
<th>剩餘車位</th>
|
|
<th>月租車位</th>
|
|
<th>臨停車位</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="parking_logs_table">
|
|
|
|
</tbody>
|
|
</table>
|
|
<div id="noDataMessage" class="text-danger" style="display:none;">
|
|
沒有符合條件的停車紀錄。
|
|
</div>
|
|
|
|
<nav aria-label="Page navigation" id="paginationContainer" style="display: none;">
|
|
<ul class="pagination">
|
|
<li class="page-item" id="prevPageItem" style="display: none;">
|
|
<a class="page-link" href="#" onclick="changePage(currentPage - 1)">上一頁</a>
|
|
</li>
|
|
<li class="page-item" id="nextPageItem" style="display: none;">
|
|
<a class="page-link" href="#" onclick="changePage(currentPage + 1)">下一頁</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<button class="btn btn-primary" id="homeButton" style="display: none;" onclick="goToHomePage()">首頁</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentPage = 1;
|
|
const recordsPerPage = 20;
|
|
|
|
function fetchParkingLogs(page = 1) {
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const timeInterval = document.getElementById('timeInterval').value;
|
|
|
|
if (!startDate || !endDate) {
|
|
alert('請選擇開始和結束日期！');
|
|
return;
|
|
}
|
|
|
|
|
|
if (new Date(startDate) >= new Date(endDate)) {
|
|
alert('結束日期必須晚於開始日期！');
|
|
return;
|
|
}
|
|
|
|
const logsTable = document.getElementById('parking_logs_table');
|
|
const loadingIndicator = document.getElementById('loading');
|
|
loadingIndicator.style.display = 'block';
|
|
|
|
|
|
const params = new URLSearchParams();
|
|
params.append('startDate', startDate);
|
|
params.append('endDate', endDate);
|
|
params.append('interval', timeInterval);
|
|
params.append('page', page);
|
|
|
|
const url = `http://localhost:7700/api/ParkingLogs/GetHourlyParkingLogs?${params.toString()}`;
|
|
|
|
fetch(url)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('無法獲取資料，請稍後再試。');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
logsTable.innerHTML = '';
|
|
if (data.logs.length === 0) {
|
|
document.getElementById('noDataMessage').style.display = 'block';
|
|
document.getElementById('paginationContainer').style.display = 'none';
|
|
} else {
|
|
document.getElementById('noDataMessage').style.display = 'none';
|
|
|
|
|
|
data.logs.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
|
|
|
|
data.logs.forEach(log => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${new Date(log.timestamp).toLocaleString('zh-TW', { hour12: false })}</td>
|
|
<td>${log.dayOfWeek}</td>
|
|
<td>${log.totalParkingSpaces}</td>
|
|
<td>${log.remainingSpaces}</td>
|
|
<td>${log.monthlyRentSpaces}</td>
|
|
<td>${log.temporaryRentSpaces}</td>
|
|
`;
|
|
logsTable.appendChild(row);
|
|
});
|
|
|
|
|
|
currentPage = page;
|
|
document.getElementById('paginationContainer').style.display = 'block';
|
|
updatePagination(data.totalRecords);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching parking logs:', error);
|
|
alert('獲取停車紀錄時出現錯誤，請稍後再試。');
|
|
})
|
|
.finally(() => {
|
|
loadingIndicator.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function updatePagination(totalRecords) {
|
|
const totalPages = Math.ceil(totalRecords / recordsPerPage);
|
|
document.getElementById('nextPageItem').style.display = currentPage < totalPages ? 'block' : 'none';
|
|
document.getElementById('prevPageItem').style.display = currentPage > 1 ? 'block' : 'none';
|
|
document.getElementById('paginationContainer').dataset.totalRecords = totalRecords;
|
|
}
|
|
|
|
function changePage(page) {
|
|
const totalPages = Math.ceil(Number(document.getElementById('paginationContainer').dataset.totalRecords) / recordsPerPage);
|
|
if (page < 1 || page > totalPages) return;
|
|
fetchParkingLogs(page);
|
|
}
|
|
|
|
function goToHomePage() {
|
|
window.location.href = '/Home/Index';
|
|
}
|
|
|
|
function downloadParkingLogsExcel() {
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const timeInterval = document.getElementById('timeInterval').value;
|
|
|
|
if (!startDate || !endDate) {
|
|
alert('請選擇開始和結束日期以下載 Excel 檔案！');
|
|
return;
|
|
}
|
|
|
|
|
|
window.open(`http://localhost:7700/api/ParkingLogs/DownloadExcel?startDate=${startDate}&endDate=${endDate}&interval=${timeInterval}`, '_blank');
|
|
}
|
|
</script>
|
|
|
|
<script src="/bootstrap_1/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
<!--檢查token-->
|
|
<script>
|
|
var token
|
|
function token_check() {
|
|
|
|
token = localStorage.getItem('token_park_space');
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: 'http://localhost:7700/Users/token_check',
|
|
headers: {
|
|
'Authorization': token
|
|
},
|
|
success: function (response) {
|
|
|
|
token_check = "true"
|
|
from_token_import_id()
|
|
},
|
|
error: function (xhr) {
|
|
token_check = "false"
|
|
window.location.href = '/';
|
|
|
|
//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://localhost:7700/Users/token-' + token,
|
|
headers: {
|
|
'Authorization': token
|
|
},
|
|
success: function (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://localhost:7700/Users/user_id-' + id,
|
|
headers: {
|
|
'Authorization': token
|
|
},
|
|
success: function (model) {
|
|
model = model.result
|
|
position = model.lastname
|
|
|
|
if (position == "manager") {
|
|
get_data()
|
|
}
|
|
else {
|
|
window.location.href = '/';
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!--開機自啟-->
|
|
<script>
|
|
window.onload = token_check;
|
|
</script> |