diff --git a/server/webserver.py b/server/webserver.py
index 11f5a74..91cc741 100644
--- a/server/webserver.py
+++ b/server/webserver.py
@@ -39,6 +39,7 @@ class WebServer:
# Routes for templated pages
bottle.get("/")(lambda: self.serve_template('webpage_spots'))
bottle.get("/map")(lambda: self.serve_template('webpage_map'))
+ bottle.get("/bands")(lambda: self.serve_template('webpage_bands'))
bottle.get("/alerts")(lambda: self.serve_template('webpage_alerts'))
bottle.get("/status")(lambda: self.serve_template('webpage_status'))
bottle.get("/about")(lambda: self.serve_template('webpage_about'))
@@ -224,6 +225,16 @@ class WebServer:
case "comment_includes":
comment_includes = query.get(k).strip()
spots = [s for s in spots if s.comment and comment_includes.upper() in s.comment.upper()]
+ case "allow_qrt":
+ # If false, spots that are flagged as QRT are not returned.
+ prevent_qrt = query.get(k).upper() == "FALSE"
+ if prevent_qrt:
+ spots = [s for s in spots if not s.qrt or s.qrt == False]
+ case "needs_location":
+ # If true, spots require a location to be returned
+ needs_location = query.get(k).upper() == "TRUE"
+ if needs_location:
+ spots = [s for s in spots if s.latitude and s.longitude]
case "dedupe":
# Ensure only the latest spot of each callsign is present in the list. This relies on the list being
# in reverse time order, so if any future change allows re-ordering the list, that should be done
diff --git a/views/webpage_bands.tpl b/views/webpage_bands.tpl
new file mode 100644
index 0000000..d4ff7cc
--- /dev/null
+++ b/views/webpage_bands.tpl
@@ -0,0 +1,124 @@
+% rebase('webpage_base.tpl')
+
+
+
+ What is Spothole? Spothole is an aggregator of amateur radio spots from DX clusters and outdoor activity programmes. It's free for anyone to use and includes an API that developers can build other applications on. For more information, check out the "About" page. If that sounds like nonsense to you, you can visit the FAQ section to learn more.
+
+
+
+
+
+
+
+
Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Filters
+
+
+
+
+
+
+
+
+
+
+
+
+
Bands
+
+
+
+
+
+
+
+
+
+
DX Continent
+
+
+
+
+
+
+
+
DE Continent
+
+
+
+
+
+
+
+
Modes
+
+
+
+
+
+
+
+
Sources
+
+
+
+
+
+
+
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+
+
+
+
+
Spot Age
+
Last
+
+ minutes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/views/webpage_base.tpl b/views/webpage_base.tpl
index 0dbd959..e76af61 100644
--- a/views/webpage_base.tpl
+++ b/views/webpage_base.tpl
@@ -59,6 +59,7 @@
diff --git a/webassets/apidocs/openapi.yml b/webassets/apidocs/openapi.yml
index 3e27ab7..44b508a 100644
--- a/webassets/apidocs/openapi.yml
+++ b/webassets/apidocs/openapi.yml
@@ -195,6 +195,20 @@ paths:
required: false
schema:
type: string
+ - name: needs_location
+ in: query
+ description: Return only spots with a location set.
+ required: false
+ schema:
+ type: boolean
+ default: false
+ - name: allow_qrt
+ in: query
+ description: Allow spots that are known to be QRT to be returned.
+ required: false
+ schema:
+ type: boolean
+ default: true
responses:
'200':
description: Success
diff --git a/webassets/css/style.css b/webassets/css/style.css
index b827ee3..9f2ebd7 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -156,7 +156,7 @@ div#map {
.hideonmobile {
display: none !important;
}
- div#map, div#table-container {
+ div#map, div#table-container, div#bands-container {
margin-left: -1em;
margin-right: -1em;
}
diff --git a/webassets/js/bands.js b/webassets/js/bands.js
new file mode 100644
index 0000000..4129333
--- /dev/null
+++ b/webassets/js/bands.js
@@ -0,0 +1,199 @@
+// Load spots and populate the bands display.
+function loadSpots() {
+ $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
+ // Store last updated time
+ lastUpdateTime = moment.utc();
+ updateRefreshDisplay();
+ // Store data
+ spots = jsonData;
+ // Update bands display
+ updateBands();
+ });
+}
+
+// Build a query string for the API, based on the filters that the user has selected.
+function buildQueryString() {
+ var str = "?";
+ ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
+ if (!allFilterOptionsSelected(fn)) {
+ str = str + getQueryStringFor(fn) + "&";
+ }
+ });
+ str = str + "max_age=" + $("#max-spot-age option:selected").val();
+ // Additional filters for the bands view: No dupes, no QRT
+ str = str + "&dedupe=true&allow_qrt=false";
+ return str;
+}
+
+// Update the bands display
+function updateBands() {
+ // Stop here if nothing to display
+ var bandsPanel = $("#bands-container");
+ if (spots.length === 0) {
+ // todo bootstrapify
+ bandsPanel.html("
There are no spots matching your filters.
");
+ return;
+ }
+
+ // Do some harsher de-duping. Because we only display callsign, frequency and mode here, the previous
+ // de-duplication could have let some through that don't look like dupes on the map, but would do here.
+ // Typically that's a person activating two programs at the same time, e.g. POTA & WWFF.
+ // todo fix from here
+ spotList = removeDuplicatesForBandPanel(spotList);
+
+ // Convert to a map of band names to the spots on that band. Bands with no
+ // spots in view will not be present.
+ const bandToSpots = new Map();
+ options["bands"].forEach(function (band) {
+ const matchingSpots = spots.filter(function (s) {
+ return s.band === band.name;
+ });
+ if (matchingSpots.length > 0) {
+ bandToSpots.set(band.name, matchingSpots);
+ }
+ });
+
+ // Build up HTML content for each band
+ let html = "";
+ const columnWidthPercent = Math.max(30, 100 / bandToSpots.size);
+ let columnIndex = 0;
+ bandToSpots.forEach(function (spotList, bandName) {
+ // Get the colours for the band from the first spot, and prepare the header
+ html += "
";
+ html += "
" + spotList[0].band + "
";
+ html += "
";
+
+ // Get the band data to fetch start and end frequencies
+ let band = options["bands"].filter(function (b) {
+ return b.name === bandName;
+ })[0];
+ // Start printing the band
+ const freqStep = (band.stopFreq - band.startFreq) / 40.0;
+ html += "
";
+ html += "
-
";
+
+ // Do 40 steps down the band
+ for (let i = 0; i <= 40; i++) {
+
+ // Work out if there are any spots in this step
+ const freqStepStart = band.startFreq + i * freqStep;
+ const freqStepEnd = freqStepStart + freqStep;
+ const spotsInStep = spotList.filter(function (s) {
+ // Normally we do >= start and < end, but in the special case where this is the last step and there is a spot
+ // right at the end of the band, we include this too
+ return s.freq >= freqStepStart && (s.freq < freqStepEnd || (s.freq === freqStepEnd && freqStepEnd === band.stopFreq));
+ });
+
+ if (spotsInStep.length > 0) {
+ // If this step has spots in it, print them
+ html += "
";
+ spotsInStep.sort((a, b) => (a.freq > b.freq) ? 1 : ((b.freq > a.freq) ? -1 : 0));
+ spotsInStep.forEach(function (s) {
+ // Figure out the class to use for the spot's div, which defines its colour.
+ let spotDivClass = "bandColSpotCurrent";
+ if (currentPopupSpotUID === s.uid) {
+ spotDivClass = "bandColSpotSelected";
+ } else if (preQSYStatusShouldShowGrey(s.preqsy)) {
+ spotDivClass = "bandColSpotOld";
+ }
+
+ html += "
";
+
+ } else {
+ // Step had no spots in it, so just print a marker. This is a frequency on multiples of 4, or a dash otherwise.
+ if (i % 4 === 0) {
+ html += "
—" + (band.startFreq + i * freqStep).toFixed(3) + "
";
+ } else if (i % 4 === 2) {
+ html += "
–
";
+ } else {
+ html += "
-
";
+ }
+ }
+ }
+ html += "
-
";
+ html += "
";
+
+ html += "
";
+ columnIndex++;
+ });
+ // Update the DOM with the band HTML
+ bandsPanel.html(html);
+
+ // Desktop mouse wheel to scroll bands horizontally if used on the headers
+ // noinspection JSDeprecatedSymbols
+ $(".bandColHeader").on("wheel", () => bandsPanel.scrollLeft(bandsPanel.scrollLeft() + event.deltaY / 10.0));
+
+}
+
+// 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/v1/options', function(jsonData) {
+ // Store options
+ options = jsonData;
+
+ // Add CSS for band toggle buttons
+ addBandToggleColourCSS(options["bands"]);
+
+ // Populate the filters panel
+ generateBandsMultiToggleFilterCard(options["bands"]);
+ generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
+ generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
+ generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
+ generateMultiToggleFilterCard("#source-options", "source", options["spot_sources"]);
+
+ // Load settings from settings storage now all the controls are available
+ loadSettings();
+
+ // Load spots and set up the timer
+ loadSpots();
+ setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
+ });
+}
+
+// Method called when any display property is changed to reload the map and persist the display settings.
+function displayUpdated() {
+ updateMap();
+ saveSettings();
+}
+
+// React to toggling/closing panels
+function toggleFiltersPanel() {
+ // If we are going to show the filters panel, hide the display panel
+ if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
+ $("#display-area").hide();
+ $("#display-button").button("toggle");
+ }
+ $("#filters-area").toggle();
+}
+function closeFiltersPanel() {
+ $("#filters-button").button("toggle");
+ $("#filters-area").hide();
+}
+
+function toggleDisplayPanel() {
+ // If we are going to show the display panel, hide the filters panel
+ if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
+ $("#filters-area").hide();
+ $("#filters-button").button("toggle");
+ }
+ $("#display-area").toggle();
+}
+function closeDisplayPanel() {
+ $("#display-button").button("toggle");
+ $("#display-area").hide();
+}
+
+// Startup
+$(document).ready(function() {
+ // Call loadOptions(), this will then trigger loading spots and setting up timers.
+ loadOptions();
+ // Update the refresh timing display every second
+ setInterval(updateRefreshDisplay, 1000);
+});
\ No newline at end of file
diff --git a/webassets/js/map.js b/webassets/js/map.js
index 41463c7..c6849d5 100644
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -3,7 +3,7 @@ var markersLayer;
var geodesicsLayer;
var terminator;
-// Load spots and populate the table.
+// Load spots and populate the map.
function loadSpots() {
$.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
// Store data
@@ -23,6 +23,8 @@ function buildQueryString() {
}
});
str = str + "max_age=" + $("#max-spot-age option:selected").val();
+ // Additional filters for the map view: No dupes, no QRT, only spots with locations
+ str = str + "&dedupe=true&allow_qrt=false&needs_location=true";
return str;
}
@@ -32,29 +34,20 @@ function updateMap() {
markersLayer.clearLayers();
geodesicsLayer.clearLayers();
- // Make new markers for all spots with a good location, not QRT, and not a duplicate spot within the data set.
- var callsAlreadyDisplayed = [];
+ // Make new markers for all spots that match the filter
spots.forEach(function (s) {
- if (s["dx_location_good"] && (s["qrt"] == null || s["qrt"] == false)) {
- if (!callsAlreadyDisplayed.includes(s["dx_call"])) {
+ var m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
+ m.bindPopup(getTooltipText(s));
+ markersLayer.addLayer(m);
- // OK, create the marker
- var m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
- m.bindPopup(getTooltipText(s));
- markersLayer.addLayer(m);
-
- // Create geodesics if required
- if ($("#mapShowGeodesics")[0].checked && s["de_latitude"] != null && s["de_longitude"] != null) {
- var geodesic = L.geodesic([[s["de_latitude"], s["de_longitude"]], m.getLatLng()], {
- color: s["band_color"],
- wrap: false,
- steps: 5
- });
- geodesicsLayer.addLayer(geodesic);
- }
-
- }
- callsAlreadyDisplayed.push(s["dx_call"]);
+ // Create geodesics if required
+ if ($("#mapShowGeodesics")[0].checked && s["de_latitude"] != null && s["de_longitude"] != null) {
+ var geodesic = L.geodesic([[s["de_latitude"], s["de_longitude"]], m.getLatLng()], {
+ color: s["band_color"],
+ wrap: false,
+ steps: 5
+ });
+ geodesicsLayer.addLayer(geodesic);
}
});
}