From 4325517451df94848f3457b68572628d82b4e6d9 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 19 Apr 2013 01:45:53 +0200 Subject: [PATCH] Make upload a smoother experience with some in-app UI and enable it on all platforms --- index.html | 35 ++++++++++++++++++++++++-- js/ui.js | 62 ++++++++++++++++++++++++++++++++++++++--------- manifest.appcache | 2 +- style/lantea.css | 35 ++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index ef087e9..393a368 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ + onclick="showUploadDialog();">

Settings -Map style: + @@ -73,6 +73,37 @@ Map style: onclick="toggleFullscreen();"> + +

Loading… diff --git a/js/ui.js b/js/ui.js index c84bbc6..8f036fe 100644 --- a/js/ui.js +++ b/js/ui.js @@ -43,15 +43,15 @@ window.onload = function() { // For Firefox OS, don't display the "save" button. // Do this by setting the debugHide class for testing in debug mode. document.getElementById("saveTrackButton").classList.add("debugHide"); - // For now, only show the upload UI on Firefox OS. - document.getElementById("uploadTrackButton").classList.remove("debugHide"); - // Without OAuth, the login data is useless - //document.getElementById("uploadSettingsArea").classList.remove("debugHide"); - // As login data is useless for now, always enable upload button - document.getElementById("uploadTrackButton").disabled = false; } + // Without OAuth, the login data is useless + //document.getElementById("uploadSettingsArea").classList.remove("debugHide"); + // As login data is useless for now, always enable upload button + document.getElementById("uploadTrackButton").disabled = false; + if (gDebug) { + // Note that GPX upload returns an error 500 on the dev API right now. gOSMAPIURL = "http://api06.dev.openstreetmap.org/"; } @@ -201,6 +201,22 @@ function toggleFullscreen() { } } +function showUploadDialog() { + var dia = document.getElementById("dialogArea"); + var areas = dia.children; + for (var i = 0; i <= areas.length - 1; i++) { + areas[i].style.display = "none"; + } + document.getElementById("uploadDialog").style.display = "block"; + document.getElementById("uploadTrackButton").disabled = true; + dia.classList.remove("hidden"); +} + +function cancelDialog() { + document.getElementById("dialogArea").classList.add("hidden"); + document.getElementById("uploadTrackButton").disabled = false; +} + var uiEvHandler = { handleEvent: function(aEvent) { var touchEvent = aEvent.type.indexOf('touch') != -1; @@ -295,13 +311,24 @@ function saveTrackDump() { } function uploadTrack() { + var dia = document.getElementById("dialogArea"); + var areas = dia.children; + for (var i = 0; i <= areas.length - 1; i++) { + areas[i].style.display = "none"; + } + document.getElementById("uploadStatus").style.display = "block"; + // See http://wiki.openstreetmap.org/wiki/Api06#Uploading_traces - var trackBlob = new Blob([convertTrack("gpx")], { "type" : "application/gpx+xml" }); + 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"); + var desc = document.getElementById("uploadDesc").value; + formData.append("description", + desc.length ? desc : "Track recorded via Lantea Maps"); //formData.append("tags", ""); - formData.append("visibility", "private"); + formData.append("visibility", + document.getElementById("uploadVisibility").value); var XHR = new XMLHttpRequest(); XHR.onreadystatechange = function() { if (XHR.readyState == 4 && XHR.status == 200) { @@ -313,8 +340,8 @@ function uploadTrack() { } }; XHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true); - // Cross-Origin XHR doesn't allow username/password (HTTP Auth), so need to look into OAuth. - // But for now, we'll ask the user for entering credentials with this. + // Cross-Origin XHR doesn't allow username/password (HTTP Auth). + // So, we'll ask the user for entering credentials with rather ugly UI. XHR.withCredentials = true; try { XHR.send(formData); @@ -325,7 +352,18 @@ function uploadTrack() { } function reportUploadStatus(aSuccess, aMessage) { - alert(aMessage ? aMessage : (aSuccess ? "success" : "failure")); + document.getElementById("uploadStatusCloseButton").disabled = false; + document.getElementById("uploadInProgress").style.display = "none"; + if (aSuccess) { + document.getElementById("uploadSuccess").style.display = "block"; + } + else if (aMessage) { + document.getElementById("uploadErrorMsg").textContent = aMessage; + document.getElementById("uploadError").style.display = "block"; + } + else { + document.getElementById("uploadFailed").style.display = "block"; + } } var gPrefs = { diff --git a/manifest.appcache b/manifest.appcache index 67e64b0..5f98be6 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,6 +1,6 @@ CACHE MANIFEST -# 2013-04-17 . +# 2013-04-18 manifest.webapp js/map.js js/ui.js diff --git a/style/lantea.css b/style/lantea.css index fd4dd22..f5364ca 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -12,6 +12,7 @@ h1 { display: none; } +#dialogArea, .overlayArea { position: absolute; z-index: 5; @@ -19,15 +20,20 @@ h1 { transition-duration: .2s; } +#dialogArea.hidden, .overlayArea.hidden { opacity: 0; transition-duration: 1s; } +#dialogArea:-moz-system-metric(touch-enabled), .overlayArea:-moz-system-metric(touch-enabled) { font-size: 3mozmm; } +#dialogArea input[type="button"]:-moz-system-metric(touch-enabled), +#dialogArea input[type="text"]:-moz-system-metric(touch-enabled), +#dialogArea select:-moz-system-metric(touch-enabled), .overlayArea input[type="button"]:-moz-system-metric(touch-enabled), .overlayArea select:-moz-system-metric(touch-enabled) { font-size: 3mozmm; @@ -122,6 +128,35 @@ h1 { opacity: 0; } +#dialogArea { + top: 20%; + right: 0; + left: 0; + width: 30ch; + max-width: 92%; + z-index: 10; + background-color: rgba(255, 255, 255, .8); + border: 0; + margin: auto; + padding: .5em; + border-radius: 5px; +} + +#dialogArea.hidden { + top: -100%; +} + +.dialogTitle { + margin: 0 0 .5em; + font-weight: bold; +} + +.dialogHelp { + margin: .5em 0; + font-size: small; + opacity: .66; +} + @media screen and (max-width: 500px) { body { font-size: 10px; -- 2.43.0