diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/style.css | 1187 | ||||
| -rw-r--r-- | www/index.html | 2 | ||||
| -rw-r--r-- | www/js/DataModel.js | 78 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 24 | ||||
| -rw-r--r-- | www/js/EventModalCtrl.js | 61 | ||||
| -rw-r--r-- | www/js/EventsModalGraphCtrl.js | 24 | ||||
| -rw-r--r-- | www/js/LoginCtrl.js | 4 | ||||
| -rw-r--r-- | www/js/MonitorModalCtrl.js | 2 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 82 | ||||
| -rw-r--r-- | www/js/MontageHistoryCtrl.js | 24 | ||||
| -rw-r--r-- | www/js/TimelineModalCtrl.js | 24 | ||||
| -rw-r--r-- | www/js/app.js | 72 | ||||
| -rw-r--r-- | www/lang/locale-en.json | 4 | ||||
| -rw-r--r-- | www/templates/devoptions.html | 4 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 2 | ||||
| -rw-r--r-- | www/templates/events.html | 10 | ||||
| -rw-r--r-- | www/templates/login.html | 163 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 2 | ||||
| -rw-r--r-- | www/templates/montage-history.html | 6 | ||||
| -rw-r--r-- | www/templates/montage.html | 11 |
20 files changed, 893 insertions, 893 deletions
diff --git a/www/css/style.css b/www/css/style.css index c1c78f1e..9fb19658 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1,200 +1,153 @@ @font-face { font-family: 'fontawesome'; - src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot'); - src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), - url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), - url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), - url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg'); + src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot'); + src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } - .icon-super-speed:before { font-family: "fontawesome"; content: "\f135"; } - - .icon-normal-speed:before { font-family: "fontawesome"; content: "\f1b9"; } - .icon-faster:before { font-family: "fontawesome"; content: "\f101"; } - - - .icon-slower:before { font-family: "fontawesome"; content: "\f100"; } - - -.image-loader-container -{ - position:relative; - width:100%; - height:100%; +.image-loader-container { + position: relative; + width: 100%; + height: 100%; } - -image-loader -{ - position:absolute; - top:50%; - left:50%; - z-index:999; +image-loader { + position: absolute; + top: 50%; + left: 50%; + z-index: 999; } - - .vis-time-axis .grid.vis-odd { background: #f5f5f5; - } - -.my-vis-font -{ - font-size:10px; } - +.my-vis-font { + font-size: 10px; +} .my-vis-buttons { - position: absolute; - top: 0; - right: 0; - margin: 10px; - z-index: 9999; - } - + position: absolute; + top: 0; + right: 0; + margin: 10px; + z-index: 9999; +} ion-popover-view.fit { - height: auto; + height: auto; } - ion-popover-view.fit ion-content { - position: relative; + position: relative; } - .platform-android ion-popover-view.fit { - margin-top: 10px; + margin-top: 10px; } - .platform-ios ion-popover-view.fit { - padding-top: 10px; - padding-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; } /* Using this for full screen modals for event and monitor mode */ -.modal{ - top: 0 ; - bottom: 0 ; - left: 0 ; - right: 0 ; - width: 100% -} - - - +.modal { + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100% +} /* I am using flexboxes to dynamicall adapt content in montage view. Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ + .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; - -webkit-flex-flow: row wrap; flex-flow: row wrap; - font-weight: normal; text-align: left; - flex-wrap:wrap; - + flex-wrap: wrap; } - .wrapper > * { /*padding: 5px;*/ /*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/ } - .header { background: #333333; - color:#cccccc; + color: #cccccc; border-color: #444444; - border-style: solid; - border-width:1px; - opacity:80%; + border-style: solid; + border-width: 1px; + opacity: 80%; } - .header-event-id { background: #9b59b6; - color:#cccccc; + color: #cccccc; border-color: #9b59b6; - border-style: solid; - border-width:1px; - opacity:80%; + border-style: solid; + border-width: 1px; + opacity: 80%; } - - .header-paused { background: #ba3e3e; - color:#cccccc; + color: #cccccc; border-color: #ba3e3e; - border-style: solid; - border-width:1px; - opacity:80%; + border-style: solid; + border-width: 1px; + opacity: 80%; transform: translate(-50%, -50%); - } - - - - .alarmed-header { background: #ba3e3e; - color:#ffffff; + color: #ffffff; border-color: #ba3e3e; - border-style: solid; - border-width:1px; - opacity:80%; - + border-style: solid; + border-width: 1px; + opacity: 80%; } - .minimized-alarmed-header { background: #ba3e3e; - color:#ffffff; + color: #ffffff; border-color: #ba3e3e; - border-style: solid; - border-width:5px; - opacity:80%; - position:absolute; - top:0px; - left:0px; - width:100%; - + border-style: solid; + border-width: 5px; + opacity: 80%; + position: absolute; + top: 0px; + left: 0px; + width: 100%; } - -#slowpulse -{ +#slowpulse { -webkit-animation-duration: 1500ms; } .alarmed-body { border-left: thick solid #ba3e3e; - } - .alarmed-footer { background: #ba3e3e; - border-color:#ba3e3e; - color:#ffffff; - border-width:1px; + border-color: #ba3e3e; + color: #ffffff; + border-width: 1px; /*padding:2px;*/ } - .main { text-align: center; /*background: #5a5a5a;*/ @@ -203,21 +156,15 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ padding: 0px; /*padding:2px;*/ } - .aside-1 { background: gold; } - .aside-2 { background: hotpink; } - - figure { - position: relative; - + position: relative; } - figure img { display: block; width: 100%; @@ -226,58 +173,49 @@ figure img { figcaption { overflow: hidden; text-overflow: ellipsis; - white-space:nowrap; - + white-space: nowrap; } - .normal-figcaption { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); color: #FFF; position: absolute; bottom: 0; left: 0; right: 0; - opacity:1; - + opacity: 1; } - .alarmed-figcaption { - background: #ba3e3e; - color:#ffffff; - position:absolute; + color: #ffffff; + position: absolute; bottom: 0; left: 0; right: 0; - opacity:0.7; - - + opacity: 0.7; } - - - /* modified from: http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */ .notification-badge { - position:relative; - } - .notification-badge[data-badge]:after { - content:attr(data-badge); - position:absolute; - top:-3px; - left:18px; - font-size:9px; - background:crimson; - color:white; - width:22px;height:17px; - text-align:center; - line-height:17px; - border-radius:40%; - font-weight:bold; - - } + position: relative; +} +.notification-badge[data-badge]:after { + content: attr(data-badge); + position: absolute; + top: -3px; + left: 18px; + font-size: 9px; + background: crimson; + color: white; + width: 22px; + height: 17px; + text-align: center; + line-height: 17px; + border-radius: 40%; + font-weight: bold; +} + /* .notification-badge{ @@ -290,26 +228,23 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */ font-size: 8px; }*/ - .missingnetwork { - position: fixed; /* or absolute */ - bottom: 95%; - right: 95%; - transform: translate(-50%, -50%); + position: fixed; + /* or absolute */ + bottom: 95%; + right: 95%; + transform: translate(-50%, -50%); } - .ptzcentered { - position: fixed; /* or absolute */ - top: 50%; - left: 50%; + position: fixed; + /* or absolute */ + top: 50%; + left: 50%; transform: translate(-50%, -50%); } - .timeline_text { - text-align:center; - color:white; - - + text-align: center; + color: white; } /* // not using for now, may come in handy later @@ -321,286 +256,250 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */ transform: translate(-50%, -50%); }*/ -.ptzcenteredbotbutton -{ +.ptzcenteredbotbutton { position: absolute; - top: 80%; - left:50%; + top: 80%; + left: 50%; transform: translate(-50%, -50%); } - -.ptzpresetbuttons -{ +.ptzpresetbuttons { position: absolute; top: 5%; left: 10%; width: 80%; - - } - - .timelinebuttons { - position: fixed; /* or absolute */ - bottom:130px; - left: 50%; - transform: translate(-50%, -50%); - z-index:99999; + position: fixed; + /* or absolute */ + bottom: 130px; + left: 50%; + transform: translate(-50%, -50%); + z-index: 99999; } - -.eventprogress -{ - position:absolute; +.eventprogress { + position: absolute; -webkit-transform: rotate(-90deg) translateY(-1000%); -webkit-transform-origin: 100% 0%; -moz-transform: rotate(-90deg); top: 50%; - margin-top:-50px; - left:100%; - margin-left:-15px; - z-index:10; - width:100px; - + margin-top: -50px; + left: 100%; + margin-left: -15px; + z-index: 10; + width: 100px; } - -.camera-icon -{ - position:absolute; - bottom:20px; - left:10px; - z-index:10; - opacity:0.7; +.camera-icon { + position: absolute; + bottom: 20px; + left: 10px; + z-index: 10; + opacity: 0.7; } - -.desktop-zoom-icon -{ - position:absolute; - bottom:20px; - left:70px; - z-index:10; - opacity:0.7; +.desktop-zoom-icon { + position: absolute; + bottom: 20px; + left: 70px; + z-index: 10; + opacity: 0.7; } - -.modal-alarm-badge -{ - position:absolute; - bottom:20px; +.modal-alarm-badge { + position: absolute; + bottom: 20px; left: 100px; - - z-index:10; - opacity:0.7; + z-index: 10; + opacity: 0.7; } - - -.event-modal-alarm-badge -{ - position:absolute; - +.event-modal-alarm-badge { + position: absolute; left: 10px; - bottom:10px; - z-index:10; - opacity:1; + bottom: 10px; + z-index: 10; + opacity: 1; } - - -.events-modal-gapless-icon -{ - position:absolute; - bottom:120px; - left:20px; - z-index:10; - opacity:0.5; +.events-modal-gapless-icon { + position: absolute; + bottom: 120px; + left: 20px; + z-index: 10; + opacity: 0.5; } - -.popup80 .popup -{ - width:80% !important; +.popup80 .popup { + width: 80% !important; } - -.popup90 .popup -{ - width:90% !important; +.popup90 .popup { + width: 90% !important; } - -.popup95 .popup -{ - width:95% !important; +.popup95 .popup { + width: 95% !important; } - -.events-modal-camera-icon -{ - position:absolute; - bottom:120px; - left:110px; - z-index:10; - opacity:0.5; +.events-modal-camera-icon { + position: absolute; + bottom: 120px; + left: 110px; + z-index: 10; + opacity: 0.5; } - -.events-modal-onlyalarms-icon -{ - position:absolute; - bottom:120px; - left:140px; - z-index:10; - opacity:0.5; +.events-modal-onlyalarms-icon { + position: absolute; + bottom: 120px; + left: 140px; + z-index: 10; + opacity: 0.5; } -.events-range -{ - position:absolute; - bottom:20px; - left:30px; - z-index:10; - opacity:0.7; - width:70%; +.events-range { + position: absolute; + bottom: 20px; + left: 30px; + z-index: 10; + opacity: 0.7; + width: 70%; } - - -.events-range-modal -{ - position:absolute; - bottom:30px; - left:30px; - z-index:99; - opacity:1; - width:70%; +.events-range-modal { + position: absolute; + bottom: 30px; + left: 30px; + z-index: 99; + opacity: 1; + width: 70%; } - -.events-range-modal-text -{ - - position:absolute; - top:20px; - font-size:80%; - line-height:100%; - +.events-range-modal-text { + position: absolute; + top: 20px; + font-size: 80%; + line-height: 100%; left: 50%; transform: translate(-50%, 0%); - z-index:10; - opacity:0.7; - color:white; + z-index: 10; + opacity: 0.7; + color: white; background-color: black; border-radius: 5px 5px 5px 5px; - padding-left:3px; - padding-right:3px; - + padding-left: 3px; + padding-right: 3px; } - - -.monitor-modal-text -{ - position:absolute; - bottom:30px; - +.monitor-modal-text { + position: absolute; + bottom: 30px; left: 50%; transform: translate(-50%, 0%); - z-index:10; - opacity:0.7; - color:white; + z-index: 10; + opacity: 0.7; + color: white; background-color: black; border-radius: 5px 5px 5px 5px; - padding-left:3px; - padding-right:3px; - + padding-left: 3px; + padding-right: 3px; } - -.events-alarm-line -{ - +.events-alarm-line { position: relative; bottom: 1px; left: 0px; width: 100%; border-top: 1px solid black; - } - -.events-float-filter -{ +.bwmode { position: absolute; - top: 50%; - right:-12px; - - color:#fff; - background-color:#b47226; + top: 30%; + right: -28px; + opacity: 0.7; + background-color: #f1c40f; + color: #000; + font-size: 11px; border-radius: 0px 0px 5px 5px; - font-size:11px; - - padding-left:3px; - padding-right:3px; - opacity:0.7; - - - z-index:99999; - - -webkit-transform: rotate(90deg); + z-index: 99999; + padding-left: 3px; + padding-right: 3px; + -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } -.events-filter-on -{ - position: absolute; - left: 50%; - - transform: translate(-50%, 0); - opacity:0.7; - border-radius: 0px 0px 5px 5px; - margin-top:-18px; - background-color:#b47226; - padding-left:6px; - padding-right:6px; - color:#fff; - font-size:11px; +.events-float-filter { + position: absolute; + top: 50%; + right: -12px; + color: #fff; + background-color: #b47226; + border-radius: 0px 0px 5px 5px; + font-size: 11px; + padding-left: 3px; + padding-right: 3px; + opacity: 0.7; + z-index: 99999; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.events-filter-on { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + opacity: 0.7; + border-radius: 0px 0px 5px 5px; + margin-top: -18px; + background-color: #b47226; + padding-left: 6px; + padding-right: 6px; + color: #fff; + font-size: 11px; } /* Styling of progress bar http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ */ - -progress, /* All HTML5 progress enabled browsers */ -progress[role] /* polyfill */ +progress, +/* All HTML5 progress enabled browsers */ +progress[role]/* polyfill */ { - - /* Turns off styling - not usually needed, but good to know. */ - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - - /* gets rid of default border in Firefox and Opera. */ - border: none; - - /* Needs to be in here for Safari polyfill so background images work as expected. */ - background-size: auto; - height:10px; - + /* Turns off styling - not usually needed, but good to know. */ + + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + /* gets rid of default border in Firefox and Opera. */ + + border: none; + /* Needs to be in here for Safari polyfill so background images work as expected. */ + + background-size: auto; + height: 10px; } /* Polyfill */ progress[role]:after { - background-image: none; /* removes default background from polyfill */ + background-image: none; + /* removes default background from polyfill */ } /* Ensure fallback text doesn't appear in polyfill */ progress[role] strong { - display: none; + display: none; } /* ----------------- progress background start ------------------*/ -progress, /* Firefox */ -progress[role][aria-valuenow] { /* Polyfill */ - background: #aaaaaa !important; /* !important is needed by the polyfill */ +progress, +/* Firefox */ +progress[role][aria-valuenow] { + /* Polyfill */ + + background: #aaaaaa !important; + /* !important is needed by the polyfill */ } /* Chrome */ progress::-webkit-progress-bar { background: #aaaaaa; } + /* ----------------- progress background start ------------------*/ /* ----------------- progress bar color start ------------------*/ + /* IE10 */ progress { color: #f1a165; @@ -617,484 +516,396 @@ progress::-webkit-progress-value { } /* Polyfill */ -progress[aria-valuenow]:before { +progress[aria-valuenow]:before { background: #f1a165; } -/* ----------------- progress bar color end ------------------*/ - -.rotate-button -{ +/* ----------------- progress bar color end ------------------*/ +.rotate-button { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } - - -.zm-image-fit -{ +.zm-image-fit { max-width: 100%; max-height: 100%; } - -.zm-image-crop -{ - width:100%; +.zm-image-crop { + width: 100%; } - /* .object-fit_cover { object-fit: cover; width:100%; height:auto;} .object-fit_contain { object-fit: contain; max-width:100%; height:auto; } */ - - -.object-fit_cover { object-fit: cover; width:100%; height:auto;} -.object-fit_contain { object-fit: contain; max-width:100%; max-height:100%; } - +.object-fit_cover { + object-fit: cover; + width: 100%; + height: auto; +} +.object-fit_contain { + object-fit: contain; + max-width: 100%; + max-height: 100%; +} .list .item.item-accordion { - line-height: 200px; - padding-top: 0; - padding-bottom: 0; - transition: 3s all linear; + line-height: 200px; + padding-top: 0; + padding-bottom: 0; + transition: 3s all linear; } .list .item.item-accordion.ng-hide { - line-height: 0px; + line-height: 0px; } .list .item.item-accordion.ng-hide-add, .list .item.item-accordion.ng-hide-remove { - display: block !important; + display: block !important; } - ul[rn-carousel] > li { - position: relative; - margin-left: -100%; + position: relative; + margin-left: -100%; } - ul[rn-carousel] > li:first-child { - margin-left: 0; + margin-left: 0; } - ul[rn-carousel] img { - max-width: 100%; -} - - -.content-banner .content-banner-close -{ - margin-top:-5px; + max-width: 100%; } - -.mySliderClass.jslider.sliderCSS div.jslider-pointer{ -left:50%; -width:30px; -height:30px; -opacity:0.5; -background-color:#615959; -border-radius:50%; -margin-left:-3px; -margin-top:-8px; +.content-banner .content-banner-close { + margin-top: -5px; } - -.mySliderClass div.jslider-scale ins -{ - color:red; +.mySliderClass.jslider.sliderCSS div.jslider-pointer { + left: 50%; + width: 30px; + height: 30px; + opacity: 0.5; + background-color: #615959; + border-radius: 50%; + margin-left: -3px; + margin-top: -8px; +} +.mySliderClass div.jslider-scale ins { + color: red; /*background-color:red; border-radius:5%; line-height:5px;*/ } - -.mySliderClass div.jslider-value -{ - position:absolute; - top:-29px; - left:0;padding:1px 2px 0; - background:#fff;font-size:9px; - line-height:12px; - white-space:nowrap; - -moz-border-radius:2px; - -webkit-border-radius:2px; - -o-border-radius:2px; - border-radius:2px +.mySliderClass div.jslider-value { + position: absolute; + top: -29px; + left: 0; + padding: 1px 2px 0; + background: #fff; + font-size: 9px; + line-height: 12px; + white-space: nowrap; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px } - - input[type=range]::-webkit-slider-thumb { - - - background: #2980b9; - + background: #2980b9; } /* this is for input = password and dialog = text */ .pinCode input[type=number] { -webkit-text-security: disc; } - - -.pinCode input[type=number]{ +.pinCode input[type=number] { height: 50px; - width:200px; + width: 200px; text-align: center; font-size: 2em; border: 1px solid #ddd; -webkit-appearance: none; -} - - -.pin-background.scroll-content - { +} +.pin-background.scroll-content { /*background: url('../img/background.png') no-repeat center center fixed;*/ + background-size: cover; - background-color:#555555; + background-color: #555555; /*background-color:#16a085;*/ - } - -#responsive-image{ - width: 65%; - margin: 0 auto; +#responsive-image { + width: 65%; + margin: 0 auto; } -#responsive-image img{ - width: 100% - +#responsive-image img { + width: 100% } /* to avoid padding on delete in event list */ .item-content { padding-right: 16px !important; } - -.eventDeleteSpeed -{ +.eventDeleteSpeed { -webkit-animation-duration: 300ms; } - - -.content-banner.alarm -{ +.content-banner.alarm { background-color: forestgreen; - color:white; - + color: white; +} +.content-banner.net { + background-color: #9b59b6; + color: white; } /* This accordion list is used for event server monitor filter * http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations */ .list .item.item-accordion { - line-height: 45px; - padding-top: 0; - padding-bottom: 0; - transition: 0.09s all linear; + line-height: 45px; + padding-top: 0; + padding-bottom: 0; + transition: 0.09s all linear; } .list .item.item-accordion.ng-hide { - line-height: 0px; + line-height: 0px; } .list .item.item-accordion.ng-hide-add, .list .item.item-accordion.ng-hide-remove { - display: block !important; + display: block !important; } - .custom-list i { - float: right; + float: right; } - - /* This is for quick scrub for H264 */ .videogular-container { - height: 260px; - - margin: auto; - overflow: hidden; - float:left; + height: 260px; + margin: auto; + overflow: hidden; + float: left; } - - .videogular-full-container { - height:80%; - - z-index:100; - float:center; - - margin: auto; - overflow: hidden; - + height: 80%; + z-index: 100; + float: center; + margin: auto; + overflow: hidden; } - - - - #full-screen-event { - -webkit-animation-duration: 200ms; - + -webkit-animation-duration: 200ms; } - -#monitorimage -{ - -webkit-animation-duration: 200ms; +#monitorimage { + -webkit-animation-duration: 200ms; } - -#firstuse -{ +#firstuse { -webkit-animation-delay: 1s; } - -#transition-delay -{ +#transition-delay { -webkit-animation-delay: 1s; } /* packery stuff */ - - - -* { box-sizing: border-box; } - -body { font-family: sans-serif; } +* { + box-sizing: border-box; +} +body { + font-family: sans-serif; +} /* ---- grid ---- */ - - -.dragborder -{ - border:2px dotted #3498db; +.dragborder { + border: 2px dotted #3498db; } - -.dragborder-selected -{ - border:4px solid #e74c3c; +.dragborder-selected { + border: 4px solid #e74c3c; +} +.grid-sizer { + width: 10%; +} +.grid-item { + width: 20%; +} +.grid-item-10 { + width: 10%; +} +.grid-item-20 { + width: 20%; +} +.grid-item-30 { + width: 30%; +} +.grid-item-40 { + width: 40%; +} +.grid-item-50 { + width: 50%; +} +.grid-item-60 { + width: 60%; +} +.grid-item-70 { + width: 70%; +} +.grid-item-80 { + width: 80%; +} +.grid-item-90 { + width: 90%; +} +.grid-item-100 { + width: 100%; } - - -.grid-sizer {width:10%; } -.grid-item { width: 20%; } -.grid-item-10 {width: 10%; } -.grid-item-20 { width: 20%; } -.grid-item-30 { width: 30%; } -.grid-item-40 { width: 40%; } -.grid-item-50 { width: 50%; } -.grid-item-60 {width: 60%; } -.grid-item-70 { width: 70%; } -.grid-item-80 { width: 80%; } -.grid-item-90 {width: 90%; } -.grid-item-100 {width:100%; } - - - - /* clear fix */ .grid:after { - content: ''; - display: block; - clear: both; + content: ''; + display: block; + clear: both; } - - .grid-item img { - display: block; - width: 100%; - height:auto; - + display: block; + width: 100%; + height: auto; } -/* ---- .grid-item ---- */ - - +/* ---- .grid-item ---- */ .grid-item.is-dragging, .grid-item.is-positioning-post-drag { - background: #34495e; - z-index: 2; + background: #34495e; + z-index: 2; } - .packery-drop-placeholder { - outline: 3px dashed hsla(0, 0%, 0%, 0.5); - outline-offset: -6px; - -webkit-transition: -webkit-transform 0.2s; - transition: transform 0.2s; + outline: 3px dashed hsla(0, 0%, 0%, 0.5); + outline-offset: -6px; + -webkit-transition: -webkit-transform 0.2s; + transition: transform 0.2s; } - - .wide-as-needed { - overflow: scroll; - white-space: nowrap; + overflow: scroll; + white-space: nowrap; } - - .visred { - fill:#FF0000; + fill: #FF0000; } - -.wizardtip -{ - margin-left:5px; - margin-right:5px; - margin-top:10px; - margin-bottom:5px; +.wizardtip { + margin-left: 5px; + margin-right: 5px; + margin-top: 10px; + margin-bottom: 5px; padding: 5px 5px 5px 5px; background-color: #cccccc; - color:#333232; + color: #333232; border-radius: 8px; border-width: 1px; - border-color:#8b8888; + border-color: #8b8888; border-style: solid; } - .wiz-list { - list-style-type: disc; - list-style-position: inside; + list-style-type: disc; + list-style-position: inside; } - - -.zmPullup -{ - background-color:#E3BE1C; +.zmPullup { + background-color: #E3BE1C; } - #flyoutmenu { - z-index:99; - + z-index: 99; } - #flyoutmenu ul { - list-style: none; - margin: 0; - padding: 0; - color:white; - z-index:99; - + list-style: none; + margin: 0; + padding: 0; + color: white; + z-index: 99; font-size: 0.7em; font-family: sans-serif; text-transform: uppercase; } - - #flyoutmenu ul li a i { - font-size: 2.5em; font-family: sans-serif; text-transform: uppercase; } - #flyoutmenu li { - display: inline-block; - margin-bottom: .2em; - padding:0.7em; - margin-right: 4px; - + display: inline-block; + margin-bottom: .2em; + padding: 0.7em; + margin-right: 4px; line-height: 100%; } - -#flyoutmenu li:first-child -{ +#flyoutmenu li:first-child { /*background: rgba(192, 57, 43, 0.7);*/ - background:rgba(108, 122, 137, 0.7); - -webkit-border-radius: 5px 0 0 5px ; - + + background: rgba(108, 122, 137, 0.7); + -webkit-border-radius: 5px 0 0 5px; } - -#flyoutmenu li:only-child -{ +#flyoutmenu li:only-child { /*background: rgba(192, 57, 43, 0.7);*/ - background:rgba(108, 122, 137, 0.7); - -webkit-border-radius: 5px 5px 5px 5px ; - + + background: rgba(108, 122, 137, 0.7); + -webkit-border-radius: 5px 5px 5px 5px; } - -#flyoutmenu li:last-child -{ - -webkit-border-radius: 0 5px 5px 0; +#flyoutmenu li:last-child { + -webkit-border-radius: 0 5px 5px 0; } /* make sure this is after last-child */ -#flyoutmenu li:only-child -{ +#flyoutmenu li:only-child { /*background: rgba(192, 57, 43, 0.7);*/ - background:rgba(108, 122, 137, 0.7); - -webkit-border-radius: 5px 5px 5px 5px ; - + + background: rgba(108, 122, 137, 0.7); + -webkit-border-radius: 5px 5px 5px 5px; } - - #flyoutmenu li:nth-child(n+2) { - background:rgba(108, 122, 137, 0.7); - z-index:-1; - - } - -#flyoutmenu a -{ - text-decoration:none; - color:white; +#flyoutmenu li:nth-child(n+2) { + background: rgba(108, 122, 137, 0.7); + z-index: -1; +} +#flyoutmenu a { + text-decoration: none; + color: white; } /* Overlay graph in event footage */ #event_canvas { - position:absolute; - width: 80%; - height: 20px; - bottom:80px; - left:20px; - opacity:1; - z-index:99; - + position: absolute; + width: 80%; + height: 20px; + bottom: 80px; + left: 20px; + opacity: 1; + z-index: 99; } - - #event_canvas_video { - position:absolute; - width: 100%; - height: 20px; - bottom:140px; - left:0px; - opacity:1; - z-index:99; - + position: absolute; + width: 100%; + height: 20px; + bottom: 140px; + left: 0px; + opacity: 1; + z-index: 99; } - - - #event_slider { - position:absolute; - width: 80%; - height: 20px; - bottom:60px; - left:20px; - opacity:1; - z-index:9999; - - + position: absolute; + width: 80%; + height: 20px; + bottom: 60px; + left: 20px; + opacity: 1; + z-index: 9999; } - #event_rate_text { - position:absolute; - width: 80%; - bottom:20px; - left:43px; - opacity:1; - color:#fff; - z-index:9998; - -} - -.smallnote -{ - font-size:9px; - text-align:center; - background-color: rgba(0,0,0,0.3); - color:rgb(0,0,0); - border-top-left-radius:5px; - border-top-right-radius:5px; - -} - -.white-button-text -{ - color:#fff !important; -} - - - + position: absolute; + width: 80%; + bottom: 20px; + left: 43px; + opacity: 1; + color: #fff; + z-index: 9998; +} +.smallnote { + font-size: 9px; + text-align: center; + background-color: rgba(0, 0, 0, 0.3); + color: rgb(0, 0, 0); + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.white-button-text { + color: #fff !important; +}
\ No newline at end of file diff --git a/www/index.html b/www/index.html index c6bea392..66f2c178 100644 --- a/www/index.html +++ b/www/index.html @@ -195,7 +195,7 @@ <ion-item href="#/montage" menu-close> - <span ng-if="$root.runMode=='low'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;"> <i class="icon ion-arrow-graph-down-left"></i> </span> + <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;"> <i class="icon ion-arrow-graph-down-left"></i> </span>--> <span class=" item-icon-left"> <i class="icon ion-ios-eye"></i> diff --git a/www/js/DataModel.js b/www/js/DataModel.js index 11451916..dcd6b768 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -2,7 +2,7 @@ /* jslint browser: true*/ -/* global cordova,StatusBar,angular,console, URI, moment, localforage, CryptoJS */ +/* global cordova,StatusBar,angular,console, URI, moment, localforage, CryptoJS, Connection */ // This is my central data respository and common functions // that many other controllers use @@ -39,7 +39,15 @@ angular.module('zmApp.controllers') { text: 'Portugese', value: 'pt' - } + }, + /*{ + text: 'Arabic', + value: 'ar' + }, + { + text: 'Hindi', + value: 'hi' + }*/ ]; var serverGroupList = {}; @@ -109,6 +117,8 @@ angular.module('zmApp.controllers') 'cycleMonitors': false, 'cycleMonitorsInterval':10, // 10sec 'enableLowBandwidth':false, + 'autoSwitchBandwidth':false, + 'disableAlarmCheckMontage': false, @@ -144,6 +154,37 @@ angular.module('zmApp.controllers') return true; } + function getBandwidth() + { + // if mode is not on always return high + if (loginData.enableLowBandwidth == false) + { + return "highbw"; + } + // if mode is force on, return low + if (loginData.enableLowBandwidth == true && loginData.autoSwitchBandwidth != true) + { + return "lowbw"; + } + if (loginData.enableLowBandwidth == true && loginData.autoSwitchBandwidth == true && $rootScope.platformOS == 'desktop') + { + return "highbw"; + } + // else return real state + + var networkState = navigator.connection.type; + var strState; + switch (networkState) + { + + case Connection.WIFI: strState="highbw"; break; + case Connection.ETHERNET: strState="highbw"; break; + default: strState = "lowbw"; break; + + } + return strState; + } + //-------------------------------------------------------------------------- // uses fileLogger to write logs to file for later investigation //-------------------------------------------------------------------------- @@ -691,12 +732,31 @@ angular.module('zmApp.controllers') } + if (typeof loginData.enableLowBandwidth == 'undefined') { + loginData.enableLowBandwidth = false; } - $rootScope.runMode = loginData.enableLowBandwith? "low": "normal"; + // wtf is wrong with this ternary? + //$rootScope.runMode = (loginData.enableLowBandwith==true)? "low": "normal"; + + + + + if (typeof loginData.autoSwitchBandwidth == 'undefined') { + + + loginData.autoSwitchBandwidth = false; + + } + + $rootScope.runMode = getBandwidth(); + log("Setting DataModel init bandwidth to: " +$rootScope.runMode); + + + if (typeof loginData.refreshSecLowBW == 'undefined') { @@ -704,6 +764,12 @@ angular.module('zmApp.controllers') } + if (typeof loginData.disableAlarmCheckMontage == 'undefined') { + + loginData.disableAlarmCheckMontage = false; + + } + @@ -1079,6 +1145,12 @@ angular.module('zmApp.controllers') }, + //-------------------------------------------------------------------------- + // returns high or low BW mode + //-------------------------------------------------------------------------- + getBandwidth: function () { + return getBandwidth(); + }, //-------------------------------------------------------------------------- // This is really a hack for now & is very ugly. I need to clean this up a lot diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index d7ebdfa9..b802ff0e 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -1372,12 +1372,12 @@ angular.module('zmApp.controllers') var relativePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); relativePath = event.Event.MonitorId + "/" + yy + "/" + mm + "/" + @@ -1397,12 +1397,12 @@ angular.module('zmApp.controllers') var basePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); basePath = event.Event.baseURL + "/events/" + event.Event.MonitorId + "/" + diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js index 8a2c3c4c..373d415b 100644 --- a/www/js/EventModalCtrl.js +++ b/www/js/EventModalCtrl.js @@ -101,6 +101,30 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro //$rootScope.authSession=""; NVRDataModel.log("Modal: Error returned Stream authentication construction. Retaining old value of: " + $rootScope.authSession); }); + + + + //-------------------------------------------------------------------------------------- + // Handles bandwidth change, if required + // + //-------------------------------------------------------------------------------------- + + $rootScope.$on("bandwidth-change", function (e,data) { + // not called for offline, I'm only interested in BW switches + NVRDataModel.debug("Got network change:" + data); + var ds; + if (data == 'lowbw') { + ds = "low bandwidth mode"; + } else { + ds = "high bandwidth mode"; + } + NVRDataModel.displayBanner('net', [ds]); + + var ld = NVRDataModel.getLogin(); + + $scope.singleImageQuality = (NVRDataModel.getBandwidth()=="lowbw" )? zm.eventSingleImageQualityLowBW: ld.singleImageQuality; + }); + @@ -148,6 +172,14 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro //------------------------------------------------------ function checkEvent() { + + if ($scope.modalFromTimelineIsOpen == false) + { + NVRDataModel.log ("Modal was closed in timeline, cancelling timer"); + $interval.cancel(eventQueryHandle); + return; + } + //console.log ("Event timer"); //console.log ("Event timer"); $scope.checkEventOn = true; @@ -740,7 +772,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro var ld = NVRDataModel.getLogin(); $scope.loginData = NVRDataModel.getLogin(); - $scope.singleImageQuality = ld.enableLowBandwidth? 70: ld.singleImageQuality; + $scope.singleImageQuality = (NVRDataModel.getBandwidth()=="lowbw" )? zm.eventSingleImageQualityLowBW: ld.singleImageQuality; $scope.blockSlider = false; $scope.checkEventOn = false; //$scope.singleImageQuality = 100; @@ -776,7 +808,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro eventQueryHandle = $interval(function () { checkEvent(); // console.log ("Refreshing Image..."); - }.bind(this), ld.enableLowBandwidth? zm.eventPlaybackQueryLowBW: zm.eventPlaybackQuery); + }.bind(this), (NVRDataModel.getBandwidth()=="lowbw")? zm.eventPlaybackQueryLowBW: zm.eventPlaybackQuery); } else { NVRDataModel.log(">>>Modal was exited, not starting checkAllEvents"); } @@ -854,6 +886,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro $scope.$on('modal.removed', function (e, m) { + console.log ("************* REMOVE CALLED"); $interval.cancel(eventQueryHandle); if (m.id != 'footage') return; @@ -1235,12 +1268,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro var relativePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); relativePath = event.Event.MonitorId + "/" + yy + "/" + mm + "/" + @@ -1260,12 +1293,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro var basePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); basePath = loginData.url + "/events/" + event.Event.MonitorId + "/" + diff --git a/www/js/EventsModalGraphCtrl.js b/www/js/EventsModalGraphCtrl.js index fb349df0..0874e4f7 100644 --- a/www/js/EventsModalGraphCtrl.js +++ b/www/js/EventsModalGraphCtrl.js @@ -334,12 +334,12 @@ angular.module('zmApp.controllers').controller('EventsModalGraphCtrl', ['$scope' var relativePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); relativePath = event.Event.MonitorId + "/" + yy + "/" + mm + "/" + @@ -359,12 +359,12 @@ angular.module('zmApp.controllers').controller('EventsModalGraphCtrl', ['$scope' var basePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); basePath = loginData.url + "/events/" + event.Event.MonitorId + "/" + diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js index 457ebe79..28f16670 100644 --- a/www/js/LoginCtrl.js +++ b/www/js/LoginCtrl.js @@ -424,7 +424,7 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r NVRDataModel.setFirstUse(false); // used for menu display - $rootScope.runMode = $scope.loginData.enableLowBandwidth ? "low":"normal"; + // lets so some basic sanitization of the data // I am already adding "/" so lets remove spurious ones @@ -529,6 +529,8 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r } NVRDataModel.setLogin($scope.loginData); + $rootScope.runMode = NVRDataModel.getBandwidth(); + oldName = $scope.loginData.serverName; if ($scope.check.isUseEventServer) { diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js index 84553d6e..5268b19d 100644 --- a/www/js/MonitorModalCtrl.js +++ b/www/js/MonitorModalCtrl.js @@ -1259,7 +1259,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.isCycle = ld.cycleMonitors; $scope.cycleText = $scope.isCycle ? $translate.instant('kOn') : $translate.instant('kOff'); - $scope.quality = ld.enableLowBandwidth? 70:ld.monSingleImageQuality; + $scope.quality = (NVRDataModel.getBandwidth()=="lowbw")? zm.monSingleImageQualityLowBW:ld.monSingleImageQuality; configurePTZ($scope.monitorId); diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 5cc06739..bff471d3 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -4,7 +4,8 @@ /* global cordova,StatusBar,angular,console,ionic,Packery, Draggabilly, imagesLoaded, ConnectSDK */ -angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$localstorage', '$translate', function ($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage, $translate) { +angular.module('zmApp.controllers') + .controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$localstorage', '$translate', function ($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage, $translate) { //--------------------------------------------------------------------- // Controller main @@ -24,6 +25,41 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' var ld; var refreshSec; + + //-------------------------------------------------------------------------------------- + // Handles bandwidth change, if required + // + //-------------------------------------------------------------------------------------- + + $rootScope.$on("bandwidth-change", function (e,data) { + // not called for offline, I'm only interested in BW switches + NVRDataModel.debug("Got network change:" + data); + var ds; + if (data == 'lowbw') { + ds = "low bandwidth mode"; + } else { + ds = "high bandwidth mode"; + } + NVRDataModel.displayBanner('net', [ds]); + var ld = NVRDataModel.getLogin(); + refreshSec = (NVRDataModel.getBandwidth()=='lowbw') ? ld.refreshSecLowBW : ld.refreshSec; + $interval.cancel(intervalHandleMontage); + intervalHandleMontage = $interval(function () { + loadNotifications(); + }.bind(this), refreshSec * 1000); + + + if (NVRDataModel.getBandwidth() == 'lowbw') + { + NVRDataModel.debug("Enabling low bandwidth parameters"); + $scope.LoginData.montageQuality = zm.montageQualityLowBW; + $scope.LoginData.singleImageQuality = zm.eventSingleImageQualityLowBW; + $scope.LoginData.montageHistoryQuality = zm.montageQualityLowBW; + + } + }); + + // -------------------------------------------------------- // Handling of back button in case modal is open should // close the modal @@ -257,15 +293,15 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' function loadAlarmStatus() { - if (NVRDataModel.versionCompare($rootScope.apiVersion, "1.30") == -1) { + if ((NVRDataModel.versionCompare($rootScope.apiVersion, "1.30") == -1) || + (NVRDataModel.getBandwidth() == 'lowbw') || + (NVRDataModel.getLogin().disableAlarmCheckMontage == true)) + { return; } + - if (NVRDataModel.getLogin().enableLowBandwidth) - { - return; - } for (var i = 0; i < $scope.MontageMonitors.length; i++) { if (($scope.MontageMonitors[i].Monitor.Function == 'None') || @@ -794,7 +830,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' $scope.toggleSizeButtons = function () { $scope.showSizeButtons = !$scope.showSizeButtons; - + NVRDataModel.debug("toggling size buttons:" + $scope.showSizeButtons); if ($scope.showSizeButtons) $ionicScrollDelegate.$getByHandle("montage-delegate").scrollTop(); }; @@ -818,18 +854,18 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' $scope.allImagesLoaded = false; $scope.gridScale = "grid-item-50"; $scope.LoginData = NVRDataModel.getLogin(); + //FIXME - if ($scope.LoginData.enableLowBandwidth) - { - NVRDataModel.debug ("Enabling low bandwidth parameters"); - $scope.LoginData.montageQuality = 50; - $scope.LoginData.singleImageQuality = 70; - $scope.LoginData.montageHistoryQuality = 50; - - + if (NVRDataModel.getBandwidth() == 'lowbw') { + NVRDataModel.debug("Enabling low bandwidth parameters"); + $scope.LoginData.montageQuality = zm.montageQualityLowBW; + $scope.LoginData.singleImageQuality = zm.eventSingleImageQualityLowBW; + $scope.LoginData.montageHistoryQuality = zm.montageQualityLowBW; + + } - - + + $scope.monLimit = $scope.LoginData.maxMontage; $scope.showSizeButtons = false; @@ -851,11 +887,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' //$scope.areImagesLoading = true; var ld = NVRDataModel.getLogin(); - - refreshSec = ld.enableLowBandwidth ? ld.refreshSecLowBW: ld.refreshSec; - - NVRDataModel.debug ("Enable Low bandwidth: " + ld.enableLowBandwidth+ " montage refresh set to: " + refreshSec); - + + refreshSec = (NVRDataModel.getBandwidth()=='lowbw') ? ld.refreshSecLowBW : ld.refreshSec; + + NVRDataModel.debug("bandwidth: " + NVRDataModel.getBandwidth() + " montage refresh set to: " + refreshSec); + //console.log("Setting Awake to " + NVRDataModel.getKeepAwake()); NVRDataModel.setAwake(NVRDataModel.getKeepAwake()); @@ -1141,4 +1177,4 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' }; -}]);
\ No newline at end of file +}]); diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js index 8b049143..1fb1f09c 100644 --- a/www/js/MontageHistoryCtrl.js +++ b/www/js/MontageHistoryCtrl.js @@ -8,6 +8,19 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$translate', function ($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $translate) { + + + //-------------------------------------------------------------------------------------- + // Handles bandwidth change, if required + // + //-------------------------------------------------------------------------------------- + + $rootScope.$on("bandwidth-change", function (e,data) { + // nothing to do for now + // eventUrl will use lower BW in next query cycle + }); + + //-------------------------------------- // formats events dates in a nice way @@ -146,7 +159,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc // console.log ("Old value of event url " + $scope.MontageMonitors[j].eventUrl); //console.log ("ldurl is " + ld.streamingurl); - $scope.MontageMonitors[j].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + eid + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[j].Monitor.connKey + "&scale=" + ld.montageHistoryQuality + "&rand=" + $rootScope.rand; + + var bw = NVRDataModel.getBandwidth()=="lowbw"? zm.eventMontageQualityLowBW: ld.montageHistoryQuality ; + $scope.MontageMonitors[j].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + eid + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[j].Monitor.connKey + "&scale=" + bw+ "&rand=" + $rootScope.rand; //console.log ("Setting event URL to " +$scope.MontageMonitors[j].Monitor.eventUrl); // console.log ("SWITCHING TO " + $scope.MontageMonitors[j].eventUrl); @@ -195,7 +210,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc if (!NVRDataModel.isBackground()) { - $scope.MontageMonitors[i].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.events[0].Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[i].Monitor.connKey + "&scale=" + ld.montageHistoryQuality + "&rand=" + $rootScope.rand; + var bw = NVRDataModel.getBandwidth()=="lowbw"? zm.eventMontageQualityLowBW: ld.montageHistoryQuality ; + + $scope.MontageMonitors[i].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.events[0].Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[i].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand; @@ -409,7 +426,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc element.addClass('animated flipInX'); $scope.MontageMonitors[ndx].Monitor.eventUrlTime = data.event.Event.StartTime; - $scope.MontageMonitors[ndx].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.event.Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[ndx].Monitor.connKey + "&scale=" + ld.montageHistoryQuality + "&rand=" + $rootScope.rand; + var bw = NVRDataModel.getBandwidth()=="lowbw"? zm.eventMontageQualityLowBW: ld.montageHistoryQuality ; + $scope.MontageMonitors[ndx].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.event.Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[ndx].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand; }, 700); } else if (currentEventTime.diff(maxTime) > 0) { diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js index 87f26126..10aa2ce3 100644 --- a/www/js/TimelineModalCtrl.js +++ b/www/js/TimelineModalCtrl.js @@ -398,12 +398,12 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' var relativePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); relativePath = event.Event.MonitorId + "/" + yy + "/" + mm + "/" + @@ -423,12 +423,12 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' var basePath = ""; var loginData = NVRDataModel.getLogin(); var str = event.Event.StartTime; - var yy = moment(str).format('YY'); - var mm = moment(str).format('MM'); - var dd = moment(str).format('DD'); - var hh = moment(str).format('HH'); - var min = moment(str).format('mm'); - var sec = moment(str).format('ss'); + var yy = moment(str).locale('en').format('YY'); + var mm = moment(str).locale('en').format('MM'); + var dd = moment(str).locale('en').format('DD'); + var hh = moment(str).locale('en').format('HH'); + var min = moment(str).locale('en').format('mm'); + var sec = moment(str).locale('en').format('ss'); basePath = loginData.url + "/events/" + event.Event.MonitorId + "/" + diff --git a/www/js/app.js b/www/js/app.js index 367fc0af..eb254aa8 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1,7 +1,13 @@ /* jshint -W041 */ /* jslint browser: true*/ -/* global cordova,StatusBar,angular,console,alert,PushNotification, moment ,ionic, URI,Packery, ConnectSDK, CryptoJS, localforage,$*/ +/* global cordova,StatusBar,angular,console,alert,PushNotification, moment ,ionic, URI,Packery, ConnectSDK, CryptoJS, ContactFindOptions, localforage,$, Connection*/ +// For desktop versions, this is replaced +// with actual app version from config.xml by the +// ./make_desktop.sh script + +// For mobile versions, I use cordova app version plugin +// to get it at run time var appVersion = "0.0.0"; @@ -46,7 +52,7 @@ angular.module('zmApp', [ authoremail: 'pliablepixels+zmNinja@gmail.com', logFileMaxSize: 20000, // after this limit log gets reset loginInterval: 300000, //5m*60s*1000 - ZM auto login after 5 mins - loginIntervalLowBW: 600000, //10m login + //loginInterval: 30000, updateCheckInterval: 86400000, // 24 hrs loadingTimeout: 15000, @@ -78,11 +84,18 @@ angular.module('zmApp', [ nphSwitchTimer: 3000, eventHistoryTimer: 10000, eventPlaybackQuery: 3000, - eventPlaybackQueryLowBW: 6000, + packeryTimer: 500, dbName: 'zmninja', cipherKey: 'sdf#@#%FSXSA_AR', minCycleTime: 5, + + eventPlaybackQueryLowBW: 6000, + loginIntervalLowBW: 600000, //10m login + eventSingleImageQualityLowBW:70, + monSingleImageQualityLowBW:70, + montageQualityLowBW:50, + eventMontageQualityLowBW:50 }) @@ -109,18 +122,6 @@ angular.module('zmApp', [ }) -// https://forum.ionicframework.com/t/ng-src-not-updated-in-video-tag/7540/6 -.directive('dynamicUrl', function () { - return { - restrict: 'A', - link: function postLink(scope, element, attr) { - element.attr('src', attr.dynamicUrlSrc); - } - }; -}) - - - // credit https://gist.github.com/Zren/beaafd64f395e23f4604 @@ -577,8 +578,8 @@ angular.module('zmApp', [ $rootScope.newBlogPost = "(new post)"; return; + } - var mLastDate = moment(lastDate); var mItemDate = moment(data[0].date); @@ -968,11 +969,35 @@ angular.module('zmApp', [ $rootScope.$apply(function () { $rootScope.online = false; NVRDataModel.log("Your network went offline"); + + //$rootScope.$emit('network-change', "offline"); + }); }, false); + $window.addEventListener("online", function () { $rootScope.$apply(function () { $rootScope.online = true; + + $timeout ( function () { + var networkState = navigator.connection.type; + NVRDataModel.debug ("Detected network type as: "+ networkState); + var strState = NVRDataModel.getBandwidth(); + NVRDataModel.debug ("getBandwidth() normalized it as: " + strState); + $rootScope.runMode = strState; + if ((NVRDataModel.getLogin().autoSwitchBandwidth == true) && + (NVRDataModel.getLogin().enableLowBandwidth == true)) + { + NVRDataModel.debug ("Setting app state to: "+ strState); + $rootScope.$emit('bandwidth-change', strState); + } + else + { + NVRDataModel.debug ("Not changing bandwidth state, as auto change is not on"); + } + + },1000); // need a time gap, seems network type registers late + NVRDataModel.log("Your network is online, re-authenticating"); zmAutoLogin.doLogin($translate.instant('kReAuthenticating')); @@ -1077,11 +1102,8 @@ angular.module('zmApp', [ - - - $rootScope.db = null; - $rootScope.runMode = "normal"; + $rootScope.runMode = NVRDataModel.getBandwidth(); $rootScope.platformOS = "desktop"; NVRDataModel.log("Device is ready"); @@ -1424,12 +1446,6 @@ angular.module('zmApp', [ } - - - - - - }); //platformReady }) //run @@ -1485,7 +1501,7 @@ angular.module('zmApp', [ //$translateProvider.useLocalStorage(); - $translateProvider.registerAvailableLanguageKeys(['en', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'zh', 'zh_CN', 'zh_TW', 'pt'], { + $translateProvider.registerAvailableLanguageKeys(['en', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'zh', 'zh_CN', 'zh_TW', 'pt', 'ar','hi'], { 'en_*': 'en', 'de_*': 'de', 'es_*': 'es', @@ -1494,6 +1510,8 @@ angular.module('zmApp', [ 'ja_*': 'ja', 'ko_*': 'ko', 'pt_*': 'pt', + 'ar_*': 'ar', + 'hi_*': 'hi', '*': 'en' // must be last }); diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json index 7af0db3b..ca8469c8 100644 --- a/www/lang/locale-en.json +++ b/www/lang/locale-en.json @@ -16,6 +16,7 @@ "kAt" :"at", "kAuthSuccess" :"authentication success", "kAuthenticating" :"authenticating", + "kAutoSwitchBW" :"auto switch bandwidth", "kAwake1" :"Keep display on", "kAwake2" :"(when viewing footage)", "kBannerAPICheckFailed" :"API check failed", @@ -56,6 +57,8 @@ "kDeletingEvent" :"deleting event", "kDevOptions" :"Dev. Settings", "kDeveloperOptionsFor" :"Developer Options for", + "kDisableAlarmMontage" : "Disable alarm API in montage", + "kDisableAlarmMontageSub" : "may help if server gets overloaded", "kDisableNative" :"Disable Native transitions", "kDisableNativeSub" :"Enable if the menu is freezing", "kDisablePush" :"disable APNS/GCM", @@ -148,6 +151,7 @@ "kLoginValidatedTitle" :"Login Validated", "kLogs" :"Logs", "kLowBandwidth" :"low bandwidth mode", + "kLowBWDisplay" : "low bandwidth", "kManageServerGroups" :"Manage Server Groups", "kMaxFPS" :"Max FPS", "kMaxItemsForTimeline" :"Max. items for Timeline", diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html index a2bf0e8c..98a9dcef 100644 --- a/www/templates/devoptions.html +++ b/www/templates/devoptions.html @@ -131,6 +131,10 @@ </div> <label> + <ion-toggle ng-model="loginData.disableAlarmCheckMontage" ng-checked="loginData.disableAlarmCheckMontage" toggle-class="toggle-calm">{{'kDisableAlarmMontage' | translate}}<p>{{'kDisableAlarmMontageSub' | translate}}</p></ion-toggle> + </label> + + <label> <ion-toggle ng-model="loginData.enableLogs" ng-checked="{{loginData.enableLogs}}" toggle-class="toggle-calm">{{'kEnableLogs' | translate}}</ion-toggle> </label> diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index 355ff4f2..2f8bc08d 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -120,7 +120,7 @@ - <div class="events-range-modal-text">{{mName}} <i class="ion-arrow-right-b"></i> {{humanizeTime}} ({{'kEvent' | translate}}:{{d_eventId}}) </div> + <div class="events-range-modal-text">{{mName}} <i class="ion-arrow-right-b"></i> {{humanizeTime}} ({{d_eventId}}) </div> <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px"> <ul> diff --git a/www/templates/events.html b/www/templates/events.html index 9b0cd7ba..ac0e1a4f 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -34,7 +34,7 @@ </ion-header-bar> </div> - + <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" has-subheader="true" overflow-scroll="false" mouse-wheel-scroll> @@ -278,7 +278,15 @@ </ion-infinite-scroll> </div> </ion-content> + + + <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();">{{'kFilterOn'|translate}}</div> + + <div class="bwmode" ng-if="$root.runMode=='lowbw'"> + {{ 'kLowBWDisplay' | translate }} + </div> + <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand"> diff --git a/www/templates/login.html b/www/templates/login.html index e2a65168..054aaf49 100644 --- a/www/templates/login.html +++ b/www/templates/login.html @@ -3,135 +3,118 @@ <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> <button class="button button-icon button-clear ion-arrow-down-b" ng-click="serverActionSheet()"></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> + + + + <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> - + <ion-nav-buttons side="right"> <button class="button button-clear" ng-click="saveItems()">Save</button> </ion-nav-buttons> - <ion-content padding="true" > - - <div class="item item-input-inset"> - {{'kServerName' | translate }}: - <label class="item-input-wrapper"> - <input autocorrect="off" type="text" placeholder="{{'kExampleServer' | translate}}" ng-model="loginData.serverName"> - </label> + <ion-content padding="true"> + + <div class="item item-input-inset"> + {{'kServerName' | translate }}: + <label class="item-input-wrapper"> + <input autocorrect="off" type="text" placeholder="{{'kExampleServer' | translate}}" ng-model="loginData.serverName"> + </label> </div> - + <label> - - <ion-toggle ng-model="loginData.enableLowBandwidth" - - toggle-class="toggle-calm">{{'kLowBandwidth'|translate}} + <ion-toggle ng-model="loginData.enableLowBandwidth" toggle-class="toggle-calm">{{'kLowBandwidth'|translate}} </ion-toggle> - </label> - + </label> + <label ng-if="loginData.enableLowBandwidth"> + <ion-toggle ng-model="loginData.autoSwitchBandwidth" toggle-class="toggle-calm">{{'kAutoSwitchBW'|translate}} + </ion-toggle> + </label> + + <div class="list list-inset"> <span style="color:rgb(100,100,100)"> <i class="ion-android-home" style="font-size:150%"></i> {{'kZMSettingsFor' | translate}} {{loginData.serverName || ('kUnknown' | translate)}} </span> - + <div class="item"> - <ion-checkbox ng-model="check.isUseAuth">{{'kUseZmAuth' | translate }}</ion-checkbox> - - <div ng-if = "check.isUseAuth" > - - <label class="item item-input item-floating-label" > - <span class="input-label">{{'kUserName'|translate}}</span> - <input autocapitalize="none" autocomplete="off" - autocorrect="off" type="text" - placeholder="username" - ng-model="loginData.username"> - </label> + <ion-checkbox ng-model="check.isUseAuth">{{'kUseZmAuth' | translate }}</ion-checkbox> - <label class="item item-input item-floating-label" > - <span class="input-label">{{'kPassword' | translate}}</span> - <input type="password" placeholder="password" - ng-model="loginData.password"> - </label> - </div> - + <div ng-if="check.isUseAuth"> + + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kUserName'|translate}}</span> + <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="username" ng-model="loginData.username"> + </label> + + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kPassword' | translate}}</span> + <input type="password" placeholder="password" ng-model="loginData.password"> + </label> </div> - <label class="item item-input item-floating-label" > + + </div> + <label class="item item-input item-floating-label"> <span class="input-label">{{'kPortalUrl' | translate}}</span> - <input autocapitalize="none" autocomplete="off" - autocorrect="off" type="text" - placeholder="ZM portal url " - ng-model="loginData.url" ng-keyup="portalKeypress($event)"> + <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="ZM portal url " ng-model="loginData.url" ng-keyup="portalKeypress($event)"> </label> - - <!--<button class="button button-small button-clear icon-left ion-wand" ng-click="detectCgi()">tap here to discover cgi-bin + + <!--<button class="button button-small button-clear icon-left ion-wand" ng-click="detectCgi()">tap here to discover cgi-bin </button>--> - - <label class="item item-input item-floating-label" > - - - <!--<span style="float:right;margin-top:-7px;background-color:#6d0909;color:#fff;font-size:14px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;" on-tap="detectCgi();"> <i class="ion-wand"></i>discover</span>--> - + + <label class="item item-input item-floating-label"> + + + <!--<span style="float:right;margin-top:-7px;background-color:#6d0909;color:#fff;font-size:14px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;" on-tap="detectCgi();"> <i class="ion-wand"></i>discover</span>--> + <span class="input-label">{{'kPathToCgi' | translate}}</span> - - <input autocapitalize="none" autocomplete="off" - autocorrect="off" type="text" - placeholder="eg. server.com/zm/cgi-bin" - ng-model="loginData.streamingurl"> - + + <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="eg. server.com/zm/cgi-bin" ng-model="loginData.streamingurl"> + </label> - - - - <label class="item item-input item-floating-label" > + + + + <label class="item item-input item-floating-label"> <span class="input-label">{{'kApiUrl' | translate}}</span> - <input autocapitalize="none" - autocomplete="off" autocorrect="off" - type="text" placeholder="ZM api url" - ng-model="loginData.apiurl"> + <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="ZM api url" ng-model="loginData.apiurl"> </label> - + <a class="item item-icon-right" href="" ng-click="selectFallback()"> <i class="icon ion-ios-arrow-right"> - </i> - {{'kFallback' | translate}}<p>{{loginData.fallbackConfiguration}}</p> - </a> - + </i> {{'kFallback' | translate}} + <p>{{loginData.fallbackConfiguration}}</p> + </a> + <a class="item item-icon-right" href="" ng-click="eventServerSettings()"> <i class="icon ion-ios-arrow-right"> - </i> - {{'kEventServer' | translate}} + </i> {{'kEventServer' | translate}} </a> - - + + <div ng-if="$root.platformOS != 'desktop'"> <label> - <ion-toggle ng-model="loginData.usePin" ng-change="pinPrompt();" - ng-checked="{{loginData.usePin}}" - toggle-class="toggle-calm">{{'kPassword' | translate}} {{'kProtect'|translate}}</ion-toggle> + <ion-toggle ng-model="loginData.usePin" ng-change="pinPrompt();" ng-checked="{{loginData.usePin}}" toggle-class="toggle-calm">{{'kPassword' | translate}} {{'kProtect'|translate}}</ion-toggle> </label> </div> - + <label> - <ion-toggle ng-model="loginData.useSSL" - ng-checked="{{loginData.useSSL}}" - toggle-class="toggle-calm">{{'kUseSSL' | translate}}</ion-toggle> + <ion-toggle ng-model="loginData.useSSL" ng-checked="{{loginData.useSSL}}" toggle-class="toggle-calm">{{'kUseSSL' | translate}}</ion-toggle> </label> <div ng-if="$root.platformOS != 'desktop'"> - <label> - - <ion-toggle ng-model="loginData.keepAwake" - ng-checked="{{loginData.keepAwake}}" - toggle-class="toggle-calm">{{'kAwake1'|translate}}<p>{{'kAwake2'| translate}}</p> - </ion-toggle> - </label> + <label> + + <ion-toggle ng-model="loginData.keepAwake" ng-checked="{{loginData.keepAwake}}" toggle-class="toggle-calm">{{'kAwake1'|translate}} + <p>{{'kAwake2'| translate}}</p> + </ion-toggle> + </label> </div> </div> - + </ion-content> -</ion-view> +</ion-view>
\ No newline at end of file diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 33ddc865..1cfbfac9 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -142,6 +142,6 @@ </ul> </div> - <div class="monitor-modal-text">{{monitorName}} <span style="{{stateColor()}}">{{monStatus}} </span></div> + <div class="monitor-modal-text">{{monitorName}} <span style="{{stateColor()}}">{{monStatus}} </span></div> </div> diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html index d495b482..f0e4a4a5 100644 --- a/www/templates/montage-history.html +++ b/www/templates/montage-history.html @@ -80,7 +80,7 @@ {{monitor.Monitor.Name}} </div> - <div ng-if="sliderVal.showTimeline" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" + <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline"> <i class="ion-clock"></i> {{prettifyDate(monitor.Monitor.eventUrlTime)}} @@ -115,6 +115,10 @@ </ion-content> + + <div class="bwmode" ng-if="$root.runMode=='lowbw'"> + {{ 'kLowBWDisplay' | translate }} + </div> <div ng-show="minimal"> <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> diff --git a/www/templates/montage.html b/www/templates/montage.html index 4ce29ab3..f79db1ef 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -1,4 +1,5 @@ <ion-view view-title="{{'kMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}"> + <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();"> @@ -34,7 +35,8 @@ <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" > - + + <span ng-if="!minimal && showSizeButtons"> <!-- this is header --> @@ -91,7 +93,7 @@ <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'" > <i class="ion-ios-videocam"></i> - {{monitor.Monitor.Name}} <i style="{{monitor.Monitor.alarmState}}" class="ion-record"></i> + {{monitor.Monitor.Name}} <i ng-if="$root.runMode!='lowbw'" style="{{monitor.Monitor.alarmState}}" class="ion-record"></i> </figcaption> @@ -120,6 +122,11 @@ </ion-content> + + <div class="bwmode" ng-if="$root.runMode=='lowbw'"> + {{ 'kLowBWDisplay' | translate }} + </div> + <div ng-show="minimal"> <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> |