[TASK] improve log and stats look & feel
This commit is contained in:
Marie Birner
parent
3923ba9f8b
commit
617b747942
@ -16,7 +16,7 @@
|
||||
<div class="grid md:grid-cols-3">
|
||||
<div>
|
||||
<label for="name" class="sr-only">Name</label>
|
||||
<input type="text" name="name" class="relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Name"/>
|
||||
<input type="text" name="name" class="relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Name"/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label for="is_guest" class="flex items-center cursor-pointer hover:text-gray-100"><input type="checkbox" id="is_guest" name="is_guest" class="h-4 w-4 accent-gray-200 mr-2" checked="true"/>
|
||||
@ -32,7 +32,7 @@
|
||||
<!-- START filterBar -->
|
||||
<div class="bg-primary-200 p-3 mt-4 rounded-t-md">
|
||||
<label for="name" class="sr-only">Suche</label>
|
||||
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/>
|
||||
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/>
|
||||
</div>
|
||||
<!-- END filterBar -->
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
{% if allow_any_shipmaster %}
|
||||
<div>
|
||||
<label for="shipmaster" class=" small text-gray-600 ">Schiffsführer</label>
|
||||
<label for="shipmaster" class=" text-sm text-gray-600 ">Schiffsführer</label>
|
||||
|
||||
<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
|
||||
<optgroup label="Steuerleute">
|
||||
@ -71,7 +71,7 @@
|
||||
{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}
|
||||
|
||||
<div class="relative">
|
||||
<label for="destination" class="small text-gray-600">Ziel</label>
|
||||
<label for="destination" class="text-sm text-gray-600">Ziel</label>
|
||||
|
||||
<input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" data-relation="distance_in_km"/>
|
||||
<datalist id="destinations">
|
||||
@ -89,7 +89,7 @@
|
||||
{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-2") }}
|
||||
|
||||
<div class="col-span-2">
|
||||
<label for="logtype" class=" small text-gray-600 ">Typ</label>
|
||||
<label for="logtype" class=" text-sm text-gray-600 ">Typ</label>
|
||||
{{ macros::select(data=logtypes, name='logtype', default="Normal") }}
|
||||
</div>
|
||||
<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto"/>
|
||||
@ -99,7 +99,7 @@
|
||||
|
||||
{% macro boat_select(only_ones) %}
|
||||
<div class="col-span-2">
|
||||
<label for="boat_id" class=" small text-gray-600 ">Boot</label>
|
||||
<label for="boat_id" class=" text-sm text-gray-600 ">Boot</label>
|
||||
{% if not only_ones %}
|
||||
{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
|
||||
{% else %}
|
||||
@ -112,7 +112,7 @@
|
||||
{% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
|
||||
{% if not amount_seats or amount_seats > 1 %}
|
||||
<div class="{{ class }}">
|
||||
<label for="{{id}}" class="small text-gray-600 ">Ruderer</label>
|
||||
<label for="{{id}}" class="text-sm text-gray-600 ">Ruderer</label>
|
||||
<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
|
||||
{% for user in users %}
|
||||
{% set_global sel = false %}
|
||||
@ -192,7 +192,14 @@
|
||||
<div class="border-t bg-white px-3 py-1" data-filterable="true" data-filter="{{ log.boat.name }} {{ log.shipmaster_user.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}">
|
||||
<div>
|
||||
<strong>{{ log.boat.name }}</strong> <small class="text-gray-600">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuert {% endif %})</small>
|
||||
<small class="block text-gray-600">{{ log.departure | date(format='%d.%m.%Y - %H:%M') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y - %H:%M') }}{% endif %}</small>
|
||||
<small class="block text-gray-600">
|
||||
|
||||
{% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %}
|
||||
{{ log.departure | date(format='%d.%m.%Y')}} ({{ log.departure | date(format='%H:%M')}} - {{ log.arrival | date(format='%H:%M')}})
|
||||
{% else %}
|
||||
{{ log.departure | date(format='%d.%m.%Y (%H:%M)') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y (%H:%M)') }}{% endif %}
|
||||
{% endif %}
|
||||
</small>
|
||||
{% set amount_rowers = log.rowers | length %}
|
||||
{% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
|
||||
{% if allowed_to_close and state == "on_water" %}
|
||||
@ -203,21 +210,21 @@
|
||||
{% if state == "completed" %}
|
||||
<small class="text-gray-600">({{ log.distance_in_km }} km)</small>
|
||||
{% endif %}
|
||||
|
||||
{% if log.comments %}
|
||||
<span class="text-sm italic">- "{{ log.comments }}"</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if amount_guests > 0 or log.rowers | length > 0 %}
|
||||
Ruderer:
|
||||
{% endif %}
|
||||
{% if amount_guests > 0 %}
|
||||
{{ amount_guests }}
|
||||
Gäste (ohne Account),
|
||||
{% endif %}
|
||||
{% for rower in log.rowers %}
|
||||
{{ rower.name }},
|
||||
{% endfor %}
|
||||
{% if log.comments %}
|
||||
<div>
|
||||
Kommentare:
|
||||
{{ log.comments }}
|
||||
<div class="text-sm text-gray-600">
|
||||
Mitruderer:
|
||||
{% for rower in log.rowers %}
|
||||
{{ rower.name }}{% if not loop.last or amount_guests > 0 %}, {% endif %}
|
||||
{% endfor %}
|
||||
{% if amount_guests > 0 %}
|
||||
{{ amount_guests }}
|
||||
Gäste (ohne Account)
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if log.logtype %}
|
||||
@ -244,7 +251,7 @@
|
||||
{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
|
||||
{% endif %}
|
||||
<div class="relative">
|
||||
<label for="destination" class="small text-gray-600">Ziel</label>
|
||||
<label for="destination" class="text-sm text-gray-600">Ziel</label>
|
||||
|
||||
<input class="input rounded-md set-distance-js change-id-js" type="search" list="destinations" placeholder="Destination" required="required" id="destination{{ log.id }}" name="destination" value="{{log.destination}}" data-relation="distance_in_km{{log.id}}"/>
|
||||
</div>
|
||||
@ -257,7 +264,7 @@
|
||||
{{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}
|
||||
|
||||
<div>
|
||||
<label for="logtype" class=" small text-gray-600 ">Typ</label>
|
||||
<label for="logtype" class="text-sm text-gray-600 ">Typ</label>
|
||||
{{ macros::select(data=logtypes, name="logtype", id="logtype" ~ log.id, default="Normal", selected_id=log.logtype, class="rounded-md change-id-js") }}
|
||||
</div>
|
||||
<input class="btn btn-primary" type="submit" value="Ausfahrt beenden"/>
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
{% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='') %}
|
||||
<div class="{{wrapper_class}}">
|
||||
<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} small text-gray-600 {% endif %}">{{ label }}</label>
|
||||
<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 {% endif %}">{{ label }}</label>
|
||||
<input {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} value="{{ value }}" class="input {{ class }}" placeholder="{% if hide_label %}{{ label }}{% endif %}" {% if min is defined %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
|
||||
</div>
|
||||
{% endmacro input %}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="mt-3">
|
||||
<div class="bg-gray-200 p-3 mt-4 rounded-t-md">
|
||||
<label for="name" class="sr-only">Suche</label>
|
||||
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsname oder Ruderer...">
|
||||
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsname oder Ruderer...">
|
||||
</div>
|
||||
|
||||
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>
|
||||
|
||||
@ -7,16 +7,32 @@
|
||||
|
||||
<div class="max-w-screen-lg w-full">
|
||||
<h1 class="h1">Statistik</h1>
|
||||
<ol class="mt-3 border-r border-l">
|
||||
<div class="bg-gray-200 p-3 mt-4 rounded-t-md">
|
||||
<label for="name" class="sr-only">Suche</label>
|
||||
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen...">
|
||||
</div>
|
||||
|
||||
<div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>
|
||||
|
||||
<div class="border-r border-l">
|
||||
{% set_global km = 0 %}
|
||||
{% set_global index = 1 %}
|
||||
{% for s in stat %}
|
||||
<li class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between px-3 py-1">
|
||||
<span>{% if km != s.rowed_km %}{{loop.index}}{% else %} - {% endif %}</span>
|
||||
<span>{{s.name}}</span>
|
||||
<div class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}">
|
||||
<span class="text-sm text-gray-600 w-10">
|
||||
{% if km != s.rowed_km %}
|
||||
{{loop.index}}
|
||||
{% set_global index = loop.index %}
|
||||
{% else %}
|
||||
{{ index }}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="grow">{{s.name}}</span>
|
||||
<span>{{s.rowed_km}} km</span>
|
||||
|
||||
{% set_global km = s.rowed_km %}
|
||||
</li>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content%}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user