From 2d454ca8ae514bfd80c4024fb6883bd230b84b3d Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Sat, 10 Dec 2022 21:24:21 +0100
Subject: [PATCH] move js code for spinner into js file now the code is needed
 only once for all spinners

---
 includes/sys_form.php        | 12 ++----------
 resources/assets/js/forms.js | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/includes/sys_form.php b/includes/sys_form.php
index d487c9d7..46698a1d 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -30,21 +30,13 @@ function form_spinner(string $name, string $label, int $value)
     return form_element($label, '
         <div class="input-group">
             <input id="' . $id . '" class="form-control" type="number" min="0" step="1" name="' . $name . '" value="' . $value . '" />
-            <button id="' . $id . '-down" class="btn btn-secondary" type="button">
+            <button class="btn btn-secondary spinner-down" type="button" data-input-id="' . $id . '">
                 ' . icon('dash-lg') . '
             </button>
-            <button id="' . $id . '-up" class="btn btn-secondary" type="button">
+            <button class="btn btn-secondary spinner-up" type="button" data-input-id="' . $id . '">
                 ' . icon('plus-lg') . '
             </button>
         </div>
-        <script type="text/javascript">
-            document.getElementById("' . $id . '-down")?.addEventListener("click", () => {
-                document.getElementById("' . $id . '").stepDown();
-            });
-            document.getElementById("' . $id . '-up")?.addEventListener("click", () => {
-                document.getElementById("' . $id . '").stepUp();
-            });
-        </script>
         ', $id);
 }
 
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 9de1ea48..99140b09 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -111,6 +111,25 @@ ready(() => {
   });
 });
 
+ready(() => {
+  document.querySelectorAll('.spinner-down').forEach((element) => {
+    const inputElement = document.getElementById(element.dataset.inputId);
+    if (inputElement) {
+      element.addEventListener('click', () => {
+        inputElement.stepDown();
+      });
+    }
+  });
+  document.querySelectorAll('.spinner-up').forEach((element) => {
+    const inputElement = document.getElementById(element.dataset.inputId);
+    if (inputElement) {
+      element.addEventListener('click', () => {
+        inputElement.stepUp();
+      });
+    }
+  });
+});
+
 /**
  * Button to set current time in time input fields.
  */