Add feedback that spotting is happening. #154

This commit is contained in:
Ian Renton
2026-09-27 14:11:21 +01:00
parent 27bd8a6b44
commit 277191b026
9 changed files with 32 additions and 16 deletions
+12
View File
@@ -150,6 +150,9 @@ function loadCredentials(providerName) {
// Method called to add a spot to the server // Method called to add a spot to the server
function addSpot() { function addSpot() {
try { try {
$("#result-bad").empty();
setSubmitting(true);
// Save settings (this will save "your call" for future use) // Save settings (this will save "your call" for future use)
saveSettings(); saveSettings();
@@ -214,6 +217,7 @@ function addSpot() {
}, 2000); }, 2000);
}, },
error: function (result) { error: function (result) {
setSubmitting(false);
if (window._recaptchaWidgetId !== undefined) { if (window._recaptchaWidgetId !== undefined) {
grecaptcha.reset(window._recaptchaWidgetId); grecaptcha.reset(window._recaptchaWidgetId);
} }
@@ -225,11 +229,19 @@ function addSpot() {
} }
}); });
} catch (error) { } catch (error) {
setSubmitting(false);
showAddSpotError(error); showAddSpotError(error);
} }
return false; return false;
} }
// Show or hide the "in progress" state on the Spot button.
function setSubmitting(submitting) {
$("#add-spot-submit").prop("disabled", submitting);
$("#add-spot-spinner").toggle(submitting);
$("#add-spot-submit-text").text(submitting ? "Spotting..." : "Spot");
}
// Show an "add spot" error. // Show an "add spot" error.
function showAddSpotError(text) { function showAddSpotError(text) {
const div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>"); const div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>");
+6 -2
View File
@@ -72,7 +72,11 @@
placeholder="N0CALL" required> placeholder="N0CALL" required>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button type="submit" class="btn btn-primary mt-2em">Spot</button> <button type="submit" id="add-spot-submit" class="btn btn-primary mt-2em">
<span id="add-spot-spinner" class="spinner-border spinner-border-sm me-1" aria-hidden="true"
style="display:none;"></span>
<span id="add-spot-submit-text" role="status">Spot</span>
</button>
</div> </div>
</form> </form>
@@ -138,7 +142,7 @@
const ALLOW_UPSTREAM_SPOTTING = {% raw safe_json_dumps(web_ui_options["allow_upstream_spotting"]) %}; const ALLOW_UPSTREAM_SPOTTING = {% raw safe_json_dumps(web_ui_options["allow_upstream_spotting"]) %};
</script> </script>
<script src="/static/js/add-spot.js?v=1790503760"></script> <script src="/static/js/add-spot.js?v=1790514682"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-add-spot").addClass("active"); $("#nav-link-add-spot").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+1 -1
View File
@@ -87,7 +87,7 @@
</div> </div>
<script src="/static/js/alerts.js?v=1790503760"></script> <script src="/static/js/alerts.js?v=1790514682"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-alerts").addClass("active"); $("#nav-link-alerts").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+2 -2
View File
@@ -82,8 +82,8 @@
const BANDS = {% raw safe_json_dumps(options["bands"]) %}; const BANDS = {% raw safe_json_dumps(options["bands"]) %};
</script> </script>
<script src="/static/js/spotsbandsandmap.js?v=1790503760"></script> <script src="/static/js/spotsbandsandmap.js?v=1790514682"></script>
<script src="/static/js/bands.js?v=1790503760"></script> <script src="/static/js/bands.js?v=1790514682"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-bands").addClass("active"); $("#nav-link-bands").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+5 -5
View File
@@ -1,6 +1,6 @@
{% extends "skeleton.html" %} {% extends "skeleton.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/css/style.css?v=1790503760" type="text/css"> <link rel="stylesheet" href="/static/css/style.css?v=1790514682" type="text/css">
<link href="/static/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet"> <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/fontawesome-6.7.2.min.css" rel="stylesheet">
<link href="/static/vendor/css/solid-6.7.2.min.css" rel="stylesheet"> <link href="/static/vendor/css/solid-6.7.2.min.css" rel="stylesheet">
@@ -16,10 +16,10 @@
window.fetchEventSource = fetchEventSource; window.fetchEventSource = fetchEventSource;
</script> </script>
<script src="/static/js/utils.js?v=1790503760"></script> <script src="/static/js/utils.js?v=1790514682"></script>
<script src="/static/js/ui-ham.js?v=1790503760"></script> <script src="/static/js/ui-ham.js?v=1790514682"></script>
<script src="/static/js/geo.js?v=1790503760"></script> <script src="/static/js/geo.js?v=1790514682"></script>
<script src="/static/js/common.js?v=1790503760"></script> <script src="/static/js/common.js?v=1790514682"></script>
{% end %} {% end %}
{% block body %} {% block body %}
<div class="container"> <div class="container">
+1 -1
View File
@@ -284,7 +284,7 @@
</div> </div>
<script src="/static/vendor/js/chart-4.4.9.umd.min.js"></script> <script src="/static/vendor/js/chart-4.4.9.umd.min.js"></script>
<script src="/static/js/conditions.js?v=1790503760"></script> <script src="/static/js/conditions.js?v=1790514682"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+2 -2
View File
@@ -115,8 +115,8 @@
const CARTODB_API_KEY = "{{ web_ui_options.get('cartodb_api_key', '') }}"; const CARTODB_API_KEY = "{{ web_ui_options.get('cartodb_api_key', '') }}";
</script> </script>
<script src="/static/js/spotsbandsandmap.js?v=1790503760"></script> <script src="/static/js/spotsbandsandmap.js?v=1790514681"></script>
<script src="/static/js/map.js?v=1790503760"></script> <script src="/static/js/map.js?v=1790514681"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-map").addClass("active"); $("#nav-link-map").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+2 -2
View File
@@ -127,8 +127,8 @@
</div> </div>
<script src="/static/js/spotsbandsandmap.js?v=1790503760"></script> <script src="/static/js/spotsbandsandmap.js?v=1790514681"></script>
<script src="/static/js/spots.js?v=1790503760"></script> <script src="/static/js/spots.js?v=1790514681"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-spots").addClass("active"); $("#nav-link-spots").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>
+1 -1
View File
@@ -96,7 +96,7 @@
</div> </div>
</div> </div>
<script src="/static/js/status.js?v=1790503760"></script> <script src="/static/js/status.js?v=1790514682"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$("#nav-link-status").addClass("active"); $("#nav-link-status").addClass("active");