Merge pull request #865 from stadtnavi/feat/poi-details

feat(poi-content): add more tags to details
stadtnavi · Dec 20, 2024 · 6f1b401 · 6f1b401
2 parents 06921b7 + 6c936df
commit 6f1b401
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 42 deletions.
diff --git a/app/component/map/sidebar/PublicPoiContent.js b/app/component/map/sidebar/PublicPoiContent.js
@@ -13,13 +13,15 @@ const PublicPoiContent = ({ match }, { intl, config }) => {
     code,
     name,
     address,
-    openingHours,
+    opening_hours: openingHours,
     phone,
     website,
     wheelchair,
     dog,
-    outdoorSeating,
-    internetAccess,
+    outdoor_seating: outdoorSeating,
+    internet_access: internetAccess,
+    operator,
+    brand,
   } = match.location.query;
 
   const layer = getLayerByCode(code, config);
@@ -28,13 +30,45 @@ const PublicPoiContent = ({ match }, { intl, config }) => {
     return null;
   }
 
-  const accessibilityMessageId =
-    wheelchair === 'yes' ? 'poi-tag-wheelchair' : null;
-  const outdoorSeatingMessageId =
-    outdoorSeating === 'yes' ? 'poi-tag-outdoor-seating' : null;
-  const dogsAllowedMessageId = dog === 'yes' ? 'poi-tag-dogs-allowed' : null;
-  const internetAccessMessageId =
-    internetAccess === 'wlan' ? 'poi-tag-wifi' : null;
+  const accessibilityMessage =
+    wheelchair === 'yes'
+      ? {
+          message: <FormattedMessage id="poi-tag-wheelchair" />,
+          key: 'wheelchair',
+        }
+      : null;
+  const outdoorSeatingMessage =
+    outdoorSeating === 'yes'
+      ? {
+          message: <FormattedMessage id="poi-tag-outdoor-seating" />,
+          key: 'outdoor_seating',
+        }
+      : null;
+  const dogsAllowedMessage =
+    dog === 'yes'
+      ? {
+          message: <FormattedMessage id="poi-tag-dogs-allowed" />,
+          key: 'dogs-allowed',
+        }
+      : null;
+  const internetAccessMessage =
+    internetAccess === 'wlan'
+      ? { message: <FormattedMessage id="poi-tag-wifi" />, key: 'wifi' }
+      : null;
+  const operatorMessage = operator
+    ? {
+        message: (
+          <FormattedMessage id="poi-tag-operator" values={{ operator }} />
+        ),
+        key: 'operator',
+      }
+    : null;
+  const brandMessage = brand
+    ? {
+        message: <FormattedMessage id="poi-tag-brand" values={{ brand }} />,
+        key: 'brand',
+      }
+    : null;
 
   const svg = layer?.properties?.icon?.svg;
 
@@ -87,22 +121,19 @@ const PublicPoiContent = ({ match }, { intl, config }) => {
         )}
         <>
           {[
-            accessibilityMessageId,
-            outdoorSeatingMessageId,
-            dogsAllowedMessageId,
-            internetAccessMessageId,
+            accessibilityMessage,
+            outdoorSeatingMessage,
+            dogsAllowedMessage,
+            internetAccessMessage,
+            operatorMessage,
+            brandMessage,
           ]
             .filter(Boolean)
-            .map((messageId, index) => (
+            .map(({ message, key }, index) => (
               <>
                 {index === 0 && <div className="divider" />}
-                <div
-                  key={messageId}
-                  className="text-light sidebar-info-container"
-                >
-                  <span className="text-alignment">
-                    <FormattedMessage id={messageId} />
-                  </span>
+                <div key={key} className="text-light sidebar-info-container">
+                  <span className="text-alignment">{message}</span>
                 </div>
               </>
             ))}

diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js
@@ -15,7 +15,10 @@ import { mapLayerShape } from '../../../store/MapLayerStore';
 import MarkerSelectPopup from './MarkerSelectPopup';
 import LocationPopup from '../popups/LocationPopup';
 import TileContainer from './TileContainer';
-import { isFeatureLayerEnabled } from '../../../util/mapLayerUtils';
+import {
+  isFeatureLayerEnabled,
+  getLayerByCode,
+} from '../../../util/mapLayerUtils';
 import RealTimeInformationStore from '../../../store/RealTimeInformationStore';
 import PreferencesStore from '../../../store/PreferencesStore';
 import { addAnalyticsEvent } from '../../../util/analyticsUtils';
@@ -186,6 +189,7 @@ class TileLayerContainer extends GridLayer {
         leaflet: { map },
         mapLayers,
       } = this.props;
+      const { config, intl } = this.context;
       const { coords: prevCoords } = this.state;
       const popup = map._popup; // eslint-disable-line no-underscore-dangle
       // navigate to citybike stop page if single stop is clicked
@@ -254,33 +258,31 @@ class TileLayerContainer extends GridLayer {
       ) {
         const { lat, lon: lng } = selectableTargets[0].coords;
 
-        const {
-          category3: code,
-          name,
-          address,
-          opening_hours: openingHours,
-          phone,
-          website,
-          wheelchair,
-          dog,
-          outdoor_seating: outdoorSeating,
-          internet_access: internetAccess,
-        } = selectableTargets[0].feature.properties;
+        const { properties } = selectableTargets[0].feature;
+
+        const { category3: code, name, address, website, phone } = properties;
+
+        const layer = getLayerByCode(code, config);
+
+        const detailsProperties = { ...properties };
+
+        // Filter out properties that are not in the layer's attributes
+        Object.keys(detailsProperties).forEach(key => {
+          if (!layer?.properties?.attributes?.includes(key)) {
+            delete detailsProperties[key];
+          }
+        });
 
         const params = pickBy(
           {
+            ...detailsProperties,
             lat,
             lng,
             code,
-            name,
+            name: name || layer.translations[intl.locale],
             address,
-            openingHours,
-            phone,
             website,
-            wheelchair,
-            dog,
-            outdoorSeating,
-            internetAccess,
+            phone,
           },
           value => value !== undefined,
         );

diff --git a/app/translations.js b/app/translations.js
@@ -1317,6 +1317,8 @@ const translations = {
     'poi-tag-outdoor-seating': 'Sitzplätze im Freien',
     'poi-tag-dogs-allowed': 'Hunde erlaubt',
     'poi-tag-wifi': 'WLAN',
+    'poi-tag-operator': 'Betreiber: {operator}',
+    'poi-tag-brand': 'Marke: {brand}',
   },
 
   en: {
@@ -2345,6 +2347,8 @@ const translations = {
     'poi-tag-outdoor-seating': 'Outdoor seating',
     'poi-tag-dogs-allowed': 'Dogs allowed',
     'poi-tag-wifi': 'WiFi',
+    'poi-tag-operator': 'Operator: {operator}',
+    'poi-tag-brand': 'Brand: {brand}',
   },
 
   es: {