added entrypoint for new geojson feature table

dpinney · Mar 5, 2024 · f68ea56 · f68ea56
1 parent 61f4d65
commit f68ea56
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 56 deletions.
diff --git a/omf/static/geoJsonMap/v3/extensions/testModal.css b/omf/static/geoJsonMap/v3/extensions/testModal.css
@@ -0,0 +1,14 @@
+/* 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;
+}
diff --git a/omf/static/geoJsonMap/v3/extensions/testModal.js b/omf/static/geoJsonMap/v3/extensions/testModal.js
@@ -0,0 +1,64 @@
+export { TestModal };
+import { Modal } from '../modal.js';
+import { FeatureController } from '../featureController.js';
+
+class TestModal {
+    #controller;    // - ControllerInterface instance
+    #modal;         // - A single Modal instance
+    #observables;   // - An array of ObservableInterface instances
+
+    /**
+     * @param {Array} observables - an array of ObservableInterface instances
+     * @param {FeatureController} controller - a ControllerInterface instance
+     * @returns {undefined}
+     */
+    constructor(observables, controller) {
+        if (!(observables instanceof Array)) {
+            throw TypeError('"observables" argumnet must be an Array.');
+        }
+        if (!(controller instanceof FeatureController)) {
+            throw Error('"controller" argument must be instanceof FeatureController');
+        }
+        this.#controller = controller;
+        this.#modal = null;
+        this.#observables = observables;
+        this.renderContent();
+    }
+
+    /**
+     * - A render a static, read-only table for arbitrary GeoJSON objects. Does not support editing data in any way. See featureEditModal.js for
+     *   examples of how to edit data in a table
+     */
+    renderContent() {
+        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;
+        }
+        // - Example of how to get to underlying data
+        console.log(this.#controller.observableGraph.getObservable('omd').getProperty('attachments', 'meta').geojsonFiles);
+    }
+
+    // ****************************
+    // ** ModalInterface methods **
+    // ****************************
+
+    getDOMElement() {
+        return this.#modal.divElement;
+    }
+}
diff --git a/omf/static/geoJsonMap/v3/featureEditModal.js b/omf/static/geoJsonMap/v3/featureEditModal.js
@@ -28,12 +28,7 @@ class FeatureEditModal { // implements ObserverInterface, ModalInterface
         this.#observables = observables;
         this.#observables.forEach(ob => ob.registerObserver(this));
         this.#removed = false;
-        // - 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();
-        }
+        this.renderContent();
     }
 
     // *******************************
@@ -750,34 +745,6 @@ 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/leafletLayer.js b/omf/static/geoJsonMap/v3/leafletLayer.js
@@ -2,6 +2,7 @@ export { LeafletLayer };
 import { Feature } from './feature.js';
 import { FeatureController } from "./featureController.js";
 import { FeatureEditModal } from './featureEditModal.js';
+import { TestModal } from './extensions/testModal.js';
 
 /**
  * - Each LeafletLayer instance is a view in the MVC pattern. Each observes an ObservableInterface instance, which is part of the model in the MVC
@@ -62,12 +63,20 @@ class LeafletLayer { // implements ObserverInterface
         });
         if (this.#observable.isNode() || this.#observable.isLine() || this.#observable.isPolygon() || this.#observable.isMultiPolygon()) {
             const layer = Object.values(this.#layer._layers)[0];
-            let featureEditModal;
+            let modal;
             layer.bindPopup(() => {
-                featureEditModal = new FeatureEditModal([this.#observable], controller);
-                return featureEditModal.getDOMElement();
+                // - This is the entrypoint to add new kinds of modals
+                if (this.#observable.hasProperty('treeKey', 'meta')) {
+                    // - Show a modal for OMD objects
+                    modal = new FeatureEditModal([this.#observable], controller);
+                    return modal.getDOMElement();
+                } else {
+                    // - Show a modal for arbitrary GeoJSON features
+                    modal = new TestModal([this.#observable], controller);
+                    return modal.getDOMElement();
+                }
             });
-            this.#layer.addEventListener('popupclose', () => this.#observable.removeObserver(featureEditModal));
+            this.#layer.addEventListener('popupclose', () => this.#observable.removeObserver(modal));
         }
     }
 

diff --git a/omf/static/geoJsonMap/v3/main.js b/omf/static/geoJsonMap/v3/main.js
@@ -23,10 +23,6 @@ function main() {
         const parentChildLineFeature = featureGraph.getParentChildLineFeature(parentKey, childKey);
         featureGraph.insertObservable(parentChildLineFeature);
     });
-    // debug
-    window.gFeatures = features;
-    window.gFeatureGraph = featureGraph;
-    // debug
     const controller = new FeatureController(featureGraph);
     featureGraph.getObservables().forEach(ob => {
         if (!ob.isConfigurationObject()) {

diff --git a/omf/static/geoJsonMap/v3/modal.css b/omf/static/geoJsonMap/v3/modal.css
@@ -221,20 +221,6 @@ 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 */

diff --git a/omf/templates/geoJson.html b/omf/templates/geoJson.html
@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="/static/geoJsonMap/v3/sideNav.css"> 
     <link rel="stylesheet" href="/static/geoJsonMap/v3/topNav.css"> 
     <link rel="stylesheet" href="/static/geoJsonMap/v3/topTab.css"> 
+    <link rel="stylesheet" href="/static/geoJsonMap/v3/extensions/testModal.css">
     <meta charset="utf-8">
     <title>OMF GeoJSON Editor</title>
   </head>