From 0ee7532a30ed5e2aec54ec5ea50c89cac82c093f Mon Sep 17 00:00:00 2001
From: Loic Coenen <loic@visua.com>
Date: Fri, 31 Oct 2025 14:29:46 +0100
Subject: [PATCH] feat: indicators

---
 src/App.tsx                        |  4 +-
 src/components/Indicators.tsx      | 93 ++++++++++++++++++++++++++++++
 src/components/NewsArticle.tsx     |  1 +
 src/components/NowTime.tsx         |  1 +
 src/components/Pager.tsx           | 64 ++++++++++++++++++++
 src/containers/NewsWidget.tsx      | 38 +++++++++++-
 src/containers/TrainSchedule.tsx   | 30 ++++++++--
 src/containers/WeatherWidget.tsx   | 49 +++++++++-------
 src/hooks/useLoadTrainSchedule.tsx | 34 +++++++----
 src/state/actions/types.ts         |  4 +-
 src/state/initialState.ts          |  2 +-
 src/state/reducer.ts               |  2 +-
 src/state/state.ts                 |  4 +-
 13 files changed, 278 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Indicators.tsx
 create mode 100644 src/components/Pager.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 652da90..a99ccef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,10 +36,10 @@ function App() {
 			<TrainSchedule {...{ state, dispatch }} />
 		 </Pane>
 		 <Pane>
-				<h1>News</h1>
-				<NewsWidget {...{ state, dispatch }} />
 				<h1>Weather</h1>
 				<WeatherWidget {...{ state, dispatch }} />
+				<h1>News</h1>
+				<NewsWidget {...{ state, dispatch }} />
 		 </Pane>
 	</Container>
   )
diff --git a/src/components/Indicators.tsx b/src/components/Indicators.tsx
new file mode 100644
index 0000000..30d6a0c
--- /dev/null
+++ b/src/components/Indicators.tsx
@@ -0,0 +1,93 @@
+
+import type {State} from "../state";
+import {filterTrainHour} from "../containers";
+import {mean} from "lodash";
+
+import styled from "styled-components";
+import { Clock, AlertTriangle, XCircle } from "lucide-react";
+import {accentColor} from "../styles";
+
+export const IndicatorStyled = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #0b0c10;
+  color: #fff;
+  padding: 1.5rem 2rem;
+  border-radius: 16px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  font-family: 'Inter', sans-serif;
+`;
+
+const StatBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  & svg {
+    margin-bottom: 0.3em;
+    color: ${accentColor};
+  }
+
+  .value {
+    font-weight: 600;
+    line-height: 1.1;
+  }
+
+  .label {
+    font-size: 1em;
+    opacity: 0.7;
+    margin-top: 0.3em;
+  }
+`;
+
+const formatTime = (seconds?: number) => {
+  if (seconds == null || isNaN(seconds)) return "–";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.round(seconds % 60);
+  return `${mins}m ${secs}s`;
+};
+
+const formatPercent = (num?: number) => {
+  if (num == null || isNaN(num)) return "–";
+  return `${(num * 100).toFixed(1)}%`;
+};
+
+export const Indicator = ({ state }: { state: State }) => {
+  const inOneHour = state.departures?.filter(filterTrainHour(60));
+  const inThreeHour = state.departures?.filter(filterTrainHour(-60 * 3));
+
+  const averageDelayGeneral = mean(inOneHour?.map(d => parseInt(d.delay)));
+  const averageDelayedOnly = mean(
+    inOneHour?.filter(d => parseInt(d.delay) !== 0)?.map(d => parseInt(d.delay))
+  );
+
+  const cancelled =
+    (inThreeHour?.filter(d => d?.canceled === '1')?.length || 0) /
+    (inThreeHour?.length || 1);
+
+  return (
+    <IndicatorStyled>
+      <StatBlock>
+        <Clock size={40} />
+        <div className="value">{formatTime(averageDelayGeneral)}</div>
+        <div className="label">Avg Delay (all)</div>
+      </StatBlock>
+
+      <StatBlock>
+        <AlertTriangle size={40} />
+        <div className="value">{formatTime(averageDelayedOnly)}</div>
+        <div className="label">Avg Delay (delayed only)</div>
+      </StatBlock>
+
+      <StatBlock>
+        <XCircle size={40} />
+        <div className="value">{formatPercent(cancelled)}</div>
+        <div className="label">Cancelled</div>
+      </StatBlock>
+    </IndicatorStyled>
+  );
+};
+
diff --git a/src/components/NewsArticle.tsx b/src/components/NewsArticle.tsx
index 1cbca0a..0ce3fbd 100644
--- a/src/components/NewsArticle.tsx
+++ b/src/components/NewsArticle.tsx
@@ -108,6 +108,7 @@ export const NewsArticle = ({ article }: NewsArticleProps) => {
       </NewsHeader>
       
       <Description>{article.description}</Description>
+			<img src={article.image_url} />
 
       <Footer>
         <CreatorSource>
diff --git a/src/components/NowTime.tsx b/src/components/NowTime.tsx
index dbd4541..fc77fa4 100644
--- a/src/components/NowTime.tsx
+++ b/src/components/NowTime.tsx
@@ -20,6 +20,7 @@ export const TimeStyled = styled.div`
   align-items: center;
 	justify-content: center;
 	padding-right: 1em;
+	width: 40vh;
 `;
 
 export const NowTime = () => {
diff --git a/src/components/Pager.tsx b/src/components/Pager.tsx
new file mode 100644
index 0000000..1ba64e2
--- /dev/null
+++ b/src/components/Pager.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import {accentColor} from "../styles";
+
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+`;
+
+const Dot = styled.button<{ $active: boolean }>`
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: ${({ $active }) => ($active ? accentColor : "#ccc")};
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  display: block;
+
+  transform: scale(${({ $active }) => ($active ? 1.5 : 1)});
+  transition: transform 0.3s ease, background-color 0.3s ease;
+
+  &:hover {
+    transform: scale(${({ $active }) => ($active ? 1.6 : 1.3)});
+    background-color: ${({ $active }) => ($active ? accentColor : "#999")};
+  }
+`;
+
+
+interface PagerProps {
+  currentPage: number;
+  total: number;
+  onChange: (page: number) => void;
+}
+
+const Pager: React.FC<PagerProps> = ({ currentPage, total, onChange }) => {
+  return (
+    <Container>
+      {Array.from({ length: total }, (_, i) => {
+        const page = i + 1;
+        const isActive = page === currentPage;
+
+        return (
+          <Dot
+            key={page}
+            $active={isActive}
+            onClick={() => onChange(page)}
+            aria-label={`Page ${page}`}
+          />
+        );
+      })}
+    </Container>
+  );
+};
+
+export default Pager;
+
diff --git a/src/containers/NewsWidget.tsx b/src/containers/NewsWidget.tsx
index 8618652..eea0112 100644
--- a/src/containers/NewsWidget.tsx
+++ b/src/containers/NewsWidget.tsx
@@ -1,12 +1,46 @@
-import type { Dispatch } from "react"
+import { useEffect, useState, type Dispatch } from "react"
 import type { Action, State } from "../state"
 
 import { NewsArticle } from "../components"
+import {SpinnerDiamond} from "spinners-react"
+import Pager from "../components/Pager";
+
+const pageSpeed = 10000;
+const perPage = 2;
 
 type NewsDispatchProps = {
 	state: State,
 	dispatch: Dispatch<Action>
 }
+
+
 export const NewsWidget = ({ state }: NewsDispatchProps ) => {
-	return <p>{state.news?.slice(0,2).map(article => <NewsArticle {...{article}} />)}</p>
+	const [newsCurrentPage, setNewsCurrentPage] = useState(1);
+	const numberOfPages = Math.floor((state.news?.length || 1) / perPage)
+	useEffect( () => {
+		const id = setInterval(() => {
+			if(newsCurrentPage === numberOfPages) {
+				setNewsCurrentPage(1)
+			} else {
+				setNewsCurrentPage(newsCurrentPage + 1)
+			}
+		}, pageSpeed);
+		return () => clearInterval(id)
+	}, [newsCurrentPage, state])
+
+	return <div>
+		{state.newsLoading 
+			? <SpinnerDiamond />
+		  : state.newsError  
+	 	  ?  <em>{state.newsError?.message}</em>
+		  : <>
+				<Pager 
+					currentPage={newsCurrentPage} 
+					total={numberOfPages} 
+					onChange={setNewsCurrentPage}
+				/>
+				{state.news?.slice((newsCurrentPage - 1) * perPage, newsCurrentPage * perPage)
+					.map(article => <NewsArticle {...{article}} />)}
+			</>}
+		</div>
 }
diff --git a/src/containers/TrainSchedule.tsx b/src/containers/TrainSchedule.tsx
index 7c7d84c..eaaf814 100644
--- a/src/containers/TrainSchedule.tsx
+++ b/src/containers/TrainSchedule.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components';
 
 import { type Dispatch } from 'react';
 import {
@@ -8,17 +7,40 @@ import {
 
 import { Departure } from '../components';
 import { NowTime } from '../components/NowTime';
+import { SpinnerDiamond } from 'spinners-react';
+import type { DepartureType } from '../types/liveboard';
+import { Indicator } from '../components/Indicators';
+
+const showTrainsMinutes = 120;
+
+export const filterTrainHour = (delay: number) => (departure: DepartureType) => {
+		const time = new Date(parseInt(departure.time) * 1000);
+		const now = new Date();
+		const h = time.getHours();
+		const m = time.getMinutes();
+		const nowInMinutes = (now.getHours() * 60) + now.getMinutes();
+		const minutes = h * 60 + m;
+		return (nowInMinutes + delay) > minutes;
+	}
 
 type TrainScheduleProps = {
 	dispatch: Dispatch<Action>,
 	state: State,
 }
 
-
 export const TrainSchedule = ({ state } : TrainScheduleProps) => {
 
+	const filteredDepartures = state.departures?.filter(filterTrainHour(showTrainsMinutes)) 
+
 	return <>
-			{state.liveboard?.departures.departure.map(departure => <Departure  {...{departure}} />)}
-			<NowTime />
+		<NowTime />
+		<Indicator {...{state}} />
+		{state.trainScheduleLoading 
+			? <SpinnerDiamond />
+			: state.trainScheduleError 
+			? <em>{state.trainScheduleError?.message}</em>
+			: state.departures?.length === 0
+			? <em>No more trains for today.</em>
+			: filteredDepartures?.map(departure => <Departure  {...{departure}} />)}
 	</>
 }
diff --git a/src/containers/WeatherWidget.tsx b/src/containers/WeatherWidget.tsx
index 338c5c3..8726deb 100644
--- a/src/containers/WeatherWidget.tsx
+++ b/src/containers/WeatherWidget.tsx
@@ -3,6 +3,7 @@ import type { Action, State } from "../state"
 import styled from "styled-components";
 import { WiStrongWind, WiRaindrops, WiThermometer } from "react-icons/wi";
 import {accentColor} from "../styles";
+import {SpinnerDiamond} from "spinners-react";
 
 
 export const WeatherContainer = styled.div`
@@ -73,27 +74,31 @@ export const WeatherWidget = ({ state }: WeatherDispatchProps) => {
   const weather = state.weather?.current;
   if (!weather) return null;
 
-  return (
-    <WeatherContainer>
-      <WeatherHeader>
-        <img src={weather.condition.icon} alt={weather.condition.text} />
-        <h2>{weather.condition.text}</h2>
-      </WeatherHeader>
+  return state.weatherLoading 
+		? <SpinnerDiamond /> 
+		: state.weatherError 
+		? <em>{state.weatherError?.message}</em> 
+		: (
+			<WeatherContainer>
+				<WeatherHeader>
+					<img src={weather.condition.icon} alt={weather.condition.text} />
+					<h2>{weather.condition.text}</h2>
+				</WeatherHeader>
 
-      <WeatherDetails>
-        <div className="weather-item">
-          <WiThermometer />
-          <span>{weather.temp_c}°C</span>
-        </div>
-        <div className="weather-item">
-          <WiRaindrops />
-          <span>{weather.precip_mm} mm</span>
-        </div>
-        <div className="weather-item">
-          <WiStrongWind />
-          <span>{weather.gust_kph} kph</span>
-        </div>
-      </WeatherDetails>
-    </WeatherContainer>
-  );
+				<WeatherDetails>
+					<div className="weather-item">
+						<WiThermometer />
+						<span>{weather.temp_c}°C</span>
+					</div>
+					<div className="weather-item">
+						<WiRaindrops />
+						<span>{weather.precip_mm} mm</span>
+					</div>
+					<div className="weather-item">
+						<WiStrongWind />
+						<span>{weather.gust_kph} kph</span>
+					</div>
+				</WeatherDetails>
+			</WeatherContainer>
+		);
 };
diff --git a/src/hooks/useLoadTrainSchedule.tsx b/src/hooks/useLoadTrainSchedule.tsx
index 90604f0..5b4022c 100644
--- a/src/hooks/useLoadTrainSchedule.tsx
+++ b/src/hooks/useLoadTrainSchedule.tsx
@@ -1,10 +1,12 @@
 import { useEffect, type Dispatch } from "react"
 import { actions, type Action, type State } from "../state"
+import { flatten, range } from 'lodash';
 
 import axios from 'axios';
-import type {LiveBoard} from "../types/liveboard";
+import type { LiveBoard } from "../types/liveboard";
 
 const irailApiUrl = 'https://api.irail.be';
+const lookahead = 3;
 
 export const useLoadTrainSchedule = (_: State, dispatch: Dispatch<Action>) => {
 	useEffect(() => {
@@ -12,23 +14,31 @@ export const useLoadTrainSchedule = (_: State, dispatch: Dispatch<Action>) => {
 			try {
 				dispatch(actions.loadTrainSchedule({}))
 				const now = new Date();
-
 				const pad = (num: number) => num.toString().padStart(2, '0');
 
-				const day = pad(now.getDate());
-				const month = pad(now.getMonth() + 1);
-				const year = now.getFullYear().toString().slice(-2);
-				const date = `${day}${month}${year}`
+				const departures = 
+					flatten(await 
+						Promise.all(range(0, lookahead).map(async hourPadding => {
 
-				const hours = pad(now.getHours());
-				const minutes = pad(now.getMinutes());
-				const time = `${hours}${minutes}`
+							const day = pad(now.getDate());
+							const month = pad(now.getMonth() + 1);
+							const year = now.getFullYear().toString().slice(-2);
+							const date = `${day}${month}${year}`
 
-				const answer = await axios.get(`${irailApiUrl}/liveboard?station=Nivelles&date=${date}&time=${time}&format=json&lang=en&alerts=true`)
+							const hours = pad(now.getHours() + hourPadding) ;
+							const minutes = pad(now.getMinutes());
+							const time = `${hours}${minutes}`
 
-				const liveboard = answer.data as LiveBoard;
+							const answer = await axios.get(`${irailApiUrl}/liveboard?station=Nivelles&date=${date}&time=${time}&format=json&lang=en&alerts=true`)
 
-				dispatch(actions.loadTrainScheduleSuccess({ liveboard }))
+							const liveboard = answer.data as LiveBoard;
+
+							return liveboard.departures.departure;
+						})))
+
+
+
+				dispatch(actions.loadTrainScheduleSuccess({ departures }))
 			} catch(error) {
 				dispatch(actions.loadTrainScheduleError({ error: error as Error}))
 			}
diff --git a/src/state/actions/types.ts b/src/state/actions/types.ts
index 3efce15..37bfd51 100644
--- a/src/state/actions/types.ts
+++ b/src/state/actions/types.ts
@@ -1,7 +1,7 @@
 export type ActionType = string;
 
 import type {Article} from '../../types/article';
-import type { LiveBoard } from '../../types/liveboard';
+import type { DepartureType } from '../../types/liveboard';
 import type {WeatherData} from '../../types/weather';
 import { 
 	loadTrainSchedule, 
@@ -25,7 +25,7 @@ export type LoadTrainSchedule = {
 
 export type LoadTrainScheduleSuccess = {
 	type: typeof loadTrainScheduleSuccess,
-	liveboard: LiveBoard
+	departures: DepartureType[]
 }
 
 export type LoadTrainScheduleError = {
diff --git a/src/state/initialState.ts b/src/state/initialState.ts
index f4ae447..605befd 100644
--- a/src/state/initialState.ts
+++ b/src/state/initialState.ts
@@ -1,7 +1,7 @@
 import { type State } from "./state";
 
 export const initialState: State = {
-	liveboard: undefined,
+	departures: undefined,
 	trainScheduleError: undefined,
 	trainScheduleLoading: false,
 	news: undefined,
diff --git a/src/state/reducer.ts b/src/state/reducer.ts
index dd0c8ab..87ce298 100644
--- a/src/state/reducer.ts
+++ b/src/state/reducer.ts
@@ -33,7 +33,7 @@ export const reducerInner = (state: State, action: Action): State => {
   else if(action.type === loadTrainScheduleSuccess) {
     return {
       ...state,
-			liveboard: (action as LoadTrainScheduleSuccess).liveboard,
+			departures: (action as LoadTrainScheduleSuccess).departures,
 			trainScheduleLoading: false,
     }
   }
diff --git a/src/state/state.ts b/src/state/state.ts
index 487cea7..927048f 100644
--- a/src/state/state.ts
+++ b/src/state/state.ts
@@ -1,10 +1,10 @@
 import type { Article } from "../types/article";
-import type { LiveBoard } from "../types/liveboard";
+import type { DepartureType } from "../types/liveboard";
 import type { WeatherData } from "../types/weather";
 
 export type State = { 
 	trainScheduleLoading: boolean,
-	liveboard: LiveBoard | undefined,
+	departures: DepartureType[] | undefined,
 	trainScheduleError: Error | undefined,	
 
 	weather: WeatherData | undefined,