added deletion confirmation dialogs

This commit is contained in:
majormjr 2016-05-09 19:33:31 -04:00
parent d0801b68d1
commit 19265232b6
7 changed files with 97 additions and 34 deletions

View File

@ -19,6 +19,8 @@
<link rel="stylesheet" href="./dist/dist/css/skins/skin-blue.css">
<!-- Extra CSS tweaks -->
<link rel="stylesheet" href="./dist/dist/css/factorio-server-manager.css">
<!-- Sweetalert.js stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

View File

@ -9,6 +9,7 @@ class App extends React.Component {
constructor(props) {
super(props);
this.checkLogin = this.checkLogin.bind(this);
this.flashMessage = this.flashMessage.bind(this);
this.facServStatus = this.facServStatus.bind(this);
this.getSaves = this.getSaves.bind(this);
this.getStatus = this.getStatus.bind(this);
@ -18,11 +19,14 @@ class App extends React.Component {
saves: [],
loggedIn: false,
username: "",
messages: [],
showMessage: false,
}
}
componentDidMount() {
this.checkLogin();
// Wait 1 second before redirecting to login page
setTimeout(() => {
if (!this.state.loggedIn) {
browserHistory.push("/login");
@ -30,6 +34,12 @@ class App extends React.Component {
}, 1000);
}
flashMessage(message) {
var m = this.state.messages;
m.push(message);
this.setState({messages: m, showMessage: true});
}
checkLogin() {
$.ajax({
url: "/api/user/status",
@ -65,7 +75,7 @@ class App extends React.Component {
}
},
error: (xhr, status, err) => {
console.log('api/mods/list', status, err.toString());
console.log('api/saves/list', status, err.toString());
}
})
@ -88,8 +98,9 @@ class App extends React.Component {
}
render() {
// render main application, if not logged in show Not logged in message
// render main application,
// if logged in show application
// if not logged in show Not logged in message
var resp;
if (this.state.loggedIn) {
var resp =
@ -97,6 +108,7 @@ class App extends React.Component {
<Header
username={this.state.username}
loggedIn={this.state.loggedIn}
messages={this.state.messages}
/>
<Sidebar
@ -104,9 +116,12 @@ class App extends React.Component {
serverRunning={this.state.serverRunning}
/>
// Render react-router components and pass in props
{React.cloneElement(
this.props.children,
{message: "",
messages: this.state.messages,
flashMessage: this.flashMessage,
facServStatus: this.facServStatus,
serverStatus: this.state.serverStatus,
getStatus: this.getStatus,

View File

@ -1,4 +1,5 @@
import React from 'react';
import swal from 'sweetalert';
class InstalledMods extends React.Component {
componentDidMount() {
@ -32,13 +33,27 @@ class InstalledMods extends React.Component {
}
removeMod(i) {
$.ajax({
url: "/api/mods/rm/" + this.props.installedMods[i],
success: (data) => {
alert(data)
}
var self = this;
swal({
title: "Are you sure?",
text: "Save: " + self.props.installedMods[i] + " will be deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
() => {
$.ajax({
url: "/api/mods/rm/" + self.props.installedMods[i],
success: (resp) => {
if (resp.success === true) {
swal("Deleted!", resp.data, "success");
self.updateInstalledMods();
}
}
})
});
this.updateInstalledMods();
}
render() {

View File

@ -1,5 +1,6 @@
import React from 'react';
import Save from './Save.jsx';
import swal from 'sweetalert';
class SavesList extends React.Component {
constructor(props) {
@ -13,13 +14,28 @@ class SavesList extends React.Component {
}
removeSave(saveName, e) {
$.ajax({
url: "/api/saves/rm/" + saveName,
success: (data) => {
alert(data)
}
})
this.updateSavesList();
var self = this;
swal({
title: "Are you sure?",
text: "Save: " + saveName + " will be deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
() => {
$.ajax({
url: "/api/saves/rm/" + saveName,
dataType: "json",
success: (resp) => {
if (resp.success === true) {
swal("Deleted!", resp.data, "success");
self.updateSavesList();
}
}
})
});
}
render() {

View File

@ -23,11 +23,14 @@ class AddUser extends React.Component {
email: this.refs.email.value,
}
if (user.password !== this.refs.passwordConfirm.value) {
console.log("passwords do not match")
console.log("passwords do not match");
return
}
console.log(this.validateEmail(user.username))
if (!this.validateEmail(user.email)) {
console.log("invalid email address");
return
}
$.ajax({
type: "POST",

View File

@ -1,4 +1,5 @@
import React from 'react';
import swal from 'sweetalert';
class UserTable extends React.Component {
constructor(props) {
@ -7,21 +8,31 @@ class UserTable extends React.Component {
}
removeUser(user) {
user = {username: user}
$.ajax({
type: "POST",
url: "/api/user/remove",
dataType: "json",
data: JSON.stringify(user),
success: (resp) => {
if (resp.success === true) {
console.log(resp)
alert(resp.data)
this.props.listUsers();
swal({
title: "Are you sure?",
text: "User: " + user + " will be deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
() => {
user = {username: user}
$.ajax({
type: "POST",
url: "/api/user/remove",
dataType: "json",
data: JSON.stringify(user),
success: (resp) => {
if (resp.success === true) {
swal("Deleted!", resp.data, "success");
}
}
}
})
})
});
this.props.listUsers();
}

View File

@ -10,13 +10,14 @@
"author": "Mitch Roote <mitch@r00t.ca>",
"license": "MIT",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-router": "^2.3.0",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13"
"babel-preset-react": "^6.3.13",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-router": "^2.3.0",
"sweetalert": "^1.1.3"
},
"devDependencies": {
"css-loader": "^0.23.1",