Language specific options

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -31,6 +31,8 @@ import {
   StyledMain,
 } from './availabilityViewerStyle';
 
+import locales from 'res/dayjs_locales';
+
 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
 dayjs.extend(relativeTime);
@@ -152,7 +154,7 @@ const AvailabilityViewer = ({
     												onMouseEnter={(e) => {
     													const cellBox = e.currentTarget.getBoundingClientRect();
     													const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
-                              const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm';
+                              const timeText = timeFormat === '12h' ? `h${locales[locale].separator}mma` : `HH${locales[locale].separator}mm`;
     													setTooltip({
     														x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
     														y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,

crabfit-frontend/src/components/Settings/Settings.tsx

@@ -14,7 +14,7 @@ import {
   Cover,
 } from './settingsStyle';
 
-import localeImports from 'res/dayjs_locales';
+import locales from 'res/dayjs_locales';
 
 const Settings = () => {
   const theme = useTheme();
@@ -24,8 +24,8 @@ const Settings = () => {
   const setLocale = useLocaleUpdateStore(state => state.setLocale);
 
   useEffect(() => {
-    if (Object.keys(localeImports).includes(i18n.language)) {
-      localeImports[i18n.language]().then(() => {
+    if (Object.keys(locales).includes(i18n.language)) {
+      locales[i18n.language].import().then(() => {
         dayjs.locale(i18n.language);
         setLocale(dayjs.locale());
         document.documentElement.setAttribute('lang', i18n.language);
@@ -36,6 +36,14 @@ const Settings = () => {
     }
   }, [i18n.language, setLocale]);
 
+  i18n.on('languageChanged', lang => {
+    // Language specific options
+    if (locales.hasOwnProperty(lang)) {
+      store.setWeekStart(locales[lang].weekStart);
+      store.setTimeFormat(locales[lang].timeFormat);
+    }
+  });
+
   return (
     <>
       <OpenButton
@@ -106,14 +114,10 @@ const Settings = () => {
           name="language"
           id="language"
           options={{
-            'de': 'Deutsch',
-            'en': 'English',
-            'es': 'Español',
-            'fr': 'Français',
-            'hi': 'हिंदी',
-            'id': 'Indonesia',
-            'ko': '한국어',
-            'ru': 'Pусский',
+            ...Object.keys(locales).reduce((ls, l) => {
+              ls[l] = locales[l].name;
+              return ls;
+            }, {}),
             ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
           }}
           small

crabfit-frontend/src/res/dayjs_locales.ts

@@ -1,12 +1,67 @@
 const locales = {
-  de: () => import('dayjs/locale/de'), // German
-  en: () => import('dayjs/locale/en'), // English
-  es: () => import('dayjs/locale/es'), // Spanish
-  fr: () => import('dayjs/locale/fr'), // French
-  hi: () => import('dayjs/locale/hi'), // Hindi
-  id: () => import('dayjs/locale/id'), // Indonesian
-  ko: () => import('dayjs/locale/ko'), // Korean
-  ru: () => import('dayjs/locale/ru'), // Russian
+  'de': { // German
+    name: 'Deutsch',
+    import: () => import('dayjs/locale/de'),
+    weekStart: 1,
+    timeFormat: '24h',
+    separator: ':',
+  },
+  'en': { // English (US)
+    name: 'English (US)',
+    import: () => import('dayjs/locale/en'),
+    weekStart: 0,
+    timeFormat: '12h',
+    separator: ':',
+  },
+  'en-GB': { // English (UK)
+    name: 'English (UK)',
+    import: () => import('dayjs/locale/en-gb'),
+    weekStart: 1,
+    timeFormat: '12h',
+    separator: ':',
+  },
+  'es': { // Spanish
+    name: 'Español',
+    import: () => import('dayjs/locale/es'),
+    weekStart: 1,
+    timeFormat: '24h',
+    separator: ':',
+  },
+  'fr': { // French
+    name: 'Français',
+    import: () => import('dayjs/locale/fr'),
+    weekStart: 1,
+    timeFormat: '24h',
+    separator: ':',
+  },
+  'hi': { // Hindi
+    name: 'हिंदी',
+    import: () => import('dayjs/locale/hi'),
+    weekStart: 1,
+    timeFormat: '12h',
+    separator: ':',
+  },
+  'id': { // Indonesian
+    name: 'Indonesia',
+    import: () => import('dayjs/locale/id'),
+    weekStart: 1,
+    timeFormat: '24h',
+    separator: '.',
+  },
+  'ko': { // Korean
+    name: '한국어',
+    import: () => import('dayjs/locale/ko'),
+    weekStart: 0,
+    timeFormat: '24h',
+    separator: ':',
+  },
+  'ru': { // Russian
+    name: 'Pусский',
+    import: () => import('dayjs/locale/ru'),
+    weekStart: 1,
+    timeFormat: '24h',
+    separator: ':',
+  },
 };
 
 export default locales;