235 lines
10 KiB
Plaintext
235 lines
10 KiB
Plaintext
@{
|
||
ViewData["Title"] = "停車紀錄查詢";
|
||
Layout = "~/Views/Shared/_Layout_Engineering.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'; // 顯示加載中
|
||
|
||
// 使用 URLSearchParams 來構建查詢字串
|
||
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()}`; // 調用 GetHourlyParkingLogs API
|
||
|
||
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.forEach(log => {
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td>${new Date(log.timestamp).toLocaleString('zh-TW')}</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; // 確保不會小於 1 或超過總頁數
|
||
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;
|
||
}
|
||
|
||
// 傳遞時間間隔以便後端生成相應的 Excel
|
||
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() {
|
||
// 检查本地存储中是否存在JWT令牌
|
||
token = localStorage.getItem('token_park_space');
|
||
console.log(token);
|
||
$.ajax({
|
||
type: "GET",
|
||
url: 'http://localhost:7700/Users/token_check',
|
||
headers: {
|
||
'Authorization': token
|
||
},
|
||
success: function (response) {
|
||
console.log(response);
|
||
token_check = "true";
|
||
from_token_import_id();
|
||
},
|
||
error: function () {
|
||
alert("您的Token失效，請重新登錄");
|
||
// 重定向到登錄頁面或處理失敗情況
|
||
window.location.href = '/Users/Login';
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
// 在頁面加載時檢查令牌
|
||
$(document).ready(function () {
|
||
token_check();
|
||
});
|
||
</script>
|