UI Improvements To Do List #2

Open tfranzese-woolpert opened 4 years ago

In GitLab by @mmiles on Jul 2, 2020, 14:10

Must Have

See #1 for milestones

[x] Use circles for order location on the map
[x] Generate more random orders (get outer isochrone bb, then generate points https://github.com/Turfjs/turf/tree/master/packages/turf-random)
[x] Group orders on the left by isocrhone
[x] Order panel....move close button up, change semi colon to #, primary-color and primary-color-dark for button,
[x] Order grouping header, make it link to zoom to extent
[x] Order panel item, make just the header row clickable vs. entire panel
[x] Car locations, change to black dots with white border like trotter
[x] isochrones, use 1 color palette...green lighten-5, green lighten-4, green lighten-1,
[x] 100% width on store panels
[x] Create a navigation above the orders (stores | [name]....then row 2.... 2min|5min|10min|>10min)
[x] Lint the JS, kind off a mess
[x] Deploy to App Engine
[x] when an order group is empty, indicate "no orders"
[x] show isochrones when there are no orders
[x] Alerting (alert a order that it just moved into a new fence)
[x] Close Button, make it work
[x] Handle missing order.innerGeofence member
[x] make map markers bigger, and red
[x] Remove the flash off and leave the bg color on, demo through meets doesnt show the flashing

Nice To Have

Some of these nice to have are in conflict with the re-drawing the the dom every 2 seconds as orders come in. You will introduce flickering into the UI with highlights/mouseovers etc of the cursor and dom elements. This can be seen right now when mousing over the "close" button. Having state mgmt or not on the client does not impact this problem beucase orders move up in the listing over time and map markers are constantly moving as well. A solution is to ease or animate dom changes.

[x] Position SVG store left/up to center it, [anchor]
[x] timestamp on order panel is the same for everyone
[x] Make isochrone grouping headers a boostrap Panel (instead of orders) and the orders a grid (similar to Trotter)
[x] Indicate what "time" means to the user. "Order shows the time of the latest update from the customer."
[x] click or mouse over order, flash map marker or something neat
[x] improve perf by getting only "Open" orders vs. all
[x] Highlight isochrone when mousing over grouping
[ ] add a progress bar on initial load, and, on clicking of a store
[ ] when closing an order, bootstrap disable the close button so they can't click it twice (https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol)
[ ] Scroll orderlist when clicking on nav
[ ] order panel onclick, show popup for "fetch realtime ETA"

In GitLab by @mmiles on Jul 6, 2020, 12:38

marked the checklist item Use circles for order location on the map as completed

In GitLab by @mmiles on Jul 6, 2020, 12:38

marked the checklist item Generate more random orders (get outer isochrone bb, then generate points https://github.com/Turfjs/turf/tree/master/packages/turf-random) as completed

In GitLab by @mmiles on Jul 6, 2020, 19:53

marked the checklist item Order panel....move close button up, change semi colon to #, primary-color and primary-color-dark for button, as completed

In GitLab by @mmiles on Jul 6, 2020, 19:53

marked the checklist item Group orders on the left by isocrhone as completed

In GitLab by @mmiles on Jul 7, 2020, 12:49

marked the checklist item Order grouping header, make it link to zoom to extent as completed

In GitLab by @mmiles on Jul 7, 2020, 12:55

marked the checklist item Order panel item, make just the header row clickable vs. entire panel as completed

In GitLab by @mmiles on Jul 7, 2020, 13:05

marked the checklist item Car locations, change to black dots with white border like trotter as completed

In GitLab by @mmiles on Jul 7, 2020, 13:18

marked the checklist item isochrones, use 1 color palette...green lighten-5, green lighten-4, green lighten-1, as completed

In GitLab by @mmiles on Jul 7, 2020, 13:19

marked the checklist item 100% width on store panels as completed

In GitLab by @mmiles on Jul 7, 2020, 18:31

marked the checklist item Create a navigation above the orders (stores | [name]....then row 2.... 2min|5min|10min|>10min) as completed

In GitLab by @mmiles on Jul 7, 2020, 19:28

mentioned in commit e61ca0135e51800e2254b232b53c29fbb62bb732

In GitLab by @mmiles on Jul 7, 2020, 19:28

marked the checklist item Lint the JS, kind off a mess as completed

In GitLab by @mmiles on Jul 8, 2020, 19:20

marked the checklist item Position SVG store left/up to center it, anchor as completed

In GitLab by @mmiles on Jul 8, 2020, 19:20

marked the checklist item Deploy to App Engine as completed

In GitLab by @mmiles on Jul 9, 2020, 13:51

marked the checklist item when an order group is empty, indicate "no orders" as completed

In GitLab by @mmiles on Jul 9, 2020, 19:32

marked the checklist item show isochrones when there are no orders as completed

In GitLab by @mmiles on Jul 10, 2020, 12:45

marked the checklist item Close Button, make it work as completed

In GitLab by @mmiles on Jul 10, 2020, 13:08

marked the checklist item Handle missing order.innerGeofence member as completed

In GitLab by @mmiles on Jul 10, 2020, 13:27

marked the checklist item timestamp on order panel is the same for everyone as completed

In GitLab by @mmiles on Jul 10, 2020, 17:14

marked the checklist item Alerting (alert a order that it just moved into a new fence) as completed

In GitLab by @mmiles on Jul 10, 2020, 19:40

marked the checklist item Make isochrone grouping headers a boostrap Panel (instead of orders) and the orders a grid (similar to Trotter) as completed

In GitLab by @mmiles on Jul 13, 2020, 10:23

marked the checklist item improve perf by getting only "Open" orders vs. all as completed

In GitLab by @mmiles on Jul 14, 2020, 13:37

marked the checklist item make map markers bigger, and red as completed

In GitLab by @mmiles on Jul 14, 2020, 13:37

marked the checklist item Remove the flash off and leave the bg color on, demo through meets doesnt show the flashing as completed

In GitLab by @hollema on Jul 15, 2020, 12:13

marked the checklist item Indicate what "time" means to the user. "Order shows the time of the latest update from the customer." as completed

In GitLab by @hollema on Jul 15, 2020, 16:23

marked the checklist item click or mouse over order, flash map marker or something neat as completed

In GitLab by @hollema on Jul 15, 2020, 16:23

marked the checklist item Highlight isochrone when mousing over grouping as completed

woolpert-digital-innovations / quick-start-geoawareness-order-monitor

UI Improvements To Do List #2

Must Have

Nice To Have