Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] refactor steering checkbox

Browse Source
This commit is contained in:
Marie Birner 2023-09-28 16:07:52 +02:00
parent c6fa27f046
commit 509a1b2c56
3 changed files with 53 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/main.ts
View File

@ -49,10 +49,10 @@ function selectBoatChange() {
)[0]; )[0];
const rowers = Number(originalOption.dataset.amount_seats) - 1; const rowers = Number(originalOption.dataset.amount_seats) - 1;
const isShipmasterSteering = originalOption.dataset.default_shipmaster_only_steering;
setMaxAmountRowers(rowers);
setMaxAmountRowers(rowers,isShipmasterSteering);
return opt; return opt;
} }
} }
@ -91,7 +91,7 @@ function reloadPage() {
}); });
} }
function setMaxAmountRowers(rowers: number){ function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
let curSelection = choiceObjects['newrower'].getValue(true); let curSelection = choiceObjects['newrower'].getValue(true);
let amount_to_delete = (<any>curSelection).length - rowers; let amount_to_delete = (<any>curSelection).length - rowers;
if (amount_to_delete > 0){ if (amount_to_delete > 0){
@ -102,14 +102,24 @@ function setMaxAmountRowers(rowers: number){
} }
choiceObjects['newrower'].config.maxItemCount = rowers; choiceObjects['newrower'].config.maxItemCount = rowers;
const only_steering = <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
if (rowers === 0) { if (rowers === 0) {
choiceObjects['newrower'].disable() choiceObjects['newrower'].disable()
only_steering.disabled = true;
}else{ }else{
choiceObjects['newrower'].enable() choiceObjects['newrower'].enable()
only_steering.disabled = false;
} }
let only_steering = <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
if(only_steering) {
if(isShipmasterSteering == 'true') {
only_steering.removeAttribute('disabled');
only_steering.setAttribute('checked', 'true');
only_steering.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
} else {
only_steering.setAttribute('disabled', 'disabled');
only_steering.removeAttribute('checked');
only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
}
}
} }
function initBoatActions() { function initBoatActions() {
@ -119,20 +129,21 @@ function initBoatActions() {
select.addEventListener('click', function() { select.addEventListener('click', function() {
if(select.dataset.seats) { if(select.dataset.seats) {
const rowers = Number(select.dataset.seats) - 1; const rowers = Number(select.dataset.seats) - 1;
const isShipmasterSteering = select.dataset.default_shipmaster_only_steering;
setMaxAmountRowers(rowers); setMaxAmountRowers(rowers, isShipmasterSteering);
if (select.dataset.id) { if (select.dataset.id) {
choiceObjects['boat_id'].setChoiceByValue(select.dataset.id); choiceObjects['boat_id'].setChoiceByValue(select.dataset.id);
} }
window.scrollTo(0, 0); window.scrollTo(0, 0);
const inputElement = document.getElementById("departure") as HTMLInputElement; const inputElement = document.getElementById("departure") as HTMLInputElement;
const now = new Date(); const now = new Date();
const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`; const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
inputElement.value = formattedDateTime; inputElement.value = formattedDateTime;
} }
}); });
}); });

33
templates/includes/forms/log.html.tera
View File

@ -13,7 +13,7 @@
<strong>{{ amount_seats }}x</strong> <strong>{{ amount_seats }}x</strong>
</div> </div>
{% for boat in grouped_boats %} {% for boat in grouped_boats %}
<div id="boat-{{ boat.id }}" class="px-3 boats-js" {% if boat.damage != 'locked' %} data-seats="{{boat.amount_seats}}" data-onclick="true" {% endif %} data-id="{{ boat.id }}"> <div id="boat-{{ boat.id }}" class="px-3 boats-js" {% if boat.damage != 'locked' %} data-seats="{{boat.amount_seats}}" data-default_shipmaster_only_steering="{{boat.default_shipmaster_only_steering}}" data-onclick="true" {% endif %} data-id="{{ boat.id }}">
<span class="status-damage status-damage-{{ boat.damage }}"></span> <span class="status-damage status-damage-{{ boat.damage }}"></span>
<span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }} <span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}
{% if boat.owner %} {% if boat.owner %}
@ -28,11 +28,11 @@
{# Shows the form for creating a new logbook entry. #} {# Shows the form for creating a new logbook entry. #}
{% macro new(only_ones, allow_any_shipmaster, shipmaster) %} {% macro new(only_ones, allow_any_shipmaster, shipmaster) %}
<form action="/log" method="post" id="form" class="grid grid-cols-2 gap-3" onsubmit="Array.from(this.elements).forEach(e=>!e.value.trim()&&(e.disabled=true));"> <form action="/log" method="post" id="form" class="grid grid-cols-4 gap-3" onsubmit="Array.from(this.elements).forEach(e=>!e.value.trim()&&(e.disabled=true));">
{{ log::boat_select(only_ones=only_ones) }} {{ log::boat_select(only_ones=only_ones) }}
{% if allow_any_shipmaster %} {% if allow_any_shipmaster %}
<div> <div class="col-span-4 md:col-span-3">
<label for="shipmaster" class=" text-sm 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"> <select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
@ -60,17 +60,22 @@
<input type="hidden" name="shipmaster" value="{{shipmaster}}"/> <input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
{% endif %} {% endif %}
{% if not only_ones %} {% if not only_ones %}
{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering') }} <div class="col-span-4 md:col-span-1">
<div class="text-sm text-gray-600">Bootssteuerung</div>
<div class="h-10 flex items-center">
{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
</div>
</div>
{% endif %} {% endif %}
{% if not only_ones %} {% if not only_ones %}
{{ log::rower_select(id="newrower", selected=[], class="col-span-2", init=true) }} {{ log::rower_select(id="newrower", selected=[], class="col-span-4", init=true) }}
{% endif %} {% endif %}
{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true) }} {{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, wrapper_class='col-span-2') }}
{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }} {{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', wrapper_class='col-span-2') }}
<div class="relative"> <div class="relative col-span-2">
<label for="destination" class="text-sm 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"/> <input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" data-relation="distance_in_km"/>
@ -81,26 +86,26 @@
</datalist> </datalist>
</div> </div>
<div class="relative"> <div class="relative col-span-2">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }} {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }}
<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> <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> </div>
{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-2") }} {{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-4") }}
{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-2") }} {{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto"/> <input type="submit" value="Ausfahrt eintragen" class="btn btn-primary w-full col-span-4 m-auto"/>
</form> </form>
{% endmacro new %} {% endmacro new %}
{% macro boat_select(only_ones) %} {% macro boat_select(only_ones) %}
{% if not only_ones %} {% if not only_ones %}
{{ macros::select(label="Boot", data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-2") }} {{ macros::select(label="Boot", data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
{% else %} {% else %}
{% set ones = boats | filter(attribute="amount_seats", value=1) %} {% set ones = boats | filter(attribute="amount_seats", value=1) %}
{{ macros::select(label="Boot", data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-2") }} {{ macros::select(label="Boot", data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
{% endif %} {% endif %}
{% endmacro boat_select %} {% endmacro boat_select %}

4
templates/includes/macros.html.tera
View File

@ -67,9 +67,9 @@
</div> </div>
{% endmacro input %} {% endmacro input %}
{% macro checkbox(label, name, id='', checked=false, class='') %} {% macro checkbox(label, name, id='', checked=false, class='', disabled=false) %}
<label for="{{ name }}{{ id }}" class="flex items-center cursor-pointer hover:text-gray-900 {{ class }}"> <label for="{{ name }}{{ id }}" class="flex items-center cursor-pointer hover:text-gray-900 {{ class }}">
<input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}" {% if checked %} checked {% endif %} class="h-4 w-4 accent-primary-600 mr-2"/> <input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}" {% if checked %} checked {% endif %} {% if disabled %} disabled {% endif %} class="h-4 w-4 accent-primary-600 mr-2"/>
{{ label }} {{ label }}
</label> </label>
{% endmacro checkbox %} {% endmacro checkbox %}