85 lines
3.8 KiB
Vue
85 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { Providers } from '~/types/model';
|
|
|
|
const triplit = useTriplitClient();
|
|
const { providers, unsubscribe: unsubscribeModels } = await useModels();
|
|
|
|
if (providers.value === undefined) throw new Error('Providers not loaded');
|
|
|
|
const { user } = useAuth();
|
|
for (const provider of Providers) {
|
|
if (!providers.value?.find(p => p.type === provider)) {
|
|
// create a new provider
|
|
await triplit.insert('providers', {
|
|
name: provider,
|
|
userId: user.value!.id,
|
|
type: provider,
|
|
enabled: false,
|
|
config: {},
|
|
});
|
|
}
|
|
}
|
|
|
|
const toggleProvider = async (id: string) => {
|
|
const provider = providers.value!.find(p => p.id === id);
|
|
if (!provider) return;
|
|
|
|
await triplit.update('providers', provider.id, {
|
|
enabled: !provider.enabled,
|
|
});
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
unsubscribeModels?.();
|
|
});
|
|
|
|
defineEmits(['navigate']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-1">
|
|
<h2 class="text-lg font-semibold flex items-center gap-2">
|
|
Enabled <span class="text-sm bg-[var(--color-highlight)] px-2 rounded-md py-0.5 text-[var(--color-muted)]">
|
|
{{providers?.filter(p => p.enabled).length}}
|
|
</span>
|
|
</h2>
|
|
<div
|
|
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
|
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => p.enabled)"
|
|
:key="p.id"
|
|
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-highlight)] hover:border-[var(--color-highlight-high)]">
|
|
<div class="flex flex-col flex-grow">
|
|
<h3 class="text-md font-semibold text-start">{{ p.name }}</h3>
|
|
<hr class="border-t border-[var(--color-highlight)]" />
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<!-- <input type="checkbox"
|
|
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-highlight)]" /> -->
|
|
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h2 class="text-lg font-semibold flex items-center gap-2">
|
|
Disabled <span class="text-sm bg-[var(--color-highlight)] px-2 rounded-md py-0.5 text-[var(--color-muted)]">
|
|
{{providers?.filter(p => !p.enabled).length}}
|
|
</span>
|
|
</h2>
|
|
<div
|
|
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
|
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => !p.enabled)"
|
|
:key="p.id"
|
|
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-highlight)] hover:border-[var(--color-highlight-high)]">
|
|
<div class="flex flex-col flex-grow">
|
|
<h3 class="text-md font-semibold text-start">{{ p.name }}</h3>
|
|
<hr class="border-t border-[var(--color-highlight)]" />
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<!-- <input type="checkbox"
|
|
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-highlight)]" /> -->
|
|
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template> |