Merge pull request 'reservations' (#335) from reservations into staging

Reviewed-on: #335

frontend/main.ts

@@ -139,9 +139,8 @@ function selectBoatChange() {
 	
         const event = e as ChoiceBoatEvent;
         boat_reserved_today = event.detail.customProperties.boat_reserved_today;
-	console.log(event.detail.customProperties);
 	if (boat_reserved_today){
-		alert(event.detail.label+' wurde heute reserviert. Bitte kontrolliere, dass du die Reservierung nicht störst.');
+		alert(event.detail.label.trim()+' wurde heute reserviert. Bitte kontrolliere, dass du die Reservierung nicht störst.');
 	}
         boat_in_ottensheim = event.detail.customProperties.boat_in_ottensheim;
 

staging-diff.sql

@@ -1,11 +0,0 @@
-CREATE TABLE IF NOT EXISTS "boat_reservation" (
-	"id" integer NOT NULL PRIMARY KEY AUTOINCREMENT,
-	"boat_id" INTEGER NOT NULL REFERENCES boat(id), 
-	"start_date" DATE NOT NULL,
-	"end_date" DATE NOT NULL,
-	"time_desc" TEXT NOT NULL,
-	"usage" TEXT NOT NULL,
-	"user_id_applicant" INTEGER NOT NULL REFERENCES user(id), 
-	"user_id_confirmation" INTEGER REFERENCES user(id), 
-	"created_at" datetime not null default CURRENT_TIMESTAMP
-);

templates/boatreservations.html.tera

@@ -42,22 +42,37 @@
         <div id="filter-result-js" class="search-result"></div>
         {% for reservation in boatreservations %}
             <div data-filterable="true"
-                 data-filter="TODO: ADD FILTER"
+                 data-filter="{{ reservation.user_applicant.name }} {{ reservation.boat.name }}"
                  class="w-full border-t bg-white dark:bg-primary-900 text-black dark:text-white p-3">
                 <div class="w-full">
-                    Boot: {{ reservation.boat.name }}
+                    <strong>Boot:</strong>
+                    {{ reservation.boat.name }}
                     <br />
-                    Datum: {{ reservation.start_date }}
-                    {% if reservation.end_date != reservation.start_date %}- {{ reservation.end_date }}{% endif %}
+                    <strong>Reservierung:</strong>
+                    {{ reservation.user_applicant.name }}
                     <br />
-                    Uhrzeit: {{ reservation.time_desc }}
+                    <strong>Datum:</strong>
+                    {{ reservation.start_date }}
+                    {% if reservation.end_date != reservation.start_date %}
+                        -
+                        {{ reservation.end_date }}
+                    {% endif %}
                     <br />
-                    Zweck: {{ reservation.usage }}
+                    <strong>Uhrzeit:</strong>
+                    {{ reservation.time_desc }}
                     <br />
-                    Reserviert von {{ reservation.user_applicant.name }}
+                    <strong>Zweck:</strong>
+                    {{ reservation.usage }}
                     {% if loggedin_user %}
                         {% if loggedin_user.id == reservation.user_applicant.id or "admin" in loggedin_user.roles %}
-                            <a href="/boatreservation/{{ reservation.id }}/delete">RESERVIERUNG LÖSCHEN</a>
+                            <div class="mt-3 text-right">
+                                <a href="/boatreservation/{{ reservation.id }}/delete"
+                                   class="w-28 btn btn-alert"
+                                   onclick="return confirm('Willst du diese Reservierung wirklich löschen?');">
+                                    {% include "includes/delete-icon" %}
+                                    Löschen
+                                </a>
+                            </div>
                         {% endif %}
                     {% endif %}
                 </div>

templates/includes/forms/log.html.tera

@@ -104,6 +104,7 @@
                         <strong class="block text-primary-900 dark:text-white">
                             {{ log.departure | date(format="%H:%M") }}
                             Uhr
+                            <small>({{ log.departure | date(format="%d.%m.%Y") }})</small>
                         </strong>
                         <a href="#"
                            data-sidebar="true"
@@ -149,7 +150,8 @@
                         {% set amount_rowers = log.rowers | length %}
                         {% set amount_guests = log.boat.amount_seats - amount_rowers %}
                         {% if amount_guests > 0 %}
-                            Gäste <small class="text-gray-600">(ohne Account)</small>:
+                            Gäste
+                            <small class="text-gray-600">(ohne Account)</small>:
                             {{ amount_guests }}
                         {% endif %}
                         {% if allowed_to_close and state == "on_water" %}
@@ -182,18 +184,23 @@
             </div>
         {% endif %}
         <div {% if log.logtype %}class="mt-4 sm:mt-0"{% endif %}>
-            <strong class="text-black dark:text-white">{{ log.boat.name }}</strong> <small class="text-gray-600 dark:text-gray-100">({{ log.shipmaster_user.name -}}
+            <strong class="text-black dark:text-white">{{ log.boat.name }}</strong>
+            <small class="text-gray-600 dark:text-gray-100">({{ log.shipmaster_user.name -}}
                 {% if log.shipmaster_only_steering %}
                     - handgesteuert
                 {% endif -%}
             )</small>
             <small class="block text-gray-600 dark:text-gray-100">
                 {% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %}
-                    {{ log.departure | date(format='%d.%m.%Y') }} ({{ log.departure | date(format='%H:%M') }} - {{ log.arrival | date(format='%H:%M') }})
+                    {{ log.departure | date(format='%d.%m.%Y') }}
+                    ({{ log.departure | date(format='%H:%M') }}
+                    -
+                    {{ log.arrival | date(format='%H:%M') }})
                 {% else %}
                     {{ log.departure | date(format='%d.%m.%Y (%H:%M)') }}
                     {% if state == "completed" %}
-                        - {{ log.arrival | date(format='%d.%m.%Y (%H:%M)') }}
+                        -
+                        {{ log.arrival | date(format='%d.%m.%Y (%H:%M)') }}
                     {% endif %}
                 {% endif %}
             </small>
@@ -205,7 +212,8 @@
                 <div class="text-black dark:text-white">
                     {{ log.destination }}
                     {% if state == "completed" %}
-                        <small class="text-gray-600 dark:text-gray-100">({{ log.distance_in_km }} km)</small>
+                        <small class="text-gray-600 dark:text-gray-100">({{ log.distance_in_km }}
+                        km)</small>
                     {% endif %}
                     {% if log.comments %}<span class="text-sm italic">- "{{ log.comments }}"</span>{% endif %}
                 </div>
@@ -217,7 +225,9 @@
                             {% if not loop.last or amount_guests > 0 and log.boat.name != 'Externes Boot' %},{% endif %}
                         {% endfor %}
                         {% if amount_guests > 0 and log.boat.name != 'Externes Boot' %}
-                            Gäste <small class="text-gray-600 dark:text-gray-100">(ohne Account)</small>: {{ amount_guests }}
+                            Gäste
+                            <small class="text-gray-600 dark:text-gray-100">(ohne Account)</small>:
+                            {{ amount_guests }}
                         {% endif %}
                     </div>
                 {% endif %}

templates/includes/macros.html.tera

@@ -1,18 +1,25 @@
 {% macro boatreservation() %}
     {% if reservations %}
-        <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow grid gap-3"
-             style="margin-top: 10px">
-            <h2 class="h2">Bootsreservierungen</h2>
-            <div class="p2 text-center" style="margin-bottom: 10px;">
-                <ul style=" justify-content: space-around; padding: 0; list-style: none">
+        <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2 mt-3">
+            <h2 class="h2">Reservierungen ({{ reservations | length }})</h2>
+            <div class="grid grid-cols-1 gap-3 mb-3 w-full">
                 {% for reservation in reservations %}
-                        <li>
-                            {{ reservation.boat.name }} &bullet; {{ reservation.start_date }}
-                            {% if reservation.end_date != reservation.start_date %}- {{ reservation.end_date }}{% endif %}
-                            &bullet; Uhrzeit: {{ reservation.time_desc }} &bullet; Zweck: {{ reservation.usage }}
-                        </li>
+                    <div class="pt-2 px-3 border-t text-primary-900 dark:text-white">
+                        <strong class="block">
+                            {{ reservation.start_date | date(format="%d.%m.%Y") }}
+                            {% if reservation.end_date != reservation.start_date %}
+                                -
+                                {{ reservation.end_date | date(format="%d.%m.%Y") }}
+                            {% endif %}
+                            <small>({{ reservation.time_desc }})</small>
+                        </strong>
+                        <span class="block">
+                            {{ reservation.boat.name }}
+                            <small>({{ reservation.user_applicant.name }})</small>
+                        </span>
+                        <span class="text-sm italic">{{ reservation.usage }}</span>
+                    </div>
                 {% endfor %}
-                </ul>
             </div>
         </div>
     {% endif %}
@@ -75,6 +82,8 @@
                             {% endif %}
                             <a href="/boatdamage"
                                class="block w-100 py-2 hover:text-primary-600 border-t">Bootsschaden</a>
+                            <a href="/boatreservation"
+                               class="block w-100 py-2 hover:text-primary-600 border-t">Bootsreservierung</a>
                         </div>
                     </div>
                 {% endif %}

templates/index.html.tera

@@ -54,19 +54,6 @@
                     </div>
                 </details>
             </div>
-            {% if loggedin_user.weight and loggedin_user.sex and loggedin_user.dob %}
-                <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
-                     role="alert">
-                    <h2 class="h2">Ergo</h2>
-                    <div class="p-3">
-                        <ul class="list-none ms-2">
-                            <li class="py-1">
-                                <a href="/ergo" class="block w-100 py-2 hover:text-primary-600">Ergo</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            {% endif %}
             {% if "Donau Linz" in loggedin_user.roles and "Unterstützend" not in loggedin_user.roles and "Förderndes Mitglied" not in loggedin_user.roles %}
                 <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                      role="alert">
@@ -166,6 +153,19 @@
                     </ul>
                 </div>
             {% endif %}
+            {% if loggedin_user.weight and loggedin_user.sex and loggedin_user.dob %}
+                <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
+                     role="alert">
+                    <h2 class="h2">Ergo</h2>
+                    <div class="p-3">
+                        <ul class="list-none ms-2">
+                            <li class="py-1">
+                                <a href="/ergo" class="block w-100 py-2 hover:text-primary-600">Ergo</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            {% endif %}
             <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Allgemein</h2>

templates/kiosk.html.tera

@@ -9,16 +9,18 @@
                 {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
             </div>
         {% endif %}
-        {{ macros::boatreservation() }}
-        <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
+        <div class="w-full grid lg:grid-cols-5 gap-3 mt-5">
+            <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
+            </div>
             <div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
                 <h2 class="h2">Neue Ausfahrt</h2>
                 <div class="p-3">{{ log::new(only_ones=false, shipmaster=-1) }}</div>
             </div>
+            <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md shadow">
                     <h2 class="h2">Am Wasser</h2>
                     <div>
@@ -31,6 +33,8 @@
                         {% endif %}
                     </div>
                 </div>
+                {{ macros::boatreservation() }}
+            </div>
         </div>
     </div>
     <script src="/public/logbook.js"></script>

templates/log.html.tera

@@ -4,17 +4,19 @@
 {% block content %}
     <div class="w-full">
         <h1 class="h1">Logbuch</h1>
-        {{ macros::boatreservation() }}
-        <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
+        <div class="w-full grid lg:grid-cols-5 gap-3 mt-5">
+            <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
+            </div>
             <div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
                 <h2 class="h2">Neue Ausfahrt</h2>
                 <div class="p-3">{{ log::new(shipmaster=loggedin_user.id) }}</div>
             </div>
-            <div class="bg-white dark:bg-primary-900 rounded-md shadow">
+            <div>
+                <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">
                     <h2 class="h2">Am Wasser</h2>
                     {% if on_water | length > 0 %}
                         {% for log in on_water %}
@@ -30,6 +32,8 @@
                         <p class="p-3 text-center text-black dark:text-white">Kein Boot am Wasser</p>
                     {% endif %}
                 </div>
+                {{ macros::boatreservation() }}
+            </div>
         </div>
     </div>
     <script src="/public/logbook.js"></script>