mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2025-12-13 07:33:39 +00:00
Compare commits
5 Commits
ca31d23b4a
...
210a0564aa
| Author | SHA1 | Date | |
|---|---|---|---|
|
210a0564aa | ||
|
|
03af6858b4 | ||
|
|
e86d6b8c28 | ||
|
|
9d130712d8 | ||
|
|
8a82f81ec4 |
63
README.md
63
README.md
@@ -16,11 +16,56 @@ Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), th
|
||||
|
||||
|
||||
|
||||
### Accessing the public version
|
||||
## Accessing the public version
|
||||
|
||||
You can access the public version's web interface at [https://spothole.app](https://spothole.app), and see [https://spothole.app/apidocs](https://spothole.app/apidocs) for the API details.
|
||||
|
||||
### Running your own copy
|
||||
This is a Progressive Web App, so you can also "install" it to your Android or iOS device by accessing it in Chrome or Safari respectively, and following the menu-driven process for installing PWAs.
|
||||
|
||||
## Embedding Spothole in another website
|
||||
|
||||
You can embed Spothole in another website, e.g. for use as part of a ham radio custom dashboard.
|
||||
|
||||
URL parameters can be used to trigger an "embedded" mode which hides the headers, footers and settings. In this mode, you provide configuration for the various filter and display options via additional URL parameters. Any settings that the user has set for Spothole are ignored. This is so that the embedding site can select, for example, their choice of dark mode or SIG filters, which will not impact how Spothole appears when the user accesses it directly. Effectively, it becomes separate to their normal Spothole settings.
|
||||
|
||||
Setting `embedded` to true is important for the rest of the settings to be applied; otherwise, the user's defaults will be used in preference to the URL params.
|
||||
|
||||
These are supplied with the URL to the page you want to embed, for example for an embedded version of the band map in dark mode, use `https://spothole.com/bands?embedded=true&dark-mode=true`. For an embedded version of the main spots/home page in the system light/dark mode, use `https://spothole.com/?embedded=true`. For dark mode showing 70cm TOTA spots only, use `https://spothole.com/?embedded=true&dark-mode=true&filter-sigs=TOTA&filter-bands=70cm`. Providing no URL params causes the page to be loaded in the normal way it would when accessed directly in the user's browser.
|
||||
|
||||
The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
|
||||
|
||||
| Name | Allowed Values | Default | Example | Description |
|
||||
|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. |
|
||||
| `dark-mode` | `true`, `false` | `false` | `?dark-mode=true` | Enables dark mode. |
|
||||
| `time-zone` | `UTC`, `local` | `UTC` | `?time-zone=local` | Sets times to be in UTC or local time. |
|
||||
| `limit` | 10, 25, 50, 100 | 50 | `?limit=50` | Sets the number of spots that will be displayed on the main spots page |
|
||||
| `limit` | 25, 50, 100, 200, 500 | 100 | `?limit=100` | Sets the number of alerts that will be displayed on the alerts page |
|
||||
| `max_age` | 300, 600, 1800, 3600 | 1800 | `?max_age=1800` | Sets the maximum age of spots displayed on the map and bands pages, in seconds. |
|
||||
| `band` | Comma-separated list | (all) | `?band=20m,40m` | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
| `sig` | Comma-separated list | (all) | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
| `source` | Comma-separated list | (all) | `?source=Cluster` | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
| `mode_type` | Comma-separated list | (all) | `?mode_type=PHONE,CW` | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
| `dx_continent` | Comma-separated list | (all) | `?dx_continent=NA,SA` | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
| `de_continent` | Comma-separated list | (all) | `?de_continent=EU` | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
|
||||
|
||||
More will be added soon to allow customisation of filters and other display properties.
|
||||
|
||||
## Writing your own client
|
||||
|
||||
One of the key strengths of Spothole is that the API is well-defined and open to anyone to use. This means you can build your own software that uses data from Spothole.
|
||||
|
||||
Various approaches exist to writing your own client, but in general:
|
||||
|
||||
* Refer to the API docs. These are built on an OpenAPI definition file (`/webassets/apidocs/openapi.yml`), which you can automatically use to generate a client skeleton using various software.
|
||||
* Call the main "spots" or "alerts" API endpoints to get the data you want. Apply filters if necessary.
|
||||
* Call the "options" API to get an idea of which bands, modes etc. the server knows about. You might want to do that first before calling the spots/alerts APIs, to allow you to populate your filters correctly.
|
||||
* Refer to the provided HTML/JS interface for a reference
|
||||
* Let me know if you get stuck, I'm happy to help!
|
||||
|
||||
## Running your own copy
|
||||
|
||||
If you want to run a copy of Spothole with different configuration settings than the main instance, you can download it and run it on your own local machine or server.
|
||||
|
||||
To download and set up Spothole on a Debian server, run the following commands. Other operating systems will likely be similar.
|
||||
|
||||
@@ -139,17 +184,11 @@ You should now be able to access the web interface by going to the domain from y
|
||||
|
||||
Once that's working, [install certbot](https://certbot.eff.org/instructions?ws=nginx&os=snap) onto your server. Run it as root, and when prompted pick your domain name from the list. After a few seconds, it should successfully provision a certificate and modify your nginx config files automatically. You should then be able to access the site via HTTPS.
|
||||
|
||||
### Writing your own client
|
||||
## Modifying the source code
|
||||
|
||||
Various approaches exist to writing your own client, but in general:
|
||||
Spothole is Public Domain licenced, so you can grab the source code and start modifying it for your own needs. Contributions of code back to the main repository are encouraged, but completely optional.
|
||||
|
||||
* Refer to the API docs. These are built on an OpenAPI definition file (`/webassets/apidocs/openapi.yml`), which you can automatically use to generate a client skeleton using various software.
|
||||
* Call the main "spots" or "alerts" API endpoints to get the data you want. Apply filters if necessary.
|
||||
* Call the "options" API to get an idea of which bands, modes etc. the server knows about. You might want to do that first before calling the spots/alerts APIs, to allow you to populate your filters correctly.
|
||||
* Refer to the provided HTML/JS interface for a reference
|
||||
* Let me know if you get stuck, I'm happy to help!
|
||||
|
||||
### Structure of the source code
|
||||
### Code structure
|
||||
|
||||
To navigate your way around the source code, this list may help.
|
||||
|
||||
@@ -198,7 +237,7 @@ Finally, simply add the appropriate config to the `spot_providers` section of `c
|
||||
|
||||
The same approach as above is also used for alert providers.
|
||||
|
||||
### Thanks
|
||||
## Thanks
|
||||
|
||||
As well as being my work, I have also gratefully received feature patches from Steven, M1SDH.
|
||||
|
||||
|
||||
@@ -47,7 +47,8 @@ class WOTA(HTTPSpotProvider):
|
||||
freq_mode = desc_split[0].replace("Frequencies/modes:", "").strip()
|
||||
freq_mode_split = re.split(r'[\-\s]+', freq_mode)
|
||||
freq_hz = float(freq_mode_split[0]) * 1000000
|
||||
mode = freq_mode_split[1].upper()
|
||||
if len(freq_mode_split) > 1:
|
||||
mode = freq_mode_split[1].upper()
|
||||
|
||||
comment = None
|
||||
if len(desc_split) > 1:
|
||||
|
||||
@@ -3,11 +3,19 @@
|
||||
<div id="info-container" class="mt-4">
|
||||
<h2 class="mt-4 mb-4">About Spothole</h2>
|
||||
<p>Spothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.</p>
|
||||
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
|
||||
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, Spothole differentiates itself by supporting a larger number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
|
||||
<p>The API is deliberately well-defined with an <a href="/apidocs/openapi.yml">OpenAPI specification</a> and <a href="/apidocs">API documentation</a>. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data.</p>
|
||||
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>. If you want to run your own copy of Spothole, or start modifying it for your own purposes, the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a> contains a description of how the software works and how it's laid out, as well as instructions for configuring systemd, nginx and anything else you might need to run your own server.</p>
|
||||
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full details are available in the README.</p>
|
||||
<p>Spothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>.</p>
|
||||
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a> and other contributors. Full details are available in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</p>
|
||||
<p>This server is running Spothole version {{software_version}}.</p>
|
||||
<h2 class="mt-4 mb-4">Using Spothole</h2>
|
||||
<p>There are a number of different ways to use Spothole, depending on what you want to do with it and your level of technical skill:</p>
|
||||
<ol><li>You can <b>use it on the web</b>, like you are (probably) doing right now. This is how most people use it, to look up spots and alerts, and make interesting QSOs.</li>
|
||||
<li>If you are using an Android or iOS device, you can <b>"install" it on your device</b>. Spothole is a Progressive Web App, meaning it's not delivered through app stores, but if you open the page on Chrome (Android) or Safari (iOS) there will be an option in the menu to install it. It will then appear in your main app menu.</li>
|
||||
<li>You can <b>embed the web interface in another website</b> to show its spots in a custom dashboard or the like. The usage is explained in more detail in the <a href="https://git.ianrenton.com/ian/spothole/src/branch/main/README.md">README file</a>.</li>
|
||||
<li>You can <b>write your own client using the Spothole API</b>, using the main Spothole instance to provide data, and do whatever you like with it. The README contains guidance on how to do this, and the full API docs are linked above. You can also find reference implementations in the form of Spothole's own web-based front end, plus my other two tools built on Spothole: <a href="https://fieldspotter.radio">Field Spotter</a> and the <a href="https://qsomap.m0trt.radio">QSO Map Tool</a>.</li>
|
||||
<li>If you want to <b>run your own version of Spothole</b> so you can customise the configuration, such as enabling sources that I disable on the main instance, you can do that too. The README contains not only advice on how to set up Spothole but how to get it auto-starting with systemd, using an nginx reverse proxy, and setting up HTTPS support with certbot.</li>
|
||||
<li>Finally, you can of course download the source code and <b>develop Spothole to meet your needs</b>. Whether you contribute your changes back to the main repository is up to you. As usual, the README file contains some advice on the structure of the repository, and how to get started writing your own spot provider.</li></ol>
|
||||
<h2 id="faq" class="mt-4">FAQ</h2>
|
||||
<h4 class="mt-4">"Spots"? "DX Clusters"? What does any of this mean?</h4>
|
||||
<p>This is a tool for amateur ("ham") radio users. Many amateur radio operators like to make contacts with others who are doing something more interesting than sitting in their home "shack", such as people in rarely-seen countries, remote islands, or on mountaintops. Such operators are often "spotted", i.e. when someone speaks to them, they will put the details such as their operating frequency into an online system, to let others know where to find them. A DX Cluster is one type of those systems. Most outdoor radio awards programmes, such as "Parks on the Air" (POTA) have their own websites for posting spots.</p>
|
||||
@@ -54,4 +62,5 @@
|
||||
<p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
|
||||
</div>
|
||||
|
||||
<script src="/js/common.js"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
@@ -1,7 +1,7 @@
|
||||
% rebase('webpage_base.tpl')
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row">
|
||||
<div id="settingsButtonRow" class="row">
|
||||
<div class="col-auto me-auto pt-3">
|
||||
<p id="timing-container">Loading...</p>
|
||||
</div>
|
||||
@@ -107,6 +107,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Theme</h5>
|
||||
<div class="form-group">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
|
||||
<label class="form-check-label" for="darkMode">Dark mode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
% rebase('webpage_base.tpl')
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row">
|
||||
<div id="settingsButtonRow" class="row">
|
||||
<div class="col-auto me-auto pt-3">
|
||||
<p id="timing-container">Loading...</p>
|
||||
</div>
|
||||
@@ -107,6 +107,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Theme</h5>
|
||||
<div class="form-group">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
|
||||
<label class="form-check-label" for="darkMode">Dark mode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="color-scheme" content="light">
|
||||
<meta name="theme-color" content="white"/>
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
|
||||
|
||||
<meta property="og:title" content="Spothole"/>
|
||||
<meta property="twitter:title" content="Spothole"/>
|
||||
@@ -48,15 +46,15 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg bg-body p-0 border-bottom">
|
||||
<nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
|
||||
<div class="container-fluid p-0">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/img/logo.png" width="192" height="60" alt="Spothole">
|
||||
<img src="/img/logo.png" class="logo" width="192" height="60" alt="Spothole">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler-content" aria-controls="navbar-toggler-content" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<div class="collapse navbar-collapse" id="navbar-toggler-content">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item ms-4"><a href="/" class="nav-link" id="nav-link-spots"><i class="fa-solid fa-tower-cell"></i> Spots</a></li>
|
||||
<li class="nav-item ms-4"><a href="/map" class="nav-link" id="nav-link-map"><i class="fa-solid fa-map"></i> Map</a></li>
|
||||
@@ -79,7 +77,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
<div class="hideonmobile hideonmap">
|
||||
<div id="footer" class="hideonmobile hideonmap">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
|
||||
<p class="col-md-4 mb-0 justify-content-center text-body-secondary" style="text-align: center;">Spothole v{{software_version}}</p>
|
||||
@@ -101,5 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
% rebase('webpage_base.tpl')
|
||||
|
||||
<div id="map">
|
||||
<div id="maptools" class="mt-3 px-3" style="z-index: 1002; position: relative;">
|
||||
<div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
|
||||
<div class="row">
|
||||
<div class="col-auto me-auto pt-3"></div>
|
||||
<div class="col-auto">
|
||||
@@ -119,6 +119,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Theme</h5>
|
||||
<div class="form-group">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
|
||||
<label class="form-check-label" for="darkMode">Dark mode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="row">
|
||||
<div id="settingsButtonRow" class="row">
|
||||
<div class="col-auto me-auto pt-3">
|
||||
<p id="timing-container">Loading...</p>
|
||||
</div>
|
||||
@@ -131,6 +131,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location</h5>
|
||||
<div class="form-group spothole-card-text">
|
||||
<label for="userGrid">Your grid:</label>
|
||||
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Theme</h5>
|
||||
<div class="form-group">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
|
||||
<label class="form-check-label" for="darkMode">Dark mode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -176,17 +200,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location</h5>
|
||||
<div class="form-group spothole-card-text">
|
||||
<label for="userGrid">Your grid:</label>
|
||||
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,38 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* In embedded mode, hide header/footer/settings. "#header div" is kind of janky but for some reason if we hide the
|
||||
whole of #header, the map vertical sizing breaks. */
|
||||
[embedded-mode=true] #header div, [embedded-mode=true] #footer,
|
||||
[embedded-mode=true] #settingsButtonRow, [embedded-mode=true] #settingsButtonRowMap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Display floating footer in embedded mode only */
|
||||
#embeddedModeFooter {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: var(--bs-body-bg);
|
||||
border-radius: 1em 0 0 0;
|
||||
font-size: 0.9em;
|
||||
border-top: 1px solid grey;
|
||||
border-left: 1px solid grey;
|
||||
}
|
||||
[embedded-mode=true] #embeddedModeFooter {
|
||||
display: block;
|
||||
}
|
||||
#embeddedModeFooter img.logo {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
/* Invert logo colours in dark mode */
|
||||
[data-bs-theme=dark] .logo {
|
||||
filter: invert(100%) hue-rotate(180deg) brightness(80%);
|
||||
}
|
||||
|
||||
|
||||
/* INTRO/WARNING BOXES */
|
||||
|
||||
@@ -26,8 +58,13 @@ div.container {
|
||||
min-height:100svh;
|
||||
}
|
||||
|
||||
[embedded-mode=true] div.container {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* ABOUT PAGE*/
|
||||
|
||||
/* ABOUT PAGE */
|
||||
|
||||
#info-container{
|
||||
width: 100%;
|
||||
@@ -137,6 +174,18 @@ tr.table-faded td span {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
/* Fudge apply our own "dark primary" and "dark danger" backgrounds as Bootstrap doesn't do this itself */
|
||||
[data-bs-theme=dark] tr.table-primary {
|
||||
--bs-table-bg: #053680;
|
||||
--bs-table-border-color: #021b42;
|
||||
--bs-table-color: white;
|
||||
}
|
||||
[data-bs-theme=dark] tr.table-danger {
|
||||
--bs-table-bg: #74272e;
|
||||
--bs-table-border-color: #530208;
|
||||
--bs-table-color: white;
|
||||
}
|
||||
|
||||
|
||||
/* MAP */
|
||||
div#map {
|
||||
@@ -152,6 +201,12 @@ div#map {
|
||||
font-family: var(--bs-body-font-family) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] .leaflet-layer,
|
||||
[data-bs-theme=dark] .leaflet-control-attribution {
|
||||
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* BANDS PANEL */
|
||||
|
||||
@@ -227,6 +282,10 @@ div.band-spot {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] div.band-spot {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
div.band-spot:hover {
|
||||
z-index: 999;
|
||||
}
|
||||
@@ -261,10 +320,10 @@ div.band-spot:hover span.band-spot-info {
|
||||
margin-right: -1em;
|
||||
}
|
||||
/* Avoid map page filters panel being larger than the map itself */
|
||||
#maptools .appearing-panel {
|
||||
#settingsButtonRowMap .appearing-panel {
|
||||
max-height: 30em;
|
||||
}
|
||||
#maptools .appearing-panel .card-body {
|
||||
#settingsButtonRowMap .appearing-panel .card-body {
|
||||
max-height: 26em;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@ function updateTable() {
|
||||
var showRef = $("#tableShowRef")[0].checked;
|
||||
|
||||
// Populate table with headers
|
||||
let table = $('<table class="table table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
|
||||
let table = $('<table class="table">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
|
||||
if (showStartTime) {
|
||||
table.find('thead tr').append(`<th>${useLocalTime ? "Start (Local)" : "Start UTC"}</th>`);
|
||||
}
|
||||
@@ -292,6 +292,11 @@ function loadOptions() {
|
||||
})));
|
||||
$("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]);
|
||||
|
||||
// Load URL params. These may select things from the various filter & display options, so the function needs
|
||||
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
|
||||
// loading settings, so this needs to be called before that.
|
||||
loadURLParams();
|
||||
|
||||
// Load filters from settings storage
|
||||
loadSettings();
|
||||
|
||||
@@ -307,6 +312,12 @@ function filtersUpdated() {
|
||||
saveSettings();
|
||||
}
|
||||
|
||||
// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
|
||||
function toggleDarkMode() {
|
||||
enableDarkMode($("#darkMode")[0].checked);
|
||||
saveSettings();
|
||||
}
|
||||
|
||||
// React to toggling/closing panels
|
||||
function toggleFiltersPanel() {
|
||||
// If we are going to display the filters panel, hide the display panel
|
||||
|
||||
@@ -243,6 +243,11 @@ function loadOptions() {
|
||||
})));
|
||||
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
|
||||
|
||||
// Load URL params. These may select things from the various filter & display options, so the function needs
|
||||
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
|
||||
// loading settings, so this needs to be called before that.
|
||||
loadURLParams();
|
||||
|
||||
// Load settings from settings storage now all the controls are available
|
||||
loadSettings();
|
||||
|
||||
|
||||
@@ -2,7 +2,71 @@
|
||||
var options = {};
|
||||
// Last time we updated the spots/alerts list on display.
|
||||
var lastUpdateTime;
|
||||
// Whether "embedded mode" is being used. This removes headers and footers, maximises the remaining content, and
|
||||
// uses URL params to configure the interface options rather than using the user's localstorage.
|
||||
var embeddedMode = false;
|
||||
|
||||
// Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
|
||||
// Spothole and provide its own interface options rather than using the user's saved ones. These may select things
|
||||
// from the various filter & display options, so this function needs to be called after these are set up, but if
|
||||
// the URL params ask for "embedded mode", this will suppress loading settings, so this needs to be called before
|
||||
// that occurs..
|
||||
function loadURLParams() {
|
||||
let params = new URLSearchParams(document.location.search);
|
||||
|
||||
// Handle embedded mode. We set a global to e.g. suppress loading/saving settings, and apply an attribute to the
|
||||
// top-level html element to use CSS selectors to remove bits of UI.
|
||||
let embedded = params.get("embedded");
|
||||
if (embedded != null && embedded === "true") {
|
||||
embeddedMode = true;
|
||||
$("html").attr("embedded-mode", "true");
|
||||
}
|
||||
|
||||
// Handle other params
|
||||
updateCheckboxFromParam(params, "dark-mode", "darkMode");
|
||||
enableDarkMode($("#darkMode")[0].checked);
|
||||
updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
|
||||
updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
|
||||
updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
|
||||
updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
|
||||
updateFilterFromParam(params, "band", "band");
|
||||
updateFilterFromParam(params, "sig", "sig");
|
||||
updateFilterFromParam(params, "source", "source");
|
||||
updateFilterFromParam(params, "mode_type", "mode_type");
|
||||
updateFilterFromParam(params, "dx_continent", "dx_continent");
|
||||
updateFilterFromParam(params, "de_continent", "de_continent");
|
||||
}
|
||||
|
||||
// Update an HTML checkbox element so that its selected matches the given parameter (which must have a true or false value)
|
||||
function updateCheckboxFromParam(params, paramName, checkboxID) {
|
||||
let v = params.get(paramName);
|
||||
if (v != null) {
|
||||
$("#" + checkboxID).prop("checked", (v === "true") ? true : false);
|
||||
}
|
||||
}
|
||||
|
||||
// Update an HTML select element so that its value matches the given parameter
|
||||
function updateSelectFromParam(params, paramName, selectID) {
|
||||
let v = params.get(paramName);
|
||||
if (v != null) {
|
||||
$("#" + selectID).prop("value", v);
|
||||
}
|
||||
}
|
||||
|
||||
// Update a set of HTML checkbox elements describing a filter of the given name, so that any items named in the
|
||||
// parameter (as a comma-separated list) will be enabled, and all others disabled. e.g. if paramName is
|
||||
// "filter-band" and the params contain "filter-band=20m,40m", and prefix is "band", then #filter-button-band-30m
|
||||
// would be disabled but #filter-button-band-20m and #filter-button-band-40m would be enabled.
|
||||
function updateFilterFromParam(params, paramName, filterName) {
|
||||
let v = params.get(paramName);
|
||||
if (v != null) {
|
||||
// First uncheck all options for the filter
|
||||
$(".filter-button-" + filterName).prop("checked", false);
|
||||
// Now find out which ones should be enabled
|
||||
let s = v.split(",");
|
||||
s.forEach(val => $("#filter-button-" + filterName + "-" + val).prop("checked", true));
|
||||
}
|
||||
}
|
||||
|
||||
// For a parameter, such as dx_continent, get the query string for the current filter options.
|
||||
function getQueryStringFor(parameter) {
|
||||
@@ -199,29 +263,57 @@ function latLonForGridSWCornerPlusSize(grid) {
|
||||
return [lat, lon, latCellSize, lonCellSize];
|
||||
}
|
||||
|
||||
// Save settings to local storage
|
||||
function saveSettings() {
|
||||
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
|
||||
// property. For a checkbox, that's the "checked" property.
|
||||
$(".storeable-checkbox").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
|
||||
});
|
||||
$(".storeable-select").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
$(".storeable-text").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
// Function to set dark mode on or off
|
||||
function enableDarkMode(dark) {
|
||||
$("html").attr("data-bs-theme", dark ? "dark" : "light");
|
||||
}
|
||||
|
||||
// Load settings from local storage and set up the filter selectors
|
||||
function loadSettings() {
|
||||
// Find all local storage entries and push their data to the corresponding UI element
|
||||
Object.keys(localStorage).forEach(function(key) {
|
||||
if (key.startsWith("#") && key.includes(":")) {
|
||||
// Split the key back into an element ID and a property
|
||||
var split = key.split(":");
|
||||
$(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
|
||||
}
|
||||
});
|
||||
// Startup function to determine whether to use light or dark mode
|
||||
function usePreferredTheme() {
|
||||
// First, work out if we have ever explicitly saved the value of our toggle
|
||||
let val = localStorage.getItem("#darkMode:checked");
|
||||
if (val != null) {
|
||||
enableDarkMode(JSON.parse(val));
|
||||
} else {
|
||||
// Never set it before, so use the system default theme and set the toggle up to match
|
||||
let dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
enableDarkMode(dark);
|
||||
$("#darkMode").prop('checked', dark);
|
||||
}
|
||||
}
|
||||
|
||||
// Save settings to local storage. Suppressed if "embedded mode" is in use.
|
||||
function saveSettings() {
|
||||
if (!embeddedMode) {
|
||||
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
|
||||
// property. For a checkbox, that's the "checked" property.
|
||||
$(".storeable-checkbox").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
|
||||
});
|
||||
$(".storeable-select").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
$(".storeable-text").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load settings from local storage and set up the filter selectors. Suppressed if "embedded mode" is in use.
|
||||
function loadSettings() {
|
||||
if (!embeddedMode) {
|
||||
// Find all local storage entries and push their data to the corresponding UI element
|
||||
Object.keys(localStorage).forEach(function(key) {
|
||||
if (key.startsWith("#") && key.includes(":")) {
|
||||
// Split the key back into an element ID and a property
|
||||
var split = key.split(":");
|
||||
$(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Startup
|
||||
$(document).ready(function() {
|
||||
usePreferredTheme();
|
||||
});
|
||||
|
||||
@@ -171,6 +171,11 @@ function loadOptions() {
|
||||
})));
|
||||
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
|
||||
|
||||
// Load URL params. These may select things from the various filter & display options, so the function needs
|
||||
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
|
||||
// loading settings, so this needs to be called before that.
|
||||
loadURLParams();
|
||||
|
||||
// Load settings from settings storage now all the controls are available
|
||||
loadSettings();
|
||||
|
||||
@@ -258,6 +263,6 @@ $(document).ready(function() {
|
||||
// Call loadOptions(), this will then trigger loading spots and setting up timers.
|
||||
loadOptions();
|
||||
// Prevent mouse scroll and touch actions in the popup menus being passed through to the map
|
||||
L.DomEvent.disableScrollPropagation(document.getElementById('maptools'));
|
||||
L.DomEvent.disableClickPropagation(document.getElementById('maptools'));
|
||||
L.DomEvent.disableScrollPropagation(document.getElementById('settingsButtonRowMap'));
|
||||
L.DomEvent.disableClickPropagation(document.getElementById('settingsButtonRowMap'));
|
||||
});
|
||||
@@ -46,7 +46,7 @@ function updateTable() {
|
||||
var showDE = $("#tableShowDE")[0].checked;
|
||||
|
||||
// Populate table with headers
|
||||
let table = $('<table class="table table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
|
||||
let table = $('<table class="table">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
|
||||
if (showTime) {
|
||||
table.find('thead tr').append(`<th>${useLocalTime ? "Local" : "UTC"}</th>`);
|
||||
}
|
||||
@@ -282,7 +282,7 @@ function loadOptions() {
|
||||
|
||||
// Populate the filters panel
|
||||
generateBandsMultiToggleFilterCard(options["bands"]);
|
||||
generateSIGsMultiToggleFilterCard(options["sigs"]);console.log(options["sigs"]);
|
||||
generateSIGsMultiToggleFilterCard(options["sigs"]);
|
||||
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
|
||||
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
|
||||
generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
|
||||
@@ -295,6 +295,11 @@ function loadOptions() {
|
||||
})));
|
||||
$("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]);
|
||||
|
||||
// Load URL params. These may select things from the various filter & display options, so the function needs
|
||||
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
|
||||
// loading settings, so this needs to be called before that.
|
||||
loadURLParams();
|
||||
|
||||
// Load settings from settings storage now all the controls are available
|
||||
loadSettings();
|
||||
|
||||
|
||||
@@ -46,4 +46,10 @@ function generateSIGsMultiToggleFilterCard(sig_options) {
|
||||
function filtersUpdated() {
|
||||
loadSpots();
|
||||
saveSettings();
|
||||
}
|
||||
|
||||
// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
|
||||
function toggleDarkMode() {
|
||||
enableDarkMode($("#darkMode")[0].checked);
|
||||
saveSettings();
|
||||
}
|
||||
Reference in New Issue
Block a user