From 5e9e2af01a1268f3854650f1f807ab656f0ee0ed Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Thu, 25 Apr 2024 18:47:12 +0100
Subject: [PATCH 01/10] init

---
 api/api.js                  |   6 +--
 lib/plugins/_plugins.mjs    |   2 +
 lib/plugins/userIDB.mjs     |  19 +++++++
 lib/utils/_utils.mjs        |   3 ++
 lib/utils/userIndexedDB.mjs | 104 ++++++++++++++++++++++++++++++++++++
 mod/user/cookie.js          |   3 ++
 public/views/_default.html  |   9 ++++
 7 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 lib/plugins/userIDB.mjs
 create mode 100644 lib/utils/userIndexedDB.mjs

diff --git a/api/api.js b/api/api.js
index f0f430fd5..c309e5a6c 100644
--- a/api/api.js
+++ b/api/api.js
@@ -18,11 +18,11 @@ const routes = {
   workspace: require('../mod/workspace/_workspace'),
 }
 
-process.env.COOKIE_TTL = process.env.COOKIE_TTL || 36000
+process.env.COOKIE_TTL ??= 36000
 
-process.env.TITLE = process.env.TITLE || 'GEOLYTIX | XYZ'
+process.env.TITLE ??= 'GEOLYTIX | XYZ'
 
-process.env.DIR = process.env.DIR || ''
+process.env.DIR ??= ''
 
 module.exports = async (req, res) => {
 
diff --git a/lib/plugins/_plugins.mjs b/lib/plugins/_plugins.mjs
index 8cacbf7e8..169e7593b 100644
--- a/lib/plugins/_plugins.mjs
+++ b/lib/plugins/_plugins.mjs
@@ -10,6 +10,7 @@ import { keyvalue_dictionary } from './keyvalue_dictionary.mjs'
 import { locator } from './locator.mjs'
 import { login } from './login.mjs'
 import { svg_templates } from './svg_templates.mjs'
+import { userIDB } from './userIDB.mjs'
 import { zoomBtn } from './zoomBtn.mjs'
 import { zoomToArea } from './zoomToArea.mjs'
 
@@ -31,6 +32,7 @@ const plugins = {
   locator,
   login,
   svg_templates,
+  userIDB,
   zoomBtn,
   zoomToArea
 }
diff --git a/lib/plugins/userIDB.mjs b/lib/plugins/userIDB.mjs
new file mode 100644
index 000000000..e0c3c439c
--- /dev/null
+++ b/lib/plugins/userIDB.mjs
@@ -0,0 +1,19 @@
+export function userIDB(plugin, mapview) {
+
+  // Find the btnColumn element.
+  const btnColumn = document.getElementById('mapButton');
+
+  if (!btnColumn) return;
+
+  // Append the plugin btn to the btnColumn.
+  btnColumn.append(mapp.utils.html.node`
+    <button
+      title="Delete userIDB"
+      onclick=${deleteDB}>
+      <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
+
+  function deleteDB() {
+
+    mapp.utils.userIndexedDB.deleteDB()
+  }
+}
\ No newline at end of file
diff --git a/lib/utils/_utils.mjs b/lib/utils/_utils.mjs
index 3a42eab51..130d42c76 100644
--- a/lib/utils/_utils.mjs
+++ b/lib/utils/_utils.mjs
@@ -62,6 +62,8 @@ import style from './style.mjs'
 
 import * as svgSymbols from './svgSymbols.mjs'
 
+import * as userIndexedDB from './userIndexedDB.mjs'
+
 import * as gazetteer from './gazetteer.mjs'
 
 import {default as verticeGeoms} from './verticeGeoms.mjs'
@@ -91,6 +93,7 @@ export default {
   queryParams,
   style,
   svgSymbols,
+  userIndexedDB,
   verticeGeoms,
   xhr,
 }
\ No newline at end of file
diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
new file mode 100644
index 000000000..7748ee639
--- /dev/null
+++ b/lib/utils/userIndexedDB.mjs
@@ -0,0 +1,104 @@
+export async function openDB() {
+
+  const OpenDBPromise = new Promise((resolve, reject) => {
+
+    const OpenDBRequest = indexedDB.open(`${mapp.user.email} - ${mapp.user.title}`, 3);
+
+    OpenDBRequest.onerror = (event) => {
+      console.error(event);
+      reject(OpenDBRequest)
+    };
+
+    OpenDBRequest.onsuccess = (event) => {
+      resolve(event.target.result)
+    }
+
+    OpenDBRequest.onupgradeneeded = (event) => {
+      event.target.result.createObjectStore('locales', { keyPath: "key" });
+      //resolve(event.target.result)
+    };
+  })
+
+  await OpenDBPromise
+
+  return OpenDBPromise
+}
+
+export function deleteDB() {
+
+  if (!mapp.user) return;
+
+  indexedDB.deleteDatabase(`${mapp.user.email} - ${mapp.user.title}`)
+
+  console.log('Database deleted')
+}
+
+export async function get(store, key) {
+
+  const db = await openDB()
+
+  if (!db.objectStoreNames.contains(store)) {
+
+    console.warn(`UserIDB doesn't contain "${store}" objectStore.`)
+
+    return
+  }
+
+  const getPromise = new Promise((resolve, reject) => {
+
+    const transaction = db.transaction([store], "readwrite");
+
+    const objectStore = transaction.objectStore(store)
+
+    const request = objectStore.get(key);
+
+    request.onerror = (event) => {
+      console.error(event)
+      reject(request)
+    };
+
+    request.onsuccess = (event) => {
+      console.log(event)
+      resolve(request.result)
+    };
+  })
+
+  await getPromise
+
+  return getPromise
+}
+
+export async function add(store, obj) {
+
+  const db = await openDB()
+
+  if (!db.objectStoreNames.contains(store)) {
+
+    console.warn(`UserIDB doesn't contain "${store}" objectStore.`)
+
+    return
+  }
+
+  const storePromise = new Promise((resolve, reject) => {
+
+    const transaction = db.transaction([store], "readwrite");
+
+    const objectStore = transaction.objectStore(store)
+
+    const request = objectStore.add(obj);
+
+    request.onerror = (event) => {
+      console.error(event)
+      reject(request)
+    };
+
+    request.onsuccess = (event) => {
+      console.log(event)
+      resolve(event.target.result)
+    };
+  })
+
+  await storePromise
+
+  return storePromise
+}
\ No newline at end of file
diff --git a/mod/user/cookie.js b/mod/user/cookie.js
index dff9268dc..4551ce717 100644
--- a/mod/user/cookie.js
+++ b/mod/user/cookie.js
@@ -44,6 +44,9 @@ module.exports = async (req, res) => {
       }
 
       const user = rows[0]
+
+      // Assign title identifier to user object.
+      user.title = process.env.TITLE
     
       if (user.blocked) {
         res.setHeader('Set-Cookie', `${process.env.TITLE}=null;HttpOnly;Max-Age=0;Path=${process.env.DIR || '/'}`)
diff --git a/public/views/_default.html b/public/views/_default.html
index 2b524d5fe..ad607aa66 100644
--- a/public/views/_default.html
+++ b/public/views/_default.html
@@ -568,6 +568,15 @@
         ${mapp.dictionary.no_locales}`)
   }
 
+  let userLocale = await mapp.utils.userIndexedDB.get('locales', locale.key)
+
+  console.log(userLocale)
+
+  if (!userLocale) {
+    let userLocaleKey = await mapp.utils.userIndexedDB.add('locales', locale)
+    console.log(userLocaleKey)
+  }
+
   // Add locale dropdown to layers panel if multiple locales are accessible.
   if (locales.length > 1) {
     const localesDropdown = mapp.ui.elements.dropdown({

From 0af02911f0bd16e8644c3488f2885dd85ea37251 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 26 Apr 2024 13:08:26 +0100
Subject: [PATCH 02/10] userIDB put locale

---
 lib/plugins/userIDB.mjs     |  12 ++--
 lib/utils/userIndexedDB.mjs | 120 ++++++++++++++++++++++--------------
 public/views/_default.html  |  16 ++---
 3 files changed, 88 insertions(+), 60 deletions(-)

diff --git a/lib/plugins/userIDB.mjs b/lib/plugins/userIDB.mjs
index e0c3c439c..59179b75b 100644
--- a/lib/plugins/userIDB.mjs
+++ b/lib/plugins/userIDB.mjs
@@ -8,12 +8,12 @@ export function userIDB(plugin, mapview) {
   // Append the plugin btn to the btnColumn.
   btnColumn.append(mapp.utils.html.node`
     <button
-      title="Delete userIDB"
-      onclick=${deleteDB}>
-      <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
+      title="Update userIDB locale"
+      onclick=${()=>{
 
-  function deleteDB() {
+        console.log(mapview.locale)
+        mapp.utils.userIndexedDB.put('locales', mapview.locale)
 
-    mapp.utils.userIndexedDB.deleteDB()
-  }
+      }}>
+      <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
 }
\ No newline at end of file
diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index 7748ee639..de2b32663 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -1,21 +1,36 @@
-export async function openDB() {
+let IDB
+
+export async function openDB(store) {
 
   const OpenDBPromise = new Promise((resolve, reject) => {
 
-    const OpenDBRequest = indexedDB.open(`${mapp.user.email} - ${mapp.user.title}`, 3);
+    // will create a new database if db/version doesn't exist.
+    const IDBRequest = indexedDB.open(`${mapp.user.email} - ${mapp.user.title}`, 3);
 
-    OpenDBRequest.onerror = (event) => {
-      console.error(event);
-      reject(OpenDBRequest)
+    IDBRequest.onerror = (event) => {
+      console.error(IDBRequest.error)
+      resolve(IDBRequest)
     };
 
-    OpenDBRequest.onsuccess = (event) => {
-      resolve(event.target.result)
+    IDBRequest.onsuccess = (event) => {
+
+      if (!event.target.result.objectStoreNames.contains(store)) {
+
+        console.warn(`UserIDB doesn't contain "${store}" objectStore.`)
+
+        IDB = null
+        resolve()
+      }
+
+      IDB = event.target.result
+      resolve()
     }
 
-    OpenDBRequest.onupgradeneeded = (event) => {
-      event.target.result.createObjectStore('locales', { keyPath: "key" });
-      //resolve(event.target.result)
+    // will be called on database versioning.
+    IDBRequest.onupgradeneeded = (event) => {
+      
+      // onsuccess method will be called after the object store is created.
+      event.target.result.createObjectStore(store, { keyPath: "key" });
     };
   })
 
@@ -33,33 +48,52 @@ export function deleteDB() {
   console.log('Database deleted')
 }
 
-export async function get(store, key) {
+export async function add(store, obj) {
+
+  if (!IDB) await openDB(store)
 
-  const db = await openDB()
+  const addPromise = new Promise((resolve, reject) => {
 
-  if (!db.objectStoreNames.contains(store)) {
+    const IDBTransaction = IDB.transaction([store], "readwrite");
 
-    console.warn(`UserIDB doesn't contain "${store}" objectStore.`)
+    const objectStore = IDBTransaction.objectStore(store)
 
-    return
-  }
+    const IDBRequest = objectStore.add(obj);
+
+    IDBRequest.onerror = (event) => {
+      console.error(IDBRequest.error)
+      resolve(IDBRequest)
+    };
+
+    IDBRequest.onsuccess = (event) => {
+      resolve(event.target.result)
+    };
+  })
+
+  await addPromise
+
+  return addPromise
+}
+
+export async function get(store, key) {
+
+  if (!IDB) await openDB(store)
 
   const getPromise = new Promise((resolve, reject) => {
 
-    const transaction = db.transaction([store], "readwrite");
+    const IDBTransaction = IDB.transaction([store], "readwrite");
 
-    const objectStore = transaction.objectStore(store)
+    const objectStore = IDBTransaction.objectStore(store)
 
-    const request = objectStore.get(key);
+    const IDBRequest = objectStore.get(key);
 
-    request.onerror = (event) => {
-      console.error(event)
-      reject(request)
+    IDBRequest.onerror = (event) => {
+      console.error(IDBRequest.error)
+      reject(IDBRequest)
     };
 
-    request.onsuccess = (event) => {
-      console.log(event)
-      resolve(request.result)
+    IDBRequest.onsuccess = (event) => {
+      resolve(IDBRequest.result)
     };
   })
 
@@ -68,37 +102,29 @@ export async function get(store, key) {
   return getPromise
 }
 
-export async function add(store, obj) {
-
-  const db = await openDB()
-
-  if (!db.objectStoreNames.contains(store)) {
+export async function put(store, obj) {
 
-    console.warn(`UserIDB doesn't contain "${store}" objectStore.`)
+  if (!IDB) await openDB(store)
+  
+  const updatePromise = new Promise((resolve, reject) => {
 
-    return
-  }
+    const IDBTransaction = IDB.transaction([store], "readwrite");
 
-  const storePromise = new Promise((resolve, reject) => {
+    const objectStore = IDBTransaction.objectStore(store)
 
-    const transaction = db.transaction([store], "readwrite");
+    const IDBRequest = objectStore.put(obj);
 
-    const objectStore = transaction.objectStore(store)
-
-    const request = objectStore.add(obj);
-
-    request.onerror = (event) => {
-      console.error(event)
-      reject(request)
+    IDBRequest.onerror = (event) => {
+      console.error(IDBRequest.error)
+      reject(IDBRequest)
     };
 
-    request.onsuccess = (event) => {
-      console.log(event)
-      resolve(event.target.result)
+    IDBRequest.onsuccess = (event) => {
+      resolve(IDBRequest.result)
     };
   })
 
-  await storePromise
+  await updatePromise
 
-  return storePromise
+  return updatePromise
 }
\ No newline at end of file
diff --git a/public/views/_default.html b/public/views/_default.html
index ad607aa66..6db69688c 100644
--- a/public/views/_default.html
+++ b/public/views/_default.html
@@ -558,7 +558,7 @@
   const locales = await mapp.utils.xhr(`${mapp.host}/api/workspace/locales`);
 
   // Get locale with list of layers from Workspace API.
-  const locale = await mapp.utils.xhr(
+  let locale = await mapp.utils.xhr(
     `${mapp.host}/api/workspace/locale?locale=${mapp.hooks.current.locale || locales[0]?.key}&layers=true`);
 
   if (locale instanceof Error) {
@@ -568,15 +568,17 @@
         ${mapp.dictionary.no_locales}`)
   }
 
-  let userLocale = await mapp.utils.userIndexedDB.get('locales', locale.key)
+  if (mapp.hooks.current.useridb) {
 
-  console.log(userLocale)
+    let userLocale = await mapp.utils.userIndexedDB.get('locales', locale.key)
 
-  if (!userLocale) {
-    let userLocaleKey = await mapp.utils.userIndexedDB.add('locales', locale)
-    console.log(userLocaleKey)
+    if (!userLocale) {
+      await mapp.utils.userIndexedDB.add('locales', locale)
+    } else {
+      locale = userLocale
+    }
   }
-
+ 
   // Add locale dropdown to layers panel if multiple locales are accessible.
   if (locales.length > 1) {
     const localesDropdown = mapp.ui.elements.dropdown({

From 118eede822e9a6fc5d019a6949aada07839d1949 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 26 Apr 2024 13:34:50 +0100
Subject: [PATCH 03/10] remove console.log(locale) from userIDB plugin

---
 lib/plugins/userIDB.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/plugins/userIDB.mjs b/lib/plugins/userIDB.mjs
index 59179b75b..51470d672 100644
--- a/lib/plugins/userIDB.mjs
+++ b/lib/plugins/userIDB.mjs
@@ -11,7 +11,6 @@ export function userIDB(plugin, mapview) {
       title="Update userIDB locale"
       onclick=${()=>{
 
-        console.log(mapview.locale)
         mapp.utils.userIndexedDB.put('locales', mapview.locale)
 
       }}>

From df2b6720fea1c54aabe59b3a682111a91ce50030 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Mon, 13 May 2024 15:49:21 +0100
Subject: [PATCH 04/10] updateLayer

---
 lib/plugins/userIDB.mjs     | 31 ++++++++++++++++++++++++++++++-
 lib/utils/userIndexedDB.mjs |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/lib/plugins/userIDB.mjs b/lib/plugins/userIDB.mjs
index 51470d672..5ee2d1067 100644
--- a/lib/plugins/userIDB.mjs
+++ b/lib/plugins/userIDB.mjs
@@ -11,8 +11,37 @@ export function userIDB(plugin, mapview) {
       title="Update userIDB locale"
       onclick=${()=>{
 
+        mapview.locale.layers.forEach(layer => {
+
+          if (typeof layer !== 'object') return;
+
+          updateLayer(layer, mapview.layers[layer.key])
+        })
+
         mapp.utils.userIndexedDB.put('locales', mapview.locale)
 
       }}>
       <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
-}
\ No newline at end of file
+}
+
+function updateLayer(layer, _layer) {
+
+  if (!_layer) return;
+
+  Object.keys(_layer).forEach(key => {
+
+    if (_layer[key] === undefined) return;
+
+    if (_layer[key] === null) {
+      layer[key] = null;
+    }
+
+    if (typeof _layer[key] === 'function') return;
+
+    if (typeof _layer[key] === 'object') return;
+
+    layer[key] = _layer[key]
+  })
+
+  return layer;
+}
diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index de2b32663..eae610cc4 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -127,4 +127,4 @@ export async function put(store, obj) {
   await updatePromise
 
   return updatePromise
-}
\ No newline at end of file
+}

From 47ac671fa43226ea8837365d3aad4e33461de6bf Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Thu, 16 May 2024 14:23:24 +0200
Subject: [PATCH 05/10] Update docs

---
 lib/utils/userIndexedDB.mjs | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index eae610cc4..282956d9a 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -1,5 +1,17 @@
+/** 
+ * ### mapp.utils.userIndexedDB
+ * 
+ * 
+ * @module /utils/userIndexedDB
+ */
+
 let IDB
 
+/**
+ * @function openDB
+ * @param {Object} store 
+ * @returns {Promise} OpenDBPromise
+ */
 export async function openDB(store) {
 
   const OpenDBPromise = new Promise((resolve, reject) => {
@@ -39,6 +51,9 @@ export async function openDB(store) {
   return OpenDBPromise
 }
 
+/**
+ * @function deleteDB
+ */
 export function deleteDB() {
 
   if (!mapp.user) return;
@@ -48,6 +63,12 @@ export function deleteDB() {
   console.log('Database deleted')
 }
 
+/**
+ * @function add
+ * @param {Object} store 
+ * @param {Object} obj 
+ * @returns {Promise} addPromise
+ */
 export async function add(store, obj) {
 
   if (!IDB) await openDB(store)
@@ -75,6 +96,12 @@ export async function add(store, obj) {
   return addPromise
 }
 
+/**
+ * 
+ * @param {Object} store 
+ * @param {string} key 
+ * @returns {Promise} getPromise
+ */
 export async function get(store, key) {
 
   if (!IDB) await openDB(store)
@@ -102,6 +129,12 @@ export async function get(store, key) {
   return getPromise
 }
 
+/**
+ * 
+ * @param {Object} store 
+ * @param {Object} obj 
+ * @returns {Promise} updatePromise
+ */
 export async function put(store, obj) {
 
   if (!IDB) await openDB(store)

From 928d9ea904475090849a162c478216c078f350e5 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Mon, 20 May 2024 09:31:56 +0100
Subject: [PATCH 06/10] store to string

---
 lib/utils/userIndexedDB.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index 282956d9a..4ae90e37b 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -12,7 +12,9 @@ let IDB
  * @param {Object} store 
  * @returns {Promise} OpenDBPromise
  */
-export async function openDB(store) {
+export async function openDB(_store) {
+
+  const store = _store.toString()
 
   const OpenDBPromise = new Promise((resolve, reject) => {
 

From 92576aeac8109d190c5e5111116167b8f116e6b3 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Mon, 20 May 2024 10:34:01 +0200
Subject: [PATCH 07/10] Updated docs

---
 lib/utils/userIndexedDB.mjs | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index 282956d9a..173863a79 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -1,14 +1,30 @@
 /** 
  * ### mapp.utils.userIndexedDB
+ * This [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology) implementation allows to store, get, and update a locale object from the 'locales' object store in a user indexedDB.
  * 
+ * There are many different operations that the indexedDB can handle. Typically the operations are CRUD operations.
  * 
+ * The `userIndexDB` methods have all been moved to the `mapp.utils` object.
+ * 
+ * The logic for initialisation for the userIndexedDB object is the following:
+ * - `userIndexedDB.open(store)` will open a DB with the following name `${mapp.user.email} - {mapp.user.title}.
+ * - The database will not be created if there is a pre-existing DB. 
+ * - The creation will trigger the `onupgradeneeded` event which checks whether the request `store` exists in the userIndexedDB.
+ * 
+ * The `process.env.TITLE` will be added to the user object in the cookie module.
+ * The `user.title` is required to generate a unique indexedDB for each user[email/instance[title]]
+ * 
+ * All object stores use the key value as a keypath for object indicies.
+ * 
+ *   
+ *
+ *  
  * @module /utils/userIndexedDB
  */
 
 let IDB
 
 /**
- * @function openDB
  * @param {Object} store 
  * @returns {Promise} OpenDBPromise
  */
@@ -40,9 +56,9 @@ export async function openDB(store) {
 
     // will be called on database versioning.
     IDBRequest.onupgradeneeded = (event) => {
-      
+
       // onsuccess method will be called after the object store is created.
-      event.target.result.createObjectStore(store, { keyPath: "key" });
+      event.target.result.createObjectStore(store, { keyPath: 'key' });
     };
   })
 
@@ -53,7 +69,7 @@ export async function openDB(store) {
 
 /**
  * @function deleteDB
- */
+ */ 
 export function deleteDB() {
 
   if (!mapp.user) return;
@@ -75,7 +91,7 @@ export async function add(store, obj) {
 
   const addPromise = new Promise((resolve, reject) => {
 
-    const IDBTransaction = IDB.transaction([store], "readwrite");
+    const IDBTransaction = IDB.transaction([store], 'readwrite');
 
     const objectStore = IDBTransaction.objectStore(store)
 
@@ -108,7 +124,7 @@ export async function get(store, key) {
 
   const getPromise = new Promise((resolve, reject) => {
 
-    const IDBTransaction = IDB.transaction([store], "readwrite");
+    const IDBTransaction = IDB.transaction([store], 'readwrite');
 
     const objectStore = IDBTransaction.objectStore(store)
 
@@ -138,10 +154,10 @@ export async function get(store, key) {
 export async function put(store, obj) {
 
   if (!IDB) await openDB(store)
-  
+
   const updatePromise = new Promise((resolve, reject) => {
 
-    const IDBTransaction = IDB.transaction([store], "readwrite");
+    const IDBTransaction = IDB.transaction([store], 'readwrite');
 
     const objectStore = IDBTransaction.objectStore(store)
 

From 35b4848dadc506ad80572cbf5f49828fb8bd1506 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Mon, 20 May 2024 15:14:09 +0200
Subject: [PATCH 08/10] Update documentation

---
 lib/utils/userIndexedDB.mjs | 75 +++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index 7040f4e97..c618a10e8 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -16,8 +16,71 @@
  * 
  * All object stores use the key value as a keypath for object indicies.
  * 
- *   
+ * Adding the url parameter `useridb=true` will ask the default script to get the keyed locale from the user indexedDB. 
+ * The userLocale will be assigned as locale if available.
+ * 
+ * ```js
+ *   if (mapp.hooks.current.useridb) {
+
+    let userLocale = await mapp.utils.userIndexedDB.get('locales', locale.key)
+
+    if (!userLocale) {
+      await mapp.utils.userIndexedDB.add('locales', locale)
+    } else {
+      locale = userLocale
+    }
+  }
+ * ```
  *
+ * The userIDB plugin adds a button to put [update] the locale in the user indexedDB.
+ * 
+ * ```js
+ * export function userIDB(plugin, mapview) {
+
+  // Find the btnColumn element.
+  const btnColumn = document.getElementById('mapButton');
+
+  if (!btnColumn) return;
+
+  // Append the plugin btn to the btnColumn.
+  btnColumn.append(mapp.utils.html.node`
+    <button
+      title="Update userIDB locale"
+      onclick=${()=>{
+
+        mapp.utils.userIndexedDB.put('locales', mapview.locale)
+
+      }}>
+      <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
+}
+ * ```
+ * This can be tested but updating the mapview.locale in another plugin, e.g. dark_mode
+ * 
+ * The enabled status will be stored with the local applying the setting when the locale is loaded with the useridb=true url param.
+ * 
+ * ```js
+ * mapp.plugins.dark_mode = (plugin, mapview) => {
+
+  // Get the map button
+  const mapButton = document.getElementById("mapButton");
+
+  // If mapbutton doesn't exist, return (for custom views).
+  if (!mapButton) return;
+
+  // toggle dark_mode if enabled in config.
+  mapview.locale.dark_mode.enabled && toggleDarkMode()
+
+  // If the button container exists, append the dark mode button.
+  mapButton.append(mapp.utils.html.node`
+    <button
+      title="Color Mode"
+      class="btn-color-mode"
+      onclick=${()=>{
+        mapview.locale.dark_mode.enabled = toggleDarkMode()
+      }}>
+      <div class="mask-icon">`);
+}
+ * ```
  *  
  * @module /utils/userIndexedDB
  */
@@ -70,6 +133,7 @@ export async function openDB(_store) {
 }
 
 /**
+ * - deletes the user indexedDB.
  * @function deleteDB
  */ 
 export function deleteDB() {
@@ -82,6 +146,9 @@ export function deleteDB() {
 }
 
 /**
+ * - Adds the keyed object to the named store.
+ * - The key will be returned on success. 
+ * - Adding the same keyed object twice will result in an error.
  * @function add
  * @param {Object} store 
  * @param {Object} obj 
@@ -115,7 +182,7 @@ export async function add(store, obj) {
 }
 
 /**
- * 
+ * - Gets the keyed object from the named store.
  * @param {Object} store 
  * @param {string} key 
  * @returns {Promise} getPromise
@@ -148,7 +215,9 @@ export async function get(store, key) {
 }
 
 /**
- * 
+ * - puts the keyed object to the named store. 
+ * - This will override the existing keyed object. 
+ * - Updates work by replacing (put) the same keyed object into an user indexedDB.
  * @param {Object} store 
  * @param {Object} obj 
  * @returns {Promise} updatePromise

From b37ccb1c087769e3bef57a66243ba05fc6cccdae Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Mon, 20 May 2024 15:20:15 +0200
Subject: [PATCH 09/10] Update docs

---
 lib/utils/userIndexedDB.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/userIndexedDB.mjs b/lib/utils/userIndexedDB.mjs
index c618a10e8..345dbf939 100644
--- a/lib/utils/userIndexedDB.mjs
+++ b/lib/utils/userIndexedDB.mjs
@@ -2,7 +2,7 @@
  * ### mapp.utils.userIndexedDB
  * This [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology) implementation allows to store, get, and update a locale object from the 'locales' object store in a user indexedDB.
  * 
- * There are many different operations that the indexedDB can handle. Typically the operations are CRUD operations.
+ * There are many different operations that the indexedDB can handle. Typically the operations are CRUD.
  * 
  * The `userIndexDB` methods have all been moved to the `mapp.utils` object.
  * 

From 2c6aec153ef654af9d5e22f08023d7da2ce905bf Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Tue, 21 May 2024 13:14:26 +0100
Subject: [PATCH 10/10] mapp.user; alert; plugin.title

---
 lib/plugins/userIDB.mjs | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/lib/plugins/userIDB.mjs b/lib/plugins/userIDB.mjs
index 5ee2d1067..c00c0137e 100644
--- a/lib/plugins/userIDB.mjs
+++ b/lib/plugins/userIDB.mjs
@@ -1,14 +1,22 @@
 export function userIDB(plugin, mapview) {
 
+  if (!mapp.user?.email) {
+
+    console.warn(`The userIDB plugin requires a mapp.user`)
+    return;
+  }
+
   // Find the btnColumn element.
   const btnColumn = document.getElementById('mapButton');
 
   if (!btnColumn) return;
 
+  plugin.title ??= "Update userIDB locale"
+
   // Append the plugin btn to the btnColumn.
   btnColumn.append(mapp.utils.html.node`
     <button
-      title="Update userIDB locale"
+      title=${plugin.title}
       onclick=${()=>{
 
         mapview.locale.layers.forEach(layer => {
@@ -20,6 +28,8 @@ export function userIDB(plugin, mapview) {
 
         mapp.utils.userIndexedDB.put('locales', mapview.locale)
 
+        alert(`User ${mapp.user.email} IndexedDB updated.`)
+
       }}>
       <div class="mask-icon" style="mask-image:url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rule_settings/default/24px.svg)">`);
 }