mirror of
https://github.com/vcscsvcscs/GenerationsHeritage.git
synced 2025-08-13 22:39:06 +02:00
fixup css and start node implementation
This commit is contained in:
@@ -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" />
|
||||
|
43
apps/app/src/lib/graph/PersonNode.svelte
Normal file
43
apps/app/src/lib/graph/PersonNode.svelte
Normal 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>
|
@@ -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>
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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,
|
||||
|
Reference in New Issue
Block a user