Merge branch 'gamelist' into '25-pelinluontilomake'

Combine gamelist and new game form

See merge request !11

src/App.js

@@ -7,20 +7,31 @@ import Header from './components/Header';
 class App extends Component {
   constructor() {
     super();
+
+    
     // set initial state
     this.state = {
       lat: 62.2416479,
       lng: 25.7597186,
-      zoom: 13
+      zoom: 13,
+      mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
     };
+
+    this.handleLayerChange = this.handleLayerChange.bind(this);
   }
+  // Toggles through the list and changes the mapUrl state
+  handleLayerChange = () => {
+    const maps = ['https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg', 'https://tiles.kartat.kapsi.fi/peruskartta/{z}/{x}/{y}.jpg','https://tiles.kartat.kapsi.fi/ortokuva/{z}/{x}/{y}.jpg'];
+    this.setState({mapUrl: maps.indexOf(this.state.mapUrl) < maps.length - 1 ? maps[maps.indexOf(this.state.mapUrl) + 1] : maps[0]})
+  };
 
   render() {
     const initialPosition = [this.state.lat, this.state.lng];
     return (
       <div>
-        <UserMap position={initialPosition} zoom={this.state.zoom} />
-        <Header />
+        <UserMap position={initialPosition} zoom={this.state.zoom} mapUrl={this.state.mapUrl} />,
+        <Header handleLayerChange={this.handleLayerChange} />       
+
       </div>
     );
   }

src/components/GameList.js

+import React, { Fragment } from 'react';
+
+class GameList extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      games: [],
+      selectedGame: null
+    }
+  }
+
+  componentDidMount() {
+    fetch('http://localhost:5000/game/listgames')
+    .then(response => response.json())
+    .then(games => this.setState({games}))
+    .catch(error => {console.log(error);})
+  }
+
+  handleChange = (e) =>{
+    this.setState({
+      selectedGame: e.target.value
+    });
+  }
+
+  handleEditClick = (e) => {
+    if(this.state.selectedGame === null){alert('No game selected');}
+    else{
+      fetch('http://localhost:5000/game/' + this.state.selectedGame)
+      .then(response => response.json())
+      .then(json => console.log(json))
+      .catch(error => console.log(error))
+    }
+  }
+
+  render() {
+    let items = [];
+
+    for (let i = 0; i < this.state.games.length; i++) {
+      const element = this.state.games[i];
+      items.push(
+        <option key={element.id} value={element.id}>{element.name}</option>
+      );
+    }
+
+    return (
+      <Fragment>
+        <label>Game: </label>
+        <select onChange={this.handleChange}>
+          {items}
+        </select> 
+        <button onClick={this.handleEditClick}>Edit game</button>
+      </Fragment>
+    );
+  }
+}
+ 
+export default GameList;
\ No newline at end of file

src/components/Header.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import LoginForm from './LoginForm';
 import RegisterForm from './RegisterForm';
+import GameList from './GameList';
 import NewGameForm from './NewGameForm';
 
 class Header extends React.Component {
@@ -38,24 +39,24 @@ class Header extends React.Component {
           Authorization: 'Bearer ' + token
         }
       })
-        .then(res => res.json())
-        .then(
-          result => {
-            // if token is still valid, login user
-            if (result === true) {
-              this.setState({
-                username: sessionStorage.getItem('name'),
-                token: token
-              });
-              // logout user if token has expired / is invalid
-            } else {
-              this.handleLogout();
-            }
-          },
-          error => {
-            console.log(error);
+      .then(res => res.json())
+      .then(
+        result => {
+          // if token is still valid, login user
+          if (result === true) {
+            this.setState({
+              username: sessionStorage.getItem('name'),
+              token: token
+            });
+            // logout user if token has expired / is invalid
+          } else {
+            this.handleLogout();
           }
-        );
+        },
+        error => {
+          console.log(error);
+        }
+      );
     }
   }
 
@@ -78,6 +79,8 @@ class Header extends React.Component {
             <button onClick={this.handleLogout}>logout</button>
           )}
           {this.state.username && <button>{this.state.username}</button>}
+          <button onClick={this.props.handleLayerChange}>change layer</button>
+          <GameList />
         </div>
         {this.state.form === 'register' && (
           <RegisterForm

src/components/UserMap.js

@@ -14,6 +14,7 @@ class UserMap extends Component {
     this.state = {
       ownLat: null,
       ownLng: null,
+      mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
     }
 
     this.watchPositionId = null;
@@ -63,15 +64,28 @@ class UserMap extends Component {
     }
   }
 
+  positionToGeoJSON(position){
+    let geoJSON = {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Point",
+        coordinates: [position.coords.longitude, position.coords.latitude]
+      }
+    }
+
+    return JSON.stringify(geoJSON);
+  }
+
   render() {
     return (
       <Map className='map' center={this.props.position} zoom={this.props.zoom}>
         <TileLayer
-          attribution='Maanmittauslaitoksen kartta'
-          url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+          attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
+          url={this.props.mapUrl}
         />
         <ZoomControl position='topright' />
-		<DrawTools position={this.props.position} />
+		    <DrawTools position={this.props.position} />
         <Marker position={this.props.position}>
           <Popup>
             Se on perjantai, my dudes <br />