Merge branch 'aw-disruption-control' into main
This commit is contained in:
commit
4ce76dbe90
39
README.md
39
README.md
@ -25,20 +25,37 @@ Tutorials för React går att hitta [här](https://www.youtube.com/playlist?list
|
|||||||
* ``public/index.html`` är den enda HTML-fil vi kommer ha i appen, detta eftersom vi bygger en s.k. SPA (Single Page Application). Man ändrar oftast inget i denna fil utöver möjligtvis innehållet i ``<head>``, detta eftersom React hanterar hela vårt UI.
|
* ``public/index.html`` är den enda HTML-fil vi kommer ha i appen, detta eftersom vi bygger en s.k. SPA (Single Page Application). Man ändrar oftast inget i denna fil utöver möjligtvis innehållet i ``<head>``, detta eftersom React hanterar hela vårt UI.
|
||||||
* Ursprungspunkten för React är ``src/index.js``.
|
* Ursprungspunkten för React är ``src/index.js``.
|
||||||
|
|
||||||
<!--
|
|
||||||
## Upplägg
|
## Upplägg
|
||||||
``` mermaid
|
```mermaid
|
||||||
|
|
||||||
classDiagram
|
classDiagram
|
||||||
|
class User
|
||||||
|
User : String deviceId
|
||||||
|
User : Coordinates location
|
||||||
|
User : nearbyStops()
|
||||||
|
|
||||||
class User
|
class Coordinates
|
||||||
User : Subscription[] subs
|
Coordinates : Float lon
|
||||||
User : Location loc
|
Coordinates : Float lat
|
||||||
|
|
||||||
class Line
|
class Stop
|
||||||
|
Stop : String name
|
||||||
|
Stop : Track[] locations
|
||||||
|
Stop : Departure[] departures
|
||||||
|
|
||||||
class Subscription
|
class Departure
|
||||||
Subscription : Line line
|
Departure : String lineName
|
||||||
|
Departure : Stop finalStop
|
||||||
|
Departure : String time
|
||||||
|
Departure : String trafficInfo
|
||||||
|
|
||||||
```
|
class Track
|
||||||
-->
|
Track : String name
|
||||||
|
|
||||||
|
|
||||||
|
User <.. Coordinates
|
||||||
|
User <.. Stop
|
||||||
|
Stop <.. Departure
|
||||||
|
Departure <.. Stop
|
||||||
|
Stop <.. Track
|
||||||
|
```
|
15
src/classes/Coordinates.js
Normal file
15
src/classes/Coordinates.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/*
|
||||||
|
Denna klass är en modell för platskoordinater.
|
||||||
|
|
||||||
|
lon : Float (Longitud)
|
||||||
|
lat : Float (Latitud)
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Coordinates {
|
||||||
|
constructor(lon, lat) {
|
||||||
|
this.lon = lon;
|
||||||
|
this.lat = lat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Coordinates;
|
@ -2,17 +2,17 @@
|
|||||||
Denna klass är en modell för avgångar.
|
Denna klass är en modell för avgångar.
|
||||||
|
|
||||||
lineName : String (Linjenamnet)
|
lineName : String (Linjenamnet)
|
||||||
destination : String (Exempelvis "Mot Heden")
|
finalStop : Stop (Ändhållplats)
|
||||||
time : String (Avgångstid)
|
time : String (Avgångstid)
|
||||||
info : String (Trafikinformation)
|
trafficInfo : String (Trafikinformation)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Departure {
|
class Departure {
|
||||||
constructor(lineName, destination, time, info) {
|
constructor(lineName, finalStop, time, trafficInfo) {
|
||||||
this.lineName = lineName;
|
this.lineName = lineName;
|
||||||
this.destination = destination;
|
this.finalStop = finalStop;
|
||||||
this.time = time;
|
this.time = time;
|
||||||
this.info = info;
|
this.trafficInfo = trafficInfo;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
Denna klass är en modell för hållplatser.
|
Denna klass är en modell för hållplatser.
|
||||||
|
|
||||||
name : String (Hållplatsens namn)
|
name : String (Hållplatsens namn)
|
||||||
locations : String[] (Möjliga lägen)
|
locations : Track[] (Möjliga lägen)
|
||||||
departures : Departure[] (Avgångar från hållplatsen)
|
departures : Departure[] (Avgångar från hållplatsen)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
13
src/classes/Track.js
Normal file
13
src/classes/Track.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
/*
|
||||||
|
Denna klass är en modell för hållplatslägen, ex. "Läge A" eller "Spår 3".
|
||||||
|
|
||||||
|
name : String (Lägets namn)
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Track {
|
||||||
|
constructor(name) {
|
||||||
|
this.name = name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Track;
|
@ -1,14 +1,34 @@
|
|||||||
import React, {Component} from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import './css/Button.css';
|
||||||
|
|
||||||
|
|
||||||
class Button extends Component {
|
class Button extends Component {
|
||||||
render() {
|
// Multiple onClick functions
|
||||||
|
onClick = () => {
|
||||||
|
console.log(this.props.onClick);
|
||||||
|
|
||||||
|
if (this.props.onClick !== null
|
||||||
|
&& this.props.onClick !== undefined) {
|
||||||
|
if (Array.isArray(this.props.onClick)) {
|
||||||
|
this.props.onClick.forEach(func => {
|
||||||
|
func();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log("Error when parsing Button onClick functions.");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("Error when parsing Button onClick functions.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
return (
|
return (
|
||||||
<a href={this.props.destination}>
|
<button className={this.props.className} onClick={this.onClick}>
|
||||||
{this.props.title}
|
{this.props.children}
|
||||||
</a>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// TODO Add css
|
|
||||||
export default Button
|
export default Button;
|
@ -1,24 +1,29 @@
|
|||||||
import addNotification from "react-push-notification";
|
import addNotification from "react-push-notification";
|
||||||
|
|
||||||
|
import Button from './Button.js';
|
||||||
import disruptIcon from '../img/flash.svg';
|
import disruptIcon from '../img/flash.svg';
|
||||||
|
|
||||||
const DisruptionButton = () => {
|
|
||||||
const genDisrupt = () => {
|
|
||||||
addNotification({
|
|
||||||
title: "Warning",
|
|
||||||
subtitle: "This is a subtitle",
|
|
||||||
message: "This is a very long message",
|
|
||||||
theme: "blue",
|
|
||||||
native: true, // when using native, your OS will handle theming.
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
class DisruptionButton extends Button {
|
||||||
<button onClick={genDisrupt} className="disruptBtn">
|
genDisrupt = () => {
|
||||||
<img src={disruptIcon} alt="" />
|
addNotification({
|
||||||
Generera Störning
|
title: "Warning",
|
||||||
</button>
|
subtitle: "This is a subtitle",
|
||||||
);
|
message: "This is a very long message",
|
||||||
};
|
theme: "blue",
|
||||||
|
native: true, // when using native, your OS will handle theming.
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Button onClick={this.props.onClick.concat([this.genDisrupt])} className="disruptBtn">
|
||||||
|
<img src={disruptIcon} alt="" />
|
||||||
|
<span>Generera Störning</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export default DisruptionButton;
|
export default DisruptionButton;
|
||||||
|
@ -1,20 +1,21 @@
|
|||||||
import React, { Component } from 'react';
|
import Button from './Button.js';
|
||||||
|
|
||||||
class MenuButton extends Component {
|
|
||||||
|
class MenuButton extends Button {
|
||||||
render() {
|
render() {
|
||||||
if (this.props.childOrderReverse) {
|
if (this.props.childOrderReverse) {
|
||||||
return (
|
return (
|
||||||
<button>
|
<Button>
|
||||||
<span>{this.props.label}</span>
|
<span>{this.props.label}</span>
|
||||||
<img src={this.props.icon} alt="" />
|
<img src={this.props.icon} alt="" />
|
||||||
</button>
|
</Button>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<button>
|
<Button>
|
||||||
<img src={this.props.icon} alt="" />
|
<img src={this.props.icon} alt="" />
|
||||||
<span>{this.props.label}</span>
|
<span>{this.props.label}</span>
|
||||||
</button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,21 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import './css/NavigationDrawer.css';
|
|
||||||
|
|
||||||
import globalData from '../GlobalData.js';
|
import globalData from '../GlobalData.js';
|
||||||
import DisruptionButton from "./DisruptionButton.js";
|
import DisruptionButton from "./DisruptionButton.js";
|
||||||
|
import Popup from './Popup.js';
|
||||||
|
import Button from './Button.js';
|
||||||
|
|
||||||
|
import './css/NavigationDrawer.css';
|
||||||
|
|
||||||
import userIcon from '../img/user.svg';
|
import userIcon from '../img/user.svg';
|
||||||
|
|
||||||
|
|
||||||
class NavigationDrawer extends Component {
|
class NavigationDrawer extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.popupElem = React.createRef();
|
||||||
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
open: false
|
open: false
|
||||||
};
|
};
|
||||||
@ -31,9 +39,23 @@ class NavigationDrawer extends Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
showPopup = () => {
|
||||||
|
this.popupElem.current.show();
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<Popup ref={this.popupElem}>
|
||||||
|
<h3>Välj hållplats:</h3>
|
||||||
|
<ul>
|
||||||
|
<li><Button>Hållplats 1</Button></li>
|
||||||
|
<li><Button>Hållplats 2</Button></li>
|
||||||
|
<li><Button>Hållplats 3</Button></li>
|
||||||
|
<li><Button>Hållplats 4</Button></li>
|
||||||
|
</ul>
|
||||||
|
</Popup>
|
||||||
|
|
||||||
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
|
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
|
||||||
<header>
|
<header>
|
||||||
<img src={userIcon} alt="" />
|
<img src={userIcon} alt="" />
|
||||||
@ -41,7 +63,7 @@ class NavigationDrawer extends Component {
|
|||||||
<span>example@gmail.com</span>
|
<span>example@gmail.com</span>
|
||||||
</header>
|
</header>
|
||||||
<div id="navList">
|
<div id="navList">
|
||||||
<DisruptionButton />
|
<DisruptionButton onClick={[this.showPopup, this.close]} />
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<span id="version">Projektgrupp 3 - Utmaning 7</span>
|
<span id="version">Projektgrupp 3 - Utmaning 7</span>
|
||||||
|
36
src/components/Popup.js
Normal file
36
src/components/Popup.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import './css/Popup.css';
|
||||||
|
|
||||||
|
|
||||||
|
class Popup extends Component {
|
||||||
|
state = {
|
||||||
|
visible: false
|
||||||
|
};
|
||||||
|
|
||||||
|
show = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
hide = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={`${this.state.visible ? "" : "hidden"}` + " popupClose"} onClick={this.hide} />
|
||||||
|
|
||||||
|
<div className={`${this.state.visible ? "visible" : ""}` + " popup " + this.props.className}>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Popup;
|
@ -7,8 +7,8 @@ import warningIcon from '../img/warning.svg';
|
|||||||
|
|
||||||
class TrafficEntry extends Component {
|
class TrafficEntry extends Component {
|
||||||
render() {
|
render() {
|
||||||
let trafficInfo = this.props.departure.info;
|
let trafficInfo = this.props.departure.trafficInfo;
|
||||||
let lineInterference = trafficInfo !== "" && trafficInfo !== null;
|
let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="trafficEntry">
|
<div className="trafficEntry">
|
||||||
@ -23,7 +23,7 @@ class TrafficEntry extends Component {
|
|||||||
<div>
|
<div>
|
||||||
<span className="lineName">{this.props.departure.lineName}</span>
|
<span className="lineName">{this.props.departure.lineName}</span>
|
||||||
<img src={busIcon} alt=""></img>
|
<img src={busIcon} alt=""></img>
|
||||||
<span className="destination">{this.props.departure.destination}</span>
|
<span className="destination">{this.props.departure.finalStop}</span>
|
||||||
</div>
|
</div>
|
||||||
{lineInterference &&
|
{lineInterference &&
|
||||||
<p>{trafficInfo} <u>Visa mer</u></p>
|
<p>{trafficInfo} <u>Visa mer</u></p>
|
||||||
|
3
src/components/css/Button.css
Normal file
3
src/components/css/Button.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
button:active {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
@ -66,11 +66,6 @@
|
|||||||
transition: .15s;
|
transition: .15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navDrawer hr {
|
#navDrawer hr {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 10px 5px 0;
|
margin: 0 10px 5px 0;
|
||||||
|
44
src/components/css/Popup.css
Normal file
44
src/components/css/Popup.css
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
.popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
transform-origin: center;
|
||||||
|
background: white;
|
||||||
|
width: 55vw;
|
||||||
|
height: 39vh;
|
||||||
|
padding: 3vh 5vw;
|
||||||
|
box-shadow: var(--boxShadow);
|
||||||
|
border-radius: var(--borderRadius);
|
||||||
|
transition: .35s;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
pointer-events: all;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup h3 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup li button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8% 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popupClose {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
z-index: 11;
|
||||||
|
}
|
@ -11,33 +11,33 @@ import Departure from "../../classes/Departure.js";
|
|||||||
|
|
||||||
|
|
||||||
class TrafficInfo extends Component {
|
class TrafficInfo extends Component {
|
||||||
render() {
|
render() {
|
||||||
let testStop = new Stop(
|
let testStop = new Stop(
|
||||||
"Lemmingsgatan",
|
"Lemmingsgatan",
|
||||||
["Läge A", "Läge B", "Läge C"],
|
["Läge A", "Läge B", "Läge C"],
|
||||||
[
|
[
|
||||||
new Departure(
|
new Departure(
|
||||||
"519",
|
"519",
|
||||||
"Mot Heden",
|
"Mot Heden",
|
||||||
"11:59",
|
"11:59",
|
||||||
"Trafikolycka vid Partille Centrum."
|
"Trafikolycka vid Partille Centrum."
|
||||||
),
|
),
|
||||||
new Departure("58", "Mot Västra Eriksberg", "12:07"),
|
new Departure("58", "Mot Västra Eriksberg", "12:07"),
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header title="Trafikinfo" />
|
<Header title="Trafikinfo" />
|
||||||
<TopMenu>
|
<TopMenu>
|
||||||
<StopTitle stop={testStop} />
|
<StopTitle stop={testStop} />
|
||||||
</TopMenu>
|
</TopMenu>
|
||||||
<MainArea>
|
<MainArea>
|
||||||
<TrafficList departures={testStop.departures} />
|
<TrafficList departures={testStop.departures} />
|
||||||
</MainArea>
|
</MainArea>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TrafficInfo;
|
export default TrafficInfo;
|
||||||
|
@ -27,4 +27,9 @@ html, body, #root, #app {
|
|||||||
button {
|
button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user