Merge pull request #765 from GabrielKS/to_label_screen

Add "To Label" screen
e-mission · Jul 19, 2021 · 066dc51 · 066dc51
2 parents 9b76ff4 + 6f6b53d
commit 066dc51
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 21 deletions.
diff --git a/www/css/main.diary.css b/www/css/main.diary.css
@@ -162,6 +162,25 @@ a.item-content {
   border-width: 0;
 }
 
-.button.on {
-    background-color: darkgray;
+.button.labelfilter {
+  color: #01D0A7;
+  border-radius: 0px;
+  border-width: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.23);
+}
+
+.button.labelfilter.on {
+    background-color: #01D0A7;
+    color: white;
 }
+
+.labelfilter:first-of-type {
+  margin-left:5%;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.labelfilter:last-of-type {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
diff --git a/www/i18n/en.json b/www/i18n/en.json
@@ -151,9 +151,10 @@
         "time": "Time",
         "mode": "Mode",
         "purpose": "Purpose",
-        "unlabeled": "Unlabeled🔍",
-        "invalid-ebike": "Invalid🔍",
-        "show-all": "All",
+        "unlabeled": "All Unlabeled",
+        "invalid-ebike": "Invalid",
+        "to-label": "To Label",
+        "show-all": "All Trips",
         "no-trips-found": "No trips found",
         "for-current-filter": "for current filter. Show All to remove filters",
         "scroll-to-load-more": "Scroll to load more",

diff --git a/www/js/diary/infinite_scroll_filters.js b/www/js/diary/infinite_scroll_filters.js
@@ -17,7 +17,7 @@ angular.module('emission.main.diary.infscrollfilters',[
     var unlabeledCheck = function(t) {
        return ConfirmHelper.INPUTS
            .map((inputType, index) => !angular.isDefined(t.userInput[inputType]))
-           .reduce((acc, val) => acc && val, true);
+           .reduce((acc, val) => acc || val, false);
     }
 
     var invalidCheck = function(t) {
@@ -29,16 +29,24 @@ angular.module('emission.main.diary.infscrollfilters',[
        return retVal;
     }
 
+    var toLabelCheck = function(trip) {
+        console.log(trip.expectation.to_label)
+        return trip.expectation.to_label && unlabeledCheck(trip);
+    }
+
     sf.UNLABELED = {
         text: $translate.instant(".unlabeled"),
-        width: "col-80",
         filter: unlabeledCheck
     }
 
     sf.INVALID_EBIKE = {
         text: $translate.instant(".invalid-ebike"),
-        width: "col-50",
         filter: invalidCheck
     }
+
+    sf.TO_LABEL = {
+        text: $translate.instant(".to-label"),
+        filter: toLabelCheck
+    }
     return sf;
 });
diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js
@@ -45,11 +45,14 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
   $scope.data = {};
   // reset all filters
   $scope.filterInputs = [
+    InfScrollFilters.TO_LABEL,
     InfScrollFilters.UNLABELED
   ];
   $scope.filterInputs.forEach((f) => {
     f.state = false;
   });
+  $scope.filterInputs[0].state = true;
+  $scope.allTrips = false;
   const ONE_WEEK = 7 * 24 * 60 * 60; // seconds
 
   $scope.infScrollControl = {};
@@ -69,13 +72,15 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
         ctList.reverse();
         ctList.forEach($scope.populateBasicClasses);
         ctList.forEach((trip, tIndex) => {
+          console.log("Expectation: "+JSON.stringify(trip.expectation));
             // console.log("Inferred labels from server: "+JSON.stringify(trip.inferred_labels));
             trip.userInput = {};
             ConfirmHelper.INPUTS.forEach(function(item, index) {
                 $scope.populateManualInputs(trip, ctList[tIndex+1], item, $scope.data.manualResultMap[item]);
             });
             trip.finalInference = {};
             $scope.inferFinalLabels(trip);
+            $scope.updateVerifiability(trip);
         });
         ctList.forEach(function(trip, index) {
             fillPlacesForTripAsync(trip);
@@ -158,13 +163,15 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
         f.state = false;
       }
     });
+    $scope.allTrips = false;
     $scope.recomputeDisplayTrips();
   }
 
   $scope.resetSelection = function() {
     $scope.filterInputs.forEach((f) => {
       f.state = false;
     });
+    $scope.allTrips = true;
     $scope.recomputeDisplayTrips();
   }
 
@@ -175,7 +182,9 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
             if (alreadyFiltered) {
                 Logger.displayError("multiple filters not supported!", undefined);
             } else {
+                // console.log("Trip n before: "+$scope.data.displayTrips.length);
                 $scope.data.displayTrips = $scope.data.allTrips.filter(f.filter);
+                // console.log("Trip n after:  "+$scope.data.displayTrips.length);
                 alreadyFiltered = true;
             }
         }
@@ -294,6 +303,12 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
         $scope.editingTrip = angular.undefined;
     }
 
+    $scope.updateTripProperties = function(trip) {
+      $scope.inferFinalLabels(trip);
+      $scope.updateVerifiability(trip);
+      $scope.recomputeDisplayTrips();
+    }
+
     /**
      * Given the list of possible label tuples we've been sent and what the user has already input for the trip, choose the best labels to actually present to the user.
      * The algorithm below operationalizes these principles:
@@ -352,7 +367,6 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
           $scope.populateInput(trip.finalInference, inputType, max.labelValue);
         }
       }
-      $scope.updateVerifiability(trip);
     }
 
     /**
@@ -711,7 +725,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
           } else {
             tripToUpdate.userInput[inputType] = $scope.inputParams[inputType].value2entry[input.value];
           }
-          $scope.inferFinalLabels(tripToUpdate);  // Recalculate our inferences based on this new information
+          $scope.updateTripProperties(tripToUpdate);  // Redo our inferences, filters, etc. based on this new information
         });
       });
       if (isOther == true)

diff --git a/www/templates/diary/infinite_scroll_list.html b/www/templates/diary/infinite_scroll_list.html
@@ -1,18 +1,18 @@
 <ion-view ng-class="ion-view-background" translate-namespace="diary">
     <ion-nav-bar class="bar-stable">
     </ion-nav-bar>
-    <ion-nav-buttons>
-       <div class="row buttons dark-color" style="text-align:center; background-color: transparent !important;" id="toget">
-          <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="{{selF.width}} button" ng-class="{on:selF.state}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
-          {{selF.text}}
-          </button>
-          <button ng-click="resetSelection()" class="col-15 button" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
-          {{'.show-all'}}
-          </button>
-          <button class="button button-icon" class="col-5 button" ng-click="refresh()">
+    <ion-nav-buttons side="primary" id="toget" class="row buttons">
+        <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="col col-50 button labelfilter" ng-class="{on:selF.state}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
+            {{selF.text}}
+        </button>
+        <button ng-click="resetSelection()" class="col col-50 button labelfilter last" ng-class="{on:allTrips}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
+            {{'.show-all'}}
+        </button>
+    </ion-nav-buttons>
+    <ion-nav-buttons side="secondary">
+        <button class="button button-icon" ng-click="refresh()">
             <i class="icon ion-refresh"></i>
-          </button>
-       </div>
+        </button>
     </ion-nav-buttons>
     <div style="background-color: transparent; border-left-style: solid; border-left-width: 0.5px; border-left-color: #212121; margin-left: 10%; position: absolute; float: left; height: 100%;"></div>
 	<ion-content class="diary-entry">