diff --git a/src/components/StopTitle.js b/src/components/StopTitle.js new file mode 100644 index 0000000..d2bf05c --- /dev/null +++ b/src/components/StopTitle.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import './css/StopTitle.css'; + +class StopTitle extends Component { + render() { + return ( +
+

{this.props.stop.name}

+
+

{this.props.stop.locations[0]}

+ +
+
+ ); + } +} + +export default StopTitle; \ No newline at end of file diff --git a/src/components/TrafficEntry.js b/src/components/TrafficEntry.js new file mode 100644 index 0000000..63829ea --- /dev/null +++ b/src/components/TrafficEntry.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react'; + +import './css/TrafficInfo.css'; + +import busIcon from '../img/bus.svg'; +import warningIcon from '../img/warning.svg'; + +class TrafficEntry extends Component { + render() { + let trafficInfo = this.props.departure.info; + let lineInterference = trafficInfo != "" && trafficInfo != null; + let infoElem = <>; + + if (trafficInfo != "" && trafficInfo != null) + infoElem =

{trafficInfo} Visa mer

+ + return ( +
+
+
+ {this.props.departure.time} + {lineInterference && + + } +
+
+
+ {this.props.departure.lineName} + + {this.props.departure.destination} +
+ {infoElem} +
+
+ + {lineInterference && + + } +
+ ); + } +} + +export default TrafficEntry; \ No newline at end of file diff --git a/src/components/TrafficList.js b/src/components/TrafficList.js new file mode 100644 index 0000000..d96e079 --- /dev/null +++ b/src/components/TrafficList.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +import TrafficEntry from './TrafficEntry.js'; + +import './css/TrafficInfo.css'; + +class TrafficList extends Component { + render() { + let entries = []; + + this.props.departures.forEach(departure => { + entries.push( + + ); + }); + + // Add separator between every element + const intersperse = (arr, sep) => arr.reduce((a,v)=>[...a,v,sep],[]).slice(0,-1); + entries = intersperse(entries, (
)); + + // Add separator after the last element + entries.push(
); + + return ( +
+ {entries.map(element => { + return element + })} +
+ ); + } +} + +export default TrafficList; \ No newline at end of file diff --git a/src/components/css/StopTitle.css b/src/components/css/StopTitle.css new file mode 100644 index 0000000..3c80e0d --- /dev/null +++ b/src/components/css/StopTitle.css @@ -0,0 +1,39 @@ +#stopTitle { + text-align: left; + background: white; + border-radius: var(--borderRadius); + box-shadow: var(--boxShadow); + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 0 5vw; +} + +#stopTitle h1, #stopTitle h3 { + font-weight: 100; +} + +#stopTitle div { + display: flex; + flex-direction: row; +} + +#stopTitle h3 { + color: rgba(0, 0, 0, 0.4); +} + +#stopTitle button { + width: auto; + height: 100%; + box-shadow: none; + background: rgba(0, 0, 0, 0.2); + display: block; + flex-flow: row; + margin-left: 10px; + padding: 0 2.5vw; + border-radius: calc(var(--topMenuHeight) / 15); +} + +#stopTitle button:active { + background: rgba(0, 0, 0, 0.3); +} \ No newline at end of file diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css new file mode 100644 index 0000000..088bc6c --- /dev/null +++ b/src/components/css/TrafficInfo.css @@ -0,0 +1,84 @@ +#trafficList { + height: 100%; + margin-top: 40px; + background: white; +} + +.trafficEntry { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + width: 100vw; + padding: 6vw 0; + background: white; +} + +.trafficEntry div { + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-bottom: 8px; +} + +.trafficEntry div p { + text-align: left; + font-size: 3.5vw; + padding: 3vw 0; +} + +.trafficEntry div div { + display: flex; + flex-direction: column; +} + +.timeColumn { + flex-basis: 15%; + justify-content: flex-start; + align-items: center; +} + +.timeColumn img { + width: 20px; +} + +.lineColumn { + flex-basis: 75%; +} + +.lineColumn img { + width: 30px; + margin-right: 10px; +} + +.trafficEntry div div div { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; +} + +.lineName { + background: var(--colorLine); + color: white; + font-size: 6vw; + font-weight: 100; + margin-right: 10px; + padding: 1vw 4vw; +} + +.destination { + font-size: 100%; + text-align: left; +} + +.trafficEntry button { + width: 90%; + font-size: 4vw; + font-weight: bold; + color: var(--colorVT1); + padding: 4vw 0; + border-radius: var(--borderRadius); + box-shadow: var(--boxShadow); +} \ No newline at end of file diff --git a/src/components/pages/TrafficInfo.js b/src/components/pages/TrafficInfo.js index 284e9ad..803d04e 100644 --- a/src/components/pages/TrafficInfo.js +++ b/src/components/pages/TrafficInfo.js @@ -1,14 +1,35 @@ import React, { Component } from 'react'; import Header from '../Header.js'; +import TopMenu from '../TopMenu.js'; import MainArea from '../MainArea.js'; +import StopTitle from '../StopTitle.js'; +import TrafficList from '../TrafficList.js'; + +import Stop from '../../classes/Stop.js'; +import Departure from '../../classes/Departure.js'; class TrafficInfo extends Component { render() { + let testStop = + new Stop( + "Lemmingsgatan", + ["Läge A", "Läge B", "Läge C"], + [ + new Departure("519", "Mot Heden", "11:59", "Trafikolycka vid Partille Centrum."), + new Departure("58", "Mot Västra Eriksberg", "12:07") + ], + ); + return ( <>
- + + + + + + ); } diff --git a/src/img/bus.svg b/src/img/bus.svg new file mode 100644 index 0000000..c2c841e --- /dev/null +++ b/src/img/bus.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/warning.svg b/src/img/warning.svg new file mode 100644 index 0000000..3395e7a --- /dev/null +++ b/src/img/warning.svg @@ -0,0 +1,15 @@ + + + + + + + + + +