make the bookmarks table editable

htdocs/css/admin.css

@@ -57,4 +57,10 @@ h1 {
 
 table.bookmarks .frequency {
     text-align: right;
+}
+
+table.bookmarks input, table.bookmarks select {
+    width: initial;
+    text-align: inherit;
+    display: initial;
 }

htdocs/lib/settings/BookmarkTable.js

@@ -0,0 +1,41 @@
+$.fn.bookmarktable = function() {
+    $.each(this, function(){
+        var $table = $(this);
+
+        var inputs = $table.find('tr.inputs td').map(function(){
+            var candidates = $(this).find('input, select')
+            return candidates.length ? candidates.first() : false;
+        }).toArray();
+        $table.find('tr.inputs').remove();
+
+        $table.on('dblclick', 'td', function(e) {
+            var $cell = $(e.target);
+            var html = $cell.html();
+
+            var index = $cell.parent('tr').find('td').index($cell);
+
+            var $input = inputs[index];
+            if (!$input) return;
+
+            $input.val($cell.data('value') || html);
+            $cell.html($input);
+            $input.focus();
+
+            var submit = function() {
+                var $option = $input.find('option:selected')
+                if ($option.length) {
+                    $cell.html($option.html());
+                } else {
+                    $cell.html($input.val());
+                }
+            };
+
+            $input.on('blur', submit).on('change', submit).on('keyup', function(e){
+                if (e.keyCode == 13) return submit();
+                if (e.keyCode == 27) {
+                    $cell.html(html);
+                }
+            });
+        });
+    });
+};

htdocs/settings.js

@@ -23,4 +23,5 @@ $(function(){
 
     $(".sdrdevice").sdrdevice();
     $(".imageupload").imageUpload();
+    $("table.bookmarks").bookmarktable();
 });

owrx/controllers/assets.py

@@ -148,6 +148,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/settings/Input.js",
             "lib/settings/SdrDevice.js",
             "lib/settings/ImageUpload.js",
+            "lib/settings/BookmarkTable.js",
             "settings.js",
         ],
     }

owrx/controllers/bookmarks.py

@@ -1,6 +1,7 @@
 from owrx.controllers.template import WebpageController
 from owrx.controllers.admin import AuthorizationMixin
 from owrx.bookmarks import Bookmark, Bookmarks
+from owrx.modes import Modes
 
 
 class BookmarksController(AuthorizationMixin, WebpageController):
@@ -16,6 +17,15 @@ class BookmarksController(AuthorizationMixin, WebpageController):
 
     def render_table(self):
         bookmarks = Bookmarks.getSharedInstance()
+
+        def render_mode(m):
+            return """
+                <option value={mode}>{name}</option>
+            """.format(
+                mode=m.modulation,
+                name=m.name,
+            )
+
         return """
             <table class="table bookmarks">
                 <tr>
@@ -25,17 +35,25 @@ class BookmarksController(AuthorizationMixin, WebpageController):
                     <th>Actions</th>
                 </tr>
                 {bookmarks}
+                <tr class="inputs" style="display:none;">
+                    <td><input class="form-control form-control-sm" type="text" name="name"></td>
+                    <td><input class="form-control form-control-sm" type="number" step="1" name="frequency"></td>
+                    <td><select class="form-control form-control-sm" name="modulation">{options}</select></td>
+                    <td></td>
+                </tr>
             </table>
         """.format(
-            bookmarks="".join(self.render_bookmark(idx, b) for idx, b in enumerate(bookmarks.getBookmarks()))
+            bookmarks="".join(self.render_bookmark(idx, b) for idx, b in enumerate(bookmarks.getBookmarks())),
+            options="".join(render_mode(m) for m in Modes.getAvailableModes()),
         )
 
     def render_bookmark(self, idx: int, bookmark: Bookmark):
+        mode = Modes.findByModulation(bookmark.getModulation())
         return """
             <tr data-index="{index}" data-id="{id}">
                 <td>{name}</td>
                 <td class="frequency">{frequency}</td>
-                <td>{modulation}</td>
+                <td data-value="{modulation}">{modulation_name}</td>
                 <td>
                     <div class="btn btn-sm btn-danger bookmark-delete">delete</div>
                 </td>
@@ -45,7 +63,8 @@ class BookmarksController(AuthorizationMixin, WebpageController):
             id=id(bookmark),
             name=bookmark.getName(),
             frequency=bookmark.getFrequency(),
-            modulation=bookmark.getModulation(),
+            modulation=bookmark.getModulation() if mode is None else mode.modulation,
+            modulation_name=bookmark.getModulation() if mode is None else mode.name,
         )
 
     def indexAction(self):