forked from platypush/platypush
Fixed gpio ui
This commit is contained in:
parent
2c369cb86d
commit
a9b4c1b8bf
2 changed files with 14 additions and 46 deletions
|
@ -22,8 +22,3 @@
|
||||||
background-color: #daf8e2 !important;
|
background-color: #daf8e2 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-container {
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue