- Weekly Survey Updates

- Blaze Map "Red" "Yellow" "Green"
- My Diary

platforms/android/assets/www/app/diary/diary.html

+<ion-view view-title="My Trip Diary" ng-init="loadComparisonMessages();">
+    <ion-nav-buttons side="right">
+    </ion-nav-buttons>
+    <ion-content padding="true">
+        <ion-refresher pulling-text="Pull to refresh" on-refresh="loadComparisonMessages(); clearGraphs();"></ion-refresher>
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Comparison Message </div>
+            <div class="item item-body">
+                <p>Some Interesting Facts:</p>
+                <p>"Your shortest travel time is {{comparisonMessage.best_time}} minutes."</p>
+                <p>"Your worst travel time is {{comparisonMessage.worst_time}} minutes."</p>
+                <p>"By comparison, {{comparisonMessage.zero_car_user}} who lives in the same area as you do achieved the shortest travel time of {{comparisonMessage.best_near_car_blazer}} minutes."</p>
+            </div>
+            </form>
+        </div>
+
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Home to School Travel Times </div>
+            <div class="item">
+                <form name="form_1">
+                    <label class="item item-input">
+              <span class="input-label">Start Date:</span>
+              <input type="date" ng-model="request.start_date" required>
+            </label>
+                    <label class="item item-input">
+                <span class="input-label">End Date:</span>
+                <input type="date" ng-model="request.end_date" required>
+            </label>
+                    <button class="button button-block button-dark button-outline" ng-disabled="form_1.$invalid" ng-click="loadHometoSchoolTravel();"> Show </button>
+            </div>
+            <div class="item item-body">
+                <p>Range: {{request.start_date | date:'mediumDate'}} - {{request.end_date | date:'mediumDate'}}</p>
+                <canvas id="line" class="chart chart-line" chart-data="htsdata" chart-labels="htslabels" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
+            </div>
+            </form>
+        </div>
+
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Mode Use by Trips </div>
+            <div class="item item-body">
+                <form name="form_2">
+                    <label class="item item-input">
+              <span class="input-label">Start Date:</span>
+              <input type="date" ng-model="requestMode.start_date" required>
+            </label>
+                    <label class="item item-input">
+                <span class="input-label">End Date:</span>
+                <input type="date" ng-model="requestMode.end_date" required>
+            </label>
+                    <button class="button button-block button-dark button-outline" ng-disabled="form_2.$invalid" ng-click="loadModeUseTravel();"> Show </button>
+            </div>
+            <div class="item item-body">
+                <p>Range: {{requestMode.start_date | date:'mediumDate'}} - {{requestMode.end_date | date:'mediumDate'}}</p>
+                <canvas id="pie" class="chart chart-pie" chart-data="hmadata" chart-labels="hmalabels"></canvas>
+            </div>
+        </div>
+    </ion-content>
+</ion-view>
\ No newline at end of file

platforms/android/assets/www/app/diary/js/diary.js

+angular.module('blazer.diarycontrollers', [])
+
+.controller('DiaryCtrl', function($scope, $filter, getBlazer, postBlazer) {
+
+    $scope.request = {};
+
+    $scope.travelData = {};
+    $scope.htslabels = {};
+    $scope.htsdata = {};
+    $scope.loadHometoSchoolTravel = function() {
+        $scope.htslabels = [];
+        $scope.htsdata = [];
+        var request = {
+            username: localStorage.getItem("username"),
+            start_date: $filter('date')($scope.request.start_date, 'yyyy-MM-dd'),
+            end_date: $filter('date')($scope.request.end_date, 'yyyy-MM-dd'),
+        }
+        postBlazer.HometoSchoolTravelTimes(request)
+            .success(function(response) {
+                console.log("HOME TO SCHOOL DATA", JSON.stringify(response));
+                $scope.travelData = response.travel_times;
+                $scope.htslabels = [];
+                $scope.htsdata = [];
+                for (var i = 0; i < $scope.travelData.length; i++) {
+                    console.log("[ PARSED DATA ]", JSON.stringify($scope.travelData[i]));
+                    var string_data = $scope.travelData[i].date;
+                    $scope.htslabels.push([string_data.toString()]);
+                    $scope.htsdata.push([$scope.travelData[i].time]);
+                }
+                console.log(JSON.stringify($scope.htslabels));
+                console.log(JSON.stringify($scope.htsdata));
+            })
+            .error(function(response) {
+                console.error("HOME TO SCHOOL ERROR", response);
+            });
+    }
+
+    $scope.requestMode = {};
+    $scope.hmadata = [];
+    $scope.hmalabels = [];
+    $scope.loadModeUseTravel = function() {
+        $scope.hmadata = [];
+        $scope.hmalabels = [];
+        var requestMode = {
+            username: localStorage.getItem("username"),
+            start_date: $filter('date')($scope.request.start_date, 'yyyy-MM-dd'),
+            end_date: $filter('date')($scope.request.end_date, 'yyyy-MM-dd'),
+        }
+        getBlazer.getHowYouMoveAround(requestMode.start_date, requestMode.end_date, requestMode.username).then(function(data) {
+            console.log("[ TRAVEL MODE ]", JSON.stringify(data));
+            if (!data) {
+                $ionicLoading.show({ template: "No data for this request", duration: 1000 });
+            } else {
+                angular.forEach(data, function(value, key) {
+                    $scope.hmalabels.push([key]);
+                    $scope.hmadata.push(value);
+                });
+
+                console.log($scope.hmalabels);
+                console.log($scope.hmadata);
+            }
+        });
+    }
+
+    $scope.comparisonMessage = {};
+    $scope.loadComparisonMessages = function() {
+        $scope.$broadcast('scroll.refreshComplete');
+        var requestMode = {
+            username: localStorage.getItem("username")
+        }
+        getBlazer.getComparisonMessage(requestMode.username).then(function(data) {
+            console.log("[ TRAVEL MODE ]", JSON.stringify(data));
+            $scope.comparisonMessage = {
+                best_time: data.fact_1.best_time,
+                worst_time: data.fact_1.worst_time,
+                best_time_near: data.fact_1.best_time_near,
+                total_car_usage: data.fact_2.total_car_usage,
+                best_near_car_usage: data.fact_2.best_near_car_usage,
+                best_near_car_blazer: data.fact_2.best_near_car_blazer,
+                zero_car_user: data.fact_2.zero_car_user
+            }
+        });
+    }
+
+    $scope.clearGraphs = function() {
+        $scope.$broadcast('scroll.refreshComplete');
+        $scope.requestMode = {};
+        $scope.hmadata = [];
+        $scope.hmalabels = [];
+
+        $scope.request = {};
+        $scope.travelData = {};
+        $scope.htslabels = {};
+        $scope.htsdata = {};
+    }
+});
\ No newline at end of file

platforms/android/assets/www/app/map/map.html

@@ -6,7 +6,7 @@
         <button ng-click="openPopover($event);" class="button button-icon ion-android-apps" ng-disabled="tripStatus"></button>
     </ion-nav-buttons>
 
-  <ion-floating-button style='opacity: 0.8;'' click="refreshMap();" has-footer="true" button-color="#333333" icon="ion-android-refresh" icon-color="#fff" ng-hide="tripStatus">
+    <ion-floating-button style='opacity: 0.8;' click="refreshMap();" has-footer="true" button-color="#333333" icon="ion-android-refresh" icon-color="#fff" ng-hide="tripStatus">
     </ion-floating-button>
 
     <div class="bar bar-subheader bar-clear darkblue item-input-inset">

platforms/android/assets/www/app/map/popover/map-popover.html

 <ion-popover-view class="fit">
     <ion-content scroll="false">
         <div class="list">
-      <a ng-click="getBlazersData();closePopover($event);" class="item item-icon-left">
-        <i class="icon ion-android-pin"></i>
-         Show Blazers
+            <a ng-click="getBlazersDataV2();closePopover($event);" class="item item-icon-left">
+                <i class="icon ion-android-pin"></i> Show Blazers
             </a>
-      <!--<a ng-click="loadHeatMap();" class="item item-icon-left">
-        <i class="icon ion-android-pin"></i>
-          Load Heatmap
-      </a>-->
             <a ng-click="triggerWeeklySurvey();closePopover($event);" class="item item-icon-left">
-        <i class="icon ion-android-clipboard"></i>
-        Weekly Survey
+                <i class="icon ion-android-clipboard"></i> Weekly Survey
             </a>
         </div>
     </ion-content>

platforms/android/assets/www/app/menu/menu.html

@@ -11,12 +11,20 @@
     </ion-side-menu-content>
     <ion-side-menu side="left" width="220">
         <ion-content class="darkSide">
-      <h3 class="text-light"><center>BLAZE</center></h3>
-      <ion-item nav-clear menu-close href="#/app/profile" class="item-avatar"><ionic-letter-avatar data="{{ user.username  }}" shape="round" charcount="2"></ionic-letter-avatar><h4 class="text-light">{{ user.username  }}</h4><h5 class="text-light">Blazer User</h5></ion-item>
+            <h3 class="text-light">
+                <center>BLAZE</center>
+            </h3>
+            <ion-item nav-clear menu-close href="#/app/profile" class="item-avatar">
+                <ionic-letter-avatar data="{{ user.username  }}" shape="round" charcount="2"></ionic-letter-avatar>
+                <h4 class="text-light">{{ user.username }}</h4>
+                <h5 class="text-light">Blazer User</h5>
+            </ion-item>
             <ion-item nav-clear menu-close href="#/app/map" class="item-icon item-icon-left"><i class="icon ion-android-compass"></i>Blaze Network</ion-item>
             <!-- <ion-item nav-clear menu-close href="#/app/offerride" class="item-icon item-icon-left"><i class="icon ion-android-car"></i>Offer a Ride</ion-item> -->
             <ion-item nav-clear menu-close href="#/app/sharedride" class="item-icon item-icon-left"><i class="icon ion-android-contacts"></i>Shared Ride</ion-item>
             <ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-android-wifi"></i>My Travel Stats</ion-item>
+            <ion-item nav-clear menu-close href="#/app/diary" class="item-icon item-icon-left"><i class="icon ion-bookmark"></i>My Trip Diary</ion-item>
+            <!--<ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-edit"></i>Trip Logging</ion-item>-->
             <ion-item nav-clear menu-close href="#/app/about" class="item-icon item-icon-left"><i class="icon ion-android-bulb"></i>About</ion-item>
             <ion-item nav-clear menu-close href="#/app/settings" class="item-icon item-icon-left"><i class="icon ion-android-settings"></i>Settings</ion-item>
         </ion-content>

platforms/android/assets/www/app/status/status.html

@@ -3,7 +3,7 @@
     </ion-nav-buttons>
     <ion-content>
         <ion-refresher pulling-text="Pull to refresh" on-refresh="getTravelStats();"></ion-refresher>
-    <div class="list">
+        <div class="list card">
             <div class="item item-divider"> Mode of Use </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Latest</i>
@@ -15,33 +15,14 @@
                 <i class="button button-block button-clear bgbluegreen text-light">Frequently Used</i>
                 <i class="button button-block icon-left ion-android-car"><b>{{ blazersStats.mode_frequent }}</b></i>
                 <i class="button button-block icon-left ion-android-bulb"><b>{{ blazersStats.emo_frequent }}</b></i>
-        <!--<i class="button button-block icon-left ion-android-time"><b>{{blazersStats.time_average}}</b></i>-->
             </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Low-Carbon</i>
                 <i class="button button-block icon-left ion-android-car"><b>{{ blazersStats.mode_best }}</b></i>
                 <i class="button button-block icon-left ion-android-bulb"><b>{{ blazersStats.emo_frequent_positive }}</b></i>
-        <!--<i class="button button-block icon-left ion-android-time"><b>{{blazersStats.time_best}}</b></i>-->
             </div>
-      <!--<div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i> Latest </i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_latest">NULL</i>{{ blazersStats.mode_latest }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_latest">NULL</i>{{ blazersStats.emo_latest }}</p>
         </div>
-      <div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i>Frequently Used</i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_frequent">NULL</i>{{ blazersStats.mode_frequent }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_frequent">NULL</i>{{ blazersStats.emo_frequent }}</p>
-      </div>
-      <div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i>Low-Carbon</i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_best">NULL</i>{{ blazersStats.mode_best }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_frequent_positive">NULL</i>{{ blazersStats.emo_frequent_positive }}</p>
-      </div>-->
-
+        <div class="list card">
             <div class="item item-divider"> Time </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Latest</i>
@@ -55,21 +36,6 @@
                 <i class="button button-block button-clear bgbluegreen text-light">Best</i>
                 <i class="button button-block icon-left ion-android-time"><b>{{ blazersStats.time_best }}</b></i>
             </div>
-      <!--<div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Latest 
-        <span class="item-note"> <i ng-if="!blazersStats.time_latest">NULL</i>{{ blazersStats.time_latest }} </span>
-      </div>
-      <div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Average 
-        <span class="item-note"> <i ng-if="!blazersStats.time_average">NULL</i>{{ blazersStats.time_average }} </span>
-      </div>
-      <div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Best
-        <span class="item-note"> <i ng-if="!blazersStats.time_best">NULL</i>{{ blazersStats.time_best }} </span>
-      </div>-->
         </div>
     </ion-content>
 </ion-view>
\ No newline at end of file

platforms/android/assets/www/app/survey/js/survey.js

@@ -11,10 +11,10 @@ angular.module('blazer.surveycontrollers', [])
     };
 
     $scope.endtrip = {};
-  $scope.postEndTripSurvey = function(){
+    $scope.postEndTripSurvey = function() {
         /* CHECK IF MOBILE IS ONLINE */
         console.log("[ NETWORK STATUS ]", $cordovaNetwork.getNetwork());
-		if($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G ||$cordovaNetwork.getNetwork() == Connection.CELL_4G){
+        if ($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G || $cordovaNetwork.getNetwork() == Connection.CELL_4G) {
             var tripID = localStorage.getItem("tripid");
             var username = localStorage.getItem("username");
             var startTime = localStorage.getItem("starttime");
@@ -24,7 +24,7 @@ angular.module('blazer.surveycontrollers', [])
             var currentTrip = localStorage.getItem("currentTrip");
 
             var postdata = {
-        "trip_id" : tripID,
+                "trip_id": tripID,
                 "username": username,
                 "depart": startTime,
                 "arrive": endTime,
@@ -45,8 +45,7 @@ angular.module('blazer.surveycontrollers', [])
                     $scope.endtrip = {};
                     console.error("SEND ENDTRIP SURVEY ERROR", response);
                 });
-		} 
-		else {
+        } else {
             $cordovaDialogs.alert('Network Connection is required before taking this action. Thank you!', 'Ooops', "OKAY");
         }
     }
@@ -55,22 +54,22 @@ angular.module('blazer.surveycontrollers', [])
         $ionicSlideBoxDelegate.enableSlide(false);
     };
     $scope.currentIndex = '';
-  $scope.backSlide = function(){
+    $scope.backSlide = function() {
         $ionicScrollDelegate.scrollTop(true);
         $ionicSlideBoxDelegate.previous();
         $scope.currentIndex = $ionicSlideBoxDelegate.currentIndex();
     }
 
-  $scope.nextPageSlide = function(){
+    $scope.nextPageSlide = function() {
         $ionicScrollDelegate.scrollTop(true);
         $ionicSlideBoxDelegate.next();
         $scope.currentIndex = $ionicSlideBoxDelegate.currentIndex();
     }
 
     $scope.weekly = {};
-  $scope.postWeeklySurvey = function(){
+    $scope.postWeeklySurvey = function() {
         console.log("[ NETWORK STATUS ]", $cordovaNetwork.getNetwork());
-		if($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G ||$cordovaNetwork.getNetwork() == Connection.CELL_4G){
+        if ($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G || $cordovaNetwork.getNetwork() == Connection.CELL_4G) {
             var userID = localStorage.getItem("userID");
             var username = localStorage.getItem("username");
             var newDate = new Date();
@@ -80,33 +79,18 @@ angular.module('blazer.surveycontrollers', [])
             var surveyAnswer = [];
 
             /* LOOP SCOPE OF CHOICES */
-      if($scope.weekly.main == 1 || $scope.weekly.main == 2){
-        angular.forEach($scope.choice1, function(value, key){
-          surveyAnswer.push(parseInt(value));
-        })
-      }
-      else  if($scope.weekly.main == 3){
-        angular.forEach($scope.choice3, function(value, key){
+            if ($scope.weekly.main == 1 || $scope.weekly.main == 2 || $scope.weekly.main == 3 || $scope.weekly.main == 4 || $scope.weekly.main == 5 || $scope.weekly.main == 6) {
+                angular.forEach($scope.choice1, function(value, key) {
+                    if (value == 'N/A') {
+                        surveyAnswer.push(value);
+                    } else {
                         surveyAnswer.push(parseInt(value));
-        })
                     }
-      else  if($scope.weekly.main == 4){
-        angular.forEach($scope.choice4, function(value, key){
-          surveyAnswer.push(parseInt(value));
                 })
-      }
-      else  if($scope.weekly.main == 5){
-        angular.forEach($scope.choice5, function(value, key){
-          surveyAnswer.push(parseInt(value));
-        })
-      }
-      else  if($scope.weekly.main == 'C'){
+            } else if ($scope.weekly.main == 'C') {
                 surveyAnswer = null;
             }
 
-      // var surveyAns = surveyAnswer;
-      // var surveyAnsStr = surveyAns.join(",");
-
             var surveyString = surveyAnswer.toString();
 
             console.log("[ WEEKLY SURVEY ANSWERS ]", JSON.stringify(surveyString));
@@ -129,13 +113,12 @@ angular.module('blazer.surveycontrollers', [])
                     $scope.resetValues();
                     $scope.closeWeeklyModal();
                 });
-		} 
-		else {
+        } else {
             $cordovaDialogs.alert('Network Connection is required before taking this action. Thank you!', 'Ooops', "OKAY");
         }
     }
 
-  $scope.resetValues = function(){
+    $scope.resetValues = function() {
         $scope.weekly = {};
         $scope.choice1 = {
             one: "0",
@@ -253,9 +236,7 @@ angular.module('blazer.surveycontrollers', [])
         { number: 13 },
         { number: 14 },
         { number: 15 }
-];
-$scope.selectedItem = $scope.items[2];
+    ];
+    $scope.selectedItem = $scope.items[2];
 
 });
\ No newline at end of file
-
-

platforms/android/assets/www/css/leaflet.css

@@ -18,10 +18,13 @@
     left: 0;
     top: 0;
 }
+
 .leaflet-container {
     overflow: hidden;
     -ms-touch-action: none;
+    touch-action: none;
 }
+
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
@@ -30,45 +33,76 @@
     user-select: none;
     -webkit-user-drag: none;
 }
+
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
     display: block;
 }
+
+
 /* map is broken in FF if you have max-width: 100% on tiles */
+
 .leaflet-container img {
     max-width: none !important;
 }
+
+
 /* stupid Android 2 doesn't understand "max-width: none" properly */
+
 .leaflet-container img.leaflet-image-layer {
     max-width: 15000px !important;
 }
+
 .leaflet-tile {
     filter: inherit;
     visibility: hidden;
 }
+
 .leaflet-tile-loaded {
     visibility: inherit;
 }
+
 .leaflet-zoom-box {
     width: 0;
     height: 0;
 }
+
+
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+
 .leaflet-overlay-pane svg {
     -moz-user-select: none;
 }
 
-.leaflet-tile-pane    { z-index: 2; }
-.leaflet-objects-pane { z-index: 3; }
-.leaflet-overlay-pane { z-index: 4; }
-.leaflet-shadow-pane  { z-index: 5; }
-.leaflet-marker-pane  { z-index: 6; }
-.leaflet-popup-pane   { z-index: 7; }
+.leaflet-tile-pane {
+    z-index: 2;
+}
+
+.leaflet-objects-pane {
+    z-index: 3;
+}
+
+.leaflet-overlay-pane {
+    z-index: 4;
+}
+
+.leaflet-shadow-pane {
+    z-index: 5;
+}
+
+.leaflet-marker-pane {
+    z-index: 6;
+}
+
+.leaflet-popup-pane {
+    z-index: 7;
+}
 
 .leaflet-vml-shape {
     width: 1px;
     height: 1px;
 }
+
 .lvml {
     behavior: url(#default#VML);
     display: inline-block;
@@ -83,40 +117,51 @@
     z-index: 7;
     pointer-events: auto;
 }
+
 .leaflet-top,
 .leaflet-bottom {
     position: absolute;
     z-index: 1000;
     pointer-events: none;
 }
+
 .leaflet-top {
     top: 0;
 }
+
 .leaflet-right {
     right: 0;
 }
+
 .leaflet-bottom {
     bottom: 0;
 }
+
 .leaflet-left {
     left: 0;
 }
+
 .leaflet-control {
     float: left;
     clear: both;
 }
+
 .leaflet-right .leaflet-control {
     float: right;
 }
+
 .leaflet-top .leaflet-control {
     margin-top: 10px;
 }
+
 .leaflet-bottom .leaflet-control {
     margin-bottom: 10px;
 }
+
 .leaflet-left .leaflet-control {
     margin-left: 10px;
 }
+
 .leaflet-right .leaflet-control {
     margin-right: 10px;
 }
@@ -132,17 +177,19 @@
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
+
 .leaflet-fade-anim .leaflet-tile-loaded,
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
     opacity: 1;
 }
 
 .leaflet-zoom-anim .leaflet-zoom-animated {
-  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-  -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-  -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
-  transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
 }
+
 .leaflet-zoom-anim .leaflet-tile,
 .leaflet-pan-anim .leaflet-tile,
 .leaflet-touching .leaflet-zoom-animated {
@@ -162,14 +209,17 @@
 .leaflet-clickable {
     cursor: pointer;
 }
+
 .leaflet-container {
     cursor: -webkit-grab;
     cursor: -moz-grab;
 }
+
 .leaflet-popup-pane,
 .leaflet-control {
     cursor: auto;
 }
+
 .leaflet-dragging .leaflet-container,
 .leaflet-dragging .leaflet-clickable {
     cursor: move;
@@ -184,19 +234,23 @@
     background: #ddd;
     outline: 0;
 }
+
 .leaflet-container a {
     color: #0078A8;
 }
+
 .leaflet-container a.leaflet-active {
     outline: 2px solid orange;
 }
+
 .leaflet-zoom-box {
     border: 2px dotted #38f;
-  background: rgba(255,255,255,0.5);
+    background: rgba(255, 255, 255, 0.5);
 }
 
 
 /* general typography */
+
 .leaflet-container {
     font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
@@ -205,9 +259,10 @@
 /* general toolbar styles */
 
 .leaflet-bar {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     border-radius: 4px;
 }
+
 .leaflet-bar a,
 .leaflet-bar a:hover {
     background-color: #fff;
@@ -220,24 +275,29 @@
     text-decoration: none;
     color: black;
 }
+
 .leaflet-bar a,
 .leaflet-control-layers-toggle {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
 }
+
 .leaflet-bar a:hover {
     background-color: #f4f4f4;
 }
+
 .leaflet-bar a:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
+
 .leaflet-bar a:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     border-bottom: none;
 }
+
 .leaflet-bar a.leaflet-disabled {
     cursor: default;
     background-color: #f4f4f4;
@@ -258,6 +318,7 @@
     font: bold 18px 'Lucida Console', Monaco, monospace;
     text-indent: 1px;
 }
+
 .leaflet-control-zoom-out {
     font-size: 20px;
 }
@@ -265,6 +326,7 @@
 .leaflet-touch .leaflet-control-zoom-in {
     font-size: 22px;
 }
+
 .leaflet-touch .leaflet-control-zoom-out {
     font-size: 24px;
 }
@@ -273,44 +335,53 @@
 /* layers control */
 
 .leaflet-control-layers {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
     background: #fff;
     border-radius: 5px;
 }
+
 .leaflet-control-layers-toggle {
     background-image: url(images/layers.png);
     width: 36px;
     height: 36px;
 }
+
 .leaflet-retina .leaflet-control-layers-toggle {
     background-image: url(images/layers-2x.png);
     background-size: 26px 26px;
 }
+
 .leaflet-touch .leaflet-control-layers-toggle {
     width: 44px;
     height: 44px;
 }
+
 .leaflet-control-layers .leaflet-control-layers-list,
 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
     display: none;
 }
+
 .leaflet-control-layers-expanded .leaflet-control-layers-list {
     display: block;
     position: relative;
 }
+
 .leaflet-control-layers-expanded {
     padding: 6px 10px 6px 6px;
     color: #333;
     background: #fff;
 }
+
 .leaflet-control-layers-selector {
     margin-top: 2px;
     position: relative;
     top: 1px;
 }
+
 .leaflet-control-layers label {
     display: block;
 }
+
 .leaflet-control-layers-separator {
     height: 0;
     border-top: 1px solid #ddd;
@@ -325,27 +396,34 @@
     background: rgba(255, 255, 255, 0.7);
     margin: 0;
 }
+
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
     padding: 0 5px;
     color: #333;
 }
+
 .leaflet-control-attribution a {
     text-decoration: none;
 }
+
 .leaflet-control-attribution a:hover {
     text-decoration: underline;
 }
+
 .leaflet-container .leaflet-control-attribution,
 .leaflet-container .leaflet-control-scale {
     font-size: 11px;
 }
+
 .leaflet-left .leaflet-control-scale {
     margin-left: 5px;
 }
+
 .leaflet-bottom .leaflet-control-scale {
     margin-bottom: 5px;
 }
+
 .leaflet-control-scale-line {
     border: 2px solid #777;
     border-top: none;
@@ -356,15 +434,16 @@
     overflow: hidden;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
-
     background: #fff;
     background: rgba(255, 255, 255, 0.5);
 }
+
 .leaflet-control-scale-line:not(:first-child) {
     border-top: 2px solid #777;
     border-bottom: none;
     margin-top: -2px;
 }
+
 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
     border-bottom: 2px solid #777;
 }
@@ -374,9 +453,10 @@
 .leaflet-touch .leaflet-bar {
     box-shadow: none;
 }
+
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
-  border: 2px solid rgba(0,0,0,0.2);
+    border: 2px solid rgba(0, 0, 0, 0.2);
     background-clip: padding-box;
 }
 
@@ -387,18 +467,22 @@
     position: absolute;
     text-align: center;
 }
+
 .leaflet-popup-content-wrapper {
     padding: 1px;
     text-align: left;
     border-radius: 12px;
 }
+
 .leaflet-popup-content {
     margin: 13px 19px;
     line-height: 1.4;
 }
+
 .leaflet-popup-content p {
     margin: 18px 0;
 }
+
 .leaflet-popup-tip-container {
     margin: 0 auto;
     width: 40px;
@@ -406,25 +490,25 @@
     position: relative;
     overflow: hidden;
 }
+
 .leaflet-popup-tip {
     width: 17px;
     height: 17px;
     padding: 1px;
-
     margin: -10px auto 0;
-
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
 }
+
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
     background: white;
-
-  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
 }
+
 .leaflet-container a.leaflet-popup-close-button {
     position: absolute;
     top: 0;
@@ -439,9 +523,11 @@
     font-weight: bold;
     background: transparent;
 }
+
 .leaflet-container a.leaflet-popup-close-button:hover {
     color: #999;
 }
+
 .leaflet-popup-scrolled {
     overflow: auto;
     border-bottom: 1px solid #ddd;
@@ -451,13 +537,14 @@
 .leaflet-oldie .leaflet-popup-content-wrapper {
     zoom: 1;
 }
+
 .leaflet-oldie .leaflet-popup-tip {
     width: 24px;
     margin: 0 auto;
-
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
-  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+    filter: progid: DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 }
+
 .leaflet-oldie .leaflet-popup-tip-container {
     margin-top: -1px;
 }

platforms/android/assets/www/index.html

 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
@@ -28,7 +29,8 @@
     <script src="lib/ngCordova/ng-cordova.min.js"></script>
     <script src="cordova.js"></script>
 
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
+    <!--<script src="lib/leaflet/leaflet-google.js"></script>-->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
     <!-- your app's js -->
@@ -45,6 +47,7 @@
     <script src="app/misc/js/misc.js"></script>
     <script src="app/ride/js/ride.js"></script>
     <script src="app/message/js/message.js"></script>
+    <script src="app/diary/js/diary.js"></script>
 
     <script src="js/config.js"></script>
     <script src="js/blazerAPI.js"></script>
@@ -56,9 +59,12 @@
 
     <script src="js/directives/radioButtons.js"></script>
 
-  </head>
 
-  <body ng-app="blazer" class="platform-android platform-cordova platform-webview">
+
+</head>
+
+<body ng-app="blazer" class="platform-android platform-cordova platform-webview">
     <ion-nav-view></ion-nav-view>
-  </body>
+</body>
+
 </html>
\ No newline at end of file

platforms/android/assets/www/js/app.js

@@ -10,6 +10,7 @@ angular.module('blazer', [
     'blazer.tripcontrollers',
     'blazer.misccontrollers',
     'blazer.surveycontrollers',
+    'blazer.diarycontrollers',
     'blazer.apiservices',
     'blazer.rideinformation',
     'blazer.composemessage',
@@ -36,7 +37,7 @@ angular.module('blazer', [
         $ionicPickerI18n.cancelClass = "button-dark button-outline";
     });
 
-  $ionicPlatform.registerBackButtonAction(function (event) {
+    $ionicPlatform.registerBackButtonAction(function(event) {
         event.preventDefault();
     }, 100);
 })
@@ -178,5 +179,16 @@ angular.module('blazer', [
             }
         }
     })
+
+    /* DIARY */
+    .state('app.diary', {
+        url: '/diary',
+        views: {
+            'menuContent': {
+                templateUrl: 'app/diary/diary.html',
+                controller: 'DiaryCtrl'
+            }
+        }
+    })
     $urlRouterProvider.otherwise('/landing');
 })
\ No newline at end of file

platforms/android/assets/www/js/config.js

 var blazerAPI = 'http://blaze.eacomm.com/api';
-var appVersion = '1.0.0';
-var buildNumber = '1.0.0';
+var blazerAPI_V2 = 'http://blaze.eacomm.com/api_v2';
+var appVersion = '2.0.0';
+var buildNumber = '0.0.1';
 var maplayer = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 
 // 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemVyb2Rlbm5pcyIsImEiOiJjaXNjeGxheWkwMDJtMm52bzMzd2lyNmZ4In0.IkVfNZVJ6eE8WCssMvrJiA'
\ No newline at end of file

platforms/android/assets/www/lib/leaflet/leaflet-google.js

+/*
+ * L.TileLayer is used for standard xyz-numbered tile layers.
+ */
+
+L.Google = L.Class.extend({
+    includes: L.Mixin.Events,
+
+    options: {
+        minZoom: 0,
+        maxZoom: 18,
+        tileSize: 256,
+        subdomains: 'abc',
+        errorTileUrl: '',
+        attribution: '',
+        opacity: 1,
+        continuousWorld: false,
+        noWrap: false,
+    },
+
+    // Possible types: SATELLITE, ROADMAP, HYBRID
+    initialize: function(type, options) {
+        L.Util.setOptions(this, options);
+
+        this._type = google.maps.MapTypeId[type || 'SATELLITE'];
+    },
+
+    onAdd: function(map, insertAtTheBottom) {
+        this._map = map;
+        this._insertAtTheBottom = insertAtTheBottom;
+
+        // create a container div for tiles
+        this._initContainer();
+        this._initMapObject();
+
+        // set up events
+        map.on('viewreset', this._resetCallback, this);
+
+        this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
+        map.on('move', this._update, this);
+        //map.on('moveend', this._update, this);
+
+        this._reset();
+        this._update();
+    },
+
+    onRemove: function(map) {
+        this._map._container.removeChild(this._container);
+        //this._container = null;
+
+        this._map.off('viewreset', this._resetCallback, this);
+
+        this._map.off('move', this._update, this);
+        //this._map.off('moveend', this._update, this);
+    },
+
+    getAttribution: function() {
+        return this.options.attribution;
+    },
+
+    setOpacity: function(opacity) {
+        this.options.opacity = opacity;
+        if (opacity < 1) {
+            L.DomUtil.setOpacity(this._container, opacity);
+        }
+    },
+
+    _initContainer: function() {
+        var tilePane = this._map._container
+        first = tilePane.firstChild;
+
+        if (!this._container) {
+            this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
+            this._container.id = "_GMapContainer";
+        }
+
+        if (true) {
+            tilePane.insertBefore(this._container, first);
+
+            this.setOpacity(this.options.opacity);
+            var size = this._map.getSize();
+            this._container.style.width = size.x + 'px';
+            this._container.style.height = size.y + 'px';
+        }
+    },
+
+    _initMapObject: function() {
+        this._google_center = new google.maps.LatLng(0, 0);
+        var map = new google.maps.Map(this._container, {
+            center: this._google_center,
+            zoom: 0,
+            mapTypeId: this._type,
+            disableDefaultUI: true,
+            keyboardShortcuts: false,
+            draggable: false,
+            disableDoubleClickZoom: true,
+            scrollwheel: false,
+            streetViewControl: false
+        });
+
+        var _this = this;
+        this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
+            function() { _this.onReposition(); });
+
+        map.backgroundColor = '#ff0000';
+        this._google = map;
+    },
+
+    _resetCallback: function(e) {
+        this._reset(e.hard);
+    },
+
+    _reset: function(clearOldContainer) {
+        this._initContainer();
+    },
+
+    _update: function() {
+        this._resize();
+
+        var bounds = this._map.getBounds();
+        var ne = bounds.getNorthEast();
+        var sw = bounds.getSouthWest();
+        var google_bounds = new google.maps.LatLngBounds(
+            new google.maps.LatLng(sw.lat, sw.lng),
+            new google.maps.LatLng(ne.lat, ne.lng)
+        );
+        var center = this._map.getCenter();
+        var _center = new google.maps.LatLng(center.lat, center.lng);
+
+        this._google.setCenter(_center);
+        this._google.setZoom(this._map.getZoom());
+        //this._google.fitBounds(google_bounds);
+    },
+
+    _resize: function() {
+        var size = this._map.getSize();
+        if (this._container.style.width == size.x &&
+            this._container.style.height == size.y)
+            return;
+        this._container.style.width = size.x + 'px';
+        this._container.style.height = size.y + 'px';
+        google.maps.event.trigger(this._google, "resize");
+    },
+
+    onReposition: function() {
+        //google.maps.event.trigger(this._google, "resize");
+    }
+});
\ No newline at end of file

www/app/diary/diary.html

+<ion-view view-title="My Trip Diary" ng-init="loadComparisonMessages();">
+    <ion-nav-buttons side="right">
+    </ion-nav-buttons>
+    <ion-content padding="true">
+        <ion-refresher pulling-text="Pull to refresh" on-refresh="loadComparisonMessages(); clearGraphs();"></ion-refresher>
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Comparison Message </div>
+            <div class="item item-body">
+                <p>Some Interesting Facts:</p>
+                <p>"Your shortest travel time is {{comparisonMessage.best_time}} minutes."</p>
+                <p>"Your worst travel time is {{comparisonMessage.worst_time}} minutes."</p>
+                <p>"By comparison, {{comparisonMessage.zero_car_user}} who lives in the same area as you do achieved the shortest travel time of {{comparisonMessage.best_near_car_blazer}} minutes."</p>
+            </div>
+            </form>
+        </div>
+
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Home to School Travel Times </div>
+            <div class="item">
+                <form name="form_1">
+                    <label class="item item-input">
+              <span class="input-label">Start Date:</span>
+              <input type="date" ng-model="request.start_date" required>
+            </label>
+                    <label class="item item-input">
+                <span class="input-label">End Date:</span>
+                <input type="date" ng-model="request.end_date" required>
+            </label>
+                    <button class="button button-block button-dark button-outline" ng-disabled="form_1.$invalid" ng-click="loadHometoSchoolTravel();"> Show </button>
+            </div>
+            <div class="item item-body">
+                <p>Range: {{request.start_date | date:'mediumDate'}} - {{request.end_date | date:'mediumDate'}}</p>
+                <canvas id="line" class="chart chart-line" chart-data="htsdata" chart-labels="htslabels" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
+            </div>
+            </form>
+        </div>
+
+        <div class="card">
+            <div class="item item-header item-clear bgbluegreen text-light"> Mode Use by Trips </div>
+            <div class="item item-body">
+                <form name="form_2">
+                    <label class="item item-input">
+              <span class="input-label">Start Date:</span>
+              <input type="date" ng-model="requestMode.start_date" required>
+            </label>
+                    <label class="item item-input">
+                <span class="input-label">End Date:</span>
+                <input type="date" ng-model="requestMode.end_date" required>
+            </label>
+                    <button class="button button-block button-dark button-outline" ng-disabled="form_2.$invalid" ng-click="loadModeUseTravel();"> Show </button>
+            </div>
+            <div class="item item-body">
+                <p>Range: {{requestMode.start_date | date:'mediumDate'}} - {{requestMode.end_date | date:'mediumDate'}}</p>
+                <canvas id="pie" class="chart chart-pie" chart-data="hmadata" chart-labels="hmalabels"></canvas>
+            </div>
+        </div>
+    </ion-content>
+</ion-view>
\ No newline at end of file

www/app/diary/js/diary.js

+angular.module('blazer.diarycontrollers', [])
+
+.controller('DiaryCtrl', function($scope, $filter, getBlazer, postBlazer) {
+
+    $scope.request = {};
+
+    $scope.travelData = {};
+    $scope.htslabels = {};
+    $scope.htsdata = {};
+    $scope.loadHometoSchoolTravel = function() {
+        $scope.htslabels = [];
+        $scope.htsdata = [];
+        var request = {
+            username: localStorage.getItem("username"),
+            start_date: $filter('date')($scope.request.start_date, 'yyyy-MM-dd'),
+            end_date: $filter('date')($scope.request.end_date, 'yyyy-MM-dd'),
+        }
+        postBlazer.HometoSchoolTravelTimes(request)
+            .success(function(response) {
+                console.log("HOME TO SCHOOL DATA", JSON.stringify(response));
+                $scope.travelData = response.travel_times;
+                $scope.htslabels = [];
+                $scope.htsdata = [];
+                for (var i = 0; i < $scope.travelData.length; i++) {
+                    console.log("[ PARSED DATA ]", JSON.stringify($scope.travelData[i]));
+                    var string_data = $scope.travelData[i].date;
+                    $scope.htslabels.push([string_data.toString()]);
+                    $scope.htsdata.push([$scope.travelData[i].time]);
+                }
+                console.log(JSON.stringify($scope.htslabels));
+                console.log(JSON.stringify($scope.htsdata));
+            })
+            .error(function(response) {
+                console.error("HOME TO SCHOOL ERROR", response);
+            });
+    }
+
+    $scope.requestMode = {};
+    $scope.hmadata = [];
+    $scope.hmalabels = [];
+    $scope.loadModeUseTravel = function() {
+        $scope.hmadata = [];
+        $scope.hmalabels = [];
+        var requestMode = {
+            username: localStorage.getItem("username"),
+            start_date: $filter('date')($scope.request.start_date, 'yyyy-MM-dd'),
+            end_date: $filter('date')($scope.request.end_date, 'yyyy-MM-dd'),
+        }
+        getBlazer.getHowYouMoveAround(requestMode.start_date, requestMode.end_date, requestMode.username).then(function(data) {
+            console.log("[ TRAVEL MODE ]", JSON.stringify(data));
+            if (!data) {
+                $ionicLoading.show({ template: "No data for this request", duration: 1000 });
+            } else {
+                angular.forEach(data, function(value, key) {
+                    $scope.hmalabels.push([key]);
+                    $scope.hmadata.push(value);
+                });
+
+                console.log($scope.hmalabels);
+                console.log($scope.hmadata);
+            }
+        });
+    }
+
+    $scope.comparisonMessage = {};
+    $scope.loadComparisonMessages = function() {
+        $scope.$broadcast('scroll.refreshComplete');
+        var requestMode = {
+            username: localStorage.getItem("username")
+        }
+        getBlazer.getComparisonMessage(requestMode.username).then(function(data) {
+            console.log("[ TRAVEL MODE ]", JSON.stringify(data));
+            $scope.comparisonMessage = {
+                best_time: data.fact_1.best_time,
+                worst_time: data.fact_1.worst_time,
+                best_time_near: data.fact_1.best_time_near,
+                total_car_usage: data.fact_2.total_car_usage,
+                best_near_car_usage: data.fact_2.best_near_car_usage,
+                best_near_car_blazer: data.fact_2.best_near_car_blazer,
+                zero_car_user: data.fact_2.zero_car_user
+            }
+        });
+    }
+
+    $scope.clearGraphs = function() {
+        $scope.$broadcast('scroll.refreshComplete');
+        $scope.requestMode = {};
+        $scope.hmadata = [];
+        $scope.hmalabels = [];
+
+        $scope.request = {};
+        $scope.travelData = {};
+        $scope.htslabels = {};
+        $scope.htsdata = {};
+    }
+});
\ No newline at end of file

www/app/map/js/map.js

@@ -12,9 +12,14 @@ angular.module('blazer.mapcontrollers', [])
     }
 
     /* MAP DEFAULTS */
+    // var map = new L.map('mapid', { center: new L.LatLng(14.5818, 120.9771), zoom: 12 });
+    // var googleLayer = new L.Google('ROADMAP');
+    // map.addLayer(googleLayer);
+    //GOOGLE MAP
+
     var map = L.map('mapid');
     map.setView(new L.LatLng(14.5818, 120.9771), 12);
-    //MAP BOX
+    //LEAFLET
 
     L.tileLayer(maplayer, {
         maxZoom: 18,
@@ -388,6 +393,16 @@ angular.module('blazer.mapcontrollers', [])
         console.debug("********** Load Heat Map **********");
     }
 
+    /* Show Blazers Data */
+    $scope.blazersData = {};
+    $scope.getBlazersDataV2 = function() {
+        getBlazer.getMapData().then(function(data) {
+            $scope.blazersData = data;
+            console.log("[ Blazer Data V2 ]", JSON.stringify($scope.blazersData));
+            $scope.plotBlazers();
+        });
+    }
+
     /* Show Blazers Data */
     $scope.blazersData = {};
     $scope.getBlazersData = function() {
@@ -402,54 +417,86 @@ angular.module('blazer.mapcontrollers', [])
     var parsedData = [];
     var geojsonLayer = [];
     $scope.plotBlazers = function() {
-
         console.debug("********** Plot Blazers on Map **********");
-
         parsedData = [];
         angular.forEach($scope.blazersData, function(value, key) {
             console.log("[ VALUE SCOPE ]", JSON.stringify(value));
             var formatData = {
                 "type": "Feature",
                 "properties": {
-                    "username": "Anonymous Blazer",
+                    "barangay_name": value.barangay_name,
+                    "blazer_count": value.blazer_count,
+                    "car_percentage": value.car_percentage,
                 },
                 "geometry": {
                     "type": "Point",
-                    "coordinates": [value.longitude, value.latitude]
+                    "coordinates": [value.lon, value.lat]
                 }
             }
             parsedData.push(formatData);
         });
 
-        // Map Icon Options
-
-        // ICON
-        // var iconOptions = L.icon({
-        // 	iconUrl: 'img/mapicon.png',
-        // 	iconSize: [35, 37],
-        // 	iconAnchor: [18, 2]
-        // });
-
-        // POINTS
-        var iconOptions = {
-            radius: 8,
-            fillColor: "green",
-            color: "green",
-            weight: 1,
-            opacity: 1,
-            fillOpacity: 0.8
-        };
+
 
         // PLOT DATA
         function onEachFeature(feature, layer) {
-            if (feature.properties && feature.properties.username) {
-                layer.bindPopup('<div class="pop-up-containter">Blazer</h4><div style="font-size: 15px">' + feature.properties.username + '</div></div>');
+            if (feature.properties && feature.properties.barangay_name) {
+                layer.bindPopup('<div class="pop-up-containter">' + feature.properties.barangay_name + '</div>');
             }
         }
+        /* 
+        The colors refer to the car percentage. If car percentage is above 50%, the color is shades of red (the redder, the closer to 100% car percentage). Yellow is 50%. Below 50%, then shades of green. Very green means 0% car use.
+        */
+
+        /* 
+         The size refers to the blazer count. If blaze count <= 20, then, small. If blazer count is more than or equal to 50, then size is big. Medium is between 20 and 50.
+         */
         geojsonLayer = L.geoJson(parsedData, {
             onEachFeature: onEachFeature,
             pointToLayer: function(feature, latlng) {
-                return L.circleMarker(latlng, iconOptions);
+                var circle_radius = '';
+                var circle_fill = '';
+                var circle_opacity = '';
+
+                // RADIUS SETTER
+                if (parseInt(feature.properties.blazer_count) >= 50) {
+                    console.log("BIG");
+                    circle_radius = 500;
+                } else if (parseInt(feature.properties.blazer_count) < 50 && parseInt(feature.properties.blazer_count) > 20) {
+                    console.log("MEDIUM");
+                    circle_radius = 250;
+                } else if (parseInt(feature.properties.blazer_count) <= 20) {
+                    console.log("SMALL");
+                    circle_radius = 100;
+                }
+
+                // COLOR SETTER
+                if (feature.properties.car_percentage > 80) {
+                    console.log("RED");
+                    circle_fill = "red";
+                    circle_opacity = 0.8;
+                } else if (feature.properties.car_percentage > 50 && feature.properties.car_percentage <= 80) {
+                    console.log("LIGHT RED");
+                    circle_fill = "red";
+                    circle_opacity = 0.3;
+                } else if (feature.properties.car_percentage <= 50 && feature.properties.car_percentage >= 30) {
+                    console.log("YELLOW");
+                    circle_fill = "yellow";
+                    circle_opacity = 0.8;
+                } else if (feature.properties.car_percentage < 30 && feature.properties.car_percentage >= 20) {
+                    console.log("LIGHT YELLOW");
+                    circle_fill = "yellow";
+                    circle_opacity = 0.3;
+                } else if (feature.properties.car_percentage < 20) {
+                    circle_fill = "green";
+                    circle_opacity = 0.8;
+                }
+                // return L.circleMarker(latlng, iconOptions);
+                return L.circle(latlng, circle_radius, {
+                    color: '',
+                    fillColor: circle_fill,
+                    fillOpacity: circle_opacity,
+                })
             }
         }).addTo(map);
         map.fitBounds(geojsonLayer.getBounds());
@@ -463,7 +510,7 @@ angular.module('blazer.mapcontrollers', [])
         var dayToday = $filter('date')(newDate, 'EEEE');
         console.log("[ Date Today ]", currentDate);
 
-        if (dayToday == 'Friday' || dayToday == 'Saturday') {
+        if (dayToday == 'Friday' || dayToday == 'Saturday' || dayToday == 'Sunday') {
             if (localStorage.getItem(currentDate) === null) {
                 var tripPopup = $ionicPopup.show({
                     title: 'Hey it\'s ' + dayToday + '!',
@@ -497,6 +544,7 @@ angular.module('blazer.mapcontrollers', [])
         var dayToday = $filter('date')(newDate, 'EEEE');
         console.log("[ Date Today ]", currentDate);
 
+        if (dayToday == 'Friday' || dayToday == 'Saturday' || dayToday == 'Sunday') {
             if (localStorage.getItem(currentDate) === null) {
                 var tripPopup = $ionicPopup.show({
                     title: 'Hey it\'s ' + dayToday + '!',
@@ -522,6 +570,10 @@ angular.module('blazer.mapcontrollers', [])
             } else {
                 $cordovaDialogs.alert('You\'ve already taken this weeks\' weekly survey. Thank you.', 'Weekly Survey', "OKAY");
             }
+        } else {
+            console.log("Cannot Take Survey Today");
+            $cordovaDialogs.alert('Sorry. But you may only take the weekly survey on Friday, Saturday, or Sunday. Thank you.', 'Weekly Survey', "OKAY");
+        }
     }
 
     /* Popover Methods */
@@ -551,7 +603,7 @@ angular.module('blazer.mapcontrollers', [])
         $scope.modalEndTrip.show();
     };
     // Weekly Survey Modal
-    $ionicModal.fromTemplateUrl('app/survey/weekly.html', {
+    $ionicModal.fromTemplateUrl('app/survey/weekly_v2.html', {
         scope: $scope,
         animation: 'slide-in-up'
     }).then(function(modal) {

www/app/map/map.html

@@ -6,7 +6,7 @@
         <button ng-click="openPopover($event);" class="button button-icon ion-android-apps" ng-disabled="tripStatus"></button>
     </ion-nav-buttons>
 
-  <ion-floating-button style='opacity: 0.8;'' click="refreshMap();" has-footer="true" button-color="#333333" icon="ion-android-refresh" icon-color="#fff" ng-hide="tripStatus">
+    <ion-floating-button style='opacity: 0.8;' click="refreshMap();" has-footer="true" button-color="#333333" icon="ion-android-refresh" icon-color="#fff" ng-hide="tripStatus">
     </ion-floating-button>
 
     <div class="bar bar-subheader bar-clear darkblue item-input-inset">

www/app/map/popover/map-popover.html

 <ion-popover-view class="fit">
     <ion-content scroll="false">
         <div class="list">
-      <a ng-click="getBlazersData();closePopover($event);" class="item item-icon-left">
-        <i class="icon ion-android-pin"></i>
-         Show Blazers
+            <a ng-click="getBlazersDataV2();closePopover($event);" class="item item-icon-left">
+                <i class="icon ion-android-pin"></i> Show Blazers
             </a>
-      <!--<a ng-click="loadHeatMap();" class="item item-icon-left">
-        <i class="icon ion-android-pin"></i>
-          Load Heatmap
-      </a>-->
             <a ng-click="triggerWeeklySurvey();closePopover($event);" class="item item-icon-left">
-        <i class="icon ion-android-clipboard"></i>
-        Weekly Survey
+                <i class="icon ion-android-clipboard"></i> Weekly Survey
             </a>
         </div>
     </ion-content>

www/app/menu/menu.html

@@ -23,8 +23,8 @@
             <!-- <ion-item nav-clear menu-close href="#/app/offerride" class="item-icon item-icon-left"><i class="icon ion-android-car"></i>Offer a Ride</ion-item> -->
             <ion-item nav-clear menu-close href="#/app/sharedride" class="item-icon item-icon-left"><i class="icon ion-android-contacts"></i>Shared Ride</ion-item>
             <ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-android-wifi"></i>My Travel Stats</ion-item>
-            <ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-android-wifi"></i>My Diary</ion-item>
-            <ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-android-wifi"></i>Trip Logging</ion-item>
+            <ion-item nav-clear menu-close href="#/app/diary" class="item-icon item-icon-left"><i class="icon ion-bookmark"></i>My Trip Diary</ion-item>
+            <!--<ion-item nav-clear menu-close href="#/app/status" class="item-icon item-icon-left"><i class="icon ion-edit"></i>Trip Logging</ion-item>-->
             <ion-item nav-clear menu-close href="#/app/about" class="item-icon item-icon-left"><i class="icon ion-android-bulb"></i>About</ion-item>
             <ion-item nav-clear menu-close href="#/app/settings" class="item-icon item-icon-left"><i class="icon ion-android-settings"></i>Settings</ion-item>
         </ion-content>

www/app/status/status.html

@@ -3,7 +3,7 @@
     </ion-nav-buttons>
     <ion-content>
         <ion-refresher pulling-text="Pull to refresh" on-refresh="getTravelStats();"></ion-refresher>
-    <div class="list">
+        <div class="list card">
             <div class="item item-divider"> Mode of Use </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Latest</i>
@@ -15,33 +15,14 @@
                 <i class="button button-block button-clear bgbluegreen text-light">Frequently Used</i>
                 <i class="button button-block icon-left ion-android-car"><b>{{ blazersStats.mode_frequent }}</b></i>
                 <i class="button button-block icon-left ion-android-bulb"><b>{{ blazersStats.emo_frequent }}</b></i>
-        <!--<i class="button button-block icon-left ion-android-time"><b>{{blazersStats.time_average}}</b></i>-->
             </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Low-Carbon</i>
                 <i class="button button-block icon-left ion-android-car"><b>{{ blazersStats.mode_best }}</b></i>
                 <i class="button button-block icon-left ion-android-bulb"><b>{{ blazersStats.emo_frequent_positive }}</b></i>
-        <!--<i class="button button-block icon-left ion-android-time"><b>{{blazersStats.time_best}}</b></i>-->
             </div>
-      <!--<div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i> Latest </i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_latest">NULL</i>{{ blazersStats.mode_latest }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_latest">NULL</i>{{ blazersStats.emo_latest }}</p>
         </div>
-      <div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i>Frequently Used</i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_frequent">NULL</i>{{ blazersStats.mode_frequent }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_frequent">NULL</i>{{ blazersStats.emo_frequent }}</p>
-      </div>
-      <div class="item item-thumbnail-left item-borderless">
-        <img ng-src="img/info.png">
-        <i>Low-Carbon</i>
-        <p>Transportation: <i ng-if="!blazersStats.mode_best">NULL</i>{{ blazersStats.mode_best }}</p>
-        <p>Mood: <i ng-if="!blazersStats.emo_frequent_positive">NULL</i>{{ blazersStats.emo_frequent_positive }}</p>
-      </div>-->
-
+        <div class="list card">
             <div class="item item-divider"> Time </div>
             <div class="item">
                 <i class="button button-block button-clear bgbluegreen text-light">Latest</i>
@@ -55,21 +36,6 @@
                 <i class="button button-block button-clear bgbluegreen text-light">Best</i>
                 <i class="button button-block icon-left ion-android-time"><b>{{ blazersStats.time_best }}</b></i>
             </div>
-      <!--<div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Latest 
-        <span class="item-note"> <i ng-if="!blazersStats.time_latest">NULL</i>{{ blazersStats.time_latest }} </span>
-      </div>
-      <div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Average 
-        <span class="item-note"> <i ng-if="!blazersStats.time_average">NULL</i>{{ blazersStats.time_average }} </span>
-      </div>
-      <div class="item item-borderless item-icon-left">
-      <i class="icon ion-android-wifi"></i>
-        Best
-        <span class="item-note"> <i ng-if="!blazersStats.time_best">NULL</i>{{ blazersStats.time_best }} </span>
-      </div>-->
         </div>
     </ion-content>
 </ion-view>
\ No newline at end of file

www/app/survey/js/survey.js

@@ -11,10 +11,10 @@ angular.module('blazer.surveycontrollers', [])
     };
 
     $scope.endtrip = {};
-  $scope.postEndTripSurvey = function(){
+    $scope.postEndTripSurvey = function() {
         /* CHECK IF MOBILE IS ONLINE */
         console.log("[ NETWORK STATUS ]", $cordovaNetwork.getNetwork());
-		if($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G ||$cordovaNetwork.getNetwork() == Connection.CELL_4G){
+        if ($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G || $cordovaNetwork.getNetwork() == Connection.CELL_4G) {
             var tripID = localStorage.getItem("tripid");
             var username = localStorage.getItem("username");
             var startTime = localStorage.getItem("starttime");
@@ -24,7 +24,7 @@ angular.module('blazer.surveycontrollers', [])
             var currentTrip = localStorage.getItem("currentTrip");
 
             var postdata = {
-        "trip_id" : tripID,
+                "trip_id": tripID,
                 "username": username,
                 "depart": startTime,
                 "arrive": endTime,
@@ -45,8 +45,7 @@ angular.module('blazer.surveycontrollers', [])
                     $scope.endtrip = {};
                     console.error("SEND ENDTRIP SURVEY ERROR", response);
                 });
-		} 
-		else {
+        } else {
             $cordovaDialogs.alert('Network Connection is required before taking this action. Thank you!', 'Ooops', "OKAY");
         }
     }
@@ -55,22 +54,22 @@ angular.module('blazer.surveycontrollers', [])
         $ionicSlideBoxDelegate.enableSlide(false);
     };
     $scope.currentIndex = '';
-  $scope.backSlide = function(){
+    $scope.backSlide = function() {
         $ionicScrollDelegate.scrollTop(true);
         $ionicSlideBoxDelegate.previous();
         $scope.currentIndex = $ionicSlideBoxDelegate.currentIndex();
     }
 
-  $scope.nextPageSlide = function(){
+    $scope.nextPageSlide = function() {
         $ionicScrollDelegate.scrollTop(true);
         $ionicSlideBoxDelegate.next();
         $scope.currentIndex = $ionicSlideBoxDelegate.currentIndex();
     }
 
     $scope.weekly = {};
-  $scope.postWeeklySurvey = function(){
+    $scope.postWeeklySurvey = function() {
         console.log("[ NETWORK STATUS ]", $cordovaNetwork.getNetwork());
-		if($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G ||$cordovaNetwork.getNetwork() == Connection.CELL_4G){
+        if ($cordovaNetwork.getNetwork() == Connection.WIFI || $cordovaNetwork.getNetwork() == Connection.CELL_2G || $cordovaNetwork.getNetwork() == Connection.CELL_3G || $cordovaNetwork.getNetwork() == Connection.CELL_4G) {
             var userID = localStorage.getItem("userID");
             var username = localStorage.getItem("username");
             var newDate = new Date();
@@ -80,33 +79,18 @@ angular.module('blazer.surveycontrollers', [])
             var surveyAnswer = [];
 
             /* LOOP SCOPE OF CHOICES */
-      if($scope.weekly.main == 1 || $scope.weekly.main == 2){
-        angular.forEach($scope.choice1, function(value, key){
-          surveyAnswer.push(parseInt(value));
-        })
-      }
-      else  if($scope.weekly.main == 3){
-        angular.forEach($scope.choice3, function(value, key){
+            if ($scope.weekly.main == 1 || $scope.weekly.main == 2 || $scope.weekly.main == 3 || $scope.weekly.main == 4 || $scope.weekly.main == 5 || $scope.weekly.main == 6) {
+                angular.forEach($scope.choice1, function(value, key) {
+                    if (value == 'N/A') {
+                        surveyAnswer.push(value);
+                    } else {
                         surveyAnswer.push(parseInt(value));
-        })
                     }
-      else  if($scope.weekly.main == 4){
-        angular.forEach($scope.choice4, function(value, key){
-          surveyAnswer.push(parseInt(value));
                 })
-      }
-      else  if($scope.weekly.main == 5){
-        angular.forEach($scope.choice5, function(value, key){
-          surveyAnswer.push(parseInt(value));
-        })
-      }
-      else  if($scope.weekly.main == 'C'){
+            } else if ($scope.weekly.main == 'C') {
                 surveyAnswer = null;
             }
 
-      // var surveyAns = surveyAnswer;
-      // var surveyAnsStr = surveyAns.join(",");
-
             var surveyString = surveyAnswer.toString();
 
             console.log("[ WEEKLY SURVEY ANSWERS ]", JSON.stringify(surveyString));
@@ -129,13 +113,12 @@ angular.module('blazer.surveycontrollers', [])
                     $scope.resetValues();
                     $scope.closeWeeklyModal();
                 });
-		} 
-		else {
+        } else {
             $cordovaDialogs.alert('Network Connection is required before taking this action. Thank you!', 'Ooops', "OKAY");
         }
     }
 
-  $scope.resetValues = function(){
+    $scope.resetValues = function() {
         $scope.weekly = {};
         $scope.choice1 = {
             one: "0",
@@ -253,9 +236,7 @@ angular.module('blazer.surveycontrollers', [])
         { number: 13 },
         { number: 14 },
         { number: 15 }
-];
-$scope.selectedItem = $scope.items[2];
+    ];
+    $scope.selectedItem = $scope.items[2];
 
 });
\ No newline at end of file
-
-

www/css/leaflet.css

@@ -18,10 +18,13 @@
     left: 0;
     top: 0;
 }
+
 .leaflet-container {
     overflow: hidden;
     -ms-touch-action: none;
+    touch-action: none;
 }
+
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
@@ -30,45 +33,76 @@
     user-select: none;
     -webkit-user-drag: none;
 }
+
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
     display: block;
 }
+
+
 /* map is broken in FF if you have max-width: 100% on tiles */
+
 .leaflet-container img {
     max-width: none !important;
 }
+
+
 /* stupid Android 2 doesn't understand "max-width: none" properly */
+
 .leaflet-container img.leaflet-image-layer {
     max-width: 15000px !important;
 }
+
 .leaflet-tile {
     filter: inherit;
     visibility: hidden;
 }
+
 .leaflet-tile-loaded {
     visibility: inherit;
 }
+
 .leaflet-zoom-box {
     width: 0;
     height: 0;
 }
+
+
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+
 .leaflet-overlay-pane svg {
     -moz-user-select: none;
 }
 
-.leaflet-tile-pane    { z-index: 2; }
-.leaflet-objects-pane { z-index: 3; }
-.leaflet-overlay-pane { z-index: 4; }
-.leaflet-shadow-pane  { z-index: 5; }
-.leaflet-marker-pane  { z-index: 6; }
-.leaflet-popup-pane   { z-index: 7; }
+.leaflet-tile-pane {
+    z-index: 2;
+}
+
+.leaflet-objects-pane {
+    z-index: 3;
+}
+
+.leaflet-overlay-pane {
+    z-index: 4;
+}
+
+.leaflet-shadow-pane {
+    z-index: 5;
+}
+
+.leaflet-marker-pane {
+    z-index: 6;
+}
+
+.leaflet-popup-pane {
+    z-index: 7;
+}
 
 .leaflet-vml-shape {
     width: 1px;
     height: 1px;
 }
+
 .lvml {
     behavior: url(#default#VML);
     display: inline-block;
@@ -83,40 +117,51 @@
     z-index: 7;
     pointer-events: auto;
 }
+
 .leaflet-top,
 .leaflet-bottom {
     position: absolute;
     z-index: 1000;
     pointer-events: none;
 }
+
 .leaflet-top {
     top: 0;
 }
+
 .leaflet-right {
     right: 0;
 }
+
 .leaflet-bottom {
     bottom: 0;
 }
+
 .leaflet-left {
     left: 0;
 }
+
 .leaflet-control {
     float: left;
     clear: both;
 }
+
 .leaflet-right .leaflet-control {
     float: right;
 }
+
 .leaflet-top .leaflet-control {
     margin-top: 10px;
 }
+
 .leaflet-bottom .leaflet-control {
     margin-bottom: 10px;
 }
+
 .leaflet-left .leaflet-control {
     margin-left: 10px;
 }
+
 .leaflet-right .leaflet-control {
     margin-right: 10px;
 }
@@ -132,17 +177,19 @@
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
+
 .leaflet-fade-anim .leaflet-tile-loaded,
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
     opacity: 1;
 }
 
 .leaflet-zoom-anim .leaflet-zoom-animated {
-  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-  -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-  -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
-  transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+    transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
 }
+
 .leaflet-zoom-anim .leaflet-tile,
 .leaflet-pan-anim .leaflet-tile,
 .leaflet-touching .leaflet-zoom-animated {
@@ -162,14 +209,17 @@
 .leaflet-clickable {
     cursor: pointer;
 }
+
 .leaflet-container {
     cursor: -webkit-grab;
     cursor: -moz-grab;
 }
+
 .leaflet-popup-pane,
 .leaflet-control {
     cursor: auto;
 }
+
 .leaflet-dragging .leaflet-container,
 .leaflet-dragging .leaflet-clickable {
     cursor: move;
@@ -184,19 +234,23 @@
     background: #ddd;
     outline: 0;
 }
+
 .leaflet-container a {
     color: #0078A8;
 }
+
 .leaflet-container a.leaflet-active {
     outline: 2px solid orange;
 }
+
 .leaflet-zoom-box {
     border: 2px dotted #38f;
-  background: rgba(255,255,255,0.5);
+    background: rgba(255, 255, 255, 0.5);
 }
 
 
 /* general typography */
+
 .leaflet-container {
     font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
@@ -205,9 +259,10 @@
 /* general toolbar styles */
 
 .leaflet-bar {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
     border-radius: 4px;
 }
+
 .leaflet-bar a,
 .leaflet-bar a:hover {
     background-color: #fff;
@@ -220,24 +275,29 @@
     text-decoration: none;
     color: black;
 }
+
 .leaflet-bar a,
 .leaflet-control-layers-toggle {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
 }
+
 .leaflet-bar a:hover {
     background-color: #f4f4f4;
 }
+
 .leaflet-bar a:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
+
 .leaflet-bar a:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     border-bottom: none;
 }
+
 .leaflet-bar a.leaflet-disabled {
     cursor: default;
     background-color: #f4f4f4;
@@ -258,6 +318,7 @@
     font: bold 18px 'Lucida Console', Monaco, monospace;
     text-indent: 1px;
 }
+
 .leaflet-control-zoom-out {
     font-size: 20px;
 }
@@ -265,6 +326,7 @@
 .leaflet-touch .leaflet-control-zoom-in {
     font-size: 22px;
 }
+
 .leaflet-touch .leaflet-control-zoom-out {
     font-size: 24px;
 }
@@ -273,44 +335,53 @@
 /* layers control */
 
 .leaflet-control-layers {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
     background: #fff;
     border-radius: 5px;
 }
+
 .leaflet-control-layers-toggle {
     background-image: url(images/layers.png);
     width: 36px;
     height: 36px;
 }
+
 .leaflet-retina .leaflet-control-layers-toggle {
     background-image: url(images/layers-2x.png);
     background-size: 26px 26px;
 }
+
 .leaflet-touch .leaflet-control-layers-toggle {
     width: 44px;
     height: 44px;
 }
+
 .leaflet-control-layers .leaflet-control-layers-list,
 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
     display: none;
 }
+
 .leaflet-control-layers-expanded .leaflet-control-layers-list {
     display: block;
     position: relative;
 }
+
 .leaflet-control-layers-expanded {
     padding: 6px 10px 6px 6px;
     color: #333;
     background: #fff;
 }
+
 .leaflet-control-layers-selector {
     margin-top: 2px;
     position: relative;
     top: 1px;
 }
+
 .leaflet-control-layers label {
     display: block;
 }
+
 .leaflet-control-layers-separator {
     height: 0;
     border-top: 1px solid #ddd;
@@ -325,27 +396,34 @@
     background: rgba(255, 255, 255, 0.7);
     margin: 0;
 }
+
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
     padding: 0 5px;
     color: #333;
 }
+
 .leaflet-control-attribution a {
     text-decoration: none;
 }
+
 .leaflet-control-attribution a:hover {
     text-decoration: underline;
 }
+
 .leaflet-container .leaflet-control-attribution,
 .leaflet-container .leaflet-control-scale {
     font-size: 11px;
 }
+
 .leaflet-left .leaflet-control-scale {
     margin-left: 5px;
 }
+
 .leaflet-bottom .leaflet-control-scale {
     margin-bottom: 5px;
 }
+
 .leaflet-control-scale-line {
     border: 2px solid #777;
     border-top: none;
@@ -356,15 +434,16 @@
     overflow: hidden;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
-
     background: #fff;
     background: rgba(255, 255, 255, 0.5);
 }
+
 .leaflet-control-scale-line:not(:first-child) {
     border-top: 2px solid #777;
     border-bottom: none;
     margin-top: -2px;
 }
+
 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
     border-bottom: 2px solid #777;
 }
@@ -374,9 +453,10 @@
 .leaflet-touch .leaflet-bar {
     box-shadow: none;
 }
+
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
-  border: 2px solid rgba(0,0,0,0.2);
+    border: 2px solid rgba(0, 0, 0, 0.2);
     background-clip: padding-box;
 }
 
@@ -387,18 +467,22 @@
     position: absolute;
     text-align: center;
 }
+
 .leaflet-popup-content-wrapper {
     padding: 1px;
     text-align: left;
     border-radius: 12px;
 }
+
 .leaflet-popup-content {
     margin: 13px 19px;
     line-height: 1.4;
 }
+
 .leaflet-popup-content p {
     margin: 18px 0;
 }
+
 .leaflet-popup-tip-container {
     margin: 0 auto;
     width: 40px;
@@ -406,25 +490,25 @@
     position: relative;
     overflow: hidden;
 }
+
 .leaflet-popup-tip {
     width: 17px;
     height: 17px;
     padding: 1px;
-
     margin: -10px auto 0;
-
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
 }
+
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
     background: white;
-
-  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
 }
+
 .leaflet-container a.leaflet-popup-close-button {
     position: absolute;
     top: 0;
@@ -439,9 +523,11 @@
     font-weight: bold;
     background: transparent;
 }
+
 .leaflet-container a.leaflet-popup-close-button:hover {
     color: #999;
 }
+
 .leaflet-popup-scrolled {
     overflow: auto;
     border-bottom: 1px solid #ddd;
@@ -451,13 +537,14 @@
 .leaflet-oldie .leaflet-popup-content-wrapper {
     zoom: 1;
 }
+
 .leaflet-oldie .leaflet-popup-tip {
     width: 24px;
     margin: 0 auto;
-
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
-  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+    filter: progid: DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 }
+
 .leaflet-oldie .leaflet-popup-tip-container {
     margin-top: -1px;
 }

www/index.html

 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
@@ -28,7 +29,8 @@
     <script src="lib/ngCordova/ng-cordova.min.js"></script>
     <script src="cordova.js"></script>
 
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
+    <!--<script src="lib/leaflet/leaflet-google.js"></script>-->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
     <!-- your app's js -->
@@ -45,6 +47,7 @@
     <script src="app/misc/js/misc.js"></script>
     <script src="app/ride/js/ride.js"></script>
     <script src="app/message/js/message.js"></script>
+    <script src="app/diary/js/diary.js"></script>
 
     <script src="js/config.js"></script>
     <script src="js/blazerAPI.js"></script>
@@ -56,9 +59,12 @@
 
     <script src="js/directives/radioButtons.js"></script>
 
-  </head>
 
-  <body ng-app="blazer">
+
+</head>
+
+<body ng-app="blazer">
     <ion-nav-view></ion-nav-view>
-  </body>
+</body>
+
 </html>
\ No newline at end of file

www/js/app.js

@@ -10,6 +10,7 @@ angular.module('blazer', [
     'blazer.tripcontrollers',
     'blazer.misccontrollers',
     'blazer.surveycontrollers',
+    'blazer.diarycontrollers',
     'blazer.apiservices',
     'blazer.rideinformation',
     'blazer.composemessage',
@@ -36,7 +37,7 @@ angular.module('blazer', [
         $ionicPickerI18n.cancelClass = "button-dark button-outline";
     });
 
-  $ionicPlatform.registerBackButtonAction(function (event) {
+    $ionicPlatform.registerBackButtonAction(function(event) {
         event.preventDefault();
     }, 100);
 })
@@ -178,5 +179,16 @@ angular.module('blazer', [
             }
         }
     })
+
+    /* DIARY */
+    .state('app.diary', {
+        url: '/diary',
+        views: {
+            'menuContent': {
+                templateUrl: 'app/diary/diary.html',
+                controller: 'DiaryCtrl'
+            }
+        }
+    })
     $urlRouterProvider.otherwise('/landing');
 })
\ No newline at end of file

www/js/config.js

 var blazerAPI = 'http://blaze.eacomm.com/api';
-var appVersion = '1.0.0';
+var blazerAPI_V2 = 'http://blaze.eacomm.com/api_v2';
+var appVersion = '2.0.0';
 var buildNumber = '0.0.1';
 var maplayer = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 

www/lib/leaflet/leaflet-google.js

+/*
+ * L.TileLayer is used for standard xyz-numbered tile layers.
+ */
+
+L.Google = L.Class.extend({
+    includes: L.Mixin.Events,
+
+    options: {
+        minZoom: 0,
+        maxZoom: 18,
+        tileSize: 256,
+        subdomains: 'abc',
+        errorTileUrl: '',
+        attribution: '',
+        opacity: 1,
+        continuousWorld: false,
+        noWrap: false,
+    },
+
+    // Possible types: SATELLITE, ROADMAP, HYBRID
+    initialize: function(type, options) {
+        L.Util.setOptions(this, options);
+
+        this._type = google.maps.MapTypeId[type || 'SATELLITE'];
+    },
+
+    onAdd: function(map, insertAtTheBottom) {
+        this._map = map;
+        this._insertAtTheBottom = insertAtTheBottom;
+
+        // create a container div for tiles
+        this._initContainer();
+        this._initMapObject();
+
+        // set up events
+        map.on('viewreset', this._resetCallback, this);
+
+        this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
+        map.on('move', this._update, this);
+        //map.on('moveend', this._update, this);
+
+        this._reset();
+        this._update();
+    },
+
+    onRemove: function(map) {
+        this._map._container.removeChild(this._container);
+        //this._container = null;
+
+        this._map.off('viewreset', this._resetCallback, this);
+
+        this._map.off('move', this._update, this);
+        //this._map.off('moveend', this._update, this);
+    },
+
+    getAttribution: function() {
+        return this.options.attribution;
+    },
+
+    setOpacity: function(opacity) {
+        this.options.opacity = opacity;
+        if (opacity < 1) {
+            L.DomUtil.setOpacity(this._container, opacity);
+        }
+    },
+
+    _initContainer: function() {
+        var tilePane = this._map._container
+        first = tilePane.firstChild;
+
+        if (!this._container) {
+            this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
+            this._container.id = "_GMapContainer";
+        }
+
+        if (true) {
+            tilePane.insertBefore(this._container, first);
+
+            this.setOpacity(this.options.opacity);
+            var size = this._map.getSize();
+            this._container.style.width = size.x + 'px';
+            this._container.style.height = size.y + 'px';
+        }
+    },
+
+    _initMapObject: function() {
+        this._google_center = new google.maps.LatLng(0, 0);
+        var map = new google.maps.Map(this._container, {
+            center: this._google_center,
+            zoom: 0,
+            mapTypeId: this._type,
+            disableDefaultUI: true,
+            keyboardShortcuts: false,
+            draggable: false,
+            disableDoubleClickZoom: true,
+            scrollwheel: false,
+            streetViewControl: false
+        });
+
+        var _this = this;
+        this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
+            function() { _this.onReposition(); });
+
+        map.backgroundColor = '#ff0000';
+        this._google = map;
+    },
+
+    _resetCallback: function(e) {
+        this._reset(e.hard);
+    },
+
+    _reset: function(clearOldContainer) {
+        this._initContainer();
+    },
+
+    _update: function() {
+        this._resize();
+
+        var bounds = this._map.getBounds();
+        var ne = bounds.getNorthEast();
+        var sw = bounds.getSouthWest();
+        var google_bounds = new google.maps.LatLngBounds(
+            new google.maps.LatLng(sw.lat, sw.lng),
+            new google.maps.LatLng(ne.lat, ne.lng)
+        );
+        var center = this._map.getCenter();
+        var _center = new google.maps.LatLng(center.lat, center.lng);
+
+        this._google.setCenter(_center);
+        this._google.setZoom(this._map.getZoom());
+        //this._google.fitBounds(google_bounds);
+    },
+
+    _resize: function() {
+        var size = this._map.getSize();
+        if (this._container.style.width == size.x &&
+            this._container.style.height == size.y)
+            return;
+        this._container.style.width = size.x + 'px';
+        this._container.style.height = size.y + 'px';
+        google.maps.event.trigger(this._google, "resize");
+    },
+
+    onReposition: function() {
+        //google.maps.event.trigger(this._google, "resize");
+    }
+});
\ No newline at end of file