diff --git a/package.json b/package.json index 0a1c527..2e923d6 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", "@testing-library/jest-dom": "^5.11.4", diff --git a/src/App.css b/src/App.css index 06bd737..acd47f6 100644 --- a/src/App.css +++ b/src/App.css @@ -7,16 +7,6 @@ body { margin-bottom: 2rem; } -.placeholder:empty:before { - content: "\200b"; -} - -.placeholder { - display: inline-block; - width: 50px; - background-color: #c9c9c9; -} - footer { position: fixed; bottom: 0; diff --git a/src/App.tsx b/src/App.tsx index 98ae4a9..71a4734 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,19 @@ import React from 'react'; import './App.css'; -import Tcl, {ILigne} from "./Tcl"; +import Tcl, {ILigne, IStop} from "./Tcl"; import {clearInterval, setInterval} from "timers"; -import {Col, Container, Dropdown, DropdownButton, Row} from "react-bootstrap"; +import {Button, Col, Container, Row} from "react-bootstrap"; import {IStationInfo, IStationsInfoWrapper, IStationsStatusWrapper, IVelovStation} from "./IVelov"; import Velov from "./Velov"; interface ITclFilteredApi { passages: ILigne[]; + stop: IStop; } interface IAppState { - passages: ILigne[]; + tcl?: ITclFilteredApi; refreshDate?: string; stations: IVelovStation[]; } @@ -21,6 +22,7 @@ class App extends React.Component<{}, IAppState> { timerId?: ReturnType; refreshSeconds: number; monitoredVelovStationIds: string[] = []; + monitoredTclStopId: string; constructor(props: {}) { super(props); @@ -31,26 +33,23 @@ class App extends React.Component<{}, IAppState> { if (velovStationIds) { this.monitoredVelovStationIds = velovStationIds.split(";"); } + this.monitoredTclStopId = urlParams.get("tclStopId") || "290"; if (this.refreshSeconds <= 5) { this.refreshSeconds = 60; } - this.state = {passages: [{ligne: undefined, delais: [undefined]}], stations: []}; + this.state = {stations: []}; } render() { return
- {this.state.passages.map((ligne) => )} - {this.state.stations.map((station) => )} + {this.state.tcl?.passages.map((ligne) => )} + {this.state.stations.map((station) => )} - - Data - Full page - + @@ -91,7 +90,7 @@ class App extends React.Component<{}, IAppState> { private refresh() { const headers = new Headers(); headers.set("Authorization", `Basic ${process.env.REACT_APP_TCL_AUTH}`); - const tclPromise = http("https://tcl.augendre.info/stop/290", { + const tclPromise = http(`https://tcl.augendre.info/stop/${this.monitoredTclStopId}`, { method: "GET", headers: headers }); @@ -126,7 +125,7 @@ class App extends React.Component<{}, IAppState> { } this.setState({ refreshDate: new Date().toLocaleString("fr-fr"), - passages: tcl.passages, + tcl: tcl, stations: stations, }); }) diff --git a/src/Tcl.tsx b/src/Tcl.tsx index 465fe88..fb854a4 100644 --- a/src/Tcl.tsx +++ b/src/Tcl.tsx @@ -1,14 +1,20 @@ import React from "react"; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -import {faBus} from '@fortawesome/free-solid-svg-icons' +import {faBus, faDirections} from '@fortawesome/free-solid-svg-icons' +import {faClock} from '@fortawesome/free-regular-svg-icons' import {Card, Col, ListGroup} from "react-bootstrap"; -import {placeholder} from "./utils"; export type PassageType = string | undefined; +export interface IStop { + id: number; + name: string; +} + export interface ILigne { - ligne?: string; + ligne: string; delais: PassageType[]; + destination: IStop; } export default class Tcl extends React.Component { @@ -16,33 +22,17 @@ export default class Tcl extends React.Component { return - {placeholder(this.props.ligne)} + {this.props.ligne} - + + + {this.props.destination.name} + + {this.props.delais.map((passage, index) => + {passage} + )} + } } - -interface IPassagesProps { - passages: PassageType[]; -} - -class Passages extends React.Component { - render() { - return - {this.props.passages?.map((passage, index) => )} - - } -} - - -interface IPassageProps { - passage: PassageType; -} - -class Passage extends React.Component { - render() { - return {placeholder(this.props.passage)} - } -} diff --git a/src/utils.tsx b/src/utils.tsx deleted file mode 100644 index a1d1e2a..0000000 --- a/src/utils.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -export function placeholder(value?: string) { - if (value === undefined) { - return - } else { - return value; - } -} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b5aafd0..9d50417 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1254,6 +1254,13 @@ dependencies: "@fortawesome/fontawesome-common-types" "^0.2.36" +"@fortawesome/free-regular-svg-icons@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02" + integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + "@fortawesome/free-solid-svg-icons@^5.15.4": version "5.15.4" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"