iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Thomas Rupprecht 2022-12-23 18:31:26 +01:00 committed by GitHub
parent b1b08afd23
commit 2bab370221
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
includes/pages/admin_shifts.php
View File

@ -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',

23
includes/sys_form.php
View File

@ -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 . '" />
<button class="btn btn-secondary spinner-down" type="button" data-input-id="' . $id . '">
<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 . '"' . $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
);

32
resources/assets/js/forms.js
View File

@ -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);