Skip to content
Snippets Groups Projects
Commit faaef841 authored by Joni Laukka's avatar Joni Laukka
Browse files

Notifications and notification popup

parent 47aeec0e
No related branches found
No related tags found
4 merge requests!46Development to testing,!41Notifications + small updates,!39Notification view,!32Notification view
Hide whitespace changes
Inline Side-by-side
src/App.css
+ 15
− 1
View file @ faaef841
......@@ -13,7 +13,7 @@ body {
/* UserMap */
.map {
position: absolute;
margin-top: 50px;
/* margin-top: 50px; */
height: 95vh;
width: 100vw;
}
......@@ -233,3 +233,17 @@ div.login button:hover {
display: flex;
flex-direction: column;
}
.notification-popup {
position: absolute;
z-index: 1010;
}
.notification-popup.warning {
background-color: yellow;
color: black;
}
.notification-popup.alert {
background-color: red;
}
src/components/GameView.js
+ 11
− 11
View file @ faaef841
......@@ -64,7 +64,6 @@ export default class GameView extends React.Component {
handleLeaveFaction = e => {
let token = sessionStorage.getItem("token");
let error = false;
fetch(
`${process.env.REACT_APP_API_URL}/faction/leave/${
this.state.gameInfo.id
......@@ -78,7 +77,6 @@ export default class GameView extends React.Component {
)
.then(res => {
if (!res.ok) {
error = true;
}
return res.json();
})
......@@ -91,7 +89,6 @@ export default class GameView extends React.Component {
// setting the socket signal automatically fires shouldComponentUpdate function where socketSignal prop is present
// setting socketSignal to null immediately after to avoid multiple database fetches
getSocketSignal = data => {
console.log(data);
this.setState(
{
socketSignal: data
......@@ -112,7 +109,6 @@ export default class GameView extends React.Component {
render() {
const initialPosition = [this.state.lat, this.state.lng];
return (
<div>
<Link to="/">
......@@ -186,13 +182,11 @@ export default class GameView extends React.Component {
zoom={this.state.zoom}
mapUrl={this.state.mapUrl}
currentGameId={this.state.gameInfo.id}
socketSignal={
this.state.socketSignal !== null
? this.state.socketSignal
: null
}
/>
<NotificationPopup socketSignal={this.state.socketSignal} />
socketSignal={this.state.socketSignal}
>
<NotificationPopup socketSignal={this.state.socketSignal} />
</UserMap>
{this.state.form === "edit" && (
<EditGameForm
gameId={this.state.gameInfo.id}
......@@ -221,6 +215,12 @@ export default class GameView extends React.Component {
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
socket={this.state.socket}
role={this.state.role}
gameState={
this.state.gameInfo !== undefined
? this.state.gameInfo.state
: ""
}
/>
)}
</div>
......
src/components/NotificationCard.js 0 → 100644
+ 11
− 0
View file @ faaef841
import React from "react";
export default class NotificationCard extends React.Component {
render() {
return (
<div>
{this.props.notification.type} : {this.props.notification.message}
</div>
);
}
}
src/components/NotificationPopup.js
+ 46
− 5
View file @ faaef841
import React from "react";
export default class NotificationPopup extends React.Component {
state = {
lastNotification: null,
visible: true
};
componentDidUpdate(prevProps, prevState) {
if (prevProps.socketSignal === "alert") {
console.log("alert");
}
if (prevProps.socketSignal === "note") {
console.log("note");
if (
prevProps.socketSignal !== null &&
prevProps.socketSignal !== this.state.lastNotification
) {
if (prevProps.socketSignal.type === "alert") {
this.setState({
lastNotification: prevProps.socketSignal,
visible: true
});
}
if (prevProps.socketSignal.type === "note") {
this.setState({
lastNotification: prevProps.socketSignal,
visible: true
});
}
}
}
render() {
if (this.state.lastNotification !== null && this.state.visible) {
return (
<div
className={
this.state.lastNotification.type === "alert"
? "notification-popup alert"
: "notification-popup warning"
}
>
<button
onClick={() => {
this.setState({ visible: false });
}}
>
Close
</button>
<br />
<label>
{this.state.lastNotification.type === "alert" ? "ALERT" : "Note"}
</label>
<p>{this.state.lastNotification.message}</p>
</div>
);
}
return false;
}
}
src/components/NotificationView.js
+ 42
− 20
View file @ faaef841
import React from "react";
import NotificationCard from "./NotificationCard";
export default class NotificationView extends React.Component {
state = {
notifications: [],
notificationInput: ""
notificationInput: "",
notificationTypeInput: "note"
};
componentDidMount() {
......@@ -19,39 +21,59 @@ export default class NotificationView extends React.Component {
})
.then(res => res.json())
.then(res => {
console.log(res);
//this.setState({ notifications: res });
this.setState({ notifications: res.reverse() });
});
}
handleSend = e => {
e.preventDefault();
console.log(this.props.socket);
this.props.socket.emit(this.props.gameId, {
type: "alert",
message: "asd"
});
if (this.state.notificationInput === "") {
alert("notification message can't be empty");
} else {
this.props.socket.emit("game-info", {
type: this.state.notificationTypeInput,
message: this.state.notificationInput,
game: this.props.gameId
});
this.getNotifications(this.props.gameId);
this.setState({ notificationInput: "" });
}
};
render() {
let notifications = this.state.notifications.map(notification => (
<NotificationCard key={notification.id} notification={notification} />
));
return (
<div className="fade-main">
<button onClick={() => this.props.toggleView()}>Close</button>
<div>
<form onSubmit={this.handleSend}>
<input
type="text"
value={this.state.notificationInput}
onChange={e =>
this.setState({ notificationInput: e.target.value })
}
placeholder="Notification text..."
/>
<button type="submit">Send Notification</button>
</form>
{this.props.role === "admin" && this.props.gameState !== "ENDED" && (
<form onSubmit={this.handleSend}>
<select
value={this.state.notificationTypeInput}
onChange={e =>
this.setState({ notificationTypeInput: e.target.value })
}
>
<option value="note">Note</option>
<option value="alert">Alert</option>
</select>
<input
type="text"
value={this.state.notificationInput}
onChange={e =>
this.setState({ notificationInput: e.target.value })
}
placeholder="Notification message..."
/>
<button type="submit">Send Notification</button>
</form>
)}
</div>
{notifications}
</div>
);
}
......
src/components/Socket.js
+ 2
− 3
View file @ faaef841
......@@ -17,7 +17,7 @@ export default class ClientSocket extends React.Component {
// initiate the socket on component mount
async componentWillMount() {
console.log("hi socket");
// console.log("hi socket");
// need to explicitly update drawings and trackings when gameID first becomes available
if (this.props.gameId !== null) {
await this.props.getSocketSignal("drawing-update");
......@@ -38,7 +38,7 @@ export default class ClientSocket extends React.Component {
// disconnect the socket on component dismount
componentWillUnmount() {
console.log("bye socket");
// console.log("bye socket");
this.state.sock.disconnect();
}
......@@ -47,7 +47,6 @@ export default class ClientSocket extends React.Component {
// set the socket to listen gameId-thread
socket.on(this.props.gameId, data => {
console.log("on " + data);
this.props.getSocketSignal(data);
// check socket update type
this.setState({ update: data.type });
......
src/components/UserMap.js
+ 35
− 32
View file @ faaef841
......@@ -149,38 +149,41 @@ class UserMap extends Component {
render() {
return (
<Map
className="map"
center={this.props.position}
zoom={this.props.zoom}
minZoom="7"
maxZoom="17"
zoomControl={false}
>
<TileLayer
attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
url={this.props.mapUrl}
/>
<ZoomControl position="topright" />
<DrawTools
position={this.props.position}
sendGeoJSON={this.sendGeoJSON}
geoJSONLayer={this.state.geoJSONLayer}
currentGameId={this.props.currentGameId}
/>
{this.state.ownLat !== null && (
<Marker position={[this.state.ownLat, this.state.ownLng]}>
<Popup>
User's real position.
<br />
</Popup>
</Marker>
)}
<Player
currentGameId={this.props.currentGameId}
socketSignal={this.props.socketSignal}
/>
</Map>
<div>
<Map
className="map"
center={this.props.position}
zoom={this.props.zoom}
minZoom="7"
maxZoom="17"
zoomControl={false}
>
<TileLayer
attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
url={this.props.mapUrl}
/>
<ZoomControl position="topright" />
<DrawTools
position={this.props.position}
sendGeoJSON={this.sendGeoJSON}
geoJSONLayer={this.state.geoJSONLayer}
currentGameId={this.props.currentGameId}
/>
{this.state.ownLat !== null && (
<Marker position={[this.state.ownLat, this.state.ownLng]}>
<Popup>
User's real position.
<br />
</Popup>
</Marker>
)}
<Player
currentGameId={this.props.currentGameId}
socketSignal={this.props.socketSignal}
/>
</Map>
{this.props.children}
</div>
);
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment