handle JS errors (#6)

www/index.html

@@ -22,19 +22,23 @@
     <h1>
       <a href="https://gpx.thermokar.st">gpx.thermokar.st</a>
     </h1>
-    <span>
+    <p>
       This client-side tool is for merging
       <a href="https://www.topografix.com/gpx.asp">GPX files</a>.
       Please note, this has only been tested on GPX files produced by
       <a href="https://www.garmin.com">Garmin</a> and
       <a href="https://www.strava.com">Strava</a> - your mileage may vary.
-      Source:
-      <a href="https://github.com/thermokarst/gpx-web-utils">
-        https://github.com/thermokarst/gpx-web-utils</a>
-    </span>
+    </p>
     <form>
-      <input id="gpxInput" type="file" multiple>
+      <input id="gpxInput" type="file" multiple accept="text/gpx,.gpx">
     </form>
+    <hr>
+    <p>
+      <small>
+         <a href="https://github.com/thermokarst/gpx-web-utils">
+          https://github.com/thermokarst/gpx-web-utils</a>
+      </small>
+    </p>
     <script src="./bootstrap.js"></script>
   </body>
 </html>

www/index.js

@@ -1,27 +1,37 @@
 import * as gpx from "gpx-web-utils";
 
 const inputElement = document.getElementById("gpxInput");
+const loadingElement = document.createElement("span");
 
+loadingElement.innerHTML = "<strong>processing...</strong>";
+inputElement.value = "";
 inputElement.addEventListener("change", readFiles, false);
 
 function readFiles() {
   if (inputElement.files.length < 2) { alert("open two or more files"); return; }
 
+  inputElement.replaceWith(loadingElement);
   const files = Array.from(inputElement.files);
   const promises = files.map(f => f.text());
 
   Promise.all(promises).then(gpxes => {
-    const merged = gpx.merge(gpxes);
-    writeOutput(merged);
-    inputElement.value = "";
+    try {
+      const merged = gpx.merge(gpxes);
+      writeOutput(merged);
+    } catch {
+      alert("there was a problem, please check the console.");
+    } finally {
+      inputElement.value = "";
+      loadingElement.replaceWith(inputElement);
+    }
   });
 }
 
 function writeOutput(file) {
     const blob = new Blob([file], {type: "text/gpx"});
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = "merged.gpx";
-    a.click();
-    URL.revokeObjectURL(a.href);
+    const anchorElement = document.createElement("a");
+    anchorElement.href = URL.createObjectURL(blob);
+    anchorElement.download = "merged.gpx";
+    anchorElement.click();
+    URL.revokeObjectURL(anchorElement.href);
 }