fix configs

frontend/src/lib/auth.ts

@@ -1,9 +1,6 @@
-import { UserManager, WebStorageStateStore, User } from 'oidc-client-ts';
+import { UserManager, WebStorageStateStore, type User } from 'oidc-client-ts';
 import { isAuthenticated, user } from './stores';
-import {
-	PUBLIC_ZITADEL_CLIENT_ID,
-	PUBLIC_ISSUER,
-} from '$env/static/public';
+import { PUBLIC_ZITADEL_CLIENT_ID, PUBLIC_ISSUER } from '$env/static/public';
 import { goto } from '$app/navigation';
 import { browser } from '$app/environment';
 

frontend/src/lib/family_tree/AddFamilyMember.svelte

@@ -2,7 +2,7 @@
 	import { PUBLIC_API_URL } from '$env/static/public';
 	import { setFamilyTreeNodes } from './setFamilyTreeNodes';
 	import { user } from '../stores';
-	export let showPanel = false;
+	import { onMount } from 'svelte';
 	export let id = '';
 
 	let auth_token = '';
@@ -43,7 +43,7 @@
 		}
 	};
 
-	function handleSubmit(event) {
+	function handleSubmit(event: Event) {
 		event.preventDefault();
 
 		if (
@@ -64,7 +64,6 @@
 				body: JSON.stringify(payload)
 			}).then((response) => {
 				if (response.ok) {
-					showPanel = false;
 					setFamilyTreeNodes();
 					dialog.close();
 				} else {
@@ -76,7 +75,9 @@
 		}
 	}
 
-	$: if (dialog && showPanel) dialog.showModal();
+	onMount(() => {
+		if (dialog) dialog.showModal();
+	});
 </script>
 
 <dialog bind:this={dialog} class="modal bg-base-300">

frontend/src/lib/family_tree/AddRelationship.svelte

@@ -2,7 +2,7 @@
 	import { PUBLIC_API_URL } from '$env/static/public';
 	import { setFamilyTreeNodes } from './setFamilyTreeNodes';
 	import { user } from '$lib/stores';
-	export let showPanel = false;
+	import { onMount } from 'svelte';
 	export let id = '';
 	let relationship = '';
 	let second_person_id = '';
@@ -35,7 +35,6 @@
 				body: JSON.stringify(payload)
 			}).then((response) => {
 				if (response.ok) {
-					showPanel = false;
 					setFamilyTreeNodes();
 					dialog.close();
 				} else {
@@ -47,7 +46,9 @@
 		}
 	}
 
-	$: if (dialog && showPanel) dialog.showModal();
+	onMount(() => {
+		if (dialog) dialog.showModal();
+	});
 </script>
 
 <dialog bind:this={dialog} class="modal bg-base-300">

frontend/src/lib/family_tree/CreateProfile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { PUBLIC_API_URL } from '$env/static/public';
+	import { onMount } from 'svelte';
 	import { user } from '../stores';
-	export let showPanel = false;
 
 	let auth_token = '';
 
@@ -30,7 +30,7 @@
 		profile_picture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png'
 	};
 
-	function handleSubmit(event) {
+	function handleSubmit(event: Event) {
 		event.preventDefault();
 
 		if (
@@ -49,7 +49,6 @@
 				body: JSON.stringify(payload)
 			}).then((response) => {
 				if (response.ok) {
-					showPanel = false;
 					dialog.close();
 				} else {
 					alert('Failed to create profile! with status ' + response.status);
@@ -60,7 +59,9 @@
 		}
 	}
 
-	$: if (dialog && showPanel) dialog.showModal();
+	onMount(() => {
+		if (dialog) dialog.showModal();
+	});
 </script>
 
 <dialog bind:this={dialog} class="modal bg-base-300">

frontend/src/lib/family_tree/PersonMenu.svelte

@@ -10,6 +10,8 @@
 	export let bottom: number | undefined;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	style="top: {top}px; left: {left}px; right: {right}px; bottom: {bottom}px;"
 	class="context-menu bg-primary-100 rounded-lg shadow-lg"

frontend/src/lib/family_tree/PersonNode.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
-	type $$Props = NodeProps;
 
-	export let id: $$Props['id'];
+	export let id: NodeProps['id'];
 	id;
-	export let dragHandle: $$Props['dragHandle'] = undefined;
+	export let dragHandle: NodeProps['dragHandle'] = undefined;
 	dragHandle;
-	export let type: $$Props['type'] = undefined;
+	export let type: NodeProps['type'] = undefined;
 	type;
-	export let selected: $$Props['selected'] = undefined;
+	export let selected: NodeProps['selected'] = undefined;
 	selected;
-	export let width: $$Props['width'] = undefined;
+	export let width: NodeProps['width'] = undefined;
 	width;
-	export let height: $$Props['height'] = undefined;
+	export let height: NodeProps['height'] = undefined;
 	height;
-	export let dragging: $$Props['dragging'];
+	export let dragging: NodeProps['dragging'];
 	dragging;
-	export let targetPosition: $$Props['targetPosition'] = undefined;
+	export let targetPosition: NodeProps['targetPosition'] = undefined;
 	targetPosition;
-	export let sourcePosition: $$Props['sourcePosition'] = undefined;
+	export let sourcePosition: NodeProps['sourcePosition'] = undefined;
 	sourcePosition;
 	export let data = {
 		id: '',

frontend/src/lib/family_tree/PersonPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let showPanel = true;
+	import { onMount } from 'svelte';
 	export let data = {
 		id: '',
 		last_name: 'Nem',
@@ -9,7 +9,9 @@
 	};
 	let dialog: HTMLDialogElement; // HTMLDialogElement
 
-	$: if (dialog && showPanel) dialog.showModal();
+	onMount(() => {
+		if (dialog) dialog.showModal();
+	});
 </script>
 
 <dialog bind:this={dialog} class="modal bg-base-300">

frontend/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
-	import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap, Background } from '@xyflow/svelte';
+	import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
 	import type { Node, Edge, NodeTypes } from '@xyflow/svelte';
 	import { isAuthenticated } from '../lib/stores';
 	import PersonNode from './../lib/family_tree/PersonNode.svelte';
@@ -10,6 +10,14 @@
 
 	import PersonMenu from '$lib/family_tree/PersonMenu.svelte';
 	import PersonPanel from '$lib/family_tree/PersonPanel.svelte';
+	import AddRelationship from '$lib/family_tree/AddRelationship.svelte';
+	import AddFamilyMember from '$lib/family_tree/AddFamilyMember.svelte';
+	import CreateProfile from '$lib/family_tree/CreateProfile.svelte';
+
+	let relationshipPanel: string;
+	let AddFamilyMemberPanel: string;
+	let CreateProfilePanel = false;
+
 	const nodes = writable<Node[]>([]);
 	const edges = writable<Edge[]>([]);
 	onMount(() => {
@@ -18,9 +26,9 @@
 			login();
 		} else {
 			console.log('user is authenticated');
-			if (!setFamilyTreeNodes()){
-				
-			};
+			if (!setFamilyTreeNodes()) {
+				CreateProfilePanel = true;
+			}
 		}
 	});
 
@@ -28,15 +36,27 @@
 		custom: PersonNode
 	};
 
-	let personPanel: {} | null;
+	let personPanel:
+		| {
+				id: string;
+				last_name: string;
+				first_name: string;
+				middle_name: string;
+				profile_picture: string;
+		  }
+		| undefined;
 
 	let menu: { id: string; top?: number; left?: number; right?: number; bottom?: number } | null;
 	let width: number;
 	let height: number;
 
-	function handleContextMenu({ detail: { event, node } }) {
+	function handleContextMenu({
+		detail: { event, node }
+	}: {
+		detail: { event: MouseEvent; node: Node };
+	}) {
 		event.preventDefault();
-		
+
 		menu = {
 			id: node.data.ID,
 			top: event.clientY < height - 200 ? event.clientY : undefined,
@@ -49,6 +69,7 @@
 	// Close the context menu if it's open whenever the window is clicked.
 	function handlePaneClick() {
 		menu = null;
+		relationshipPanel = '';
 	}
 </script>
 
@@ -67,9 +88,18 @@
 		>
 			<Controls class="bg-base-300 text-base-content" />
 			<MiniMap class="bg-base-200" />
-			{#if menu}
+			{#if menu != null}
 				<PersonMenu
 					onClick={handlePaneClick}
+					deleteNode={() => {
+						console.log('delete node');
+					}}
+					addRelationship={() => {
+						if (menu) relationshipPanel = menu.id;
+					}}
+					addFamilymember={() => {
+						if (menu) AddFamilyMemberPanel = menu.id;
+					}}
 					id={menu.id}
 					top={menu.top}
 					left={menu.left}
@@ -77,7 +107,18 @@
 					bottom={menu.bottom}
 				/>
 			{/if}
-			<PersonPanel showPanel={personPanel != null} data={personPanel} />
+			{#if personPanel != null}
+				<PersonPanel data={personPanel} />
+			{/if}
+			{#if relationshipPanel != ''}
+				<AddRelationship id={relationshipPanel} />
+			{/if}
+			{#if AddFamilyMemberPanel != ''}
+				<AddFamilyMember id={AddFamilyMemberPanel} />
+			{/if}
+			{#if CreateProfilePanel}
+				<CreateProfile />
+			{/if}
 		</SvelteFlow>
 	</SvelteFlowProvider>
 </div>

frontend/svelte.config.js

@@ -11,7 +11,15 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+		prerender: {
+			handleHttpError: ({ path, referrer, message }) => {
+				return {
+					status: 404,
+					html: `<h1>${message}</h1><p>Path: ${path}</p><p>Referrer: ${referrer}</p>`
+				};
+			}
+		}
 	}
 };
 

frontend/tsconfig.json

@@ -12,3 +12,4 @@
 	},
 	"include": ["src/**/*", "src/node_modules", ".svelte-kit/ambient.d.ts"] // see last element
 }
+