From 855a0e8ddc273b58066530a1b55a946021dfc56e Mon Sep 17 00:00:00 2001 From: PliablePixels Date: Wed, 24 Jun 2015 18:47:42 -0400 Subject: Cleaned up code, commented, preparing for HTTPS via CordovaHTTP --- www/js/DataModel.js | 56 +++++++---- www/js/DevOptionsCtrl.js | 45 +++++---- www/js/EventCtrl.js | 196 +++++++++++++++++++++++-------------- www/js/EventsGraphsCtrl.js | 14 +-- www/js/LoginCtrl.js | 40 +++++++- www/js/ModalCtrl.js | 40 ++++---- www/js/MonitorCtrl.js | 122 +++++++++++------------ www/js/MonitorModalCtrl.js | 2 - www/js/MontageCtrl.js | 239 +++++++++++++++++++++------------------------ www/js/StateCtrl.js | 55 +++++------ www/js/app.js | 19 +++- www/js/controllers.js | 1 - 12 files changed, 453 insertions(+), 376 deletions(-) (limited to 'www/js') diff --git a/www/js/DataModel.js b/www/js/DataModel.js index ec2deeb3..1c19948d 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -8,7 +8,7 @@ // It's grown over time. I guess I may have to split this into multiple services in the future angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ionicLoading', '$ionicBackdrop', function ($http, $q, $ionicLoading, $ionicBackdrop) { - // var deferred=''; + var monitorsLoaded = 0; var montageSize = 3; var monitors = []; @@ -22,6 +22,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion 'streamingurl': "", 'maxFPS': "3", // image streaming FPS 'montageQuality': "50", // montage streaming quality in % + 'useSSL':false // "1" if HTTPS }; return { @@ -37,7 +38,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion init: function () { console.log("****** DATAMODEL INIT SERVICE CALLED ********"); - var montageSize = 2; if (window.localStorage.getItem("username") != undefined) { loginData.username = @@ -96,7 +96,12 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("montageQuality " + loginData.montageQuality); } + if (window.localStorage.getItem("useSSL") != undefined) { + var sslvalue = window.localStorage.getItem("useSSL"); + loginData.useSSL = (sslvalue == "1") ? true:false; + console.log("useSSL " + loginData.useSSL); + } monitorsLoaded = 0; @@ -122,6 +127,10 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion window.localStorage.setItem("url", loginData.url); window.localStorage.setItem("apiurl", loginData.apiurl); window.localStorage.setItem("streamingurl", loginData.streamingurl); + window.localStorage.setItem("useSSL", loginData.useSSL?"1":"0"); + window.localStorage.setItem("maxMontage", loginData.maxMontage); + window.localStorage.setItem("montageQuality", loginData.montageQuality); + if (loginData.maxFPS > 30) { console.log("MAXFPS Too high, maxing to 30"); @@ -129,8 +138,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } window.localStorage.setItem("maxFPS", loginData.maxFPS); - - if (!loginData.maxMontage) { console.log("INVALID MONTAGE NUM"); loginData.maxMontage = "10"; @@ -140,21 +147,16 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("*** MAXMONTAGE TOO LOW ***"); loginData.maxMontage = 1; } - - - window.localStorage.setItem("maxMontage", loginData.maxMontage); - - window.localStorage.setItem("montageQuality", loginData.montageQuality); - - }, + //----------------------------------------------------------------------------- // This function returns a list of monitors // if forceReload == 1 then it will force an HTTP API request to get a list of monitors // if 0. then it will return back the previously loaded monitor list if one exists, else // will issue a new HTTP API to get it // I've wrapped this function in my own promise even though http returns a promise. + //----------------------------------------------------------------------------- getMonitors: function (forceReload) { console.log("** Inside ZMData getMonitors with forceReload=" + forceReload); @@ -189,6 +191,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("promise resolved inside HTTP fail"); d.resolve(monitors); $ionicLoading.hide(); + monitorsLoaded = 0 ; }); return d.promise; @@ -201,22 +204,22 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } }, + + //----------------------------------------------------------------------------- + // + //----------------------------------------------------------------------------- setMonitors: function (mon) { console.log("ZMData setMonitors called with " + mon.length + " monitors"); monitors = mon; }, - // Not sure if I am using this anymore. I was using this for graphs, but I - // don't think I am now - getAllPreexistingEvents: function () { - console.log("returning " + oldevents.length + " preexisting events"); - return oldevents; - }, + //----------------------------------------------------------------------------- // When I display events in the event controller, this is the first function I call // This returns the total number of pages // I then proceed to display pages in reverse order to display the latest events first // I also reverse sort them in ZMDataModel to sort by date // All this effort because the ZM APIs return events in sorted order, oldest first. Yeesh. + //----------------------------------------------------------------------------- getEventsPages: function (monitorId) { console.log("********** INSIDE EVENTS PAGES "); @@ -239,10 +242,12 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion }, + //----------------------------------------------------------------------------- // This function returns events for specific monitor or all monitors // You get here by tapping on events in the monitor screen or from // the menu events option // monitorId == 0 means all monitors (ZM starts from 1) + //----------------------------------------------------------------------------- getEvents: function (monitorId, pageId, loadingStr) { @@ -263,7 +268,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion duration: 15000, //specifically for Android - http seems to get stuck at times }); } - //$ionicBackdrop.retain(); var d = $q.defer(); var myevents = []; @@ -311,13 +315,23 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return d.promise; }, + //----------------------------------------------------------------------------- + // + //----------------------------------------------------------------------------- getMontageSize: function () { return montageSize; }, + + //----------------------------------------------------------------------------- + // + //----------------------------------------------------------------------------- setMontageSize: function (montage) { montageSize = montage; }, + //----------------------------------------------------------------------------- + // + //----------------------------------------------------------------------------- getMonitorsLoaded: function () { console.log("**** Inside promise function "); var deferred = $q.defer(); @@ -327,13 +341,19 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return deferred.promise; }, + + //----------------------------------------------------------------------------- + // + //----------------------------------------------------------------------------- setMonitorsLoaded: function (loaded) { console.log("ZMData.setMonitorsLoaded=" + loaded); monitorsLoaded = loaded; }, + //----------------------------------------------------------------------------- // Given a monitor Id it returns the monitor name // FIXME: Can I do a better job with associative arrays? + //----------------------------------------------------------------------------- getMonitorName: function (id) { var idnum = parseInt(id); for (var i = 0; i < monitors.length; i++) { diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js index 7c9cfce7..f332bc50 100644 --- a/www/js/DevOptionsCtrl.js +++ b/www/js/DevOptionsCtrl.js @@ -3,41 +3,46 @@ /* global cordova,StatusBar,angular,console */ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope', '$rootScope', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicPopup', '$http', '$q', '$ionicLoading', function ($scope, $rootScope, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $ionicPopup, $http, $q, $ionicLoading) { + + $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); }; - $scope.loginData = ZMDataModel.getLogin(); +//------------------------------------------------------------------ +// Perform the login action when the user submits the login form +//------------------------------------------------------------------ + $scope.saveDevOptions = function () { + console.log('Saving Dev Options'); + if (parseInt($scope.loginData.maxMontage) > 10) { + $ionicPopup.alert({ + title: 'Note', + template: 'You have selected to view more than 10 monitors in the Montage screen. Note that this is very resource intensive and may load the server or cause issues in the application. If you are not sure, please consider limiting this value to 10' + }); + } - // Perform the login action when the user submits the login form - $scope.saveDevOptions = function () { - console.log('Saving Dev Options'); + if ((parseInt($scope.loginData.maxFPS) < 0) || (parseInt($scope.loginData.maxFPS) > 30)) { + $scope.loginData.maxFPS = '3'; + } - if (parseInt($scope.loginData.maxMontage) > 10) { - $ionicPopup.alert({ - title: 'Note', - template: 'You have selected to view more than 10 monitors in the Montage screen. Note that this is very resource intensive and may load the server or cause issues in the application. If you are not sure, please consider limiting this value to 10' - }); - } + if ((parseInt($scope.loginData.montageQuality) < 10) || (parseInt($scope.loginData.montageQuality) > 70)) { + $scope.loginData.montageQuality = '50'; + } - if ((parseInt($scope.loginData.maxFPS) <0) || (parseInt($scope.loginData.maxFPS)>30)) - { - $scope.loginData.maxFPS='3'; - } - if ((parseInt($scope.loginData.montageQuality) <10) || (parseInt($scope.loginData.montageQuality)>70)) - { - $scope.loginData.montageQuality='50'; - } + ZMDataModel.setLogin($scope.loginData); +}; + //------------------------------------------------------------------ + // controller main + //------------------------------------------------------------------ + $scope.loginData = ZMDataModel.getLogin(); - ZMDataModel.setLogin($scope.loginData); - }; }]); diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 2cda31bf..fc29610e 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -6,10 +6,17 @@ // This was before I got access to the new APIs. FIXME: Revisit this code to see what I am doing with it // and whether the new API has a better mechanism -angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatform', '$scope', '$stateParams', 'message', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicModal', '$ionicLoading', '$http', '$state', '$window',function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $http, $state, $window, $rootScope) { +angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatform', '$scope', '$stateParams', 'message', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicModal', '$ionicLoading', '$http', '$state', '$window', '$interval', function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $http, $state, $window, $rootScope,$interval) { + + //--------------------------------------------------- + // Controller main + //--------------------------------------------------- + console.log("I got STATE PARAM " + $stateParams.id); $scope.id = parseInt($stateParams.id, 10); $scope.connKey = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; + + // These are the commands ZM uses to move around // in ZMS var eventCommands = { @@ -30,7 +37,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }; $scope.search = {text:""}; $scope.myfilter=""; - + $scope.eventCommands = eventCommands; // for some reason inifinite scroll is invoked @@ -52,12 +59,55 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo // monitor modal is loaded, I show an ionic loading. And then when the first frame // finishes loading, I take it away + console.log("***CALLING EVENTS FACTORY"); + var lData = ZMDataModel.getLogin(); + $scope.monitors = message; + + // I am converting monitor ID to monitor Name + // so I can display it along with Events + // Is there a better way? + + $scope.events = []; + + // First get total pages and then + // start from the latest. If this fails, nothing displays + // FIXME: clean up error handling + + // FIXME: call loadMore once -- to fill up page. Its possible + // last event page only has a few records + + ZMDataModel.getEventsPages($scope.id) + .then(function (data) { + eventsPage = data.pageCount; + console.log("TOTAL EVENT PAGES IS " + eventsPage); + pageLoaded = true; + $scope.viewTitle.title = data.count; + ZMDataModel.getEvents($scope.id, eventsPage,"") + + .then(function (data) { + console.log("EventCtrl Got events"); + //var events = []; + var myevents = data; + for (var i = 0; i < myevents.length; i++) { + + myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); + } + + + $scope.events = myevents; + }); + + }); + $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); }; + //--------------------------------------------------- + // reload view + //--------------------------------------------------- $scope.reloadView = function () { // All we really need to do here is change the random token // in the image src and it will refresh. No need to reload the view @@ -74,6 +124,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }; + //--------------------------------------------------- + // when you tap a list entry - to break search loop + //--------------------------------------------------- $scope.tapped = function() { console.log ("*** TAPPED ****"); @@ -107,19 +160,25 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }); - - + //--------------------------------------------------- + // used to hide loading image toast + //--------------------------------------------------- $scope.finishedLoadingImage = function () { console.log("*** Events image FINISHED loading ***"); $ionicLoading.hide(); }; + //--------------------------------------------------- + // + //--------------------------------------------------- $scope.clearSearch = function() { $scope.search.text=""; - console.log ("CLEAR"); }; + //--------------------------------------------------- + // Called when user toggles search + //--------------------------------------------------- $scope.searchClicked = function() { $scope.showSearch = !$scope.showSearch; @@ -136,14 +195,20 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo } }; + //-------------------------------------------------------- + // Not used - plan to use it to show event progress + //-------------------------------------------------------- + this.pollEventsProgress = function() + { + console.log ("**************"); + }; - $scope.eventCommands = eventCommands; - - - + //-------------------------------------------------------- // this routine handles skipping through events // in different event views - $scope.controlEventStream = function (cmd) { + //-------------------------------------------------------- + $scope.controlEventStream = function (cmd) + { console.log("Command value " + cmd); $ionicLoading.hide(); @@ -154,7 +219,26 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }); var loginData = ZMDataModel.getLogin(); - + // FIXME: CMD_SLOWFWD CMD_FASTFWD and REVs + // Also read up CMD_QUERY as the stream is playing + /* + var CMD_NONE = 0; + var CMD_PAUSE = 1; + var CMD_PLAY = 2; + var CMD_STOP = 3; + var CMD_FASTFWD = 4; + var CMD_SLOWFWD = 5; + var CMD_SLOWREV = 6; + var CMD_FASTREV = 7; + var CMD_ZOOMIN = 8; + var CMD_ZOOMOUT = 9; + var CMD_PAN = 10; + var CMD_SCALE = 11; + var CMD_PREV = 12; + var CMD_NEXT = 13; + var CMD_SEEK = 14; + var CMD_QUERY = 99; + */ var toast_blurb = ""; switch (cmd) { case "13": @@ -233,13 +317,15 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }); }; - // This is called when we first tap on an event to see + //-------------------------------------------------------- + //This is called when we first tap on an event to see // the feed. It's important to instantiate ionicModal here // as otherwise you'd instantiate it when the view loads // and our "Please wait loading" technique I explained //earlier won't work + //-------------------------------------------------------- - $scope.openModal = function (eid, ename, edur) { + $scope.openModal = function (eid, ename, edur,eframes) { console.log("Open Modal"); $scope.eventName = ename; $scope.eventId = eid; @@ -263,19 +349,26 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo $scope.modal.show(); }); - }; - // We need to destroy because we are instantiating + }; + + //-------------------------------------------------------- + //We need to destroy because we are instantiating // it on open + //-------------------------------------------------------- $scope.closeModal = function () { + // $interval.cancel(eventsInterval); console.log("Close & Destroy Modal"); if ($scope.modal !== undefined) { $scope.modal.remove(); } }; + + //-------------------------------------------------------- //Cleanup the modal when we're done with it // I Don't think it ever comes here + //-------------------------------------------------------- $scope.$on('$destroy', function () { console.log("Destroy Modal"); if ($scope.modal !== undefined) { @@ -283,53 +376,17 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo } }); - console.log("***CALLING EVENTS FACTORY"); - var lData = ZMDataModel.getLogin(); - $scope.monitors = message; - - // I am converting monitor ID to monitor Name - // so I can display it along with Events - // Is there a better way? - - $scope.events = []; - - // First get total pages and then - // start from the latest. If this fails, nothing displays - // FIXME: clean up error handling - - // FIXME: call loadMore once -- to fill up page. Its possible - // last event page only has a few records - - ZMDataModel.getEventsPages($scope.id) - .then(function (data) { - eventsPage = data.pageCount; - console.log("TOTAL EVENT PAGES IS " + eventsPage); - pageLoaded = true; - $scope.viewTitle.title = data.count; - ZMDataModel.getEvents($scope.id, eventsPage,"") - - .then(function (data) { - console.log("EventCtrl Got events"); - //var events = []; - var myevents = data; - for (var i = 0; i < myevents.length; i++) { - - myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); - } - - - $scope.events = myevents; - }); - - }); - - - + //-------------------------------------------------------- + // used by infinite scrolling to see if we can get more + //-------------------------------------------------------- $scope.moreDataCanBeLoaded = function () { return moreEvents; }; + //-------------------------------------------------------- + // stop searching for more data + //-------------------------------------------------------- $scope.cancelSearch = function() { $ionicLoading.hide(); //Or whatever action you want to preform @@ -347,6 +404,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo }; + //-------------------------------------------------------- + // loads next page of events + //-------------------------------------------------------- $scope.loadMore = function () { // the events API does not return an error for anything @@ -362,7 +422,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo if (!enableLoadMore) { - moreEvents=false; // Dont ion-scroll till enableLoadMore is true; + moreEvents=false; // Don't ion-scroll till enableLoadMore is true; $scope.$broadcast('scroll.infiniteScrollComplete'); console.log ("**** LOADMORE ARTIFICALLY DISABLED"); @@ -373,16 +433,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo if ($scope.search.text != "") { var toastStr="Searching page "+eventsPage; + $ionicLoading.show({ maxwidth:100, scope:$scope, + template: '' }); - - -$ionicLoading.show({ maxwidth:100, scope:$scope, template: '' }); - - // toastr.info(toastStr,{"positionClass": "toast-bottom-full-width", - // "showMethod": "fadeIn", - // "hideMethod": "fadeOut", - // "closeButton": false, - // }); loadingStr="none"; } ZMDataModel.getEvents($scope.id, eventsPage,loadingStr) @@ -397,26 +450,23 @@ $ionicLoading.show({ maxwidth:100, scope:$scope, template: '