75 lines
2.1 KiB
Svelte
75 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { changeProfile, currentProfile, profiles } from '$lib/settings';
|
|
import { AccordionItem, Button, Select } from 'flowbite-svelte';
|
|
import ManageProfilesModal from './ManageProfilesModal.svelte';
|
|
import { showSnackbar } from '$lib/util';
|
|
|
|
export let onClose: () => void;
|
|
|
|
$: items = Object.keys($profiles).map((id) => {
|
|
return { value: id, name: id };
|
|
});
|
|
|
|
let profile = $currentProfile;
|
|
|
|
function onChange() {
|
|
changeProfile(profile);
|
|
onClose();
|
|
}
|
|
|
|
function exportProfiles() {
|
|
const link = document.createElement('a');
|
|
const json = localStorage.getItem('profiles') || '';
|
|
link.href = URL.createObjectURL(new Blob([json], { type: 'application/json' }));
|
|
link.download = 'profiles.json';
|
|
link.click();
|
|
showSnackbar('Profiles exported');
|
|
}
|
|
|
|
let files: FileList;
|
|
function importProfile() {
|
|
const [file] = files;
|
|
const reader = new FileReader();
|
|
|
|
reader.onloadend = () => {
|
|
const imported = JSON.parse(reader.result?.toString() || '');
|
|
profiles.update((prev) => {
|
|
return {
|
|
...prev,
|
|
...imported
|
|
};
|
|
});
|
|
onClose();
|
|
showSnackbar('Profiles imported');
|
|
};
|
|
|
|
if (file) {
|
|
reader.readAsText(file);
|
|
}
|
|
}
|
|
|
|
let manageModalOpen = false;
|
|
</script>
|
|
|
|
<ManageProfilesModal bind:open={manageModalOpen} />
|
|
|
|
<AccordionItem>
|
|
<span slot="header">Profile</span>
|
|
<div class="flex flex-col gap-5">
|
|
<div class="flex flex-col gap-2">
|
|
<Select {items} bind:value={profile} on:change={onChange} placeholder="Select profile ..." />
|
|
<Button size="sm" outline color="dark" on:click={() => (manageModalOpen = true)}
|
|
>Manage profiles</Button
|
|
>
|
|
</div>
|
|
<hr class="border-gray-100 opacity-10" />
|
|
<div class="flex flex-col gap-2">
|
|
<input class="border border-slate-700 rounded-lg" type="file" accept=".json" bind:files />
|
|
<Button on:click={importProfile} disabled={!files} size="sm" outline color="blue"
|
|
>Import profiles</Button
|
|
>
|
|
<Button on:click={exportProfiles} size="sm" color="light">Export profiles</Button>
|
|
</div>
|
|
</div>
|
|
</AccordionItem>
|