mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2025-10-27 08:49:27 +00:00
Allow table columns to be toggled on and off. #19
This commit is contained in:
Ian Renton
@@ -34,16 +34,46 @@ function updateTable() {
|
||||
// Use local time instead of UTC?
|
||||
var useLocalTime = $("#timeZone")[0].value == "local";
|
||||
|
||||
// Get user grid if valid, this will be null if it's not.
|
||||
var userPos = latLonForGridCentre($("#userGrid").val());
|
||||
|
||||
// Table data toggles
|
||||
var showTime = $("#tableShowTime")[0].checked;
|
||||
var showDX = $("#tableShowDX")[0].checked;
|
||||
var showFreq = $("#tableShowFreq")[0].checked;
|
||||
var showMode = $("#tableShowMode")[0].checked;
|
||||
var showComment = $("#tableShowComment")[0].checked;
|
||||
var showBearing = $("#tableShowBearing")[0].checked && userPos != null;
|
||||
var showSource = $("#tableShowSource")[0].checked;
|
||||
var showRef = $("#tableShowRef")[0].checked;
|
||||
var showDE = $("#tableShowDE")[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 ? "Local" : "UTC"}</th>`);
|
||||
table.find('thead tr').append(`<th>DX</th>`);
|
||||
table.find('thead tr').append(`<th>Freq<span class='hideonmobile'>uency</span></th>`);
|
||||
table.find('thead tr').append(`<th>Mode</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>`);
|
||||
table.find('thead tr').append(`<th class='hideonmobile'>DE</th>`);
|
||||
if (showTime) {
|
||||
table.find('thead tr').append(`<th>${useLocalTime ? "Local" : "UTC"}</th>`);
|
||||
}
|
||||
if (showDX) {
|
||||
table.find('thead tr').append(`<th>DX</th>`);
|
||||
}
|
||||
if (showFreq) {
|
||||
table.find('thead tr').append(`<th>Freq<span class='hideonmobile'>uency</span></th>`);
|
||||
}
|
||||
if (showMode) {
|
||||
table.find('thead tr').append(`<th>Mode</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>`);
|
||||
}
|
||||
if (showDE) {
|
||||
table.find('thead tr').append(`<th class='hideonmobile'>DE</th>`);
|
||||
}
|
||||
|
||||
if (spots.length == 0) {
|
||||
table.find('tbody').append('<tr class="table-danger"><td colspan="100" style="text-align:center;">No spots match your filters.</td></tr>');
|
||||
@@ -142,14 +172,30 @@ function updateTable() {
|
||||
var bandFullName = s['band'] ? s['band'] + " band": "Unknown band";
|
||||
|
||||
// Populate the row
|
||||
$tr.append(`<td class='nowrap'>${time_formatted}</td>`);
|
||||
$tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span><a class='dx-link' href='https://qrz.com/db/${s["dx_call"]}' target='_new'>${s["dx_call"]}</a></td>`);
|
||||
$tr.append(`<td class='nowrap'><span class='band-bullet band-bullet-${cssFormattedBandName}' title='${bandFullName}'>■</span>${freq_string}</td>`);
|
||||
$tr.append(`<td class='nowrap'>${mode_string}</td>`);
|
||||
$tr.append(`<td class='hideonmobile'>${commentText}</td>`);
|
||||
$tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${sigSourceText}</td>`);
|
||||
$tr.append(`<td class='hideonmobile'><span ${sig_refs_title_string}>${sig_refs}</span></td>`);
|
||||
$tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${de_call}</td>`);
|
||||
if (showTime) {
|
||||
$tr.append(`<td class='nowrap'>${time_formatted}</td>`);
|
||||
}
|
||||
if (showDX) {
|
||||
$tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span><a class='dx-link' href='https://qrz.com/db/${s["dx_call"]}' target='_new'>${s["dx_call"]}</a></td>`);
|
||||
}
|
||||
if (showFreq) {
|
||||
$tr.append(`<td class='nowrap'><span class='band-bullet band-bullet-${cssFormattedBandName}' title='${bandFullName}'>■</span>${freq_string}</td>`);
|
||||
}
|
||||
if (showMode) {
|
||||
$tr.append(`<td class='nowrap'>${mode_string}</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-${s["icon"]}'></i></span> ${sigSourceText}</td>`);
|
||||
}
|
||||
if (showRef) {
|
||||
$tr.append(`<td class='hideonmobile'><span ${sig_refs_title_string}>${sig_refs}</span></td>`);
|
||||
}
|
||||
if (showDE) {
|
||||
$tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${de_call}</td>`);
|
||||
}
|
||||
table.find('tbody').append($tr);
|
||||
|
||||
// Second row for mobile view only, containing source, ref & comment
|
||||
@@ -157,7 +203,17 @@ function updateTable() {
|
||||
if (s["qrt"] == true) {
|
||||
$tr2.addClass("table-faded");
|
||||
}
|
||||
$tr2.append(`<td colspan="100"><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${sig_refs} ${commentText}</td>`);
|
||||
$td2 = $("<td colspan='100'>");
|
||||
if (showSource) {
|
||||
$td2.append(`<span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> `);
|
||||
}
|
||||
if (showRef) {
|
||||
$td2.append(`${sig_refs} `);
|
||||
}
|
||||
if (showComment) {
|
||||
$td2.append(`${commentText} `);
|
||||
}
|
||||
$tr2.append($td2);
|
||||
table.find('tbody').append($tr2);
|
||||
});
|
||||
|
||||
@@ -182,9 +238,17 @@ function loadOptions() {
|
||||
$("#filters-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"]));
|
||||
$("#filters-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"]));
|
||||
|
||||
// Load filters from settings storage
|
||||
// Load settings from settings storage now all the controls are available
|
||||
loadSettings();
|
||||
|
||||
// Extra setting - the toggle for the "bearing" column is disabled if the user has not entered a valid grid, and
|
||||
// normally this logic is handled on user input to the grid field, but we might have just loaded a value direct
|
||||
// into the field, so apply the same logic here.
|
||||
$("#tableShowBearing").prop('disabled', !isUserGridValid());
|
||||
if (!isUserGridValid()) {
|
||||
$("#tableShowBearing").prop('checked', false);
|
||||
}
|
||||
|
||||
// Load spots and set up the timer
|
||||
loadSpots();
|
||||
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
|
||||
@@ -228,12 +292,33 @@ function generateBandsMultiToggleFilterCard(band_options) {
|
||||
return $col;
|
||||
}
|
||||
|
||||
// Work out if the user's entered grid is a valid Maidenhead grid
|
||||
function isUserGridValid() {
|
||||
userGrid = $("#userGrid").val().toUpperCase();
|
||||
return latLonForGridCentre(userGrid) != null;
|
||||
}
|
||||
|
||||
// Method called when any filter is changed to reload the spots and persist the filter settings.
|
||||
function filtersUpdated() {
|
||||
loadSpots();
|
||||
saveSettings();
|
||||
}
|
||||
|
||||
// Method called when the user's grid input is changed.
|
||||
function userGridUpdated() {
|
||||
var userGridValid = isUserGridValid();
|
||||
if (userGridValid) {
|
||||
updateTable();
|
||||
}
|
||||
// Enable/disable bearing column depending on grid validity
|
||||
$("#tableShowBearing").prop('disabled', !userGridValid);
|
||||
if (!userGridValid) {
|
||||
$("#tableShowBearing").prop('checked', false);
|
||||
}
|
||||
// Save settings even if not a valid grid, this allows the user to clear their grid and have it save.
|
||||
saveSettings();
|
||||
}
|
||||
|
||||
// React to toggling/closing panels
|
||||
function toggleFiltersPanel() {
|
||||
// If we are going to display the filters panel, hide the display panel
|
||||
|
||||
Reference in New Issue
Block a user