Add content to Traffic Info page

src/components/StopTitle.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import './css/StopTitle.css';
+
+class StopTitle extends Component {
+    render() {
+        return (
+            <div id="stopTitle">
+                <h1>{this.props.stop.name}</h1>
+                <div>
+                    <h3>{this.props.stop.locations[0]}</h3>
+                    <button>Byt Läge</button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default StopTitle;

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 = <p>{trafficInfo} <u>Visa mer</u></p>
+
+        return (
+            <div class="trafficEntry">
+                <div>
+                    <div class="timeColumn">
+                        <span>{this.props.departure.time}</span>
+                        {lineInterference &&
+                                <img src={warningIcon}></img>
+                        }
+                    </div>
+                    <div class="lineColumn">
+                        <div>
+                            <span class="lineName">{this.props.departure.lineName}</span>
+                            <img src={busIcon}></img>
+                            <span class="destination">{this.props.departure.destination}</span>
+                        </div>
+                        {infoElem}
+                    </div>
+                </div>
+
+                {lineInterference &&
+                    <button>Hitta annan resväg</button>
+                }
+            </div>
+        );
+    }
+}
+
+export default TrafficEntry;

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(
+                <TrafficEntry departure={departure} />
+            );
+        });
+
+        // Add separator between every element
+        const intersperse = (arr, sep) => arr.reduce((a,v)=>[...a,v,sep],[]).slice(0,-1);
+        entries = intersperse(entries, (<hr />));
+
+        // Add separator after the last element
+        entries.push(<hr />);
+
+        return (
+            <div id="trafficList">
+                {entries.map(element => {     
+                    return element 
+                })}
+            </div>
+        );
+    }
+}
+
+export default TrafficList;

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);
+}

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);
+}

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 (
             <>
                 <Header title="Trafikinfo" />
-                <MainArea />
+                <TopMenu>
+                    <StopTitle stop={testStop} />
+                </TopMenu>
+                <MainArea>
+                    <TrafficList departures={testStop.departures} />
+                </MainArea>
             </>
         );
     }