mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2025-07-16 09:38:51 +02:00
92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
|
|
import { ref } from "vue";
|
|
import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
|
|
import DefaultPageSwitcher from "@/components/DefaultPageSwitcher.vue";
|
|
import AppVersion from "@/components/AppVersion.vue";
|
|
import ReloadPwa from "@/components/ReloadPwa.vue";
|
|
|
|
const icon = "pi pi-cog";
|
|
const isDark = ref(true);
|
|
|
|
function handleDarkModeToggled(isDarkVar: boolean) {
|
|
// Do something with isDark value
|
|
// For example, update the root isDark value
|
|
// Assuming the root component has an isDark ref
|
|
isDark.value = isDarkVar;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-column align-items-center mt-0">
|
|
<div
|
|
class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown md:mt-8"
|
|
>
|
|
<h1 class="text-4xl">
|
|
{{ $t("settings.headline") }}
|
|
</h1>
|
|
<i v-if="icon" :class="icon" style="font-size: 2rem"></i>
|
|
</div>
|
|
<div v-if="$t('settings.subTitle')" class="flex justify-content-center">
|
|
<h5 class="text-2xl m-2">{{ $t("settings.subTitle") }}</h5>
|
|
</div>
|
|
<div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
|
|
<slot flex-specs="flex-1 m-0" name="selection"></slot>
|
|
</div>
|
|
<div
|
|
class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
|
|
>
|
|
<div class="flex flex-column justify-content-center">
|
|
<div class="grid my-2">
|
|
<div class="col text-center">
|
|
{{ $t("settings.language") }}
|
|
</div>
|
|
<div class="col text-center">
|
|
<LocaleSwitcher />
|
|
</div>
|
|
</div>
|
|
<div class="grid my-2">
|
|
<div class="col text-center">
|
|
{{ $t("settings.defaultPage") }}
|
|
</div>
|
|
<div class="col text-center">
|
|
<DefaultPageSwitcher />
|
|
</div>
|
|
</div>
|
|
<div class="grid my-2">
|
|
<div class="col text-center">
|
|
{{ $t("settings.darkMode") }}
|
|
</div>
|
|
<div class="col text-center">
|
|
<DarkModeSwitcher
|
|
@dark-mode-toggled="handleDarkModeToggled"
|
|
></DarkModeSwitcher>
|
|
</div>
|
|
</div>
|
|
<div class="grid my-2">
|
|
<div class="col text-left">
|
|
{{ $t("settings.version") }}
|
|
</div>
|
|
<div class="col text-center">
|
|
<AppVersion />
|
|
</div>
|
|
</div>
|
|
<div class="grid my-2">
|
|
<div class="col text-center"></div>
|
|
<div class="col text-center">
|
|
<ReloadPwa />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.col {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|