rowt/templates/includes/forms/log.html.tera
2023-07-30 20:02:46 +02:00

300 lines
13 KiB
Plaintext

{% macro new(only_ones, allow_any_shipmaster, shipmaster) %}
<form action="/log" method="post" id="form" class="grid grid-cols-2 gap-3">
{{ log::boat_select(only_ones=only_ones) }}
{% if allow_any_shipmaster %}
<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
<optgroup label="Steuerleute">
{% for cox in coxes %}
<option value="{{ cox.id }}" {% if cox.id == shipmaster%} selected {% endif %}>{{ cox.name }}</option>
{% endfor %}
</optgroup>
<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 %}
</optgroup>
</select>
{% else %}
<input type="hidden" name="shipmaster" value="{{shipmaster}}" />
{% endif %}
{% if not only_ones %}
{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering') }}
{% endif %}
{% if not only_ones %}
{{ 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') }}
<div>
<label for="destination" class="small text-gray-600">Ziel</label>
<input type="search" class="input rounded-md" 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');
document.getElementById('distance_in_km').value = distance;
break;
}
}">
<datalist id="destinations">
{% for distance in distances %}
<option value="{{ distance.0 }}" distance={{ distance.1 }} />
{% endfor %}
</datalist>
</div>
<div class="relative">
{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=1) }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
</div>
{{ 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>
{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
</div>
<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto" />
<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("departure").value = formattedDate;
</script>
</form>
<script src="/public/js/multiselect-dropdown.js" ></script>
<script>
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
for(let optional_elem of ["arrival", "distance_in_km", "comments", "logtype"]){
let myInput = document.getElementById(optional_elem);
if (myInput.value === '') {
myInput.removeAttribute('name');
}
}
this.submit();
});
</script>
{% endmacro new %}
{% macro show_boats(only_ones) %}
{% if only_ones %}
{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
{% endif %}
{% for boat in boats %}
{% set status = 'good' %}
{% if loop.index == 3 %}
{% set status = 'locked' %}
{% endif %}
{% if loop.index == 1 %}
{% set status = 'alert' %}
{% endif %}
<div id="boat-{{ boat.id }}" {% if status != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %}>
<span class="status status-{{ status }}"></span>
<span {% if status == 'locked' %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
</div>
{% endfor %}
<script>
function updateElementsBasedOnSelectedOption() {
var selectElement = document.getElementById('boat_id');
var selectedOption = selectElement.selectedOptions[0];
var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
document.getElementById('newrower-max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
console.log(selectElement.selectedOptions[0]);
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
});
document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
</script>
{% endmacro boats %}
{% 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") }}
{% 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="col-span-2") }}
{% endif %}
<script>
function updateElementsBasedOnSelectedOption() {
var selectElement = document.getElementById('boat_id');
var selectedOption = selectElement.selectedOptions[0];
var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
document.getElementById('newrower-max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
}
document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
</script>
{% 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 %}
Schiffsführer steuert nur
{% endif %}
Weggefahren: {{ log.departure }}<br />
{% if state == "completed" %}
Angekommen: {{ log.arrival}}<br />
{% endif %}
{% set amount_rowers = log.rowers | length %}
{% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
{% if allowed_to_close and state == "on_water" %}
{{ log::home(log=log, only_ones=only_ones) }}
{% else %}
Ziel: {{ log.destination }}<br />
{% if state == "completed" %}
Km: {{ log.distance_in_km }}<br />
{% endif %}
{% if log.comments %}
Kommentare: {{ log.comments }}<br />
{% endif %}
{% if log.logtype %}
Logtype: {{ log.logtype }}<br />
{% endif %}
{% 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 %}
{% endif %}
{% endmacro show_old %}
{% macro home(log, only_ones) %}
<form class="grid grid-cols-1 gap-3" action="/log/{{log.id}}" method="post">
{% if not only_ones %}
{% endif %}
<div class="relative">
<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++) {
if (dataList.options[i].value === selectedValue) {
var distance = dataList.options[i].getAttribute('distance');
document.getElementById('distance_in_km_home').value = distance;
break;
}
}">
</div>
<div class="relative">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
</div>
{{ 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 %}
{% macro rower_select(id, selected, amount_seats='', class='') %}
<div class="{{ class }}">
<select multiple="multiple" name="rower[]" multiselect-search="true" multiselect-max-items="8" id="{{id}}" onclick="updateSelectedRowersCount{{id}}()" onblur="updateSelectedRowersCount{{id}}()" class="w-full">
{% for user in users %}
{% set_global sel = false %}
{% for rower in selected %}
{% if rower.id == user.id %}
{% set_global sel = true %}
{% endif %}
{% endfor %}
<option value="{{ user.id }}" {% if sel %}selected{% endif %} onmousedown="event.preventDefault();this.selected = !this.selected; return false;">{{user.name}}</option>
{% endfor %}
</select>
<script>
function updateSelectedRowersCount{{id}}() {
document.getElementById('{{id}}-amount_rower_selected').textContent = document.getElementById('{{id}}').selectedOptions.length+1;
}
document.addEventListener('DOMContentLoaded', updateSelectedRowersCount{{id}});
</script>
</div>
<div>
<span id="{{id}}-amount_rower_selected"></span>/<span id="{{id}}-max_rower_allowed">{{amount_seats}}</span> Ruderer ausgewählt
</div>
{% endmacro rower_select %}