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

68
views/event-logs.ejs
View file

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