From 3d4053ce4015c561968c151b78190513f9f06f95 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 15 May 2024 17:57:04 -0700
Subject: feat(badges): move admin panel into owner panel

---
 src/routes/user/[user]/badges/+page.svelte | 401 +++++++++++++++--------------
 1 file changed, 203 insertions(+), 198 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 565cb73b..9e4ef7cf 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -497,15 +497,7 @@
 								groupBadges(removeHiddenBadges(isOwner, ungroupedBadges))
 							)}
 
-							{#if authorised}
-								<div class="card">
-									<button on:click={setShadowHide}>Shadow Hide Badges</button>
-								</div>
-
-								<p />
-							{/if}
-
-							{#if isOwner}
+							{#if isOwner || authorised}
 								{@const shadowHidden =
 									ungroupedBadges.filter((badge) => badge.shadow_hidden).length > 0}
 
@@ -544,193 +536,123 @@
 								<p />
 
 								<div class="card">
-									<button
-										on:click={() => {
-											selectedBadge = undefined;
-											editMode = !editMode;
-										}}
-									>
-										{editMode
-											? $locale().user.badges.editMode.disable
-											: $locale().user.badges.editMode.enable}
-									</button>
-									<span style="margin: 0 0.625rem;">•</span>
-									<button
-										on:click={() => {
-											selectedBadge = undefined;
-											importMode = !importMode;
-										}}
-									>
-										{importMode
-											? $locale().user.badges.importMode.disable
-											: $locale().user.badges.importMode.enable}
-									</button>
-									<span style="margin: 0 0.625rem;">•</span>
-									<button
-										on:click={() => {
-											selectedBadge = undefined;
-											migrateMode = !migrateMode;
-										}}
-									>
-										Migrate Category
-									</button>
-									<span style="margin: 0 0.625rem;">•</span>
-									<button
-										on:click={() => {
-											selectedBadge = undefined;
-											hideMode = !hideMode;
-										}}
-									>
-										Hide Category
-									</button>
-									<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
-									<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
-
-									{#if shadowHidden}
-										<span style="margin: 0 0.625rem;">•</span>
-										<button on:click={setShadowHide}>Un-shadow Hide Badges</button>
+									{#if authorised}
+										<button on:click={setShadowHide}>Shadow Hide Badges</button>
 									{/if}
 
-									{#if editMode && isOwner}
-										{@const groups = groupedBadges
-											.map((group) => group[0])
-											.filter((group) => group !== 'Uncategorised')}
-										{@const designers = castAsStringArray([
-											...new Set(
-												ungroupedBadges
-													.map((badge) => badge.designer)
-													.filter((designer) => designer !== undefined && designer !== null)
-													.filter(
-														(designer, index, array) =>
-															array.indexOf(designer) === index && !array.includes(`@${designer}`)
-													)
-											)
-										])}
+									{#if isOwner && authorised}
+										<span style="margin: 0 0.625rem;">•</span>
+									{/if}
 
-										<p />
+									{#if isOwner}
+										<button
+											on:click={() => {
+												selectedBadge = undefined;
+												editMode = !editMode;
+											}}
+										>
+											{editMode
+												? $locale().user.badges.editMode.disable
+												: $locale().user.badges.editMode.enable}
+										</button>
+										<span style="margin: 0 0.625rem;">•</span>
+										<button
+											on:click={() => {
+												selectedBadge = undefined;
+												importMode = !importMode;
+											}}
+										>
+											{importMode
+												? $locale().user.badges.importMode.disable
+												: $locale().user.badges.importMode.enable}
+										</button>
+										<span style="margin: 0 0.625rem;">•</span>
+										<button
+											on:click={() => {
+												selectedBadge = undefined;
+												migrateMode = !migrateMode;
+											}}
+										>
+											Migrate Category
+										</button>
+										<span style="margin: 0 0.625rem;">•</span>
+										<button
+											on:click={() => {
+												selectedBadge = undefined;
+												hideMode = !hideMode;
+											}}
+										>
+											Hide Category
+										</button>
+										<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
+										<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
 
-										{#if error}
-											<p style="color: red;">{error}</p>
+										{#if shadowHidden}
+											<span style="margin: 0 0.625rem;">•</span>
+											<button on:click={setShadowHide}>Un-shadow Hide Badges</button>
 										{/if}
 
-										<input
-											type="text"
-											placeholder={$locale().user.badges.editMode.imageURL}
-											name="image_url"
-											minlength="1"
-											maxlength="1000"
-											size="15"
-											value={selectedBadge ? selectedBadge.image : ''}
-										/>
-										<input
-											type="text"
-											placeholder={$locale().user.badges.editMode.activityURL}
-											name="activity_url"
-											minlength="1"
-											maxlength="1000"
-											size="15"
-											value={selectedBadge
-												? selectedBadge.post === '#'
-													? ''
-													: selectedBadge.post
-												: ''}
-										/>
-										<input
-											type="text"
-											placeholder={$locale().user.badges.editMode.description}
-											name="description"
-											minlength="1"
-											maxlength="1000"
-											size="15"
-											value={selectedBadge ? selectedBadge.description : ''}
-										/>
-										<Dropdown
-											items={groups.map((group) => ({
-												name: group,
-												url: '#',
-												onClick: () => {
-													const category = document.querySelector('input[name="category"]');
-
-													if (category instanceof HTMLInputElement) category.value = group;
-												}
-											}))}
-											header={false}
-											center={false}
-										>
-											<span slot="title">
-												<input
-													type="text"
-													placeholder={$locale().user.badges.editMode.category}
-													name="category"
-													minlength="1"
-													maxlength="1000"
-													size="15"
-													value={selectedBadge
-														? selectedBadge.category === 'Uncategorised'
-															? ''
-															: selectedBadge.category
-														: ''}
-													list="categories"
-												/>
-											</span>
-										</Dropdown>
-										<span style="float: right;">
+										{#if editMode && isOwner}
+											{@const groups = groupedBadges
+												.map((group) => group[0])
+												.filter((group) => group !== 'Uncategorised')}
+											{@const designers = castAsStringArray([
+												...new Set(
+													ungroupedBadges
+														.map((badge) => badge.designer)
+														.filter((designer) => designer !== undefined && designer !== null)
+														.filter(
+															(designer, index, array) =>
+																array.indexOf(designer) === index && !array.includes(`@${designer}`)
+														)
+												)
+											])}
+
+											<p />
+
+											{#if error}
+												<p style="color: red;">{error}</p>
+											{/if}
+
+											<input
+												type="text"
+												placeholder={$locale().user.badges.editMode.imageURL}
+												name="image_url"
+												minlength="1"
+												maxlength="1000"
+												size="15"
+												value={selectedBadge ? selectedBadge.image : ''}
+											/>
 											<input
-												type="datetime-local"
-												value={selectedBadge && selectedBadge.time
-													? dateToInputTime(databaseTimeToDate(selectedBadge.time))
+												type="text"
+												placeholder={$locale().user.badges.editMode.activityURL}
+												name="activity_url"
+												minlength="1"
+												maxlength="1000"
+												size="15"
+												value={selectedBadge
+													? selectedBadge.post === '#'
+														? ''
+														: selectedBadge.post
 													: ''}
 											/>
-											<small>Must be full date and time, defaults to now if any fields empty</small>
-										</span>
-
-										<p />
-
-										<div class="edit-row-2">
 											<input
 												type="text"
-												placeholder={$locale().user.badges.editMode.source}
-												name="source"
+												placeholder={$locale().user.badges.editMode.description}
+												name="description"
 												minlength="1"
 												maxlength="1000"
-												size="16"
-												value={selectedBadge ? selectedBadge.source : ''}
+												size="15"
+												value={selectedBadge ? selectedBadge.description : ''}
 											/>
 											<Dropdown
-												items={designers.map((designer) => ({
-													name: designer,
-													url: '#',
-													onClick: () => {
-														const designerField = document.querySelector('input[name="designer"]');
-
-														if (designerField instanceof HTMLInputElement)
-															designerField.value = designer;
-													}
-												}))}
-												header={false}
-												center={false}
-											>
-												<span slot="title">
-													<input
-														type="text"
-														placeholder={$locale().user.badges.editMode.designer}
-														name="designer"
-														minlength="1"
-														maxlength="1000"
-														size="17"
-														value={selectedBadge ? selectedBadge.designer : ''}
-													/>
-												</span>
-											</Dropdown>
-											<Dropdown
-												items={[false, true].map((hidden) => ({
-													name: hidden ? 'Hidden' : 'Shown',
+												items={groups.map((group) => ({
+													name: group,
 													url: '#',
 													onClick: () => {
-														const hiddenInput = document.querySelector('input[name="hidden"]');
+														const category = document.querySelector('input[name="category"]');
 
-														if (hiddenInput instanceof HTMLInputElement)
-															hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+														if (category instanceof HTMLInputElement) category.value = group;
 													}
 												}))}
 												header={false}
@@ -739,34 +661,117 @@
 												<span slot="title">
 													<input
 														type="text"
-														placeholder="Shown"
-														name="hidden"
+														placeholder={$locale().user.badges.editMode.category}
+														name="category"
 														minlength="1"
 														maxlength="1000"
 														size="15"
 														value={selectedBadge
-															? selectedBadge.hidden
-																? 'Hidden'
-																: 'Shown'
-															: 'Shown'}
+															? selectedBadge.category === 'Uncategorised'
+																? ''
+																: selectedBadge.category
+															: ''}
+														list="categories"
 													/>
 												</span>
 											</Dropdown>
-											<button class="button-lined" on:click={submitBadge}
-												>{selectedBadge
-													? $locale().user.badges.editMode.update
-													: $locale().user.badges.editMode.add}</button
-											>
-											{#if selectedBadge}
-												{$locale().user.badges.editMode.or}
-												<button
-													class="button-lined"
-													on:click={() => {
-														if (selectedBadge) removeBadge(selectedBadge);
-													}}>{$locale().user.badges.editMode.delete}</button
+											<span style="float: right;">
+												<input
+													type="datetime-local"
+													value={selectedBadge && selectedBadge.time
+														? dateToInputTime(databaseTimeToDate(selectedBadge.time))
+														: ''}
+												/>
+												<small
+													>Must be full date and time, defaults to now if any fields empty</small
 												>
-											{/if}
-										</div>
+											</span>
+
+											<p />
+
+											<div class="edit-row-2">
+												<input
+													type="text"
+													placeholder={$locale().user.badges.editMode.source}
+													name="source"
+													minlength="1"
+													maxlength="1000"
+													size="16"
+													value={selectedBadge ? selectedBadge.source : ''}
+												/>
+												<Dropdown
+													items={designers.map((designer) => ({
+														name: designer,
+														url: '#',
+														onClick: () => {
+															const designerField =
+																document.querySelector('input[name="designer"]');
+
+															if (designerField instanceof HTMLInputElement)
+																designerField.value = designer;
+														}
+													}))}
+													header={false}
+													center={false}
+												>
+													<span slot="title">
+														<input
+															type="text"
+															placeholder={$locale().user.badges.editMode.designer}
+															name="designer"
+															minlength="1"
+															maxlength="1000"
+															size="17"
+															value={selectedBadge ? selectedBadge.designer : ''}
+														/>
+													</span>
+												</Dropdown>
+												<Dropdown
+													items={[false, true].map((hidden) => ({
+														name: hidden ? 'Hidden' : 'Shown',
+														url: '#',
+														onClick: () => {
+															const hiddenInput = document.querySelector('input[name="hidden"]');
+
+															if (hiddenInput instanceof HTMLInputElement)
+																hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+														}
+													}))}
+													header={false}
+													center={false}
+												>
+													<span slot="title">
+														<input
+															type="text"
+															placeholder="Shown"
+															name="hidden"
+															minlength="1"
+															maxlength="1000"
+															size="15"
+															value={selectedBadge
+																? selectedBadge.hidden
+																	? 'Hidden'
+																	: 'Shown'
+																: 'Shown'}
+														/>
+													</span>
+												</Dropdown>
+												<button class="button-lined" on:click={submitBadge}
+													>{selectedBadge
+														? $locale().user.badges.editMode.update
+														: $locale().user.badges.editMode.add}</button
+												>
+												{#if selectedBadge}
+													{$locale().user.badges.editMode.or}
+													<button
+														class="button-lined"
+														on:click={() => {
+															if (selectedBadge) removeBadge(selectedBadge);
+														}}>{$locale().user.badges.editMode.delete}</button
+													>
+												{/if}
+											</div>
+										{/if}
 									{/if}
 								</div>
 							{/if}
-- 
cgit v1.2.3