schulze/hallbarUtvecklingVT7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'aw-disruption-control' into main

Browse Source
This commit is contained in:
André Wahlberg 2020-12-04 11:53:37 +01:00
commit 4ce76dbe90
16 changed files with 259 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

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

10
src/classes/Departure.js
View File

@ -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
src/classes/Stop.js
View File

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

34
src/components/Button.js
View File

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

39
src/components/DisruptionButton.js
View File

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

13
src/components/MenuButton.js
View File

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

26
src/components/NavigationDrawer.js
View File

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

6
src/components/TrafficEntry.js
View File

@ -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
View File

@ -0,0 +1,3 @@
button:active {
background: rgba(0, 0, 0, 0.1);
}

5
src/components/css/NavigationDrawer.css
View File

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

52
src/components/pages/TrafficInfo.js
View File

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

5
src/index.css
View File

@ -27,4 +27,9 @@ html, body, #root, #app {
button {
background: none;
border: none;
}
.hidden {
opacity: 0;
pointer-events: none;
}