131 lines
2.5 KiB
Vue
131 lines
2.5 KiB
Vue
|
<template>
|
||
|
<div>
|
||
|
<h3>{{ $t('status.title') }}</h3>
|
||
|
|
||
|
<div v-if="static === null" class="loading">
|
||
|
<LoadingIndicator></LoadingIndicator>
|
||
|
</div>
|
||
|
|
||
|
<div v-else>
|
||
|
<div class="slidercontainer">
|
||
|
<input type="range" min="0" max="255" class="slider red" v-model.number="static.r">
|
||
|
</div>
|
||
|
<div class="slidercontainer">
|
||
|
<input type="range" min="0" max="255" class="slider green" v-model.number="static.g">
|
||
|
</div>
|
||
|
<div class="slidercontainer">
|
||
|
<input type="range" min="0" max="255" class="slider blue" v-model.number="static.b">
|
||
|
</div>
|
||
|
<div class="slidercontainer">
|
||
|
<input type="range" min="0" max="255" class="slider white" v-model.number="static.w">
|
||
|
</div>
|
||
|
|
||
|
<div class="buttons">
|
||
|
<a class="button button-secondary" @click.prevent="staticOff">{{ $t('status.staticOff') }}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import axios from 'axios';
|
||
|
import LoadingIndicator from '@/components/loadingIndicator.vue';
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
LoadingIndicator
|
||
|
},
|
||
|
|
||
|
data()
|
||
|
{
|
||
|
return {
|
||
|
static: null
|
||
|
}
|
||
|
},
|
||
|
|
||
|
|
||
|
mounted()
|
||
|
{
|
||
|
const self = this;
|
||
|
|
||
|
self.disableSetStatic = false;
|
||
|
self.setStaticTimer = false;
|
||
|
|
||
|
// TODO load current settings (no API for it yet)
|
||
|
self.static = {
|
||
|
r: 0,
|
||
|
g: 0,
|
||
|
b: 0,
|
||
|
w: 0
|
||
|
};
|
||
|
|
||
|
self.$watch('static', () =>
|
||
|
{
|
||
|
self.staticChanged();
|
||
|
}, { deep: true });
|
||
|
},
|
||
|
|
||
|
|
||
|
methods: {
|
||
|
staticOff()
|
||
|
{
|
||
|
this.static = {
|
||
|
r: 0,
|
||
|
g: 0,
|
||
|
b: 0,
|
||
|
w: 0
|
||
|
};
|
||
|
},
|
||
|
|
||
|
|
||
|
staticChanged()
|
||
|
{
|
||
|
var self = this;
|
||
|
console.log(self.setStaticTimer);
|
||
|
|
||
|
if (self.setStaticTimer === false)
|
||
|
self.setStaticTimer = setTimeout(() =>
|
||
|
{
|
||
|
self.setStatic();
|
||
|
}, 200);
|
||
|
},
|
||
|
|
||
|
|
||
|
setStatic()
|
||
|
{
|
||
|
var self = this;
|
||
|
|
||
|
if (self.settingStatic)
|
||
|
{
|
||
|
self.setStaticTimer = setTimeout(() =>
|
||
|
{
|
||
|
self.setStatic();
|
||
|
}, 200);
|
||
|
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
self.settingStatic = true;
|
||
|
self.setStaticTimer = false;
|
||
|
|
||
|
|
||
|
axios.get('/api/set/static', { params: this.static })
|
||
|
.then(response =>
|
||
|
{
|
||
|
})
|
||
|
.catch(e => self.handleAPIError('error.setColor', e))
|
||
|
.then(() =>
|
||
|
{
|
||
|
self.settingStatic = false;
|
||
|
});
|
||
|
},
|
||
|
|
||
|
|
||
|
handleAPIError(messageId, error)
|
||
|
{
|
||
|
this.$store.dispatch('notifyAPIError', { message: this.$i18n.t(messageId), error });
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|