2023-05-15 20:52:07 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre-exp.min.css">
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
|
|
|
|
<style>
|
|
|
|
|
.badgeerror[data-badge]::after { background-color: red; }
|
|
|
|
|
</style>
|
|
|
|
|
<script src="../../core/lib/interface.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2023-06-10 20:58:53 +00:00
|
|
|
var converted;
|
|
|
|
|
var filename;
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
function handleOnload(readerEvent){
|
|
|
|
|
var content = readerEvent.target.result;
|
2023-05-21 07:07:52 +00:00
|
|
|
|
2023-07-14 16:34:51 +00:00
|
|
|
// Replace the gpx version 1.0 with 1.1 to allow parsing older gpx files. The nodes referenced by the xsl exist in both versions.
|
|
|
|
|
content = content.replaceAll("http://www.topografix.com/GPX/1/0", "http://www.topografix.com/GPX/1/1");
|
|
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var xsltProcessor = new XSLTProcessor();
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var myXMLHTTPRequest = new XMLHttpRequest();
|
|
|
|
|
myXMLHTTPRequest.open("GET", "convert.xsl", false);
|
|
|
|
|
myXMLHTTPRequest.send(null);
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var xslRef = myXMLHTTPRequest.responseXML;
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
xsltProcessor.importStylesheet(xslRef);
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var parser = new DOMParser();
|
|
|
|
|
var doc = parser.parseFromString(content, "text/xml");
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var fragment = xsltProcessor.transformToFragment(doc, document);
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var serializer = new XMLSerializer();
|
|
|
|
|
converted = serializer.serializeToString(fragment);
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
document.getElementById('upload').disabled = false;
|
|
|
|
|
}
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
function handleFileChange(event){
|
|
|
|
|
document.getElementById('error').innerHTML = "";
|
|
|
|
|
var file = event.target.files[0];
|
|
|
|
|
if (!file) {
|
|
|
|
|
document.getElementById('error').innerHTML = "No valid file selected";
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
filename = file.name.replace(/\.gpx/,".trf");
|
|
|
|
|
document.getElementById('fileName').value = filename;
|
2023-05-24 07:03:06 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
var reader = new FileReader();
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
reader.onload = handleOnload;
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
reader.readAsText(file,'UTF-8');
|
|
|
|
|
}
|
2023-05-15 20:52:07 +00:00
|
|
|
|
2023-06-10 20:58:53 +00:00
|
|
|
function handleClick(event){
|
|
|
|
|
if (converted){
|
|
|
|
|
Util.showModal("Saving...");
|
|
|
|
|
var name = document.getElementById('fileName').value;
|
|
|
|
|
if (!name || name.length == 0)
|
|
|
|
|
name = document.getElementById('fileName').placeholder;
|
|
|
|
|
if (name){
|
|
|
|
|
Util.writeStorage(name, converted, function() {
|
|
|
|
|
Util.hideModal();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('status').innerHTML += "error" + "</br>";
|
|
|
|
|
document.getElementById('error').innerHTML = "File could not be converted correctly.";
|
2023-05-24 07:03:06 +00:00
|
|
|
}
|
2023-05-15 20:52:07 +00:00
|
|
|
}
|
2023-06-10 20:58:53 +00:00
|
|
|
function onInit() {}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Upload tracks to your watch</h1>
|
|
|
|
|
<p>Allows uploading a GPX format track file to your watch. Converts tracks containing "trkpt"-nodes into the GPS Trekking format.</p>
|
|
|
|
|
<form>
|
|
|
|
|
<input class="form-input" type="file" id="fileSelector"><br/>
|
|
|
|
|
<label class="form-label" for="fileName">Filename on watch (must end with .trf an be shorter than 28 characters total)</label>
|
|
|
|
|
<input class="form-input" placeholder="route.trf" id="fileName" pattern="^.{0,24}\.trf$"><br/>
|
|
|
|
|
<button class="btn btn-primary" type="button" id="upload">Upload</button><br/>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="error"></div>
|
|
|
|
|
<div id="status"></div>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('upload').disabled = true;
|
|
|
|
|
document.getElementById('fileSelector').addEventListener('change', handleFileChange);
|
|
|
|
|
document.getElementById('upload').addEventListener('click', handleClick);
|
2023-05-15 20:52:07 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
