Add content to Traffic Info page

This commit is contained in:
André Wahlberg 2020-11-26 21:42:30 +01:00
parent 7cde8a62ba
commit 771b5a5509
8 changed files with 328 additions and 1 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

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

View File

@ -1,14 +1,35 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Header from '../Header.js'; import Header from '../Header.js';
import TopMenu from '../TopMenu.js';
import MainArea from '../MainArea.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 { class TrafficInfo extends Component {
render() { 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 ( return (
<> <>
<Header title="Trafikinfo" /> <Header title="Trafikinfo" />
<MainArea /> <TopMenu>
<StopTitle stop={testStop} />
</TopMenu>
<MainArea>
<TrafficList departures={testStop.departures} />
</MainArea>
</> </>
); );
} }

71
src/img/bus.svg Normal file
View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M53.333,234.667v-64C59.221,170.667,64,165.888,64,160s-4.779-10.667-10.667-10.667C23.915,149.333,0,173.269,0,202.667
V224c0,17.643,14.357,32,32,32h21.333C59.221,256,64,251.221,64,245.333S59.221,234.667,53.333,234.667z"/>
</g>
</g>
<g>
<g>
<path d="M458.667,149.333c-5.888,0-10.667,4.779-10.667,10.667s4.779,10.667,10.667,10.667v64
c-5.888,0-10.667,4.779-10.667,10.667S452.779,256,458.667,256H480c17.643,0,32-14.357,32-32v-21.333
C512,173.269,488.085,149.333,458.667,149.333z"/>
</g>
</g>
<g>
<g>
<path d="M181.333,448c-5.888,0-10.667,4.779-10.667,10.667h-64c0-5.888-4.779-10.667-10.667-10.667s-10.667,4.779-10.667,10.667
V480c0,17.643,14.357,32,32,32H160c17.643,0,32-14.357,32-32v-21.333C192,452.779,187.221,448,181.333,448z"/>
</g>
</g>
<g>
<g>
<path d="M416,448c-5.888,0-10.667,4.779-10.667,10.667h-64c0-5.888-4.779-10.667-10.667-10.667S320,452.779,320,458.667V480
c0,17.643,14.357,32,32,32h42.667c17.643,0,32-14.357,32-32v-21.333C426.667,452.779,421.888,448,416,448z"/>
</g>
</g>
<g>
<g>
<path d="M416,0H96C66.581,0,42.667,23.936,42.667,53.333V416c0,29.397,23.915,53.333,53.333,53.333h320
c29.419,0,53.333-23.936,53.333-53.333V53.333C469.333,23.936,445.419,0,416,0z M138.667,42.667h234.667c17.643,0,32,14.357,32,32
c0,17.643-14.357,32-32,32H138.667c-17.643,0-32-14.357-32-32C106.667,57.024,121.024,42.667,138.667,42.667z M138.667,405.333
c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32c17.643,0,32,14.357,32,32C170.667,390.976,156.309,405.333,138.667,405.333z
M373.333,405.333c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32c17.643,0,32,14.357,32,32
C405.333,390.976,390.976,405.333,373.333,405.333z M426.667,266.667c0,17.643-14.357,32-32,32H117.333c-17.643,0-32-14.357-32-32
V160c0-17.643,14.357-32,32-32h277.333c17.643,0,32,14.357,32,32V266.667z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

15
src/img/warning.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#ED556C;}
</style>
<g>
<g>
<path class="st0" d="M501.4,384L320.5,51.5c-29.1-48.9-99.9-49-129,0L10.6,384c-29.7,50,6.3,113.3,64.5,113.3h361.7
C495,497.2,531.1,434,501.4,384z M256,437.2c-16.5,0-30-13.5-30-30s13.5-30,30-30s30,13.5,30,30S272.5,437.2,256,437.2z
M286,317.2c0,16.5-13.5,30-30,30s-30-13.5-30-30v-150c0-16.5,13.5-30,30-30s30,13.5,30,30V317.2z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 765 B