From 9f11fc201bcc984ea6f7fb8139f080405ff2f4b4 Mon Sep 17 00:00:00 2001
From: work <s.a.fivaz@gmail.com>
Date: Wed, 17 Apr 2024 02:38:15 +0200
Subject: [PATCH] add image to events

---
 src/lib/components/task-form/TaskForm.svelte  | 112 ++++++++++++++++--
 src/lib/components/task-form/service.ts       |  17 ++-
 .../task-form/task-form.stories.svelte        |   3 +-
 src/lib/user-utis.ts                          |   2 +-
 .../dashboard/profile/profile/Profile.svelte  |   4 +-
 src/routes/register/register/Register.svelte  |   4 +-
 static/manifest.json                          |  24 ++--
 static/task-placeholder-image.webp            | Bin 0 -> 2444 bytes
 8 files changed, 130 insertions(+), 36 deletions(-)
 create mode 100644 static/task-placeholder-image.webp

diff --git a/src/lib/components/task-form/TaskForm.svelte b/src/lib/components/task-form/TaskForm.svelte
index 376d96b4..b43886a8 100644
--- a/src/lib/components/task-form/TaskForm.svelte
+++ b/src/lib/components/task-form/TaskForm.svelte
@@ -17,15 +17,24 @@
 		getDuration,
 		getEndTime,
 		removeTask,
+		storeImage,
 	} from '$lib/components/task-form/service';
 	import Toggle from '$lib/components/toggle/Toggle.svelte';
 	import TypedCollection from '$lib/components/typed-collection/TypedCollection.svelte';
 	import { convertToAnyTask, hasErrors } from '$lib/task/utils';
-	import { Transition } from '@rgossiaux/svelte-headlessui';
-	import { XMark } from '@steeze-ui/heroicons';
+	import {
+		Disclosure,
+		DisclosureButton,
+		DisclosurePanel,
+		Transition,
+	} from '@rgossiaux/svelte-headlessui';
+	import { ChevronRight, Photo, XMark } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import 'flatpickr/dist/themes/airbnb.css';
 	import { createEventDispatcher } from 'svelte'; // TODO check later how I should import a precompiled component https://github.com/sveltejs/svelte/issues/604
+	import { storage } from '$lib/firebase';
+	import { FirebaseError } from 'firebase/app';
+	import { getDownloadURL, ref } from 'firebase/storage';
 	import Flatpickr from 'svelte-flatpickr';
 
 	import type { TaskIn } from './service';
@@ -51,26 +60,61 @@
 
 	let errorMessage = '';
 
+	let file: File | null = null;
+
+	let image: null | string = null;
+
 	$: isEditing = !!task.id;
 
 	$: formName = `${isEditing ? 'Edit' : 'Add'} ${'startTime' in task ? 'Event' : 'Task'}`;
 
-	function onSubmit() {
+	async function getImage() {
+		if (!task.id) {
+			return;
+		}
+
+		const imageRef = ref(storage, `users/${userId}/tasks/${task.id}`);
+		try {
+			const foundImage = await getDownloadURL(imageRef);
+			if (foundImage) {
+				image = foundImage;
+			}
+		} catch (error) {
+			if (error instanceof FirebaseError && error.code !== 'storage/object-not-found') {
+				return console.log('error', error);
+			}
+		}
+	}
+
+	getImage();
+
+	async function onSubmit() {
 		if (hasErrors(taskIn, errorMessage)) {
 			return;
 		}
 
 		const { id, ...data } = convertToAnyTask(taskIn);
+		let eventId = id;
 
 		if (id) {
-			editTaskWithPrompt(id, data, userId, targetDate, wasRecurring);
+			void editTaskWithPrompt(id, data, userId, targetDate, wasRecurring);
 		} else {
-			addTask(data, userId);
+			eventId = await addTask(data, userId);
+		}
+		if (file) {
+			void storeImage(userId, eventId, file);
 		}
 
 		dispatch('close');
 	}
 
+	function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (event.currentTarget.files) {
+			[file] = event.currentTarget.files;
+			image = URL.createObjectURL(file);
+		}
+	}
+
 	let goalType: Goal;
 </script>
 
@@ -115,14 +159,56 @@
 				</label>
 			</div>
 
-			<label class="block text-sm text-gray-700">
-				<textarea
-					bind:value={taskIn.description}
-					class="p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-					name="description"
-					placeholder="description"
-				/>
-			</label>
+			<Disclosure class="bg-white rounded-lg p-2" defaultOpen={true} let:open>
+				<DisclosureButton class="flex justify-between w-full">
+					<span>Description</span>
+					<Icon class="w-5 h-5 {open ? 'rotate-90 transform' : ''}" src={ChevronRight} />
+				</DisclosureButton>
+				<Transition
+					enter="transition duration-100 ease-out"
+					enterFrom="transform scale-95 opacity-0"
+					enterTo="transform scale-100 opacity-100"
+					leave="transition duration-75 ease-out"
+					leaveFrom="transform scale-100 opacity-100"
+					leaveTo="transform scale-95 opacity-0"
+				>
+					<DisclosurePanel class="text-gray-500 pt-2 flex flex-col gap-2">
+						<div class="flex flex-col gap-2 w-full">
+							<div class="h-24 flex items-center justify-center">
+								{#if image}
+									<button on:click={() => console.log('test')} type="button">
+										<img alt="event description" class="" src={image} />
+									</button>
+								{:else}
+									<Icon class="h-10 w-10 text-indigo-700" src={Photo} />
+								{/if}
+							</div>
+
+							<label
+								class="w-full focus-visible:outline-indigo-600 bg-indigo-600 hover:bg-indigo-500 inline-flex gap-2 justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+							>
+								<input
+									accept="image/*"
+									class="hidden"
+									name="avatar"
+									on:change={handleChange}
+									type="file"
+								/>
+								Add image
+							</label>
+						</div>
+
+						<label class="block text-sm text-gray-700">
+							<textarea
+								bind:value={taskIn.description}
+								class="p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+								name="description"
+								placeholder="description"
+							/>
+						</label>
+					</DisclosurePanel>
+				</Transition>
+			</Disclosure>
 
 			<Select
 				bind:value={taskIn.category}
diff --git a/src/lib/components/task-form/service.ts b/src/lib/components/task-form/service.ts
index 677bb818..be64e0ac 100644
--- a/src/lib/components/task-form/service.ts
+++ b/src/lib/components/task-form/service.ts
@@ -6,7 +6,7 @@ import type { EventDispatcher } from 'svelte';
 import { weekDays } from '$lib/components/days-checkbox/service';
 import { createModal } from '$lib/components/dialog/service';
 import { DATE, TIME } from '$lib/consts';
-import { db } from '$lib/firebase';
+import { db, storage } from '$lib/firebase';
 import {
 	add,
 	addMinutes,
@@ -26,6 +26,7 @@ import {
 	setDoc,
 	updateDoc,
 } from 'firebase/firestore';
+import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 
 export type TaskIn = Omit<Task, 'recurringExceptions'> & {
 	endTime: string;
@@ -166,7 +167,7 @@ export function editSingleRecurringEvent(
 
 	const newEvent = { ...event, date: targetDate };
 
-	addTask(newEvent, userId);
+	void addTask(newEvent, userId);
 
 	addExceptionToRecurring(id, recurringEvent, targetDate, userId);
 }
@@ -240,6 +241,8 @@ export async function addTask(data: Omit<AnyTask, 'id'>, userId: string) {
 	const taskRef = await addDoc(tasksCollectionRef, data);
 
 	await addTaskToGoal(userId, data, taskRef);
+
+	return taskRef.id;
 }
 
 async function deleteTaskFromGoal(userId: string, taskId: string, data: Omit<AnyTask, 'id'>) {
@@ -294,10 +297,16 @@ export async function removeTask(
 		if (result) {
 			addExceptionToRecurring(id, data as Omit<RecurringEvent, 'id'>, targetDate, userId);
 		} else {
-			deleteTask(id, data, userId);
+			void deleteTask(id, data, userId);
 		}
 	} else {
-		deleteTask(id, data, userId);
+		void deleteTask(id, data, userId);
 	}
 	dispatch('close');
 }
+
+export async function storeImage(userId: string, taskId: string, file: Blob): Promise<string> {
+	const avatarsRef = ref(storage, `users/${userId}/tasks/${taskId}`);
+	await uploadBytes(avatarsRef, file);
+	return await getDownloadURL(avatarsRef);
+}
diff --git a/src/lib/components/task-form/task-form.stories.svelte b/src/lib/components/task-form/task-form.stories.svelte
index 12700e37..cc307baf 100644
--- a/src/lib/components/task-form/task-form.stories.svelte
+++ b/src/lib/components/task-form/task-form.stories.svelte
@@ -13,8 +13,7 @@
 		argTypes: {},
 		component: TaskForm,
 	} satisfies Meta<TaskForm>;
-
-	</script>
+</script>
 
 <Template let:args>
 	<TaskForm {...args} {categories} on:close={() => console.log('closed')} userId="0" />
diff --git a/src/lib/user-utis.ts b/src/lib/user-utis.ts
index c0b7414e..32e8b290 100644
--- a/src/lib/user-utis.ts
+++ b/src/lib/user-utis.ts
@@ -1,7 +1,7 @@
 import { storage } from '$lib/firebase';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 
-export async function storageAvatar(userId: string, file: Blob): Promise<string> {
+export async function storeAvatar(userId: string, file: Blob): Promise<string> {
 	const avatarsRef = ref(storage, `avatars/${userId}`);
 	await uploadBytes(avatarsRef, file);
 	return await getDownloadURL(avatarsRef);
diff --git a/src/routes/dashboard/profile/profile/Profile.svelte b/src/routes/dashboard/profile/profile/Profile.svelte
index c033ac44..e40f6bf7 100644
--- a/src/routes/dashboard/profile/profile/Profile.svelte
+++ b/src/routes/dashboard/profile/profile/Profile.svelte
@@ -4,7 +4,7 @@
 	import Button from '$lib/components/button/Button.svelte';
 	import Input from '$lib/components/input/Input.svelte';
 	import { db } from '$lib/firebase';
-	import { storageAvatar } from '$lib/user-utis';
+	import { storeAvatar } from '$lib/user-utis';
 	import { type Auth, updateProfile } from 'firebase/auth';
 	import { doc, updateDoc } from 'firebase/firestore';
 	import { minidenticon } from 'minidenticons';
@@ -44,7 +44,7 @@
 		isLoading = true;
 
 		if (file) {
-			photoURL = await storageAvatar(user.uid, file);
+			photoURL = await storeAvatar(user.uid, file);
 		}
 
 		await editProfile(user, displayName, photoURL);
diff --git a/src/routes/register/register/Register.svelte b/src/routes/register/register/Register.svelte
index bf2f1003..d9aada54 100644
--- a/src/routes/register/register/Register.svelte
+++ b/src/routes/register/register/Register.svelte
@@ -4,7 +4,7 @@
 	import Button from '$lib/components/button/Button.svelte';
 	import { loginRoute, rootRoute } from '$lib/consts';
 	import { auth, db } from '$lib/firebase';
-	import { storageAvatar } from '$lib/user-utis';
+	import { storeAvatar } from '$lib/user-utis';
 	import { validator } from '@felte/validator-yup';
 	import { createForm } from 'felte';
 	import { FirebaseError } from 'firebase/app';
@@ -58,7 +58,7 @@
 	async function register({ displayName, email, password }: Omit<Account, 'photoURL'>) {
 		const { user } = await createUserWithEmailAndPassword(auth, email, password);
 
-		const photoURL = await storageAvatar(
+		const photoURL = await storeAvatar(
 			user.uid,
 			new Blob([avatar], { type: 'image/svg+xml;charset=utf-8' }),
 		);
diff --git a/static/manifest.json b/static/manifest.json
index 7b1dd858..5bca3c69 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -1,10 +1,6 @@
 {
-	"name": "Waser Life",
-	"short_name": "Waser Life",
-	"start_url": "/",
-	"display": "standalone",
-	"theme_color": "#ff3e00",
 	"background_color": "#ffffff",
+	"display": "standalone",
 	"icons": [
 		{
 			"sizes": "256x256",
@@ -17,18 +13,22 @@
 			"type": "image/png"
 		}
 	],
+	"name": "Life",
 	"screenshots": [
 		{
-			"src": "screenshot1.png",
-			"type": "image/png",
+			"form_factor": "narrow",
 			"sizes": "2560x1440",
-			"form_factor": "narrow"
+			"src": "screenshot1.png",
+			"type": "image/png"
 		},
 		{
-			"src": "screenshot2.png",
-			"type": "image/png",
+			"form_factor": "wide",
 			"sizes": "2560x1440",
-			"form_factor": "wide"
+			"src": "screenshot2.png",
+			"type": "image/png"
 		}
-	]
+	],
+	"short_name": "Life",
+	"start_url": "/",
+	"theme_color": "#ff3e00"
 }
diff --git a/static/task-placeholder-image.webp b/static/task-placeholder-image.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c499d443cfa85d4ff88e5c252ee2908914ece76c
GIT binary patch
literal 2444
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
NkpYdv{R?x-{|^}d=7InK

literal 0
HcmV?d00001