added refresh detection and refactored intro to use deferred

CodeforNRV · Jun 7, 2017 · cdc574a · cdc574a
1 parent ab32eb5
commit cdc574a
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 34 deletions.
diff --git a/intro.html b/intro.html
@@ -31,7 +31,8 @@ <h1 style="color:white; background-color:black; opacity:0.7;">NRV Park Search</h
                             </div>
                             <input type="hidden" name="lat" id="lat" />
                             <input type="hidden" name="lon" id="lon" />
-                            <input class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" id="thanks" type="submit" value="Dismiss and Begin Searching" />
+                            <p id="busy" style="display:none;">Getting your location...please wait</p>
+                            <div id="thanksContainer"><input class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" id="thanks" type="submit" value="Dismiss and Begin Searching" /></div>
                         </form>
                     </div>
                 </div>
@@ -43,6 +44,54 @@ <h1 style="color:white; background-color:black; opacity:0.7;">NRV Park Search</h
         <script src="js/jquery.mobile-1.4.5.min.js"></script>
         <script src="js/misc.js"></script>
         <script type="text/javascript">  
+
+            $("#thanks").click(function() {
+                setCookie("ack",1,30);
+            });
+
+            $('#page1').on('pagecreate', function() {
+                uncheck();
+            });
+
+            $("#location").click(function() {
+                if (!$(this).prop("checked"))
+                {
+                    $("#lat").val("");
+                    $("#lon").val("");
+                    return;
+                }
+
+                busy(true);
+                geoLocation.getLocation().then(function(position) {
+                    showPosition(position);
+                }).fail(function(err) {
+                    showError(err);
+                });
+            });
+
+            function uncheck() {
+                $("#location").prop('checked', false);
+                $("#location").removeAttr('checked').checkboxradio("refresh");
+            }
+
+            function busy(isBusy) {
+                if(isBusy) {
+                    $.mobile.loading( "show" );
+                    $("#thanksContainer").hide();
+                    $("#busy").show();
+                } else {
+                    $.mobile.loading( "hide" );
+                    $("#thanksContainer").show();
+                    $("#busy").hide();
+                }
+            }
+
+            function showPosition(position) {
+                $("#lat").val(position.coords.latitude);
+                $("#lon").val(position.coords.longitude);
+                busy(false);
+            }
+
             function showError(error) {
                 switch(error.code) {
                     case error.PERMISSION_DENIED:
@@ -59,36 +108,8 @@ <h1 style="color:white; background-color:black; opacity:0.7;">NRV Park Search</h
                         break;
                 }
                 uncheck();
+                busy(false);
             }
-
-            function showPosition(position) {
-                $("#lat").val(position.coords.latitude);
-                $("#lon").val(position.coords.longitude);
-            }
-
-            function uncheck() {
-                $("#location").prop('checked', false);
-                $("#location").removeAttr('checked').checkboxradio("refresh");
-            }
-
-            $("#thanks").click(function() {
-                setCookie("ack",1,30);
-            });
-
-            $("#location").click(function() {
-                if (!$(this).prop("checked"))
-                {
-                    $("#lat").val("");
-                    $("#lon").val("");
-                    return;
-                }
-                if (navigator.geolocation) {
-                    navigator.geolocation.getCurrentPosition(showPosition, showError, {maximumAge: 10000, timeout:10000});
-                } else {
-                    alert("Geolocation is not supported by this browser.");
-                    uncheck();
-                }
-            });
         </script>
     </body>
 </html>
diff --git a/js/misc.js b/js/misc.js
@@ -27,4 +27,17 @@ function getCookie(cname) {
         }
     }
     return "";
-}
+}
+
+var geoLocation = {
+    getLocation: function() {
+        var deferred = $.Deferred();
+        if(navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, { timeout: 5000 });
+            setTimeout(function() { deferred.reject(new Error('Could not get your location.')) }, 7000);
+        } else {
+            deferred.reject(new Error('Your browser does not support Geo Location.'));
+        }
+        return deferred.promise();
+    } 
+};
diff --git a/map.html b/map.html
@@ -67,7 +67,43 @@
                 });
             }
 
+            function detectRefresh() {
+                return performance.navigation.type == 1 && getUrlVars()["lat"];
+            }
+
+            function updateLocation() {
+                navigator.geolocation.getCurrentPosition(showPosition, showError, {maximumAge: 5000, timeout:5000});
+            }
+
+            function showPosition(position) {
+                window.location = "map.html?id=" + getUrlVars()["id"] + "&lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&location=on";
+            }
+
+            function showError(error) {
+                switch(error.code) {
+                    case error.PERMISSION_DENIED:
+                        alert("User denied the request for Geolocation.");
+                        break;
+                    case error.POSITION_UNAVAILABLE:
+                        alert("Location information is unavailable.");
+                        break;
+                    case error.TIMEOUT:
+                        alert("The request to get user location timed out.");
+                        break;
+                    case error.UNKNOWN_ERROR:
+                        alert("An unknown error occurred.");
+                        break;
+                }
+                uncheck();
+            }
+
             $(document).ready(function() {
+                if(detectRefresh()) {
+                    var result = confirm("Update your location?");
+                    if(result) {
+                        updateLocation();
+                    }
+                }                
                 createMap();
                 getParkById(getUrlVars()["id"]);
             });

diff --git a/parks.html b/parks.html
@@ -24,6 +24,7 @@
             <div data-role="header">
                 <h1>Nearest Parks</h1>
                 <h3>Click to see the park on a map.</h3>
+                <input type="button" value="Update Location" onclick="updateLocation()" style="float:left;" />
             </div>
             <div role="main" class="ui-content">
                 <ul id='parkList' data-role="listview"></ul>
@@ -69,10 +70,43 @@ <h3>Click to see the park on a map.</h3>
                 });
             });
 
+            function detectRefresh() {
+                return performance.navigation.type == 1 && getUrlVars()["location"] == "on";
+            }
+
+            function updateLocation() {
+                navigator.geolocation.getCurrentPosition(showPosition, showError, {maximumAge: 5000, timeout:5000});
+            }
+
+            function showPosition(position) {
+                window.location = "parks.html?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&location=on";
+            }
+
+            function showError(error) {
+                switch(error.code) {
+                    case error.PERMISSION_DENIED:
+                        alert("User denied the request for Geolocation.");
+                        break;
+                    case error.POSITION_UNAVAILABLE:
+                        alert("Location information is unavailable.");
+                        break;
+                    case error.TIMEOUT:
+                        alert("The request to get user location timed out.");
+                        break;
+                    case error.UNKNOWN_ERROR:
+                        alert("An unknown error occurred.");
+                        break;
+                }
+                uncheck();
+            }
+
             $('#page2').on('pagecreate', function() {
-                /*if (performance.navigation.type == 1 && getUrlVars()["location"] == "on") {
-                    window.location = "refresh.html";
-                }*/
+                if(detectRefresh()) {
+                    var result = confirm("Update your location?");
+                    if(result) {
+                        updateLocation();
+                    }
+                }
                 $( "#parkList" ).listview({ }).empty();
                 initializeSearch(createMap());
             });