beautifies summit log table

2024-12-02 01:22:50 +01:00
parent 197b2677ec
commit 5bd8c7b610
5 changed files with 92 additions and 43 deletions
--- 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">
+            {#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}
+            {#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>
--- 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,15 +37,23 @@
        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">
+<tr class="text-sm">
+    {#if showPhotos}
        <td>
            {#if imgSrc.length}
                <PhotoGallery
@@ -57,7 +68,7 @@
                    {#each imgSrc as img, i}
                        <img
                            class="absolute h-full rounded-xl object-cover"
-                        style="top: {6 * i}px; right: {6 *
+                            style="top: {4 * i}px; right: {4 *
                                i}px; transform: rotate(-{i * 5}deg)"
                            src={img}
                            alt="waypoint"
@@ -66,6 +77,7 @@
                </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}
+    {#if showDescription}
        <td>
            {#if log.text}
-            <button on:click={openText} class="btn-icon"
-                ><i class="fa-regular fa-message"></i></button
+                <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>
--- 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}
--- 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)
            }
--- 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>