Merge branch 'aw-disruption-control' into main
This commit is contained in:
commit
4ce76dbe90
37
README.md
37
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.
|
||||
* Ursprungspunkten för React är ``src/index.js``.
|
||||
|
||||
<!--
|
||||
|
||||
## Upplägg
|
||||
``` mermaid
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class User
|
||||
User : String deviceId
|
||||
User : Coordinates location
|
||||
User : nearbyStops()
|
||||
|
||||
class User
|
||||
User : Subscription[] subs
|
||||
User : Location loc
|
||||
class Coordinates
|
||||
Coordinates : Float lon
|
||||
Coordinates : Float lat
|
||||
|
||||
class Line
|
||||
class Stop
|
||||
Stop : String name
|
||||
Stop : Track[] locations
|
||||
Stop : Departure[] departures
|
||||
|
||||
class Subscription
|
||||
Subscription : Line line
|
||||
class Departure
|
||||
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.
|
||||
|
||||
lineName : String (Linjenamnet)
|
||||
destination : String (Exempelvis "Mot Heden")
|
||||
finalStop : Stop (Ändhållplats)
|
||||
time : String (Avgångstid)
|
||||
info : String (Trafikinformation)
|
||||
trafficInfo : String (Trafikinformation)
|
||||
*/
|
||||
|
||||
class Departure {
|
||||
constructor(lineName, destination, time, info) {
|
||||
constructor(lineName, finalStop, time, trafficInfo) {
|
||||
this.lineName = lineName;
|
||||
this.destination = destination;
|
||||
this.finalStop = finalStop;
|
||||
this.time = time;
|
||||
this.info = info;
|
||||
this.trafficInfo = trafficInfo;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
Denna klass är en modell för hållplatser.
|
||||
|
||||
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)
|
||||
*/
|
||||
|
||||
|
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 {
|
||||
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 (
|
||||
<a href={this.props.destination}>
|
||||
{this.props.title}
|
||||
</a>
|
||||
<button className={this.props.className} onClick={this.onClick}>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
// TODO Add css
|
||||
export default Button
|
||||
|
||||
export default Button;
|
@ -1,24 +1,29 @@
|
||||
import addNotification from "react-push-notification";
|
||||
|
||||
import Button from './Button.js';
|
||||
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 (
|
||||
<button onClick={genDisrupt} className="disruptBtn">
|
||||
<img src={disruptIcon} alt="" />
|
||||
Generera Störning
|
||||
</button>
|
||||
);
|
||||
};
|
||||
class DisruptionButton extends Button {
|
||||
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.
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
@ -1,20 +1,21 @@
|
||||
import React, { Component } from 'react';
|
||||
import Button from './Button.js';
|
||||
|
||||
class MenuButton extends Component {
|
||||
|
||||
class MenuButton extends Button {
|
||||
render() {
|
||||
if (this.props.childOrderReverse) {
|
||||
return (
|
||||
<button>
|
||||
<Button>
|
||||
<span>{this.props.label}</span>
|
||||
<img src={this.props.icon} alt="" />
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<button>
|
||||
<Button>
|
||||
<img src={this.props.icon} alt="" />
|
||||
<span>{this.props.label}</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,13 +1,21 @@
|
||||
import React, { Component } from 'react';
|
||||
import './css/NavigationDrawer.css';
|
||||
|
||||
import globalData from '../GlobalData.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';
|
||||
|
||||
|
||||
class NavigationDrawer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.popupElem = React.createRef();
|
||||
}
|
||||
|
||||
state = {
|
||||
open: false
|
||||
};
|
||||
@ -31,9 +39,23 @@ class NavigationDrawer extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
showPopup = () => {
|
||||
this.popupElem.current.show();
|
||||
};
|
||||
|
||||
render() {
|
||||
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" : ""}`}>
|
||||
<header>
|
||||
<img src={userIcon} alt="" />
|
||||
@ -41,7 +63,7 @@ class NavigationDrawer extends Component {
|
||||
<span>example@gmail.com</span>
|
||||
</header>
|
||||
<div id="navList">
|
||||
<DisruptionButton />
|
||||
<DisruptionButton onClick={[this.showPopup, this.close]} />
|
||||
</div>
|
||||
<hr />
|
||||
<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 {
|
||||
render() {
|
||||
let trafficInfo = this.props.departure.info;
|
||||
let lineInterference = trafficInfo !== "" && trafficInfo !== null;
|
||||
let trafficInfo = this.props.departure.trafficInfo;
|
||||
let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined;
|
||||
|
||||
return (
|
||||
<div className="trafficEntry">
|
||||
@ -23,7 +23,7 @@ class TrafficEntry extends Component {
|
||||
<div>
|
||||
<span className="lineName">{this.props.departure.lineName}</span>
|
||||
<img src={busIcon} alt=""></img>
|
||||
<span className="destination">{this.props.departure.destination}</span>
|
||||
<span className="destination">{this.props.departure.finalStop}</span>
|
||||
</div>
|
||||
{lineInterference &&
|
||||
<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;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#navDrawer hr {
|
||||
width: 90%;
|
||||
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 {
|
||||
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"),
|
||||
]
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Header title="Trafikinfo" />
|
||||
<TopMenu>
|
||||
<StopTitle stop={testStop} />
|
||||
</TopMenu>
|
||||
<MainArea>
|
||||
<TrafficList departures={testStop.departures} />
|
||||
</MainArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TrafficInfo;
|
||||
|
@ -28,3 +28,8 @@ button {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
Loading…
Reference in New Issue
Block a user