Edit file File name : layout-edit.html.twig Content :{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %} {% import "macros/widgets.html.twig" as widgets %} {% block main %} {% if timesheet.exported %} {{ widgets.alert('warning', ('timesheet.locked.warning'|trans({}, 'flashmessages')), ('warning'|trans({}, 'flashmessages')), 'warning') }} {% endif %} {% set formEditTemplate = app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig' %} {% set formOptions = { 'title': (timesheet.id ? 'timesheet.edit'|trans : 'create'|trans), 'form': form, 'back': path(route_back) } %} {% embed formEditTemplate with formOptions %} {% set length = 6 %} {% if form.begin is defined and form.end is defined and form.duration is defined %} {% set length = 5 %} {% elseif form.begin is defined and form.end is defined and form.duration is not defined %} {% set length = 6 %} {% elseif form.begin is defined and form.end is not defined and form.duration is defined %} {% set length = 10 %} {% elseif form.begin is not defined and form.end is defined and form.duration is defined %} {% set length = 10 %} {% endif %} {% block form_body %} {% if form.begin is defined or form.end is defined or form.duration is defined %} <div class="row"> {% if form.begin is defined %} <div class="col-md-{{ length }}"> {{ form_row(form.begin) }} </div> {% endif %} {% if form.end is defined %} <div class="col-md-{{ length }}"> {{ form_row(form.end) }} </div> {% endif %} {% if form.duration is defined %} <div class="col-md-2"> {{ form_row(form.duration) }} </div> {% endif %} </div> {% endif %} {% if form.customer is defined %} {{ form_row(form.customer, {'row_attr': {'class': 'timesheet_edit_form_row_customer'}}) }} {% endif %} {% if form.project is defined %} {{ form_row(form.project, {'row_attr': {'class': 'timesheet_edit_form_row_project'}}) }} {% endif %} {% if form.activity is defined %} {{ form_row(form.activity, {'row_attr': {'class': 'timesheet_edit_form_row_activity'}}) }} {% endif %} {% if form.description is defined %} {{ form_row(form.description, {'row_attr': {'class': 'timesheet_edit_form_row_description'}}) }} {% endif %} {% if form.tags is defined %} {{ form_row(form.tags, {'row_attr': {'class': 'timesheet_edit_form_row_tags'}}) }} {% endif %} {% if form.user is defined %} {{ form_row(form.user, {'row_attr': {'class': 'timesheet_edit_form_row_user'}}) }} {% endif %} {% if form.users is defined or form.teams is defined %} {% set uLength = 12 %} {% if form.users is defined and form.teams is defined %} {% set uLength = 6 %} {% endif %} <div class="row"> {% if form.users is defined %} <div class="col-md-{{ uLength }}"> {{ form_row(form.users) }} </div> {% endif %} {% if form.teams is defined %} <div class="col-md-{{ uLength }}"> {{ form_row(form.teams) }} </div> {% endif %} </div> {% endif %} {% set colWidth = 0 %} {% if form.fixedRate is defined %} {% set colWidth = colWidth + 1 %} {% endif %} {% if form.hourlyRate is defined %} {% set colWidth = colWidth + 1 %} {% endif %} {% if form.billable is defined %} {% set colWidth = colWidth + 1 %} {% elseif form.billableMode is defined %} {% set colWidth = colWidth + 1 %} {% endif %} {% if colWidth > 0 %} <div class="row"> {% if form.fixedRate is defined %} <div class="col-md-{{ 12 / colWidth }}"> {{ form_row(form.fixedRate, {'row_attr': {'class': 'timesheet_edit_form_row_fixedRate'}}) }} </div> {% endif %} {% if form.hourlyRate is defined %} <div class="col-md-{{ 12 / colWidth }}"> {{ form_row(form.hourlyRate, {'row_attr': {'class': 'timesheet_edit_form_row_hourlyRate'}}) }} </div> {% endif %} {% if form.billable is defined %} <div class="col-md-{{ 12 / colWidth }}"> {{ form_row(form.billable, {'row_attr': {'class': 'timesheet_edit_form_row_billable'}}) }} </div> {% elseif form.billableMode is defined %} <div class="col-md-{{ 12 / colWidth }}"> {{ form_row(form.billableMode, {'row_attr': {'class': 'timesheet_edit_form_row_billable'}}) }} </div> {% endif %} </div> {% endif %} {% if form.metaFields is defined and form.metaFields is not empty %} {% for meta in form.metaFields|sort((a, b) => a.vars.data.order <=> b.vars.data.order) %} {{ form_row(meta) }} {% endfor %} {% endif %} {% if form.exported is defined %} <div class="row"> <div class="col-md-12"> {{ form_row(form.exported, {'row_attr': {'class': 'timesheet_edit_form_row_exported'}}) }} </div> </div> {% endif %} {{ form_widget(form) }} {% endblock %} {% block form_after %} {% if form.begin is defined and form.end is defined and form.duration is defined %} {% set blockPrefix = form.vars.id %} <script type="text/javascript"> jQuery('body').on('change', '#{{ blockPrefix }}_begin', function(ev) { changedBegin(jQuery(this).val()); }); jQuery('body').on('change', '#{{ blockPrefix }}_end', function(ev) { changedEnd(jQuery(this).val()); }); jQuery('body').on('change', '#{{ blockPrefix }}_duration', function(ev) { changedDuration(); }); function getDurationField() { return document.getElementById('{{ blockPrefix }}_duration'); } {# Ruleset: - invalid begin => skip - empty end => set end to begin (only if duration > 0 = running record) - invalid end => skip - calculate duration #} function changedBegin(value) { var endField = document.getElementById('{{ blockPrefix }}_end'); var format = endField.dataset.format; var momentDuration = getParsedDuration(); var momentBegin = moment(value, format); if (!momentBegin.isValid()) { setDurationAsString(null); } if (endField.value === '' && momentDuration.asSeconds() > 0) { applyDateToField(endField, momentBegin, format); } var momentEnd = moment(endField.value, format); if (!momentEnd.isValid()) { return; } if (momentEnd.isBefore(momentBegin)) { applyDateToField(endField, momentBegin.add(momentDuration), format); } momentBegin = moment(value, format); momentEnd = moment(endField.value, format); var durationMoment = moment.duration(momentEnd.diff(momentBegin)); setDurationAsString(durationMoment); } {# Ruleset: - invalid end => skip - empty begin => set begin to end - invalid begin => skip - calculate duration #} function changedEnd(value) { var beginField = document.getElementById('{{ blockPrefix }}_begin'); var format = beginField.dataset.format; var momentDuration = getParsedDuration(); var momentEnd = moment(value, format); if (!momentEnd.isValid()) { setDurationAsString(null); } if (beginField.value === '') { applyDateToField(beginField, momentEnd, format); } var momentBegin = moment(beginField.value, format); if (!momentBegin.isValid()) { return; } if (momentEnd.isBefore(momentBegin)) { applyDateToField(beginField, momentEnd.subtract(momentDuration), format); } momentBegin = moment(beginField.value, format); momentEnd = moment(value, format); var durationMoment = moment.duration(momentEnd.diff(momentBegin)); setDurationAsString(durationMoment); } {# Ruleset: - invalid duration => skip - if begin and end are empty: set begin to now and end to duration - if begin is empty and end is not empty: set begin to end minus duration - if begin is not empty and end is empty and duration is > 0 (running records = 0): set end to begin plus duration #} function changedDuration() { var momentDuration = getParsedDuration(); if (!momentDuration.isValid()) { return; } var beginField = document.getElementById('{{ blockPrefix }}_begin'); var endField = document.getElementById('{{ blockPrefix }}_end'); var format = endField.dataset.format; var begin = beginField.value; var end = endField.value; var duration = momentDuration.asSeconds(); if (begin === '' && end === '') { applyDateToField(beginField, moment(), format); applyDateToField(endField, moment(beginField.value, format).add(duration, 'seconds'), format); } else if (begin === '' && end !== '') { applyDateToField(beginField, moment(end, format).subtract(duration, 'seconds'), format); } else if (begin !== '' && duration > 0) { applyDateToField(endField, moment(beginField.value, format).add(duration, 'seconds'), format); } } {# writes the value of a moment-duration object as human readable string into the duration field #} function setDurationAsString(durationMoment) { if (durationMoment === null) { getDurationField().value = ''; return; } if (!durationMoment.isValid()) { return; } var hours = Math.floor(durationMoment.asHours()); if (hours < 10) { hours = '0' + hours; } getDurationField().value = hours + ':' + ('0' + durationMoment.minutes()).slice(-2); } {# returns a moment duration object from the duration input field #} function getParsedDuration() { var duration = getDurationField().value.toUpperCase(); var momentDuration = moment.duration(NaN); if (duration.indexOf(':') !== -1) { momentDuration = moment.duration(duration); } else if (duration.indexOf('.') !== -1 || duration.indexOf(',') !== -1) { duration = duration.replace(/,/, '.'); duration = parseFloat(duration) * 3600; momentDuration = moment.duration('PT' + duration + 'S'); } else if (duration.indexOf('H') !== -1 || duration.indexOf('M') !== -1 || duration.indexOf('S') !== -1) { {# D for days does not work, because 'PT1H' but with days 'P1D' is used #} momentDuration = moment.duration('PT' + duration); } else { let c = parseInt(duration); let d = parseInt(duration).toFixed(); if (!isNaN(c) && duration === d) { duration = c * 3600; momentDuration = moment.duration('PT' + duration + 'S'); } } return momentDuration; } function applyDateToField(field, momentObj, format) { field.value = momentObj.format(format); if (jQuery(field).data('daterangepicker') !== undefined) { jQuery(field).data('daterangepicker').setStartDate(momentObj); jQuery(field).data('daterangepicker').setEndDate(momentObj); {# make sure that the project list is reloaded and the dates can be compared against the project end date #} jQuery('#{{ blockPrefix }}_customer').trigger('change'); } } </script> {% endif %} {% endblock %} {% endembed %} {% endblock %} Save