mirror of
https://github.com/owntracks/recorder.git
synced 2026-02-13 20:49:51 +00:00
100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Recorder</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<link rel="icon" sizes="192x192" href="static/recorder.png">
|
|
<link rel="apple-touch-icon" href="static/recorder.png">
|
|
|
|
<style>
|
|
body, a, a:visited {
|
|
font-family: Helvetica, sans-serif;
|
|
color: #3f72b5;
|
|
}
|
|
#usertable {
|
|
font-family: Helvetica, sans-serif;
|
|
width: 80%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#usertable td, #usertable th {
|
|
font-size: 1em;
|
|
border: 1px solid #305e9f;
|
|
padding: 3px 7px 2px 7px;
|
|
}
|
|
|
|
#usertable th {
|
|
font-size: 1.1em;
|
|
text-align: left;
|
|
padding-top: 5px;
|
|
padding-bottom: 4px;
|
|
background-color: #305e9f;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<script type="module">
|
|
|
|
import { debug } from "./utils/debug.js";
|
|
import { fetchApiData } from "./utils/network.js";
|
|
import { escapeHTML } from "./utils/misc.js";
|
|
|
|
const hours = 60 * 60 * 1000;
|
|
const days = 24 * hours;
|
|
|
|
const f0 = new Date().toISOString();
|
|
const f12h = new Date(Date.now() - 12 * hours).toISOString();
|
|
const f7d = new Date(Date.now() - 7 * days).toISOString();
|
|
const f30d = new Date(Date.now() - 24 * days).toISOString();
|
|
|
|
const data = await( fetchApiData({ endpoint: "last", includeSearchParams: true, rootLevel: true }));
|
|
|
|
for (const d of data) {
|
|
if (!d._type) {
|
|
debug("Skipping unknown entry:", d);
|
|
continue;
|
|
}
|
|
if (d.username == 'ping' && d.device == 'ping') {
|
|
debug("Skipping ping entry:", d);
|
|
continue;
|
|
}
|
|
d.udev = `user=${ encodeURIComponent(d.username) }&device=${ encodeURIComponent(d.device) }`;
|
|
|
|
const row = `<tr><td>${ escapeHTML `${ d.username } / ${ d.device }` }</td>
|
|
<td><a href='map/index.html?from=${ f12h }&to=${ f0 }&format=geojson&${ d.udev }'>12h</a></td>
|
|
<td><a href='map/index.html?from=${ f7d }&to=${ f0 }&format=geojson&${ d.udev }'>7d</a></td>
|
|
|
|
<td><a href='map/index.html?from=${ f12h }&to=${ f0 }&format=linestring&${ d.udev }'>12h</a></td>
|
|
<td><a href='map/index.html?from=${ f7d }&to=${ f0 }&format=linestring&${ d.udev }'>7d</a></td>
|
|
<td><a href='map/index.html?from=${ f30d }&to=${ f0 }&format=linestring&${ d.udev }'>30d</a></td>
|
|
</tr>`;
|
|
|
|
document.querySelector('#usertable > tbody:last-child').insertAdjacentHTML("beforeend", row);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<ul>
|
|
<li><a href="last/index.html">Live MAP of current locations</a></li>
|
|
<li><a href="table/index.html">TABLE of current locations</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id='content'>
|
|
<table id='usertable'>
|
|
<thead>
|
|
<tr><th>User/Device</th><th>Points</th><th>Points</th><th>Track</th><th>Track</th><th>Track</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|