ching/grocy-barcode-helper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(template): 优化logs.html模板中的样式
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Ching 2025-02-09 20:57:53 +08:00
parent 80103802cc
commit c5315142cf
1 changed files with 117 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
templates/logs.html
View File

@ -2,39 +2,135 @@
<html> <html>
<head> <head>
<title>Today's Scan Logs</title> <title>Today's Scan Logs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style> <style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
text-align: center;
color: #2c3e50;
margin: 20px 0;
font-size: 1.8rem;
}
#logs-container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
table { table {
width: 80%; width: 100%;
margin: 20px auto;
border-collapse: collapse; border-collapse: collapse;
background: white;
} }
th, td { th, td {
padding: 8px; padding: 12px 15px;
text-align: left; text-align: left;
border: 1px solid #ddd; border-bottom: 1px solid #eee;
} }
th { th {
background-color: #f2f2f2; background-color: #f8f9fa;
font-weight: 600;
color: #2c3e50;
white-space: nowrap;
} }
tr:hover {
background-color: #f8f9fa;
}
.empty-name { .empty-name {
background-color: #fff3f3;
}
.empty-name:hover {
background-color: #ffe6e6; background-color: #ffe6e6;
} }
.retry-button { .retry-button {
padding: 5px 10px; padding: 8px 16px;
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
} }
.retry-button:hover { .retry-button:hover {
background-color: #45a049; background-color: #45a049;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.retry-button:active {
transform: translateY(0);
}
/* 响应式设计 */
@media screen and (max-width: 768px) {
body {
padding: 10px;
}
h1 {
font-size: 1.5rem;
}
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
th, td {
padding: 10px;
font-size: 0.9rem;
}
.retry-button {
padding: 6px 12px;
font-size: 0.8rem;
}
}
/* 加载动画 */
.loading {
text-align: center;
padding: 20px;
color: #666;
}
/* 空状态样式 */
.empty-state {
text-align: center;
padding: 40px 20px;
color: #666;
} }
</style> </style>
</head> </head>
<body> <body>
<h1 style="text-align: center;">Today's Scan Logs</h1> <h1>Today's Scan Logs</h1>
<div id="logs-container"> <div id="logs-container">
<table> <table>
<thead> <thead>
@ -50,8 +146,10 @@
</div> </div>
<script> <script>
// 加载日志数据
function loadLogs() { function loadLogs() {
const logsBody = $('#logs-body');
logsBody.html('<tr><td colspan="3" class="loading">Loading...</td></tr>');
$.ajax({ $.ajax({
url: '/scanlogs/today', url: '/scanlogs/today',
method: 'GET', method: 'GET',
@ -59,6 +157,11 @@
const tbody = $('#logs-body'); const tbody = $('#logs-body');
tbody.empty(); tbody.empty();
if (!response.logs || response.logs.length === 0) {
tbody.html('<tr><td colspan="3" class="empty-state">No logs found</td></tr>');
return;
}
response.logs.forEach(function(log) { response.logs.forEach(function(log) {
const row = $('<tr>'); const row = $('<tr>');
if (!log.name) { if (!log.name) {
@ -82,23 +185,25 @@
}); });
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
alert('Failed to load logs: ' + error); const tbody = $('#logs-body');
tbody.html('<tr><td colspan="3" class="empty-state">Failed to load logs: ' + error + '</td></tr>');
} }
}); });
} }
// 重试处理条码
function retryBarcode(barcode) { function retryBarcode(barcode) {
$.ajax({ $.ajax({
url: '/barcode', url: '/barcode',
method: 'POST', method: 'POST',
data: JSON.stringify({ data: JSON.stringify({
data: {
data: barcode data: barcode
}
}), }),
contentType: 'application/json', contentType: 'application/json',
success: function(response) { success: function(response) {
alert('Barcode has been added to queue'); alert('Barcode has been added to queue');
loadLogs(); // 重新加载数据 loadLogs();
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
alert('Failed to process barcode: ' + error); alert('Failed to process barcode: ' + error);
@ -106,11 +211,8 @@
}); });
} }
// 页面加载时获取数据
$(document).ready(function() { $(document).ready(function() {
loadLogs(); loadLogs();
// 每30秒自动刷新一次
setInterval(loadLogs, 30000); setInterval(loadLogs, 30000);
}); });
</script> </script>