refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2024-11-15 18:56:13 -08:00
parent 7f8c70b04a
commit 7e78889e33

View File

@ -18,11 +18,12 @@
import Search from '$lib/components/icons/Search.svelte'; import Search from '$lib/components/icons/Search.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
let importFiles; let importFiles;
let modelsImportInputElement: HTMLInputElement; let modelsImportInputElement: HTMLInputElement;
let models = []; let models = null;
let filteredModels = []; let filteredModels = [];
$: if (models) { $: if (models) {
@ -65,7 +66,8 @@
}); });
</script> </script>
<div class="flex flex-col gap-1 mt-1.5 mb-2"> {#if models !== null}
<div class="flex flex-col gap-1 mt-1.5 mb-2">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-medium px-0.5"> <div class="flex items-center md:self-center text-xl font-medium px-0.5">
{$i18n.t('Models')} {$i18n.t('Models')}
@ -88,9 +90,9 @@
/> />
</div> </div>
</div> </div>
</div> </div>
<div class=" my-2 mb-5" id="model-list"> <div class=" my-2 mb-5" id="model-list">
{#each filteredModels as model (model.id)} {#each filteredModels as model (model.id)}
<div <div
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition" class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
@ -152,7 +154,9 @@
{/if} {/if}
<div class="ml-1"> <div class="ml-1">
<Tooltip content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}> <Tooltip
content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}
>
<Switch <Switch
bind:state={model.is_active} bind:state={model.is_active}
on:change={async (e) => { on:change={async (e) => {
@ -165,9 +169,9 @@
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<div class=" flex justify-end w-full mb-3"> <div class=" flex justify-end w-full mb-3">
<div class="flex space-x-1"> <div class="flex space-x-1">
<input <input
@ -188,9 +192,11 @@
for (const model of savedModels) { for (const model of savedModels) {
if (model?.info ?? false) { if (model?.info ?? false) {
if ($_models.find((m) => m.id === model.id)) { if ($_models.find((m) => m.id === model.id)) {
await updateModelById(localStorage.token, model.id, model.info).catch((error) => { await updateModelById(localStorage.token, model.id, model.info).catch(
(error) => {
return null; return null;
}); }
);
} else { } else {
await createNewModel(localStorage.token, model.info).catch((error) => { await createNewModel(localStorage.token, model.info).catch((error) => {
return null; return null;
@ -256,4 +262,9 @@
</button> </button>
</div> </div>
</div> </div>
{/if}
{:else}
<div class=" h-full w-full flex justify-center items-center">
<Spinner />
</div>
{/if} {/if}