Bell sound on wanted calls. Closes #117

README.md

@@ -34,16 +34,16 @@ see [https://spothole.app/apidocs](https://spothole.app/apidocs) for the API det
 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.
 
-You are more than welcome to use the data and the API that Spothole provides to power your own software, to run your
+You are more than welcome to use the data and the API that Spothole provides to power your own software, to run your own
-own Spothole server, or to modify it in any way. More details can be found in the following sections:
+Spothole server, or to modify it in any way. More details can be found in the following sections:
 
 * [Embedding Spothole in another website](docs/embedding.md)
 * [Writing your own client](docs/clients.md)
 * [Running your own copy](docs/running.md)
-  * [nginx reverse proxy configuration](docs/nginx.md)
+    * [nginx reverse proxy configuration](docs/nginx.md)
-  * [systemd service file](docs/systemd.md)
+    * [systemd service file](docs/systemd.md)
-  * [Running in Docker](docs/docker.md)
+    * [Running in Docker](docs/docker.md)
-  * [Use of multiple cluster logins](docs/multicluster.md)
+    * [Use of multiple cluster logins](docs/multicluster.md)
 * [Modifying the source code](docs/modifying.md)
 
 ## Thanks
@@ -54,8 +54,8 @@ The project contains GeoJSON files for CQ and ITU zones, in the `/datafiles/` di
 my knowledge, created by HA8TKS for his CQ and ITU zone layers for Leaflet. `/datafiles` also contains a
 `MUNICIPIOS.csv` file, from the "Nomenclátor Geográfico de Municipios y Entidades de Población" data set sourced from
 [el Centro Nacional de Información Geográfica](https://centrodedescargas.cnig.es/CentroDescargas/home).
-`didbase-stations.csv` and the TOTA file were created by me based on publicly available data from GIRO and from
+`didbase-stations.csv` and the TOTA file were created by me based on publicly available data from GIRO and from maps of
-maps of conference centres.
+conference centres.
 
 The project contains a set of flag icons generated using the "Noto Color Emoji" font on a Debian system, in the
 `/static/img/flags/` directory.
@@ -65,12 +65,14 @@ This project would not have been possible without these libraries, so many thank
 
 ### Third Party Libraries
 
-A number of third-party libraries are self-hosted in the `/static/vendor/` directory. These files are subject to
+A number of third-party libraries are self-hosted in the `/static/vendor/` directory. These files are subject to their
-their own licences and are not covered by the overall licence declared in the `LICENSE` file.
+own licences and are not covered by the overall licence declared in the `LICENSE` file.
 
 A number of third-party libraries are self-hosted in the `/webassets/vendor/` directory. These files are subject to
 their own licences and are not covered by the overall licence declared in the `LICENSE` file.
 
+Sound effects are CC0-licenced and sourced from [Pixabay](https://pixabay.com).
+
 Particular thanks go to country-files.com for providing country lookup data for amateur radio, to K0SWE
 for [this JSON-formatted DXCC data](https://github.com/k0swe/dxcc-json/), and to the developers of `pyhamtools` for
 making it easy to use country-files.com data as well as QRZ.com and Clublog lookup.

static/css/style.css

@@ -206,6 +206,15 @@ div.band-spot-wanted {
     animation: wantedanim 1.5s ease-in-out alternate infinite;
 }
 
+@keyframes wantedanim {
+    0% {
+        background-color: #cf9e3d;
+    }
+    100% {
+        background-color: #e1b655;
+    }
+}
+
 .leaflet-marker-icon.marker-icon-wanted::after {
     content: "";
     width: 20px;
@@ -217,14 +226,17 @@ div.band-spot-wanted {
     position: absolute;
     z-index: -1;
     border-radius: 1000%;
+    animation: wantedanimshadow 1.5s ease-in-out alternate infinite;
 }
 
-@keyframes wantedanim {
+@keyframes wantedanimshadow {
     0% {
         background-color: #cf9e3d;
+        box-shadow: 0px 0px 10px 15px #cf9e3d;
     }
     100% {
         background-color: #e1b655;
+        box-shadow: 0px 0px 10px 15px #e1b655;
     }
 }
 

static/js/spots.js

@@ -83,7 +83,11 @@ function startSSEConnection() {
 
             // Ping if we need to
             if ($("#pingOnNewSpots")[0].checked) {
-                new Audio("/audio/ping.mp3").play();
+                if (callWanted(newSpot["dx_call"])) {
+                    new Audio("/static/audio/bell.mp3").play();
+                } else {
+                    new Audio("/static/audio/ping.mp3").play();
+                }
             }
         },
         onerror(err) {

static/service-worker.js

@@ -1,6 +1,7 @@
 const CACHE_NAME = 'Spothole';
 const CACHE_URLS = [
     'static/apidocs/openapi.yml',
+    'static/audio/bell.mp3',
     'static/audio/ping.mp3',
     'static/css/style.css',
     'static/js/add-spot.js',
@@ -50,6 +51,9 @@ const CACHE_URLS = [
     'static/vendor/js/leaflet-1.9.4.min.js',
     'static/vendor/js/leaflet-geodesic-2.7.2.umd.min.js',
     'static/vendor/js/leaflet-maidenhead.js',
+    'static/vendor/js/fetch-event-source-2.0.1/fetch.js',
+    'static/vendor/js/fetch-event-source-2.0.1/index.js',
+    'static/vendor/js/fetch-event-source-2.0.1/parse.js',
     'static/vendor/webfonts/fa-solid-900.ttf',
     'static/vendor/webfonts/fa-solid-900.woff2'
 ];

templates/add_spot.html

@@ -76,7 +76,7 @@
 
 </div>
 
-<script src="/static/js/add-spot.js?v=1786790625"></script>
+<script src="/static/js/add-spot.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-add-spot").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/alerts.html

@@ -84,7 +84,7 @@
 
 </div>
 
-<script src="/static/js/alerts.js?v=1786790625"></script>
+<script src="/static/js/alerts.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-alerts").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/bands.html

@@ -76,8 +76,8 @@
 
 </div>
 
-<script src="/static/js/spotsbandsandmap.js?v=1786790625"></script>
+<script src="/static/js/spotsbandsandmap.js?v=1786791760"></script>
-<script src="/static/js/bands.js?v=1786790625"></script>
+<script src="/static/js/bands.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-bands").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/base.html

@@ -1,6 +1,6 @@
 {% extends "skeleton.html" %}
 {% block head_extra %}
-<link rel="stylesheet" href="/static/css/style.css?v=1786790625" type="text/css">
+<link rel="stylesheet" href="/static/css/style.css?v=1786791760" type="text/css">
 <link href="/static/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
 <link href="/static/vendor/css/fontawesome-6.7.2.min.css" rel="stylesheet">
 <link href="/static/vendor/css/solid-6.7.2.min.css" rel="stylesheet">
@@ -15,10 +15,10 @@
   window.fetchEventSource = fetchEventSource;
 </script>
 
-<script src="/static/js/utils.js?v=1786790625"></script>
+<script src="/static/js/utils.js?v=1786791760"></script>
-<script src="/static/js/ui-ham.js?v=1786790625"></script>
+<script src="/static/js/ui-ham.js?v=1786791760"></script>
-<script src="/static/js/geo.js?v=1786790625"></script>
+<script src="/static/js/geo.js?v=1786791760"></script>
-<script src="/static/js/common.js?v=1786790625"></script>
+<script src="/static/js/common.js?v=1786791760"></script>
 {% end %}
 {% block body %}
 <div class="container">

templates/cards/wanted_calls.html

@@ -6,8 +6,7 @@
                    oninput="saveSettings();" style="width: 14em; display: inline-block;">
             <div class="mt-1">
                 <small>Enter a space- and/or comma-separated list of callsigns or partial callsigns. Any DX callsigns
-                    that
+                    that match will have a gold highlight.</small>
-                    match will be highlighted.</small>
             </div>
             <div class="mt-3">
                 <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload

templates/conditions.html

@@ -284,7 +284,7 @@
 </div>
 
 <script src="/static/vendor/js/chart-4.4.9.umd.min.js"></script>
-<script src="/static/js/conditions.js?v=1786790625"></script>
+<script src="/static/js/conditions.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/map.html

@@ -109,8 +109,8 @@
 <script src="/static/vendor/js/leaflet-cqzones.js"></script>
 <script src="/static/vendor/js/leaflet-workedallbritainireland.js" type="module"></script>
 
-<script src="/static/js/spotsbandsandmap.js?v=1786790625"></script>
+<script src="/static/js/spotsbandsandmap.js?v=1786791760"></script>
-<script src="/static/js/map.js?v=1786790625"></script>
+<script src="/static/js/map.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-map").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/spots.html

@@ -113,8 +113,8 @@
 
 </div>
 
-<script src="/static/js/spotsbandsandmap.js?v=1786790625"></script>
+<script src="/static/js/spotsbandsandmap.js?v=1786791760"></script>
-<script src="/static/js/spots.js?v=1786790625"></script>
+<script src="/static/js/spots.js?v=1786791760"></script>
 <script>$(document).ready(function () {
     $("#nav-link-spots").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/status.html

@@ -86,7 +86,7 @@
     </div>
 </div>
 
-<script src="/static/js/status.js?v=1786790625"></script>
+<script src="/static/js/status.js?v=1786791760"></script>
 <script>
     $(document).ready(function () {
         $("#nav-link-status").addClass("active");