add jquery ui and modal dialogs to reload and delete buttons

This commit is contained in:
Hash Borgir 2023-06-23 23:47:34 -06:00
parent ae09fac318
commit e6e1402571
2 changed files with 96 additions and 42 deletions

View File

@ -317,18 +317,7 @@ $(document).ready(function () {
window.open('/genDocs.php?cmd=genDocUniqueItems', '_blank');
});
// Delete button event
$('.btn-delete').click(function (event) {
event.preventDefault(); // Prevent default button click behavior
// delete item index
$.get('/ajax/uniqueitems.php?cmd=delete&index=' + $(".uniqueform input[name='index']").val(), function (response) {
// Handle the response from the server
// remove option from list
$('.uniqueitems-select option[value="' + $(".uniqueform input[name='index']").val() + '"]').remove();
console.log(response);
});
});
// Save button event
$('.btn-save').click(function (event) {
@ -500,8 +489,27 @@ $(document).ready(function () {
// Reload Mod files
$('#reload-button').on('click', function () {
// Create a dialog with OK/Cancel buttons
$('<div>').html(
"Warning: Reloading all TXT/TBL files!<br><br>" +
"This action will reload all the TXT/TBL files into the database, overwriting any existing data. It will not modify your TXT/TBL files or mod files.<br><br>" +
"Please note that while this step is generally safe, it's always recommended to back up your mod files before proceeding.<br><br>" +
"Are you absolutely sure you want to proceed with this operation?"
).dialog({
title: "Confirmation",
modal: true,
resizable: false,
buttons: {
OK: function () {
// OK button clicked
console.log("OK button clicked");
// Show loading spinner and disable the button
$("#TabContent").hide();
showLoadingSpinner();
$('#reload-button').prop('disabled', true);
// Send the request to reload.php
$.get('/reload.php')
.done(function (response) {
console.log('Request successful');
@ -518,13 +526,63 @@ $(document).ready(function () {
console.log(errorThrown);
// Handle the error or show an error message
})
.always(function () {
// Hide the loading overlay and enable the button
$('#loading-overlay').fadeOut();
$('#reload-button').prop('disabled', false);
});
$(this).dialog("close");
},
Cancel: function () {
// Cancel button clicked
console.log("Cancel button clicked");
$(this).dialog("close");
}
}
});
});
// Reload Mod files
$('.btn-delete').on('click', function () {
event.preventDefault(); // Prevent default button click behavior
// Create a dialog with OK/Cancel buttons
$('<div>').html(
"Warning: This will delete the item from the database and the TXT file on disk!<br><br>" +
"There is no UNDO for this. Make sure you want to delete this row before you proceed.<br><br>" +
"It's always recommended to back up your mod files before proceeding.<br><br>" +
"Are you absolutely sure you want to proceed with this operation?"
).dialog({
title: "Confirmation",
modal: true,
resizable: false,
buttons: {
OK: function () {
// OK button clicked
console.log("OK button clicked");
// Delete button event
// delete item index
$.get('/ajax/uniqueitems.php?cmd=delete&index=' + $(".uniqueform input[name='index']").val(), function (response) {
// Handle the response from the server
// remove option from list
$('.uniqueitems-select option[value="' + $(".uniqueform input[name='index']").val() + '"]').remove();
console.log(response);
});
$(this).dialog("close");
},
Cancel: function () {
// Cancel button clicked
console.log("Cancel button clicked");
$(this).dialog("close");
}
}
});
});

View File

@ -52,11 +52,7 @@
<link rel="stylesheet" href="/res/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/4/lumen/bootstrap.min.css">
<!-- <link rel="stylesheet" href="/res/win95/assets/win95.css">
<link rel="stylesheet" href="https://unpkg.com/98.css" />
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
<link rel="stylesheet" href="https://khang-nd.github.io/7.css/7.css">-->
<link rel="stylesheet" href="/res/lumen_bootstrap.min.css">
<link rel="stylesheet" href="/res/style.css">
<link rel="stylesheet" href="/res/<?php echo $css ?>">
<style>
@ -73,9 +69,9 @@
</script>
<script src="/res/app.js"></script>
<!-- Include the necessary jQuery UI and CSS files -->
<script src="/res/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/res/jquery-ui.css">
</script>
<title>D2Modder</title>
</head>