timetracking/httpdocs/templates/timetracking/week.html.twig

{# templates/timetracking/week.html.twig #}
{% extends 'base.html.twig' %}

{#
  Datums-Arrays kommen aus AppExtension (single source of truth).
  Skalare Strings kommen aus messages.de.yaml via |trans.
#}
{% set months       = deMonths() %}
{% set monthsShort  = deMonthsShort() %}
{% set weekdays     = deWeekdays() %}
{% set weekdaysShort= deWeekdaysShort() %}

{% block title %}
  {% set monthName = months[currentDate|date('n') - 1] %}
  {% set activStr  = currentDate|date('Y-m-d') %}
  {% if activStr == todayStr %}
    {{ 'app.date.today'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
  {% elseif activStr == tomorrowStr %}
    {{ 'app.date.tomorrow'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
  {% elseif activStr == yesterdayStr %}
    {{ 'app.date.yesterday'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
  {% else %}
    {{ weekdays[currentDate|date('N') - 1] }}, {{ currentDate|date('j') }}. {{ monthName }}
  {% endif %}
{% endblock %}

{% block body %}

<script>
window.TT = {
  activeDate: '{{ currentDate|date('Y-m-d') }}',
  trackingInterval: {{ trackingInterval }},
  projects: [
    {% for project in projects %}
    { id: {{ project.id }}, name: {{ project.name|json_encode|raw }}, clientName: {{ project.client.name|json_encode|raw }} }{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  services: [
    {% for service in services %}
    { id: {{ service.id }}, name: {{ service.name|json_encode|raw }}, billable: {{ service.billable ? 'true' : 'false' }} }{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  i18n: {
    today:          {{ 'app.date.today'|trans|json_encode|raw }},
    tomorrow:       {{ 'app.date.tomorrow'|trans|json_encode|raw }},
    yesterday:      {{ 'app.date.yesterday'|trans|json_encode|raw }},
    weekLabel:      {{ 'app.date.week_label'|trans|json_encode|raw }},
    months:         {{ months|json_encode|raw }},
    monthsShort:    {{ monthsShort|json_encode|raw }},
    weekdays:       {{ weekdays|json_encode|raw }},
    weekdaysShort:  {{ weekdaysShort|json_encode|raw }},
    prevWeek:       {{ 'app.nav.prev_week'|trans|json_encode|raw }},
    nextWeek:       {{ 'app.nav.next_week'|trans|json_encode|raw }},
    monthView:      {{ 'app.nav.month_view'|trans|json_encode|raw }},
    prevMonth:      {{ 'app.nav.prev_month'|trans|json_encode|raw }},
    nextMonth:      {{ 'app.nav.next_month'|trans|json_encode|raw }},
    billable:       {{ 'app.service.billable'|trans|json_encode|raw }},
    notBillable:    {{ 'app.service.not_billable'|trans|json_encode|raw }},
    selectPh:       {{ 'app.entry.select_placeholder'|trans|json_encode|raw }},
    noEntries:      {{ 'app.entry.no_entries'|trans|json_encode|raw }},
    btnSave:        {{ 'app.entry.btn_save'|trans|json_encode|raw }},
    btnCancel:      {{ 'app.entry.btn_cancel'|trans|json_encode|raw }},
    btnEdit:        {{ 'app.entry.btn_edit'|trans|json_encode|raw }},
    btnDelete:      {{ 'app.entry.btn_delete'|trans|json_encode|raw }},
    labelDuration:  {{ 'app.entry.label_duration'|trans|json_encode|raw }},
    labelProjectService: {{ 'app.entry.label_project_service'|trans|json_encode|raw }},
    labelNote:      {{ 'app.entry.label_note'|trans|json_encode|raw }},
    confirmDelete:  {{ 'app.entry.confirm_delete'|trans|json_encode|raw }},
    errorNoProject: {{ 'app.entry.error_no_project'|trans|json_encode|raw }},
    errorSave:      {{ 'app.entry.error_save'|trans|json_encode|raw }},
    errorDelete:    {{ 'app.entry.error_delete'|trans|json_encode|raw }},
    errorLoad:      {{ 'app.entry.error_load'|trans|json_encode|raw }},
    durationHint:   {{ 'app.entry.duration_hint'|trans|json_encode|raw }},
    errorZeroDuration: {{ 'app.entry.error_zero_duration'|trans|json_encode|raw }},
    errorDurationTooLong: {{ 'app.entry.error_duration_too_long'|trans|json_encode|raw }},
    warnDurationLong: {{ 'app.entry.warn_duration_long'|trans|json_encode|raw }},
    invoicedTitle:  {{ 'app.entry.invoiced_title'|trans|json_encode|raw }},
  },
};
</script>

<div class="tt-page">

  {% include '_sections/tt-header.html.twig' %}

  <div class="greeting">
    <span class="greeting__text">{{ greeting }}, {{ firstName }}!</span>
  </div>

  <main class="tt-content">

    <div class="entry-form" id="entry-form">
      <div class="entry-form__grid">

        <label class="entry-form__label">{{ 'app.entry.label_duration'|trans }}</label>
        <div class="entry-form__field">
          <input type="text" id="create-duration" class="input input--sm" value="0:00" autocomplete="off" />
          {% include '_atoms/duration-help.html.twig' %}
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_project_service'|trans }}</label>
        <div class="entry-form__field entry-form__field--selects">
          <select id="create-project" class="select">
            <option value="">{{ 'app.entry.select_placeholder'|trans }}</option>
            {% set currentClient = null %}
            {% for project in projects %}
              {% if project.client.name != currentClient %}
                {% if currentClient is not null %}</optgroup>{% endif %}
                <optgroup label="{{ project.client.name }}">
                {% set currentClient = project.client.name %}
              {% endif %}
              <option value="{{ project.id }}">{{ project.name }}</option>
            {% endfor %}
            {% if currentClient is not null %}</optgroup>{% endif %}
          </select>
          <select id="create-service" class="select">
            <option value="">{{ 'app.entry.select_placeholder'|trans }}</option>
            {% set currentGroup = null %}
            {% for service in services %}
              {% set group = service.billable ? 'app.service.billable'|trans : 'app.service.not_billable'|trans %}
              {% if group != currentGroup %}
                {% if currentGroup is not null %}</optgroup>{% endif %}
                <optgroup label="{{ group }}">
                {% set currentGroup = group %}
              {% endif %}
              <option value="{{ service.id }}">{{ service.name }}</option>
            {% endfor %}
            {% if currentGroup is not null %}</optgroup>{% endif %}
          </select>
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_note'|trans }}</label>
        <div class="entry-form__field">
          <textarea id="create-note" class="textarea" rows="3"
                    placeholder="{{ 'app.entry.placeholder_note'|trans }}"></textarea>
        </div>

        <div class="entry-form__actions">
          <button type="button" class="btn btn-primary" id="btn-create">
            {{ 'app.entry.btn_create'|trans }}
          </button>
        </div>

      </div>
    </div>

    <div class="entry-list" id="entry-list" data-date="{{ currentDate|date('Y-m-d') }}">
      {% if timeEntries is empty %}
        <div class="empty-state" id="empty-state">
          <p class="empty-state__title">{{ 'app.entry.no_entries'|trans }}</p>
        </div>
      {% else %}
        <div class="entry-list__items" id="entry-items">
          {% for entry in timeEntries %}
            {% include 'timetracking/_entry_row.html.twig' with { entry: entry } %}
          {% endfor %}
        </div>
        <div class="entry-list__footer" id="entry-footer">
          <span class="entry-list__total">{{ totalDuration }}</span>
        </div>
      {% endif %}
    </div>

  </main>
</div>

{% endblock %}

{% block javascripts %}
  {{ parent() }}
{% endblock %}