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 @@
-
-
-
-
-
-
-
+
+
+
+
+
+