diff --git a/README.md b/README.md index d7452c8..0bcf0b9 100644 --- a/README.md +++ b/README.md @@ -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 ````, detta eftersom React hanterar hela vårt UI. * Ursprungspunkten för React är ``src/index.js``. - \ No newline at end of file + class Track + Track : String name + + + User <.. Coordinates + User <.. Stop + Stop <.. Departure + Departure <.. Stop + Stop <.. Track +``` \ No newline at end of file diff --git a/src/classes/Coordinates.js b/src/classes/Coordinates.js new file mode 100644 index 0000000..53d48bf --- /dev/null +++ b/src/classes/Coordinates.js @@ -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; \ No newline at end of file diff --git a/src/classes/Departure.js b/src/classes/Departure.js index 6d5f1da..ba0eafc 100644 --- a/src/classes/Departure.js +++ b/src/classes/Departure.js @@ -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; } } diff --git a/src/classes/Stop.js b/src/classes/Stop.js index 408729b..51a6169 100644 --- a/src/classes/Stop.js +++ b/src/classes/Stop.js @@ -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) */ diff --git a/src/classes/Track.js b/src/classes/Track.js new file mode 100644 index 0000000..5b8356d --- /dev/null +++ b/src/classes/Track.js @@ -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; \ No newline at end of file diff --git a/src/components/Button.js b/src/components/Button.js index d6c6a90..c18a44b 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -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 ( - - {this.props.title} - + ); } } -// TODO Add css -export default Button + +export default Button; \ No newline at end of file diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js index e29fc2f..c88e5ca 100644 --- a/src/components/DisruptionButton.js +++ b/src/components/DisruptionButton.js @@ -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 ( - - ); -}; +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 ( + + ); + } +} + export default DisruptionButton; diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js index 0c78162..0ab96d0 100644 --- a/src/components/MenuButton.js +++ b/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 ( - + ); } else { return ( - + ); } } diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js index c029b55..de49e86 100644 --- a/src/components/NavigationDrawer.js +++ b/src/components/NavigationDrawer.js @@ -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 ( <> + +

Välj hållplats:

+ + +