finishes profile page

2024-11-05 00:47:47 +01:00
parent bab22301af
commit 87eb879c7f
20 changed files with 541 additions and 187 deletions
--- a/web/src/lib/components/base/calendar.svelte
+++ b/web/src/lib/components/base/calendar.svelte
@@ -2,7 +2,7 @@
 	import type { SummitLog } from "$lib/models/summit_log";
 	import { createEventDispatcher } from "svelte";
 	import { isSameDay, isToday } from "../../util/date_util";
-
+	import { _ } from "svelte-i18n";
 	export let logs: SummitLog[] = [];
 	export let colorMap: Record<string, string> = {};

@@ -15,6 +15,7 @@
 			start: Date;
 			end: Date;
 		};
+		click: Date;
 	}>();

 	const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
@@ -74,9 +75,11 @@
 					i + 1 - firstDay,
 				);
 				const today = isToday(date);
+
 				const logAtDate = logs.find((l) =>
 					isSameDay(date, new Date(l.date)),
 				);
+
 				a.push({ date: date, today: today, log: logAtDate });
 			}
 		}
@@ -108,6 +111,21 @@
 			end: new Date(currentYear, currentMonth + 1, 0),
 		});
 	}
+
+	function colorKey(i: number) {
+		return $_(
+			currentMonthArray[i]?.log?.expand.trails_via_summit_logs?.at(0)
+				?.expand?.category?.name ?? "",
+		);
+	}
+
+	function handleDateClick(date?: Date) {
+		if (!date) {
+			return;
+		}
+
+		dispatch("click", date);
+	}
 </script>

 <div class="calendar-header w-full flex items-center justify-between mb-6">
@@ -134,18 +152,14 @@
 	</div>
 	<div class="grid grid-cols-7 grid-rows-6" style="aspect-ratio: 1.17/1">
 		{#each { length: 42 } as _, i}
-			<div
-				class="calendar-day flex items-center justify-center rounded-xl cursor-pointer"
+			<button
+				class="calendar-day flex items-center justify-center rounded-xl"
+				on:click={() => handleDateClick(currentMonthArray[i]?.date)}
 				class:today={currentMonthArray[i]?.today}
-				style="background-color: {colorMap[
-					currentMonthArray[
-						i
-					]?.log?.expand.trails_via_summit_logs?.at(0)?.expand
-						?.category?.name ?? ''
-				] ?? ''}"
+				style="background-color: {colorMap[colorKey(i)] ?? ''}"
 			>
 				{currentMonthArray[i]?.date?.getDate() ?? ""}
-			</div>
+			</button>
 		{/each}
 	</div>
 </div>
--- a/web/src/lib/components/base/multi_select.svelte
+++ b/web/src/lib/components/base/multi_select.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+    import type { SelectItem } from "./select.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    export let items: SelectItem[] = [];
+    export let value: SelectItem[] = [];
+    export let label: string = "";
+    export let name: string = "";
+    export let placeholder: string = "";
+
+    let showDropdown = false;
+    let dropdownRef;
+
+    const dispatch = createEventDispatcher();
+
+    function toggleItem(item: SelectItem) {
+        if (value.includes(item)) {
+            value = value.filter((i) => i !== item);
+        } else {
+            value = [...value, item];
+        }
+
+        dispatch("change", value);
+    }
+
+    function removeItem(item: SelectItem) {
+        value = value.filter((i) => i !== item);
+        dispatch("change", value);
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="relative max-w-full">
+    {#if label.length}
+        <label for={name} class="text-sm font-medium pb-1 block">
+            {label}
+        </label>
+    {/if}
+    <button
+        class="min-w-44 flex flex-wrap items-center gap-2 border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        on:click={() => (showDropdown = !showDropdown)}
+    >
+        {#if value.length === 0}
+            <span class="text-gray-400">{placeholder}</span>
+        {/if}
+        {#each value as item}
+            <div
+                class="bg-primary text-white px-2 py-1 rounded-full flex items-center gap-1"
+            >
+                <span class="text-sm">{item.text}</span>
+                <button
+                    on:click|stopPropagation={() => removeItem(item)}
+                    class="text-white hover:bg-primary-hover rounded-full w-4 h-4 flex items-center justify-center"
+                >
+                    <i class="fa fa-close"></i>
+                </button>
+            </div>
+        {/each}
+    </button>
+
+    <!-- Dropdown menu -->
+    {#if showDropdown}
+        <div
+            bind:this={dropdownRef}
+            class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg max-h-40 overflow-y-auto"
+        >
+            {#each items as item}
+                <button
+                    on:click={() => toggleItem(item)}
+                    class="px-3 py-2 hover:bg-blue-100 cursor-pointer flex justify-between items-center w-full"
+                >
+                    <span>{item.text}</span>
+                    {#if value.includes(item)}
+                        <div class="ml-auto">
+                            <i class="fa fa-check"></i>
+                        </div>
+                    {/if}
+                </button>
+            {/each}
+        </div>
+    {/if}
+</div>
--- a/web/src/lib/components/summit_log/summit_log_table.svelte
+++ b/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 {
--- a/web/src/lib/components/summit_log/summit_log_table_row.svelte
+++ b/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>
--- a/web/src/lib/components/trail/trail_filter_panel.svelte
+++ b/web/src/lib/components/trail/trail_filter_panel.svelte
@@ -243,13 +243,13 @@
            <div class="space-y-2">
                <Datepicker
                    name="startDate"
-                    label="After"
+                    label={$_('after')}
                    bind:value={filter.startDate}
                    on:change={update}
                ></Datepicker>
                <Datepicker
                    name="endDate"
-                    label="Before"
+                    label={$_('before')}
                    bind:value={filter.endDate}
                    on:change={update}
                ></Datepicker>