12h default time format (#858)

* 🔨 Fix time formatting

* 🔨 Switch to h12 time format default

Author: devmount

backend/src/appointment/database/models.py

@@ -160,7 +160,7 @@ class Subscriber(HasSoftDelete, Base):
     language = Column(encrypted_type(String), nullable=False, default=FALLBACK_LOCALE, index=True)
     timezone = Column(encrypted_type(String), index=True)
     colour_scheme = Column(Enum(ColourScheme), default=ColourScheme.system, nullable=False, index=True)
-    time_mode = Column(Enum(TimeMode), default=TimeMode.h24, nullable=False, index=True)
+    time_mode = Column(Enum(TimeMode), default=TimeMode.h12, nullable=False, index=True)
 
     # Only accept the times greater than the one specified in the `iat` claim of the jwt token
     minimum_valid_iat_time = Column('minimum_valid_iat_time', encrypted_type(DateTime))

backend/src/appointment/database/schemas.py

@@ -311,7 +311,7 @@ class SubscriberIn(BaseModel):
     secondary_email: str | None = None
     language: str | None = FALLBACK_LOCALE
     colour_scheme: ColourScheme = ColourScheme.system
-    time_mode: TimeMode = TimeMode.h24
+    time_mode: TimeMode = TimeMode.h12
 
 
 class SubscriberBase(SubscriberIn):

backend/src/appointment/migrations/versions/2025_02_11_1254-330fdd8cd0f8_modify_subscribers_table.py

@@ -0,0 +1,25 @@
+"""modify subscribers table
+
+Revision ID: 330fdd8cd0f8
+Revises: 4a15d01919b8
+Create Date: 2025-02-11 12:54:51.256163
+
+"""
+from alembic import op
+import sqlalchemy as sa
+from appointment.database.models import TimeMode
+
+
+# revision identifiers, used by Alembic.
+revision = '330fdd8cd0f8'
+down_revision = '16c0299eff23'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.alter_column('subscribers', 'time_mode', default=TimeMode.h12)
+
+
+def downgrade() -> None:
+    op.alter_column('subscribers', 'time_mode', default=TimeMode.h24)

frontend/index.html

@@ -11,9 +11,9 @@
       const browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       if (
-        (user?.settings?.colourScheme === 'dark'
-        || (user?.settings?.colourScheme === 'system' && browserPrefersDark)
-        || (!user?.settings?.colourScheme && browserPrefersDark))
+        (user.settings?.colourScheme === 'dark'
+        || (user.settings?.colourScheme === 'system' && browserPrefersDark)
+        || (!user.settings?.colourScheme && browserPrefersDark))
       ) {
         document.documentElement.classList.add('dark');
       } else {

frontend/src/utils.ts

@@ -3,7 +3,8 @@ import { Ref } from 'vue';
 import { i18nType } from '@/composables/i18n';
 import {
   CustomEventData, Coloring, EventPopup, HTMLElementEvent, CalendarEvent, PydanticException,
-} from './models';
+  User,
+} from '@/models';
 
 /**
 * Lowercases the first character of a string
@@ -80,9 +81,9 @@ export const download = (data: BlobPart, filename: string, contenttype: string =
 // This functions works independent from Pinia stores so that
 // it can be called even if stores are not initialized yet.
 export const timeFormat = (): string => {
-  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
-  const is12HourTime = Intl.DateTimeFormat().resolvedOptions().hour12 ? 12 : 24;
-  const format = Number(user?.setttings?.timeFormat ?? is12HourTime);
+  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}') as User;
+  const detected = Intl.DateTimeFormat().resolvedOptions().hour12 ? 12 : 24;
+  const format = Number(user.settings?.timeFormat ?? detected);
   return format === 24 ? 'HH:mm' : 'hh:mm A';
 };
 
@@ -91,7 +92,7 @@ export const timeFormat = (): string => {
 // This functions works independent from Pinia stores so that
 // it can be called even if stores are not initialized yet.
 export const defaultLocale = () => {
-  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
+  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}') as User;
   return user?.settings?.language ?? navigator.language.split('-')[0];
 }