github/recorder
1
0
Fork 0
mirror of https://github.com/owntracks/recorder.git synced 2026-05-05 02:36:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modernize base page

Browse Source
This commit is contained in:
atjn
2022-04-17 19:28:32 +02:00
parent 4c23447f4a
commit 80064f2d68
3 changed files with 115 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docroot/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

136
docroot/index.html
View File

@@ -1,119 +1,89 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!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" />
<link rel="icon" sizes="192x192" href="static/recorder.png">
<link rel="apple-touch-icon" href="static/recorder.png">
<script src="static/js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="static/js/mustache.js" type="text/javascript"></script>
<script src="static/js/moment.min.js" type="text/javascript"></script>
<style>
body, a, a:visited {
body, a, a:visited {
font-family: Helvetica, sans-serif;
color: #3f72b5;
}
#usertable {
color: #3f72b5;
}
#usertable {
font-family: Helvetica, sans-serif;
width: 80%;
border-collapse: collapse;
}
}
#usertable td, #usertable th {
#usertable td, #usertable th {
font-size: 1em;
border: 1px solid #305e9f;
padding: 3px 7px 2px 7px;
}
}
#usertable th {
#usertable th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #305e9f;
color: white;
}
color: white;
}
</style>
<script type="text/javascript">
<script type="module">
import { debug } from "./utils/debug.js";
import { fetchApiData } from "./utils/network.js";
import { escapeHTML } from "./utils/misc.js";
function getuserlist() {
var dataURI = location.protocol + "//" + location.host;
const hours = 60 * 60 * 1000;
const days = 24 * hours;
var parts = location.pathname.split('/');
for (var i = 1; i < parts.length - 1; i++) {
dataURI = dataURI + "/" + parts[i];
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 });
for (const d of data) {
if (!d._type) {
debug("Skipping unknown entry:", d);
continue;
}
dataURI = dataURI + "/api/0/last" + location.search;
if (d.username == 'ping' && d.device == 'ping') {
debug("Skipping ping entry:", d);
continue;
}
d.udev = `user=${ encodeURIComponent(d.username) }&device=${ encodeURIComponent(d.device) }`;
console.log("dataURI = " + dataURI);
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>
var f0 = moment().utc().format('YYYY-MM-DDTHH:mm:ss');
var f12h = moment().utc().subtract(12, 'hours').format('YYYY-MM-DDTHH:mm:ss');
var f7d = moment().utc().subtract(7, 'days').format('YYYY-MM-DDTHH:mm:ss');
var f30d = moment().utc().subtract(30, 'days').format('YYYY-MM-DDTHH:mm:ss');
<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>`;
$.ajax({
url: dataURI,
type: "GET",
dataType: 'json',
success: function(data) {
// console.log(JSON.stringify(data));
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (!d['_type']) {
console.log(d);
continue;
}
if (d.username == 'ping' && d.device == 'ping') {
continue;
}
d['udev'] = "user=" + d['username'] + "&device=" + d['device'];
d['f0'] = f0;
d['f12h'] = f12h;
d['f7d'] = f7d;
d['f30d'] = f30d;
var line = "<tr><td>{{ username }} / {{ device }}</td>" +
"<td><a href='map/index.html?from={{f12h}}&to={{f0}}&format=geojson&{{udev}}'>12h</a></td>" +
"<td><a href='map/index.html?from={{f7d}}&to={{f0}}&format=geojson&{{udev}}'>7d</a></td>" +
"<td><a href='map/index.html?from={{f12h}}&to={{f0}}&format=linestring&{{udev}}'>12h</a></td>" +
"<td><a href='map/index.html?from={{f7d}}&to={{f0}}&format=linestring&{{udev}}'>7d</a></td>" +
"<td><a href='map/index.html?from={{f30d}}&to={{f0}}&format=linestring&{{udev}}'>30d</a></td>" +
"</tr>";
var row = Mustache.render(line, d);
$('#usertable > tbody:last-child').append(row);
}
},
error: function(jqXHR, textstatus, errorthrown) {
console.log(textstatus, errorthrown);
console.log(jqXHR.status + " " + jqXHR.responseText);
},
});
}
$(document).ready(function() {
getuserlist();
});
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>
<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'>

113
docroot/test-ws.html
View File

@@ -1,59 +1,70 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>WebSocket Test</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">
var out = function(message) {
var div = document.createElement('div');
div.innerHTML = message;
document.getElementById('output').appendChild(div);
};
<script type="module">
window.onload = function() {
var num_messages = 0;
import { debug } from "./utils/debug.js";
// console.log(JSON.stringify(location));
// location.host localhost:8080 localhost:8083
// location.pathname /otr/ws.html /ws.html
import { getApiUrl } from "./utils/network.js";
import { escapeHTML } from "./utils/misc.js";
/* Remove last part of URI to determine path to Websocket in OTR */
var url = "ws://" + location.host + "/";
var parts = location.pathname.split('/');
for (var i = 1; i < parts.length - 1; i++) {
url = url + parts[i] + "/";
}
url = url + "ws";
console.log(url);
function displayMessage(message) {
const div = document.createElement('div');
div.innerHTML = message;
document.getElementById('output').appendChild(div);
};
websocket = new WebSocket(url);
websocket.onopen = function(ev) {
out('CONNECTED');
var msg = 'Hello.';
out('SENT: ' + msg);
websocket.send(msg);
};
websocket.onclose = function(ev) {
out('DISCONNECTED');
};
websocket.onmessage = function(ev) {
if (!ev.data) {
out('<span style="color: blue;">PING... </span>');
} else {
out('<span style="color: blue;">RESPONSE: ' + ev.data + ' </span>');
num_messages++;
}
/*
if (num_messages > 3) {
websocket.send('exit');
} */
};
websocket.onerror = function(ev) {
out('<span style="color: red; ">ERROR: </span> ' + ev.data);
};
};
</script>
<style> div {font: small Verdana; } </style>
<h2>OwnTracks Recorder WebSocket Test</h2>
//let num_messages = 0;
<div id="output"></div>
// location.host localhost:8080 localhost:8083
// location.pathname /otr/ws.html /ws.html
const url = getApiUrl(undefined, { useWebsocket: true });
displayMessage(`CONNECTING TO: ${url.href}`);
const websocket = new WebSocket(url);
websocket.addEventListener("open", () => {
displayMessage('CONNECTED');
const msg = 'Hello.';
displayMessage(`SENT: ${msg}`);
websocket.send(msg);
});
websocket.addEventListener("close", () => {
displayMessage('DISCONNECTED');
});
websocket.addEventListener("message", event => {
if (!event.data) {
displayMessage('<span style="color: blue;">PING... </span>');
} else {
displayMessage(escapeHTML `<span style="color: blue;">RESPONSE: ${ event.data } </span>`);
debug("RESPONSE:", event.data);
//num_messages++;
}
/*
if (num_messages > 3) {
websocket.send('exit');
} */
});
websocket.addEventListener("error", event => {
console.error(event);
displayMessage(escapeHTML `<span style="color: red;">ERROR: ${ event.data } </span>`);
});
</script>
<style> div {font: small Verdana; } </style>
</head>
<body>
<h2>OwnTracks Recorder WebSocket Test</h2>
<div id="output"></div>
</body>
</html>