added stats to the sidebar, tweaked map to use ng-map, added loading …

…spinner, added logic to set test data when on localhost
brycehewett · Sep 2, 2016 · f0a4a5e · f0a4a5e
1 parent 77054f5
commit f0a4a5e
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 63 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,54 +6,105 @@
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 
     <style>
-      #map {
-        height: calc(100vh - 64px);
-      }
 
       md-pagination-wrapper {
         width: auto!important;
       }
+
+      .content {
+        position: relative;
+      }
+
+      .content md-progress-circular{
+        position: absolute;
+        top: 50%;
+        left:50%;
+        margin-top: -20px;
+        margin-left: -20px;
+      }
+
+      .stat-column {
+        text-align: center;
+      }
+
+      .stat-column h3 {
+        margin-bottom: 0;
+      }
+
+      .stat-column p {
+        color: #888;
+      }
+
+      @media (min-width: 960px) {
+        .map {
+          height: calc(100vh - 64px);
+        }
+      }
+
+      @media (max-width: 959px) {
+        .map {
+          height: calc(100vh - 48px);
+        }
+      }
+
+      @media (max-width: 699px) {
+        .map {
+          height: calc(100vh - 56px);
+        }
+      }
     </style>
   </head>
 
   <body layout="row" ng-controller="mainController as main"  id="{{$state}}" ng-cloak>
-    <md-sidenav md-component-id="left" class="md-sidenav-left"
-                md-is-locked-open="$mdMedia('gt-sm')">
-                <md-toolbar class="md-theme-indigo">
-                  <div class="md-toolbar-tools">
-        <h1 hide-gt-sm>About This Site</h1>
-        <h1 hide-xs hide-sm>Ex-Mormon Missionary Map</h1>
-        <span flex></span>
-        <md-button class="md-icon-button" ng-click="main.toggleNav()" hide-gt-sm>
-          <md-icon aria-label="Close Sidebar" class="material-icons">close</md-icon>
-        </md-button>
-      </div>
+    <md-sidenav md-component-id="left"
+                class="md-sidenav-left"
+                md-is-locked-open="$mdMedia('gt-sm')"
+                layout="column">
+      <md-toolbar class="md-theme-indigo">
+        <div class="md-toolbar-tools">
+          <h1 hide-gt-sm>About This Site</h1>
+          <h1 hide-xs hide-sm>Ex-Mormon Missionary Map</h1>
+          <span flex></span>
+          <md-button class="md-icon-button" ng-click="main.toggleNav()" hide-gt-sm>
+            <md-icon aria-label="Close Sidebar" class="material-icons">close</md-icon>
+          </md-button>
+        </div>
 
       </md-toolbar>
       <md-content class="layout-margin">
-
         <p>
           This map serves as a visual representation of the mormon missionaries that have left The Church of Jesus Christ of Latter-Day Saints.
         </p>
         <p>
           If you served a mission and left the church, add yourself to the map.
         </p>
 
-
         <md-button class="md-primary md-raised md-button"
                    style="width: 90%"
                    ng-click="main.showNewRMDialog($event); main.toggleNav();">
                    Add yourself to the map
         </md-button>
 
       </md-content>
+      <md-content layout="row">
+        <div flex="50" class="stat-column">
+          <h3 class="md-display-3">{{RMCount}}</h3>
+          <p>Missionaries</p>
+        </div>
+
+        <div flex class="stat-column">
+          <h3 class="md-display-3">{{missionCount}}</h3>
+          <p>Missions</p>
+        </div>
+      </md-content>
 
       <span flex></span>
 
       <md-menu-item>
-              <a md-button href="mailto:feedback@exrmmap.com"><p><md-icon class="material-icons">mail</md-icon>Send Feedback About This Site</p></a>
+              <a md-button href="mailto:feedback@exrmmap.com"><p><md-icon class="material-icons">mail</md-icon>Send Feedback <span hide-xs>About This Site</span></p></a>
       </md-menu-item>
     </md-sidenav>
     <div md-layout="column" flex>
@@ -68,7 +119,7 @@ <h1 hide-gt-sm>Ex-Mormon Missionary Map</h1>
         </md-button>
       </div>
       </md-toolbar>
-      <div ui-view></div>
+      <div class="content" ui-view></div>
     </div>
   </body>
 

diff --git a/public/mainCtrl.js b/public/mainCtrl.js
@@ -20,32 +20,34 @@
 
     firebase.initializeApp(firebaseConfig);
 
-    vm.mapAPI = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places';
+    $scope.missionCount = 0;
+    $scope.RMCount = 0;
+    $scope.map;
+    $scope.mapCenter = {
+      lat: 41,
+      lng: -87
+    }
 
+    vm.mapAPI = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOuqyDzI-BqSgSjv1cB3K0P5urSjqNj8Y&libraries=places';
     vm.RMList = {};
+    vm.RMCount = 0;
+
     vm.missionNames = [];
     vm.newRM;
-    var map;
-    vm.mapCenter = {
-      lat: 41,
-      lng: -87
-    };
-
-    var geocoder;
     vm.markerArray = [];
+    vm.MarkerClusterer;
 
     if (window.location.hostname.indexOf('localhost') < 0) {
       var db = 'main/'
     } else {
-      $log.debug('localhost')
+      $log.warn("You're currently on localhost. All data will be pushed to test directory.")
       var db = 'test/'
     }
 
     vm.toggleNav = function() {
       $mdSidenav('left').toggle();
     }
 
-
     vm.appInit = function(){
       firebase.database().ref(db + 'RMList').once('value').then(function(snapshot) {
         vm.RMList = snapshot.val();
@@ -58,10 +60,11 @@
               if (vm.missionNames.indexOf(vm.RMList[rm].missionDetails.name) < 0) {
                 vm.missionNames.push(vm.RMList[rm].missionDetails.name)
               }
+              $scope.missionCount = vm.missionNames.length;
+              $scope.RMCount++
               vm.markerArray.push(marker);
-              $log.debug(marker)
             }
-            vm.markerCluster = new MarkerClusterer(map, vm.markerArray, {
+            $scope.markerCluster = new MarkerClusterer(map, vm.markerArray, {
               imagePath: 'libs/js-marker-clusterer/images/m'});
           })
       }, function(error) {
@@ -78,52 +81,47 @@
         clickOutsideToClose: true
       })
       .then(function(newRM) {
-        vm.mapCenter.lat = newRM.missionDetails.location.lat;
-        vm.mapCenter.lng = newRM.missionDetails.location.lng;
-        console.log(vm.mapCenter.lat)
-        console.log(vm.mapCenter.lng)
+        $scope.mapCenter = newRM.missionDetails.location;
 
         NgMap.getMap().then(function(map) {
           var marker = new google.maps.Marker({
               position: newRM.missionDetails.location
           });
-          vm.markerCluster.addMarker(marker);
-
+          $scope.markerCluster.addMarker(marker);
         })
 
-
-        // map.setCenter(newRM.missionDetails.location);
-
-
-      }, function() {
-      });
+        $scope.missionCount++
+        $scope.RMCount++
+      })
     };
 
     function newRMDialogController($q, $mdDialog, missions) {
 
-
       vm = this;
 
       vm.missionNames = missions
       vm.gmapsService = new google.maps.places.AutocompleteService();
       vm.geocoder = new google.maps.Geocoder();
 
-      vm.RM = {
-        from: 'Panama City, FL',
-        gender: 'Male',
-        creationDate: 'text',
-        leftChurch: {
-          date: '2015',
-          reason: 'text'
-        },
-        missionDetails: {
-          start: '2007',
-          end: '2009',
-          name: 'Tirana Albania Mission',
-          location: {
-            address: 'Tirana, Albania',
+      if (window.location.hostname.indexOf('localhost') == 0) {
+        $log.warn("You're on localhost, adding to test db.")
+        vm.RM = {
+          from: 'Panama City, FL',
+          gender: 'Male',
+          creationDate: 'text',
+          leftChurch: {
+            date: '2015',
+            reason: 'text'
+          },
+          missionDetails: {
+            start: '2007',
+            end: '2009',
+            name: 'Tirana Albania Mission',
+            location: {
+              address: 'Tirana, Albania',
+            }
           }
-        }
+        };
       };
 
       vm.cancel = function() {

diff --git a/public/map.html b/public/map.html
@@ -1,3 +1,14 @@
-<div map-lazy-load="{{main.mapAPI}}">
-  <ng-map center="[{{main.mapCenter.lat}}, {{main.mapCenter.lng}}]" zoom="3"></ng-map>
+<div class="map" map-lazy-load="{{main.mapAPI}}">
+  <ng-map center="[{{mapCenter.lat}}, {{mapCenter.lng}}]"
+          map-initialized="main.mapReady = true"
+          zoom="4"
+          max-zoom="7"
+          min-zoom="4"
+          street-view-control="false">
+  </ng-map>
 </div>
+<md-progress-circular ng-disabled="main.mapReady"
+                      class="md-accent"
+                      md-diameter="40"
+                      class="progress-indicator">
+</md-progress-circular>
diff --git a/public/newRMDialog.html b/public/newRMDialog.html
@@ -27,7 +27,7 @@ <h2>Add to Map</h2>
                                    md-item-text="mission"
                                    md-min-length="1"
                                    md-floating-label="Mission Name"
-                                   required>
+                                   required md-autofocus>
                                    <md-item-template>
                                      <span md-highlight-text="newRM.RM.missionDetails.name"
                                            md-highlight-flags="^i">
@@ -51,8 +51,9 @@ <h2>Add to Map</h2>
                                      <span md-highlight-text="locationSearchText" md-highlight-flags="^i">{{location}}</span>
                                    </md-item-template>
                   </md-autocomplete>
+                  <div layout="row">
 
-                  <md-input-container>
+                  <md-input-container flex="50">
                     <label>Mission Start Year</label>
                     <input ng-model="newRM.RM.missionDetails.start"
                            type="text"
@@ -61,14 +62,15 @@ <h2>Add to Map</h2>
                            required>
                   </md-input-container>
 
-                  <md-input-container>
+                  <md-input-container flex>
                     <label>Mission End Year</label>
                     <input ng-model="newRM.RM.missionDetails.end"
                            type="text"
                            mask="2999"
                            restrict="reject"
                            required>
                   </md-input-container>
+                </div>
                 </form>
             </md-content>
           </md-tab-body>