-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
55 lines (55 loc) · 1.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
.v-slider {
height: calc(100vh - 150px);
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-row>
<v-col v-for="mixer in mixers" v-bind:key="mixer.num">
<v-slider @change="change(mixer.name, mixer.left)" vertical v-model="mixer.left"></v-slider>
</v-col>
</v-row>
<v-row>
<v-col v-for="mixer in mixers" v-bind:key="mixer.num">
<div style="text-align: center">{{mixer.left}}% <!--{{mixer.right}}%--></div>
<div style="text-align: center">{{mixer.shortname}}</div>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
vuetify: new Vuetify({
theme: {
dark: true
}
}),
data: {
mixers: []
},
methods: {
change: function (name, value) {
window.fetch(`sset?name=${encodeURIComponent(name)}&left=${value}&right=${value}`);
}
}
});
window.fetch('scontents').then(res => res.json()).then(data => {
vm.mixers = data;
});
</script>
</body>
</html>