Create profile

frontend/src/lib/family_tree/AddFamilyMember.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import { PUBLIC_API_URL } from '$env/static/public';
 	import { setFamilyTreeNodes } from './setFamilyTreeNodes';
-	import { user } from '$lib/auth';
+	import { user } from '../stores';
 	export let showPanel = false;
 	export let id = '';
 
@@ -14,7 +14,7 @@
 	});
 
 	let relationship = '';
-	let dialog; // HTMLDialogElement
+	let dialog: HTMLDialogElement;
 
 	let payload = {
 		relationship: {
@@ -68,7 +68,7 @@
 					setFamilyTreeNodes();
 					dialog.close();
 				} else {
-					alert('Failed to add relationship! with status ' + response.status);
+					alert('Failed to add family member! with status ' + response.status);
 				}
 			});
 		} else {
@@ -84,9 +84,10 @@
 		<form method="dialog">
 			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		</form>
-		<h1>Add a relationship</h1>
+		<h1>Create a family members profile</h1>
 		<p>
-			Ask your relative to give you their id and set what kind of relationship you have with them.
+			You can add a family member to your family tree by filling out the form below. You can update
+			the information later.
 		</p>
 		<form on:submit={handleSubmit} method="dialog">
 			<label for="id">ID:</label>

frontend/src/lib/family_tree/CreateProfile.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { PUBLIC_API_URL } from '$env/static/public';
+	import { user } from '../stores';
+	export let showPanel = false;
+
+	let auth_token = '';
+
+	user.subscribe((value) => {
+		if (value) {
+			auth_token = value.access_token;
+		}
+	});
+
+	let dialog: HTMLDialogElement;
+
+	let payload = {
+		first_name: '',
+		middle_name: '',
+		last_name: '',
+		mothers_first_name: '',
+		mothers_last_name: '',
+		born: '',
+		birthplace: '',
+		titles: [],
+		residence: '',
+		life_events: [],
+		occupation: [],
+		occupation_to_display: '',
+		photos: {},
+		profile_picture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png'
+	};
+
+	function handleSubmit(event) {
+		event.preventDefault();
+
+		if (
+			payload.first_name &&
+			payload.last_name &&
+			payload.born &&
+			payload.mothers_first_name &&
+			payload.mothers_last_name
+		) {
+			fetch(PUBLIC_API_URL + '/person', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: auth_token
+				},
+				body: JSON.stringify(payload)
+			}).then((response) => {
+				if (response.ok) {
+					showPanel = false;
+					dialog.close();
+				} else {
+					alert('Failed to create profile! with status ' + response.status);
+				}
+			});
+		} else {
+			alert('You have to fill out all the required fields!');
+		}
+	}
+
+	$: if (dialog && showPanel) dialog.showModal();
+</script>
+
+<dialog bind:this={dialog} class="modal bg-base-300">
+	<div class="modal-box w-11/12 max-w-5xl">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		</form>
+		<h1>Create your profile</h1>
+		<p>
+			Create your profile to start building your family tree. You can add more information later.
+		</p>
+		<form on:submit={handleSubmit} method="dialog">
+			<label for="firstName">First Name:</label>
+			<input type="text" id="firstName" bind:value={payload.first_name} required />
+
+			<label for="middleName">Middle Name:</label>
+			<input type="text" id="middleName" bind:value={payload.middle_name} />
+
+			<label for="lastName">Last Name:</label>
+			<input type="text" id="lastName" bind:value={payload.last_name} required />
+
+			<label for="born">Born:</label>
+			<input type="date" id="born" bind:value={payload.born} required />
+
+			<label for="birthplace">Birthplace:</label>
+			<input type="text" id="birthplace" bind:value={payload.birthplace} required />
+
+			<label for="mothersFirstName">Mother's First Name:</label>
+			<input type="text" id="mothersFirstName" bind:value={payload.mothers_first_name} required />
+
+			<label for="mothersLastName">Mother's Last Name:</label>
+			<input type="text" id="mothersLastName" bind:value={payload.mothers_last_name} required />
+
+			<label for="residence">Residence:</label>
+			<input type="text" id="residence" bind:value={payload.residence} />
+
+			<label for="titles">Titles:</label>
+			<input type="text" id="titles" bind:value={payload.titles} />
+
+			<button type="submit" class="btn btn-primary">Add</button>
+		</form>
+	</div>
+</dialog>

frontend/src/lib/family_tree/setFamilyTreeNodes.ts

@@ -7,8 +7,12 @@ import { useEdges, useNodes } from '@xyflow/svelte';
 const nodes = useNodes();
 const edges = useEdges();
 
-export function setFamilyTreeNodes() {
+export function setFamilyTreeNodes(): boolean {
 	console.log('fetching nodes');
+	let layoutedElements: {
+		nodes: Node[];
+		edges: Edge[];
+	} = { nodes: [], edges: [] };
 	fetch_family_tree().then((data) => {
 		let nodes_data: Node[] = [];
 		function pushNodeToData(node: Node) {
@@ -31,10 +35,11 @@ export function setFamilyTreeNodes() {
 		AddToEdgesData(data, 5, pushEdgeToData);
 		AddToEdgesData(data, 7, pushEdgeToData);
 
-		const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
-
+		layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
 		nodes.set(layoutedElements.nodes);
 		edges.set(layoutedElements.edges);
+		console.log('nodes fetched and set');
 	});
-	console.log('nodes fetched and set');
+
+	return layoutedElements.nodes.length > 0;
 }

frontend/src/routes/+page.svelte

@@ -18,7 +18,9 @@
 			login();
 		} else {
 			console.log('user is authenticated');
-			setFamilyTreeNodes();
+			if (!setFamilyTreeNodes()){
+				
+			};
 		}
 	});
 
@@ -33,11 +35,8 @@
 	let height: number;
 
 	function handleContextMenu({ detail: { event, node } }) {
-		// Prevent native context menu from showing
 		event.preventDefault();
-
-		// Calculate position of the context menu. We want to make sure it
-		// doesn't get positioned off-screen.
+		
 		menu = {
 			id: node.data.ID,
 			top: event.clientY < height - 200 ? event.clientY : undefined,