Still working on the account dialog.

src/components/account/Account.tsx

@@ -5,6 +5,8 @@ import PersonIcon from '@suid/icons-material/Person';
 import style from './Account.module.css';
 import {
   Box,
+  Button,
+  DialogActions,
   IconButton,
   InputLabel,
   NativeSelect,
@@ -13,8 +15,6 @@ import {
 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';
 import { getAccountById } from '../../db/account';
 
@@ -63,7 +63,7 @@ const Account: Component<{}> = (props) => {
     console.log({
       caller: 'Account / changeAccountHandler',
       event,
-      selectedAccountName: selectedAccountId,
+      selectedAccountId: selectedAccountId,
       account: account(),
     });
   };
@@ -81,6 +81,42 @@ const Account: Component<{}> = (props) => {
     });
   };
 
+  const saveHandler = async () => {
+    const updatedAccount = account();
+    if (updatedAccount.id === '--new--') {
+      updatedAccount.id = updatedAccount.name;
+    }
+    await dispatch({
+      action: 'putAccount',
+      params: { id: updatedAccount.id, account: updatedAccount },
+    });
+    const updatedSettings = {
+      ...settings(),
+      currentAccountId: updatedAccount.id,
+    };
+    await dispatch({
+      action: 'putSettings',
+      params: { settings: updatedSettings },
+    });
+    console.log({
+      caller: 'Account / saveHandler',
+      account: account(),
+      updatedAccount,
+      settings: settings(),
+      updatedSettings,
+    });
+    handleClose();
+    location.reload();
+  };
+
+  const isValid = () => {
+    if (!account().localDb) {
+      return false;
+    }
+    //TODO: add more tests
+    return true;
+  };
+
   return (
     <>
       <div class={style.control}>
@@ -156,6 +192,18 @@ const Account: Component<{}> = (props) => {
             onChange={changeHandlerFactory('remoteDbPassword')}
           />
         </Box>
+        <DialogActions>
+          <Button
+            variant='contained'
+            disabled={!isValid()}
+            onClick={saveHandler}
+          >
+            {t('accountSave')}
+          </Button>
+          <Button variant='outlined' color='secondary' onClick={handleClose}>
+            {t('accountCancel')}
+          </Button>
+        </DialogActions>
       </Dialog>
     </>
   );

src/db/account.ts

@@ -12,7 +12,8 @@ export const getAccounts = async () => {
   return accountDocs.rows.map((row: any) => row.doc.doc);
 };
 
-export const putAccount = async (id: string, account: any) => {
+export const putAccount = async (params: any) => {
+  const { id, account } = params;
   const uri = getUri('account', { account: id });
   return await put(uri, 'account', (_: any) => account, {}, true);
 };

src/db/index.ts

@@ -39,21 +39,21 @@ export const initDb = async (params: any) => {
 
   if (accounts.length === 0) {
     accounts[0] = initialAccount;
-    await putAccount(initialAccount.id, initialAccount);
+    await putAccount({ id: initialAccount.id, account: initialAccount });
   }
 
   const settings = await getSettings();
   let currentAccount = getAccountById(accounts, settings.currentAccountId);
   if (currentAccount === undefined) {
     settings.currentAccountId = accounts[0].id;
-    await putSettings(settings);
+    await putSettings({ settings });
     currentAccount = accounts[0];
   }
 
   console.log({ caller: 'initDb', settings, currentAccount });
 
   if (globalThis.db === undefined) {
-    globalThis.db = new PouchDB('dyomedea', {
+    globalThis.db = new PouchDB(currentAccount.localDb, {
       auto_compaction: false,
     });
   }
@@ -81,40 +81,40 @@ export const initDb = async (params: any) => {
   }
   //await await db.compact();
 
-  const sync = PouchDB.sync(
+  // const sync = PouchDB.sync(
-    'dyomedea',
+  //   'dyomedea',
-    'http://admin:password@localhost:5984/dyomedea',
+  //   'http://admin:password@localhost:5984/dyomedea',
-    {
+  //   {
-      live: true,
+  //     live: true,
-      retry: true,
+  //     retry: true,
-    }
+  //   }
-  )
+  // )
-    .on('change', function (info) {
+  //   .on('change', function (info) {
-      // handle change
+  //     // handle change
-      console.log({ caller: 'Sync / change', info });
+  //     console.log({ caller: 'Sync / change', info });
-    })
+  //   })
-    .on('paused', function (err) {
+  //   .on('paused', function (err) {
-      // replication paused (e.g. replication up to date, user went offline)
+  //     // replication paused (e.g. replication up to date, user went offline)
-      console.log({ caller: 'Sync / paused', err });
+  //     console.log({ caller: 'Sync / paused', err });
-    })
+  //   })
-    .on('active', function () {
+  //   .on('active', function () {
-      // replicate resumed (e.g. new changes replicating, user went back online)
+  //     // replicate resumed (e.g. new changes replicating, user went back online)
-      console.log({ caller: 'Sync / active' });
+  //     console.log({ caller: 'Sync / active' });
-    })
+  //   })
-    .on('denied', function (err) {
+  //   .on('denied', function (err) {
-      // a document failed to replicate (e.g. due to permissions)
+  //     // a document failed to replicate (e.g. due to permissions)
-      console.error({ caller: 'Sync / denied', err });
+  //     console.error({ caller: 'Sync / denied', err });
-    })
+  //   })
-    .on('complete', function (info) {
+  //   .on('complete', function (info) {
-      // handle complete
+  //     // handle complete
-      console.log({ caller: 'Sync / complete', info });
+  //     console.log({ caller: 'Sync / complete', info });
-    })
+  //   })
-    .on('error', function (err) {
+  //   .on('error', function (err) {
-      // handle error
+  //     // handle error
-      console.error({ caller: 'Sync / error', err });
+  //     console.error({ caller: 'Sync / error', err });
-    });
+  //   });
 
-  console.log({ caller: 'initDb / before db.changes' });
+  // console.log({ caller: 'initDb / before db.changes' });
 
   const changes = db
     .changes({ since: 'now', live: true, include_docs: false })

src/db/settings.ts

@@ -11,6 +11,7 @@ export const getSettings = async () => {
   }
 };
 
-export const putSettings = async (settings: any) => {
+export const putSettings = async (params: any) => {
+  const { settings } = params;
   return await put('settings', 'settings', (_: any) => settings, {}, true);
 };

src/i18n/en.ts

@@ -61,6 +61,7 @@ const dict = {
   remoteDbServer: 'Remote database server URL',
   remoteDbUser: 'Remote database user',
   remoteDbPassword: 'Remote database password',
+  accountSave: 'Save',
 };
 
 export default dict;

src/i18n/fr.ts

@@ -66,6 +66,8 @@ const dict = {
   remoteDbServer: 'Adresse du serveur de base de données distant',
   remoteDbUser: 'Utilisateur de la base de données distante',
   remoteDbPassword: 'Mot de passe de la base de données distante',
+  accountSave: 'Sauvegarder',
+  accountCancel: 'Annuler',
 };
 
 export default dict;