From 84c1cc36e5f66ad29c9a657d755f46ca1d5dbe98 Mon Sep 17 00:00:00 2001 From: Thomas Rupprecht Date: Sat, 1 Apr 2023 15:14:32 +0200 Subject: [PATCH] Improve javascript (#1077) --- includes/pages/user_shifts.php | 29 ++++---- includes/sys_template.php | 11 +-- includes/view/UserDriverLicenses_view.php | 18 ----- resources/assets/js/countdown.js | 2 +- resources/assets/js/forms.js | 81 ++++++++++++----------- resources/assets/js/ready.js | 6 +- resources/views/pages/design.twig | 24 ++----- 7 files changed, 72 insertions(+), 99 deletions(-) diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php index 15b5cd22..faf9fb46 100644 --- a/includes/pages/user_shifts.php +++ b/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') . '1', - [ - 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 .= '

' . $title . '

' . "\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 .= '
' . "\n"; diff --git a/includes/sys_template.php b/includes/sys_template.php index 6fa45248..cbee4149 100644 --- a/includes/sys_template.php +++ b/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 '' . $label . ''; + return ''; } /** diff --git a/includes/view/UserDriverLicenses_view.php b/includes/view/UserDriverLicenses_view.php index b3bb24f8..e57cf006 100644 --- a/includes/view/UserDriverLicenses_view.php +++ b/includes/view/UserDriverLicenses_view.php @@ -51,23 +51,5 @@ function UserDriverLicense_edit_view($user_source, $user_driver_license) ], 'driving_license'), form_submit('submit', __('Save')), ]), - ' - - ', ], true); } diff --git a/resources/assets/js/countdown.js b/resources/assets/js/countdown.js index 48bfbbba..31fb1444 100644 --- a/resources/assets/js/countdown.js +++ b/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'], diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index e6e19196..26557a13 100644 --- a/resources/assets/js/forms.js +++ b/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); }); diff --git a/resources/assets/js/ready.js b/resources/assets/js/ready.js index d664b52c..eabd8ffb 100644 --- a/resources/assets/js/ready.js +++ b/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(); } }; diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig index 05860046..a1885cad 100644 --- a/resources/views/pages/design.twig +++ b/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') }}
-
+
-
+ +
-
+ +
+
@@ -432,18 +432,6 @@