Add insert user custom mode feature

JGreenlee · Dec 29, 2023 · 07f4534 · 07f4534
1 parent de9008f
commit 07f4534
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 7 deletions.
diff --git a/www/js/control/CustomModesSettingRow.tsx b/www/js/control/CustomModesSettingRow.tsx
@@ -1,12 +1,48 @@
 import React, { useState, useContext } from 'react';
 import SettingRow from './SettingRow';
-import { Modal } from 'react-native';
-import { List, Dialog, Button } from 'react-native-paper';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  useWindowDimensions,
+  ScrollView,
+} from 'react-native';
+import { Icon, TextInput, Dialog, Button, useTheme, Divider } from 'react-native-paper';
 import { AppContext } from '../App';
+import { useTranslation } from 'react-i18next';
+import { insertUserCustomMode } from '../services/commHelper';
+import { displayErrorMsg, logDebug } from '../plugin/logger';
+import { labelKeyToReadable, readableLabelToKey } from '../survey/multilabel/confirmHelper';
 
 const CustomModesSettingRow = () => {
   const [isCustomModesModalOpen, setIsCustomModesModalOpen] = useState(false);
   const { customModes, setCustomModes } = useContext(AppContext);
+  const [isAddModeOn, setIsAddModeOn] = useState(false);
+  const [text, setText] = useState('');
+  const { t } = useTranslation(); //this accesses the translations
+  const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors
+  const { height } = useWindowDimensions();
+  const onDeleteMode = (mode) => {};
+
+  const onSaveMode = async () => {
+    const newMode = readableLabelToKey(text);
+    if (customModes.indexOf(newMode) > -1) {
+      return;
+    }
+    try {
+      const res = await insertUserCustomMode(newMode);
+      if (res) {
+        setText('');
+        setCustomModes(res['modes'] as string[]);
+        setIsAddModeOn(false);
+        logDebug('Successfuly stored custom mode ' + JSON.stringify(res));
+      }
+    } catch (e) {
+      displayErrorMsg(e, 'Create Mode Error');
+    }
+  };
 
   return (
     <>
@@ -19,19 +55,67 @@ const CustomModesSettingRow = () => {
         onDismiss={() => setIsCustomModesModalOpen(false)}
         transparent={true}>
         <Dialog visible={isCustomModesModalOpen} onDismiss={() => setIsCustomModesModalOpen(false)}>
-          <Dialog.Title>Custom Modes</Dialog.Title>
+          <Dialog.Title>
+            <Text>{t('trip-confirm.custom-mode')}</Text>
+            <TouchableOpacity
+              style={{ position: 'absolute', right: 0 }}
+              onPress={() => setIsAddModeOn(true)}>
+              <Icon source="plus-circle" size={24} />
+            </TouchableOpacity>
+          </Dialog.Title>
           <Dialog.Content>
-            {customModes.map((mode, idx) => {
-              return <List.Item key={mode + idx} title={mode} onPress={(e) => console.log(e)} />;
-            })}
+            {isAddModeOn && (
+              <>
+                <TextInput
+                  label={t('trip-confirm.services-please-fill-in', {
+                    text: 'mode',
+                  })}
+                  value={text}
+                  onChangeText={setText}
+                  maxLength={25}
+                />
+                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
+                  <Button onPress={() => setIsAddModeOn(false)}>
+                    {t('trip-confirm.services-cancel')}
+                  </Button>
+                  <Button onPress={onSaveMode}>{t('trip-confirm.services-save')}</Button>
+                </View>
+              </>
+            )}
+            <ScrollView contentContainerStyle={{ maxHeight: height / 2 }}>
+              {customModes.map((mode, idx) => {
+                return (
+                  <View
+                    key={mode + idx}
+                    style={[styles.itemWrapper, { borderBottomColor: colors.outline }]}>
+                    <Text>{labelKeyToReadable(mode)}</Text>
+                    <TouchableOpacity onPress={() => onDeleteMode(mode)}>
+                      <Icon source="trash-can" size={20} />
+                    </TouchableOpacity>
+                  </View>
+                );
+              })}
+            </ScrollView>
           </Dialog.Content>
           <Dialog.Actions>
-            <Button onPress={() => setIsCustomModesModalOpen(false)}>Close</Button>
+            <Button onPress={() => setIsCustomModesModalOpen(false)}>
+              {t('trip-confirm.services-cancel')}
+            </Button>
           </Dialog.Actions>
         </Dialog>
       </Modal>
     </>
   );
 };
 
+const styles = StyleSheet.create({
+  itemWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+  },
+  iconWrapper: {},
+});
+
 export default CustomModesSettingRow;
diff --git a/www/js/services/commHelper.ts b/www/js/services/commHelper.ts
@@ -239,6 +239,21 @@ export function getUserCustomModes() {
   });
 }
 
+export function insertUserCustomMode(newMode) {
+  return new Promise((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/mode/insert',
+      'new_mode',
+      newMode,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = 'While putting one mode, ' + error;
+    throw error;
+  });
+}
+
 export function updateUserCustomMode(oldMode, newMode, isNewModeMustAdded) {
   const updatedMode = {
     old_mode: oldMode,