Implementing an 'account' dialog (WIP)

src/components/account/Account.module.css

@@ -0,0 +1,7 @@
+.control {
+  opacity: 1;
+  position: fixed !important;
+  top: 0px;
+  margin-left: calc(100% - 35px) !important;
+  z-index: 1;
+}

src/components/account/Account.tsx

@@ -0,0 +1,163 @@
+import { Component, createSignal, For } from 'solid-js';
+
+import PersonIcon from '@suid/icons-material/Person';
+
+import style from './Account.module.css';
+import {
+  Box,
+  IconButton,
+  InputLabel,
+  NativeSelect,
+  TextField,
+} from '@suid/material';
+import { useI18n } from '@solid-primitives/i18n';
+import Dialog from '../dialog';
+import dispatch from '../../workers/dispatcher-main';
+import allGpxes from '../all-gpxes';
+import gpx from '../gpx';
+import { cloneDeep } from 'lodash';
+
+const Account: Component<{}> = (props) => {
+  const [t] = useI18n();
+  const [open, setOpen] = createSignal(false);
+  const [settings, setSettings] = createSignal<any>();
+  const [accounts, setAccounts] = createSignal<any>();
+  const [account, setAccount] = createSignal<any>({});
+
+  const handleClickOpen = async () => {
+    setOpen(true);
+    const newSettings: any = await dispatch({
+      action: 'getSettings',
+    });
+    setSettings(newSettings || {});
+    const newAccounts: any = await dispatch({
+      action: 'getAccounts',
+    });
+    setAccounts([
+      { id: '--new--', name: t('newAccount') },
+      ...newAccounts.rows,
+    ]);
+
+    console.log({
+      caller: 'Account / handleClickOpen',
+      settings: settings(),
+      accounts: accounts(),
+    });
+  };
+
+  const handleClose = (event: any, reason?: string) => {
+    console.log({
+      caller: 'Account / handleClose',
+      event,
+      reason,
+    });
+    if (reason === undefined) {
+      setOpen(false);
+    }
+  };
+
+  const changeAccountHandler = (event: any) => {
+    const selectedAccountName = event.target.value;
+    const targetAccount =
+      accounts().filter((acc: any) => acc.name === selectedAccountName)[0] ||
+      {};
+    setAccount(cloneDeep(targetAccount));
+    console.log({
+      caller: 'Account / changeAccountHandler',
+      event,
+      selectedAccountName,
+      account: account(),
+    });
+  };
+
+  const changeHandlerFactory = (path: string) => (event: any) => {
+    const value = event.target.value;
+    const newAccount = cloneDeep(account());
+    newAccount[path] = value;
+    setAccount(newAccount);
+    console.log({
+      caller: 'Account / changeHandlerFactory / ' + path,
+      event,
+      value,
+      account: account(),
+    });
+  };
+
+  return (
+    <>
+      <div class={style.control}>
+        <IconButton onClick={handleClickOpen}>
+          <PersonIcon />
+        </IconButton>
+      </div>
+      <Dialog
+        open={open()}
+        title={t('account')}
+        closeHandler={handleClose}
+        fullScreen={true}
+      >
+        <Box
+          component='form'
+          sx={{
+            width: '100%',
+            '& .MuiTextField-root': { m: 1, width: '100%' },
+            paddingTop: '5px',
+          }}
+          noValidate
+          autoComplete='off'
+        >
+          <InputLabel variant='normal' htmlFor='account-chooser'>
+            {t('accountChooser')}
+          </InputLabel>
+          <NativeSelect
+            inputProps={{
+              name: 'account-chooser',
+              id: 'account-chooser',
+            }}
+            onChange={changeAccountHandler}
+          >
+            <For each={accounts()}>
+              {(account: any) => (
+                <option value={account.id} selected={account.id === ''}>
+                  {account.name}
+                </option>
+              )}
+            </For>
+          </NativeSelect>
+
+          <TextField
+            label={t('accountName')}
+            value={account().name || ''}
+            onChange={changeHandlerFactory('name')}
+          />
+
+          <TextField
+            label={t('localDb')}
+            value={account().localDb || ''}
+            onChange={changeHandlerFactory('localDb')}
+          />
+
+          <TextField
+            label={t('remoteDbServer')}
+            value={account().remoteDbServer || ''}
+            onChange={changeHandlerFactory('remoteDbServer')}
+          />
+
+          <TextField
+            label={t('remoteDbUser')}
+            value={account().remoteDbUser || ''}
+            onChange={changeHandlerFactory('remoteDbUser')}
+          />
+
+          <TextField
+            label={t('remoteDbPassword')}
+            value={account().remoteDbPassword || ''}
+            onChange={changeHandlerFactory('remoteDbPassword')}
+          />
+        </Box>
+      </Dialog>
+    </>
+  );
+};
+
+export default Account;

src/components/account/index.ts

@@ -0,0 +1 @@
+export { default } from './Account';

src/components/dialog/Dialog.tsx

@@ -27,28 +27,14 @@ const Dialog: Component<{
           backgroundColor: 'rgba(14, 116, 144, 0.7)',
           color: 'white',
           clear: 'both',
-          paddingRight: '20px',
+          margin: '0',
+          paddingLeft: '0',
         }}
       >
-        <Grid container spacing={2} alignItems='center'>
-          <Grid item xs={11}>
-            {props.title}
-          </Grid>
-          <Grid
-            item
-            xs={1}
-            sx={{
-              alignSelf: 'right',
-              marginRight: '0px',
-              paddingRight: '0px',
-              paddingTop: '16px',
-            }}
-          >
-            <IconButton onClick={props.closeHandler}>
-              <CloseIcon />
-            </IconButton>
-          </Grid>
-        </Grid>
+        <IconButton onClick={props.closeHandler}>
+          <CloseIcon />
+        </IconButton>
+        {props.title}
       </DialogTitle>
       <DialogContent sx={{ width: 'calc(100% - 60px)' }}>
         {props.children}

src/components/map/Map.tsx

@@ -40,6 +40,7 @@ import dispatch from '../../workers/dispatcher-main';
 import { debounce } from 'lodash';
 
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
+import Account from '../account';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -271,6 +272,7 @@ const Map: Component = () => {
       <GpxImport />
       <MapTileProvider />
       <GpxDialog />
+      <Account />
       <AllGpxes map={getMap} />
       <Infos />
     </div>