diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..669894d3c4e06a1033ec1aa21cff5f2a73553091
--- /dev/null
+++ b/src/components/EditGameForm.js
@@ -0,0 +1,220 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+ Map,
+ TileLayer,
+ ZoomControl,
+ Marker,
+ Popup
+} from 'react-leaflet'
+
+export class EditGameForm extends React.Component{
+ constructor(props){
+ super(props);
+
+ this.state = {
+ gamename: "",
+ description: "",
+ startDate: "",
+ startTime: "",
+ endDate: "",
+ endTime: "",
+ zoom: 13,
+ mapCenter: {
+ lat: 62.2416479,
+ lng: 25.7597186
+ }
+ }
+
+ this.handleMapDrag = this.handleMapDrag.bind(this);
+ }
+
+ handleError = error => {
+ this.setState({ errorMsg: error });
+ };
+
+ handleChange = e => {
+ console.log(e.target.value);
+ const { name, value } = e.target;
+ this.setState({ [name]: value });
+ };
+
+ // show/hide this form
+ handleView = e => {
+ this.props.toggleView(this.props.view);
+ };
+
+ // remove view with ESC
+ handleEsc = e => {
+ if (e.keyCode === 27) {
+ this.handleView();
+ }
+ };
+
+ handleMapDrag = e => {
+ this.setState({
+ mapCenter: e.target.getCenter()
+ });
+ }
+
+ handleMapScroll = e => {
+ this.setState({
+ zoom: e.target.getZoom()
+ });
+ }
+
+ // handleGameCreation = e => {
+ // let startDate = new Date(this.state.startDate + " " + this.state.startTime);
+ // let endDate = new Date(this.state.endDate + " " + this.state.endTime);
+
+ // const gameObject = {
+ // name: this.state.gamename,
+ // desc: this.state.description,
+ // map: "", //TODO: map json
+ // startdate: startDate.toISOString(),
+ // enddate: endDate.toISOString(),
+ // passwords: [this.state.password],
+ // center: this.state.mapCenter
+ // }
+
+ // e.preventDefault();
+
+ // let token = sessionStorage.getItem('token');
+
+ // // Send Game info to the server
+ // fetch('http://localhost:5000/game/new', {
+ // method: 'POST',
+ // headers: {
+ // Authorization: 'Bearer ' + token,
+ // Accept: 'application/json',
+ // 'Content-Type': 'application/json'
+ // },
+ // body: JSON.stringify(gameObject)
+ // }).then(res => res.json())
+ // .then(result => {
+ // this.handleView();
+ // })
+ // .catch(error => console.log('Error: ', error));
+ // };
+
+ componentDidMount() {
+ document.addEventListener('keyup', this.handleEsc);
+ this.getGameInfo(this.props.gameId);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('keyup', this.handleEsc);
+ }
+
+ getGameInfo(gameId){
+ fetch('http://localhost:5000/game/' + gameId)
+ .then(response => response.json())
+ .then(json => this.handleGameInfo(json))
+ .catch(error => console.log(error));
+ }
+
+ handleGameInfo(json){
+ console.log(json.startdate);
+ console.log(json.startdate.substring(11,16));
+
+ this.setState({
+ gamename: json.name,
+ description: json.desc,
+ startDate: json.startdate.substring(0,10),
+ startTime: json.startdate.substring(11,16),
+ endDate: json.enddate.substring(0,10),
+ endTime: json.enddate.substring(11,16),
+ zoom: 13,
+ mapCenter: {
+ lat: json.center.lat,
+ lng: json.center.lng
+ }
+ })
+ }
+
+ render() {
+ return ReactDOM.createPortal (
+ <div className='fade-main'>
+ <div className='sticky'>
+ <span className='close' onClick={this.handleView}>
+ ×
+ </span>
+ </div>
+ <div className=''>
+ <form onSubmit={this.handleGameCreation}>
+ <h1>Demo Game Creation</h1>
+ <br />
+ <input
+ placeholder='Game name'
+ name='gamename'
+ value={this.state.gamename}
+ onChange={this.handleChange}
+ required
+ />
+ <br />
+ <input
+ placeholder='Description'
+ type='text'
+ name='description'
+ value={this.state.description}
+ onChange={this.handleChange}
+ required
+ />
+ <br />
+ <label className=''>Start:</label>
+ <input
+ className='formDate'
+ type='date'
+ name='startDate'
+ value={this.state.startDate}
+ onChange={this.handleChange}
+ required
+ />
+ <input
+ className='formTime'
+ type='time'
+ name='startTime'
+ value={this.state.startTime}
+ onChange={this.handleChange}
+ required
+ />
+ <br />
+ <label className=''>End:</label>
+ <input
+ className='formDate'
+ type='date'
+ name='endDate'
+ value={this.state.endDate}
+ onChange={this.handleChange}
+ min={this.state.startDate}
+ required
+ />
+ <input
+ className='formTime'
+ type='time'
+ name='endTime'
+ value={this.state.endTime}
+ onChange={this.handleChange}
+ required
+ />
+ <br />
+ <label>Map things</label>
+ <br />
+ <Map className='' center={[this.state.mapCenter.lat, this.state.mapCenter.lng]} zoom={this.state.zoom} style={{height: '400px', width: '400px'} } onmoveend={this.handleMapDrag} onzoomend={this.handleMapScroll}>
+ <TileLayer
+ attribution='Maanmittauslaitoksen kartta'
+ url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+ />
+ </Map>
+ <br />
+ <button type='submit'>Save changes</button>
+ <h2>{this.state.errorMsg}</h2>
+ </form>
+ </div>
+ </div>
+ ,document.getElementById('form')
+ );
+ }
+}
+
+export default EditGameForm;
\ No newline at end of file
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 4bcf97fe7676dd558d7a3485dfeb45a6bfde2139..9c68ad23c976998152b38ada890f8d3c754f9ade 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -1,12 +1,16 @@
import React, { Fragment } from 'react';
+import EditGameForm from './EditGameForm';
class GameList extends React.Component {
constructor(props){
super(props);
this.state = {
games: [],
- selectedGame: null
+ selectedGame: null,
+ editForm: false
}
+
+ this.toggleView = this.toggleView.bind(this);
}
componentDidMount() {
@@ -25,13 +29,18 @@ class GameList extends React.Component {
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))
+ this.setState({
+ editForm: true
+ });
}
}
+ toggleView = (e) =>{
+ this.setState({
+ editForm: !this.state.editForm
+ });
+ }
+
render() {
let items = [];
@@ -49,6 +58,8 @@ class GameList extends React.Component {
{items}
</select>
<button onClick={this.handleEditClick}>Edit game</button>
+ {(this.state.editForm && this.state.selectedGame !== null)
+ && <EditGameForm gameId={this.state.selectedGame} toggleView={this.toggleView}/>}
</Fragment>
);
}
diff --git a/src/components/Header.js b/src/components/Header.js
index 49152eb42ac5a1b62098ffeee278301bb6b4263d..6eff8b4572bd8e4404d9a167fbb556756ac6bf40 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -34,7 +34,7 @@ class Header extends React.Component {
componentDidMount() {
let token = sessionStorage.getItem('token');
if (token) {
- fetch('http://172.20.2.143:5000/user/verify', {
+ fetch('http://localhost:5000/user/verify', {
headers: {
Authorization: 'Bearer ' + token
}
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
index 3dcf6a585e2bb08e3ca31ba1df46ca28a8f25387..f717fc330ef1cfd13a0130352a2981ade8fb0a3b 100644
--- a/src/components/NewGameForm.js
+++ b/src/components/NewGameForm.js
@@ -64,15 +64,15 @@ export class NewGameForm extends React.Component{
}
handleGameCreation = e => {
- let startDate = new Date(this.state.startDate + " " + this.state.startTime);
- let endDate = new Date(this.state.endDate + " " + this.state.endTime);
+ let startDate = this.state.startDate + "T" + this.state.startTime + ":00.000Z";
+ let endDate = this.state.endDate + "T" + this.state.endTime + ":00.000Z";
const gameObject = {
name: this.state.gamename,
desc: this.state.description,
- map: "", //TODO: map json
- startdate: startDate.toISOString(),
- enddate: endDate.toISOString(),
+ map: "",
+ startdate: startDate,
+ enddate: endDate,
passwords: [this.state.password],
center: this.state.mapCenter
}