forked from kaverti/website
136 lines
3.9 KiB
Vue
136 lines
3.9 KiB
Vue
<template>
|
|
<main>
|
|
<div v-if="$store.state.developerMode">
|
|
<center>
|
|
<h1>Experiments</h1>
|
|
<div class="column">
|
|
<h2>Dark Theme</h2>
|
|
<b-switch
|
|
passive-type='is-warning'
|
|
type='is-dark'
|
|
false-value="light"
|
|
true-value="dark"
|
|
v-model="experiments.theme"
|
|
v-if="$store.state.developerMode">
|
|
Theme
|
|
</b-switch>
|
|
<br/>
|
|
<br/>
|
|
<b-button
|
|
class='button is-info'
|
|
:loading='experiments.loading'
|
|
@click='savePreferences'
|
|
>
|
|
Save experiment preferences
|
|
</b-button>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
<div v-else>
|
|
<center>
|
|
<h2>Please enable Integration Developer Mode to gain access to experiments.</h2>
|
|
<p>It's easy! Just go to Settings > General, flip the switch and save! </p>
|
|
</center>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import FancyTextarea from '../FancyTextarea'
|
|
|
|
import AjaxErrorHandler from '../../assets/js/errorHandler'
|
|
import logger from '../../assets/js/logger'
|
|
|
|
export default {
|
|
name: 'settingsGeneral',
|
|
components: {
|
|
// eslint-disable-next-line vue/no-unused-components
|
|
FancyTextarea
|
|
},
|
|
data () {
|
|
return {
|
|
experiments: {
|
|
theme: '',
|
|
loading: false,
|
|
error: ''
|
|
},
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
capitalizeFirstLetter(value) {
|
|
return value.toUpperCase()
|
|
},
|
|
saveDescription() {
|
|
this.description.error = ''
|
|
this.description.loading = true
|
|
|
|
this.axios
|
|
.put('/api/v1/users/preferences', {
|
|
description: this.description.value
|
|
})
|
|
.then(() => {
|
|
this.description.loading = false
|
|
})
|
|
.catch(e => {
|
|
this.description.loading = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
savePreferences() {
|
|
this.experiments.error = ''
|
|
this.experiments.loading = true
|
|
|
|
this.axios
|
|
.put('/api/v1/users/experiments', {
|
|
theme: this.experiments.theme
|
|
})
|
|
.then(() => {
|
|
this.experiments.loading = false
|
|
this.axios.get('/api/v1/userinfo')
|
|
.then(res => {
|
|
this.$store.commit('setUsername', res.data.username)
|
|
this.$store.commit('setEmail', res.data.email)
|
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
|
this.$store.commit('setAdmin', res.data.admin)
|
|
this.$store.commit('setDevMode', res.data.developerMode)
|
|
this.$store.commit('setTheme', res.data.theme)
|
|
if(res.data.theme === "dark") {
|
|
alert("Please refresh to enable this experiment. (theme)")
|
|
} else {
|
|
alert("Please refresh to disable this experiment. (theme)")
|
|
}
|
|
})
|
|
})
|
|
.catch(e => {
|
|
this.experiments.loading = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
}
|
|
},
|
|
created () {
|
|
this.axios.get('/api/v1/userinfo')
|
|
.then(res => {
|
|
this.$store.commit('setUsername', res.data.username)
|
|
this.$store.commit('setEmail', res.data.email)
|
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
|
this.$store.commit('setAdmin', res.data.admin)
|
|
this.$store.commit('setDevMode', res.data.developerMode)
|
|
})
|
|
this.$store.dispatch('setTitle', 'Experiments')
|
|
|
|
this.$nextTick(() => {
|
|
this.axios
|
|
.get('/api/v1/userinfo')
|
|
.then(res => {
|
|
this.experiments.theme = res.data.theme || ''
|
|
})
|
|
.catch(e => {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
})
|
|
|
|
logger('settingsGeneral')
|
|
}
|
|
}
|
|
</script>
|