Extract shifts filter JavaScript and improve HTML structure
This commit is contained in:
Thomas Rupprecht
GitHub
parent
c2e3902c53
commit
30f50dab6d
|
|
@ -380,7 +380,6 @@ function get_ids_from_array($array)
|
|||
function make_select($items, $selected, $name, $title = null, $additionalButtons = [])
|
||||
{
|
||||
$html = '';
|
||||
$htmlItems = [];
|
||||
if (isset($title)) {
|
||||
$html .= '<h4>' . $title . '</h4>' . "\n";
|
||||
}
|
||||
|
|
@ -391,7 +390,9 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
|
|||
$buttons = array_merge($buttons, $additionalButtons);
|
||||
|
||||
$html .= buttons($buttons);
|
||||
$html .= '<div id="selection_' . $name . '" class="mb-3 selection ' . $name . '">' . "\n";
|
||||
|
||||
$htmlItems = [];
|
||||
foreach ($items as $i) {
|
||||
$id = $name . '_' . $i['id'];
|
||||
$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'))
|
||||
. '</div>';
|
||||
}
|
||||
$html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";
|
||||
$html .= implode("\n", $htmlItems);
|
||||
|
||||
$html .= '</div>' . "\n";
|
||||
$html .= buttons($buttons);
|
||||
|
||||
$html .= '</div>' . "\n";
|
||||
return $html;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -457,5 +457,5 @@ function buttons($buttons = [])
|
|||
*/
|
||||
function table_buttons($buttons = [])
|
||||
{
|
||||
return '<div class="btn-group">' . join(' ', $buttons) . '</div>';
|
||||
return '<div class="btn-group" role="group">' . join('', $buttons) . '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,6 @@ import 'select2';
|
|||
import { formatDay, formatTime } from './date';
|
||||
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
|
||||
*
|
||||
|
|
@ -25,77 +17,99 @@ global.checkAll = (id, checked) => {
|
|||
/**
|
||||
* 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
|
||||
*/
|
||||
global.checkOwnTypes = (id, shiftsList) => {
|
||||
document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
|
||||
const value = parseInt(element.value, 10);
|
||||
const value = Number(element.value);
|
||||
element.checked = shiftsList.includes(value);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the values of the input fields with the IDs to from/to:
|
||||
* - 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
|
||||
*/
|
||||
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;
|
||||
ready(() => {
|
||||
/**
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
const triggerChange = (element) => {
|
||||
const changeEvent = new Event('change');
|
||||
element.dispatchEvent(changeEvent);
|
||||
}
|
||||
|
||||
fromDay.value = formatDay(from);
|
||||
triggerChange(fromDay);
|
||||
fromTime.value = formatTime(from);
|
||||
/**
|
||||
* Sets the values of the input fields with the IDs to from/to:
|
||||
* - 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);
|
||||
triggerChange(toDay);
|
||||
toTime.value = formatTime(to);
|
||||
};
|
||||
if (!fromDay || !fromTime || !toDay || !toTime) {
|
||||
console.warn('cannot set input date because of missing field');
|
||||
return;
|
||||
}
|
||||
|
||||
global.setDay = (days) => {
|
||||
days = days || 0;
|
||||
fromDay.value = formatDay(from);
|
||||
triggerChange(fromDay);
|
||||
fromTime.value = formatTime(from);
|
||||
|
||||
const from = new Date();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
toDay.value = formatDay(to);
|
||||
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);
|
||||
to.setHours(23, 59);
|
||||
const from = new Date();
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
setInput(from, to);
|
||||
};
|
||||
// add days, Date handles the overflow
|
||||
from.setDate(from.getDate() + days);
|
||||
|
||||
global.setHours = (hours) => {
|
||||
hours = hours || 1;
|
||||
const to = new Date(from);
|
||||
to.setHours(23, 59);
|
||||
|
||||
const from = new Date();
|
||||
const to = new Date(from);
|
||||
setInput(from, to);
|
||||
};
|
||||
|
||||
// convert hours to add to milliseconds (60 minutes * 60 seconds * 1000 for milliseconds)
|
||||
const msToAdd = hours * 60 * 60 * 1000;
|
||||
to.setTime(to.getTime() + msToAdd, 'h');
|
||||
if (to < from) {
|
||||
setInput(to, from);
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
const onClickTime = (event) => {
|
||||
const hours = Number(event.currentTarget.dataset.hours);
|
||||
|
||||
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(() => {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
a[href]:after {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -35,18 +35,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group d-print-none" style="margin-top: .5em">
|
||||
<div class="btn-group mb-1">
|
||||
<a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
|
||||
<a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a>
|
||||
<a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a>
|
||||
<div class="btn-group mb-1" role="group">
|
||||
<button type="button" class="btn btn-secondary set-date" data-days="-1">%set_yesterday%</button>
|
||||
<button type="button" class="btn btn-secondary set-date" data-days="0">%set_today%</button>
|
||||
<button type="button" class="btn btn-secondary set-date" data-days="1">%set_tomorrow%</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1">
|
||||
<a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a>
|
||||
<a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a>
|
||||
<a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
|
||||
<a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
|
||||
<div class="btn-group mb-1" role="group">
|
||||
<button type="button" class="btn btn-secondary set-time" data-hours="-8">%set_last_8h%</button>
|
||||
<button type="button" class="btn btn-secondary set-time" data-hours="-4">%set_last_4h%</button>
|
||||
<button type="button" class="btn btn-secondary set-time" data-hours="4">%set_next_4h%</button>
|
||||
<button type="button" class="btn btn-secondary set-time" data-hours="8">%set_next_8h%</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1">
|
||||
<div class="btn-group mb-1" role="group">
|
||||
%buttons%
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,9 +66,9 @@
|
|||
|
||||
<div class="collapse show d-print-none" id="collapseShiftsFilterSelect">
|
||||
<div class="row">
|
||||
<div class="col col-xs-4 col-xxs-12">%room_select%</div>
|
||||
<div class="col col-xs-4 col-xxs-12">%type_select%</div>
|
||||
<div class="col col-xs-4 col-xxs-12">%filled_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-12 col-sm-5 col-md-12 col-lg-7 col-xl-5 col-xxl-4">%type_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 class="row">
|
||||
<div class="col col-md-12 m-1">
|
||||
|
|
|
|||
Loading…
Reference in New Issue