From 45aae3412999cc858f84282f9d208bfd2deb1152 Mon Sep 17 00:00:00 2001 From: Jack Greenlee Date: Wed, 26 Jul 2023 10:57:02 -0400 Subject: [PATCH 01/10] fix intro skipping to demographics survey While completing the onboarding / 'intro', the Save OPCode slide would be skipped. The next slide, which is the demographics survey, would load after ~1 second and then overtake the Save OPCode slide. I am guessing that when you move to the next slide of an ion-slide, it looks ahead to the next slide and creates it ahead of time. By systematically commenting out code, I isolated the issue and determined it only happens when the Enketo Form object is `init()` (service.js -> _loadForm). I think there is some code there that focuses the form and ensures the form is visible. So with it being off-screen at the time it is initialized we get strange results. So the workaround here is to prevent the survey from being initialized before that slide is active. intro has a slideIndex we can look at, and we will only start rendering the contents of the survey slide once slideIndex reaches 4 (the fifth slide / the survey). I also found that in EnketoDemographicsInlineCtrl, the 10-second $timeout that waits for the slide to be in place is too low. 50 is safer. Overall, this is a pretty temporary solution; the intro will be rewritted in React before too long. We will use something other than ion-slide, and very likely redesign the onboarding process in general. --- www/js/survey/enketo/enketo-demographics.js | 2 +- www/templates/intro/intro.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/survey/enketo/enketo-demographics.js b/www/js/survey/enketo/enketo-demographics.js index 40e82ae47..06d461fac 100644 --- a/www/js/survey/enketo/enketo-demographics.js +++ b/www/js/survey/enketo/enketo-demographics.js @@ -84,7 +84,7 @@ angular.module('emission.survey.enketo.demographics', console.log("demographic survey result ", result); }).catch(e => console.trace(e)); } - }, 10); // wait for 10 ms to load to ensure that the form is in place + }, 50); // wait for 50 ms to load to ensure that the form is in place } $scope.initForm = function() { diff --git a/www/templates/intro/intro.html b/www/templates/intro/intro.html index d9ba7edae..eaa806b6d 100644 --- a/www/templates/intro/intro.html +++ b/www/templates/intro/intro.html @@ -13,7 +13,7 @@ - + From 5656e361a28020ffc251de8f7c1790b9f975d341 Mon Sep 17 00:00:00 2001 From: Jack Greenlee Date: Wed, 26 Jul 2023 11:07:01 -0400 Subject: [PATCH 02/10] fix 'no travel' showing before pipeline range set The "No Travel" banner is supposed to show when there are no trips. However, it was showing for a couple seconds, after app launch, but before the pipelineRange is fetched. This is a place where we really want the spinner to show. In LabelTab, if nothing had been processed for a user yet, getUnprocessedLabels would come back with a pipelineRange of {start_ts: null and end_ts: null}, but we would ignore this result. We should setPipelineRange to this even if it's empty so that we can indiate it's already been fetched. Then in TimelineScrollList, instead of checking if pipelineRange isn't defined, we should instead check if it *has* been set, but the end_ts is null. In this case we show the banner. This way, if pipelineRange itself is not set yet, we get the spinner. Also added comments to better understand the conditional logic for what's shown in the timeline scroll list. --- www/js/diary/LabelTab.tsx | 4 ++-- www/js/diary/list/TimelineScrollList.tsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/www/js/diary/LabelTab.tsx b/www/js/diary/LabelTab.tsx index d64a301c1..f64de1506 100644 --- a/www/js/diary/LabelTab.tsx +++ b/www/js/diary/LabelTab.tsx @@ -105,14 +105,14 @@ const LabelTab = () => { labelsResultMap = manualResultMap; notesResultMap = enbsResultMap; console.log("After reading in the label controller, manualResultMap " + JSON.stringify(manualResultMap), manualResultMap); - setPipelineRange(pipelineRange); } + setPipelineRange(pipelineRange); }); } // once pipelineRange is set, load the most recent week of data useEffect(() => { - if (pipelineRange) { + if (pipelineRange && pipelineRange.end_ts) { loadAnotherWeek('past'); } }, [pipelineRange]); diff --git a/www/js/diary/list/TimelineScrollList.tsx b/www/js/diary/list/TimelineScrollList.tsx index d2239c94c..776046ecc 100644 --- a/www/js/diary/list/TimelineScrollList.tsx +++ b/www/js/diary/list/TimelineScrollList.tsx @@ -54,11 +54,15 @@ const TimelineScrollList = ({ listEntries, queriedRange, pipelineRange, loadMore ); - if (!pipelineRange) { // nothing has been processed for this user yet + if (pipelineRange && !pipelineRange.end_ts && !listEntries?.length) { + /* Condition: pipelineRange has been fetched but has no defined end, meaning nothing has been + processed for this OPCode yet, and there are no unprocessed trips either. Show 'no travel'. */ return noTravelBanner; } else if (isLoading=='replace') { + /* Condition: we're loading an entirely new batch of trips, so show a big spinner */ return bigSpinner; } else if (listEntries && listEntries.length == 0) { + /* Condition: we've loaded all travel and set `listEntries`, but it's empty. Show 'no travel'. */ return noTravelBanner; } else { return ( From 97b51566a079b3c53916af85a693dd0f2f4d7ba5 Mon Sep 17 00:00:00 2001 From: Jack Greenlee Date: Wed, 26 Jul 2023 11:13:20 -0400 Subject: [PATCH 03/10] app theme: use 'background', not 'surfaceVariant' I thought that surfaceVariant would be the appropriate color to tweak and use as the background. But there is a color from the RN Paper theme called 'background' which is more appropriate. I noticed that 'surfaceVariant' is used for DataTable, and I think some Dialogs, so changing it for the background has some side effects. But 'background', as far as I can tell, only affects the background of the LabelScreen. I tweaked the color in the process and also noted where surfaceVariant is used. --- www/css/style.css | 2 +- www/js/appTheme.ts | 4 ++-- www/js/diary/LabelListScreen.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www/css/style.css b/www/css/style.css index de3fd15f6..526ca3a06 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -502,7 +502,7 @@ ion-nav-view { } /* this controls bacground color of dashboard and profile - label screen now styled in react*/ .pane { - background-color: #e4e9ed !important; + background-color: #edf1f6 !important; } .tabs-custom > .tabs, .tabs.tabs-custom { diff --git a/www/js/appTheme.ts b/www/js/appTheme.ts index 983e2721e..90862a2b3 100644 --- a/www/js/appTheme.ts +++ b/www/js/appTheme.ts @@ -12,9 +12,9 @@ const AppTheme = { onPrimaryContainer: '#001e30', // lch(10% 50 250) secondary: '#f2795c', // lch(65% 60 40) secondaryContainer: '#ffb39e', // lch(80% 45 40) - background: '#f2f2f2', // lch(95% 0 0) + background: '#edf1f6', // lch(95% 3 250) - background of label screen, other screens still have this as CSS .pane surface: '#fafdff', // lch(99% 30 250) - surfaceVariant: '#e4e9ed', // lch(92% 30 250) -- blueish gray used as background on label screen (was same as level 4) + surfaceVariant: '#e0f0ff', // lch(94% 50 250) - background of DataTable elevation: { level0: 'transparent', level1: '#fafdff', // lch(99% 30 250) diff --git a/www/js/diary/LabelListScreen.tsx b/www/js/diary/LabelListScreen.tsx index 522a8fa77..8b50f7e47 100644 --- a/www/js/diary/LabelListScreen.tsx +++ b/www/js/diary/LabelListScreen.tsx @@ -24,7 +24,7 @@ const LabelListScreen = () => { refresh()} style={{marginLeft: 'auto'}} /> - + Date: Wed, 26 Jul 2023 11:17:11 -0400 Subject: [PATCH 04/10] tweak style: no multiline buttons On languages with long button labels, we can just have overflows truncate with '...' instead of trying to cram multiple lines of text onto 1 small button. --- www/css/style.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/www/css/style.css b/www/css/style.css index 526ca3a06..b5186e001 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -11,14 +11,6 @@ /* nvd3 styles */ @import 'nvd3/build/nv.d3.css'; -/* Annoyingly, React Native Web applies `white-space: nowrap` - on Text elements and doesn't give us a way to change it in the style prop, - effectively preventing multiline text. - This is a workaround to override that style. */ -div[class*='css-text'] { - white-space: normal; -} - .fill-container { display: block; position: relative; From 54a9f7194c4442bf269c7620d7ca93aee8690b60 Mon Sep 17 00:00:00 2001 From: Jack Greenlee Date: Wed, 26 Jul 2023 12:06:41 -0400 Subject: [PATCH 05/10] fix activities on draft trips by setting timezone Error was thrown in AddNoteButton -> getPrefillTimes because unprocessed/draft trips did not have `timezone` defined in their local_dt objects. In services.js we compute the properties for unprocessed trips in `points2TripProps`. To get the dt objects we call `moment2localdate`, which takes a tz argument, but we did not use it. We have access to the timezone names from `startPoint` and `endPoint` metadata, so let's use them. Now activities can be added to draft trips, and the prefilled timestamps are correct. Tested trips from various different timezones just to be sure it was not reverting to my local timezone. --- www/js/diary/services.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/diary/services.js b/www/js/diary/services.js index 60ba59f72..188cfa197 100644 --- a/www/js/diary/services.js +++ b/www/js/diary/services.js @@ -339,14 +339,14 @@ angular.module('emission.main.diary.services', ['emission.plugin.logger', distance: dists.reduce((a, b) => a + b, 0), duration: endPoint.data.ts - startPoint.data.ts, end_fmt_time: endMoment.format(), - end_local_dt: moment2localdate(endMoment), + end_local_dt: moment2localdate(endMoment, endPoint.metadata.time_zone), end_ts: endPoint.data.ts, expectation: {to_label: true}, inferred_labels: [], locations: locations, source: "unprocessed", start_fmt_time: startMoment.format(), - start_local_dt: moment2localdate(startMoment), + start_local_dt: moment2localdate(startMoment, startPoint.metadata.time_zone), start_ts: startPoint.data.ts, user_input: {}, } From 5fc5d6be51138cc80e68e205b87149e5dc862898 Mon Sep 17 00:00:00 2001 From: Abby Wheelis Date: Wed, 26 Jul 2023 10:59:47 -0600 Subject: [PATCH 06/10] unify qrcodes both qrcodes (that in the login process and than in settings) should be generated from the same string, so the image is the same, that is now the case on production version, the "emission" prefix will be swapped out for "nrelopenpath" --- www/js/intro.js | 1 + www/templates/intro/saveTokenFile.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/www/js/intro.js b/www/js/intro.js index a5c21d25e..5d74e7a5d 100644 --- a/www/js/intro.js +++ b/www/js/intro.js @@ -133,6 +133,7 @@ angular.module('emission.intro', ['emission.splash.startprefs', } else { CommHelper.registerUser(function(successResult) { $scope.currentToken = token; + $scope.qrToken = "emission://login_token?token=" + token; $scope.next(); }, function(errorResult) { $scope.alertError('User registration error', errorResult); diff --git a/www/templates/intro/saveTokenFile.html b/www/templates/intro/saveTokenFile.html index 48d4ca964..b1bbd9d51 100644 --- a/www/templates/intro/saveTokenFile.html +++ b/www/templates/intro/saveTokenFile.html @@ -5,7 +5,7 @@

{{'login.make-sure-save-your-opcode'}}

{{locCheck.desc}}
- - + +
@@ -32,8 +32,8 @@
{{fitnessCheck.desc}}
- - + +
@@ -51,8 +51,8 @@
{{notificationCheck.desc}}
- - + +
@@ -71,8 +71,8 @@
{{backgroundRestrictionCheck.desc}}
- - + +
diff --git a/www/templates/intro/sensor_explanation.html b/www/templates/intro/sensor_explanation.html index 18f53280e..9f1d725ab 100644 --- a/www/templates/intro/sensor_explanation.html +++ b/www/templates/intro/sensor_explanation.html @@ -1,6 +1,6 @@