diff --git a/views/event-logs.ejs b/views/event-logs.ejs index 4326401..2e3be48 100644 --- a/views/event-logs.ejs +++ b/views/event-logs.ejs @@ -1,5 +1,6 @@ + @@ -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 @@ ${log.EventIndex} ${formattedDate} ${eventTypes[log.Type] || log.Type} - ${log.Granted ? "True" : "False"} + + ${log.Granted ? "True" : "False"} + ${log.Door} ${directions[log.Direction] || log.Direction} ${log.CardNumber} @@ -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); }; +

Event Log Viewer

@@ -118,12 +129,14 @@ <% logs.forEach(function(log) { %> - <%= log.Controller %> - <%= log.EventIndex %> - <% - const date = new Date(log.Timestamp); - const pad = n => n.toString().padStart(2, '0'); + <%= log.Controller %> + + + <%= log.EventIndex %> + + + <% 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()); @@ -131,20 +144,33 @@ const MM = pad(date.getMinutes()); const ss = pad(date.getSeconds()); const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; - %> - %> - <%= `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}` %> + %> + %> + <%= `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}` %> + + + <%= dataTypes.EventType[log.Type] %> + + + <%= log.Granted ? "True" : "False" %> + + + <%= log.Door %> + + + <%= dataTypes.Direction[log.Direction] %> + + + <%= log.CardNumber %> + + + <%= dataTypes.EventReason[log.Reason] %> - <%= dataTypes.EventType[log.Type] %> - <%= log.Granted ? "True" : "False" %> - <%= log.Door %> - <%= dataTypes.Direction[log.Direction] %> - <%= log.CardNumber %> - <%= dataTypes.EventReason[log.Reason] %> - <% }); %> + <% }); %>
+ \ No newline at end of file