146 lines
4.3 KiB
Svelte
146 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
import { DynamicSettings } from './dynamicSettings.ts';
|
|
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
|
|
import { updateSettings } from './actions.ts';
|
|
|
|
// types
|
|
interface Props {
|
|
settings: { name: string; value: string }[];
|
|
}
|
|
|
|
type SettingsInput = {
|
|
name: string;
|
|
entries: (
|
|
| {
|
|
name: string;
|
|
type: 'checkbox';
|
|
value: boolean;
|
|
onChange: (value: boolean) => void;
|
|
}
|
|
| {
|
|
name: string;
|
|
type: 'text';
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
| {
|
|
name: string;
|
|
type: 'textarea';
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
)[];
|
|
}[];
|
|
|
|
// inputs
|
|
const { settings }: Props = $props();
|
|
|
|
const dynamicSettings = new DynamicSettings(
|
|
settings.reduce((prev, curr) => Object.assign(prev, { [curr.name]: curr.value }), {})
|
|
);
|
|
|
|
let changes = $state<{ [k: string]: string | null }>(dynamicSettings.getChanges());
|
|
|
|
// consts
|
|
const settingsInput: SettingsInput = [
|
|
{
|
|
name: 'Anmeldung',
|
|
entries: [
|
|
{
|
|
name: 'Aktiviert',
|
|
type: 'checkbox',
|
|
value: dynamicSettings.signupEnabled(),
|
|
onChange: dynamicSettings.signupSetEnabled
|
|
},
|
|
{
|
|
name: 'Text unter dem Anmelde Button',
|
|
type: 'textarea',
|
|
value: dynamicSettings.signupInfoText(),
|
|
onChange: dynamicSettings.signupSetInfoText
|
|
},
|
|
{
|
|
name: 'Text, wenn die Anmeldung deaktiviert ist',
|
|
type: 'textarea',
|
|
value: dynamicSettings.signupDisabledText(),
|
|
onChange: dynamicSettings.signupSetDisabledText
|
|
},
|
|
{
|
|
name: 'Subtext, wenn die Anmeldung deaktiviert ist',
|
|
type: 'textarea',
|
|
value: dynamicSettings.signupDisabledSubtext(),
|
|
onChange: dynamicSettings.signupSetDisabledSubtext
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
// callbacks
|
|
function onSaveSettingsClick() {
|
|
$confirmPopupState = {
|
|
title: 'Änderungen speichern?',
|
|
message: 'Sollen die Änderungen gespeichert werden?',
|
|
onConfirm: async () => {
|
|
if (!(await updateSettings(changes))) return;
|
|
dynamicSettings.setChanges();
|
|
changes = {};
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<div class="h-full flex flex-col items-center justify-between">
|
|
<div class="grid grid-cols-2 w-full">
|
|
{#each settingsInput as setting (setting.name)}
|
|
<div class="mx-12">
|
|
<div class="divider">{setting.name}</div>
|
|
<div class="flex flex-col gap-5">
|
|
{#each setting.entries as entry (entry.name)}
|
|
<label class="flex justify-between">
|
|
<span class="mt-[.125rem] text-sm w-1/2">{entry.name}</span>
|
|
<div class="w-1/2">
|
|
{#if entry.type === 'checkbox'}
|
|
<input
|
|
type="checkbox"
|
|
class="toggle"
|
|
onchange={(e) => {
|
|
entry.onChange(e.currentTarget.checked);
|
|
changes = dynamicSettings.getChanges();
|
|
}}
|
|
checked={entry.value}
|
|
/>
|
|
{:else if entry.type === 'text'}
|
|
<input
|
|
type="text"
|
|
class="input input-bordered"
|
|
onchange={(e) => {
|
|
entry.onChange(e.currentTarget.value);
|
|
changes = dynamicSettings.getChanges();
|
|
}}
|
|
value={entry.value}
|
|
/>
|
|
{:else if entry.type === 'textarea'}
|
|
<textarea
|
|
class="textarea"
|
|
value={entry.value}
|
|
onchange={(e) => {
|
|
entry.onChange(e.currentTarget.value);
|
|
changes = dynamicSettings.getChanges();
|
|
}}
|
|
></textarea>
|
|
{/if}
|
|
</div>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="btn btn-success mt-auto mb-8"
|
|
class:btn-disabled={Object.keys(changes).length === 0}
|
|
onclick={onSaveSettingsClick}>Speichern</button
|
|
>
|
|
</div>
|
|
</div>
|