Feature/csv

src/package.json

@@ -86,6 +86,7 @@
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
 		"canvas-confetti": "^1.9.3",
+		"csv-parse": "^5.5.6",
 		"date-fns": "^4.1.0",
 		"mongodb": "^6.8.0",
 		"mongoose": "^8.4.5",

src/src/lib/components/modals/user/Add.svelte

@@ -1,41 +1,62 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { Button, Modal, Label, Input, Fileupload } from 'flowbite-svelte';
 	import toast, { Toaster } from 'svelte-french-toast';
+	import { Button, Modal, Label, Input, Fileupload, Helper, Tabs, TabItem } from 'flowbite-svelte';
 
 	export let role: string;
 	export let open: boolean;
+
 	let value: string;
+	let activeTab = 0;
 
-	function close({ formData, cancel }: any) {
+	function closeSingle({ formData, cancel }: any) {
 		const image = formData.get('image') as File;
 
 		if (image && image.name !== '') {
 			const extension = image.name.split('.').pop()?.toLowerCase();
-
 			if (image.size > 1000000) {
 				toast.error('The size of file should be less than 1 MB!');
 				cancel();
 				return;
 			}
-
 			const imageExtensions = ['jpg', 'jpeg', 'png', 'svg'];
-
 			if (!(extension && imageExtensions.includes(extension))) {
 				toast.error('File type is not supported');
 				cancel();
 				return;
 			}
 		}
+		return handleSubmit('single');
+	}
+
+	function closeMulti({ formData, cancel }: any) {
+		const file = formData.get('csv') as File;
 
+		if (file && file.name !== '') {
+			const extension = file.name.split('.').pop()?.toLowerCase();
+			if (file.size > 4000000) {
+				toast.error('The size of file should be less than 4 MB!');
+				cancel();
+				return;
+			}
+			if (extension != 'csv') {
+				toast.error('File type is not supported');
+				cancel();
+				return;
+			}
+		}
+		return handleSubmit('multi');
+	}
+
+	function handleSubmit(type: 'single' | 'multi') {
 		return ({ result, update }: any) => {
 			const promise = new Promise((resolve, reject) => {
 				setTimeout(async () => {
 					try {
 						if (result.type === 'success') {
 							await update();
 							open = false;
-							resolve(`${role} succesfully added!`);
+							resolve(`${role}${type === 'multi' ? 's' : ''} successfully added!`);
 						} else {
 							reject(result.data?.error || 'An unknown error occurred');
 						}
@@ -44,50 +65,65 @@
 					}
 				}, 500);
 			});
-
 			toast.promise(promise, {
-				loading: `Adding ${role}...`,
+				loading: `Adding ${role}${type === 'multi' ? 's' : ''}...`,
 				success: (message) => `${message}`,
 				error: (error) => `${error}`
 			});
-
 			return promise;
 		};
 	}
 </script>
 
 <Toaster />
-<Modal bind:open size="xs" class="w-full">
-	<form
-		method="POST"
-		action="?/add"
-		class="flex flex-col space-y-6"
-		use:enhance={close}
-		enctype="multipart/form-data"
-	>
-		<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add {role}</h3>
-
-		<Label for="name" class="space-y-2">
-			<span>Name</span>
-			<Input type="text" id="name" name="name" placeholder="John" required />
-		</Label>
-
-		<Label for="surname" class="space-y-2">
-			<span>Surname</span>
-			<Input type="text" id="surname" name="surname" placeholder="Doe" required />
-		</Label>
 
-		<Label for="email" class="space-y-2">
-			<span>Email</span>
-			<Input type="email" id="email" name="email" placeholder="[email protected]" required />
-		</Label>
-
-		<Label for="image" class="space-y-2">
-			<span>Image</span>
-			<Fileupload bind:value id="image" name="image" />
-		</Label>
+<Modal bind:open size="xs" class="w-full">
+	<Tabs style="underline" bind:activeTab>
+		<TabItem open title="Single">
+			<form
+				method="POST"
+				action="?/add"
+				class="flex flex-col space-y-6"
+				use:enhance={closeSingle}
+				enctype="multipart/form-data"
+			>
+				<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add {role}</h3>
+				<Label for="name" class="space-y-2">
+					<span>Name</span>
+					<Input type="text" id="name" name="name" placeholder="John" required />
+				</Label>
+				<Label for="surname" class="space-y-2">
+					<span>Surname</span>
+					<Input type="text" id="surname" name="surname" placeholder="Doe" required />
+				</Label>
+				<Label for="email" class="space-y-2">
+					<span>Email</span>
+					<Input type="email" id="email" name="email" placeholder="[email protected]" required />
+				</Label>
+				<Label for="image" class="space-y-2">
+					<span>Image</span>
+					<Fileupload bind:value id="image" name="image" />
+				</Label>
+				<Button type="submit" class="w-full">Add {role}</Button>
+			</form>
+		</TabItem>
 
-		<Button type="submit" class="w-full1">Add {role}</Button>
-	</form>
-	<!-- <Loading {loading} text="Submitting"/> -->
+		<TabItem title="Multiple">
+			<form
+				method="POST"
+				action="?/addMulti"
+				class="flex flex-col space-y-6"
+				use:enhance={closeMulti}
+				enctype="multipart/form-data"
+			>
+				<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add Multiple {role}s</h3>
+				<Label for="csv" class="space-y-2">
+					<span>{role}s CSV</span>
+					<Fileupload bind:value id="csv" name="csv" />
+					<Helper>Only CSV files are supported</Helper>
+				</Label>
+				<Button type="submit" class="w-full">Add {role}s</Button>
+			</form>
+		</TabItem>
+	</Tabs>
 </Modal>

src/src/lib/components/sandbox/ModelViewer.svelte

@@ -3,7 +3,7 @@
 	import { Box3, Vector3 } from 'three';
 	import type { Object3D } from 'three';
 	import { writable } from 'svelte/store';
-	import { XR } from '@threlte/xr';
+	import { XR, useXR } from '@threlte/xr';
 	import { Checkbox, Pane, ThemeUtils, Slider, List } from 'svelte-tweakpane-ui';
 	import { GLTF, OrbitControls, Sky, TransformControls, useGltfAnimations } from '@threlte/extras';
 
@@ -25,6 +25,7 @@
 
 	const animationNames = writable<string[]>([]);
 	const { gltf, actions } = useGltfAnimations();
+	const { isPresenting } = useXR();
 
 	const normalizeModel = (object: Object3D) => {
 		const box = new Box3().setFromObject(object);
@@ -68,49 +69,44 @@
 	}
 </script>
 
-<VR {currentModel} />
-
 <XR>
+	<VR {currentModel} />
+</XR>
+
+{#if !$isPresenting}
 	<T.PerspectiveCamera
 		fov={25}
 		makeDefault
 		position={[0, 0, 5]}
 		on:create={({ ref }) => ref.lookAt(0, 0, 0)}
-	/>
-</XR>
+	>
+		<Menu />
+
+		<OrbitControls
+			{zoomSpeed}
+			{rotateSpeed}
+			{autoRotate}
+			{enableZoom}
+			{zoomToCursor}
+			{enableDamping}
+		/>
+	</T.PerspectiveCamera>
+
+	{#if showTransformControls}
+		<GLTF bind:gltf={$gltf} url={currentModel} on:create={handleModelCreate} />
 
-<T.PerspectiveCamera
-	fov={25}
-	makeDefault
-	position={[0, 0, 5]}
-	on:create={({ ref }) => ref.lookAt(0, 0, 0)}
->
-	<Menu />
-
-	<OrbitControls
-		{zoomSpeed}
-		{rotateSpeed}
-		{autoRotate}
-		{enableZoom}
-		{zoomToCursor}
-		{enableDamping}
-	/>
-</T.PerspectiveCamera>
+		{#if model}
+			<TransformControls bind:object={model} />
+		{/if}
+	{:else}
+		<GLTF bind:gltf={$gltf} url={currentModel} on:create={handleModelCreate} />
+	{/if}
+{/if}
 
 <Sky />
 
 <T.AmbientLight intensity={1} />
 
-{#if showTransformControls}
-	<GLTF bind:gltf={$gltf} url={currentModel} on:create={handleModelCreate} />
-
-	{#if model}
-		<TransformControls bind:object={model} />
-	{/if}
-{:else}
-	<GLTF bind:gltf={$gltf} url={currentModel} on:create={handleModelCreate} />
-{/if}
-
 <Pane position="fixed" theme={ThemeUtils.presets.translucent} title="Object Settings">
 	<Checkbox bind:value={autoRotate} label="autoRotate" />
 	<Checkbox bind:value={enableZoom} label="enableZoom" />