227 lines
8.7 KiB
Vue
227 lines
8.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container-fluid p-0">
|
|
<div class="settings d-flex flex-nowrap">
|
|
<div class="settings__sidebar col-lg-3 col-md-4 px-0" style="background-color: #f4f5f7">
|
|
<div class="d-flex flex-column align-items-sm-start pt-2 text-white min-vh-100 h-100">
|
|
<nuxt-link :to="localePath('/')" class="d-flex align-items-center pb-5 text-white text-decoration-none">
|
|
<div class="d-none d-md-inline px-sm-2 px-md-3 px-lg-3 pt-3 main-logo">
|
|
<img src="/logo-gray.svg" height="35" class="img " alt="Mindboost Logo">
|
|
</div>
|
|
<div class="d-md-none px-2 px-md-3 px-lg-3 pt-3 main-logo-mobile">
|
|
<img src="/mindboost-logo-small.svg" width="45" class="img " alt="Mindboost Logo">
|
|
</div>
|
|
</nuxt-link>
|
|
<div class="sidebar sidebar--settings">
|
|
<ul class="sidebar__main-menu">
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/account')" class="sidebar__link list-active">
|
|
<i class="fa-solid d-md-none d-block fa-user" /><span class="d-none d-md-inline">{{ t('Account') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li v-if="dataStore.user.team_subscription_plan == '0' && dataStore.user.enterprise_subscription_plan == '0' && (dataStore.user.basic_subscription_plan == '1')" class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/subscription')" class="sidebar__link list-active">
|
|
<i class="fa-solid d-md-none d-block fa-credit-card" /><span class="d-none d-md-inline">{{ t('Subscription') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/soundscape')" class="sidebar__link list-active">
|
|
<i class="fa-solid d-md-none d-block fa-volume-high" /><span class="d-none d-md-inline">{{ t('Settings') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<!-- <li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/timersettings')" class="sidebar__link list-active">
|
|
<i class="fa-solid fa-volume-high sidebar__icon" /><span class="sidebar__text">{{ t('Timer') }}</span>
|
|
</nuxt-link>
|
|
</li> -->
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/about')" class="sidebar__link list-active">
|
|
<i class="fa-solid fa-circle-info d-block d-md-none" /><span class="d-none d-md-inline"> {{ t('About Mindboost') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/faq')" class="sidebar__link list-active">
|
|
<i class="fa-solid d-block d-md-none fa-circle-question" /><span class="d-none d-md-inline">{{ t('FAQ') }} </span>
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
<ul class="sidebar__secondary-menu">
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/imprint')" class="sidebar__link sidebar__link--secondary">
|
|
<i class="fa-solid fa-stamp d-md-none d-block" /><span class="d-none d-md-inline">{{ t('Imprint') }} </span>
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/dataprotection')" class="sidebar__link sidebar__link--secondary">
|
|
<i class="fa-solid fa-shield d-block d-md-none" /><span class="d-none d-md-inline">{{ t('Data Protection') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li class="sidebar__item">
|
|
<nuxt-link :to="localePath('/settings/termsandcondition')" class="sidebar__link sidebar__link--secondary">
|
|
<i class="fa-solid fa-scale-balanced d-block d-md-none" /><span class="d-none d-md-inline">{{ t('Terms & Conditions') }}</span>
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings__content col-md-8 col-lg-9 justify-content-end px-3">
|
|
<div class="d-flex justify-content-end pb-sm-5 pt-3">
|
|
<router-link :to="localePath('/')" style="cursor: pointer">
|
|
<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 20.1-7.35 7.35c-.275.275-.625.413-1.05.413-.425 0-.775-.138-1.05-.413-.275-.275-.412-.625-.412-1.05 0-.425.137-.775.412-1.05L15.9 18l-7.35-7.35c-.275-.275-.412-.625-.412-1.05 0-.425.137-.775.412-1.05.275-.275.625-.413 1.05-.413.425 0 .775.138 1.05.413L18 15.9l7.35-7.35c.275-.275.625-.413 1.05-.413.425 0 .775.138 1.05.413.275.275.413.625.413 1.05 0 .425-.138.775-.413 1.05L20.1 18l7.35 7.35c.275.275.413.625.413 1.05 0 .425-.138.775-.413 1.05-.275.275-.625.413-1.05.413-.425 0-.775-.138-1.05-.413L18 20.1Z" fill="#585C5E" /></svg>
|
|
</router-link>
|
|
</div>
|
|
<nuxt-page key="child" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'pinia'
|
|
import { ANC } from '@/stores/interfaces/ANC'
|
|
import { HeadsetType } from '@/stores/interfaces/HeadsetType'
|
|
import { useUserStore } from '~/stores/user'
|
|
export default {
|
|
setup () {
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
})
|
|
// Use useUserStore to get the user store
|
|
const dataStore = useUserStore()
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
// useNuxtApp().$logger.log('dataStore.user.email', dataStore.user.basic_subscription_plan)
|
|
return { t, localePath, dataStore }
|
|
},
|
|
data () {
|
|
return {
|
|
adaptiveSounscape: false,
|
|
form: {
|
|
soundscape: '',
|
|
headphone_type: '',
|
|
anc_type: '',
|
|
adaptive_sound_scape: '',
|
|
dataStore: useUserStore()
|
|
}
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
this.fetchSettings()
|
|
},
|
|
methods: {
|
|
...mapActions(useUserStore, ['updateHeadsetType', 'updateANC']),
|
|
fetchSettings () {
|
|
this.$axios.post('/api/fetch-settings').then(({ data }) => {
|
|
if (data.success) {
|
|
this.form = data.setting
|
|
if (data.setting.adaptive_sound_scape === 'yes' || data.setting.adaptive_sound_scape === 'Yes') {
|
|
this.adaptiveSounscape = true
|
|
} else {
|
|
this.adaptiveSounscape = false
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
this.$toast.error('something went wrong while saving...')
|
|
})
|
|
},
|
|
saveSetting (value, type) {
|
|
if (type === 'soundscape') {
|
|
this.form.soundscape = value
|
|
}
|
|
if (type === 'headphone') {
|
|
this.form.headphone_type = value
|
|
if (value === 'In-ear') { this.updateHeadsetType(HeadsetType.InEar) } else { this.updateHeadsetType(HeadsetType.OverEar) }
|
|
}
|
|
if (type === 'anc') {
|
|
this.form.anc_type = value
|
|
if (value === 'yes' || value === 'Yes') { this.updateANC(ANC.Yes) } else { this.updateANC(ANC.No) }
|
|
}
|
|
if (type === 'adaptivesoundscape') {
|
|
if (this.adaptiveSounscape === true) {
|
|
this.form.adaptive_sound_scape = 'no'
|
|
} else {
|
|
this.form.adaptive_sound_scape = 'yes'
|
|
}
|
|
}
|
|
|
|
this.$axios.post('/api/update-setting', this.form).then(({ data }) => {
|
|
if (data.success) {
|
|
this.$toast.success(data.message)
|
|
this.form = data.setting
|
|
}
|
|
}).catch(() => {
|
|
this.$toast.error('something went wrong while saving...')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.settings__sidebar {
|
|
height: 100vh;
|
|
position: sticky;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.settings__content {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.list-active{
|
|
width: 100% !important;
|
|
font-size: 18px;
|
|
}
|
|
.list-active.router-link-exact-active{
|
|
background-color: #e9c046;
|
|
color: white !important;
|
|
width: 100% !important;
|
|
border-radius: 0;
|
|
}
|
|
.list-active:active a{
|
|
color: white !important;
|
|
}
|
|
.list-active:hover, .list-active:focus {
|
|
border-radius: 0;
|
|
}
|
|
.main-logo img {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (max-width: 1024px) {
|
|
.main-logo img {
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.fivith-icon.router-link-exact-active{
|
|
content: url('~/assets/image/Vector (4).png');
|
|
background-color: #e9c046;
|
|
border-radius: 5px;
|
|
padding: 10px 10px;
|
|
text-align: center;
|
|
}
|
|
.accordion-button-homebar::after {
|
|
background-size: 16px;
|
|
background-position-y: 4px;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.navbar-logo{
|
|
width: 160px !important;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
.drop-active{
|
|
color: white !important;
|
|
background-color: #e9c046;
|
|
border-radius: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|