mindboost-rnbo-test-project/pages/settings.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>