spothole/webassets/js/code.js

// How often to query the server?
const REFRESH_INTERVAL_SEC = 60;

// Storage for the options that the server gives us. This will define our filters.
var options = {};
// Last time we updated the spots list on display.
var lastUpdateTime;

// Load spots and populate the table.
function loadSpots() {
    $.getJSON('/api/spots', function(jsonData) {
        // Store last updated time
        lastUpdateTime = moment.utc();

        // Populate table with headers
        let headers = Object.keys(jsonData[0]);
        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", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));

        jsonData.forEach(row => {
          // Create row
          let $tr = $('<tr>');

          // Show in red if QRT
          if (row["qrt"] == true) {
            $tr.addClass("table-danger");
          }

          // Format a UTC time for display
          var time = moment.utc(row["time"], moment.ISO_8601);
          var time_formatted = time.format("HH:mm")

          // Populate the table data
          $tr.append(`<td>${time_formatted}</td>`);
          $tr.append(`<td>${row["dx_flag"]}&nbsp;${row["dx_call"]}</td>`);
          $tr.append(`<td>${row["freq"]}</td>`);
          $tr.append(`<td>${row["mode"]}</td>`);
          $tr.append('<td>' + escapeHtml(`${row["comment"]}`) + '</td>');
          $tr.append(`<td><span class='icon-wrapper'><i class='fa-solid fa-${row["icon"]}'></i></span> ${row["source"]}</td>`);
          $tr.append(`<td>${row["de_flag"]}&nbsp;${row["de_call"]}</td>`);
          table.find('tbody').append($tr);
        });

        // Update DOM
        $('#table-container').html(table);
        updateRefreshDisplay();
    });
}

// Load server status
function loadStatus() {
    $.getJSON('/api/status', function(jsonData) {
        $('#status-container').html(jsonData); // todo implement
    });
}

// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
// spots repeatedly.
function loadOptions() {
    $.getJSON('/api/options', function(jsonData) {
        options = jsonData;
        console.log(options); //todo remove
        loadSpots();
        setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
    });
}

// Update the refresh timing display
function updateRefreshDisplay() {
    if (lastUpdateTime != null) {
        let count = REFRESH_INTERVAL_SEC;
        let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
        updatingString = "Updating..."
        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
            updatingString = "Updating in " + count.toFixed(0) + " seconds...";
        }
        $("#timing-container").text("Last updated at " + lastUpdateTime.format('hh:mm') + " UTC. " + updatingString);
    }
}

// Utility function to escape HTML characters from a string.
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);
}


// Startup. Call loadOptions(), this will then trigger loading spots and setting up timers.
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);