diff --git a/www/index.html b/www/index.html index 7a414bf..7ffee01 100644 --- a/www/index.html +++ b/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> diff --git a/www/index.js b/www/index.js index e9f7a18..ecb0ea7 100644 --- a/www/index.js +++ b/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); }