ChrisChrome/uhppoted-db-web
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Test

Browse source
This commit is contained in:
Christopher Cookman 2025-08-31 23:26:26 -06:00
parent 78cdf093ef
commit 0c672e717a
1 changed files with 51 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
views/event-logs.ejs
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -11,33 +12,40 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.container { .container {
/* max-width: 900px; */ /* max-width: 900px; */
margin: 40px auto; margin: 40px auto;
background: #fff; background: #fff;
padding: 32px; padding: 32px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} }
h1 { h1 {
text-align: center; text-align: center;
margin-bottom: 32px; margin-bottom: 32px;
color: #333; color: #333;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 16px; margin-bottom: 16px;
} }
th, td {
th,
td {
padding: 12px 8px; padding: 12px 8px;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
text-align: left; text-align: left;
} }
th { th {
background: #f0f0f0; background: #f0f0f0;
color: #444; color: #444;
} }
tr:hover { tr:hover {
background: #f9f9f9; background: #f9f9f9;
} }
@ -47,7 +55,7 @@
const wsUrl = `${wsProtocol}//${location.host}${location.pathname}`; const wsUrl = `${wsProtocol}//${location.host}${location.pathname}`;
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);
ws.onmessage = function(event) { ws.onmessage = function (event) {
// Handle incoming event log messages // Handle incoming event log messages
// Example: append to a table or display in the UI // Example: append to a table or display in the UI
console.log('Event received:', event.data); console.log('Event received:', event.data);
@ -66,9 +74,9 @@
const formattedDate = `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}`; const formattedDate = `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}`;
// Use EJS-injected dataTypes for event types, directions, and reasons // Use EJS-injected dataTypes for event types, directions, and reasons
const eventTypes = <%- JSON.stringify(dataTypes.EventType) %>; const eventTypes = <% - JSON.stringify(dataTypes.EventType) %>;
const directions = <%- JSON.stringify(dataTypes.Direction) %>; const directions = <% - JSON.stringify(dataTypes.Direction) %>;
const reasons = <%- JSON.stringify(dataTypes.EventReason) %>; const reasons = <% - JSON.stringify(dataTypes.EventReason) %>;
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = ` tr.innerHTML = `
@ -76,7 +84,9 @@
<td>${log.EventIndex}</td> <td>${log.EventIndex}</td>
<td>${formattedDate}</td> <td>${formattedDate}</td>
<td>${eventTypes[log.Type] || log.Type}</td> <td>${eventTypes[log.Type] || log.Type}</td>
<td>${log.Granted ? "True" : "False"}</td> <td style="${log.Type === 1 ? `background:${log.Granted ? '#c8f7c5' : '#f7c5c5'};` : ''}">
${log.Granted ? "True" : "False"}
</td>
<td>${log.Door}</td> <td>${log.Door}</td>
<td>${directions[log.Direction] || log.Direction}</td> <td>${directions[log.Direction] || log.Direction}</td>
<td>${log.CardNumber}</td> <td>${log.CardNumber}</td>
@ -85,19 +95,20 @@
tbody.insertBefore(tr, tbody.firstChild); tbody.insertBefore(tr, tbody.firstChild);
}; };
ws.onopen = function() { ws.onopen = function () {
console.log('WebSocket connection established'); console.log('WebSocket connection established');
}; };
ws.onclose = function() { ws.onclose = function () {
console.log('WebSocket connection closed'); console.log('WebSocket connection closed');
}; };
ws.onerror = function(error) { ws.onerror = function (error) {
console.error('WebSocket error:', error); console.error('WebSocket error:', error);
}; };
</script> </script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Event Log Viewer</h1> <h1>Event Log Viewer</h1>
@ -118,12 +129,14 @@
<tbody> <tbody>
<% logs.forEach(function(log) { %> <% logs.forEach(function(log) { %>
<tr> <tr>
<td><%= log.Controller %></td>
<td><%= log.EventIndex %></td>
<td> <td>
<% <%= log.Controller %>
const date = new Date(log.Timestamp); </td>
const pad = n => n.toString().padStart(2, '0'); <td>
<%= log.EventIndex %>
</td>
<td>
<% const date=new Date(log.Timestamp); const pad=n=> n.toString().padStart(2, '0');
const yyyy = date.getFullYear(); const yyyy = date.getFullYear();
const mm = pad(date.getMonth() + 1); const mm = pad(date.getMonth() + 1);
const dd = pad(date.getDate()); const dd = pad(date.getDate());
@ -131,20 +144,33 @@
const MM = pad(date.getMinutes()); const MM = pad(date.getMinutes());
const ss = pad(date.getSeconds()); const ss = pad(date.getSeconds());
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
%> %>
%> %>
<%= `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}` %> <%= `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}` %>
</td>
<td>
<%= dataTypes.EventType[log.Type] %>
</td>
<td style="<%= log.Type === 1 ? `background:${log.Granted ? '#c8f7c5' : '#f7c5c5'};` : '' %>">
<%= log.Granted ? "True" : "False" %>
</td>
<td>
<%= log.Door %>
</td>
<td>
<%= dataTypes.Direction[log.Direction] %>
</td>
<td>
<%= log.CardNumber %>
</td>
<td>
<%= dataTypes.EventReason[log.Reason] %>
</td> </td>
<td><%= dataTypes.EventType[log.Type] %></td>
<td><%= log.Granted ? "True" : "False" %></td>
<td><%= log.Door %></td>
<td><%= dataTypes.Direction[log.Direction] %></td>
<td><%= log.CardNumber %></td>
<td><%= dataTypes.EventReason[log.Reason] %></td>
</tr> </tr>
<% }); %> <% }); %>
</tbody> </tbody>
</table> </table>
</div> </div>
</body> </body>
</html> </html>