변수 Snippet

src/main/resources/templates/layout/api_tester_layout.html

@@ -112,6 +112,40 @@
                 $('#variable_modal').modal('show');
             });
 
+            $('.btn_add_variables').on('click', function() {
+                var tbody = $('.variables');
+
+                // Create a new row with empty key and value inputs
+                var newRow = $('<tr>');
+                var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input');
+                var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input');
+                var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
+
+                newRow.append($('<td>').append(keyInput));
+                newRow.append($('<td>').append(valueInput));
+                newRow.append($('<td>').append(deleteButton));
+                tbody.append(newRow);
+
+                // Event listeners for the new inputs
+                keyInput.on('change', function() {
+                    var newKey = $(this).val();
+                    window.globals[newKey] = ''; // Initialize the key with an empty value
+                    valueInput.attr('data-old-key', newKey);
+                });
+
+                valueInput.on('change', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    var newValue = $(this).val();
+                    window.globals[key] = newValue;
+                });
+
+                deleteButton.on('click', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    delete window.globals[key];
+                    $(this).closest('tr').remove();
+                });
+            });
+
             document.addEventListener('keydown', (event) => {
                 if (event.key === 'Escape') {
                     container.classList.remove('full-screen');