commit c149b1e559e1e939438d4e68a3d57c4c852d5898
parent 4abf4b47bca06af05ac0ac097617e9c5108ac668
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Mon, 28 Apr 2025 18:10:41 +0000
apps-lib: add farms details view, edit farms views, features
Diffstat:
6 files changed, 305 insertions(+), 42 deletions(-)
diff --git a/apps-lib/src/lib/features/farm/farms-display-li-el.svelte b/apps-lib/src/lib/features/farm/farms-display-li-el.svelte
@@ -1,10 +1,5 @@
<script lang="ts">
- import {
- Map,
- MapMarkerArea,
- type IViewFarmsDataListItem,
- type LcGeocodeCallback,
- } from "$root";
+ import { Map, MapMarkerArea, type LcGeocodeCallback } from "$root";
import {
fmt_geolocation_address,
geol_lat_fmt,
@@ -12,6 +7,7 @@
parse_geol_point_tup,
parse_tup_geop_point,
type CallbackPromiseGeneric,
+ type FarmBasis,
type GeolocationPointTuple,
type I18nTranslateFunction,
type I18nTranslateLocale,
@@ -25,7 +21,7 @@
ls,
locale,
}: {
- basis: IViewFarmsDataListItem;
+ basis: FarmBasis;
lc_geocode: LcGeocodeCallback;
lc_handle_farm_view: CallbackPromiseGeneric<string>;
ls: I18nTranslateFunction;
@@ -36,31 +32,28 @@
let map_center: GeolocationPointTuple = $state([0, 0]);
onMount(async () => {
- if (map && basis.geolocation?.point) {
- map_center = parse_geol_point_tup(basis.geolocation.point);
- map.setCenter(map_center);
- } else {
- //@todo
- }
+ if (basis.location?.point)
+ map_center = parse_geol_point_tup(basis.location.point);
+ if (map) map.setCenter(map_center);
});
const map_geop = $derived(parse_tup_geop_point(map_center));
const farm_addr_fmt = $derived(
- basis.geolocation?.address
- ? fmt_geolocation_address(basis.geolocation.address)
+ basis.location?.address
+ ? fmt_geolocation_address(basis.location.address)
: ``,
);
const farm_geop_lat = $derived(
- basis.geolocation?.point
- ? geol_lat_fmt(basis.geolocation.point.lat, `dms`, $locale, 3)
+ basis.location?.point
+ ? geol_lat_fmt(basis.location.point.lat, `dms`, $locale, 3)
: ``,
);
const farm_geop_lng = $derived(
- basis.geolocation?.point
- ? geol_lng_fmt(basis.geolocation.point.lng, `dms`, $locale, 3)
+ basis.location?.point
+ ? geol_lng_fmt(basis.location.point.lng, `dms`, $locale, 3)
: ``,
);
</script>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -115,6 +115,7 @@ export * from "./util/styles.js"
export * from "./util/validation/farm.js"
export * from "./util/view.js"
export { default as FarmsAdd } from "./view/farms-add.svelte"
+export { default as FarmsDetails } from "./view/farms-details.svelte"
export { default as Farms } from "./view/farms.svelte"
export { default as Home } from "./view/home.svelte"
export { default as Notifications } from "./view/notifications.svelte"
diff --git a/apps-lib/src/lib/types/view/farm.ts b/apps-lib/src/lib/types/view/farm.ts
@@ -1,16 +1,10 @@
-import type { GeocoderReverseResult, GeolocationAddress, GeolocationBasis, GeolocationPoint } from "@radroots/util";
+import type { FarmBasis, GeocoderReverseResult, GeolocationAddress, GeolocationPoint } from "@radroots/util";
-export type IViewFarmsDataListItem = {
- farm: {
- id: string;
- name: string;
- };
- geolocation?: GeolocationBasis;
+export type IViewFarmsData = {
+ list: FarmBasis[];
};
-export type IViewFarmsData = {
- list: IViewFarmsDataListItem[];
-}
+export type IViewFarmsDetailsData = FarmBasis;
export type IViewFarmsProductsAddSubmission = {
product: string;
diff --git a/apps-lib/src/lib/view/farms-add.svelte b/apps-lib/src/lib/view/farms-add.svelte
@@ -15,7 +15,6 @@
focus_map_marker,
geop_init,
geop_is_valid,
- Glyph,
handle_err,
LayoutView,
PageToolbar,
@@ -169,13 +168,13 @@
<PageToolbar
basis={{
header: {
- label: `Farm / Add`,
+ label: `${$ls(`common.farms`)} / ${`${$ls(`common.add`)}`}`,
callback_route: basis.callback_route,
},
}}
>
{#snippet header_option()}
- {#if $casl_i === 0}
+ <!--{#if $casl_i === 0}
<button
class={`flex flex-row justify-center items-center`}
onclick={async () => {
@@ -195,7 +194,7 @@
}}
/>
</button>
- {/if}
+ {/if}-->
{/snippet}
</PageToolbar>
<Carousel>
diff --git a/apps-lib/src/lib/view/farms-details.svelte b/apps-lib/src/lib/view/farms-details.svelte
@@ -0,0 +1,274 @@
+<script lang="ts">
+ import {
+ ButtonSimple,
+ Empty,
+ Glyph,
+ handle_err,
+ LayoutPage,
+ LayoutView,
+ Map,
+ MapMarkerArea,
+ PageToolbar,
+ type CallbackRoute,
+ type IViewFarmsDetailsData,
+ type LcGeocodeCallback,
+ } from "$root";
+ import {
+ fmt_geolocation_address,
+ geol_lat_fmt,
+ geol_lng_fmt,
+ parse_geol_point_tup,
+ parse_tup_geop_point,
+ type CallbackPromiseGeneric,
+ type GeolocationPointTuple,
+ type I18nTranslateFunction,
+ type I18nTranslateLocale,
+ type IViewBasis,
+ } from "@radroots/util";
+ import { onDestroy, onMount } from "svelte";
+
+ let {
+ basis,
+ ls,
+ locale,
+ }: {
+ basis: IViewBasis<{
+ data: IViewFarmsDetailsData;
+ callback_route?: CallbackRoute<string>;
+ lc_geocode: LcGeocodeCallback;
+ lc_handle_farm_lot_add: CallbackPromiseGeneric<string>;
+ lc_handle_farm_products_view: CallbackPromiseGeneric<string>;
+ lc_handle_farm_orders_view: CallbackPromiseGeneric<string>;
+ }>;
+ ls: I18nTranslateFunction;
+ locale: I18nTranslateLocale;
+ } = $props();
+
+ let map: maplibregl.Map | undefined = $state(undefined);
+ let map_center: GeolocationPointTuple = $state([0, 0]);
+
+ onMount(async () => {
+ try {
+ if (basis.lc_on_mount) await basis.lc_on_mount();
+ if (basis.data?.location)
+ map_center = parse_geol_point_tup(basis.data?.location.point);
+ if (map) {
+ map.setCenter(map_center);
+ map.setZoom(11);
+ }
+ } catch (e) {
+ handle_err(e, `on_mount`);
+ }
+ });
+
+ onDestroy(async () => {
+ try {
+ if (basis.lc_on_destroy) await basis.lc_on_destroy();
+ } catch (e) {
+ handle_err(e, `on_destroy`);
+ }
+ });
+
+ const map_geop = $derived(parse_tup_geop_point(map_center));
+
+ const farm_addr_fmt = $derived(
+ basis.data?.location?.address
+ ? fmt_geolocation_address(basis.data?.location.address)
+ : ``,
+ );
+
+ const farm_geop_lat = $derived(
+ basis.data?.location?.point
+ ? geol_lat_fmt(basis.data?.location.point.lat, `dms`, $locale, 3)
+ : ``,
+ );
+
+ const farm_geop_lng = $derived(
+ basis.data?.location?.point
+ ? geol_lng_fmt(basis.data?.location.point.lng, `dms`, $locale, 3)
+ : ``,
+ );
+</script>
+
+<LayoutView>
+ <PageToolbar
+ basis={{
+ header: {
+ label: `${$ls(`common.farms`)}${basis.data?.farm.name ? ` / ${basis.data?.farm.name}` : ``}`,
+ callback_route: basis.callback_route,
+ },
+ }}
+ />
+ <LayoutPage>
+ <div
+ class={`flex flex-row h-[12rem] w-full justify-start items-center`}
+ >
+ <div
+ class={`flex flex-col basis-1/2 h-full p-4 gap-2 justify-start items-center`}
+ >
+ <div class={`flex flex-col w-full justify-start items-center`}>
+ <div
+ class={`flex flex-row w-full justify-start items-center`}
+ >
+ <p
+ class={`font-sans font-[500] text-lg text-layer-0-glyph`}
+ >
+ {farm_addr_fmt}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row w-full justify-start items-center`}
+ >
+ <p
+ class={`font-sans font-[500] text-lg text-layer-0-glyph tracking-tight`}
+ >
+ {farm_geop_lat && farm_geop_lng
+ ? `${farm_geop_lat}, ${farm_geop_lng}`
+ : ``}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-col basis-1/2 h-full justify-start items-center`}
+ >
+ <div
+ class={`flex flex-col h-full w-full p-4 gap-4 justify-start items-center bg-layer-1-surface rounded-2xl`}
+ >
+ <p
+ class={`font-sans font-[500] text-sm text-layer-0-glyph`}
+ >
+ {`Farm Info`}
+ </p>
+ <div
+ class={`flex flex-col w-full gap-1 justify-start items-center`}
+ >
+ <div
+ class={`flex flex-row w-full gap-4 justify-between items-center`}
+ >
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`Farm Size:`}
+ </p>
+
+ {#if basis.data?.farm.area && basis.data?.farm.area_unit}
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`${basis.data?.farm.area} ${basis.data?.farm.area_unit}`}
+ </p>
+ {:else}
+ <div
+ class={`flex flex-row gap-line justify-start items-center`}
+ >
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph_pl`}
+ >
+ {`Add`}
+ </p>
+ <Glyph
+ basis={{
+ classes: `text-layer-0-glyph_pl`,
+ dim: `xs`,
+ key: `caret-right`,
+ }}
+ />
+ </div>
+ {/if}
+ </div>
+ <div
+ class={`flex flex-row w-full gap-4 justify-between items-center`}
+ >
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`Farm Lots:`}
+ </p>
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`${basis.data?.lots?.length || 0}`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row w-full gap-4 justify-between items-center`}
+ >
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`Products:`}
+ </p>
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`${0}`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row w-full gap-4 justify-between items-center`}
+ >
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`Orders:`}
+ </p>
+ <p
+ class={`font-sans font-[400] text-layer-0-glyph`}
+ >
+ {`${0}`}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class={`flex flex-col w-full gap-3 justify-center items-center`}>
+ <ButtonSimple
+ basis={{
+ label: `View Products`,
+ callback: async () => {
+ if (basis.data?.farm.id)
+ await basis.lc_handle_farm_products_view(
+ basis.data?.farm.id,
+ );
+ },
+ }}
+ />
+ <ButtonSimple
+ basis={{
+ label: `View Orders`,
+ callback: async () => {
+ if (basis.data?.farm.id)
+ await basis.lc_handle_farm_orders_view(
+ basis.data?.farm.id,
+ );
+ },
+ }}
+ />
+ </div>
+ <div
+ class={`flex flex-col flex-shrink-0 h-[16rem] w-full justify-center items-center rounded-2xl overflow-hidden`}
+ >
+ <Map
+ bind:map
+ basis={{
+ interactive: false,
+ }}
+ >
+ <MapMarkerArea
+ {map_geop}
+ basis={{
+ no_drag: true,
+ lc_geocode: basis.lc_geocode,
+ }}
+ />
+ </Map>
+ </div>
+ <div
+ class={`flex flex-col h-[12rem] w-full justify-center items-center`}
+ >
+ <Empty />
+ </div>
+ </LayoutPage>
+</LayoutView>
diff --git a/apps-lib/src/lib/view/farms.svelte b/apps-lib/src/lib/view/farms.svelte
@@ -73,14 +73,16 @@
</PageToolbar>
<LayoutPage>
{#if basis.data}
- {#each basis.data?.list || [] as li}
- <FarmsDisplayLiEl
- basis={li}
- lc_geocode={basis.lc_geocode}
- lc_handle_farm_view={basis.lc_handle_farm_view}
- {ls}
- {locale}
- />
+ {#if basis.data?.list.length}
+ {#each basis.data?.list || [] as li}
+ <FarmsDisplayLiEl
+ basis={li}
+ lc_geocode={basis.lc_geocode}
+ lc_handle_farm_view={basis.lc_handle_farm_view}
+ {ls}
+ {locale}
+ />
+ {/each}
{:else}
<ButtonLabelDashed
basis={{
@@ -90,7 +92,7 @@
},
}}
/>
- {/each}
+ {/if}
{/if}
</LayoutPage>
</LayoutView>
