Baumbeschreibungen

frontend/src/lib/components/Accordion.svelte

@@ -1,4 +1,5 @@
 <!--Übernommen aus https://svelte.dev/playground/c109f83f3c114cb7829f04fe2440ef94?version=5.28.2 -->
+
 <script>
 	export let open = false;
 	import { slide } from 'svelte/transition';

frontend/src/routes/trees/[treeId]/+page.svelte

@@ -7,7 +7,8 @@
 	import { supabase } from '../../../supabase';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
-	import type { Tree } from '../../../types/tree';
+	import type { Tree } from '../../../types/Tree';
+	import type { TreeMetadata } from '../../../types/TreeCharacter';
 	import TreeMetric from '../../../components/trees/TreeMetric.svelte';
 
 	export let activeTabIndex: number = 0;
@@ -18,21 +19,36 @@
 
 	let openAbout = true;
 	let openWater = false;
+	let openEnvironment = false;
 	let openHistory = false;
 
 	$: showInfo = true;
 	$: showChat = false;
 
 	let tree: Tree;
+	let treeCharacter: TreeMetadata;
 
 	onMount(async () => {
-		const { data, error } = await supabase
+		const { data: treeData, error: treeError } = await supabase
 			.from('trees')
 			.select()
 			.eq('uuid', $page.params.treeId)
 			.maybeSingle();
-		tree = data;
+		tree = treeData;
+		console.log('treeData', treeData);
+
+		if (tree) {
+			const { data: characterData, error: characterError } = await supabase
+				.from('tree_types')
+				.select('*')
+				.eq('baumart_bo', tree.tree_type_botanic)
+				.maybeSingle();
+			treeCharacter = characterData;
+			console.log('treeCharacter', treeCharacter);
+		}
 	});
+
+	// $: console.log('treeCharacter', treeCharacter);
 </script>
 
 {#if tree}
@@ -53,7 +69,9 @@
 					<button
 						role="tab"
 						aria-selected={activeTabIndex === 0}
-						class="flex-1 py-2 shrink gap-2.5 self-stretch my-auto ${showInfo ? 'text-zinc-600' : 'text-neutral-500'} z-10"
+						class="flex-1 py-2 shrink gap-2.5 self-stretch my-auto ${showInfo
+							? 'text-zinc-600'
+							: 'text-neutral-500'} z-10"
 						on:click={() => handleTabChange(0)}
 						tabindex="0"
 					>
@@ -62,7 +80,9 @@
 					<button
 						role="tab"
 						aria-selected={activeTabIndex === 1}
-						class="flex-1 py-2 shrink gap-2.5 self-stretch my-auto ${showChat ? 'text-zinc-600' : 'text-neutral-500'} z-10"
+						class="flex-1 py-2 shrink gap-2.5 self-stretch my-auto ${showChat
+							? 'text-zinc-600'
+							: 'text-neutral-500'} z-10"
 						on:click={() => handleTabChange(1)}
 						tabindex="0"
 					>
@@ -73,25 +93,53 @@
 		</div>
 
 		<div id="single-tree-content" class="flex flex-col h-full">
-			<div class="flex flex-col gap-4 h-full">
+			<div class="flex flex-col h-full gap-4">
 				{#if activeTabIndex === 0}
-					<Accordion bind:open={openAbout}>
+					<div>
+						<p class="font-bold text-black">Über mich</p>
+						<p class="text-sm text-gray-800">
+							{treeCharacter?.description
+								? treeCharacter.description
+								: 'Hej, wie mein Name schon verrät komme ich ursprünglich aus dem Norden von Europa. Ich bin sehr variabel in meinem Äußeren. Entweder wachse ich bis zu 15m mit einem geraden Stamm, oder aber du findest mich als mehrstämmigen großen Strauch.'}
+						</p>
+					</div>
+					<div>
+						<div class="grid grid-cols-1 gap-4 text-sm text-gray-800 sm:grid-cols-3">
+							<TreeMetric label="Höhe" value={tree.height} unit="m" max={39} position="right" />
+							<TreeMetric
+								label="Kronendurchmesser"
+								value={tree.crown_diameter}
+								unit="m"
+								max={29}
+								position="top"
+							/>
+							<TreeMetric
+								label="Stammdurchmesser"
+								value={tree.trunk_diameter}
+								unit="cm"
+								max={297}
+								position="bottom"
+							/>
+						</div>
+					</div>
 
+					<hr />
+					<Accordion bind:open={openEnvironment}>
 						<div slot="head">
-							<p class="text-black font-bold">Über mich</p>
+							<p class="font-bold text-black">Meine Bedeutung für die Umwelt</p>
 						</div>
 						<div slot="details">
-							<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-800">
-								<TreeMetric label="Höhe" value={tree.height} unit="m" max={39} position="right" />
-								<TreeMetric label="Kronendurchmesser" value={tree.crown_diameter} unit="m" max={29} position="top" />
-								<TreeMetric label="Stammdurchmesser" value={tree.trunk_diameter} unit="cm" max={297} position="bottom" />
-							</div>
+							<p class="text-sm text-gray-800">
+								Hier wollen wir zeigen, welche Wirkung dieser Baum auf seine direkte Umwelt hat:
+								Schatten, Luftfeuchtigkeit, Temperatur, etc. Das Feature ist noch in der
+								Entwicklung.
+							</p>
 						</div>
 					</Accordion>
-					<hr>
+					<hr />
 					<Accordion bind:open={openWater}>
 						<div slot="head">
-							<p class="text-black font-bold">Wasserbedarf</p>
+							<p class="font-bold text-black">Mein Wasserbedarf</p>
 						</div>
 						<div slot="details">
 							<p class="text-sm text-gray-800">
@@ -100,20 +148,16 @@
 							<WaterColumn />
 						</div>
 					</Accordion>
-					<hr>
+					<hr />
 					<Accordion bind:open={openHistory}>
 						<div slot="head">
-							<p class="text-black font-bold">Wer wann gegossen hat</p>
+							<p class="font-bold text-black">Wer mich wann gegossen hat</p>
 						</div>
 						<div slot="details">
-							<p class="text-sm text-gray-800">
-								Hier werden die letzten 10 Gießungen angezeigt.
-							</p>
+							<p class="text-sm text-gray-800">Hier werden die letzten 10 Gießungen angezeigt.</p>
 						</div>
 					</Accordion>
-					<hr>
-
-
+					<hr />
 
 					<AdoptTree {tree} />
 				{:else}

frontend/src/types/Tree.ts

@@ -25,4 +25,4 @@ export interface Tree {
 	geocoordinates: string;
 }
 
-export type { Tree as TreeInterface };
+export type { Tree as TreeInterface };

supabase/migrations/20250605192301_create_tree_types_table.sql

@@ -0,0 +1,7 @@
+create table public.tree_types (
+  id bigint generated by default as identity not null,
+  created_at timestamp with time zone not null default now(),
+  baumart_bo character varying null,
+  description text null,
+  constraint tree_types_pkey primary key (id)
+) TABLESPACE pg_default;