adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add basic table/listing thing

Browse Source
This commit is contained in:
Adam Goldsmith 2018-07-10 19:03:21 -04:00
parent 53d5302ef6
commit 332a057f0c
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client.js
View File

@ -10,6 +10,27 @@ Notification.requestPermission(permission => {
} }
}); });
function redrawTable() {
let table = document.querySelector('table.calls');
table.innerHTML =
`<tr><th>Callsign</th>` +
`<th>Last Heard</th>` +
`<th>Time since Last Heard</th>`;
for (let callsign in calls) {
let call = calls[callsign];
let nowDelta = new Date(new Date() - call.lastHeard);
let tr = table.appendChild(document.createElement('tr'));
if (nowDelta.getTime() > timeoutLength) {
tr.classList.add('timedOut');
}
tr.innerHTML =
`<td>${callsign}</td>` +
`<td>${call.lastHeard.toLocaleTimeString('en-GB')}</td>` +
`<td>${nowDelta.toLocaleTimeString('en-GB', {timeZone: "UTC"})}</td>`
;
}
}
function alertNotHeard(callsign) { function alertNotHeard(callsign) {
new Notification(`${callsign} has not been heard for 20 Minutes!`, new Notification(`${callsign} has not been heard for 20 Minutes!`,
@ -38,5 +59,9 @@ aprsStream.onmessage = function(event) {
calls[callsign].delta = date - calls[callsign].lastHeard; calls[callsign].delta = date - calls[callsign].lastHeard;
calls[callsign].timeout = window.setTimeout( calls[callsign].timeout = window.setTimeout(
alertNotHeard, timeoutLength, callsign); alertNotHeard, timeoutLength, callsign);
redrawTable();
}; };
window.addEventListener("load", redrawTable);
window.setInterval(redrawTable, 1000);

16
index.html
View File

@ -1,11 +1,23 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="./client.js"></script> <script src="./client.js"></script>
<style>
table.calls {
border-collapse: collapse;
}
table.calls td, table.calls th{
border: 1px solid black;
}
table.calls tr.timedOut {
background-color: red;
}
</style>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<table> <table class="calls">
</table> </table>
test
</div> </div>
</body> </body>