web

commit 26e259726f7d13da8ef95412181f0ec099e3b28e
parent 6747d64d323d523a565dde06e3e2e79f0a4a7e40
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Mon,  9 Dec 2024 02:06:26 +0000

Add `/farm/land/edit` page basis. Edit components, routes.

Diffstat:
M
src/lib/components/map_point_display.svelte
 | 
3
++-
M
src/routes/(app)/farm/land/+page.svelte
 | 
14
+++++---------
A
src/routes/(app)/farm/land/view/+page.svelte
 | 
90
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 97 insertions(+), 10 deletions(-)
diff --git a/src/lib/components/map_point_display.svelte b/src/lib/components/map_point_display.svelte
@@ -7,12 +7,13 @@
 
     export let basis: {
         point: GeolocationCoordinatesPoint;
+        zoom?: number;
     };
 </script>
 
 <MapLibre
     center={basis.point}
-    zoom={4}
+    zoom={basis.zoom || 4}
     class={`h-full w-full`}
     style={cfg.map.styles.base[$app_thc]}
     attributionControl={false}
diff --git a/src/routes/(app)/farm/land/+page.svelte b/src/routes/(app)/farm/land/+page.svelte
@@ -36,10 +36,8 @@
             const location_gcss = await db.location_gcs_get({
                 list: [`all`],
             });
-            if (`err` in location_gcss) {
-                app_notify.set(`${$ls(`error.client.page.load`)}`);
-                return;
-            }
+            if (`err` in location_gcss)
+                return void app_notify.set(`${$ls(`error.client.page.load`)}`);
             return {
                 location_gcss: location_gcss.results,
             } satisfies LoadData;
@@ -47,10 +45,6 @@
             await catch_err(e, `load_data`);
         }
     };
-
-    $: {
-        console.log(JSON.stringify(ld, null, 4), `ld`);
-    }
 </script>
 
 <LayoutView>
@@ -71,7 +65,9 @@
             {/if}
         </div>
     </PageHeader>
-    <div class={`flex flex-col w-full px-4 gap-4 justify-start items-center`}>
+    <div
+        class={`flex flex-col w-full pt-2 px-4 gap-5 justify-start items-center`}
+    >
         {#if ld && ld.location_gcss.length}
             {#each ld.location_gcss.filter((i) => i.kind === `farm_land`) as li}
                 <button
diff --git a/src/routes/(app)/farm/land/view/+page.svelte b/src/routes/(app)/farm/land/view/+page.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { db } from "$lib/client";
+    import MapPointDisplay from "$lib/components/map_point_display.svelte";
+    import type { LocationGcs } from "@radroots/models";
+    import {
+        app_notify,
+        ButtonGlyphSimple,
+        catch_err,
+        LayoutView,
+        ls,
+        NavToolbar,
+        PageHeader,
+        qp_id,
+    } from "@radroots/svelte-lib";
+    import { onMount } from "svelte";
+
+    type LoadData = {
+        location_gcs: LocationGcs;
+    };
+    let ld: LoadData | undefined = undefined;
+
+    onMount(async () => {
+        try {
+            if (!$qp_id) app_notify.set(`${$ls(`error.client.page.load`)}`);
+            ld = await load_data();
+        } catch (e) {
+        } finally {
+        }
+    });
+
+    const load_data = async (): Promise<LoadData | undefined> => {
+        try {
+            const location_gcs = await db.location_gcs_get_one({ id: $qp_id });
+            if (`err` in location_gcs)
+                return void app_notify.set(`${$ls(`error.client.page.load`)}`);
+            return {
+                location_gcs: location_gcs.result,
+            } satisfies LoadData;
+        } catch (e) {
+            await catch_err(e, `load_data`);
+        }
+    };
+</script>
+
+<LayoutView>
+    <NavToolbar />
+    <PageHeader
+        basis={{
+            label: [
+                `${$ls(`common.farm_land`)}`,
+                {
+                    route: `/farm/land`,
+                },
+            ],
+        }}
+    >
+        <div slot="option" class={`flex flex-row justify-start items-center`}>
+            <ButtonGlyphSimple
+                basis={{
+                    label: `${$ls(`common.edit`)}`,
+                    callback: async () => {
+                        alert(`@todo!`);
+                    },
+                }}
+            />
+        </div>
+    </PageHeader>
+    {#if ld?.location_gcs}
+        <div class={`flex flex-col w-full px-4 justify-center items-center`}>
+            <div
+                class={`flex flex-row h-[20rem] w-full justify-center items-center bg-layer-2-surface round-44 overflow-hidden`}
+            >
+                <MapPointDisplay
+                    basis={{
+                        zoom: 12,
+                        point: {
+                            lat: ld.location_gcs.lat,
+                            lng: ld.location_gcs.lng,
+                        },
+                    }}
+                />
+            </div>
+            <div class={`flex flex-col w-full justify-center items-center`}>
+                <div class={`flex flex-row w-full justify-start items-center`}>
+                    <p class={`font-sans font-[400] text-layer-0-glyph`}>hi</p>
+                </div>
+            </div>
+        </div>
+    {/if}
+</LayoutView>