85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import globalData from '../GlobalData.js';
|
|
import DisruptionButton from "./DisruptionButton.js";
|
|
import SelectUserButton from "./SelectUserButton.js"
|
|
import Popup from './Popup.js';
|
|
import Button from './Button.js';
|
|
|
|
import './css/NavigationDrawer.css';
|
|
|
|
import userIcon from '../img/user.svg';
|
|
import { glob } from 'glob';
|
|
|
|
|
|
class NavigationDrawer extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.popupElem = React.createRef();
|
|
}
|
|
|
|
state = {
|
|
open: false
|
|
};
|
|
|
|
toggle = () => {
|
|
if (this.state.open)
|
|
this.close();
|
|
else
|
|
this.open();
|
|
};
|
|
|
|
open = () => {
|
|
this.setState({
|
|
open: true
|
|
});
|
|
};
|
|
|
|
close = () => {
|
|
this.setState({
|
|
open: false
|
|
});
|
|
};
|
|
|
|
showPopup = () => {
|
|
this.popupElem.current.show();
|
|
};
|
|
|
|
updatePage = () => {
|
|
globalData.currentPage.render();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<Popup ref={this.popupElem}>
|
|
<h3>Välj hållplats:</h3>
|
|
<ul>
|
|
<li><DisruptionButton path={"ex1"} onClick={[]}>Störnings Scenario 1</DisruptionButton></li>
|
|
<li><DisruptionButton path={"ex2"} onClick={[]}>Störnings Scenario 2</DisruptionButton></li>
|
|
</ul>
|
|
</Popup>
|
|
|
|
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
|
|
<header>
|
|
<img src={userIcon} alt="" />
|
|
<span>{globalData.user.name}</span>
|
|
<span>example@gmail.com</span>
|
|
</header>
|
|
<div id="navList">
|
|
<SelectUserButton path={"user1"} username="Användare 1"/>
|
|
<SelectUserButton path={"user2"} username="Användare 2"/>
|
|
<SelectUserButton path={"user3"} username="Användare 3"/>
|
|
<SelectUserButton path={"user4"} username="Användare 4"/>
|
|
<Button onClick={[this.showPopup, this.close]}><span>Generera Störning</span></Button>
|
|
</div>
|
|
<hr />
|
|
<span id="version">Projektgrupp 3 - Utmaning 7</span>
|
|
</div>
|
|
<div id="clickArea" className={`${this.state.open ? "" : "hidden"}`} onClick={this.close} />
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default NavigationDrawer; |