feat(badges): update and delete ui

1 files changed, 31 insertions, 9 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 0bea3111..07bb8542 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -19,6 +19,7 @@
 	let dark = true;
 	let transparent = false;
 	let confirmDelete = 0;
+	let selectedBadge: Badge | undefined = undefined;
 
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
@@ -67,6 +68,8 @@
 				description.value.length > 0 ? `&description=${encodeURIComponent(description.value)}` : ''
 			}${
 				time.valueAsDate ? `&time=${encodeURIComponent(dateToDatabaseTime(time.valueAsDate))}` : ''
+			}${
+				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
 			}`,
 			{
 				method: 'PUT'
@@ -173,7 +176,14 @@
 		<p>
 			<a href={`/user/${data.username}`}>Back to Profile</a>
 			•
-			<a href={`#`} on:click={() => (editMode = !editMode)}>
+			<a
+				href={`#`}
+				on:click={() => {
+					if (editMode) selectedBadge = undefined;
+
+					editMode = !editMode;
+				}}
+			>
 				{editMode ? 'Disable' : 'Enable'} Edit Mode
 			</a>
 			•
@@ -185,11 +195,6 @@
 	{/if}
 
 	{#if editMode && isOwner}
-		<p>
-			Edit mode is enabled. Click on an image <b>twice</b> to delete it. There is no confirmation, so
-			be careful!
-		</p>
-
 		{#if error}
 			<p style="color: red;">{error}</p>
 		{/if}
@@ -202,6 +207,7 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? selectedBadge.image : ''}
 			/>
 			<input
 				type="text"
@@ -210,6 +216,7 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? (selectedBadge.post === '#' ? '' : selectedBadge.post) : ''}
 			/>
 			<input
 				type="text"
@@ -218,10 +225,25 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? selectedBadge.description : ''}
 			/>
-			<a href={`#`} on:click={submitBadge}>Add Badge</a>
+			<a href={`#`} on:click={submitBadge}>{selectedBadge ? 'Update' : 'Add'} Badge</a>
+			{#if selectedBadge}
+				or
+				<a
+					href={`#`}
+					on:click={() => {
+						if (selectedBadge) removeBadge(selectedBadge);
+					}}>Delete Badge (click twice)</a
+				>
+			{/if}
 			<span style="float: right;">
-				<input type="datetime-local" />
+				<input
+					type="datetime-local"
+					value={selectedBadge && selectedBadge.time
+						? databaseTimeToDate(selectedBadge.time).toISOString()
+						: ''}
+				/>
 				<small>Must be full date and time, defaults to now if any fields empty</small>
 			</span>
 		</p>
@@ -244,7 +266,7 @@
 							{#if editMode}
 								<a
 									href={`#`}
-									on:click={() => removeBadge(badge)}
+									on:click={() => (selectedBadge = badge)}
 									id={`badge-${badge.id}`}
 									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
 										badge.description ? `\n${badge.description}` : ''