From 27d1b22de74f6c6407d5a739772726a357cfe541 Mon Sep 17 00:00:00 2001
From: pliablepixels <pliablepixels@gmail.com>
Date: Mon, 25 Jan 2016 17:03:58 -0500
Subject: #154  - initial layout code for montage history

Former-commit-id: d5780a330a1a3eb1ccf83b31f6317dc580cd0d5a
---
 www/templates/montage-history.html | 178 +++++++++++++++++++++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 www/templates/montage-history.html

(limited to 'www/templates')

diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
new file mode 100644
index 00000000..620f8386
--- /dev/null
+++ b/www/templates/montage-history.html
@@ -0,0 +1,178 @@
+<ion-view title="Montage" cache-view="false" hide-nav-bar="{{minimal}}">
+    <ion-nav-buttons side="left">
+        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+        
+        
+        
+        
+        <button 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 ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'"
+                ng-click="toggleMontageDisplayOrder();">&nbsp;
+        </button>
+        
+        <span class="rotate-button">
+                <button class="button button-icon button-clear ion-arrow-swap"
+                        ng-click="toggleReorder();">
+                </button>
+        </span>   
+
+  
+        <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
+        </button>
+        <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
+        
+        
+        
+    </ion-nav-buttons>
+
+    <ion-content has-bouncing="false" style="background-color:#444444">
+
+        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()">
+        </ion-refresher>
+        
+        
+         
+
+
+        <span ng-show="!minimal">
+                <div class="range range-positive">
+                    <i style="color:#bbbbbb" class="icon ion-image"></i>
+                    <input type="range" ng-model="slider.monsize" min="1"
+                           max="10" ng-change="sliderChanged(slider.monsize)">
+                    <i style="color:#bbbbbb" class="icon ion-grid"></i>
+
+                </div>
+        </span>
+
+       <div ng-style="packMontage ? { '-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','-webkit-column-fill': 'balance', 'column-fill': 'balance' } : {'-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap' }">
+           
+              <!--<div ng-style="packMontage ? { '-webkit-column-count':slider.monsize, '-webkit-column-gap':'0px','line-height':'0px' } : { 'flex':'display', '-webkit-column-count':slider.monsize }">-->
+            
+            
+            <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" 
+                  ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
+     
+            <!-- back to ng-src. spinner was not updating when rand changes-->
+            <!-- moving to single so I can rely on rand for reloads -->
+                
+                
+                <!--src=" /zm/cgi-bin/nph-zms?source=event&mode=jpeg&event=7664&frame=1&scale=100&rate=100&maxfps=5&replay=gapless&auth=6b8c60f81fa2edff94f80f12bdebd98d&connkey=286643&rand=1453671607"
+
+
+https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20=:2016-01-25.json
+
+Events started in X-X+30
+https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20%3E=:2016-01-25%2000:00:00/StartTime%20%3C=:2016-01-25%2000:30:00.json
+-->
+                
+                <div style="position: relative;width:{{devWidth/slider.monsize}}px;">
+                    <div ng-if="!isModalActive">
+                        <div ng-if="$root.authSession!='undefined' && !isBackground()">
+                            <div ng-if = "!minimal">
+                                <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}"  image-spinner-loader="lines" style="
+        width: 100% !important;
+        height: auto !important;" />
+                            </div>
+                            
+                            <div ng-if = "minimal">
+                                <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}"   image-spinner-loader="lines" style="margin-top:0px;
+        width: 100% !important;
+        height: auto !important;" />
+                            </div>
+                            
+
+                        </div>
+
+                        <div ng-if="!$root.authSession=='undefined' || isBackground()">
+                            <img id="img-$index" image-spinner-src="img/pausevideo.png" style="width: 100% !important;
+  height: auto !important;" />
+                        </div>
+                        
+
+
+                    </div>
+                </div>
+
+
+            <div ng-if="isModalActive">
+                <img id="img-$index" image-spinner-src="img/pausevideo.png" style="margin-top:0px;
+        width: 100% !important;
+        height: auto !important;" />
+            </div>
+
+
+
+            </span>
+            <!-- ngrepeat -->
+
+        </div>
+
+
+        <ion-item ng-show="!MontageMonitors.length">
+            No monitors to display.
+        </ion-item>
+
+
+
+    </ion-content>
+
+    <div ng-show="minimal">
+        <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
+
+            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)">
+            </button>
+            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)">
+            </button>
+            <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();">
+            </button>
+            <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()">
+            </button>
+        </nav>
+
+        <span class="modal-alarm-badge">
+            <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive" 
+                    ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a>
+        </span>
+
+    </div>
+    
+    <ion-pull-up-footer class="bar-dark" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
+     <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
+            <i class="icon ion-chevron-up"></i>
+        </ion-pull-up-handle>
+        <ion-pull-up-bar>
+            <h1 class="title" ion-pull-up-trigger>Timeline Browser</h1>
+        </ion-pull-up-bar>
+        <ion-pull-up-content scroll="true">
+           
+            
+            <div class="list list-inset">
+                
+                <div class="item item-divider">Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}}</div>
+                
+                <div class="item" ><br/><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY" /><br/></div>
+
+                 <div class="item" ><br/><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/><br/></div>
+
+
+                 <div class="item"><br/><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/><br/></div>
+
+
+                 <div class="item"><br/><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/><br/></div>
+
+                 <div class="item"><br/><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/><br/></div>
+            </div>
+        </ion-pull-up-content>
+    </ion-pull-up-footer>
+            
+    
+    
+    
+
+</ion-view>
\ No newline at end of file
-- 
cgit v1.2.3