philipp/hacky-ruadat
1
0
Fork 0
forked from Ruderverein-Donau-Linz/rowt
Code Issues Pull Requests Actions Activity

[TASK] add multiselct js

Browse Source
This commit is contained in:
Marie Birner
2023-07-30 18:07:44 +02:00
parent 354e267a3a
commit 80e57dfe12
2 changed files with 248 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,6 +71,8 @@
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();
@ -100,6 +102,7 @@
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() {
@ -224,9 +227,9 @@
{% macro home(log, only_ones) %}
<form class="grid grid-cols-1 gap-3" action="/log/{{log.id}}" method="post">
{% if not only_ones %}
{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
{% endif %}
<div>
<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');
@ -241,8 +244,6 @@
</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) }}
@ -257,23 +258,26 @@
{% macro rower_select(id, selected, amount_seats='', class='') %}
<select multiple="multiple" name="rower[]" id="{{id}}" onclick="updateSelectedRowersCount{{id}}()" onblur="updateSelectedRowersCount{{id}}()" class="{{ class }}">
{% for user in users %}
{% set_global sel = false %}
{% for rower in selected %}
{% if rower.id == user.id %}
{% set_global sel = true %}
{% endif %}
<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 %}
<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>
</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>