Added ENCM open status

carrismetropolitana · Jan 3, 2024 · feb81c0 · feb81c0
1 parent f59fb9f
commit feb81c0
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 25 deletions.
diff --git a/nextjs/components/FrontendEncm/FrontendEncm.js b/nextjs/components/FrontendEncm/FrontendEncm.js
@@ -1,5 +1,7 @@
 'use client';
 
+/* * */
+
 import styles from './FrontendEncm.module.css';
 import useSWR from 'swr';
 import { useState, useMemo, useEffect } from 'react';
@@ -42,12 +44,12 @@ export default function FrontendEncm() {
   });
 
   //
-  // B. Fetch data
+  // C. Fetch data
 
   const { data: allEncmData, error: allEncmError, isLoading: allEncmLoading } = useSWR('https://api.carrismetropolitana.pt/facilities/encm', { refreshInterval: 30000 });
 
   //
-  // C. Transform data
+  // D. Transform data
 
   const allEncmMapData = useMemo(() => {
     const geoJSON = {
@@ -99,7 +101,7 @@ export default function FrontendEncm() {
   }, [allEncmData, selectedEncmId]);
 
   //
-  // D. Handle actions
+  // E. Handle actions
 
   const handleMapReCenter = () => {
     frontendEncmMap.flyTo({ ...OSMMapDefaults.viewport, duration: 2000 });
@@ -142,7 +144,7 @@ export default function FrontendEncm() {
   };
 
   //
-  // E. Render components
+  // F. Render components
 
   return (
     <Panel type="A" title={t('title')} loading={allEncmLoading} error={allEncmError}>

diff --git a/nextjs/components/FrontendEncmGrid/FrontendEncmGrid.js b/nextjs/components/FrontendEncmGrid/FrontendEncmGrid.js
@@ -1,9 +1,13 @@
 'use client';
 
+/* * */
+
 import styles from './FrontendEncmGrid.module.css';
 import { useMemo } from 'react';
 import FrontendEncmItem from '@/components/FrontendEncmItem/FrontendEncmItem';
 
+/* * */
+
 export default function FrontendEncmGrid({ allEncmData, selectedEncmId, onSelectEncmId }) {
   //
 

diff --git a/nextjs/components/FrontendEncmInfo/FrontendEncmInfo.js b/nextjs/components/FrontendEncmInfo/FrontendEncmInfo.js
@@ -1,9 +1,13 @@
 'use client';
 
+/* * */
+
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import styles from './FrontendEncmInfo.module.css';
 
+/* * */
+
 export default function FrontendEncmInfo() {
   //
 

diff --git a/nextjs/components/FrontendEncmItem/FrontendEncmItem.js b/nextjs/components/FrontendEncmItem/FrontendEncmItem.js
@@ -1,11 +1,15 @@
 'use client';
 
+/* * */
+
 import { useTranslations } from 'next-intl';
 import styles from './FrontendEncmItem.module.css';
 import Loader from '@/components/Loader/Loader';
 import FrontendEncmItemTimetable from '@/components/FrontendEncmItemTimetable/FrontendEncmItemTimetable';
 import FrontendEncmItemOccupation from '@/components/FrontendEncmItemOccupation/FrontendEncmItemOccupation';
 
+/* * */
+
 export default function FrontendEncmItem({ encmData, selectedEncmId, onSelectEncmId }) {
   //
 
@@ -37,7 +41,7 @@ export default function FrontendEncmItem({ encmData, selectedEncmId, onSelectEnc
 
       <FrontendEncmItemTimetable isOpen={encmData.is_open} mon={encmData.hours_monday} tue={encmData.hours_tuesday} wed={encmData.hours_wednesday} thu={encmData.hours_thursday} fri={encmData.hours_friday} sat={encmData.hours_saturday} sun={encmData.hours_sunday} />
 
-      <FrontendEncmItemOccupation currentlyWaiting={encmData.currently_waiting} expectedWaitTime={encmData.expected_wait_time} activeCounters={encmData.active_counters} />
+      {encmData.is_open && <FrontendEncmItemOccupation currentlyWaiting={encmData.currently_waiting} expectedWaitTime={encmData.expected_wait_time} activeCounters={encmData.active_counters} />}
     </div>
   ) : (
     <Loader visible />

diff --git a/nextjs/components/FrontendEncmItemOccupation/FrontendEncmItemOccupation.js b/nextjs/components/FrontendEncmItemOccupation/FrontendEncmItemOccupation.js
@@ -1,10 +1,14 @@
 'use client';
 
+/* * */
+
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import styles from './FrontendEncmItemOccupation.module.css';
 import LiveIcon from '@/components/LiveIcon/LiveIcon';
 
+/* * */
+
 export default function FrontendEncmItemOccupation({ currentlyWaiting, expectedWaitTime, activeCounters, isOpen }) {
   //
 

diff --git a/nextjs/components/FrontendEncmItemTimetable/FrontendEncmItemTimetable.js b/nextjs/components/FrontendEncmItemTimetable/FrontendEncmItemTimetable.js
@@ -1,9 +1,13 @@
 'use client';
 
+/* * */
+
 import { useTranslations } from 'next-intl';
 import styles from './FrontendEncmItemTimetable.module.css';
 import { useEffect, useState } from 'react';
 
+/* * */
+
 export default function FrontendEncmItemTimetable({ isOpen, mon, tue, wed, thu, fri, sat, sun }) {
   //
 
@@ -66,7 +70,7 @@ export default function FrontendEncmItemTimetable({ isOpen, mon, tue, wed, thu,
           <p className={styles.hours}>{item.hours}</p>
         </div>
       ))}
-      {/* {isOpen ? <p className={styles.isOpen}>{t('is_open')}</p> : <p className={styles.isClosed}>{t('is_closed')}</p>} */}
+      {isOpen ? <p className={styles.isOpen}>{t('is_open')}</p> : <p className={styles.isClosed}>{t('is_closed')}</p>}
     </div>
   );
 

diff --git a/nextjs/components/FrontendEncmMap/FrontendEncmMap.js b/nextjs/components/FrontendEncmMap/FrontendEncmMap.js
@@ -1,29 +1,33 @@
 'use client';
 
+/* * */
+
 import OSMMap from '@/components/OSMMap/OSMMap';
 import { useEffect } from 'react';
 import { useMap, Source, Layer, Popup } from 'react-map-gl/maplibre';
 import FrontendEncmMapPopup from '@/components/FrontendEncmMapPopup/FrontendEncmMapPopup';
 
+/* * */
+
 export default function FrontendEncmMap({ allEncmMapData, selectedEncmMapData, selectedMapStyle, selectedMapFeature, onSelectEncmId }) {
   //
 
   //
   // A. Setup variables
 
-  const { FrontendEncmMap } = useMap();
+  const { frontendEncmMap } = useMap();
 
   //
-  // C. Handle actions
+  // B. Transform data
 
   useEffect(() => {
-    if (!FrontendEncmMap) return;
-    // Load stop idle symbol
-    FrontendEncmMap.loadImage('/icons/map-encm-idle.png', (error, image) => {
+    if (!frontendEncmMap) return;
+    // Load stop open symbol
+    frontendEncmMap.loadImage('/icons/map-encm-open.png', (error, image) => {
       if (error) throw error;
-      FrontendEncmMap.addImage('encm-idle', image, { sdf: false });
+      frontendEncmMap.addImage('encm-open', image, { sdf: false });
     });
-  }, [FrontendEncmMap]);
+  }, [frontendEncmMap]);
 
   //
   // C. Handle actions
@@ -40,33 +44,33 @@ export default function FrontendEncmMap({ allEncmMapData, selectedEncmMapData, s
 
   const handleMapMouseEnter = (event) => {
     if (event?.features[0]?.properties?.id) {
-      FrontendEncmMap.getCanvas().style.cursor = 'pointer';
+      frontendEncmMap.getCanvas().style.cursor = 'pointer';
     }
   };
 
   const handleMapMouseLeave = (event) => {
     if (event?.features[0]?.properties?.id) {
-      FrontendEncmMap.getCanvas().style.cursor = 'default';
+      frontendEncmMap.getCanvas().style.cursor = 'default';
     }
   };
 
   const handleMapMove = () => {
     if (selectedMapFeature) {
       // Get all currently rendered features and mark all of them as unselected
-      const allRenderedFeatures = FrontendEncmMap.queryRenderedFeatures();
+      const allRenderedFeatures = frontendEncmMap.queryRenderedFeatures();
       allRenderedFeatures.forEach(function (f) {
-        FrontendEncmMap.setFeatureState({ source: 'all-encm', id: f.id }, { selected: false });
+        frontendEncmMap.setFeatureState({ source: 'all-encm', id: f.id }, { selected: false });
       });
       // Then mark the selected one as selected
-      FrontendEncmMap.setFeatureState({ source: 'all-encm', id: selectedMapFeature.properties.mapid }, { selected: true });
+      frontendEncmMap.setFeatureState({ source: 'all-encm', id: selectedMapFeature.properties.mapid }, { selected: true });
     }
   };
 
   //
-  // G. Render components
+  // D. Render components
 
   return (
-    <OSMMap id="FrontendEncmMap" mapStyle={selectedMapStyle} onClick={handleMapClick} onMouseEnter={handleMapMouseEnter} onMouseLeave={handleMapMouseLeave} onMove={handleMapMove} interactiveLayerIds={['all-encm']}>
+    <OSMMap id="frontendEncmMap" mapStyle={selectedMapStyle} onClick={handleMapClick} onMouseEnter={handleMapMouseEnter} onMouseLeave={handleMapMouseLeave} onMove={handleMapMove} interactiveLayerIds={['all-encm']}>
       {selectedEncmMapData && (
         <Popup onClose={handlePopupClose} closeButton={false} closeOnClick={false} latitude={selectedEncmMapData.geometry.coordinates[1]} longitude={selectedEncmMapData.geometry.coordinates[0]} anchor="bottom">
           <FrontendEncmMapPopup encmData={selectedEncmMapData.properties} onSelectEncmId={onSelectEncmId} />
@@ -84,7 +88,7 @@ export default function FrontendEncmMap({ allEncmMapData, selectedEncmMapData, s
               'icon-anchor': 'center',
               'symbol-placement': 'point',
               'icon-rotation-alignment': 'map',
-              'icon-image': 'encm-idle',
+              'icon-image': 'encm-open',
               'icon-size': ['interpolate', ['linear', 0.5], ['zoom'], 5, 0.1, 20, 0.25],
               'icon-offset': [0, 0],
             }}
@@ -93,4 +97,6 @@ export default function FrontendEncmMap({ allEncmMapData, selectedEncmMapData, s
       )}
     </OSMMap>
   );
+
+  //
 }
diff --git a/nextjs/package.json b/nextjs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@carrismetropolitana/website",
-    "version": "2023.12.18-0928",
+    "version": "2024.01.03-1519",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -51,4 +51,4 @@
         "postcss-simple-vars": "7.0.1",
         "typescript": "5.3.3"
     }
-}
+}
diff --git a/nextjs/public/icons/map-encm-idle.png → nextjs/public/icons/map-encm-open.png b/nextjs/public/icons/map-encm-idle.png → nextjs/public/icons/map-encm-open.png
diff --git a/nextjs/translations/pt.json b/nextjs/translations/pt.json
@@ -711,8 +711,8 @@
         "fri": "Sex",
         "sat": "Sab",
         "sun": "Dom",
-        "is_open": "Aberto",
-        "is_closed": "Fechado"
+        "is_open": "Aberto Agora",
+        "is_closed": "Fechado / Completo"
     },
     "FrontendEncmItemOccupation": {
         "title": "Informação em Tempo Real",