diff --git a/.env.example b/.env.example
deleted file mode 100644
index 75d1a71c9ec995f3ab6e2f4f3ad2933e576be245..0000000000000000000000000000000000000000
--- a/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-REACT_APP_URL = "http://localhost:5000"
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 81367c0e66931164fd5132902ec4b76ec30599df..960acce5c2bb3654ab7c92a991308c3c0bba0c81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,6 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="form"></div>
<div id="root"></div>
<!--
This HTML file is a template.
diff --git a/src/App.css b/src/App.css
index a0c99fee8d065ca947e7f47aaf956d4d918bf6c2..b0f08dddfc38b5c27752c025dbfe8113491b93d2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -51,7 +51,7 @@ div.header button:hover {
div.fade-main {
position: fixed;
top: 0;
- z-index: 1020;
+ z-index: 1000;
height: 100vh;
width: 100vw;
margin: auto;
@@ -60,22 +60,22 @@ div.fade-main {
}
div.sticky {
- position: fixed;
- top: 0px;
- right: 0px;
- height: 100px;
- width: 100px;
- margin-right: 150px;
+ position: fixed;
+ top: 0px;
+ right: 0px;
+ height: 100px;
+ width: 100px;
+ margin-right: 150px;
}
.close {
- position: fixed;
- color: #f1f1f1;
- height: 85px;
- font-size: 100px;
- font-weight: bold;
- transition: transform 0.4s ease-in-out;
- line-height: 70%;
+ position: fixed;
+ color: #f1f1f1;
+ height: 85px;
+ font-size: 100px;
+ font-weight: bold;
+ transition: transform 0.4s ease-in-out;
+ line-height: 70%;
}
.close:hover,
@@ -138,61 +138,3 @@ div.login button:hover {
background-color: darkblue;
cursor: pointer;
}
-
-.login .formDate {
- width: 30%;
-}
-
-.login label.formDate {
- color: white;
- width: 10%;
- margin-left: 10%;
- font-size: 180%;
-}
-
-.login .formTime {
- width: 30%;
- margin-right: 20%;
-}
-
-/* Editing text button in the toolbar */
-.leaflet-draw-toolbar .leaflet-draw-draw-textbox {
- background-image: url("icons/button-textbox.png");
- background-size: 30px 30px;
-}
-
-/* Editing tooltips */
-.leaflet-tooltip {
- font-size: 18px;
- /* Overriding tooltip layout by making it invisible */
- background-color: transparent;
- box-shadow: none;
- border: none;
- padding: 0;
-}
-
-/* remove the small triangle on tooltip */
-.leaflet-tooltip-bottom:before {
- border: 0;
-}
-
-/* Editing editable tooltips */
-.editable {
- cursor: text; /* the cursor icon doesn't change by default when hovering on top of the text; overriding */
- min-width: 154px;
- min-height: 18px;
- color: #fff;
- font-weight: bold;
- /* text borders */
- text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
- 1px 1px 0 #000;
-}
-
-/* placeholder text for tooltip */
-[contenteditable="true"]:empty:before {
- content: attr(placeholder);
- display: block; /* For Firefox */
- color: #777;
- text-shadow: none;
- font-weight: normal;
-}
diff --git a/src/App.js b/src/App.js
index a7f472449d5ddaf41c517bc9b63b969e042843c7..7342088361a7e2c36e0cf4cd71d5a6b7e269817b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,7 +31,6 @@ class App extends Component {
<div>
<UserMap position={initialPosition} zoom={this.state.zoom} mapUrl={this.state.mapUrl} />,
<Header handleLayerChange={this.handleLayerChange} />
-
</div>
);
}
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index ca30541e4519e54fc2517c61ad1280c82cacb1ba..cad46ebc192b29ccec8321ab819882a32a767561 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -1,65 +1,6 @@
import React, { Component } from "react";
import { EditControl } from "react-leaflet-draw";
-import L from "leaflet";
-import "leaflet-draw";
-import { FeatureGroup } from "react-leaflet";
-
-// class for text field
-L.Draw.MarkerTextBox = L.Draw.Marker.extend({
- options: {
- icon: L.divIcon({
- className: "", // empty class to override default styling
- iconSize: [20, 20],
- iconAnchor: [10, 20]
- }),
- repeatMode: false,
- interactive: true
- },
- initialize: function(map, options) {
- this.type = "textbox"; // important to have a unique type, so that it won't get mixed up with other elements
- this.featureTypeCode = "textbox";
- L.Draw.Feature.prototype.initialize.call(this, map, options);
- }
-});
-
-// Overriding default toolbar
-// Just adding one new button though lol
-L.DrawToolbar.include({
- getModeHandlers: function(map) {
- return [
- {
- enabled: this.options.polyline,
- handler: new L.Draw.Polyline(map, this.options.polyline),
- title: L.drawLocal.draw.toolbar.buttons.polyline
- },
- {
- enabled: this.options.polygon,
- handler: new L.Draw.Polygon(map, this.options.polygon),
- title: L.drawLocal.draw.toolbar.buttons.polygon
- },
- {
- enabled: this.options.rectangle,
- handler: new L.Draw.Rectangle(map, this.options.rectangle),
- title: L.drawLocal.draw.toolbar.buttons.rectangle
- },
- {
- enabled: this.options.circle,
- handler: new L.Draw.Circle(map, this.options.circle),
- title: L.drawLocal.draw.toolbar.buttons.circle
- },
- {
- enabled: this.options.marker,
- handler: new L.Draw.Marker(map, this.options.marker),
- title: L.drawLocal.draw.toolbar.buttons.marker
- },
- {
- enabled: this.options.marker,
- handler: new L.Draw.MarkerTextBox(map, this.options.marker),
- title: "Write text"
- }
- ];
- }
-});
+import { FeatureGroup, Marker, Polygon, Polyline } from "react-leaflet";
class DrawTools extends Component {
constructor(props) {
@@ -70,91 +11,47 @@ class DrawTools extends Component {
};
}
- _onCreated(e) {
- // check if a drawn polyline has just one point in it
- if (e.layerType === "polyline" && e.layer.getLatLngs().length === 1) {
- e.layer.remove();
- return;
- }
-
- if (e.layerType === "textbox") {
- // have to create tooltip as a DOM element to allow text selecting. maybe
- let tooltip = L.DomUtil.create("div", "editable");
- tooltip.innerHTML =
- '<div contenteditable="true" placeholder="Click here and type"></div>';
-
- e.layer.bindTooltip(tooltip, {
- permanent: true,
- direction: "bottom",
- interactive: true
- });
-
- // disable dragging when cursor is over marker (tooltip)
- // clicking on tooltip fires the marker's click handler, hence e.layer.on
- e.layer.on("mouseover", function() {
- e.layer._map.dragging.disable();
- });
-
- // enable dragging again when cursor is out of marker (tooltip)
- e.layer.on("mouseout", function() {
- e.layer._map.dragging.enable();
- });
-
- // show placeholder text again upon emptying textbox
- e.layer.on("keyup", function() {
- // when the text area is emptied, a <br> appears
- // manually removing it so that the placeholder text can show
- if (
- tooltip.innerHTML ===
- '<div placeholder="Click here and type" contenteditable="true"><br></div>' ||
- tooltip.innerHTML ===
- '<div placeholder="Click here and type" contenteditable="true"><div><br></div></div>'
- ) {
- tooltip.innerHTML =
- '<div placeholder="Click here and type" contenteditable="true"></div>';
- }
- });
- } // end if (e.layerType === "textbox")
-
- // turning layer data to GeoJSON
+ _onCreated = e => {
+ let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future
+ let layer = e.layer;
this.makeGeoJSON(e.layer);
- } // end _onCreated
+ };
- _onEditMove(e) {
+ _onEditMove = e => {
console.log("_onEditMove e:");
console.log(e);
// to be added once back-end has functionality to recognize ids
// this.props.sendGeoJSON(e.layer);
- }
+ };
- _onEditResize(e) {
+ _onEditResize = e => {
console.log("_onEditResize e:");
console.log(e);
- }
+ };
- _onEditVertex(e) {
+ _onEditVertex = e => {
console.log("_onEditVertex e:");
console.log(e);
// to be added once back-end has functionality to recognize ids
// this.props.sendGeoJSON(e.poly);
- }
+ };
- _onEditDeleteStart() {
+ _onEditDeleteStart = () => {
this.setState({ editModeActive: true });
- }
+ };
- _onEditDeleteStop() {
+ _onEditDeleteStop = () => {
this.setState({ editModeActive: false });
- }
+ };
- _onDeleted(e) {
+ _onDeleted = e => {
console.log(e.layers._layers);
/* to be added once back-end functionality is available
for(layer in e.layers._layers) {
this.sendGeoJSON(layer.options.id);
}
*/
- }
+ };
shouldComponentUpdate() {
// disable re-rendering when edit mode is active
@@ -162,15 +59,15 @@ class DrawTools extends Component {
}
// turn layer to GeoJSON data and add it to an array of all GeoJSON data of the current map
- makeGeoJSON(e) {
+ makeGeoJSON = e => {
let geoJSON = e.toGeoJSON();
console.log(
"UserMapille lähetettävä layeri: " + JSON.stringify(geoJSON, null, 4)
); // printing GeoJSON data of the previous object create
this.props.sendGeoJSON(geoJSON);
- }
+ };
- addFetchedLayerToMap(id, feature) {
+ addFetchedLayerToMap = (id, feature) => {
if (feature.geometry.type === "Point") {
// GeoJSON saves latitude first, not longitude like usual. swapping
let position = [
@@ -193,7 +90,7 @@ class DrawTools extends Component {
});
return <Polyline key={Math.random()} positions={positions} id={id} />;
}
- }
+ };
render() {
return (
@@ -217,7 +114,7 @@ class DrawTools extends Component {
repeatMode: true, // allows using the tool again after finishing the previous shape
shapeOptions: {
color: "#f9f10c",
- opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
+ opacity: 1
}
},
rectangle: {
@@ -243,10 +140,13 @@ class DrawTools extends Component {
}
},
marker: {
- repeatMode: false
+ repeatMode: true
},
circlemarker: false
}}
+ edit={{
+ marker: true
+ }}
/>
{/* iterate through every element fetched from back-end */}
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
deleted file mode 100644
index ac56b351fd779e57de73dfe363637af7518d754e..0000000000000000000000000000000000000000
--- a/src/components/EditGameForm.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Map, TileLayer } 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 => {
- 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()
- });
- };
-
- handleGameSave = e => {
- 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: '',
- startdate: startDate,
- enddate: endDate,
- center: this.state.mapCenter
- };
-
- e.preventDefault();
-
- let token = sessionStorage.getItem('token');
-
- // Send Game info to the server
- fetch(`${process.env.REACT_APP_URL}/game/edit/` + this.props.gameId, {
- method: 'PUT',
- headers: {
- Authorization: 'Bearer ' + token,
- Accept: 'application/json',
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(gameObject)
- })
- .then(res => res.json())
- .then(result => {
- alert(result.message);
- 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(`${process.env.REACT_APP_URL}/game/` + gameId)
- .then(response => response.json())
- .then(json => this.handleGameInfo(json))
- .catch(error => console.log(error));
- }
-
- handleGameInfo(json) {
- 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
- id='closeEditGameFormX'
- className='close'
- onClick={this.handleView}
- >
- ×
- </span>
- </div>
- <div className=''>
- <form onSubmit={this.handleGameSave}>
- <h1>Demo Game Creation</h1>
- <br />
- <input
- placeholder='Game name'
- name='gamename'
- value={this.state.gamename}
- onChange={this.handleChange}
- id='editGameNameInput'
- />
- <br />
- <input
- placeholder='Description'
- type='text'
- name='description'
- value={this.state.description}
- onChange={this.handleChange}
- id='editGameDescriptionInput'
- />
- <br />
- <label className=''>Start:</label>
- <input
- className='formDate'
- type='date'
- name='startDate'
- value={this.state.startDate}
- onChange={this.handleChange}
- id='editGameDateStartInput'
- />
- <input
- className='formTime'
- type='time'
- name='startTime'
- value={this.state.startTime}
- onChange={this.handleChange}
- rid='editGameTimeStartInput'
- />
- <br />
- <label className=''>End:</label>
- <input
- className='formDate'
- type='date'
- name='endDate'
- value={this.state.endDate}
- onChange={this.handleChange}
- min={this.state.startDate}
- id='editGameDateEndInput'
- />
- <input
- className='formTime'
- type='time'
- name='endTime'
- value={this.state.endTime}
- onChange={this.handleChange}
- id='editGameTimeEndInput'
- />
- <br />
- <label>Map things</label>
- <br />
- <Map
- id='editGameCenterMap'
- 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 id='editGameSubmitButton' type='submit'>
- Save changes
- </button>
- <h2>{this.state.errorMsg}</h2>
- </form>
- </div>
- </div>,
- document.getElementById('form')
- );
- }
-}
-
-export default EditGameForm;
diff --git a/src/components/GameList.js b/src/components/GameList.js
deleted file mode 100644
index e1b0fa1d69aa8307eaa160a3c90ce845e6611fb1..0000000000000000000000000000000000000000
--- a/src/components/GameList.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Fragment } from 'react';
-import EditGameForm from './EditGameForm';
-
-class GameList extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- games: [],
- selectedGame: null,
- editForm: false
- };
-
- this.toggleView = this.toggleView.bind(this);
- }
-
- componentDidMount() {
- this.getGames();
- }
-
- getGames() {
- fetch(`${process.env.REACT_APP_URL}/game/listgames`)
- .then(response => response.json())
- .then(games => {
- this.setState({
- games: games,
- selectedGame: games !== null && games[0].id
- });
- })
- .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 {
- this.setState({
- editForm: true
- });
- }
- };
-
- toggleView = e => {
- this.setState({
- editForm: !this.state.editForm
- });
- this.getGames();
- };
-
- 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 id='changeActiveGameList' onChange={this.handleChange}>
- {items}
- </select>
- {sessionStorage.getItem('token') && (
- <button id='editGameButton' onClick={this.handleEditClick}>
- Edit game
- </button>
- )}
- {this.state.editForm && this.state.selectedGame !== null && (
- <EditGameForm
- gameId={this.state.selectedGame}
- toggleView={this.toggleView}
- />
- )}
- </Fragment>
- );
- }
-}
-
-export default GameList;
diff --git a/src/components/Header.js b/src/components/Header.js
index c3b0d558801e1b219339a977f5b504bde9d581b0..70799067bb53691f50038a5c987469665f162b8b 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,20 +2,21 @@ 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 {
state = {
- form: '', // Popup form (login, register etc.)
+ login: false,
+ register: false,
username: null,
token: null
};
// toggles the login/register view
toggleView = view => {
- this.setState({
- form: view
+ this.setState(prevState => {
+ return {
+ [view]: view === 'login' ? !prevState.login : !prevState.register
+ };
});
};
@@ -34,7 +35,7 @@ class Header extends React.Component {
componentDidMount() {
let token = sessionStorage.getItem('token');
if (token) {
- fetch(`${process.env.REACT_APP_URL}/user/verify`, {
+ fetch('http://localhost:5000/user/verify', {
headers: {
Authorization: 'Bearer ' + token
}
@@ -65,58 +66,34 @@ class Header extends React.Component {
<div>
<div className='header'>
{!this.state.username && (
- <button
- id='registerButton'
- onClick={() => this.toggleView('register')}
- >
+ <button onClick={() => this.toggleView('register')}>
register
</button>
)}
{!this.state.username && (
- <button id='loginButton' onClick={() => this.toggleView('login')}>
- login
- </button>
+ <button onClick={() => this.toggleView('login')}>login</button>
)}
{this.state.username && (
- <button
- id='newGameButton'
- onClick={() => this.toggleView('newgame')}
- >
- New Game
- </button>
- )}
- {this.state.username && (
- <button id='logoutButton' onClick={this.handleLogout}>
- logout
- </button>
+ <button onClick={this.handleLogout}>logout</button>
)}
{this.state.username && <button>{this.state.username}</button>}
- <button id='changeLayerButton' onClick={this.props.handleLayerChange}>
- change layer
- </button>
- <GameList />
+ <button onClick={this.props.handleLayerChange}>change layer</button>
</div>
- {this.state.form === 'register' && (
+ {this.state.register && (
<RegisterForm
- view=''
+ view='register'
handleState={this.handleState}
toggleView={this.toggleView}
/>
)}
- {this.state.form === 'login' && (
+ {this.state.login && (
<LoginForm
- view=''
- handleState={this.handleState}
- toggleView={this.toggleView}
- />
- )}
- {this.state.form === 'newgame' && (
- <NewGameForm
- view=''
+ view='login'
handleState={this.handleState}
toggleView={this.toggleView}
/>
)}
+
</div>
);
}
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 91f1a5afb7d88635498b182dc62448b8e786ab37..89b15f365acdc7e42d3105e9e4f8cf9a72cdc00b 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -38,7 +38,7 @@ export class LoginForm extends React.Component {
e.preventDefault();
// Send login info to the server
- fetch(`${process.env.REACT_APP_URL}/user/login`, {
+ fetch('http://localhost:5000/user/login', {
method: 'POST',
headers: {
Accept: 'application/json',
@@ -56,7 +56,7 @@ export class LoginForm extends React.Component {
this.props.handleState(result);
this.handleView();
} else {
- this.handleError(result.message);
+ this.handleError(result.errorResponse.message);
}
},
// Note: it's important to handle errors here
@@ -80,11 +80,7 @@ export class LoginForm extends React.Component {
return (
<div className='fade-main'>
<div className='sticky'>
- <span
- id='closeLoginFormX'
- className='close'
- onClick={this.handleView}
- >
+ <span className='close' onClick={this.handleView}>
×
</span>
</div>
@@ -107,12 +103,10 @@ export class LoginForm extends React.Component {
name='password'
value={this.state.password}
onChange={this.handleChange}
- id='loginPasswordInput'
+ required
/>
<br />
- <button id='submitLoginButton' type='submit'>
- login
- </button>
+ <button type='submit'>login</button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
diff --git a/src/components/NewGameForm.js b/src/components/NewGameForm.js
deleted file mode 100644
index e681b0c725908fb6f1a5a6b3f31083eda31ba7a7..0000000000000000000000000000000000000000
--- a/src/components/NewGameForm.js
+++ /dev/null
@@ -1,201 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Map, TileLayer } from 'react-leaflet';
-
-export class NewGameForm extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- gamename: '',
- description: '',
- startDate: '',
- startTime: '',
- endDate: '',
- endTime: '',
- passwords: [],
- zoom: 13,
- mapCenter: {
- lat: 62.2416479,
- lng: 25.7597186
- }
- };
-
- this.handleMapDrag = this.handleMapDrag.bind(this);
- }
-
- handleError = error => {
- this.setState({ errorMsg: error });
- };
-
- handleChange = e => {
- 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 =
- 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: '',
- startdate: startDate,
- enddate: endDate,
- passwords: [this.state.password],
- center: this.state.mapCenter
- };
-
- e.preventDefault();
-
- let token = sessionStorage.getItem('token');
-
- // Send Game info to the server
- fetch(`${process.env.REACT_APP_URL}/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);
- }
-
- componentWillUnmount() {
- document.removeEventListener('keyup', this.handleEsc);
- }
-
- render() {
- return ReactDOM.createPortal(
- <div className='fade-main'>
- <div className='sticky'>
- <span
- id='closeNewGameFormX'
- 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}
- id='newGameNameInput'
- />
- <br />
- <input
- placeholder='Description'
- type='text'
- name='description'
- value={this.state.description}
- onChange={this.handleChange}
- id='newGameDescriptionInput'
- />
- <br />
- <label className=''>Start:</label>
- <input
- className='formDate'
- type='date'
- name='startDate'
- value={this.state.startDate}
- onChange={this.handleChange}
- id='newGameDateStartInput'
- />
- <input
- className='formTime'
- type='time'
- name='startTime'
- onChange={this.handleChange}
- id='newGameTimeStartInput'
- />
- <br />
- <label className=''>End:</label>
- <input
- className='formDate'
- type='date'
- name='endDate'
- value={this.state.endDate}
- onChange={this.handleChange}
- min={this.state.startDate}
- id='newGameDateEndInput'
- />
- <input
- className='formTime'
- type='time'
- name='endTime'
- onChange={this.handleChange}
- id='newGameTimeEndInput'
- />
- <br />
- <label>Map things</label>
- <br />
- <Map
- id='newGameCenterMap'
- 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 id='newGameSubmitButton' type='submit'>
- Submit
- </button>
- <h2>{this.state.errorMsg}</h2>
- </form>
- </div>
- </div>,
- document.getElementById('form')
- );
- }
-}
-
-export default NewGameForm;
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
index e6da5577e2b9fa6a43f7f99b9c283f32dc4886b2..56360b6f7c1565c49aa11d8ad7957ab156c35dce 100644
--- a/src/components/RegisterForm.js
+++ b/src/components/RegisterForm.js
@@ -44,7 +44,7 @@ export class RegisterForm extends React.Component {
this.handleError('Passwords do not match');
} else {
// Send register info to the server
- fetch(`${process.env.REACT_APP_URL}/user/register`, {
+ fetch('http://localhost:5000/user/register', {
method: 'POST',
headers: {
Accept: 'application/json',
@@ -62,7 +62,7 @@ export class RegisterForm extends React.Component {
this.props.handleState(result);
this.handleView();
} else {
- this.handleError(result.message);
+ this.handleError(result.errorResponse.message);
}
},
// Note: it's important to handle errors here
@@ -87,11 +87,7 @@ export class RegisterForm extends React.Component {
return (
<div className='fade-main'>
<div className='sticky'>
- <span
- id='closeRegisterFormX'
- className='close'
- onClick={this.handleView}
- >
+ <span className='close' onClick={this.handleView}>
×
</span>
</div>
@@ -114,7 +110,7 @@ export class RegisterForm extends React.Component {
name='password'
value={this.state.password}
onChange={this.handleChange}
- id='registerPasswordInput'
+ required
/>
<br />
<input
@@ -123,12 +119,10 @@ export class RegisterForm extends React.Component {
name='password2'
value={this.state.password2}
onChange={this.handleChange}
- id='registerPasswordVerifyInput'
+ required
/>
<br />
- <button id='submitRegisterButton' type='submit'>
- register
- </button>
+ <button type='submit'>register</button>
<h2>{this.state.errorMsg}</h2>
</form>
</div>
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index 2fc500b8db0a944b9b51a8559ec1b184681d0877..052133ff11e4b65cbda0397c9b0795e9d42f1590 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
-import L from "leaflet";
import DrawTools from "./DrawTools.js";
class UserMap extends Component {
@@ -118,10 +117,6 @@ class UserMap extends Component {
}
}
- testers = asd => {
- console.log(asd.target.getZoom());
- };
-
render() {
return (
<Map
@@ -154,5 +149,4 @@ class UserMap extends Component {
);
}
}
-
export default UserMap;
diff --git a/src/icons/button-textbox.png b/src/icons/button-textbox.png
deleted file mode 100644
index e36a2872bdf8f68df996d35159335a77211ead7a..0000000000000000000000000000000000000000
Binary files a/src/icons/button-textbox.png and /dev/null differ
diff --git a/src/icons/nil.png b/src/icons/nil.png
deleted file mode 100644
index ae058ee7bffad41634a20cd463fc94219f0de69b..0000000000000000000000000000000000000000
Binary files a/src/icons/nil.png and /dev/null differ