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/news/NewsListToolbar/index.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+/* * */
+
+import { FoundItemsCounter } from '@/components/common/FoundItemsCounter';
+import { Section } from '@/components/layout/Section';
+import { useNewsListContext } from '@/contexts/NewsList.context';
+import { TextInput } from '@mantine/core';
+import { DatePickerInput } from '@mantine/dates';
+import { IconArrowLoopRight, IconCalendarEvent } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+
+import styles from './styles.module.css';
+
+/* * */
+
+export function NewsListToolbar() {
+	// A. Setup variables
+	const newsListContext = useNewsListContext();
+	const t = useTranslations('news.NewsListToolbar');
+	const typingTimeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
+	const [textInput, setTextInput] = useState<null | string>(null);
+	const [dateInput, setDateInput] = useState<Date | null>(null);
+	//
+	// B . Handle Actions
+
+	const handleTextInputChange = ({ currentTarget }) => {
+		setTextInput(currentTarget.value);
+		if (!newsListContext.flags.is_loading && newsListContext.data.raw) {
+			try {
+				if (typingTimeoutRef.current) {
+					clearTimeout(typingTimeoutRef.current);
+				}
+				typingTimeoutRef.current = setTimeout(() => {
+					newsListContext.actions.updateFilterByTitle(currentTarget.value);
+					console.log('News filtered with success ✅');
+				}, 500);
+			}
+			catch (error) {
+				console.error('Filtering failed ❌: ', error);
+			}
+		}
+	};
+
+	const handleDateInputChange = (value: Date | null) => {
+		setDateInput(value);
+		newsListContext.actions.updateFilterByDate(value || new Date());
+	};
+
+	// C. Cleanup;
+	useEffect(() => {
+		return () => {
+			if (typingTimeoutRef.current) {
+				clearTimeout(typingTimeoutRef.current);
+			}
+		};
+	}, []);
+
+	// D. Render Components
+
+	return (
+		<>
+			<Section heading={t('heading')} withBottomDivider withPadding>
+				<div className="row-container" style={{ alignItems: 'center', display: 'flex', gap: '1rem', justifyContent: 'space-between' }}>
+					<TextInput leftSection={<IconArrowLoopRight size={20} />} onChange={handleTextInputChange} placeholder={t('SearchInput.placeholder')} type="search" value={textInput || ''} w="70%" />
+					<DatePickerInput
+						classNames={{ input: styles.datePickerInput, placeholder: styles.datePickerPlaceholder, section: styles.datePickerPlaceholder }}
+						dropdownType="modal"
+						leftSection={<IconCalendarEvent />}
+						onChange={handleDateInputChange}
+						placeholder={t('DateInput.placeholder')}
+						size="lg"
+						value={dateInput}
+						valueFormat="DD MMM YYYY"
+						variant="unstyled"
+					/>
+				</div>
+				<FoundItemsCounter text={t('found_items_counter', { count: newsListContext.data.filtered.length })} />
+			</Section>
+
+		</>
+	);
+	//
+}

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 }}>
+				{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,48 @@
+'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 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>
+					<p>Informação</p>
+				</Section>
+			</Surface>
+			<Surface>
+				<div className={styles.container}>
+					<VehiclesListMap />
+					<div className={styles.sidebarWrapper}>
+						<VehiclesListToolbar />
+					</div>
+				</div>
+			</Surface>
+		</>
+	);
+
+	//
+}

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

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