forked from platypush/platypush
Added switch.tplink web widget
This commit is contained in:
parent
0f3895ad41
commit
65f9610cce
5 changed files with 116 additions and 8 deletions
29
platypush/backend/http/static/css/switch.tplink.css
Normal file
29
platypush/backend/http/static/css/switch.tplink.css
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
#tplink-container {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 38px;
|
||||||
|
letter-spacing: .1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tplink-device {
|
||||||
|
padding: 1.5em 1em .2em .5em;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tplink-device:nth-of-type(odd) {
|
||||||
|
background-color: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tplink-device:hover {
|
||||||
|
background-color: #daf8e2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-container {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
76
platypush/backend/http/static/js/switch.tplink.js
Normal file
76
platypush/backend/http/static/js/switch.tplink.js
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
var switches,
|
||||||
|
$tplinkContainer = $('#tplink-container');
|
||||||
|
|
||||||
|
var createPowerToggleElement = function(dev) {
|
||||||
|
var $powerToggle = $('<div></div>').addClass('toggle toggle--push switch-ctrl-container');
|
||||||
|
var $input = $('<input></input>').attr('type', 'checkbox')
|
||||||
|
.data('name', dev.host).attr('name', dev.alias).addClass('toggle--checkbox switch-ctrl');
|
||||||
|
|
||||||
|
var $label = $('<label></label>').attr('for', dev.alias).addClass('toggle--btn');
|
||||||
|
|
||||||
|
$input.appendTo($powerToggle);
|
||||||
|
$label.appendTo($powerToggle);
|
||||||
|
|
||||||
|
if (dev.on) {
|
||||||
|
$input.prop('checked', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $powerToggle;
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateDevices = function(devices) {
|
||||||
|
for (var dev of devices) {
|
||||||
|
var $dev = $('<div></div>').addClass('row tplink-device').data('name', dev.alias);
|
||||||
|
var $devName = $('<div></div>').addClass('ten columns name').text(dev.alias);
|
||||||
|
var $toggleContainer = $('<div></div>').addClass('two columns toggle-container');
|
||||||
|
var $toggle = createPowerToggleElement(dev);
|
||||||
|
|
||||||
|
$toggle.appendTo($toggleContainer);
|
||||||
|
$devName.appendTo($dev);
|
||||||
|
$toggleContainer.appendTo($dev);
|
||||||
|
$dev.appendTo($tplinkContainer);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var initWidget = function() {
|
||||||
|
execute(
|
||||||
|
{
|
||||||
|
type: 'request',
|
||||||
|
action: 'switch.tplink.status'
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess = function(response) {
|
||||||
|
updateDevices(Object.values(response.response.output.devices));
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
var initBindings = function() {
|
||||||
|
$tplinkContainer.on('click touch', '.switch-ctrl-container', function() {
|
||||||
|
var $input = $(this).find('.switch-ctrl');
|
||||||
|
var devAddr = $input.data('name');
|
||||||
|
|
||||||
|
execute(
|
||||||
|
{
|
||||||
|
type: 'request',
|
||||||
|
action: 'switch.tplink.toggle',
|
||||||
|
args: { device: devAddr }
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess = function(response) {
|
||||||
|
var status = response.response.output.status;
|
||||||
|
$input.prop('checked', status == 'on' ? true : false);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var init = function() {
|
||||||
|
initWidget();
|
||||||
|
initBindings();
|
||||||
|
};
|
||||||
|
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
|
|
@ -7,7 +7,7 @@ $(document).ready(function() {
|
||||||
var $input = $('<input></input>').attr('type', 'checkbox')
|
var $input = $('<input></input>').attr('type', 'checkbox')
|
||||||
.attr('name', dev.name).addClass('toggle--checkbox switch-ctrl');
|
.attr('name', dev.name).addClass('toggle--checkbox switch-ctrl');
|
||||||
|
|
||||||
var $label = $('<label></label>').attr('for', id).addClass('toggle--btn');
|
var $label = $('<label></label>').attr('for', dev.name).addClass('toggle--btn');
|
||||||
|
|
||||||
$input.appendTo($powerToggle);
|
$input.appendTo($powerToggle);
|
||||||
$label.appendTo($powerToggle);
|
$label.appendTo($powerToggle);
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script type="text/javascript" src="{{ url_for('static', filename='js/switch.tplink.js') }}"></script>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/switch.tplink.css') }}"></script>
|
||||||
|
|
||||||
|
<div id="tplink-container" class="row"></div>
|
||||||
|
|
|
@ -22,17 +22,15 @@ class SwitchTplinkPlugin(SwitchPlugin):
|
||||||
:returns: The available device over the network as a
|
:returns: The available device over the network as a
|
||||||
"""
|
"""
|
||||||
|
|
||||||
devices = dict(
|
devices = { 'devices': {
|
||||||
(ip, {
|
ip: {
|
||||||
'alias': dev.alias,
|
'alias': dev.alias,
|
||||||
'current_consumption': dev.current_consumption,
|
'current_consumption': dev.current_consumption(),
|
||||||
'host': dev.host,
|
'host': dev.host,
|
||||||
'hw_info': dev.hw_info,
|
'hw_info': dev.hw_info,
|
||||||
'on': dev.is_on,
|
'on': dev.is_on,
|
||||||
})
|
} for (ip, dev) in self._scan().items()
|
||||||
|
} }
|
||||||
for (ip, dev) in self._scan()
|
|
||||||
)
|
|
||||||
|
|
||||||
return Response(output=devices)
|
return Response(output=devices)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue