Merge pull request #41 from helsingborg-stad/feat/osm-v2

feat!: osm v2

Public.php

@@ -7,6 +7,7 @@
 if (!function_exists('open_street_map_render_blade_view')) {
     function open_street_map_render_blade_view($view, $data = [], $compress = true)
     {
+        $markup = '';
         $componentLibrary = new ComponentLibraryInit([]);
         $bladeEngine = $componentLibrary->getEngine();
         $data = array_merge($data, array('errorMessage' => false));

modularity-open-street-map.php

@@ -4,7 +4,7 @@
  * Plugin Name:       Modularity Open Street Map
  * Plugin URI:        https://github.com/NiclasNorin/modularity-open-street-map
  * Description:       A map based of OSM.
- * Version: 2.1.3
+ * Version: 2.1.3
  * Author:            Niclas Norin
  * Author URI:        https://github.com/NiclasNorin
  * License:           MIT
@@ -24,6 +24,9 @@
 define('MODULARITYOPENSTREETMAP_VIEW_PATH', MODULARITYOPENSTREETMAP_PATH . 'views/');
 define('MODULARITYOPENSTREETMAP_MODULE_VIEW_PATH', MODULARITYOPENSTREETMAP_PATH . 'source/php/Module/views');
 
+// Endpoint address
+define('OSM_ENDPOINT', 'osm/v1/');
+
 require_once MODULARITYOPENSTREETMAP_PATH . 'Public.php';
 
 // Register the autoloader

package.json

@@ -34,6 +34,8 @@
         "postcss-loader": "^6.2.1",
         "sass": "^1.49.7",
         "sass-loader": "^12.4.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.5.3",
         "webpack": "^5.68.0",
         "webpack-bundle-analyzer": "^4.5.0",
         "webpack-cli": "^4.9.2",
@@ -58,4 +60,4 @@
         "leaflet": "^1.9.3",
         "leaflet.markercluster": "^1.5.3"
     }
-}
+}

source/js/main.ts

@@ -0,0 +1,47 @@
+import { StorageInterface } from "./storageInterface";
+import TaxonomySelectUpdater from "./taxonomySelectUpdater";
+
+class Main {
+    constructor(
+        private acf: any, 
+        private postTypeSelectFieldKey: string, 
+        private filterSelectFieldKey: string, 
+        private storageInstance: StorageInterface, 
+        private taxonomySelectUpdaterInstance: TaxonomySelectUpdater
+    ) {
+        const postTypeSelect = document.querySelector(`[data-key="${this.postTypeSelectFieldKey}"] select`) as HTMLSelectElement|undefined;
+
+        if (postTypeSelect) {
+            if (postTypeSelect.value) {
+                this.taxonomySelectUpdaterInstance.updateExistsingRows(postTypeSelect.value);
+            }
+
+            this.listenForPostTypeChanges(postTypeSelect);
+            this.listenForFilterRowsAdded(postTypeSelect);
+        }
+    }
+
+    private listenForPostTypeChanges(postTypeSelect: HTMLSelectElement): void {
+        postTypeSelect.addEventListener('change', (event) => {
+            const selectedValue = (event.target as HTMLSelectElement).value;
+            this.taxonomySelectUpdaterInstance.updateExistsingRows(selectedValue);
+        });
+    }
+
+    private listenForFilterRowsAdded(postTypeSelect: HTMLSelectElement): void
+    {
+        this.acf.addAction('append', ( jqueryEl: any ) => {
+            if (!jqueryEl.hasOwnProperty(0)) {
+                return;
+            }
+
+            const selectField = jqueryEl[0].querySelector(`[data-key="${this.filterSelectFieldKey}"] select`);
+
+            if (selectField) {
+                this.taxonomySelectUpdaterInstance.addSelectFieldOptions(selectField, 0, this.storageInstance.getTaxonomies(postTypeSelect.value), []);
+            }
+        });
+    }
+}
+
+export default Main;

source/js/modularity-open-street-map.js

@@ -0,0 +1,31 @@
+import TaxonomySelectUpdater from "./taxonomySelectUpdater";
+import Storage from "./storage";
+import Main from "./main";
+
+document.addEventListener('DOMContentLoaded', function() {
+    const filterSelectFieldKey = 'field_668d1cc80d853';
+    const postTypeSelectFieldKey = 'field_642a8818a908c';
+
+    if (typeof acf !== 'undefined') {
+        const [taxonomies, selected] = getOsm();
+        const storageInstance = new Storage(taxonomies, selected);
+        const taxonomySelectUpdaterInstance = new TaxonomySelectUpdater(filterSelectFieldKey, storageInstance);
+        new Main(acf, postTypeSelectFieldKey, filterSelectFieldKey, storageInstance, taxonomySelectUpdaterInstance);
+    }
+});
+
+function getOsm() {
+    let parsedData = {};
+    try {
+        parsedData = JSON.parse(osm);
+    } catch (error) {
+        console.error('Error parsing OSM data', error);
+    }
+
+    console.log(parsedData);
+
+    return [
+        parsedData.hasOwnProperty('taxonomies') ? parsedData.taxonomies : [], 
+        parsedData.hasOwnProperty('selected') ? parsedData.selected : []
+    ];
+}

source/js/storage.ts

@@ -0,0 +1,25 @@
+import { StorageInterface } from "./storageInterface";
+class Storage implements StorageInterface {
+    constructor(private taxonomies: { [key: string]: string[] }, private selected: { [key: string]: string[] }) {
+        console.log(this.selected);
+    }
+
+    public getSelected(postType: string): string[] {
+        console.log(this.selected);
+        if (this.selected.hasOwnProperty(postType)) {
+            return this.selected[postType];
+        }
+
+        return [];
+    }
+
+    public getTaxonomies(postType: string): string[] {
+        if (this.taxonomies.hasOwnProperty(postType)) {
+            return this.taxonomies[postType];
+        }
+
+        return [];
+    }
+}
+
+export default Storage;

source/js/storageInterface.ts

@@ -0,0 +1,4 @@
+export interface StorageInterface {
+    getSelected(postType: string): string[];
+    getTaxonomies(postType: string): string[];
+}

source/js/taxonomySelectUpdater.ts

@@ -0,0 +1,36 @@
+import { StorageInterface } from "./storageInterface";
+class TaxonomySelectUpdater {
+
+    constructor(
+        private selectFieldKey: string, 
+        private storage: StorageInterface
+
+    ) {}
+
+    public updateExistsingRows(postType: string): void {
+        const taxonomies = this.storage.getTaxonomies(postType);
+        const selectedValues = this.storage.getSelected(postType);
+
+        [...document.querySelectorAll(`tr.acf-row:not(.acf-clone) [data-key="${this.selectFieldKey}"] select`)].forEach((selectField, index) => {
+            selectField.innerHTML = "";
+            this.addSelectFieldOptions(selectField, index, taxonomies, selectedValues);
+        });
+    }
+
+    public addSelectFieldOptions(
+        selectField: Element,
+        index: number,
+        taxonomies: string[],
+        selectedValues: string[],
+    ): void {
+        for (const key in taxonomies) {
+            const option = document.createElement('option');
+            option.selected = selectedValues[index] && selectedValues[index] === key ? true : false;
+            option.value = key;
+            option.text = taxonomies[key];
+            selectField.appendChild(option);
+        }
+    }
+}
+
+export default TaxonomySelectUpdater;