diff options
Diffstat (limited to 'www/templates')
24 files changed, 485 insertions, 980 deletions
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html index 0ce3d11c..1f70d412 100644 --- a/www/templates/devoptions.html +++ b/www/templates/devoptions.html @@ -21,7 +21,8 @@ <ion-toggle ng-model="loginData.use24hr" ng-checked="{{loginData.use24hr}}" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnable24hr' | translate}}</span></ion-toggle> </label> <label> - <ion-toggle ng-model="loginData.useLocalTimeZone" ng-checked="{{loginData.useLocalTimeZone}}" ng-disabled="!isTzSupported()" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kLocalTimeZone' | translate}}<span ng-if="!isTzSupported()"><p>{{'kTimeZoneNotSupported' | translate}}</p></span><span ng-if="isTzSupported()"><p>{{'kServerTimeZone' | translate}}:{{getTimeZoneNow()}}</p></span></span></ion-toggle> + <ion-toggle ng-model="loginData.useLocalTimeZone" ng-checked="{{loginData.useLocalTimeZone}}" ng-disabled="!isTzSupported()" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kLocalTimeZone' | translate}}<span ng-if="!isTzSupported()"><p>{{'kTimeZoneNotSupported' | translate}}</p></span><span ng-if="isTzSupported()"><p>{{'kServerTimeZone' | translate}}:{{getTimeZoneNow()}}</p></span></span> + </ion-toggle> </label> <div ng-if="$root.platformOS=='android'"> <label> @@ -41,9 +42,6 @@ toggle-class="toggle-calm">use ZMS for events footage</ion-toggle> </label> --> - - - <div class="item item-text-wrap item-input-inset"> {{'kMaxMonitorsMontage' | translate }} <label class="item-input-wrapper"> diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html index 2f7b965d..0e14016f 100644 --- a/www/templates/events-graphs.html +++ b/www/templates/events-graphs.html @@ -1,88 +1,60 @@ - <!----- NOT USED --------> - <ion-view view-title="Monitor Event Summary" cache-view="false"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> - + <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> - <!-- I'm calling the same controller function but with different parameters when you switch between tabs --> - <!-- Oddly, unless I add a "div ng-controller" before each canvas onClick handler does not work --> - <!-- All Events view --> - <div id="visualization"></div> + <div id="visualization"></div> <ion-tabs class="tabs-icon-top tabs-stable"> <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)"> <ion-nav-view> <ion-content class="has-header"> - <div ng-controller="zmApp.EventsGraphsCtrl"> - - - - <canvas tc-chartjs-bar chart-data="chart.data" - chart-options="chart.options" - ng-click="handleChartClick($event)" chart="chartwithbars"> - </canvas> + <canvas tc-chartjs-bar chart-data="chart.data" chart-options="chart.options" ng-click="handleChartClick($event)" chart="chartwithbars"> + </canvas> </div> </ion-content> </ion-nav-view> </ion-tab> - <!-- All Events in the last hour --> - <ion-tab title="Last Hour" icon="ion-stats-bars" - on-select="generateTCChart(1,'Events in the last hour',1)"> + <ion-tab title="Last Hour" icon="ion-stats-bars" on-select="generateTCChart(1,'Events in the last hour',1)"> <ion-nav-view> <ion-content> <div ng-controller="zmApp.EventsGraphsCtrl"> - <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="chart.data" - chart-options="chart.options" - ng-click="handleChartClick($event)" - chart="chartwithbars"> - </canvas> + <div style="overflow:scroll;"> + <canvas tc-chartjs-bar chart-data="chart.data" chart-options="chart.options" ng-click="handleChartClick($event)" chart="chartwithbars"> + </canvas> </div> </div> </ion-content> </ion-nav-view> </ion-tab> - <!-- All Events in last 24 hrs--> - <ion-tab title="Day" icon="ion-stats-bars" - on-select="generateTCChart(2,'Events in the last day',24)"> + <ion-tab title="Day" icon="ion-stats-bars" on-select="generateTCChart(2,'Events in the last day',24)"> <ion-nav-view> <ion-content> <div ng-controller="zmApp.EventsGraphsCtrl"> - <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="chart.data" - chart-options="chart.options" chart="chartwithbars" - ng-click="handleChartClick($event)"> - </canvas> - </div> + <div style="overflow:scroll;"> + <canvas tc-chartjs-bar chart-data="chart.data" chart-options="chart.options" chart="chartwithbars" ng-click="handleChartClick($event)"> + </canvas> + </div> </div> </ion-content> </ion-nav-view> </ion-tab> - <!-- All Events in last week --> - <ion-tab title="Week" icon="ion-stats-bars" - on-select="generateTCChart(3,'Events in the last week',168)"> + <ion-tab title="Week" icon="ion-stats-bars" on-select="generateTCChart(3,'Events in the last week',168)"> <ion-nav-view> <ion-content> <div ng-controller="zmApp.EventsGraphsCtrl"> <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="chart.data" - chart-options="chart.options" - chart="chartwithbars" - ng-click="handleChartClick($event)"> + <canvas tc-chartjs-bar chart-data="chart.data" chart-options="chart.options" chart="chartwithbars" ng-click="handleChartClick($event)"> </canvas> </div> </div> diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index f9dd446d..8ed518c2 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -2,10 +2,9 @@ <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"--> <ion-modal-view cache-view="false"> <ion-content style="background-color:#444444" ng-cloak> - <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" overflow-scroll="false"> + <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" overflow-scroll="false"> <div id="full-screen-event" style="height: 100vh;"> - <!--<div>--> - + <!--<div>--> <!-- route via ZMS --> <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)"> <!--<div style="color:white">connkey:{{connKey}}</div>--> @@ -18,26 +17,25 @@ </div> <!-- no default video --> <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true"> - <div ng-if="videoIsReady" > + <div ng-if="videoIsReady"> <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;"> - <videogular vg-error="onVideoError($event)" vg-can-play = "onCanPlay()" vg-player-ready="onPlayerReady($API)" vg-plays-inline="videoObject.config.playsInline" vg-theme="videoObject.config.theme" vg-complete="playbackFinished()" on-double-tap="closeModal();" vg-autoplay="videoObject.config.autoPlay" vg-responsive="videoObject.config.responsive" vg-update-time="videoTime(event.Event.StartTime,$currentTime)" > - <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls"> - </vg-media> - - <vg-controls> - <vg-play-pause-button></vg-play-pause-button> - <vg-time-display>{{ videoTime(event.Event.StartTime, currentTime ); }}</vg-time-display> - <vg-scrub-bar> - <vg-scrub-bar-current-time></vg-scrub-bar-current-time> - </vg-scrub-bar> - <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> - <vg-fullscreen-button></vg-fullscreen-button> - <vg-volume> - <vg-mute-button></vg-mute-button> - </vg-volume> - </vg-controls> - <!--<vg-buffering></vg-buffering>--> - </videogular> + <videogular vg-error="onVideoError($event)" vg-can-play="onCanPlay()" vg-player-ready="onPlayerReady($API)" vg-plays-inline="videoObject.config.playsInline" vg-theme="videoObject.config.theme" vg-complete="playbackFinished()" on-double-tap="closeModal();" vg-autoplay="videoObject.config.autoPlay" vg-responsive="videoObject.config.responsive" vg-update-time="videoTime(event.Event.StartTime,$currentTime)"> + <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls"> + </vg-media> + <vg-controls> + <vg-play-pause-button></vg-play-pause-button> + <vg-time-display>{{ videoTime(event.Event.StartTime, currentTime ); }}</vg-time-display> + <vg-scrub-bar> + <vg-scrub-bar-current-time></vg-scrub-bar-current-time> + </vg-scrub-bar> + <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> + <vg-fullscreen-button></vg-fullscreen-button> + <vg-volume> + <vg-mute-button></vg-mute-button> + </vg-volume> + </vg-controls> + <!--<vg-buffering></vg-buffering>--> + </videogular> </div> </div> <!--<div id="event_canvas_video"> diff --git a/www/templates/events-modalgraph.html b/www/templates/events-modalgraph.html index 8b718a5e..25b38543 100644 --- a/www/templates/events-modalgraph.html +++ b/www/templates/events-modalgraph.html @@ -1,10 +1,9 @@ <div ng-controller="EventsModalGraphCtrl"> - -<ion-modal-view cache-view="false" style="width:80%;height:80%; top: 10%; left: 10%; right: 10%; bottom: 10%;" > + <ion-modal-view cache-view="false" style="width:80%;height:80%; top: 10%; left: 10%; right: 10%; bottom: 10%;"> <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="eventgraph-modal-delegate"> - <div data-tap-disabled="true"> - <canvas id="eventchart" width="auto" height="70%"></canvas> - </div> + <div data-tap-disabled="true"> + <canvas id="eventchart" width="auto" height="70%"></canvas> + </div> </ion-content> </ion-modal-view> </div> diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html index e48b290e..38dd1d2e 100644 --- a/www/templates/events-popover.html +++ b/www/templates/events-popover.html @@ -1,18 +1,15 @@ <ion-popover-view class="fit"> - <ion-content> - <div class="list" ng-click="popover.hide()"> + <ion-content> + <div class="list" ng-click="popover.hide()"> <a class="item" ng-href="" ng-click="popover.hide();$state.go('events-date-time-filter');">{{'kFilterByDateTime' | translate}}</a> - <!-- <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" > Event Graphs </a>--> <a class="item" ng-href="" ng-click="popover.hide();doRefresh();"> {{'kRefresh' | translate}} </a> - <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">{{'kShowAllEvents' | translate}}</a> - <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a> - </div> - </ion-content> - </ion-popover-view> - + <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a> + </div> + </ion-content> +</ion-popover-view> diff --git a/www/templates/events.html b/www/templates/events.html index af2a7f89..48163d2e 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -1,82 +1,49 @@ - <ion-view cache-view="false"> - <ion-nav-title>{{scrollPosition();}}</ion-nav-title> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"> </button> - <button class="button button-icon icon ion-ios-minus-outline" ng-click="eventList.showDelete = !eventList.showDelete;"></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"> <a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;> </a> <a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a> </ion-nav-buttons> - <div ng-if="showSearch"> <ion-header-bar class="bar bar-subheader item-input-inset"> - <label class="item-input-wrapper"> <i class="icon ion-ios7-search placeholder-icon"></i> <input type="search" placeholder="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off"> </label> </ion-header-bar> </div> - - - <!-- collection repeat forces js scrolling, thing to remember --> - - <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll> + <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll> <!-- needed for header-shrink so first item doesn't go below header--> - <!-- <div style="height: 64px;"></div>--> + <!-- <div style="height: 64px;"></div>--> <!-- lets make sure the events list is not empty as collection repeat needs height --> - <div ng-if="!eventsBeingLoaded"> - <ion-list show-delete="eventList.showDelete"> - <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}" > - - + <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}"> <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> <i class="ion-calendar"></i> {{prettifyTime(event.Event.StartTime)}} {{tzAbbr}} </span> - - <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;"> <i class="ion-arrow-right-b"></i> {{event.Event.humanizeTime}} <span ng-if="!event.Event.EndTime">(<span translate="kRecordingProgress"></span>)</span> </span> - - - - <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> <i class="ion-clock"></i> {{prettifyDate(event.Event.StartTime)}} {{tzAbbr}} </span> - - - - - <div class="row"> <div class="col col-left"> <!-- this ngswitch displays different icons depending on the cause of the event --> - <div ng-switch on="event.Event.Cause"> <div ng-switch-when="Motion"> - <i class="ion-android-walk" style="float:left; font-size:200%;"></i> - - <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> - + <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> <br/> </div> <div ng-switch-when="Signal"> <i class="ion-wifi" style="float:left; font-size:200%;"></i> - <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> - <br/> </div> <div ng-switch-default> @@ -87,7 +54,6 @@ </div> <!-- ng switch --> <!-- {{event.Event.Cause}} --> - <br/> <span style="font-size:80%; color:rgb(110,110,110)"> {{event.Event.Length}}s @@ -99,14 +65,12 @@ <i class="ion-ios-videocam-outline"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}}) </div> - <i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}} </div> </div> <!--row--> - <div class="row" style="font-size:80%; color:rgb(110,110,110)"> <div class="item-text-wrap"><i class="ion-calendar"></i> {{prettify(event.Event.StartTime)}} {{tzAbbr}} <br/> @@ -114,178 +78,113 @@ <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}--> </div> </div> - <span style="float:right"> <div ng-if="event.Event.EndTime || 1"> <button class="button button-small button-outline icon icon-left ion-stats-bars" ng-click="closeIfOpen(event);analyzeEvent(event)" > <span translate="kAnalyze"></span> - </button> - - <button class="button button-outline button-small icon icon-left ion-ios-eye" - ng-click="toggleGroupScrub(event,$index,event.Event.Frames)" > <span translate="kScrub"></span> - </button> - - <button ng-if="event.Event.AlarmFrames > 0" class="button button-outline button-small icon icon-left ion-ios-bell" - ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)" > <span translate="kAlarms"></span> - </button> - - - <button class="button button-outline button-small icon icon-left ion-ios-eye" - ng-click="closeIfOpen(event);openModal(event)" > <span translate="kFootage"></span> - </button> - </div> - - - </span> - - - <!-- this is the event scrub/alarm frames area --> - <div ng-if="isGroupShown(event)"> - - - - <div ng-if="groupType=='alarms'"> - <br/><br/> - - <div style="height:190px;"> - <p> - <!--scroll <i class="icon ion-arrow-left-c"></i> + </button> + <button class="button button-outline button-small icon icon-left ion-ios-eye" ng-click="toggleGroupScrub(event,$index,event.Event.Frames)"> <span translate="kScrub"></span> + </button> + <button ng-if="event.Event.AlarmFrames > 0" class="button button-outline button-small icon icon-left ion-ios-bell" ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)"> <span translate="kAlarms"></span> + </button> + <button class="button button-outline button-small icon icon-left ion-ios-eye" ng-click="closeIfOpen(event);openModal(event)"> <span translate="kFootage"></span> + </button> + </div> + </span> + <!-- this is the event scrub/alarm frames area --> + <div ng-if="isGroupShown(event)"> + <div ng-if="groupType=='alarms'"> + <br/> + <br/> + <div style="height:190px;"> + <p> + <!--scroll <i class="icon ion-arrow-left-c"></i> <i class="icon ion-arrow-right-c"></i>--> - - <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-outline"> - <span translate="kType"></span>:{{typeOfFrames}} - </button> - </p> - - - <ion-scroll direction="x" overflow-scroll="false"> - - <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames"> + <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-outline"> + <span translate="kType"></span>:{{typeOfFrames}} + </button> + </p> + <ion-scroll direction="x" overflow-scroll="false"> + <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames"> <figure class = "animated slideInLeft" style="display:inline-block"> <!--{{event.Event.baseURL}} p:{{event.Event.imageMode}}--> - <figcaption class="smallnote"><span translate="kFrame"></span>:{{alarm.frameid}},<span translate="kScore"></span>:{{alarm.score}}, <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption> - <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> - - <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> - - - - - </figure> - - </span> - - </ion-scroll> - </div> - </div> - <div ng-if="groupType=='scrub'"> - <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false"> - - - <br/> - <br/> - <br/> - <div style="width:90%"> - <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" /> - </div> - - <br/> - - - - <p>{{mycarousel.index+1}}/{{event.Event.Frames}} <span translate="kType"></span>: {{FrameArray[mycarousel.index].Type}}</p> - - <div style="height:190px"> - - - <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}"> - <li ng-repeat="slide in slides"> - - - <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> - - <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}" image-spinner-loader="lines" height="190px" ;/> - - - - <br/> - - - </li> - </ul> - </div> - </div> - <!-- no DefaultVideo --> - - - <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true"> - - <br/> - <br/> + <figcaption class="smallnote"><span translate="kFrame"></span>:{{alarm.frameid}},<span translate="kScore"></span>:{{alarm.score}}, <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption> + <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> + <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> + </figure> + </span> + </ion-scroll> + </div> + </div> + <div ng-if="groupType=='scrub'"> + <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false"> + <br/> + <br/> + <br/> + <div style="width:90%"> + <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" /> + </div> + <br/> + <p>{{mycarousel.index+1}}/{{event.Event.Frames}} <span translate="kType"></span>: {{FrameArray[mycarousel.index].Type}}</p> + <div style="height:190px"> + <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}"> + <li ng-repeat="slide in slides"> + <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> + <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}" image-spinner-loader="lines" height="190px" ;/> <br/> - - - <div class="videogular-container"> - <videogular vg-theme="event.Event.video.config.theme" - vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true"> - <vg-overlay-play></vg-overlay-play> - <vg-controls> - <vg-play-pause-button></vg-play-pause-button> - <vg-scrub-bar> - <vg-scrub-bar-current-time></vg-scrub-bar-current-time> - </vg-scrub-bar> - <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> - <vg-fullscreen-button></vg-fullscreen-button> - <vg-volume> - <vg-mute-button></vg-mute-button> - </vg-volume> - </vg-controls> - - <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false"> - </vg-media> - - - </videogular> - </div> - - </div> - <!-- DefaultVideo --> - </div> <!-- type = scrub --> + </li> + </ul> + </div> + </div> + <!-- no DefaultVideo --> + <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true"> + <br/> + <br/> + <br/> + <div class="videogular-container"> + <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true"> + <vg-overlay-play></vg-overlay-play> + <vg-controls> + <vg-play-pause-button></vg-play-pause-button> + <vg-scrub-bar> + <vg-scrub-bar-current-time></vg-scrub-bar-current-time> + </vg-scrub-bar> + <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> + <vg-fullscreen-button></vg-fullscreen-button> + <vg-volume> + <vg-mute-button></vg-mute-button> + </vg-volume> + </vg-controls> + <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false"> + </vg-media> + </videogular> </div> - <!-- isGroupShown --> - - <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)"> - </ion-delete-button> - - - - </ion-item> - </ion-list> + </div> + <!-- DefaultVideo --> + </div> + <!-- type = scrub --> + </div> + <!-- isGroupShown --> + <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)"> + </ion-delete-button> + </ion-item> + </ion-list> </div> - <ion-item ng-show="!events.length"> <span translate="kNoEvents"></span> </ion-item> - <div ng-if="!eventsBeingLoaded"> <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%"> </ion-infinite-scroll> </div> </ion-content> - - - <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();"><span translate="kFilterOn"></span></div> - - <div class="bwmode" ng-if="$root.runMode=='lowbw'"> - <span translate="kLowBWDisplay"></span> - </div> - - + <div class="bwmode" ng-if="$root.runMode=='lowbw'"> + <span translate="kLowBWDisplay"></span> + </div> <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand"> - <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0"> <i class="icon ion-chevron-up"></i> </ion-pull-up-handle> @@ -293,74 +192,56 @@ <h1 class="title" ion-pull-up-trigger><span translate="kLatestEvents"></span></h1> </ion-pull-up-bar> <ion-pull-up-content scroll="true"> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1HourSummary"></span></div> <div ng-repeat="hour in hours|filter:{ monitor: '!'+'(Unknown)'}" id="hour-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'hour',hour.mid);"> <b>{{hour.monitor}}</b> {{hour.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1DaySummary"></span></div> <div ng-repeat="day in days|filter:{ monitor: '!'+'(Unknown)'}" id="day-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'day',day.mid);"> <b>{{day.monitor}}</b> {{day.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - - <div class="list list-inset"> <div class="item item-divider"><span translate="k1WeekSummary"></span></div> <div ng-repeat="week in weeks|filter:{ monitor: '!'+'(Unknown)'}" id="week-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'week',week.mid);"> <b>{{week.monitor}}</b> {{week.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1MonthSummary"></span></div> <div ng-repeat="month in months|filter:{ monitor: '!'+'(Unknown)'}" id="month-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'months',month.mid);"> <b>{{month.monitor}}</b> {{month.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <br/> <br/> - - </ion-pull-up-content> </ion-pull-up-footer> - - </ion-view> diff --git a/www/templates/eventserversettings.html b/www/templates/eventserversettings.html index 7612a584..393eb61b 100644 --- a/www/templates/eventserversettings.html +++ b/www/templates/eventserversettings.html @@ -1,62 +1,41 @@ <ion-view cache-view="false"> - <ion-nav-title>{{'kEventServer' | translate}}/{{getTitle();}} </ion-nav-title> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> </ion-nav-buttons> - - <ion-nav-buttons side="right"> <button class="button button-clear" ng-click="saveItems()">{{'kSave'|translate}}</button> </ion-nav-buttons> - - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll > - - <div class="list list-inset"> - {{'kEventServerConfig1' | translate }} + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <div class="list list-inset"> + {{'kEventServerConfig1' | translate }} </div> <ion-checkbox ng-model="loginData.isUseEventServer" ng-checked="loginData.isUseEventServer">{{'kUseEventServer' | translate}}</ion-checkbox> - - - <ion-item ng-href="" ng-click="selectScreen()"> + <ion-item ng-href="" ng-click="selectScreen()"> {{'kOnTapNavigate' | translate}}: {{defScreen}} </ion-item> - <label class="item item-input item-floating-label" ng-if="loginData.isUseEventServer"> <span class="input-label">{{'kEventServer' | translate}}</span> <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="Event notification url" ng-model="loginData.eventServer"> - </label> - - <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.disablePush" ng-checked="loginData.disablePush" toggle-class="toggle-calm" class="item-text-wrap">{{'kOnlyUseWebSocket'| translate }}<br/><p>{{'kDisablePush' | translate }}</p></ion-toggle> - - - <!-- vibrate app setting is not av. on iOS--> - <ion-toggle ng-if="loginData.isUseEventServer && $root.platformOS !='ios'" ng-model="loginData.vibrateOnPush" ng-checked="loginData.vibrateOnPush" toggle-class="toggle-calm" >{{'kVibrateOnPush'| translate }}</ion-toggle> - - - <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.soundOnPush" ng-checked="loginData.soundOnPush" toggle-class="toggle-calm" class="item-text-wrap" >{{'kSoundOnPush'| translate }}</ion-toggle> - + <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.disablePush" ng-checked="loginData.disablePush" toggle-class="toggle-calm" class="item-text-wrap">{{'kOnlyUseWebSocket'| translate }} + <br/> + <p>{{'kDisablePush' | translate }}</p> + </ion-toggle> + <!-- vibrate app setting is not av. on iOS--> + <ion-toggle ng-if="loginData.isUseEventServer && $root.platformOS !='ios'" ng-model="loginData.vibrateOnPush" ng-checked="loginData.vibrateOnPush" toggle-class="toggle-calm">{{'kVibrateOnPush'| translate }}</ion-toggle> + <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.soundOnPush" ng-checked="loginData.soundOnPush" toggle-class="toggle-calm" class="item-text-wrap">{{'kSoundOnPush'| translate }}</ion-toggle> <!-- <ion-toggle ng-model="loginData.defaultPushSound" toggle-class="toggle-calm" class="item-text-wrap" ng-checked="{{loginData.defaultPushSound}}">use system sound<p>please save and restart app</p></ion-toggle> --> <ion-list> <div ng-repeat="monitor in monitors"> - - <ion-item class="custom-list" - ng-click="toggleGroup(monitor)" - ng-class="{active: isGroupShown(monitor)}"> - <i class="icon" ng-class="isGroupShown(monitor) ? 'ion-minus' : 'ion-plus'"></i> - - - {{monitor.Monitor.Name}} - </ion-item> - - <ion-item class="item-accordion" - ng-show="isGroupShown(monitor)"> - <span class="item-checkbox"> + <ion-item class="custom-list" ng-click="toggleGroup(monitor)" ng-class="{active: isGroupShown(monitor)}"> + <i class="icon" ng-class="isGroupShown(monitor) ? 'ion-minus' : 'ion-plus'"></i> {{monitor.Monitor.Name}} + </ion-item> + <ion-item class="item-accordion" ng-show="isGroupShown(monitor)"> + <span class="item-checkbox"> {{'kReportEvents' | translate }} <label class="checkbox"> @@ -64,30 +43,15 @@ </label> </span> </ion-item> - - <ion-item class="item-accordion" - ng-show="isGroupShown(monitor)"> - <div class="item-input-inset" > - <label class="item-input-wrapper" > - <input type="tel" placeholder="sec." ng-model="monitor.Monitor.reportingInterval"> - </label> - {{'kMinimumIntervals' | translate}} - - - </div> + <ion-item class="item-accordion" ng-show="isGroupShown(monitor)"> + <div class="item-input-inset"> + <label class="item-input-wrapper"> + <input type="tel" placeholder="sec." ng-model="monitor.Monitor.reportingInterval"> + </label> + {{'kMinimumIntervals' | translate}} + </div> </ion-item> - - </div> - </ion-list> - - - - - </ion-content> </ion-view> - - - diff --git a/www/templates/first-use.html b/www/templates/first-use.html index 5599f982..884fb0c9 100644 --- a/www/templates/first-use.html +++ b/www/templates/first-use.html @@ -7,8 +7,6 @@ <div id="responsive-image"> <img src="img/authlogo.png"> </div> - - <br/> <span style="color:white"> <h2 style="color:white" >Hi There!</h2> @@ -21,15 +19,11 @@ </span> <br/> <div id="firstuse"> - - - <button class="button icon icon-left ion-wand button-stable animated bounceInUp" ng-click="goToWizard()"> + <button class="button icon icon-left ion-wand button-stable animated bounceInUp" ng-click="goToWizard()"> {{'kWizard' | translate}} </button> - - <button class="button icon icon-left ion-university button-stable animated bounceInUp" ng-click="goToLogin()"> + <button class="button icon icon-left ion-university button-stable animated bounceInUp" ng-click="goToLogin()"> {{'kExpert' | translate }} - </button> <br/> <center> @@ -37,12 +31,8 @@ {{'kLanguage' | translate}} </button> </center> - </div> </center> - - </div> - </ion-content> -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/help.html b/www/templates/help.html index fffdf2d1..d14085be 100644 --- a/www/templates/help.html +++ b/www/templates/help.html @@ -1,21 +1,12 @@ <ion-view cache-view="false" view-title="Help"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> - </ion-nav-buttons> - - - <ion-content class="padding" scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - + <ion-content class="padding" scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> <p><small>{{$root.appName}} v{{zmAppVersion}}</small></p> <div class="list"> - - <div id="insertHelp"></div> + <div id="insertHelp"></div> </div> - </ion-content> - -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/important_message.html b/www/templates/important_message.html index bd3274f5..f0fd245e 100644 --- a/www/templates/important_message.html +++ b/www/templates/important_message.html @@ -1,7 +1,6 @@ <ion-view view-title="{{$root.appName}}" hide-nav-bar="false" hide-back-button="false" cache-view="false"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - </ion-nav-buttons> <ion-content class="pin-background"> <div style="margin-left:20px; margin-right:20px"> @@ -11,8 +10,6 @@ <div id="responsive-image"> <img src="img/authlogo.png"> </div> - - <br/> <span style="color:white"> <h2 style="color:white" class="animated bounce">{{'kImpMsg1' | translate}}</h2> @@ -32,10 +29,6 @@ </span> </center> <br/> - - - </div> - </ion-content> -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/log.html b/www/templates/log.html index e53f00aa..5efed72f 100644 --- a/www/templates/log.html +++ b/www/templates/log.html @@ -1,29 +1,20 @@ <ion-view view-title="{{'kLogs' | translate}}"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> - - - </ion-nav-buttons> - <ion-nav-buttons side="right"> <a class="button button-icon icon ion-trash-a" ng-href="" ng-click="deleteLogs()"></a> - <div ng-if="$root.platformOS!='desktop'"> - <a style="" class="button button-icon icon ion-email" - ng-href="" ng-click="sendEmail(log.logString)" > </a> + <a style="" class="button button-icon icon ion-email" ng-href="" ng-click="sendEmail(log.logString)"> </a> </div> <div ng-if="$root.platformOS=='desktop'"> - <a style="" class="button button-icon icon ion-android-download" - ng-href="" ng-click="sendEmail(log.logString)" > </a> + <a style="" class="button button-icon icon ion-android-download" ng-href="" ng-click="sendEmail(log.logString)"> </a> </div> </ion-nav-buttons> - - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <b>{{$root.appName}} {{'kVersion'|translate}}: {{zmAppVersion}}</b><br/> + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <b>{{$root.appName}} {{'kVersion'|translate}}: {{zmAppVersion}}</b> + <br/> <!-- don't indent here -- its a pre--> <pre>{{log.logString}}</pre> </ion-content> diff --git a/www/templates/login.html b/www/templates/login.html index f05781f9..05ada193 100644 --- a/www/templates/login.html +++ b/www/templates/login.html @@ -1,29 +1,19 @@ <ion-view view-title="{{'kSettings' | translate}}" cache-view="false"> - <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> </ion-nav-buttons> - <ion-nav-buttons side="right"> <button class="button button-clear" ng-click="saveItems()">Save</button> </ion-nav-buttons> - - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll > - + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> <div class="item item-text-wrap 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-mode nl="loginData.enableLowBandwidth" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kLowBandwidth'|translate}}</span> </ion-toggle> @@ -32,9 +22,6 @@ <ion-toggle ng-model="loginData.autoSwitchBandwidth" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kAutoSwitchBW'|translate}}</span> </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> @@ -43,81 +30,56 @@ <p ng-if="$root.platformOS=='android'" style="font-size:0.8em; color:gray">{{'kDisableSamsung' | translate}}</p> <div class="item item-text-wrap"> <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> - <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> <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)"> </label> - <!--<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>--> - - <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"> - </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"> </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> - <a class="item item-icon-right" href="" ng-click="eventServerSettings()"> <i class="icon ion-ios-arrow-right"> </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"><span class="item-text-wrap">{{'kPassword' | translate}} {{'kProtect'|translate}}</span></ion-toggle> </label> </div> - <label> <ion-toggle ng-model="loginData.useSSL" ng-checked="{{loginData.useSSL}}" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kUseSSL' | translate}}</span></ion-toggle> </label> - <div ng-if="$root.platformOS != 'desktop'"> <label> - <ion-toggle ng-model="loginData.keepAwake" ng-checked="{{loginData.keepAwake}}" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kAwake1'|translate}} <p>{{'kAwake2'| translate}}</p></span> </ion-toggle> </label> </div> </div> - - </ion-content> -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/lowversion.html b/www/templates/lowversion.html index d9a50986..d6b9cb7e 100644 --- a/www/templates/lowversion.html +++ b/www/templates/lowversion.html @@ -1,5 +1,4 @@ <ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false"> - <ion-content class="pin-background"> <div style="margin-left:20px; margin-right:20px"> <center> @@ -8,8 +7,6 @@ <div id="responsive-image"> <img src="img/authlogo.png"> </div> - - <br/> <span style="color:white"> <h2 style="color:white" class="animated bounce">{{'kZMUpgradeNeeded' | translate}}</h2> @@ -22,10 +19,7 @@ </span> <br/> - - </center> </div> - </ion-content> -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 1cfbfac9..931d9c33 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -1,77 +1,46 @@ <div ng-controller="MonitorModalCtrl" ng-cloak> - - <ion-modal-view cache-view="false" style="background-color:#444444" > - <ion-content on-double-tap="closeModal();" > - - <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false" > + <ion-modal-view cache-view="false" style="background-color:#444444"> + <ion-content on-double-tap="closeModal();"> + <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false"> <!-- android needs this 100vh - otherwise max- does not work --> <!-- --> <div id="monitorimage" style="height: 100vh;" class="main"> - - - <div ng-if="$root.authSession!='undefined'"> - - <div ng-if="!animationInProgress && !isBackground() && connKey"> <!--<span style="color:white">{{currentStreamMode}}</span>--> - - <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" /> - - - - - + <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" /> </div> <div ng-if="animationInProgress || isBackground()"> <img style="width:100vw; height:100vh" ng-src="img/pausevideo.png" class="object-fit_contain" /> </div> - </div> <div ng-if="$root.authSession=='undefined'"> <img id="singlemonitor" ng-src="img/pausevideo.png" style="width:100vw; height:100vh; display:block;" class="object-fit_contain" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" /> </div> </div> </ion-scroll> - </ion-content> - - <div ng-show="isControllable=='1' && showPTZ"> - - - <div class="ptzcentered"> <circular options="ptzRadialMenuOptions"> </circular> </div> - <div ng-if="presetOn" class="ptzpresetbuttons animated fadeInDown" id="presetlist"> <div ng-repeat="preset in ptzPresets track by $index"> <button class="button {{preset.icon}} button-small {{preset.style}}" style="float:left;margin-right:10px;margin-bottom:10px;" ng-click="controlPTZ(monitorId, preset.cmd);">{{preset.name}}</button> </div> </div> - - <div class="ptzcenteredbotbutton"> <div ng-if="canZoom"> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomInCommand);">+</a> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomOutCommand);">-</a> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomStopCommand);">x</a> - </div> <br/> <a class="button button-small icon ion-stop button-assertive" href="" ng-click="controlPTZ(monitorId, ptzStopCommand);"></a> - - <a class="button button-small button-royal" href="" ng-click="togglePresets();">{{controlToggle}}</a> </div> - </div> - - - - </ion-modal-view> <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> <button mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFitScreen' | translate):('kFillScreen' | translate)}}" ng-click="scaleImage();"> @@ -80,9 +49,7 @@ </button> <button mfb-button icon="ion-arrow-expand" label="{{'kControl'| translate}}" ng-click="togglePTZ();"> </button> - </nav> - <nav mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click"> <button mfb-button icon="ion-android-arrow-back" label="{{'kPrevMonitor' | translate}} " ng-click="onTap(monitorId,-1);"> </button> @@ -90,58 +57,35 @@ </button> <button mfb-button icon="ion-close" label="{{'kExitLiveView' | translate}}" ng-click="closeModal();"> </button> - </nav> - - - - - <div id="flyoutmenu" style="position:absolute;bottom:80px;left:10px"> - <ul> - - <li> - <a href="" ng-click="saveImageToPhoneWithPerms(monitorId)"> <i class="icon ion-ios-camera"></i></a> - </li> - - <li ng-if="$root.platformOS == 'desktop'"> - <a href="" ng-click="zoomImage(1)"><i class="ion-plus-round"></i></a> - </li> - <li ng-if="$root.platformOS == 'desktop'"> - <a href="" ng-click="zoomImage(-1)"><i class="ion-minus-round"></i></a> - </li> - - <li> - <a href="" ng-click="enableAlarm(monitorId,true)"> <i class="icon ion-flash"></i></a> - </li> - <li> - <a href="" ng-click="enableAlarm(monitorId,false)"> <i class="icon ion-flash-off"></i></a> - - - </li> - <li> - <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> - - - </li> - - - <!--<li> + <div id="flyoutmenu" style="position:absolute;bottom:80px;left:10px"> + <ul> + <li> + <a href="" ng-click="saveImageToPhoneWithPerms(monitorId)"> <i class="icon ion-ios-camera"></i></a> + </li> + <li ng-if="$root.platformOS == 'desktop'"> + <a href="" ng-click="zoomImage(1)"><i class="ion-plus-round"></i></a> + </li> + <li ng-if="$root.platformOS == 'desktop'"> + <a href="" ng-click="zoomImage(-1)"><i class="ion-minus-round"></i></a> + </li> + <li> + <a href="" ng-click="enableAlarm(monitorId,true)"> <i class="icon ion-flash"></i></a> + </li> + <li> + <a href="" ng-click="enableAlarm(monitorId,false)"> <i class="icon ion-flash-off"></i></a> + </li> + <li> + <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> + </li> + <!--<li> <a href="" ng-click="cast(monitorId, monitor)"> <i class="icon ion-android-funnel"></i></a> </li>--> - - - - - - <li ng-if="$root.isAlarm"> - <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a> - </li> - - - </ul> -</div> - + <li ng-if="$root.isAlarm"> + <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a> + </li> + </ul> + </div> <div class="monitor-modal-text">{{monitorName}} <span style="{{stateColor()}}">{{monStatus}} </span></div> - </div> diff --git a/www/templates/monitors.html b/www/templates/monitors.html index d38e8f65..cd9e8e8e 100644 --- a/www/templates/monitors.html +++ b/www/templates/monitors.html @@ -1,82 +1,62 @@ <ion-view view-title="{{'kMonitors' | translate}}" cache-view="false"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"> </button> - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> - </ion-nav-buttons> - - - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll > - <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> </ion-refresher> - <div style="float:right;margin-top:3px;margin-right:8px;"> - <a class="button button-small icon icon-left icon ion-ios-world-outline" - href="" ng-click="changeConfig('All', '','1','Monitor');">{{'kGlobalConfiguration' | translate}}</a> - </div><br/> - <div class="list card" ng-repeat="monitor in monitors"> - <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}"> - <div ng-if="monitor.Monitor.Enabled == '1'"> - <div class='item'> - - <span class="item-icon-left"> + <div style="float:right;margin-top:3px;margin-right:8px;"> + <a class="button button-small icon icon-left icon ion-ios-world-outline" href="" ng-click="changeConfig('All', '','1','Monitor');">{{'kGlobalConfiguration' | translate}}</a> + </div> + <br/> + <div class="list card" ng-repeat="monitor in monitors"> + <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}"> + <div ng-if="monitor.Monitor.Enabled == '1'"> + <div class='item'> + <span class="item-icon-left"> <div class="icon"> - <span class="ion-ios-videocam-outline"></span> - - - <span ng-class="{'ion-eye':monitor.Monitor.listDisplay=='show','ion-eye-disabled':monitor.Monitor.listDisplay!='show'}"> </span> - </div> - - - <b>{{monitor.Monitor.Name}}</b> - </span> - - - <span class="item-icon-right"> + <span class="ion-ios-videocam-outline"></span> + <span ng-class="{'ion-eye':monitor.Monitor.listDisplay=='show','ion-eye-disabled':monitor.Monitor.listDisplay!='show'}"> </span> + </div> + + <b>{{monitor.Monitor.Name}}</b> + </span> + <span class="item-icon-right"> <i class="icon {{monitor.Monitor.char}}" style="color:{{monitor.Monitor.color}};"></i> </span> - - <!-- <i ng-class="{'icon ion-eye':monitor.Monitor.listDisplay=='show','icon ion-eye-disabled':monitor.Monitor.listDisplay!='show'}"> </i>--> - - - </div> - </div> - - <div ng-if="monitor.Monitor.Enabled != '1'"> - <span class='item item-icon-left item-icon-right'> + <!-- <i ng-class="{'icon ion-eye':monitor.Monitor.listDisplay=='show','icon ion-eye-disabled':monitor.Monitor.listDisplay!='show'}"> </i>--> + </div> + </div> + <div ng-if="monitor.Monitor.Enabled != '1'"> + <span class='item item-icon-left item-icon-right'> <i class="icon ion-ios-videocam-outline"></i> <b>{{monitor.Monitor.Name}}</b> <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i> </span> - </div> - - - <p>{{'kMode' | translate}} :{{monitor.Monitor.Function}}<br/> - {{'kResolution' | translate}}: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}<br/> - {{'kMaxFPS' | translate}}: {{monitor.Monitor.MaxFPS}} - <br/> {{'kAlarmMaxFPS' | translate}}:{{monitor.Monitor.AlarmMaxFPS}} - <br/> {{'kAlarmFrameCount' |translate}}: {{monitor.Monitor.AlarmFrameCount}} - <br/> {{'kStatus' | translate}}: {{monitor.Monitor.isRunningText}} - <br/> {{'kId' | translate}}: {{monitor.Monitor.Id}} - <br/> {{'kEventRecording' | translate}}: {{(monitor.Monitor.VideoWriter>0?'kVideo':'kImages') | translate}} - <br/> - <br/> - </p> - - <div style="float:right;"> - <a class="button button-small icon icon-left icon ion-gear-a" - href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">{{'kConfiguration' | translate}}</a> - <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}/false">{{'kEventsCap'|translate}}</a> - <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey, monitor)">{{'kLiveView' | translate}}</a> - </div> - </div> </div> - + <p>{{'kMode' | translate}} :{{monitor.Monitor.Function}} + <br/> {{'kResolution' | translate}}: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}} + <br/> {{'kMaxFPS' | translate}}: {{monitor.Monitor.MaxFPS}} + <br/> {{'kAlarmMaxFPS' | translate}}:{{monitor.Monitor.AlarmMaxFPS}} + <br/> {{'kAlarmFrameCount' |translate}}: {{monitor.Monitor.AlarmFrameCount}} + <br/> {{'kStatus' | translate}}: {{monitor.Monitor.isRunningText}} + <br/> {{'kId' | translate}}: {{monitor.Monitor.Id}} + <br/> {{'kEventRecording' | translate}}: {{(monitor.Monitor.VideoWriter>0?'kVideo':'kImages') | translate}} + <br/> + <br/> + </p> + <div style="float:right;"> + <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">{{'kConfiguration' | translate}}</a> + <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}/false">{{'kEventsCap'|translate}}</a> + <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey, monitor)">{{'kLiveView' | translate}}</a> + </div> + </div> + </div> <ion-item ng-show="!monitors.length"> - {{'kNoMonitors' | translate}} + {{'kNoMonitors' | translate}} </ion-item> </ion-content> </ion-view> diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html index 94659e93..da7b5974 100644 --- a/www/templates/montage-history.html +++ b/www/templates/montage-history.html @@ -1,24 +1,23 @@ <ion-view view-title="{{'kEventMontage' | 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-arrow-move" ng-click="dragToggle();"> </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-icon button-clear ion-loop" ng-click="resetSizes();"> </button> - <button class="button button-icon button-clear ion-plus-round" ng-click="sliderChanged(1);"> </button> - <button class="button button-icon button-clear ion-minus-round" ng-click="sliderChanged(-1);"> </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-content scroll-sista has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <div class="timeline_text"> {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}}) - - <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div> - </div> - <div class="grid" id="mygrid"> - <div class="grid-sizer grid-item-10"></div> - <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng- --> - <span ng-repeat="monitor in MontageMonitors | onlyEnabledAndEventHas |limitTo: currentLimit"> + <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-move" ng-click="dragToggle();"> </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-icon button-clear ion-loop" ng-click="resetSizes();"> </button> + <button class="button button-icon button-clear ion-plus-round" ng-click="sliderChanged(1);"> </button> + <button class="button button-icon button-clear ion-minus-round" ng-click="sliderChanged(-1);"> </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-content scroll-sista has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <div class="timeline_text"> {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}}) + <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div> + </div> + <div class="grid" id="mygrid"> + <div class="grid-sizer grid-item-10"></div> + <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng- --> + <span ng-repeat="monitor in MontageMonitors | onlyEnabledAndEventHas |limitTo: currentLimit"> <div ng-if="$root.authSession!='undefined'"> <div ng-if = "monitor.Monitor.eventUrl == 'img/noevent.png' "> <!-- make sure we don't use id here @@ -53,94 +52,88 @@ <i class="ion-pause"></i> </span> {{monitor.Monitor.Name}} - - - <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}] - - <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}} ({{humanizeTime(monitor.Monitor.eventUrlTime)}}) - - </div> - </figcaption> - </figure> - <!-- wait for packery otherwise we get large ranges --> - <div ng-show="packeryDone"> - <div class="range" style="position:absolute;top:5%;width:95%;z-index:999"> - <input on-release="seek(monitor.Monitor.Id,monitor.Monitor.sliderProgress.progress )" type="range" min="0" max="{{monitor.Monitor.eventDuration}}" ng-model="monitor.Monitor.sliderProgress.progress"> - </div> - <div id="history_canvas_video"> - <canvas style="padding-left:23px; + <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}] + <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}} ({{humanizeTime(monitor.Monitor.eventUrlTime)}}) + </div> + </figcaption> + </figure> + <!-- wait for packery otherwise we get large ranges --> + <div ng-show="packeryDone"> + <div class="range" style="position:absolute;top:5%;width:95%;z-index:999"> + <input on-release="seek(monitor.Monitor.Id,monitor.Monitor.sliderProgress.progress )" type="range" min="0" max="{{monitor.Monitor.eventDuration}}" ng-model="monitor.Monitor.sliderProgress.progress"> + </div> + <div id="history_canvas_video"> + <canvas style="padding-left:23px; padding-right:23px;z-index:998" id="eventchart-{{monitor.Monitor.Id}}" width="auto" height="20"></canvas> - </div> - </div> - <div ng-if= -"monitor.Monitor.seek" style="position:absolute;top:0px; left: 0px; width:100%;height:100%; background-color:rgba(0,0,0,0.3); z-index:99999"><div style="position:relative;top:50%;text-align:center;color:white;background-color:rgba(0,0,0,0.5);">{{'kPleaseWait' | translate}}</div></div> - </div> - </div> - </div> - <!-- valid auth session &!background --> - <!--<div ng-if="!$root.authSession=='undefined' || isBackground()"> + </div> + </div> + <div ng-if="monitor.Monitor.seek" style="position:absolute;top:0px; left: 0px; width:100%;height:100%; background-color:rgba(0,0,0,0.3); z-index:99999"> + <div style="position:relative;top:50%;text-align:center;color:white;background-color:rgba(0,0,0,0.5);">{{'kPleaseWait' | translate}}</div> + </div> + </div> + </div> + </div> + <!-- valid auth session &!background --> + <!--<div ng-if="!$root.authSession=='undefined' || isBackground()"> <img image-spinner-src="img/pausevideo.png" /> </div>--> - </span> - </div> - <ion-item ng-show="!MontageMonitors.length"> {{'kNoMonitors' | translate }} </ion-item> - </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"> - <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)"></button> - <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)"></button> - <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"></button> - <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()"></button> - </nav> - <span class="modal-alarm-badge"> + </span> + </div> + <ion-item ng-show="!MontageMonitors.length"> {{'kNoMonitors' | translate }} </ion-item> + </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"> + <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)"></button> + <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)"></button> + <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"></button> + <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()"></button> + </nav> + <span class="modal-alarm-badge"> <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon ion-ios-bell notification-badge button-assertive" ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a> </span> - </div> - <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-minimize="footerCollapse()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand"> - <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0"> - <i class="icon ion-chevron-up"></i> - </ion-pull-up-handle> - <ion-pull-up-bar> - <h1 class="title" ion-pull-up-trigger>{{'kEventMontage' | translate}}</h1> - </ion-pull-up-bar> - <ion-pull-up-content scroll="true"> - <div class="list list-inset"> - <div class="item item-divider">{{'kTimeline' | translate}} ({{getLocalTZ()}})</div> - <div class="item item-input-inset"> {{'kFrom'|translate}}: - - <div class="row"> - <div class="col col-50"> - <label class="item-input-wrapper"> - <input ng-change="hrsChanged()" type="tel" placeholder="hours" ng-model="datetimeValueFrom.hrs"> - </label> - </div> - <div class="col col-50"> + </div> + <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-minimize="footerCollapse()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand"> + <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0"> + <i class="icon ion-chevron-up"></i> + </ion-pull-up-handle> + <ion-pull-up-bar> + <h1 class="title" ion-pull-up-trigger>{{'kEventMontage' | translate}}</h1> + </ion-pull-up-bar> + <ion-pull-up-content scroll="true"> + <div class="list list-inset"> + <div class="item item-divider">{{'kTimeline' | translate}} ({{getLocalTZ()}})</div> + <div class="item item-input-inset"> {{'kFrom'|translate}}: + <div class="row"> + <div class="col col-50"> + <label class="item-input-wrapper"> + <input ng-change="hrsChanged()" type="tel" placeholder="hours" ng-model="datetimeValueFrom.hrs"> + </label> + </div> + <div class="col col-50"> {{'kEventHistHrs' | translate}} </div> - </div> - </div> - <ion-item> - <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()"> - <b>{{'kFrom' | translate }}: </b>{{datetimeValueFrom.value | date: timeFormat}} - - </div> ({{humanizeTime(datetimeValueFrom.value)}}) - - </ion-item> - <div class="row"> - <div class="col col-75"> - <br/> - <div style="width:90%;color:black;"> - <input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate" /> - </div> - <br/> - </div> - <div class="col col-25" style="background-color:#AEA8D3;text-align:center"> {{'kSpeed' | translate }} </div> - </div> - <!--<ion-item><div ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value"><b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}} + </div> + </div> + <ion-item> + <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()"> + <b>{{'kFrom' | translate }}: </b>{{datetimeValueFrom.value | date: timeFormat}} + </div> ({{humanizeTime(datetimeValueFrom.value)}}) + </ion-item> + <div class="row"> + <div class="col col-75"> + <br/> + <div style="width:90%;color:black;"> + <input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate" /> + </div> + <br/> + </div> + <div class="col col-25" style="background-color:#AEA8D3;text-align:center"> {{'kSpeed' | translate }} </div> + </div> + <!--<ion-item><div ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value"><b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}} </div></ion-item>--> - </div> - </ion-pull-up-content> - </ion-pull-up-footer> - </ion-view>
\ No newline at end of file + </div> + </ion-pull-up-content> + </ion-pull-up-footer> +</ion-view> diff --git a/www/templates/montage.html b/www/templates/montage.html index 9d075faf..ceab34ae 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -1,69 +1,42 @@ <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();"> + <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();"> </button> - - <button class="button button-icon button-clear ion-arrow-resize" ng-click="toggleSizeButtons();"> </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"> <span ng-click="toggleTimeType()" class="icon montage-time"> <i ng-class="(iconTimeNow=='server')?'icon-server':'ion-ios-location'"></i> {{timeNow}} </span> - <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();"> </button> - <!-- <button class="button button-icon button-clear ion-monitor" ng-click="cast();"> </button> --> - <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();"> </button> - <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> </button> - - - </ion-nav-buttons> - - <ion-content scroll-sista ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false" > - - - - <span ng-if="!minimal && showSizeButtons"> + <ion-content scroll-sista ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false"> + <span ng-if="!minimal && showSizeButtons"> <!-- this is header --> <span ng-click="sliderChanged(1)" style="float:right;margin-top:0px;padding-top:8px;background-color:#5c6767;color:#fff;font-size:25px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 0px 5px;"> <i class="ion-plus-circled"> </i></span> - - <span ng-click="sliderChanged(-1)" style="float:left;margin-top:0px;padding-top:8px;background-color:#5c6767;color:#fff;font-size:22px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 5px 0px;"> <i class="ion-minus-circled"> </i></span> - <br/><br/> + <span ng-click="sliderChanged(-1)" style="float:left;margin-top:0px;padding-top:8px;background-color:#5c6767;color:#fff;font-size:22px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 5px 0px;"> <i class="ion-minus-circled"> </i></span> + <br/> + <br/> </span> - - - - <!-- now lets draw the montage windows --> <div class="grid" id="mygrid"> <div class="grid-sizer grid-item-10"></div> - - - - <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" + <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.Enabled !='0' ">--> - - <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit" > + <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit"> @@ -117,30 +90,18 @@ </figure> </div> - </span> <!-- ngrepeat --> + </span> + <!-- ngrepeat --> </div> - - - - - - <ion-item style="background-color:#444444; color:#fff;border:none;" ng-show="!MontageMonitors.length"> {{'kNoMonitors' | translate}} </ion-item> - - - </ion-content> - <div class="bwmode" ng-if="$root.runMode=='lowbw'"> - {{ 'kLowBWDisplay' | translate }} - </div> - - + {{ '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"> - <button mfb-button icon="ion-arrow-expand" label="{{'kIncreaseSize' | translate}}" ng-click="sliderChanged(1)"> </button> <button mfb-button icon="ion-arrow-shrink" label="{{'kDecreaseSize' | translate}}" ng-click="sliderChanged(-1)"> @@ -150,14 +111,10 @@ <button mfb-button icon="ion-close" label="{{'kExitFullScreen'| translate}}" ng-click="switchMinimal()"> </button> </nav> - - <span class="modal-alarm-badge"> <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon ion-ios-bell notification-badge button-assertive" ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a> </span> - </div> <br/> - -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/news.html b/www/templates/news.html index f4a87e4f..f715a65c 100644 --- a/www/templates/news.html +++ b/www/templates/news.html @@ -1,17 +1,11 @@ <ion-view view-title="{{'kNews' | translate}}"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> - </ion-nav-buttons> - - - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll > + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> <div class="list"> - - <span ng-repeat = "post in newsItems"> + <span ng-repeat="post in newsItems"> <a class="item item-text-wrap item-icon-left" ng-click="loadPost(post.url, post.date)" href=""> <i ng-class="isUnread(post.date) ? 'icon ion-email-unread': 'icon ion-ios-email-outline'"></i> {{post.title}} @@ -20,14 +14,9 @@ </a> </span> - <div ng-if="!newsItems.length"> <ion-item>{{'kLoading' | translate}}...</ion-item> </div> - - </div> - </ion-content> - </ion-view> diff --git a/www/templates/reorder-modal.html b/www/templates/reorder-modal.html index f58d567c..397d4be7 100644 --- a/www/templates/reorder-modal.html +++ b/www/templates/reorder-modal.html @@ -1,39 +1,20 @@ - - <ion-modal-view cache-view="false" style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;" > - +<ion-modal-view cache-view="false" style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"> <ion-header-bar class="bar-stable"> - - - <h1 class="title"></h1> - <div class="buttons"> - - - <button class="button button-icon icon ion-checkmark" ng-click="saveReorder()"></button> - - <button class="button button-icon icon ion-close" ng-click="cancelReorder()"></button> - - </div> + <h1 class="title"></h1> + <div class="buttons"> + <button class="button button-icon icon ion-checkmark" ng-click="saveReorder()"></button> + <button class="button button-icon icon ion-close" ng-click="cancelReorder()"></button> + </div> </ion-header-bar> - - - <ion-content > - <div class="list"> - <span ng-repeat="item in copyMontage"> + <ion-content> + <div class="list"> + <span ng-repeat="item in copyMontage"> <a class="item item-icon-left" ng-click="toggleHide($index)" href=""> <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> </i> {{item.Monitor.Name}} </a> </span> - </div> - - - </ion-content> - - </ion-modal-view> - - - - - - + </div> + </ion-content> +</ion-modal-view> diff --git a/www/templates/state.html b/www/templates/state.html index bf0cda4a..33df994e 100644 --- a/www/templates/state.html +++ b/www/templates/state.html @@ -1,12 +1,10 @@ <ion-view view-title="{{'kSystemStatus' | translate}}" cache-view="false"> - <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button> </ion-nav-buttons> - <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <ion-refresher pulling-text="{{'kPullToReload' | translate}}..." - spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> + <ion-content scroll-sista delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <ion-refresher pulling-text="{{'kPullToReload' | translate}}..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> <ion-list> <ion-item> <div class="row"> @@ -28,7 +26,6 @@ <i class="ion-arrow-graph-up-right" style="font-size:150%;"></i> </div> <div class="col"> - ZoneMinder {{'kLoad' | translate}}: </div> <div class="col" style="text-align:right;"> @@ -54,20 +51,15 @@ </ion-item> --> <ion-item> - <button class="button button-full {{dangerButtonColor[showDanger?1:0]}}" - ng-click="showDanger=!showDanger"> + <button class="button button-full {{dangerButtonColor[showDanger?1:0]}}" ng-click="showDanger=!showDanger"> <i class="ion-alert-circled" "style:font-size:300%;"></i> {{dangerText[showDanger?1:0]}} </button> - - <div ng-show="showDanger" > + <div ng-show="showDanger"> <div class="row"> <div class="col text-center"> - <a class="button button-small button-outline button-dark " - ng-click="selectCustomState();" href="">{{'kChangeState'|translate}}</a> - <a class="button button-small button-outline button-dark " - ng-click="controlZM('restart');" href="">{{'kRestart' | translate}}</a> - <a class="button button-small button-outline button-dark" - href="" ng-click="controlZM('stop');">{{'kStop' | translate}}</a> + <a class="button button-small button-outline button-dark " ng-click="selectCustomState();" href="">{{'kChangeState'|translate}}</a> + <a class="button button-small button-outline button-dark " ng-click="controlZM('restart');" href="">{{'kRestart' | translate}}</a> + <a class="button button-small button-outline button-dark" href="" ng-click="controlZM('stop');">{{'kStop' | translate}}</a> <a class="button button-small button-outline button-dark" ng-click="controlZM('start');" href="">{{'kStart' | translate}}</a> </div> </div> diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html index b27c749b..afed79f5 100644 --- a/www/templates/timeline-modal.html +++ b/www/templates/timeline-modal.html @@ -1,36 +1,26 @@ - - - <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"--> - <ion-modal-view cache-view="false" > - - <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate"> -<div ng-controller="TimelineModalCtrl" > +<!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"--> +<ion-modal-view cache-view="false"> + <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate"> + <div ng-controller="TimelineModalCtrl"> <br/> <div class="item item-divider">{{mName}} <i class="ion-arrow-right-b"></i> {{'kEvent' | translate}}:{{eid}} ({{humanizeTime}}) - <button class="button icon-left button-small button-positive" style="float:right; opacity:0.7" ng-click="switchType()"> - <i class="ion-shuffle"></i> + <button class="button icon-left button-small button-positive" style="float:right; opacity:0.7" ng-click="switchType()"> + <i class="ion-shuffle"></i> </button> - </div> - - <center> <h5>{{'kEvent' | translate}} {{graphType}} {{'kFrames' | translate}} </h5> + <center> + <h5>{{'kEvent' | translate}} {{graphType}} {{'kFrames' | translate}} </h5> <p>{{'kTimelineMessage' | translate}}</p> - - - {{errorDetails}} + {{errorDetails}} <!--<p>scroll left/right if needed</p>--> - </center> - - <div data-tap-disabled="true"> - <canvas id="tcchart" width="auto" height="70%"></canvas> - </div> - - - <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!dataReady"></ion-spinner> - + </center> + <div data-tap-disabled="true"> + <canvas id="tcchart" width="auto" height="70%"></canvas> + </div> + <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!dataReady"></ion-spinner> <div style="height:190px;"> <!-- <ion-scroll direction="x" class="wide-as-needed">--> - <span ng-repeat="alarm in alarm_images"> + <span ng-repeat="alarm in alarm_images"> <figure style="display:inline-block"> @@ -44,14 +34,8 @@ </figure> </span> - <!--</ion-scroll>--> </div> - </div> - </ion-content> - - </ion-modal-view> - - - - + </div> + </ion-content> +</ion-modal-view> diff --git a/www/templates/timeline-popover.html b/www/templates/timeline-popover.html index b5460f57..beeb482d 100644 --- a/www/templates/timeline-popover.html +++ b/www/templates/timeline-popover.html @@ -1,26 +1,18 @@ <ion-popover-view class="fit"> - <ion-content> - <div class="list" ng-click="popover.hide()"> - + <ion-content> + <div class="list" ng-click="popover.hide()"> <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">{{'kShowAllEvents' | translate}}</a> - <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a> - - + <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a> <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(0);">{{'kMonth' | translate}}</a> - - <a class="item" ng-href="" ng-click=" popover.hide();buttonClicked(1);" > + <a class="item" ng-href="" ng-click=" popover.hide();buttonClicked(1);"> {{'kWeek' | translate}} </a> <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(2);"> {{'kDay' | translate}} </a> - - <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(3);"> + <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(3);"> {{'kCustomRange' | translate}} </a> - - - </div> - </ion-content> - </ion-popover-view> - + </div> + </ion-content> +</ion-popover-view> diff --git a/www/templates/wizard.html b/www/templates/wizard.html index fe69f595..600f4a7f 100644 --- a/www/templates/wizard.html +++ b/www/templates/wizard.html @@ -1,116 +1,85 @@ -<ion-view view-title="{{'kWizard' | translate}}" ng-cloak cache-view="false" > - +<ion-view view-title="{{'kWizard' | translate}}" ng-cloak cache-view="false"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> </ion-nav-buttons> - - <ion-content class="padding" overflow-scroll="false"> - - <wizard on-finish="finishedWizard()"> - - <!-- portal url --> - <wz-step wz-title="1" canexit="exitPortal"> - - <h4><i id="transition-delay" class="animated swing ion-wand" style="font-size:2em"></i> {{'kWelcomeWizard' | translate}}</h4> - <img src="img/wizard.svg" width="100px" style="float:left"/> - <p>{{'kWizConfigPain' | translate}}</p> - - <h4>{{'kWizPortalUrl' | translate}}</h4> - <label class="item item-input"> - <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" placeholder="e.g. http://server/zm" ng-model="wizard.portalurl"> - </label> - <p ng-if="$root.platformOS=='android'" style="font-size:0.8em; color:gray">{{'kDisableSamsung' | translate}}</p> - - <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a> - - - <div class="wizardtip" ng-show="wizard.tipshow"> - <b>{{'kWizTip' | translate}}: </b>{{'kWizPortalTip' | translate}}<br/> - - <img src="img/portalurl.png" width="30%"> - </div> - - <br/> - <button class="button button-small icon icon-right ion-chevron-right" wz-next>{{'kNext' | translate}}</button> - - - </wz-step> - - - <!-- auth mode --> - <wz-step wz-title="2" > - <h4>{{'kWizPortalAuth' | translate}}</h4> - <!--<img src="img/wizard.svg" width="100px" style="float:left"/>--> - <p>{{'kWizPortalText' | translate}}</p> - <ion-toggle ng-change="toggleAuth()" ng-model="wizard.useauth" ng-checked="wizard.useauth" toggle-class="toggle-calm">{{'kWizUseAuth' | translate}}</ion-toggle> - - <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usezmauth" ng-checked="wizard.usezmauth" toggle-class="toggle-calm">{{'kWizZMAuth' | translate}}</ion-toggle> - - <div ng-if="wizard.usezmauth"> - <label class="item item-input item-floating-label" > + <wizard on-finish="finishedWizard()"> + <!-- portal url --> + <wz-step wz-title="1" canexit="exitPortal"> + <h4><i id="transition-delay" class="animated swing ion-wand" style="font-size:2em"></i> {{'kWelcomeWizard' | translate}}</h4> + <img src="img/wizard.svg" width="100px" style="float:left" /> + <p>{{'kWizConfigPain' | translate}}</p> + <h4>{{'kWizPortalUrl' | translate}}</h4> + <label class="item item-input"> + <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" placeholder="e.g. http://server/zm" ng-model="wizard.portalurl"> + </label> + <p ng-if="$root.platformOS=='android'" style="font-size:0.8em; color:gray">{{'kDisableSamsung' | translate}}</p> + <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a> + <div class="wizardtip" ng-show="wizard.tipshow"> + <b>{{'kWizTip' | translate}}: </b>{{'kWizPortalTip' | translate}} + <br/> + <img src="img/portalurl.png" width="30%"> + </div> + <br/> + <button class="button button-small icon icon-right ion-chevron-right" wz-next>{{'kNext' | translate}}</button> + </wz-step> + <!-- auth mode --> + <wz-step wz-title="2"> + <h4>{{'kWizPortalAuth' | translate}}</h4> + <!--<img src="img/wizard.svg" width="100px" style="float:left"/>--> + <p>{{'kWizPortalText' | translate}}</p> + <ion-toggle ng-change="toggleAuth()" ng-model="wizard.useauth" ng-checked="wizard.useauth" toggle-class="toggle-calm">{{'kWizUseAuth' | translate}}</ion-toggle> + <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usezmauth" ng-checked="wizard.usezmauth" toggle-class="toggle-calm">{{'kWizZMAuth' | translate}}</ion-toggle> + <div ng-if="wizard.usezmauth"> + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kUserName' | translate}}</span> + <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.zmuser" placeholder="{{'kPlaceHolderZMAuthUser'|translate}}"> + </label> + <label class="item item-text-wrap item-input item-floating-label"> + <span class="input-label">{{'kPassword' | translate}}</span> + <input type="password" ng-model="wizard.zmpassword" placeholder="{{'kPlaceHolderZMAuthPass'|translate}}"> + <!--<p >{{'kWizPasswdNote' | translate}}</p>--> + </label> + </div> + <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usebasicauth" ng-checked="wizard.usebasicauth" toggle-class="toggle-calm">{{'kWizBasicAuth' | translate}}</ion-toggle> + <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth"> <span class="input-label">{{'kUserName' | translate}}</span> - <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.zmuser" placeholder="{{'kPlaceHolderZMAuthUser'|translate}}" > + <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.basicuser" placeholder="{{'kPlaceHolderBasicAuthUser'|translate}}"> </label> - <label class="item item-text-wrap item-input item-floating-label" > + <label class="item item-input item-text-wrap item-floating-label" ng-show="wizard.usebasicauth"> <span class="input-label">{{'kPassword' | translate}}</span> - <input type="password" ng-model="wizard.zmpassword" placeholder="{{'kPlaceHolderZMAuthPass'|translate}}" > - <!--<p >{{'kWizPasswdNote' | translate}}</p>--> + <input type="password" ng-model="wizard.basicpassword" placeholder="{{'kPlaceHolderBasicAuthPass'|translate}}"> + <p>{{'kWizPasswdNote' | translate}}</p> </label> - </div> - - <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usebasicauth" ng-checked="wizard.usebasicauth" toggle-class="toggle-calm">{{'kWizBasicAuth' | translate}}</ion-toggle> - <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth"> - <span class="input-label">{{'kUserName' | translate}}</span> - <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.basicuser" placeholder="{{'kPlaceHolderBasicAuthUser'|translate}}" > - </label> - <label class="item item-input item-text-wrap item-floating-label" ng-show="wizard.usebasicauth"> - <span class="input-label">{{'kPassword' | translate}}</span> - <input type="password" ng-model="wizard.basicpassword" placeholder="{{'kPlaceHolderBasicAuthPass'|translate}}" > - <p>{{'kWizPasswdNote' | translate}}</p> - </label> - - - <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a> - - - <div class="wizardtip" ng-show="wizard.tipshow"> - <b>{{'kWizTip'| translate}} </b> {{'kWizAuthText1' | translate}}<br/> - {{'kWizAuthText2' | translate}} - </div> - - <br/> - <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button> - <button class="button button-small icon icon-right ion-chevron-right" ng-click="exitAuth()">{{'kNext' | translate}}</button> - - </wz-step> - - - <wz-step wz-title="3" > - <br/><br/> - <h4>{{'kWizResults' | translate}}</h4> - - <span ng-if="wizard.portalValidText" style="color:{{wizard.portalColor}};"><i ng-class="wizard.portalColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.portalValidText}}<br/></span> - - <span ng-if="wizard.apiValidText" style="color:{{wizard.apiColor}};"><i ng-class=" wizard.apiColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.apiValidText}}<br/></span> - - <span ng-if="wizard.streamingValidText" style="color:{{wizard.streamingColor}};"><i ng-class="wizard.streamingColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.streamingValidText}}<br/></span> - - <br/> - <div class="wizardtip"> - {{'kWizNextStep1' | translate}}: - <ul class="wiz-list"> - <li>{{'kWizNextStep2' | translate}}</li> - <li>{{'kWizNextStep3' | translate}}</li> - </ul> - </div> - <br/><br/> - <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button> - <button class="button button-small icon icon-right ion-chevron-right" ng-click="gotoLoginState()">{{'kWizGotoLogin' | translate}}</button> - </wz-step> - - -</wizard> + <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a> + <div class="wizardtip" ng-show="wizard.tipshow"> + <b>{{'kWizTip'| translate}} </b> {{'kWizAuthText1' | translate}} + <br/> {{'kWizAuthText2' | translate}} + </div> + <br/> + <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button> + <button class="button button-small icon icon-right ion-chevron-right" ng-click="exitAuth()">{{'kNext' | translate}}</button> + </wz-step> + <wz-step wz-title="3"> + <br/> + <br/> + <h4>{{'kWizResults' | translate}}</h4> + <span ng-if="wizard.portalValidText" style="color:{{wizard.portalColor}};"><i ng-class="wizard.portalColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.portalValidText}}<br/></span> + <span ng-if="wizard.apiValidText" style="color:{{wizard.apiColor}};"><i ng-class=" wizard.apiColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.apiValidText}}<br/></span> + <span ng-if="wizard.streamingValidText" style="color:{{wizard.streamingColor}};"><i ng-class="wizard.streamingColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i> {{wizard.streamingValidText}}<br/></span> + <br/> + <div class="wizardtip"> + {{'kWizNextStep1' | translate}}: + <ul class="wiz-list"> + <li>{{'kWizNextStep2' | translate}}</li> + <li>{{'kWizNextStep3' | translate}}</li> + </ul> + </div> + <br/> + <br/> + <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button> + <button class="button button-small icon icon-right ion-chevron-right" ng-click="gotoLoginState()">{{'kWizGotoLogin' | translate}}</button> + </wz-step> + </wizard> </ion-content> - -</ion-view>
\ No newline at end of file +</ion-view> diff --git a/www/templates/zm-portal-login.html b/www/templates/zm-portal-login.html index 9d2db867..877dbb97 100644 --- a/www/templates/zm-portal-login.html +++ b/www/templates/zm-portal-login.html @@ -1,8 +1,5 @@ - <ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false"> - <ion-content class="pin-background" scroll="false"> - <div style="margin-left:20px; margin-right:20px"> <center> <br/> @@ -10,23 +7,20 @@ <div id="responsive-image"> <img src="img/authlogo.png"> </div> - <div ng-if="pinPrompt"> <span style="color:white">{{'kEnterPin' | translate}}</span> - <div class="pinCode"> <input id="pin-box" type="number" pattern="[0-9]*" ng-model="pindata.pin" ng-keyup="pinChange()" /> </div> - <br/> <span style="color:white">{{pindata.status}}</span> <br/> <button class="button button-dark icon ion-unlocked" ng-click="unlock()"> Unlock </button> </div> - <div id = "really-your-fault" class="animated fadeIn" style="color:white">{{'kPortalNotice' | translate}}<br/><br/>{{'kPortalNoticeSub' | translate}}</div> - + <div id="really-your-fault" class="animated fadeIn" style="color:white">{{'kPortalNotice' | translate}} + <br/> + <br/>{{'kPortalNoticeSub' | translate}}</div> </center> </div> - </ion-content> -</ion-view>
\ No newline at end of file +</ion-view> |