platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 38 Pull Requests Packages Projects 4 Releases Wiki Activity

Fixed gpio ui

This commit is contained in:
Fabio Manganiello 2018-08-22 20:22:34 +02:00
parent 2c369cb86d
commit a9b4c1b8bf
2 changed files with 14 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platypush/backend/http/static/css/gpio.css
View File

@ -22,8 +22,3 @@
background-color: #daf8e2 !important; background-color: #daf8e2 !important;
} }
.toggle-container {
text-align: right;
padding-right: 1em;
}

55
platypush/backend/http/static/js/gpio.js
View File

@ -1,42 +1,21 @@
$(document).ready(function() { $(document).ready(function() {
var $container = $('#sensors-container'); var $container = $('#gpio-container');
var createPowerToggleElement = function(pin) {
var $powerToggle = $('<div></div>').addClass('toggle toggle--push pin-ctrl-container');
var $input = $('<input></input>').attr('type', 'checkbox')
.data('number', pin.pin).attr('name', pin.name).addClass('toggle--checkbox pin-ctrl');
var $label = $('<label></label>').attr('for', pin.name).addClass('toggle--btn');
$input.appendTo($powerToggle);
$label.appendTo($powerToggle);
if (pin.value > 0) {
$input.prop('checked', true);
}
return $powerToggle;
};
var initElements = function() { var initElements = function() {
execute({ type: 'request', action: 'gpio.read_all' }, function(data) { execute({ type: 'request', action: 'gpio.read_all' }, function(data) {
var response = data.response.output; var response = data.response.output;
for (var pin of response) { for (var pin of response) {
var $pin = $('<div></div>') var $pin = $('<div></div>').addClass('row gpio-pin').data('pin', pin.pin);
.addClass('row gpio-pin') var $name = $('<div></div>').addClass('pin-name ten columns').text(pin.name);
.attr('data-pin-number', pin.pin); var $value = $('<div></div>').addClass('pin-value two columns');
var $select = $('<select></select>').data('pin', pin.pin).addClass('pin-ctrl');
var $option0 = $('<option></option>').attr('name', '0').text('0');
var $option1 = $('<option></option>').attr('name', '1').text('1');
var $name = $('<div></div>') $option0.appendTo($select);
.addClass('pin-name ten columns') $option1.appendTo($select);
.text(pin.name); $select.appendTo($value);
var $value = $('<div></div>')
.addClass('pin-value two columns');
var $toggle = createPowerToggleElement(pin);
$toggle.appendTo($value);
$name.appendTo($pin); $name.appendTo($pin);
$value.appendTo($pin); $value.appendTo($pin);
$pin.appendTo($container); $pin.appendTo($container);
@ -45,24 +24,18 @@ $(document).ready(function() {
}; };
var initBindings = function() { var initBindings = function() {
$container.on('click touch', '.pin-ctrl-container', function() { $container.on('change', '.pin-ctrl', function() {
var $input = $(this).find('.pin-ctrl'); var pin = $(this).data('pin');
var pinNumber = $input.data('number'); var val = parseInt($(this).val());
var val = $input.prop('checked') ? 0 : 1;
execute( execute(
{ {
type: 'request', type: 'request',
action: 'gpio.write', action: 'gpio.write',
args: { args: {
pin: pinNumber, pin: pin,
val: val, val: val,
} }
},
onSuccess = function(response) {
var val = response.response.output.val;
$input.prop('checked', val == 0 ? false : true);
} }
); );
}); });