diff options
| -rw-r--r-- | www/css/style.css | 14 | ||||
| -rw-r--r-- | www/js/MontageHistoryCtrl.js | 56 | ||||
| -rw-r--r-- | www/templates/montage-history.html | 203 |
3 files changed, 126 insertions, 147 deletions
diff --git a/www/css/style.css b/www/css/style.css index 52e5ad08..384304b3 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -121,6 +121,20 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ } +.header-paused { + background: #ba3e3e; + color:#cccccc; + border-color: #ba3e3e; + border-style: solid; + border-width:1px; + opacity:80%; + transform: translate(-50%, -50%); + +} + + + + .alarmed-header { background: #ba3e3e; color:#ffffff; diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js index bf107a94..2dd8adb7 100644 --- a/www/js/MontageHistoryCtrl.js +++ b/www/js/MontageHistoryCtrl.js @@ -39,6 +39,31 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc }; + $scope.togglePause = function (mid) + { + console.log ("TOGGLE PAUSE " + mid); + var m = -1; + for (var i=0; i < $scope.MontageMonitors.length; i++) + { + + if ($scope.MontageMonitors[i].Monitor.Id == mid) + { + m = i; + break; + } + } + if (m != -1) + { + $scope.MontageMonitors[m].isPaused = !$scope.MontageMonitors[m].isPaused; + + var cmd = $scope.MontageMonitors[m].isPaused? 1:2; + + ZMDataModel.zmDebug ("Sending CMD:"+cmd+" for monitor "+$scope.MontageMonitors[m].Monitor.Name); + controlEventStream(cmd,"",$scope.MontageMonitors[m].connKey,-1); + } + }; + + $scope.footerCollapse = function() { @@ -61,6 +86,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc { $scope.MontageMonitors[i].eventUrl = "img/noevent.png"; $scope.MontageMonitors[i].eventUrlTime=""; + $scope.MontageMonitors[i].isPaused=false; + $scope.MontageMonitors[i].connKey = $rootScope.rand = Math.floor((Math.random() * 100000) + 1); + + // $scope.MontageMonitors[i].connkey= i; } @@ -107,11 +136,13 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc if ($scope.MontageMonitors[j].Monitor.Id == mid) { if ($scope.MontageMonitors[j].eventUrl == 'img/noevent.png') + if (!ZMDataModel.isBackground()) { $scope.MontageMonitors[j].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+eid+"&frame=1&replay="+($scope.sliderVal.enableGapless?"gapless":"single"); + $scope.MontageMonitors[j].eventUrlTime = stime; } else @@ -216,7 +247,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc if ($scope.MontageMonitors[i].eventUrl !="" && $scope.MontageMonitors[i].eventUrl !='img/noevent.png') { console.log ("Checking event status for " + $scope.MontageMonitors[i].Monitor.Name); - controlEventStream('99','',$scope.MontageMonitors[i].Monitor.Id, i); + controlEventStream('99','',$scope.MontageMonitors[i].connKey, i); } } @@ -289,6 +320,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc //console.log("POST: " + loginData.url + '/index.php'); + //console.log ("AUTH IS " + $rootScope.authSession); + + var myauthtoken = $rootScope.authSession.replace("&auth=",""); + //&auth= var req = $http({ method: 'POST', /*timeout: 15000,*/ @@ -303,7 +338,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); var foo = str.join("&"); - // console.log("****RETURNING " + foo); + console.log("****RETURNING " + foo); return foo; }, @@ -312,7 +347,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc request: "stream", connkey: connkey, command: cmd, - auth: $rootScope.authSession, + auth: myauthtoken, // user: loginData.username, // pass: loginData.password } @@ -329,7 +364,20 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc $http.get (apiurl) .success (function (data) { - $scope.MontageMonitors[ndx].eventUrlTime=data.event.Event.StartTime; + if ($scope.MontageMonitors[ndx].eventUrlTime!=data.event.Event.StartTime) + { + + var element = angular.element(document.getElementById($scope.MontageMonitors[ndx].Monitor.Id+"-timeline")); + element.removeClass ('animated slideInRight'); + element.addClass('animated slideOutRight'); + $timeout (function() { + element.removeClass ('animated slideOutRight'); + element.addClass('animated slideInRight'); + $scope.MontageMonitors[ndx].eventUrlTime=data.event.Event.StartTime; + },300); + + } + }) .error (function (data) { diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html index 1a1fd3e8..4c808894 100644 --- a/www/templates/montage-history.html +++ b/www/templates/montage-history.html @@ -2,9 +2,6 @@ <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - - - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> </ion-nav-buttons> @@ -21,125 +18,90 @@ </button> </span> - <!-- - <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> - </button>--> - <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>--> - - </ion-nav-buttons> <ion-content has-bouncing="false" style="background-color:#444444"> - <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> - </ion-refresher> + <div class="timeline_text" ion-datetime-picker ng-model="datetimeValue.value" ng-change="dateChanged()"> + <b>Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}} @ {{sliderVal.rate}}x</b> + </div> - <span ng-show="!minimal"> - - - - <div class="timeline_text" ion-datetime-picker ng-model="datetimeValue.value" ng-change="dateChanged()"> - <b>Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}} @ {{sliderVal.rate}}x</b> - - </div> - - - <div class="range range-positive"> - <i style="color:#bbbbbb" class="icon ion-image"></i> - <input type="range" ng-model="slider.monsize" min="1" - max="10" ng-change="sliderChanged(slider.monsize)"> - <i style="color:#bbbbbb" class="icon ion-grid"></i> + <div class="range range-positive"> + <i style="color:#bbbbbb" class="icon ion-image"></i> + <input type="range" ng-model="slider.monsize" min="1" max="10" ng-change="sliderChanged(slider.monsize)"> + <i style="color:#bbbbbb" class="icon ion-grid"></i> - </div> - </span> + </div> <div ng-style="packMontage ? { '-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','-webkit-column-fill': 'balance', 'column-fill': 'balance' } : {'-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap' }"> - <!--<div ng-style="packMontage ? { '-webkit-column-count':slider.monsize, '-webkit-column-gap':'0px','line-height':'0px' } : { 'flex':'display', '-webkit-column-count':slider.monsize }">--> - - <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'"> - - - + <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'"> + + <div style="position: relative;width:{{devWidth/slider.monsize}}px;"> - - - - <div ng-if="!isModalActive"> - - - - <div ng-if="$root.authSession!='undefined' && !isBackground()"> - <div ng-if = "!minimal && monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents"> - <img id="img-$index" image-spinner-src="{{isBackground()?'':monitor.eventUrl}}" image-spinner-loader="lines" style=" - width: 100% !important; - height: auto !important;" /> - <div style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" - class="header"> - <i class="ion-monitor"></i> + + <div ng-if="$root.authSession!='undefined' && !isBackground()"> + <div ng-if = "!minimal && monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents"> + <img id="img-$index" image-spinner-src="{{isBackground()?'':monitor.eventUrl}}" image-spinner-loader="lines" style=" + width: 100% !important; + height: auto !important;" /> + <div style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" + class="header"> + <i class="ion-monitor"></i> + {{monitor.Monitor.Name}} + </div> + </div> + + <div ng-if = "!minimal && monitor.eventUrl != 'img/noevent.png' && monitor.connKey"> + + <img ng-if="!isBackground()" id="img-$index" image-spinner-src="{{monitor.eventUrl}}&scale={{LoginData.singleImageQuality}}{{$root.authSession}}&rand={{$root.rand}}&rate={{sliderVal.realRate}}&connkey={{monitor.connKey}}" image-spinner-loader="lines" style=" + width: 100% !important; + height: auto !important;" on-tap="togglePause(monitor.Monitor.Id)" /> + + <img ng-if="isBackground()" id="img-$index" image-spinner-src="" image-spinner-loader="lines" style=" + width: 100% !important; + height: auto !important;" /> + + <div ng-if="!isBackground()" style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" + class="header"> + <i class="ion-monitor"></i> {{monitor.Monitor.Name}} - </div> </div> - - <div ng-if = "!minimal && monitor.eventUrl != 'img/noevent.png'"> - <img ng-if="!isBackground()" id="img-$index" image-spinner-src="{{monitor.eventUrl}}&scale={{LoginData.singleImageQuality}}{{$root.authSession}}&rand={{$root.rand}}&rate={{sliderVal.realRate}}&connkey={{monitor.Monitor.Id}}" image-spinner-loader="lines" style=" - width: 100% !important; - height: auto !important;" /> - - <img ng-if="isBackground()" id="img-$index" image-spinner-src="" image-spinner-loader="lines" style=" - width: 100% !important; - height: auto !important;" /> - - <div ng-if="!isBackground()" style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" - class="header"> - <i class="ion-monitor"></i> - {{monitor.Monitor.Name}} - </div> - - <div ng-if="!isBackground() && sliderVal.showTimeline" style="position:absolute; bottom:15px; right:0%;white-space:nowrap;overflow:hidden;" - class="header-event-id"> - <i class="ion-clock"></i> - {{prettifyDate(monitor.eventUrlTime)}} - </div> - + + <div ng-if="!isBackground() && sliderVal.showTimeline" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;overflow:hidden;" + class="header-event-id" id="{{monitor.Monitor.Id}}-timeline"> + <i class="ion-clock"></i> + {{prettifyDate(monitor.eventUrlTime)}} </div> + <div ng-if="monitor.isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;" + class="header-paused"> + <i class="ion-pause"></i> + paused + </div> - + <!--<div ng-if="!monitor.isPaused" + style="position:absolute; bottom:35px; right:0%;white-space:nowrap;overflow:hidden;" class="header-event-id">paused + </div>--> + + </div> + </div> <!-- valid auth session &!background --> - <div ng-if="!$root.authSession=='undefined' || isBackground()"> - <img id="img-$index" image-spinner-src="img/pausevideo.png" style="width: 100% !important; - height: auto !important;" /> - </div> - - - - + <div ng-if="!$root.authSession=='undefined' || isBackground()"> + <img id="img-$index" image-spinner-src="img/pausevideo.png" + style="width: 100% !important;height: auto !important;" /> </div> </div> - - - <div ng-if="isModalActive"> - <img id="img-$index" image-spinner-src="img/pausevideo.png" style="margin-top:0px; - width: 100% !important; - height: auto !important;" /> - </div> - - - </span> - <!-- ngrepeat --> - </div> - <ion-item ng-show="!MontageMonitors.length"> No monitors to display. </ion-item> @@ -187,8 +149,10 @@ <ion-toggle ng-model="sliderVal.exactMatch" ng-checked="{{sliderVal.exactMatch}}" toggle-class="toggle-dark">exact time match</ion-toggle> - - <ion-toggle ng-model="sliderVal.showTimeline" ng-checked="{{sliderVal.showTimeline}}" toggle-class="toggle-dark">show event time <p>(resource intensive)</p></ion-toggle> + + <ion-toggle ng-model="sliderVal.showTimeline" ng-checked="{{sliderVal.showTimeline}}" toggle-class="toggle-dark">show event time + <p>(resource intensive)</p> + </ion-toggle> @@ -213,53 +177,6 @@ </div> </div> - <!-- - <div class="row"> - <div class="col col-90"> - <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/></div><br/> - </div> - <div class="col col-10" style="background-color:#7f8c8d"> - min - </div> - </div> - - <div class="row"> - <div class="col col-90"> - <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/></div><br/> - </div> - <div class="col col-10" style="background-color:#7f8c8d"> - hr - </div> - </div> - - <div class="row"> - <div class="col col-90"> - <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/></div><br/> - </div> - <div class="col col-10" style="background-color:#7f8c8d"> - day - </div> - </div> - - <div class="row"> - <div class="col col-90"> - <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/></div><br/> - </div> - <div class="col col-10" style="background-color:#7f8c8d"> - mth - </div> - </div> - - <div class="row"> - <div class="col col-90"> - <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY"/></div><br/> - </div> - <div class="col col-10" style="background-color:#7f8c8d"> - yr - </div> - </div>--> - - </div> </ion-pull-up-content> |