feat(badges): manual time set

3 files changed, 50 insertions, 12 deletions

diff --git a/src/lib/Database/badges.ts b/src/lib/Database/badges.ts
index e02fd91b..9f857469 100644
--- a/src/lib/Database/badges.ts
+++ b/src/lib/Database/badges.ts
@@ -5,6 +5,7 @@ export interface Badge {
 	image?: string;
 	description?: string;
 	id?: number;
+	time?: string;
 }
 
 const database = new Database('./data/due_moe.sqlite3', {
@@ -31,15 +32,21 @@ export const getUserBadges = (userId: number): Badge[] => {
 };
 
 export const addUserBadge = (userId: number, badge: Badge) => {
-	const { post, image, description } = badge;
+	const { post, image, description, time } = badge;
 
 	if (post === undefined || image === undefined) return;
 
-	const statement = database.query(
-		`INSERT INTO user_badges (user_id, post, image, description) VALUES (?1, ?2, ?3, ?4);`
-	);
-
-	statement.run(userId.toString(), post, image, description || null);
+	if (time) {
+		database
+			.query(
+				`INSERT INTO user_badges (user_id, post, image, description, time) VALUES (?1, ?2, ?3, ?4, ?5);`
+			)
+			.run(userId.toString(), post, image, description || null, time);
+	} else {
+		database
+			.query(`INSERT INTO user_badges (user_id, post, image, description) VALUES (?1, ?2, ?3, ?4);`)
+			.run(userId.toString(), post, image, description || null);
+	}
 };
 
 export const removeUserBadge = (userId: number, id: number) => {
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index da00ce57..d06be6cd 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -45,7 +45,8 @@ export const PUT = async ({ cookies, url }) => {
 	addUserBadge(identity.id, {
 		post: url.searchParams.get('post') || undefined,
 		image: url.searchParams.get('image') || undefined,
-		description: url.searchParams.get('description') || undefined
+		description: url.searchParams.get('description') || undefined,
+		time: url.searchParams.get('time') || undefined
 	});
 
 	return Response.json({});
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 8a15425c..7843fed3 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -42,6 +42,7 @@
 		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
+		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
 
 		if (!imageURL.value || !activityURL.value) {
 			error = 'Fields cannot be empty.';
@@ -58,7 +59,11 @@
 		fetch(
 			`/api/badges?image=${encodeURIComponent(imageURL.value)}&post=${encodeURIComponent(
 				activityURL.value
-			)}&description=${encodeURIComponent(description.value)}`,
+			)}${
+				description.value.length > 0 ? `&description=${encodeURIComponent(description.value)}` : ''
+			}${
+				time.valueAsDate ? `&time=${encodeURIComponent(dateToDatabaseTime(time.valueAsDate))}` : ''
+			}`,
 			{
 				method: 'PUT'
 			}
@@ -151,6 +156,15 @@
 			element.classList.remove('invert');
 		}
 	};
+
+	const databaseTimeToDate = (time: string) =>
+		new Date(new Date(time + 'Z').getTime() + new Date(time + 'Z').getTimezoneOffset() * 60000);
+
+	const dateToDatabaseTime = (date: Date) =>
+		date
+			.toISOString()
+			.replace('T', ' ')
+			.replace(/\.\d+Z$/, '');
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -214,6 +228,8 @@
 							minlength="1"
 							maxlength="1000"
 						/>
+						<input type="datetime-local" />
+						<small>Must be full date, defaults to now if empty</small>
 						<a href={`#`} on:click={submitBadge}>Add Badge</a>
 					</p>
 				{/if}
@@ -226,12 +242,26 @@
 					{:else}
 						{#each badges as badge}
 							{#if editMode}
-								<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
-									<img src={badge.image} alt={badge.description} title={badge.description} />
+								<a
+									href={`#`}
+									on:click={() => removeBadge(badge)}
+									id={`badge-${badge.id}`}
+									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
+										badge.description ? `\n${badge.description}` : ''
+									}`}
+								>
+									<img src={badge.image} alt={badge.description} />
 								</a>
 							{:else}
-								<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
-									<img src={badge.image} alt={badge.description} title={badge.description} />
+								<a
+									href={badge.post}
+									target="_blank"
+									id={`badge-${badge.id}`}
+									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
+										badge.description ? `\n${badge.description}` : ''
+									}`}
+								>
+									<img src={badge.image} alt={badge.description} />
 								</a>
 							{/if}
 						{/each}