add a bit more dynamic content

htdocs/settings.js

@@ -1,13 +1,14 @@
-function Input(name, value) {
+function Input(name, value, label) {
     this.name = name;
     this.value = value;
+    this.label = label;
 };
 
-Input.prototype.bootstrapify = function(input, label) {
+Input.prototype.bootstrapify = function(input) {
     input.addClass('form-control').addClass('form-control-sm');
     return [
         '<div class="form-group row">',
-            '<label class="col-form-label col-form-label-sm col-3" for="' + self.name + '">' + this.name + '</label>',
+            '<label class="col-form-label col-form-label-sm col-3" for="' + this.name + '">' + this.label + '</label>',
             '<div class="col-9">',
                 input[0].outerHTML,
             '</div>',
@@ -55,34 +56,104 @@ SchedulerInput.prototype.render = function() {
     return $('<div><h3>Scheduler</h3></div>');
 };
 
-Input.mappings = {
+function SdrDevice(el, data) {
-    "name": TextInput,
-    "type": TextInput,
-    "ppm": NumberInput,
-    "profiles": ProfileInput,
-    "scheduler": SchedulerInput
-};
-
-function SdrDevice(el) {
     this.el = el;
-    this.data = JSON.parse(decodeURIComponent(el.data('config')));
+    this.data = data;
     this.inputs = {};
     this.render();
 
     var self = this;
     el.on('click', '.fieldselector .btn', function() {
         var key = el.find('.fieldselector select').val();
-        self.data[key] = false;
+        self.data[key] = self.getInitialValue(key);
         self.render();
     });
 };
 
+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;
+};
+
 SdrDevice.prototype.render = function() {
     var self = this;
     self.el.empty();
-    $.each(this.data, function(key, value) {
+    $.each(this.getData(), function(key, value) {
-        var inputClass = Input.mappings[key] || TextInput;
+        var inputClass = self.getInputClass(key);
-        var input = new inputClass(key, value);
+        var input = new inputClass(key, value, self.getLabel(key));
         self.inputs[key] = input;
         self.el.append(input.render());
     });
@@ -95,10 +166,10 @@ SdrDevice.prototype.renderFieldSelector = function() {
         '<h3>Add new configuration options<h3>' +
         '<div class="form-group row">' +
             '<div class="col-3"><select class="form-control form-control-sm">' +
-                Object.keys(Input.mappings).filter(function(m){
+                Object.keys(self.getMappings()).filter(function(m){
                     return !(m in self.data);
                 }).map(function(m) {
-                    return '<option name="' + m + '">' + m + '</option>';
+                    return '<option value="' + m + '">' + self.getLabel(m) + '</option>';
                 }).join('') +
             '</select></div>' +
             '<div class="col-2">' +
@@ -108,11 +179,33 @@ SdrDevice.prototype.renderFieldSelector = function() {
     '</div>';
 };
 
+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
+};
+
 $.fn.sdrdevice = function() {
     return this.map(function(){
         var el = $(this);
         if (!el.data('sdrdevice')) {
-            el.data('sdrdevice', new SdrDevice(el));
+            el.data('sdrdevice', SdrDevice.create(el));
         }
         return el.data('sdrdevice');
     });