Merge branch 'main' into we-VT-API-Access-Token-tests

src/components/BottomMenu.js

@@ -1,13 +1,33 @@
-import './css/BottomMenu.css';
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+import MenuButton from './MenuButton';
+
+import './css/BottomMenu.css';
+import ticketsIcon from '../img/tickets.svg';
+import ticketsBuyIcon from '../img/tickets+.svg';
+import travelIcon from '../img/tram.svg';
+import trafficIcon from '../img/traffic.svg';
 
 class BottomMenu extends Component {
     render() {
         return (
             <div id="bottomMenu">
-                <button>Biljetter</button>
-                <button>Köp biljett</button>
-                <button>Reseplanering</button>
+                <Link to="/tickets">
+                    <MenuButton label="Biljetter" icon={ticketsIcon}/>
+                </Link>
+                
+                <Link to="/ticketsBuy">
+                    <MenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
+                </Link>
+
+                <Link to="/travel">
+                    <MenuButton label="Reseplanering" icon={travelIcon}/>
+                </Link>
+
+                <Link to="/traffic">
+                    <MenuButton label="Trafikinfo" icon={trafficIcon}/>
+                </Link>
             </div>
         );
     }

src/components/Header.js

@@ -1,11 +1,13 @@
-import './css/Header.css';
 import React, { Component } from 'react';
+import './css/Header.css';
+import navIcon from '../img/menu.svg'
 
 class Header extends Component {
     render() {
         return (
             <header>
-                <button id="navDrawBtn"></button>
+                <button id="navBtn"><img src={navIcon} /></button>
+                <h1 id="pageTitle">{this.props.title}</h1>
             </header>
         );
     }

src/components/MainArea.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import './css/MainArea.css';
+
+class MainArea extends Component {
+    render() {
+        return (
+            <main>
+                {this.props.children}
+            </main>
+        );
+    }
+}
+
+export default MainArea;

src/components/MenuButton.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class MenuButton extends Component {
+    render() {
+        if (this.props.childOrderReverse) {
+            return (
+                <button>
+                    <span>{this.props.label}</span>
+                    <img src={this.props.icon}/>
+                </button>
+            );
+        } else {
+            return (
+                <button>
+                    <img src={this.props.icon}/>
+                    <span>{this.props.label}</span>
+                </button>
+            );
+        }
+    }
+}
+
+export default MenuButton;

src/components/PageArea.js

@@ -1,12 +0,0 @@
-import './css/PageArea.css';
-import React, { Component } from 'react';
-
-class PageArea extends Component {
-    render() {
-        return (
-            <div id="pageArea"></div>
-        );
-    }
-}
-
-export default PageArea;

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/TopMenu.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import './css/TopMenu.css';
+
+class TopMenu extends Component {
+    render() {
+        return (
+            <div id="topMenu">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export default TopMenu;

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/TripSelector.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class TripSelector extends Component {
+    render() {
+        return (
+            <form>
+                <label>Från:</label>
+                <input type="text" placeholder="Hållplats/Adress/Plats" />
+                <hr/>
+                <label for="lname">Till:</label>
+                <input type="text" placeholder="Hållplats/Adress/Plats" />
+            </form>
+        );
+    }
+}
+
+export default TripSelector;

src/components/css/BottomMenu.css

@@ -1,18 +1,37 @@
 #bottomMenu {
     width: 100%;
-    height: 8vh;
-    background: lightcoral;
+    height: 9vh;
+    min-height: 60px;
+    background: white;
     display: flex;
     justify-content: space-evenly;
+    border-top: 2px solid rgba(0, 0, 0, 0.05);
+}
+
+#bottomMenu a {
+    display: contents;
+    text-decoration: none;
 }
 
 #bottomMenu button {
     background: none;
     border: none;
     font-size: 0.9em;
-    margin-bottom: 5px;
     flex-basis: calc(100%/3);
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    align-items: center;
     justify-content: space-evenly;
+}
+
+#bottomMenu button:active {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+#bottomMenu button span {
+    color: black;
+}
+
+#bottomMenu button img {
+    width: 25px;
 }

src/components/css/Header.css

@@ -1,5 +1,21 @@
 header {
     width: 100vw;
-    height: 15vh;
-    background: burlywood;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px 15px 15vh 15px;
+    top: 0;
+    background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
+}
+
+#navBtn img {
+    height: 1.4em;
+}
+
+#pageTitle {
+    font-size: 1.2em;
+    letter-spacing: 0.3px;
+    color: white;
+    font-family: 'Roboto Light', sans-serif;
+    padding: 0 0 0 25px;
 }

src/components/css/MainArea.css

@@ -0,0 +1,7 @@
+main {
+    width: 100vw;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-evenly;
+}

src/components/css/PageArea.css

@@ -1,4 +0,0 @@
-#pageArea {
-    width: 100vw;
-    flex: 1 1 auto;
-}

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/TopMenu.css

@@ -0,0 +1,32 @@
+#topMenu {
+    width: 100vw;
+    height: var(--topMenuHeight);
+    margin-top: calc(var(--topMenuHeight) / -2);
+    display: inline-flex;
+    justify-content: space-evenly;
+}
+
+#topMenu button {
+    width: var(--topMenuHeight);
+    height: calc(var(--topMenuHeight) / 1.3);
+    display: flex;
+    flex-flow: column;
+    justify-content: space-evenly;
+    background: white;
+    border-radius: calc(var(--topMenuHeight) / 15);
+    box-shadow: var(--boxShadow);
+}
+
+#topMenu button:active {
+    background: rgb(235, 235, 235);
+}
+
+#topMenu img {
+    width: 100%;
+    height: 40%;
+}
+
+#topMenu button span {
+    width: 100%;
+    font-size: calc(var(--topMenuHeight) / 7);
+}

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/css/TripSelector.css

@@ -0,0 +1,32 @@
+form {
+    width: 65vw;
+    height: calc(var(--topMenuHeight));
+    background: white;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    font-size: 15px;
+    padding: 1vw 2vw;
+    border-radius: var(--borderRadius);
+    box-shadow: var(--boxShadow);
+}
+
+label {
+    flex-basis: 20%;
+    height: 15px;
+}
+
+input {
+    flex-basis: 70%;
+    height: 15px;
+    border: none;
+}
+
+hr {
+    --width: 90%;
+
+    flex-basis: var(--width);
+    margin: 0 calc((100% - var(--width)) / 2);
+    opacity: 0.5;
+}

src/components/pages/Tickets.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js';
+import MainArea from '../MainArea.js';
+
+class Tickets extends Component {
+    render() {
+        return (
+            <>
+                <Header title="Biljetter" />
+                <MainArea>
+                    <p>Du har inga biljetter</p>
+                </MainArea>
+            </>
+        );
+    }
+}
+
+export default Tickets;

src/components/pages/TicketsBuy.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
+import MenuButton from '../MenuButton.js';
+import MainArea from '../MainArea.js';
+
+import clockIcon from '../../img/clock.svg';
+import calendarIcon from '../../img/calendar.svg';
+import recurringIcon from '../../img/redo.svg';
+
+class TicketsBuy extends Component {
+    render() {
+        return ( 
+            <>
+                <Header title="Köp biljett" />
+                <TopMenu>
+                    <MenuButton label="Enkelbiljett" icon={clockIcon} />
+                    <MenuButton label="Periodbiljett" icon={calendarIcon} />
+                    <MenuButton label="Dygnsbiljett" icon={recurringIcon} />
+                </TopMenu>
+                <MainArea>
+                    <p>Du har inga tidigare köp</p>
+                </MainArea>
+            </>
+        );
+    }
+}
+
+export default TicketsBuy;

src/components/pages/TrafficInfo.js

@@ -0,0 +1,38 @@
+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" />
+                <TopMenu>
+                    <StopTitle stop={testStop} />
+                </TopMenu>
+                <MainArea>
+                    <TrafficList departures={testStop.departures} />
+                </MainArea>
+            </>
+        );
+    }
+}
+
+export default TrafficInfo;

src/components/pages/Travel.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
+import MainArea from '../MainArea.js';
+import TripSelector from '../TripSelector.js';
+
+import '../css/TripSelector.css';
+
+class Travel extends Component {
+    render() {
+        return (
+            <>
+                <Header title="Reseplanering" />
+                <TopMenu>
+                    <TripSelector />
+                </TopMenu>
+                <MainArea>
+                </MainArea>
+            </>
+        );
+    }
+}
+
+export default Travel;