website/src/app/admin/settings/Settings.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
        }
      ]
    },
    {
      name: 'Live-Statistiken',
      entries: [
        {
          name: 'Aktiviert',
          type: 'checkbox',
          value: dynamicSettings.liveStatisticsEnabled(),
          onChange: dynamicSettings.liveStatisticsSetEnabled
        }
      ]
    }
  ];

  // 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="min-h-full flex flex-col items-center justify-between">
  <div class="grid grid-cols-1 lg:grid-cols-2 w-full px-4 lg:px-12 gap-8">
    {#each settingsInput as setting (setting.name)}
      <div class="flex flex-col">
        <div class="divider font-bold">{setting.name}</div>
        <div class="flex flex-col gap-6">
          {#each setting.entries as entry (entry.name)}
            <label class="flex flex-col sm:flex-row justify-between gap-2">
              <span class="text-sm font-medium sm:w-1/2">{entry.name}</span>
              <div class="sm:w-1/2 flex sm:justify-end">
                {#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 w-full sm:max-w-xs"
                    onchange={(e) => {
                      entry.onChange(e.currentTarget.value);
                      changes = dynamicSettings.getChanges();
                    }}
                    value={entry.value}
                  />
                {:else if entry.type === 'textarea'}
                  <textarea
                    class="textarea textarea-bordered w-full sm:max-w-xs min-h-24"
                    value={entry.value}
                    onchange={(e) => {
                      entry.onChange(e.currentTarget.value);
                      changes = dynamicSettings.getChanges();
                    }}
                  ></textarea>
                {/if}
              </div>
            </label>
          {/each}
        </div>
      </div>
    {/each}
  </div>
  <div class="py-12">
    <button
      class="btn btn-success btn-lg px-12"
      class:btn-disabled={Object.keys(changes).length === 0}
      onclick={onSaveSettingsClick}>Speichern</button
    >
  </div>
</div>