From: Robert Kaiser <kairo@kairo.at>
Date: Thu, 18 Apr 2013 23:45:53 +0000 (+0200)
Subject: Make upload a smoother experience with some in-app UI and enable it on all platforms
X-Git-Tag: legacy-preGL~23
X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=commitdiff_plain;h=4325517451df94848f3457b68572628d82b4e6d9

Make upload a smoother experience with some in-app UI and enable it on all platforms
---

diff --git a/index.html b/index.html
index ef087e9..393a368 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
 <input type="button" id="dumpTrackButton" value="Dump"
        onclick="saveTrackDump();" class="debugHide">
 <input type="button" id="uploadTrackButton" value="Upload" disabled="true"
-       onclick="uploadTrack();" class="debugHide">
+       onclick="showUploadDialog();">
 <input type="button" id="clearTrackButton" value="Clear"
        onclick="clearTrack();"><br/>
 <input type="checkbox" id="trackCheckbox"
@@ -40,7 +40,7 @@
 <input type="button" id="settingsButton" value="Settings"
        onclick="toggleSettings();"><br/>
 <fieldset id="settingsArea"><legend>Settings</legend>
-Map style:
+<label for="mapSelector">Map style:</label>
 <select id="mapSelector" onchange="setMapStyle();">
 <!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
 </select>
@@ -73,6 +73,37 @@ Map style:
        onclick="toggleFullscreen();">
 </div>
 
+<div id="dialogArea" class="hidden">
+<div id="uploadDialog">
+<p class="dialogTitle">Upload Track to OpenStreetMap:</p>
+<label for="uploadVisibility">Visibility:</label>
+<select id="uploadVisibility">
+<option value="identifiable">Identifiable</option>
+<option value="private">Private</option>
+</select><br>
+<label for="uploadDesc">Description:</label>
+<input type="text" id="uploadDesc" maxlength="255" size="25"
+       value="Lantea Maps">
+<p class="dialogHelp">You will be asked for your OSM user name and password
+  when clicking "Upload Track".</p>
+<input type="button" id="uploadDialogUploadButton" value="Upload Track"
+       onclick="uploadTrack();">
+<input type="button" id="uploadDialogCancelButton" value="Cancel"
+       onclick="cancelDialog();">
+</div>
+<div id="uploadStatus">
+<p class="dialogTitle">Track Upload to OpenStreetMap</p>
+<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
+  Upload in progress&hellip;</p>
+<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
+<p id="uploadFailed" style="display:none;">Track upload failed.</p>
+<p id="uploadError" style="display:none;">Error:<br>
+  <span id="uploadErrorMsg"></span></p>
+<input type="button" id="uploadStatusCloseButton" value="Close"
+       onclick="cancelDialog();" disabled="true">
+</div>
+</div>
+
 <p id="action">
   <img id="actionimg" src="style/loading_action.png">
   <span id="actionlabel">Loading</span>&hellip;
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;