#172 Charging Screen Improvements

[bracyw]

Charging Screen Improvements

Changes

Implemented all of the todo below, to summarize:
added time based status lights (which save total times using sessionStorage, to avoid reset on page refresh)

and re-arranged existing components, adding more space for graphs (as well as merging changes to the graph component form #180)

Test Cases

• Manual

Screenshots

50% zoom

100% zoom

110% (small cut off but not too bad)

1200px and below (just switches to mobile view) The fault component is a lil wonky on there I can fix up tmrw.
video: https://github.com/user-attachments/assets/f48cdaa0-c89e-419e-9987-783ec8518efb

To Do

Any remaining things that need to get done

• Re-arrange/Combine Status Components:
  • Visual layout resembling the inner state representation:
    • Active (current != 0)
      • Charging (control = 0)
        • Balancing or not
      • Paused Charging (control = 1)
        • Balancing or not
    • Inactive, faulted (state = 3) or not yet enabled (Charger/Box not sending messages)
• Update Pack Voltage and Cell Temp Graphs:
  • Ensure graphs show values across the whole charging session.
• Enhance Fault Component:
  • Make component bigger.
  • Include Sheperd faults.
  • Specify fault sources (BMS or Charging Cart).
• New Additions:
  • Label: Started charging at this timestamp.
  • Duration in Charging Mode and Balancing Mode for the whole session.
• Mobile page?

Checklist

It can be helpful to check the Checks and Files changed tabs.
Please review the contributor guide and reach out to your Tech Lead if anything is unclear.
Please request reviewers and ping on slack only after you've gone through this whole checklist.

• All commits are tagged with the ticket number
• No linting errors / newline at end of file warnings
• All code follows repository-configured prettier formatting
• No merge conflicts
• All checks passing
• Screenshots of UI changes (see Screenshots section)
• Remove any non-applicable sections of this template
• Assign the PR to yourself
• No package-lock.json changes (unless dependencies have changed)
• Request reviewers & ping on Slack
• PR is linked to the ticket (fill in the closes line below)

Closes #172