farms-preview-card.svelte (3702B)
1 <script lang="ts"> 2 import MapMarkerArea from "$lib/components/map/map-marker-area.svelte"; 3 import Map from "$lib/components/map/map.svelte"; 4 import type { LibContext } from "$lib/types/context"; 5 import type { FarmExtended } from "$lib/types/views/farms"; 6 import { get_context } from "@radroots/apps-lib"; 7 import { 8 fmt_geolocation_address, 9 geol_lat_fmt, 10 geol_lng_fmt, 11 parse_geol_point_tup, 12 parse_tup_geop_point, 13 type GeolocationPointTuple, 14 } from "@radroots/geo"; 15 import type { CallbackPromiseGeneric } from "@radroots/utils"; 16 import { onMount } from "svelte"; 17 18 const { ls, locale } = get_context<LibContext>(`lib`); 19 20 let { 21 basis, 22 on_handle_farm_view, 23 }: { 24 basis: FarmExtended; 25 on_handle_farm_view: CallbackPromiseGeneric<string>; 26 } = $props(); 27 28 let map: maplibregl.Map | undefined = $state(undefined); 29 let map_center: GeolocationPointTuple = $state([0, 0]); 30 31 onMount(async () => { 32 map?.setZoom(13); 33 if (basis.location?.point) { 34 map_center = parse_geol_point_tup(basis.location.point); 35 if (map_center && map) map.setCenter(map_center); 36 } 37 }); 38 39 const map_geop = $derived(parse_tup_geop_point(map_center)); 40 41 const farm_addr_fmt = $derived( 42 basis.location?.address 43 ? fmt_geolocation_address(basis.location.address) 44 : ``, 45 ); 46 47 const farm_geop_lat = $derived( 48 basis.location?.point 49 ? geol_lat_fmt(basis.location.point.lat, `dms`, $locale, 3) 50 : ``, 51 ); 52 53 const farm_geop_lng = $derived( 54 basis.location?.point 55 ? geol_lng_fmt(basis.location.point.lng, `dms`, $locale, 3) 56 : ``, 57 ); 58 </script> 59 60 <button 61 class={`z-10 relative flex flex-col w-full p-4 gap-3 justify-start items-center bg-ly1 ly1-active-raise-less ly1-active-ring rounded-3xl el-re`} 62 onclick={async () => { 63 if (basis.farm.id) await on_handle_farm_view(basis.farm.id); 64 }} 65 > 66 <div class={`flex flex-col w-full gap-2 justify-center items-center`}> 67 <div class={`flex flex-row w-full justify-between items-center`}> 68 <p class={`font-sans font-[500] text-3xl text-ly0-gl`}> 69 {basis.farm.name} 70 </p> 71 72 <div 73 class={`flex flex-row h-6 px-2 py-1 justify-center items-center bg-lime-400 rounded-lg`} 74 > 75 <p class={`font-sans font-[700] text-white`}> 76 {`${$ls(`common.farm`)}`} 77 </p> 78 </div> 79 </div> 80 <div class={`flex flex-col w-full justify-center items-center`}> 81 <div class={`flex flex-row w-full justify-start items-center`}> 82 <p class={`font-sans font-[500] text-lg text-ly0-gl`}> 83 {farm_addr_fmt} 84 </p> 85 </div> 86 <div class={`flex flex-row w-full justify-start items-center`}> 87 <p class={`font-sans font-[500] text-lg text-ly0-gl`}> 88 {farm_geop_lat && farm_geop_lng 89 ? `${farm_geop_lat}, ${farm_geop_lng}` 90 : ``} 91 </p> 92 </div> 93 </div> 94 </div> 95 <div 96 class={`flex flex-col h-[16rem] w-full justify-center items-center rounded-2xl overflow-hidden`} 97 > 98 <Map 99 bind:map 100 basis={{ 101 interactive: false, 102 }} 103 > 104 <MapMarkerArea 105 {map_geop} 106 basis={{ 107 no_drag: true, 108 }} 109 /> 110 </Map> 111 </div> 112 </button>