Merge pull request #13 from degenoah/master

fix: add null checks to prevent searchUnits() breaking from a unit with no element.
owlmaps · Apr 1, 2024 · 9fb7a70 · 9fb7a70
2 parents 245f3ed + 29abd45
commit 9fb7a70
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 195 deletions.
diff --git a/src/helper.ts b/src/helper.ts
@@ -1,4 +1,4 @@
-import { UnitData, UnitMap, GeosData } from './types';
+import { UnitData, UnitPosition, UnitMap, GeosData } from './types';
 
 export const dateKey2dateString = (dateKey: any): string => {
   const pattern = /(\d{4})(\d{2})(\d{2})/;
@@ -46,103 +46,85 @@ export const prepareGeosData = (data: GeosData) => {
 
 export const prepareUnitData = (data: UnitData, unit_map: UnitMap) => {
   const unitCollections: any = [];
-  const uaUnitFeatures: any = [];
-  const ruUnitFeatures: any = [];
-  // ua units
-  if (Array.isArray(data.ua) && data.ua.length > 0) {
-    for (let i = 0; i < data.ua.length; i++) {
-      const unitData = data.ua[i];
-      const unitId = unitData[0];
-      const unitCoordinates = unitData[1];
-      let unitName = 'Unknown';
-      let unitSIDC = '30000000000000000000'; // fallback
-      let unitSIDCText = '';
 
-      if (unit_map.hasOwnProperty(unitId)) {
-        const aUnitData = unit_map[unitId];
-        if (aUnitData.hasOwnProperty('n') && aUnitData.n !== undefined) {
-          unitName = aUnitData.n;
-        }
-        if (aUnitData.hasOwnProperty('sidc') && aUnitData.sidc !== undefined) {
-          unitSIDC = aUnitData.sidc;
-        }
-        if (aUnitData.hasOwnProperty('sidc_custom_text') && aUnitData.sidc_custom_text !== undefined) {
-          unitSIDCText = aUnitData.sidc_custom_text;
+  /**
+   * Helper function for populating `unitCollections` with features.
+   * @param units A list of units and their positions.
+   * @param unitSide Shorthand for the unit sides.
+   */
+  const _populateUnitFeatures = (
+    units: UnitPosition[],
+    unitSide: string
+  ) => {
+    const unitFeatures: any = [];
+
+    if (Array.isArray(units) && units.length > 0) {
+      for (let i = 0; i < units.length; i++) {
+        const unitData = units[i];
+        const unitId = unitData[0];
+        const unitCoordinates = unitData[1];
+        let unitName = 'Unknown';
+        let unitSIDC = '30000000000000000000'; // fallback
+        let unitSIDCText = '';
+
+        if (unit_map.hasOwnProperty(unitId)) {
+          const aUnitData = unit_map[unitId];
+
+          if (
+            aUnitData.hasOwnProperty('n') && 
+            aUnitData.n !== undefined
+          ) {
+            unitName = aUnitData.n;
+          }
+
+          if (
+            aUnitData.hasOwnProperty('sidc') && 
+            aUnitData.sidc !== undefined
+          ) {
+            unitSIDC = aUnitData.sidc;
+          }
+
+          if (
+            aUnitData.hasOwnProperty('sidc_custom_text') && 
+            aUnitData.sidc_custom_text !== undefined
+          ) {
+            unitSIDCText = aUnitData.sidc_custom_text;
+          }
         }
+
+        unitFeatures.push({
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: unitCoordinates,
+          },
+          properties: {
+            unitId: unitId,
+            unitName: unitName,
+            unitSide: unitSide,
+            unitSIDC: unitSIDC,
+            unitSIDCText: unitSIDCText
+          },
+        });
       }
-      uaUnitFeatures.push({
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: unitCoordinates,
-        },
-        properties: {
-          unitId: unitId,
-          unitName: unitName,
-          unitSide: 'ua',
-          unitSIDC: unitSIDC,
-          unitSIDCText: unitSIDCText
-        },
-      });
     }
-  }
-  if (uaUnitFeatures.length > 0) {
-    const uaFeatureCollection = {
-      type: 'FeatureCollection',
-      features: uaUnitFeatures,
-    };
-    unitCollections.push(uaFeatureCollection);
-  } else {
-    unitCollections.push(null);
-  }
-  // ru inits
-  if (Array.isArray(data.ru) && data.ru.length > 0) {
-    for (let i = 0; i < data.ru.length; i++) {
-      const unitData = data.ru[i];
-      const unitId = unitData[0];
-      const unitCoordinates = unitData[1];
-      let unitName = 'Unknown';
-      let unitSIDC = '30000000000000000000'; // fallback
-      let unitSIDCText = '';
 
-      if (unit_map.hasOwnProperty(unitId)) {
-        const aUnitData = unit_map[unitId];
-        if (aUnitData.hasOwnProperty('n') && aUnitData.n !== undefined) {
-          unitName = aUnitData.n;
-        }
-        if (aUnitData.hasOwnProperty('sidc') && aUnitData.sidc !== undefined) {
-          unitSIDC = aUnitData.sidc;
-        }
-        if (aUnitData.hasOwnProperty('sidc_custom_text') && aUnitData.sidc_custom_text !== undefined) {
-          unitSIDCText = aUnitData.sidc_custom_text;
-        }        
+    if (unitFeatures.length > 0) {
+      const featureCollection = {
+        type: 'FeatureCollection',
+        features: unitFeatures,
       }
 
-      ruUnitFeatures.push({
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: unitCoordinates,
-        },
-        properties: {
-          unitId: unitId,
-          unitName: unitName,
-          unitSide: 'ru',
-          unitSIDC: unitSIDC,
-          unitSIDCText: unitSIDCText
-        },
-      });
+      unitCollections.push(featureCollection);
+    } else {
+      console.error('failed to create unit features!!!');
+      unitCollections.push(null);
     }
-  }
-  if (ruUnitFeatures.length > 0) {
-    const ruFeatureCollection = {
-      type: 'FeatureCollection',
-      features: ruUnitFeatures,
-    };
-    unitCollections.push(ruFeatureCollection);
-  } else {
-    unitCollections.push(null);
-  }
+  };
+
+  // Create unit features.
+  _populateUnitFeatures(data.ua, 'ua');
+  _populateUnitFeatures(data.ru, 'ru');
 
   return unitCollections;
 };

diff --git a/src/main.ts b/src/main.ts
@@ -80,19 +80,57 @@ class MapViewer {
     // set date input to correct date
     this.updateDateInput();
 
-    // add listener
+    // add listeners
     this.addTimelineControlListener();
     this.addMapZoomListener();
     this.addMapMoveListener();
     this.addSearchInputListener();
 
+    // 
     // add toggle buttons
-    this.addTimelineControlToggle();
-    this.addFortificationsToggle();
-    this.addDragonTeethToggle();
-    this.addUnitsToggle();
-    this.addGeosToggle();
-    this.addUnitLabelToggle();
+    // 
+
+    this.addToggleButton(
+      this.toggleTimelineControl,
+      'Toggle Timeline Controls',
+      'timeline-toggle-button',
+      this.layer_status.timeline
+    );
+
+    this.addToggleButton(
+      this.toggleFortificationsLayer,
+      'Toggle Fortifications',
+      'fortifications-toggle-button',
+      this.layer_status.fortifications
+    );
+
+    this.addToggleButton(
+      this.toggleDragonTeethLayer,
+      'Toggle Dragon Teeth',
+      'dragonteeth-toggle-button',
+      this.layer_status.dragon_teeth
+    );
+
+    this.addToggleButton(
+      this.toggleUnitsLayer,
+      'Toggle Units',
+      'units-toggle-button',
+      this.layer_status.units
+    );
+
+    this.addToggleButton(
+      this.toggleGeosLayer,
+      'Toggle Geolocations',
+      'geolocations-toggle-button',
+      this.layer_status.geos
+    );
+
+    this.addToggleButton(
+      this.toggleUnitLabels,
+      'Toggle Unit Labels permanently on (at zoomlevel >= 11)',
+      'unitlabels-toggle-button',
+      this.showPermanentUnitLabels
+    );
 
     // fetch latest data
     await this.fetchData();
@@ -259,62 +297,24 @@ class MapViewer {
   // Toggle Buttons Setup
   //=================================================
 
-  addTimelineControlToggle = () => {
-    const timelineToggleButton = mapper.createTimelineToggleButton(
-      () => this.toggleTimelineControl(),
-      this.layer_status.timeline
+  /**
+   * Creates a button for toggling map features.
+   * @param callbackFn The callback function.
+   * @param title The button title.
+   * @param cls The button dom class.
+   * @param initialStatus The initial state of the button.
+   */
+  addToggleButton = (
+    callbackFn: Function,
+    title: string,
+    cls: string,
+    initialStatus: boolean
+  ) => {
+    const toggleButton = mapper.createToggleButton(
+      () => callbackFn(), title, cls, initialStatus
     );
-    timelineToggleButton.addTo(this.map);
-  };
 
-  addFortificationsToggle = () => {
-    const fortificationsToggleButton = mapper.createToogleLayerButton(
-      () => this.toggleFortificationsLayer(),
-      'Toggle Fortifications',
-      'fortifications-toggle-button',
-      this.layer_status.fortifications
-    );
-    fortificationsToggleButton.addTo(this.map);
-  };
-
-  addDragonTeethToggle = () => {
-    const dragonTeethToggleButton = mapper.createToogleLayerButton(
-      () => this.toggleDragonTeethLayer(),
-      'Toggle Dragon Teeth',
-      'dragonteeth-toggle-button',
-      this.layer_status.dragon_teeth
-    );
-    dragonTeethToggleButton.addTo(this.map);
-  };
-
-  addUnitsToggle = () => {
-    const unitsToggleButton = mapper.createToogleLayerButton(
-      () => this.toggleUnitsLayer(),
-      'Toggle Units',
-      'units-toggle-button',
-      this.layer_status.units
-    );
-    unitsToggleButton.addTo(this.map);
-  };
-
-  addGeosToggle = () => {
-    const geosToggleButton = mapper.createToogleLayerButton(
-      () => this.toggleGeosLayer(),
-      'Toggle Geolocations',
-      'geolocations-toggle-button',
-      this.layer_status.geos
-    );
-    geosToggleButton.addTo(this.map);
-  };
-
-  addUnitLabelToggle = () => {
-    const unitLabelsToggleButton = mapper.createToogleLayerButton(
-      () => this.toggleUnitLabels(),
-      'Toggle Unit Labels permanently on (at zoomlevel >= 11)',
-      'unitlabels-toggle-button',
-      this.showPermanentUnitLabels
-    );
-    unitLabelsToggleButton.addTo(this.map);
+    toggleButton.addTo(this.map);
   };
 
   //=================================================
@@ -773,6 +773,7 @@ class MapViewer {
   //---------------------------------------------------------
 
   createUnitLayers = () => {
+    /// BUG: Something might be broken here, related to issue #12.
     if (this.baseData === null) {
       return;
     }
@@ -954,11 +955,11 @@ class MapViewer {
             .includes(current_search_string)
         ) {
           elem?.classList.add('hide');
-          const tooltipClass = elem.getAttribute('aria-describedby');
+          const tooltipClass = elem?.getAttribute('aria-describedby');
           document.getElementById(tooltipClass)?.classList.add('hide');
         } else {
           elem?.classList.remove('hide');
-          const tooltipClass = elem.getAttribute('aria-describedby');
+          const tooltipClass = elem?.getAttribute('aria-describedby');
           document.getElementById(tooltipClass)?.classList.remove('hide');
         }
       });