Merge branch 'main' into we-Disruption-base

This commit is contained in:
William Eriksson 2020-12-08 09:18:00 +01:00 committed by GitHub
commit 7c59fa2825
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 211 additions and 69 deletions

12
src/GlobalData.js Normal file
View File

@ -0,0 +1,12 @@
import User from './classes/User.js';
import Coordinates from "./classes/Coordinates.js";
let globalData = {
user: new User(
"test",
"123",
new Coordinates()
)
};
export default globalData;

View File

@ -1,12 +1,14 @@
/* /*
Denna klass är en modell för användare. Denna klass är en modell för användare.
deviceId : String (Enhetens ID) name : String (Användarnamn)
deviceId : Int (Enhetens ID)
location : Coordinates (Användarens koordinater) location : Coordinates (Användarens koordinater)
*/ */
class User { class User {
constructor(deviceId, location) { constructor(name, deviceId, location) {
this.name = name;
this.deviceId = deviceId; this.deviceId = deviceId;
this.location = location; this.location = location;
this.stoppointgid = stoppointgid; this.stoppointgid = stoppointgid;

View File

@ -1,14 +1,30 @@
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 = () => {
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.");
}
}
}
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;

View File

@ -1,9 +1,11 @@
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 = () => { class DisruptionButton extends Button {
genDisrupt = () => {
addNotification({ addNotification({
title: "Warning", title: "Warning",
subtitle: "This is a subtitle", subtitle: "This is a subtitle",
@ -11,14 +13,17 @@ const DisruptionButton = () => {
theme: "blue", theme: "blue",
native: true, // when using native, your OS will handle theming. native: true, // when using native, your OS will handle theming.
}); });
}; }
render() {
return ( return (
<button onClick={genDisrupt} className="disruptBtn"> <Button onClick={this.props.onClick.concat([this.genDisrupt])} className="disruptBtn">
<img src={disruptIcon} alt="" /> <img src={disruptIcon} alt="" />
Generera Störning <span>Generera Störning</span>
</button> </Button>
); );
}; }
}
export default DisruptionButton; export default DisruptionButton;

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() { 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>
); );
} }
} }

View File

@ -1,12 +1,21 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './css/NavigationDrawer.css';
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
}; };
@ -30,17 +39,31 @@ 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="" />
<span>Mitt konto</span> <span>{globalData.user.name}</span>
<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
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;

View File

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

View File

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

View File

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

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

View File

@ -28,3 +28,8 @@ button {
background: none; background: none;
border: none; border: none;
} }
.hidden {
opacity: 0;
pointer-events: none;
}