openwebrx-clone/htdocs/settings.js

238 lines
6.5 KiB
JavaScript
Raw Normal View History

2020-05-17 16:44:26 +00:00
function Input(name, value, label) {
2020-05-10 18:18:42 +00:00
this.name = name;
this.value = value;
2020-05-17 16:44:26 +00:00
this.label = label;
2020-05-10 18:18:42 +00:00
};
2020-05-17 16:44:26 +00:00
Input.prototype.bootstrapify = function(input) {
2020-05-10 18:18:42 +00:00
input.addClass('form-control').addClass('form-control-sm');
return [
'<div class="form-group row">',
2020-05-17 16:44:26 +00:00
'<label class="col-form-label col-form-label-sm col-3" for="' + this.name + '">' + this.label + '</label>',
2020-05-10 18:18:42 +00:00
'<div class="col-9">',
input[0].outerHTML,
'</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 + '">'));
}
2020-05-10 18:34:34 +00:00
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 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>');
};
2020-05-17 16:44:26 +00:00
function SdrDevice(el, data) {
2020-05-10 18:18:42 +00:00
this.el = el;
2020-05-17 16:44:26 +00:00
this.data = data;
2020-05-10 18:18:42 +00:00
this.inputs = {};
this.render();
2020-05-10 20:42:09 +00:00
var self = this;
el.on('click', '.fieldselector .btn', function() {
var key = el.find('.fieldselector select').val();
2020-05-17 16:44:26 +00:00
self.data[key] = self.getInitialValue(key);
2020-05-10 20:42:09 +00:00
self.render();
});
2020-05-10 18:18:42 +00:00
};
2020-05-17 16:44:26 +00:00
SdrDevice.create = function(el) {
var data = JSON.parse(decodeURIComponent(el.data('config')));
var type = data.type;
var constructor = SdrDevice.types[type] || SdrDevice;
return new constructor(el, data);
};
SdrDevice.prototype.getData = function() {
return $.extend(new Object(), this.getDefaults(), this.data);
};
SdrDevice.prototype.getDefaults = function() {
var defaults = {}
$.each(this.getMappings(), function(k, v) {
if (!v.includeInDefault) return;
defaults[k] = 'initialValue' in v ? v['initialValue'] : false;
});
return defaults;
};
SdrDevice.prototype.getMappings = function() {
return {
"name": {
constructor: TextInput,
label: "Name",
initialValue: "",
includeInDefault: true
},
"type": {
constructor: TextInput,
label: "Type",
initialValue: '',
includeInDefault: true
},
"ppm": {
constructor: NumberInput,
label: "PPM",
initialValue: 0
},
"profiles": {
constructor: ProfileInput,
label: "Profiles",
initialValue: [],
includeInDefault: true,
},
"scheduler": {
constructor: SchedulerInput,
label: "Scheduler",
initialValue: {}
},
"rf_gain": {
constructor: TextInput,
label: "Gain",
initialValue: 0
}
};
};
SdrDevice.prototype.getMapping = function(key) {
var mappings = this.getMappings();
return mappings[key];
};
SdrDevice.prototype.getInputClass = function(key) {
var mapping = this.getMapping(key);
return mapping && mapping.constructor || TextInput;
};
SdrDevice.prototype.getLabel = function(key) {
var mapping = this.getMapping(key);
return mapping && mapping.label || key;
};
SdrDevice.prototype.getInitialValue = function(key) {
var mapping = this.getMapping(key);
return mapping && ('initialValue' in mapping) ? mapping['initialValue'] : false;
};
2020-05-10 18:18:42 +00:00
SdrDevice.prototype.render = function() {
var self = this;
2020-05-10 20:42:09 +00:00
self.el.empty();
2020-05-17 16:44:26 +00:00
$.each(this.getData(), function(key, value) {
var inputClass = self.getInputClass(key);
var input = new inputClass(key, value, self.getLabel(key));
2020-05-10 18:18:42 +00:00
self.inputs[key] = input;
2020-05-10 20:42:09 +00:00
self.el.append(input.render());
2020-05-10 18:18:42 +00:00
});
2020-05-10 20:42:09 +00:00
self.el.append(this.renderFieldSelector());
};
SdrDevice.prototype.renderFieldSelector = function() {
var self = this;
return '<div class="fieldselector">' +
'<h3>Add new configuration options<h3>' +
'<div class="form-group row">' +
'<div class="col-3"><select class="form-control form-control-sm">' +
2020-05-17 16:44:26 +00:00
Object.keys(self.getMappings()).filter(function(m){
2020-05-10 20:42:09 +00:00
return !(m in self.data);
}).map(function(m) {
2020-05-17 16:44:26 +00:00
return '<option value="' + m + '">' + self.getLabel(m) + '</option>';
2020-05-10 20:42:09 +00:00
}).join('') +
'</select></div>' +
'<div class="col-2">' +
'<div class="btn btn-primary">Add to config</div>' +
'</div>' +
'</div>' +
'</div>';
2020-05-10 18:18:42 +00:00
};
2020-05-17 16:44:26 +00:00
RtlSdrDevice = function(el, data) {
SdrDevice.apply(this, arguments);
};
RtlSdrDevice.prototype = Object.create(SdrDevice.prototype);
RtlSdrDevice.prototype.constructor = RtlSdrDevice;
RtlSdrDevice.prototype.getMappings = function() {
var mappings = SdrDevice.prototype.getMappings.apply(this, arguments);
return $.extend(new Object(), mappings, {
"device": {
constructor: TextInput,
label: "Serial Number",
initialValue: ""
}
});
};
SdrDevice.types = {
'rtl_sdr': RtlSdrDevice
};
2020-05-10 18:18:42 +00:00
$.fn.sdrdevice = function() {
return this.map(function(){
var el = $(this);
if (!el.data('sdrdevice')) {
2020-05-17 16:44:26 +00:00
el.data('sdrdevice', SdrDevice.create(el));
2020-05-10 18:18:42 +00:00
}
return el.data('sdrdevice');
});
};
$(function(){
$(".map-input").each(function(el) {
var $el = $(this);
var field_id = $el.attr("for");
var $lat = $('#' + field_id + '-lat');
var $lon = $('#' + field_id + '-lon');
$.getScript("https://maps.googleapis.com/maps/api/js?key=" + $el.data("key")).done(function(){
$el.css("height", "200px");
var lp = new locationPicker($el.get(0), {
lat: parseFloat($lat.val()),
lng: parseFloat($lon.val())
}, {
zoom: 7
});
google.maps.event.addListener(lp.map, 'idle', function(event){
var pos = lp.getMarkerPosition();
$lat.val(pos.lat);
$lon.val(pos.lng);
});
});
2020-05-10 18:18:42 +00:00
});
2020-05-10 20:42:09 +00:00
$(".sdrdevice").sdrdevice();
});