💄 Minor cleanup of rewrite

[shankari]

While deploying the code in
e-mission/e-mission-phone#974
e-mission/e-mission-phone#980
e-mission/e-mission-phone#990

There are several minor fit and finish issues. If feasible, we should fix them, test and maybe even push to production before moving on

Missing translation	Incorrect formatting	Map tiles not loading	Incorrect formatting (android only)

[shankari]

The map tiles are not loading because of

Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.
A site's Content Security Policy is set either as via an HTTP header (recommended), or via a meta HTML tag.
To fix this issue do one of the following:
(Recommended) If you're using an allowlist for 'script-src', consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.

Resource	Status	Directive	Source Location
https://tile.openstreetmap.org/15/5271/12709.png	blocked	img-src	index.html#!/root/main/inf_scroll:0
https://tile.openstreetmap.org/15/5272/12709.png	blocked	img-src	index.html#!/root/main/inf_scroll:0
https://tile.openstreetmap.org/15/5271/12708.png	blocked	img-src	index.html#!/root/main/inf_scroll:0
https://tile.openstreetmap.org/15/5272/12708.png	blocked	img-src	index.html#!/root/main/inf_scroll:0

[shankari]

@JGreenlee

I am tempted to push this to staging so that we can come up with the full list of issues and fix all of them before going on to the more complicated parts of the rewrite

[JGreenlee]

@JGreenlee

I am tempted to push this to staging so that we can come up with the full list of issues and fix all of them before going on to the more complicated parts of the rewrite

I am ok with pushing it to staging now so we can track more issues sooner. By now, #990 is fairly old and I'm already pretty far ahead of it. I think many of the issues we will see, I have already fixed in the process of rewriting -- but it would be good to get a complete list.

I expect to have the bulk of the label screen conversion wrapped up tomorrow or this weekend, and maybe that can be in our next staging release.

[shankari]

Onboarding survey on android	Mode spacing is all messed up on android

[JGreenlee]

The above issues will be addressed, if not already addressed, in e-mission/e-mission-phone#993 for the next staging release

TODO:

Map tiles not loading - This only affects builds and not the devapp. The fix might be as simple as updating <meta> tags in index.html which sets Content Security Policy. I noticed a whitelist currently includes nominatim.openstreetmap.org, but not tile.openstreetmap.org

Sections / percents indicator - Actually, I still need to implement this indicator altogether on e-mission/e-mission-phone#993. I was waiting for e-mission/e-mission-server#917, which is now merged, so I should now be able to test against the complete implementation.
--I do know what caused this issue (I used the CSS translate, a shorthand for transform: translate(), which is a standard CSS property now but not supported in old versions of Android's Webview. I'll avoid it in case anyone hasn't updated their phone in a couple years)

Try to reproduce later:

Demographics survey formatting - I was unable to reproduce this on the branch of e-mission/e-mission-phone#993. I likely fixed it inadvertently, but we should double check on real devices on the next staging version

Resolved:

Missing 'welcome' translation - just fixed in e-mission/e-mission-phone#993

QRCode formatting - previously fixed in e-mission/e-mission-phone#993

Datepicker formatting - fixed inadvertently in e-mission/e-mission-phone#993 when I migrated it to React.
--The cause was definitely the aforementioned CSS translate shorthand

[JGreenlee]

Fixed map tiles and added modes / percentages indicator.

(In e-mission/e-mission-phone#993)

All the above issues have been addressed.

[shankari]

I'm still seeing the following issues/comments:

Formatting of save token screen on android	Not sure this is an issue (Label screen formatting seems to be fine although it is still not 100% clear from the color and icon that this is a bus as opposed to a car)

[shankari]

I'm going to push this out now and submit my changes to the build when I return

[Abby-Wheelis]

I just updated my app and the profile page is broken on both test phones (ios and android). All strings are in the format {{'control.edit-demographics'}} and none of the buttons work. The screen is also not scrollable on either phone.

The label and dashboard screens look and behave fine, the profile screen is the only one having those issues. You can sort of see this picture, I don't have email set up on a test phone so I could not get a proper screenshot up

[JGreenlee]

I can look at this myself, but do you want to try @Abby-Wheelis? It may be good to learn how to debug a physical device

[shankari]

I can verify this happens on my phone. It also happens in the emulator with the NREL OpenPATH app.

@JGreenlee @Abby-Wheelis if you can get this fixed by EOD today, I can push out another release with this fix and with the changes in e-mission/e-mission-phone#998

[shankari]

Error:

bundle.js:2 Error: [$injector:unpr] Unknown provider: eProvider <- e <- ControlCollectionHelper
http://errors.angularjs.org/1.6.7/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20ControlCollectionHelper
    at bundle.js:2:128028
    at bundle.js:2:151020
    at Object.s [as get] (bundle.js:2:152598)
    at bundle.js:2:151107
    at s (bundle.js:2:152598)
    at l (bundle.js:2:152903)
    at Object.invoke (bundle.js:2:152991)
    at Object.$get (bundle.js:2:151644)
    at Object.invoke (bundle.js:2:153237)
    at bundle.js:2:151127

[shankari]

So this may actually be related to the native build when the plugin-specific js files are not copied over.
Note that, by default, the settings files (collect-settings.js and sync-settings.js) are not in the e-mission-phone repo.
They are installed as part of the plugin install.

I hacked index.js to refer to these files

diff --git a/www/index.js b/www/index.js
index c2b2bb97..c7b6ae49 100644
--- a/www/index.js
+++ b/www/index.js
@@ -53,8 +53,10 @@ import './js/metrics.js';
 import './js/control/general-settings.js';
 import './js/control/emailService.js';
 import './js/control/uploadService.js';
-import './js/control/collect-settings.js';
-import './js/control/sync-settings.js';
+import '../platforms/android/platform_www/js/control/collect-settings.js';
+import '../platforms/ios/platform_www/js/control/collect-settings.js';
+import '../platforms/android/platform_www/js/control/sync-settings.js';
+import '../platforms/ios/platform_www/js/control/sync-settings.js';
 import './js/metrics-factory.js';
 import './js/metrics-mappings.js';
 import './js/plugin/logger.js';

But I bet that the change to optimize the webpack with hardcoded directories (e-mission/e-mission-phone@11fc98c) broke it.
Let's try copying it manually and see if that fixes it.

[JGreenlee]

@shankari I bet collect-settings.js and sync-settings.js didn't get the babel-plugin-angularjs-annotate treatment

[JGreenlee]

Yeah they are using the implicit annotations. That would cause it.
And explains why it only affects the Profile tab

[shankari]

Confirmed that it is not just the file paths. I ran ./bin/download_settings_controls.js manually and then built, and I'm getting the same error.

[JGreenlee]

@shankari After copying, did you build webpack again or just cordova?

[shankari]

webpack too

$ history
./bin/download_settings_controls.js
npm run build
npx cordova emulate android

[JGreenlee]

@shankari And when you did that, you removed the hack from index.js right?

[JGreenlee]

I am fairly certain that this error results from collect-settings.js and sync-settings.js not getting 'fixed' by the babel plugin

But if they were copied over, as long as they were in the www/ directory they should have been annotated the second time

[shankari]

Fixed:

I copied the files over, but didn't revert the index.js change to include the non-platform locations.
After changing that as well, everything worked.

[JGreenlee]

Whew!

So, sounds like for the build configuration, we just need download_settings_controls.js to be run before webpack is run.
Should I add that at the front of the npm build script?

[shankari]

I can add it, I already have a change for the android release build pending...

[JGreenlee]

TODO

Here's what I've noticed:

• the most recent trip is always left off. You have to "Show More Travel" to see it or any draft trips
• "Show Older Travel" and "Show More Travel" are not internationalized
• when you load more trips, their address names don't fill in
• activities don't show up until after a refresh
• some 'mode' icons (I noticed 'car' and 'bike') are showing up cropped / too big for their bounding box

---

• activities cannot be edited or deleted

---

• on the details page map, the zoom buttons don't do anything
• if there is a gap in the timeline of 1 week or more, you cannot navigate past it; the 'Show Older Travel' button will keep fetching the empty week over and over

---

• if a request comes back with no trips, there's no indication and the spinner never goes away
• multiple missing translations. In French and Italian, because these are not maintained, there are so many missing that it actually causes the app to hang.
  -- Ideally if a translation is not available, we should fall back to English, rather than showing the raw translation key
• Map sometimes overlaps time badges (noticed on iPhone 8)

---

• In the time-use survey, the check boxes just highlight the outline of the box, don't actually add a check mark so I couldn't tell that I had selected it

• Don't have walk and car be shades of red since they look similar, could be hard for people with red/green blindness

• No boundary saying when your first trip was; I could go back to 2020 in the calendar and then it just hung and the dates were showing up as 2023/06/29 to 2023/06/29

[shankari]

the most recent trip is always left off. You have to "Show More Travel" to see it or any draft trips

Following up on this, the last trip is also displayed incorrectly (on my phone). My last trip was from Palo Alto to home, but the map in the list view shows a walk around Palo Alto. The detail screen shows the correct trip though (see screenshots).
Also, the map in the list view seems to be zoomable. I'm not sure if that is a good or a bad idea. Is it confusing/does it happen that we try to scroll but the map zooms instead.
And also, the place names are not showing up.

List view (wrong)	Detail view (right)	Zoomed list view (???)

[shankari]

Comments from @mRaffill

• Don't have walk and car be shades of red since they look similar, could be hard for people with red/green blindness
• Really like how the modes are showing up; that is most helpful part of the diary; not too big and not too hidden either - that's great
• looks a lot more professional now
• Don't like how "Add trip details" and "Add Activity" are are slightly offset - looks like you tried to make them aligned but did something wrong with the spacing and it didn't work
• In the time-use survey, the check boxes just highlight the outline of the box, don't actually add a check mark so I couldn't tell that I had selected it
• "show more travel" or "show older travel" is good; much better than the weird download button before (@shankari's UI design skills... shakes head and laughs)
• I really like that you can see the drafts without going into a separate diary
• "This looks so good actually" Such a big step up from the previous UI
• No boundary saying when your first trip was; I could go back to 2020 in the calendar and then it just hung and the dates were showing up as 2023/06/29 to 2023/06/29
• If you do later (e.g. December) just shows draft trips and "show older travel". Dates are still showing as 2023/06/29 to 2023/06/29
• once I set a valid date, it worked again and it makes sense
• using "clear" on the calendar dropdown causes the app to hang again

[JGreenlee]

• No boundary saying when your first trip was; I could go back to 2020 in the calendar and then it just hung and the dates were showing up as 2023/06/29 to 2023/06/29
• If you do later (e.g. December) just shows draft trips and "show older travel". Dates are still showing as 2023/06/29 to 2023/06/29

Yeah... that's another reason we will need to use react-native-paper-dates sooner or later.

https://caniuse.com/?search=input%20date

As much as I love how the native iOS datepicker looks, it doesn't offer any way to constrain inputs. If I put min and max attributes, it would work great on Android (days outside the range would be disabled), but iOS would just ignore it.

[shankari]

Closing this since e-mission/e-mission-phone#1000 is merged
Next round of cleanup will be tracked in #932