From 9c4123c1482ee05328e776e8283b0be256fd95f3 Mon Sep 17 00:00:00 2001
From: Hash Borgir <atirjavid@gmail.com>
Date: Thu, 22 Jun 2023 18:42:49 -0600
Subject: [PATCH] loading spinner added on table load

---
 TblEditorGUI_TAB.php | 286 +++++++++++++++++++++++--------------------
 1 file changed, 150 insertions(+), 136 deletions(-)

diff --git a/TblEditorGUI_TAB.php b/TblEditorGUI_TAB.php
index 6ff4391..a2f6bae 100644
--- a/TblEditorGUI_TAB.php
+++ b/TblEditorGUI_TAB.php
@@ -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://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
         <!-- 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 -->
         <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>
 
             <div class="tablediv">
+                <div id="loading-spinner" style="display: none; text-align:center;">
+                    <img src="img/loading.gif" alt="Loading...">
+                </div>                 
                 <table class="table">
                     <thead>
                         <tr>
@@ -106,179 +109,190 @@ foreach (glob($tbl . "*.tbl") as $filename) {
 
         </div>
 
-    <script>
-        function resizeTextarea() {
-            this.style.height = 'auto';
-            this.style.height = (this.scrollHeight) + 'px';
-        }
-        $(document).ready(function () {
-            // Function to resize textarea based on content
+        <script>
             function resizeTextarea() {
                 this.style.height = 'auto';
                 this.style.height = (this.scrollHeight) + 'px';
             }
+            function showLoadingSpinner() {
+                $('#loading-spinner').show();
+            }
 
-            // Select element change event handler
-            $('#tableName').change(function () {
-                $('.table').DataTable().destroy();
-                $('.table tbody').html('');
+// Hide the loading spinner
+            function hideLoadingSpinner() {
+                $('#loading-spinner').hide();
+            }
+            $(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();
-                if (selectedTable !== '') {
+                // Select element change event handler
+                $('#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
-                    var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
+                        // Send GET request to TblEditor.php?getTable with selected table name
+                        var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
 
-                    request.done(function (response) {
-                        // Handle the response here
-                        $('.tablediv tbody').html(response).promise().done(function () {
-                            // Callback function after HTML content is loaded
+                        request.done(function (response) {
+                            hideLoadingSpinner();
+                            // Handle the response here
+                            $('.tablediv tbody').html(response).promise().done(function () {
+                                // Callback function after HTML content is loaded
 
-                            // Initialize DataTables on the table
-                            $('.table').DataTable();
+                                // Initialize DataTables on the table
+                                $('.table').DataTable();
 
-                            // 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 () {
+                                // 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);
+                                });
                             });
                         });
+                    }
+                });
+
+
+
+
+                // 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
-            $(document).on('click', '.delete-link', function (event) {
-                event.preventDefault();
+                    var selectedTable = $('select[name="tableName"]').val();
 
-                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
-                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');
 
-                // 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
+                    // 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
 
-                    // Wait until the response is loaded, then remove the row
-                    $(response).ready(function () {
-
-                        // Update DataTable
+                        // 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();
 
-            // Update link click event handler
-            $(document).on('click', '.update-link', function (event) {
-                event.preventDefault();
+                        $('.table tbody').append(newRow);
 
-                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
+                        // Initialize DataTables on the table
+                        var table = $('.table').DataTable();
 
+                        // 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
-                $.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);
             });
 
 
-        });
 
-
-        $(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>
+        </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 */
+            }
+            #loading-spinner {
+            }
+        </style>
+    </body>
 </html>
\ No newline at end of file