60 lines
2.8 KiB
Twig
60 lines
2.8 KiB
Twig
{#
|
|
The quick look: what to type at a door, on the phone you are holding in front of it.
|
|
|
|
One card per door with the code in force today and nothing else -- no dates, no history, no
|
|
buttons. Maintaining the codes is admin/access_codes.html.twig, which is the table this page
|
|
used to be.
|
|
|
|
The card is sized for reading, not for fitting: the code is the largest thing on the screen,
|
|
in near-black on white and in a tabular font so 1 and 7 cannot be confused. One column on a
|
|
phone, more when there is room.
|
|
#}
|
|
{% extends 'layout.html.twig' %}
|
|
|
|
{% block title %}Zugangscodes · E&P Platz{% endblock %}
|
|
|
|
{% block content %}
|
|
<a class="text-sm text-gray-500 hover:text-gray-900" href="{{ path('app_dashboard') }}">← Übersicht</a>
|
|
|
|
<div class="flex flex-wrap items-baseline justify-between gap-2 pt-2">
|
|
<div>
|
|
<h1>Zugangscodes</h1>
|
|
<p class="subline">Türen, Aufzug etc.</p>
|
|
</div>
|
|
{% if is_granted('ROLE_ADMIN') %}
|
|
<a class="button button--small button--neutral" href="{{ path('app_admin_access_code') }}">Codes verwalten</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if codes is empty %}
|
|
<p class="pt-8 text-sm text-gray-500">Zurzeit gilt kein Code.</p>
|
|
{% else %}
|
|
<div class="pt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{% for code in codes %}
|
|
<div class="flex flex-col rounded-md border border-gray-200 p-6" data-access-code>
|
|
<div class="flex items-baseline justify-between gap-2">
|
|
<span class="text-lg font-bold">{{ code.label }}</span>
|
|
{% if code.visibility.isRestricted %}
|
|
<span class="badge bg-gray-100 text-gray-600 shrink-0">{{ code.visibility.label }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if code.description %}
|
|
<p class="pt-1 text-sm text-gray-500">{{ code.description }}</p>
|
|
{% endif %}
|
|
|
|
{# mt-auto, so the code sits at the bottom of the card and the codes of a row
|
|
line up whether or not a door has a description -- grid stretches the cards
|
|
of a row to the same height, and this spends the difference above the code
|
|
rather than below it. Same device as the dashboard tiles.
|
|
|
|
tracking-widest so a long code stays readable as digits rather than as a
|
|
number, and break-all so it never overflows a narrow screen. #}
|
|
<p class="mt-auto pt-4 font-mono text-4xl font-bold tracking-widest tabular-nums break-all text-gray-900"
|
|
data-code>{{ code.code }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|