Skip to content

Commit dbcfa13

Browse files
benfrancisbenfrancis
committed
Implement occupancy sensor capability - closes #3223 
1 parent a99745e commit dbcfa13

File tree

18 files changed

+374
-0
lines changed

18 files changed

+374
-0
lines changed

‎static/fluent/en-CA/main.ftl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ SmartPlug = Smart Plug
270270
Light = Light
271271
DoorSensor = Door Sensor
272272
MotionSensor = Motion Sensor
273+
OccupancySensor = Occupancy Sensor
273274
LeakSensor = Leak Sensor
274275
PushButton = Push Button
275276
VideoCamera = Video Camera
@@ -306,6 +307,8 @@ color-temperature = Colour Temperature
306307
video-unsupported = Sorry, video is not supported in your browser.
307308
motion = Motion
308309
no-motion = No Motion
310+
occupied = Occupied
311+
unoccupied = Unoccupied
309312
open = Open
310313
closed = Closed
311314
locked = Locked

‎static/fluent/en-GB/main.ftl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ SmartPlug = Smart Plug
270270
Light = Light
271271
DoorSensor = Door Sensor
272272
MotionSensor = Motion Sensor
273+
OccupancySensor = Occupancy Sensor
273274
LeakSensor = Leak Sensor
274275
PushButton = Push Button
275276
VideoCamera = Video Camera
@@ -306,6 +307,8 @@ color-temperature = Colour Temperature
306307
video-unsupported = Sorry, video is not supported in your browser.
307308
motion = Motion
308309
no-motion = No Motion
310+
occupied = Occupied
311+
unoccupied = Unoccupied
309312
open = Open
310313
closed = Closed
311314
locked = Locked

‎static/fluent/en-US/main.ftl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ SmartPlug = Smart Plug
271271
Light = Light
272272
DoorSensor = Door Sensor
273273
MotionSensor = Motion Sensor
274+
OccupancySensor = Occupancy Sensor
274275
LeakSensor = Leak Sensor
275276
PushButton = Push Button
276277
VideoCamera = Video Camera
@@ -307,6 +308,8 @@ color-temperature = Color Temperature
307308
video-unsupported = Sorry, video is not supported in your browser.
308309
motion = Motion
309310
no-motion = No Motion
311+
occupied = Occupied
312+
unoccupied = Unoccupied
310313
open = Open
311314
closed = Closed
312315
locked = Locked

‎static/images/component-icons/occupancy-sensor-occupied.svg‎

Lines changed: 37 additions & 0 deletions
Loading

‎static/images/component-icons/occupancy-sensor-unoccupied.svg‎

Lines changed: 33 additions & 0 deletions
Loading

‎static/images/thing-icons/occupancy_sensor.svg‎

Lines changed: 34 additions & 0 deletions
Loading

‎static/js/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,7 @@ require('./components/capability/lock');
518518
require('./components/capability/motion-sensor');
519519
require('./components/capability/multi-level-sensor');
520520
require('./components/capability/multi-level-switch');
521+
require('./components/capability/occupancy-sensor');
521522
require('./components/capability/on-off-switch');
522523
require('./components/capability/push-button');
523524
require('./components/capability/smart-plug');
@@ -546,6 +547,7 @@ require('./components/property/locked');
546547
require('./components/property/motion');
547548
require('./components/property/number');
548549
require('./components/property/numeric-label');
550+
require('./components/property/occupied');
549551
require('./components/property/on-off');
550552
require('./components/property/open');
551553
require('./components/property/pushed');

‎static/js/components/capability/occupancy-sensor.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* OccupancySensorCapability
3+
*
4+
* A bubble showing an occupancy sensor icon.
5+
*
6+
* This Source Code Form is subject to the terms of the Mozilla Public
7+
* License, v. 2.0. If a copy of the MPL was not distributed with this
8+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
9+
*/
10+
'use strict';
11+
12+
const BaseComponent = require('../base-component');
13+
const fluent = require('../../fluent');
14+
15+
const template = document.createElement('template');
16+
template.innerHTML = `
17+
<style>
18+
:host {
19+
display: block;
20+
contain: content;
21+
text-align: center;
22+
color: white;
23+
font-size: 1.6rem;
24+
cursor: default;
25+
}
26+
27+
.webthing-occupancy-sensor-capability-icon {
28+
width: 12.4rem;
29+
height: 12.4rem;
30+
border-radius: 6.4rem;
31+
border: 0.2rem solid white;
32+
background-size: 6.4rem;
33+
background-repeat: no-repeat;
34+
transform: translate(0);
35+
background-color: #89b6d6;
36+
background-image: url('/images/component-icons/occupancy-sensor-unoccupied.svg');
37+
background-position: center 2rem;
38+
}
39+
40+
.webthing-occupancy-sensor-capability-icon.occupied {
41+
background-color: white;
42+
background-image: url('/images/component-icons/occupancy-sensor-occupied.svg');
43+
}
44+
45+
.webthing-occupancy-sensor-capability-label {
46+
font-weight: bold;
47+
text-transform: uppercase;
48+
padding-top: 8.75rem;
49+
font-size: 1.2rem;
50+
}
51+
52+
.webthing-occupancy-sensor-capability-icon.occupied
53+
.webthing-occupancy-sensor-capability-label {
54+
color: #5d9bc7;
55+
font-size: 1.4rem;
56+
}
57+
</style>
58+
<div id="icon" class="webthing-occupancy-sensor-capability-icon">
59+
<div id="label" class="webthing-occupancy-sensor-capability-label">--</div>
60+
</div>
61+
`;
62+
63+
class OccupancySensorCapability extends BaseComponent {
64+
constructor() {
65+
super(template);
66+
67+
this._icon = this.shadowRoot.querySelector('#icon');
68+
this._label = this.shadowRoot.querySelector('#label');
69+
70+
this._occupied = false;
71+
}
72+
73+
connectedCallback() {
74+
this.occupied = typeof this.dataset.occupied !== 'undefined' ? this.dataset.occupied : null;
75+
}
76+
77+
get occupied() {
78+
return this._occupied;
79+
}
80+
81+
set occupied(value) {
82+
this._occupied = Boolean(value);
83+
84+
if (value === null) {
85+
this._icon.classList.remove('occupied');
86+
this._label.innerText = fluent.getMessage('ellipsis');
87+
} else if (this._occupied) {
88+
this._icon.classList.add('occupied');
89+
this._label.innerText = fluent.getMessage('occupied');
90+
} else {
91+
this._icon.classList.remove('occupied');
92+
this._label.innerText = fluent.getMessage('unoccupied');
93+
}
94+
}
95+
}
96+
97+
window.customElements.define('webthing-occupancy-sensor-capability', OccupancySensorCapability);
98+
module.exports = OccupancySensorCapability;

‎static/js/components/property/occupied.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* OccupiedProperty
3+
*
4+
* A bubble showing an occupied or not occupied label.
5+
*
6+
* This Source Code Form is subject to the terms of the Mozilla Public
7+
* License, v. 2.0. If a copy of the MPL was not distributed with this
8+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
9+
*/
10+
'use strict';
11+
12+
const StringLabelProperty = require('./string-label');
13+
14+
class OccupiedProperty extends StringLabelProperty {
15+
connectedCallback() {
16+
this.uppercase = true;
17+
super.connectedCallback();
18+
}
19+
}
20+
21+
window.customElements.define('webthing-occupied-property', OccupiedProperty);
22+
module.exports = OccupiedProperty;

‎static/js/icons.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ function capabilityToIcon(capability) {
4646
return '/images/thing-icons/door_sensor.svg';
4747
case 'MotionSensor':
4848
return '/images/thing-icons/motion_sensor.svg';
49+
case 'OccupancySensor':
50+
return '/images/thing-icons/occupancy_sensor.svg';
4951
case 'LeakSensor':
5052
return '/images/thing-icons/leak_sensor.svg';
5153
case 'SmokeSensor':

0 commit comments

Comments
 (0)