-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (101 loc) · 10.1 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LIFX Desktop Application</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div vue-app>
<header>
<span v-if="controlling">{{ controlling.title }}</span>
<img v-if="!controlling" src="./images/logo.svg" alt="LIFX" width="52" height="20">
<a v-on:click.prevent="logout" v-if="access_token && lights.length">Logout</a>
</header>
<!-- Auth form -->
<div v-if="!access_token || !lights.length">
<form v-on:submit.prevent="authenticate">
<h3>An access token is required</h3>
<p>You can generate personal access tokens from your <a href="https://cloud.lifx.com/settings" target="_blank">LIFX Cloud</a> account.</p>
<input type="text" v-model="access_token">
<button class="btn">Connect</button>
</form>
</div>
<!-- If we have the users access token -->
<div v-if="access_token && lights.length">
<!-- List all lights -->
<div v-if="!controlling">
<div id="bulbs" class="text-center" v-if="lights.length">
<h1>Lights</h1>
<!-- <group-switch :lights="{id: 'all', name: 'All Lights', lights: lights}"></group-switch> -->
<light-switch v-for="light in order_by(lights, 'label')" :key="light.id" :data="light"></light-switch>
<h1>Groups</h1>
<group-switch v-for="group in order_by(groups, 'name')" :key="group.id" :group="group"></group-switch>
</div>
<h1 v-if="!lights.length" class="text-center text-white">Loading...</h1>
</div>
<!-- Show single light -->
<div v-if="controlling">
<color-picker></color-picker>
</div>
</div>
</div>
<script type="text/x-template" id="group-switch-template">
<div class="switch" v-if="group.lights.length">
<button class="toggle-power" v-on:click="toggle()">
<strong>{{ group.lights.length }}</strong>
<svg viewBox="0 0 36 36" class="svg">
<circle class="base" cx="18" cy="18" r="16"></circle>
<path class="progress" :stroke="hex_color" stroke-dasharray="100, 100" stroke-linecap="round" d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32"></path>
<path d="M11.8459999,13.8457498 L11.8459999,17.4193566 C11.8459999,17.7731287 11.9679341,18.1160901 12.1912603,18.3904624 L15.3801612,22.3082548 C15.3421539,22.3315872 15.2974292,22.345041 15.2495622,22.345041 L15.0686756,22.7068142 C15.0263312,22.7915032 14.9397726,22.8449993 14.8450875,22.8449993 L13.1542455,22.8449993 C13.0595603,22.8449993 12.9730018,22.7915032 12.9306573,22.7068142 L12.7497707,22.345041 C12.611711,22.345041 12.4997915,22.2331215 12.4997915,22.0950619 L12.4997915,20.8451661 L10.2244193,18.0497087 C10.0792572,17.8713668 10,17.6484419 10,17.41849 L10,14.0957289 C10,13.9576692 10.1119195,13.8457498 10.2499792,13.8457498 L11.8459999,13.8457498 Z M20.6185047,22.3082548 L23.8074055,18.3904624 C24.0307318,18.1160901 24.152666,17.7731287 24.152666,17.4193566 L24.152666,13.8457498 L25.7486867,13.8457498 C25.8867464,13.8457498 25.9986659,13.9576692 25.9986659,14.0957289 L25.9986659,17.41849 C25.9986659,17.6484419 25.9194086,17.8713668 25.7742466,18.0497087 L23.4988743,20.8451661 L23.4988743,22.0950619 C23.4988743,22.2331215 23.3869549,22.345041 23.2488952,22.345041 L23.0680086,22.7068142 C23.0256641,22.7915032 22.9391055,22.8449993 22.8444204,22.8449993 L21.1535784,22.8449993 C21.0588933,22.8449993 20.9723347,22.7915032 20.9299902,22.7068142 L20.7491036,22.345041 C20.7012367,22.345041 20.656512,22.3315872 20.6185047,22.3082548 Z M24.152666,10.8459999 L25.7486867,10.8459999 C25.8867464,10.8459999 25.9986659,10.9579194 25.9986659,11.0959791 L25.9986659,13.0958123 C25.9986659,13.233872 25.8867464,13.3457915 25.7486867,13.3457915 L24.152666,13.3457915 L24.152666,10.8459999 Z M11.8459999,13.3457915 L10.2499792,13.3457915 C10.1119195,13.3457915 10,13.233872 10,13.0958123 L10,11.0959791 C10,10.9579194 10.1119195,10.8459999 10.2499792,10.8459999 L11.8459999,10.8459999 L11.8459999,13.3457915 Z M12.7497707,25.3447909 L15.2495622,25.3447909 L15.0686756,25.7065641 C15.0263312,25.791253 14.9397726,25.8447492 14.8450875,25.8447492 L13.1542455,25.8447492 C13.0595603,25.8447492 12.9730018,25.791253 12.9306573,25.7065641 L12.7497707,25.3447909 Z M12.7497707,23.3449576 L15.2495622,23.3449576 C15.3876219,23.3449576 15.4995414,23.4568771 15.4995414,23.5949368 C15.4995414,23.7329965 15.3876219,23.8449159 15.2495622,23.8449159 L12.7497707,23.8449159 C12.611711,23.8449159 12.4997915,23.7329965 12.4997915,23.5949368 C12.4997915,23.4568771 12.611711,23.3449576 12.7497707,23.3449576 Z M12.7497707,24.3448742 L15.2495622,24.3448742 C15.3876219,24.3448742 15.4995414,24.4567937 15.4995414,24.5948534 C15.4995414,24.7329131 15.3876219,24.8448325 15.2495622,24.8448325 L12.7497707,24.8448325 C12.611711,24.8448325 12.4997915,24.7329131 12.4997915,24.5948534 C12.4997915,24.4567937 12.611711,24.3448742 12.7497707,24.3448742 Z M20.7491036,25.3447909 L23.2488952,25.3447909 L23.0680086,25.7065641 C23.0256641,25.791253 22.9391055,25.8447492 22.8444204,25.8447492 L21.1535784,25.8447492 C21.0588933,25.8447492 20.9723347,25.791253 20.9299902,25.7065641 L20.7491036,25.3447909 Z M20.7491036,23.3449576 L23.2488952,23.3449576 C23.3869549,23.3449576 23.4988743,23.4568771 23.4988743,23.5949368 C23.4988743,23.7329965 23.3869549,23.8449159 23.2488952,23.8449159 L20.7491036,23.8449159 C20.611044,23.8449159 20.4991245,23.7329965 20.4991245,23.5949368 C20.4991245,23.4568771 20.611044,23.3449576 20.7491036,23.3449576 Z M20.7491036,24.3448742 L23.2488952,24.3448742 C23.3869549,24.3448742 23.4988743,24.4567937 23.4988743,24.5948534 C23.4988743,24.7329131 23.3869549,24.8448325 23.2488952,24.8448325 L20.7491036,24.8448325 C20.611044,24.8448325 20.4991245,24.7329131 20.4991245,24.5948534 C20.4991245,24.4567937 20.611044,24.3448742 20.7491036,24.3448742 Z M19.8453328,21.3066661 L19.8453328,22.8449993 C19.8453328,23.0149189 19.7075858,23.152666 19.5376662,23.152666 L19.3150365,23.5979253 C19.2629202,23.7021579 19.1563866,23.7679993 19.0398511,23.7679993 L16.9588148,23.7679993 C16.8422792,23.7679993 16.7357456,23.7021579 16.6836294,23.5979253 L16.4609997,23.152666 C16.2910801,23.152666 16.153333,23.0149189 16.153333,22.8449993 L16.153333,21.3066661 L13.3528749,17.8661032 C13.1742139,17.6466054 13.0766665,17.3722363 13.0766665,17.0892185 L13.0766665,12.9996665 C13.0766665,12.8297469 13.2144136,12.6919998 13.3843332,12.6919998 L22.6143327,12.6919998 C22.7842523,12.6919998 22.9219994,12.8297469 22.9219994,12.9996665 L22.9219994,17.0892185 C22.9219994,17.3722363 22.824452,17.6466054 22.645791,17.8661032 L19.8453328,21.3066661 Z M16.4609997,26.8446658 L19.5376662,26.8446658 L19.3150365,27.2899251 C19.2629202,27.3941577 19.1563866,27.4599991 19.0398511,27.4599991 L16.9588148,27.4599991 C16.8422792,27.4599991 16.7357456,27.3941577 16.6836294,27.2899251 L16.4609997,26.8446658 Z M16.4609997,24.3833326 L19.5376662,24.3833326 C19.7075858,24.3833326 19.8453328,24.5210796 19.8453328,24.6909992 C19.8453328,24.8609188 19.7075858,24.9986659 19.5376662,24.9986659 L16.4609997,24.9986659 C16.2910801,24.9986659 16.153333,24.8609188 16.153333,24.6909992 C16.153333,24.5210796 16.2910801,24.3833326 16.4609997,24.3833326 Z M16.4609997,25.6139992 L19.5376662,25.6139992 C19.7075858,25.6139992 19.8453328,25.7517462 19.8453328,25.9216658 C19.8453328,26.0915854 19.7075858,26.2293325 19.5376662,26.2293325 L16.4609997,26.2293325 C16.2910801,26.2293325 16.153333,26.0915854 16.153333,25.9216658 C16.153333,25.7517462 16.2910801,25.6139992 16.4609997,25.6139992 Z M13.3843332,9 L22.6143327,9 C22.7842523,9 22.9219994,9.13774705 22.9219994,9.30766665 L22.9219994,11.7689999 C22.9219994,11.9389195 22.7842523,12.0766665 22.6143327,12.0766665 L13.3843332,12.0766665 C13.2144136,12.0766665 13.0766665,11.9389195 13.0766665,11.7689999 L13.0766665,9.30766665 C13.0766665,9.13774705 13.2144136,9 13.3843332,9 Z" class="icon" :fill="hex_color" fill-rule="nonzero"></path>
<text font-size="6" font-weight="bold" fill="#000002">
<tspan x="18" y="18" text-anchor="middle">{{ group.lights.length }}</tspan>
</text>
</svg>
<div class="glow" :style="{background: hex_color}"></div>
</button>
<button class="goto-single btn" v-on:click="set()">{{ group.name }}</button>
</div>
</script>
<script type="text/x-template" id="light-switch-template">
<div class="switch" v-if="data">
<button class="toggle-power" v-on:click="toggle()">
<svg viewBox="0 0 36 36" class="svg">
<circle class="base" cx="18" cy="18" r="16"></circle>
<path class="progress" :stroke="hex_color" :stroke-dasharray="percentage" :stroke-linecap="linecap" d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32"></path>
<path d="M16.5,13.8327556 L16.5,14.9325233 C15.3105492,15.56127 14.5,16.810978 14.5,18.25 C14.5,20.3210678 16.1789322,22 18.25,22 C20.3210678,22 22,20.3210678 22,18.25 C22,16.810978 21.1894508,15.56127 20,14.9325233 L20,13.8327556 C21.75731,14.5295445 23,16.2446494 23,18.25 C23,20.8733526 20.8733526,23 18.25,23 C15.6266474,23 13.5,20.8733526 13.5,18.25 C13.5,16.2446494 14.74269,14.5295445 16.5,13.8327556 Z M17.75,13.5 L18.75,13.5 L18.75,18 L17.75,18 L17.75,13.5 Z" class="icon" :fill="hex_color" fill-rule="nonzero"></path>
</svg>
<div class="glow" :style="{background: hex_color}"></div>
</button>
<button class="goto-single btn" v-on:click="set()">{{ data.label }}</button>
</div>
</script>
<script type="text/x-template" id="color-picker-template">
<div class="color-picker" :class="['power-'+single.power]">
<button class="close btn" v-on:click="close()" style="position: relative; z-index: 999;">« Go back</button>
<div class="inner">
<div class="dial"></div>
<div class="controls">
<div class="color">
<div class="handle"></div>
</div>
<div class="brightness">
<div class="handle">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</div>
</div>
</div>
</div>
</script>
<script>
window.jQuery = window.$ = require('./js/jquery.js');
window._ = require('./js/lodash.js');
window.Vue = require('./js/vue.js');
window.Lifx = require('./js/lifx.js');
require('./renderer.js');
require('./js/color-picker.js');
require('./js/app.js');
</script>
</body>
</html>