thermokarst/gpx-web-utils
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

handle JS errors (#6)

Browse source
This commit is contained in:
Matthew Ryan Dillon 2020-11-12 21:44:11 -07:00 • committed by GitHub
parent b2e4f1bc64
commit a577f55387
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
www/index.html
View file

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

26
www/index.js
View file

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