cehat-clinic/dashboard

dashboard's Issues

Add static content for health information (English)

AQI Block: add border around box that reflects the current reading

For the tags in the grid under the dial/aqi reading: highlight the tag that corresponds to the current AQI with a border to make it clear what category the AQI currently falls under.

Reduce Firebase reads for AQI calculations

The current implementation means every reading (from every 2 minutes) is read 72 separate times, and there are currently about 650,000 reads per day (well beyond free tier), whereas writes are still within reasonable values. This is expensive and the reads are redundant, so creative database structure can improve this.

Add language toggle to UI

Add static content for get involved (English)

Add/remove sensors from admin interface

Add static content for about us (Spanish)

Download sensor data from admin interface

• UI Design
• Choose timeframe
• Choose sensors

Standardize database structure for readings

We updated the fields to use Timestamps and pm25 readings rather than strings and channelAReading

Hosting

• Get live dashboard online
• Determine how to automatically update deployed website with new master branch code

Make <website>.web.app/home direct to <website>.web.app (or vice verse)

Add graph/recommendations block to UI

Make Selected Sensor Larger on Map

When a sensor is clicked, make it look similar to the hovered sensors (enlarged icon) so that it's more clear what sensor's information you are viewing.

Add Language Context

Admin User Setup

• Add admin interface
• Add web authentication with Firebase

Add static content for get involved (Spanish)

Add static content for about us (English)

Combine or remove duplicate sensor reading doc

There are two sensor docs with purpleAirId="39019". One is older, and I believe they are both now being populated with the same readings. The 39019 sensor was likely re-added in November when we added more sensors. Thus, I think once all old data docs are converted to the new format, we can probably just delete the newer collection.

Choose data hosting platform

Firestore data security

• Add appropriate security rules

Add/remove admin users from admin interface

Choose hosting platform for website

Improve error handling for Thingspeak errors

Right now, the function thingspeakToFirestore() just fails if the requests don't work, and the error messaging isn't great.

Fix caching so that users see the updated site without clearing cookies

Add loading component

Choose front-end framework

Make markers clickable

Make the map-markers able to be clicked (so that they can change the state)

Modify function to calculate AQI from PM2.5 NowCast

Originally posted by @CarsonHerness in #92 (comment)

Add 404 Page

Will need to add default page to Routers as well as a component to be displayed

Fix service worker bug to allow PWA to work

DOMException: Failed to register a ServiceWorker for scope ... The script has an unsupported MIME type ('text/html').

Create user document on account creation

Set zoom limits on map to limit map-rendering to South Gate area

Choose backend framework/language

Change default to menu closed on mobile

Currently the navigation menu defaults to open when the window is small. Change this default to closed.

Downloaded PWA not working on Android

Instead shows the manifest file

Add location search bar to map (or determine it is too expensive)

Rename master branch to main

In GitHub

• From code view, click on branch button (upper left) and then View All Branches.
• On branch page, click edit on the right side of the master branch (under default)
• Use pop up to rename master to main

Locally

git branch -m master main
git fetch origin
git branch -u origin/main main

GitHub Actions

Rename all references to master to main in the .github directory

• deploy.yml
• node.js.yml

Allow users to update their accounts

This includes

• Sending a password reset email for a forgotten password
• Changing a password for a signed in user
• Changing an email for a signed in user
• Deleting an account

Add static content for health information (Spanish)

Transition hamburger menu to Chakra IconButton

Chakra has a built in IconButton feature that we should probably be taking advantage of instead of a manual image, but it was not super quick to implement due to icon hiding and sizing. Since it is low-pri, I am going to open this issue as opposed to fixing now.

Make the home path an exact path in Routes

In Routes.tsx, the Home path should be an exact path, since the "/" path matches all other paths as well.

Uncaught Errors from async calls to Firebase

Chrome Dev Tools is showing "Uncaught exception" for async calls to Firebase in the front-end code, even though the errors are caught and being handled. This is likely related to how promises are handled, but it is not clear why the current implementation is not working. It could be because the error is being thrown in another call stack, per this documentation.

Converting the async/await in try/catch statements to then/catch statements seems to fix the issue.

Store dashboard colors centrally

Right now the colors for the markers and the dial (which are the same) are hard coded in markerStyle.tsx and AQIDial.tsx. We should store these colors in one place, and use them in both files. This should also accommodate the fact that the colors are different with the color blind toggle on.

Add TS/JS linter

Create better SVG image for map markers

The new image should:

• display a label
• display a color associated with the label
• look nice

Update README from default create-react-app

• Project description
• Will not expand disclaimer
• NPM scripts (front end and functions)
• Description of major development frameworks and links to documentation (React, TypeScript, Prettier/Eslint/gts)
• Description of major libraries and links to documentation (Chakra UI, i18next, Firebase, axios...)
• How to clone (maybe on a separate markdown file?)
  • API Keys (HERE maps, PurpleAir, Firebase)
  • Setting up GitHub (GitHub secrets, continuous deployment, etc.)
  • Setting up Firebase (Firestore, Cloud Functions, Authentication)
  • Setting up initial admin users
  • Local content (static content, HERE maps location, PurpleAir group)
• Database structure

Collapsible Home Page UI on Mobile

Add the ability to collapse UI components (map, AQI dial, graph/recommendations box) when user is viewing from a small screen.

Add zoom buttons to map

Create mock dashboard

Add AQI block to UI

The representation of the UI for a given sensor (i.e. the dial representation)