From bc9caa1f0c85e1047c8ad22ee93a9dc03e12125a Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Mon, 19 Dec 2022 17:53:37 -0500
Subject: [PATCH] consolidate filter buttons into dropdown <select>

also consolidate JS functions to handle corresponding selection updates
---
 www/js/diary/infinite_scroll_list.js          | 35 +++++++++----------
 www/templates/diary/infinite_scroll_list.html | 14 ++++----
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js
index 8c61982ae..7e81fbf30 100644
--- a/www/js/diary/infinite_scroll_list.js
+++ b/www/js/diary/infinite_scroll_list.js
@@ -54,6 +54,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     f.state = false;
   });
   $scope.filterInputs[0].state = true;
+  $scope.data.selFilter = $scope.filterInputs[0].key;
   ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": null, "dest": $scope.getActiveFilters()});
   $scope.allTrips = false;
   const ONE_WEEK = 7 * 24 * 60 * 60; // seconds
@@ -192,15 +193,24 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     }
   });
 
-  $scope.select = function(selF) {
+  $scope.updateFilterSel = function(selFilterKey) {
     const prev = $scope.getActiveFilters();
-    selF.state = true;
-    $scope.filterInputs.forEach((f) => {
-      if (f !== selF) {
+    const selFilter = $scope.filterInputs.find(f => f.key == selFilterKey);
+    if (selFilter) {
+      selFilter.state = true;
+      $scope.filterInputs.forEach((f) => {
+        if (f !== selFilter) {
+          f.state = false;
+        }
+      });
+      $scope.allTrips = false;
+    } else {
+      $scope.filterInputs.forEach((f) => {
         f.state = false;
-      }
-    });
-    $scope.allTrips = false;
+      });
+      $scope.allTrips = true;
+    }
+
     $scope.recomputeDisplayTrips();
     // scroll to the bottom while changing filters so users don't have to
     // fixes the first of the fit-and-finish issues from
@@ -209,17 +219,6 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
     ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": prev, "dest": $scope.getActiveFilters()});
   }
 
-  $scope.resetSelection = function() {
-    const prev = $scope.getActiveFilters();
-    $scope.filterInputs.forEach((f) => {
-      f.state = false;
-    });
-    $scope.allTrips = true;
-    $scope.recomputeDisplayTrips();
-    $ionicScrollDelegate.scrollBottom();
-    ClientStats.addReading(ClientStats.getStatKeys().LABEL_TAB_SWITCH, {"source": prev, "dest": $scope.getActiveFilters()});
-  }
-
   $scope.recomputeDisplayTrips = function() {
     let alreadyFiltered = false;
     $scope.filterInputs.forEach((f) => {
diff --git a/www/templates/diary/infinite_scroll_list.html b/www/templates/diary/infinite_scroll_list.html
index 6b3ebfb53..69f519e4b 100644
--- a/www/templates/diary/infinite_scroll_list.html
+++ b/www/templates/diary/infinite_scroll_list.html
@@ -5,14 +5,14 @@
         <button class="button button-icon" ng-click="increaseHeight()">
             <i class="icon ion-arrow-resize"></i>
         </button>
-        <div class="row buttons labelfilterlist">
-            <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="{{selF.width}} button labelfilter" ng-class="{on:selF.state}" style="text-align: center;font-size: 13px;font-weight: 600; border-radius: 10px;" translate>
-                {{selF.text}}
-            </button>
-            <button ng-click="resetSelection()" class="col-33 button labelfilter last" ng-class="{on:allTrips}" style="text-align: center;font-size: 13px;font-weight: 600; border-radius: 10px;" translate>
+        <select ng-model="data.selFilter" ng-change="updateFilterSel(data.selFilter)">
+            <option ng-repeat="filter in filterInputs" ng-value="filter.key" ng-selected="{{filter.state==true}}" translate>
+                {{filter.text}}
+            </option>
+            <option ng-selected="{{getActiveFilters().length < 1}}" ng-value="show-all" translate>
                 {{'.show-all'}}
-            </button>
-        </div>
+            </option>
+        </select>
     </ion-nav-buttons>
     
     <ion-nav-buttons side="right">