70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
|
|
import { itGet, itPost } from "@/fetchHelpers";
|
|
import { onMounted, ref, watch } from "vue";
|
|
|
|
// TODO: make translation
|
|
const items = ref([
|
|
{
|
|
label: "Aktivität",
|
|
subtitle: "z.B. “Deiner Trainer hat dir Feedback zu einem Auftrag gegeben”",
|
|
value: "USER_INTERACTION",
|
|
checked: false,
|
|
},
|
|
{
|
|
label: "Fortschritt",
|
|
subtitle: "z.B. “Du kannst dich jetzt für die Prüfung anmelden.”",
|
|
value: "PROGRESS",
|
|
checked: false,
|
|
},
|
|
{
|
|
label: "Information",
|
|
subtitle:
|
|
"z.B. “Am 20.12. zwischen 08:00 und 12:00 Uhr werden wir Wartungsarbeiten durchführen.”",
|
|
value: "INFORMATION",
|
|
checked: false,
|
|
},
|
|
]);
|
|
|
|
watch(items, async (items) => {
|
|
try {
|
|
await itPost(
|
|
"/api/notify/email_notification_settings/",
|
|
items.filter((item) => item.checked).map((item) => item.value)
|
|
);
|
|
console.debug("Updated email notification settings");
|
|
} catch (e) {
|
|
console.error(`Could not update email notification settings: ${e}`);
|
|
}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
const response = await itGet("/api/notify/email_notification_settings/");
|
|
items.value = items.value.map((item) => {
|
|
item.checked = response.includes(item.value);
|
|
return item;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-200">
|
|
<div class="container-large">
|
|
<header class="mt-12 mb-8">
|
|
<h1>{{ $t("general.settings") }}</h1>
|
|
</header>
|
|
<main>
|
|
<div class="bg-white p-6">
|
|
<ItCheckboxGroup
|
|
:items="items"
|
|
:label="$t('settings.emailNotifications')"
|
|
@update:items="items = $event"
|
|
></ItCheckboxGroup>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|