Ching a031049c64
All checks were successful
continuous-integration/drone/push Build is passing
fix(template): 修复logs.html模板中的AJAX请求处理逻辑
2025-02-09 20:26:06 +08:00

116 lines
3.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Today's Scan Logs</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.empty-name {
background-color: #ffe6e6;
}
.retry-button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.retry-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Today's Scan Logs</h1>
<div id="logs-container">
<table>
<thead>
<tr>
<th>Barcode</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody id="logs-body">
</tbody>
</table>
</div>
<script>
// 加载日志数据
function loadLogs() {
$.ajax({
url: '/scanlogs/today',
method: 'GET',
success: function(response) {
const tbody = $('#logs-body');
tbody.empty();
response.logs.forEach(function(log) {
const row = $('<tr>');
if (!log.name) {
row.addClass('empty-name');
}
row.append($('<td>').text(log.barcode));
row.append($('<td>').text(log.name || 'Empty'));
const actionCell = $('<td>');
if (!log.name) {
const retryButton = $('<button>')
.addClass('retry-button')
.text('Retry')
.click(() => retryBarcode(log.barcode));
actionCell.append(retryButton);
}
row.append(actionCell);
tbody.append(row);
});
},
error: function(xhr, status, error) {
alert('Failed to load logs: ' + error);
}
});
}
// 重试处理条码
function retryBarcode(barcode) {
$.ajax({
url: '/barcode',
method: 'POST',
data: JSON.stringify({ barcode: barcode }),
contentType: 'application/json',
success: function(response) {
alert('Barcode has been added to queue');
loadLogs(); // 重新加载数据
},
error: function(xhr, status, error) {
alert('Failed to process barcode: ' + error);
}
});
}
// 页面加载时获取数据
$(document).ready(function() {
loadLogs();
// 每30秒自动刷新一次
setInterval(loadLogs, 30000);
});
</script>
</body>
</html>