From 8389557a642218382b7294fde519389b72551388 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sat, 13 Apr 2013 00:32:38 +0200 Subject: [PATCH] add an upload button for OSM track upload - still doesn't work right, unfortunately --- index.html | 12 ++++- js/map.js | 4 ++ js/ui.js | 125 ++++++++++++++++++++++++++++++++++++++--------- style/lantea.css | 48 +++++++++--------- 4 files changed, 141 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 1f95b6e..24de1ee 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,8 @@ onclick="saveTrack();"> +
-
+ +
+

OpenStreetMap Track Upload:

+ +
+ + diff --git a/js/map.js b/js/map.js index a3a459b..d269a95 100644 --- a/js/map.js +++ b/js/map.js @@ -427,6 +427,10 @@ var mapEvHandler = { handleEvent: function(aEvent) { var touchEvent = aEvent.type.indexOf('touch') != -1; + // Bail out if the event is happening on an input. + if (aEvent.target.tagName.toLowerCase() == "input") + return; + // Bail out on unwanted map moves, but not zoom or keyboard events. if (aEvent.type.indexOf("mouse") === 0 || aEvent.type.indexOf("touch") === 0) { // Bail out if this is neither a touch nor left-click. diff --git a/js/ui.js b/js/ui.js index b9c0519..f8a45b1 100644 --- a/js/ui.js +++ b/js/ui.js @@ -9,6 +9,7 @@ var mainDB; var gUIHideCountdown = 0; var gWaitCounter = 0; var gAction, gActionLabel; +var gOSMAPIURL = "http://api06.dev.openstreetmap.org/"; // "http://api.openstreetmap.org/"; window.onload = function() { gAction = document.getElementById("action"); @@ -60,6 +61,17 @@ window.onload = function() { gActionLabel.textContent = ""; gAction.style.display = "none"; setTracking(document.getElementById("trackCheckbox")); + gPrefs.get("osm_user", function(aValue) { + if (aValue) { + document.getElementById("uploadUser").value = aValue; + document.getElementById("uploadTrackButton").disabled = false; + } + }); + gPrefs.get("osm_pwd", function(aValue) { + var upwd = document.getElementById("uploadPwd"); + if (aValue) + document.getElementById("uploadPwd").value = aValue; + }); } else setTimeout(waitForInitAndDraw, 100); @@ -197,6 +209,18 @@ var uiEvHandler = { } }; +function setUploadField(aField) { + switch (aField.id) { + case "uploadUser": + gPrefs.set("osm_user", aField.value); + document.getElementById("uploadTrackButton").disabled = !aField.value.length; + break; + case "uploadPwd": + gPrefs.set("osm_pwd", aField.value); + break; + } +} + function makeISOString(aTimestamp) { // ISO time format is YYYY-MM-DDTHH:mm:ssZ var tsDate = new Date(aTimestamp); @@ -208,41 +232,96 @@ function makeISOString(aTimestamp) { (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z"; } -function saveTrack() { - if (gTrack.length) { - var out = '' + "\n\n"; - out += '' + "\n"; - out += ' ' + "\n"; - out += ' ' + "\n"; - for (var i = 0; i < gTrack.length; i++) { - if (gTrack[i].beginSegment && i > 0) { - out += ' ' + "\n"; +function convertTrack(aTargetFormat) { + var out = ""; + switch (aTargetFormat) { + case "gpx": + out += '' + "\n\n"; + out += '' + "\n"; + if (gTrack.length) { + out += ' ' + "\n"; out += ' ' + "\n"; + for (var i = 0; i < gTrack.length; i++) { + if (gTrack[i].beginSegment && i > 0) { + out += ' ' + "\n"; + out += ' ' + "\n"; + } + out += ' ' + "\n"; + if (gTrack[i].coords.altitude) { + out += ' ' + gTrack[i].coords.altitude + '' + "\n"; + } + out += ' ' + "\n"; + out += ' ' + "\n"; + } + out += ' ' + "\n"; + out += ' ' + "\n"; } - out += ' ' + "\n"; - if (gTrack[i].coords.altitude) { - out += ' ' + gTrack[i].coords.altitude + '' + "\n"; - } - out += ' ' + "\n"; - out += ' ' + "\n"; - } - out += ' ' + "\n"; - out += ' ' + "\n"; - out += '' + "\n"; - var outDataURI = "data:application/gpx+xml," + encodeURIComponent(out); + out += '' + "\n"; + break; + case "json": + out = JSON.stringify(gTrack); + break; + default: + break; + } + return out; +} + +function saveTrack() { + if (gTrack.length) { + var outDataURI = "data:application/gpx+xml," + + encodeURIComponent(convertTrack("gpx")); window.open(outDataURI, 'GPX Track'); } } function saveTrackDump() { if (gTrack.length) { - var out = JSON.stringify(gTrack); - var outDataURI = "data:application/json," + encodeURIComponent(out); + var outDataURI = "data:application/json," + + encodeURIComponent(convertTrack("json")); window.open(outDataURI, 'JSON dump'); } } +function uploadTrack() { + // See http://wiki.openstreetmap.org/wiki/Api06#Uploading_traces + var trackBlob = new Blob([convertTrack("gpx")], { "type" : "application/gpx+xml" }); + var formData = new FormData(); + formData.append("file", trackBlob); + formData.append("description", "Track recorded via Lantea Maps"); + //formData.append("tags", ""); + formData.append("visibility", "private"); + var XHR = new XMLHttpRequest(); + XHR.onreadystatechange = function() { + if (XHR.readyState == 4) {/* + gLog.appendChild(document.createElement("li")) + .appendChild(document.createTextNode(aURL + " - " + XHR.status + + " " + XHR.statusText));*/ + } + if (XHR.readyState == 4 && XHR.status == 200) { + // so far so good + reportUploadStatus(true); + } else if (XHR.readyState == 4 && XHR.status != 200) { + // fetched the wrong page or network error... + reportUploadStatus(false); + } + }; + XHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true, + document.getElementById("uploadUser").value, + document.getElementById("uploadPwd").value); + try { + XHR.send(formData); + } + catch (e) { + reportUploadStatus(false, e); + } +} + +function reportUploadStatus(aSuccess, aMessage) { + alert(aMessage ? aMessage : (aSuccess ? "success" : "failure")); +} + var gPrefs = { objStore: "prefs", diff --git a/style/lantea.css b/style/lantea.css index 3d2aa8c..fd4dd22 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -12,31 +12,9 @@ h1 { display: none; } -#menuArea { - position: absolute; - /* width: 30em; */ - left: 1%; - top: 1em; - z-index: 5; -} - -#zoomArea { - position: absolute; - right: 1%; - top: 1em; - z-index: 5; - text-align: center; -} - -#fullscreenArea { +.overlayArea { position: absolute; - right: 1%; - bottom: 2em; z-index: 5; - text-align: center; -} - -.overlayArea { transition-property: opacity; transition-duration: .2s; } @@ -55,6 +33,24 @@ h1 { font-size: 3mozmm; } +#menuArea { + /* width: 30em; */ + left: 1%; + top: 1em; +} + +#zoomArea { + right: 1%; + top: 1em; + text-align: center; +} + +#fullscreenArea { + right: 1%; + bottom: 2em; + text-align: center; +} + #zoomLevel { background-color: rgba(255, 255, 255, .8); border-radius: 3px; @@ -105,8 +101,12 @@ h1 { display: none; } +.settingsSubTitle { + margin: .5em 0 0; + font-weight: bold; +} + #copyright { - position: absolute; bottom: 5px; right: .5em; margin: 0; -- 2.43.0