115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
|
function Input(name, value, options) {
|
||
|
this.name = name;
|
||
|
this.value = value;
|
||
|
this.options = options;
|
||
|
this.label = options && options.label || name;
|
||
|
};
|
||
|
|
||
|
Input.prototype.getClasses = function() {
|
||
|
return ['form-control', 'form-control-sm'];
|
||
|
}
|
||
|
|
||
|
Input.prototype.bootstrapify = function(input) {
|
||
|
this.getClasses().forEach(input.addClass.bind(input));
|
||
|
return [
|
||
|
'<div class="form-group row">',
|
||
|
'<label class="col-form-label col-form-label-sm col-3" for="' + this.name + '">' + this.label + '</label>',
|
||
|
'<div class="col-9">',
|
||
|
$.map(input, function(el) {
|
||
|
return el.outerHTML;
|
||
|
}).join(''),
|
||
|
'</div>',
|
||
|
'</div>'
|
||
|
].join('');
|
||
|
};
|
||
|
|
||
|
function TextInput() {
|
||
|
Input.apply(this, arguments);
|
||
|
};
|
||
|
|
||
|
TextInput.prototype = new Input();
|
||
|
|
||
|
TextInput.prototype.render = function() {
|
||
|
return this.bootstrapify($('<input type="text" name="' + this.name + '" value="' + this.value + '">'));
|
||
|
}
|
||
|
|
||
|
function NumberInput() {
|
||
|
Input.apply(this, arguments);
|
||
|
};
|
||
|
|
||
|
NumberInput.prototype = new Input();
|
||
|
|
||
|
NumberInput.prototype.render = function() {
|
||
|
return this.bootstrapify($('<input type="number" name="' + this.name + '" value="' + this.value + '">'));
|
||
|
};
|
||
|
|
||
|
function SoapyGainInput() {
|
||
|
Input.apply(this, arguments);
|
||
|
}
|
||
|
|
||
|
SoapyGainInput.prototype = new Input();
|
||
|
|
||
|
SoapyGainInput.prototype.getClasses = function() {
|
||
|
return [];
|
||
|
};
|
||
|
|
||
|
SoapyGainInput.prototype.render = function(){
|
||
|
var markup = $(
|
||
|
'<div class="row form-group">' +
|
||
|
'<div class="col-4">Gain mode</div>' +
|
||
|
'<div class="col-8">' +
|
||
|
'<select class="form-control form-control-sm">' +
|
||
|
'<option value="auto">automatic gain</option>' +
|
||
|
'<option value="single">single gain value</option>' +
|
||
|
'<option value="separate">separate gain values</option>' +
|
||
|
'</select>' +
|
||
|
'</div>' +
|
||
|
'</div>' +
|
||
|
'<div class="row option form-group gain-mode-single">' +
|
||
|
'<div class="col-4">Gain</div>' +
|
||
|
'<div class="col-8">' +
|
||
|
'<input class="form-control form-control-sm" type="number">' +
|
||
|
'</div>' +
|
||
|
'</div>' +
|
||
|
this.options.gains.map(function(g){
|
||
|
return '<div class="row option form-group gain-mode-separate">' +
|
||
|
'<div class="col-4">' + g + '</div>' +
|
||
|
'<div class="col-8">' +
|
||
|
'<input class="form-control form-control-sm" type="number">' +
|
||
|
'</div>' +
|
||
|
'</div>';
|
||
|
}).join('')
|
||
|
);
|
||
|
var el = $(this.bootstrapify(markup))
|
||
|
var setMode = function(mode){
|
||
|
el.find('.option').hide();
|
||
|
el.find('.gain-mode-' + mode).show();
|
||
|
};
|
||
|
el.on('change', 'select', function(){
|
||
|
var mode = $(this).val();
|
||
|
setMode(mode);
|
||
|
});
|
||
|
setMode('auto');
|
||
|
return el;
|
||
|
};
|
||
|
|
||
|
function ProfileInput() {
|
||
|
Input.apply(this, arguments);
|
||
|
};
|
||
|
|
||
|
ProfileInput.prototype = new Input();
|
||
|
|
||
|
ProfileInput.prototype.render = function() {
|
||
|
return $('<div><h3>Profiles</h3></div>');
|
||
|
};
|
||
|
|
||
|
function SchedulerInput() {
|
||
|
Input.apply(this, arguments);
|
||
|
};
|
||
|
|
||
|
SchedulerInput.prototype = new Input();
|
||
|
|
||
|
SchedulerInput.prototype.render = function() {
|
||
|
return $('<div><h3>Scheduler</h3></div>');
|
||
|
};
|