iobroker.fritzdect
Version:
ioBroker fritzbox DECT Adapter
65 lines (58 loc) • 4.6 kB
HTML
<!--
ioBroker.vis fritzdect metro Widget-Set
version: "0.0.2"
based on iobroker.metro
extended for fritzdect
Copyright 2018-2021 foxthefox foxthefox@wysiwis.net
-->
<!-- here you can include so many css as you want -->
<link rel="stylesheet" href="widgets/fritzdect/css/style.css" />
<link rel="stylesheet" href="widgets/metro/css/iconFont.min.css" />
<link rel="stylesheet" href="widgets/metro/css/metro-bootstrap.css" />
<!-- here you can include so many js-files as you want -->
<script type="text/javascript" src="widgets/fritzdect/js/fritzdect.js"></script>
<script type="text/javascript" src="widgets/metro/js/metro.js"></script>
<script id="tplMetroDect200TileSwitchDialog"
type="text/ejs"
data-vis-prev='<div id="prev_tplMetroDect200TileSwitchDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"><div class="tile-content" style="text-align: center"><img width="80%" src="widgets/jqui-mfd/img/message_socket_on.png"></div> <div class="brand ribbed-steel"><span class="label fg-white">Dect200 Dialog</span></div> </div><div style="padding: 42px 10px 10px;"></div></div></div></div>'
data-vis-attrs="oid/id,switch;oid-power/id,value.power;oid-energy/id,value.power.consumption;oid-temp/id,value.temperature;off[0];on[1];hover[true]/checkbox;transform[true]/checkbox;label[FritzDECT200];"
data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;"
data-vis-attrs1="brand_bg_class[none]/style,metro-,bg- ribbed-;"
data-vis-attrs2="label_power;label_temp;label_energy;"
data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox"
class="vis-tpl"
data-vis-set="fritzdect"
data-vis-type="ctrl,dialog"
data-vis-name="Tile Switch Dialog">
<div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/message_socket_on.png','widgets/jqui-mfd/img/message_socket_off.png']); %>>
<div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
<div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
<div class="tile-content" style="text-align: center">
<%
var str = vis.states.attr(this.data.oid + '.val');
var val = parseFloat(str);
if (str === true || str === 'true' || str === 1 || str === 'on') val = 1;
if (isNaN(val)) val = 0;
if (val === 1) {
%>
<img width="80%" src="widgets/jqui-mfd/img/message_socket_on.png"/>
<% } else { %>
<img width="80%" src="widgets/jqui-mfd/img/message_socket_off.png"/>
<% } %>
</div>
<div style="color:white; font-size:11px; margin-top: 92px; padding-left: 12px;">
<% if (this.data.attr('oid-power')) { %>
<span><%== this.data.attr('label_power') ? this.data.attr('label_power') : _('Leistung') %> : <%= + vis.binds.metro.format(vis.states.attr(this.data.attr('oid-power') + '.val'), 'W') %> W</span>
<% } %>
</div>
<div class="brand <%= this.data.attr("brand_bg_class") %>">
<span class="label fg-white"><%= this.data.attr("label") %></span>
</div>
</div>
<div
<%= (el) -> vis.binds.fritzdect.tileDialogFritz(el, data.wid, data.oid, data['oid-power'], data['oid-energy'], data['oid-temp'], {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180, label_power: this.data.attr('label_power'), label_temp: this.data.attr('label_temp'), label_energy: this.data.attr('label_energy')}, {off: data.off, on: data.on}) %> style="padding: 42px 10px 10px;">
</div>
<div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
</div>
</div>
</script>