Create the data model via classes and their associated tables in an SQLite database

https://github.com/Juansero29/Loop/blob/main/docs/uml.svg

• Stats Page
  • A stat in the "Stats" page showing the time worn in the last 24 hours

Since I started coding this, react framework has changed a lot, an gone through some breaking changes.

I should recreate an app by using the step by step guide of typeorm:

• https://typeorm.io/

Then I can add again translations, and the pages and code I had done before. It will be simpler than upgrading and fixing all dependecy shit code I have now.

A framework is needed to build the app.
The app should be able to run at least on:

• Android
• iOS
• Windows 10/11

Basic APIs / features needed:

• Offline storage for relational data that gives access to CRUD
• Access to a background service that doesn't get killed by the system (stopwatch)
• Toast notifications for messages within the app
• Possibility to store key-value pairs easily in settings.
• Having a tabbed view similar to the image below
• Possibility to localize the app in multiple languages
• System-wide notifications to alert when the wear session needs to start and when the session can end
• Basic navigation to go from tab to tab, and to click on an item to see its detail.
• Ability to migrate database versions easily if data model changes without data loss (cf EF Migrations)

BONUS APIs / features:

• App theming that can be dynamically changed by the user from the app's settings: changing accent and primary colors
• Possibility to have a customizable calendar control capable of doing something like this:
• Possibility to include animations: in the future Today page will show also a loop getting filled as the stopwatch goes by, can be stylized in different ways to make cool stuff if there's animations available.

The potential candidates for the moment are:

1. Ionic
2. NET MAUI
3. Uno Platform
4. Full Native (swift/kotlin-jetpack)
5. Uno Platform
6. Xamarin Forms

Today page

When the user arrives to the page:

• A "stopwatch-like" label is in the center of the screen. It shows hours, minutes and seconds in the following format: HHh MMm SSs
• Above the stopwatch label, there is another label "Worn Time"
• A FAB button should allow to end and start a ring wear session. The fab button should contain a "Play" icon when the user first arrives to this screen.

When the user clicks on the "Play" FAB button:

• The internal stopwatch starts counting, updating the label at each second that goes by.
• The icon on the FAB button becomes a red square, indicating it now stops the current session.
• The session is created with the start date timestamp (day, month, year, hour, minute, and seconds) and saved into the application's offline storage.

While the timer is running:

• If the user closes the app or puts the app in the background, they should be still able to return to the app and see the timer at the correct value. Closing or putting the app in the background should invalidate the stopwatch's current value.
• While the total hours have not reached the goal set in the settings within the field "Goal Worn Time", the stopwatch label text color should be the app's accent color.
• When the total hours reach the "Session Length Goal" the text becomes green.

When the user clicks on the "Stop" FAB button:

• The counter stops counting and displays everything at zero again.
• The session that was saved with the start date timestamp is recovered from the offline storage, and assigned an end date to the end date timestamp when the user clicked on the Stop button.
• The session is saved updated in the offline storage and should be now visible inside the "History" page
• The button becomes the "Play" button again

• Visualize all past sessions in a list, showing:
  • Start Date (formatted "HH:mm dd-MM-YY")
  • End Date (formatted "HH:mm dd-MM-YY")
  • Total Worn Time (formatted "HH hours mm minutes"]

The app should have the basic tabbed structure with 4 pages ready to be developed.

Tabs needed:

• Today
• History
• Stats
• Settings

Change app language between English and French at any given moment, changing all non-user-input text in the app to the required languages. More languages may be added in the future.

Related Docs:

• Internationalization (i18n) ngx-translate

• Settings Page
  • Define a setting called "session length" to store the number of hours the ring needs to be worn per day.