Merge branch 'main' into we-Disruption-base
This commit is contained in:
commit
7c59fa2825
12
src/GlobalData.js
Normal file
12
src/GlobalData.js
Normal 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;
|
@ -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;
|
||||||
|
@ -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;
|
@ -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,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
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;
|
||||||
|
@ -28,3 +28,8 @@ button {
|
|||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user