🐛 [enhancedPOI] Fix Module

Brandjuh · Jul 30, 2020 · 5e99568 · 5e99568
1 parent 93c9a60
commit 5e99568
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 62 deletions.
diff --git a/src/modules/enhancedPOI/main.ts b/src/modules/enhancedPOI/main.ts
@@ -1,16 +1,52 @@
-import { MissionPositionMarkerParam } from '../../../typings/Ingame';
+import { POI } from 'typings/modules/EnhancedPOI';
+import { POIMarker } from 'typings/Ingame';
+import { LayersControlEvent } from 'leaflet';
 
 (async (LSSM: Vue) => {
+    const modifyMarker = (poi: POIMarker, caption: string) => {
+        poi.bindTooltip(caption)
+            .getElement()
+            ?.setAttribute('caption', caption);
+        poi.getElement()?.classList.add('poi');
+    };
+
+    let modifiedMarkers = false;
+
+    const modifyMarkers = () =>
+        LSSM.$store
+            .dispatch('api/request', {
+                url: '/mission_positions',
+            })
+            .then(res => res.json())
+            .then(
+                ({
+                    mission_positions: pois,
+                }: {
+                    mission_positions: POI[] | null;
+                }) => {
+                    if (pois) {
+                        window.map_pois_service
+                            .getMissionPoiMarkersArray()
+                            .forEach(marker => {
+                                const poi = pois.find(p => p.id === marker.id);
+                                if (poi) modifyMarker(marker, poi.caption);
+                            });
+                        modifiedMarkers = true;
+                    }
+                }
+            );
+
+    await modifyMarkers();
+
     await LSSM.$store.dispatch('hook', {
-        // TODO: Wait for Devs to add markers to mission_poi_markers
-        event: 'leafletMissionPositionMarkerAdd',
-        callback(e: MissionPositionMarkerParam) {
-            const poi =
-                window.mission_poi_markers[
-                    window.mission_poi_markers.length - 1
-                ];
-            poi.bindTooltip(e.caption);
-            poi.getElement()?.setAttribute('caption', e.caption);
+        event: 'map_pois_service.leafletMissionPositionMarkerAdd',
+        callback({ caption, id }: POI) {
+            const poi = window.map_pois_service
+                .getMissionPoiMarkersArray()
+                .find(m => m.id === id);
+            if (!poi) return;
+            poi.bindTooltip(caption);
+            poi.getElement()?.setAttribute('caption', caption);
             poi.getElement()?.classList.add('poi');
         },
     });
@@ -30,64 +66,50 @@ import { MissionPositionMarkerParam } from '../../../typings/Ingame';
         }
     };
 
-    const hideIcons = () => {
-        if (isPOIWindow) {
-            (document.querySelectorAll(
-                '.leaflet-marker-icon:not(.poi)'
-            ) as NodeListOf<HTMLImageElement>).forEach(
-                el => (el.style.display = 'none')
-            );
-            window.mission_position_new_marker &&
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                window.mission_position_new_marker._icon &&
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                (window.mission_position_new_marker._icon.style.display = null);
-        }
-    };
+    const poiHighlightedClass = LSSM.$store.getters.nodeAttribute(
+        'poi-highlighted'
+    );
 
-    const showIcons = () => {
-        if (isPOIWindow) {
-            (document.querySelectorAll(
-                '.leaflet-marker-icon:not(.poi)'
-            ) as NodeListOf<HTMLImageElement>).forEach(
-                el => delete el.style.display
-            );
-        }
-    };
+    await LSSM.$store.dispatch('addStyle', {
+        selectorText: `.poi.${poiHighlightedClass}`,
+        style: {
+            filter: 'contrast(500%) brightness(60%) invert(100%)',
+        },
+    });
 
-    const colorMarkers = (caption: string) => {
+    const colorMarkers = (caption: string) =>
         (document.querySelectorAll('.poi') as NodeListOf<
             HTMLImageElement
-        >).forEach(el => delete el.style.display);
-        (document.querySelectorAll(`.poi[caption="${caption}"]`) as NodeListOf<
-            HTMLImageElement
-        >).forEach(
-            el =>
-                (el.style.filter =
-                    'contrast(500%) brightness(60%) invert(100%)')
+        >).forEach(el =>
+            el.classList[
+                el.getAttribute('caption') === caption ? 'add' : 'remove'
+            ](poiHighlightedClass)
         );
-    };
 
     window.map.addEventListener('moveend', resetNewPoiMarker);
-    window.map.addEventListener('zoomend', hideIcons);
+    window.map.addEventListener(
+        'overlayadd',
+        ({ name }: LayersControlEvent) =>
+            !modifiedMarkers && name.match(/app-pois-filter/) && modifyMarkers()
+    );
 
     const observer = new MutationObserver(mutations => {
         mutations.forEach(mutation => {
             const form = (mutation.target as HTMLElement).querySelector(
                 '#new_mission_position'
             );
             if (!form) {
-                showIcons();
                 isPOIWindow = false;
+                (document.querySelectorAll(
+                    `.poi.${poiHighlightedClass}`
+                ) as NodeListOf<HTMLImageElement>).forEach(el =>
+                    el.classList.remove(poiHighlightedClass)
+                );
                 return;
             }
             if (isPOIWindow) return;
             isPOIWindow = true;
 
-            hideIcons();
-
             (document.querySelectorAll(
                 `.lefalet-marker-icon[caption="${
                     document.querySelector(

diff --git a/src/store.ts b/src/store.ts
@@ -68,10 +68,13 @@ export default (Vue: VueConstructor): Store<RootState> => {
             osmBars: {},
         },
         mutations: {
-            addHook(state: RootState, event: string) {
+            addHook(
+                state: RootState,
+                [base, event, fullname]: [unknown, string, string]
+            ) {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                state.hooks[event] = window[event];
+                state.hooks[fullname] = base[event];
             },
             addPrototypeHookBase(state: RootState, base: string) {
                 state.prototypeHooks[base] = {};
@@ -167,10 +170,19 @@ export default (Vue: VueConstructor): Store<RootState> => {
                 { post = true, event, callback = () => null }: Hook
             ) {
                 if (!state.hooks.hasOwnProperty(event)) {
-                    commit('addHook', event);
+                    const split = event.split('.');
+                    const trueEvent = split.pop();
+                    const trueBase = split.reduce(
+                        (previousValue, currentValue) =>
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            (previousValue || window)[currentValue],
+                        window
+                    ) as unknown;
+                    commit('addHook', [trueBase, trueEvent, event]);
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    window[event] = (...args: unknown[]) => {
+                    trueBase[trueEvent] = (...args: unknown[]) => {
                         document.dispatchEvent(
                             new CustomEvent(`lssm_${event}_before`, {
                                 detail: args,

diff --git a/typings/Ingame.d.ts b/typings/Ingame.d.ts
@@ -8,14 +8,6 @@ export interface POIMarker extends Marker {
     id: number;
 }
 
-export interface MissionPositionMarkerParam {
-    caption: string;
-    id: number;
-    longitude: number;
-    latitude: number;
-    icon_path: string;
-}
-
 export interface AllianceChatMessage {
     alliance_admin: string; // Yes, a stringified boolean
     alliance_coadmin: string; // Also a stringified boolean…

diff --git a/typings/helpers.d.ts b/typings/helpers.d.ts
@@ -3,8 +3,9 @@ import { Store } from 'vuex';
 import { BuildingMarker, POIMarker } from './Ingame';
 import Highcharts from 'highcharts';
 import VueI18n from 'vue-i18n';
-import { Map, Marker } from 'leaflet';
+import L, { Map, Marker } from 'leaflet';
 import 'i18n-js';
+import { POI } from './modules/EnhancedPOI';
 
 declare global {
     interface Window {
@@ -18,9 +19,13 @@ declare global {
         alliance_admin: boolean;
         alliance_coadmin: boolean;
         building_markers: BuildingMarker[];
-        mission_poi_markers: POIMarker[];
+        map_pois_service: {
+            getMissionPoiMarkersArray(): POIMarker[];
+            leafletMissionPositionMarkerAdd(poi: POI): void;
+        };
         [PREFIX: string]: Vue | unknown;
         map: Map;
+        L: typeof L;
         mission_position_new_marker?: Marker;
         mission_graphics: [string, string, string][];
         lightboxOpen(link: string): void;

diff --git a/typings/modules/EnhancedPOI.d.ts b/typings/modules/EnhancedPOI.d.ts
@@ -0,0 +1,7 @@
+export interface POI {
+    id: number;
+    caption: string;
+    latitude: number;
+    longitude: number;
+    icon_path: string;
+}