vcscsvcscs/GenerationsHeritage
1
0
Fork 0
mirror of https://github.com/vcscsvcscs/GenerationsHeritage.git synced 2025-08-14 06:49:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixup frontend

Browse Source
This commit is contained in:
Vargha Csongor
2024-05-15 23:21:04 +02:00
parent 8991c30dd2
commit b292f39da0
8 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/auth.ts
View File

@@ -7,7 +7,7 @@ import { browser } from '$app/environment';
let userManager: UserManager;
if (browser) {
const host_url = window.location.href.startsWith('http://')
? 'http://'
? 'http://localhost:5173'
: 'https://' + window.location.hostname;
const config = {
authority: PUBLIC_ISSUER, // At Zitadel Project Console > [Your project] > [Your application] > URLs - Issuer

4
frontend/src/lib/family_tree/AddFamilyMember.svelte
View File

@@ -85,12 +85,12 @@
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
<h1>Create a family members profile</h1>
<h1 class="font-bold text-lg">Create a family members profile</h1>
<p>
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">
<form on:submit={handleSubmit} method="dialog" class="grid grid-cols-2 gap-4">
<label for="id">ID:</label>
<input type="text" id="id" bind:value={id} required />

2
frontend/src/lib/family_tree/AddRelationship.svelte
View File

@@ -56,7 +56,7 @@
<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 class="font-bold text-lg">Add a relationship</h1>
<p>
Ask your relative to give you their id and set what kind of relationship you have with them.
</p>

135
frontend/src/lib/family_tree/CreateProfile.svelte
View File

@@ -65,68 +65,87 @@
</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>
<div class="modal-box w-11/12 max-w-5xl flex flex-col gap-4">
<h1 class="font-bold text-lg">Create your profile</h1>
<p>To start building your family tree fill this form. You can add more information later.</p>
<form on:submit={handleSubmit} method="dialog">
<label class="input input-bordered flex items-center gap-2" for="firstName">
First Name:
<input type="text" id="firstName" class="grow" bind:value={payload.first_name} required />
</label>
<div class="grid grid-cols-2 gap-4">
<label class="input input-bordered flex items-center gap-2" for="firstName">
First Name:
<input
type="text"
id="firstName"
class="grow input-md"
bind:value={payload.first_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="middleName">
Middle Name:
<input type="text" id="middleName" class="grow" bind:value={payload.middle_name} />
</label>
<label class="input input-bordered flex items-center gap-2" for="middleName">
Middle Name:
<input
type="text"
id="middleName"
class="grow input-md"
bind:value={payload.middle_name}
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="lastName">
Last Name:
<input type="text" id="lastName" class="grow" bind:value={payload.last_name} required />
</label>
<label class="input input-bordered flex items-center gap-2" for="lastName">
Last Name:
<input
type="text"
id="lastName"
class="grow input-md"
bind:value={payload.last_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="born">
Born:
<input type="date" id="born" class="grow" bind:value={payload.born} required />
</label>
<label class="input input-bordered flex items-center gap-2" for="birthplace">
Birthplace:
<input type="text" id="birthplace" class="grow" bind:value={payload.birthplace} required />
</label>
<label class="input input-bordered flex items-center gap-2" for="mothersFirstName">
Mother's First Name:
<input
type="text"
id="mothersFirstName"
class="grow"
bind:value={payload.mothers_first_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="mothersLastName">
Mother's Last Name:
<input
type="text"
id="mothersLastName"
class="grow"
bind:value={payload.mothers_last_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="residence">
Residence:
<input type="text" id="residence" class="grow" bind:value={payload.residence} />
</label>
<label class="input input-bordered flex items-center gap-2" for="titles">
Titles:
<input type="text" id="titles" class="grow" bind:value={payload.titles} />
</label>
<button type="submit" class="btn btn-primary">Add</button>
<label class="input input-bordered flex items-center gap-2" for="born">
Born:
<input type="date" id="born" class="grow input-md" bind:value={payload.born} required />
</label>
<label class="input input-bordered flex items-center gap-2" for="birthplace">
Birthplace:
<input
type="text"
id="birthplace"
class="grow input-md"
bind:value={payload.birthplace}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="mothersFirstName">
Mother's First Name:
<input
type="text"
id="mothersFirstName"
class="grow input-md"
bind:value={payload.mothers_first_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="mothersLastName">
Mother's Last Name:
<input
type="text"
id="mothersLastName"
class="grow input-md"
bind:value={payload.mothers_last_name}
required
/>
</label>
<label class="input input-bordered flex items-center gap-2" for="residence">
Residence:
<input type="text" id="residence" class="grow input-md" bind:value={payload.residence} />
</label>
<label class="input input-bordered flex items-center gap-2" for="titles">
Titles:
<input type="text" id="titles" class="grow input-md" bind:value={payload.titles} />
</label>
<button type="submit" class="btn btn-primary w-40 place-self-end">Add</button>
</div>
</form>
</div>
</dialog>

4
frontend/src/lib/family_tree/dagreLayout.ts
View File

@@ -3,14 +3,12 @@ import { Position, type Node, type Edge } from '@xyflow/svelte';
import { onMount } from 'svelte';
const dagreGraph = new dagre.graphlib.Graph();
onMount(() => {
dagreGraph.setDefaultEdgeLabel(() => ({}));
});
const nodeWidth = 250;
const nodeHeight = 250;
function getLayoutedElements(nodes: Node[], edges: Edge[], direction = 'TB') {
dagreGraph.setDefaultEdgeLabel(() => ({}));
const isHorizontal = direction === 'LR';
dagreGraph.setGraph({ rankdir: direction });

2
frontend/src/lib/family_tree/getFamilyTree.ts
View File

@@ -12,7 +12,7 @@ user.subscribe((value) => {
async function fetch_family_tree() {
console.log(PUBLIC_API_URL);
const response = await fetch(PUBLIC_API_URL + '/familyTree?id=8a8b9b05bdc24550a5cc73e0b55e8d7d', {
const response = await fetch(PUBLIC_API_URL + '/familyTree', {
method: 'GET',
headers: {
Accept: 'application/json',

19
frontend/src/lib/family_tree/setFamilyTreeNodes.ts
View File

@@ -4,17 +4,22 @@ import { AddToNodesData, AddToEdgesData } from '$lib/family_tree/dataAdapter';
import type { Node, Edge } from '@xyflow/svelte';
import { useEdges, useNodes } from '@xyflow/svelte';
export function setFamilyTreeNodes(): boolean {
const nodes = useNodes();
const edges = useEdges();
export function setFamilyTreeNodes(): {
nodes: Node[];
edges: Edge[];
} {
console.log('fetching nodes');
let layoutedElements: {
nodes: Node[];
edges: Edge[];
} = { nodes: [], edges: [] };
fetch_family_tree().then((data) => {
fetch_family_tree().then((data: []) => {
let nodes_data: Node[] = [];
if (data.length == 0) {
return layoutedElements;
}
function pushNodeToData(node: Node) {
nodes_data.push(node);
}
@@ -36,10 +41,8 @@ export function setFamilyTreeNodes(): boolean {
AddToEdgesData(data, 7, pushEdgeToData);
layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
nodes.set(layoutedElements.nodes);
edges.set(layoutedElements.edges);
console.log('nodes fetched and set');
});
return layoutedElements.nodes.length > 0;
return layoutedElements;
}

7
frontend/src/routes/+page.svelte
View File

@@ -20,14 +20,19 @@
const nodes = writable<Node[]>([]);
const edges = writable<Edge[]>([]);
onMount(() => {
if (!$isAuthenticated) {
console.log('user is not authenticated');
login();
} else {
console.log('user is authenticated');
if (!setFamilyTreeNodes()) {
let layout = setFamilyTreeNodes();
if (layout.nodes.length === 0) {
CreateProfilePanel = true;
} else {
nodes.set(layout.nodes);
edges.set(layout.edges);
}
}
});