add support for displaying basic tables for arbitrary GeoJSON features

dpinney · Feb 2, 2024 · 122e466 · 122e466
1 parent a96a1a8
commit 122e466
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 38 deletions.
diff --git a/omf/static/geoJsonMap/v3/featureEditModal.js b/omf/static/geoJsonMap/v3/featureEditModal.js
@@ -28,7 +28,12 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
         this.#observables = observables;
         this.#observables.forEach(ob => ob.registerObserver(this));
         this.#removed = false;
-        this.renderContent();
+        // - In order to allow users to view non-OMD GeoJSON features in a table, I added this if-statement
+        if (this.#observables.every(ob => ob.hasProperty('treeKey', 'meta'))) {
+            this.renderContent();
+        } else {
+            this.#renderReadOnlyModal();
+        }
     }
 
     // *******************************
@@ -126,7 +131,6 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
         return this.#removed;
     }
 
-
     // - Here's how refreshing content could work:
     //  - The FeatureEditModal maintains an internal map of property keys to table rows (<tr> elements)
     //  - A property is deleted from an object
@@ -239,26 +243,13 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
         const keyToValues = this.#getKeyToValuesMapping();
         for (const [key, ary] of Object.entries(keyToValues.meta)) {
             const keySpan = document.createElement('span');
-            if (key === 'treeKey') {
-                keySpan.textContent = 'ID';
-                keySpan.dataset.propertyKey = 'treeKey';
-                keySpan.dataset.propertyNamespace = 'meta';
-                if (ary.length === 1) {
-                    modal.insertTHeadRow([null, keySpan, ary[0].toString()], 'prepend');
-                } else {
-                    modal.insertTHeadRow([null, keySpan, '<Multiple IDs>'], 'prepend');
-                }
-                continue;
-            }
-            if (key === 'FID') {
-                keySpan.textContent = 'FID';
-                keySpan.dataset.propertyKey = 'FID';
-                keySpan.dataset.propertyNamespace = 'meta';
-                if (ary.length === 1) {
-                    modal.insertTHeadRow([null, keySpan, ary[0].toString()], 'prepend');
-                } else {
-                    modal.insertTHeadRow([null, keySpan, '<Multiple FIDs>'], 'prepend');
-                }
+            keySpan.textContent = 'ID';
+            keySpan.dataset.propertyKey = 'treeKey';
+            keySpan.dataset.propertyNamespace = 'meta';
+            if (ary.length === 1) {
+                modal.insertTHeadRow([null, keySpan, ary[0].toString()], 'prepend');
+            } else {
+                modal.insertTHeadRow([null, keySpan, '<Multiple IDs>'], 'prepend');
             }
         }
         for (const [key, ary] of Object.entries(keyToValues.treeProps)) {
@@ -529,22 +520,11 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
             coordinates: {}
         };
         this.#observables.forEach(ob => {
-            // - Let non-OMD-tree features display a table
-            if (ob.hasProperty('treeKey', 'meta')) {
-                const treeKey = ob.getProperty('treeKey', 'meta');
-                if (!keyToValues.meta.hasOwnProperty('treeKey')) {
-                    keyToValues.meta.treeKey = [treeKey];
-                } else if (!keyToValues.meta.treeKey.includes(treeKey)) {
-                    keyToValues.meta.treeKey.push(treeKey);
-                }
-            }
-            if (ob.hasProperty('FID', 'meta')) {
-                const fid = ob.getProperty('FID', 'meta');
-                if (!keyToValues.meta.hasOwnProperty('FID')) {
-                    keyToValues.meta.FID = [fid];
-                } else if (!keyToValues.meta.FID.includes(fid)) {
-                    keyToValues.meta.FID.push(fid);
-                }
+            const treeKey = ob.getProperty('treeKey', 'meta');
+            if (!keyToValues.meta.hasOwnProperty('treeKey')) {
+                keyToValues.meta.treeKey = [treeKey];
+            } else if (!keyToValues.meta.treeKey.includes(treeKey)) {
+                keyToValues.meta.treeKey.push(treeKey);
             }
             if (ob.hasProperty('treeProps', 'meta')) {
                 for (const [k, v] of Object.entries(ob.getProperties('treeProps'))) {
@@ -769,6 +749,35 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
         }
         return true;
     }
+
+    /**
+     * - A render a static, read-only table for arbitrary GeoJSON objects. Does not support editing data in any way
+     */
+    #renderReadOnlyModal() {
+        if (this.#observables.length > 1) {
+            throw Error('ReadOnlyModal does not support viewing multiple GeoJSON features');
+        }
+        const modal = new Modal();
+        modal.addStyleClasses(['featureEditModal'], 'divElement');
+        for (const [key, val] of Object.entries(this.#observables[0].getProperties('meta'))) {
+            const keySpan = document.createElement('span');
+            keySpan.textContent = key;
+            keySpan.dataset.propertyKey = key;
+            keySpan.dataset.propertyNamespace = 'meta';
+            const valueSpan = document.createElement('span');
+            valueSpan.textContent = val;
+            modal.insertTBodyRow([keySpan, valueSpan]);
+        }
+        modal.addStyleClasses(['centeredTable', 'plainTable'], 'tableElement');
+        modal.addStyleClasses(['verticalFlex', 'centerMainAxisFlex', 'centerCrossAxisFlex'], 'containerElement');
+        if (this.#modal === null) {
+            this.#modal = modal;
+        }
+        if (document.body.contains(this.#modal.divElement)) {
+            this.#modal.divElement.replaceWith(modal.divElement);
+            this.#modal = modal;
+        }
+    }
 
     /**
      * @param {string} propertyKey

diff --git a/omf/static/geoJsonMap/v3/modal.css b/omf/static/geoJsonMap/v3/modal.css
@@ -221,6 +221,20 @@ table.table--modal thead {
     position: sticky;
     top: 0;
 }
+/* Support for renderReadOnlyModal */
+div.leaflet-popup-content div.js-div--modal.featureEditModal {
+    border-radius: 0px;
+}
+table.plainTable td, table.plainTable th {
+    border: 1px solid black;
+}
+div.js-div--modal.featureEditModal table.table--modal.plainTable td:nth-child(2) {
+    max-width: initial;
+    width: initial;
+}
+table.table--modal.plainTable td, table.table--modal.plainTable th {
+    padding: .25rem;
+}
 
 /****************************/
 /* FeatureEditModal styling */