Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
bernie
/
jku-se-react
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

changed tables to function; rerender every 5 sec; read persons from file

Bernadette Elena Hammerle 4 rokov pred
rodič
5ff4d8a4ef
commit
9fedfe8004
10 zmenil súbory, kde vykonal 170 pridanie a 47 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 15 0
      package-lock.json
  2. 3 0
      package.json
  3. 0 5
      public/index.html
  4. 8 33
      src/App.css
  5. 21 5
      src/App.js
  6. 56 0
      src/Tables.js
  7. 31 0
      src/components/Map.js
  8. 3 3
      src/components/TablesClass.js
  9. 1 1
      src/index.js
  10. 32 0
      src/persons.js

+ 15 - 0
package-lock.json
Zobraziť súbor 

@@ -9124,6 +9124,21 @@
 
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
 
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
 
     },
 
+    "pigeon-maps": {
 
+      "version": "0.14.0",
 
+      "resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.14.0.tgz",
 
+      "integrity": "sha512-ee7yceJpRH3Jpb5iooYn0oqykNs18P3zjO7zKvq+9nf109QoiYx9b6Tniy8LxxpG83uDez0+DrGJOOHiW7gXnw=="
 
+    },
 
+    "pigeon-marker": {
 
+      "version": "0.3.4",
 
+      "resolved": "https://registry.npmjs.org/pigeon-marker/-/pigeon-marker-0.3.4.tgz",
 
+      "integrity": "sha512-6sQoSI8Mii7eWWz3TorssbNmptVoP4heKMDt27AeU8I//MFQfQZS6JfCmW3zXF4a6dk4uisr4m26akUYSblfnQ=="
 
+    },
 
+    "pigeon-overlay": {
 
+      "version": "0.2.3",
 
+      "resolved": "https://registry.npmjs.org/pigeon-overlay/-/pigeon-overlay-0.2.3.tgz",
 
+      "integrity": "sha512-mkHwYzDdzdd45XmWW3RB6Vxi0cj1F2CWRzFS8lyDmZcKiruKwhoAa4D3d/hfoO/R3TeHK3IJNNoVV02hP2PJ6Q=="
 
+    },
 
     "pinkie": {
 
       "version": "2.0.4",
 
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",

+ 3 - 0
package.json
Zobraziť súbor 

@@ -4,6 +4,9 @@
 
   "private": true,
 
   "dependencies": {
 
     "chart-race-react": "^1.0.2",
 
+    "pigeon-maps": "^0.14.0",
 
+    "pigeon-marker": "^0.3.4",
 
+    "pigeon-overlay": "^0.2.3",
 
     "react": "^16.11.0",
 
     "react-dom": "^16.11.0",
 
     "react-scripts": "3.2.0",

+ 0 - 5
public/index.html
Zobraziť súbor 

@@ -29,11 +29,6 @@
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root">
 
-      <div id="wrapper">
 
-        <div id="online"></div>
 
-        <div id="offline"></div>
 
-      </div>
 
-      <div id="app"></div>
 
     </div>
 
     <!--
 
       This HTML file is a template.

+ 8 - 33
src/App.css
Zobraziť súbor 

@@ -1,28 +1,3 @@
 
-.App {
 
-  text-align: center;
 
-}
 
-
 
-.App-logo {
 
-  height: 40vmin;
 
-}
 
-
 
-.App-header {
 
-  background-color: #282c34;
 
-  min-height: 100vh;
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  justify-content: center;
 
-  font-size: calc(10px + 2vmin);
 
-  color: white;
 
-}
 
-
 
-.App-link {
 
-  color: #09d3ac;
 
-}
 
-
 
-
 
-
 
 #wrapper{
 
   width: 30%;
 
   max-height: 80vh;
 
@@ -41,14 +16,6 @@
 
   transition: 0.4s;
 
 }
 
 
-#offline{
 
-
 
-}
 
-
 
-#online {
 
-
 
-}
 
-
 
 #offline .person{
 
   background-color: #eee;
 
 }
 
@@ -68,4 +35,12 @@ img{
 
   float: left;
 
   margin-right: 20px;
 
   margin-top: 10px;
 
+}
 
+
 
+#wrapper{
 
+  float: left;
 
+}
 
+
 
+.mapWrapper{
 
+  float: right;
 
 }

+ 21 - 5
src/App.js
Zobraziť súbor 

@@ -1,15 +1,31 @@
 
 import React, { Component } from 'react';
 
+import persons from './persons';
 
 //import ReactDOM from 'react-dom';
 
-//import logo from './logo.svg';
 
 import './App.css';
 
-//import BarChart from 'chart-race-react';
 
-import Tables from './components/Tables';
 
+import Tables from './Tables';
 
+
 
 
 class App extends Component {
 
+  constructor(props){
 
+    super(props);
 
+    this.persons = [];
 
+    this.state = {
 
+        persons
 
+    };
 
+  };
 
+  
+  change = () => {
 
+    const newPersons = [...this.state.persons];
 
+    newPersons.map( person => {person.speed = person.speed + Math.floor((Math.random() * 10) + 1)})
 
+    this.setState({ persons: newPersons });
 
+  }
 
+  
   render (){
 
+    let timer = setTimeout(this.change, 5000)
 
+
 
     return (
 
-      <div>
 
-        <Tables/>
 
+      <div id="wrapper">
 
+        <Tables persons={persons}/>
 
       </div>
 
   );
 
   }

+ 56 - 0
src/Tables.js
Zobraziť súbor 

@@ -0,0 +1,56 @@
 
+import React from "react";
 
+
 
+
 
+function Tables({persons}) {
 
+  function addEventlistener(name){
 
+    return function(event){
 
+      var personDiv = document.getElementById(name);
 
+      var extend = personDiv.children[0];
 
+      if (extend.style.display === "block") {
 
+          extend.style.display = "none";
 
+      } else {
 
+        extend.style.display = "block";
 
+      }
 
+    }
 
+  }
 
+
 
+  const sortedpersons = persons.sort(function(a, b){return b.speed - a.speed});
 
+  
+  return (
 
+    <div>
 
+      <div id="online">
 
+        {sortedpersons.filter(person => person.speed>0).map(person => {
 
+          return (
 
+              <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
 
+                  {person.name} ({person.speed} - {person.speed>0 ? "online" : "offline"})
 
+                  <div className='extend'> 
+                    <img src='foto.png' alt={person.fullName}/>
 
+                    <p>{person.fullName}</p>
 
+                    <p>Geschwindigkeit: {person.speed}</p>
 
+                    <p>Status: {person.speed>0 ? "online" : "offline"}</p>
 
+                  </div>
 
+              </div>
 
+          );
 
+        })}
 
+      </div> 
+      <div id="offline">
 
+        {sortedpersons.filter(person => person.speed<1).map(person => {
 
+          return (
 
+              <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
 
+                  {person.name} ({person.speed>0 ? "online" : "offline"})
 
+                  <div className='extend'> 
+                    <img src='foto.png' alt={person.fullName}/>
 
+                    <p>{person.fullName}</p>
 
+                    <p>Status: {person.speed>0 ? "online" : "offline"}</p>
 
+                  </div>
 
+              </div>
 
+          );
 
+        })}
 
+      </div>
 
+      
+        
+    </div>
 
+  );
 
+}
 
+
 
+export default Tables;

+ 31 - 0
src/components/Map.js
Zobraziť súbor 

@@ -0,0 +1,31 @@
 
+import React, { Component } from 'react';
 
+import Map from 'pigeon-maps';
 
+import Marker from 'pigeon-marker';
 
+import Overlay from 'pigeon-overlay';
 
+
 
+const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoicGlnZW9uLW1hcHMiLCJhIjoiY2l3eW01Y2E2MDA4dzJ6cWh5dG9pYWlwdiJ9.cvdCf-7PymM1Y3xp5j71NQ'
 
+
 
+/*const providers = () => {
 
+    osm: (x, y, z) => {
 
+      const s = String.fromCharCode(97 + (x + y + z) % 3)
 
+      return 'https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png'
 
+    }
 
+  }*/
 
+
 
+class PigeonMap extends Component {
 
+
 
+
 
+    render(){
 
+        return (
 
+            <Map center={[50.879, 4.6997]} zoom={12} width={600} height={400} className="mapWrapper"> /*
 
+                <Marker anchor={[50.874, 4.6947]} payload={1} onClick={({ event, anchor, payload }) => {}} />
 
+        
+                <Overlay anchor={[50.879, 4.6997]} offset={[120, 79]}>
 
+                  <img src='pigeon.jpg' width={240} height={158} alt='' />
 
+                </Overlay>*/
 
+              </Map>
 
+        );
 
+    }
 
+}
 
+
 
+export default PigeonMap;

+ 3 - 3
src/components/Tables.js → src/components/TablesClass.js
Zobraziť súbor 

@@ -1,7 +1,7 @@
 
 import React, { Component } from 'react';
 
 
 
-class Tables extends Component {
 
+class TablesClass extends Component {
 
     constructor(props){
 
         super(props);
 
         
@@ -90,7 +90,7 @@ class Tables extends Component {
 
     // render every person and a button in a wrapper
 
     render(){
 
         return (
 
-            <div>
 
+            <div className="tableWrapper">
 
                 {this.state.persons.map((person) => (
 
                     this.createDivs(person)
 
                 ))}
 
@@ -100,4 +100,4 @@ class Tables extends Component {
 
     }
 
 }
 
 
-export default Tables;
 
+export default TablesClass;

+ 1 - 1
src/index.js
Zobraziť súbor 

@@ -4,7 +4,7 @@ import './index.css';
 
 import App from './App';
 
 import * as serviceWorker from './serviceWorker';
 
 
-ReactDOM.render(<App />, document.getElementById('app'));
 
+ReactDOM.render(<App />, document.getElementById('root'));
 
 
 // If you want your app to work offline and load faster, you can change
 
 // unregister() to register() below. Note this comes with some pitfalls.

+ 32 - 0
src/persons.js
Zobraziť súbor 

@@ -0,0 +1,32 @@
 
+export default [
 
+  {
 
+    name: "Martin",
 
+    fullName: "Martin Venzl",
 
+    speed: 2
 
+  },
 
+  {
 
+    name: "Simon", 
+    fullName: "Simon Ellinger",  
+    speed: 4
 
+  },
 
+  {
 
+    name: "Lukas", 
+    fullName: "Lukas Wagner", 
+    speed: -9
 
+  },
 
+  {
 
+    name: "Bernie", 
+    fullName: "Bernadette Hammerle", 
+    speed: 3
 
+  },
 
+  {
 
+    name: "tester1", 
+    fullName: "Testperson 1", 
+    speed: -30
 
+  },
 
+  {
 
+    name: "tester2", 
+    fullName: "Testperson 2", 
+    speed: -20
 
+  }
 
+];