Add and update classes for client-side data management

2020-11-27 17:32:35 +01:00
14 changed files with 214 additions and 184 deletions
--- 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 ``<head>``, detta eftersom React hanterar hela vårt UI.
 * Ursprungspunkten för React är ``src/index.js``.

-<!--
+
 ## Upplägg
-``` mermaid
-
+```mermaid
 classDiagram
+    class User
+    User : String deviceId
+    User : Coordinates location
+    User : nearbyStops()

-class User
-User : Subscription[] subs
-User : Location loc
+    class Coordinates
+    Coordinates : Float lon
+    Coordinates : Float lat

-class Line
+    class Stop
+    Stop : String name
+    Stop : Track[] locations
+    Stop : Departure[] departures

-class Subscription
-Subscription : Line line
+    class Departure
+    Departure : String lineName
+    Departure : Stop finalStop
+    Departure : String time
+    Departure : String trafficInfo

-```
-->
+    class Track
+    Track : String name
+
+
+    User <.. Coordinates
+    User <.. Stop
+    Stop <.. Departure
+    Departure <.. Stop
+    Stop <.. Track
+```
--- a/package-lock.json
+++ b/package-lock.json
@ -3446,15 +3446,6 @@
      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
      "optional": true
    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
    "bluebird": {
      "version": "3.7.2",
      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@ -6352,12 +6343,6 @@
        }
      }
    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
    "filesize": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@ -10148,12 +10133,6 @@
      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
    },
-    "nan": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
-      "optional": true
-    },
    "nanoid": {
      "version": "3.1.16",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@ -12276,11 +12255,6 @@
        "whatwg-fetch": "^3.4.1"
      }
    },
-    "react-axios": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.3.tgz",
-      "integrity": "sha512-63kY2iupdRgbvPq9G8xmM0NWUnt2Q5YmpotMoLQsxKOzKXKZg2Lo6CzF/bcZvtmv3WnfjBU6Bg8nZQO28eIAZw=="
-    },
    "react-dev-utils": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
@ -12386,16 +12360,6 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
-    "react-native-push-notification": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-6.1.3.tgz",
-      "integrity": "sha512-qNbFCkObCXwSFQbK6hJyx1Bym1D7V4XM8iN2L6eL3GAdNLmeBTdLdx3mPbKJtuaDJ1+deniFTQ2rz6hU4ELOXA=="
-    },
-    "react-push-notification": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/react-push-notification/-/react-push-notification-1.3.0.tgz",
-      "integrity": "sha512-hyYKZqwtNOgRP74fAafVIivEr99vUtH0nDgcWkPKd302BhMuUMr5wuuEX236bSbCoM4nxlOge1m0CKIEtWBqLA=="
-    },
    "react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@ -15288,11 +15252,7 @@
          "version": "1.2.13",
          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
        },
        "glob-parent": {
          "version": "3.1.0",
@ -15878,11 +15838,7 @@
          "version": "1.2.13",
          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
+          "optional": true
        },
        "glob-parent": {
          "version": "3.1.0",
--- a/package.json
+++ b/package.json
@ -8,10 +8,7 @@
    "@testing-library/user-event": "^12.2.2",
    "axios": "^0.21.0",
    "react": "^17.0.1",
-    "react-axios": "^2.0.3",
    "react-dom": "^17.0.1",
-    "react-native-push-notification": "^6.1.3",
-    "react-push-notification": "^1.3.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
--- a/src/App.js
+++ b/src/App.js
@ -1,39 +1,39 @@
-import "./variables.css";
-import "./App.css";
+import './variables.css';
+import './App.css';

-import React, { Component } from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';

-import NavigationDrawer from "./components/NavigationDrawer.js";
-import BottomMenu from "./components/BottomMenu.js";
-//import AccessToken from "./components/AccessToken.js";
-import NearbyStation from "./components/NearbyStation";
+import NavigationDrawer from './components/NavigationDrawer.js'
+import BottomMenu from './components/BottomMenu.js'
+import AccessToken from './components/AccessToken.js'
+import NearbyStation from './components/NearbyStation';

-import Tickets from "./components/pages/Tickets.js";
-import TicketsBuy from "./components/pages/TicketsBuy.js";
-import Travel from "./components/pages/Travel.js";
-import TrafficInfo from "./components/pages/TrafficInfo.js";
-
-import "./variables.css";
+import Tickets from './components/pages/Tickets.js'; 
+import TicketsBuy from './components/pages/TicketsBuy.js';
+import Travel from './components/pages/Travel.js';
+import TrafficInfo from './components/pages/TrafficInfo.js';

+import './variables.css';
+ 
 class App extends Component {
-  render() {
-    return (
-      <Router>
-        <div className="App">
-          <NavigationDrawer />
+    render() {
+        return (
+            <Router>
+                <div className="App"> 
+                    <NavigationDrawer />

-          <Route path="/" exact component={TicketsBuy} />
-          <Route path="/tickets" exact component={Tickets} />
-          <Route path="/ticketsBuy" exact component={TicketsBuy} />
-          <Route path="/travel" exact component={Travel} />
-          <Route path="/traffic" exact component={TrafficInfo} />
+                    <Route path="/" exact component={TicketsBuy} />
+                    <Route path="/tickets" exact component={Tickets} />
+                    <Route path="/ticketsBuy" exact component={TicketsBuy} />
+                    <Route path="/travel" exact component={Travel} />     
+                    <Route path="/traffic" exact component={TrafficInfo} />     

-          <BottomMenu />
-        </div>
-      </Router>
-    );
-  }
+                    <BottomMenu />
+                </div>
+            </Router>
+        );
+    }
 }

 export default App;
--- a/src/classes/AccessToken.js
+++ b/src/classes/AccessToken.js
@ -1,21 +0,0 @@
-import axios from 'axios';
-
-class AccessToken {
-    credentials = 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth'
-    device = '123'
-
-    constructor() {
-        const headers = {
-          'Content-Type': 'application/x-www-form-urlencoded',
-          'Authorization': 'Basic ' + this.credentials
-        };
-
-        axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+this.device, {headers} )
-            .then(response => {
-                console.log(response);
-                this.token = response.data.access_token
-        });
-    }
-}
-
-export default AccessToken
--- a/src/classes/Coordinates.js
+++ 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;
--- 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;
    }
 }

--- 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)
 */

--- a/src/classes/Track.js
+++ 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;
--- a/src/classes/User.js
+++ b/src/classes/User.js
@ -0,0 +1,15 @@
+/*
+    Denna klass är en modell för användare.
+
+    deviceId : String           (Enhetens ID)
+    location : Coordinates      (Användarens koordinater)
+*/
+
+class User {
+    constructor(deviceId, location) {
+        this.deviceId = deviceId;
+        this.location = location;
+    }
+}
+
+export default User;
--- a/src/components/AccessToken.js
+++ b/src/components/AccessToken.js
@ -0,0 +1,65 @@
+import React from 'react';
+import axios from 'axios';
+
+var globToken = ''
+
+const GetToken = () => {
+  const vars = {
+    credentials: 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth',
+    token: undefined,
+    device: '123',
+  }
+
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+    'Authorization': 'Basic ' + vars.credentials
+  };
+
+  axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+vars.device, { headers })
+    .then(response => {
+      console.log(response);
+      globToken = response.data.access_token
+  });
+}
+
+class AccessToken extends React.Component {
+  state = {
+    token: 'No Token',
+  }
+
+  handleChange = event => {
+    this.setState({ token: event.target.value});
+  }
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    this.setState({
+      credentials: 'Attempting to send token'
+    });
+    GetToken();
+  }
+
+  handleFetch = event => {
+    event.preventDefault();
+    this.setState({token: globToken})
+  }
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <button type="submit">Get Token</button>
+        </form>
+        <h1>
+          {this.state.token}
+        </h1>
+        <form onSubmit={this.handleFetch}>
+          <button type="submit">fetch</button>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default AccessToken
--- a/src/components/NearbyStation.js
+++ b/src/components/NearbyStation.js
@ -1,6 +1,5 @@
 import React from 'react';
 import axios from 'axios';
-import AccessToken from '../classes/AccessToken'

 class NearbyStation extends React.Component {
    state = {
@ -8,7 +7,7 @@ class NearbyStation extends React.Component {
        long: '12.0',
        stops: [],
        token: undefined,
-        tokenClass: new AccessToken()
+        device: '123',
    }

    handleChangeLat = event => {
@ -19,11 +18,15 @@ class NearbyStation extends React.Component {
        this.setState({ long: event.target.value});
    }

+    handleChangeToken = event => {
+        this.setState({ token: event.target.value})
+    }
+
    handleSubmit = event => {
        event.preventDefault();

        const headers = {
-            'Authorization': 'Bearer ' + this.state.tokenClass.token
+            'Authorization': 'Bearer ' + this.state.token
        };

        console.log('Attempted connection')
@ -49,6 +52,10 @@ class NearbyStation extends React.Component {
                        Longitude coord:
                        <input type="text" name="long" onChange={this.handleChangeLong} />
                    </label>
+                    <label>
+                        Token:
+                        <input type="text" name="token" onChange={this.handleChangeToken} />
+                    </label>
                    <button type="submit">Stops</button>
                </form>
                <h1>
--- a/src/components/pages/Disruption.js
+++ b/src/components/pages/Disruption.js
@ -1,23 +0,0 @@
-import addNotification from "react-push-notification";
-
-const Disruption = () => {
-  const buttonClick = () => {
-    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 (
-    <div className="page">
-      <button onClick={buttonClick} className="button">
-        Störning
-      </button>
-    </div>
-  );
-};
-
-export default Disruption;
--- a/src/components/pages/TrafficInfo.js
+++ b/src/components/pages/TrafficInfo.js
@ -1,49 +1,38 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';

-import Header from "../Header.js";
-import TopMenu from "../TopMenu.js";
-import MainArea from "../MainArea.js";
-import StopTitle from "../StopTitle.js";
-import TrafficList from "../TrafficList.js";
+import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
+import MainArea from '../MainArea.js';
+import StopTitle from '../StopTitle.js';
+import TrafficList from '../TrafficList.js';

-import Stop from "../../classes/Stop.js";
-import Departure from "../../classes/Departure.js";
-
-import Disruption from "./Disruption.js";
+import Stop from '../../classes/Stop.js';
+import Departure from '../../classes/Departure.js';

 class TrafficInfo extends Component {
-  render() {
-    let testStop = new Stop(
-      "Lemmingsgatan",
-      ["Läge A", "Läge B", "Läge C"],
-      [
-        new Departure(
-          "519",
-          "Mot Heden",
-          "11:59",
-          "Trafikolycka vid Partille Centrum."
-        ),
-        new Departure("58", "Mot Västra Eriksberg", "12:07"),
-      ]
-    );
+    render() {
+        let testStop =
+            new Stop(
+                "Lemmingsgatan",
+                ["Läge A", "Läge B", "Läge C"],
+                [
+                    new Departure("519", "Mot Heden", "11:59", "Trafikolycka vid Partille Centrum."),
+                    new Departure("58", "Mot Västra Eriksberg", "12:07")
+                ],
+            );

-    return (
-      <>
-        <Header title="Trafikinfo" />
-        <TopMenu>
-          <StopTitle stop={testStop} />
-        </TopMenu>
-        <MainArea>
-          <TrafficList departures={testStop.departures} />
-        </MainArea>
-        <Disruption>
-          <button onClick={Disruption} className="button">
-            Störning
-          </button>
-        </Disruption>
-      </>
-    );
-  }
+        return (
+            <>
+                <Header title="Trafikinfo" />
+                <TopMenu>
+                    <StopTitle stop={testStop} />
+                </TopMenu>
+                <MainArea>
+                    <TrafficList departures={testStop.departures} />
+                </MainArea>
+            </>
+        );
+    }
 }

-export default TrafficInfo;
+export default TrafficInfo;