From 5bd8c7b610f6addc12fb3a87a629338ac6947359 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Mon, 2 Dec 2024 01:22:50 +0100
Subject: [PATCH] beautifies summit log table

---
 .../summit_log/summit_log_table.svelte        |  24 ++++-
 .../summit_log/summit_log_table_row.svelte    | 101 ++++++++++++------
 .../components/trail/trail_info_panel.svelte  |   2 +
 .../style-switcher-control.ts                 |   6 +-
 web/src/routes/profile/[id]/+page.svelte      |   2 +-
 5 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/web/src/lib/components/summit_log/summit_log_table.svelte b/web/src/lib/components/summit_log/summit_log_table.svelte
index ad680143..2b146695 100644
--- a/web/src/lib/components/summit_log/summit_log_table.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table.svelte
@@ -14,6 +14,8 @@
     export let showCategory: boolean = false;
     export let showTrail: boolean = false;
     export let showAuthor: boolean = false;
+    export let showRoute: boolean = false;
+    export let showPhotos: boolean = false;
 
     let openMapModal: () => void;
     let closeMapModal: () => void;
@@ -50,9 +52,11 @@
 </script>
 
 <table class="w-full">
-    <thead>
+    <thead class="text-left text-gray-500">
         <tr class="text-sm">
-            <th class="w-24"></th>
+            {#if showPhotos}
+                <th class="w-24"></th>
+            {/if}
             <th>{$_("date")}</th>
             <th>{$_("distance")}</th>
             <th>{$_("elevation-gain")}</th>
@@ -68,12 +72,19 @@
                     {$_("trail", { values: { n: 1 } })}
                 </th>
             {/if}
-            <th>{$_("description")}</th>
+            {#if summitLogs.some((l) => l.text?.length)}
+                <th>{$_("description")}</th>
+            {/if}
             {#if showAuthor}
                 <th>
                     {$_("author", { values: { n: 1 } })}
                 </th>
             {/if}
+            {#if showRoute && summitLogs.some((l) => l.gpx)}
+                <th>
+                    {$_("map")}
+                </th>
+            {/if}
         </tr>
     </thead>
     <tbody>
@@ -85,6 +96,9 @@
                 {showCategory}
                 {showTrail}
                 {showAuthor}
+                {showPhotos}
+                showDescription={summitLogs.some(l => l.text?.length)}
+                showRoute={showRoute && summitLogs.some((l) => l.gpx)}
             ></SummitLogTableRow>
         {/each}
     </tbody>
@@ -101,7 +115,7 @@
 >
     <div slot="content" id="summit-log-table-map" class="h-[32rem]">
         {#if trail}
-            <MapWithElevationMaplibre trails={[trail]} bind:map
+            <MapWithElevationMaplibre trails={[trail]} bind:map showTerrain
             ></MapWithElevationMaplibre>
         {/if}
     </div>
@@ -118,6 +132,6 @@
 
 <style>
     th {
-        padding: 0rem 0.75rem;
+        padding: 0rem 0.5rem;
     }
 </style>
diff --git a/web/src/lib/components/summit_log/summit_log_table_row.svelte b/web/src/lib/components/summit_log/summit_log_table_row.svelte
index 919b4a06..6bdfed64 100644
--- a/web/src/lib/components/summit_log/summit_log_table_row.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table_row.svelte
@@ -14,7 +14,10 @@
     export let log: SummitLog;
     export let showCategory: boolean = false;
     export let showTrail: boolean = false;
+    export let showRoute: boolean = false;
     export let showAuthor: boolean = false;
+    export let showDescription: boolean = false;
+    export let showPhotos: boolean = false;
 
     let openGallery: (idx?: number) => void;
 
@@ -34,38 +37,47 @@
         dispatch("text", log);
     }
 
+    function openRoute() {
+        dispatch("open", log);
+    }
+
     function colCount() {
-        return [showCategory, showTrail, showAuthor].reduce(
-            (b, v) => (v ? b + 1 : b),
-            7,
-        );
+        return [
+            showCategory,
+            showTrail,
+            showAuthor,
+            showRoute,
+            showDescription,
+        ].reduce((b, v) => (v ? b + 1 : b), 7);
     }
 </script>
 
-<tr class="text-center">
-    <td>
-        {#if imgSrc.length}
-            <PhotoGallery
-                photos={log.photos.map((p) => getFileURL(log, p))}
-                bind:open={openGallery}
-            ></PhotoGallery>
-            <button
-                class="relative w-16 aspect-square ml-2 mb-3 shrink-0"
-                type="button"
-                on:click={() => openGallery()}
-            >
-                {#each imgSrc as img, i}
-                    <img
-                        class="absolute h-full rounded-xl object-cover"
-                        style="top: {6 * i}px; right: {6 *
-                            i}px; transform: rotate(-{i * 5}deg)"
-                        src={img}
-                        alt="waypoint"
-                    />
-                {/each}
-            </button>
-        {/if}
-    </td>
+<tr class="text-sm">
+    {#if showPhotos}
+        <td>
+            {#if imgSrc.length}
+                <PhotoGallery
+                    photos={log.photos.map((p) => getFileURL(log, p))}
+                    bind:open={openGallery}
+                ></PhotoGallery>
+                <button
+                    class="relative w-16 aspect-square ml-2 mb-3 shrink-0"
+                    type="button"
+                    on:click={() => openGallery()}
+                >
+                    {#each imgSrc as img, i}
+                        <img
+                            class="absolute h-full rounded-xl object-cover"
+                            style="top: {4 * i}px; right: {4 *
+                                i}px; transform: rotate(-{i * 5}deg)"
+                            src={img}
+                            alt="waypoint"
+                        />
+                    {/each}
+                </button>
+            {/if}
+        </td>
+    {/if}
     <td class:py-4={!log.expand?.gpx_data}
         >{new Date(log.date).toLocaleDateString(undefined, {
             month: "2-digit",
@@ -105,13 +117,19 @@
             >
         </td>
     {/if}
-    <td>
-        {#if log.text}
-            <button on:click={openText} class="btn-icon"
-                ><i class="fa-regular fa-message"></i></button
-            >
-        {/if}
-    </td>
+    {#if showDescription}
+        <td>
+            {#if log.text}
+                <button on:click={openText}
+                    ><p
+                        class="rounded-full bg-menu-item-background-hover hover:bg-menu-item-background-focus text-ellipsis max-w-28 whitespace-nowrap overflow-hidden px-3 py-1"
+                    >
+                        {log.text}
+                    </p></button
+                >
+            {/if}
+        </td>
+    {/if}
     {#if showAuthor && log.expand.author}
         <td>
             <p
@@ -132,7 +150,20 @@
             </p>
         </td>
     {/if}
+    {#if showRoute && log.expand.gpx_data}
+        <td>
+            <button on:click={openRoute} class="btn-icon">
+                <i class="fa fa-map-location-dot px-[3px] text-xl"></i></button
+            >
+        </td>
+    {/if}
 </tr>
 <tr>
     <td colspan={colCount()}> <hr class="border-input-border" /> </td>
 </tr>
+
+<style>
+    td {
+        padding: 0rem 0.5rem;
+    }
+</style>
\ No newline at end of file
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 93574ae5..b1c25319 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -315,6 +315,8 @@
                     <SummitLogTable
                         summitLogs={trail.expand.summit_logs}
                         showAuthor
+                        showRoute
+                        showPhotos
                     ></SummitLogTable>
                 </div>
             {/if}
diff --git a/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts b/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts
index 75206818..b25889fe 100644
--- a/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts
+++ b/web/src/lib/vendor/maplibre-style-switcher/style-switcher-control.ts
@@ -41,7 +41,9 @@ export class StyleSwitcherControl implements IControl {
 
         this.buttonContainer.classList.add(
             "maplibregl-ctrl",
-            "maplibregl-ctrl-group"
+            "maplibregl-ctrl-group",
+            "relative",
+            "z-10"
         );
         this.toggleButton = document.createElement("button");
         this.buttonContainer.appendChild(this.toggleButton);
@@ -86,7 +88,7 @@ export class StyleSwitcherControl implements IControl {
                 const styleIconContainer = document.createElement("i");
                 styleIconContainer.classList.add("w-12", "h-12", "rounded-md", "bg-blue-200", "flex", "items-center", "justify-center")
                 const styleIcon = document.createElement("i");
-                styleIcon.classList.add("fa", "fa-map-location-dot", "text-xl")
+                styleIcon.classList.add("fa", "fa-map-location-dot", "text-xl", "text-black")
                 styleIconContainer.appendChild(styleIcon)
                 styleLi.appendChild(styleIconContainer)
             }
diff --git a/web/src/routes/profile/[id]/+page.svelte b/web/src/routes/profile/[id]/+page.svelte
index 658f102d..c5fcd869 100644
--- a/web/src/routes/profile/[id]/+page.svelte
+++ b/web/src/routes/profile/[id]/+page.svelte
@@ -421,7 +421,7 @@
             ><i class="fa fa-table mr-3"></i>{$_("all-activities")}</span
         >
         <div class=" overflow-x-auto">
-            <SummitLogTable summitLogs={$summitLogs} showCategory showTrail
+            <SummitLogTable summitLogs={$summitLogs} showCategory showTrail showRoute
             ></SummitLogTable>
         </div>
     </div>