fix #58: enable/disable refresh of spots

firmware/webtools/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "SOTACAT for Elecraft KX2 and KX3",
-    "version": "2024-11-02_13:24-Release",
+    "version": "2024-11-03_18:21-Debug",
     "builds": [
         {
             "chipFamily": "ESP32-C3",

include/build_info.h

@@ -1 +1 @@
-#define BUILD_DATE_TIME "241102:1324"
+#define BUILD_DATE_TIME "241103:1821"

sdkconfig.seeed_xiao_esp32c3_debug

@@ -1698,6 +1698,7 @@ CONFIG_MDNS_TIMER_PERIOD_MS=100
 # CONFIG_MDNS_NETWORKING_SOCKET is not set
 # CONFIG_MDNS_SKIP_SUPPRESSING_OWN_QUERIES is not set
 # CONFIG_MDNS_ENABLE_DEBUG_PRINTS is not set
+CONFIG_MDNS_ENABLE_CONSOLE_CLI=y
 # CONFIG_MDNS_RESPOND_REVERSE_QUERIES is not set
 CONFIG_MDNS_MULTIPLE_INSTANCE=y
 

src/web/main.js

@@ -347,6 +347,7 @@ gSotaEpoch = null;
 gLatestPotaJson = null;
 
 async function shouldCheckNewSpots(epoch) {
+    if (!document.getElementById('autoRefreshSelector').checked) return false;
     if (epoch === null) return true;
     try {
         // Fetch the latest epoch from the API
@@ -365,9 +366,9 @@ async function shouldCheckNewSpots(epoch) {
     }
 }
 
-async function refreshSotaPotaJson() {
+async function refreshSotaPotaJson(force) {
     if (currentTabName === 'sota') {
-        if (!await shouldCheckNewSpots(gSotaEpoch)) {
+        if (!force && gLatestSotaJson != null && !await shouldCheckNewSpots(gSotaEpoch)) {
             console.info('no new spots');
             return;
         }
@@ -393,7 +394,7 @@ async function refreshSotaPotaJson() {
             .catch(error => ({ error }));
     }
     else if (currentTabName === 'pota') {
-        if (!await shouldCheckNewSpots(null)) {
+        if (!force && gLatestPotaJson != null && !await shouldCheckNewSpots(null)) {
             console.info('no new spots');
             return;
         }

src/web/pota.html

@@ -2,7 +2,18 @@ <h2 class="contentPageHeaderContainer">
   <span class="spotsTableTitle">Recent Spots</span>
   <div class="showDupsContainer">
     <input type="checkbox" id="showDupsSelector" class="showDups" checked onchange="changeShowSpotDupsCheckboxState(this.checked); saveShowSpotDupsCheckboxState();" />
-    <label for="showDupsSelector" class="showDupsLabel">Dups</label>
+    <label for="showDupsSelector" class="showDupsLabel">QSY</label>
+  </div>
+  <div class="autoRefreshContainer">
+    <button onclick="refreshSotaPotaJson(true)">Refresh</button>
+    <input
+      type="checkbox"
+      id="autoRefreshSelector"
+      class="autoRefresh"
+      checked
+      onchange="changeAutoRefreshCheckboxState(this.checked); saveAutoRefreshCheckboxState();"
+    />
+    <label for="autoRefreshSelector" class="autoRefreshLabel">auto</label>
   </div>
 </h2>
 

src/web/pota.js

@@ -58,15 +58,18 @@ async function updatePotaTable()
     });
 
     tbody.parentNode.replaceChild(newTbody, tbody);
+
+    console.info('POTA table updated');
 }
 
 function potaOnAppearing() {
     console.info('POTA tab appearing');
 
+    loadAutoRefreshCheckboxState();
     loadShowSpotDupsCheckboxState();
     loadModeFilterState();
 
-    refreshSotaPotaJson();
+    refreshSotaPotaJson(false);
     if (gRefreshInterval == null)
         gRefreshInterval = setInterval(refreshSotaPotaJson, 60 * 1000); // one minute
 

src/web/sota.html

@@ -5,7 +5,7 @@ <h2 class="contentPageHeaderContainer">
     <select
       id="historyDurationSelector"
       class="historyDurationDropdown"
-      onchange="gSotaEpoch = null; refreshSotaPotaJson(); saveHistoryDurationState();"
+      onchange="refreshSotaPotaJson(true); saveHistoryDurationState();"
     >
       <option value="-1" selected>1 hour</option>
       <option value="-3">3 hours</option>
@@ -20,7 +20,18 @@ <h2 class="contentPageHeaderContainer">
       checked
       onchange="changeShowSpotDupsCheckboxState(this.checked); saveShowSpotDupsCheckboxState();"
     />
-    <label for="showDupsSelector" class="showDupsLabel">Dups</label>
+    <label for="showDupsSelector" class="showDupsLabel">QSY</label>
+  </div>
+  <div class="autoRefreshContainer">
+    <button onclick="refreshSotaPotaJson(true)">Refresh</button>
+    <input
+      type="checkbox"
+      id="autoRefreshSelector"
+      class="autoRefresh"
+      checked
+      onchange="changeAutoRefreshCheckboxState(this.checked); saveAutoRefreshCheckboxState();"
+    />
+    <label for="autoRefreshSelector" class="autoRefreshLabel">auto</label>
   </div>
 </h2>
 

src/web/sota.js

@@ -86,6 +86,27 @@ function loadHistoryDurationState() {
         document.getElementById('historyDurationSelector').value = savedState;
 }
 
+// Auto-refresh spots
+
+function saveAutoRefreshCheckboxState()
+{
+    const isChecked = document.getElementById('autoRefreshSelector').checked;
+    localStorage.setItem('autoRefresh', isChecked);
+}
+
+function changeAutoRefreshCheckboxState(autoRefresh) {
+}
+
+function loadAutoRefreshCheckboxState()
+{
+    const savedState = localStorage.getItem('autoRefresh');
+    // If there's a saved state, convert it to Boolean and set the checkbox
+    if (savedState !== null) {
+        document.getElementById('autoRefreshSelector').checked = (savedState === 'true');
+        changeAutoRefreshCheckboxState(document.getElementById('autoRefreshSelector').checked);
+    }
+}
+
 // Hide/Show Spot Dups
 
 function saveShowSpotDupsCheckboxState()
@@ -165,11 +186,12 @@ function changeModeFilter(selectedMode) {
 function sotaOnAppearing() {
     console.info('SOTA tab appearing');
 
+    loadAutoRefreshCheckboxState();
     loadShowSpotDupsCheckboxState();
     loadModeFilterState();
     loadHistoryDurationState();
 
-    refreshSotaPotaJson();
+    refreshSotaPotaJson(false);
     if (gRefreshInterval == null)
         gRefreshInterval = setInterval(refreshSotaPotaJson, 60 * 1000); // one minute
 

src/web/style.css

@@ -218,6 +218,22 @@ table.table-sortable th span[data-sort-dir="desc"]::after {
     margin-left: var(--spacing-small);
 }
 
+.autoRefreshContainer {
+    display: flex;
+    align-items: center; /* This will ensure vertical alignment */
+}
+
+.autoRefresh {
+    margin-right: var(--spacing-small); /* Adds a small gap between the checkbox and the label */
+}
+
+.autoRefreshLabel {
+    font-size: var(--font-size-small);
+    margin-right: var(--spacing-small); /* Adds a small gap between the checkbox and the label */
+    font-family: Arial, sans-serif;
+    color: var(--text-secondary);
+}
+
 .showDupsContainer {
     display: flex;
     align-items: center; /* This will ensure vertical alignment */