From 0e60d0bd31fbf2d17db136d6eda445d3c6359a8c Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Tue, 8 Oct 2024 15:24:00 +0100
Subject: [PATCH 01/23] remove cloudinary provider module

---
 lib/ui/locations/entries/cloudinary.mjs | 317 +++++++++++++++++-------
 mod/provider/_provider.js               |   3 -
 mod/provider/cloudinary.js              |  84 -------
 3 files changed, 229 insertions(+), 175 deletions(-)
 delete mode 100644 mod/provider/cloudinary.js

diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index 4283b9adc7..c2bdb98e77 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -1,15 +1,3 @@
-const types = {
-  image,
-  images,
-  documents
-}
-
-const onload = {
-  image: imageLoad,
-  images: imageLoad,
-  documents: docLoad
-}
-
 mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
@@ -58,13 +46,37 @@ mapp.utils.merge(mapp.dictionaries, {
   }
 })
 
+const types = {
+  image,
+  images,
+  documents
+}
+
 export default entry => types[entry.type](entry)
 
+const onload = {
+  image: imageLoad,
+  images: imageLoad,
+  documents: docLoad
+}
+
+/**
+@function image
+
+@description
+This image function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+
+@param {Object} entry 
+@returns {HTML} image
+*/
 function image(entry) {
 
+  let image
+
   if (entry.value) {
 
-    const trashBtn = mapp.utils.html`
+    // The trash button will only be created when entry is editable.
+    const trashBtn = entry.edit && mapp.utils.html`
       <button 
         style="position: absolute; width: 2em; height: 2em; right: 0.5em; top: 0.5em;"
         class="mask-icon trash no"
@@ -72,32 +84,57 @@ function image(entry) {
         data-src=${entry.value}
         onclick=${e => trash(e, entry)}>`
 
-    // Render image with src from cloudinary reference as value.
-    return mapp.utils.html.node`
-      <div style="position: relative;">
+    image = mapp.utils.html.node`
+      <div style="position: relative">
         <img
           style="width: 100%"
           src=${entry.value}
           onclick=${mapp.ui.utils.imagePreview}>
-          ${entry.edit && trashBtn}`
+          ${trashBtn}`
+
+  // Edit can only be available if no image is stored.
+  } else if (entry.edit) {
 
+    image = mapp.utils.html.node`
+      <input 
+        type=file class="flat bold wide primary-colour"
+        accept="image/*"
+        capture="camera"
+        onchange=${e => upload(e, entry)}>`
   }
 
-  if (entry.edit) {
+  if (typeof entry.drawer === 'string') {
 
-    return mapp.utils.html.node`
-      <input
-        type="file"
-        accept="image/*;capture=camera"
-        onchange=${e => upload(e, entry)}>`
+    // Create a drawer with the entry.drawer value as header.
+    return mapp.ui.elements.drawer({
+      data_id: "upload-image-drawer",
+      class: `raised ${entry.expanded? 'expanded' : ''}`,
+      header: mapp.utils.html`
+        <h3>${entry.drawer}</h3>
+        <div class="mask-icon expander expanded raise"></div>`,
+      content: image})
+
+  } else {
+
+    return image
   }
 }
 
+/**
+@function images
+
+@description
+This images function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+
+@param {Object} entry 
+@returns {HTML} imagesGrid
+*/
 function images(entry) {
 
   const images = entry.value?.map(image => {
 
-    const trashBtn = mapp.utils.html`
+    // The trash button will only be created when entry is editable.
+    const trashBtn = entry.edit && mapp.utils.html`
       <button
         class="mask-icon trash no"
         data-name=${image.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
@@ -109,29 +146,55 @@ function images(entry) {
         <img 
           src=${image}
           onclick=${mapp.ui.utils.imagePreview}>
-          ${entry.edit && trashBtn}`
+          ${trashBtn}`
 
   }) || []
 
+  // Push upload input into images array.
   if (entry.edit) images.push(mapp.utils.html.node`
     <div class="mask-icon add-photo pos-center">
       <input
         type="file"
-        accept="image/*;capture=camera"
+        accept="image/*"
+        capture="camera"
         onchange=${e => upload(e, entry)}>`)
 
   if (!images.length) return;
 
-  entry.list = mapp.utils.html.node`<div class="images-grid">${images}`
+  const imagesGrid = mapp.utils.html.node`
+    <div class="images-grid">${images}`
+
+  if (typeof entry.drawer === 'string') {
 
-  return entry.list;
+    return mapp.ui.elements.drawer({
+      data_id: "upload-image-drawer",
+      class: `raised ${entry.expanded? 'expanded' : ''}`,
+      header: mapp.utils.html`
+        <h3>${entry.drawer}</h3>
+        <div class="mask-icon expander expanded raise"></div>`,
+      content: imagesGrid
+    })
+
+  } else {
+
+    return imagesGrid
+  }
 }
 
+/**
+@function documents
+
+@description
+This documents function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+
+@param {Object} entry 
+@returns {HTML} docslist
+ */
 function documents(entry) {
 
   const docs = entry.value?.map(doc => {
 
-    const trashBtn = mapp.utils.html`
+    const trashBtn = entry.edit && mapp.utils.html`
       <button
         class="mask-icon trash no"
         data-name=${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
@@ -140,30 +203,45 @@ function documents(entry) {
 
     return mapp.utils.html`
       <div class="link-with-img">
-        ${(entry.edit) && trashBtn}
-          <a
-            target="_blank"
-            href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
+        ${trashBtn}<a
+          target="_blank"
+          href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
 
   }) || []
 
-  entry.uploadBtn = mapp.utils.html.node`
-    <div class="mask-icon cloud-upload">
-      <input
-        style="opacity: 0; width: 3em; height: 3em;"
-        type="file"
-        accept=".txt,.pdf,.doc,.docx,.xls,.xlsx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document;"
-        onchange=${e => upload(e, entry)}>`
-
-  entry.edit && docs.push(entry.uploadBtn)
+  entry.edit && docs.unshift(mapp.utils.html`<input 
+    type=file class="flat bold wide primary-colour"
+    accept=".txt,.pdf,.doc,.docx,.xls,.xlsx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document;"
+    onchange=${e => upload(e, entry)}>`)
 
   if (!docs.length) return;
 
-  entry.list = mapp.utils.html.node`<div>${docs}`
+  const docsList = mapp.utils.html.node`<div>${docs}`
+
+  if (typeof entry.drawer === 'string') {
+    return mapp.ui.elements.drawer({
+      data_id: "upload-document-drawer",
+      class: `raised ${entry.expanded? 'expanded' : ''}`,
+      header: mapp.utils.html`
+        <h3>${entry.drawer}</h3>
+        <div class="mask-icon expander expanded raise"></div>`,
+      content: docsList
+    })
+  } else {
 
-  return entry.list;
+    return docsList
+  }
 }
 
+/**
+@function upload
+
+@description
+Function used to upload image/doc.
+
+@param {event} e 
+@param {Object} entry  
+*/
 async function upload(e, entry) {
 
   // Location view must disabled while uploading resource.
@@ -180,12 +258,20 @@ async function upload(e, entry) {
   reader.readAsDataURL(entry.file)
 }
 
+/**
+@function imageLoad
+
+@description
+The imageLoad function handles the loading and processing of an image file.
+
+@param {event} e 
+@param {Object} entry 
+*/
 function imageLoad(e, entry) {
 
   const img = new Image()
 
   img.onload = async () => {
-
     let
       canvas = mapp.utils.html.node`<canvas>`,
       max_size = 1024,
@@ -208,37 +294,36 @@ function imageLoad(e, entry) {
     canvas.getContext('2d').drawImage(img, 0, 0, width, height)
 
     const dataURL = canvas.toDataURL('image/jpeg', 0.5)
-
     const public_id = entry.file.name.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '') + entry.suffix_date ? `@${Date.now()}` : '';
 
-    const response = await mapp.utils.xhr({
-      method: 'POST',
-      requestHeader: {
-        'Content-Type': 'application/octet-stream'
-      },
-      url: `${entry.location.layer.mapview.host}/api/provider/cloudinary?${mapp.utils.paramString({
-        public_id,
-        resource_type: 'image',
-        folder: entry.cloudinary_folder
-      })}`,
-      body: mapp.utils.dataURLtoBlob(dataURL)
+    const signedUrl = await getSignedUrl(entry, public_id)
+
+    const data = new FormData()
+    data.append('file', dataURL)
+
+    const response = await fetch(signedUrl, {
+      method: 'post',
+      body: data
     })
 
     if (!response || response.error) {
-      const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-      const errorMessage = `${mapp.dictionary.image_upload_failed}${errorDetail}`;
+      const errorDetail = response?.error?.message? `Error: ${response.error.message}` : '';
+      const errorMessage = `Cloudinary Image upload failed! ${errorDetail}`;
       alert(errorMessage);
       return;
     }
 
+    const responseJson = await response.json()
+
     if (entry.type === 'image') {
 
       // Only a single image is supported by the entry.type.
-      entry.value = response.secure_url
+      entry.value = responseJson.secure_url
+
     } else {
 
       // Add the secure_url to the entry values array and update the location.
-      entry.value = Array.isArray(entry.value) ? entry.value.concat([response.secure_url]) : [response.secure_url]
+      entry.value = Array.isArray(entry.value) ? entry.value.concat([responseJson.secure_url]) : [responseJson.secure_url]
     }
 
     postUpdate(entry)
@@ -247,45 +332,64 @@ function imageLoad(e, entry) {
   img.src = e.target.result
 }
 
+/**
+@function docLoad
+
+@description
+The docLoad function handles the loading and processing of an image file.
+
+@param {event} e 
+@param {Object} entry 
+*/
 async function docLoad(e, entry) {
 
-  const response = await mapp.utils.xhr({
-    method: 'POST',
-    requestHeader: {
-      'Content-Type': 'application/octet-stream'
-    },
-    url: `${entry.location.layer.mapview.host}/api/provider/cloudinary?${mapp.utils.paramString({
-      public_id: entry.file.name,
-      resource_type: 'raw',
-      folder: entry.cloudinary_folder
-    })}`,
-    body: e.target.result
+  const date = new Date();
+  const stamp = `${date.getMonth() + 1}-${date.getDate()}T${date.getHours()}:${date.getMinutes()}`
+  const file_type = entry.file.name.substring(entry.file.name.lastIndexOf('.'))
+  const public_id = `${entry.file.name.replace(file_type, '')}-${stamp}${file_type}`;
+
+  const signedUrl = await getSignedUrl(entry, public_id)
+
+  const data = new FormData()
+  
+  data.append('file', e.target.result.toString())
+
+  const response = await fetch(signedUrl, {
+    method: 'post',
+    body: data
   })
 
   if (!response || response.error) {
     const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-    const errorMessage = `${mapp.dictionary.document_upload_failed}${errorDetail}`;
+    const errorMessage = `Cloudinary document upload failed!${errorDetail}`;
     alert(errorMessage);
     return;
   }
+
   // Add the secure_url to the entry values array and update the location.
-  entry.value = Array.isArray(entry.value) ? entry.value.concat([response.secure_url]) : [response.secure_url]
+  const responseJson = await response.json()
+  entry.value = Array.isArray(entry.value) ? entry.value.concat([responseJson.secure_url]) : [responseJson.secure_url]
 
   postUpdate(entry)
 }
 
-async function trash(e, entry) {
+/**
+@function trash
+
+@description
+The trash function handles the deletion an image file.
 
-  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.remove_item_confirm});
+@param {event} e 
+@param {Object} entry 
+*/
+async function trash(e, entry) {
 
-  if (!confirm) return;
+  if (!confirm('Remove item?')) return;
+  const public_id = decodeURIComponent(e.target.dataset.name);
+  const signedUrl = await getSignedUrl(entry, public_id, e)
 
   // Send request to cloudinary to destroy resource.
-  await mapp.utils.xhr(`${entry.location.layer.mapview.host}/api/provider/cloudinary?${mapp.utils.paramString({
-    destroy: true,
-    public_id: e.target.dataset.name,
-    folder: entry.cloudinary_folder
-  })}`)
+  await fetch(signedUrl, { method: 'post' })
 
   // Remove the resource link from the entry values array and update the location.
   const valueSet = new Set(entry.value)
@@ -293,21 +397,30 @@ async function trash(e, entry) {
   valueSet.delete(e.target.dataset.src || e.target.dataset.href)
 
   if (entry.type === 'image') {
-
     entry.value = null
-  } else {
 
+  } else {
     entry.value = valueSet.size ? Array.from(valueSet) : null;
   }
 
   postUpdate(entry)
 }
 
+/**
+@function postUpdate 
+
+@description
+The postUpdate function handles updating a location with the new image/doc.
+
+@param {Object} entry
+*/
 async function postUpdate(entry) {
 
   entry.location.view?.classList.add('disabled')
 
   // Update the geometry field value.
+  const updateBody = { [entry.field]: entry.value }
+  
   await mapp.utils.xhr({
     method: 'POST',
     url:
@@ -319,14 +432,42 @@ async function postUpdate(entry) {
         table: entry.location.table,
         id: entry.location.id,
       }),
-    body: JSON.stringify({ [entry.field]: entry.value }),
+    body: JSON.stringify(updateBody),
   })
 
+  //Keep the drawer open after upload or delete
+  if(entry.drawer){
+    entry.expanded = true
+  }
   const content = mapp.ui.locations.entries[entry.type](entry)
 
   mapp.utils.render(entry.node, content)
 
-  entry.title && content.before(mapp.ui.locations.entries.title(entry))
-
   entry.location.view?.classList.remove('disabled')
-}
\ No newline at end of file
+}
+
+/**
+@function getSignedUrl
+
+@description
+Function to generate a signed URL for the CRUD of an Image/Doc.
+
+@param {Object} entry 
+@param {String} public_id 
+@param {event} e 
+@returns {String} signedURL
+*/
+async function getSignedUrl(entry, public_id, e) {
+
+  public_id = e ? decodeURIComponent(e.target.dataset.name) : public_id;
+
+  const response = await fetch(`${entry.location.layer.mapview.host}/api/sign/cloudinary?${mapp.utils.paramString({
+    destroy: e ? true : false,
+    public_id: public_id,
+    folder: entry.cloudinary_folder
+  })}`);
+
+  const respJson = await response.json();
+
+  return respJson.signedUrl
+}
diff --git a/mod/provider/_provider.js b/mod/provider/_provider.js
index c7d3c863fc..542889c732 100644
--- a/mod/provider/_provider.js
+++ b/mod/provider/_provider.js
@@ -6,15 +6,12 @@ const file = require('./file')
 
 const cloudfront = require('./cloudfront')
 
-const cloudinary = require('./cloudinary')
-
 const s3 = require('./s3')
 
 module.exports = async (req, res) => {
 
   const provider = {
     cloudfront,
-    cloudinary,
     file,
     s3
   }
diff --git a/mod/provider/cloudinary.js b/mod/provider/cloudinary.js
deleted file mode 100644
index 54c53eff1c..0000000000
--- a/mod/provider/cloudinary.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
-@module /cloudinary
-*/
-
-const { createHash } = require('crypto');
-
-// 1: api_key
-// 2: api_secret
-// 3: cloud_name
-const cloudinary = process.env.CLOUDINARY_URL?.replaceAll('://', ' ').replaceAll(':', ' ').replaceAll('@', ' ').split(' ');
-
-module.exports = async req => {
-
-  if (!cloudinary) {
-    console.warn(`process.env.CLOUDINARY_URL not set`);
-    return;
-  }
-
-  // Destroy cloudinary resource.
-  if (req.params.destroy) return await destroy(req);
-
-  const data = generateData(req, 'upload');
-
-  req.body = req.body && await bodyData(req) || null;
-
-  // Convert body to appropriate format
-  const file = req.params.resource_type === 'raw' ? req.body.toString() : `data:image/jpeg;base64,${req.body.toString('base64')}`;
-  data.append('file', file);
-
-  const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudinary[3]}/upload`, {
-    method: 'post',
-    body: data,
-  });
-
-  return await response.json();
-}
-
-async function destroy(req) {
-  const data = generateData(req, 'destroy');
-  const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudinary[3]}/image/destroy`, {
-    method: 'post',
-    body: data,
-  });
-
-  return await response.json();
-}
-
-function generateData(req, action) {
-  // The timestamp is required for the signature which is valid for 1hr.
-  const timestamp = Date.now();
-  let toSign = '';
-
-  // Define signature string based on the action (upload/destroy)
-  if (action === 'upload') {
-    toSign = `folder=${req.params.folder}&public_id=${req.params.public_id}&timestamp=${timestamp}${cloudinary[2]}`;
-  } else if (action === 'destroy') {
-    toSign = `public_id=${req.params.public_id}&timestamp=${timestamp}${cloudinary[2]}`;
-  }
-
-  const signature = createHash('sha256').update(toSign).digest('hex');
-  const data = new FormData();
-
-  data.append('public_id', req.params.public_id);
-  data.append('api_key', cloudinary[1]);
-  data.append('timestamp', timestamp);
-  data.append('signature', signature);
-
-  // Append folder for upload action
-  if (action === 'upload') {
-    data.append('folder', req.params.folder);
-  }
-
-  return data;
-}
-
-function bodyData(req) {
-  return new Promise((resolve, reject) => {
-    const chunks = [];
-
-    req.on('data', chunk => chunks.push(chunk));
-    req.on('end', () => resolve(Buffer.concat(chunks)));
-    req.on('error', error => reject(error));
-  });
-}
\ No newline at end of file

From f52a2c4c54a86800515a812e30883664c30966d1 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Tue, 15 Oct 2024 19:34:27 +0100
Subject: [PATCH 02/23] update cloudinary signer

---
 express.js                              |  4 +-
 lib/ui/locations/entries/cloudinary.mjs | 15 +++--
 mod/sign/_sign.js                       | 38 ++++++++++---
 mod/sign/cloudinary.js                  | 76 ++++++++++++++++---------
 4 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/express.js b/express.js
index edfa6d085d..f5041dd6f7 100644
--- a/express.js
+++ b/express.js
@@ -26,9 +26,7 @@ app.get(`${process.env.DIR || ''}/api/provider/:provider?`, api)
 
 app.post(`${process.env.DIR || ''}/api/provider/:provider?`, express.json({ limit: '5mb' }), api)
 
-app.get(`${process.env.DIR || ''}/api/sign/:provider?`, api)
-
-app.post(`${process.env.DIR || ''}/api/sign/:provider?`, express.json({ limit: '5mb' }), api)
+app.get(`${process.env.DIR || ''}/api/sign/:signer?`, api)
 
 
 app.get(`${process.env.DIR || ''}/api/query/:template?`, api)
diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index c2bdb98e77..d60db93019 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -350,6 +350,8 @@ async function docLoad(e, entry) {
 
   const signedUrl = await getSignedUrl(entry, public_id)
 
+  console.log(signedUrl)
+
   const data = new FormData()
   
   data.append('file', e.target.result.toString())
@@ -461,13 +463,18 @@ async function getSignedUrl(entry, public_id, e) {
 
   public_id = e ? decodeURIComponent(e.target.dataset.name) : public_id;
 
-  const response = await fetch(`${entry.location.layer.mapview.host}/api/sign/cloudinary?${mapp.utils.paramString({
+  const paramString = mapp.utils.paramString({
     destroy: e ? true : false,
     public_id: public_id,
     folder: entry.cloudinary_folder
-  })}`);
+  })
+
+  const signedUrl = await mapp.utils.xhr({
+    url: `${entry.location.layer.mapview.host}/api/sign/cloudinary?${paramString}`,
+    responseType: 'text'
+  });
 
-  const respJson = await response.json();
+  console.log(signedUrl)
 
-  return respJson.signedUrl
+  return signedUrl
 }
diff --git a/mod/sign/_sign.js b/mod/sign/_sign.js
index f3768da543..cf1b37faf8 100644
--- a/mod/sign/_sign.js
+++ b/mod/sign/_sign.js
@@ -1,22 +1,42 @@
 /**
+## /sign
+
+The sign module provides access to different request signer methods.
+
+@requires /sign/cloudinary
+
 @module /sign
 */
 
 const cloudinary = require('./cloudinary')
 
-module.exports = async (req, res) => {
+const signerModules = {
+  cloudinary
+}
 
-  const signer = {
-    cloudinary
-  }
+/**
+@function signer
+@async
+
+@description
+The signer method looks up a signerModules method matching the signer request parameter and passes the req/res objects as argument to the matched method.
 
-  if (!Object.hasOwn(signer, req.params.provider)) {
+The response from the method is returned with the HTTP response.
+
+@param {Object} req HTTP request.
+@param {Object} res HTTP response.
+@param {Object} req.params Request parameter.
+@param {string} params.signer Signer module to sign the request.
+
+@returns {Promise} The promise resolves into the response from the signerModules method.
+*/
+module.exports = async function signer(req, res) {
+
+  if (!Object.hasOwn(signerModules, req.params.signer)) {
     return res.send(`Failed to validate 'provider' param.`)
   }
 
-  const response = await signer[req.params.provider](req)
-
-  req.params.content_type && res.setHeader('content-type', req.params.content_type)
+  const response = await signerModules[req.params.signer](req, res)
 
   res.send(response)
-}
\ No newline at end of file
+}
diff --git a/mod/sign/cloudinary.js b/mod/sign/cloudinary.js
index 2b71eaceae..31dcc05c5a 100644
--- a/mod/sign/cloudinary.js
+++ b/mod/sign/cloudinary.js
@@ -1,33 +1,55 @@
 /**
+### /sign/cloudinary
+
+Exports the cloudinary signer method.
+
 @module /sign/cloudinary
 */
 
 const { createHash } = require('crypto');
 
-module.exports = async req => {
-    // 1: api_key
-    // 2: api_secret
-    // 3: cloud_name
-    const cloudinary = process.env.CLOUDINARY_URL?.replaceAll('://', ' ').replaceAll(':', ' ').replaceAll('@', ' ').split(' ');
-    const baseUrl = `https://api.cloudinary.com/v1_1/${cloudinary[3]}/`
-
-    const folder = (!req.params.folder) ? '' : `${req.params.folder}/`
-
-    // The timestamp is required for the signature which is valid for 1hr.
-    const timestamp = Date.now();
-    let toSign = '';
-
-    // Define signature string based on the action (upload/destroy)
-    if (!req.params.destroy) {
-        toSign = `folder=${req.params.folder}&public_id=${req.params.public_id}&timestamp=${timestamp}${cloudinary[2]}`;
-
-    } else if (req.params.destroy) {
-        toSign = `public_id=${folder}${req.params.public_id}&timestamp=${timestamp}${cloudinary[2]}`;
-    }
-
-    const signature = createHash('sha256').update(toSign).digest('hex');
-    const params = `${toSign}&signature=${signature}&timestamp=${timestamp}&api_key=${cloudinary[1]}`;
-    const signedUrl = `${baseUrl}${req.params.destroy ? 'image/destroy' : 'upload'}?${params}`
-    
-    return {signedUrl:signedUrl};
-}
\ No newline at end of file
+module.exports = async function cloudinary(req, res) {
+
+  if (!process.env.CLOUDINARY_URL) return new Error('CLOUDINARY_URL not provided in process.env')
+
+  // Split CLOUDINARY_URL string into array of ['cloudinary', api_key, api_secret, cloud_name]
+  const cloudinary = process.env.CLOUDINARY_URL
+    .replaceAll('://', '|')
+    .replaceAll(':', '|')
+    .replaceAll('@', '|')
+    .split('|');
+
+  const folder = req.params.folder += '/'
+
+  // The timestamp is required for the signature which is valid for 1hr.
+  const timestamp = Date.now();
+
+  const params = [
+    `timestamp=${timestamp}${cloudinary[2]}`
+  ]
+
+  if (req.params.destroy) {
+
+    params.unshift(`public_id=${folder}${req.params.public_id}`)
+  } else {
+
+    params.unshift(`public_id=${req.params.public_id}`)
+    params.unshift(`folder=${req.params.folder}`)
+  }
+
+  const toSign = params.join('&')
+
+  const signature = createHash('sha256').update(toSign).digest('hex');
+
+  params.push(`signature=${signature}`)
+
+  params.push(`timestamp=${timestamp}`)
+
+  params.push(`api_key=${cloudinary[1]}`)
+
+  const method = req.params.destroy? 'image/destroy': 'upload';
+
+  const signedUrl = `https://api.cloudinary.com/v1_1/${cloudinary[3]}/${method}?${params.join('&')}`
+
+  return signedUrl;
+}

From 38edd5f10f6908a1e4b4d7f1aacb62935eb94b67 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 16 Oct 2024 17:13:23 +0100
Subject: [PATCH 03/23] update cloudinary signer and entry module

---
 lib/ui/locations/entries/cloudinary.mjs | 273 +++++++++++-------------
 lib/ui/utils/imagePreview.mjs           |  27 ++-
 mod/sign/_sign.js                       |   5 +
 mod/sign/cloudinary.js                  |  29 +++
 public/css/_locationview.css            |   8 +
 public/css/ui.css                       |   7 +
 6 files changed, 189 insertions(+), 160 deletions(-)

diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index d60db93019..f6efc39442 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -1,3 +1,16 @@
+/**
+## /ui/locations/entries/cloudinary
+
+The cloudinary module exports a method to upload or destroy resources with signed requests on cloudinary.
+
+The exported method creates an interface in the location view with input for images and documents.
+
+@requires /utils/xhr
+@requires /utils/imagePreview
+
+@module /ui/locations/entries/cloudinary
+*/
+
 mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
@@ -54,69 +67,44 @@ const types = {
 
 export default entry => types[entry.type](entry)
 
-const onload = {
-  image: imageLoad,
-  images: imageLoad,
-  documents: docLoad
-}
-
 /**
 @function image
 
 @description
-This image function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+The image entry.type function returns an image with a button to detroy the image the entry has a value and is editable.
 
 @param {Object} entry 
-@returns {HTML} image
+@property {string} entry.value An existing cloudinary resource URL.
+@property {Object} entry.edit The entry is editable.
+
+@returns {HTMLElement} Returns either an image element or an input element to upload an image.
 */
 function image(entry) {
 
-  let image
-
   if (entry.value) {
 
     // The trash button will only be created when entry is editable.
-    const trashBtn = entry.edit && mapp.utils.html`
-      <button 
-        style="position: absolute; width: 2em; height: 2em; right: 0.5em; top: 0.5em;"
-        class="mask-icon trash no"
-        data-name=${entry.value.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
-        data-src=${entry.value}
-        onclick=${e => trash(e, entry)}>`
-
-    image = mapp.utils.html.node`
-      <div style="position: relative">
-        <img
-          style="width: 100%"
-          src=${entry.value}
-          onclick=${mapp.ui.utils.imagePreview}>
-          ${trashBtn}`
-
-  // Edit can only be available if no image is stored.
+    const trashBtn = entry.edit && mapp.utils.html`<button 
+      class="mask-icon trash no"
+      data-name=${entry.value.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
+      data-src=${entry.value}
+      onclick=${e => trash(e, entry)}>`
+
+    return mapp.utils.html.node`<div style="position: relative">
+      <img
+        style="width: 100%"
+        src=${entry.value}
+        onclick=${mapp.ui.utils.imagePreview}>
+        ${trashBtn}`
+  
   } else if (entry.edit) {
 
-    image = mapp.utils.html.node`
-      <input 
-        type=file class="flat bold wide primary-colour"
-        accept="image/*"
-        capture="camera"
-        onchange=${e => upload(e, entry)}>`
-  }
-
-  if (typeof entry.drawer === 'string') {
-
-    // Create a drawer with the entry.drawer value as header.
-    return mapp.ui.elements.drawer({
-      data_id: "upload-image-drawer",
-      class: `raised ${entry.expanded? 'expanded' : ''}`,
-      header: mapp.utils.html`
-        <h3>${entry.drawer}</h3>
-        <div class="mask-icon expander expanded raise"></div>`,
-      content: image})
-
-  } else {
-
-    return image
+    // Return image upload input for editable entry without a value.
+    return mapp.utils.html.node`<input 
+      type=file class="flat bold wide primary-colour"
+      accept="image/*"
+      capture="camera"
+      onchange=${e => upload(e, entry)}>`
   }
 }
 
@@ -124,29 +112,28 @@ function image(entry) {
 @function images
 
 @description
-This images function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+The images entry.type function returns an image-grid element of images with the ability to destroy resources if the entry is editable. An input is show to upload additional images if the entry is editable.
 
 @param {Object} entry 
-@returns {HTML} imagesGrid
+@property {Array} entry.value An array of existing cloudinary resource URLs.
+@property {Object} entry.edit The entry is editable.
+@returns {HTMLElement} A grid element with existing images and an input to upload additional images on editable entry.
 */
 function images(entry) {
 
   const images = entry.value?.map(image => {
 
     // The trash button will only be created when entry is editable.
-    const trashBtn = entry.edit && mapp.utils.html`
-      <button
-        class="mask-icon trash no"
-        data-name=${image.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
-        data-src=${image}
-        onclick=${e => trash(e, entry)}>`
-
-    return mapp.utils.html`
-      <div>
-        <img 
-          src=${image}
-          onclick=${mapp.ui.utils.imagePreview}>
-          ${trashBtn}`
+    const trashBtn = entry.edit && mapp.utils.html`<button
+      class="mask-icon trash no"
+      data-name=${image.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
+      data-src=${image}
+      onclick=${e => trash(e, entry)}>`
+
+    return mapp.utils.html`<div><img 
+      src=${image}
+      onclick=${mapp.ui.utils.imagePreview}>
+      ${trashBtn}`
 
   }) || []
 
@@ -161,51 +148,30 @@ function images(entry) {
 
   if (!images.length) return;
 
-  const imagesGrid = mapp.utils.html.node`
-    <div class="images-grid">${images}`
-
-  if (typeof entry.drawer === 'string') {
-
-    return mapp.ui.elements.drawer({
-      data_id: "upload-image-drawer",
-      class: `raised ${entry.expanded? 'expanded' : ''}`,
-      header: mapp.utils.html`
-        <h3>${entry.drawer}</h3>
-        <div class="mask-icon expander expanded raise"></div>`,
-      content: imagesGrid
-    })
-
-  } else {
-
-    return imagesGrid
-  }
+  return mapp.utils.html.node`<div class="images-grid">${images}`
 }
 
 /**
 @function documents
 
 @description
-This documents function takes an entry object and generates HTML elements based on the value property of the entry. Here's an explanation of its functionality.
+The documents entry.type function returns an document-list element of documents with the ability to destroy resources if the entry is editable. An input is show to upload additional documents if the entry is editable.
 
 @param {Object} entry 
-@returns {HTML} docslist
+@returns {HTMLElement} A list element with existing documents and an input to upload additional documents on editable entry.
  */
 function documents(entry) {
 
   const docs = entry.value?.map(doc => {
 
-    const trashBtn = entry.edit && mapp.utils.html`
-      <button
-        class="mask-icon trash no"
-        data-name=${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
-        data-href=${doc}
-        onclick=${e => trash(e, entry)}>`
+    const trashBtn = entry.edit && mapp.utils.html`<button
+      class="mask-icon trash no"
+      data-name=${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
+      data-href=${doc}
+      onclick=${e => trash(e, entry)}>`
 
-    return mapp.utils.html`
-      <div class="link-with-img">
-        ${trashBtn}<a
-          target="_blank"
-          href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
+    return mapp.utils.html`<div class="link-with-img">
+      ${trashBtn}<a target="_blank" href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
 
   }) || []
 
@@ -216,30 +182,16 @@ function documents(entry) {
 
   if (!docs.length) return;
 
-  const docsList = mapp.utils.html.node`<div>${docs}`
-
-  if (typeof entry.drawer === 'string') {
-    return mapp.ui.elements.drawer({
-      data_id: "upload-document-drawer",
-      class: `raised ${entry.expanded? 'expanded' : ''}`,
-      header: mapp.utils.html`
-        <h3>${entry.drawer}</h3>
-        <div class="mask-icon expander expanded raise"></div>`,
-      content: docsList
-    })
-  } else {
-
-    return docsList
-  }
+  return mapp.utils.html.node`<div>${docs}`
 }
 
 /**
 @function upload
 
 @description
-Function used to upload image/doc.
+The upload event can be assigned to the onchange event of an input to upload the resource selected in the input element.
 
-@param {event} e 
+@param {event} e The onchange event from the input element to select a resource.
 @param {Object} entry  
 */
 async function upload(e, entry) {
@@ -253,6 +205,12 @@ async function upload(e, entry) {
 
   entry.file = e.target.files[0]
 
+  const onload = {
+    image: imageLoad,
+    images: imageLoad,
+    documents: docLoad
+  }
+
   reader.onload = e => onload[entry.type](e, entry)
 
   reader.readAsDataURL(entry.file)
@@ -293,13 +251,18 @@ function imageLoad(e, entry) {
 
     canvas.getContext('2d').drawImage(img, 0, 0, width, height)
 
-    const dataURL = canvas.toDataURL('image/jpeg', 0.5)
-    const public_id = entry.file.name.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '') + entry.suffix_date ? `@${Date.now()}` : '';
+    const public_id = entry.file.name
+      .replace(/^.*\//, '')
+      .replace(/\.([\w-]{3})/, '') + entry.suffix_date ? `@${Date.now()}` : '';
+
+    const signedUrl = await getSignedUrl(entry, { public_id })
 
-    const signedUrl = await getSignedUrl(entry, public_id)
+    // Failed to generate a signedUrl for the request.
+    if (!signedUrl) return;
 
     const data = new FormData()
-    data.append('file', dataURL)
+
+    data.append('file', canvas.toDataURL('image/jpeg', 0.5))
 
     const response = await fetch(signedUrl, {
       method: 'post',
@@ -326,7 +289,7 @@ function imageLoad(e, entry) {
       entry.value = Array.isArray(entry.value) ? entry.value.concat([responseJson.secure_url]) : [responseJson.secure_url]
     }
 
-    postUpdate(entry)
+    updateLocation(entry)
   }
 
   img.src = e.target.result
@@ -336,7 +299,7 @@ function imageLoad(e, entry) {
 @function docLoad
 
 @description
-The docLoad function handles the loading and processing of an image file.
+The docLoad method handles the upload of document files to via signed URL to cloudinary.
 
 @param {event} e 
 @param {Object} entry 
@@ -348,9 +311,10 @@ async function docLoad(e, entry) {
   const file_type = entry.file.name.substring(entry.file.name.lastIndexOf('.'))
   const public_id = `${entry.file.name.replace(file_type, '')}-${stamp}${file_type}`;
 
-  const signedUrl = await getSignedUrl(entry, public_id)
+  const signedUrl = await getSignedUrl(entry, { public_id })
 
-  console.log(signedUrl)
+  // Failed to generate a signedUrl for the request.
+  if (!signedUrl) return;
 
   const data = new FormData()
   
@@ -362,17 +326,20 @@ async function docLoad(e, entry) {
   })
 
   if (!response || response.error) {
-    const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-    const errorMessage = `Cloudinary document upload failed!${errorDetail}`;
-    alert(errorMessage);
+    const errorDetail = response?.error?.message? `Error: ${response.error.message}` : '';
+
+    alert(`Cloudinary document upload failed! ${errorDetail}`);
     return;
   }
 
   // Add the secure_url to the entry values array and update the location.
   const responseJson = await response.json()
-  entry.value = Array.isArray(entry.value) ? entry.value.concat([responseJson.secure_url]) : [responseJson.secure_url]
 
-  postUpdate(entry)
+  entry.value = Array.isArray(entry.value)
+    ? entry.value.concat([responseJson.secure_url])
+    : [responseJson.secure_url];
+
+  updateLocation(entry)
 }
 
 /**
@@ -387,8 +354,13 @@ The trash function handles the deletion an image file.
 async function trash(e, entry) {
 
   if (!confirm('Remove item?')) return;
+
   const public_id = decodeURIComponent(e.target.dataset.name);
-  const signedUrl = await getSignedUrl(entry, public_id, e)
+
+  const signedUrl = await getSignedUrl(entry, {public_id, destroy: true})
+
+  // Failed to generate a signedUrl for the request.
+  if (!signedUrl) return;
 
   // Send request to cloudinary to destroy resource.
   await fetch(signedUrl, { method: 'post' })
@@ -399,34 +371,32 @@ async function trash(e, entry) {
   valueSet.delete(e.target.dataset.src || e.target.dataset.href)
 
   if (entry.type === 'image') {
-    entry.value = null
 
+    entry.value = null
   } else {
+
     entry.value = valueSet.size ? Array.from(valueSet) : null;
   }
 
-  postUpdate(entry)
+  updateLocation(entry)
 }
 
 /**
-@function postUpdate 
+@function updateLocation 
 
 @description
-The postUpdate function handles updating a location with the new image/doc.
+The method disables the location view before updating the location data and re-creating the cloudinary entry.type interface.
 
 @param {Object} entry
+@property {HTMLElement} entry.node The location view element which holds the cloudinary interface elements.
 */
-async function postUpdate(entry) {
+async function updateLocation(entry) {
 
   entry.location.view?.classList.add('disabled')
 
-  // Update the geometry field value.
-  const updateBody = { [entry.field]: entry.value }
-  
   await mapp.utils.xhr({
     method: 'POST',
-    url:
-      `${entry.location.layer.mapview.host}/api/query?` +
+    url: `${entry.location.layer.mapview.host}/api/query?` +
       mapp.utils.paramString({
         template: 'location_update',
         locale: entry.location.layer.mapview.locale.key,
@@ -434,16 +404,11 @@ async function postUpdate(entry) {
         table: entry.location.table,
         id: entry.location.id,
       }),
-    body: JSON.stringify(updateBody),
+    body: JSON.stringify({ [entry.field]: entry.value })
   })
 
-  //Keep the drawer open after upload or delete
-  if(entry.drawer){
-    entry.expanded = true
-  }
-  const content = mapp.ui.locations.entries[entry.type](entry)
-
-  mapp.utils.render(entry.node, content)
+  // Render the type interface into the location view entry.node
+  mapp.utils.render(entry.node, types[entry.type](entry))
 
   entry.location.view?.classList.remove('disabled')
 }
@@ -452,20 +417,19 @@ async function postUpdate(entry) {
 @function getSignedUrl
 
 @description
-Function to generate a signed URL for the CRUD of an Image/Doc.
+Signs a parameterised request to upload or destroy a resource on cloudinary.
 
 @param {Object} entry 
-@param {String} public_id 
-@param {event} e 
+@param {Object} params 
+@property {string} entry.cloudinary_folder
+@property {string} params.public_id
+@property {boolean} [params.destroy] The request is to detroy a stored resource.
 @returns {String} signedURL
 */
-async function getSignedUrl(entry, public_id, e) {
-
-  public_id = e ? decodeURIComponent(e.target.dataset.name) : public_id;
+async function getSignedUrl(entry, params) {
 
   const paramString = mapp.utils.paramString({
-    destroy: e ? true : false,
-    public_id: public_id,
+    ...params,
     folder: entry.cloudinary_folder
   })
 
@@ -474,7 +438,10 @@ async function getSignedUrl(entry, public_id, e) {
     responseType: 'text'
   });
 
-  console.log(signedUrl)
+  if (signedUrl instanceof Error) {
+
+    console.error(signedUrl)
+  }
 
   return signedUrl
 }
diff --git a/lib/ui/utils/imagePreview.mjs b/lib/ui/utils/imagePreview.mjs
index 5c9502daa9..dfce4a2ef3 100644
--- a/lib/ui/utils/imagePreview.mjs
+++ b/lib/ui/utils/imagePreview.mjs
@@ -4,12 +4,25 @@
 @module /ui/utils/imagePreview
 */
 
-export default e => {
 
-  document.body.append(mapp.utils.html.node`
-    <div class="interface-mask">
-      <div class="bg-image" style=${`background-image:url(${e.target.src})`}>
-      <button class="btn-close mask-icon close"
-        onclick=${e => e.target.parentElement.parentElement.remove()}>`);
+/**
+@function imagePreview
+
+@description
+The imagePreview utility method can be assigned to an image element onclick.
+
+@param {Object} e Image element click event. 
+*/
+export default function imagePreview(e) {
+
+  const previewElement = mapp.utils.html.node`
+  <div class="interface-mask">
+    <div
+      class="bg-image" 
+      style=${`background-image:url(${e.target.src})`}>
+    <button 
+      class="btn-close mask-icon close"
+      onclick=${e => e.target.closest('.interface-mask').remove()}>`
 
-}
\ No newline at end of file
+  document.body.append(previewElement);
+}
diff --git a/mod/sign/_sign.js b/mod/sign/_sign.js
index cf1b37faf8..c6115e62e8 100644
--- a/mod/sign/_sign.js
+++ b/mod/sign/_sign.js
@@ -38,5 +38,10 @@ module.exports = async function signer(req, res) {
 
   const response = await signerModules[req.params.signer](req, res)
 
+  if (response instanceof Error) {
+
+    return res.status(500).send(response.message)
+  }
+    
   res.send(response)
 }
diff --git a/mod/sign/cloudinary.js b/mod/sign/cloudinary.js
index 31dcc05c5a..5fc0488f4f 100644
--- a/mod/sign/cloudinary.js
+++ b/mod/sign/cloudinary.js
@@ -3,15 +3,43 @@
 
 Exports the cloudinary signer method.
 
+@requires crypto
+
 @module /sign/cloudinary
 */
 
 const { createHash } = require('crypto');
 
+/**
+@function cloudinary
+@async
+
+@description
+The cloudinary signer method signs requests for the cloudinary service.
+
+The default request for uploading resources to cloudinary.
+
+A request to destroy a resource stored in the cloudinary service can be signed with the destroy request parameter being truthy.
+
+A folder and public_id parameter for resources to be uploaded or destroyed are required.
+
+@param {Object} req HTTP request.
+@param {Object} res HTTP response.
+@param {Object} req.params Request parameter.
+@param {string} params.folder
+@param {string} params.public_id
+@param {string} params.destroy
+
+@returns {Promise} The promise resolves into the response from the signerModules method.
+*/
 module.exports = async function cloudinary(req, res) {
 
   if (!process.env.CLOUDINARY_URL) return new Error('CLOUDINARY_URL not provided in process.env')
 
+  if (!req.params.folder) return new Error('A folder request param is required for the cloudinary signer.')
+
+  if (!req.params.public_id) return new Error('A public_id request param is required for the cloudinary signer.')
+
   // Split CLOUDINARY_URL string into array of ['cloudinary', api_key, api_secret, cloud_name]
   const cloudinary = process.env.CLOUDINARY_URL
     .replaceAll('://', '|')
@@ -33,6 +61,7 @@ module.exports = async function cloudinary(req, res) {
     params.unshift(`public_id=${folder}${req.params.public_id}`)
   } else {
 
+    // Request is to upload a resource.
     params.unshift(`public_id=${req.params.public_id}`)
     params.unshift(`folder=${req.params.folder}`)
   }
diff --git a/public/css/_locationview.css b/public/css/_locationview.css
index 6a56e5492f..c1b2b07042 100644
--- a/public/css/_locationview.css
+++ b/public/css/_locationview.css
@@ -93,6 +93,14 @@
   & .dataview {
     text-align: left;
   }
+
+  >.contents.image .trash {
+    position: absolute;
+    width: 2em;
+    height: 2em;
+    right: 0.5em;
+    top: 0.5em;
+  }
 }
 
 .images-grid {
diff --git a/public/css/ui.css b/public/css/ui.css
index 3ef742ffae..e8887e94f5 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -1420,6 +1420,13 @@ label.checkbox {
   & .dataview {
     text-align: left;
   }
+  > .contents.image .trash {
+    position: absolute;
+    width: 2em;
+    height: 2em;
+    right: 0.5em;
+    top: 0.5em;
+  }
 }
 .images-grid {
   position: relative;

From 29a4c656d6489264d3e3b627d13611e7b5679cca Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 13:39:26 +0200
Subject: [PATCH 04/23] eslint changes

---
 .eslintrc.js      | 17 -----------------
 eslint.config.mjs | 13 +++++++++++++
 package.json      |  7 ++-----
 3 files changed, 15 insertions(+), 22 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 eslint.config.mjs

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index ee4e4e4174..0000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true
-  },
-  overrides: [
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  },
-  rules: {
-    eqeqeq: 'off',
-    quotes: ['error', 'single' , { 'allowTemplateLiterals': true }]
-  }
-}
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..182b27ea7b
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,13 @@
+export default [
+  {
+    files: ['**/*.js', '**/*.mjs'],
+    ignores: ['public/js/lib/*'],
+    rules: {
+      quotes: ['error', 'single', { 'allowTemplateLiterals': true }],
+      'prefer-const': ['error', {
+        'destructuring': 'any',
+        'ignoreReadBeforeAssign': false
+      }]
+    }
+  }
+];
\ No newline at end of file
diff --git a/package.json b/package.json
index 8938ba04c3..ae49437a87 100644
--- a/package.json
+++ b/package.json
@@ -29,16 +29,13 @@
     "simple-statistics": "^7.8.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.13.0",
     "clean-jsdoc-theme": "^4.3.0",
     "codi-test-framework": "^0.0.33",
     "cookie-parser": "^1.4.5",
     "dotenv": "^16.4.5",
     "esbuild": "^0.19.11",
-    "eslint": "^8.29.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-n": "^15.6.0",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^8.57.1",
     "express": "^4.18.3",
     "uhtml": "^3.1.0"
   }

From ed2cf8b5d7cf9ad172fa3ba4a11579280805fd1e Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 14:02:04 +0200
Subject: [PATCH 05/23] Update rules

---
 eslint.config.mjs | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 182b27ea7b..d4b20b5c57 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,8 +6,13 @@ export default [
       quotes: ['error', 'single', { 'allowTemplateLiterals': true }],
       'prefer-const': ['error', {
         'destructuring': 'any',
-        'ignoreReadBeforeAssign': false
-      }]
+        'ignoreReadBeforeAssign': true
+      }],
+      'max-depth': ['error',
+        {
+          'max': 4
+        }
+      ]
     }
   }
 ];
\ No newline at end of file

From f54fb4fe84687179baa2f9dcfdf36da381ff739f Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 14:52:59 +0200
Subject: [PATCH 06/23] Update eslint action and config

---
 .github/workflows/eslint.yml | 29 +++++++++++++++++++++++++++++
 eslint.config.mjs            |  6 ++++--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/eslint.yml

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
new file mode 100644
index 0000000000..01b10a8150
--- /dev/null
+++ b/.github/workflows/eslint.yml
@@ -0,0 +1,29 @@
+name: ESLint
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  eslint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+    
+    steps:
+    - uses: actions/checkout@v4
+    
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+    
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Run ESLint
+      run: npx eslint . --max-warnings=0
+      # Alternatively, you can use your package.json script if you have one:
+      # run: npm run lint
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
index d4b20b5c57..a99c4f1624 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,7 +1,7 @@
 export default [
   {
     files: ['**/*.js', '**/*.mjs'],
-    ignores: ['public/js/lib/*'],
+    ignores: ['public/js/lib/*', 'docs/**/*.js'],
     rules: {
       quotes: ['error', 'single', { 'allowTemplateLiterals': true }],
       'prefer-const': ['error', {
@@ -12,7 +12,9 @@ export default [
         {
           'max': 4
         }
-      ]
+      ],
+      'complexity': ['error', { 'max': 15 }],
+      'no-nested-ternary': 'error'
     }
   }
 ];
\ No newline at end of file

From f51bc9d32b7cabe456906f8b2dbe482ef7b01a57 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 15:00:11 +0200
Subject: [PATCH 07/23] update action

---
 .github/workflows/eslint.yml | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 01b10a8150..453d4f6b93 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -13,15 +13,12 @@ jobs:
     
     steps:
     - uses: actions/checkout@v4
-    
-    - name: Set up Node.js
-      uses: actions/setup-node@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: '20'
-        cache: 'npm'
     
     - name: Install dependencies
-      run: npm ci
+      run: npm install
       
     - name: Run ESLint
       run: npx eslint . --max-warnings=0

From d64c5cce57b23a79ab665ec2166569ea51cc6791 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 15:02:37 +0200
Subject: [PATCH 08/23] update action

---
 .github/workflows/eslint.yml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 453d4f6b93..7d30697a21 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -21,6 +21,4 @@ jobs:
       run: npm install
       
     - name: Run ESLint
-      run: npx eslint . --max-warnings=0
-      # Alternatively, you can use your package.json script if you have one:
-      # run: npm run lint
\ No newline at end of file
+      run: npx eslint . --max-warnings=0
\ No newline at end of file

From 1111ca52d406643f998c17acfc93013c4b3897c7 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 15:44:31 +0200
Subject: [PATCH 09/23] Fix linting issues

---
 eslint.config.mjs                          |  2 +-
 lib/layer/decorate.mjs                     |  2 +-
 lib/layer/featureFields.mjs                |  6 +-
 lib/layer/featureStyle.mjs                 |  2 +-
 lib/layer/format/mvt.mjs                   |  4 +-
 lib/layer/themes/distributed.mjs           |  2 +-
 lib/layer/themes/graduated.mjs             |  6 +-
 lib/location/create.mjs                    |  2 +-
 lib/mapp.mjs                               |  2 +-
 lib/plugins/login.mjs                      |  2 +-
 lib/ui/Gazetteer.mjs                       |  2 +-
 lib/ui/elements/legendIcon.mjs             |  2 +-
 lib/ui/layers/filters.mjs                  |  2 +-
 lib/ui/layers/legends/categorized.mjs      |  2 +-
 lib/ui/locations/entries/cloudinary.mjs    | 10 ++--
 lib/utils/copyToClipboard.mjs              |  2 +-
 lib/utils/csvDownload.mjs                  |  4 +-
 lib/utils/dataURLtoBlob.mjs                |  4 +-
 lib/utils/merge.mjs                        |  2 +-
 lib/utils/olStyle.mjs                      |  4 +-
 lib/utils/polygonIntersectFeatures.mjs     |  2 +-
 lib/utils/svgSymbols.mjs                   |  6 +-
 lib/utils/verticeGeoms.mjs                 |  2 +-
 mod/provider/mongodb.js                    |  6 +-
 mod/query.js                               |  2 +-
 mod/user/acl.js                            | 67 +++++++++++-----------
 mod/user/cookie.js                         |  2 +-
 mod/user/fromACL.js                        |  2 +-
 mod/user/saml.js                           |  2 +-
 mod/utils/roles.js                         |  2 +-
 mod/utils/sqlFilter.js                     |  2 +-
 mod/workspace/_workspace.js                |  4 +-
 mod/workspace/cache.js                     |  4 +-
 mod/workspace/getTemplate.js               |  4 +-
 mod/workspace/templates/location_update.js |  2 +-
 mod/workspace/templates/mvt.js             |  2 +-
 mod/workspace/templates/mvt_geom.js        |  2 +-
 public/tests/_base.test.mjs                |  4 +-
 public/tests/layer.test.mjs                |  2 +-
 tests/lib/ui/layers/filters.test.mjs       |  2 +-
 tests/lib/utils/queryParams.test.mjs       |  4 +-
 tests/mod/workspace/_workspace.test.mjs    |  2 +-
 42 files changed, 95 insertions(+), 96 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index a99c4f1624..6da6e9a3fb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,7 +13,7 @@ export default [
           'max': 4
         }
       ],
-      'complexity': ['error', { 'max': 15 }],
+      // 'complexity': ['error', { 'max': 15 }],
       'no-nested-ternary': 'error'
     }
   }
diff --git a/lib/layer/decorate.mjs b/lib/layer/decorate.mjs
index 977a69c619..0dee92429d 100644
--- a/lib/layer/decorate.mjs
+++ b/lib/layer/decorate.mjs
@@ -236,7 +236,7 @@ async function zoomToExtent(params) {
   // Zooms to a specific extent.
 
   // XMLHttpRequest to layer extent endpoint
-  let response = await mapp.utils.xhr(`${this.mapview.host}/api/query/layer_extent?` +
+  const response = await mapp.utils.xhr(`${this.mapview.host}/api/query/layer_extent?` +
     mapp.utils.paramString({ // build query string for the url
       locale: this.mapview.locale.key,
       layer: this.key,
diff --git a/lib/layer/featureFields.mjs b/lib/layer/featureFields.mjs
index 866af75856..abac8a6c14 100644
--- a/lib/layer/featureFields.mjs
+++ b/lib/layer/featureFields.mjs
@@ -84,9 +84,9 @@ The jenks distribution method requires the stats.jenks utility method to calcula
 @param {layer} layer A decorated mapp layer object.
 */
 function jenks(layer) {
-  let theme = layer.style.theme;
+  const theme = layer.style.theme;
 
-  let n = Math.min(layer.featureFields[theme.field].values.length, theme.categories.length);
+  const n = Math.min(layer.featureFields[theme.field].values.length, theme.categories.length);
 
   // Parse array values as float.
   layer.featureFields[theme.field].values = layer.featureFields[theme.field].values.map(parseFloat);
@@ -113,7 +113,7 @@ The count distribution method counts values in the `featureFields.values[]` arra
 @param {layer} layer A decorated mapp layer object.
 */
 function count(layer) {
-  let theme = layer.style.theme;
+  const theme = layer.style.theme;
 
   layer.featureFields[theme.field].values.forEach(val => {
 
diff --git a/lib/layer/featureStyle.mjs b/lib/layer/featureStyle.mjs
index 4901fb5ed4..96ab042d2a 100644
--- a/lib/layer/featureStyle.mjs
+++ b/lib/layer/featureStyle.mjs
@@ -144,7 +144,7 @@ export default function featureStyle(layer) {
 
     if (!layer.style.cluster) return;
 
-    let clusterScale = parseFloat(layer.style.cluster.clusterScale)
+    const clusterScale = parseFloat(layer.style.cluster.clusterScale)
 
     // Spread cluster style into feature.style.
     feature.style = {
diff --git a/lib/layer/format/mvt.mjs b/lib/layer/format/mvt.mjs
index b6aa30ab84..e317944253 100644
--- a/lib/layer/format/mvt.mjs
+++ b/lib/layer/format/mvt.mjs
@@ -262,10 +262,10 @@ function changeEndLoad(layer) {
   const bounds = layer.mapview.getBounds()
 
   // Assign current viewport if queryparam is truthy.
-  let viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
+  const viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
 
   // Assign current viewport if queryparam is truthy.
-  let z = layer.mapview.Map.getView().getZoom();
+  const z = layer.mapview.Map.getView().getZoom();
 
   layer.xhr = new XMLHttpRequest()
 
diff --git a/lib/layer/themes/distributed.mjs b/lib/layer/themes/distributed.mjs
index ffcf28376c..1c04b91893 100644
--- a/lib/layer/themes/distributed.mjs
+++ b/lib/layer/themes/distributed.mjs
@@ -25,7 +25,7 @@ export default function(theme, feature) {
     theme.index = 0
   }
 
-  let field = theme.field || 'id'
+  const field = theme.field || 'id'
 
   // Get feature identifier for theme.
   const val = feature.properties[field]
diff --git a/lib/layer/themes/graduated.mjs b/lib/layer/themes/graduated.mjs
index 7c55464c8d..a87b555607 100644
--- a/lib/layer/themes/graduated.mjs
+++ b/lib/layer/themes/graduated.mjs
@@ -20,7 +20,7 @@ export default function (theme, feature) {
   // The graduated theme requires feature.properties.
   if (!feature.properties) return;
 
-  let catValue = Array.isArray(feature.properties.features) ?
+  const catValue = Array.isArray(feature.properties.features) ?
 
     // Reduce array of features to sum catValue
     feature.properties.features.reduce((total, F) => total + Number(F.getProperties()[theme.field]), 0) :
@@ -35,9 +35,9 @@ export default function (theme, feature) {
       'greater_than': val => cat => val >= cat.value
     }
 
-    let index = theme.categories.findIndex(graduated_breaks[theme.graduated_breaks](catValue))
+    const index = theme.categories.findIndex(graduated_breaks[theme.graduated_breaks](catValue))
 
-    let cat = theme.categories.at(index)
+    const cat = theme.categories.at(index)
 
     // Spread cat style to retain scale property
     feature.style = {
diff --git a/lib/location/create.mjs b/lib/location/create.mjs
index e08d784c71..3c660cda2b 100644
--- a/lib/location/create.mjs
+++ b/lib/location/create.mjs
@@ -80,7 +80,7 @@ export default async function createLocation(feature, interaction, layer) {
     setTimeout(checkFeature, 1000);
 
     function checkFeature() {
-      let found = layer.features?.find(F => F.properties?.id === location.id);
+      const found = layer.features?.find(F => F.properties?.id === location.id);
       if (found) {
         layer.source.un('tileloadend', concatFeatures);
       } else {
diff --git a/lib/mapp.mjs b/lib/mapp.mjs
index ee87300e1b..5672f7e261 100644
--- a/lib/mapp.mjs
+++ b/lib/mapp.mjs
@@ -57,7 +57,7 @@ if (window.ol === undefined) {
 
 } else {
 
-  let olVersion = parseFloat(ol?.util.VERSION)
+  const olVersion = parseFloat(ol?.util.VERSION)
 
   console.log(`OpenLayers version ${olVersion}`)
 
diff --git a/lib/plugins/login.mjs b/lib/plugins/login.mjs
index 46c242174d..71fad68643 100644
--- a/lib/plugins/login.mjs
+++ b/lib/plugins/login.mjs
@@ -25,6 +25,6 @@ export function login(plugin, mapview) {
   btnColumn.appendChild(mapp.utils.html.node`
     <a
       title=${mapp.user ? mapp.dictionary.toolbar_logout : mapp.dictionary.toolbar_login}
-      href=${mapp.user ? "?logout=true" : "?login=true"}>
+      href=${mapp.user ? '?logout=true' : '?login=true'}>
       <div class=${iconClass}>`);
 }
\ No newline at end of file
diff --git a/lib/ui/Gazetteer.mjs b/lib/ui/Gazetteer.mjs
index 0821770836..0922a327ac 100644
--- a/lib/ui/Gazetteer.mjs
+++ b/lib/ui/Gazetteer.mjs
@@ -42,7 +42,7 @@ export default gazetteer => {
     if (!e.target.value.length) return;
 
     // Get possible coordinates from input.
-    let ll = e.target.value.split(',').map(parseFloat)
+    const ll = e.target.value.split(',').map(parseFloat)
 
     // Check whether coordinates are valid float values.
     if (ll.length === 2 && ll.every(n => typeof n === 'number' && !isNaN(n) && isFinite(n))) {
diff --git a/lib/ui/elements/legendIcon.mjs b/lib/ui/elements/legendIcon.mjs
index 95e9436691..d101be39ee 100644
--- a/lib/ui/elements/legendIcon.mjs
+++ b/lib/ui/elements/legendIcon.mjs
@@ -72,7 +72,7 @@ function createIconFromArray(style) {
     });
   };
 
-  let legendScale = style.icon[0].legendScale || 1;
+  const legendScale = style.icon[0].legendScale || 1;
 
   style.icon.forEach((icon) => {
 
diff --git a/lib/ui/layers/filters.mjs b/lib/ui/layers/filters.mjs
index e9cf14a227..4f6b43ec5f 100644
--- a/lib/ui/layers/filters.mjs
+++ b/lib/ui/layers/filters.mjs
@@ -522,7 +522,7 @@ async function filter_in(layer, filter) {
 
         const pattern = e.target.value;
 
-        let filtered = filter[filter.type].filter(val =>
+        const filtered = filter[filter.type].filter(val =>
 
           // val may not be string.
           val.toString().toLowerCase().startsWith(pattern.toLowerCase()))
diff --git a/lib/ui/layers/legends/categorized.mjs b/lib/ui/layers/legends/categorized.mjs
index 743ebeb285..e01ba357c6 100644
--- a/lib/ui/layers/legends/categorized.mjs
+++ b/lib/ui/layers/legends/categorized.mjs
@@ -85,7 +85,7 @@ export default function categorizedTheme(layer) {
     const cat_label = cat.label + (cat.count? ` [${cat.count}]`:'')
 
     // Cat label with filter function.
-    let label = mapp.utils.html`<div
+    const label = mapp.utils.html`<div
       class=${classList}
       style="grid-column: 2;"
       onclick=${e => catToggle(e, layer, cat)}>${cat_label}`
diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index 4283b9adc7..578f869802 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -186,10 +186,10 @@ function imageLoad(e, entry) {
 
   img.onload = async () => {
 
-    let
-      canvas = mapp.utils.html.node`<canvas>`,
-      max_size = 1024,
-      width = img.width,
+    const canvas = mapp.utils.html.node`<canvas>`
+    const max_size = 1024
+
+    let width = img.width,
       height = img.height
 
     // resize
@@ -276,7 +276,7 @@ async function docLoad(e, entry) {
 
 async function trash(e, entry) {
 
-  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.remove_item_confirm});
+  const confirm = await mapp.ui.elements.confirm({ text: mapp.dictionary.remove_item_confirm });
 
   if (!confirm) return;
 
diff --git a/lib/utils/copyToClipboard.mjs b/lib/utils/copyToClipboard.mjs
index 9bac15f02e..cfd1a17fb0 100644
--- a/lib/utils/copyToClipboard.mjs
+++ b/lib/utils/copyToClipboard.mjs
@@ -7,7 +7,7 @@
 // Create temporary textarea to copy string to clipboard.
 export function copyToClipboard(str) {
 
-  let textArea = document.body.appendChild(mapp.utils.html.node`
+  const textArea = document.body.appendChild(mapp.utils.html.node`
     <textarea style="visibility=none;">`);
   
   textArea.value = str;
diff --git a/lib/utils/csvDownload.mjs b/lib/utils/csvDownload.mjs
index 29d61de642..137dc84382 100644
--- a/lib/utils/csvDownload.mjs
+++ b/lib/utils/csvDownload.mjs
@@ -16,7 +16,7 @@ export default function csvDownload(data, params = {}) {
 
   const rows = data.map(record => {
 
-    let row = Array.isArray(params.fields)
+    const row = Array.isArray(params.fields)
      ? fieldsFunction(record, params.fields)
      : Object.values(record)
      
@@ -64,7 +64,7 @@ function fieldsFunction(record, fields) {
     // Format number toLocaleString
     if (field.formatter === 'toLocaleString') {
 
-      let val = parseFloat(record[field.field])
+      const val = parseFloat(record[field.field])
 
       if (isNaN(val)) return;
 
diff --git a/lib/utils/dataURLtoBlob.mjs b/lib/utils/dataURLtoBlob.mjs
index cd4e495feb..1e7581ca83 100644
--- a/lib/utils/dataURLtoBlob.mjs
+++ b/lib/utils/dataURLtoBlob.mjs
@@ -7,7 +7,7 @@
 export function dataURLtoBlob(dataURL) {
 
   if (dataURL.indexOf(';base64,') == -1) {
-    let
+    const
       parts = dataURL.split(','),
       contentType = parts[0].split(':')[1],
       raw = parts[1];
@@ -15,7 +15,7 @@ export function dataURLtoBlob(dataURL) {
     return new Blob([raw], { type: contentType });
   }
   
-  let
+  const
     parts = dataURL.split(';base64,'),
     contentType = parts[0].split(':')[1],
     raw = window.atob(parts[1]),
diff --git a/lib/utils/merge.mjs b/lib/utils/merge.mjs
index fb55afde8c..736e834597 100644
--- a/lib/utils/merge.mjs
+++ b/lib/utils/merge.mjs
@@ -44,7 +44,7 @@ export default function mergeDeep(target, ...sources) {
 
     if (Object.getPrototypeOf(source) !== Object.getPrototypeOf({})) continue;
 
-    if (key === "__proto__" || key === "constructor") continue;
+    if (key === '__proto__' || key === 'constructor') continue;
 
     if (source[key] instanceof HTMLElement) {
       console.warn(source[key])
diff --git a/lib/utils/olStyle.mjs b/lib/utils/olStyle.mjs
index 5c75135a12..546c471adb 100644
--- a/lib/utils/olStyle.mjs
+++ b/lib/utils/olStyle.mjs
@@ -89,12 +89,12 @@ export default function olStyle(style, feature) {
     if (style.fillColor || style.strokeColor) {
 
       // Create OL fill.
-      let fill = style.fillColor && new ol.style.Fill({
+      const fill = style.fillColor && new ol.style.Fill({
         color: mapp.utils.hexa(style.fillColor, style.fillOpacity)
       })
 
       // Create OL stroke.
-      let stroke = style.strokeColor && new ol.style.Stroke({
+      const stroke = style.strokeColor && new ol.style.Stroke({
         color: mapp.utils.hexa(style.strokeColor, style.strokeOpacity),
         width: parseFloat(style.strokeWidth || 1)
       })
diff --git a/lib/utils/polygonIntersectFeatures.mjs b/lib/utils/polygonIntersectFeatures.mjs
index a5ad2055d6..bd5428823e 100644
--- a/lib/utils/polygonIntersectFeatures.mjs
+++ b/lib/utils/polygonIntersectFeatures.mjs
@@ -23,7 +23,7 @@ export function polygonIntersectFeatures(params) {
   }
 
   // Config for mapview draw interaction.
-  let interaction = {
+  const interaction = {
 
     // Draw polygon.
     type: 'Polygon',
diff --git a/lib/utils/svgSymbols.mjs b/lib/utils/svgSymbols.mjs
index 5cb5fce9ac..48f6876e88 100644
--- a/lib/utils/svgSymbols.mjs
+++ b/lib/utils/svgSymbols.mjs
@@ -14,7 +14,7 @@ const memoizedIcons = {
 
 export function dot(style) {
 
-  let lookup = Object.values({
+  const lookup = Object.values({
     fillColor: style.fillColor
   }).reduce((a, b) => a + b)
   
@@ -71,7 +71,7 @@ export function triangle(style) {
       return 16 + (val - 16) * scale
     }
 
-    let points = `${x(12, layer[0])},${y(4.68, layer[0])} ${x(2, layer[0])}, ${y(22, layer[0])} ${x(22, layer[0])}, ${y(22, layer[0])}`
+    const points = `${x(12, layer[0])},${y(4.68, layer[0])} ${x(2, layer[0])}, ${y(22, layer[0])} ${x(22, layer[0])}, ${y(22, layer[0])}`
 
     icon.appendChild(svg.node`
       <polygon
@@ -123,7 +123,7 @@ export function diamond(style) {
 
   style.layers && Object.entries(style.layers).forEach(layer => {
     
-    let points = `${s(12, layer[0])} ${s(0, layer[0])},${s(24, layer[0])} ${s(12, layer[0])},${s(12, layer[0])} ${s(24, layer[0])}, ${s(0, layer[0])} ${s(12, layer[0])}`
+    const points = `${s(12, layer[0])} ${s(0, layer[0])},${s(24, layer[0])} ${s(12, layer[0])},${s(12, layer[0])} ${s(24, layer[0])}, ${s(0, layer[0])} ${s(12, layer[0])}`
 
     icon.appendChild(svg.node`
       <polygon
diff --git a/lib/utils/verticeGeoms.mjs b/lib/utils/verticeGeoms.mjs
index 0ae4128e67..b73870a97d 100644
--- a/lib/utils/verticeGeoms.mjs
+++ b/lib/utils/verticeGeoms.mjs
@@ -12,7 +12,7 @@ export default feature => {
 
   let coords = geometry.getCoordinates()
 
-  let depth = getDepth(coords)
+  const depth = getDepth(coords)
 
   // Line string will have a depth of 2.
   if (depth === 2) {
diff --git a/mod/provider/mongodb.js b/mod/provider/mongodb.js
index f65b51c1c2..03f51da3f2 100644
--- a/mod/provider/mongodb.js
+++ b/mod/provider/mongodb.js
@@ -6,7 +6,7 @@ module.exports = async searchparams => {
 
   const params = Object.fromEntries(new URLSearchParams(searchparams).entries())
 
-  let body = {
+  const body = {
     'collection': params.collection,
     'database': params.database,
     'dataSource': params.dataSource,
@@ -14,7 +14,7 @@ module.exports = async searchparams => {
     'sort': { _id: -1 }
   }
 
-  let options = {
+  const options = {
     method: 'POST',
     mode: 'cors',
     cache: 'no-cache',
@@ -29,7 +29,7 @@ module.exports = async searchparams => {
 
   const response = await fetch(params.resource, options);
 
-  let r = await response.json()
+  const r = await response.json()
 
   return r.documents?.[0]
 }
\ No newline at end of file
diff --git a/mod/query.js b/mod/query.js
index 683547ca08..7fbcb78092 100644
--- a/mod/query.js
+++ b/mod/query.js
@@ -346,7 +346,7 @@ async function executeQuery(req, res, template, query) {
   }
 
   // Run the query
-  let rows = await dbs_connections[dbs](
+  const rows = await dbs_connections[dbs](
     query,
     req.params.SQL,
     req.params.statement_timeout || template.statement_timeout);
diff --git a/mod/user/acl.js b/mod/user/acl.js
index 1fbbc4c4b7..a5a14cec52 100644
--- a/mod/user/acl.js
+++ b/mod/user/acl.js
@@ -12,43 +12,46 @@ const { Pool } = require('pg');
 
 const connection = process.env.PRIVATE?.split('|') || process.env.PUBLIC?.split('|')
 
-// The acl module will export an empty require object instead of a function if no ACL connection has been defined.
-if(!connection || !connection[1]) return;
-
-const acl_table = connection[1].split('.').pop()
+const acl_table = connection[1]?.split('.').pop()
 
-const acl_schema = connection[1].split('.')[0] === acl_table ? 'public' : connection[1].split('.')[0]
+const acl_schema = connection[1]?.split('.')[0] === acl_table ? 'public' : connection[1]?.split('.')[0]
 
 const pool = new Pool({
   connectionString: connection[0]
 })
 
-/**
-@function acl
-
-@description
-The acl method will connect to pg pool and query the ACL with a provided query template. The `/acl_table/` and `/acl_schema/` in the query template will be replaced with values provided as `PRIVATE` or `PUBLIC` environment variable.
-
-@param {string} q 
-Query template.
-@param {array} arr 
-Parameters to be substrituted in query template.
-*/
-
-module.exports = async function acl(q, arr) {
-
-  try {
-
-    const client = await pool.connect()
-
-    const { rows } = await client.query(q.replace(/acl_table/g, acl_table).replace(/acl_schema/g, acl_schema), arr)
-
-    client.release()
-
-    return rows
-
-  } catch (err) {
-    console.error(err)
-    return err
+// The acl module will export an empty require object instead of a function if no ACL connection has been defined.
+if (!connection || !connection[1]) {
+  module.exports = null;
+}
+else {
+  /**
+  @function acl
+  
+  @description
+  The acl method will connect to pg pool and query the ACL with a provided query template. The `/acl_table/` and `/acl_schema/` in the query template will be replaced with values provided as `PRIVATE` or `PUBLIC` environment variable.
+  
+  @param {string} q 
+  Query template.
+  @param {array} arr 
+  Parameters to be substrituted in query template.
+  */
+
+  module.exports = async function acl(q, arr) {
+
+    try {
+
+      const client = await pool.connect()
+
+      const { rows } = await client.query(q.replace(/acl_table/g, acl_table).replace(/acl_schema/g, acl_schema), arr)
+
+      client.release()
+
+      return rows
+
+    } catch (err) {
+      console.error(err)
+      return err
+    }
   }
 }
\ No newline at end of file
diff --git a/mod/user/cookie.js b/mod/user/cookie.js
index bdfdffe811..c756428058 100644
--- a/mod/user/cookie.js
+++ b/mod/user/cookie.js
@@ -74,7 +74,7 @@ module.exports = async function cookie(req, res) {
       if (err) return err
 
       // Get updated user credentials from ACL
-      let rows = await acl(`
+      const rows = await acl(`
         SELECT email, admin, language, roles, blocked
         FROM acl_schema.acl_table
         WHERE lower(email) = lower($1);`, [payload.email])
diff --git a/mod/user/fromACL.js b/mod/user/fromACL.js
index df89f63c0d..9eb2840e63 100644
--- a/mod/user/fromACL.js
+++ b/mod/user/fromACL.js
@@ -57,7 +57,7 @@ module.exports = async function fromACL(req) {
 
   if (req.headers.authorization) {
 
-    const user_string = Buffer.from(req.headers.authorization.split(" ")[1], 'base64').toString()
+    const user_string = Buffer.from(req.headers.authorization.split(' ')[1], 'base64').toString()
 
     const email_password = user_string.split(':')
 
diff --git a/mod/user/saml.js b/mod/user/saml.js
index b01d932cf4..ad04f3cb8a 100644
--- a/mod/user/saml.js
+++ b/mod/user/saml.js
@@ -197,7 +197,7 @@ async function acl_lookup(email) {
   const date = new Date()
 
   // Update access_log and return user record matched by email.
-  let rows = await acl(`
+  const rows = await acl(`
     UPDATE acl_schema.acl_table
     SET access_log = array_append(access_log, '${date.toISOString().replace(/\..*/,'')}')
     WHERE lower(email) = lower($1)
diff --git a/mod/utils/roles.js b/mod/utils/roles.js
index 49412cf955..a6ec2fa1fd 100644
--- a/mod/utils/roles.js
+++ b/mod/utils/roles.js
@@ -21,7 +21,7 @@ function check(obj, user_roles) {
 
   // Some negated role is included in user_roles[]
   const someNegatedRole = Object.keys(obj.roles).some(
-    (role) => /^!/.exec(role) && user_roles.includes(role.replace(/^!/, ""))
+    (role) => /^!/.exec(role) && user_roles.includes(role.replace(/^!/, ''))
   );
 
   if (someNegatedRole) return false;
diff --git a/mod/utils/sqlFilter.js b/mod/utils/sqlFilter.js
index 9b75c3fb23..a0263d6c06 100644
--- a/mod/utils/sqlFilter.js
+++ b/mod/utils/sqlFilter.js
@@ -110,7 +110,7 @@ function mapFilterEntries(filter) {
 
   if (Object.keys(filter).some(key => !SQLvalidation.test(key))) {
 
-    let unvalidatedKey = Object.keys(filter).find(key => !SQLvalidation.test(key))
+    const unvalidatedKey = Object.keys(filter).find(key => !SQLvalidation.test(key))
 
     console.warn(`"${unvalidatedKey}" field didn't pass SQL parameter validation`)
     return;
diff --git a/mod/workspace/_workspace.js b/mod/workspace/_workspace.js
index 9b77efa480..dceb986c13 100644
--- a/mod/workspace/_workspace.js
+++ b/mod/workspace/_workspace.js
@@ -102,7 +102,7 @@ async function layer(req, res) {
     req.params.user.roles.push('*')
   }
 
-  let layer = await getLayer(req.params)
+  const layer = await getLayer(req.params)
 
   if (layer instanceof Error) {
     return res.status(400).send(layer.message)
@@ -172,7 +172,7 @@ async function locale(req, res) {
     req.params.user.roles.push('*')
   }
 
-  let locale = await getLocale(req.params)
+  const locale = await getLocale(req.params)
 
   if (locale instanceof Error) {
     return res.status(400).send(locale.message)
diff --git a/mod/workspace/cache.js b/mod/workspace/cache.js
index 365a54d9f4..813ac1a2d0 100644
--- a/mod/workspace/cache.js
+++ b/mod/workspace/cache.js
@@ -89,10 +89,8 @@ The workspace is assigned to the module scope cache variable and the timestamp i
 */
 async function cacheWorkspace() {
 
-  let workspace;
-
   // Get workspace from source.
-  workspace = Object.hasOwn(getFrom, workspace_src) ?
+  const workspace = Object.hasOwn(getFrom, workspace_src) ?
     await getFrom[workspace_src](process.env.WORKSPACE) : {}
 
   // Return error if source failed.
diff --git a/mod/workspace/getTemplate.js b/mod/workspace/getTemplate.js
index 58c3d86c8b..76d4cfafe4 100644
--- a/mod/workspace/getTemplate.js
+++ b/mod/workspace/getTemplate.js
@@ -67,8 +67,6 @@ module.exports = async function getTemplate(template) {
     return template
   }
 
-  let response;
-
   if (template.cached) {
     return structuredClone(template.cached)
   }
@@ -85,7 +83,7 @@ module.exports = async function getTemplate(template) {
     return template
   }
 
-  response = await getFrom[method](template.src)
+  const response = await getFrom[method](template.src)
 
   if (response instanceof Error) {
 
diff --git a/mod/workspace/templates/location_update.js b/mod/workspace/templates/location_update.js
index 36817f8e69..5b56f4a1ba 100644
--- a/mod/workspace/templates/location_update.js
+++ b/mod/workspace/templates/location_update.js
@@ -36,7 +36,7 @@ module.exports = _ => {
 
         const jsonb_field = Object.keys(jsonb)[0]
 
-        let updateObject = []
+        const updateObject = []
         Object.keys(jsonb[jsonb_field]).forEach(key => {
           let value = typeof jsonb[jsonb_field][key] === 'string' ? `"${jsonb[jsonb_field][key]}"` : jsonb[jsonb_field][key]
 
diff --git a/mod/workspace/templates/mvt.js b/mod/workspace/templates/mvt.js
index faa507f0f3..cc116819c9 100644
--- a/mod/workspace/templates/mvt.js
+++ b/mod/workspace/templates/mvt.js
@@ -9,7 +9,7 @@ module.exports = _ => {
   // Push label (cluster) into fields
   _.label && fields.push(`${_.workspace.templates[_.label]?.template || _.label} AS ${_.label}`)
 
-  let
+  const
     x = parseInt(_.x),
     y = parseInt(_.y),
     z = parseInt(_.z)
diff --git a/mod/workspace/templates/mvt_geom.js b/mod/workspace/templates/mvt_geom.js
index b32f7839b5..0467aa3936 100644
--- a/mod/workspace/templates/mvt_geom.js
+++ b/mod/workspace/templates/mvt_geom.js
@@ -1,6 +1,6 @@
 module.exports = _ => {
 
-  let
+  const
     x = parseInt(_.x),
     y = parseInt(_.y),
     z = parseInt(_.z)
diff --git a/public/tests/_base.test.mjs b/public/tests/_base.test.mjs
index 308536f766..b0d0c56216 100644
--- a/public/tests/_base.test.mjs
+++ b/public/tests/_base.test.mjs
@@ -247,7 +247,7 @@ export async function base() {
             target: document.getElementById('tabview-divider'),
             resizeEvent: (e) => {
 
-                let pageY = (e.touches && e.touches[0].pageY) || e.pageY;
+                const pageY = (e.touches && e.touches[0].pageY) || e.pageY;
 
                 if (pageY < 0) return;
 
@@ -282,7 +282,7 @@ export async function base() {
 
                 // Put focus on the gazetteer if the locations tab is activated.
                 if (e.target.dataset.id === 'locations') {
-                    let gazetteerInput = document.getElementById('gazetteerInput')
+                    const gazetteerInput = document.getElementById('gazetteerInput')
                     gazetteerInput && window.innerWidth > 768 && gazetteerInput.focus()
                 }
             }
diff --git a/public/tests/layer.test.mjs b/public/tests/layer.test.mjs
index 2f028b9c7a..93207d2ffa 100644
--- a/public/tests/layer.test.mjs
+++ b/public/tests/layer.test.mjs
@@ -18,7 +18,7 @@ export async function layerTest(mapview) {
 
                 if (layer.dataviews) {
 
-                    for (let dataview in layer.dataview) {
+                    for (const dataview in layer.dataview) {
                         dataview.show();
                     }
                 }
diff --git a/tests/lib/ui/layers/filters.test.mjs b/tests/lib/ui/layers/filters.test.mjs
index bcbd1afc22..02afd79522 100644
--- a/tests/lib/ui/layers/filters.test.mjs
+++ b/tests/lib/ui/layers/filters.test.mjs
@@ -7,7 +7,7 @@ export async function filtersTest(mapview) {
     await codi.describe('UI Layers: Filters test', async () => {
 
         //Creating the filter to be used in other tests
-        let filter = {
+        const filter = {
             field: 'id',
             minmax_query: 'minmax_query'
         };
diff --git a/tests/lib/utils/queryParams.test.mjs b/tests/lib/utils/queryParams.test.mjs
index c8ce132fc4..d38765f0df 100644
--- a/tests/lib/utils/queryParams.test.mjs
+++ b/tests/lib/utils/queryParams.test.mjs
@@ -19,7 +19,7 @@ export async function queryParamsTest(mapview) {
             id: 6,
         });
 
-        let params = {
+        const params = {
             layer: location_layer,
             queryparams: {
                 layer: location_layer,
@@ -34,7 +34,7 @@ export async function queryParamsTest(mapview) {
          */
         await codi.it('Should return undefined with null queryparams', async () => {
 
-            let null_params = {};
+            const null_params = {};
             const formattedValue = mapp.utils.queryParams(null_params);
             codi.assertEqual(formattedValue, undefined, `We expect the value to equal undefined, we received ${formattedValue}`)
         });
diff --git a/tests/mod/workspace/_workspace.test.mjs b/tests/mod/workspace/_workspace.test.mjs
index a7bfa97ef1..00dcdeae8a 100644
--- a/tests/mod/workspace/_workspace.test.mjs
+++ b/tests/mod/workspace/_workspace.test.mjs
@@ -44,7 +44,7 @@ export async function workspaceTest(mapview) {
         });
 
         await codi.it('Workspace: Getting template_test_vanilla Layer', async () => {
-            let layer = await mapp.utils.xhr(`/test/api/workspace/layer?layer=template_test_vanilla`);
+            const layer = await mapp.utils.xhr(`/test/api/workspace/layer?layer=template_test_vanilla`);
             codi.assertEqual(layer.key, 'template_test_vanilla', 'Ensure that we get the template_test_vanilla layer from the API')
             codi.assertEqual(layer.infoj.length, 6, 'The infoj should always have 6 infoj entries')
             codi.assertTrue(!!layer.style, 'The layer needs to have a style object from another template')

From 885720d85134f332d1f0ad7816bf1204507346cf Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 15:47:19 +0200
Subject: [PATCH 10/23] Fix optional chaining

---
 mod/user/acl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mod/user/acl.js b/mod/user/acl.js
index a5a14cec52..2111d9ee96 100644
--- a/mod/user/acl.js
+++ b/mod/user/acl.js
@@ -21,7 +21,7 @@ const pool = new Pool({
 })
 
 // The acl module will export an empty require object instead of a function if no ACL connection has been defined.
-if (!connection || !connection[1]) {
+if (!connection?.[1]) {
   module.exports = null;
 }
 else {

From d1571913c9c0721c983ef5c14fc4d80c9eebbbdd Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Tue, 29 Oct 2024 15:56:41 +0200
Subject: [PATCH 11/23] turn back to empty object

---
 mod/user/acl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mod/user/acl.js b/mod/user/acl.js
index 2111d9ee96..730afa68ad 100644
--- a/mod/user/acl.js
+++ b/mod/user/acl.js
@@ -22,7 +22,7 @@ const pool = new Pool({
 
 // The acl module will export an empty require object instead of a function if no ACL connection has been defined.
 if (!connection?.[1]) {
-  module.exports = null;
+  module.exports = {};
 }
 else {
   /**

From 004692349519aabdf6d9d84e8ec266267553fc01 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Wed, 30 Oct 2024 11:05:04 +0100
Subject: [PATCH 12/23] System messages as ui elements;

Some wording changed.
---
 lib/ui/locations/entries/cloudinary.mjs | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index f6efc39442..732e5d52ca 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -15,7 +15,7 @@ mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
     document_upload_failed: 'Document upload failed.',
-    remove_item_confirm: 'Remove item?'
+    remove_item_confirm: 'Are you sure to remove the image? This cannot be undone.'
   },
   de: {
     image_upload_failed: 'Hochladen des Bildes gescheitert.',
@@ -272,7 +272,7 @@ function imageLoad(e, entry) {
     if (!response || response.error) {
       const errorDetail = response?.error?.message? `Error: ${response.error.message}` : '';
       const errorMessage = `Cloudinary Image upload failed! ${errorDetail}`;
-      alert(errorMessage);
+      mapp.ui.elements.alert({text: errorMessage});
       return;
     }
 
@@ -353,7 +353,11 @@ The trash function handles the deletion an image file.
 */
 async function trash(e, entry) {
 
-  if (!confirm('Remove item?')) return;
+  const confirm_remove = await mapp.ui.elements.confirm({
+    text: mapp.dictionary.remove_item_confirm
+  })
+
+  if (!confirm_remove) return;
 
   const public_id = decodeURIComponent(e.target.dataset.name);
 

From 1553a617ca6e8b3cd2490bd7f069fdaab1f2c8dc Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 30 Oct 2024 13:16:37 +0200
Subject: [PATCH 13/23] eslint bump

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ae49437a87..c4dcbb44b3 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "cookie-parser": "^1.4.5",
     "dotenv": "^16.4.5",
     "esbuild": "^0.19.11",
-    "eslint": "^8.57.1",
+    "eslint": "^9.13.0",
     "express": "^4.18.3",
     "uhtml": "^3.1.0"
   }
-}
\ No newline at end of file
+}

From 85ed12c69491bbba25642d4cc25c0c44c39d155e Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 30 Oct 2024 12:47:13 +0000
Subject: [PATCH 14/23] Explain the WORKSPACE AGE in more detail

---
 mod/workspace/_workspace.js  | 2 ++
 mod/workspace/cache.js       | 5 ++++-
 mod/workspace/getTemplate.js | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/mod/workspace/_workspace.js b/mod/workspace/_workspace.js
index 9b77efa480..b7d2a04ad4 100644
--- a/mod/workspace/_workspace.js
+++ b/mod/workspace/_workspace.js
@@ -284,6 +284,8 @@ function roles(req, res) {
 @description
 The workspace/test method which is only available to user with admin credentials requests all locales in workspace.
 
+The cached workspace will be flushed for the test method.
+
 Requesting all locales should add any additional templates to the workspace.
 
 The test method will iterate over all workspace.templates and get from the getTemplate method to check whether any errors are logged on a template in regards to its src parameter.
diff --git a/mod/workspace/cache.js b/mod/workspace/cache.js
index 365a54d9f4..132ddeee0d 100644
--- a/mod/workspace/cache.js
+++ b/mod/workspace/cache.js
@@ -14,6 +14,7 @@ const getFrom = require('../provider/getFrom')
 
 const merge = require('../utils/merge')
 
+// Assign default age in ms.
 process.env.WORKSPACE_AGE ??= 3600000
 
 let cache = null
@@ -28,7 +29,9 @@ const logger = require('../utils/logger')
 @description
 The method checks whether the module scope variable cache has been populated.
 
-The age of the cached timestamp is checked against the WORKSPACE_AGE environment variable.
+The timestamp set by cacheWorkspace is checked against the current time. The [workspace] cache will be invalidated if the difference exceeds the WORKSPACE_AGE environment variable.
+
+Setting the WORKSPACE_AGE to 0 is not recommended as this could cause the cache to be flushed while a request is passed through the XYZ API. A layer query processed by the [Query API module]{@link module:/query~layerQuery} will request the layer and associated locale which could be defined in remote templates. Each request to the [Workspace API getTemplate]{@link module:/workspace/getTemplate~getTemplate} method for the locale, layer, and query templates will call the checkWorkspaceCache method which will cause the workspace to be flushed and templates previously cached from their src no longer available.
 
 The cacheWorkspace method is called if the cache is invalid.
 
diff --git a/mod/workspace/getTemplate.js b/mod/workspace/getTemplate.js
index 58c3d86c8b..8eb02aeeb4 100644
--- a/mod/workspace/getTemplate.js
+++ b/mod/workspace/getTemplate.js
@@ -33,7 +33,7 @@ const envReplace = require('../utils/envReplace')
 @async
 
 @description
-The workspace will be requested from the workspace/cache module.
+The workspace will checked and cached by the [Workspace API checkWorkspaceCache]{@link module:/workspace/cache~checkWorkspaceCache} method.
 
 A template object matching the template_key param in the workspace.templates{} object will be returned from the getTemplate method.
 

From 1b0d8cd50e260a9e48f783cd032fc28c18a78e21 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 30 Oct 2024 14:54:40 +0200
Subject: [PATCH 15/23] Update DEVELOPING

---
 DEVELOPING.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/DEVELOPING.md b/DEVELOPING.md
index 712065ab46..73284e9b7b 100644
--- a/DEVELOPING.md
+++ b/DEVELOPING.md
@@ -36,6 +36,27 @@ ESBuild must also be used to compile the CSS supporting the MAPP and MAPP.UI ele
 
     npx esbuild --bundle public/css/_ui.css --outfile=public/css/ui.css --loader:.svg=dataurl
 
+## ESLint
+
+The codebase makes use of the [eslint](eslint.org) package to ensure that our code adhere to different rules and coding guidelines.
+To run `eslint` you will need to have the development packages installed. You can ensure they are installed by running `npm install` in the root of the xyz directory.
+
+To run the lint you can execute `npx eslint .` in the root of the application. This will show any issues there are with the codebase. You can also add the flag `--fix` to the command to allow eslint to fix any issues it may find.
+
+eslint command
+
+```
+npx esbuild .
+```
+
+eslint command with fix
+
+```
+npx esbuild . --fix
+```
+
+There are other extensions you can use in your editor to get on the fly error highlighting where any rules are broken. Please look into what eslint supports in your environment.
+
 ## version.js hash
 
 The mapp module object holds a hash of the latest release commit which can be generated by executing the version.js script in the root.

From 1dcce069868a8a392348eb0f41db0883d2b4b3fa Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 30 Oct 2024 14:55:51 +0200
Subject: [PATCH 16/23] Update DEVELOPING

---
 DEVELOPING.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/DEVELOPING.md b/DEVELOPING.md
index 73284e9b7b..0fc0e5cf94 100644
--- a/DEVELOPING.md
+++ b/DEVELOPING.md
@@ -45,15 +45,11 @@ To run the lint you can execute `npx eslint .` in the root of the application. T
 
 eslint command
 
-```
-npx esbuild .
-```
+    npx esbuild .
 
 eslint command with fix
 
-```
-npx esbuild . --fix
-```
+    npx esbuild . --fix
 
 There are other extensions you can use in your editor to get on the fly error highlighting where any rules are broken. Please look into what eslint supports in your environment.
 

From 00a5f3939adf12befd4d6b9a9acb30c1032628c4 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 30 Oct 2024 15:05:14 +0200
Subject: [PATCH 17/23] Fix ignore issue

---
 eslint.config.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 6da6e9a3fb..d5cb190633 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,7 +1,9 @@
 export default [
+  {
+    ignores: ['public/js/lib/*', 'docs/**/*'],
+  },
   {
     files: ['**/*.js', '**/*.mjs'],
-    ignores: ['public/js/lib/*', 'docs/**/*.js'],
     rules: {
       quotes: ['error', 'single', { 'allowTemplateLiterals': true }],
       'prefer-const': ['error', {

From 5073fd2fa18bc720273752525c911dd522981227 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Thu, 31 Oct 2024 11:48:30 +0200
Subject: [PATCH 18/23] Fix confirm messages

---
 lib/ui/locations/entries/cloudinary.mjs | 27 +++++++++++++------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index 732e5d52ca..6b7ec2a03a 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -15,7 +15,8 @@ mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
     document_upload_failed: 'Document upload failed.',
-    remove_item_confirm: 'Are you sure to remove the image? This cannot be undone.'
+    remove_image_confirm: 'Are you sure to remove the image? This cannot be undone.',
+    remove_document_confirm: 'Are you sure to remove this document? This cannot be undone.'
   },
   de: {
     image_upload_failed: 'Hochladen des Bildes gescheitert.',
@@ -88,7 +89,7 @@ function image(entry) {
       class="mask-icon trash no"
       data-name=${entry.value.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
       data-src=${entry.value}
-      onclick=${e => trash(e, entry)}>`
+      onclick=${e => trash(e, entry, mapp.dictionary.remove_image_confirm)}>`
 
     return mapp.utils.html.node`<div style="position: relative">
       <img
@@ -96,7 +97,7 @@ function image(entry) {
         src=${entry.value}
         onclick=${mapp.ui.utils.imagePreview}>
         ${trashBtn}`
-  
+
   } else if (entry.edit) {
 
     // Return image upload input for editable entry without a value.
@@ -128,7 +129,7 @@ function images(entry) {
       class="mask-icon trash no"
       data-name=${image.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
       data-src=${image}
-      onclick=${e => trash(e, entry)}>`
+      onclick=${e => trash(e, entry, mapp.dictionary.remove_image_confirm)}>`
 
     return mapp.utils.html`<div><img 
       src=${image}
@@ -168,7 +169,7 @@ function documents(entry) {
       class="mask-icon trash no"
       data-name=${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}
       data-href=${doc}
-      onclick=${e => trash(e, entry)}>`
+      onclick=${e => trash(e, entry, mapp.dictionary.remove_document_confirm)}>`
 
     return mapp.utils.html`<div class="link-with-img">
       ${trashBtn}<a target="_blank" href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
@@ -270,9 +271,9 @@ function imageLoad(e, entry) {
     })
 
     if (!response || response.error) {
-      const errorDetail = response?.error?.message? `Error: ${response.error.message}` : '';
+      const errorDetail = response?.error?.message ? `Error: ${response.error.message}` : '';
       const errorMessage = `Cloudinary Image upload failed! ${errorDetail}`;
-      mapp.ui.elements.alert({text: errorMessage});
+      mapp.ui.elements.alert({ text: errorMessage });
       return;
     }
 
@@ -317,7 +318,7 @@ async function docLoad(e, entry) {
   if (!signedUrl) return;
 
   const data = new FormData()
-  
+
   data.append('file', e.target.result.toString())
 
   const response = await fetch(signedUrl, {
@@ -326,9 +327,9 @@ async function docLoad(e, entry) {
   })
 
   if (!response || response.error) {
-    const errorDetail = response?.error?.message? `Error: ${response.error.message}` : '';
+    const errorDetail = response?.error?.message ? `Error: ${response.error.message}` : '';
 
-    alert(`Cloudinary document upload failed! ${errorDetail}`);
+    mapp.ui.elements.alert(`Cloudinary document upload failed! ${errorDetail}`);
     return;
   }
 
@@ -351,17 +352,17 @@ The trash function handles the deletion an image file.
 @param {event} e 
 @param {Object} entry 
 */
-async function trash(e, entry) {
+async function trash(e, entry, confirm_message) {
 
   const confirm_remove = await mapp.ui.elements.confirm({
-    text: mapp.dictionary.remove_item_confirm
+    text: confirm_message
   })
 
   if (!confirm_remove) return;
 
   const public_id = decodeURIComponent(e.target.dataset.name);
 
-  const signedUrl = await getSignedUrl(entry, {public_id, destroy: true})
+  const signedUrl = getSignedUrl(entry, { public_id, destroy: true })
 
   // Failed to generate a signedUrl for the request.
   if (!signedUrl) return;

From 497313eda0a6dee52441e8c1624d7857f5cdc10b Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Thu, 31 Oct 2024 12:44:27 +0200
Subject: [PATCH 19/23] Update docs and fix async

---
 lib/ui/locations/entries/cloudinary.mjs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index 79f6f3c71a..07031bb326 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -363,7 +363,7 @@ async function trash(e, entry, confirm_message) {
 
   const public_id = decodeURIComponent(e.target.dataset.name);
 
-  const signedUrl = getSignedUrl(entry, { public_id, destroy: true })
+  const signedUrl = await getSignedUrl(entry, { public_id, destroy: true })
 
   // Failed to generate a signedUrl for the request.
   if (!signedUrl) return;
@@ -421,7 +421,7 @@ async function updateLocation(entry) {
 
 /**
 @function getSignedUrl
-
+@async
 @description
 Signs a parameterised request to upload or destroy a resource on cloudinary.
 
@@ -430,7 +430,8 @@ Signs a parameterised request to upload or destroy a resource on cloudinary.
 @property {string} entry.cloudinary_folder
 @property {string} params.public_id
 @property {boolean} [params.destroy] The request is to detroy a stored resource.
-@returns {String} signedURL
+
+@returns {Promise<String>} signedURL
 */
 async function getSignedUrl(entry, params) {
 

From d43db1f7487cd61c327b25db90e14fc91bd2e309 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Thu, 31 Oct 2024 13:00:13 +0200
Subject: [PATCH 20/23] Update actions branches

---
 .github/workflows/codeql.yml      | 4 ++--
 .github/workflows/deploy-docs.yml | 2 +-
 .github/workflows/eslint.yml      | 4 ++--
 .github/workflows/unit_tests.yml  | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 51f2b0049d..5168b0bf49 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "major", "minor", "patch" ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: [ "main", "major", "minor", "patch" ]
   schedule:
     - cron: '40 1 * * 2'
 
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index b6d664e96a..53935ed263 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: [ "main", "major", "minor", "patch" ]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 7d30697a21..273937cba4 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -2,9 +2,9 @@ name: ESLint
 
 on:
   push:
-    branches: [ main ]
+    branches: [ "main", "major", "minor", "patch" ]
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "major", "minor", "patch" ]
 
 jobs:
   eslint:
diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml
index 1b2e6c9994..d9701b774c 100644
--- a/.github/workflows/unit_tests.yml
+++ b/.github/workflows/unit_tests.yml
@@ -2,9 +2,9 @@ name: Codi unit tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [ "main", "major", "minor", "patch" ]
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "major", "minor", "patch" ]
 
 jobs:
   build:

From 359f96d2cd30457bb01f64efbbccb5b267531c0a Mon Sep 17 00:00:00 2001
From: AlexanderGeere <alex.geere@geolytix.co.uk>
Date: Thu, 31 Oct 2024 13:13:20 +0200
Subject: [PATCH 21/23] cloudinary tests

---
 .../ui/locations/entries/_entries.test.mjs    |   4 +-
 .../ui/locations/entries/cloudinary.test.mjs  | 100 ++++++++++++++++++
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 tests/lib/ui/locations/entries/cloudinary.test.mjs

diff --git a/tests/lib/ui/locations/entries/_entries.test.mjs b/tests/lib/ui/locations/entries/_entries.test.mjs
index ad22f3ef21..cf8185976d 100644
--- a/tests/lib/ui/locations/entries/_entries.test.mjs
+++ b/tests/lib/ui/locations/entries/_entries.test.mjs
@@ -1,9 +1,11 @@
 import { pinTest } from './pin.test.mjs';
 import { geometryTest } from './geometry.test.mjs';
 import { layerTest } from './layer.test.mjs';
+import { cloudinaryTest } from './cloudinary.test.mjs';
 
 export const entriesTest = {
     pinTest,
     geometryTest,
-    layerTest
+    layerTest,
+    cloudinaryTest
 }
\ No newline at end of file
diff --git a/tests/lib/ui/locations/entries/cloudinary.test.mjs b/tests/lib/ui/locations/entries/cloudinary.test.mjs
new file mode 100644
index 0000000000..1052d5839b
--- /dev/null
+++ b/tests/lib/ui/locations/entries/cloudinary.test.mjs
@@ -0,0 +1,100 @@
+/**
+ * @module lib/ui/locations/entries/cloudinary
+ */
+
+/**
+ * Entry point for the cloudinary test module
+ * @function cloudinaryTest 
+ */
+export async function cloudinaryTest() {
+    await codi.describe('UI Entries: Cloudinary', async () => {
+
+        /**
+         * @description Should return image preview
+         * @function it
+         */
+        await codi.it('Should return cloudinary res url for image preview with trash icon', async () => {
+
+            const entry = {
+                title: 'Image', 
+                type: 'image', 
+                cloudinary_folder: 'test', 
+                value: 'https://res.cloudinary.com/dvx8vwneg/image/upload/v1730365463/test/%401730365462823.jpg', 
+                edit: true
+    
+            }
+
+            const imageEntry = mapp.ui.locations.entries.image(entry)
+            
+            codi.assertEqual(imageEntry.children[0].getAttribute('src'), entry.value, 'Image src should be the entrys value');
+            codi.assertTrue(imageEntry.children[1].classList.contains('trash'), 'Image should have a delete button');
+            codi.assertEqual(imageEntry.children[1].getAttribute('data-src'), entry.value, 'Delete button src should match entry value');
+
+        });
+
+        /**
+         * @description Should return document name
+         * @function it
+         */
+        await codi.it('Should return cloudinary res url for document preview with trash icon', async () => {
+
+            const entry = { 
+                            title: 'Documents', 
+                            type: 'documents', 
+                            cloudinary_folder: 'test', 
+                            edit: true,
+                            value: [ 'https://res.cloudinary.com/dvx8vwneg/raw/upload/v1730363322/test/test-10-31T10:28.txt' ] 
+                         }
+            
+
+            const documentEntry = mapp.ui.locations.entries.documents(entry)
+            
+            const linkHolder = documentEntry.children[1]
+            codi.assertEqual(linkHolder.children[1].getAttribute('href'), entry.value[0], 'Document href should be the entrys value');
+            codi.assertTrue(linkHolder.children[0].classList.contains('trash'), 'Document should have a delete button');
+            codi.assertEqual(linkHolder.children[0].getAttribute('data-href'), entry.value[0], 'Delete button src should match entry value');
+
+        });
+
+         /**
+         * @description Should return multiple images in an image grid
+         * @function it
+         */
+        await codi.it('Should return an image grid with trash icons on each', async () => {
+
+            const entry = { 
+                            title: 'Images', 
+                            type: 'images', 
+                            cloudinary_folder: 'test', 
+                            edit: true,
+                            value: [ 
+                                     'https://res.cloudinary.com/dvx8vwneg/image/upload/v1730365463/test/%401730365462823.jpg',
+                                     'https://res.cloudinary.com/dvx8vwneg/image/upload/v1730365463/test/%401730365462823.jpg'
+                                   ] 
+                            }
+            
+
+            const imagesEntry = mapp.ui.locations.entries.images(entry)
+        
+            codi.assertEqual(imagesEntry.children.length, 3, 'Multiple images should appear in the infoj');
+        });
+
+        /**
+         * @description Should return multiple images in an image grid
+         * @function it
+         */
+        await codi.it('Should return an image with no trash icon', async () => {
+
+            const entry = {
+                title: 'Image', 
+                type: 'image', 
+                cloudinary_folder: 'test', 
+                value: 'https://res.cloudinary.com/dvx8vwneg/image/upload/v1730365463/test/%401730365462823.jpg'
+            }
+
+            const imageEntry = mapp.ui.locations.entries.image(entry)
+            
+            codi.assertEqual(imageEntry.children.length, 1, 'Image should not have a delete button');
+        });
+    })
+}
\ No newline at end of file

From 25c12365a5e49d0ade3422b447ee5218fae0974d Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Thu, 31 Oct 2024 13:35:03 +0200
Subject: [PATCH 22/23] Update actions remove docs from all but main

---
 .github/workflows/deploy-docs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 53935ed263..2cf63fc48e 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: [ "main", "major", "minor", "patch" ]
+    branches: [ "main" ]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

From 4f4d60b743caf32aa6a214fc50163ac0126a3755 Mon Sep 17 00:00:00 2001
From: Dennis Bauszus <dennis.bauszus@geolytix.co.uk>
Date: Fri, 1 Nov 2024 07:09:43 +0000
Subject: [PATCH 23/23] Remove data-id assignment for layer-view element
 (#1633)

---
 lib/ui/layers/listview.mjs | 2 +-
 lib/ui/layers/view.mjs     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/ui/layers/listview.mjs b/lib/ui/layers/listview.mjs
index 341b46233c..6b608f7dce 100644
--- a/lib/ui/layers/listview.mjs
+++ b/lib/ui/layers/listview.mjs
@@ -104,7 +104,7 @@ export default function (params) {
     group.meta = mapp.utils.html.node`<div class="meta">`
 
     group.drawer = mapp.ui.elements.drawer({
-      data_id: `layer-drawer`,
+      data_id: layer.group,
       class: `layer-group ${layer.groupClassList || ''}`,
       header: mapp.utils.html`
         <h2>${layer.group}</h2>
diff --git a/lib/ui/layers/view.mjs b/lib/ui/layers/view.mjs
index 3b4c76c10f..19645f354b 100644
--- a/lib/ui/layers/view.mjs
+++ b/lib/ui/layers/view.mjs
@@ -166,7 +166,7 @@ export default function layerView(layer) {
   const drawerClass = `layer-view raised ${layer.classList || ''} ${content.length ? '' : 'empty'}`
 
   layer.drawer = mapp.ui.elements.drawer({
-    data_id: `layer-drawer`,
+    data_id: layer.key,
     class: drawerClass,
     header,
     content
@@ -242,7 +242,7 @@ function changeEnd(layer) {
     layer.zoomBtn.style.display = 'block'
 
     // Collapse drawer and disable layer.view.
-    layer.view.querySelector('[data-id=layer-drawer]').classList.remove('expanded')
+    layer.view.querySelector('.layer-view.drawer').classList.remove('expanded')
 
     // Disable layer display toggle.
     layer.displayToggle.classList.add('disabled')