presist hour and date format

app/mobile/src/constants/Colors.js

@@ -6,6 +6,7 @@ const LightColors = {
   idleTabIcon: '#cccccc',
   activeBorder: '#338866',
   idleBorder: '#dddddd',
+  activeFill: '#66aa88',
   linkText: '#338866',
   dangerText: '#ff8888',
   labelText: '#555555',
@@ -41,6 +42,7 @@ const DarkColors = {
   idleTabIcon: '#aaaaaa',
   activeBorder: '#aa8866',
   idleBorder: '#eeeeee',
+  activeFill: '#66aa88',
   linkText: '#88eecc',
   dangerText: '#ffaaaa',
   labelText: '#eeeeee',
@@ -80,6 +82,7 @@ export const Colors = {
   idleTabIcon: getColor('idleTabIcon'),
   idleBorder: getColor('idleBorder'),
   activeBorder: getColor('activeBorder'),
+  activeFill: getColor('activeFill'),
   linkText: getColor('linkText'),
   dangerText: getColor('dangerText'),
   labelText: getColor('labelText'),

app/mobile/src/constants/Strings.js

@@ -21,6 +21,10 @@ const Strings = [
     account: 'Account',
     display: 'Format',
     messaging: 'Messaging',
+    timeFull: '24h',
+    timeHalf: '12h',
+    monthStart: 'mm/dd',
+    monthEnd: 'dd/mm',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -42,6 +46,10 @@ const Strings = [
     account: 'Compte',
     display: 'Format',
     messaging: 'Messagerie',
+    timeFull: '24h',
+    timeHalf: '12h',
+    monthStart: 'mm/jj',
+    monthEnd: 'jj/mm',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -63,6 +71,10 @@ const Strings = [
     account: 'Cuenta',
     display: 'Formato',
     messaging: 'Mensajería',
+    timeFull: '24h',
+    timeHalf: '12h',
+    monthStart: 'mm/dd',
+    monthEnd: 'dd/mm',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -84,6 +96,10 @@ const Strings = [
     account: 'Konto',
     display: 'Format',
     messages: 'Nachrichtenübermittlung',
+    timeFull: '24h',
+    timeHalf: '12h',
+    monthStart: 'mm/dd',
+    monthEnd: 'dd/mm',
   }
 ];
 

app/mobile/src/context/useProfileContext.hook.js

@@ -15,6 +15,9 @@ export function useProfileContext() {
   });
   const store = useContext(StoreContext);
 
+  const HOUR_KEY = 'hour';
+  const DATE_KEY = 'date';
+
   const access = useRef(null);
   const curRevision = useRef(null);
   const setRevision = useRef(null);
@@ -55,8 +58,10 @@ export function useProfileContext() {
       const { guid, server, token } = session || {};
       const identity = await store.actions.getProfile(guid);
       const revision = await store.actions.getProfileRevision(guid);
+      const timeFull = (await store.actions.getAppValue(guid, HOUR_KEY)).set == true;
+      const monthLast = (await store.actions.getAppValue(guid, DATE_KEY)).set == true;
       const imageUrl = identity?.image ? getProfileImageUrl(server, token, revision) : null;
-      updateState({ offsync: false, identity, imageUrl, server });
+      updateState({ offsync: false, identity, imageUrl, server, timeFull, monthLast });
       setRevision.current = revision;
       curRevision.current = revision;
       access.current = session;
@@ -80,6 +85,16 @@ export function useProfileContext() {
       const { server, token } = access.current || {};
       return await getHandle(server, token, name);
     },
+    setTimeFull: async (flag) => {
+      const { guid } = access.current || {};
+      await store.actions.setAppValue(guid, HOUR_KEY, { set: flag });
+      updateState({ timeFull: flag });
+    },
+    setMonthLast: async (flag) => {
+      const { guid } = access.current || {};
+      await store.actions.setAppValue(guid, DATE_KEY, { set: flag });
+      updateState({ monthLast: flag });
+    },
   }
 
   return { state, actions }

app/mobile/src/context/useStoreContext.hook.js

@@ -77,6 +77,14 @@ export function useStoreContext() {
     clearFirstRun: async () => {
       await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [`firstrun`, encodeObject({ set: true })]);
     },
+    getAppValue: async(guid, key) => {
+      const dataId = `${guid}_user_${key}`;
+      return await getAppValue(db.current, dataId, {});
+    },
+    setAppValue: async(guid, key, value) => {
+      const dataId = `${guid}_user_${key}`;
+      await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [dataId, encodeObject(value)]);
+    },
     getCardRequestStatus: async (guid) => {
       const dataId = `${guid}_card_status`;
       return await getAppValue(db.current, dataId, {});

app/mobile/src/session/settings/Settings.jsx

@@ -47,13 +47,23 @@ export function Settings() {
             </View>
             <View style={styles.optionControl}>
               <Text style={styles.optionText}>{ state.strings.hourMode }</Text>
-              <TouchableOpacity style={styles.radio} activeOpacity={1}>
-                <View style={styles.idleRadioCircle} />
-                <Text style={styles.radioLabel}>12h</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setTimeFull(false)}>
+                { !state.timeFull && (
+                  <View style={styles.activeRadioCircle} />
+                )}
+                { state.timeFull && (
+                  <View style={styles.idleRadioCircle} />
+                )}
+                <Text style={styles.radioLabel}>{ state.strings.timeHalf }</Text>
               </TouchableOpacity>
-              <TouchableOpacity style={styles.radio} activeOpacity={1}>
-                <View style={styles.idleRadioCircle} />
-                <Text style={styles.radioLabel}>24h</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setTimeFull(true)}>
+                { state.timeFull && (
+                  <View style={styles.activeRadioCircle} />
+                )}
+                { !state.timeFull && (
+                  <View style={styles.idleRadioCircle} />
+                )}
+                <Text style={styles.radioLabel}>{ state.strings.timeFull }</Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -64,13 +74,23 @@ export function Settings() {
             </View>
             <View style={styles.optionControl}>
               <Text style={styles.optionText}>{ state.strings.dateMode }</Text>
-              <TouchableOpacity style={styles.radio} activeOpacity={1}>
-                <View style={styles.idleRadioCircle} />
-                <Text style={styles.radioLabel}>mm/dd</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setMonthLast(false)}>
+                { !state.monthLast && (
+                  <View style={styles.activeRadioCircle} />
+                )}
+                { state.monthLast && (
+                  <View style={styles.idleRadioCircle} />
+                )}
+                <Text style={styles.radioLabel}>{ state.strings.monthStart }</Text>
               </TouchableOpacity>
-              <TouchableOpacity style={styles.radio} activeOpacity={1}>
-                <View style={styles.idleRadioCircle} />
-                <Text style={styles.radioLabel}>dd/mm</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setMonthLast(true)}>
+                { state.monthLast && (
+                  <View style={styles.activeRadioCircle} />
+                )}
+                { !state.monthLast && (
+                  <View style={styles.idleRadioCircle} />
+                )}
+                <Text style={styles.radioLabel}>{ state.strings.monthEnd }</Text>
               </TouchableOpacity>
             </View>
           </TouchableOpacity>

app/mobile/src/session/settings/Settings.styled.js

@@ -27,6 +27,14 @@ export const styles = StyleSheet.create({
     width: 16,
     height: 16,
   },
+  activeRadioCircle: {
+    borderWidth: 1,
+    borderColor: Colors.activeBorder,
+    backgroundColor: Colors.activeFill,
+    borderRadius: 8,
+    width: 16,
+    height: 16,
+  },
   radioLabel: {
     color: Colors.linkText,
     paddingLeft: 8,

app/mobile/src/session/settings/useSettings.hook.js

@@ -1,17 +1,35 @@
 import { useState, useEffect, useRef, useContext } from 'react';
 import { getLanguageStrings } from 'constants/Strings';
+import { ProfileContext } from 'context/ProfileContext';
 
 export function useSettings() {
 
+  const profile = useContext(ProfileContext);
+
   const [state, setState] = useState({
     strings: getLanguageStrings(),
+    timeFull: false,
+    monthLast: false,
   });
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    const { timeFull, monthLast } = profile.state;
+    updateState({ timeFull, monthLast });
+  }, [profile.state]);
+
   const actions = {
+    setTimeFull: async (flag) => {
+      updateState({ timeFull: flag });
+      await profile.actions.setTimeFull(flag);
+    },
+    setMonthLast: async (flag) => {
+      updateState({ monthLast: flag });
+      await profile.actions.setMonthLast(flag);
+    },
   };
 
   return { state, actions };