From e02255edfba2f055d7a35dea5f6442eeb149632e Mon Sep 17 00:00:00 2001
From: lucas_nz <lucas_nz@outlook.com>
Date: Mon, 31 Aug 2020 22:16:48 +1200
Subject: increase image size in event list, improve layout and loading code.

# Conflicts:
#	www/js/EventCtrl.js
---
 www/templates/events.html | 113 ++++++++++++++++++++--------------------------
 1 file changed, 50 insertions(+), 63 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events.html b/www/templates/events.html
index 3878921a..83ee4f00 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,5 +1,5 @@
 <ion-view cache-view="false">
-  <ion-nav-title>{{scrollPosition();}}</ion-nav-title>
+  <ion-nav-title>{{navTitle;}}</ion-nav-title>
   <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
     </button>&nbsp;
@@ -21,14 +21,19 @@
     </ion-header-bar>
   </div>
   <!-- collection repeat forces js scrolling, thing to remember -->
-  <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll>
+  <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll on-scroll="scrolling();">
+  <ion-refresher
+    pulling-text="Pull to refresh..."
+    on-refresh="doRefresh()">
+  </ion-refresher>
     <!-- needed for header-shrink so first item doesn't go below header-->
     <!-- <div style="height: 64px;"></div>-->
     <!-- lets make sure the events list is not empty as collection repeat needs height -->
     <div ng-if="!eventsBeingLoaded">
       <ion-list show-delete="eventList.showDelete">
-        <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text |  eventListFilter" force-refresh-images=true 
-          item-height="event.Event.height" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" >
+	    <div ng-repeat="event in events| filter:search.text |  eventListFilter" id="item-{{$index}}" style="min-height: 50px;">
+        <ion-item force-refresh-images="true"
+          on-swipe-left="checkSwipe($index);" force-refresh-images="true" >
           <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
             <i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
           <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;
@@ -40,7 +45,19 @@
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
           <div class="row" style="font-size:90%;">
-            <div class="col col-60">
+            <div ng-if="loginData.enableThumbs" style="margin-left: auto;margin-right: auto;">
+
+
+              <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
+                width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
+
+
+            </div>
+          </div>
+          <!--row-->
+          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+            <div class="col">
+              <div class="item-text-wrap">
               <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
               <span ng-switch on="event.Event.Cause">
@@ -70,45 +87,21 @@
               <b>
                 <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
               <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> &nbsp;
-              <br />
-
               <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
               <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
-              <i class="ion-monitor"></i> {{event.Event.MonitorId}} &nbsp;
-              <br />
               <span style="font-size:80%; color:rgb(110,110,110)">
-                {{humanize(event.Event.Length)}}
+                {{humanize(event.Event.Length)}} &nbsp;
               </span>
-              <br />
 
-
-            </div>
-
-
-            <div align="right" class="col col-40" ng-if="loginData.enableThumbs">
-
-
-              <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
-                width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
-
-
-            </div>
-
-          </div>
-          <!--row-->
-          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-            <div class="col">
-              <div class="item-text-wrap">
                 <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
                 <br />
-                <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
-                <br />
                 <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
 
                 <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
               </div>
             </div>
           </div>
+		  <div class="row" style="float:right; margin-right: 10px; display: block;">
           <span style="float:right">
             <div ng-if="event.Event.EndTime || 1">
               <button class="button button-stable button-small button-outline icon icon-left ion-stats-bars" ng-click="closeIfOpen(event);analyzeEvent(event)">
@@ -130,12 +123,24 @@
 
             </div>
           </span>
+		  </div>
+		  
+          <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)">
+          </ion-delete-button>
+
+
+          <ion-option-button ng-if="event.Event.Archived == 1" class="button-balanced" ng-click="archiveUnarchiveEvent($index,event.Event.Id)">{{'kUnflag'
+            | translate}}</ion-option-button>
+
+          <ion-option-button ng-if="event.Event.Archived == 0" class="button-assertive" ng-click="archiveUnarchiveEvent($index, event.Event.Id)">{{'kFlag'
+            | translate}}</ion-option-button>
+
           <!-- this is the event scrub/alarm frames area -->
-          <div ng-if="isGroupShown(event)">
+		<div ng-if="isGroupShown(event)" style="min-height: 50px;">
             <div ng-if="groupType=='alarms'">
               <br />
               <br />
-              <div style="height:190px;">
+              <div>
                 <p>
                   <!--scroll <i class="icon ion-arrow-left-c"></i> 
                                 <i class="icon ion-arrow-right-c"></i>-->
@@ -220,45 +225,27 @@
               <!-- DefaultVideo -->
             </div>
             <!-- type = scrub -->
-          </div>
           <!-- isGroupShown -->
-          <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)">
-          </ion-delete-button>
-
-
-          <ion-option-button ng-if="event.Event.Archived == 1" class="button-balanced" ng-click="archiveUnarchiveEvent($index,event.Event.Id)">{{'kUnflag'
-            | translate}}</ion-option-button>
-
-          <ion-option-button ng-if="event.Event.Archived == 0" class="button-assertive" ng-click="archiveUnarchiveEvent($index, event.Event.Id)">{{'kFlag'
-            | translate}}</ion-option-button>
-
-
-          <!-- hack to make sure swipe left displays well
-             if there is no content and our list height is set
-             to a larger height, the swipe display acts weird -->
-
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-
-        </ion-item>
+        </div>
+		</ion-item>
+		</div>
       </ion-list>
-    </div>
+	</div>
     <!-- !eventsBeingLoaded-->
 
 
     <ion-item ng-show="!events.length">
       <span translate="kNoEvents"></span>
     </ion-item>
+    <ion-item ng-show="nextEvents">
+        <div style="margin-left: auto;margin-right: auto;width: min-content;">
+            <button ng-click="nextEventsLoad();" class="button button-stable button-outline button-small icon icon-left ">
+            <span translate="kMore"></span>
+            </button>
+        </div>
+    </ion-item>
     <div ng-if="!eventsBeingLoaded">
-      <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
+      <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="400px">
       </ion-infinite-scroll>
     </div>
     <canvas id="canvas" class="hiddengifcanvas"></canvas>
-- 
cgit v1.2.3


From 0e5779874010cd8730ee4f788ff4420f70dd2ad2 Mon Sep 17 00:00:00 2001
From: lucas_nz <lucas_nz@outlook.com>
Date: Sat, 29 Aug 2020 21:29:07 +1200
Subject: when click notification in montage, filter event view to only display
 events since last notification click

---
 www/templates/menu.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/menu.html b/www/templates/menu.html
index f00578b3..2a78bb6e 100644
--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -42,8 +42,8 @@
             </span>{{'kMenuTimeline'|translate}}
           </ion-item>
 
-          <!--<ion-item ng-click="navigateView('app.events', {id:0,playEvent:false})"  menu-close>-->
-          <ion-item id="testaut_menu_events" href="#/app/events/0/false" ng-click="go('/app/events/0/false')">
+          <!--<ion-item ng-click="navigateView('app.events', {id:0,playEvent:false,lastCheckTime:''})"  menu-close>-->
+          <ion-item id="testaut_menu_events" href="#/app/events/0/false/" ng-click="go('/app/events/0/false/')">
             <span class=" item-icon-left">
               <i class="icon ion-ios-calendar-outline"></i>
             </span>{{'kMenuEvents'|translate}}
-- 
cgit v1.2.3


From 1139b026aedbc609189a5b3cb7ef446e1ceec09d Mon Sep 17 00:00:00 2001
From: lucas_nz <lucas_nz@outlook.com>
Date: Sat, 5 Sep 2020 11:41:25 +1200
Subject: select event view thumbnails type, replaces enableThumbs in dev
 options. Enables selection of different thumbnail types. If gif is selected
 limit the number of events returned to 5 to improve load time.

---
 www/templates/devoptions.html | 11 ++++++-----
 www/templates/events.html     |  3 +--
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 435c4c40..00361460 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -189,12 +189,13 @@
         </ion-toggle>
       </label>
 
-
       <label>
-        <ion-toggle ng-model="loginData.enableThumbs" toggle-class="toggle-calm">
-          <span class="item-text-wrap">{{'kEnableThumbs' | translate}}
-          </span>
-        </ion-toggle>
+        <div class="item item-button-right">
+          {{'kEnableThumbs' | translate}}: <button class="button button-calm" ng-click="selectEventViewThumbs()">
+            <i class="icon ion-gear-b"></i>
+          </button>
+          <p>{{loginData.eventViewThumbs}}</p>
+        </div>
       </label>
 
       <label>
diff --git a/www/templates/events.html b/www/templates/events.html
index 83ee4f00..00fd0951 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -45,7 +45,7 @@
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
           <div class="row" style="font-size:90%;">
-            <div ng-if="loginData.enableThumbs" style="margin-left: auto;margin-right: auto;">
+            <div ng-if="loginData.eventViewThumbs!='none'" style="margin-left: auto;margin-right: auto;">
 
 
               <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
@@ -86,7 +86,6 @@
 
               <b>
                 <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
-              <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> &nbsp;
               <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
               <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
               <span style="font-size:80%; color:rgb(110,110,110)">
-- 
cgit v1.2.3