diff options
Diffstat (limited to 'www/templates')
33 files changed, 1588 insertions, 1439 deletions
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html index 86c19561..e81e536f 100644 --- a/www/templates/devoptions.html +++ b/www/templates/devoptions.html @@ -1,48 +1,63 @@ <ion-view view-title="{{'kDevOptions' | 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"> - <button class="button button-clear" ng-click="saveDevOptions()">{{'kSave' | translate}}</button> - </ion-nav-buttons> - <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <div class="list list-inset"> - <span style="color:rgb(100,100,100)"> - <i class="ion-android-settings" style="font-size:150%"></i> {{'kDeveloperOptionsFor'|translate}} {{loginData.serverName}} + <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="saveDevOptions()">{{'kSave' | translate}}</button> + </ion-nav-buttons> + <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <div class="list list-inset"> + <span style="color:rgb(100,100,100)"> + <i class="ion-android-settings" style="font-size:150%"></i> {{'kDeveloperOptionsFor'|translate}} {{loginData.serverName}} + </span> + <div class="item item-input-inset"> + {{'kFrameUpdate'|translate}} ({{'kSec'|translate}}.) + <label class="item-input-wrapper"> + <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec"> + </label> + </div> + <label> + <ion-toggle ng-model="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-disabled="!isTzSupported()" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kLocalTimeZone' | translate}} + <span ng-if="!isTzSupported()"> + <p>{{'kTimeZoneNotSupported' | translate}}</p> </span> - <div class="item item-input-inset"> - {{'kFrameUpdate'|translate}} ({{'kSec'|translate}}.) - <label class="item-input-wrapper"> - <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec"> - </label> - </div> - <label> - <ion-toggle ng-model="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-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> - - <label> - <ion-toggle ng-model="loginData.showLiveForInProgressEvents" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kShowLiveForInProgress' | translate}}</span> - </ion-toggle> - </label> - - <div ng-if="$root.platformOS=='android'"> - <label> - <ion-toggle ng-model="loginData.exitOnSleep" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kExitAppBackground' | translate}}</span></ion-toggle> - </label> - </div> - - <div class="item item-text-wrap item-input-inset"> - {{'kMaxMonitorsMontage' | translate }} - <label class="item-input-wrapper"> - <input type="tel" placeholder="{{'kBeCareful' | translate}}" ng-model="loginData.maxMontage"> - </label> - </div> - <!-- + <span ng-if="isTzSupported()"> + <p>{{'kServerTimeZone' | translate}}:{{getTimeZoneNow()}}</p> + </span> + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.showLiveForInProgressEvents" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kShowLiveForInProgress' | translate}}</span> + </ion-toggle> + </label> + + <div ng-if="$root.platformOS=='android'"> + <label> + <ion-toggle ng-model="loginData.exitOnSleep" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kExitAppBackground' | translate}}</span> + </ion-toggle> + </label> + </div> + + <div class="item item-text-wrap item-input-inset"> + {{'kMaxMonitorsMontage' | translate }} + <label class="item-input-wrapper"> + <input type="tel" placeholder="{{'kBeCareful' | translate}}" ng-model="loginData.maxMontage"> + </label> + </div> + <!-- <div class="item item-input-inset"> maxfps for streaming <label class="item-input-wrapper"> @@ -50,25 +65,25 @@ </label> </div> --> - <div class="item item-text-wrap item-input-inset"> - {{'kMontageImageScale' | translate}}(%) - <label class="item-input-wrapper"> - <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality"> - </label> - </div> - <div class="item item-text-wrap item-input-inset"> - {{'kEventSingleImageScale' | translate}}(%) - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.singleImageQuality"> - </label> - </div> - <div class="item item-text-wrap item-input-inset"> - {{'kMonitorSingleImageScale' | translate}}(%) - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.monSingleImageQuality"> - </label> - </div> - <!--<div class="item item-input-inset"> + <div class="item item-text-wrap item-input-inset"> + {{'kMontageImageScale' | translate}}(%) + <label class="item-input-wrapper"> + <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality"> + </label> + </div> + <div class="item item-text-wrap item-input-inset"> + {{'kEventSingleImageScale' | translate}}(%) + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.singleImageQuality"> + </label> + </div> + <div class="item item-text-wrap item-input-inset"> + {{'kMonitorSingleImageScale' | translate}}(%) + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.monSingleImageQuality"> + </label> + </div> + <!--<div class="item item-input-inset"> {{'kResumeDelay' | translate}}(ms) <label class="item-input-wrapper"> <input type="tel" placeholder="" ng-model="loginData.resumeDelay"> @@ -76,117 +91,132 @@ </label> </div>--> - <div class="item item-text-wrap item-input-inset"> - {{'kEventMontageImageScale'|translate}}(%) - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.montageHistoryQuality"> - </label> - </div> - <div class="item item-text-wrap item-input-inset"> - {{'kMaxItemsForTimeline' | translate}} - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.graphSize"> - <br/> - </label> - <br/> - </div> - <div class="item item-text-wrap item-input-inset"> - {{'kMinAlarmCount' | translate}} - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.minAlarmCount"> - <br/> - </label> - <br/> - </div> - <div class="item" style="background-color:#C8F7C5" ng-if="loginData.graphSize > 5000"> - <label class="animated fadeInDown item-text-wrap"> - {{'kWarningLargeTimeline' | translate}} - </label> - </div> - - <label> - <ion-toggle ng-model="loginData.hideArchived" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kHideArchived' | translate}} - </span> - </ion-toggle> - </label> - - <label ng-if="$root.platformOS!='desktop'"> - <ion-toggle ng-model="loginData.enableStrictSSL" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableStrictSSL' | translate}} - - </span> - </ion-toggle> - </label> - - <label> - <ion-toggle ng-model="loginData.enableGIFMP4" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableGIFMP4' | translate}} - </span> - </ion-toggle> - </label> - - - <label> - <ion-toggle ng-model="loginData.enableThumbs" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableThumbs' | translate}} - <p>{{'kEnableThumbsSub' | translate}}</p> - </span> - </ion-toggle> - </label> - - <label> - <ion-toggle ng-model="loginData.enableSlowLoading" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableSlowLoading' | translate}} - </span> - </ion-toggle> - </label> - - <label> - <ion-toggle ng-model="loginData.disableAlarmCheckMontage" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kDisableAlarmMontage' | translate}} - <p>{{'kDisableAlarmMontageSub' | translate}}</p></span> - </ion-toggle> - </label> - - <label> - <ion-toggle ng-model="loginData.insertBasicAuthToken" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kInsertBasicAuthToken' | translate}} - <p>{{'kInsertBasicAuthTokenNote' | translate}}</p></span> - </ion-toggle> - </label> - - <label ng-if="isMultiPort"> - <ion-toggle ng-model="loginData.disableSimulStreaming" - ng-change="checkMultiPortToggle()" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kDisableSimulStreaming' | translate}} - <p ng-if="$root.platformOS=='ios'">{{'kDisableSimulStreamingNote' | translate}}</p> - </span> - </ion-toggle> - </label> - - <label> - <ion-toggle ng-model="loginData.enableLogs" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableLogs' | translate}}</span></ion-toggle> - </label> - - <label> - <ion-toggle ng-if="loginData.enableLogs" ng-model="loginData.enableDebug" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableDebug' | translate}}</span></ion-toggle> - </label> - - <div class="item item-text-wrap item-input-inset"> - {{'kCycleMonitorsInterval'|translate}}({{'kSec'|translate}}.) - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.cycleMonitorsInterval"> - </label> - </div> - - <div class="item item-text-wrap item-input-inset"> - {{'kCycleMontageInterval'|translate}}({{'kSec'|translate}}.) - <label class="item-input-wrapper"> - <input type="tel" placeholder="" ng-model="loginData.cycleMontageInterval"> - </label> - </div> - - - - - <label ng-if="$root.platformOS != 'desktop'"> - <ion-toggle ng-model="loginData.disableNative" toggle-class="toggle-calm"> <span class="item-text-wrap">{{'kDisableNative' | translate}} - <p>{{'kDisableNativeSub' | translate}}</p></span> - </ion-toggle> - </label> - </div> - </ion-content> + <div class="item item-text-wrap item-input-inset"> + {{'kEventMontageImageScale'|translate}}(%) + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.montageHistoryQuality"> + </label> + </div> + <div class="item item-text-wrap item-input-inset"> + {{'kMaxItemsForTimeline' | translate}} + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.graphSize"> + <br/> + </label> + <br/> + </div> + <div class="item item-text-wrap item-input-inset"> + {{'kMinAlarmCount' | translate}} + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.minAlarmCount"> + <br/> + </label> + <br/> + </div> + <div class="item" style="background-color:#C8F7C5" ng-if="loginData.graphSize > 5000"> + <label class="animated fadeInDown item-text-wrap"> + {{'kWarningLargeTimeline' | translate}} + </label> + </div> + + <label> + <ion-toggle ng-model="loginData.hideArchived" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kHideArchived' | translate}} + </span> + </ion-toggle> + </label> + + <label ng-if="$root.platformOS!='desktop'"> + <ion-toggle ng-model="loginData.enableStrictSSL" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableStrictSSL' | translate}} + + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.enableGIFMP4" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableGIFMP4' | translate}} + </span> + </ion-toggle> + </label> + + + <label> + <ion-toggle ng-model="loginData.enableThumbs" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableThumbs' | translate}} + <p>{{'kEnableThumbsSub' | translate}}</p> + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.enableSlowLoading" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableSlowLoading' | translate}} + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.disableAlarmCheckMontage" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kDisableAlarmMontage' | translate}} + <p>{{'kDisableAlarmMontageSub' | translate}}</p> + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.insertBasicAuthToken" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kInsertBasicAuthToken' | translate}} + <p>{{'kInsertBasicAuthTokenNote' | translate}}</p> + </span> + </ion-toggle> + </label> + + <label ng-if="isMultiPort"> + <ion-toggle ng-model="loginData.disableSimulStreaming" ng-change="checkMultiPortToggle()" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kDisableSimulStreaming' | translate}} + <p ng-if="$root.platformOS=='ios'">{{'kDisableSimulStreamingNote' | translate}}</p> + </span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-model="loginData.enableLogs" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableLogs' | translate}}</span> + </ion-toggle> + </label> + + <label> + <ion-toggle ng-if="loginData.enableLogs" ng-model="loginData.enableDebug" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kEnableDebug' | translate}}</span> + </ion-toggle> + </label> + + <div class="item item-text-wrap item-input-inset"> + {{'kCycleMonitorsInterval'|translate}}({{'kSec'|translate}}.) + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.cycleMonitorsInterval"> + </label> + </div> + + <div class="item item-text-wrap item-input-inset"> + {{'kCycleMontageInterval'|translate}}({{'kSec'|translate}}.) + <label class="item-input-wrapper"> + <input type="tel" placeholder="" ng-model="loginData.cycleMontageInterval"> + </label> + </div> + + + + + <label ng-if="$root.platformOS != 'desktop'"> + <ion-toggle ng-model="loginData.disableNative" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kDisableNative' | translate}} + <p>{{'kDisableNativeSub' | translate}}</p> + </span> + </ion-toggle> + </label> + </div> + </ion-content> </ion-view> diff --git a/www/templates/events-date-time-filter.html b/www/templates/events-date-time-filter.html index 2aa2d6d5..395c29d2 100644 --- a/www/templates/events-date-time-filter.html +++ b/www/templates/events-date-time-filter.html @@ -1,27 +1,27 @@ <ion-view view-title="{{'kFilterEvents' | translate}}"> - <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <label class="item item-input"> - <span class="input-label">{{'kFromDate'|translate}}:</span> - <input type="date" ng-model="$root.fromDate" max={{today}}> - </label> - <label class="item item-input"> - <span class="input-label">{{'kFromTime'|translate}}</span> - <input type="time" ng-model="$root.fromTime"> - </label> - <label class="item item-input"> - <span class="input-label">{{'kToDate'|translate}}</span> - <input type="date" ng-model="$root.toDate" max={{today}}> - </label> - <label class="item item-input"> - <span class="input-label">{{'kToTime'|translate}}</span> - <input type="time" ng-model="$root.toTime"> - </label> - <br/> - <center> - <button class="button" ng-click="saveFilters();"> {{'kSave'|translate}} - </button> - <button class="button" ng-click="removeFilters();"> {{'kReset'|translate}} - </button> - </center> - </ion-content> + <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <label class="item item-input"> + <span class="input-label">{{'kFromDate'|translate}}:</span> + <input type="date" ng-model="$root.fromDate" max={{today}}> + </label> + <label class="item item-input"> + <span class="input-label">{{'kFromTime'|translate}}</span> + <input type="time" ng-model="$root.fromTime"> + </label> + <label class="item item-input"> + <span class="input-label">{{'kToDate'|translate}}</span> + <input type="date" ng-model="$root.toDate" max={{today}}> + </label> + <label class="item item-input"> + <span class="input-label">{{'kToTime'|translate}}</span> + <input type="time" ng-model="$root.toTime"> + </label> + <br/> + <center> + <button class="button" ng-click="saveFilters();"> {{'kSave'|translate}} + </button> + <button class="button" ng-click="removeFilters();"> {{'kReset'|translate}} + </button> + </center> + </ion-content> </ion-view> diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html index 0e14016f..573bf6ad 100644 --- a/www/templates/events-graphs.html +++ b/www/templates/events-graphs.html @@ -1,65 +1,66 @@ <!----- 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> - </ion-nav-buttons> - <!-- I'm calling the same controller function but with different parameters when + <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> + <!-- 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 + <!-- Oddly, unless I add a "div ng-controller" before each canvas onClick handler does not work --> - <!-- All Events view --> - <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> - </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-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> - </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-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> - </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-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> - </ion-content> - </ion-nav-view> - </ion-tab> - </ion-tabs> + <!-- All Events view --> + <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> + </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-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> + </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-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> + </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-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> + </ion-content> + </ion-nav-view> + </ion-tab> + </ion-tabs> </ion-view> diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index e372929b..c51ef443 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -1,163 +1,186 @@ <div ng-controller="EventModalCtrl"> - <!-- 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> - - - <!-- alarm frames in snapshot--> - <div ng-if="isSnapShot() && !liveFeedMid"> - <ion-scroll direction="x" overflow-scroll="false" > - <div style="white-space:nowrap;"> - <span ng-repeat="alarm in alarm_images"> - <figure class="animated slideInLeft" style="display:inline-block"> - <img ng-src="{{constructFrame(alarm.frameid)}}" fallback-src="img/frameerror.png" style="width: auto; height: auto;max-width: 100%;max-height: 100px" ng-click="changeSnapshot(alarm.frameid)" on-double-tap="closeModal();" /> - </figure> - </span> - </div> - - </ion-scroll> - </div> + <!-- 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> + + + <!-- alarm frames in snapshot--> + <div ng-if="isSnapShot() && !liveFeedMid"> + <ion-scroll direction="x" overflow-scroll="false"> + <div style="white-space:nowrap;"> + <span ng-repeat="alarm in alarm_images"> + <figure class="animated slideInLeft" style="display:inline-block"> + <img ng-src="{{constructFrame(alarm.frameid)}}" fallback-src="img/frameerror.png" style="width: auto; height: auto;max-width: 100%;max-height: 100px" + ng-click="changeSnapshot(alarm.frameid)" on-double-tap="closeModal();" /> + </figure> + </span> + </div> + + </ion-scroll> + </div> + + <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" overflow-scroll="false" + scrollbar-x="false" scrollbar-y="false"> + <div id="full-screen-event" style="height: 100vh;"> + + <div ng-if="defaultVideo=='' || isSnapShot()"> + <!--<div style="color:white">connkey:{{connKey}}</div>--> + <div style="width:100vw; height:100vh;"> + + <div ng-if="isSnapShot() && !liveFeedMid" class="event-modal-play"> + + <button class="button button-assertive icon ion-play" ng-click="convertSnapShotToStream()"> {{'kPlay'|translate}}</button> + </div> + + + + <img ng-if="!liveFeedMid" image-spinner-src="{{constructStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" + on-double-tap="closeModal();" img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" imageonload="modalImageLoaded()" + on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" /> + + + <div ng-if="liveFeedMid"> + <img image-spinner-src="{{loginData.streamingurl}}/nph-zms?mode=jpeg&monitor={{liveFeedMid}}&connkey={{connKey}}{{$root.authSession}}" + ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();" + img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" + on-swipe-right="onSwipeEvent(prevId,-1)" /> + <div class="events-range-modal-text"> + <span class="events-range-modal-warning-text">{{eventWarning}}</span> + </div> + </div> - <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" overflow-scroll="false" scrollbar-x="false" scrollbar-y="false"> - <div id="full-screen-event" style="height: 100vh;"> - - <div ng-if="defaultVideo=='' || isSnapShot()"> - <!--<div style="color:white">connkey:{{connKey}}</div>--> - <div style="width:100vw; height:100vh;"> - - <div ng-if="isSnapShot() && !liveFeedMid" class="event-modal-play"> - - <button class="button button-assertive icon ion-play" ng-click="convertSnapShotToStream()"> {{'kPlay'|translate}}</button> - </div> - - - - <img ng-if="!liveFeedMid" image-spinner-src="{{constructStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();" - img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" - imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" - /> - - - <div ng-if="liveFeedMid"> - <img image-spinner-src="{{loginData.streamingurl}}/nph-zms?mode=jpeg&monitor={{liveFeedMid}}&connkey={{connKey}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();" - img-spinner-w="1024" img-spinner-h="768" - image-spinner-loader="lines" - imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" - /> - <div class="events-range-modal-text"><span class="events-range-modal-warning-text">{{eventWarning}}</span> </div> - </div> - - - - <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" class="header-paused"> - <i class="ion-pause"></i> {{'kPaused' | translate}} - </div> - </div> - </div> - <!-- no default video --> - <div ng-if="defaultVideo!==undefined && defaultVideo!='' && !isSnapShot() && !isStreamStopped()"> - <div ng-if="videoIsReady"> - - <!-- <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">--> - <div on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" ng-style="{'height':$root.devHeight+'px', 'width':$root.devWidth+'px'}"> - - <videogular vg-can-play="onCanPlay()" vg-native-fullscreen="videoObject.config.nativeFullScreen" vg-player-ready="onPlayerReady($API)" - vg-update-playback="onPlaybackUpdate($playBack)" - 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-error="onVideoError($event)"> - <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls"> - </vg-media> - <vg-controls> - <vg-playback-button></vg-playback-button> - <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-cuepoints vg-cuepoints-config="videoObject.config.cuepoints" - vg-cuepoints-theme="videoObject.config.cuepoints.theme.url"> - </vg-cuepoints> - </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> - - </videogular> - </div> - </div> - <!--<div id="event_canvas_video"> + + + <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" class="header-paused"> + + <i class="ion-pause"></i> {{'kPaused' | translate}} + </div> + </div> + </div> + <!-- no default video --> + <div ng-if="defaultVideo!==undefined && defaultVideo!='' && !isSnapShot() && !isStreamStopped()"> + <div ng-if="videoIsReady"> + + <!-- <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">--> + <div on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" ng-style="{'height':$root.devHeight+'px', 'width':$root.devWidth+'px'}"> + + <videogular vg-can-play="onCanPlay()" vg-native-fullscreen="videoObject.config.nativeFullScreen" vg-player-ready="onPlayerReady($API)" + vg-update-playback="onPlaybackUpdate($playBack)" 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-error="onVideoError($event)"> + <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls"> + </vg-media> + <vg-controls> + <vg-playback-button></vg-playback-button> + <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-cuepoints vg-cuepoints-config="videoObject.config.cuepoints" vg-cuepoints-theme="videoObject.config.cuepoints.theme.url"> + </vg-cuepoints> + </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> + + </videogular> + </div> + </div> + <!--<div id="event_canvas_video"> <canvas id="eventchart" width="100%" height="20px"></canvas> </div>--> - </div> - </div> - <!-- 100vh --> - </ion-scroll> + </div> + </div> + <!-- 100vh --> + </ion-scroll> + - - <div ng-show="defaultVideo=='' && !liveFeedMid && !isSnapShot()"> - <div id="event_canvas"> - <canvas style="padding-left:23px; + <div ng-show="defaultVideo=='' && !liveFeedMid && !isSnapShot()"> + <div id="event_canvas"> + <canvas style="padding-left:23px; padding-right:23px;" id="eventchart" width="auto" height="20"></canvas> - </div> - - <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false"> - <div class="range"> - <input on-drag="enableSliderBlock()" on-release="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress"> - </div> - </div> - <div id="event_rate_text"> - @{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s - </div> - </div> - - - - </ion-content> - </ion-modal-view> - - - - <div ng-show="!liveFeedMid"> - <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <a mfb-button icon="ion-arrow-right-c" label="{{'kNextEvent'|translate}}" ng-click="jumpToEvent(nextId,1);"></a> - <a mfb-button icon="ion-arrow-left-c" label="{{'kPrevEvent'|translate}}" ng-click="jumpToEvent(prevId,-1);"></a> - <a ng-if="!isSnapShot()" mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFillScreen' | translate):('kFitScreen' | translate)}}" ng-click="scaleImage();"></a> - <a mfb-button icon="ion-close" label="{{'kExitEventView' | translate}}" ng-click="closeModal()"> </a> - </nav> - <nav ng-if=" !isSnapShot() && defaultVideo==''" mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click"> - <a mfb-button icon="ion-skip-backward" label="{{'kFastRewind'|translate}}" ng-click="adjustSpeed('fr');"></a> - <a mfb-button icon="ion-skip-forward" label="{{'kFastForward'|translate}}" ng-click="adjustSpeed('ff');"></a> - <a mfb-button icon="ion-play" label="{{'kNormalPlay'|translate}}" ng-click="adjustSpeed('np');"></a> - <a mfb-button icon="ion-pause" label="{{'kPause'|translate}}" ng-click="adjustSpeed('p');"> </a> - </nav> - - <div class="events-range-modal-text">{{mName}} <i class="ion-arrow-right-b"></i> {{videoDynamicTime}} ({{humanizeTime}}) [{{d_eventId}}] <span class="events-range-modal-warning-text">{{eventWarning}}</span> </div> - <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px"> - <ul> - <li> - <a href="" ng-click="toggleListMenu()"> <i ng-class="(isToggleListMenu) ? 'icon ion-chevron-left': 'icon ion-chevron-right'"></i></a> - </li> - <li ng-if="defaultVideo=='' && isToggleListMenu" ng-style="{'background-color': loginData.gapless?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}"> - <a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless? ('kOn' | translate): ('kOff' | translate)}}</a> - </li> - <li ng-if="defaultVideo=='' && isToggleListMenu"> - <a href="" ng-click="saveEventImageToPhoneWithPerms(false)"> <i class="ion-ios-camera"></i></a> - </li> - <li ng-if="defaultVideo=='' && isToggleListMenu"> - <a href="" ng-click="saveEventImageToPhoneWithPerms(true)"> <i class="ion-android-notifications"></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> - - <li> - <a href="" ng-click="deleteAndMoveNext(eventId)"><i class="ion-trash-a"></i></a> - </li> - - - - </ul> </div> - </div> <!-- not live feed or snapshot --> + + <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false"> + <div class="range"> + <input on-drag="enableSliderBlock()" on-release="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" + ng-model="sliderProgress.progress"> + </div> + </div> + <div id="event_rate_text"> + @{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s + </div> + </div> + + + + </ion-content> + </ion-modal-view> + + + + <div ng-show="!liveFeedMid"> + <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" + toggling-method="click"> + <a mfb-button icon="ion-arrow-right-c" label="{{'kNextEvent'|translate}}" ng-click="jumpToEvent(nextId,1);"></a> + <a mfb-button icon="ion-arrow-left-c" label="{{'kPrevEvent'|translate}}" ng-click="jumpToEvent(prevId,-1);"></a> + <a ng-if="!isSnapShot()" mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFillScreen' | translate):('kFitScreen' | translate)}}" + ng-click="scaleImage();"></a> + <a mfb-button icon="ion-close" label="{{'kExitEventView' | translate}}" ng-click="closeModal()"> </a> + </nav> + <nav ng-if=" !isSnapShot() && defaultVideo==''" mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" + active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click"> + <a mfb-button icon="ion-skip-backward" label="{{'kFastRewind'|translate}}" ng-click="adjustSpeed('fr');"></a> + <a mfb-button icon="ion-skip-forward" label="{{'kFastForward'|translate}}" ng-click="adjustSpeed('ff');"></a> + <a mfb-button icon="ion-play" label="{{'kNormalPlay'|translate}}" ng-click="adjustSpeed('np');"></a> + <a mfb-button icon="ion-pause" label="{{'kPause'|translate}}" ng-click="adjustSpeed('p');"> </a> + </nav> + + <div class="events-range-modal-text">{{mName}} + <i class="ion-arrow-right-b"></i> {{videoDynamicTime}} ({{humanizeTime}}) [{{d_eventId}}] + <span class="events-range-modal-warning-text">{{eventWarning}}</span> + </div> + <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px"> + <ul> + <li> + <a href="" ng-click="toggleListMenu()"> + <i ng-class="(isToggleListMenu) ? 'icon ion-chevron-left': 'icon ion-chevron-right'"></i> + </a> + </li> + <li ng-if="defaultVideo=='' && isToggleListMenu" ng-style="{'background-color': loginData.gapless?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}"> + <a href="" ng-click="toggleGapless()"> + <i class="ion-ios-loop-strong"></i>-{{loginData.gapless? ('kOn' | translate): ('kOff' | translate)}}</a> + </li> + <li ng-if="defaultVideo=='' && isToggleListMenu"> + <a href="" ng-click="saveEventImageToPhoneWithPerms(false)"> + <i class="ion-ios-camera"></i> + </a> + </li> + <li ng-if="defaultVideo=='' && isToggleListMenu"> + <a href="" ng-click="saveEventImageToPhoneWithPerms(true)"> + <i class="ion-android-notifications"></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> + + <li> + <a href="" ng-click="deleteAndMoveNext(eventId)"> + <i class="ion-trash-a"></i> + </a> + </li> + + + + </ul> + </div> + </div> + <!-- not live feed or snapshot --> </div> diff --git a/www/templates/events-modalgraph.html b/www/templates/events-modalgraph.html index 25b38543..75f2ec15 100644 --- a/www/templates/events-modalgraph.html +++ b/www/templates/events-modalgraph.html @@ -1,9 +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-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> - </ion-content> - </ion-modal-view> + <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> + </ion-content> + </ion-modal-view> </div> diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html index 43c3ee88..5c7e7c15 100644 --- a/www/templates/events-popover.html +++ b/www/templates/events-popover.html @@ -1,15 +1,15 @@ <ion-popover-view class="fit"> - <ion-content> - <div class="list" ng-click="popover.hide()"> - <a class="item" ng-href="" ng-click="popover.hide();$state.go('app.events-date-time-filter');">{{'kFilterByDateTime' | translate}}</a> - <!-- <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" > + <ion-content> + <div class="list" ng-click="popover.hide()"> + <a class="item" ng-href="" ng-click="popover.hide();$state.go('app.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> + <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> diff --git a/www/templates/events.html b/www/templates/events.html index a07d98a1..6167603e 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -44,32 +44,32 @@ depending on the cause of the event --> <span ng-switch on="event.Event.Cause"> <span ng-switch-when="Motion"> - <i class="ion-android-walk" style="font-size:150%;" ></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 class="ion-android-walk" style="font-size:150%;"></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>--> + </span> <span ng-switch-when="Signal"> - <i class="ion-wifi" style="font-size:150%;" ></i> + <i class="ion-wifi" style="font-size:150%;"></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>--> - + </span> <span ng-switch-default> <i class="ion-ionic" style="font-size:150%;"></i> - - + + </span> </span> <!-- ng switch --> <!-- {{event.Event.Cause}} --> - - - - <!-- col col left--> - - <b> - <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red"> </i>{{event.Event.MonitorName}}</b> - <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> - <br/> + + + + <!-- col col left--> + + <b> + <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red"> </i>{{event.Event.MonitorName}}</b> + <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> + <br/> <i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} @@ -90,22 +90,21 @@ </button> <!--<i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}--> - </div> + </div> - <div class="col col-40" align="right" ng-if="loginData.enableThumbs"> - <!-- thumbnail --> - - <!-- ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2" {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}--> - <div style="max-height:200px; max-width:200px"> - <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#6C7A89" - ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="100%" - height="100%" /> - <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>--> - </div> + <div class="col col-40" align="right" ng-if="loginData.enableThumbs"> + <!-- thumbnail --> + <!-- ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2" {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}--> + <div style="max-height:200px; max-width:200px"> + <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" + on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="100%" height="100%" /> + <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>--> </div> - + + </div> + </div> <!--row--> <div class="row" style="font-size:80%; color:rgb(110,110,110)"> diff --git a/www/templates/eventserversettings.html b/www/templates/eventserversettings.html index 1eff634b..602f8ca4 100644 --- a/www/templates/eventserversettings.html +++ b/www/templates/eventserversettings.html @@ -1,55 +1,57 @@ <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 delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - <div class="list list-inset"> - {{'kEventServerConfig1' | translate }} - </div> - <ion-checkbox ng-model="loginData.isUseEventServer">{{'kUseEventServer' | translate}}</ion-checkbox> - <ion-item ng-href="" ng-click="selectScreen()"> - {{'kOnTapNavigate' | translate}}: {{defScreen}} + <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 delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + <div class="list list-inset"> + {{'kEventServerConfig1' | translate }} + </div> + <ion-checkbox ng-model="loginData.isUseEventServer">{{'kUseEventServer' | translate}}</ion-checkbox> + <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="{{'kEventNotificationUrl' | translate}}" + ng-model="loginData.eventServer"> + </label> + <ion-toggle ng-if="loginData.isUseEventServer" ng-model="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" toggle-class="toggle-calm">{{'kVibrateOnPush'| translate }}</ion-toggle> + <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.soundOnPush" toggle-class="toggle-calm" class="item-text-wrap">{{'kSoundOnPush'| translate }}</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> - <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="{{'kEventNotificationUrl' | translate}}" ng-model="loginData.eventServer"> - </label> - <ion-toggle ng-if="loginData.isUseEventServer" ng-model="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" toggle-class="toggle-calm">{{'kVibrateOnPush'| translate }}</ion-toggle> - <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.soundOnPush" toggle-class="toggle-calm" class="item-text-wrap">{{'kSoundOnPush'| translate }}</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"> - - {{'kReportEvents' | translate }} - <label class="checkbox"> - <input type="checkbox" ng-model="monitor.Monitor.isChecked" > - </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="{{'kSec' | translate}}" ng-model="monitor.Monitor.reportingInterval"> - </label> - {{'kMinimumIntervals' | translate}} - </div> - </ion-item> - </div> - </ion-list> - </ion-content> + <ion-item class="item-accordion" ng-show="isGroupShown(monitor)"> + <span class="item-checkbox"> + + {{'kReportEvents' | translate }} + <label class="checkbox"> + <input type="checkbox" ng-model="monitor.Monitor.isChecked"> + </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="{{'kSec' | translate}}" 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 884fb0c9..aa1475bf 100644 --- a/www/templates/first-use.html +++ b/www/templates/first-use.html @@ -1,38 +1,39 @@ <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> - <br/> - <br/> - <div id="responsive-image"> - <img src="img/authlogo.png"> - </div> - <br/> - <span style="color:white"> - <h2 style="color:white" >Hi There!</h2> - <br/> - <h4 style="color:white">{{'kThanksForUsing' | translate}} {{$root.appName}}. <br/><br/> - {{'kNeedToKnow' | translate}} - </h4> - <br/> - - </span> - <br/> - <div id="firstuse"> - <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()"> - {{'kExpert' | translate }} - </button> - <br/> - <center> - <button class="button button-clear icon icon-left ion-android-globe white-button-text animated bounceInUp" ng-click="switchLang()"> - {{'kLanguage' | translate}} - </button> - </center> - </div> - </center> + <ion-content class="pin-background"> + <div style="margin-left:20px; margin-right:20px"> + <center> + <br/> + <br/> + <div id="responsive-image"> + <img src="img/authlogo.png"> </div> - </ion-content> + <br/> + <span style="color:white"> + <h2 style="color:white">Hi There!</h2> + <br/> + <h4 style="color:white">{{'kThanksForUsing' | translate}} {{$root.appName}}. + <br/> + <br/> {{'kNeedToKnow' | translate}} + </h4> + <br/> + + </span> + <br/> + <div id="firstuse"> + <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()"> + {{'kExpert' | translate }} + </button> + <br/> + <center> + <button class="button button-clear icon icon-left ion-android-globe white-button-text animated bounceInUp" ng-click="switchLang()"> + {{'kLanguage' | translate}} + </button> + </center> + </div> + </center> + </div> + </ion-content> </ion-view> diff --git a/www/templates/help.html b/www/templates/help.html index e9a9876b..8a497c5e 100644 --- a/www/templates/help.html +++ b/www/templates/help.html @@ -1,12 +1,15 @@ <ion-view cache-view="false" view-title="{{'kHelp' | 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 class="padding" 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> - </ion-content> + <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" 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> + </ion-content> </ion-view> diff --git a/www/templates/image-modal.html b/www/templates/image-modal.html index 2ac07f40..c1e0e5e6 100644 --- a/www/templates/image-modal.html +++ b/www/templates/image-modal.html @@ -3,12 +3,11 @@ <div id="imagecontainer"> - <ion-scroll has-bouncing=false min-zoom=1 zooming="true" - direction="xy" style="width: 100%;" overflow-scroll="false"> - <img on-double-tap="closeModal();" ng-src="{{thumbnailLarge}}" style="display:block; width:100%;" /> + <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false"> + <img on-double-tap="closeModal();" ng-src="{{thumbnailLarge}}" style="display:block; width:100%;" /> </ion-scroll> - </div> + </div> </ion-content> </ion-modal-view> diff --git a/www/templates/important_message.html b/www/templates/important_message.html index f0fd245e..3838dd76 100644 --- a/www/templates/important_message.html +++ b/www/templates/important_message.html @@ -1,34 +1,37 @@ <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"> - <center> - <br/> - <br/> - <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> - <br/> - <h4 style="color:white">{{'kImpMsg2' | translate}}</h4> - <br/> - {{'kImpMsg3' | translate}} v{{currentVersion}}.<br/> v{{recommendedVersion}} {{'kImpMsg4' | translate}} - <br/> - {{'kImpMsg5' | translate}}: <b>v{{currentVersion}}</b><br/> - {{'kImpMsg6' | translate}}:<b>v{{recommendedVersion}}</b><br/><br/> - - <button class="button button-stable animated bounceInUp" ng-click="openMenu()"> - {{'kImpMsg7' | translate}} - </button> - - - </span> - </center> - <br/> + <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"> + <center> + <br/> + <br/> + <div id="responsive-image"> + <img src="img/authlogo.png"> </div> - </ion-content> + <br/> + <span style="color:white"> + <h2 style="color:white" class="animated bounce">{{'kImpMsg1' | translate}}</h2> + <br/> + <h4 style="color:white">{{'kImpMsg2' | translate}}</h4> + <br/> {{'kImpMsg3' | translate}} v{{currentVersion}}. + <br/> v{{recommendedVersion}} {{'kImpMsg4' | translate}} + <br/> {{'kImpMsg5' | translate}}: + <b>v{{currentVersion}}</b> + <br/> {{'kImpMsg6' | translate}}: + <b>v{{recommendedVersion}}</b> + <br/> + <br/> + + <button class="button button-stable animated bounceInUp" ng-click="openMenu()"> + {{'kImpMsg7' | translate}} + </button> + + + </span> + </center> + <br/> + </div> + </ion-content> </ion-view> diff --git a/www/templates/invalidapi.html b/www/templates/invalidapi.html index af3a6977..032a8693 100644 --- a/www/templates/invalidapi.html +++ b/www/templates/invalidapi.html @@ -1,30 +1,31 @@ <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"> - <center> - <br/> - <br/> - <div id="responsive-image"> - <img src="img/authlogo.png"> - </div> - <br/> - <span style="color:white"> - <h2 style="color:white" class="animated bounce">{{'kInvalidAPIHeader' | translate}}</h2> - <br/> - <h4 style="color:white">{{'kInvalidAPIBody' | translate}}</h4> - - <br/><br/> - - <button class="button button-stable animated bounceInUp" ng-click="readFAQ()"> - {{'kInvalidAPIRead' | translate}}</button> - - - </span> - </center> - <br/> + <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"> + <center> + <br/> + <br/> + <div id="responsive-image"> + <img src="img/authlogo.png"> </div> - </ion-content> + <br/> + <span style="color:white"> + <h2 style="color:white" class="animated bounce">{{'kInvalidAPIHeader' | translate}}</h2> + <br/> + <h4 style="color:white">{{'kInvalidAPIBody' | translate}}</h4> + + <br/> + <br/> + + <button class="button button-stable animated bounceInUp" ng-click="readFAQ()"> + {{'kInvalidAPIRead' | translate}}</button> + + + </span> + </center> + <br/> + </div> + </ion-content> </ion-view> diff --git a/www/templates/log.html b/www/templates/log.html index 144ada6a..e505bda1 100644 --- a/www/templates/log.html +++ b/www/templates/log.html @@ -1,42 +1,45 @@ <ion-view view-title="{{logEntity}} {{'kLogs' | translate}}"> - <ion-nav-buttons side="left"> - <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - - <button ng-class="selectOn? 'button button-icon button-clear ion-ios-copy':'button button-icon button-clear ion-ios-copy-outline'" ng-click="selectToggle()"></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-arrow-swap" ng-href="" ng-click="flipLogs()"></a> - <a ng-if="logEntity == $root.appName" class="button button-icon icon ion-trash-a" ng-href="" ng-click="deleteLogs()"></a> - <div ng-if="$root.platformOS!='desktop'"> - <a class="button button-icon icon ion-email" ng-href="" ng-click="sendEmail(log.logString)"> </a> - </div> - <div ng-if="$root.platformOS=='desktop'"> - <a class="button button-icon icon ion-android-download" ng-href="" ng-click="sendEmail(log.logString)"> </a> - </div> - </ion-nav-buttons> - <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - - <div ng-if="logEntity=='ZoneMinder'"> - - <button class="button button-small button-stable icon ion-chevron-left" ng-click="changePage(1)"> - </button> - <button class="button button-small button-stable icon ion-chevron-right" ng-click="changePage(-1)"> - </button> - </div> - - <div ng-if="logEntity==$root.appName"> - <b>{{$root.appName}} {{'kVersion'|translate}}: {{zmAppVersion}} ({{$root.platformOS}})</b> - </div> - - <div ng-if="selectOn" class="aside-1">{{'kLogsCopyPaste' | translate }}</div> - <div ng-if="logEntity!=$root.appName"> - <b>ZoneMinder</b> - </div> - - - <br/> - <!-- don't indent here its a pre--> - <pre class="selectable" data-tap-disabled="{{selectOn}}">{{log.logString}}</pre> - </ion-content> + <ion-nav-buttons side="left"> + <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> + + + <button ng-class="selectOn? 'button button-icon button-clear ion-ios-copy':'button button-icon button-clear ion-ios-copy-outline'" + ng-click="selectToggle()"></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-arrow-swap" ng-href="" ng-click="flipLogs()"></a> + <a ng-if="logEntity == $root.appName" class="button button-icon icon ion-trash-a" ng-href="" ng-click="deleteLogs()"></a> + <div ng-if="$root.platformOS!='desktop'"> + <a class="button button-icon icon ion-email" ng-href="" ng-click="sendEmail(log.logString)"> </a> + </div> + <div ng-if="$root.platformOS=='desktop'"> + <a class="button button-icon icon ion-android-download" ng-href="" ng-click="sendEmail(log.logString)"> </a> + </div> + </ion-nav-buttons> + <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + + <div ng-if="logEntity=='ZoneMinder'"> + + <button class="button button-small button-stable icon ion-chevron-left" ng-click="changePage(1)"> + </button> + <button class="button button-small button-stable icon ion-chevron-right" ng-click="changePage(-1)"> + </button> + </div> + + <div ng-if="logEntity==$root.appName"> + <b>{{$root.appName}} {{'kVersion'|translate}}: {{zmAppVersion}} ({{$root.platformOS}})</b> + </div> + + <div ng-if="selectOn" class="aside-1">{{'kLogsCopyPaste' | translate }}</div> + <div ng-if="logEntity!=$root.appName"> + <b>ZoneMinder</b> + </div> + + + <br/> + <!-- don't indent here its a pre--> + <pre class="selectable" data-tap-disabled="{{selectOn}}">{{log.logString}}</pre> + </ion-content> diff --git a/www/templates/login.html b/www/templates/login.html index cbd5a024..e3c6e6fc 100644 --- a/www/templates/login.html +++ b/www/templates/login.html @@ -1,102 +1,110 @@ <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()">{{'kSave' | translate}}</button> - </ion-nav-buttons> - <ion-content 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> + <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()">{{'kSave' | translate}}</button> + </ion-nav-buttons> + <ion-content 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-model="loginData.enableLowBandwidth" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kLowBandwidth'|translate}}</span> + </ion-toggle> + </label> + <label ng-if="loginData.enableLowBandwidth"> + <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> + {{'kZMSettingsFor' | translate}} {{loginData.serverName || ('kUnknown' | translate)}} + </span> + <p ng-if="$root.platformOS!='desktop'" style="font-size:0.8em; color:gray">{{'kDisableSamsung' | translate}}</p> + <div class="item item-text-wrap"> + <ion-checkbox ng-model="loginData.isUseAuth">{{'kUseZmAuth' | translate }}</ion-checkbox> + <div ng-if="loginData.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="{{'kUserName' | translate}}" ng-model="loginData.username"> + </label> + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kPassword' | translate}}</span> + <input type="password" placeholder="{{'kPassword' | translate}}" ng-model="loginData.password"> + </label> </div> - <label> - <ion-toggle ng-model="loginData.enableLowBandwidth" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kLowBandwidth'|translate}}</span> - </ion-toggle> - </label> - <label ng-if="loginData.enableLowBandwidth"> - <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> - {{'kZMSettingsFor' | translate}} {{loginData.serverName || ('kUnknown' | translate)}} - </span> - <p ng-if="$root.platformOS!='desktop'" style="font-size:0.8em; color:gray">{{'kDisableSamsung' | translate}}</p> - <div class="item item-text-wrap"> - <ion-checkbox ng-model="loginData.isUseAuth">{{'kUseZmAuth' | translate }}</ion-checkbox> - <div ng-if="loginData.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="{{'kUserName' | translate}}" ng-model="loginData.username"> - </label> - <label class="item item-input item-floating-label"> - <span class="input-label">{{'kPassword' | translate}}</span> - <input type="password" placeholder="{{'kPassword' | translate}}" ng-model="loginData.password"> - </label> - </div> - </div> + </div> - <div class="item item-text-wrap"> - <ion-checkbox ng-model="loginData.isUseBasicAuth">{{'kUseBasicAuth' | translate }}</ion-checkbox> - <div ng-if="loginData.isUseBasicAuth"> - <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="{{'kUserName' | translate}}" ng-model="loginData.basicAuthUser"> - </label> - <label class="item item-input item-floating-label"> - <span class="input-label">{{'kPassword' | translate}}</span> - <input type="password" placeholder="{{'kPassword' | translate}}" ng-model="loginData.basicAuthPassword"> - </label> - </div> - </div> + <div class="item item-text-wrap"> + <ion-checkbox ng-model="loginData.isUseBasicAuth">{{'kUseBasicAuth' | translate }}</ion-checkbox> + <div ng-if="loginData.isUseBasicAuth"> + <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="{{'kUserName' | translate}}" ng-model="loginData.basicAuthUser"> + </label> + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kPassword' | translate}}</span> + <input type="password" placeholder="{{'kPassword' | translate}}" ng-model="loginData.basicAuthPassword"> + </label> + </div> + </div> - <p ng-if="loginData.isUseBasicAuth" style="font-size:0.8em; color:#e84118">{{'kWarningBasicAuth' | translate}}</p> + <p ng-if="loginData.isUseBasicAuth" style="font-size:0.8em; color:#e84118">{{'kWarningBasicAuth' | translate}}</p> - <label class="item item-input item-floating-label"> - <span class="input-label">{{'kPortalUrl' | translate}}</span> - <input hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kPortalUrlExample' | translate}}" 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 + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kPortalUrl' | translate}}</span> + <input hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kPortalUrlExample' | translate}}" + 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 hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kPathToCgiExample' | translate}}" ng-model="loginData.streamingurl"> - </label> - <label class="item item-input item-floating-label"> - <span class="input-label">{{'kApiUrl' | translate}}</span> - <input hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kApiUrlExample' | translate}}" 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();" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kPassword' | translate}} {{'kProtect'|translate}}</span></ion-toggle> - </label> - </div> - - <div ng-if="$root.platformOS != 'desktop'"> - <label> - <ion-toggle ng-model="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> + <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 hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kPathToCgiExample' | translate}}" + ng-model="loginData.streamingurl"> + </label> + <label class="item item-input item-floating-label"> + <span class="input-label">{{'kApiUrl' | translate}}</span> + <input hidepassword autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="{{'kApiUrlExample' | translate}}" + 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();" toggle-class="toggle-calm"> + <span class="item-text-wrap">{{'kPassword' | translate}} {{'kProtect'|translate}}</span> + </ion-toggle> + </label> + </div> + + <div ng-if="$root.platformOS != 'desktop'"> + <label> + <ion-toggle ng-model="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> diff --git a/www/templates/lowversion.html b/www/templates/lowversion.html index d6b9cb7e..50a3e978 100644 --- a/www/templates/lowversion.html +++ b/www/templates/lowversion.html @@ -1,25 +1,27 @@ <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> - <br/> - <br/> - <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> - <br/> - <h4 style="color:white">{{'kVersionIncompatible' | translate }}</h4> - <br/> - {{'kReportedVersion' | translate}}: <b>{{currentVersion}}</b><br/> - {{'kMinVersion' | translate}}:<b>{{requiredVersion}}</b><br/> - - - </span> - <br/> - </center> + <ion-content class="pin-background"> + <div style="margin-left:20px; margin-right:20px"> + <center> + <br/> + <br/> + <div id="responsive-image"> + <img src="img/authlogo.png"> </div> - </ion-content> + <br/> + <span style="color:white"> + <h2 style="color:white" class="animated bounce">{{'kZMUpgradeNeeded' | translate}}</h2> + <br/> + <h4 style="color:white">{{'kVersionIncompatible' | translate }}</h4> + <br/> {{'kReportedVersion' | translate}}: + <b>{{currentVersion}}</b> + <br/> {{'kMinVersion' | translate}}: + <b>{{requiredVersion}}</b> + <br/> + + + </span> + <br/> + </center> + </div> + </ion-content> </ion-view> diff --git a/www/templates/menu.html b/www/templates/menu.html index 5e189029..3b69b544 100644 --- a/www/templates/menu.html +++ b/www/templates/menu.html @@ -1,150 +1,153 @@ <div ng-controller="MenuController"> -<ion-side-menus delegate-handle="sideMenu" ng-cloak> + <ion-side-menus delegate-handle="sideMenu" ng-cloak> <ion-side-menu-content> - <ion-nav-bar class="bar-stable nav-title-slide-ios7"> - <ion-nav-back-button class="button-icon"> - <span class="icon ion-ios7-arrow-left"></span> - </ion-nav-back-button> - </ion-nav-bar> - <ion-nav-view></ion-nav-view> + <ion-nav-bar class="bar-stable nav-title-slide-ios7"> + <ion-nav-back-button class="button-icon"> + <span class="icon ion-ios7-arrow-left"></span> + </ion-nav-back-button> + </ion-nav-bar> + <ion-nav-view></ion-nav-view> </ion-side-menu-content> <ion-side-menu> - <ion-header-bar class="bar bar-header bar-stable"> - <h1 class="title">{{'kMenuOptions'|translate}}</h1> - </ion-header-bar> - <ion-content has-header="true" mouse-wheel-scroll> - <!-- <ion-scroll scrollbar-y="false" style="height:100%" >--> - <ion-list> - <!--<ion-item ng-click="navigateView('app.montage')" menu-close>--> - <ion-item href="#/app/montage" menu-close> - - <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;"> <i class="icon ion-arrow-graph-down-left"></i> </span>--> - <span class=" item-icon-left"> - <i class="icon ion-grid"></i> - </span>{{'kMenuMontage'|translate}} - </ion-item> - - <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>--> - <ion-item href="#/app/timeline" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-android-time"></i> - </span>{{'kMenuTimeline'|translate}} - </ion-item> - - <!--<ion-item ng-click="navigateView('app.events', {id:0,playEvent:false})" menu-close>--> - <ion-item href="#/app/events/0/false" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-ios-calendar-outline"></i> - </span>{{'kMenuEvents'|translate}} - </ion-item> - - <!--<ion-item ng-click="navigateView('app.moment')" menu-close>--> - <ion-item href="#/app/moment" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-star"></i> - </span>{{'kMoment24Heading'|translate}} - </ion-item> - - <!-- <ion-item ng-click="navigateView('app.montage-history')" menu-close>--> - <ion-item href="#/app/montage-history" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-ios-keypad-outline"></i> - </span>{{'kMenuEventMontage'|translate}} - </ion-item> - - - <!--<ion-item ng-click="navigateView('app.monitors')" menu-close>--> - <ion-item href="#/app/monitors" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-ios-videocam-outline"></i> - </span>{{'kMenuMonitors'|translate}} - </ion-item> - - <!--<ion-item ng-click="navigateView('app.state')" menu-close>--> - <ion-item href="#/app/state" menu-close> - <span class=" item-icon-left"> - <i class="icon ion-information-circled"></i> - </span> {{'kMenuSystemStatus'|translate}} - </ion-item> - - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.login', {wizard:false})" >--> - <ion-item nav-clear menu-close href="#/app/login/false"> - <span class=" item-icon-left"> - <i class="icon ion-person"></i> - {{'kMenuZMSettings'|translate}} - <!--<span class="item-note" style="width:90px"> + <ion-header-bar class="bar bar-header bar-stable"> + <h1 class="title">{{'kMenuOptions'|translate}}</h1> + </ion-header-bar> + <ion-content has-header="true" mouse-wheel-scroll> + <!-- <ion-scroll scrollbar-y="false" style="height:100%" >--> + <ion-list> + <!--<ion-item ng-click="navigateView('app.montage')" menu-close>--> + <ion-item href="#/app/montage" menu-close> + + <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;"> <i class="icon ion-arrow-graph-down-left"></i> </span>--> + <span class=" item-icon-left"> + <i class="icon ion-grid"></i> + </span>{{'kMenuMontage'|translate}} + </ion-item> + + <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>--> + <ion-item href="#/app/timeline" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-android-time"></i> + </span>{{'kMenuTimeline'|translate}} + </ion-item> + + <!--<ion-item ng-click="navigateView('app.events', {id:0,playEvent:false})" menu-close>--> + <ion-item href="#/app/events/0/false" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-ios-calendar-outline"></i> + </span>{{'kMenuEvents'|translate}} + </ion-item> + + <!--<ion-item ng-click="navigateView('app.moment')" menu-close>--> + <ion-item href="#/app/moment" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-star"></i> + </span>{{'kMoment24Heading'|translate}} + </ion-item> + + <!-- <ion-item ng-click="navigateView('app.montage-history')" menu-close>--> + <ion-item href="#/app/montage-history" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-ios-keypad-outline"></i> + </span>{{'kMenuEventMontage'|translate}} + </ion-item> + + + <!--<ion-item ng-click="navigateView('app.monitors')" menu-close>--> + <ion-item href="#/app/monitors" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-ios-videocam-outline"></i> + </span>{{'kMenuMonitors'|translate}} + </ion-item> + + <!--<ion-item ng-click="navigateView('app.state')" menu-close>--> + <ion-item href="#/app/state" menu-close> + <span class=" item-icon-left"> + <i class="icon ion-information-circled"></i> + </span> {{'kMenuSystemStatus'|translate}} + </ion-item> + + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.login', {wizard:false})" >--> + <ion-item nav-clear menu-close href="#/app/login/false"> + <span class=" item-icon-left"> + <i class="icon ion-person"></i> + {{'kMenuZMSettings'|translate}} + <!--<span class="item-note" style="width:90px"> {{$root.getProfileName();}} </span>--> - <span style="float:right; margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:center;"> {{$root.getProfileName();}} </span> - </span> - </ion-item> - - <ion-item nav-clear menu-close href="#/app/devoptions"> - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.devoptions')">--> - <span class=" item-icon-left"> - <i class="icon ion-settings"></i> - </span> {{'kMenuDevSettings'|translate}} - </ion-item> - - <ion-item ng-click="switchLang()" nav-clear menu-close> - <span class=" item-icon-left"> - <i class="icon ion-earth"></i> - </span> {{'kLanguage'|translate}} - </ion-item> - - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.help')" >--> - <ion-item nav-clear menu-close href="#/app/help"> - <span class=" item-icon-left"> - <i class="icon ion-help"></i> - </span> {{'kMenuHelp'|translate}} - </ion-item> - - - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.wizard')" >--> - <ion-item nav-clear menu-close href="#/app/wizard"> - <span class=" item-icon-left"> - <i class="icon ion-wand"></i> - </span> {{'kMenuWizard'|translate}} - </ion-item> - - <div ng-if="$root.showBlog"> - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.news')" >--> - <ion-item nav-clear menu-close href="#/app/news"> - <span class=" item-icon-left"> - <i class="icon ion-radio-waves"></i> - </span>{{'kMenuNews'|translate}}<span style="color:#268d3a;"> {{$root.newBlogPost}}</span> - </ion-item> - </div> - - <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >--> - <ion-item nav-clear menu-close href="#/app/log"> - <span class=" item-icon-left"> - <i class="icon ion-clipboard"></i> - </span> {{'kMenuLogs'|translate}} - </ion-item> - - <div ng-if="$root.newVersionAvailable && $root.platformOS=='desktop'"> - <ion-item nav-clear menu-close href=""> - <span class=" item-icon-left"> - <i class="icon ion-email-unread"></i> - </span> <span style="color:#268d3a;">{{$root.newVersionAvailable}}</span> - </ion-item> - </div> - <div ng-if="$root.platformOS=='android'"> - <ion-item ng-click="$root.exitApp();"> - <span class=" item-icon-left"> - <i class="icon ion-close-circled"></i> - </span> {{'kMenuExit'|translate}} - </ion-item> - </div> - <ion-item style="color:rgb(106, 106, 106); font-size:90%;"> - <i class="ion-ios-location"></i> {{$root.getLocalTimeZone();}} - <br/> - <span ng-if="$root.isTzSupported()"><i class="icon icon-server"></i> {{$root.getServerTimeZoneNow();}} </span> - </ion-item> - </ion-list> - <!--</ion-scroll>--> - </ion-content> + <span style="float:right; margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:center;"> {{$root.getProfileName();}} </span> + </span> + </ion-item> + + <ion-item nav-clear menu-close href="#/app/devoptions"> + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.devoptions')">--> + <span class=" item-icon-left"> + <i class="icon ion-settings"></i> + </span> {{'kMenuDevSettings'|translate}} + </ion-item> + + <ion-item ng-click="switchLang()" nav-clear menu-close> + <span class=" item-icon-left"> + <i class="icon ion-earth"></i> + </span> {{'kLanguage'|translate}} + </ion-item> + + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.help')" >--> + <ion-item nav-clear menu-close href="#/app/help"> + <span class=" item-icon-left"> + <i class="icon ion-help"></i> + </span> {{'kMenuHelp'|translate}} + </ion-item> + + + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.wizard')" >--> + <ion-item nav-clear menu-close href="#/app/wizard"> + <span class=" item-icon-left"> + <i class="icon ion-wand"></i> + </span> {{'kMenuWizard'|translate}} + </ion-item> + + <div ng-if="$root.showBlog"> + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.news')" >--> + <ion-item nav-clear menu-close href="#/app/news"> + <span class=" item-icon-left"> + <i class="icon ion-radio-waves"></i> + </span>{{'kMenuNews'|translate}} + <span style="color:#268d3a;"> {{$root.newBlogPost}}</span> + </ion-item> + </div> + + <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >--> + <ion-item nav-clear menu-close href="#/app/log"> + <span class=" item-icon-left"> + <i class="icon ion-clipboard"></i> + </span> {{'kMenuLogs'|translate}} + </ion-item> + + <div ng-if="$root.newVersionAvailable && $root.platformOS=='desktop'"> + <ion-item nav-clear menu-close href=""> + <span class=" item-icon-left"> + <i class="icon ion-email-unread"></i> + </span> + <span style="color:#268d3a;">{{$root.newVersionAvailable}}</span> + </ion-item> + </div> + <div ng-if="$root.platformOS=='android'"> + <ion-item ng-click="$root.exitApp();"> + <span class=" item-icon-left"> + <i class="icon ion-close-circled"></i> + </span> {{'kMenuExit'|translate}} + </ion-item> + </div> + <ion-item style="color:rgb(106, 106, 106); font-size:90%;"> + <i class="ion-ios-location"></i> {{$root.getLocalTimeZone();}} + <br/> + <span ng-if="$root.isTzSupported()"> + <i class="icon icon-server"></i> {{$root.getServerTimeZoneNow();}} </span> + </ion-item> + </ion-list> + <!--</ion-scroll>--> + </ion-content> </ion-side-menu> -</ion-side-menus> + </ion-side-menus> </div> diff --git a/www/templates/moment-mask.html b/www/templates/moment-mask.html index 51657b19..6493e4be 100644 --- a/www/templates/moment-mask.html +++ b/www/templates/moment-mask.html @@ -1,24 +1,30 @@ <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="saveMask()"></button> - <button class="button button-icon icon ion-close" ng-click="cancelMask()"></button> - </div> - </ion-header-bar> - <ion-content> - <div class="list"> - <span ng-repeat="item in monitors"> - - <a ng-class="{ 'item item-icon-right' : item.Monitor.listDisplay == 'show', 'item item-icon-right eye-background-red' : item.Monitor.listDisplay!='show' }" ng-click="toggleHide($index)" href="" > + <ion-header-bar class="bar-stable"> + <h1 class="title"></h1> + <div class="buttons"> + <button class="button button-icon icon ion-checkmark" ng-click="saveMask()"></button> + <button class="button button-icon icon ion-close" ng-click="cancelMask()"></button> + </div> + </ion-header-bar> + <ion-content> + <div class="list"> + <span ng-repeat="item in monitors"> - + <a ng-class="{ 'item item-icon-right' : item.Monitor.listDisplay == 'show', 'item item-icon-right eye-background-red' : item.Monitor.listDisplay!='show' }" + ng-click="toggleHide($index)" href=""> - <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','eye-red icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> </i><h2><span ng-class="{'eye-red':item.Monitor.listDisplay!='show'}">{{item.Monitor.Name}}</span></h2><p>{{'kId' | translate}}:{{item.Monitor.Id}}, {{'kMode' | translate}}:{{item.Monitor.Function}}</p> - - </a> - - </span> - </div> - </ion-content> + + + <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','eye-red icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> + </i> + <h2> + <span ng-class="{'eye-red':item.Monitor.listDisplay!='show'}">{{item.Monitor.Name}}</span> + </h2> + <p>{{'kId' | translate}}:{{item.Monitor.Id}}, {{'kMode' | translate}}:{{item.Monitor.Function}}</p> + + </a> + + </span> + </div> + </ion-content> </ion-modal-view> diff --git a/www/templates/moment-popover.html b/www/templates/moment-popover.html index 6d2f49fc..8cc8cab4 100644 --- a/www/templates/moment-popover.html +++ b/www/templates/moment-popover.html @@ -1,18 +1,23 @@ <ion-popover-view class="fit"> - <ion-content> - <div class="list" ng-click="popover.remove()"> - - <a class="item" ng-href="" ng-click="popover.remove();getMoments('StartTime');"> - {{'kMomentMenuByTime' | translate}} <i ng-if="::isChecked('kMomentMenuByTime')" class="ion-checkmark"></i> - - </a> + <ion-content> + <div class="list" ng-click="popover.remove()"> - <a class="item" ng-href="" ng-click="popover.remove();getMoments('monitorName');">{{'kMomentMenuByMonitor' | translate}} <i ng-if="::isChecked('kMomentMenuByMonitor')" class="ion-checkmark"></i></a> + <a class="item" ng-href="" ng-click="popover.remove();getMoments('StartTime');"> + {{'kMomentMenuByTime' | translate}} + <i ng-if="::isChecked('kMomentMenuByTime')" class="ion-checkmark"></i> + </a> - <a class="item" ng-href="" ng-click="popover.remove();getMoments('MaxScore');">{{'kMomentMenuByScore' | translate}} <i ng-if="::isChecked('kMomentMenuByScore')" class="ion-checkmark"></i></a> + <a class="item" ng-href="" ng-click="popover.remove();getMoments('monitorName');">{{'kMomentMenuByMonitor' | translate}} + <i ng-if="::isChecked('kMomentMenuByMonitor')" class="ion-checkmark"></i> + </a> - - </div> - </ion-content> + + <a class="item" ng-href="" ng-click="popover.remove();getMoments('MaxScore');">{{'kMomentMenuByScore' | translate}} + <i ng-if="::isChecked('kMomentMenuByScore')" class="ion-checkmark"></i> + </a> + + + </div> + </ion-content> </ion-popover-view> diff --git a/www/templates/moment.html b/www/templates/moment.html index f349bba5..6bc8d5da 100644 --- a/www/templates/moment.html +++ b/www/templates/moment.html @@ -1,8 +1,10 @@ <ion-view cache-view="false"> - <ion-nav-title><i class="{{typeIcon}}"></i> {{'kMoment24Heading' | translate}}</ion-nav-title> + <ion-nav-title> + <i class="{{typeIcon}}"></i> {{'kMoment24Heading' | translate}}</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 button-clear ion-gear-b" ng-click="hideUnhide()"></button> + + <button class="button button-icon button-clear ion-gear-b" ng-click="hideUnhide()"></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> @@ -25,10 +27,10 @@ <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444"> - <div ng-if="areImagesLoading" class="screen-note"> {{ 'kArrangingImages' | translate }}... </div> + <div ng-if="areImagesLoading" class="screen-note"> {{ 'kArrangingImages' | translate }}... </div> + + <div ng-if="!areImagesLoading && !isMaxScoreFramePresent" class="screen-note"> {{ 'kApiUpgrade' | translate }} </div> - <div ng-if="!areImagesLoading && !isMaxScoreFramePresent" class="screen-note"> {{ 'kApiUpgrade' | translate }} </div> - <div ng-if="isSubMenu"> <br/> <div id="flyoutmenu" style="float:left"> @@ -49,9 +51,9 @@ </a> </li> <li> - <a href="" ng-click="toggleExpandOrCollapse()"> - <i ng-class="expand ? 'ion-arrow-expand':'ion-arrow-shrink'"></i> - </a> + <a href="" ng-click="toggleExpandOrCollapse()"> + <i ng-class="expand ? 'ion-arrow-expand':'ion-arrow-shrink'"></i> + </a> </li> <li> <a href="" ng-click="toggleIcons()"> @@ -65,17 +67,20 @@ <ul> <li> <a href="" ng-click="changeFrom(-1)"> - <i class="ion-chevron-left"></i> + + <i class="ion-chevron-left"></i> </a> </li> <li> <a href="" ng-click="getMoments()"> - <i class="ion-location"></i> + + <i class="ion-location"></i> </a> </li> <li> <a href="" ng-click="changeFrom(1)"> - <i class="ion-chevron-right"></i> + + <i class="ion-chevron-right"></i> </a> </li> @@ -99,13 +104,14 @@ <span style="float:right"> <button class="button button-small button-icon icon {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id)"></button>{{moment.Event.collapseCount}} </span> </figcaption> - <img image-spinner-src="{{constructFrame(moment)}}" - img-spinner-w="{{moment.Event.width}}" img-spinner-h="{{moment.Event.height}}" image-spinner-loader="lines" on-tap="playEvent(moment)" on-swipe-left="showThumbnail(moment.Event.baseURL,moment.Event.MaxScoreFrameId)" + <img image-spinner-src="{{constructFrame(moment)}}" img-spinner-w="{{moment.Event.width}}" img-spinner-h="{{moment.Event.height}}" + image-spinner-loader="lines" on-tap="playEvent(moment)" on-swipe-left="showThumbnail(moment.Event.baseURL,moment.Event.MaxScoreFrameId)" /> - <div ng-if="showIcons" class="normal-subfigcaption" > - <button ng-class="moment.Event.pinned? 'button button-small button-icon icon ion-ios-flag assertive': 'button button-small button-icon icon ion-pin'" ng-click="togglePin(moment.Event.Id)"></button> - + <div ng-if="showIcons" class="normal-subfigcaption"> + <button ng-class="moment.Event.pinned? 'button button-small button-icon icon ion-ios-flag assertive': 'button button-small button-icon icon ion-pin'" + ng-click="togglePin(moment.Event.Id)"></button> + </div> <!--on-tap="showThumbnail(moment.Event.baseURL,moment.Event.MaxScoreFrameId)"--> <figcaption ng-if="showIcons" class="normal-figcaption"> {{moment.Event.humanizeTime}} diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 65d70dd4..980e2384 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -10,7 +10,7 @@ <div id="monitorimage" style="height: 100vh;" class="main"> <div ng-if="$root.authSession!='undefined'"> <div ng-if="!animationInProgress"> - + <!--<span style="color:white">{{currentStreamMode}}</span>--> <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{constructSingleStream()}}" @@ -29,7 +29,7 @@ </ion-scroll> - + <!-- egads, ion-scroll is a bind-on-start directive, so I have to repeat this thanks to zooming = false. Must be a better way --> <ion-scroll ng-if="isZoneEdit" delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="false" direction="xy" style="width: 100%;" @@ -90,7 +90,7 @@ </ion-scroll> <button ng-if="!ptzButtonsShown" class="button {{ptzPresets[0].icon}} button-small {{ptzPresets[0].style}}" style="float:left;margin-right:10px;margin-bottom:10px;" - ng-click="controlPTZ(monitorId, ptzPresets[0].cmd);">{{ptzPresets[0].name}}</button> + ng-click="controlPTZ(monitorId, ptzPresets[0].cmd);">{{ptzPresets[0].name}}</button> </div> @@ -158,7 +158,7 @@ </a> </li> - <!-- <li ng-if="isToggleListMenu"> + <!-- <li ng-if="isToggleListMenu"> <a href="" ng-click="toggleZone()"> <i class="icon ion-qr-scanner"></i> </a> @@ -183,7 +183,7 @@ </a> </li> - <li ng-if="isToggleListMenu" ng-style="{'background-color': isCycle?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}" > + <li ng-if="isToggleListMenu" ng-style="{'background-color': isCycle?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}"> <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> </li> diff --git a/www/templates/monitors.html b/www/templates/monitors.html index f9b92e86..2bd5d819 100644 --- a/www/templates/monitors.html +++ b/www/templates/monitors.html @@ -1,62 +1,64 @@ <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 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> + <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 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 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"> + <i class="icon {{monitor.Monitor.char}}" ng-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> - <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"> - <i class="icon {{monitor.Monitor.char}}" ng-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 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="#/app/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 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="#/app/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> - <ion-item ng-show="!monitors.length"> - {{'kNoMonitors' | translate}} - </ion-item> - </ion-content> + </div> + </div> + <ion-item ng-show="!monitors.length"> + {{'kNoMonitors' | translate}} + </ion-item> + </ion-content> </ion-view> diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html index 67f84630..742aeccc 100644 --- a/www/templates/montage-history.html +++ b/www/templates/montage-history.html @@ -12,8 +12,7 @@ <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 has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false" - mouse-wheel-scroll> + <ion-content 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="!isMultiPort">({{'kChromeMax' | translate}})</div> </div> @@ -115,7 +114,7 @@ </div> ({{humanizeTime(datetimeValueFrom.value)}}) </ion-item> - + <div class="row"> <div class="col col-75"> <br/> diff --git a/www/templates/montage.html b/www/templates/montage.html index 139799e7..876e1125 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -1,155 +1,182 @@ -<ion-view cache-view="false" hide-nav-bar="{{minimal}}"> - <ion-nav-title>{{currentProfileName}}</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 button-clear ion-eye" ng-click="hideUnhide();"> - </button> - <button class="button button-icon button-clear ion-chevron-down" ng-click="toggleSubMenuFunction();"> - </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> - <!-- +<ion-view cache-view="false" hide-nav-bar="{{minimal}}"> + <ion-nav-title>{{currentProfileName}}</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 button-clear ion-eye" ng-click="hideUnhide();"> + </button> + <button class="button button-icon button-clear ion-chevron-down" ng-click="toggleSubMenuFunction();"> + </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 ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false"> - - <div ng-if="areImagesLoading" class="screen-note"> {{ 'kArrangingImages' | translate }}... </div> - - - <div ng-if="!minimal && toggleSubMenu" > - <!-- this is header --> - <br/> - <div id="flyoutmenu" style="float:left"> - <ul> - <!-- <li> + <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 ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false"> + + <div ng-if="areImagesLoading" class="screen-note"> {{ 'kArrangingImages' | translate }}... </div> + + + <div ng-if="!minimal && toggleSubMenu"> + <!-- this is header --> + <br/> + <div id="flyoutmenu" style="float:left"> + <ul> + <!-- <li> <a href="" ng-click="killAllImages()"> <i class="ion-ionic"></i></a> </li>--> - <li> - <a href="" ng-click="sliderChanged(1)"> <i class="ion-plus-circled"></i></a> - </li> - <li> - <a href="" ng-click="sliderChanged(-1)"> <i class="ion-minus-circled"></i></a> - </li> - <li> - <a href="" ng-click="squeezeMonitors()"> <i class="ion-android-apps"></i></a> - </li> - - <li ng-style="{'background-color': isCycleOn()?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}" ng-if="!isDragabillyOn"> - <a href="" ng-click="toggleCycle()"> <i class="ion-android-bicycle"></i>:{{getCycleStatus()}}</a> - </li> - - <li ng-if="isDragabillyOn"> - <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i></a> - </li> - <li ng-if="isDragabillyOn"> - <a href="" ng-click="toggleStamp()"> <i class="ion-pin"></i></a> - </li> - - </ul> - </div> + <li> + <a href="" ng-click="sliderChanged(1)"> + <i class="ion-plus-circled"></i> + </a> + </li> + <li> + <a href="" ng-click="sliderChanged(-1)"> + <i class="ion-minus-circled"></i> + </a> + </li> + <li> + <a href="" ng-click="squeezeMonitors()"> + <i class="ion-android-apps"></i> + </a> + </li> + + <li ng-style="{'background-color': isCycleOn()?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}" ng-if="!isDragabillyOn"> + <a href="" ng-click="toggleCycle()"> + <i class="ion-android-bicycle"></i>:{{getCycleStatus()}}</a> + </li> + + <li ng-if="isDragabillyOn"> + <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> + <i class="ion-close-circled"></i> + </a> + </li> + <li ng-if="isDragabillyOn"> + <a href="" ng-click="toggleStamp()"> + <i class="ion-pin"></i> + </a> + </li> + + </ul> + </div> + + <div id="flyoutmenu" style="float:right"> + <ul> + <li> + <a href="" ng-click="switchMontageProfile()"> + <i class="ion-navicon-round"></i> + </a> + </li> + + <li> + <a href="" ng-click="saveMontageProfile()"> + <i class="ion-heart"></i> + </a> + </li> + + <li> + <a href="" ng-click="deleteMontageProfile()"> + <i class="ion-trash-a"></i> + </a> + </li> + + + </ul> + </div> + <div style="clear: both;"></div> + + <br/> + </div> + <!-- now lets draw the montage windows --> + <div class="grid" id="mygrid"> + <div class="grid-sizer grid-item-5"></div> + <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" + ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.Enabled !='0' ">--> - <div id="flyoutmenu" style="float:right"> - <ul> - <li> - <a href="" ng-click="switchMontageProfile()"> <i class="ion-navicon-round"></i></a> - </li> - <li> - <a href="" ng-click="saveMontageProfile()"> <i class="ion-heart"></i></a> - </li> - <li> - <a href="" ng-click="deleteMontageProfile()"> <i class="ion-trash-a"></i></a> - </li> - + <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit"> + <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" + data-item-listdisplay="{{monitor.Monitor.listDisplay}} "> - </ul> - </div> - <div style="clear: both;"></div> + <!-- <figure> + <iframe width="200" height="100" src="https://news.google.com" frameborder="2" ></iframe> + </figure>--> - <br/> - </div> - <!-- now lets draw the montage windows --> - <div class="grid" id="mygrid"> - <div class="grid-sizer grid-item-5"></div> - <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" - ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.Enabled !='0' ">--> - + <figure class="{{dragBorder}}" ng-show="monitor.Monitor.listDisplay!='noshow'"> + <!--<div ng-if="!isModalActive" >--> + <!--<div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading">--> - <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit"> - <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}} "> + <div ng-if="!minimal"> + <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);" + image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" + /> - <!-- <figure> - <iframe width="200" height="100" src="https://news.google.com" frameborder="2" ></iframe> - </figure>--> + </div> + + <div ng-if="minimal"> + <img id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);" + image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" + /> + </div> - <figure class="{{dragBorder}}" ng-show="monitor.Monitor.listDisplay!='noshow'"> - <!--<div ng-if="!isModalActive" >--> - <!--<div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading">--> - - <div ng-if = "!minimal" > - <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);" image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" /> - - </div> - <div ng-if = "minimal"> - <img id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);" image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" /> - </div> - - + <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'"> - <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'" > - - <span ng-if="monitor.Monitor.isStamp && isDragabillyOn"><i class="animated infinite flash ion-pin"></i> </span><i class="ion-ios-videocam"></i> - {{monitor.Monitor.Name}} <i ng-if="$root.runMode!='lowbw'" ng-style="{'color':monitor.Monitor.alarmState}" class="ion-record"></i> + <span ng-if="monitor.Monitor.isStamp && isDragabillyOn"> + <i class="animated infinite flash ion-pin"></i> </span> + <i class="ion-ios-videocam"></i> {{monitor.Monitor.Name}} + <i ng-if="$root.runMode!='lowbw'" ng-style="{'color':monitor.Monitor.alarmState}" class="ion-record"></i> - </figcaption> + </figcaption> + + </figure> - </figure> - - </div> - </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 }} + </span> + <!-- ngrepeat --> </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)"> - </button> - <!-- <button mfb-button icon="ion-refresh" label="{{'kRefresh' | translate}}" ng-click="resetSizes();"> + <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> + <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)"> + </button> + <!-- <button mfb-button icon="ion-refresh" label="{{'kRefresh' | translate}}" ng-click="resetSizes();"> </button>--> - <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/> + <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> diff --git a/www/templates/news.html b/www/templates/news.html index 98d0af12..2512bb4c 100644 --- a/www/templates/news.html +++ b/www/templates/news.html @@ -1,24 +1,25 @@ <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 delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> - - <div class="list"> - - <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}} - <p>{{post.date}}</p> - - </a> - - </span> - <div ng-if="!newsItems.length"> - <ion-item>{{'kLoading' | translate}}...</ion-item> - </div> - </div> - </ion-content> + <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 delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll> + + <div class="list"> + + <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}} + <p>{{post.date}}</p> + + </a> + + </span> + <div ng-if="!newsItems.length"> + <ion-item>{{'kLoading' | translate}}...</ion-item> + </div> + </div> + </ion-content> </ion-view> diff --git a/www/templates/refresh.html b/www/templates/refresh.html index e320f99b..d9081ffa 100644 --- a/www/templates/refresh.html +++ b/www/templates/refresh.html @@ -1,17 +1,17 @@ <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> - <br/> - <br/> - <br/> - <span style="color:white"> - <h4 style="color:rgb(156, 156, 156)">{{'kLoading' | translate}}</h2> - - - </span> - <br/> - </center> - </div> - </ion-content> + <ion-content class="pin-background"> + <div style="margin-left:20px; margin-right:20px"> + <center> + <br/> + <br/> + <br/> + <span style="color:white"> + <h4 style="color:rgb(156, 156, 156)">{{'kLoading' | translate}}</h2> + + + </span> + <br/> + </center> + </div> + </ion-content> </ion-view> diff --git a/www/templates/reorder-modal.html b/www/templates/reorder-modal.html index 4ed54fb6..d60133d9 100644 --- a/www/templates/reorder-modal.html +++ b/www/templates/reorder-modal.html @@ -1,23 +1,29 @@ <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> - </ion-header-bar> - <ion-content> - <div class="list"> - <span ng-repeat="item in copyMontage"> - <a ng-class="{ 'item item-avatar item-icon-right' : item.Monitor.listDisplay == 'show', 'item item-avatar item-icon-right eye-background-red' : item.Monitor.listDisplay!='show' }" ng-click="toggleHide($index)" href="" > + <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> + </ion-header-bar> + <ion-content> + <div class="list"> + <span ng-repeat="item in copyMontage"> + <a ng-class="{ 'item item-avatar item-icon-right' : item.Monitor.listDisplay == 'show', 'item item-avatar item-icon-right eye-background-red' : item.Monitor.listDisplay!='show' }" + ng-click="toggleHide($index)" href=""> - <img src="{{reorderFrame(item)}}" fallback-src /> + <img src="{{reorderFrame(item)}}" fallback-src /> - <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','eye-red icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> </i><h2><span ng-class="{'eye-red':item.Monitor.listDisplay!='show'}">{{item.Monitor.Name}}</span></h2><p>{{'kId' | translate}}:{{item.Monitor.Id}}, {{'kMode' | translate}}:{{item.Monitor.Function}}</p> - - </a> - - </span> - </div> - </ion-content> + <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','eye-red icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> + </i> + <h2> + <span ng-class="{'eye-red':item.Monitor.listDisplay!='show'}">{{item.Monitor.Name}}</span> + </h2> + <p>{{'kId' | translate}}:{{item.Monitor.Id}}, {{'kMode' | translate}}:{{item.Monitor.Function}}</p> + + </a> + + </span> + </div> + </ion-content> </ion-modal-view> diff --git a/www/templates/state.html b/www/templates/state.html index bb41b876..d227bb5b 100644 --- a/www/templates/state.html +++ b/www/templates/state.html @@ -1,40 +1,41 @@ <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 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"> - <div class="col col-10"> - <i class="ion-home" style="font-size:150%;"></i> - </div> - <div class="col"> - ZoneMinder: - </div> + <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 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"> + <div class="col col-10"> + <i class="ion-home" style="font-size:150%;"></i> + </div> + <div class="col"> + ZoneMinder: + </div> - <div class="col" ng-style="{'text-align':'right','color':color}"> - {{zmRun}} - <p>{{customState}}</p> - </div> - </div> - </ion-item> - <ion-item> - <div class="row"> - <div class="col col-10"> - <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;"> - {{zmLoad}} - </div> - </div> - </ion-item> - <!-- + <div class="col" ng-style="{'text-align':'right','color':color}"> + {{zmRun}} + <p>{{customState}}</p> + </div> + </div> + </ion-item> + <ion-item> + <div class="row"> + <div class="col col-10"> + <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;"> + {{zmLoad}} + </div> + </div> + </ion-item> + <!-- <ion-item> <div class="row"> <div class="col col-10"> @@ -51,21 +52,21 @@ </div> </ion-item> --> - <ion-item> - <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 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="controlZM('start');" href="">{{'kStart' | translate}}</a> - </div> - </div> - </div> - </ion-item> - </ion-list> - </ion-content> + <ion-item> + <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 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="controlZM('start');" href="">{{'kStart' | translate}}</a> + </div> + </div> + </div> + </ion-item> + </ion-list> + </ion-content> </ion-view> diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html index a728541f..64b854ff 100644 --- a/www/templates/timeline-modal.html +++ b/www/templates/timeline-modal.html @@ -1,46 +1,50 @@ <!-- 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> - </div> - <center> - <h5>{{'kEvent' | translate}} {{graphType}} {{'kFrames' | translate}} </h5> - <p>{{'kTimelineMessage' | translate}}</p> - {{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> - <div style="height:190px;"> - <!-- <ion-scroll direction="x" class="wide-as-needed">--> - <span ng-repeat="alarm in alarm_images"> - - - <figure style="display:inline-block"> - <figcaption class="smallnote">f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</figcaption> - <img image-spinner-src="{{constructFrames(event,alarm)}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)" image-spinner-loader="lines"/> - - - </figure> - - </span> - <!--</ion-scroll>--> - </div> - </div> - - - </ion-content> - - <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <a mfb-button icon="ion-close" label="{{'kExit' | translate}}" ng-click="closeModal()"> </a> - - </nav> + <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> + </div> + <center> + <h5>{{'kEvent' | translate}} {{graphType}} {{'kFrames' | translate}} </h5> + <p>{{'kTimelineMessage' | translate}}</p> + {{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> + <div style="height:190px;"> + <!-- <ion-scroll direction="x" class="wide-as-needed">--> + <span ng-repeat="alarm in alarm_images"> + + + <figure style="display:inline-block"> + <figcaption class="smallnote">f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</figcaption> + <img image-spinner-src="{{constructFrames(event,alarm)}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" + on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)" + image-spinner-loader="lines" /> + + + </figure> + + </span> + <!--</ion-scroll>--> + </div> + </div> + + + </ion-content> + + <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" + toggling-method="click"> + <a mfb-button icon="ion-close" label="{{'kExit' | translate}}" ng-click="closeModal()"> </a> + + </nav> </ion-modal-view> diff --git a/www/templates/timeline-popover.html b/www/templates/timeline-popover.html index 373ea09e..b1bd802e 100644 --- a/www/templates/timeline-popover.html +++ b/www/templates/timeline-popover.html @@ -1,21 +1,21 @@ <ion-popover-view class="fit"> - <ion-content> + <ion-content> - <div class="list" ng-click="popover.hide()"> - + <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();buttonClicked(0);">{{'kMonth' | translate}}</a> - <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);"> - {{'kCustomRange' | translate}} - </a> - </div> - </ion-content> + + <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();buttonClicked(0);">{{'kMonth' | translate}}</a> + <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);"> + {{'kCustomRange' | translate}} + </a> + </div> + </ion-content> </ion-popover-view> diff --git a/www/templates/timeline.html b/www/templates/timeline.html index 80f83e8a..34847eea 100644 --- a/www/templates/timeline.html +++ b/www/templates/timeline.html @@ -38,9 +38,9 @@ <br/> <div style="padding-left:15px; font-size:10px; color:grey"> - <button ng-click="toggleTap()" class="button button-small button-dark"> - {{'kTimelineTap' | translate}}:{{onTap}} - </button> + <button ng-click="toggleTap()" class="button button-small button-dark"> + {{'kTimelineTap' | translate}}:{{onTap}} + </button> <button ng-click="toggleFollowTime()" ng-class="follow.time? 'button button-small button-balanced':'button button-small button-assertive'"> {{'kUpdateTimeline' | translate}}: {{follow.time? ('kTrue' | translate) : ('kFalse' | translate)}} diff --git a/www/templates/wizard.html b/www/templates/wizard.html index 7c6dc887..c7b3694b 100644 --- a/www/templates/wizard.html +++ b/www/templates/wizard.html @@ -1,87 +1,100 @@ <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="{{'kPortalUrlExample' | translate}}" 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" toggle-class="toggle-calm">{{'kWizUseAuth' | translate}}</ion-toggle> - <ion-toggle ng-show="wizard.useauth" ng-model="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" toggle-class="toggle-calm">{{'kWizBasicAuth' | translate}}<p ng-show="wizard.usebasicauth">{{'kWarningBasicAuth'|translate}}</p></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" ng-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" ng-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" ng-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-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="{{'kPortalUrlExample' | translate}}" + 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" toggle-class="toggle-calm">{{'kWizUseAuth' | translate}}</ion-toggle> + <ion-toggle ng-show="wizard.useauth" ng-model="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" toggle-class="toggle-calm">{{'kWizBasicAuth' | translate}} + <p ng-show="wizard.usebasicauth">{{'kWarningBasicAuth'|translate}}</p> + </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" ng-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" ng-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" ng-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> diff --git a/www/templates/zm-portal-login.html b/www/templates/zm-portal-login.html index 877dbb97..903ae7c6 100644 --- a/www/templates/zm-portal-login.html +++ b/www/templates/zm-portal-login.html @@ -1,26 +1,27 @@ <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/> - <br/> - <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> - </center> + <ion-content class="pin-background" scroll="false"> + <div style="margin-left:20px; margin-right:20px"> + <center> + <br/> + <br/> + <div id="responsive-image"> + <img src="img/authlogo.png"> </div> - </ion-content> + <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> + </center> + </div> + </ion-content> </ion-view> |