w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Start of web interface

Browse Source
This commit is contained in:
Ian Renton
2025-09-27 16:55:17 +01:00
parent 78871902ad
commit 9d9687adbf
4 changed files with 58 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
providers/dxcluster.py
View File

@@ -67,7 +67,7 @@ class DXCluster(Provider):
if match: if match:
spot_time = datetime.strptime(match.group(5), "%H%MZ") spot_time = datetime.strptime(match.group(5), "%H%MZ")
spot_datetime = datetime.combine(datetime.today(), spot_time.time()).replace(tzinfo=pytz.UTC) spot_datetime = datetime.combine(datetime.today(), spot_time.time()).replace(tzinfo=pytz.UTC)
spot = Spot(source=self.name(), spot = Spot(source="DX Cluster",
dx_call=match.group(3), dx_call=match.group(3),
de_call=match.group(1), de_call=match.group(1),
freq=float(match.group(2)), freq=float(match.group(2)),

18
webassets/css/style.css Normal file
View File

@@ -0,0 +1,18 @@
div#table-container {
width: 80%;
margin: 0 auto;
overflow: scroll;
}
div#table-container table, div#table-container th, div#table-container td {
border: 1px solid;
border-collapse: collapse
}
div#table-container th, div#table-container td {
padding: 10px;
}
div#table-container th {
background-color: dodgerblue;
}

6
webassets/index.html
View File

@@ -1,16 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Spot tool</title> <title>Unnamed spot tool</title>
<link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
</head> </head>
<body> <body>
<h1>Unnamed spot tool</h1>
<div id="filters">Some filters here</div>
<div id="table-container"></div> <div id="table-container"></div>
<script src="js/code.js"></script> <script src="js/code.js"></script>
</body> </body>
</html> </html>

38
webassets/js/code.js
View File

@@ -1,13 +1,45 @@
// TODO get all data into JS
// TODO populate table more nicely
// TODO track last received time and use API since call, merge and sort local data, refresh display
// TODO filtering (applied locally)
// TODO look and feel
$.getJSON('/api/spots', function(jsonData) { $.getJSON('/api/spots', function(jsonData) {
let headers = Object.keys(jsonData[0]); let headers = Object.keys(jsonData[0]);
let table = $('<table>').append('<thead><tr></tr></thead><tbody></tbody>'); let table = $('<table>').append('<thead><tr></tr></thead><tbody></tbody>');
headers.forEach(header => table.find('thead tr').append(`<th>${header}</th>`)); ["Time", "DX", "Frequency", "Mode", "Comment", "Source", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
jsonData.forEach(row => { jsonData.forEach(row => {
let $tr = $('<tr>'); let $tr = $('<tr>');
headers.forEach(header => $tr.append(`<td>${row[header]}</td>`)); $tr.append(`<td>${row["time"]}</td>`);
$tr.append(`<td>${row["dx_call"]}</td>`);
$tr.append(`<td>${row["freq"]}</td>`);
$tr.append(`<td>${row["mode"]}</td>`);
$tr.append('<td>').append(escapeHtml(`${row["comment"]}`)).append('</td>');
$tr.append(`<td>${row["source"]}</td>`);
$tr.append(`<td>${row["de_call"]}</td>`);
table.find('tbody').append($tr); table.find('tbody').append($tr);
}); });
$('#table-container').html(table); $('#table-container').html(table);
}); });
function escapeHtml(str) {
if (typeof str !== 'string') {
return '';
}
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
}