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 ef087e9aded7ae578fb9e77c80516312e1aa8090..393a36898b0eb9140a635c64c5e4a20b91ad4e74 100644 (file)
--- 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"
 <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"
 <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>
 <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>
 <select id="mapSelector" onchange="setMapStyle();">
 <!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
 </select>


@@ -73,6 +73,37 @@ Map style:
        onclick="toggleFullscreen();">
 </div>
 
        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;
 <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 c84bbc6bb94537109e25950aa804200d4a382815..8f036fe3197120fba565de901d0ad2eda594574d 100644 (file)
--- 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 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) {
   if (gDebug) {

+    // Note that GPX upload returns an error 500 on the dev API right now.

     gOSMAPIURL = "http://api06.dev.openstreetmap.org/";
   }
 
     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;
 var uiEvHandler = {
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;


@@ -295,13 +311,24 @@ function saveTrackDump() {
 }
 
 function uploadTrack() {
 }
 
 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
   // 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);
   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("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) {
   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);
     }
   };
   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);
   XHR.withCredentials = true;
   try {
     XHR.send(formData);


@@ -325,7 +352,18 @@ function uploadTrack() {
 }
 
 function reportUploadStatus(aSuccess, aMessage) {
 }
 
 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 = {
 }
 
 var gPrefs = {

diff --git a/manifest.appcache b/manifest.appcache
index 67e64b0f16caa90374bd9f69742dc12e5a3fd40c..5f98be6fac64f5bb50977d1315c593f3a20551b5 100644 (file)
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
 CACHE MANIFEST
 

-# 2013-04-17 .
+# 2013-04-18

 manifest.webapp
 js/map.js
 js/ui.js
 manifest.webapp
 js/map.js
 js/ui.js

diff --git a/style/lantea.css b/style/lantea.css
index fd4dd225167c8d78117b01680c58548aedf852d5..f5364cad970faeb962fa484dbe3336e3b5a27f95 100644 (file)
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -12,6 +12,7 @@ h1 {
   display: none;
 }
 
   display: none;
 }
 

+#dialogArea,

 .overlayArea {
   position: absolute;
   z-index: 5;
 .overlayArea {
   position: absolute;
   z-index: 5;


@@ -19,15 +20,20 @@ h1 {
   transition-duration: .2s;
 }
 
   transition-duration: .2s;
 }
 

+#dialogArea.hidden,

 .overlayArea.hidden {
   opacity: 0;
   transition-duration: 1s;
 }
 
 .overlayArea.hidden {
   opacity: 0;
   transition-duration: 1s;
 }
 

+#dialogArea:-moz-system-metric(touch-enabled),

 .overlayArea:-moz-system-metric(touch-enabled) {
   font-size: 3mozmm;
 }
 
 .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;
 .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;
 }
 
   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;
 @media screen and (max-width: 500px) {
   body {
     font-size: 10px;