buttons and storage action

htdocs/css/openwebrx.css

@@ -977,6 +977,10 @@ img.openwebrx-mirror-img
     flex-direction: row;
 }
 
+.openwebrx-dialog .form-field:first-child {
+    padding-top: 0;
+}
+
 .openwebrx-dialog label {
     display: inline-block;
     flex: 1 0 20px;
@@ -995,6 +999,18 @@ img.openwebrx-mirror-img
     padding: 0 5px;
 }
 
+.openwebrx-dialog .buttons {
+    text-align: right;
+    padding: 5px 5px 0;
+    border-top: 1px solid #666;
+}
+
+.openwebrx-dialog .buttons .openwebrx-button {
+    font-size: 12pt;
+    min-width: 50px;
+    text-align: center;
+    padding: 5px 10px;
+}
 
 #openwebrx-panel-digimodes[data-mode="ft8"]    #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="wspr"]   #openwebrx-digimode-content-container,

htdocs/index.html

@@ -226,7 +226,7 @@
             </div>
             <div class="form-field">
                 <label for="frequency">Frequency:</label>
-                <input type="number" id="frequency" name="frequency" step="12500">
+                <input type="number" id="frequency" name="frequency">
             </div>
             <div class="form-field">
                 <label for="modulation">Modulation:</label>
@@ -242,6 +242,11 @@
                     <option value="ysf">YSF</option>
                 </select>
             </div>
+            <div class="buttons">
+                <div class="openwebrx-button" data-action="cancel">Cancel</div>
+                <div class="openwebrx-button" data-action="submit">Ok</div>
+            </div>
+            <input type="submit" style="display:none;">
         </form>
     </div>
     </body>

htdocs/openwebrx.js

@@ -1337,7 +1337,7 @@ function on_ws_recv(evt)
 }
 
 function update_bookmarks(bookmarks) {
-    $container = $('#openwebrx-bookmarks-container');
+    var $container = $('#openwebrx-bookmarks-container');
     $container.empty();
     bookmarks.forEach(function(b){
         $bookmark = $('<div class="bookmark">' + b.name + '</div>');
@@ -1348,14 +1348,14 @@ function update_bookmarks(bookmarks) {
 }
 
 function position_bookmarks() {
-    range = get_visible_freq_range();
+    var range = get_visible_freq_range();
     $('#openwebrx-bookmarks-container .bookmark').each(function(){
         $(this).css('left', scale_px_from_freq($(this).data('frequency'), range));
     });
 }
 
 function init_bookmarks() {
-    $container = $("#openwebrx-bookmarks-container")
+    var $container = $("#openwebrx-bookmarks-container")
     $container.click(function(e){
         $container.find('.bookmark').removeClass('selected');
         $bookmark = $(e.target);
@@ -1366,7 +1366,7 @@ function init_bookmarks() {
         $bookmark.addClass('selected');
     });
 
-    $bookmarkButton = $('#openwebrx-panel-receiver .openwebrx-bookmark-button');
+    var $bookmarkButton = $('#openwebrx-panel-receiver .openwebrx-bookmark-button');
     if (typeof(Storage) !== 'undefined') {
         $bookmarkButton.show();
     } else {
@@ -1375,17 +1375,52 @@ function init_bookmarks() {
     $bookmarkButton.click(function(){
         showBookmarkEditDialog();
     });
+
+    var $dialog = $("#openwebrx-dialog-bookmark");
+    $dialog.find('.openwebrx-button[data-action=cancel]').click(function(){
+        $dialog.hide();
+    });
+    $dialog.find('.openwebrx-button[data-action=submit]').click(function(){
+        storeNewBookmark();
+    });
 }
 
 function showBookmarkEditDialog() {
-    $dialog = $("#openwebrx-dialog-bookmark");
+    var $dialog = $("#openwebrx-dialog-bookmark");
-    $form = $dialog.find("form");
+    var $form = $dialog.find("form");
     $form.find("#name").val("");
     $form.find("#frequency").val(center_freq + demodulators[0].offset_frequency);
     $form.find("#modulation").val(demodulators[0].subtype);
     $dialog.show();
 }
 
+function storeNewBookmark() {
+    var $dialog = $("#openwebrx-dialog-bookmark");
+    var bookmark = {};
+    var valid = true;
+    ['name', 'frequency', 'modulation'].forEach(function(key){
+        var $input = $dialog.find('#' + key);
+        valid = valid && $input[0].checkValidity();
+        bookmark[key] = $input.val();
+    });
+    if (!valid) {
+        $dialog.find("form :submit").click();
+        return;
+    }
+    var bookmarks = getLocalBookmarks();
+    bookmarks.push(bookmark);
+    setLocalBookmarks(bookmarks);
+    $dialog.hide();
+}
+
+function getLocalBookmarks(){
+    return JSON.parse(window.localStorage.getItem("bookmarks")) || [];
+}
+
+function setLocalBookmarks(bookmarks){
+    window.localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+}
+
 var dial_frequencies = [];
 
 function find_dial_frequencies() {