Render Counting Timer in UI with Alpine.js

[nelsonic]

Todo

Using: https://github.com/dwyl/learn-alpine.js/blob/main/stopwatch.html as inspiration ...

• Render the timer element on the page using Alpine.js and use LiveView to sync between devices/clients
• Should display hh:mm:ss and count up one second at a time.
• Should use the Timer.start as the start time for the timer so that any new browsers/clients joining mid-way through a timer get the correct time.

[nelsonic]

@SimonLab we discussed this on our call today.
My reasoning for using Alpine.js is to make the code in the app_live.html.heex template as declarative as possible:

https://github.com/dwyl/app-mvp-phoenix/blob/a4dc98e37c96f4886c140e0ecf5fca9b10c0fd53/lib/app_web/live/app_live.html.heex#L48-L69

The Server Side code doesn't need to know anything about the UI/UX of Timers.
The Server just knows the Timer.start and Timer.end data/values and the client can render them however it wants.

[nelsonic]

This is working: #89 (comment) but is a total "hack".
The timer is disconnected from the start (i.e. the actual start time of the timer)

Will refactor it at the end of the PR. ⏳

[nelsonic]

This is bugging me so I want to try and tackle it ... 🙄
Basically we want to have the timer in the UI using the Timer.start value.
and we want it to continue running when new items are added.

Going to try and figure this out. But it will definitely be a "hack" as I'm not a PETAL expert by any means.

[nelsonic]

Instead of the "hack" I re-wrote the function and now we can have multiple timers running concurrently:

I'm still refactoring some bits but confident it will all be working as expected very soon. 🧑‍💻

[nelsonic]

Next: #103