enable/disable all html-tags corresponding to a radio button checked state (#1046)

includes/pages/admin_shifts.php

@@ -422,7 +422,11 @@ function admin_shifts()
             . form_spinner(
                 'angeltype_count_' . $type->id,
                 $type->name,
-                $needed_angel_types[$type->id]
+                $needed_angel_types[$type->id],
+                [
+                    'radio-name'  => 'angelmode',
+                    'radio-value' => 'manually'
+                ]
             )
             . '</div>';
     }
@@ -465,7 +469,15 @@ function admin_shifts()
                             __('Length'),
                             $request->has('length')
                                 ? $request->input('length')
-                                : '120'
+                                : '120',
+                            false,
+                            null,
+                            null,
+                            '',
+                            [
+                                'radio-name'  => 'mode',
+                                'radio-value' => 'multi'
+                            ]
                         ),
                         form_radio(
                             'mode',
@@ -478,7 +490,15 @@ function admin_shifts()
                             __('Shift change hours'),
                             $request->has('change_hours')
                                 ? $request->input('change_hours')
-                                : '00, 04, 08, 10, 12, 14, 16, 18, 20, 22'
+                                : '00, 04, 08, 10, 12, 14, 16, 18, 20, 22',
+                            false,
+                            null,
+                            null,
+                            '',
+                            [
+                                'radio-name'  => 'mode',
+                                'radio-value' => 'variable'
+                            ]
                         ),
                         form_checkbox(
                             'shift_over_midnight',

includes/sys_form.php

@@ -21,19 +21,24 @@ function form_hidden($name, $value)
  * @param string $name
  * @param string $label
  * @param int    $value
+ * @param array  $data_attributes
  * @return string
  */
-function form_spinner(string $name, string $label, int $value)
+function form_spinner(string $name, string $label, int $value, array $data_attributes = [])
 {
     $id = 'spinner-' . $name;
+    $attr = '';
+    foreach ($data_attributes as $attr_key => $attr_value) {
+        $attr .= ' data-' . $attr_key . '="' . $attr_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 . '" />
+            <input id="' . $id . '" class="form-control" type="number" min="0" step="1" name="' . $name . '" value="' . $value . '"' . $attr . ' />
-            <button class="btn btn-secondary spinner-down" type="button" data-input-id="' . $id . '">
+            <button class="btn btn-secondary spinner-down" type="button" data-input-id="' . $id . '"' . $attr . '>
                 ' . icon('dash-lg') . '
             </button>
-            <button class="btn btn-secondary spinner-up" type="button" data-input-id="' . $id . '">
+            <button class="btn btn-secondary spinner-up" type="button" data-input-id="' . $id . '"' . $attr . '>
                 ' . icon('plus-lg') . '
             </button>
         </div>
@@ -205,19 +210,23 @@ function form_submit($name, $label, $class = '', $wrapForm = true, $buttonType =
  * @param int|null    $maxlength
  * @param string|null $autocomplete
  * @param string|null $class
- *
+ * @param array       $data_attributes
  * @return string
  */
-function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null, $class = '')
+function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null, $class = '', $data_attributes = [])
 {
     $disabled = $disabled ? ' disabled="disabled"' : '';
     $maxlength = $maxlength ? ' maxlength=' . (int)$maxlength : '';
     $autocomplete = $autocomplete ? ' autocomplete="' . $autocomplete . '"' : '';
+    $attr = '';
+    foreach ($data_attributes as $attr_key => $attr_value) {
+        $attr .= ' data-' . $attr_key . '="' . $attr_value . '"';
+    }
 
     return form_element(
         $label,
         '<input class="form-control" id="form_' . $name . '" type="text" name="' . $name
-        . '" value="' . htmlspecialchars((string)$value) . '"' . $maxlength . $disabled . $autocomplete . '/>',
+        . '" value="' . htmlspecialchars((string)$value) . '"' . $maxlength . $disabled . $autocomplete . $attr . '/>',
         'form_' . $name,
         $class
     );

resources/assets/js/forms.js

@@ -111,6 +111,38 @@ ready(() => {
   });
 });
 
+/**
+ * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#overview}
+ */
+const DISABLE_ELEMENTS = [
+  'button', 'command', 'fieldset', 'input', 'keygen', 'optgroup', 'option', 'select', 'textarea'
+];
+ready(() => {
+  // get all input-radio's and add for each an onChange event listener
+  document.querySelectorAll('input[type="radio"]').forEach((radioElement) => {
+    // build selector and get all corrsponding elements for this input-radio
+    const selector = DISABLE_ELEMENTS.map((tagName) => (
+      `${tagName}[data-radio-name="${radioElement.name}"][data-radio-value]`
+    )).join(',');
+    const elements = Array.from(document.querySelectorAll(selector));
+
+    // set all states one time on init for each of the corresponding elements
+    elements.forEach((element) => {
+      // each radio button updates only his elements
+      if (element.dataset.radioValue === radioElement.value) {
+        element.disabled = !radioElement.checked;
+      }
+    });
+
+    // add an onChange event listener that update the disabled state for all corresponding elements
+    radioElement.addEventListener('change', () => {
+      elements.forEach((element) => {
+        element.disabled = element.dataset.radioValue !== radioElement.value;
+      });
+    });
+  });
+});
+
 ready(() => {
   document.querySelectorAll('.spinner-down').forEach((element) => {
     const inputElement = document.getElementById(element.dataset.inputId);