fixup css and start node implementation

This commit is contained in:
2025-04-26 11:14:16 +02:00
parent d6b9159f1a
commit 55d4175dd1
8 changed files with 78 additions and 32 deletions

View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="">
<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="" class="bg-base-200">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

View File

@@ -0,0 +1,43 @@
<!-- <svelte:options immutable /> -->
<script lang="ts">
import { death } from './../paraglide/messages.js';
import { Handle, Position, useConnection, type NodeProps } from '@xyflow/svelte';
import type { components } from '$lib/api/api.gen';
type $$Props = NodeProps;
export let id: NodeProps['id'];
export let data: NodeProps['data'] & components['schemas']['PersonProperties'];
console.log('data', data);
const connection = useConnection();
let isConnecting = false;
let isTarget = false;
$: isConnecting = connection.current.fromHandle !== null;
$: isTarget = connection.current.toHandle?.id !== id;
</script>
<div class="rounded-badge card card-compact bg-base-content">
{#if !isConnecting}
<Handle class="customHandle" position={Position.Right} type="source" style="z-index: 1;" />
{/if}
<!-- <Handle class="customHandle" position={Position.Right} type="source" /> -->
<Handle class="customHandle" position={Position.Left} type="target" isConnectableStart={false} />
<div class="card-body w-30 items-center text-center">
<div class="avatar">
<figure class="mask mask-squircle w-24">
<img src={data.profile_picture} alt="Picture of {data.last_name} {data.first_name}" />
</figure>
</div>
<h2 class="card-title text-base-content">
{data.first_name}
{data.middle_name ? data.middle_name : ''}
{data.last_name}
</h2>
<h3 class="card-title text-base-content">
{data.born}
{data.death ? ' - ' + data.death : ''}
</h3>
</div>
</div>

View File

@@ -3,8 +3,8 @@
import { i18n } from '$lib/i18n';
import { ParaglideJS } from '@inlang/paraglide-sveltekit';
let { children } = $props();
import ThemeButton from '$lib/theme-select.svelte';
import Logout from '$lib/logout.svelte';
import ThemeButton from '$lib/ThemeSelect.svelte';
import Logout from '$lib/Logout.svelte';
import { page } from '$app/state';
</script>

View File

@@ -1,32 +1,27 @@
<script lang="ts">
import { title, family_tree } from '$lib/paraglide/messages.js';
import type { PageData } from './$types';
import {
SvelteFlowProvider,
Background,
BackgroundVariant,
SvelteFlow,
Controls,
MiniMap
} from '@xyflow/svelte';
import { title, family_tree, people } from '$lib/paraglide/messages.js';
import type { PageProps } from './$types';
import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import type { Node, Edge, NodeTypes, NodeProps } from '@xyflow/svelte';
let data: PageData = $props();
import PersonNode from '$lib/graph/PersonNode.svelte';
import type { components } from '$lib/api/api.gen';
let { data, form }: PageProps = $props();
const nodeTypes: NodeTypes = { personNode: PersonNode };
let ppl = data.people;
if (ppl === undefined) {
ppl = [];
}
if (ppl[0].id === undefined) {
ppl[0].id = 0;
}
let nodes = $state.raw<Node[]>([
{
id: '1',
type: 'input',
data: { label: 'Input Node' },
id: String(ppl[0].id),
type: 'personNode',
data: ppl[0] as components['schemas']['PersonProperties'],
position: { x: 0, y: 0 }
},
{
id: '2',
data: { label: 'Default Node' },
position: { x: 100, y: 100 }
},
{
id: '3',
data: { label: 'Output Node' },
position: { x: 200, y: 200 }
}
]);
let edges = $state.raw<Edge[]>([]);
@@ -36,11 +31,18 @@
<title>{title({ page: family_tree() })}</title>
</svelte:head>
<div style="height:100vh;" class="flex flex-col bg-base-200">
<div style="height:100vh;" class="!bg-base-200 flex flex-col">
<SvelteFlowProvider>
<SvelteFlow bind:nodes bind:edges class="bg-base-200" fitView onlyRenderVisibleElements>
<MiniMap />
<Controls />
<SvelteFlow
bind:nodes
bind:edges
class="!bg-base-200"
{nodeTypes}
fitView
onlyRenderVisibleElements
>
<MiniMap class="!bg-base-300" />
<Controls class="!bg-base-300" />
</SvelteFlow>
</SvelteFlowProvider>
</div>

View File

@@ -196,7 +196,7 @@ async function register(event: RequestEvent) {
});
}
const sessionToken = generateSessionToken();
if (!response.data?.Id) {
console.log(response.data)
return fail(400, {
@@ -210,6 +210,7 @@ async function register(event: RequestEvent) {
});
}
const sessionToken = generateSessionToken(String(response.data.Id));
const session = await createSession(
sessionToken,
response.data.Id,