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

Extract shifts filter JavaScript and improve HTML structure

This commit is contained in:
Thomas Rupprecht 2023-01-02 18:54:32 +01:00 committed by GitHub
parent c2e3902c53
commit 30f50dab6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
includes/pages/user_shifts.php
View File

@ -380,7 +380,6 @@ function get_ids_from_array($array)
function make_select($items, $selected, $name, $title = null, $additionalButtons = []) function make_select($items, $selected, $name, $title = null, $additionalButtons = [])
{ {
$html = ''; $html = '';
$htmlItems = [];
if (isset($title)) { if (isset($title)) {
$html .= '<h4>' . $title . '</h4>' . "\n"; $html .= '<h4>' . $title . '</h4>' . "\n";
} }
@ -391,7 +390,9 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
$buttons = array_merge($buttons, $additionalButtons); $buttons = array_merge($buttons, $additionalButtons);
$html .= buttons($buttons); $html .= buttons($buttons);
$html .= '<div id="selection_' . $name . '" class="mb-3 selection ' . $name . '">' . "\n";
$htmlItems = [];
foreach ($items as $i) { foreach ($items as $i) {
$id = $name . '_' . $i['id']; $id = $name . '_' . $i['id'];
$htmlItems[] = '<div class="form-check">' $htmlItems[] = '<div class="form-check">'
@ -401,11 +402,10 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
. (!isset($i['enabled']) || $i['enabled'] ? '' : icon('mortarboard-fill')) . (!isset($i['enabled']) || $i['enabled'] ? '' : icon('mortarboard-fill'))
. '</div>'; . '</div>';
} }
$html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";
$html .= implode("\n", $htmlItems); $html .= implode("\n", $htmlItems);
$html .= '</div>' . "\n";
$html .= buttons($buttons); $html .= buttons($buttons);
$html .= '</div>' . "\n";
return $html; return $html;
} }

2
includes/sys_template.php
View File

@ -457,5 +457,5 @@ function buttons($buttons = [])
*/ */
function table_buttons($buttons = []) function table_buttons($buttons = [])
{ {
return '<div class="btn-group">' . join(' ', $buttons) . '</div>'; return '<div class="btn-group" role="group">' . join('', $buttons) . '</div>';
} }

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

@ -2,14 +2,6 @@ import 'select2';
import { formatDay, formatTime } from './date'; import { formatDay, formatTime } from './date';
import { ready } from './ready'; import { ready } from './ready';
/**
* @param {HTMLElement} element
*/
const triggerChange = (element) => {
const changeEvent = new Event('change');
element.dispatchEvent(changeEvent);
};
/** /**
* Sets all checkboxes to the wanted state * Sets all checkboxes to the wanted state
* *
@ -25,77 +17,99 @@ global.checkAll = (id, checked) => {
/** /**
* Sets the checkboxes according to the given type * Sets the checkboxes according to the given type
* *
* @param {string} id The elements ID * @param {string} id The Id of the element containing all the checkboxes
* @param {int[]} shiftsList A list of numbers * @param {int[]} shiftsList A list of numbers
*/ */
global.checkOwnTypes = (id, shiftsList) => { global.checkOwnTypes = (id, shiftsList) => {
document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => { document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
const value = parseInt(element.value, 10); const value = Number(element.value);
element.checked = shiftsList.includes(value); element.checked = shiftsList.includes(value);
}); });
}; };
/** ready(() => {
* Sets the values of the input fields with the IDs to from/to: /**
* - date portion of from → start_day * @param {HTMLElement} element
* - time portion of from → start_time */
* - date portion of to → end_day const triggerChange = (element) => {
* - time portion of to → end_time const changeEvent = new Event('change');
* element.dispatchEvent(changeEvent);
* @param {Date} from
* @param {Date} to
*/
global.setInput = (from, to) => {
const fromDay = document.getElementById('start_day');
const fromTime = document.getElementById('start_time');
const toDay = document.getElementById('end_day');
const toTime = document.getElementById('end_time');
if (!fromDay || !fromTime || !toDay || !toTime) {
console.warn('cannot set input date because of missing field');
return;
} }
fromDay.value = formatDay(from); /**
triggerChange(fromDay); * Sets the values of the input fields with the IDs to from/to:
fromTime.value = formatTime(from); * - date portion of from → start_day
* - time portion of from → start_time
* - date portion of to → end_day
* - time portion of to → end_time
*
* @param {Date} from
* @param {Date} to
*/
const setInput = (from, to) => {
const fromDay = document.getElementById('start_day');
const fromTime = document.getElementById('start_time');
const toDay = document.getElementById('end_day');
const toTime = document.getElementById('end_time');
toDay.value = formatDay(to); if (!fromDay || !fromTime || !toDay || !toTime) {
triggerChange(toDay); console.warn('cannot set input date because of missing field');
toTime.value = formatTime(to); return;
}; }
global.setDay = (days) => { fromDay.value = formatDay(from);
days = days || 0; triggerChange(fromDay);
fromTime.value = formatTime(from);
const from = new Date(); toDay.value = formatDay(to);
from.setHours(0, 0, 0, 0); triggerChange(toDay);
toTime.value = formatTime(to);
};
// add days, Date handles the overflow /**
from.setDate(from.getDate() + days); * @param {MouseEvent} event
*/
const onClickDate = (event) => {
const days = Number(event.currentTarget.dataset.days);
const to = new Date(from); const from = new Date();
to.setHours(23, 59); from.setHours(0, 0, 0, 0);
setInput(from, to); // add days, Date handles the overflow
}; from.setDate(from.getDate() + days);
global.setHours = (hours) => { const to = new Date(from);
hours = hours || 1; to.setHours(23, 59);
const from = new Date(); setInput(from, to);
const to = new Date(from); };
// convert hours to add to milliseconds (60 minutes * 60 seconds * 1000 for milliseconds) /**
const msToAdd = hours * 60 * 60 * 1000; * @param {MouseEvent} event
to.setTime(to.getTime() + msToAdd, 'h'); */
if (to < from) { const onClickTime = (event) => {
setInput(to, from); const hours = Number(event.currentTarget.dataset.hours);
return;
}
setInput(from, to); const from = new Date();
}; const to = new Date(from);
// add hours, Date handles the overflow
to.setHours(to.getHours() + hours);
if (to < from) {
setInput(to, from);
} else{
setInput(from, to);
}
};
document.querySelectorAll('.set-date').forEach((element) => {
element.addEventListener('click', onClickDate);
});
document.querySelectorAll('.set-time').forEach((element) => {
element.addEventListener('click', onClickTime);
});
});
ready(() => { ready(() => {
/** /**

14
resources/assets/themes/base.scss
View File

@ -359,20 +359,6 @@ code {
} }
} }
@media (max-width: 525px) {
.col-xxs-12 {
float: none;
width: 100%;
position: relative;
left: 0;
right: 0;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
}
@media print { @media print {
a[href]:after { a[href]:after {
content: ''; content: '';

26
resources/views/pages/user-shifts.html
View File

@ -35,18 +35,18 @@
</div> </div>
</div> </div>
<div class="form-group d-print-none" style="margin-top: .5em"> <div class="form-group d-print-none" style="margin-top: .5em">
<div class="btn-group mb-1"> <div class="btn-group mb-1" role="group">
<a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a> <button type="button" class="btn btn-secondary set-date" data-days="-1">%set_yesterday%</button>
<a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a> <button type="button" class="btn btn-secondary set-date" data-days="0">%set_today%</button>
<a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a> <button type="button" class="btn btn-secondary set-date" data-days="1">%set_tomorrow%</button>
</div> </div>
<div class="btn-group mb-1"> <div class="btn-group mb-1" role="group">
<a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a> <button type="button" class="btn btn-secondary set-time" data-hours="-8">%set_last_8h%</button>
<a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a> <button type="button" class="btn btn-secondary set-time" data-hours="-4">%set_last_4h%</button>
<a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a> <button type="button" class="btn btn-secondary set-time" data-hours="4">%set_next_4h%</button>
<a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a> <button type="button" class="btn btn-secondary set-time" data-hours="8">%set_next_8h%</button>
</div> </div>
<div class="btn-group mb-1"> <div class="btn-group mb-1" role="group">
%buttons% %buttons%
</div> </div>
</div> </div>
@ -66,9 +66,9 @@
<div class="collapse show d-print-none" id="collapseShiftsFilterSelect"> <div class="collapse show d-print-none" id="collapseShiftsFilterSelect">
<div class="row"> <div class="row">
<div class="col col-xs-4 col-xxs-12">%room_select%</div> <div class="col col-12 col-sm-4 col-md-12 col-lg-5 col-xl-4 col-xxl-4">%room_select%</div>
<div class="col col-xs-4 col-xxs-12">%type_select%</div> <div class="col col-12 col-sm-5 col-md-12 col-lg-7 col-xl-5 col-xxl-4">%type_select%</div>
<div class="col col-xs-4 col-xxs-12">%filled_select%</div> <div class="col col-12 col-sm-3 col-md-12 col-lg-5 col-xl-3 col-xxl-4">%filled_select%</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-md-12 m-1"> <div class="col col-md-12 m-1">