From c9b19e24eab1001005dd08a2ef663502b08b8897 Mon Sep 17 00:00:00 2001
From: user <user@node5.net>
Date: Mon, 20 May 2024 22:21:15 +0200
Subject: usability - disallow double query

---
 src/static/main.js         | 14 ++++++++++----
 src/templates/options.html |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/static/main.js b/src/static/main.js
index 9bdaa11..b0e1431 100644
--- a/src/static/main.js
+++ b/src/static/main.js
@@ -13,6 +13,7 @@ var heatmap =  L.featureGroup().addTo(map);
 
 const CategoryField = document.getElementById('Category');
 const LoadingIndicator = document.getElementById('LoadingIndicator');
+const SubmitButton = document.getElementById('SubmitButton');
 const form = document.getElementById('QueryForm');
 
 form.addEventListener('submit', (event) => {
@@ -32,10 +33,14 @@ var overlayMaps = {
 var layerControl = L.control.layers({},overlayMaps).addTo(map);
 
 function runQueryAfterLoad() {
-    LoadingIndicator.hidden = false;
-    markers.clearLayers();
-    polygons.clearLayers();
-    fetchAll(CategoryField.value);
+    if (!SubmitButton.disabled) { // Disallow double queries
+        SubmitButton.disabled = true;
+        LoadingIndicator.hidden = false;
+
+        markers.clearLayers();
+        polygons.clearLayers();
+        fetchAll(CategoryField.value);
+    }
 }
 
 async function fetchCategories() {
@@ -123,6 +128,7 @@ async function fetchAll(Category) {
   const shops = await response.json();
   shops.forEach((shop) => addShop(shop));
   LoadingIndicator.hidden = true;
+  SubmitButton.disabled = false;
 }
 
 async function fetchShopHeatmap() {
diff --git a/src/templates/options.html b/src/templates/options.html
index b607dca..8b87346 100644
--- a/src/templates/options.html
+++ b/src/templates/options.html
@@ -1,5 +1,5 @@
 <h1>POI map</h1>
-<form id="QueryForm">
+<form id="QueryForm" disabled>
     <label for="Category" class="form-label"><h3>Category</h3></label>
     <input class="form-control" list="CategoriesDataList" id="Category" name="Category" placeholder="Type to search..."
            aria-describedby="CategoriesHelp" value=""> {# Value set to empty string is important for JS function #}
@@ -11,7 +11,7 @@
 
     <br>
 
-    <button type="submit" class="btn btn-primary">Run query</button>
+    <button type="submit" disabled id="SubmitButton" class="btn btn-primary">Run query</button>
 </form>
 
 <br><br>
-- 
cgit v1.2.3