Better UI

[SamR1]

FitTrackee has a minimal interface (using on Bootstrap4), which hasn't changed since the first version.

As a first step:

UI

• better responsive and mobile support
• add some placeholders and loaders
• add missing translations

Technical

• switch from React to Vue3 + Typescript (for learning purposes)
• remove Bootstrap and use only Flexbox (to remove external library)
• better style files organization + SCSS (to add new themes in the future?)
• remove calls to public CDNs
• add tests for utils functions
• update to Vue 3.2 (to use <script setup>)
• update docker-compose-dev.yml

PR to port

• Add elevation data and new sports #93

---

Progress

• User
  • login / register / logout
  • profile display =>
    • 🆕 split user info and preferences in 2 tabs
  • profile edition
    • 🆕 split user info, picture and preferences in 3 tabs
    • impact on API => new endpoint /auth/profile/edit/preferences
  • password reset
  • timezone dropdown in preferences edition
• Dashboard
  • user statistics cards
  • calendar
  • chart w/ month activity
  • records
    • impact on API => update User serializer to get records w/ profile
  • timeline w/ workouts
• Workouts
  • add workout (w/ and w/o gpx file)
  • workout detail with maps
  • update/delete a workout
  • workouts list
• Admin
  • application
  • sports
  • users
• Common
  • NavBar
  • Footer
• Improvements/fix
  • error messages from API and translations
  • improve workouts filtering on workouts lists
  • handle username and email case on login and register

---

Some screenshots:

(not final versions)

• desktop

dashboard	workout

workouts	stats

admin	sports

• dashboard on mobile

month activity	calendar	timeline	record

[Fmstrat]

@SamR1 I've submitted one PR already for handling slow movement that I think should not impact the new UI, and I'm now working on the unit conversions. I'll try to make the unit conversion code usable across the new UI by handling most of it in the model itself, but can you make the labels in the new UI, such as "km" and "m" pull from a central variable?

In the current UI, I've got a lot of updating to do there, but if the variable statement was centralized, like <distanceText>/hr, then it will be much easier to pull in.

[SamR1]

I opened the issue #99 for imperial units, I suggest to continue on it :)