Merge pull request #855 from stadtnavi/feat/public-pois-details

feat(poi-content): add poi details to sidebar

app/component/map/popups/OSMOpeningHours.js

@@ -91,7 +91,9 @@ export default class OSMOpeningHours extends React.Component {
   getCurrentOpeningTime = opening => {
     const openingTable = opening.getTable();
     const currentDay = this.weekdays[moment().isoWeekday() - 1];
-    return openingTable[currentDay];
+    return Array.isArray(openingTable[currentDay])
+      ? openingTable[currentDay].join(' ')
+      : openingTable[currentDay];
   };
 
   getDropDownButton = () => {

app/component/map/sidebar/PublicPoiContent.js

@@ -1,21 +1,115 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { intlShape } from 'react-intl';
+import { intlShape, FormattedMessage } from 'react-intl';
 import SidebarContainer from './SidebarContainer';
+import Icon from '../../Icon';
+import OSMOpeningHours from '../popups/OSMOpeningHours';
 import { getLayerByCode } from '../../../util/mapLayerUtils';
 
 const PublicPoiContent = ({ match }, { intl, config }) => {
-  const { code, name } = match.location.query;
+  const {
+    lat,
+    lng: lon,
+    code,
+    name,
+    address,
+    openingHours,
+    phone,
+    website,
+    wheelchair,
+    dog,
+    outdoorSeating,
+    internetAccess,
+  } = match.location.query;
 
   const layer = getLayerByCode(code, config);
+
+  if (!layer) {
+    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 svg = layer?.properties?.icon?.svg;
 
   return (
     <SidebarContainer
       name={layer.translations[intl.locale] || layer.translations.en}
       description={name}
       dataURI={svg ? `data:image/svg+xml;base64,${btoa(svg)}` : undefined}
-    />
+      location={{ lat, lon, address, name }}
+    >
+      <div className="content">
+        {(address || phone || website) && <div className="divider" />}
+        {address && (
+          <div className="text-light sidebar-info-container">
+            <Icon className="sidebar-info-icon" img="icon-icon_place" />
+            <span className="text-alignment">{address}</span>
+            <br />
+            <br />
+          </div>
+        )}
+        {phone && (
+          <div className="text-light sidebar-info-container">
+            <Icon className="sidebar-info-icon" img="icon-icon_phone" />
+            <span className="text-alignment">
+              <a href={`tel:${phone}`}>{phone}</a>
+            </span>
+            <br />
+            <br />
+          </div>
+        )}
+        {website && (
+          <div className="text-light sidebar-info-container">
+            <Icon className="sidebar-info-icon" img="icon-icon_website" />
+            <span className="text-alignment">
+              <a target="_blank" rel="noopener noreferrer" href={website}>
+                {website}
+              </a>
+            </span>
+            <br />
+            <br />
+          </div>
+        )}
+        {openingHours && (
+          <>
+            <div className="divider" />
+            <div className="text-light sidebar-info-container">
+              <OSMOpeningHours openingHours={openingHours} displayStatus />
+            </div>
+          </>
+        )}
+        <>
+          {[
+            accessibilityMessageId,
+            outdoorSeatingMessageId,
+            dogsAllowedMessageId,
+            internetAccessMessageId,
+          ]
+            .filter(Boolean)
+            .map((messageId, index) => (
+              <>
+                {index === 0 && <div className="divider" />}
+                <div
+                  key={messageId}
+                  className="text-light sidebar-info-container"
+                >
+                  <span className="text-alignment">
+                    <FormattedMessage id={messageId} />
+                  </span>
+                </div>
+              </>
+            ))}
+          <br />
+        </>
+      </div>
+    </SidebarContainer>
   );
 };
 

app/component/map/tile-layer/TileLayerContainer.js

@@ -257,6 +257,14 @@ class TileLayerContainer extends GridLayer {
         const {
           category3: code,
           name,
+          address,
+          opening_hours: openingHours,
+          phone,
+          website,
+          wheelchair,
+          dog,
+          outdoor_seating: outdoorSeating,
+          internet_access: internetAccess,
         } = selectableTargets[0].feature.properties;
 
         const params = pickBy(
@@ -265,6 +273,14 @@ class TileLayerContainer extends GridLayer {
             lng,
             code,
             name,
+            address,
+            openingHours,
+            phone,
+            website,
+            wheelchair,
+            dog,
+            outdoorSeating,
+            internetAccess,
           },
           value => value !== undefined,
         );

app/translations.js

@@ -1312,7 +1312,11 @@ const translations = {
     yesterday: 'Gestern',
     zone: 'Tarifzone',
     zones: 'Tarifzonen',
-    'book-on-demand-taxi': 'Fahrt buchen'
+    'book-on-demand-taxi': 'Fahrt buchen',
+    'poi-tag-wheelchair': 'Rollstuhlgerecht',
+    'poi-tag-outdoor-seating': 'Sitzplätze im Freien',
+    'poi-tag-dogs-allowed': 'Hunde erlaubt',
+    'poi-tag-wifi': 'WLAN',
   },
 
   en: {
@@ -2337,6 +2341,10 @@ const translations = {
     'zone-info': 'Zone {zone}',
     'zone-unknown': 'Unknown zone',
     zones: 'Fare zones',
+    'poi-tag-wheelchair': 'Wheelchair accessible',
+    'poi-tag-outdoor-seating': 'Outdoor seating',
+    'poi-tag-dogs-allowed': 'Dogs allowed',
+    'poi-tag-wifi': 'WiFi',
   },
 
   es: {