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

Allow table columns to be toggled on and off. #19

Browse Source
This commit is contained in:
Ian Renton
2025-10-12 17:17:26 +01:00
parent e3d342c5d6
commit bb2813c2a5
6 changed files with 306 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
webassets/js/alerts.js
View File

@@ -41,15 +41,38 @@ function updateTable() {
// Use local time instead of UTC?
var useLocalTime = $("#timeZone")[0].value == "local";
// Table data toggles
var showStartTime = $("#tableShowStartTime")[0].checked;
var showEndTime = $("#tableShowEndTime")[0].checked;
var showDX = $("#tableShowDX")[0].checked;
var showFreqsModes = $("#tableShowFreqsModes")[0].checked;
var showComment = $("#tableShowComment")[0].checked;
var showSource = $("#tableShowSource")[0].checked;
var showRef = $("#tableShowRef")[0].checked;
// Populate table with headers
let table = $('<table class="table table-striped-custom table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
table.find('thead tr').append(`<th>${useLocalTime ? "Start&nbsp;(Local)" : "Start&nbsp;UTC"}</th>`);
table.find('thead tr').append(`<th>${useLocalTime ? "End&nbsp;(Local)" : "End&nbsp;UTC"}</th>`);
table.find('thead tr').append(`<th>DX</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Freq<span class='hideonmobile'>uencie</span>s & Modes</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Comment</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Source</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Ref.</th>`);
if (showStartTime) {
table.find('thead tr').append(`<th>${useLocalTime ? "Start&nbsp;(Local)" : "Start&nbsp;UTC"}</th>`);
}
if (showEndTime) {
table.find('thead tr').append(`<th>${useLocalTime ? "End&nbsp;(Local)" : "End&nbsp;UTC"}</th>`);
}
if (showDX) {
table.find('thead tr').append(`<th>DX</th>`);
}
if (showFreqsModes) {
table.find('thead tr').append(`<th class='hideonmobile'>Freq<span class='hideonmobile'>uencie</span>s & Modes</th>`);
}
if (showComment) {
table.find('thead tr').append(`<th class='hideonmobile'>Comment</th>`);
}
if (showSource) {
table.find('thead tr').append(`<th class='hideonmobile'>Source</th>`);
}
if (showRef) {
table.find('thead tr').append(`<th class='hideonmobile'>Ref.</th>`);
}
// Split alerts into three types, each of which will get its own table header: On now, next 24h, and later. "On now"
// is considered to be events with an end_time where start<now<end, or events with no end time that started in the
@@ -91,6 +114,15 @@ function addAlertRowsToTable(tbody, alerts) {
// Use local time instead of UTC?
var useLocalTime = $("#timeZone")[0].value == "local";
// Table data toggles
var showStartTime = $("#tableShowStartTime")[0].checked;
var showEndTime = $("#tableShowEndTime")[0].checked;
var showDX = $("#tableShowDX")[0].checked;
var showFreqsModes = $("#tableShowFreqsModes")[0].checked;
var showComment = $("#tableShowComment")[0].checked;
var showSource = $("#tableShowSource")[0].checked;
var showRef = $("#tableShowRef")[0].checked;
// Get times for the alert, and convert to local time if necessary.
var start_time_unix = moment.unix(a["start_time"]);
var start_time = start_time_unix.utc();
@@ -181,18 +213,45 @@ function addAlertRowsToTable(tbody, alerts) {
}
// Populate the row
$tr.append(`<td class='nowrap'>${start_time_formatted}</td>`);
$tr.append(`<td class='nowrap'>${end_time_formatted}</td>`);
$tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span>${dx_calls_html}${dx_country_html}</td>`);
$tr.append(`<td class='hideonmobile'>${freqsModesText}</td>`);
$tr.append(`<td class='hideonmobile'>${commentText}</td>`);
$tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid fa-${a["icon"]}'></i></span> ${sigSourceText}</td>`);
$tr.append(`<td class='hideonmobile'>${sig_refs}</td>`);
if (showStartTime) {
$tr.append(`<td class='nowrap'>${start_time_formatted}</td>`);
}
if (showEndTime) {
$tr.append(`<td class='nowrap'>${end_time_formatted}</td>`);
}
if (showDX) {
$tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span>${dx_calls_html}${dx_country_html}</td>`);
}
if (showFreqsModes) {
$tr.append(`<td class='hideonmobile'>${freqsModesText}</td>`);
}
if (showComment) {
$tr.append(`<td class='hideonmobile'>${commentText}</td>`);
}
if (showSource) {
$tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid fa-${a["icon"]}'></i></span> ${sigSourceText}</td>`);
}
if (showRef) {
$tr.append(`<td class='hideonmobile'>${sig_refs}</td>`);
}
tbody.append($tr);
// Second row for mobile view only, containing source, ref, freqs/modes & comment
$tr2 = $("<tr class='hidenotonmobile'>");
$tr2.append(`<td colspan="100"><span class='icon-wrapper'><i class='fa-solid fa-${a["icon"]}'></i></span> ${sig_refs} ${freqsModesText}<br/>${commentText}</td>`);
$td2 = $("<td colspan='100'>");
if (showSource) {
$td2.append(`<span class='icon-wrapper'><i class='fa-solid fa-${a["icon"]}'></i></span> `);
}
if (showRef) {
$td2.append(`${sig_refs} `);
}
if (showFreqsModes) {
$td2.append(`${freqsModesText} `);
}
if (showComment) {
$td2.append(`<br/>${commentText} `);
}
$tr2.append($td2);
tbody.append($tr2);
});
}