Merge pull request #199 from umts/no-default-directions

Stop Getting Directions to Stops by Default

www/factories/map-factories.js

@@ -27,7 +27,9 @@ angular.module('pvta.factories')
       if (cb) {
         cb(currentLocation);
       }
-    }, function () {});
+    }, function () {
+      cb(false);
+    });
     return currentLocation;
   }
 

www/pages/stop-map/stop-map-controller.js

@@ -1,7 +1,8 @@
-angular.module('pvta.controllers').controller('StopMapController', function ($scope, $ionicLoading, $stateParams, Stop, Map) {
+angular.module('pvta.controllers').controller('StopMapController', function ($scope, $ionicLoading, $stateParams, $ionicHistory, $ionicPopup, Stop, Map) {
   ga('set', 'page', '/stop-map.html');
   ga('send', 'pageview');
   var bounds = new google.maps.LatLngBounds();
+  $scope.displayDirections = false;
   var directionsDisplay;
   var directionsService = new google.maps.DirectionsService();
 
@@ -14,42 +15,90 @@ angular.module('pvta.controllers').controller('StopMapController', function ($sc
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
 
-  $scope.map = new google.maps.Map(document.getElementById('stop-map'), mapOptions);
-  Map.init($scope.map, bounds);
-
+  /****
+  * Plots a stop on the map.  When clicked, the marker
+  * will display a popup that gives some details about the stop.
+  * Stop data needs to already have been loaded before this
+  * function will succeed.
+  */
   function placeStop () {
-    var loc = new google.maps.LatLng($scope.stop.Latitude, $scope.stop.Longitude);
-    Map.addMapListener(Map.placeDesiredMarker(loc), 'Here is your stop!');
-    return loc;
+    // If we have stop details, plot it.
+    if ($scope.stop && $scope.stop.Latitude && $scope.stop.Longitude) {
+      var loc = new google.maps.LatLng($scope.stop.Latitude, $scope.stop.Longitude);
+      Map.addMapListener(Map.placeDesiredMarker(loc), $scope.stop.Name + ' (' + $scope.stop.StopId + ')');
+      return loc;
+    }
+    // If we don't have stop details, it means that we couldn't download any.
+    // Show an error dialog and go back to the last page.
+    else {
+      var popup = $ionicPopup.alert({
+        title: 'Unable to Map Stop',
+        template: 'A network error occurred. Please make sure your device has an internet connection.'
+      });
+      popup.then(function () {
+        $ionicHistory.goBack();
+      });
+    }
   }
 
-  function calculateDirections () {
+  /***
+   * Gets directions from the user's current location
+   * to the stop in question and displays them on the UI.
+  */
+  $scope.calculateDirections = function () {
+    $ionicLoading.show({duration: 5000});
+    // A callback that we pass to the plotCurrentLocation
+    // function below.  Handles actually getting
+    // and displaying directions once we have a location.
     var cb = function (position) {
-      start = position;
-      var end = placeStop();
-      var request = {
-        origin: start,
-        destination: end,
-        travelMode: google.maps.TravelMode.WALKING
-      };
-      directionsService.route(request, function (result, status) {
-        if (status === google.maps.DirectionsStatus.OK) {
-          directionsDisplay.setDirections(result);
-        }
-        $ionicLoading.hide();
-      });
+      // If we weren't able to get a location for any reason,
+      // we should encounter a falsy.
+      if (!position) {
+        console.log('unable to get current location');
+        $scope.noLocation = true;
+        $scope.displayDirections = false;
+      }
+      // If we have a location, download and display directions
+      // from here to the stop.
+      else {
+        $scope.noLocation = false;
+        $scope.displayDirections = true;
+        directionsDisplay.setPanel(document.getElementById('directions'));
+        start = position;
+        var end = placeStop();
+        var request = {
+          origin: start,
+          destination: end,
+          travelMode: google.maps.TravelMode.WALKING
+        };
+        directionsService.route(request, function (result, status) {
+          if (status === google.maps.DirectionsStatus.OK) {
+            directionsDisplay.setDirections(result);
+          }
+        });
+      }
+      $ionicLoading.hide();
     };
+    // Get the current location. Once we have (or definitively don't have)
+    // a location, the callback passed as a param will be called.
     Map.plotCurrentLocation(cb);
-  }
+  };
 
   $scope.$on('$ionicView.enter', function () {
     $ionicLoading.show({});
+    // The map div can have one of two ids:
+    // one when directions are being shown, the other when not.
+    // Check which id the map has, pluck it from the HTML, and bind it
+    // to a variable.
+    $scope.map = new google.maps.Map(document.getElementById($scope.displayDirections ? 'stop-map' : 'map'), mapOptions);
+    Map.init($scope.map, bounds);
+    // Be ready to display directions if the user requests them.
     directionsDisplay = new google.maps.DirectionsRenderer();
     directionsDisplay.setMap($scope.map);
-    directionsDisplay.setPanel(document.getElementById('directions'));
+    // Download the stop details and plot it on the map.
     $scope.stop = Stop.get({stopId: $stateParams.stopId}, function () {
-      calculateDirections();
+      placeStop();
+      $ionicLoading.hide();
     });
   });
-
 });

www/pages/stop-map/stop-map.html

@@ -1,6 +1,17 @@
 <ion-view view-title="Map">
   <ion-content>
-    <div id="stop-map"></div>
+    <div ng-if="noLocation">
+      <ion-item class="item item-assertive" style="text-align:center">
+        Unable to retrieve current location.
+      </ion-item>
+    </div>
+    <!--Use angular to dynamically style the map div-->
+    <div ng-attr-id="{{ displayDirections ? 'stop-map' : 'map' }}"></div>
     <div id="directions"></div>
   </ion-content>
+  <ion-footer-bar class="bar-positive">
+      <button class="button icon-center ion-ios-location title" ng-click="calculateDirections()">
+        Get Directions to {{stop.Name}}
+      </button>
+  </ion-footer-bar>
 </ion-view>