mirror of
https://github.com/vcscsvcscs/GenerationsHeritage.git
synced 2025-08-14 06:49:05 +02:00
Create person node
This commit is contained in:
2142
frontend/package-lock.json
generated
2142
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -16,16 +16,21 @@
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.10.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-svelte": "^3.2.2",
|
||||
"svelte": "^4.2.12",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"vite": "^5.0.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@xyflow/svelte": "^0.0.41",
|
||||
"svelte-eslint-parser": "^0.33.1"
|
||||
}
|
||||
}
|
||||
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
@@ -1,14 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
<html lang="en" style="width: 100vw; height: 100vh;">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover" style="width: 100vw; height: 100vh;">
|
||||
<div style="display: contents; width: 100vw; height: 100vh;">%sveltekit.body%</div>
|
||||
<div class="dropdown mb-72" style="position: absolute; left: auto; right: 3vw; top: 10px; bottom: auto">
|
||||
<div tabindex="0" role="button" class="btn m-1">
|
||||
Theme
|
||||
<svg width="12px" height="12px" class="h-2 w-2 fill-current opacity-60 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
|
||||
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] p-2 shadow-2xl bg-base-300 rounded-box w-36">
|
||||
<li>
|
||||
<input type="radio" name="theme-dropdown"
|
||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Light"
|
||||
value="light" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="theme-dropdown"
|
||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Dark"
|
||||
value="dark" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="theme-dropdown"
|
||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk"
|
||||
value="cyberpunk" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="theme-dropdown"
|
||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Synthwave"
|
||||
value="synthwave" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="theme-dropdown"
|
||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro"
|
||||
value="retro" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
49
frontend/src/lib/family_tree/PersonNode.svelte
Normal file
49
frontend/src/lib/family_tree/PersonNode.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import { Handle, Position } from '@xyflow/svelte';
|
||||
|
||||
export let person = {
|
||||
ID : "",
|
||||
Lastname : "Nem",
|
||||
Firstname : "Ismert",
|
||||
Middlename : "",
|
||||
ProfilePicture : "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="rounded-badge card card-compact bg-primary">
|
||||
<div class="card-body items-center text-center w-30">
|
||||
<div class="avatar">
|
||||
<figure class="w-24 mask mask-squircle">
|
||||
<img src="{person.ProfilePicture}" alt="Picture of {person.Lastname} {person.Firstname}" />
|
||||
</figure>
|
||||
</div>
|
||||
<h2 class="card-title text-primary-content">{person.Lastname} {person.Firstname} {person.Middlename}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Top}
|
||||
id="sibling"
|
||||
style="transform: translate(10px, 50%); left: 0;"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Top}
|
||||
id="sibling"
|
||||
style="transform: translate(0, 50%); left: auto; right: 10px"
|
||||
/>
|
||||
<Handle type="target" position={Position.Top} id="parent" style="transform: translate(0, 50%);" />
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
id="right"
|
||||
style="transform: translate(-3px, 50%);"
|
||||
/>
|
||||
<Handle type="target" position={Position.Left} id="left" style="transform: translate(3px, 50%);" />
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id="child"
|
||||
style="transform: translate(0, -3px);"
|
||||
/>
|
||||
@@ -1 +1,3 @@
|
||||
export const prerender = true;
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import '@xyflow/svelte/dist/style.css';
|
||||
|
||||
@@ -1,4 +1,48 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>
|
||||
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
|
||||
</p>
|
||||
<script>
|
||||
import PersonNode from './../lib/family_tree/PersonNode.svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { SvelteFlowProvider, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
|
||||
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
data: { label: 'Hello' },
|
||||
position: { x: 0, y: 0 }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: 'World' },
|
||||
position: { x: 0, y: 150 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: 'World' },
|
||||
position: { x: 250, y: 150 },
|
||||
type: 'custom'
|
||||
}
|
||||
]);
|
||||
const edges = writable([
|
||||
{
|
||||
id: '1-2',
|
||||
source: '1',
|
||||
target: '2'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]);
|
||||
const nodeTypes = {
|
||||
custom: PersonNode
|
||||
};
|
||||
</script>
|
||||
|
||||
<div style="height:100vh;">
|
||||
<SvelteFlowProvider>
|
||||
<SvelteFlow {nodes} {nodeTypes} {edges} class="bg-base-100" fitView onlyRenderVisibleElements>
|
||||
<Controls />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter({
|
||||
pages: 'build',
|
||||
|
||||
11
frontend/tailwind.config.js
Normal file
11
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,svelte,js,ts}'],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
daisyui: {
|
||||
themes: ['light', 'dark', 'cyberpunk', 'synthwave', 'retro', 'roboto', 'dracula']
|
||||
},
|
||||
plugins: [require('daisyui')]
|
||||
};
|
||||
Reference in New Issue
Block a user