implement optional device fields

htdocs/css/admin.css

@@ -85,4 +85,21 @@ table.bookmarks .frequency {
 .sdr-device-list .list-group-item,
 .sdr-profile-list .list-group-item {
     background: initial;
+}
+
+.removable-group.removable {
+    display: flex;
+    flex-direction: row;
+}
+
+.removable-group.removable .removable-item {
+    flex: 1 0 auto;
+}
+
+.removable-group.removable .option-remove-button {
+    flex: 0 0 70px;
+}
+
+.option-add-button, .option-remove-button {
+    width: 70px;
 }

htdocs/lib/settings/OptionalSection.js

@@ -0,0 +1,26 @@
+$.fn.optionalSection = function(){
+    this.each(function() {
+        var $section = $(this);
+        var $select = $section.find('.optional-select');
+        var $optionalInputs = $section.find('.optional-inputs');
+        $section.on('click', '.option-add-button', function(e){
+            var field = $select.val();
+            var group = $optionalInputs.find(".form-group[data-field='" + field + "']");
+            group.find('input, select').prop('disabled', false);
+            $select.parents('.form-group').before(group);
+            $select.find('option[value=\'' + field + '\']').remove();
+
+            return false;
+        });
+        $section.on('click', '.option-remove-button', function(e) {
+            var group = $(e.target).parents('.form-group')
+            group.find('input, select').prop('disabled', true);
+            $optionalInputs.append(group);
+            var $label = group.find('> label');
+            var $option = $('<option value="' + group.data('field') + '">' + $label.text() + '</option>');
+            $select.append($option);
+
+            return false;
+        })
+    });
+}

htdocs/settings.js

@@ -5,4 +5,5 @@ $(function(){
     $('.wsjt-decoding-depths').wsjtDecodingDepthsInput();
     $('#waterfall_scheme').waterfallDropdown();
     $('#rf_gain').gainInput();
+    $('.optional-section').optionalSection();
 });