Create Vehicles page

frontend/app/(views)/(website)/vehicles/layout.tsx

@@ -0,0 +1,13 @@
+/* * */
+
+import { VehiclesListContextProvider } from '@/contexts/VehiclesList.context';
+
+/* * */
+
+export default function Layout({ children }) {
+	return (
+		<VehiclesListContextProvider>
+			{children}
+		</VehiclesListContextProvider>
+	);
+}

frontend/app/(views)/(website)/vehicles/page.tsx

@@ -0,0 +1,9 @@
+/* * */
+
+import { VehiclesList } from '@/components/vehicles/VehiclesList';
+
+/* * */
+
+export default function Page() {
+	return <VehiclesList />;
+}

frontend/components/layout/Grid/index.tsx

@@ -1,11 +1,10 @@
 /* * */
-
 import styles from './styles.module.css';
-
 /* * */
 
 interface Props {
 	children?: React.ReactNode
+	classname?: string
 	columns?: 'a' | 'aab' | 'ab' | 'abb' | 'abc' | 'abcd'
 	hAlign?: 'center' | 'end' | 'start'
 	vAlign?: 'center' | 'end' | 'start'
@@ -14,9 +13,9 @@ interface Props {
 
 /* * */
 
-export function Grid({ children, columns = 'a', hAlign = 'start', vAlign = 'start', withGap }: Props) {
+export function Grid({ children, classname, columns = 'a', hAlign = 'start', vAlign = 'start', withGap }: Props) {
 	return (
-		<div className={`${styles.container} ${styles[columns]} ${styles[`hAlign${hAlign}`]} ${styles[`vAlign${vAlign}`]} ${withGap && styles.withGap}`}>
+		<div className={`${styles.container} ${styles[columns]} ${styles[`hAlign${hAlign}`]} ${styles[`vAlign${vAlign}`]} ${withGap && styles.withGap} ${classname}`}>
 			{children}
 		</div>
 	);

frontend/components/map/MapViewStyleVehicles/index.tsx

@@ -12,7 +12,7 @@ import styles from './styles.module.css';
 /* * */
 
 export const MapViewStyleVehiclesPrimaryLayerId = 'default-layer-vehicles-regular';
-export const MapViewStyleVehiclesInteractiveLayerId = '';
+export const MapViewStyleVehiclesInteractiveLayerId = 'default-layer-vehicles-regular';
 
 /* * */
 

frontend/components/vehicles/VehicleListInfoBlock/index.tsx

@@ -0,0 +1,19 @@
+/* * */
+
+import { useTranslations } from 'next-intl';
+
+/* * */
+export function VehiclesListInfoBlock() {
+	//
+	// A. Setup variables
+
+	const t = useTranslations('vehicles.VehiclesListInfoBlock');
+
+	//
+	// B. Render components
+	return (
+		<>
+			<p>{t('heading')}</p>
+		</>
+	);
+}

frontend/components/vehicles/VehicleListMapBadge/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+/* * */
+
+import type { Line } from '@carrismetropolitana/api-types/network';
+
+import classNames from 'classnames/bind';
+
+import styles from './styles.module.css';
+
+/* * */
+
+interface Props {
+	color?: string
+	lineData?: Line
+	shortName?: string
+	textColor?: string
+}
+
+/* * */
+
+const cx = classNames.bind(styles);
+
+/* * */
+
+export function VehicleListMapBadge({ lineData }: Props) {
+	// A. Render components
+	return (
+		<>
+			<div className={cx({ badge: true, md: 'md' })} style={{ backgroundColor: lineData?.color, color: lineData?.text_color, marginBottom: '10px' }}>
+				{lineData?.short_name || '• • •'}
+			</div>
+			<div>
+				<p className={styles.line_name}>{lineData?.long_name}</p>
+			</div>
+		</>
+	);
+	//
+}

frontend/components/vehicles/VehicleListMapBadge/styles.module.css

@@ -0,0 +1,38 @@
+/* * */
+/* BADGE */
+
+.badge {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 999px;
+	color: var(--color-system-background-100);
+	background-color: var(--color-system-text-200);
+	font-weight: var(--font-weight-extrabold);
+	letter-spacing: 1px;
+	line-height: 1;
+	position: relative;
+
+}
+
+.badge.md {
+	font-size: 16px;
+	min-width: 65px;
+	max-width: 65px;
+	min-height: 26px;
+	max-height: 26px;
+	text-align: center;
+	vertical-align: middle;
+	display: flex;
+
+}
+
+/* * */
+
+/* LINE HEADER */
+.line_name{
+	color: var(--color-system-text-100);
+	font-size: var(--font-size-subtitle);
+	font-weight: var(--font-weight-extrabold);
+}
+/* * */

frontend/components/vehicles/VehiclesList/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+/* * */
+
+import { Section } from '@/components/layout/Section';
+import { Surface } from '@/components/layout/Surface';
+import VehiclesListMap from '@/components/vehicles/VehiclesListMap';
+import VehiclesListToolbar from '@/components/vehicles/VehiclesListToolbar';
+import { useTranslations } from 'next-intl';
+
+import { VehiclesListInfoBlock } from '../VehicleListInfoBlock';
+import styles from './styles.module.css';
+
+/* * */
+
+export function VehiclesList() {
+	//
+
+	//
+	// A. Setup variables
+
+	const t = useTranslations('vehicles.VehiclesList');
+
+	//
+	// B. Render components
+
+	return (
+		<>
+			<Surface>
+				<Section heading={t('heading')} subheading={t('subheading')} />
+			</Surface>
+			{/* <Surface>
+				<Section withGap withPadding>
+					<VehiclesListInfoBlock />
+				</Section>
+			</Surface> */}
+
+			<Surface>
+				<Section>
+					<div className={styles.container}>
+						<div className={styles.mapWrapper}>
+							<VehiclesListMap />
+						</div>
+						<VehiclesListToolbar />
+					</div>
+				</Section>
+			</Surface>
+
+		</>
+	);
+
+	//
+}

frontend/components/vehicles/VehiclesList/styles.module.css

@@ -0,0 +1,38 @@
+/* * */
+/* CONTAINER */
+
+.container {
+	display: grid;
+	grid-template:
+		"a b" minmax(100vh, auto) / 1fr 1fr;
+	align-items: flex-start;
+	justify-content: flex-start;
+	width: 100%;
+}
+
+@media (width < 1000px) {
+	.container {
+		grid-template:
+			"b" 50vh [b_]
+			"a" auto [a_] / 1fr;
+	}
+}
+
+/* * */
+/* MAP WRAPPER */
+
+.mapWrapper {
+	position: sticky;
+	top: var(--size-height-header);
+	grid-area: a;
+	height: 100%;
+	max-height: calc(100vh - var(--size-height-header));
+	border-right: 1px solid var(--color-system-border-100);
+}
+
+@media (width < 1000px) {
+	.mapWrapper {
+		position: static;
+		border: none;
+	}
+}

frontend/components/vehicles/VehiclesListMap/index.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { MapView } from '@/components/map/MapView';
+import { MapViewStylePath } from '@/components/map/MapViewStylePath';
+import {
+	MapViewStyleVehicles,
+	MapViewStyleVehiclesInteractiveLayerId,
+	MapViewStyleVehiclesPrimaryLayerId,
+} from '@/components/map/MapViewStyleVehicles';
+import { transformStopDataIntoGeoJsonFeature, useStopsContext } from '@/contexts/Stops.context';
+import { useVehiclesContext } from '@/contexts/Vehicles.context';
+import { useVehiclesListContext } from '@/contexts/VehiclesList.context';
+import { getBaseGeoJsonFeatureCollection } from '@/utils/map.utils';
+import { Routes } from '@/utils/routes';
+import { Pattern } from '@carrismetropolitana/api-types/network';
+import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
+import { DateTime } from 'luxon';
+import { useMemo, useState } from 'react';
+
+export default function Component() {
+	// A. Setup variables
+	const vehiclesListContext = useVehiclesListContext();
+	const vehiclesContext = useVehiclesContext();
+	const stopsContext = useStopsContext();
+
+	const [pattern, setPattern] = useState<Pattern[] | undefined>(undefined);
+	const [activePathShapeGeoJson, setActivePathShapeGeoJson] = useState<Feature<Geometry, GeoJsonProperties> | FeatureCollection<Geometry, GeoJsonProperties> | undefined>(undefined);
+
+	const selectedVehicleFromList = vehiclesListContext.data.selected;
+	const selectedVehicle = selectedVehicleFromList && vehiclesContext.data.vehicles.find(vehicle => vehicle.id === selectedVehicleFromList.id);
+
+	// B. Fetch Data
+
+	const findTodaysDate = () => DateTime.now().toFormat('yyyyLLdd');
+
+	const fetchPattern = useMemo(async () => {
+		if (!selectedVehicle) return [];
+		const date = await findTodaysDate();
+		const patternId = vehiclesListContext.data.selected?.pattern_id;
+
+		if (patternId) {
+			const actualPattern = await fetch(`${Routes.API}/patterns/${patternId}`).then(res => res.json());
+			const isAvailable = actualPattern.filter(item => item.valid_on.includes(date));
+
+			setPattern(isAvailable);
+
+			return isAvailable;
+		}
+	}, [vehiclesListContext.data.selected]);
+
+	const fetchShape = useMemo(async () => {
+		if (!pattern) return [];
+		const color = pattern.map(item => item.color.toString());
+		const shape = await fetch(`${Routes.API}/shapes/${pattern[0].shape_id}`).then(res => res.json());
+
+		shape.geojson.properties = { ...shape.geojson.properties, color: color[0] };
+
+		setActivePathShapeGeoJson(shape.geojson);
+
+		return shape.geojson;
+	}, [pattern]);
+
+	const activeVehiclesGeoJson = useMemo(() => {
+		if (vehiclesListContext.data.filtered && vehiclesListContext.data.filtered.length > 0) {
+			const features: Feature<Geometry, GeoJsonProperties>[] = [];
+			vehiclesListContext.data.filtered.forEach((vehicle) => {
+				const fc = vehiclesContext.actions.getVehicleByIdGeoJsonFC(vehicle.id);
+				if (fc && fc.features && fc.features.length > 0) {
+					features.push(fc.features[0]);
+				}
+			});
+			return { features, type: 'FeatureCollection' as const };
+		}
+		else {
+			return vehiclesContext.actions.getAllVehiclesGeoJsonFC();
+		}
+	}, [vehiclesListContext.data.filtered, vehiclesContext.data.vehicles]);
+
+	const activePathWaypointsGeoJson = useMemo(() => {
+		if (!pattern) return;
+		const collection = getBaseGeoJsonFeatureCollection();
+		pattern.map(pattern => pattern.path.forEach((pathStop) => {
+			const stopData = stopsContext.actions.getStopById(pathStop.stop_id);
+			if (!stopData) return;
+			const result = transformStopDataIntoGeoJsonFeature(stopData);
+			result.properties = {
+				...result.properties,
+				color: pattern.color,
+				text_color: pattern.text_color,
+			};
+			collection.features.push(result);
+		}));
+		return collection;
+	}, [pattern, vehiclesContext.data.vehicles]);
+
+	// C. Handle actions
+	function handleLayerClick(event) {
+		if (event.features.length === 0) {
+			setActivePathShapeGeoJson(undefined);
+			setPattern(undefined);
+			vehiclesListContext.actions.updateSelectedVehicle('');
+		}
+		if (event.features.length !== 0 && event.features[0].source === 'default-source-vehicles') {
+			vehiclesListContext.actions.updateSelectedVehicle(event.features[0].properties.id);
+		}
+	}
+	// D. Render component
+	return (
+		<MapView id="vehiclesListMap" interactiveLayerIds={[MapViewStyleVehiclesInteractiveLayerId]} onClick={handleLayerClick}>
+			<MapViewStyleVehicles vehiclesData={activeVehiclesGeoJson} />
+			<MapViewStylePath presentBeforeId={MapViewStyleVehiclesPrimaryLayerId} shapeData={activePathShapeGeoJson} waypointsData={activePathWaypointsGeoJson} />
+		</MapView>
+	);
+	//
+}