From 96a0968ba23f8738f1170b356d2d47a8e267ef75 Mon Sep 17 00:00:00 2001 From: GabrielKS <23368820+GabrielKS@users.noreply.github.com> Date: Fri, 16 Jul 2021 12:36:25 -0600 Subject: [PATCH 1/3] Restyle the label screen input filter buttons The buttons now look like the tab selectors on the dashboard and heatmap screens. --- www/css/main.diary.css | 22 ++++++++++++++++-- www/i18n/en.json | 4 ++-- www/js/diary/infinite_scroll_filters.js | 4 ++-- www/js/diary/infinite_scroll_list.js | 6 ++++- www/templates/diary/infinite_scroll_list.html | 23 +++++++++++-------- 5 files changed, 42 insertions(+), 17 deletions(-) diff --git a/www/css/main.diary.css b/www/css/main.diary.css index 4b78b35fb..9bb18b0a9 100644 --- a/www/css/main.diary.css +++ b/www/css/main.diary.css @@ -162,6 +162,24 @@ 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 { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.labelfilter.last { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} \ No newline at end of file diff --git a/www/i18n/en.json b/www/i18n/en.json index 4818342e2..c77e1c0a5 100644 --- a/www/i18n/en.json +++ b/www/i18n/en.json @@ -151,8 +151,8 @@ "time": "Time", "mode": "Mode", "purpose": "Purpose", - "unlabeled": "Unlabeled🔍", - "invalid-ebike": "Invalid🔍", + "unlabeled": "Unlabeled", + "invalid-ebike": "Invalid", "show-all": "All", "no-trips-found": "No trips found", "for-current-filter": "for current filter. Show All to remove filters", diff --git a/www/js/diary/infinite_scroll_filters.js b/www/js/diary/infinite_scroll_filters.js index 8c8fd669f..e4c2b295f 100644 --- a/www/js/diary/infinite_scroll_filters.js +++ b/www/js/diary/infinite_scroll_filters.js @@ -31,13 +31,13 @@ angular.module('emission.main.diary.infscrollfilters',[ sf.UNLABELED = { text: $translate.instant(".unlabeled"), - width: "col-80", + width: "col-40", filter: unlabeledCheck } sf.INVALID_EBIKE = { text: $translate.instant(".invalid-ebike"), - width: "col-50", + width: "col-40", filter: invalidCheck } return sf; diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js index 65a724820..b8e447ba3 100644 --- a/www/js/diary/infinite_scroll_list.js +++ b/www/js/diary/infinite_scroll_list.js @@ -45,11 +45,13 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', $scope.data = {}; // reset all filters $scope.filterInputs = [ - InfScrollFilters.UNLABELED + InfScrollFilters.UNLABELED, + InfScrollFilters.INVALID_EBIKE ]; $scope.filterInputs.forEach((f) => { f.state = false; }); + $scope.allTrips = true; const ONE_WEEK = 7 * 24 * 60 * 60; // seconds $scope.infScrollControl = {}; @@ -158,6 +160,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', f.state = false; } }); + $scope.allTrips = false; $scope.recomputeDisplayTrips(); } @@ -165,6 +168,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', $scope.filterInputs.forEach((f) => { f.state = false; }); + $scope.allTrips = true; $scope.recomputeDisplayTrips(); } diff --git a/www/templates/diary/infinite_scroll_list.html b/www/templates/diary/infinite_scroll_list.html index 888ab1dc9..7450f672b 100644 --- a/www/templates/diary/infinite_scroll_list.html +++ b/www/templates/diary/infinite_scroll_list.html @@ -3,16 +3,19 @@
- - - -
+ + + + +
From be98e6dce036498d52a5f2fef617aab77ba95b18 Mon Sep 17 00:00:00 2001 From: GabrielKS <23368820+GabrielKS@users.noreply.github.com> Date: Fri, 16 Jul 2021 13:51:09 -0600 Subject: [PATCH 2/3] Implement the "To Label" screen as proposed + Add a "To Label" filter that shows trips that the server has marked as ones the user is expected to label + Recompute filters when labels are entered so that trips disappear from the "To Label" screen as soon as they are labeled + Change the visible filters to "To Label" and "All"; change the default filter to "To Label" + Change the "Unlabeled" filter to show all trips for which any labels are red, instead of requiring all labels to be red --- www/i18n/en.json | 1 + www/js/diary/infinite_scroll_filters.js | 17 ++++++++++++++--- www/js/diary/infinite_scroll_list.js | 19 ++++++++++++++----- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/www/i18n/en.json b/www/i18n/en.json index c77e1c0a5..8bf702200 100644 --- a/www/i18n/en.json +++ b/www/i18n/en.json @@ -153,6 +153,7 @@ "purpose": "Purpose", "unlabeled": "Unlabeled", "invalid-ebike": "Invalid", + "to-label": "To Label", "show-all": "All", "no-trips-found": "No trips found", "for-current-filter": "for current filter. Show All to remove filters", diff --git a/www/js/diary/infinite_scroll_filters.js b/www/js/diary/infinite_scroll_filters.js index e4c2b295f..d0ea57a0d 100644 --- 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,27 @@ 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-40", + width: "col-30", filter: unlabeledCheck } sf.INVALID_EBIKE = { text: $translate.instant(".invalid-ebike"), - width: "col-40", + width: "col-30", filter: invalidCheck } + + sf.TO_LABEL = { + text: $translate.instant(".to-label"), + width: "col-30", + filter: toLabelCheck + } return sf; }); diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js index b8e447ba3..ce2d0e141 100644 --- a/www/js/diary/infinite_scroll_list.js +++ b/www/js/diary/infinite_scroll_list.js @@ -45,13 +45,13 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', $scope.data = {}; // reset all filters $scope.filterInputs = [ - InfScrollFilters.UNLABELED, - InfScrollFilters.INVALID_EBIKE + InfScrollFilters.TO_LABEL ]; $scope.filterInputs.forEach((f) => { f.state = false; }); - $scope.allTrips = true; + $scope.filterInputs[0].state = true; + $scope.allTrips = false; const ONE_WEEK = 7 * 24 * 60 * 60; // seconds $scope.infScrollControl = {}; @@ -71,6 +71,7 @@ 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) { @@ -78,6 +79,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', }); trip.finalInference = {}; $scope.inferFinalLabels(trip); + $scope.updateVerifiability(trip); }); ctList.forEach(function(trip, index) { fillPlacesForTripAsync(trip); @@ -179,7 +181,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; } } @@ -298,6 +302,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: @@ -356,7 +366,6 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', $scope.populateInput(trip.finalInference, inputType, max.labelValue); } } - $scope.updateVerifiability(trip); } /** @@ -715,7 +724,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) From 6f6b53dab81f6239fa88b2a75c82726f950e9916 Mon Sep 17 00:00:00 2001 From: GabrielKS <23368820+GabrielKS@users.noreply.github.com> Date: Mon, 19 Jul 2021 15:21:21 -0600 Subject: [PATCH 3/3] Improve layout of Label screen header + Redo the HTML and visual layout of the Label screen header to look better and better match other screens + Use pseudo-classes to more elegantly style the label filter tabs + Add the unlabeled tab back + Rename tabs for visual consistency + Set a single tab width, not one per tab --- www/css/main.diary.css | 5 ++-- www/i18n/en.json | 4 +-- www/js/diary/infinite_scroll_filters.js | 3 --- www/js/diary/infinite_scroll_list.js | 3 ++- www/templates/diary/infinite_scroll_list.html | 27 +++++++++---------- 5 files changed, 19 insertions(+), 23 deletions(-) diff --git a/www/css/main.diary.css b/www/css/main.diary.css index 9bb18b0a9..bcc833916 100644 --- a/www/css/main.diary.css +++ b/www/css/main.diary.css @@ -174,12 +174,13 @@ a.item-content { color: white; } -.labelfilter.first { +.labelfilter:first-of-type { + margin-left:5%; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } -.labelfilter.last { +.labelfilter:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } \ No newline at end of file diff --git a/www/i18n/en.json b/www/i18n/en.json index 8bf702200..8193e1ffa 100644 --- a/www/i18n/en.json +++ b/www/i18n/en.json @@ -151,10 +151,10 @@ "time": "Time", "mode": "Mode", "purpose": "Purpose", - "unlabeled": "Unlabeled", + "unlabeled": "All Unlabeled", "invalid-ebike": "Invalid", "to-label": "To Label", - "show-all": "All", + "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 index d0ea57a0d..f9d7e0188 100644 --- a/www/js/diary/infinite_scroll_filters.js +++ b/www/js/diary/infinite_scroll_filters.js @@ -36,19 +36,16 @@ angular.module('emission.main.diary.infscrollfilters',[ sf.UNLABELED = { text: $translate.instant(".unlabeled"), - width: "col-30", filter: unlabeledCheck } sf.INVALID_EBIKE = { text: $translate.instant(".invalid-ebike"), - width: "col-30", filter: invalidCheck } sf.TO_LABEL = { text: $translate.instant(".to-label"), - width: "col-30", filter: toLabelCheck } return sf; diff --git a/www/js/diary/infinite_scroll_list.js b/www/js/diary/infinite_scroll_list.js index ce2d0e141..8abd562fc 100644 --- a/www/js/diary/infinite_scroll_list.js +++ b/www/js/diary/infinite_scroll_list.js @@ -45,7 +45,8 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet', $scope.data = {}; // reset all filters $scope.filterInputs = [ - InfScrollFilters.TO_LABEL + InfScrollFilters.TO_LABEL, + InfScrollFilters.UNLABELED ]; $scope.filterInputs.forEach((f) => { f.state = false; diff --git a/www/templates/diary/infinite_scroll_list.html b/www/templates/diary/infinite_scroll_list.html index 7450f672b..05c9488cc 100644 --- a/www/templates/diary/infinite_scroll_list.html +++ b/www/templates/diary/infinite_scroll_list.html @@ -1,21 +1,18 @@ - -
- - - - -
+ + + + + +