do proper things in ui @ new log
This commit is contained in:
@@ -62,20 +62,8 @@ function selectBoatChange() {
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
|
||||
choiceObjects[boatSelect.id] = boatChoice;
|
||||
}
|
||||
|
||||
const shipmasterSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
|
||||
if(shipmasterSelect) {
|
||||
const shipmasterChoice = new Choices(shipmasterSelect, {
|
||||
loadingText: 'Wird geladen...',
|
||||
noResultsText: 'Keine Ergebnisse gefunden',
|
||||
noChoicesText: 'Keine Ergebnisse gefunden',
|
||||
itemSelectText: 'Zum Auswählen klicken',
|
||||
});
|
||||
|
||||
choiceObjects[shipmasterSelect.id] = shipmasterChoice;
|
||||
choiceObjects[boatSelect.id] = boatChoice;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,6 +168,16 @@ function initChoices() {
|
||||
}
|
||||
}
|
||||
|
||||
interface ChoiceEvent extends Event{
|
||||
detail: {
|
||||
value: string;
|
||||
label: string,
|
||||
customProperties: {
|
||||
is_cox: boolean,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function initNewChoice(select: HTMLInputElement) {
|
||||
const choice = new Choices(select, {
|
||||
removeItemButton: true,
|
||||
@@ -194,9 +192,50 @@ function initNewChoice(select: HTMLInputElement) {
|
||||
},
|
||||
});
|
||||
|
||||
select.addEventListener('addItem', function(e) {
|
||||
const event = e as ChoiceEvent;
|
||||
const user_id = event.detail.value;
|
||||
const name = event.detail.label;
|
||||
|
||||
if (event.detail.customProperties.is_cox) {
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
|
||||
if (coxSelect){
|
||||
coxSelect.add(new Option(name, user_id));
|
||||
}
|
||||
}
|
||||
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
|
||||
if (steeringSelect) {
|
||||
steeringSelect.add(new Option(name, user_id));
|
||||
}
|
||||
},false);
|
||||
|
||||
select.addEventListener('removeItem', function(e) {
|
||||
const event = e as ChoiceEvent;
|
||||
|
||||
const user_id = event.detail.value;
|
||||
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
|
||||
if (coxSelect) {
|
||||
for (var i=0; i<coxSelect.length; i++) {
|
||||
if (coxSelect.options[i].value == user_id)
|
||||
coxSelect.remove(i);
|
||||
}
|
||||
}
|
||||
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
|
||||
if (steeringSelect) {
|
||||
for (var i=0; i<steeringSelect.length; i++) {
|
||||
if (steeringSelect.options[i].value == user_id)
|
||||
steeringSelect.remove(i);
|
||||
}
|
||||
}
|
||||
},false);
|
||||
|
||||
choiceObjects[select.id] = choice;
|
||||
}
|
||||
|
||||
|
||||
function initToggle() {
|
||||
// get filter btns & set object sessionStorage
|
||||
const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
|
||||
|
||||
@@ -30,67 +30,35 @@
|
||||
{% macro new(only_ones, shipmaster) %}
|
||||
<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) }}
|
||||
|
||||
<div class="col-span-4 md:col-span-3">
|
||||
<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">
|
||||
{% for cox in coxes %}
|
||||
<option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }}
|
||||
{% if cox.on_water %}
|
||||
(am Wasser)
|
||||
{% endif %}
|
||||
</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 %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }}
|
||||
{% if user.on_water %}
|
||||
(am Wasser)
|
||||
{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
{% if not only_ones %}
|
||||
<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>
|
||||
<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 %}
|
||||
|
||||
{% if not only_ones %}
|
||||
{{ log::rower_select(id="newrower", selected=[], class="col-span-4", init=true) }}
|
||||
{% endif %}
|
||||
|
||||
{{ macros::select(label="Schiffsführer", data=[], name='cox', wrapper_class="col-span-2") }}
|
||||
{{ macros::select(label="Steuerperson", data=[], name='steering_person', wrapper_class="col-span-2") }}
|
||||
{{ 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', wrapper_class='col-span-2') }}
|
||||
|
||||
<div class="relative col-span-2">
|
||||
<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">
|
||||
{% for distance in distances %}
|
||||
<option value="{{ distance.0 }}" distance={{ distance.1 }} />
|
||||
{% for distance in distances %}<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<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") }}
|
||||
<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-4") }}
|
||||
|
||||
{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
|
||||
|
||||
<input type="submit" value="Ausfahrt eintragen" class="btn btn-primary w-full col-span-4 m-auto"/>
|
||||
</form>
|
||||
{% endmacro new %}
|
||||
@@ -108,7 +76,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="text-sm 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 %}
|
||||
@@ -117,7 +85,7 @@
|
||||
{% set_global sel = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<option value="{{ user.id }}" {% if sel %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>
|
||||
<option value="{{ user.id }}" {% if sel %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %} data-custom-properties='{"is_cox": {{ user.is_cox }}}'>
|
||||
{{user.name}}
|
||||
{% if user.on_water %}
|
||||
(am Wasser)
|
||||
|
||||
Reference in New Issue
Block a user