TblEditor working

This commit is contained in:
Hash Borgir
2023-06-13 21:15:23 -06:00
parent 3ce842b52d
commit 29621fa46c
1779 changed files with 888 additions and 157 deletions

View File

@@ -52,21 +52,27 @@ foreach (glob($tbl . "*.tbl") as $filename) {
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap4.min.js"></script>
<title>Editable Tables</title>
<link rel="stylesheet" href="https://bootswatch.com/4/lumen/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="res/95assets/win95.css">
</head>
<body>
<div class="container">
<h2>Select .tbl File</h2>
<select name="tableName" id="tableName" class="form-control">
<option value="" selected></option>
<?php foreach ($tableNames as $tableName): ?>
<option value="<?php echo $tableName; ?>" <?php echo ($tableName == "") ? "selected" : ""; ?>><?php echo $tableName; ?></option>
<?php endforeach; ?>
</select>
<h2>Table</h2>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
Add new String Key
</button>
<div style="padding:10px; border: 1px solid #eee;">
<div class="container">
<div class="row">
<div class="col-md-6">
<select name="tableName" id="tableName" class="form-control">
<option value="" disabled selected>_______________SELECT TBL FILE_______________</option>
<?php foreach ($tableNames as $tableName): ?>
<option value="<?php echo $tableName; ?>" <?php echo ($tableName == "") ? "selected" : ""; ?>><?php echo $tableName; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-6">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
Add new String Key
</button>
</div>
</div>
<div class="collapse" id="collapseForm">
<div class="form-group">
<label for="inputKey">Key</label>
@@ -87,10 +93,10 @@ foreach (glob($tbl . "*.tbl") as $filename) {
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Key</th>
<th style="width: 64px;">ID</th>
<th style='width: 20%;'>Key</th>
<th>String</th>
<th></th>
<th style="width: 100px;"></th>
</tr>
</thead>
<tbody>
@@ -102,14 +108,12 @@ foreach (glob($tbl . "*.tbl") as $filename) {
</div>
<script>
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
$(document).ready(function () {
<script>
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
$(document).ready(function () {
// Get the initial selected table
// var selectedTable = $('#tableName').val();
//
@@ -126,18 +130,19 @@ foreach (glob($tbl . "*.tbl") as $filename) {
// });
// });
// Function to resize textarea based on content
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
// Function to resize textarea based on content
function resizeTextarea() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
// Select element change event handler
$('#tableName').change(function () {
$('.table').DataTable().destroy();
$('.table tbody').html('');
// Select element change event handler
$('#tableName').change(function () {
$('.table').DataTable().destroy();
$('.table tbody').html('');
var selectedTable = $(this).val();
var selectedTable = $(this).val();
if (selectedTable !== '') {
// Send GET request to TblEditor.php?getTable with selected table name
var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
@@ -165,126 +170,133 @@ foreach (glob($tbl . "*.tbl") as $filename) {
});
});
});
});
// 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();
var selectedTable = $('select[name="tableName"]').val();
// 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
});
});
// 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();
$('.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');
});
});
});
$(document).ready(function () {
$('textarea').each(function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
setInterval(function () {
$('textarea').each(resizeTextarea);
}, 4000);
}
});
</script>
<style>
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>
// 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();
var selectedTable = $('select[name="tableName"]').val();
// 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
});
});
// 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();
$('.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');
});
});
});
$(document).ready(function () {
$('textarea').each(function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
setInterval(function () {
$('textarea').each(resizeTextarea);
}, 4000);
});
</script>
<style>
body {
background: #f8f8f8;
margin: 10px;
border: 1px solid #eee;
border-radius: 5px;
}
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>