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

Fix table display on mobile #20, fix typo

Browse Source
This commit is contained in:
Ian Renton
2025-10-03 16:36:40 +01:00
parent 61c44255a1
commit 62761d459f
5 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
webassets/js/code.js
View File

@@ -59,8 +59,15 @@ function allFilterOptionsSelected(parameter) {
// Update the spots table
function updateTable() {
// Populate table with headers
let table = $('<table class="table table-striped table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
["UTC", "DX", "Frequency", "Mode", "Comment", "Source", "Ref.", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
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>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 (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>');
@@ -70,7 +77,7 @@ function updateTable() {
// Create row
let $tr = $('<tr>');
// Show in red if QRT
// Show faded out if QRT
if (s["qrt"] == true) {
$tr.addClass("table-faded");
}
@@ -90,7 +97,7 @@ function updateTable() {
var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
var hz_string = (hz > 0) ? hz.toFixed(0) : "";
var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz'>${hz_string}</span>`
var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz hideonmobile'>${hz_string}</span>`
// Format the mode
mode_string = s["mode"];
@@ -98,7 +105,7 @@ function updateTable() {
mode_string = "???"
}
if (s["mode_source"] == "BANDPLAN") {
mode_string = mode_string + "<span class='mode-q'><i class='fa-solid fa-circle-question' title='The mode was not reported via the spotting service. This is a guess based on the frequency.'></i></span>"
mode_string = mode_string + "<span class='mode-q hideonmobile'><i class='fa-solid fa-circle-question' title='The mode was not reported via the spotting service. This is a guess based on the frequency.'></i></span>"
}
// Format comment
@@ -132,14 +139,22 @@ function updateTable() {
// Populate the row
$tr.append(`<td class='nowrap'>${time_formatted}</td>`);
$tr.append(`<td class='nowrap'><span class='flag-wrapper' title='${dx_country}'>${s["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='flag-wrapper hideonmobile' title='${dx_country}'>${s["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}'>&#9632;</span>${freq_string}</td>`);
$tr.append(`<td class='nowrap'>${mode_string}</td>`);
$tr.append(`<td>${commentText}</td>`);
$tr.append(`<td class='nowrap'><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${s["source"]}</td>`);
$tr.append(`<td class='nowrap'>${sig_refs}</td>`);
$tr.append(`<td class='nowrap'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${s["de_call"]}</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> ${s["source"]}</td>`);
$tr.append(`<td class='nowrap hideonmobile'>${sig_refs}</td>`);
$tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${s["de_call"]}</td>`);
table.find('tbody').append($tr);
// Second row for mobile view only, containing source, ref & comment
$tr2 = $("<tr class='hidenotonmobile'>");
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>`);
table.find('tbody').append($tr2);
});
// Update DOM