Merge pull request 'group-reservations-in-log' (#425) from group-reservations-in-log into staging

Reviewed-on: #425

frontend/main.ts

@@ -154,8 +154,15 @@ function selectBoatChange() {
 
         if (event.detail.customProperties.owner) {
           choiceObjects["newrower"].setChoiceByValue(
-            event.detail.customProperties.owner + "",
+            event.detail.customProperties.owner.toString(),
           );
+
+          if(event.detail.value === '36') {
+              /** custom code for Etsch */
+              choiceObjects["newrower"].setChoiceByValue(
+                "81",
+              );
+          }
         }
 
         const inputElement = document.getElementById(

frontend/scss/components/_sidebar.scss

@@ -10,6 +10,7 @@
 
   &.open {
       display: block;
+      height: 100dvh;
       height: 100vh;
       right: 0;
       top: 0;

frontend/tests/log.spec.ts

@@ -15,6 +15,7 @@ test("Cox can start and cancel trip", async ({ page }, testInfo) => {
     await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
     await page.getByRole("option", { name: "Joe" }).click();
   } else {
+    await page.getByText('2x').click();
     await page.getByText("Joe", { exact: true }).click();
   }
   await page.getByPlaceholder("Ruderer auswählen").click();
@@ -55,6 +56,7 @@ test("Cox can start and finish trip", async ({ page }, testInfo) => {
     await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
     await page.getByRole("option", { name: "Joe" }).click();
   } else {
+    await page.getByText('2x').click();
     await page.getByText("Joe", { exact: true }).click();
   }
   await page.getByPlaceholder("Ruderer auswählen").click();
@@ -106,6 +108,7 @@ test("Kiosk can start and cancel trip", async ({ page }, testInfo) => {
     await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
     await page.getByRole("option", { name: "Joe" }).click();
   } else {
+    await page.getByText('2x').click();
     await page.getByText("Joe", { exact: true }).click();
   }
   await page.getByPlaceholder("Ruderer auswählen").click();
@@ -139,6 +142,7 @@ test("Kiosk can start and finish trip", async ({ page }, testInfo) => {
     await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
     await page.getByRole("option", { name: "Joe" }).click();
   } else {
+    await page.getByText('2x').click();
     await page.getByText("Joe", { exact: true }).click();
   }
   await page.getByPlaceholder("Ruderer auswählen").click();

templates/includes/forms/log.html.tera

@@ -4,13 +4,25 @@
  #}
 {% macro show_boats() %}
     {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
-        <div class="pb-2">
+        <details>
-            <div class="bg-gray-100 dark:bg-primary-600 text-primary-950 dark:text-white text-center text-sm mb-2">
+            <summary class="font-bold cursor-pointer text-primary-900 dark:text-white border-t p-3 hover:bg-gray-100 dark:hover:bg-primary-950">
-                <strong>{{ amount_seats }}x</strong>
+                <span>
-            </div>
+                    {% if grouped_boats[0].amount_seats < 9 or grouped_boats[0].amount_seats == 24 %}
+                        {{ amount_seats }}x
+                    {% elif grouped_boats[0].amount_seats == 9 %}
+                        {{ grouped_boats[0].amount_seats - 1 }}+
+                    {% else %}
+                        Vereinsfremde Boote
+                    {% endif %}
+                  </span>
+                  <small class="text-gray-500 dark:text-gray-100">
+                    ({{ grouped_boats | length }}) 
+                  </small>
+            </summary>
+            <div class="pb-3">
               {% for boat in grouped_boats | sort(attribute="name") %}
                   <div id="boat-{{ boat.id }}"
-                     class="px-3 boats-js text-black dark:text-white {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 {% endif %}"
+                      class="py-3 mx-3 boats-js text-black dark:text-white border-t {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-primary-950 {% endif %}"
                       {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" data-onclick="true" {% endif %}
                       data-id="{{ boat.id }}">
                       <span class="status-damage status-damage-{{ boat.damage }}"></span>
@@ -20,8 +32,10 @@
                   </div>
               {% endfor %}
             </div>
+          </details>
     {% endfor %}
 {% endmacro show_boats %}
+
 {# Shows the form for creating a new logbook entry. #}
 {% macro new(shipmaster) %}
     <form action="/log"

templates/kiosk.html.tera

@@ -15,11 +15,30 @@
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
+                <div class="bg-white dark:bg-primary-900 rounded-md hidden lg:block shadow mt-3">
+                    <h2 class="h2">Schnellauswahl</h2>
+                    <div>
+                      {% for boat in boats | reverse %}
+                        {% if boat.id in [42, 36] %}
+                          <div class="p-3 boats-js text-black dark:text-white border-t {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-primary-950 {% endif %}"
+                            {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" data-onclick="true" {% endif %}
+                            data-id="{{ boat.id }}">
+                              <span class="status-damage status-damage-{{ boat.damage }}"></span>
+                              <span {% if boat.damage == 'locked' or boat.on_water %}class="opacity-50"{% endif %}>{{ boat.name }}
+                                  {% if boat.owner %}<span class="opacity-50">(privat)</span>{% endif %}
+                              </span>
                           </div>
-            <div class="lg:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
+                        {% endif %}
+                      {% endfor %}
+                    </div>
+                </div>
+            </div>
+            <div class="lg:col-span-3">
+                <div class="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>
                 <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">
                     <h2 class="h2">Am Wasser</h2>

templates/log.html.tera

@@ -6,15 +6,17 @@
         <h1 class="h1">Logbuch</h1>
         <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">
+                <div class="bg-white dark:bg-primary-900 rounded-md hidden lg:block shadow">
                     <h2 class="h2">Boote</h2>
                     <div>{{ log::show_boats(only_ones=false) }}</div>
                 </div>
             </div>
-            <div class="lg:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
+            <div class="lg:col-span-3">
+              <div class="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>
             <div>
                 <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">
                     <h2 class="h2">Am Wasser</h2>