|
|
@@ -1,5 +1,5 @@
|
|
|
import React, { Component } from 'react';
|
|
|
-import persons from './persons';
|
|
|
+//import persons from './persons';
|
|
|
//import ReactDOM from 'react-dom';
|
|
|
import './App.css';
|
|
|
import Tables from './Tables';
|
|
|
@@ -8,21 +8,60 @@ import Tables from './Tables';
|
|
|
class App extends Component {
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
- this.persons = [];
|
|
|
this.state = {
|
|
|
- persons
|
|
|
+ persons: []
|
|
|
};
|
|
|
- };
|
|
|
-
|
|
|
- change = (name) => {
|
|
|
+
|
|
|
+ this.componentDidMount = this.componentDidMount.bind(this)
|
|
|
+ }
|
|
|
+
|
|
|
+ // is called once when loading the page
|
|
|
+ componentDidMount() {
|
|
|
+ fetch("http://192.168.8.100:3001/persons")
|
|
|
+ .then(response => {
|
|
|
+ if (response.ok) {
|
|
|
+ return response;
|
|
|
+ } else {
|
|
|
+ let errorMessage = "${response.status(${response.statusText})",
|
|
|
+ error = new Error(errorMessage);
|
|
|
+ throw(error);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(json =>{
|
|
|
+ console.log(json);
|
|
|
+ this.setState({ persons: json })
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ change = () => {
|
|
|
const newPersons = [...this.state.persons];
|
|
|
+ const id = 0;
|
|
|
newPersons.map( person => {
|
|
|
- if (name == person.name) {
|
|
|
- person.speed = person.speed + Math.floor((Math.random() * 10) + 1)
|
|
|
+ if (id == person.id) {
|
|
|
+ const axios = require('axios');
|
|
|
+ let longitude = Math.floor((Math.random() * 150) + 1);
|
|
|
+ let latitude = Math.floor((Math.random() * 150) + 1);
|
|
|
+
|
|
|
+ axios.put('http://192.168.8.100:3001/persons/0/', {
|
|
|
+ longitude: longitude,
|
|
|
+ latitude: latitude,
|
|
|
+ shortName: "VEN",
|
|
|
+ name: "Martin",
|
|
|
+ speed: 1,
|
|
|
+ color: "#ddd"
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
})
|
|
|
- this.setState({ persons: newPersons });
|
|
|
+ this.componentDidMount()
|
|
|
+
|
|
|
}
|
|
|
|
|
|
getLocation = (name) => {
|
|
|
@@ -42,21 +81,52 @@ class App extends Component {
|
|
|
this.setState({ persons: newPersons });
|
|
|
}
|
|
|
|
|
|
- render (){
|
|
|
- setTimeout(this.getLocation, 2000)
|
|
|
+
|
|
|
+ getAttribute = (id, attr) => {
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ create = (id) => {
|
|
|
+ const axios = require('axios');
|
|
|
+ let longitude = Math.floor((Math.random() * 100) + 1);
|
|
|
+ let latitude = Math.floor((Math.random() * 100) + 1);
|
|
|
+
|
|
|
+ if (navigator.geolocation) { //check if geolocation is available
|
|
|
+ navigator.geolocation.getCurrentPosition(
|
|
|
+ function(position){
|
|
|
+ console.log(position);
|
|
|
+ longitude = position.coords.longitude
|
|
|
+ latitude = position.coords.latitude
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ axios.put('http://localhost:3001/persons/0/', {
|
|
|
+ longitude: longitude,
|
|
|
+ latitude: latitude,
|
|
|
+ shortName: "VEN",
|
|
|
+ name: "Martin", // *** getAttribute
|
|
|
+ speed: 1,
|
|
|
+ color: "#ddd"
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render (){
|
|
|
+ setTimeout(this.componentDidMount, 10000)
|
|
|
+
|
|
|
return (
|
|
|
<div id="wrapper">
|
|
|
- <Tables persons={persons}/>
|
|
|
+ <Tables persons={this.state.persons}/>
|
|
|
<div id="debug"> </div>
|
|
|
<button
|
|
|
onClick={ () => {
|
|
|
- this.getLocation("Bernie");
|
|
|
+ alert(this.getAttribute(2, "name"));
|
|
|
}}
|
|
|
> Bernie </button>
|
|
|
<button
|
|
|
onClick={ () => {
|
|
|
- this.getLocation("Martin");
|
|
|
+ this.change();
|
|
|
}}
|
|
|
> Martin </button>
|
|
|
<button
|
|
|
@@ -69,7 +139,6 @@ class App extends Component {
|
|
|
this.getLocation("Lukas");
|
|
|
}}
|
|
|
> Lukas </button>
|
|
|
-
|
|
|
</div>
|
|
|
);
|
|
|
}
|
