[WIP] styling logbook page

This commit is contained in:
Marie Birner
2023-07-30 16:59:20 +02:00
parent e4376c29b4
commit 8de9568684
5 changed files with 113 additions and 33 deletions

View File

@ -4,12 +4,12 @@
{% if allow_any_shipmaster %}
<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
<optgroup label="Steuerpersonen">
<optgroup label="Steuerleute">
{% for cox in coxes %}
<option value="{{ cox.id }}" {% if cox.id == shipmaster%} selected {% endif %}>{{ cox.name }}</option>
{% endfor %}
</optgroup>
<optgroup label="Restliche Mitglieder">
<optgroup label="Mitglieder">
{% for user in users | filter(attribute="is_cox", value=false) %}
<option value="{{ user.id }}" {% if user.id == shipmaster%} selected {% endif %}>{{ user.name }}</option>
{% endfor %}
@ -26,6 +26,8 @@
{{ log::rower_select(id="newrower", selected=[], class="col-span-2") }}
{% endif %}
<div></div>
{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true) }}
{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}
@ -108,10 +110,10 @@
{% macro boat_select(only_ones) %}
{% if not only_ones %}
{{ macros::select(data=boats, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2 md:hidden") }}
{{ macros::select(data=boats, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
{% else %}
{% set ones = boats | filter(attribute="amount_seats", value=1) %}
{{ macros::select(data=ones, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="md:hidden") }}
{{ macros::select(data=ones, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
{% endif %}
<script>
function updateElementsBasedOnSelectedOption() {
@ -128,6 +130,60 @@
{% endmacro boat_select %}
{% macro show(log, state, allowed_to_close=false, only_ones) %}
<div class="grid grid-cols-1 gap-3 mb-3 w-full">
<div class="pt-2 px-3 {% if not loop.first %} border-t {% endif %}">
<div class="w-full">
<div class="flex justify-between">
<div>
<strong class="text-primary-900">
xx:xx Uhr
</strong>
<small class="text-gray-600">({{ log.boat.name }})</small>
</div>
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
Details
</a>
</div>
<div>
{% if allowed_to_close and state == "on_water" %}
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
Beenden
</a>
{% endif %}
</div>
<div class="hidden">
{% if allowed_to_close and state == "on_water" %}
<div id="close{{ log.id }}">
{{ log::home(log=log, only_ones=only_ones) }}
</div>
{% endif %}
<div id="log{{ log.id }}">
{% if log.destination %}
{{ log.destination }}
{% endif %}
{% for cox in coxes %}
{% if cox.id == log.shipmaster %}
<p>
<strong>{{ cox.name }}</strong>
</p>
{% endif %}
{% endfor %}
{% for rower in log.rowers %}
<p>{{ rower.name }}</p>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endmacro show %}
{% macro show_old(log, state, allowed_to_close=false, only_ones) %}
Bootsname: {{ log.boat.name }}<br />
Schiffsführer: {{ log.shipmaster_user.name }}<br />
{% if log.shipmaster_only_steering %}
@ -162,11 +218,16 @@
{{ rower.name }}
{% endfor %}
{% endif %}
{% endmacro show %}
{% endmacro show_old %}
{% macro home(log, only_ones) %}
<form action="/log/{{log.id}}" method="post">
Destination: <input type="search" list="destinations" placeholder="Destination" required="required", id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
<form class="grid grid-cols-1 gap-3" action="/log/{{log.id}}" method="post">
{% if not only_ones %}
{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
{% endif %}
<div>
<label for="destination" class="small text-gray-600">Ziel</label>
<input class="input rounded-md" type="search" list="destinations" placeholder="Destination" required="required", id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
var dataList = document.getElementById('destinations');
var selectedValue = inputElement.value;
for (var i = 0; i < dataList.options.length; i++) {
@ -176,13 +237,15 @@
break;
}
}">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
{{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
{{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
{% if not only_ones %}
{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
{% endif %}
<input type="submit" value="AUSFAHRT BEENDEN"/>
</div>
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
{{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
<div>
<label for="logtype" class=" small text-gray-600 ">Typ</label>
{{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
</div>
<input class="btn btn-primary" type="submit" value="Ausfahrt beenden"/>
</form>
{% endmacro home %}
@ -205,7 +268,7 @@
}
document.addEventListener('DOMContentLoaded', updateSelectedRowersCount{{id}});
</script>
<div class="col-span-2">
<div>
<span id="{{id}}-amount_rower_selected"></span>/<span id="{{id}}-max_rower_allowed">{{amount_seats}}</span> Ruderer ausgewählt
</div>
{% endmacro rower_select %}

View File

@ -29,13 +29,14 @@
<div class="bg-white rounded-md">
<h2 class="h2">Am Wasser</h2>
<div class="p-3">
<div>
{% for log in on_water %}
{{ log::show(log=log, state="on_water", allowed_to_close=true, only_ones=false) }}
<hr />
{{ log::show(log=log, state="on_water", allowed_to_close=true, only_ones=false) }}
{% endfor %}
</div>
</div>
</div>
</div>
{% include "dynamics/sidebar" %}
{% endblock content%}

View File

@ -8,7 +8,7 @@
<div class="max-w-screen-lg w-full">
<h1 class="h1">Logbuch</h1>
{% for log in logs %}
{{ log::show(log=log, state="completed", only_ones=false) }}
{{ log::show_old(log=log, state="completed", only_ones=false) }}
<hr/>
{% endfor %}
</div>

View File

@ -8,20 +8,36 @@
{{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
{% endif %}
<div class="max-w-screen-lg w-full">
<div class="w-full">
<h1 class="h1">Logbuch</h1>
<h2>Neue Ausfahrt starten</h2>
{{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
<h2 style="font-size: 100px">Am Wasser</h2>
{% for log in on_water %}
{% if log.shipmaster == loggedin_user.id %}
{{ log::show(log=log, state="on_water", allowed_to_close=true, only_ones=loggedin_user.is_cox==false) }}
{% else %}
{{ log::show(log=log, state="on_water", only_ones=true) }}
{% endif %}
<hr/>
{% endfor %}
</div>
<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block">
<h2 class="h2">Boote</h2>
<div class="p-3">
{{ log::show_boats(only_ones=false) }}
</div>
</div>
<div class="md:col-span-3 bg-white rounded-md">
<h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3">
{{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
</div>
</div>
<div class="bg-white rounded-md">
<h2 class="h2">Am Wasser</h2>
{% for log in on_water %}
{% if log.shipmaster == loggedin_user.id %}
{{ log::show(log=log, state="on_water", allowed_to_close=true, only_ones=loggedin_user.is_cox==false) }}
{% else %}
{{ log::show(log=log, state="on_water", only_ones=true) }}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% include "dynamics/sidebar" %}
{% endblock content%}