Add content to Traffic Info page
This commit is contained in:
André Wahlberg
parent
7cde8a62ba
commit
771b5a5509
19
src/components/StopTitle.js
Normal file
19
src/components/StopTitle.js
Normal 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;
|
||||||
44
src/components/TrafficEntry.js
Normal file
44
src/components/TrafficEntry.js
Normal 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;
|
||||||
34
src/components/TrafficList.js
Normal file
34
src/components/TrafficList.js
Normal 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;
|
||||||
39
src/components/css/StopTitle.css
Normal file
39
src/components/css/StopTitle.css
Normal 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);
|
||||||
|
}
|
||||||
84
src/components/css/TrafficInfo.css
Normal file
84
src/components/css/TrafficInfo.css
Normal 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);
|
||||||
|
}
|
||||||
@ -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
71
src/img/bus.svg
Normal 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
15
src/img/warning.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user