191 lines
3.9 KiB
Vue
191 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<h3>{{ $t('status.title') }}</h3>
|
|
|
|
<div v-if="static === null" class="loading">
|
|
<LoadingIndicator></LoadingIndicator>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<Radio :title="$i18n.t('status.static')" v-model="type" id="static"></Radio>
|
|
|
|
<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>
|
|
|
|
<Radio :title="$i18n.t('status.rainbow.title')" v-model="type" id="rainbow"></Radio>
|
|
|
|
<p>{{ $i18n.t('status.rainbow.speed') }}</p>
|
|
<div class="slidercontainer">
|
|
<input type="range" min="0" max="200" class="slider white" v-model.number="rainbow.speed">
|
|
</div>
|
|
|
|
<p>{{ $i18n.t('status.rainbow.lightness') }}</p>
|
|
<div class="slidercontainer">
|
|
<input type="range" min="0" max="255" class="slider white" v-model.number="rainbow.lightness">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import LoadingIndicator from '@/components/loadingIndicator.vue';
|
|
import BaseVM from '@/BaseVM';
|
|
import Radio from '@/components/radio.vue';
|
|
|
|
export default {
|
|
mixins: [BaseVM],
|
|
|
|
components: {
|
|
LoadingIndicator,
|
|
Radio
|
|
},
|
|
|
|
data()
|
|
{
|
|
return {
|
|
type: 'static',
|
|
static: null,
|
|
rainbow: null
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
const self = this;
|
|
|
|
self.updating = false;
|
|
self.updateTimer = false;
|
|
|
|
self.load()
|
|
.then(() =>
|
|
{
|
|
self.$watch(
|
|
() =>
|
|
{
|
|
return [
|
|
this.type,
|
|
this.static.r, this.static.g, this.static.b, this.static.w,
|
|
this.rainbow.speed, this.rainbow.lightness
|
|
];
|
|
},
|
|
() =>
|
|
{
|
|
self.changed();
|
|
});
|
|
});
|
|
},
|
|
|
|
|
|
methods: {
|
|
load()
|
|
{
|
|
const self = this;
|
|
|
|
return axios.get('/api/strip/status')
|
|
.then(response =>
|
|
{
|
|
self.type = response.data.setting;
|
|
self.static = response.data.static.color;
|
|
self.rainbow = response.data.rainbow;
|
|
})
|
|
.catch(e => self.handleAPIError('error.getStripStatus', e));
|
|
},
|
|
|
|
|
|
staticOff()
|
|
{
|
|
this.static = {
|
|
r: 0,
|
|
g: 0,
|
|
b: 0,
|
|
w: 0
|
|
};
|
|
},
|
|
|
|
|
|
changed()
|
|
{
|
|
const self = this;
|
|
|
|
if (self.updateTimer === false)
|
|
self.updateTimer = setTimeout(() =>
|
|
{
|
|
self.update();
|
|
}, 200);
|
|
},
|
|
|
|
|
|
update()
|
|
{
|
|
const self = this;
|
|
|
|
if (self.updating)
|
|
{
|
|
self.updateTimer = setTimeout(() =>
|
|
{
|
|
self.update();
|
|
}, 200);
|
|
|
|
return;
|
|
}
|
|
|
|
|
|
let url;
|
|
let params;
|
|
|
|
switch (this.type)
|
|
{
|
|
case 'static':
|
|
url = '/api/set/static';
|
|
params = {
|
|
r: this.static.r,
|
|
g: this.static.g,
|
|
b: this.static.b,
|
|
w: this.static.w,
|
|
fadeTime: 200
|
|
};
|
|
break;
|
|
|
|
case 'rainbow':
|
|
url = '/api/set/rainbow';
|
|
params = this.rainbow;
|
|
break;
|
|
|
|
default:
|
|
return;
|
|
}
|
|
|
|
|
|
self.updating = true;
|
|
self.updateTimer = false;
|
|
|
|
axios.get(url, { params: params })
|
|
.then(response =>
|
|
{
|
|
})
|
|
.catch(e => self.handleAPIError('error.setColor', e))
|
|
.then(() =>
|
|
{
|
|
self.updating = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|