From 3c1348e0784a99cac66554426d5bf0f92eddfcce Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Thu, 12 Oct 2023 11:32:03 +0100
Subject: [PATCH] ammend type:image method from plugin

---
 lib/ui/locations/entries/_entries.mjs   |  12 +-
 lib/ui/locations/entries/cloudinary.mjs | 368 ++++++++++++++----------
 lib/ui/locations/entries/geometry.mjs   |  26 +-
 3 files changed, 231 insertions(+), 175 deletions(-)

diff --git a/lib/ui/locations/entries/_entries.mjs b/lib/ui/locations/entries/_entries.mjs
index 8403489cd..2af0ae6be 100644
--- a/lib/ui/locations/entries/_entries.mjs
+++ b/lib/ui/locations/entries/_entries.mjs
@@ -39,6 +39,7 @@ export default {
   documents: cloudinary,
   geometry,
   html: textarea,
+  image: cloudinary,
   images: cloudinary,
   integer: numeric,
   json,
@@ -67,13 +68,16 @@ function key(entry) {
 }
 
 function title(entry) {
+
+  const tooltipSpan = entry.tooltip ? mapp.utils.html`
+  <span
+    style="line-height: 1; margin-left: 0.4em;"
+    class="mobile-display-none mask-icon question-mark">${entry.tooltip}` : '';
+
   return mapp.utils.html.node`
     <div
       class="label"
       style=${entry.css_title}
       title=${entry.tooltip}>${entry.title}
-      ${entry.tooltip ? mapp.utils.html`
-        <span
-          style="line-height: 1; margin-left: 0.4em;"
-          class="mobile-display-none mask-icon question-mark">${entry.tooltip}`: ''}`
+      ${tooltipSpan}`
 }
\ No newline at end of file
diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index 1a7e093a4..882450692 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -1,233 +1,283 @@
 const types = {
-    images,
-    documents
+  image,
+  images,
+  documents
 }
 
 const onload = {
-    images: imageLoad,
-    documents: docLoad
+  image: imageLoad,
+  images: imageLoad,
+  documents: docLoad
 }
 
 export default entry => types[entry.type](entry)
 
+function image(entry) {
+
+  // Create a new target if not provided with the entry.
+  //entry.target ??= mapp.utils.html.node`<div class="image-entry-target">`
+
+  if (entry.value) {
+
+    // Render image with src from cloudinary reference as value.
+    return mapp.utils.html.node`
+      <div style="position: relative;">
+        <img
+          style="width: 100%"
+          src=${entry.value}
+          onclick=${mapp.ui.utils.imagePreview}>
+          ${entry.edit && mapp.utils.html`
+            <button 
+              style="width: 30px; height: 30px; position: absolute; right: 0; top: 0;"
+              class="mask-icon trash no"
+              data-name=${entry.value.replace(/.*\//, '').replace(/\.([\w-]{3})/, '')}
+              data-src=${entry.value}
+              onclick=${e => trash(e, entry)}>`}`
+
+  }
+  
+  if (entry.edit) {
+
+    return mapp.utils.html.node`
+      <div>
+        <input
+          type="file"
+          accept="image/*;capture=camera"
+          onchange=${e => upload(e, entry)}>`
+  }
+}
+
 function images(entry) {
 
-    const images = entry.value?.map(image => {
-
-        const trashBtn = 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>
+  const images = entry.value?.map(image => {
+
+    const trashBtn = 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}>
-            ${(entry.edit) && trashBtn}`
-        }) || []
+          src=${image}
+          onclick=${mapp.ui.utils.imagePreview}>
+          ${(entry.edit) && trashBtn}`
 
-    if (entry.edit) images.push(mapp.utils.html.node`
-        <div class="mask-icon add-photo pos-center">
-        <input
-            type="file"
-            accept="image/*;capture=camera"
-            onchange=${e => upload(e, entry)}>`)
+  }) || []
 
-    if (!images.length) return;
+  if (entry.edit) images.push(mapp.utils.html.node`
+    <div class="mask-icon add-photo pos-center">
+      <input
+        type="file"
+        accept="image/*;capture=camera"
+        onchange=${e => upload(e, entry)}>`)
 
-    entry.list = mapp.utils.html.node`<div class="images-grid">${images}`
+  if (!images.length) return;
 
-    return entry.list;
+  entry.list = mapp.utils.html.node`<div class="images-grid">${images}`
+
+  return entry.list;
 }
 
 function documents(entry) {
 
-    const docs = entry.value?.map(doc => {
+  const docs = entry.value?.map(doc => {
+
+    const trashBtn = 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 = 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">
+        ${(entry.edit) && trashBtn}
+          <a
+            target="_blank"
+            href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
 
-        return mapp.utils.html`
-        <div class="link-with-img">
-            ${(entry.edit) && trashBtn}
-            <a
-                target="_blank"
-                href=${doc}>${doc.replace(/^.*\//, '').replace(/\.([\w-]{3})/, '')}`
-        }) || []
+  }) || []
 
-    entry.uploadBtn = mapp.utils.html.node`
+  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)}>`
+      <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.push(entry.uploadBtn)
 
-    if (!docs.length) return;
+  if (!docs.length) return;
 
-    entry.list = mapp.utils.html.node`<div>${docs}`
+  entry.list = mapp.utils.html.node`<div>${docs}`
 
-    return entry.list;
+  return entry.list;
 }
 
 async function upload(e, entry) {
 
-    // Location view must disabled while uploading resource.
-    entry.location.view?.classList.add('disabled')
+  // Location view must disabled while uploading resource.
+  entry.location.view?.classList.add('disabled')
 
-    const reader = new FileReader()
+  const reader = new FileReader()
 
-    if (!e.target.files[0]) return;
+  if (!e.target.files[0]) return;
 
-    entry.file = e.target.files[0]
+  entry.file = e.target.files[0]
 
-    reader.onload = e => onload[entry.type](e, entry)
+  reader.onload = e => onload[entry.type](e, entry)
 
-    reader.readAsDataURL(entry.file)
+  reader.readAsDataURL(entry.file)
 }
 
-function imageLoad(e, entry){
+function imageLoad(e, entry) {
+
+  const img = new Image()
 
-    const img = new Image()
+  img.onload = async () => {
 
-    img.onload = async () => {
+    let
+      canvas = mapp.utils.html.node`<canvas>`,
+      max_size = 1024,
+      width = img.width,
+      height = img.height
 
-        let
-            canvas = mapp.utils.html.node`<canvas>`,
-            max_size = 1024,
-            width = img.width,
-            height = img.height
+    // resize
+    if (width > height && width > max_size) {
+      height *= max_size / width
+      width = max_size
 
-        // resize
-        if (width > height && width > max_size) {
-            height *= max_size / width
-            width = max_size
+    } else if (height > max_size) {
+      width *= max_size / height
+      height = max_size
+    }
 
-        } else if (height > max_size) {
-            width *= max_size / height
-            height = max_size
-        }
+    canvas.width = width
+    canvas.height = height
 
-        canvas.width = width
-        canvas.height = height
+    canvas.getContext('2d').drawImage(img, 0, 0, width, height)
 
-        canvas.getContext('2d').drawImage(img, 0, 0, width, height)
+    const dataURL = canvas.toDataURL('image/jpeg', 0.5)
 
-        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 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 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)
-        })
+    if (!response || response.error) {
+      const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
+      const errorMessage = `Cloudinary Image upload failed!${errorDetail}`;
+      alert(errorMessage);
+      return;
+    }
 
-        if (!response || response.error) {
-            const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-            const errorMessage = `Cloudinary Image upload failed!${errorDetail}`;
-            alert(errorMessage);
-            return;
-        }
+    if (entry.type === 'image') {
 
-        // 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]
+      // Only a single image is supported by the entry.type.
+      entry.value = response.secure_url
+    } else {
 
-        postUpdate(entry)
+      // 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]
     }
 
-    img.src = e.target.result
+    postUpdate(entry)
+  }
+
+  img.src = e.target.result
 }
 
 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
-    })
-
-    if (!response || response.error) {
-        const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-        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]
-
-    postUpdate(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
+  })
+
+  if (!response || response.error) {
+    const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
+    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]
+
+  postUpdate(entry)
 }
 
 async function trash(e, entry) {
 
-    if (!confirm('Remove item?')) return;
+  if (!confirm('Remove item?')) return;
 
-    // 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
-    })}`)
+  // 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
+  })}`)
+
+  // Remove the resource link from the entry values array and update the location.
+  const valueSet = new Set(entry.value)
 
-    // Remove the resource link from the entry values array and update the location.
-    const valueSet = new Set(entry.value)
+  valueSet.delete(e.target.dataset.src || e.target.dataset.href)
 
-    valueSet.delete(e.target.dataset.src || e.target.dataset.href)
+  if (entry.type === 'image') {
+
+    entry.value = null
+  } else {
 
     entry.value = valueSet.size ? Array.from(valueSet) : null;
+  }
 
-    postUpdate(entry)
+  postUpdate(entry)
 }
 
-
 async function postUpdate(entry) {
 
-    entry.location.view?.classList.add('disabled')
-  
-    // Update the geometry field value.
-    await mapp.utils.xhr({
-      method: 'POST',
-      url:
-        `${entry.location.layer.mapview.host}/api/location/update?` +
-        mapp.utils.paramString({
-          locale: entry.location.layer.mapview.locale.key,
-          layer: entry.location.layer.key,
-          table: entry.location.table,
-          id: entry.location.id,
-        }),
-      body: JSON.stringify({ [entry.field]: entry.value }),
-    })
+  entry.location.view?.classList.add('disabled')
 
-    const content = mapp.ui.locations.entries[entry.type](entry)
+  // Update the geometry field value.
+  await mapp.utils.xhr({
+    method: 'POST',
+    url:
+      `${entry.location.layer.mapview.host}/api/location/update?` +
+      mapp.utils.paramString({
+        locale: entry.location.layer.mapview.locale.key,
+        layer: entry.location.layer.key,
+        table: entry.location.table,
+        id: entry.location.id,
+      }),
+    body: JSON.stringify({ [entry.field]: entry.value }),
+  })
 
-    mapp.utils.render(entry.node, content)
+  const content = mapp.ui.locations.entries[entry.type](entry)
 
-    entry.title && content.before(mapp.ui.locations.entries.title(entry))
-  
-    entry.location.view?.classList.remove('disabled')
-  
-  }
\ No newline at end of file
+  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
diff --git a/lib/ui/locations/entries/geometry.mjs b/lib/ui/locations/entries/geometry.mjs
index ac9e91744..e0f81c381 100644
--- a/lib/ui/locations/entries/geometry.mjs
+++ b/lib/ui/locations/entries/geometry.mjs
@@ -6,6 +6,15 @@ export default entry => {
   // Turn off display with no geometry to display.
   entry.display = (entry.display && entry.value)
 
+  // Drawing is only available within an edit context.
+  if (entry.edit?.draw) {
+
+    entry.draw = entry.edit.draw
+  }
+
+  // Editing with drawing is toggled off.
+  if (entry._edit?.draw) delete entry.draw
+
   // Return if entry has no geometry value and cannot be drawn in to.
   if (!entry.value && !entry.draw) return;
 
@@ -218,15 +227,6 @@ function modify(e, entry) {
 // Method for button element to call draw interaction.
 function draw(entry, list) {
 
-  // Drawing is only available within an edit context.
-  if (entry.edit?.draw) {
-
-    entry.draw = entry.edit.draw
-  }
-
-  // Editing with drawing is toggled off.
-  if (entry._edit?.draw) delete entry.draw
-
   // Short circuit without an entry.draw config.
   if (!entry.draw) return;
 
@@ -281,9 +281,11 @@ async function postUpdate(entry) {
     entry.location.layer.reload()
   }
 
-  // Render geometry entry with updated entry.value
-  mapp.utils.render(entry.node, mapp.ui.locations.entries.geometry(entry))
+  const content = mapp.ui.locations.entries[entry.type](entry)
 
-  entry.location.view?.classList.remove('disabled')
+  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