mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-04 07:40:12 -05:00
105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<div class="field">
|
|
<input
|
|
:id="option.name"
|
|
v-model="option.value"
|
|
type="checkbox"
|
|
class="switch is-rounded mr-2"
|
|
@change="update_setting"
|
|
/>
|
|
<label class="pt-0" :for="option.name">
|
|
<slot name="label" />
|
|
</label>
|
|
<i
|
|
class="is-size-7"
|
|
:class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
|
|
v-text="info"
|
|
/>
|
|
<p v-if="$slots['info']" class="help">
|
|
<slot name="info" />
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import webapi from '@/webapi'
|
|
|
|
export default {
|
|
name: 'SettingsCheckbox',
|
|
props: {
|
|
category_name: { required: true, type: String },
|
|
option_name: { required: true, type: String }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
statusUpdate: '',
|
|
timerDelay: 2000,
|
|
timerId: -1
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
info() {
|
|
if (this.is_success) {
|
|
return this.$t('setting.saved')
|
|
} else if (this.is_error) {
|
|
return this.$t('setting.not-saved')
|
|
}
|
|
return ''
|
|
},
|
|
is_error() {
|
|
return this.statusUpdate === 'error'
|
|
},
|
|
is_success() {
|
|
return this.statusUpdate === 'success'
|
|
},
|
|
option() {
|
|
const option = this.$store.getters.settings_option(
|
|
this.category_name,
|
|
this.option_name
|
|
)
|
|
if (!option) {
|
|
return {
|
|
category: this.category_name,
|
|
name: this.option_name,
|
|
value: false
|
|
}
|
|
}
|
|
return option
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
clear_status() {
|
|
if (this.is_error) {
|
|
this.option.value = !this.option.value
|
|
}
|
|
this.statusUpdate = ''
|
|
},
|
|
update_setting() {
|
|
this.timerId = -1
|
|
const option = {
|
|
category: this.category_name,
|
|
name: this.option_name,
|
|
value: this.option.value
|
|
}
|
|
webapi
|
|
.settings_update(this.category_name, option)
|
|
.then(() => {
|
|
this.$store.dispatch('update_settings_option', option)
|
|
this.statusUpdate = 'success'
|
|
})
|
|
.catch(() => {
|
|
this.statusUpdate = 'error'
|
|
})
|
|
.finally(() => {
|
|
this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|