implement dialog to import personal bookmarks

htdocs/css/admin.css

@@ -80,7 +80,7 @@ h1 {
     padding-right: 15px;
 }
 
-.bookmarks table .frequency {
+.bookmarks table .frequency, .bookmark-list table .frequency {
     text-align: right;
 }
 
@@ -90,6 +90,10 @@ h1 {
     display: initial;
 }
 
+.bookmark-list table .form-check-input {
+    margin-left: 0;
+}
+
 .actions {
     margin: 1rem 0;
 }

htdocs/lib/BookmarkBar.js

@@ -145,21 +145,3 @@ BookmarkBar.prototype.getDemodulatorPanel = function() {
 BookmarkBar.prototype.getDemodulator = function() {
     return this.getDemodulatorPanel().getDemodulator();
 };
-
-BookmarkLocalStorage = function(){
-};
-
-BookmarkLocalStorage.prototype.getBookmarks = function(){
-    return JSON.parse(window.localStorage.getItem("bookmarks")) || [];
-};
-
-BookmarkLocalStorage.prototype.setBookmarks = function(bookmarks){
-    window.localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
-};
-
-BookmarkLocalStorage.prototype.deleteBookmark = function(data) {
-    if (data.id) data = data.id;
-    var bookmarks = this.getBookmarks();
-    bookmarks = bookmarks.filter(function(b) { return b.id !== data; });
-    this.setBookmarks(bookmarks);
-};

htdocs/lib/BookmarkLocalStorage.js

@@ -0,0 +1,17 @@
+BookmarkLocalStorage = function(){
+};
+
+BookmarkLocalStorage.prototype.getBookmarks = function(){
+    return JSON.parse(window.localStorage.getItem("bookmarks")) || [];
+};
+
+BookmarkLocalStorage.prototype.setBookmarks = function(bookmarks){
+    window.localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+};
+
+BookmarkLocalStorage.prototype.deleteBookmark = function(data) {
+    if (data.id) data = data.id;
+    var bookmarks = this.getBookmarks();
+    bookmarks = bookmarks.filter(function(b) { return b.id !== data; });
+    this.setBookmarks(bookmarks);
+};

htdocs/lib/settings/BookmarkTable.js

@@ -66,14 +66,16 @@ NameEditor.prototype.getInputHtml = function() {
 
 function FrequencyEditor(table) {
     Editor.call(this, table);
-    this.suffixes = {
-        'K': 3,
-        'M': 6,
-        'G': 9,
-        'T': 12
-    };
 }
 
+FrequencyEditor.suffixes = {
+    '': 0,
+    'K': 3,
+    'M': 6,
+    'G': 9,
+    'T': 12
+};
+
 FrequencyEditor.prototype = new Editor();
 
 FrequencyEditor.prototype.getInputHtml = function() {
@@ -81,8 +83,7 @@ FrequencyEditor.prototype.getInputHtml = function() {
         '<input class="form-control form-control-sm" type="number" step="1">' +
         '<div class="input-group-append">' +
             '<select class="input-group-text exponent">' +
-                '<option value="0">Hz</option>' +
+                $.map(FrequencyEditor.suffixes, function(v, k) {
-                $.map(this.suffixes, function(v, k) {
                     // fix lowercase "kHz"
                     if (k === "K") k = "k";
                     return '<option value="' + v + '">' + k + 'Hz</option>';
@@ -117,8 +118,8 @@ FrequencyEditor.prototype.setupEvents = function() {
         if (e.keyCode == 13) return me.submit();
         if (e.keyCode == 27) return me.cancel();
         var c = String.fromCharCode(e.which);
-        if (c in me.suffixes) {
+        if (c in FrequencyEditor.suffixes) {
-            me.expInput.val(me.suffixes[c]);
+            me.expInput.val(FrequencyEditor.suffixes[c]);
         }
     });
 }
@@ -132,7 +133,7 @@ FrequencyEditor.prototype.getValue = function() {
 FrequencyEditor.prototype.setValue = function(value) {
     var value = parseFloat(value);
     var exp = 0;
-    if (!Number.isNaN(value)) {
+    if (!Number.isNaN(value) && value > 0) {
         exp = Math.floor(Math.log10(value) / 3) * 3;
     }
     this.freqInput.val(value / 10 ** exp);
@@ -143,15 +144,26 @@ FrequencyEditor.prototype.focus = function() {
     this.freqInput.focus();
 };
 
-FrequencyEditor.prototype.getHtml = function() {
+var renderFrequency = function(freq) {
-    var value = this.getValue();
     var exp = 0;
-    if (!Number.isNaN(value)) {
+    if (!Number.isNaN(freq)) {
-        exp = Math.floor(Math.log10(value) / 3) * 3;
+        exp = Math.floor(Math.log10(freq) / 3) * 3;
     }
-    var frequency = value / 10 ** exp;
+    var frequency = freq / 10 ** exp;
-    var expString = this.expInput.find('option[value=' + exp + ']').html();
+    var suffix = Object.entries(FrequencyEditor.suffixes).find(function(e) {
+        return e[1] == exp;
+    });
+    if (!suffix) {
+        return freq + ' Hz';
+    }
+    // fix lowercase 'kHz'
+    suffix = suffix[0] == 'K' ? 'k' : suffix[0];
+    var expString = suffix[0] + 'Hz';
     return frequency + ' ' + expString;
+}
+
+FrequencyEditor.prototype.getHtml = function() {
+    return renderFrequency(this.getValue());
 };
 
 function ModulationEditor(table) {
@@ -313,5 +325,36 @@ $.fn.bookmarktable = function() {
             $table.append(row);
             row[0].scrollIntoView();
         });
+
+        var $importModal = $('#importModal').modal({show: false});
+
+        $(this).find('.bookmark-import').on('click', function() {
+            var storage = new BookmarkLocalStorage();
+            var bookmarks = storage.getBookmarks();
+            if (bookmarks.length) {
+                var modes = $table.data('modes');
+                var $list = $('<table class="table table-sm">');
+                $list.append(bookmarks.map(function(b) {
+                    var modulation = b.modulation;
+                    if (modulation in modes) {
+                        modulation = modes[modulation];
+                    }
+                    var row = $(
+                        '<tr>' +
+                            '<td><input class="form-check-input" type="checkbox" value="1"></td>' +
+                            '<td>' + b.name + '</td>' +
+                            '<td class="frequency">' + renderFrequency(b.frequency) + '</td>' +
+                            '<td>' + modulation + '</td>' +
+                        '</tr>'
+                    );
+                    row.data('bookmark', b);
+                    return row;
+                }));
+                $importModal.find('.bookmark-list').html($list);
+            } else {
+                $importModal.find('.bookmark-list').html('No personal bookmarks found in this browser');
+            }
+            $importModal.modal('show');
+        });
     });
 };

htdocs/settings/bookmarks.html

@@ -20,6 +20,7 @@ ${header}
     <div class="row mt-3 bookmarks">
         ${bookmarks}
         <div class="buttons container">
+            <button type="button" class="btn btn-info bookmark-import">Import personal bookmarks...</button>
             <button type="button" class="btn btn-primary bookmark-add">Add a new bookmark</button>
         </div>
     </div>
@@ -43,4 +44,24 @@ ${header}
         </div>
     </div>
 </div>
+<div class="modal" id="importModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>Please select</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Please select the bookmarks you would like to import:</p>
+                <div class="bookmark-list"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary confirm">Import</button>
+            </div>
+        </div>
+    </div>
+</div>
 </body>

owrx/controllers/assets.py

@@ -125,6 +125,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/Header.js",
             "lib/Demodulator.js",
             "lib/DemodulatorPanel.js",
+            "lib/BookmarkLocalStorage.js",
             "lib/BookmarkBar.js",
             "lib/BookmarkDialog.js",
             "lib/AudioEngine.js",
@@ -148,6 +149,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/Header.js",
             "lib/settings/MapInput.js",
             "lib/settings/ImageUpload.js",
+            "lib/BookmarkLocalStorage.js",
             "lib/settings/BookmarkTable.js",
             "lib/settings/WsjtDecodingDepthsInput.js",
             "lib/settings/WaterfallDropdown.js",

owrx/controllers/settings/bookmarks.py

@@ -43,7 +43,9 @@ class BookmarksController(AuthorizationMixin, WebpageController):
                 9: "G",
                 12: "T",
             }
-            exp = int(math.log10(freq) / 3) * 3
+            exp = 0
+            if freq > 0:
+                exp = int(math.log10(freq) / 3) * 3
             num = freq
             suffix = ""
             if exp in suffixes: