deleted unused svelte preprocessor

package-lock.json

@@ -27,6 +27,7 @@
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"@testing-library/jest-dom": "^6.6.3",
 				"@testing-library/svelte": "^5.2.4",
+				"@tsconfig/svelte": "^5.0.4",
 				"eslint": "^9.18.0",
 				"eslint-config-prettier": "^10.0.1",
 				"eslint-plugin-svelte": "^3.0.0",
@@ -35,8 +36,8 @@
 				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.3.3",
 				"svelte": "^5.0.0",
-				"svelte-check": "^4.0.0",
+				"svelte-check": "^4.2.1",
-				"typescript": "^5.0.0",
+				"typescript": "^5.8.3",
 				"typescript-eslint": "^8.20.0",
 				"vite": "^6.2.5",
 				"vitest": "^3.0.0"
@@ -1633,6 +1634,13 @@
 				}
 			}
 		},
+		"node_modules/@tsconfig/svelte": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-5.0.4.tgz",
+			"integrity": "sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@types/aria-query": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -5672,9 +5680,9 @@
 			}
 		},
 		"node_modules/svelte-check": {
-			"version": "4.1.5",
+			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.1.5.tgz",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.2.1.tgz",
-			"integrity": "sha512-Gb0T2IqBNe1tLB9EB1Qh+LOe+JB8wt2/rNBDGvkxQVvk8vNeAoG+vZgFB/3P5+zC7RWlyBlzm9dVjZFph/maIg==",
+			"integrity": "sha512-e49SU1RStvQhoipkQ/aonDhHnG3qxHSBtNfBRb9pxVXoa+N7qybAo32KgA9wEb2PCYFNaDg7bZCdhLD1vHpdYA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

package.json

@@ -25,6 +25,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
+		"@tsconfig/svelte": "^5.0.4",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -33,8 +34,8 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.2.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^6.2.5",
 		"vitest": "^3.0.0"

src/lib/components/ui/Alert.svelte

@@ -46,7 +46,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	export let type = 'info';
 	let classNames = '';
 	export { classNames as class };

src/lib/components/ui/Button.svelte

@@ -173,7 +173,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	export let href = null;
 	export let type = 'button';
 	export let size = 'md';

src/lib/components/ui/DeleteIconButton.svelte

@@ -11,7 +11,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	import { page } from '$app/stores';
 	import Trash from '$lib/icons/Trash.svelte';
 	import Panel from '$lib/components/ui/Panel.svelte';

src/lib/components/ui/Modal/Modal.svelte

@@ -41,7 +41,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	import { fade } from 'svelte/transition';
 	export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
 	export let open = false;

src/lib/components/ui/Modal/ModalContent.svelte

@@ -15,7 +15,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	export let scroll = true;
 	export let padding = true;
 

src/lib/components/ui/Notification.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	export let title = 'Erfolgreich';
 	export let show = false;
 

src/lib/components/ui/Panel.svelte

@@ -5,7 +5,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	export let padding = 'p-6';
 	export let shadow = true;
 	let classNames = '';

src/lib/components/ui/Select.svelte

@@ -6,7 +6,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	import { clickOutside } from '$lib/helpers/clickOutside.js';
 	import Check from '$lib/icons/Check.svelte';
 	import Selector from '$lib/icons/Selector.svelte';

src/routes/(angemeldet)/+layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Chevron from '$lib/icons/Chevron-right.svelte';
 	import Login from '$lib/icons/Login.svelte';
 

src/routes/(angemeldet)/+page.svelte

@@ -1,7 +1,7 @@
 <style>
 </style>
 
-<script>
+<script lang="ts">
 	import Panel from '$lib/components/ui/Panel.svelte';
 
 	export let data;
@@ -40,7 +40,7 @@
 				</p>
 			</div>
 		{/if}
-		<!--{#if data.user.admin}
+		{#if data.user.admin}
 			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 				<div
 					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -66,7 +66,7 @@
 				</a>
 				<p class="mt-1 text-gray-600">Stelle einen weiteren Tatort für die Anwendung bereit.</p>
 			</div>
-		{/if}-->
+		{/if}
 		{#if data.user.admin}
 			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 				<div

src/routes/(angemeldet)/list/[vorgang]/+page.svelte

@@ -19,7 +19,7 @@
 	import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
 
 	/** @type {import('./$types').PageData} */
-	export let data;
+	/** export let data; */
 
 	interface ListItem {
 		name: string;

src/routes/(angemeldet)/tatorte/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Modal from '$lib/components/ui/Modal/Modal.svelte';
@@ -73,24 +73,8 @@
 							<p class="block text-sm leading-6 text-red-900 mt-2">{form.error.description}</p>
 						{/if}
 					</div>
-
-					<label for="code">
-					<span >Zugangscode (optional) </span>
-					</label>
-
-					<div class="mt-2">
-					<div
-					>
-						<input
-							type="text"
-							id="code"
-						/>
-					</div>
-					</div>
-
 				</div>
 			</div>
-
 			<div class="mt-6 flex items-center justify-end gap-x-6">
 				<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
 				<Button

src/routes/(angemeldet)/upload/+page.server.ts

@@ -22,7 +22,6 @@ export const actions = {
 		const vorgang = data.get('vorgang');
 		const name = data.get('name');
 		const type = data.get('type');
-		const code = data.get('zugangscode');
 		const fileName = data.get('fileName');
 
 		let objectName = `${vorgang}/${name}`;
@@ -36,8 +35,6 @@ export const actions = {
 
 		const url = await client.presignedPutObject('tatort', objectName);
 
-		// enter code
-
 		return { url };
 	},
 	validate: async ({ request }) => {
@@ -45,7 +42,6 @@ export const actions = {
 		const data = Object.fromEntries(requestData);
 		const vorgang = data.vorgang;
 		const name = data.name;
-		const zugangscode = data.zugangscode;
 		let success = true;
 		let err = {};
 
@@ -61,12 +57,6 @@ export const actions = {
 			success = false;
 		}
 
-		if (isRequiredFieldValid(zugangscode)) err.zugangscode = null;
-		else {
-			err.zugangscode = 'Das Feld Zugangscode darf nicht leer bleiben.';
-			success = false;
-		}
-
 		if (success) return { success };
 
 		return fail(400, err);
@@ -109,8 +99,5 @@ export const actions = {
 
 		return { etag, error };
 		//await writeFile(filePath, Buffer.from(await data.file.arrayBuffer()));
-	},
-	get_code: async ({ request }) => {
-		console.log('TO-DO');
 	}
 };

src/routes/(angemeldet)/upload/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { deserialize, enhance } from '$app/forms';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -14,16 +14,6 @@
 	let open = false;
 	let inProgress = false;
 	let vorgang = '';
-	const code_len = 8;
-	let zugangscode = ''
-	let zugangscode_prev = '';
-
-	$: zugangscode = Math.random().toString(36).slice(2, 2+code_len);
-
-
-	let case_existing = undefined;
-	$: case_existing = false;
-
 	let name = '';
 	/** @type {?string}*/
 	let etag = null;
@@ -39,7 +29,6 @@
 		let data = new FormData();
 		data.append('vorgang', vorgang);
 		data.append('name', name);
-		data.append('zugangscode', zugangscode)
 		const response = await fetch('?/validate', { method: 'POST', body: data });
 		/** @type {import('@sveltejs/kit').ActionResult} */
 		const result = deserialize(await response.text());
@@ -70,7 +59,6 @@
 		let data = new FormData();
 		data.append('vorgang', vorgang);
 		data.append('name', name);
-		data.append('zugangscode', zugangscode)
 		if (files?.length === 1) {
 			data.append('type', files[0].type);
 			data.append('fileName', files[0].name);
@@ -155,33 +143,6 @@
 
 	}
 
-	// return true or false
-	async function case_exists(case_no) {
-		// ping `/(angemeldet)/view` with caseNumber in POST body
-		let url = '/view'
-		let data = new FormData();
-		data.append('caseNumber', case_no);
-		const response = await fetch(url, {
-			method: 'POST',
-			body: data,
-			redirect: 'error'
-			})
-
-		const res_json = await response.json();
-		const status = res_json.status;
-
-		// aktualisiere Zugangscode mit
-		if (status == 303) {
-			// TO-DO: check existing code
-
-			console.log(`+ existiert`)
-			case_existing = true;
-			return;
-		}
-
-		case_existing = false;
-	}
-
 </script>
 
 <div class="mx-auto max-w-2xl">
@@ -216,18 +177,12 @@
 									id="vorgang"
 									autocomplete={vorgang}
 									class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
-									on:input={() => case_exists(vorgang)}
 								/>
 							</div>
 						</div>
 						{#if formErrors?.vorgang}
 							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.vorgang}</p>
 						{/if}
-						{#if case_existing && (vorgang.length > 0) }
-							<span>Datei wird zum existierenden Vorgang hinzugefügt.</span>
-						{:else if (vorgang.length > 0) }
-							<span>Neuer Vorgang wird angelegt.</span>
-						{/if}
 					</div>
 
 					<div>
@@ -257,32 +212,6 @@
 						{/if}
 					</div>
 
-					<div>
-						<label for="zugangscode" class="block text-sm font-medium leading-6 text-gray-900"
-							><span class="flex"
-								>{#if formErrors?.zugangscode}
-									<span class="inline-block mr-1"><Exclamation /></span>
-								{/if} Zugangscode</span
-							></label
-						>
-						<div class="mt-2">
-							<div
-								class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
-							>
-								<input
-									bind:value={zugangscode}
-									type="text"
-									name="zugangscode"
-									id="zugangscode"
-									class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
-								/>
-							</div>
-						</div>
-						{#if formErrors?.code}
-							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.code}</p>
-						{/if}
-					</div>
-
 					<div class="col-span-full">
 						<label for="file" class="block text-sm font-medium leading-6 text-gray-900"
 							><span class="flex"

src/routes/(angemeldet)/view/+page.server.ts

@@ -22,6 +22,6 @@ export const actions = {
 				error: { caseNumber: 'Die Vorgangsnummer existiert in dieser Anwendung nicht.' }
 			});
 		}
-		redirect(303, `/list/${caseNumber}`);
+		throw redirect(303, `/list/${caseNumber}`);
 	}
 };

src/routes/(angemeldet)/view/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Modal from '$lib/components/ui/Modal/Modal.svelte';

src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte

@@ -1,43 +1,53 @@
-<script>
+<style>
+	model-viewer {
+		height: 100%;
+		width: 100%;
+	}
+
+
+  .model{
+		height: calc(100%-84px)
+	}
+
+</style>
+
+<script lang="ts">
+	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/ui/Button.svelte';
+	import autoprefixer from 'autoprefixer';
 	
 	export let data;
 
 	onMount(() => {
 		import('@google/model-viewer');
+		console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
 	});
 
 	let progress = 0;
 	let hideProgressScreen = false;
 
-	let cameraOrbit = '0deg 0deg 100%';
+	let cameraOrbit = '0deg 0deg 0m';
-	let cameraTarget = '0m 0m 0m';
+	let cameraTarget ="0m 0m 0m";
-	let fieldOfView = '10deg';
+	let fieldOfView = '0deg';
 
 	let cameraAzimuth = 0;
 	let cameraPolar = 0;
-
+	let cameraZoom = 0;
-	let frontView = cameraAzimuth === 0 && cameraPolar === 0 ? true : false;
+	let xRotation=0;
-
+	let yRotation=0;
-	let topView = cameraAzimuth === 0 && cameraPolar === 90 ? true : false;
+	let zRotation=0;
-
-	let cameraZoom = 100;
-	let xRotation = 0;
-	let yRotation = 0;
-	let zRotation = 0;
 
 	/**
 	 * @type {any}
 	 */
 	let modelViewer;
 
+
 	$: style = `width: ${progress}%`;
 
-	/**
+	// @ts-ignore
-	 * @param {any} detail
-	 */
 	function onProgress({ detail }) {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
@@ -47,141 +57,177 @@
 		} else hideProgressScreen = false;
 	}
 
+
 	function onResetView() {
-		console.log(
+		  cameraOrbit = '0deg 0deg 0m';
-			'show cameraOrbit:',
+		  cameraTarget ="0m 0m 0m"
-			modelViewer.getCameraOrbit(),
+
-			modelViewer.cameraOrbit,
+		console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
-			modelViewer.getDimensions()
+		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
-		);
+
-		console.log(
+		  modelViewer.cameraOrbit = cameraOrbit;
-			'Camera-orbit: ',
+		  modelViewer.cameraTarget = cameraTarget;
-			modelViewer.getAttribute('camera-orbit'),
+		  xRotation = yRotation = zRotation = 0;
-			'camera-target: ',
+		cameraOrbit = '0deg 0deg 0%';
-			modelViewer.getAttribute('camera-target'),
+	 cameraTarget ="0m 0m 0m";
-			'object-rotation: ',
+	fieldOfView = '0deg';
-			modelViewer.getAttribute('rotation')
+
-		);
+	 cameraAzimuth = 0;
+	 cameraPolar = 0;
+	 cameraZoom = 0;
 	
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
 
-		modelViewer.cameraOrbit = cameraOrbit;
-		modelViewer.cameraTarget = cameraTarget;
-		modelViewer.fieldOfView = fieldOfView;
-		cameraAzimuth = 0;
-		cameraPolar = 0;
-		cameraZoom = 100;
-		fieldOfView = '10deg';
 	}
 
 	/**
-	 * @param {number} azimuth
+	 * @param {string} newOrbit
-	 * @param {number} polar
-	 * @param {number} zoom
 	 */
-	function updateCameraOrbit(azimuth, polar, zoom) {
+	function updateCameraOrbit(newOrbit) {
-		cameraAzimuth = azimuth;
+		 
-		cameraPolar = polar;
+	//    cameraTarget ="0m 0m 0m"
-		cameraZoom = zoom;
+		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
+		  modelViewer.cameraOrbit = newOrbit;
+		  modelViewer.cameraTarget = cameraTarget;
+
 	}
+
+	function slideCameraOrbit(){
+		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
+	}
+
+	function slideRotation(){
+		modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
+	}
+
+	const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
+    event.preventDefault(); // Blockiert das Mausrad-Ereignis
+  };
+
 </script>
 
-<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
+<!-- 		<Button
+			on:click={toggleShowOptions}
+			{disabled}
+			type="button"
+			variant="white"
+			fullWidth
+			align="left"
+			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+		> -->
+
+<div class="h-full model w-full bg-neutral-200  p-4">
+
+			<!-- field-of-view="auto" -->
+		<!--
+				camera-controls
+		model-rotation="0rad 0rad 0rad"
+		
+		camera-target="0m 0m 10m"
+		
+		field-of-view="auto"
+		max-field-of-view="10deg"
+		min-field-of-view="0.1deg"-->
 	<model-viewer
 		src={data.url}
 		bind:this={modelViewer}
-		touch-action="pan-y"
+	touch-action="pan-y"
-		field-of-view={fieldOfView}
+	field-of-view="auto"
-		min-field-of-view="1deg"
+	camera-controls
-		max-field-of-view="10deg"
+	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
-		camera-controls
-		orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
 		camera-target="0m 0m 0m"
-		camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
+		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
 		on:progress={onProgress}
 	>
-		<!--Buttons zum Steuern-->
+<!--Buttons zum Steuern-->
-		<div
+	<div class="bg-redx-500 p-4 flex z-10">
-			class=" p-4 flex z-10 absolute bottom-0"
+		<div class="flex flex-col">
-			class:opacity-0={!hideProgressScreen}
-			class:hidden={!hideProgressScreen}
-		>
-			<div class="flex flex-col bg-white/50">
 				<!--3 Buttons-->
-				<div class="p-2">
+				<div>
 					<Button
-						on:click={() => {
+					on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
-							updateCameraOrbit(0, 0, cameraZoom);
+					type="button"
-						}}
+					variant="white"
-						type="button"
+					
-						variant="white"
+					align="left"
-						align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left "
 					>
-						Draufsicht
+					Draufsicht
 					</Button>
 					<Button
-						on:click={() => {
+					on:click={()=>{onResetView()}}
-							onResetView();
+					type="button"
-						}}
+					variant="white"
-						type="button"
+					
-						variant="white"
+					align="left"
-						align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 					>
-						Werte zurücksetzen
+					Werte zurücksetzen
 					</Button>
 		
 					<Button
-						on:click={() => {
+					
-							updateCameraOrbit(0, 90, cameraZoom);
+					on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
-						}}
+		
-						type="button"
+					type="button"
-						variant="white"
+					variant="white"
-						align="left"
+					
-						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+					align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 					>
-						Frontansicht
+					Frontansicht
 					</Button>
+				
 				</div>
 				
 				<!--Horizontal-->
-				<div class="p-2">
+				<div>
-					<label for="cazimuth">Horizontal drehen (Azimut):</label>
+							<!-- svelte-ignore a11y_label_has_associated_control -->
-					<input id="cazimuth" type="range" min="0" max="360" bind:value={cameraAzimuth} />
+							<label>Horizontal drehen (Azimut):</label>
-				</div>
+							<input 
-				<!--Vertikal-->
+							type="range" 
-				<div class="p-2">
+							min="0" max="360" 
-					<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+							bind:value={cameraAzimuth} 
-					<input id="polarSlider" type="range" min="0" max="90" bind:value={cameraPolar} />
+							 />
+							 <!-- on:input={slideCameraOrbit} -->
 				</div>
+						<!--Vertikal-->
+			<div class="">
+				<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+				<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
+				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
 				<!--Zoom/Distanz-->
-				<div class="p-2">
+				<div>
-					<label for="cZoom">Abstand (zoom):</label>
+					<label for="cZoom">Zoomen</label>
-					<input id="cZoom" type="range" min="0" max="100" bind:value={cameraZoom} />
+					<input id="cZoom" type="range"
+					min="0"
+					max="120"
+			
+					 bind:value={cameraZoom} 
+					 on:input={slideCameraOrbit}/>
 				</div>
-			</div>
-			<!--Rotationen-->
-			<div class="flex flex-col ml-2 p-4 bg-white/50">
-				Modell rotieren lassen:
-				<br />
-				Modell auf dem Kopf? -> y auf 270°
-				<div class="p-2">
-					<label class="" for="polarSlider">Rotation X:</label>
-					<input id="polarSlider" type="range" min="0" max="360" bind:value={xRotation} />
-				</div>
-				<div class="p-2">
-					<label class="" for="polarSlider">Rotation Y:</label>
-					<input id="polarSlider" type="range" min="0" max="360" bind:value={yRotation} />
-				</div>
-				<div class="p-2">
-					<label class="" for="polarSlider">Rotation Z:</label>
-					<input id="polarSlider" type="range" min="0" max="360" bind:value={zRotation} />
-				</div>
-			</div>
 		</div>
+			<!--Rotationen-->
+			<div class="flex  mt-2 ml-2">
+				
+			<div class="">
+				<label class="" for="polarSlider">Rotation X:</label>
+				<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
+				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+	<div class="">
+		<label class="" for="polarSlider">Rotation Y:</label>
+		<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
+		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+	<div class="">
+		<label class="" for="polarSlider">Rotation Z:</label>
+		<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
+		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+			</div>
+			
+				</div>
 		<!--Loading-->
 		<div
 			slot="progress-bar"
@@ -192,30 +238,9 @@
 			<Panel class="w-72 bg-gray-50 flex items-center flex-col"
 				><p class="mb-5">Loading {progress}%</p>
 				<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
-					<div class="h-1 bg-blue-500" {style}></div>
+					<div class="h-1 bg-blue-500" {style} ></div>
 				</div></Panel
 			>
 		</div>
 	</model-viewer>
 </div>
-
-<style>
-	model-viewer {
-		height: 100%;
-		width: 100%;
-	}
-
-	/* .vertical-slider {
-		writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung)
-		transform: rotate(270deg); /* Slider um 270° drehen
-		height: 200px;
-	} */
-
-	.model {
-		height: calc(100%-84px);
-	}
-
-	/* .active-border {
-		border: 2px blue solid;
-	} */
-</style>

src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 </script>
 

src/routes/anmeldung/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';

tsconfig.json

@@ -10,7 +10,9 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler"
-	}
+	},
+	"include": ["src/**/*", "src/node_modules"],
+	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//