#353 - show abbreviated timezones to avoid confusion when switching, broadcast tz change if APIs update late

5 files changed, 36 insertions, 6 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 59fca7b4..8671ab53 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -1520,6 +1520,7 @@ angular.module('zmApp.controllers')
                                 d.resolve(tz);
                                 debug ("Timezone API response is:"+success.data.tz);
                                 isTzSupported = true;
+                                $rootScope.$emit('tz-updated');
                                 return (d.promise);
 
                             },
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 2486ec9a..ce5fec93 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -66,6 +66,11 @@ angular.module('zmApp.controllers')
     // initial code
     //---------------------------------------------------
 
+    //we come here is TZ is updated after the view loads
+    $rootScope.$on('tz-updated', function() {
+        $scope.tzAbbr = NVRDataModel.getTimeZoneNow();
+        NVRDataModel.debug ("Timezone API updated timezone to " + NVRDataModel.getTimeZoneNow());
+    });
     
     $rootScope.$on("language-changed", function () {
         NVRDataModel.log(">>>>>>>>>>>>>>> language changed");
@@ -84,7 +89,17 @@ angular.module('zmApp.controllers')
         {
             showHiddenMonitors = false;
         }
-        console.log (">>>>>>>>>>>>>>>>>SHOWHIDDEN IS " + showHiddenMonitors);
+       // console.log (">>>>>>>>>>>>>>>>>SHOWHIDDEN IS " + showHiddenMonitors);
+        
+        // lets get the abbreviated version of TZ to display
+        if (NVRDataModel.getLogin().useLocalTimeZone)
+        {
+            $scope.tzAbbr = moment().tz(moment.tz.guess()).zoneAbbr();
+        }
+        else
+        {
+            $scope.tzAbbr = moment().tz(NVRDataModel.getTimeZoneNow()).zoneAbbr();
+        }
         
         $scope.events = [];
         getInitialEvents();
diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index 16b809b9..fa8d8cea 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -266,7 +266,10 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
     }
 
-
+     $rootScope.$on('tz-updated', function() {
+        $scope.tzAbbr = NVRDataModel.getTimeZoneNow();
+        NVRDataModel.debug ("Timezone API updated timezone to " + NVRDataModel.getTimeZoneNow());
+    });
 
 
 
@@ -315,6 +318,16 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
         $scope.modalFromTimelineIsOpen = false;
         var tempMon = message;
+        
+         // lets get the abbreviated version of TZ to display
+        if (NVRDataModel.getLogin().useLocalTimeZone)
+        {
+            $scope.tzAbbr = moment().tz(moment.tz.guess()).zoneAbbr();
+        }
+        else
+        {
+            $scope.tzAbbr = moment().tz(NVRDataModel.getTimeZoneNow()).zoneAbbr();
+        }
 
         //console.log ("TIMELINE MONITORS: " + JSON.stringify(message));
         var ld = NVRDataModel.getLogin();
diff --git a/www/templates/events.html b/www/templates/events.html
index 27dfee37..af2a7f89 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -42,7 +42,7 @@
                 <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}"  >
                     
                     
-                    <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}</span>&nbsp;&nbsp;
+                    <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
                     
                                         
                     <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}} <span ng-if="!event.Event.EndTime">(<span translate="kRecordingProgress"></span>)</span>
@@ -51,7 +51,8 @@
                  
                    
                     
-                    <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}}</span>
+                    <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}}
+                        &nbsp;{{tzAbbr}}&nbsp;</span>
                     
                     
                     
@@ -107,7 +108,7 @@
                     <!--row-->
 
                     <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-                        <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}
+                        <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
                             <br/>
                             <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
                             <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index e443e705..f8d89444 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -26,7 +26,7 @@
     <ion-content scroll-sista delegate-handle="none"  overflow-scroll="false"  mouse-wheel-scroll>
         <div style="padding-left:15px; font-size:10px; color:grey">
 
-        {{prettify(fromDate)}} - {{prettify(toDate)}} ({{'kTimelineOnlyDisplaying1' | translate:translationData}}) 
+        {{prettify(fromDate)}} - {{prettify(toDate)}} &nbsp;{{tzAbbr}}&nbsp;  ({{'kTimelineOnlyDisplaying1' | translate:translationData}}) 
         <strong><br/>{{'kTimelineControlDisplay'|translate}}</strong>
             </div>