From f9600ddcd8fc85b47a34d9932dcaf7c26311b5f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Wed, 20 Mar 2024 11:38:27 -0300
Subject: [PATCH] Add event listeners for each console setting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reduces the number of HTTP requests from 5 to 1.

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 resources/js/src/modules/console.ts | 34 ++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/resources/js/src/modules/console.ts b/resources/js/src/modules/console.ts
index 069becfa98..8d46e10412 100644
--- a/resources/js/src/modules/console.ts
+++ b/resources/js/src/modules/console.ts
@@ -146,8 +146,34 @@ var Console = {
                 Console.hideCard($(this).closest('.card'));
             });
 
-            $('#pma_console_options').find('input[type=checkbox]').on('change', function () {
-                Config.update();
+            const consoleOptionsAlwaysExpandCheckbox = document.getElementById('consoleOptionsAlwaysExpandCheckbox') as HTMLInputElement;
+            consoleOptionsAlwaysExpandCheckbox?.addEventListener('change', function (): void {
+                Config.set('AlwaysExpand', !! consoleOptionsAlwaysExpandCheckbox.checked);
+            });
+
+            const consoleOptionsStartHistoryCheckbox = document.getElementById('consoleOptionsStartHistoryCheckbox') as HTMLInputElement;
+            consoleOptionsStartHistoryCheckbox?.addEventListener('change', function (): void {
+                Config.set('StartHistory', !! consoleOptionsStartHistoryCheckbox.checked);
+            });
+
+            const consoleOptionsCurrentQueryCheckbox = document.getElementById('consoleOptionsCurrentQueryCheckbox') as HTMLInputElement;
+            consoleOptionsCurrentQueryCheckbox?.addEventListener('change', function (): void {
+                Config.set('CurrentQuery', !! consoleOptionsCurrentQueryCheckbox.checked);
+            });
+
+            const consoleOptionsEnterExecutesCheckbox = document.getElementById('consoleOptionsEnterExecutesCheckbox') as HTMLInputElement;
+            consoleOptionsEnterExecutesCheckbox?.addEventListener('change', function (): void {
+                const isEnterExecutes = !! consoleOptionsEnterExecutesCheckbox.checked;
+                Config.set('EnterExecutes', isEnterExecutes);
+                ConsoleMessages.showInstructions(isEnterExecutes);
+            });
+
+            const consoleOptionsDarkThemeCheckbox = document.getElementById('consoleOptionsDarkThemeCheckbox') as HTMLInputElement;
+            consoleOptionsDarkThemeCheckbox?.addEventListener('change', function (): void {
+                const isDarkTheme = !! consoleOptionsDarkThemeCheckbox.checked;
+                Config.set('DarkTheme', isDarkTheme);
+                const consoleContent = document.getElementById('pma_console').querySelector('.content');
+                consoleContent.classList.toggle('console_dark_theme', isDarkTheme);
             });
 
             $('#pma_console_options').find('.button.default').on('click', function () {
@@ -159,10 +185,6 @@ var Console = {
                 Config.update();
             });
 
-            $('#consoleOptionsEnterExecutesCheckbox').on('change', function () {
-                ConsoleMessages.showInstructions(Config.EnterExecutes);
-            });
-
             $(document).on('ajaxComplete', function (event, xhr, ajaxOptions) {
                 if (ajaxOptions.dataType && ajaxOptions.dataType.indexOf('json') !== -1) {
                     return;