diff --git a/frontend/src/lib/auth.ts b/frontend/src/lib/auth.ts index 8688ac5..95788f5 100644 --- a/frontend/src/lib/auth.ts +++ b/frontend/src/lib/auth.ts @@ -1,70 +1,68 @@ import { UserManager, WebStorageStateStore, User } from 'oidc-client-ts'; import { isAuthenticated, user } from './stores'; import { - PUBLIC_ZITADEL_CLIENT_ID, - PUBLIC_ISSUER, - PUBLIC_LOGIN_REDIRECT_URI, - PUBLIC_LOGOUT_REDIRECT_URI + PUBLIC_ZITADEL_CLIENT_ID, + PUBLIC_ISSUER, + PUBLIC_LOGIN_REDIRECT_URI, + PUBLIC_LOGOUT_REDIRECT_URI } from '$env/static/public'; import { goto } from '$app/navigation'; import { browser } from '$app/environment'; - - let userManager: UserManager; if (browser) { - const config = { - authority: PUBLIC_ISSUER, // At Zitadel Project Console > [Your project] > [Your application] > URLs - Issuer - client_id: PUBLIC_ZITADEL_CLIENT_ID, // At Zitadel Project Console > [Your project] > [Your application] > Configuration - Client ID - redirect_uri: PUBLIC_LOGIN_REDIRECT_URI+ '/callback', // At Zitadel Project Console > [Your project] > [Your application] > URLs - Login Redirect URI - response_type: 'code', - scope: 'openid profile email', - post_logout_redirect_uri: PUBLIC_LOGOUT_REDIRECT_URI, - userStore: new WebStorageStateStore({ store: window.localStorage }), - automaticSilentRenew: true, - silent_redirect_uri: PUBLIC_LOGIN_REDIRECT_URI + '/silent-refresh' - }; + const config = { + authority: PUBLIC_ISSUER, // At Zitadel Project Console > [Your project] > [Your application] > URLs - Issuer + client_id: PUBLIC_ZITADEL_CLIENT_ID, // At Zitadel Project Console > [Your project] > [Your application] > Configuration - Client ID + redirect_uri: PUBLIC_LOGIN_REDIRECT_URI + '/callback', // At Zitadel Project Console > [Your project] > [Your application] > URLs - Login Redirect URI + response_type: 'code', + scope: 'openid profile email', + post_logout_redirect_uri: PUBLIC_LOGOUT_REDIRECT_URI, + userStore: new WebStorageStateStore({ store: window.localStorage }), + automaticSilentRenew: true, + silent_redirect_uri: PUBLIC_LOGIN_REDIRECT_URI + '/silent-refresh' + }; - userManager = new UserManager(config); + userManager = new UserManager(config); - userManager.events.addUserLoaded((loadedUser: User) => { - console.log('userManager.events.addUserLoaded'); - user.set(loadedUser); - isAuthenticated.set(true); - }); + userManager.events.addUserLoaded((loadedUser: User) => { + console.log('userManager.events.addUserLoaded'); + user.set(loadedUser); + isAuthenticated.set(true); + }); - userManager.events.addUserUnloaded(() => { - console.log('userManager.events.addUserUnloaded'); - user.set(null); - isAuthenticated.set(false); - }); + userManager.events.addUserUnloaded(() => { + console.log('userManager.events.addUserUnloaded'); + user.set(null); + isAuthenticated.set(false); + }); } async function login(): Promise { - console.log('UserManager.login()'); - if (browser) { - await userManager.signinRedirect(); - } + console.log('UserManager.login()'); + if (browser) { + await userManager.signinRedirect(); + } } async function logout(): Promise { - if (browser) { - await userManager.signoutRedirect(); - } + if (browser) { + await userManager.signoutRedirect(); + } } async function handleCallback(): Promise { - if (browser) { - await userManager.signinRedirectCallback(); - goto('/'); - } + if (browser) { + await userManager.signinRedirectCallback(); + goto('/'); + } } async function handleSilentCallback(): Promise { - if (browser) { - await userManager.signinSilentCallback(); - goto('/'); - } + if (browser) { + await userManager.signinSilentCallback(); + goto('/'); + } } export { login, logout, handleCallback, handleSilentCallback }; diff --git a/frontend/src/lib/family_tree/PersonNode.svelte b/frontend/src/lib/family_tree/PersonNode.svelte index eed65ce..b9fdba1 100644 --- a/frontend/src/lib/family_tree/PersonNode.svelte +++ b/frontend/src/lib/family_tree/PersonNode.svelte @@ -25,7 +25,7 @@ Lastname: 'Nem', Firstname: 'Ismert', Middlename: '', - ProfilePicture: 'https://www.flaticon.com/free-icons/user' + ProfilePicture: 'https://cdn-icons-png.flaticon.com/512/3607/3607444.png' }; @@ -37,7 +37,6 @@

- {data.Firstname} {data.Middlename} {data.Lastname} @@ -69,4 +68,4 @@ position={Position.Bottom} id="parent" style="transform: translate(0, -3px);" -/> \ No newline at end of file +/> diff --git a/frontend/src/lib/family_tree/dataAdapter.ts b/frontend/src/lib/family_tree/dataAdapter.ts index 2a70b4a..c0718f6 100644 --- a/frontend/src/lib/family_tree/dataAdapter.ts +++ b/frontend/src/lib/family_tree/dataAdapter.ts @@ -1,57 +1,77 @@ import { type Node, type Edge } from '@xyflow/svelte'; function AddToNodesData(data: any, i: number, pushToNodesCallback: (arg: Node) => void) { - if (data[0].Values[i] != null) { - if (Object.prototype.toString.call(data[0].Values[i]) === '[object Array]') { - data[0].Values[i].forEach((person: { ElementId: string; Props: {} }) => { - pushToNodesCallback({ - id: person.ElementId, - type: 'custom', - data: person.Props, - position: { x: 0, y: 0 } - }); - }); - } else { - console.log(data[0].Values[i]); - pushToNodesCallback({ - id: data[0].Values[i].ElementId, - type: 'custom', - data: data[0].Values[i].Props, - position: { x: 0, y: 0 } - }); - } - } + if (data[0].Values[i] != null) { + if (Object.prototype.toString.call(data[0].Values[i]) === '[object Array]') { + data[0].Values[i].forEach((person: { ElementId: string; Props: {} }) => { + pushToNodesCallback({ + id: person.ElementId, + type: 'custom', + data: person.Props, + position: { x: 0, y: 0 } + }); + }); + } else { + console.log(data[0].Values[i]); + pushToNodesCallback({ + id: data[0].Values[i].ElementId, + type: 'custom', + data: data[0].Values[i].Props, + position: { x: 0, y: 0 } + }); + } + } } function AddToEdgesData(data: any, i: number, pushToEdgesCallback: (arg: Edge) => void) { - if (data[0].Values[i] != null) { - if (Object.prototype.toString.call(data[0].Values[i]) === '[object Array]') { - data[0].Values[i].forEach((edge: { ElementId: string; StartElementId: string; EndElementId: string; Type: string; Props: {} }) => { - pushToEdgesCallback({ - id: edge.ElementId, - source: edge.StartElementId, - sourceHandle: edge.Type === 'Parent' ? 'parent' : edge.Type === 'Child' ? 'child' : 'spouse', - target: edge.EndElementId, - targetHandle: edge.Type === 'Parent' ? 'child' : edge.Type === 'Child' ? 'parent' : 'spouse', - label: edge.Type, - data: edge.Props, - zIndex: edge.Type === 'Spouse' ? 1 : 0 - }); - }); - } else { - console.log(data[0].Values[i]); - pushToEdgesCallback({ - id: data[0].Values[i].ElementId, - source: data[0].Values[i].StartElementId, - sourceHandle: data[0].Values[i].Type === 'Parent' ? 'parent' : data[0].Values[i].Type === 'Child' ? 'child' : 'spouse', - target: data[0].Values[i].EndElementId, - targetHandle: data[0].Values[i].Type === 'Parent' ? 'child' : data[0].Values[i].Type === 'Child' ? 'parent' : 'spouse', - label: data[0].Values[i].Type, - data: data[0].Values[i].Props, - zIndex: data[0].Values[i].Type === 'Spouse' ? 1 : 0 - }); - } - } + if (data[0].Values[i] != null) { + if (Object.prototype.toString.call(data[0].Values[i]) === '[object Array]') { + data[0].Values[i].forEach( + (edge: { + ElementId: string; + StartElementId: string; + EndElementId: string; + Type: string; + Props: {}; + }) => { + pushToEdgesCallback({ + id: edge.ElementId, + source: edge.StartElementId, + sourceHandle: + edge.Type === 'Parent' ? 'parent' : edge.Type === 'Child' ? 'child' : 'spouse', + target: edge.EndElementId, + targetHandle: + edge.Type === 'Parent' ? 'child' : edge.Type === 'Child' ? 'parent' : 'spouse', + label: edge.Type, + data: edge.Props, + zIndex: edge.Type === 'Spouse' ? 1 : 0 + }); + } + ); + } else { + console.log(data[0].Values[i]); + pushToEdgesCallback({ + id: data[0].Values[i].ElementId, + source: data[0].Values[i].StartElementId, + sourceHandle: + data[0].Values[i].Type === 'Parent' + ? 'parent' + : data[0].Values[i].Type === 'Child' + ? 'child' + : 'spouse', + target: data[0].Values[i].EndElementId, + targetHandle: + data[0].Values[i].Type === 'Parent' + ? 'child' + : data[0].Values[i].Type === 'Child' + ? 'parent' + : 'spouse', + label: data[0].Values[i].Type, + data: data[0].Values[i].Props, + zIndex: data[0].Values[i].Type === 'Spouse' ? 1 : 0 + }); + } + } } -export { AddToNodesData, AddToEdgesData }; \ No newline at end of file +export { AddToNodesData, AddToEdgesData }; diff --git a/frontend/src/lib/family_tree/getFamilyTree.ts b/frontend/src/lib/family_tree/getFamilyTree.ts index e5381ca..d0b31ec 100644 --- a/frontend/src/lib/family_tree/getFamilyTree.ts +++ b/frontend/src/lib/family_tree/getFamilyTree.ts @@ -10,18 +10,15 @@ user.subscribe((value) => { }); async function fetch_family_tree() { - console.log(PUBLIC_API_URL); - - const response = await fetch( - PUBLIC_API_URL + '/familyTree?id=8a8b9b05bdc24550a5cc73e0b55e8d7d', - { - method: 'GET', - headers: { - 'Accept': 'application/json', - Authorization: auth_token - } + console.log(PUBLIC_API_URL); + + const response = await fetch(PUBLIC_API_URL + '/familyTree?id=8a8b9b05bdc24550a5cc73e0b55e8d7d', { + method: 'GET', + headers: { + Accept: 'application/json', + Authorization: auth_token } - ); + }); const data = await response.json(); return data; } diff --git a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts index 643fdee..a232840 100644 --- a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts +++ b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts @@ -8,33 +8,33 @@ const nodes = useNodes(); const edges = useEdges(); export function setFamilyTreeNodes() { - console.log('fetching nodes'); - fetch_family_tree().then((data) => { - let nodes_data: Node[] = []; - function pushNodeToData(node: Node) { - nodes_data.push(node); - } + console.log('fetching nodes'); + fetch_family_tree().then((data) => { + let nodes_data: Node[] = []; + function pushNodeToData(node: Node) { + nodes_data.push(node); + } - AddToNodesData(data, 0, pushNodeToData); - AddToNodesData(data, 2, pushNodeToData); - AddToNodesData(data, 4, pushNodeToData); - AddToNodesData(data, 6, pushNodeToData); - AddToNodesData(data, 8, pushNodeToData); + AddToNodesData(data, 0, pushNodeToData); + AddToNodesData(data, 2, pushNodeToData); + AddToNodesData(data, 4, pushNodeToData); + AddToNodesData(data, 6, pushNodeToData); + AddToNodesData(data, 8, pushNodeToData); - let edges_data: Edge[] = []; - function pushEdgeToData(edge: Edge) { - edges_data.push(edge); - } + let edges_data: Edge[] = []; + function pushEdgeToData(edge: Edge) { + edges_data.push(edge); + } - AddToEdgesData(data, 1, pushEdgeToData); - AddToEdgesData(data, 3, pushEdgeToData); - AddToEdgesData(data, 5, pushEdgeToData); - AddToEdgesData(data, 7, pushEdgeToData); + AddToEdgesData(data, 1, pushEdgeToData); + AddToEdgesData(data, 3, pushEdgeToData); + AddToEdgesData(data, 5, pushEdgeToData); + AddToEdgesData(data, 7, pushEdgeToData); - const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB'); + const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB'); - $nodes = layoutedElements.nodes; - $edges = layoutedElements.edges; - }); - console.log('nodes fetched and set'); + $nodes = layoutedElements.nodes; + $edges = layoutedElements.edges; + }); + console.log('nodes fetched and set'); }