Merge branch 'main' into we-Disruption-base

src/GlobalData.js

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

src/classes/User.js

@@ -1,12 +1,14 @@
 /*
     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)
 */
 
 class User {
-    constructor(deviceId, location) {
+    constructor(name, deviceId, location) {
+        this.name = name;
         this.deviceId = deviceId;
         this.location = location;
         this.stoppointgid = stoppointgid;

src/components/Button.js

@@ -1,14 +1,30 @@
 import React, { Component } from 'react';
 
-class Button extends Component {
-    render() {
+import './css/Button.css';
 
+
+class Button extends Component {
+    // 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 (
-            <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;

src/components/DisruptionButton.js

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

src/components/MenuButton.js

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

src/components/NavigationDrawer.js

@@ -1,12 +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
     };
@@ -30,17 +39,31 @@ 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="" />
-                        <span>Mitt konto</span>
+                        <span>{globalData.user.name}</span>
                         <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>

src/components/Popup.js

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

src/components/TrafficEntry.js

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

src/components/css/Button.css

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

src/components/css/NavigationDrawer.css

@@ -66,11 +66,6 @@
     transition: .15s;
 }
 
-.hidden {
-    opacity: 0;
-    pointer-events: none;
-}
-
 #navDrawer hr {
     width: 90%;
     margin: 0 10px 5px 0;

src/components/css/Popup.css

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

src/index.css

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