changed swal to swal2 in ModPacks

This commit is contained in:
knoxfighter
2018-08-11 04:01:19 +02:00
parent e68fab4d59
commit 2e5ad41f7b
7 changed files with 204 additions and 186 deletions

View File

@ -81,7 +81,6 @@ class ModLoadSave extends React.Component {
html: table, html: table,
type: 'question', type: 'question',
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Download Mods!", confirmButtonText: "Download Mods!",
showLoaderOnConfirm: true, showLoaderOnConfirm: true,
preConfirm: this.loadModsSwalHandler preConfirm: this.loadModsSwalHandler

View File

@ -4,6 +4,7 @@ import NativeListener from 'react-native-listener';
import {instanceOfModsContent} from "../ModsPropTypes.js"; import {instanceOfModsContent} from "../ModsPropTypes.js";
import locks from "locks"; import locks from "locks";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import {ReactSwalNormal, ReactSwalDanger} from './../../../../js/customSwal';
class ModPackOverview extends React.Component { class ModPackOverview extends React.Component {
constructor(props) { constructor(props) {
@ -45,62 +46,69 @@ class ModPackOverview extends React.Component {
} }
createModPack() { createModPack() {
swal({ ReactSwalNormal.fire({
title: "Create modpack", title: "Create modpack",
text: "Please enter an unique modpack name:", html: "Please enter an unique modpack name:",
type: "input", input: "text",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false,
inputPlaceholder: "Modpack name", inputPlaceholder: "Modpack name",
showLoaderOnConfirm: true inputAttributes: {
}, required: "required"
(inputValue) => { },
if (inputValue === false) return false; inputValidator: (value) => {
return new Promise(resolve => {
if(value) {
resolve();
} else {
resolve("You need to enter a name");
}
});
},
showLoaderOnConfirm: true,
preConfirm: (inputValue) => {
// console.log(this);
if (inputValue === "") { $.ajax({
swal.showInputError("A modpack needs a name!"); url: "/api/mods/packs/create",
return false method: "POST",
data: {name: inputValue},
dataType: "JSON",
success: (data) => {
this.mutex.lock(() => {
let packList = this.state.listPacks;
data.data.mod_packs.forEach((v, k) => {
if(v.name == inputValue) {
packList.push(data.data.mod_packs[k]);
return false;
}
});
this.setState({
listPacks: packList
});
ReactSwalNormal.fire({
title: "modpack created successfully",
type: "success"
});
this.mutex.unlock();
});
},
error: (jqXHR, status, err) => {
console.log('api/mods/packs/create', status, err.toString());
let jsonResponse = jqXHR.responseJSON;
ReactSwalNormal.fire({
title: "Error on creating modpack",
text: jsonResponse.data,
type: "error"
});
}
});
} }
$.ajax({
url: "/api/mods/packs/create",
method: "POST",
data: {name: inputValue},
dataType: "JSON",
success: (data) => {
this.mutex.lock(() => {
let packList = this.state.listPacks;
data.data.mod_packs.forEach((v, k) => {
if(v.name == inputValue) {
packList.push(data.data.mod_packs[k]);
return false;
}
});
this.setState({
listPacks: packList
});
swal({
title: "modpack created successfully",
type: "success"
});
this.mutex.unlock();
});
},
error: (jqXHR, status, err) => {
console.log('api/mods/packs/create', status, err.toString());
let jsonResponse = jqXHR.responseJSON;
swal({
title: "Error on creating modpack",
text: jsonResponse.data,
type: "error"
});
}
});
}); });
} }
@ -109,57 +117,56 @@ class ModPackOverview extends React.Component {
let name = $(e.target).parent().prev().html(); let name = $(e.target).parent().prev().html();
swal({ ReactSwalDanger.fire({
title: "Are you sure?", title: "Are you sure?",
text: "You really want to delete this modpack?\nThere is no turning back, the modpack will be deleted forever (a very long time)!", html: <p>You really want to delete this modpack?<br/>There is no turning back, the modpack will be deleted forever (a very long time)!</p>,
type: "info", type: "question",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false, showLoaderOnConfirm: true,
showLoaderOnConfirm: true preConfirm: () => {
}, $.ajax({
() => { url: "/api/mods/packs/delete",
$.ajax({ method: "POST",
url: "/api/mods/packs/delete", data: {name: name},
method: "POST", dataType: "JSON",
data: {name: name}, success: (data) => {
dataType: "JSON", if(data.success) {
success: (data) => { this.mutex.lock(() => {
if(data.success) { let modPacks = this.state.listPacks;
this.mutex.lock(() => {
let modPacks = this.state.listPacks;
modPacks.forEach((v, k) => { modPacks.forEach((v, k) => {
if(v.name == name) { if(v.name == name) {
delete modPacks[k]; delete modPacks[k];
} }
});
this.setState({
listPacks: modPacks
});
ReactSwalNormal.fire({
title: "Modpack deleted successfully",
type: "success"
});
this.mutex.unlock();
}); });
}
},
error: (jqXHR, status, err) => {
console.log('api/mods/packs/delete', status, err.toString());
this.setState({ let jsonResponse = jqXHR.responseJSON || err.toString();
listPacks: modPacks jsonResponse = jsonResponse.data || err.toString();
});
swal({ ReactSwalNormal.fire({
title: "Modpack deleted successfully", title: "Error on creating modpack",
type: "success" text: jsonResponse,
}); type: "error"
this.mutex.unlock();
}); });
} }
}, })
error: (jqXHR, status, err) => { }
console.log('api/mods/packs/delete', status, err.toString());
let jsonResponse = jqXHR.responseJSON || err.toString();
jsonResponse = jsonResponse.data || err.toString();
swal({
title: "Error on creating modpack",
text: jsonResponse,
type: "error"
});
}
})
}); });
} }
@ -168,44 +175,42 @@ class ModPackOverview extends React.Component {
let name = $(e.target).parent().prev().html(); let name = $(e.target).parent().prev().html();
swal({ ReactSwalDanger.fire({
title: "Are you sure?", title: "Are you sure?",
text: "This operation will replace the current installed mods with the mods out of the selected ModPack!", text: "This operation will replace the current installed mods with the mods out of the selected ModPack!",
type: "info", type: "question",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false, showLoaderOnConfirm: true,
showLoaderOnConfirm: true preConfirm: () => {
}, $.ajax({
() => { url: "/api/mods/packs/load",
console.log("inside swal:", this); method: "POST",
$.ajax({ data: {name: name},
url: "/api/mods/packs/load", dataType: "JSON",
method: "POST", success: (data) => {
data: {name: name}, ReactSwalNormal.fire({
dataType: "JSON", title: "ModPack loaded!",
success: (data) => { type: "success"
swal({ });
title: "ModPack loaded!",
type: "success"
});
this.props.modContentClass.setState({ this.props.modContentClass.setState({
installedMods: data.data.mods installedMods: data.data.mods
}); });
}, },
error: (jqXHR, status, err) => { error: (jqXHR, status, err) => {
console.log('api/mods/packs/load', status, err.toString()); console.log('api/mods/packs/load', status, err.toString());
let jsonResponse = jqXHR.responseJSON || err.toString(); let jsonResponse = jqXHR.responseJSON || err.toString();
jsonResponse = jsonResponse.data || err.toString(); jsonResponse = jsonResponse.data || err.toString();
swal({ ReactSwalNormal.fire({
title: "Error on loading ModPack", title: "Error on loading ModPack",
text: jsonResponse, text: jsonResponse,
type: "error" type: "error"
}); });
} }
}) })
}
}); });
} }
@ -218,7 +223,11 @@ class ModPackOverview extends React.Component {
if(updatesInProgress) { if(updatesInProgress) {
swal("Toggle mod failed", "Can't toggle the mod, when an update is still in progress", "error"); ReactSwalNormal.fir({
title: "Toggle mod failed",
text: "Can't toggle the mod, when an update is still in progress",
type: "error"
});
return false; return false;
} }
@ -239,7 +248,6 @@ class ModPackOverview extends React.Component {
if(data.success) { if(data.success) {
this.mutex.lock(() => { this.mutex.lock(() => {
let packList = this.state.listPacks; let packList = this.state.listPacks;
console.log(this);
packList.forEach((modPack, modPackKey) => { packList.forEach((modPack, modPackKey) => {
if(modPack.name == modPackName) { if(modPack.name == modPackName) {
@ -262,7 +270,7 @@ class ModPackOverview extends React.Component {
}, },
error: (jqXHR, status, err) => { error: (jqXHR, status, err) => {
console.log('api/mods/packs/mod/toggle', status, err.toString()); console.log('api/mods/packs/mod/toggle', status, err.toString());
swal({ ReactSwalNormal.fire({
title: "Toggle Mod went wrong", title: "Toggle Mod went wrong",
text: err.toString(), text: err.toString(),
type: "error" type: "error"
@ -275,7 +283,11 @@ class ModPackOverview extends React.Component {
e.preventDefault(); e.preventDefault();
if(updatesInProgress) { if(updatesInProgress) {
swal("Delete failed", "Can't delete the mod, when an update is still in progress", "error"); ReactSwalNormal.fire({
title: "Delete failed",
text: "Can't delete the mod, when an update is still in progress",
type: "error"
});
return false; return false;
} }
@ -284,60 +296,62 @@ class ModPackOverview extends React.Component {
let modName = $row.data("mod-name"); let modName = $row.data("mod-name");
let modPackName = $row.parents(".single-modpack").find("h3").html(); let modPackName = $row.parents(".single-modpack").find("h3").html();
swal({ ReactSwalDanger.fire({
title: "Delete Mod?", title: "Delete Mod?",
text: "This will delete the mod forever", text: "This will delete the mod forever",
type: "info", type: "question",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Delete it!", confirmButtonText: "Delete it!",
cancelButtonText: "Close", cancelButtonText: "Close",
showLoaderOnConfirm: true, showLoaderOnConfirm: true,
confirmButtonColor: "#DD6B55", preConfirm: () => {
}, () => { $.ajax({
$.ajax({ url: "/api/mods/packs/mod/delete",
url: "/api/mods/packs/mod/delete", method: "POST",
method: "POST", data: {
data: { modName: modName,
modName: modName, modPackName: modPackName
modPackName: modPackName },
}, dataType: "JSON",
dataType: "JSON", success: (data) => {
success: (data) => { if(data.success) {
if(data.success) { this.mutex.lock(() => {
this.mutex.lock(() => { ReactSwalNormal.fire({
swal("Delete of mod " + modName + " inside modPack " + modPackName + " successful", "", "success"); title: <p>Delete of mod {modName} inside modPack {modPackName} successful</p>,
type: "success"
})
let packList = this.state.listPacks; let packList = this.state.listPacks;
packList.forEach((modPack, modPackKey) => { packList.forEach((modPack, modPackKey) => {
if(modPack.name == modPackName) { if(modPack.name == modPackName) {
packList[modPackKey].mods.mods.forEach((mod, modKey) => { packList[modPackKey].mods.mods.forEach((mod, modKey) => {
if(mod.name == modName) { if(mod.name == modName) {
delete packList[modPackKey].mods.mods[modKey]; delete packList[modPackKey].mods.mods[modKey];
return false; return false;
} }
}); });
} }
});
this.setState({
listPacks: packList
});
this.mutex.unlock();
}); });
}
this.setState({ },
listPacks: packList error: (jqXHR, status, err) => {
}); console.log('api/mods/packs/mod/delete', status, err.toString());
ReactSwalNormal.fire({
this.mutex.unlock(); title: "Delete Mod went wrong",
text: jqXHR.responseJSON.data,
type: "error"
}); });
} }
}, });
error: (jqXHR, status, err) => { }
console.log('api/mods/packs/mod/delete', status, err.toString());
swal({
title: "Delete Mod went wrong",
text: jqXHR.responseJSON.data,
type: "error"
});
}
});
}); });
} }
@ -345,10 +359,10 @@ class ModPackOverview extends React.Component {
e.preventDefault(); e.preventDefault();
if(!this.props.modContentClass.state.loggedIn) { if(!this.props.modContentClass.state.loggedIn) {
swal({ ReactSwalNormal.fire({
type: "error",
title: "Update failed", title: "Update failed",
text: "please login into Factorio to update mod" text: "please login into Factorio to update mod",
type: "error",
}); });
let $addModBox = $('#add-mod-box'); let $addModBox = $('#add-mod-box');
@ -405,7 +419,7 @@ class ModPackOverview extends React.Component {
error: (jqXHR, status, err) => { error: (jqXHR, status, err) => {
console.log('api/mods/packs/mod/update', status, err.toString()); console.log('api/mods/packs/mod/update', status, err.toString());
toggleUpdateStatus(); toggleUpdateStatus();
swal({ ReactSwalNormal.fire({
title: "Update Mod went wrong", title: "Update Mod went wrong",
text: jqXHR.responseJSON.data, text: jqXHR.responseJSON.data,
type: "error" type: "error"
@ -415,10 +429,6 @@ class ModPackOverview extends React.Component {
} }
} }
test() {
console.log("test called");
}
render() { render() {
let classes = "box-body" + " " + this.props.className; let classes = "box-body" + " " + this.props.className;
let ids = this.props.id; let ids = this.props.id;

View File

@ -340,7 +340,6 @@ class ModsContent extends React.Component {
text: "This will delete the mod and can break the save file", text: "This will delete the mod and can break the save file",
type: "question", type: "question",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Delete it!", confirmButtonText: "Delete it!",
showLoaderOnConfirm: true, showLoaderOnConfirm: true,
preConfirm: () => { preConfirm: () => {
@ -396,7 +395,6 @@ class ModsContent extends React.Component {
html: <p>This will delete ALL mods and can't be redone!<br/> Are you sure?</p>, html: <p>This will delete ALL mods and can't be redone!<br/> Are you sure?</p>,
type: "question", type: "question",
showCancelButton: true, showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Yes, Delete ALL!", confirmButtonText: "Yes, Delete ALL!",
showLoaderOnConfirm: true, showLoaderOnConfirm: true,
preConfirm: () => { preConfirm: () => {

View File

@ -10,8 +10,8 @@ require('bootstrap-fileinput/themes/fas/theme');
*/ */
$('body').on("show.bs.collapse hide.bs.collapse", (e) => { $('body').on("show.bs.collapse hide.bs.collapse", (e) => {
let $target = $(e.target); let $target = $(e.target);
let $box = $target.parents(".box"); let $box = $target.parent(".box");
let $fontAwesome = $box.find(".box-header").find("i"); let $fontAwesome = $box.children(".box-header").children("i");
if(e.type == "show") { if(e.type == "show") {
$fontAwesome.removeClass("fa-plus").addClass("fa-minus"); $fontAwesome.removeClass("fa-plus").addClass("fa-minus");

View File

@ -15,6 +15,7 @@
* Customizations * Customizations
*/ */
@import "scss/customizations/buttons"; @import "scss/customizations/buttons";
@import "scss/customizations/form";
@import "scss/customizations/badges"; @import "scss/customizations/badges";
@import "scss/customizations/adminLTE3-box"; @import "scss/customizations/adminLTE3-box";
@import "scss/customizations/sidebar"; @import "scss/customizations/sidebar";

View File

@ -0,0 +1,3 @@
input.form-control {
border-radius: 0;
}

View File

@ -14,6 +14,13 @@
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column;
.swal2-input {
@extend .form-control;
height: 2.625em;
padding: 0.75em;
}
} }
.swal2-actions.swal2-loading { .swal2-actions.swal2-loading {