1<template>
2  <v-container>
3    <v-layout text-xs-center wrap>
4      <v-flex xs12 sm6 offset-sm3>
5        <v-card>
6          <v-responsive :style="{ background: `rgb(${red}, ${green}, ${blue})` }" height="300px"></v-responsive>
7          <v-card-text>
8            <v-container fluid grid-list-lg>
9              <v-layout row wrap>
10                <v-flex xs9>
11                  <v-slider v-model="red" :max="255" label="R"></v-slider>
12                </v-flex>
13                <v-flex xs3>
14                  <v-text-field v-model="red" class="mt-0" type="number"></v-text-field>
15                </v-flex>
16                <v-flex xs9>
17                  <v-slider v-model="green" :max="255" label="G"></v-slider>
18                </v-flex>
19                <v-flex xs3>
20                  <v-text-field v-model="green" class="mt-0" type="number"></v-text-field>
21                </v-flex>
22                <v-flex xs9>
23                  <v-slider v-model="blue" :max="255" label="B"></v-slider>
24                </v-flex>
25                <v-flex xs3>
26                  <v-text-field v-model="blue" class="mt-0" type="number"></v-text-field>
27                </v-flex>
28              </v-layout>
29            </v-container>
30          </v-card-text>
31          <v-btn fab dark large color="red accent-4" @click="set_color">
32            <v-icon dark>check_box</v-icon>
33          </v-btn>
34        </v-card>
35      </v-flex>
36    </v-layout>
37  </v-container>
38</template>
39
40<script>
41export default {
42  data() {
43    return { red: 160, green: 160, blue: 160 };
44  },
45  methods: {
46    set_color: function() {
47      this.$ajax
48        .post("/api/v1/light/brightness", {
49          red: this.red,
50          green: this.green,
51          blue: this.blue
52        })
53        .then(data => {
54          console.log(data);
55        })
56        .catch(error => {
57          console.log(error);
58        });
59    }
60  }
61};
62</script>
63