mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2025-10-27 08:49:27 +00:00
Start of web interface
This commit is contained in:
@@ -67,7 +67,7 @@ class DXCluster(Provider):
|
||||
if match:
|
||||
spot_time = datetime.strptime(match.group(5), "%H%MZ")
|
||||
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),
|
||||
de_call=match.group(1),
|
||||
freq=float(match.group(2)),
|
||||
|
||||
18
webassets/css/style.css
Normal file
18
webassets/css/style.css
Normal 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;
|
||||
}
|
||||
@@ -1,16 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Spot tool</title>
|
||||
<title>Unnamed spot tool</title>
|
||||
|
||||
<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-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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Unnamed spot tool</h1>
|
||||
<div id="filters">Some filters here</div>
|
||||
<div id="table-container"></div>
|
||||
|
||||
<script src="js/code.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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) {
|
||||
let headers = Object.keys(jsonData[0]);
|
||||
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 => {
|
||||
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-container').html(table);
|
||||
});
|
||||
});
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (typeof str !== 'string') {
|
||||
return '';
|
||||
}
|
||||
|
||||
const escapeCharacter = (match) => {
|
||||
switch (match) {
|
||||
case '&': return '&';
|
||||
case '<': return '<';
|
||||
case '>': return '>';
|
||||
case '"': return '"';
|
||||
case '\'': return ''';
|
||||
case '`': return '`';
|
||||
default: return match;
|
||||
}
|
||||
};
|
||||
|
||||
return str.replace(/[&<>"'`]/g, escapeCharacter);
|
||||
}
|
||||
Reference in New Issue
Block a user