kevinpapst_kimai2/templates/widget/widget-paginatedworkingtimechart.html.twig

{% set widgetId = 'PaginatedWorkingTimeChartBox' %}
{% embed 'dashboard/widget.html.twig' with {id: widgetId} %}
    {% from '@theme/components/buttons.html.twig' import action_cardtoolbutton %}
    {% from "macros/widgets.html.twig" import pagination_simple %}
    {% block box_pagination %}
        {% set optYear = data.pagination_year %}
        {% set optWeek = data.pagination_week %}
        {% set prevYear = optYear %}
        {% set prevWeek = optWeek %}
        {% set nextYear = optYear %}
        {% set nextWeek = optWeek %}
        {% if optWeek == 1 %}
            {% set prevYear = prevYear - 1 %}
            {% set prevWeek = data.lastWeekInLastYear %}
        {% else %}
            {% set prevWeek = prevWeek - 1 %}
        {% endif %}
        {% if optWeek == data.lastWeekInYear %}
            {% set nextYear = nextYear + 1 %}
            {% set nextWeek = 1 %}
        {% else %}
            {% set nextWeek = nextWeek + 1 %}
        {% endif %}
        {{ pagination_simple(
            {'title': 'stats.workingTimeWeekShort'|trans({'%week%': (prevWeek ~ '/' ~ prevYear)}), 'onclick': 'myChart.destroy()', 'href': path('widgets_working_time_chart', {'year': prevYear, 'week': prevWeek})},
            {'title': 'stats.workingTimeWeekShort'|trans({'%week%': (nextWeek ~ '/' ~ nextYear)}), 'onclick': 'myChart.destroy()', 'href': path('widgets_working_time_chart', {'year': nextYear, 'week': nextWeek})}
        ) }}
    {% endblock %}
    {% block box_body %}
    <div class="row">
        <div class="col-lg-8 col-sm-12">
            {{ render_widget('DailyWorkingTimeChart', options|merge({'begin': data.begin, 'end': data.end})) }}
        </div>
        <div class="col-lg-4 col-sm-12 mt-2">
            <ul class="p-0 m-0">
                <li class="d-flex mb-2">
                    <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                        <div class="me-2">{{ 'stats.workingTimeToday'|trans({'%day%': 'now'|date_short}) }}</div>
                        <div class="fw-bold">{{ data.day|duration }}</div>
                    </div>
                </li>
                <li class="d-flex mb-2">
                    <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                        <div class="me-2">{{ 'stats.workingTimeWeek'|trans({'%week%': data.begin|date_format('W')}) }}</div>
                        <div class="fw-bold">{{ data.week|duration }}</div>
                    </div>
                </li>

                <li class="d-flex mb-2">
                    <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                        <div class="me-2">{{ 'stats.workingTimeMonth'|trans({'%month%': data.thisMonth|month_name, '%year%': data.thisMonth|date_format('Y')}) }}</div>
                        <div class="fw-bold">{{ data.month|duration }}</div>
                    </div>
                </li>
                <li class="d-flex mb-2">
                    <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                        <div class="me-2">{{ 'stats.workingTimeYear'|trans({'%year%': data.dateYear}) }}</div>
                        <div class="fw-bold">{{ data.year|duration }}</div>
                    </div>
                </li>
                {% if data.financial is not null %}
                    <li class="d-flex mb-2">
                        <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                            <div class="me-2">{{ 'stats.workingTimeFinancialYear'|trans }}</div>
                            <div class="fw-bold">{{ data.financial|duration }}</div>
                        </div>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
    {% endblock %}
{% endembed %}
{% if not kimai_context.javascriptRequest %}
<script type="text/javascript">
    document.addEventListener('kimai.initialized', function() {
        KimaiPaginatedBoxWidget.create('#{{ widgetId }}');
    });
</script>
{% endif %}