[TASK] streamline form

This commit is contained in:
Marie Birner 2023-09-27 14:46:34 +02:00
parent b6a91f1017
commit 0e143381cf
3 changed files with 56 additions and 58 deletions

View File

@ -17,8 +17,15 @@ document.addEventListener('DOMContentLoaded', function() {
selectBoatChange();
addRelationMagic(<HTMLElement>document.querySelector('body'));
reloadPage();
setCurrentdate(<HTMLInputElement>document.querySelector('#departure'));
});
function setCurrentdate(input: HTMLInputElement) {
if(input) {
input.value = (new Date().toJSON().slice(0,19));
}
}
function selectBoatChange() {
const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
@ -77,7 +84,7 @@ function reloadPage() {
if(!isPageActive){
document.title = attentionMessage;
}else {
} else {
document.title = pageTitle;
location.reload();
}

View File

@ -47,14 +47,12 @@ select {
.choices[data-type*=select-one] {
cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
display: block;
width: 100%;
padding: 10px;
border-bottom: 1px solid #ddd;
@apply border-0 ring-1 ring-inset ring-gray-300;
background-color: #fff;
margin: 0;
}
@ -95,7 +93,7 @@ select {
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333 transparent;
@apply border-0 ring-1 ring-inset ring-gray-300;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
@ -137,24 +135,16 @@ select {
}
.choices__inner {
display: inline-block;
vertical-align: top;
width: 100%;
padding: 7.5px 7.5px 3.75px;
border: 1px solid #ddd;
border-radius: 2.5px;
font-size: 14px;
min-height: 44px;
overflow: hidden;
@apply input rounded-md;
}
.is-focused .choices__inner, .is-open .choices__inner {
border-color: #b7b7b7;
@apply border-0 ring-1 ring-inset ring-gray-300;
}
.is-open .choices__inner {
border-radius: 2.5px 2.5px 0 0;
border-radius: 0;
}
.is-flipped.is-open .choices__inner {
border-radius: 0 0 2.5px 2.5px;
border-radius: 0;
}
.choices__list {
@ -164,7 +154,6 @@ select {
}
.choices__list--single {
display: inline-block;
padding: 4px 16px 4px 4px;
width: 100%;
}
[dir=rtl] .choices__list--single {
@ -182,11 +171,10 @@ select {
display: inline-block;
vertical-align: middle;
@apply rounded-md bg-primary-600;
padding: 4px 10px;
padding: 0px 10px;
font-size: 12px;
font-weight: 500;
margin-right: 3.75px;
margin-bottom: 3.75px;
color: #fff;
word-break: break-all;
box-sizing: border-box;
@ -199,12 +187,10 @@ select {
margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: #00a5bb;
border: 1px solid #008fa1;
@apply bg-primary-900;
}
.is-disabled .choices__list--multiple .choices__item {
background-color: #aaaaaa;
border: 1px solid #919191;
@apply bg-gray-600;
}
.choices__list--dropdown, .choices__list[aria-expanded] {
@ -213,7 +199,7 @@ select {
position: absolute;
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
@apply border;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
@ -226,7 +212,7 @@ select {
visibility: visible;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
border-color: #b7b7b7;
@apply border-0 ring-1 ring-inset ring-gray-300;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
top: auto;
@ -274,7 +260,7 @@ select {
}
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: #f2f2f2;
@apply bg-gray-100;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
@ -299,8 +285,7 @@ select {
font-weight: 600;
font-size: 12px;
padding: 10px;
border-bottom: 1px solid #f7f7f7;
color: gray;
@apply text-gray-400
}
.choices__button {
@ -321,11 +306,9 @@ select {
display: inline-block;
vertical-align: baseline;
font-size: 14px;
margin-bottom: 5px;
border: 0;
border-radius: 0;
max-width: 100%;
padding: 4px 0 4px 2px;
}
.choices__input:focus {
outline: 0;

View File

@ -32,26 +32,30 @@
{{ 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.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>
<label for="shipmaster" class=" small 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>
{% else %}
<input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
{% endif %}
@ -94,17 +98,21 @@
{% macro boat_select(only_ones) %}
{% if not only_ones %}
{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{% else %}
{% set ones = boats | filter(attribute="amount_seats", value=1) %}
{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{% endif %}
<div class="col-span-2">
<label for="boat_id" class=" small text-gray-600 ">Boot</label>
{% if not only_ones %}
{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{% else %}
{% set ones = boats | filter(attribute="amount_seats", value=1) %}
{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
{% endif %}
</div>
{% endmacro boat_select %}
{% 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="small 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 %}