From 439ab7a33568c51250cc3ce40edfffb05090875e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jul 2024 22:18:45 -0700
Subject: [PATCH] refac

---
 .../admin/Settings/Pipelines.svelte           | 42 +++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
index 6826cb92b..22ebc707c 100644
--- a/src/lib/components/admin/Settings/Pipelines.svelte
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -19,6 +19,7 @@
 	} from '$lib/apis';
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
 
 	const i18n: Writable<i18nType> = getContext('i18n');
 
@@ -476,15 +477,40 @@
 												</div>
 
 												{#if (valves[property] ?? null) !== null}
-													<div class="flex mt-0.5 space-x-2">
+													<!-- {valves[property]} -->
+													<div class="flex mt-0.5 mb-1.5 space-x-2">
 														<div class=" flex-1">
-															<input
-																class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-																type="text"
-																placeholder={valves_spec.properties[property].title}
-																bind:value={valves[property]}
-																autocomplete="off"
-															/>
+															{#if valvesSpec.properties[property]?.enum ?? null}
+																<select
+																	class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+																	bind:value={valves[property]}
+																>
+																	{#each valvesSpec.properties[property].enum as option}
+																		<option value={option} selected={option === valves[property]}>
+																			{option}
+																		</option>
+																	{/each}
+																</select>
+															{:else if (valvesSpec.properties[property]?.type ?? null) === 'boolean'}
+																<div class="flex justify-between items-center">
+																	<div class="text-xs text-gray-500">
+																		{valves[property] ? 'Enabled' : 'Disabled'}
+																	</div>
+
+																	<div class=" pr-2">
+																		<Switch bind:state={valves[property]} />
+																	</div>
+																</div>
+															{:else}
+																<input
+																	class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+																	type="text"
+																	placeholder={valvesSpec.properties[property].title}
+																	bind:value={valves[property]}
+																	autocomplete="off"
+																	required
+																/>
+															{/if}
 														</div>
 													</div>
 												{/if}