dynamic sdr device settings

htdocs/settings.js

@@ -1,3 +1,61 @@
+function Input(name, value) {
+    this.name = name;
+    this.value = value;
+};
+
+Input.prototype.bootstrapify = function(input, label) {
+    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>',
+            '<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 + '">'));
+}
+
+Input.mappings = {
+    "name": TextInput
+};
+
+function SdrDevice(el) {
+    this.el = el;
+    this.data = JSON.parse(decodeURIComponent(el.data('config')));
+    this.inputs = {};
+    this.render();
+};
+
+SdrDevice.prototype.render = function() {
+    var self = this;
+    $.each(this.data, function(key, value) {
+        var inputClass = Input.mappings[key] || TextInput;
+        var input = new inputClass(key, value);
+        self.inputs[key] = input;
+        self.el.append(input.render())
+    });
+};
+
+$.fn.sdrdevice = function() {
+    return this.map(function(){
+        var el = $(this);
+        if (!el.data('sdrdevice')) {
+            el.data('sdrdevice', new SdrDevice(el));
+        }
+        return el.data('sdrdevice');
+    });
+};
+
 $(function(){
     $(".map-input").each(function(el) {
         var $el = $(this);
@@ -19,5 +77,7 @@ $(function(){
                 $lon.val(pos.lng);
             });
         });
-    })
+    });
+
+    console.info($(".sdrdevice").sdrdevice());
 });

owrx/controllers/settings.py

@@ -13,6 +13,8 @@ from owrx.form import (
     ServicesCheckboxInput,
     Js8ProfileCheckboxInput,
 )
+from urllib.parse import quote
+import json
 import logging
 
 logger = logging.getLogger(__name__)
@@ -55,18 +57,24 @@ class SdrSettingsController(AdminController):
         return variables
 
     def render_devices(self):
-        def render_devicde(device_id, config):
-            return """
-                <div class="card device bg-dark text-white">
-                    <div class="card-header">
-                        {device_name}
-                    </div>
-                    <div class="card-body">
-                        device settings go here
-                    </div>
+        return "".join(self.render_device(key, value) for key, value in Config.get()["sdrs"].items())
+
+    def render_device(self, device_id, config):
+        return """
+            <div class="card device bg-dark text-white">
+                <div class="card-header">
+                    {device_name}
                 </div>
-            """.format(device_name=config["name"])
-        return "".join(render_devicde(key, value) for key, value in Config.get()["sdrs"].items())
+                <div class="card-body">
+                    {form}
+                </div>
+            </div>
+        """.format(device_name=config["name"], form=self.render_form(device_id, config))
+
+    def render_form(self, device_id, config):
+        return """
+            <form class="sdrdevice" data-config="{formdata}"></form>
+        """.format(device_id=device_id, formdata=quote(json.dumps(config)))
 
     def indexAction(self):
         self.serve_template("sdrsettings.html", **self.template_variables())