Almost restored to what it once was

carrismetropolitana · Dec 4, 2023 · 345778d · 345778d
1 parent 1d2645b
commit 345778d
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 160 deletions.
diff --git a/frontend/components/LinePatternPath/LinePatternPath.js b/frontend/components/LinePatternPath/LinePatternPath.js
diff --git a/frontend/components/LinePatternPathStop/LinePatternPathStop.js b/frontend/components/LinePatternPathStop/LinePatternPathStop.js
diff --git a/frontend/components/LinesExplorerContent/LinesExplorerContent.js b/frontend/components/LinesExplorerContent/LinesExplorerContent.js
@@ -5,7 +5,8 @@
 import { useTranslations } from 'next-intl';
 import styles from './LinesExplorerContent.module.css';
 import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
-import LinesExplorerContentHeader from '../LinesExplorerContentHeader/LinesExplorerContentHeader';
+import LinesExplorerContentHeader from '@/components/LinesExplorerContentHeader/LinesExplorerContentHeader';
+import LinesExplorerContentPatternPath from '@/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath';
 
 /* * */
 
@@ -26,7 +27,7 @@ export default function LinesExplorerContent() {
     linesExplorerContext?.entities?.line?.id && (
       <div className={styles.container}>
         <LinesExplorerContentHeader />
-        {/* <LinePatternPath /> */}
+        {linesExplorerContext?.entities?.pattern?.id && <LinesExplorerContentPatternPath />}
         {/* <LinePatternMap /> */}
       </div>
     )

diff --git a/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js b/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js
@@ -0,0 +1,34 @@
+'use client';
+
+/* * */
+
+import styles from './LinesExplorerContentPatternPath.module.css';
+import LinePatternPathStop from '@/components/LinesExplorerContentPatternPathStop/LinesExplorerContentPatternPathStop';
+import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
+
+/* * */
+
+export default function LinesExplorerContentPatternPath() {
+  //
+
+  //
+  // A. Setup variables
+
+  const linesExplorerContext = useLinesExplorerContext();
+
+  //
+  // B. Render components
+
+  return (
+    <div className={styles.container}>
+      <div>{linesExplorerContext.entities.pattern.id}</div>
+      {linesExplorerContext.entities.pattern.path?.map((pathStop, pathIndex) => (
+        <div key={pathIndex}>
+          <LinePatternPathStop pathStopData={pathStop} />
+        </div>
+      ))}
+    </div>
+  );
+
+  //
+}
diff --git a/...inePatternPath/LinePatternPath.module.css → ...inesExplorerContentPatternPath.module.css b/...inePatternPath/LinePatternPath.module.css → ...inesExplorerContentPatternPath.module.css
diff --git a/...end/components/LinesExplorerContentPatternPathStop/LinesExplorerContentPatternPathStop.js b/...end/components/LinesExplorerContentPatternPathStop/LinesExplorerContentPatternPathStop.js
@@ -0,0 +1,85 @@
+'use client';
+
+/* * */
+
+import useSWR from 'swr';
+import { useTranslations } from 'next-intl';
+import { useLineFormContext } from '@/forms/LineForm';
+import styles from './LinesExplorerContentPatternPathStop.module.css';
+import CopyBadge from '../CopyBadge/CopyBadge';
+import LinePatternPathSpine from '../LinePatternPathSpine/LinePatternPathSpine';
+import LinePatternPathTimetable from '../LinePatternPathTimetable/LinePatternPathTimetable';
+import { useMemo, useState } from 'react';
+import StopName from '../StopName/StopName';
+import { Space } from '@mantine/core';
+import StopPDF from '../StopPDF/StopPDF';
+import StopRealTime from '../StopRealTime/StopRealTime';
+import LiveIcon from '../LiveIcon/LiveIcon';
+import Text from '../Text/Text';
+import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext';
+
+/* * */
+
+export default function LinesExplorerContentPatternPathStop({ pathStopData }) {
+  //
+
+  //
+  // A. Setup variables
+
+  const t = useTranslations('LinesExplorerContentPatternPathStop');
+  const linesExplorerContext = useLinesExplorerContext();
+  const [isThisStopSelected, setIsThisStopSelected] = useState(false);
+
+  //
+  // B. Handle actions
+
+  const handleStopClick = () => {
+    setIsThisStopSelected((prev) => !prev);
+  };
+
+  //
+  // C. Render components
+
+  return (
+    <div className={`${styles.container} ${isThisStopSelected && styles.selected}`} onClick={handleStopClick}>
+      <div className={styles.travelTime}></div>
+
+      {/* <LinePatternPathSpine style={pathStopData.stop_sequence === 0 ? 'start' : 'regular'} color={linesExplorerContext.entities.pattern.color} text_color={linesExplorerContext.entities.pattern.text_color} isSelected={isThisStopSelected} /> */}
+
+      <div className={styles.info}>
+        <div className={styles.header}>
+          <div>{pathStopData.stop.id}</div>
+          <StopName id={pathStopData.stop.id} name={pathStopData.stop.name} tts_name={pathStopData.stop.tts_name} locality={pathStopData.stop.localiy} municipality={pathStopData.stop.municipality} />
+          {!isThisStopSelected && <StopRealTime pattern_code={linesExplorerContext.entities.pattern.id} stop_code={pathStopData.stop.id} />}
+        </div>
+
+        {isThisStopSelected && (
+          <div className={styles.body}>
+            <Text type="mini-label">Próximas circulações</Text>
+            <StopRealTime pattern_id={linesExplorerContext.entities.pattern.id} stop_id={pathStopData.stop.id} />
+          </div>
+        )}
+
+        {isThisStopSelected && (
+          <div className={styles.body}>
+            <Text type="mini-label">Horários previstos nesta paragem</Text>
+            <LinePatternPathTimetable index={pathStopData.stop_sequence} stopId={pathStopData.stop.id} />
+          </div>
+        )}
+
+        {/* {isThisStopSelected && <StopPDF line_code={lineForm.values.line_code} stop_code={stop_code} direction={linesExplorerContext.entities.pattern.direction} />} */}
+        {/* {isThisStopSelected && (
+            <div className={styles.body}>
+              <div className={styles.ids}>
+                <CopyBadge label={`#${pathStopData.stop.id}`} value={pathStopData.stop.id} />
+                <CopyBadge label={`${pathStopData.stop.latitude}, ${pathStopData.stop.longitude}`} value={`${pathStopData.stop.latitude}	${pathStopData.stop.longitude}`} />
+              </div>
+              <LinePatternPathTimetable index={index} stop_code={stop_code} />
+            </div>
+          )} */}
+      </div>
+    </div>
+  );
+
+  //
+}
diff --git a/...rnPathStop/LinePatternPathStop.module.css → ...ExplorerContentPatternPathStop.module.css b/...rnPathStop/LinePatternPathStop.module.css → ...ExplorerContentPatternPathStop.module.css
diff --git a/frontend/components/LinesExplorerContentSelectPattern/LinesExplorerContentSelectPattern.js b/frontend/components/LinesExplorerContentSelectPattern/LinesExplorerContentSelectPattern.js
@@ -47,17 +47,7 @@ export default function LinesExplorerContentSelectPattern() {
         const isValidOnSelectedDate = patternData.valid_on.includes(linesExplorerContext.entities.date_string);
         // Format response
         formattedPatternOptions.push({
-          id: patternData.id,
-          line_id: patternData.line_id,
-          route_id: patternData.route_id,
-          short_name: patternData.short_name,
-          direction: patternData.direction,
-          headsign: patternData.headsign,
-          color: patternData.color,
-          text_color: patternData.text_color,
-          municipalities: patternData.municipalities,
-          localities: patternData.localities,
-          label: patternData.headsign || 'no headsign',
+          ...patternData,
           disabled: !isValidOnSelectedDate,
         });
       }

diff --git a/frontend/components/StopName/StopName.js b/frontend/components/StopName/StopName.js
@@ -1,6 +1,10 @@
-import AudioBadge from '../AudioBadge/AudioBadge';
-import Text from '../Text/Text';
+/* * */
+
 import styles from './StopName.module.css';
+import Text from '@/components/Text/Text';
+import AudioBadge from '@/components/AudioBadge/AudioBadge';
+
+/* * */
 
 export default function StopName({ id, name, tts_name, locality, municipality, selected = false, alignment = 'flex-start' }) {
   //

diff --git a/frontend/translations/pt.json b/frontend/translations/pt.json
@@ -405,6 +405,7 @@
         "placeholder": "Procurar linha por número, nome, localização...",
         "no_results": "Nenhum Resultado Encontrado"
     },
+    "LinesExplorerContentPatternPathStop": {},
     "LinePatternMap": {
         "today": "Today",
         "tomorrow": "Tomorrow",
@@ -424,8 +425,6 @@
             "label": "Min."
         }
     },
-    "LinePatternPathStop": {},
-    "LinePatternPath": {},
     "LinePatternPathSpine": {},
     "StopRealTime": {
         "will_pass": "{value}",