bugfix for handling hash changes; work on menu buttons

covid.js

@@ -1584,9 +1584,18 @@ document.addEventListener('DOMContentLoaded', (e)=>{
             }
         })
     })
+    // when the user clicks on the date picker, we can assume they want to do a start-on-a-date chart
     document.querySelector('input[type=date][name=chart-start-date]').addEventListener('click', (e)=>{
         e.target.parentElement.click()
     })
+    //
+    /*document.getElementById('site-menu-button-rate').addEventListener('click', (e)=>{
+        document.getElementById('menu-shown').checked = false;
+    })*/
+    document.getElementById('site-menu-button-reset').addEventListener('click', (e)=>{
+        window.location.hash = ''
+        document.getElementById('menu-shown').checked = false;
+    })
     
     // fill out the covid data box
     getCovidData()
@@ -1637,8 +1646,17 @@ document.addEventListener('DOMContentLoaded', (e)=>{
         if (theChart.data.datasets[theChart.data.datasets.length - 1].label === sitesSelects[sitesSelects.length - 1].value) {
             theChart.data.datasets.pop()
         }
-        // remove the site data container
-        sitesSelects[sitesSelects.length - 1].parentElement.parentElement.remove()
+        // if we have more than one site available
+        if (sitesSelects.length > 1) {
+            // remove the site data container
+            sitesSelects[sitesSelects.length - 1].parentElement.parentElement.remove()
+        
+        // ok, this is the last site, so we don't actually want to remove the whole thing
+        } else {
+            // instead, we want to clear it
+            sitesSelects[0].parentElement.parentElement.getElementsByClassName('site-data')[0].innerHTML=""
+            sitesSelects[0].value = "select one"
+        }
         // using History.pushState() because we don't want the onhashchange event to fire
         history.pushState({}, '', window.location.hash.replace(/,[^,]+$/, ''))
         updateChartSettings()
@@ -1648,21 +1666,29 @@ document.addEventListener('DOMContentLoaded', (e)=>{
     // handling manual hash change
     window.addEventListener("hashchange", (e)=>{
         console.log(`+-- manual hash change! '${window.location.hash}'`)
+        console.log(`    got hash: ${window.location.hash}`)
+        hash_sites = window
+            .location
+            .hash
+            .substr(1)  // remove the '#'
+            .split(',') // split by ',' in case we have a number of sites to handle
+            .reduce((acc, el)=>{ // filter out empty strings
+                if (el) {
+                    acc.push(el);
+                }
+                return acc; 
+            }, [])
+    
+        // any site data containers to be removed?
+        console.log(`    +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
+        var cur_site_count = sitesSelects.length
+        for (var i=hash_sites.length; i<cur_site_count; i++) {
+            console.log(`        i: ${i}`)
+            removeSite.dispatchEvent(new Event('click'))
+        }
+        
+        // do we have any hash to work with?
         if (window.location.hash) {
-            console.log(`    got hash: ${window.location.hash}`)
-            hash_sites = window
-                .location
-                .hash
-                .substr(1)  // remove the '#'
-                .split(',') // split by ',' in case we have a number of sites to handle
-             
-            // any site data containers to be removed?
-            console.log(`    +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
-            var cur_site_count = sitesSelects.length
-            for (var i=hash_sites.length; i<cur_site_count; i++) {
-                console.log(`        i: ${i}`)
-                removeSite.dispatchEvent(new Event('click'))
-            }
             
             // handle each hash site separately, adding site data containers if need be
             hash_sites.forEach((hash_site, index)=>{

index.html

@@ -376,10 +376,10 @@
                 <label id="site-menu-control" for="menu-shown">☰</label>
                 <div class="site-menu-container">
                     <p>Show 6 sites with:</p>
-                    <input type="button" id="site-menu-button-highest-rate" value="largest growth rate"/>
-                    <input type="button" id="site-menu-button-highest-percentage" value="highest percentage of population infected"/>
-                    <input type="button" id="site-menu-button-most-deaths" value="most deaths"/>
-                    <input type="button" id="site-menu-button-most-deaths" value="greatest drop of number of active cases"/>
+                    <input type="button" id="site-menu-button-rate" value="largest growth rate"/>
+                    <input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
+                    <input type="button" id="site-menu-button-deaths" value="most deaths"/>
+                    <input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
                     <div class="spacer"></div>
                     <input type="button" id="site-menu-button-reset" value="Reset all"/>
                 </div>