Skip to content

Commit

Permalink
fix(templates): improve table rendering and fix semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
@zyv
zyv committed Nov 4, 2023
1 parent a75ab36 commit 68b641e
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 70 deletions.
26 changes: 13 additions & 13 deletions logbook/templates/logbook/aircraft_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ <h1>Aircraft</h1>
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th rowspan="2" class="align-middle">Currency</th>
<th rowspan="2" class="align-middle">Registration</th>
<th rowspan="2" class="align-middle">Designator</th>
<th rowspan="2" class="align-middle">Model</th>
<th rowspan="2" class="align-middle">
<th scope="col" rowspan="2" class="align-middle">Currency</th>
<th scope="col" rowspan="2" class="align-middle">Registration</th>
<th scope="col" rowspan="2" class="align-middle">Designator</th>
<th scope="col" rowspan="2" class="align-middle">Model</th>
<th scope="col" rowspan="2" class="align-middle">
<abbr title="{{ aircraft_fields.demonstrated_crosswind.verbose_name|capfirst }}">💨</abbr>
</th>
<th colspan="6" class="align-middle text-center">Speeds</th>
<th scope="colgroup" colspan="6" class="align-middle text-center">Speeds</th>
</tr>
<tr>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_r only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_y only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_bg only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_app only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_ref only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_s only %}</th>
<th>{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_c only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_r only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_y only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_bg only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_app only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_ref only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_s only %}</th>
<th scope="col">{% include "logbook/speed_description_item.html" with speed=aircraft_fields.v_c only %}</th>
</tr>
</thead>
<tbody>
Expand Down
2 changes: 2 additions & 0 deletions logbook/templates/logbook/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
padding-bottom: 1rem;
}
</style>

{% block extra_head %}{% endblock %}
</head>

<body>
Expand Down
12 changes: 6 additions & 6 deletions logbook/templates/logbook/certificate_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ <h1>Certificates</h1>
<table class="table table-sm table-hover">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Issue Date</th>
<th>Valid Until</th>
<th>Issuing Authority</th>
<th>Remarks</th>
<th scope="col">Name</th>
<th scope="col">Number</th>
<th scope="col">Issue Date</th>
<th scope="col">Valid Until</th>
<th scope="col">Issuing Authority</th>
<th scope="col">Remarks</th>
</tr>
</thead>
<tbody>
Expand Down
91 changes: 54 additions & 37 deletions logbook/templates/logbook/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,78 @@
{% load django_bootstrap5 %}
{% load logbook_utils %}

{% block extra_head %}
<style>
.table-currency {
max-width: 15rem;
}

.table-statistics {
max-width: 50rem;
}

.table-totals {
max-width: 50rem;
}
</style>
{% endblock %}

{% block content %}
<h1>Dashboard</h1>

{% bootstrap_messages %}

<h2>Currency status</h2>

<table class="table w-25">
<caption>Passenger currency</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Day</th>
<th scope="col">Night</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">SEP</th>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.sep.day %}</td>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.sep.night %}</td>
</tr>
<tr>
<th scope="row">TMG</th>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.tmg.day %}</td>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.tmg.night %}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-bordered text-center table-currency">
<caption>Passenger currency</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Day</th>
<th scope="col">Night</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">SEP</th>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.sep.day %}</td>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.sep.night %}</td>
</tr>
<tr>
<th scope="row">TMG</th>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.tmg.day %}</td>
<td>{% include "logbook/currency_status.html" with currency=passenger_currency.tmg.night %}</td>
</tr>
</tbody>
</table>
</div>

<h2>Statistics</h2>

<div class="table-responsive">
<table class="table table-striped table-sm table-hover text-center">
<table class="table table-striped table-sm table-hover table-bordered text-center table-statistics">
<thead>
<tr>
<th rowspan="2">Class</th>
<th rowspan="2" scope="col" class="align-middle">Class</th>
{% for label in period_labels %}
<th colspan="2">{{ label }}</th>
<th colspan="2" scope="colgroup">{{ label }}</th>
{% endfor %}
</tr>
<tr>
{% for label in period_labels %}
<th><abbr title="Time">⏱️</abbr></th>
<th><abbr title="Landings">🛬</abbr></th>
<th scope="col"><abbr title="Time">⏱️</abbr></th>
<th scope="col"><abbr title="Landings">🛬</abbr></th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for aircraft_type, type_totals in totals_per_type.items %}
<tr>
<th>{{ aircraft_type }}</th>
<th scope="row">{{ aircraft_type }}</th>
{% for totals in type_totals.per_period %}
<td>
<abbr title="{% include "logbook/per_function_item.html" with items=totals.per_function.items only %}">{{ totals.grand.time | duration:"%{h}h %{m}m" }}</abbr>
<abbr title="{% include "logbook/per_function_item.html" with items=totals.per_function.items only %}">{{ totals.grand.time | duration }}</abbr>
</td>
<td>
<abbr title="{% include "logbook/per_function_item.html" with items=totals.per_function.items landings=True only %}">{{ totals.grand.landings }}</abbr>
Expand All @@ -71,12 +88,12 @@ <h2>Statistics</h2>
<h2>Totals</h2>

<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<table class="table table-striped table-sm table-hover table-totals">
<thead>
<tr>
<th>Type / Registration</th>
<th class="text-end"><abbr title="Total Time">⏱️</abbr></th>
<th class="text-end"><abbr title="Total Landings">🛬</abbr></th>
<th scope="col">Type / Registration</th>
<th scope="col" class="text-end"><abbr title="Total Time">⏱️</abbr></th>
<th scope="col" class="text-end"><abbr title="Total Landings">🛬</abbr></th>
</tr>
</thead>
<tbody>
Expand All @@ -85,7 +102,7 @@ <h2>Totals</h2>
<th>{{ aircraft_type.value }}</th>
<th class="text-end">
<abbr title="{% include "logbook/per_function_item.html" with items=type_totals.per_function.items only %}">
{{ type_totals.grand.time | duration:"%{h}h %{m}m" }}
{{ type_totals.grand.time | duration }}
</abbr>
</th>
<th class="text-end">
Expand All @@ -104,7 +121,7 @@ <h2>Totals</h2>
</td>
<td class="text-end">
<abbr title="{% include "logbook/per_function_item.html" with items=aircraft_per_function.items only %}">
{{ aircraft_totals.time | duration:"%{h}h %{m}m" }}
{{ aircraft_totals.time | duration }}
</abbr>
</td>
<td class="text-end">
Expand All @@ -117,7 +134,7 @@ <h2>Totals</h2>
{% endfor %}
<tr>
<th>Grand Total</th>
<th class="text-end">{{ grand_total.time | duration:"%{h}h %{m}m" }}</th>
<th class="text-end">{{ grand_total.time | duration }}</th>
<th class="text-end">{{ grand_total.landings }}</th>
</tr>
</tbody>
Expand Down
10 changes: 5 additions & 5 deletions logbook/templates/logbook/experience.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th>Time function</th>
<th class="text-end">Required</th>
<th class="text-end">Accrued</th>
<th class="text-end">Remaining</th>
<th class="text-end">Status</th>
<th scope="col">Time function</th>
<th scope="col" class="text-end">Required</th>
<th scope="col" class="text-end">Accrued</th>
<th scope="col" class="text-end">Remaining</th>
<th scope="col" class="text-end">Status</th>
</tr>
</thead>
<tbody>
Expand Down
14 changes: 7 additions & 7 deletions logbook/templates/logbook/logentry_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ <h1>Log entries</h1>
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th>Year: {{ object_list.0.departure_time | date:"Y" }}<br>Day / Month</th>
<th>Type<br>Registration</th>
<th>From<br>To</th>
<th>Departure<br>Arrival</th>
<th scope="col">Year: {{ object_list.0.departure_time | date:"Y" }}<br>Day / Month</th>
<th scope="col">Type<br>Registration</th>
<th scope="col">From<br>To</th>
<th scope="col">Departure<br>Arrival</th>
{% for aircraft_type in AircraftType reversed %}
<th class="text-center">{{ aircraft_type }}</th>
{% endfor %}
<th class="text-center">Landings</th>
<th>Name</th>
<th scope="col" class="text-center">Landings</th>
<th scope="col">Name</th>
{% for function_type in FunctionType %}
<th class="text-center">{{ function_type }}</th>
{% endfor %}
<th>Remarks</th>
<th scope="col">Remarks</th>
</tr>
</thead>
<tbody>
Expand Down
2 changes: 1 addition & 1 deletion logbook/templates/logbook/per_function_item.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% spaceless %}
{% load logbook_utils %}

{% for key, value in items %}{{ key }}: {% if landings %}{{ value.landings }}{% else %}{{ value.time | duration:"%{h}h %{m}m" }}{% endif %}{% if not forloop.last %} | {% endif %}{% endfor %}
{% for key, value in items %}{{ key }}: {% if landings %}{{ value.landings }}{% else %}{{ value.time | duration }}{% endif %}{% if not forloop.last %} | {% endif %}{% endfor %}
{% endspaceless %}
2 changes: 1 addition & 1 deletion logbook/templatetags/logbook_utils.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class DurationTemplate(Template):


@register.filter
def duration(value: datetime.timedelta, format_specification: str = "%H:%M:%S"):
def duration(value: datetime.timedelta, format_specification: str = "%{h}h %{m}m"):
duration_template = DurationTemplate(format_specification)

days, remainder = divmod(value.total_seconds(), 24 * 60 * 60)
Expand Down

0 comments on commit 68b641e

Please sign in to comment.