finishes profile page

web/src/lib/components/summit_log/summit_log_table.svelte

@@ -5,24 +5,28 @@
     import Modal from "../base/modal.svelte";
     import SummitLogTableRow from "./summit_log_table_row.svelte";
 
-    import type { Map } from "leaflet";
-    import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
-    import { endIcon, startIcon } from "$lib/util/leaflet_util";
-    import { _ } from "svelte-i18n";
-    import MapWithElevation from "../trail/map_with_elevation.svelte";
     import type { Trail } from "$lib/models/trail";
     import { gpx2trail } from "$lib/util/gpx_util";
+    import type { Map } from "leaflet";
+    import { _ } from "svelte-i18n";
+    import MapWithElevation from "../trail/map_with_elevation.svelte";
 
     export let summitLogs: SummitLog[];
     export let showCategory: boolean = false;
+    export let showTrail: boolean = false;
 
-    let openModal: () => void;
-    let closeModal: () => void;
+    let openMapModal: () => void;
+    let closeMapModal: () => void;
+
+    let openTextModal: () => void;
+    let closeTextModal: () => void;
 
     let map: Map;
 
     let trail: Trail | null = null;
 
+    let currentText: string = "";
+
     onMount(async () => {
         // L = (await import("leaflet")).default;
         // map = L.map("summit-log-table-map");
@@ -42,12 +46,17 @@
         trail = (await gpx2trail(log.expand.gpx_data)).trail;
         trail.expand.gpx_data = log.expand.gpx_data;
 
-        openModal();
+        openMapModal();
         await tick();
 
         map.invalidateSize();
         return;
     }
+
+    async function openText(log: SummitLog) {
+        currentText = log.text ?? "";
+        openTextModal();
+    }
 </script>
 
 <table class="w-full">
@@ -64,7 +73,12 @@
                     {$_("category")}
                 </th>
             {/if}
-            <th></th>
+            {#if showTrail}
+                <th>
+                    {$_("trail", { values: { n: 1 } })}
+                </th>
+            {/if}
+            <th>{$_("description")}</th>
         </tr>
     </thead>
     <tbody>
@@ -72,24 +86,37 @@
             <SummitLogTableRow
                 index={i}
                 {log}
-                on:open={() => openMap(log)}
+                on:open={(e) => openMap(e.detail)}
+                on:text={(e) => openText(e.detail)}
                 {showCategory}
+                {showTrail}
             ></SummitLogTableRow>
         {/each}
     </tbody>
 </table>
-
+{#if !summitLogs.length}
+    <p class="text-center w-full my-8 text-gray-500 text-sm">{$_("no-data")}</p>
+{/if}
 <Modal
-    id="summit-log-table-modal"
+    id="summit-log-table-map-modal"
     size="max-w-4xl"
     title=""
-    bind:openModal
-    bind:closeModal
+    bind:openModal={openMapModal}
+    bind:closeModal={closeMapModal}
 >
     <div slot="content" id="summit-log-table-map" class="h-[32rem]">
         <MapWithElevation {trail} bind:map></MapWithElevation>
     </div>
 </Modal>
+<Modal
+    id="summit-log-table-text-modal"
+    size="max-w-xl"
+    title={$_("description")}
+    bind:openModal={openTextModal}
+    bind:closeModal={closeTextModal}
+>
+    <p slot="content" class="whitespace-pre-wrap">{currentText}</p>
+</Modal>
 
 <style>
     th {

web/src/lib/components/summit_log/summit_log_table_row.svelte

@@ -15,11 +15,10 @@
     export let index: number;
     export let log: SummitLog;
     export let showCategory: boolean = false;
+    export let showTrail: boolean = false;
 
     let map: Map;
 
-    let showText: boolean = false;
-
     const dispatch = createEventDispatcher();
 
     onMount(async () => {
@@ -59,6 +58,20 @@
     function openMap() {
         dispatch("open", log);
     }
+
+    function openText() {
+        dispatch("text", log);
+    }
+
+    function colCount() {
+        if (showCategory && showTrail) {
+            return 9;
+        } else if (showCategory || showTrail) {
+            return 8;
+        }
+
+        return 7;
+    }
 </script>
 
 <tr class="text-center">
@@ -100,23 +113,24 @@
             )}
         </td>
     {/if}
+    {#if showTrail}
+        <td>
+            <a
+                class="btn-icon aspect-square"
+                href="/trail/view/{log.expand.trails_via_summit_logs?.at(0)
+                    ?.id ?? ''}"
+                ><i class="fa fa-arrow-up-right-from-square px-[3px]"></i></a
+            >
+        </td>
+    {/if}
     <td>
         {#if log.text}
-            <button on:click={() => (showText = !showText)} class="btn-icon"
-                ><i class="fa{showText ? '' : '-regular'} fa-message text-gray-500"
-                ></i></button
+            <button on:click={openText} class="btn-icon"
+                ><i class="fa-regular fa-message"></i></button
             >
         {/if}
     </td>
 </tr>
-{#if showText}
-    <tr
-        ><td
-            class="text-left text-sm whitespace-pre-wrap pb-4"
-            colspan={showCategory ? 8 : 7}>{log.text}</td
-        ></tr
-    >
-{/if}
 <tr>
-    <td colspan={showCategory ? 8 : 7}> <hr class="border-input-border" /> </td>
+    <td colspan={colCount()}> <hr class="border-input-border" /> </td>
 </tr>