Improve javascript (#1077)

includes/pages/user_shifts.php

@@ -212,7 +212,7 @@ function view_user_shifts()
     $days = load_days();
     $rooms = load_rooms();
     $types = load_types();
-    $ownTypes = [];
+    $ownAngelTypes = [];
 
     /** @var EloquentCollection|UserAngelType[] $userAngelTypes */
     $userAngelTypes = UserAngelType::whereUserId($user->id)
@@ -223,12 +223,12 @@ function view_user_shifts()
         })
         ->get();
     foreach ($userAngelTypes as $type) {
-        $ownTypes[] = $type->angel_type_id;
+        $ownAngelTypes[] = $type->angel_type_id;
     }
 
     if (!$session->has('shifts-filter')) {
         $room_ids = $rooms->pluck('id')->toArray();
-        $shiftsFilter = new ShiftsFilter(auth()->can('user_shifts_admin'), $room_ids, $ownTypes);
+        $shiftsFilter = new ShiftsFilter(auth()->can('user_shifts_admin'), $room_ids, $ownAngelTypes);
         $session->set('shifts-filter', $shiftsFilter->sessionExport());
     }
 
@@ -296,13 +296,7 @@ function view_user_shifts()
                     $shiftsFilter->getTypes(),
                     'types',
                     icon('person-lines-fill') . __('Angeltypes') . '<sup>1</sup>',
-                    [
-                        button(
-                            'javascript:checkOwnTypes(\'selection_types\', ' . json_encode($ownTypes) . ')',
-                            __('Own'),
-                            'd-print-none'
-                        ),
-                    ]
+                    $ownAngelTypes
                 ),
                 'filled_select' => make_select(
                     $filled,
@@ -378,20 +372,23 @@ function get_ids_from_array($array)
  * @param array  $selected
  * @param string $name
  * @param string $title
- * @param array  $additionalButtons
+ * @param int[]  $ownSelect
  * @return string
  */
-function make_select($items, $selected, $name, $title = null, $additionalButtons = [])
+function make_select($items, $selected, $name, $title = null, $ownSelect = [])
 {
     $html = '';
     if (isset($title)) {
         $html .= '<h4>' . $title . '</h4>' . "\n";
     }
 
-    $buttons = [];
-    $buttons[] = button('javascript:checkAll(\'selection_' . $name . '\', true)', __('All'), 'd-print-none');
-    $buttons[] = button('javascript:checkAll(\'selection_' . $name . '\', false)', __('None'), 'd-print-none');
-    $buttons = array_merge($buttons, $additionalButtons);
+    $buttons = [
+        button_checkbox_selection($name, __('All'), 'true'),
+        button_checkbox_selection($name, __('None'), 'false'),
+    ];
+    if (count($ownSelect) > 0) {
+        $buttons[] = button_checkbox_selection($name, __('Own'), json_encode($ownSelect));
+    }
 
     $html .= buttons($buttons);
     $html .= '<div id="selection_' . $name . '" class="mb-3 selection ' . $name . '">' . "\n";

includes/sys_template.php

@@ -374,16 +374,17 @@ function button($href, $label, $class = '', $id = '')
 }
 
 /**
- * Rendert einen Knopf mit JavaScript onclick Handler
+ * Renders a button to select corresponding checkboxes
  *
- * @param string $javascript
+ * @param string $name
  * @param string $label
- * @param string $class
+ * @param string $value
  * @return string
  */
-function button_js($javascript, $label, $class = '')
+function button_checkbox_selection($name, $label, $value)
 {
-    return '<a onclick="' . $javascript . '" href="#" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
+    return '<button type="button" class="btn btn-secondary d-print-none checkbox-selection" '
+        . 'data-id="selection_' . $name . '" data-value="' . $value . '">' . $label . '</button>';
 }
 
 /**

includes/view/UserDriverLicenses_view.php

@@ -51,23 +51,5 @@ function UserDriverLicense_edit_view($user_source, $user_driver_license)
             ], 'driving_license'),
             form_submit('submit', __('Save')),
         ]),
-        '
-        <script>
-            const drivingLicenseElement = document.getElementById("driving_license");
-
-            if (drivingLicenseElement) {
-                const checkbox = document.getElementById("wants_to_drive");
-                drivingLicenseElement.style.display = checkbox?.checked
-                    ? ""
-                    : "none";
-
-                checkbox.addEventListener("click", () => {
-                    drivingLicenseElement.style.display = document.getElementById("wants_to_drive")?.checked
-                        ? ""
-                        : "none";
-                });
-            }
-        </script>
-        ',
     ], true);
 }

resources/assets/js/countdown.js

@@ -6,7 +6,7 @@ import { ready } from './ready';
 ready(() => {
   const lang = document.documentElement.getAttribute('lang');
 
-  const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
+  const rtf = new Intl.RelativeTimeFormat(lang ?? [], { numeric: 'auto' });
 
   const timeFrames = [
     [60 * 60 * 24 * 365, 'year'],

resources/assets/js/forms.js

@@ -4,28 +4,24 @@ import { ready } from './ready';
 
 /**
  * Sets all checkboxes to the wanted state
- *
- * @param {string} id Id of the element containing all the checkboxes
- * @param {boolean} checked True if the checkboxes should be checked
  */
-global.checkAll = (id, checked) => {
-  document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
-    element.checked = checked;
+ready(() => {
+  document.querySelectorAll('button.checkbox-selection').forEach((buttonElement) => {
+    buttonElement.addEventListener('click', () => {
+      document.querySelectorAll(`#${buttonElement.dataset.id} input[type="checkbox"]`).forEach((checkboxElement) => {
+        /**
+         * @type {boolean|int[]}
+         */
+        const value = JSON.parse(buttonElement.dataset.value);
+        if (typeof value === 'boolean') {
+          checkboxElement.checked = value;
+        } else {
+          checkboxElement.checked = value.includes(Number(checkboxElement.value));
+        }
+      });
+    });
   });
-};
-
-/**
- * Sets the checkboxes according to the given type
- *
- * @param {string} id The Id of the element containing all the checkboxes
- * @param {int[]} shiftsList A list of numbers
- */
-global.checkOwnTypes = (id, shiftsList) => {
-  document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
-    const value = Number(element.value);
-    element.checked = shiftsList.includes(value);
-  });
-};
+});
 
 ready(() => {
   /**
@@ -284,27 +280,36 @@ ready(() => {
  * Uses DOMContentLoaded to prevent flickering
  */
 ready(() => {
-  const filter = document.getElementById('collapseShiftsFilterSelect');
-  if (!filter || localStorage.getItem('collapseShiftsFilterSelect') !== 'hidden.bs.collapse') {
-    return;
-  }
+  const collapseElement = document.getElementById('collapseShiftsFilterSelect');
+  if (collapseElement) {
+    if (localStorage.getItem('collapseShiftsFilterSelect') === 'hidden.bs.collapse') {
+      collapseElement.classList.remove('show');
+    }
 
-  filter.classList.remove('show');
+    /**
+     * @param {Event} event
+     */
+    const onChange = (event) => {
+      localStorage.setItem('collapseShiftsFilterSelect', event.type);
+    };
+
+    collapseElement.addEventListener('hidden.bs.collapse', onChange);
+    collapseElement.addEventListener('shown.bs.collapse', onChange);
+  }
 });
 
+/**
+ * Show/hide checkboxes for User Driver-Licenses
+ */
 ready(() => {
-  if (typeof localStorage === 'undefined') {
-    return;
+  const checkboxElement = document.getElementById('wants_to_drive');
+  const drivingLicenseElement = document.getElementById('driving_license');
+
+  if (checkboxElement && drivingLicenseElement) {
+    drivingLicenseElement.hidden = !checkboxElement.checked;
+
+    checkboxElement.addEventListener('click', () => {
+      drivingLicenseElement.hidden = !checkboxElement.checked;
+    });
   }
-
-  /**
-   * @param {Event} event
-   */
-  const onChange = (event) => {
-    localStorage.setItem('collapseShiftsFilterSelect', event.type);
-  };
-
-  document.getElementById('collapseShiftsFilterSelect')?.addEventListener('hidden.bs.collapse', onChange);
-
-  document.getElementById('collapseShiftsFilterSelect')?.addEventListener('shown.bs.collapse', onChange);
 });

resources/assets/js/ready.js

@@ -2,9 +2,9 @@
  * @param {Function} callback
  */
 export const ready = (callback) => {
-  if (document.readyState !== 'loading') {
-    callback();
-  } else {
+  if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', callback);
+  } else {
+    callback();
   }
 };

resources/views/pages/design.twig

@@ -263,15 +263,15 @@
                         {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', false, '2') }}
                         {{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', false, '3') }}
                         <div class="d-grid gap-2">
-                            <div id="select-all-checkboxes" class="btn btn-sm btn-block btn-primary">
+                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="true">
                                 Select all
-                            </div>
-                            <div id="select-23-checkboxes" class="btn btn-sm btn-block btn-primary">
+                            </button>
+                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="[2,3]">
                                 Select 2, 3
-                            </div>
-                            <div id="unselect-all-checkboxes" class="btn btn-sm btn-block btn-danger">
+                            </button>
+                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="false">
                                 Unselect all
-                            </div>
+                            </button>
                         </div>
                     </div>
                     <div class="col-md-3 col-lg-2 checkbox-inline">
@@ -432,18 +432,6 @@
     </div>
     </div>
     <script>
-        document.getElementById('select-all-checkboxes').addEventListener('click', () => {
-            checkAll('checkboxes', true);
-        });
-
-        document.getElementById('unselect-all-checkboxes').addEventListener('click', () => {
-            checkAll('checkboxes', false);
-        });
-
-        document.getElementById('select-23-checkboxes').addEventListener('click', () => {
-            checkOwnTypes('checkboxes', [2, 3]);
-        });
-
         document.getElementById('form').addEventListener('submit', (e) => {
             e.preventDefault();
             return false;