hash/d2tools
1
0
Fork 0
mirror of https://gitlab.com/hashborgir/d2tools.git synced 2024-12-02 13:36:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

loading spinner added on table load

Browse Source
This commit is contained in:
Hash Borgir 2023-06-22 18:42:49 -06:00
parent c9c7c63abc
commit 9c4123c148
1 changed files with 150 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
TblEditorGUI_TAB.php
View File

@ -40,7 +40,7 @@ foreach (glob($tbl . "*.tbl") as $filename) {
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>--> <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap CSS (if not already included) --> <!-- Bootstrap CSS (if not already included) -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">--> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">-->
<!-- Bootstrap DataTables CSS --> <!-- Bootstrap DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css">
@ -88,6 +88,9 @@ foreach (glob($tbl . "*.tbl") as $filename) {
<hr> <hr>
<div class="tablediv"> <div class="tablediv">
<div id="loading-spinner" style="display: none; text-align:center;">
<img src="img/loading.gif" alt="Loading...">
</div>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -106,179 +109,190 @@ foreach (glob($tbl . "*.tbl") as $filename) {
</div> </div>
<script> <script>
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
$(document).ready(function () {
// Function to resize textarea based on content
function resizeTextarea() { function resizeTextarea() {
this.style.height = 'auto'; this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px'; this.style.height = (this.scrollHeight) + 'px';
} }
function showLoadingSpinner() {
$('#loading-spinner').show();
}
// Select element change event handler // Hide the loading spinner
$('#tableName').change(function () { function hideLoadingSpinner() {
$('.table').DataTable().destroy(); $('#loading-spinner').hide();
$('.table tbody').html(''); }
$(document).ready(function () {
// Function to resize textarea based on content
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
var selectedTable = $(this).val(); // Select element change event handler
if (selectedTable !== '') { $('#tableName').change(function () {
$('.table').DataTable().destroy();
$('.table tbody').html('');
showLoadingSpinner();
var selectedTable = $(this).val();
if (selectedTable !== '') {
// Send GET request to TblEditor.php?getTable with selected table name // Send GET request to TblEditor.php?getTable with selected table name
var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable}); var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
request.done(function (response) { request.done(function (response) {
// Handle the response here hideLoadingSpinner();
$('.tablediv tbody').html(response).promise().done(function () { // Handle the response here
// Callback function after HTML content is loaded $('.tablediv tbody').html(response).promise().done(function () {
// Callback function after HTML content is loaded
// Initialize DataTables on the table // Initialize DataTables on the table
$('.table').DataTable(); $('.table').DataTable();
// Resize textareas on page load // Resize textareas on page load
$('textarea').each(resizeTextarea);
// Resize textareas on input
$('textarea').on('input', resizeTextarea);
// Resize textareas on custom select change
$('.custom-select').change(function () {
$('textarea').each(resizeTextarea);
});
$('.page-link').click(function () {
$('textarea').each(resizeTextarea); $('textarea').each(resizeTextarea);
// Resize textareas on input
$('textarea').on('input', resizeTextarea);
// Resize textareas on custom select change
$('.custom-select').change(function () {
$('textarea').each(resizeTextarea);
});
$('.page-link').click(function () {
$('textarea').each(resizeTextarea);
});
}); });
}); });
}
});
// Delete link click event handler
$(document).on('click', '.delete-link', function (event) {
event.preventDefault();
var selectedTable = $('select[name="tableName"]').val();
// Get the rowid from the custom attribute data-rowid
var rowid = $(this).data('rowid');
// Remove the deleted row from the table
$('.row-' + rowid).remove();
// Send GET request to TblEditor.php?cmd=delete&rowid={rowid}
$.get('TblEditor.php', {cmd: 'delete', tableName: selectedTable, rowid: rowid}, function (response) {
// Handle the response here
// Wait until the response is loaded, then remove the row
$(response).ready(function () {
// Update DataTable
});
}); });
} });
});
// Update link click event handler
$(document).on('click', '.update-link', function (event) {
event.preventDefault();
// Delete link click event handler var selectedTable = $('select[name="tableName"]').val();
$(document).on('click', '.delete-link', function (event) {
event.preventDefault();
var selectedTable = $('select[name="tableName"]').val(); // Get the rowid from the custom attribute data-rowid
var rowid = $(this).data('rowid');
// Get the rowid from the custom attribute data-rowid // Get the updated values from the corresponding input and textarea
var rowid = $(this).data('rowid'); var key = $('.row-' + rowid + ' input').val();
var string = $('.row-' + rowid + ' textarea').val();
string = string.replace(/&#13;/g, '\\n');
string = string.replace(/\n/g, '\\n');
// Remove the deleted row from the table
$('.row-' + rowid).remove();
// Send GET request to TblEditor.php?cmd=delete&rowid={rowid} // Send POST request to TblEditor.php with the updated values
$.get('TblEditor.php', {cmd: 'delete', tableName: selectedTable, rowid: rowid}, function (response) { $.post('TblEditor.php', {cmd: 'update', tableName: selectedTable, rowid: rowid, key: key, string: string}, function (response) {
// Handle the response here // Handle the response here
// Wait until the response is loaded, then remove the row // Optional: Update any UI elements if needed
$(response).ready(function () {
// Update DataTable
}); });
}); });
});
// Add link click event handler
$('#addLink').click(function () {
var selectedTable = $('#tableName').val();
var key = $('#inputKey').val();
var string = $('#inputString').val();
// Send POST request to TblEditor.php with parameters
$.post('TblEditor.php', {cmd: 'add', tableName: selectedTable, Key: key, String: string}, function (response) {
// Handle the response here
rowid = response;
// Create the HTML markup for the new row
var newRow = '<tr class="row-' + rowid + '">' +
'<td>' + rowid + '</td>' +
'<td><input type="text" value="' + key + '" class="form-control"></td>' +
'<td><textarea class="form-control">' + string + '</textarea></td>' +
'<td><div>' +
'<a href="#" class="update-link btn btn-primary" data-rowid="' + rowid + '">Update</a>' +
'<a style="float:right" href="#" class="delete-link btn btn-danger" data-rowid="' + rowid + '">Delete</a>' +
'</div></td>' +
'</tr>';
;
// Append the new row to the table
$('.table').DataTable().destroy();
// Update link click event handler $('.table tbody').append(newRow);
$(document).on('click', '.update-link', function (event) {
event.preventDefault();
var selectedTable = $('select[name="tableName"]').val(); // Initialize DataTables on the table
var table = $('.table').DataTable();
// Get the rowid from the custom attribute data-rowid
var rowid = $(this).data('rowid');
// Get the updated values from the corresponding input and textarea
var key = $('.row-' + rowid + ' input').val();
var string = $('.row-' + rowid + ' textarea').val();
string = string.replace(/&#13;/g, '\\n');
string = string.replace(/\n/g, '\\n');
// Send POST request to TblEditor.php with the updated values
$.post('TblEditor.php', {cmd: 'update', tableName: selectedTable, rowid: rowid, key: key, string: string}, function (response) {
// Handle the response here
// Optional: Update any UI elements if needed
// Go to the last page after loading the table
table.page('last').draw('page');
});
}); });
}); });
// Add link click event handler
$('#addLink').click(function () {
var selectedTable = $('#tableName').val();
var key = $('#inputKey').val();
var string = $('#inputString').val();
// Send POST request to TblEditor.php with parameters $(document).ready(function () {
$.post('TblEditor.php', {cmd: 'add', tableName: selectedTable, Key: key, String: string}, function (response) { $('textarea').each(function () {
// Handle the response here this.style.height = 'auto';
rowid = response; this.style.height = (this.scrollHeight) + 'px';
// Create the HTML markup for the new row
var newRow = '<tr class="row-' + rowid + '">' +
'<td>' + rowid + '</td>' +
'<td><input type="text" value="' + key + '" class="form-control"></td>' +
'<td><textarea class="form-control">' + string + '</textarea></td>' +
'<td><div>' +
'<a href="#" class="update-link btn btn-primary" data-rowid="' + rowid + '">Update</a>' +
'<a style="float:right" href="#" class="delete-link btn btn-danger" data-rowid="' + rowid + '">Delete</a>' +
'</div></td>' +
'</tr>';
;
// Append the new row to the table
$('.table').DataTable().destroy();
$('.table tbody').append(newRow);
// Initialize DataTables on the table
var table = $('.table').DataTable();
// Go to the last page after loading the table
table.page('last').draw('page');
}); });
setInterval(function () {
$('textarea').each(resizeTextarea);
}, 4000);
}); });
});
</script>
$(document).ready(function () { <style>
$('textarea').each(function () { body {
this.style.height = 'auto'; background: #f8f8f8;
this.style.height = (this.scrollHeight) + 'px'; margin: 10px;
}); border: 1px solid #eee;
setInterval(function () { border-radius: 5px;
$('textarea').each(resizeTextarea); }
}, 4000); div.dataTables_wrapper div.dataTables_length select {
}); width: 75px !important;
}
textarea {
overflow: hidden;
</script> resize: none;
<style> scrollbar-width: none; /* For Firefox */
body { -ms-overflow-style: none; /* For Internet Explorer and Edge */
background: #f8f8f8; }
margin: 10px; #loading-spinner {
border: 1px solid #eee; }
border-radius: 5px; </style>
} </body>
div.dataTables_wrapper div.dataTables_length select {
width: 75px !important;
}
textarea {
overflow: hidden;
resize: none;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
</style>
</body>
</html> </html>