boomjacky/trainhour
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: RSS feed and config
Some checks failed
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Loic Coenen
2025-11-02 20:36:07 +01:00
parent 9e872ea8d9
commit 77113c83e2
23 changed files with 1006 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
dist/assets/index-ByYsxaaM.js vendored
View File

File diff suppressed because one or more lines are too long

482
dist/assets/index-DXaY9vUr.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-DeyVbdfU.css → dist/assets/index-Db4VgUFq.css vendored
View File

@@ -1 +1 @@
:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}import "@react-ui-org/react-ui/dist/react-ui.css";{} :root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}

4
dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>trainhour</title> <title>trainhour</title>
<script type="module" crossorigin src="/assets/index-ByYsxaaM.js"></script> <script type="module" crossorigin src="/assets/index-DXaY9vUr.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DeyVbdfU.css"> <link rel="stylesheet" crossorigin href="/assets/index-Db4VgUFq.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
package.json
View File

@@ -12,12 +12,14 @@
"dependencies": { "dependencies": {
"@chakra-ui/react": "^3.28.0", "@chakra-ui/react": "^3.28.0",
"@types/lodash": "^4.17.20", "@types/lodash": "^4.17.20",
"@uidotdev/usehooks": "^2.4.1",
"axios": "^1.13.1", "axios": "^1.13.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lucide-react": "^0.552.0", "lucide-react": "^0.552.0",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"rss-parser": "^3.13.0",
"spinners-react": "^1.0.11", "spinners-react": "^1.0.11",
"styled-components": "^6.1.19" "styled-components": "^6.1.19"
}, },

51
pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ importers:
'@types/lodash': '@types/lodash':
specifier: ^4.17.20 specifier: ^4.17.20
version: 4.17.20 version: 4.17.20
'@uidotdev/usehooks':
specifier: ^2.4.1
version: 2.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
axios: axios:
specifier: ^1.13.1 specifier: ^1.13.1
version: 1.13.1 version: 1.13.1
@@ -32,6 +35,9 @@ importers:
react-icons: react-icons:
specifier: ^5.5.0 specifier: ^5.5.0
version: 5.5.0(react@19.2.0) version: 5.5.0(react@19.2.0)
rss-parser:
specifier: ^3.13.0
version: 3.13.0
spinners-react: spinners-react:
specifier: ^1.0.11 specifier: ^1.0.11
version: 1.0.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) version: 1.0.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -708,6 +714,13 @@ packages:
resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==} resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@uidotdev/usehooks@2.4.1':
resolution: {integrity: sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==}
engines: {node: '>=16'}
peerDependencies:
react: '>=18.0.0'
react-dom: '>=18.0.0'
'@vitejs/plugin-react@5.1.0': '@vitejs/plugin-react@5.1.0':
resolution: {integrity: sha512-4LuWrg7EKWgQaMJfnN+wcmbAW+VSsCmqGohftWjuct47bv8uE4n/nPpq4XjJPsxgq00GGG5J8dvBczp8uxScew==} resolution: {integrity: sha512-4LuWrg7EKWgQaMJfnN+wcmbAW+VSsCmqGohftWjuct47bv8uE4n/nPpq4XjJPsxgq00GGG5J8dvBczp8uxScew==}
engines: {node: ^20.19.0 || >=22.12.0} engines: {node: ^20.19.0 || >=22.12.0}
@@ -1062,6 +1075,9 @@ packages:
electron-to-chromium@1.5.240: electron-to-chromium@1.5.240:
resolution: {integrity: sha512-OBwbZjWgrCOH+g6uJsA2/7Twpas2OlepS9uvByJjR2datRDuKGYeD+nP8lBBks2qnB7bGJNHDUx7c/YLaT3QMQ==} resolution: {integrity: sha512-OBwbZjWgrCOH+g6uJsA2/7Twpas2OlepS9uvByJjR2datRDuKGYeD+nP8lBBks2qnB7bGJNHDUx7c/YLaT3QMQ==}
entities@2.2.0:
resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
error-ex@1.3.4: error-ex@1.3.4:
resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==} resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
@@ -1542,9 +1558,15 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
rss-parser@3.13.0:
resolution: {integrity: sha512-7jWUBV5yGN3rqMMj7CZufl/291QAhvrrGpDNE4k/02ZchL0npisiYYqULF71jCEKoIiHvK/Q2e6IkDwPziT7+w==}
run-parallel@1.2.0: run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
sax@1.4.1:
resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
scheduler@0.27.0: scheduler@0.27.0:
resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==} resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
@@ -1709,6 +1731,14 @@ packages:
resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
xml2js@0.5.0:
resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==}
engines: {node: '>=4.0.0'}
xmlbuilder@11.0.1:
resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==}
engines: {node: '>=4.0'}
yallist@3.1.1: yallist@3.1.1:
resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
@@ -2391,6 +2421,11 @@ snapshots:
'@typescript-eslint/types': 8.46.2 '@typescript-eslint/types': 8.46.2
eslint-visitor-keys: 4.2.1 eslint-visitor-keys: 4.2.1
'@uidotdev/usehooks@2.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
dependencies:
react: 19.2.0
react-dom: 19.2.0(react@19.2.0)
'@vitejs/plugin-react@5.1.0(vite@7.1.12(@types/node@24.9.1))': '@vitejs/plugin-react@5.1.0(vite@7.1.12(@types/node@24.9.1))':
dependencies: dependencies:
'@babel/core': 7.28.5 '@babel/core': 7.28.5
@@ -3050,6 +3085,8 @@ snapshots:
electron-to-chromium@1.5.240: {} electron-to-chromium@1.5.240: {}
entities@2.2.0: {}
error-ex@1.3.4: error-ex@1.3.4:
dependencies: dependencies:
is-arrayish: 0.2.1 is-arrayish: 0.2.1
@@ -3528,10 +3565,17 @@ snapshots:
'@rollup/rollup-win32-x64-msvc': 4.52.5 '@rollup/rollup-win32-x64-msvc': 4.52.5
fsevents: 2.3.3 fsevents: 2.3.3
rss-parser@3.13.0:
dependencies:
entities: 2.2.0
xml2js: 0.5.0
run-parallel@1.2.0: run-parallel@1.2.0:
dependencies: dependencies:
queue-microtask: 1.2.3 queue-microtask: 1.2.3
sax@1.4.1: {}
scheduler@0.27.0: {} scheduler@0.27.0: {}
semver@6.3.1: {} semver@6.3.1: {}
@@ -3649,6 +3693,13 @@ snapshots:
word-wrap@1.2.5: {} word-wrap@1.2.5: {}
xml2js@0.5.0:
dependencies:
sax: 1.4.1
xmlbuilder: 11.0.1
xmlbuilder@11.0.1: {}
yallist@3.1.1: {} yallist@3.1.1: {}
yaml@1.10.2: {} yaml@1.10.2: {}

235
src/App.tsx
View File

@@ -1,19 +1,20 @@
import { useReducer, useState } from 'react' import { useCallback, useEffect, useReducer, useState } from 'react'
import { useLoadTrainSchedule } from './hooks/useLoadTrainSchedule' import { useLoadTrainSchedule } from './hooks/useLoadTrainSchedule'
import { actions, initialState, reducer } from './state' import { useLocalStorage } from "@uidotdev/usehooks";
import { actions, initialState, reducer, type Action, type State } from './state'
import './App.css' import './App.css'
import { IoSettingsSharp } from 'react-icons/io5';
import styled from "styled-components";
import { NewsWidget, TrainSchedule, WeatherWidget } from './containers'; import { NewsWidget, TrainSchedule, WeatherWidget } from './containers';
import {useGiteaApi, useNewsApi, useWeatherApi} from './hooks'; import {useGiteaApi, useNewsApi, useRssFeed, useWeatherApi} from './hooks';
import styled from 'styled-components';
import {IssueWidget} from './containers/IssuesWidget'; import {IssueWidget} from './containers/IssuesWidget';
import {IoSettingsSharp} from 'react-icons/io5';
import type {Station} from './types'; import type {Station} from './types';
//import {NativeSelectRoot} from '@chakra-ui/react'; import {RssWidget} from './containers/RssWidget';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@@ -27,30 +28,172 @@ const Pane = styled.div`
`; `;
const SettingContainer = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
background: #1e1e2f;
color: #f1f1f1;
border-radius: 12px;
font-family: 'Inter', sans-serif;
`;
const FieldGroup = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
background: #2a2a40;
padding: 0.75rem 1rem;
border-radius: 8px;
`;
const Label = styled.label`
font-size: 0.95rem;
color: #b0b0c0;
`;
const Select = styled.select`
background: #3a3a55;
color: #fff;
border: none;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.95rem;
outline: none;
width: 60%;
cursor: pointer;
&:hover {
background: #4a4a6a;
}
`;
const Input = styled.input`
background: #3a3a55;
color: #fff;
border: none;
padding: 0.4rem 0.6rem;
border-radius: 6px;
width: 60px;
text-align: center;
outline: none;
&:focus {
background: #4a4a6a;
}
`;
const TextArea = styled.textarea`
background: #3a3a55;
color: #fff;
border: none;
border-radius: 8px;
padding: 0.75rem;
width: calc(100% - 2em);
height: 80px;
resize: vertical;
outline: none;
&:focus {
background: #4a4a6a;
}
`;
export const Button = styled.button`
background: #4a4a6a;
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
&:hover {
background: #5b5b7a;
transform: translateY(-1px);
}
&:active {
background: #3a3a55;
transform: translateY(0);
}
&:disabled {
background: #2a2a40;
color: #999;
cursor: not-allowed;
}
`;
// Credit to https://www.benmvp.com/blog/sync-localstorage-react-usereducer-hook/
const usePersistReducer = () => {
const [savedState, saveState] = useLocalStorage(
'state',
initialState,
)
// wrap `reducer` with a memoized function that
// syncs the `newState` to `localStorage` before
// returning `newState`. memoizing is important!
const reducerLocalStorage = useCallback(
(state: State, action: Action) => {
const newState = reducer(state, action)
saveState(newState)
return newState
},
[saveState],
)
// use wrapped reducer and the saved value from
// `localStorage` as params to `useReducer`.
// this will return `[state, dispatch]`
return useReducer(reducerLocalStorage, savedState)
}
function App() { function App() {
const [state, dispatch] = useReducer( reducer, initialState, ); const [state, dispatch] = usePersistReducer();
const [settingOpened, setSettingOpened] = useState(false); const [settingOpened, setSettingOpened] = useState(false);
const { reloadTrainSchedule } = useLoadTrainSchedule(state, dispatch); const { reloadTrainSchedule } = useLoadTrainSchedule(state, dispatch);
const { reloadNews } = useNewsApi({state, dispatch}); const { reloadNews } = useNewsApi({state, dispatch});
const { reloadWeather } = useWeatherApi({state, dispatch}); const { reloadWeather } = useWeatherApi({state, dispatch});
const { reloadIssues } = useGiteaApi({state, dispatch}) const { reloadIssues } = useGiteaApi({state, dispatch})
const { reloadRssFeed } = useRssFeed({state, dispatch})
const { selectedLocation } = state; const { selectedLocation } = state;
const setSelectedLocation = (location: string) => { const setSelectedLocation = (location: string) => {
dispatch(actions.setSelectedLocation({ location })) dispatch(actions.setSelectedLocation({ location }))
}
useEffect(() => {
reloadNews(); reloadNews();
reloadWeather(); reloadWeather();
reloadIssues(); reloadIssues();
reloadTrainSchedule(); reloadTrainSchedule();
} reloadRssFeed();
}, [selectedLocation, state.config])
const mainContent = <> const mainContent = <>
<Pane> <Pane>
<h2>Next trains in {state.selectedLocation}</h2> <h2>Next trains in {state.selectedLocation}</h2>
<TrainSchedule {...{ state, dispatch }} /> <TrainSchedule {...{ state, dispatch }} />
{state.config.rssFollow.length > 0
? <>
<h2>RSS Feed</h2>
<RssWidget {...{ state, dispatch }} />
</>
: <></>
}
</Pane> </Pane>
<Pane> <Pane>
<h2>Weather</h2> <h2>Weather</h2>
@@ -62,13 +205,73 @@ function App() {
</Pane> </Pane>
</> </>
const settingContent = <>
const {
trainScheduleShow,
trainDelayCompute,
trainCancelCompute,
rssFollow,
} = state.config;
const setTrainScheduleShow = (value: number) => dispatch(actions.setConfig({ setting: 'trainScheduleShow', value }));
const setTrainDelayCompute = (value: number) => dispatch(actions.setConfig({ setting: 'trainDelayCompute', value }));
const setTrainCancelCompute = (value: number) => dispatch(actions.setConfig({ setting: 'trainCancelCompute', value }));
const setRssFollow = (value: string) => dispatch(actions.setConfig({ setting: 'rssFollow', value }));
const settingContent = (
<Pane> <Pane>
<select value={selectedLocation} onChange={e => setSelectedLocation(e.target.value)}> <SettingContainer>
{state.stations?.map((option: Station) => <option value={option.name}>{option.name}</option>)} <FieldGroup>
</select> <Label>Location</Label>
<Select value={selectedLocation} onChange={e => setSelectedLocation(e.target.value)}>
{state.stations?.map((option: Station) => (
<option key={option.name} value={option.name}>{option.name}</option>
))}
</Select>
</FieldGroup>
<FieldGroup>
<Label>Show Schedule</Label>
<Input
type="number"
value={trainScheduleShow}
onChange={e => setTrainScheduleShow(parseInt(e.target.value))}
/>
min
</FieldGroup>
<FieldGroup>
<Label>Compute Delay</Label>
<Input
type="number"
value={trainDelayCompute}
onChange={e => setTrainDelayCompute(parseInt(e.target.value))}
/>
min
</FieldGroup>
<FieldGroup>
<Label>Compute Cancellation</Label>
<Input
type="number"
value={trainCancelCompute}
onChange={e => setTrainCancelCompute(parseInt(e.target.value))}
/>
min
</FieldGroup>
<div>
<Label>RSS Feed</Label>
<TextArea
value={rssFollow}
onChange={e => setRssFollow(e.target.value)}
/>
</div>
<Button onClick={() => setSettingOpened(false)}>Close</Button>
</SettingContainer>
</Pane> </Pane>
</> );
return ( return (
<> <>

14
src/components/Indicators.tsx
View File

@@ -5,7 +5,7 @@ import {mean} from "lodash";
import styled from "styled-components"; import styled from "styled-components";
import { Clock, AlertTriangle, XCircle } from "lucide-react"; import { Clock, AlertTriangle, XCircle } from "lucide-react";
import {accentColor} from "../styles"; import { accentColor } from "../styles";
export const IndicatorStyled = styled.div` export const IndicatorStyled = styled.div`
display: flex; display: flex;
@@ -56,17 +56,17 @@ const formatPercent = (num?: number) => {
}; };
export const Indicator = ({ state }: { state: State }) => { export const Indicator = ({ state }: { state: State }) => {
const inOneHour = state.departures?.filter(filterTrainHour(60)); const delayDepartures = state.departures?.filter(filterTrainHour(state.config.trainDelayCompute));
const inThreeHour = state.departures?.filter(filterTrainHour(-60 * 3)); const cancelledDepartures = state.departures?.filter(filterTrainHour(0, state.config.trainCancelCompute));
const averageDelayGeneral = mean(inOneHour?.map(d => parseInt(d.delay))); const averageDelayGeneral = mean(delayDepartures?.map(d => parseInt(d.delay)));
const averageDelayedOnly = mean( const averageDelayedOnly = mean(
inOneHour?.filter(d => parseInt(d.delay) !== 0)?.map(d => parseInt(d.delay)) delayDepartures?.filter(d => parseInt(d.delay) !== 0)?.map(d => parseInt(d.delay))
); );
const cancelled = const cancelled =
(inThreeHour?.filter(d => d?.canceled === '1')?.length || 0) / (cancelledDepartures?.filter(d => d?.canceled === '1')?.length || 0) /
(inThreeHour?.length || 1); (cancelledDepartures?.length || 1);
return ( return (
<IndicatorStyled> <IndicatorStyled>

1
src/components/NowTime.tsx
View File

@@ -20,7 +20,6 @@ export const TimeStyled = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-right: 1em; padding-right: 1em;
width: 40vh;
`; `;
export const NowTime = () => { export const NowTime = () => {

50
src/containers/RssWidget.tsx Normal file
View File

@@ -0,0 +1,50 @@
import type { Dispatch } from "react"
import type { Action, State } from "../state"
import styled from "styled-components";
import {accentColor} from "../styles";
export const NewsContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
background: #0b0c10;
color: #fff;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
font-family: "Inter", sans-serif;
max-width: 600px;
margin: 1rem auto;
`;
export const NewsHeader = styled.div`
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
`;
export const TitleLink = styled.a`
font-size: 1.25rem;
font-weight: 700;
color: ${accentColor};
text-decoration: none;
margin-right: 1rem;
`;
const RssArticle = (article: {title: string, link: string}) => {
return <NewsContainer>
<NewsHeader>{article.title}</NewsHeader>
<a href={article.link}>Read more</a>
</NewsContainer>
}
export const RssWidget = ({ state }: { state: State, dispatch: Dispatch<Action> }) => {
return <>
{state.rss?.map(rss => <RssArticle {...rss} />)}
</>
}

10
src/containers/TrainSchedule.tsx
View File

@@ -11,17 +11,15 @@ import { SpinnerDiamond } from 'spinners-react';
import type { DepartureType } from '../types/liveboard'; import type { DepartureType } from '../types/liveboard';
import { Indicator } from '../components/Indicators'; import { Indicator } from '../components/Indicators';
const showTrainsMinutes = 120; export const filterTrainHour = (delay: number, start: number = 0) => (departure: DepartureType) => {
export const filterTrainHour = (delay: number) => (departure: DepartureType) => {
const time = new Date(parseInt(departure.time) * 1000); const time = new Date(parseInt(departure.time) * 1000);
const now = new Date(); const now = new Date();
const h = time.getHours(); const h = time.getHours();
const m = time.getMinutes(); const m = time.getMinutes();
const nowInMinutes = (now.getHours() * 60) + now.getMinutes(); const nowInMinutes = (now.getHours() * 60) + now.getMinutes();
const minutes = h * 60 + m; const minutes = h * 60 + m;
return (nowInMinutes + delay) > minutes; return (nowInMinutes + delay) > minutes && (nowInMinutes + start ) < minutes;;
} }
type TrainScheduleProps = { type TrainScheduleProps = {
dispatch: Dispatch<Action>, dispatch: Dispatch<Action>,
@@ -30,7 +28,7 @@ type TrainScheduleProps = {
export const TrainSchedule = ({ state } : TrainScheduleProps) => { export const TrainSchedule = ({ state } : TrainScheduleProps) => {
const filteredDepartures = state.departures?.filter(filterTrainHour(showTrainsMinutes)) const filteredDepartures = state.departures?.filter(filterTrainHour(state.config.trainScheduleShow))
return <> return <>
<NowTime /> <NowTime />

1
src/hooks/index.tsx
View File

@@ -2,3 +2,4 @@ export * from './useLoadTrainSchedule';
export * from './useNewsApi'; export * from './useNewsApi';
export * from './useWeatherApi'; export * from './useWeatherApi';
export * from './useGiteaApi'; export * from './useGiteaApi';
export * from './useRssFeed';

6
src/hooks/useGiteaApi.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, type Dispatch } from "react"; import { type Dispatch } from "react";
import { actions, type Action, type State } from "../state"; import { actions, type Action, type State } from "../state";
import type {IssuesResponse} from "../types/issues"; import type {IssuesResponse} from "../types/issues";
@@ -23,9 +23,5 @@ export const useGiteaApi = ({ dispatch }: { state : State, dispatch: Dispatch<Ac
}) })
useEffect(() => {
reloadIssues();
}, [])
return { reloadIssues } return { reloadIssues }
} }

5
src/hooks/useLoadTrainSchedule.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, type Dispatch } from "react" import { type Dispatch } from "react"
import { actions, type Action, type State } from "../state" import { actions, type Action, type State } from "../state"
import { flatten, range } from 'lodash'; import { flatten, range } from 'lodash';
@@ -44,8 +44,5 @@ export const useLoadTrainSchedule = (state: State, dispatch: Dispatch<Action>) =
dispatch(actions.loadTrainScheduleError({ error: error as Error})) dispatch(actions.loadTrainScheduleError({ error: error as Error}))
} }
}) })
useEffect(() => {
reloadTrainSchedule()
}, [])
return { reloadTrainSchedule } return { reloadTrainSchedule }
} }

6
src/hooks/useNewsApi.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, type Dispatch } from "react" import { type Dispatch } from "react"
import { actions, type Action, type State } from "../state" import { actions, type Action, type State } from "../state"
import type {Article} from "../types/article" import type {Article} from "../types/article"
@@ -20,9 +20,5 @@ export const useNewsApi = ({dispatch}: UseNewsApiProps) => {
dispatch(actions.loadNewsError({ error: error as Error})); dispatch(actions.loadNewsError({ error: error as Error}));
} }
}) })
useEffect(() => {
reloadNews()
}, [])
return { reloadNews } return { reloadNews }
} }

60
src/hooks/useRssFeed.tsx Normal file
View File

@@ -0,0 +1,60 @@
import {flatten} from 'lodash';
import { actions, type Action, type RSS, type State } from '../state';
import type { Dispatch } from 'react';
export async function fetchAndParseRSS(url: string): Promise<RSS[]> {
const response = await fetch(`https://cors-anywhere.com/${url}`);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, "application/xml");
if (xmlDoc.getElementsByTagName('parsererror').length > 0) {
throw new Error("Failed to parse XML content. Check for valid RSS/XML format.");
}
const safeText = (selector: string, context: Element): string => {
const el = context.querySelector(selector);
return el?.textContent?.trim() ?? 'No Data';
};
const rssItems = xmlDoc.querySelectorAll('channel > item');
if (rssItems.length > 0) {
return Array.from(rssItems).map((item: Element): RSS => ({
title: safeText('title', item),
link: safeText('link', item)
}));
}
const atomEntries = xmlDoc.querySelectorAll('entry');
if (atomEntries.length > 0) {
return Array.from(atomEntries).map((entry: Element): RSS => {
const linkElement = entry.querySelector('link[rel="alternate"]') || entry.querySelector('link');
return {
title: safeText('title', entry),
link: linkElement?.getAttribute('href') ?? safeText('link', entry) // Prefer 'href' attribute
};
});
}
// If neither RSS nor Atom format is detected
return [];
}
export const useRssFeed = ({ state, dispatch}: { state: State, dispatch: Dispatch<Action> }) => {
const reloadRssFeed = (async () => {
const answer = await Promise.all(
state.config.rssFollow.split('/n').map((url: string) => fetchAndParseRSS(url))
);
const feeds: RSS[] = flatten(answer);
dispatch(actions.loadRSSFeedsSuccess({ feeds }))
})
return { reloadRssFeed }
}

5
src/hooks/useWeatherApi.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, type Dispatch } from "react" import { type Dispatch } from "react"
import { actions, type Action, type State } from "../state" import { actions, type Action, type State } from "../state"
import type {WeatherData} from "../types/weather"; import type {WeatherData} from "../types/weather";
@@ -21,8 +21,5 @@ export const useWeatherApi = ({ dispatch, state }: UseWeatherApiProps) => {
dispatch(actions.loadWeatherError({ error: error as Error })); dispatch(actions.loadWeatherError({ error: error as Error }));
} }
}); });
useEffect(() => {
reloadWeather();
}, [])
return { reloadWeather } return { reloadWeather }
} }

24
src/state/actions/actions.ts
View File

@@ -12,6 +12,10 @@ import {
loadGiteaIssueSuccess, loadGiteaIssueSuccess,
loadGiteaIssue, loadGiteaIssue,
setSelectedLocation, setSelectedLocation,
setConfig,
loadRssFeeds,
loadRssFeedsSuccess,
loadRssFeedsError,
} from './consts' } from './consts'
import { import {
@@ -28,6 +32,10 @@ import {
type LoadGiteaIssueSuccess, type LoadGiteaIssueSuccess,
type LoadGiteaIssue, type LoadGiteaIssue,
type SetSelectedLocation, type SetSelectedLocation,
type SetConfig,
type LoadRssFeeds,
type LoadRssFeedsSuccess,
type LoadRssFeedsError,
} from './types'; } from './types';
export const actions = { export const actions = {
@@ -83,4 +91,20 @@ export const actions = {
type: setSelectedLocation, type: setSelectedLocation,
...args ...args
} as SetSelectedLocation), } as SetSelectedLocation),
setConfig: (args: Omit<SetConfig, "type">) => ({
type: setConfig,
...args
} as SetConfig),
loadRSSFeeds: (args: Omit<LoadRssFeeds, "type">) => ({
type: loadRssFeeds,
...args
} as LoadRssFeeds),
loadRSSFeedsSuccess: (args: Omit<LoadRssFeedsSuccess, "type">) => ({
type: loadRssFeedsSuccess,
...args
} as LoadRssFeedsSuccess),
loadRSSFeedsError: (args: Omit<LoadRssFeedsError, "type">) => ({
type: loadRssFeedsError,
...args
} as LoadRssFeedsError),
} }

6
src/state/actions/consts.ts
View File

@@ -17,3 +17,9 @@ export const loadGiteaIssueSuccess: ActionType = 'loadGiteaIssueSuccess';
export const loadGiteaIssueError: ActionType = 'loadGiteaIssueError'; export const loadGiteaIssueError: ActionType = 'loadGiteaIssueError';
export const setSelectedLocation: ActionType = 'setSelectedLocation'; export const setSelectedLocation: ActionType = 'setSelectedLocation';
export const setConfig: ActionType = 'setConfig';
export const loadRssFeeds: ActionType = 'RssFeeds';
export const loadRssFeedsSuccess: ActionType = 'RssFeedsSuccess';
export const loadRssFeedsError: ActionType = 'RssFeedsError';

24
src/state/actions/types.ts
View File

@@ -5,6 +5,7 @@ import type {Article} from '../../types/article';
import type {IssuesResponse} from '../../types/issues'; import type {IssuesResponse} from '../../types/issues';
import type { DepartureType } from '../../types/liveboard'; import type { DepartureType } from '../../types/liveboard';
import type {WeatherData} from '../../types/weather'; import type {WeatherData} from '../../types/weather';
import type {RSS} from '../state';
import { import {
loadTrainSchedule, loadTrainSchedule,
loadTrainScheduleError, loadTrainScheduleError,
@@ -19,6 +20,10 @@ import {
loadGiteaIssueError, loadGiteaIssueError,
loadGiteaIssue, loadGiteaIssue,
setSelectedLocation, setSelectedLocation,
setConfig,
loadRssFeeds,
loadRssFeedsSuccess,
loadRssFeedsError,
} from './consts' } from './consts'
export type Action = { export type Action = {
@@ -88,3 +93,22 @@ export type SetSelectedLocation = {
location: string, location: string,
} }
export type SetConfig = {
type: typeof setConfig,
setting: string,
value: string | number,
}
export type LoadRssFeeds = {
type: typeof loadRssFeeds,
}
export type LoadRssFeedsSuccess = {
type: typeof loadRssFeedsSuccess,
feeds: RSS[]
}
export type LoadRssFeedsError = {
type: typeof loadRssFeedsError,
feeds: RSS[]
}

11
src/state/initialState.ts
View File

@@ -14,5 +14,14 @@ export const initialState: State = {
issuesError: undefined, issuesError: undefined,
issuesLoading: false, issuesLoading: false,
stations: undefined, stations: undefined,
selectedLocation: 'Nivelles' selectedLocation: 'Nivelles',
config: {
rssFollow: '',
trainCancelCompute: -180,
trainDelayCompute: 60,
trainScheduleShow: 120
},
rss: undefined,
rssLoading: false,
rssError: undefined
}; };

33
src/state/reducer.ts
View File

@@ -24,6 +24,11 @@ import {
type LoadGiteaIssueError, type LoadGiteaIssueError,
setSelectedLocation, setSelectedLocation,
type SetSelectedLocation, type SetSelectedLocation,
setConfig,
type LoadRssFeedsSuccess,
type SetConfig,
loadRssFeeds,
loadRssFeedsSuccess,
} from './actions'; } from './actions';
@@ -108,6 +113,25 @@ export const reducerInner = (state: State, action: Action): State => {
issuesLoading: false, issuesLoading: false,
} }
} }
else if(action.type === loadGiteaIssueError) {
return {
...state,
issuesLoading: false,
issuesError: (action as LoadGiteaIssueError).error,
}
}
else if(action.type === loadRssFeeds) {
return {
...state,
rssLoading: true,
}
}
else if(action.type === loadRssFeedsSuccess) {
return {
...state,
rss: (action as LoadRssFeedsSuccess).feeds,
}
}
else if(action.type === loadGiteaIssueError) { else if(action.type === loadGiteaIssueError) {
return { return {
...state, ...state,
@@ -121,6 +145,15 @@ export const reducerInner = (state: State, action: Action): State => {
selectedLocation: (action as SetSelectedLocation).location, selectedLocation: (action as SetSelectedLocation).location,
} }
} }
else if(action.type === setConfig) {
return {
...state,
config: {
...state.config,
[(action as SetConfig).setting]: (action as SetConfig).value
}
}
}
return state; return state;
} }

18
src/state/state.ts
View File

@@ -4,6 +4,18 @@ import type {IssuesResponse} from "../types/issues";
import type { DepartureType } from "../types/liveboard"; import type { DepartureType } from "../types/liveboard";
import type { WeatherData } from "../types/weather"; import type { WeatherData } from "../types/weather";
export type RSS = {
title: string,
link: string
}
export type Config = {
trainScheduleShow: number,
trainDelayCompute: number,
trainCancelCompute: number,
rssFollow: string,
}
export type State = { export type State = {
trainScheduleLoading: boolean, trainScheduleLoading: boolean,
departures: DepartureType[] | undefined, departures: DepartureType[] | undefined,
@@ -23,4 +35,10 @@ export type State = {
stations: undefined | Station[], stations: undefined | Station[],
selectedLocation: string, selectedLocation: string,
config: Config,
rss: RSS[] | undefined,
rssLoading: boolean,
rssError: Error | undefined,
} }