clean ui for logbook

This commit is contained in:
2023-07-26 12:56:19 +02:00
parent 97703403a8
commit 48eb1b7dc2
6 changed files with 141 additions and 126 deletions

View File

@ -0,0 +1,65 @@
{% macro new() %}
<form
action="/admin/boat/new"
method="post"
class="mt-4 bg-primary-900 rounded-md text-white px-3 pb-3 pt-2 sm:flex items-end justify-between"
>
<div class="w-full">
<h2 class="text-md font-bold mb-2 uppercase tracking-wide">
Neues Boot hinzufügen
</h2>
{{ macros::input(label="Name", name="name", type="text", required=true) }}
{{ macros::input(label="Anzahl Sitze", name="amount_seats", type="number", required=true, min=1) }}
{{ macros::input(label="Baujahr", name="year_built", type="number", min=1950, max=2050) }}
{{ macros::input(label="Bootsbauer", name="boatbuilder", type="text") }}
{{ macros::select(data=locations, label='location', select_name='location_id', selected_id=1) }}
{{ macros::select(data=users, label='users', select_name='owner', default="Vereinsboot") }}
{{ macros::checkbox(label="Steuerperson steuert nur", name="default_shipmaster_only_steering")}}
{{ macros::checkbox(label="Skull", name="skull", checked=true)}}
{{ macros::checkbox(label="Externes Boot (anderer Verein)", name="external")}}
</div>
<div class="text-right">
<input
value="Hinzufügen"
type="submit"
class="w-28 mt-2 sm:mt-0 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
/>
</div>
</form>
{% endmacro new %}
{% macro edit(boat, uuid) %}
<form
action="/admin/boat"
data-filterable="true"
method="post"
class="bg-white p-3 rounded-md flex items-end md:items-center justify-between"
>
<div class="w-full">
<input type="hidden" name="id" value="{{ boat.id }}" />
<div class="font-bold mb-1">{{ boat.name }}<br /></div>
<div class="grid md:grid-cols-3">
{{ macros::input(label='Name', name='name', type='text', value=boat.name) }}
{{ macros::input(label='Amount Seats', name='amount_seats', type='number', min=0, value=boat.amount_seats) }}
{{ macros::select(data=locations, label='location', select_name='location_id', selected_id=boat.location_id) }}
{{ macros::select(data=users, label='users', select_name='owner', selected_id=boat.owner, default="Vereinsboot") }}
{{ macros::input(label='Baujahr', name='year_built', type='number', min=1950, value=boat.year_built) }}
{{ macros::input(label='Bootsbauer', name='boatbuilder', type='text', value=boat.boatbuilder) }}
{{ macros::checkbox(label='default_shipmaster_only_steering', name='default_shipmaster_only_steering', id=uuid , checked=boat.default_shipmaster_only_steering) }}
{{ macros::checkbox(label='skull', name='skull', id=uuid , checked=boat.skull) }}
{{ macros::checkbox(label='external', name='external', id=uuid , checked=boat.external) }}
</div>
</div>
<div class="grid gap-3">
<a
href="/admin/boat/{{ boat.id }}/delete"
class="inline-block btn btn-alert"
onclick="return confirm('Wirklich löschen?');"
>
{% include "includes/delete-icon" %} Löschen
</a>
<input value="Ändern" type="submit" class="w-28 btn btn-primary" />
</div>
</form>
{% endmacro edit %}

View File

@ -0,0 +1,115 @@
{% macro new() %}
<form action="/log" method="post" id="form">
{{ macros::select(data=boats, select_name='boat_id') }}
{{ macros::select(data=coxes, select_name='shipmaster', selected_id=loggedin_user.id) }}
{{ macros::checkbox(label='shipmaster_only_steering', name='shipmaster_only_steering') }} <!-- TODO: depending on boat, deselect by default -->
Departure: <input type="datetime-local" id="datetime-dep" value="2023-07-24T08:00" name="departure" required/>
Arrival: <input type="datetime-local" id="datetime-arr" name="arrival" />
<script>
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
console.log(optional_elem);
let myInput = document.getElementById(optional_elem);
if (myInput.value === '') {
myInput.removeAttribute('name');
}
}
this.submit();
});
</script>
Destination: <input type="search" list="destinations" placeholder="Destination" name="destination" id="destination" oninput="var inputElement = document.getElementById('destination');
var dataList = document.getElementById('destinations');
var selectedValue = inputElement.value;
for (var i = 0; i < dataList.options.length; i++) {
if (dataList.options[i].value === selectedValue) {
var distance = dataList.options[i].getAttribute('distance');
console.log(distance);
document.getElementById('distance_in_km').value = distance;
break;
}
}">
<datalist id="destinations">
{% for distance in distances %}
<option value="{{ distance.0 }}" distance={{ distance.1 }} />
{% endfor %}
</datalist>
{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=0) }}
{{ macros::input(label="Kommentar", name="comments", type="text") }}
{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
<select multiple="multiple" name="rower[]">
{% for user in users %}
<option value="{{ user.id }}" onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
{% endfor %}
</select>
<input type="submit" />
<script>
const currentDate = new Date();
const localTime = new Date(currentDate.getTime() - (currentDate.getTimezoneOffset() * 60000));
const formattedDate = localTime.toISOString().slice(0, 16);
// Set the formatted string as the value of the input field
document.getElementById("datetime-dep").value = formattedDate;
</script>
</form>
{% endmacro new %}
{% macro show(log, state) %}
Bootsname: {{ log.boat.name }}<br />
Schiffsführer: {{ log.shipmaster_user.name }}<br />
{% if log.shipmaster_only_steering %}
Schiffsführer steuert nur
{% endif %}
Weggefahren: {{ log.departure }}<br />
{% if state == "completed" %}
Angekommen: {{ log.arrival}}<br />
{% endif %}
Ziel: {{ log.destination }}<br />
{% if state == "completed" %}
Km: {{ log.distance_in_km }}<br />
{% endif %}
Kommentare: {{ log.comments }}<br />
Logtype: {{ log.logtype }}<br />
Ruderer:
{% set amount_rowers = log.rowers | length %}
{% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
{{ amount_guests }} Gäste (ohne Account)
{% for rower in log.rowers %}
{{ rower.name }}
{% endfor %}
{% if log.shipmaster == loggedin_user.id and state == "on_water" %}
{{ log::home(log=log) }}
{% endif %}
{% endmacro show %}
{% macro home(log) %}
<form action="/log/{{log.id}}" method="post">
Destination: <input type="search" list="destinations" placeholder="Destination" 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++) {
if (dataList.options[i].value === selectedValue) {
var distance = dataList.options[i].getAttribute('distance');
document.getElementById('distance_in_km_home').value = distance;
break;
}
}">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km) }}
{{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
{{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
<select multiple="multiple" name="rower[]">
{% for user in users %}
{% set_global selected = false %}
{% for rower in log.rowers %}
{% if rower.id == user.id %}
{% set_global selected = true %}
{% endif %}
{% endfor %}
<option value="{{ user.id }}" {% if selected %}selected{% endif %} onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
{% endfor %}
</select>
<input type="submit" value="AUSFAHRT BEENDEN"/>
</form>
{% endmacro home %}