192 lines
9.7 KiB
HTML
192 lines
9.7 KiB
HTML
<link href="/static/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
|
|
<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
|
|
<link href="/static/css/buttons.css" rel="stylesheet" type="text/css" />
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2 id="s_title_{{ count }}">Schakelaars</h2>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
|
</li>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<br>
|
|
<form class="form-horizontal form-label-left">
|
|
<table class="table" style="width: auto;">
|
|
{% for k, v in blockArray[count]["switches"].iteritems() %}
|
|
<tr>
|
|
{% if "dimmer" in v[2] or "rgb" in v[2] %}
|
|
<td style="border-top: none; vertical-align: middle;"><a id="Adim_{{v[1]}}_block_{{count}}" style="cursor: pointer;"><label style="cursor: pointer;" class=""> {{k}}</label></a></td>
|
|
{% else %}
|
|
<td style="border-top: none; vertical-align: middle;"><label class=""> {{k}}</label></td>
|
|
{% endif %}
|
|
<td style="border-top: none;">
|
|
{% if "switch" in v[2] %}
|
|
<input id="switch_{{v[1]}}_block_{{count}}" type="checkbox" checked data-size="mini">
|
|
{% elif "dimmer" in v[2] %}
|
|
<input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" test={{ v[2] }} state="on" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
|
|
{% elif "pushon" in v[2] %}
|
|
<button id="push_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle"> <li class="fa fa-power-off" aria-hidden="true"></i> </button>
|
|
{% elif "pushoff" in v[2] %}
|
|
<button id="push_{{v[1]}}_block_{{count}}" class="btn btn-danger btn-circle"> <li class="fa fa-power-off" aria-hidden="true"></i> </button>
|
|
{% elif "group" in v[2] %}
|
|
<div><div style="float: left"><button id="groupon_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle"> <li class="fa fa-power-off" aria-hidden="true"></i> </button></div><div style="padding-left: 20px; float: left"><button id="groupoff_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle btn-danger"> <li class="fa fa-power-off" aria-hidden="true"></i> </button></div></div>
|
|
{% elif "scene" in v[2] %}
|
|
<button id="scene_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle"> <li class="fa fa-power-off" aria-hidden="true"></i> </button>
|
|
{% elif v[2] == "setpoint" %}
|
|
<div>
|
|
<div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[1]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
|
|
<div style="float: left">
|
|
<div style=""><i onclick="changeUp({{ v[1] }}, {{count}})" class="fa fa-arrow-up" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
|
|
<div style=""><i onclick="changeDown({{ v[1] }}, {{count}})" class="fa fa-arrow-down" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
|
|
</div>
|
|
</div>
|
|
{% elif "setpoint_slider" in v[2] %}
|
|
<input id="setpoint_slider{{v[1]}}_block_{{count}}" data-slider-id='stpnt_{{v[1]}}_block_{{count}}' type="text" state="on" data-slider-min="{{v[3]}}" data-slider-max="{{v[4]}}" data-slider-step="0.5" />
|
|
{% elif "selector" in v[2] %}
|
|
<div class="btn-toolbar">
|
|
<div id="selector_body_{{v[1]}}_block_{{count}}" class="btn-group pull-right" style="width: 100%;"> </div>
|
|
</div>
|
|
{% elif "rgb" in v[2] %}
|
|
<input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
|
|
<br><br>
|
|
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal-{{v[1]}}-block-{{count}}">RGB colors</button>
|
|
<!-- Modal -->
|
|
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal-{{v[1]}}-block-{{count}}">
|
|
<div class="modal-dialog modal-sm">
|
|
|
|
<!-- Modal content-->
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title">RGB Selector</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="rgb_{{v[1]}}_block_{{count}}" class="inl-bl"></div>
|
|
<style>
|
|
.inl-bl {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(function() {
|
|
$('#rgb_{{v[1]}}_block_{{count}}').colorpicker({
|
|
color: '#ffaa00',
|
|
container: true,
|
|
inline: true
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="changeRgbColor('rgb_{{v[1]}}_block_{{count}}')">Save</button>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function() {
|
|
var updateSwitches_block_{{count}}=[];
|
|
var updateDimmers_block_{{count}}=[];
|
|
var updateSetpoints_block_{{count}}=[];
|
|
var updateSetpoint_sliders_block_{{count}}=[];
|
|
|
|
{% for k, v in blockArray[count]["switches"].iteritems() %}
|
|
|
|
{% if v[0] %}
|
|
$('#s_title_{{ count }}').html("{{ v[0] }}");
|
|
{% endif %}
|
|
{% if v[2] == "switch" %}
|
|
$('input[id="switch_{{v[1]}}_block_{{count}}"]').on('switchChange.bootstrapSwitch', function(event, state) {
|
|
changeSwitch(this, {{v[1]}});
|
|
});
|
|
updateSwitches_block_{{count}}.push("{{v[1]}}");
|
|
{% elif (v[2] == "pushon") %}
|
|
$('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
|
|
e.preventDefault();
|
|
changePush({{v[1]}}, 'on');
|
|
});
|
|
{% elif (v[2] == "pushoff") %}
|
|
$('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
|
|
e.preventDefault();
|
|
changePush({{v[1]}}, 'off');
|
|
});
|
|
{% elif (v[2] == "group") or (v[2] == "scene") %}
|
|
$('button[id="groupon_{{v[1]}}_block_{{count}}"]').click(function(e) {
|
|
e.preventDefault();
|
|
changeScene({{v[1]}}, 'on');
|
|
});
|
|
$('button[id="groupoff_{{v[1]}}_block_{{count}}"]').click(function(e) {
|
|
e.preventDefault();
|
|
changeScene({{v[1]}}, 'off');
|
|
});
|
|
$('button[id="scene_{{v[1]}}_block_{{count}}"]').click(function(e) {
|
|
e.preventDefault();
|
|
changeScene({{v[1]}}, 'on');
|
|
});
|
|
{% elif (v[2] == "selector") %}
|
|
url = '/api?type=devices&rid=' + {{v[1]}};
|
|
requestAPI(flask_server + url, function(d) {
|
|
r = JSON.parse(d);
|
|
btns = r['result'][0]['LevelNames'].split('|');
|
|
|
|
$.each(btns, function (i, lvlname) {
|
|
activebtn = r['result'][0]['Level']
|
|
if (i != '0') {
|
|
i = i + '0';
|
|
}
|
|
if (activebtn == i) {
|
|
btnClass = 'btn btn-primary btn-responsive';
|
|
} else {
|
|
btnClass = 'btn btn-responsive';
|
|
}
|
|
if (r['result'][0]['LevelOffHidden'] == true && lvlname == 'Off') {
|
|
style = 'style="display: none;"';
|
|
} else {
|
|
style = '';
|
|
}
|
|
bid = 'selector_{{v[1]}}_block_{{count}}_index_';
|
|
b = '<button id="' + bid + i + '" onclick="switchSelector({{v[1]}}, ' + i + ', this.id)" class="' + btnClass + '"' + style + '>' + lvlname + '</button>';
|
|
$('#selector_body_{{v[1]}}_block_{{count}}').append(b);
|
|
$('#' + 'selector_{{v[1]}}_block_{{count}}_index_' + i).click(function(e) {
|
|
e.preventDefault();
|
|
});
|
|
});
|
|
});
|
|
{% elif (v[2] == "setpoint") %}
|
|
updateSetpoints_block_{{count}}.push("{{v[1]}}");
|
|
{% elif (v[2] == "setpoint_slider") %}
|
|
updateSetpoint_sliders_block_{{count}}.push(["{{v[1]}}", "{{v[3]}}", "{{v[4]}}"]);
|
|
{% elif (v[2] == "dimmer" or v[2] == "rgb") %}
|
|
$('#Adim_{{v[1]}}_block_{{count}}').click(function(e) {
|
|
e.preventDefault();
|
|
changeDimmer('dim_{{v[1]}}_block_{{count}}_track', {{v[1]}});
|
|
});
|
|
updateDimmers_block_{{count}}.push("{{v[1]}}");
|
|
{% endif %}
|
|
{% endfor %}
|
|
refreshSwitches(updateSwitches_block_{{count}}, {{count}});
|
|
refreshSetpoints(updateSetpoints_block_{{count}}, {{count}});
|
|
dimmerSlider(updateDimmers_block_{{count}}, {{count}});
|
|
setpointSlider(updateSetpoint_sliders_block_{{count}}, {{count}});
|
|
|
|
setInterval(refreshSwitches, 9000, updateSwitches_block_{{count}}, {{count}});
|
|
setInterval(dimmerSlider, 9000, updateDimmers_block_{{count}}, {{count}});
|
|
setInterval(setpointSlider, 9000, updateSetpoint_sliders_block_{{count}}, {{count}});
|
|
setInterval(refreshSetpoints, 9000, updateSetpoints_block_{{count}}, {{count}});
|
|
|
|
});
|
|
</script>
|