From bb8e94073f4fd00a434d76f2a254b498eb304179 Mon Sep 17 00:00:00 2001
From: Helen Bielawa <helen.bielawa@web.de>
Date: Thu, 22 May 2025 21:45:30 +0200
Subject: [PATCH 1/2] added tree description template and fixed tree
 description

---
 frontend/src/lib/components/Accordion.svelte  |  1 +
 .../src/routes/trees/[treeId]/+page.svelte    | 48 +++++++++++++++----
 frontend/src/types/Tree.ts                    |  2 +-
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/Accordion.svelte b/frontend/src/lib/components/Accordion.svelte
index 3e33dbf..89c7b2e 100644
--- a/frontend/src/lib/components/Accordion.svelte
+++ b/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';
diff --git a/frontend/src/routes/trees/[treeId]/+page.svelte b/frontend/src/routes/trees/[treeId]/+page.svelte
index cc2ecfc..7d5c86f 100644
--- a/frontend/src/routes/trees/[treeId]/+page.svelte
+++ b/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,35 @@
 
 	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('Baumarten')
+				.select("*")
+				.eq('baumart_bo', tree.tree_type_botanic)
+				.maybeSingle();
+			treeCharacter = characterData;
+		}
 	});
+
+	$:console.log('treeCharacter', treeCharacter);
 </script>
 
 {#if tree}
@@ -75,23 +90,40 @@
 		<div id="single-tree-content" class="flex flex-col h-full">
 			<div class="flex flex-col gap-4 h-full">
 				{#if activeTabIndex === 0}
-					<Accordion bind:open={openAbout}>
 
-						<div slot="head">
+
+						<div>
 							<p class="text-black font-bold">Über mich</p>
+							<p class="text-sm text-gray-800">
+							{treeCharacter?.Vorstellungstext_emotional?
+								treeCharacter.Vorstellungstext_emotional :
+								"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 slot="details">
+						<div >
 							<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>
 						</div>
+
+					<hr>
+					<Accordion bind:open={openEnvironment}>
+						<div slot="head">
+							<p class="text-black font-bold">Meine Bedeutung für die Umwelt</p>
+						</div>
+						<div slot="details">
+							<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>
 					<Accordion bind:open={openWater}>
 						<div slot="head">
-							<p class="text-black font-bold">Wasserbedarf</p>
+							<p class="text-black font-bold">Mein Wasserbedarf</p>
 						</div>
 						<div slot="details">
 							<p class="text-sm text-gray-800">
@@ -103,7 +135,7 @@
 					<hr>
 					<Accordion bind:open={openHistory}>
 						<div slot="head">
-							<p class="text-black font-bold">Wer wann gegossen hat</p>
+							<p class="text-black font-bold">Wer mich wann gegossen hat</p>
 						</div>
 						<div slot="details">
 							<p class="text-sm text-gray-800">
diff --git a/frontend/src/types/Tree.ts b/frontend/src/types/Tree.ts
index 350e991..c28c697 100644
--- a/frontend/src/types/Tree.ts
+++ b/frontend/src/types/Tree.ts
@@ -25,4 +25,4 @@ export interface Tree {
 	geocoordinates: string;
 }
 
-export type { Tree as TreeInterface };
+export type { Tree as TreeInterface };
\ No newline at end of file

From 5ffb9d02fef2320494dd1cce9a7ad444f40556d0 Mon Sep 17 00:00:00 2001
From: Daniel Baron <daniel@barooney.com>
Date: Thu, 5 Jun 2025 19:25:41 +0200
Subject: [PATCH 2/2] Added Supabase migration and modified component to read
 the data.

---
 .../src/routes/trees/[treeId]/+page.svelte    | 84 +++++++++++--------
 ...20250605192301_create_tree_types_table.sql |  7 ++
 2 files changed, 55 insertions(+), 36 deletions(-)
 create mode 100644 supabase/migrations/20250605192301_create_tree_types_table.sql

diff --git a/frontend/src/routes/trees/[treeId]/+page.svelte b/frontend/src/routes/trees/[treeId]/+page.svelte
index 7d5c86f..c31d436 100644
--- a/frontend/src/routes/trees/[treeId]/+page.svelte
+++ b/frontend/src/routes/trees/[treeId]/+page.svelte
@@ -39,15 +39,16 @@
 
 		if (tree) {
 			const { data: characterData, error: characterError } = await supabase
-				.from('Baumarten')
-				.select("*")
+				.from('tree_types')
+				.select('*')
 				.eq('baumart_bo', tree.tree_type_botanic)
 				.maybeSingle();
 			treeCharacter = characterData;
+			console.log('treeCharacter', treeCharacter);
 		}
 	});
 
-	$:console.log('treeCharacter', treeCharacter);
+	// $: console.log('treeCharacter', treeCharacter);
 </script>
 
 {#if tree}
@@ -68,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"
 					>
@@ -77,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"
 					>
@@ -88,42 +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}
-
-
-						<div>
-							<p class="text-black font-bold">Über mich</p>
-							<p class="text-sm text-gray-800">
-							{treeCharacter?.Vorstellungstext_emotional?
-								treeCharacter.Vorstellungstext_emotional :
-								"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 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>
+					<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>
+					<hr />
 					<Accordion bind:open={openEnvironment}>
 						<div slot="head">
-							<p class="text-black font-bold">Meine Bedeutung für die Umwelt</p>
+							<p class="font-bold text-black">Meine Bedeutung für die Umwelt</p>
 						</div>
 						<div slot="details">
 							<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.
+								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">Mein Wasserbedarf</p>
+							<p class="font-bold text-black">Mein Wasserbedarf</p>
 						</div>
 						<div slot="details">
 							<p class="text-sm text-gray-800">
@@ -132,20 +148,16 @@
 							<WaterColumn />
 						</div>
 					</Accordion>
-					<hr>
+					<hr />
 					<Accordion bind:open={openHistory}>
 						<div slot="head">
-							<p class="text-black font-bold">Wer mich 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}
diff --git a/supabase/migrations/20250605192301_create_tree_types_table.sql b/supabase/migrations/20250605192301_create_tree_types_table.sql
new file mode 100644
index 0000000..153ee83
--- /dev/null
+++ b/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;
\ No newline at end of file