117 lines
2.7 KiB
Plaintext
117 lines
2.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Event Log Viewer</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f7f7f7;
|
|
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);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
color: #333;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 16px;
|
|
}
|
|
th, td {
|
|
padding: 12px 8px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background: #f0f0f0;
|
|
color: #444;
|
|
}
|
|
tr:hover {
|
|
background: #f9f9f9;
|
|
}
|
|
</style>
|
|
<script>
|
|
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${location.host}${location.pathname}`;
|
|
const ws = new WebSocket(wsUrl);
|
|
|
|
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);
|
|
};
|
|
|
|
ws.onopen = function() {
|
|
console.log('WebSocket connection established');
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
console.log('WebSocket connection closed');
|
|
};
|
|
|
|
ws.onerror = function(error) {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Event Log Viewer</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Controller</th>
|
|
<th>Event Index</th>
|
|
<th>Timestamp</th>
|
|
<th>Type</th>
|
|
<th>Granted</th>
|
|
<th>Door</th>
|
|
<th>Direction</th>
|
|
<th>Data</th>
|
|
<th>Reason</th>
|
|
</tr>
|
|
</thead>
|
|
<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');
|
|
const yyyy = date.getFullYear();
|
|
const mm = pad(date.getMonth() + 1);
|
|
const dd = pad(date.getDate());
|
|
const HH = pad(date.getHours());
|
|
const MM = pad(date.getMinutes());
|
|
const ss = pad(date.getSeconds());
|
|
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
%>
|
|
<%= `${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>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html> |