Cutlery/beestat
1
0
Fork 0
mirror of https://github.com/beestat/app.git synced 2025-07-09 03:04:07 -04:00
Code Actions Packages Releases Activity

Added title text to icons

Browse Source
This commit is contained in:
Jon Ziebell 2021-03-04 20:45:48 -05:00
parent ed3811dd9d
commit 5413d9b9e7
3 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/component/card/sensors.js
View File

@ -132,9 +132,9 @@ beestat.component.card.sensors.prototype.decorate_sensor_ = function(parent, sen
} }
if (sensor.occupancy === true) { if (sensor.occupancy === true) {
(new beestat.component.icon('eye')).render(td_icons); (new beestat.component.icon('eye', 'Occupied')).render(td_icons);
} else { } else {
(new beestat.component.icon('eye_off')) (new beestat.component.icon('eye_off', 'Unoccupied'))
.set_color(beestat.style.color.bluegray.light) .set_color(beestat.style.color.bluegray.light)
.render(td_icons); .render(td_icons);
} }
@ -145,9 +145,9 @@ beestat.component.card.sensors.prototype.decorate_sensor_ = function(parent, sen
})); }));
if (sensor.in_use === true) { if (sensor.in_use === true) {
(new beestat.component.icon('check')).render(td_icons); (new beestat.component.icon('check', 'In use')).render(td_icons);
} else { } else {
(new beestat.component.icon('check')) (new beestat.component.icon('check', 'Not in use'))
.set_color(beestat.style.color.bluegray.light) .set_color(beestat.style.color.bluegray.light)
.render(td_icons); .render(td_icons);
} }

47
js/component/card/system.js
View File

@ -86,7 +86,7 @@ beestat.component.card.system.prototype.decorate_circle_ = function(parent) {
}); });
circle.appendChild(humidity_container); circle.appendChild(humidity_container);
(new beestat.component.icon('water_percent') (new beestat.component.icon('water_percent', 'Humidity')
.set_size(24) .set_size(24)
).render(humidity_container); ).render(humidity_container);
@ -154,7 +154,7 @@ beestat.component.card.system.prototype.decorate_weather_ = function(parent) {
}); });
circle.appendChild(humidity_container); circle.appendChild(humidity_container);
(new beestat.component.icon('water_percent') (new beestat.component.icon('water_percent', 'Humidity')
.set_size(16) .set_size(16)
).render(humidity_container); ).render(humidity_container);
@ -175,20 +175,20 @@ beestat.component.card.system.prototype.decorate_weather_ = function(parent) {
beestat.component.card.system.prototype.decorate_equipment_ = function(parent) { beestat.component.card.system.prototype.decorate_equipment_ = function(parent) {
var thermostat = beestat.cache.thermostat[this.thermostat_id_]; var thermostat = beestat.cache.thermostat[this.thermostat_id_];
var render_icon = function(icon_parent, icon, color, text) { var render_icon = function(icon_parent, icon, color, subscript, tooltip) {
(new beestat.component.icon(icon) (new beestat.component.icon(icon, tooltip)
.set_size(24) .set_size(24)
.set_color(color) .set_color(color)
).render(icon_parent); ).render(icon_parent);
if (text !== undefined) { if (subscript !== undefined) {
var sub = $.createElement('sub') var sub = $.createElement('sub')
.style({ .style({
'font-size': '10px', 'font-size': '10px',
'font-weight': beestat.style.font_weight.bold, 'font-weight': beestat.style.font_weight.bold,
'color': color 'color': color
}) })
.innerHTML(text); .innerHTML(subscript);
icon_parent.appendChild(sub); icon_parent.appendChild(sub);
} else { } else {
// A little spacer to help things look less uneven. // A little spacer to help things look less uneven.
@ -198,64 +198,71 @@ beestat.component.card.system.prototype.decorate_equipment_ = function(parent) {
}; };
if (thermostat.running_equipment.length === 0) { if (thermostat.running_equipment.length === 0) {
render_icon(parent, 'cancel', beestat.style.color.gray.base, 'none'); render_icon(parent, 'cancel', beestat.style.color.gray.base, 'none', 'No equipment running');
} else { } else {
thermostat.running_equipment.forEach(function(equipment) { thermostat.running_equipment.forEach(function(equipment) {
let subscript; let subscript;
let tooltip;
switch (equipment) { switch (equipment) {
case 'fan': case 'fan':
render_icon(parent, 'fan', beestat.style.color.gray.light); render_icon(parent, 'fan', beestat.style.color.gray.light, undefined, 'Fan');
break; break;
case 'cool_1': case 'cool_1':
tooltip = 'Cool';
if (thermostat.system_type.detected.cool.stages > 1) { if (thermostat.system_type.detected.cool.stages > 1) {
subscript = '1'; subscript = '1';
tooltip += ' 1';
} else { } else {
subscript = undefined; subscript = undefined;
} }
render_icon(parent, 'snowflake', beestat.style.color.blue.light, subscript); render_icon(parent, 'snowflake', beestat.style.color.blue.light, subscript, tooltip);
break; break;
case 'cool_2': case 'cool_2':
render_icon(parent, 'snowflake', beestat.style.color.blue.light, '2'); render_icon(parent, 'snowflake', beestat.style.color.blue.light, '2', 'Cool 2');
break; break;
case 'heat_1': case 'heat_1':
tooltip = 'Heat';
if (thermostat.system_type.detected.heat.stages > 1) { if (thermostat.system_type.detected.heat.stages > 1) {
subscript = '1'; subscript = '1';
tooltip += ' 1';
} else { } else {
subscript = undefined; subscript = undefined;
} }
render_icon(parent, 'fire', beestat.style.color.orange.base, subscript); render_icon(parent, 'fire', beestat.style.color.orange.base, subscript, tooltip);
break; break;
case 'heat_2': case 'heat_2':
render_icon(parent, 'fire', beestat.style.color.orange.base, '2'); render_icon(parent, 'fire', beestat.style.color.orange.base, '2', 'Heat 2');
break; break;
case 'heat_3': case 'heat_3':
render_icon(parent, 'fire', beestat.style.color.orange.base, '3'); render_icon(parent, 'fire', beestat.style.color.orange.base, '3', 'Heat 3');
break; break;
case 'auxiliary_heat_1': case 'auxiliary_heat_1':
tooltip = 'Aux heat';
if (thermostat.system_type.detected.auxiliary_heat.stages > 1) { if (thermostat.system_type.detected.auxiliary_heat.stages > 1) {
subscript = '1'; subscript = '1';
tooltip += ' 1';
} else { } else {
subscript = undefined; subscript = undefined;
} }
render_icon(parent, 'fire', beestat.style.color.red.base, subscript); render_icon(parent, 'fire', beestat.style.color.red.base, subscript, tooltip);
break; break;
case 'auxiliary_heat_2': case 'auxiliary_heat_2':
render_icon(parent, 'fire', beestat.style.color.red.base, '2'); render_icon(parent, 'fire', beestat.style.color.red.base, '2', 'Aux heat 2');
break; break;
case 'auxiliary_heat_3': case 'auxiliary_heat_3':
render_icon(parent, 'fire', beestat.style.color.red.base, '3'); render_icon(parent, 'fire', beestat.style.color.red.base, '3', 'Aux heat 3');
break; break;
case 'humidifier': case 'humidifier':
render_icon(parent, 'water_percent', beestat.style.color.gray.base, ''); render_icon(parent, 'water_percent', beestat.style.color.gray.base, '', 'Humidifier');
break; break;
case 'dehumidifier': case 'dehumidifier':
render_icon(parent, 'water_off', beestat.style.color.gray.base, ''); render_icon(parent, 'water_off', beestat.style.color.gray.base, '', 'Dehumidifier');
break; break;
case 'ventilator': case 'ventilator':
render_icon(parent, 'air_purifier', beestat.style.color.gray.base, 'v'); render_icon(parent, 'air_purifier', beestat.style.color.gray.base, 'v', 'Ventilator');
break; break;
case 'economizer': case 'economizer':
render_icon(parent, 'cash', beestat.style.color.gray.base, ''); render_icon(parent, 'cash', beestat.style.color.gray.base, '', 'Economizer');
break; break;
} }
}); });

8
js/component/icon.js
View File

@ -1,5 +1,6 @@
beestat.component.icon = function(icon_name) { beestat.component.icon = function(icon_name, tooltip) {
this.icon_name_ = icon_name; this.icon_name_ = icon_name;
this.tooltip_ = tooltip;
beestat.component.apply(this, arguments); beestat.component.apply(this, arguments);
}; };
beestat.extend(beestat.component.icon, beestat.component); beestat.extend(beestat.component.icon, beestat.component);
@ -23,6 +24,11 @@ beestat.component.icon.prototype.decorate_ = function(parent) {
'icon', 'icon',
this.icon_name_ this.icon_name_
]); ]);
if (this.tooltip_ !== undefined) {
icon.setAttribute('title', this.tooltip_);
}
container.appendChild(icon); container.appendChild(icon);
if (this.size_ !== undefined && this.size_ !== 24) { if (this.size_ !== undefined && this.size_ !== 24) {