recorder: add multi-select checkbox

Author: bobrippling

apps/recorder/interface.html

@@ -731,6 +731,7 @@
       <h2>GPS Tracks</h2>`;
 
       if (trackList.length > 0) {
+        html += `<input type="checkbox" id="select-all">`
         html += `<div class="accordion">`;
         trackList.forEach((track, index) => {
           const trackData = trackLineToObject(track.info.headers, track.info.l);
@@ -910,11 +911,14 @@ <h2>Settings</h2>
       }
 
       if (trackList.length > 0) {
+        const selectAll = document.querySelector("#select-all");
         const handleCheckboxCheck = () => {
           const checkboxes = [...document.querySelectorAll(".download-checkbox")];
           const batch = document.querySelector("#batch");
 
           batch.classList.toggle("hidden", !checkboxes.some(b => b.checked));
+          if (checkboxes.every(b => b.checked)) selectAll.checked = true;
+          else if (checkboxes.every(b => !b.checked)) selectAll.checked = false;
         };
 
         document.querySelectorAll('.accordion-header').forEach(header => {
@@ -930,6 +934,14 @@ <h2>Settings</h2>
             .querySelector(".download-checkbox")
             .addEventListener('click', handleCheckboxCheck);
         });
+
+        selectAll.addEventListener("click", e => {
+          const checkboxes = [...document.querySelectorAll(".download-checkbox")];
+          const { checked } = e.target;
+
+          for(const b of checkboxes)
+            b.checked = checked;
+        });
       }
 
       document.getElementById("settings-allow-no-gps").addEventListener("change",event=>{