brass/templates/index.html

{% extends "nav.html" %}

{% block content %}
<div hx-indicator="#progress">
  <section class="section">
    <div class="container">
      <div class="level">
        <div class="level-left">
          <a hx-boost="true" class="button is-link level-item"
            href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-left" />
            </svg>
          </a>
        </div>

        <div class="control level-item is-flex-grow-0">
          <input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
            hx-get="/{{ selected_area|show_area_query(true) }}" hx-push-url="true">

          {% if user.role == Role::Admin %}
          <div class="select ml-2">
            <select hx-get="/?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area">
              {% for area in areas %}
              {% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
              selected_area.unwrap() == area.id %}
              <option selected value="{{ area.id }}">{{ area.name }}</option>
              {% else %}
              <option value="{{ area.id }}">{{ area.name }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
          {% endif %}
        </div>

        <div class="level-right">
          <a hx-boost="true" class="button is-link level-item"
            href="/?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
      </div>

      <progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
    </div>
  </section>

  <section id="progress" class="section">
    <div class="container">
      <div class="level">
        <div class="level-left">
          <h3 class="title is-3">
            Events am {{ date.format("%d.%m.%Y") }}
          </h3>
        </div>
        {% if (user.role == Role::Admin || user.role == Role::AreaManager) && (selected_area.is_none() ||
        selected_area.unwrap() == user.area_id) %}
        <div class="level-right">
          <a class="button is-link is-light" hx-boost="true" href="/events/new?date={{ date }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#plus-circle" />
            </svg>
            <span>Neues Event für diesen Tag</span>
          </a>
        </div>
        {% endif %}
      </div>

      {% if events.len() == 0 %}
      <div class="box">
        <h5 class="subtitle is-5">keine Events geplant</h5>
      </div>
      {% else %}
      {% for event in events %}
      <div class="box">
        {% if event.canceled %}<b>Veranstaltung abgesagt!</b>{% endif %}
        <div class="level">
          <h5 class="title is-5 level-left">{{ event.name }}</h5>
          <span class="level-right">
            {% if user.role == Role::AreaManager || user.role == Role::Admin %}
            <a href="/assignments/new?event={{ event.id }}" hx-boost="true"
              class="button is-primary level-item">Planen</a>
            <a href="" class="button is-primary-light level-item">bearbeiten</a>
            <a href="" class="button is-warning level-item">als abgesagt markieren</a>
            {% endif %}
          </span>
        </div>
        <p>Ort: {{ event.location.as_ref().unwrap().name }}</p>
        <p>Zeitraum: {{ event.start_time }} bis {{ event.end_time }}</p>
        <p>Anzahl der Posten: {{ event.amount_of_posten }}</p>
        <p>Wachhabender durch FF gestellt: {{ event.voluntary_wachhabender }}</p>
        <p>Kleidungsordnung: {{ event.clothing }}</p>
      </div>
      {% endfor %}
      {% endif %}
    </div>
  </section>

  <section id="progress" class="section">
    <div class="container">
      <div class="level">
        <div class="level-left">
          <h3 class="title is-3">
            Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
          </h3>
        </div>
        {% if selected_area.is_none() || selected_area.unwrap() == user.area_id %}
        <div class="level-right">
          <a class="button is-link is-light" hx-boost="true" href="/availabillity/new?date={{ date }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#plus-circle" />
            </svg>
            <span>Neue Verfügbarkeit für diesen Tag</span>
          </a>
        </div>
        {% endif %}
      </div>

      {% if availabillities.len() == 0 %}
      <div class="box">
        <h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
      </div>
      {% else %}
      <div class="box">
        <table class="table is-fullwidth">
          <thead>
            <tr>
              <th>Name</th>
              <th>Funktion</th>
              <th>Zeitraum</th>
              <th>Kommentar</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for availabillity in availabillities %}
            {% let u = availabillity.user.as_ref().unwrap() %}
            <tr>
              <td>{{ u.name }}</td>
              <td>
                {% match u.function %}
                {% when Function::Posten %}
                <span class="tag is-info is-light">Posten</span>
                {% when Function::Wachhabender %}
                <span class="tag is-info">Wachhabender</span>
                {% else %}
                {% endmatch %}
              </td>
              <td>
                {% if availabillity.start_time.is_some() && availabillity.end_time.is_some() %}
                {{ availabillity.start_time.as_ref().unwrap().format("%R") }} bis {{
                availabillity.end_time.as_ref().unwrap().format("%R") }}
                {% else %}
                ganztägig
                {% endif %}
              </td>
              <td>
                {{ availabillity.comment.as_deref().unwrap_or("") }}
              </td>
              <td>
                {% if availabillity.user_id == user.id %}
                <div class="buttons is-right">
                  <a class="button is-link" hx-boost="true"
                    href="/availabillity/edit/{{ availabillity.id }}">Bearbeiten</a>
                  <button class="button is-danger" hx-delete="/availabillity/delete/{{ availabillity.id }}"
                    hx-target="closest tr" hx-swap="delete">Löschen</button>
                </div>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}

    </div>
  </section>
</div>
{% endblock %}