1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3import { Animation, Measurements, Colors, Style, Palette } from "../common.slint";
4import { Control} from "control.slint";
5import { AppState, Orientation } from "../appState.slint";
6import { HaText } from "general/haText.slint";
7import { LineEdit } from "std-widgets.slint";
8import { InnerShadowRectangle } from "general/innerShadowRectangle.slint";
9
10export component ArmButton inherits Rectangle {
11 callback clicked;
12 in property <int> label;
13 in property <bool> enabled;
14 if label != -1: Rectangle {
15 Image {
16 source: ta.pressed ? @image-url("../images/default-button.png", nine-slice(0 50 0 50)) : @image-url("../images/pressed-button.png", nine-slice(0 50 0 50));
17 width: 100px;
18 height: self.source.height * 1px;
19 }
20
21 HaText {
22 y: 18px;
23 font-size: root.label == -2 ? Style.H1-font-size * 0.6 : Style.H2-font-size;
24 text: root.label == -2 ? "⌫" : root.label;
25 color: Palette.control-alternate-foreground;
26 visible: root.label != -1;
27 }
28
29 ta := TouchArea {
30 enabled: root.label != -1 && root.enabled;
31 clicked => {
32 root.clicked();
33 }
34 }
35 }
36
37}
38
39export component Alarm inherits Control {
40 property <int> current-page: AppState.current-page;
41 property <bool> unlocked: false;
42 property <bool> is-active: false;
43 property <string> passcode;
44 property <string> indirect-passcode: passcode == "-1" ? "" : passcode;
45 show-label: false;
46
47 clip: AppState.graphics-accelerator-available;
48
49 content := Rectangle {
50 ta := TouchArea {
51 clicked => {
52 AppState.showFullScreen(root.index);
53 if root.full-screen {
54 root.full-screen = false;
55 }
56 }
57 }
58
59 tile := Rectangle {
60
61 VerticalLayout {
62 visible: !root.full-screen;
63 alignment: center;
64 spacing: 60px;
65 HaText {
66 text: "Home Alarm \nOff";
67 horizontal-alignment: center;
68 font-size: Style.H2-font-size;
69 color: Palette.hvac-knob-foreground;
70 font-weight: 300;
71 x: parent.width / 2 - self.width / 2;
72 }
73
74 Rectangle {
75 x: (parent.width - self.width) / 2;
76 width: root.width * 0.7;
77 height: 50px;
78 Image {
79 y: 0;
80 source: ta.pressed ? @image-url("../images/pressed-button.png", nine-slice(0 50 0 50)) : @image-url("../images/default-button.png", nine-slice(0 50 0 50));
81 width: parent.width;
82 height: self.source.height * 1px;
83 }
84
85 HaText {
86 y: 14px;
87 text: "Arm Alarm";
88 color: Palette.foreground;
89 font-size: Style.H3-font-size;
90 }
91 }
92 }
93
94 pad := Rectangle {
95 width: 200px;
96 states [
97 isVisible when root.full-screen: {
98 opacity: 1;
99 in {
100 animate opacity {
101 duration: Animation.full-screen-duration;
102 easing: ease-in-out-sine;
103 }
104 }
105 }
106 notVisible when !root.full-screen: {
107 opacity: 0;
108 in {
109 animate opacity {
110 duration: Animation.full-screen-duration;
111 easing: ease-in-out-sine;
112 }
113 }
114 }
115 ]
116 x: parent.width / 2 - self.width / 2;
117 if root.full-screen: Rectangle {
118 y: parent.height * 0.2;
119 width: 65px * 3 + 2 * 5px;
120 height: (95px * 5) + (4 * 10px);
121 container := Rectangle {
122 y: 0;
123 border-radius: 10px;
124 width: 100%;
125 height: 48px;
126 background: Palette.alternate-background;
127 le := LineEdit {
128 font-size: Style.H1-font-size;
129 text: root.indirect-passcode;
130 input-type: password;
131 width: 145px;
132 }
133
134 mask := Rectangle {
135 width: le.width + (9px * 2);
136 height: container.height - 1px;
137 x: le.x - 9px;
138 y: container.y + 1px;
139 border-width: 9px;
140 border-color: Palette.lineedit-background;
141 }
142
143 Rectangle {
144 width: (container.width - mask.width) / 2;
145 height: container.height;
146 x: container.x;
147 y: container.y;
148 border-radius: 5px;
149 background: Palette.lineedit-background;
150 }
151
152 Rectangle {
153 width: (container.width - mask.width) / 2;
154 height: container.height;
155 x: mask.x + mask.width;
156 y: container.y;
157 border-radius: 5px;
158 background: Palette.lineedit-background;
159 }
160 // Cover the text input to stop it from receiving touch events
161 TouchArea { }
162 }
163
164 TouchArea {
165 enabled: root.full-screen;
166 }
167
168 for row-model[r] in [
169 [1, 2, 3],
170 [4, 5, 6],
171 [7, 8, 9],
172 [-1, 0, -2],
173 ]: Rectangle {
174 y: (r * 52px) + 52px;
175 width: 100%;
176 height: 95px;
177
178 HorizontalLayout {
179 spacing: 15px;
180 for num[c] in row-model: ArmButton {
181 label: num;
182 enabled: root.full-screen;
183 clicked => {
184 if num >= 0 && root.passcode == -1 {
185 root.passcode = num;
186 } else if passcode.character-count > 4 {
187 root.passcode = -1;
188 } else if num >= 0 {
189 root.passcode += num;
190 } else if num == -2 {
191 root.passcode = -1;
192 }
193 }
194 }
195 }
196 }
197 }
198 }
199 }
200
201 HaText {
202 visible: root.full-screen;
203 text: "Enter Code";
204 horizontal-alignment: center;
205 font-size: Style.H2-font-size;
206 color: Palette.hvac-knob-foreground;
207 font-weight: 300;
208 x: parent.width / 2 - self.width / 2;
209 y: 50px;
210 }
211
212 x: 0;
213 VerticalLayout {
214 alignment: end;
215 spacing: 2px;
216 padding: 2px;
217
218 controls := Rectangle {
219 border-radius: 10px;
220 width: 95%;
221 height: self.preferred-height;
222 background: Palette.music-gradient.transparentize(0.2);
223 HorizontalLayout {
224 alignment: space-around;
225 padding-top: 8px;
226 padding-bottom: 8px;
227 }
228 }
229 }
230 }
231
232 closeButton := Image {
233 opacity: root.full-screen ? 1 : 0;
234 animate opacity {
235 duration: Animation.full-screen-duration;
236 easing: ease-in-out-sine;
237 }
238 source: @image-url("../images/reduce.svg");
239 colorize: white;
240 x: root.width - self.width - self.y;
241 y: 15px;
242 width: 30px;
243 height: 30px;
244 TouchArea {
245 enabled: closeButton.opacity > 0.1;
246 clicked => {
247 root.full-screen = false;
248 AppState.showFullScreen(-1);
249 }
250 }
251 }
252}
253