99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<script setup>
|
|
import { useNotificationsStore } from '../../stores/notifications';
|
|
import CustomSwitch from '../../components/CustomSwitch.vue'
|
|
import { useI18n } from 'vue-i18n';
|
|
import { ref } from 'vue';
|
|
import { onMounted } from 'vue';
|
|
import { watch } from 'vue';
|
|
import { usePrivacyStore } from '../../stores/privacy';
|
|
|
|
const lang = ref(null);
|
|
const privacy = ref(false);
|
|
|
|
const noty = useNotificationsStore();
|
|
const privacyStore = usePrivacyStore();
|
|
const { t, locale } = useI18n();
|
|
|
|
onMounted(() => {
|
|
lang.value = localStorage.getItem('lang') ?? 'es';
|
|
locale.value = lang.value;
|
|
privacy.value = privacyStore.privacy;
|
|
});
|
|
|
|
watch(lang, () => {
|
|
locale.value = lang.value
|
|
localStorage.setItem('lang', lang.value)
|
|
})
|
|
|
|
watch(privacy, () => {
|
|
privacyStore.updatePrivacy(privacy.value);
|
|
})
|
|
|
|
const closePopup = () => {
|
|
noty.toggleConfig();
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="noty.openConfig"
|
|
>
|
|
<div
|
|
class="content-popup"
|
|
@click="closePopup()"
|
|
>
|
|
</div>
|
|
<div
|
|
class="profile-card">
|
|
<i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
|
|
<br>
|
|
<CustomSwitch
|
|
label="Activar configuracion de privacidad"
|
|
v-model="privacy"
|
|
name="privacity"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.content-popup {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
width: 100wv;
|
|
right: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
cursor: pointer;
|
|
bottom: 0px;
|
|
background-color: #000;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.profile-card {
|
|
position: fixed;
|
|
flex: 1;
|
|
right: 20px;
|
|
top: 70px;
|
|
z-index: 2000;
|
|
width: 340px;
|
|
background-color: #FFF;
|
|
opacity: 1;
|
|
border-radius: 13px;
|
|
padding: 20px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
|
}
|
|
|
|
.close-icon {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 16px;
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
}
|
|
</style> |