diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-12-20 19:30:48 -0500 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-12-20 19:30:48 -0500 |
| commit | 25154a48d216f5eba7fa78671af0edff169c7dd8 (patch) | |
| tree | 78d5a22319630fe603cde2d5cadaddc68dac658f /www/js/MomentCtrl.js | |
| parent | 51ac4d1e37b0c5797e419caeaab427fcffc52937 (diff) | |
#570 formatting and commenting. The feature seems kinda complete
Diffstat (limited to 'www/js/MomentCtrl.js')
| -rw-r--r-- | www/js/MomentCtrl.js | 369 |
1 files changed, 180 insertions, 189 deletions
diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js index 84af262e..e6fc34cf 100644 --- a/www/js/MomentCtrl.js +++ b/www/js/MomentCtrl.js @@ -41,24 +41,29 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } }; + //---------------------------------------------------------------- + // Given a set of monitor IDs, constructs a string that can + // be directly passed to the cake PHP API (/MonitorId != X/...) + //---------------------------------------------------------------- function constructMask() { excludeMonitorsFilter = ""; - for (var i=0; i < excludeMonitors.length; i++) { - excludeMonitorsFilter = excludeMonitorsFilter + "/MonitorId !=:"+excludeMonitors[i]; + for (var i = 0; i < excludeMonitors.length; i++) { + excludeMonitorsFilter = excludeMonitorsFilter + "/MonitorId !=:" + excludeMonitors[i]; } - NVRDataModel.debug ("Constructed Monitor Filter ="+excludeMonitorsFilter); + NVRDataModel.debug("Constructed Monitor Filter =" + excludeMonitorsFilter); } - function process(rawdata) { - // console.log (JSON.stringify(data)); + //---------------------------------------------------------------- + // Given a payload of raw events from JSON, massages it with more + // params for moments display + //---------------------------------------------------------------- + function process(rawdata) { var data = rawdata.data; NVRDataModel.debug("--------> attempting PAGE " + data.pagination.page + " of " + data.pagination.pageCount); for (var i = 0; i < data.events.length; i++) { - // console.log ("pushing "+ JSON.stringify(data.data.events[i])); - var d = getMonitorDimensions(data.events[i].Event.MonitorId); if (d) { data.events[i].Event.width = d.width; @@ -83,50 +88,31 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } if (mo != 0) { - - /*myevents[i].Event.Rotation = { - 'transform' : 'rotate('+mo+'deg'+')' - }; */ - var tmp = data.events[i].Event.thumbHeight; data.events[i].Event.thumbHeight = data.events[i].Event.thumbWidth; data.events[i].Event.thumbWidth = tmp; } // swap - - //console.log (d.width+"*"+d.height); - } data.events[i].Event.hide = false; data.events[i].Event.icon = "ion-code-working"; //data.events[i].Event.baseURL = NVRDataModel.getBaseURL(data.events[i].Event.MonitorId); - - // huh? why did I need the above? + // huh? why did I need the above? eventCtrl reverses it with below... data.events[i].Event.baseURL = NVRDataModel.getLogin().url; - data.events[i].Event.monitorName = NVRDataModel.getMonitorName(data.events[i].Event.MonitorId); - data.events[i].Event.dateObject = new Date(data.events[i].Event.StartTime); - data.events[i].Event.humanizeTime = humanizeTime(data.events[i].Event.StartTime); - var mid = data.events[i].Event.MonitorId; - data.events[i].Event.order = i; + data.events[i].Event.order = i; // likely not needed if I stop force sorting data.events[i].Event.pinned = false; data.events[i].Event.pinnedIcon = "ion-pin"; - - // console.log ("---> PUSHING "+data.events[i].Event.StartTime); moments.push(data.events[i]); } - - - - } // credit https://stackoverflow.com/a/17265125/1361529 @@ -144,15 +130,12 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } return array.sort(function (obj1, obj2) { - - // console.log ("obj1="+JSON.stringify(obj1)); - // console.log ("obj2="+JSON.stringify(obj2)); for (i = 1; i < keys_length; i++) { key = args[i]; if (typeof key !== 'string') { - // console.log ("ARGS I 0"+args[i][0]); desc = key[1]; key = key[0]; + // hack to extend it as I have nested fields a = obj1["Event"][args[i][0]]; b = obj2["Event"][args[i][0]]; } else { @@ -180,6 +163,9 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }); } //end of objSort() function + //---------------------------------------------------------------- + // used for placeholder sizing + //---------------------------------------------------------------- function getMonitorDimensions(mid) { for (var i = 0; i < monitors.length; i++) { @@ -194,22 +180,19 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } } - $scope.toggleSubMenu = function () { - - $scope.isSubMenu = !$scope.isSubMenu; var ld = NVRDataModel.getLogin(); ld.enableMomentSubMenu = $scope.isSubMenu; NVRDataModel.setLogin(ld); - - if ($scope.isSubMenu) $ionicScrollDelegate.$getByHandle("moment-delegate").scrollTop(); - //($scope.isSubMenu); }; + //---------------------------------------------------------------- + // increase/decrease thumbnail size + //---------------------------------------------------------------- $scope.sizeChanged = function (dirn) { var sz = $scope.gridSize; sz = sz + 5 * dirn; @@ -228,6 +211,9 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }; + //---------------------------------------------------------------- + // the times when images take too long and masonry gets messed + //---------------------------------------------------------------- $scope.reLayout = function () { NVRDataModel.log("relaying masonry"); $timeout(function () { @@ -236,61 +222,63 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }; - $scope.togglePin =function(ndx) { + //---------------------------------------------------------------- + // Pinning a thumbnail means don't collapse it. Useful to drill + // down quickly. + //---------------------------------------------------------------- + + $scope.togglePin = function (ndx) { $scope.moments[ndx].Event.pinned = !$scope.moments[ndx].Event.pinned; if ($scope.moments[ndx].Event.pinned) { - $scope.moments[ndx].Event.pinnedIcon =" ion-pin assertive"; - } - else { - $scope.moments[ndx].Event.pinnedIcon ="ion-pin"; + $scope.moments[ndx].Event.pinnedIcon = " ion-pin assertive"; + } else { + $scope.moments[ndx].Event.pinnedIcon = "ion-pin"; } }; -// When a user taps on collapse on an eid, -// all events after that for the same monitor should be collapsed -// events before that should remain + //---------------------------------------------------------------- + // fold/unfold monitor groups + //---------------------------------------------------------------- + // When a user taps on collapse on an eid, + // all events after that for the same monitor should be collapsed + // events before that should remain -// when a user expands back on an eid, all eids after that for the -// same monitor should expand, even if they were grouped earlier + // when a user expands back on an eid, all eids after that for the + // same monitor should expand, even if they were grouped earlier $scope.toggleCollapse = function (mid, eid, ndx) { NVRDataModel.debug("toggling collapse for:" + mid); var collapseCount = 0; var hide = false; - + $scope.moments[ndx].Event.hide = false; if ($scope.moments[ndx].Event.icon == 'ion-code-working') { // we want to hide hide = true; $scope.moments[ndx].Event.icon = 'ion-images'; - } - else { // we want to show + } else { // we want to show hide = false; $scope.moments[ndx].Event.icon = 'ion-code-working'; } - for (var i = ndx+1; i < $scope.moments.length; i++ ) { - if ($scope.moments[i].Event.MonitorId == mid && !$scope.moments[i].Event.pinned ) { + for (var i = ndx + 1; i < $scope.moments.length; i++) { + if ($scope.moments[i].Event.MonitorId == mid && !$scope.moments[i].Event.pinned) { $scope.moments[i].Event.hide = hide; $scope.moments[i].Event.icon = "ion-code-working"; $scope.moments[i].Event.collapseCount = ""; if (hide) collapseCount++; - //console.log ("Hiding " + i); } } //for if (hide) { // +1 for the marked frame which doesn't get counted - $scope.moments[ndx].Event.collapseCount = collapseCount+1; + $scope.moments[ndx].Event.collapseCount = collapseCount + 1; } else { $scope.moments[ndx].Event.collapseCount = ""; } - - - $timeout(function () { masonry.reloadItems(); @@ -304,12 +292,15 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ $timeout(function () { masonry.layout(); - // $ionicScrollDelegate.$getByHandle("moment-delegate").scrollTop(); + // $ionicScrollDelegate.$getByHandle("moment-delegate").scrollTop(); }, 600); }; + //---------------------------------------------------------------- + // convenience fn to show hh:mm of event + //---------------------------------------------------------------- $scope.hourmin = function (str) { return moment(str).format(NVRDataModel.getTimeFormat()); @@ -320,18 +311,22 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ $scope.modal.remove(); }; + //---------------------------------------------------------------- + // Write hidden monitors to storage so its remembered + //---------------------------------------------------------------- + $scope.saveMask = function () { $scope.modal.remove(); excludeMonitors = []; - - for (var i=0; i < $scope.monitors.length; i++) { - if ($scope.monitors[i].Monitor.listDisplay == 'noshow') { - excludeMonitors.push($scope.monitors[i].Monitor.Id); - } + // convert selection list to array, so we can pass it to createMask + // which in turn creates the actual string for the API to exclude mons + for (var i = 0; i < $scope.monitors.length; i++) { + if ($scope.monitors[i].Monitor.listDisplay == 'noshow') { + excludeMonitors.push($scope.monitors[i].Monitor.Id); + } } - //console.log ("ENDED"); constructMask(); var ld = NVRDataModel.getLogin(); @@ -344,55 +339,52 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }; - $scope.toggleHide = function(i) - { + //---------------------------------------------------------------- + // Called by moments-mask to change color of list items + //---------------------------------------------------------------- + $scope.toggleHide = function (i) { - if ($scope.monitors[i].Monitor.listDisplay == 'show') { - $scope.monitors[i].Monitor.listDisplay = 'noshow'; + if ($scope.monitors[i].Monitor.listDisplay == 'show') { + $scope.monitors[i].Monitor.listDisplay = 'noshow'; - } - - else { - $scope.monitors[i].Monitor.listDisplay = 'show'; - - } - + } else { + $scope.monitors[i].Monitor.listDisplay = 'show'; + + } - NVRDataModel.debug("index " + i + " is now " + $scope.monitors[i].Monitor.listDisplay); - - }; + NVRDataModel.debug("index " + i + " is now " + $scope.monitors[i].Monitor.listDisplay); - $scope.hideUnhide = function() { + }; - //console.log (JSON.stringify(monitors)); - + //---------------------------------------------------------------- + // Invokes moment-mask to enable/disable hidden mons + //---------------------------------------------------------------- + $scope.hideUnhide = function () { $scope.monitors = monitors; - $ionicModal.fromTemplateUrl('templates/moment-mask.html', - { - scope: $scope, - animation: 'slide-in-up', - id:'reorder', - }) - .then(function(modal) - { - $scope.modal = modal; - $scope.modal.show(); - }); + $ionicModal.fromTemplateUrl('templates/moment-mask.html', { + scope: $scope, + animation: 'slide-in-up', + id: 'reorder', + }) + .then(function (modal) { + $scope.modal = modal; + $scope.modal.show(); + }); }; + function humanizeTime(str) { - //console.log ("Time:"+str+" TO LOCAL " + moment(str).local().toString()); - //if (NVRDataModel.getLogin().useLocalTimeZone) return moment.tz(str, NVRDataModel.getTimeZoneNow()).fromNow(); - // else - // return moment(str).fromNow(); - } + //---------------------------------------------------------------- + // Like Packery but Masonry offers a mechanism to keep the order + // of images. Pretty important for a timeline related function + //---------------------------------------------------------------- function initMasonry() { $ionicLoading.show({ template: $translate.instant('kArrangingImages'), @@ -406,14 +398,13 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ var elem = angular.element(document.getElementById("mygrid")); masonry = new Masonry('.grid', { itemSelector: '.grid-item', - // columnWidth: 10 - horizontalOrder: true, + horizontalOrder: true, // this keeps the order gutter: 0, initLayout: true, percentPosition: true, }); - //console.log ("**** mygrid is " + JSON.stringify(elem)); + imagesLoaded(elem).on('progress', function (instance, img) { masonry.layout(); @@ -444,6 +435,10 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }; + //---------------------------------------------------------------- + // Loads the modal to play an event + //---------------------------------------------------------------- + $scope.playEvent = function (event) { $scope.currentEvent = event; @@ -453,38 +448,39 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ $scope.followSameMonitor = "0"; $scope.mycarousel = { index: 0 - }; + }; - $scope.ionRange = { + $scope.ionRange = { index: 1 - }; + }; - $ionicModal.fromTemplateUrl('templates/events-modal.html', - { - scope: $scope, - animation: 'slide-in-up', - id: 'footage', - }) - .then(function(modal) - { - $scope.modal = modal; + $ionicModal.fromTemplateUrl('templates/events-modal.html', { + scope: $scope, + animation: 'slide-in-up', + id: 'footage', + }) + .then(function (modal) { + $scope.modal = modal; - $ionicLoading.show( - { - template: $translate.instant('kPleaseWait') + "...", - noBackdrop: true, - duration: 10000 - }); + $ionicLoading.show({ + template: $translate.instant('kPleaseWait') + "...", + noBackdrop: true, + duration: 10000 + }); - $scope.modal.show(); + $scope.modal.show(); - var ld = NVRDataModel.getLogin(); + var ld = NVRDataModel.getLogin(); - }); + }); }; + //---------------------------------------------------------------- + // Not used for now - superceded by play Event + //---------------------------------------------------------------- + $scope.showThumbnail = function (b, f) { if (!f) { // api update needed @@ -517,8 +513,11 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ }; + //---------------------------------------------------------------- + // Only called by "here" button without cond. So prev type is used + //---------------------------------------------------------------- $scope.getMoments = function (cond) { - if (!cond) cond = momentType; + if (!cond) cond = momentType; getMoments(cond); }; @@ -527,29 +526,35 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } + //---------------------------------------------------------------- + // used to go forward (+1) or back (-1) in time by 24 hrs + //---------------------------------------------------------------- $scope.changeFrom = function (dirn) { var f; - if (dirn==1) { // add a day + if (dirn == 1) { // add a day t = moment(timeTo); - t.add (1, "day"); + t.add(1, "day"); if (t > moment()) { - NVRDataModel.log ("Future date selected, ignoring"); + NVRDataModel.log("Future date selected, ignoring"); return; } - console.log ("T="+t.format("MMM DD,YYYY HH:mm")); - } - else { + console.log("T=" + t.format("MMM DD,YYYY HH:mm")); + } else { t = moment(timeTo); - t.subtract (1, "day"); - console.log ("T="+t.format("MMM DD,YYYY HH:mm")); + t.subtract(1, "day"); + console.log("T=" + t.format("MMM DD,YYYY HH:mm")); } var newTo = t.format("YYYY-MM-DD HH:mm:ss"); - getMoments(momentType,newTo); + getMoments(momentType, newTo); }; + //---------------------------------------------------------------- + // The entire point of this controller. + //---------------------------------------------------------------- + function getMoments(sortCondition, to) { if (sortCondition == 'MaxScore') @@ -566,38 +571,39 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ var tmptimeto, tmptimefrom; - if (!to) {// assume current time + if (!to) { // assume current time tmptimeto = moment(); - } - else { + } else { tmptimeto = moment(to); } - + tmptimefrom = angular.copy(tmptimeto); tmptimefrom.subtract(24, 'hours'); // mutable, hence deep copy above - var page = 1; timeFrom = tmptimefrom.format('YYYY-MM-DD HH:mm:ss'); timeTo = tmptimeto.format('YYYY-MM-DD HH:mm:ss'); - $scope.displayTimeFrom = moment(timeFrom).format("MMM DD,"+NVRDataModel.getTimeFormat()); - $scope.displayTimeTo = moment(timeTo).format("MMM DD,"+NVRDataModel.getTimeFormat()); + $scope.displayTimeFrom = moment(timeFrom).format("MMM DD," + NVRDataModel.getTimeFormat()); + $scope.displayTimeTo = moment(timeTo).format("MMM DD," + NVRDataModel.getTimeFormat()); NVRDataModel.debug("Moments from " + timeFrom + " to " + timeTo); + // format: //https:///zm/api/events/index/AlarmFrames%20%3E=:1/StartTime%20%3E=:2017-12-16%2009:08:50.json?sort=TotScore&direction=desc var ld = NVRDataModel.getLogin(); // in API, always sort by StartTime so all monitors are represented - var myurl = ld.apiurl + "/events/index/AlarmFrames >=:1"+excludeMonitorsFilter+"/StartTime >=:" + timeFrom + "/StartTime <=:"+timeTo+ ".json?sort=" + "StartTime" + "&direction=desc"; + var myurl = ld.apiurl + "/events/index/AlarmFrames >=:1" + excludeMonitorsFilter + "/StartTime >=:" + timeFrom + "/StartTime <=:" + timeTo + ".json?sort=" + "StartTime" + "&direction=desc"; NVRDataModel.debug("Retrieving " + myurl); - + // very cool trick to parallel fork HTTP requests and not bork on errors. Basically, we catch errors and ignore + // noop is a dummy function that does nothing + // credit https://stackoverflow.com/a/20594522/1361529 $q.all([ $http.get(myurl + '&page=1').then(process).catch(noop), $http.get(myurl + '&page=2').then(process).catch(noop), @@ -606,7 +612,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ ]) .then(function () { - NVRDataModel.debug ("$a.all Parallel queries completed"); + NVRDataModel.debug("$a.all Parallel queries completed"); if (!moments.length) { $scope.loadingStatus = $translate.instant('kMomentNoneFound'); @@ -633,30 +639,20 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ // check the very first element for presence of maxscoreframe id // if its not there, we can't show snuff if (moments.length && !moments[0].Event.MaxScoreFrameId) { - $ionicPopup.alert({ - title: $translate.instant('kNote'), - template: "{{'kApiUpgrade' | translate }}", - okText: $translate.instant('kButtonOk'), - cancelText: $translate.instant('kButtonCancel'), - }); - } - - else { - $scope.moments = moments; - $timeout(function () { - initMasonry(); - }, 300); + $ionicPopup.alert({ + title: $translate.instant('kNote'), + template: "{{'kApiUpgrade' | translate }}", + okText: $translate.instant('kButtonOk'), + cancelText: $translate.instant('kButtonCancel'), + }); + } else { + $scope.moments = moments; + $timeout(function () { + initMasonry(); + }, 300); } - - /* if (sortCondition == "MonitorId") { - moments.sort(function(a, b) { - var da = a.Event.MonitorId; - var db = b.Event.MonitorId; - return da>db ? -1 : da<db ? 1 : 0; - }); - }*/ }); @@ -664,56 +660,53 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ } + //---------------------------------------------------------------- + // + //---------------------------------------------------------------- + $scope.$on('$ionicView.beforeLeave', function () { NVRDataModel.debug("Destroying masonry"); masonry.destroy(); }); - $scope.toggleIcons = function() { + //---------------------------------------------------------------- + // lets you hide overlays - useful for tiny screens + //---------------------------------------------------------------- + $scope.toggleIcons = function () { $scope.showIcons = !$scope.showIcons; }; - $scope.$on('$ionicView.beforeEnter', function () { - /*var w = Math.round(parseInt($rootScope.devWidth) / parseInt($rootScope.pixelRatio)) ; - - w = $rootScope.devWidth; - - var p = w / 100; + //---------------------------------------------------------------- + // Stuff before the view loads + //---------------------------------------------------------------- - console.log ("old P="+p); - p = Math.ceil(p/5)*5; - console.log ("P="+p);*/ + $scope.$on('$ionicView.beforeEnter', function () { $scope.showIcons = true; - var ld = NVRDataModel.getLogin(); $scope.loadingStatus = $translate.instant('kLoading'); $scope.gridSize = ld.momentGridSize; excludeMonitors = JSON.parse(ld.momentMonitorFilter || []); - console.log ("RETRIEVED EXCLUDE="+JSON.stringify(excludeMonitors)); + console.log("RETRIEVED EXCLUDE=" + JSON.stringify(excludeMonitors)); constructMask(); $scope.isSubMenu = ld.enableMomentSubMenu; - monitors = angular.copy(message); + monitors = angular.copy(message); // don't mess up the main monitors list + + for (var i = 0; i < monitors.length; i++) { + if (excludeMonitors.indexOf(monitors[i].Monitor.Id) != -1) { + monitors[i].Monitor.listDisplay = 'noshow'; + console.log("Marking monitor " + monitors[i].Monitor.Id + " as noshow"); + } - for (var i=0; i < monitors.length; i++) { - if (excludeMonitors.indexOf(monitors[i].Monitor.Id) != -1) { - monitors[i].Monitor.listDisplay = 'noshow'; - console.log ("Marking monitor " + monitors[i].Monitor.Id+ " as noshow"); - } - } - + }); $scope.$on('$ionicView.afterEnter', function () { - - - - $ionicPopover.fromTemplateUrl('templates/moment-popover.html', { scope: $scope, }).then(function (popover) { @@ -722,8 +715,6 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$ getMoments(momentType); - //getMoments ("MaxScore"); - }); |
