added json-server, button changes coords of one person

db.json

@@ -0,0 +1,43 @@
+{
+  "persons": [
+    {
+      "longitude": 37,
+      "latitude": 124,
+      "shortName": "VEN",
+      "name": "Martin",
+      "speed": 1,
+      "color": "#ddd",
+      "id": 0
+    },
+    {
+      "id": 1,
+      "name": "Simon",
+      "fullName": "Simon Ellinger",
+      "shortName": "ELL",
+      "speed": 4,
+      "color": "#ffff00",
+      "latitude": 0,
+      "longitude": 50
+    },
+    {
+      "id": 2,
+      "name": "Lukas",
+      "fullName": "Lukas Wagner",
+      "shortName": "WAG",
+      "speed": 9,
+      "color": "#00ff00",
+      "latitude": 0,
+      "longitude": 70
+    },
+    {
+      "id": 3,
+      "name": "Bernie",
+      "fullName": "Bernadette Hammerle",
+      "shortName": "HAM",
+      "speed": 3,
+      "color": "#888822",
+      "latitude": 0,
+      "longitude": 100
+    }
+  ]
+}

package-lock.json

@@ -1907,6 +1907,43 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "chart-race-react": "^1.0.2",
     "pigeon-maps": "^0.14.0",
     "pigeon-marker": "^0.3.4",
@@ -16,7 +17,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "dev-server": "json-server -p 8080 db.json"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.css

@@ -107,4 +107,13 @@ img{
 
 .mapWrapper{
   float: right;
+}
+
+#id{
+  background-color: #fff;
+}
+
+button{
+  width: 50px;
+  height: 50px;
 }

src/App.js

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

src/Tables.js

@@ -16,7 +16,7 @@ function Tables({persons}) {
   
   var currentDate = new Date()
 
-  const sortedpersons = persons.sort(function(a, b){return b.speed - a.speed});
+  const sortedpersons = persons.sort(function(a, b){return b.longitude - a.longitude});
   
   return (
     <div>