-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
345778d
commit cdac3d1
Showing
21 changed files
with
332 additions
and
229 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| /* * */ | ||
| /* CONTAINER */ | ||
|
|
||
| .container { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
This file was deleted.
Oops, something went wrong.
25 changes: 0 additions & 25 deletions
25
frontend/components/LinePatternMap/LinePatternMap.module.css
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
frontend/components/LinesExplorerContentPatternMap/LinesExplorerContentPatternMap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 'use client'; | ||
|
|
||
| /* * */ | ||
|
|
||
| import useSWR from 'swr'; | ||
| import { useTranslations } from 'next-intl'; | ||
| import OSMMap from '@/components/OSMMap/OSMMap'; | ||
| import styles from './LinesExplorerContentPatternMap.module.css'; | ||
| import { useMap, Source, Layer } from 'react-map-gl/maplibre'; | ||
| import { useLinesExplorerContext } from '@/contexts/LinesExplorerContext'; | ||
|
|
||
| /* * */ | ||
|
|
||
| export default function LinesExplorerContentPatternMap() { | ||
| // | ||
|
|
||
| // | ||
| // A. Setup variables | ||
|
|
||
| const { patternShapeMap } = useMap(); | ||
| const t = useTranslations('LinesExplorerContentPatternMap'); | ||
| const linesExplorerContext = useLinesExplorerContext(); | ||
|
|
||
| // | ||
| // B. Fetch data | ||
|
|
||
| const { data: shapeData } = useSWR(linesExplorerContext.entities?.pattern?.shape_id && `https://api.carrismetropolitana.pt/shapes/${linesExplorerContext.entities.pattern.shape_id}`); | ||
|
|
||
| // | ||
| // C. Render components | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <OSMMap id="patternShapeMap" scrollZoom={false} mapStyle="map"> | ||
| {shapeData?.geojson && ( | ||
| <Source id="pattern-shape" type="geojson" data={shapeData.geojson}> | ||
| <Layer id="pattern-shape" type="line" source="pattern-shape" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': linesExplorerContext.entities?.pattern?.color ? linesExplorerContext.entities.pattern.color : '#000000', 'line-width': 4 }} /> | ||
| </Source> | ||
| )} | ||
| </OSMMap> | ||
| </div> | ||
| ); | ||
|
|
||
| // | ||
| } |
7 changes: 7 additions & 0 deletions
7
frontend/components/LinesExplorerContentPatternMap/LinesExplorerContentPatternMap.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /* * */ | ||
| /* CONTAINER */ | ||
|
|
||
| .container { | ||
| height: 400px; | ||
| width: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
...onents/LinesExplorerContentPatternPathStopName/LinesExplorerContentPatternPathStopName.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /* * */ | ||
|
|
||
| import styles from './LinesExplorerContentPatternPathStopName.module.css'; | ||
| import Text from '@/components/Text/Text'; | ||
| import AudioBadge from '@/components/AudioBadge/AudioBadge'; | ||
|
|
||
| /* * */ | ||
|
|
||
| export default function LinesExplorerContentPatternPathStopName({ id, name, tts_name, locality, municipality, selected = false, alignment = 'flex-start' }) { | ||
| // | ||
|
|
||
| // If none of the location strings are defined, | ||
| // then return an empty React fragment. | ||
| if (!locality && !municipality) { | ||
| return ( | ||
| <div className={`${styles.container} ${styles[alignment]}`}> | ||
| <Text type={selected ? 'h2' : 'h3'} aria-label={tts_name || name}> | ||
| {name} | ||
| {/* {name} <AudioBadge type="stops" id={id} /> */} | ||
| </Text> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // If only locality is defined, then return it. | ||
| if (locality && !municipality) { | ||
| return ( | ||
| <div className={`${styles.container} ${styles[alignment]}`}> | ||
| <Text type={selected ? 'h2' : 'h3'} aria-label={tts_name || name}> | ||
| {name} | ||
| {/* {name} <AudioBadge type="stops" id={id} /> */} | ||
| </Text> | ||
| <Text type="subtitle">{locality}</Text> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // If only municipality is defined, then return it. | ||
| if (!locality && municipality) { | ||
| return ( | ||
| <div className={`${styles.container} ${styles[alignment]}`}> | ||
| <Text type={selected ? 'h2' : 'h3'} aria-label={tts_name || name}> | ||
| {name} | ||
| {/* {name} <AudioBadge type="stops" id={id} /> */} | ||
| </Text> | ||
| <Text type="subtitle">{municipality}</Text> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // If both locality and municipality are the same, | ||
| // return only one of them to avoid duplicate strings. | ||
| if (locality === municipality) { | ||
| return ( | ||
| <div className={`${styles.container} ${styles[alignment]}`}> | ||
| <Text type={selected ? 'h2' : 'h3'} aria-label={tts_name || name}> | ||
| {name} | ||
| {/* {name} <AudioBadge type="stops" id={id} /> */} | ||
| </Text> | ||
| <Text type="subtitle">{locality}</Text> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // Return both if none of the previous conditions was matched. | ||
| return ( | ||
| <div className={`${styles.container} ${styles[alignment]}`}> | ||
| <Text type={selected ? 'h2' : 'h3'} aria-label={tts_name || name}> | ||
| {name} | ||
| {/* {name} <AudioBadge type="stops" id={id} /> */} | ||
| </Text> | ||
| <Text type="subtitle"> | ||
| {locality}, {municipality} | ||
| </Text> | ||
| </div> | ||
| ); | ||
|
|
||
| // | ||
| } |
20 changes: 20 additions & 0 deletions
20
...inesExplorerContentPatternPathStopName/LinesExplorerContentPatternPathStopName.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--size-xs); | ||
| } | ||
|
|
||
| .container.flex-start { | ||
| align-items: flex-start; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .container.center { | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .container.flex-end { | ||
| align-items: flex-end; | ||
| text-align: right; | ||
| } |
Oops, something went wrong.