Merge pull request #112 from carrismetropolitana/digital-263-feat-sel…

…ecionar-horario-em-linha Digital 263 - Feat: Selecionar Horario em Linha
carrismetropolitana · Dec 17, 2024 · 7abe780 · 7abe780
2 parents 4376dca + f1e7885
commit 7abe780
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/frontend/components/common/TimetableSchedules/index.tsx b/frontend/components/common/TimetableSchedules/index.tsx
@@ -6,6 +6,7 @@ import type { Minute } from '@/types/timetables.types';
 import { useTranslations } from 'next-intl';
 
 import styles from './styles.module.css';
+import { useLinesDetailContext } from '@/contexts/LinesDetail.context';
 
 /* * */
 
@@ -24,6 +25,7 @@ export default function TimetableSchedules({ selectedExceptionIds, setSelectedEx
 	// A. Setup variables
 
 	const t = useTranslations('common.TimetableSchedules');
+	const linesDetailContext = useLinesDetailContext();
 
 	//
 	// B. Render components
@@ -43,6 +45,8 @@ export default function TimetableSchedules({ selectedExceptionIds, setSelectedEx
 							minuteData={minuteData}
 							selectedExceptionIds={selectedExceptionIds}
 							setSelectedExceptionIds={setSelectedExceptionIds}
+							isHighlighted={Boolean(linesDetailContext.data.highlighted_trip_ids && minuteData.trip_ids.some(tripId => linesDetailContext.data.highlighted_trip_ids?.includes(tripId)))}
+							onClick={() => linesDetailContext.actions.setHighlightedTripIds(minuteData.trip_ids)}
 						/>
 					))}
 				</div>
@@ -59,11 +63,13 @@ interface TimetableSchedulesMinuteProps {
 	minuteData: Minute
 	selectedExceptionIds: string[]
 	setSelectedExceptionIds: (values: string[]) => void
+	isHighlighted: boolean
+	onClick?: () => void
 }
 
 /* * */
 
-function TimetableSchedulesMinute({ minuteData, selectedExceptionIds, setSelectedExceptionIds }: TimetableSchedulesMinuteProps) {
+function TimetableSchedulesMinute({ minuteData, selectedExceptionIds, setSelectedExceptionIds, isHighlighted, onClick }: TimetableSchedulesMinuteProps) {
 	//
 
 	//
@@ -88,9 +94,10 @@ function TimetableSchedulesMinute({ minuteData, selectedExceptionIds, setSelecte
 	return (
 		<p
 			key={minuteData.minute_value}
-			className={`${styles.minute} ${minuteData.exception_ids.length > 0 && styles.withException} ${isSelected && styles.isSelected} ${!isSelected && selectedExceptionIds.length > 0 && styles.isOthersSelected}`}
+			className={`${styles.minute} ${minuteData.exception_ids.length > 0 && styles.withException} ${isSelected && styles.isSelected} ${!isSelected && selectedExceptionIds.length > 0 && styles.isOthersSelected} ${isHighlighted && styles.isHighlighted}`}
 			onMouseOut={handleMouseOutException}
 			onMouseOver={handleMouseOverException}
+			onClick={onClick}
 		>
 			{minuteData.minute_label}
 			{minuteData.exception_ids.length > 0 && minuteData.exception_ids.map(exceptionId => (

diff --git a/frontend/components/common/TimetableSchedules/styles.module.css b/frontend/components/common/TimetableSchedules/styles.module.css
@@ -89,6 +89,14 @@
 	line-height: 1;
 	padding: 0 6px;
 	font-weight: var(--font-weight-semibold);
+	cursor: pointer;
+	transition: all 0.1s ease-in-out;
+
+	&:hover {
+		scale: 1.05;
+		translate: 0 -2px;
+		color: var(--color-system-text-200);
+	}
 }
 
 .column:first-child .minute {
@@ -115,6 +123,13 @@
 	color: var(--color-system-text-400);
 }
 
+.minute.isHighlighted {
+	margin: 2px;
+	color: light-dark(var(--color-system-text-100), var(--color-brand));
+	background-color: light-dark(var(--color-brand), var(--color-system-background-100));
+	border-radius: 100%;
+}
+
 /* * */
 /* EXCEPTION */
 

diff --git a/frontend/contexts/LinesDetail.context.tsx b/frontend/contexts/LinesDetail.context.tsx
@@ -21,6 +21,7 @@ interface LinesDetailContextState {
 	actions: {
 		setActivePattern: (patternGroupId: string) => void
 		setActiveWaypoint: (stopId: string, stopSequence: number,) => void
+		setHighlightedTripIds: (tripIds: string[]) => void
 	}
 	data: {
 		active_alerts: SimplifiedAlert[] | undefined
@@ -33,6 +34,7 @@ interface LinesDetailContextState {
 		routes: Route[]
 		service_metrics: ServiceMetrics[]
 		valid_patterns: Pattern[] | undefined
+		highlighted_trip_ids: null | string[]
 	}
 	filters: {
 		active_pattern_id: null | string
@@ -83,7 +85,7 @@ export const LinesDetailContextProvider = ({ children, lineId }) => {
 	const [dataActivePatternState, setDataActivePatternState] = useState<LinesDetailContextState['data']['active_pattern']>(null);
 	const [dataActiveShapeState, setDataActiveShapeState] = useState<LinesDetailContextState['data']['active_shape']>(null);
 	const [dataActiveWaypointState, setDataActiveWaypointState] = useState<LinesDetailContextState['data']['active_waypoint']>(null);
-
+	const [dataHighlightedTripIdsState, setDataHighlightedTripIdsState] = useState<LinesDetailContextState['data']['highlighted_trip_ids']>([]);
 	const [filterActivePatternIdState, setFilterActivePatternIdState] = useQueryState('active_pattern_id');
 	const [filterActiveWaypointStopIdState, setFilterActiveWaypointStopIdState] = useQueryState('active_waypoint_stop_id');
 	const [filterActiveWaypointStopSequenceState, setFilterActiveWaypointStopSequenceState] = useQueryState('active_waypoint_stop_sequence');
@@ -332,13 +334,24 @@ export const LinesDetailContextProvider = ({ children, lineId }) => {
 		}
 	};
 
+	/**
+	 * Set the highlighted trip ids.
+	 * @param tripIds
+	 * @returns
+	 */
+	const setHighlightedTripIds = (tripIds: string[]) => {
+		if (tripIds === dataHighlightedTripIdsState) setDataHighlightedTripIdsState(null);
+		else setDataHighlightedTripIdsState(tripIds);
+	};
+
 	//
 	// E. Define context value
 
 	const contextValue: LinesDetailContextState = {
 		actions: {
 			setActivePattern,
 			setActiveWaypoint,
+			setHighlightedTripIds,
 		},
 		data: {
 			active_alerts: dataActiveAlertsState,
@@ -351,6 +364,7 @@ export const LinesDetailContextProvider = ({ children, lineId }) => {
 			routes: dataRoutesState,
 			service_metrics: dataServiceMetricsState,
 			valid_patterns: dataValidPatternsState,
+			highlighted_trip_ids: dataHighlightedTripIdsState,
 		},
 		filters: {
 			active_pattern_id: filterActivePatternIdState,

diff --git a/frontend/types/timetables.types.ts b/frontend/types/timetables.types.ts
@@ -19,6 +19,7 @@ export interface Minute {
 	exception_ids: string[]
 	minute_label: string
 	minute_value: number
+	trip_ids: string[]
 }
 
 /* * */

diff --git a/frontend/utils/createTimetable.ts b/frontend/utils/createTimetable.ts
@@ -51,14 +51,14 @@ export default function createTimetable(primaryPatternGroup: Pattern, secondaryP
 			// Find or create the hour entry in the timetable
 			let hourEntry = timetableResult.hours.find(h => h.hour_value === hourValue);
 			if (!hourEntry) {
-				hourEntry = { hour_label: hour24, hour_value: hourValue, minutes: [] };
+				hourEntry = { hour_label: hour24, hour_value: hourValue, minutes: []};
 				timetableResult.hours.push(hourEntry);
 			}
 			// Find or create the minute entry in the timetable
 			// Since we're processing the primary Pattern, ensure that the minute entry does not have any exceptions.
 			const minuteEntry = hourEntry.minutes.find(m => m.minute_value === minuteValue && m.exception_ids === undefined);
 			if (!minuteEntry) {
-				hourEntry.minutes.push({ exception_ids: [], minute_label: minute24, minute_value: minuteValue });
+				hourEntry.minutes.push({ exception_ids: [], minute_label: minute24, minute_value: minuteValue, trip_ids: trip.trip_ids });
 			}
 		});
 	});
@@ -103,7 +103,7 @@ export default function createTimetable(primaryPatternGroup: Pattern, secondaryP
 				}
 				// Create a new minute entry if it doesn't exist yet
 				if (!minuteEntry) {
-					hourEntry.minutes.push({ exception_ids: [existingException.exception_id], minute_label: minute24, minute_value: minuteValue });
+					hourEntry.minutes.push({ exception_ids: [existingException.exception_id], minute_label: minute24, minute_value: minuteValue, trip_ids: trip.trip_ids });
 				}
 				// If the minute entry already exists, add the exception ID to it
 				else {