Add new bookmarks to page without refreshing.

This is the first card to get a javascript version, so I'm testing
the waters with the low-stakes bookmarks.

frontends/etiquette_flask/static/js/cards.js

@@ -71,6 +71,43 @@ function drag_drop(event)
 /******************************************************************************/
 cards.bookmarks = {};
 
+cards.bookmarks.create =
+function create(bookmark, add_delete_button)
+{
+    const bookmark_card = document.createElement("div");
+    bookmark_card.className = "bookmark_card"
+    bookmark_card.dataset.id = bookmark.id;
+
+    const bookmark_title = document.createElement("a");
+    bookmark_title.className = "bookmark_title";
+    bookmark_title.href = bookmark.url;
+    bookmark_title.innerText = bookmark.display_name;
+    bookmark_card.appendChild(bookmark_title);
+
+    const bookmark_url = document.createElement("a");
+    bookmark_url.className = "bookmark_url";
+    bookmark_url.href = bookmark.url;
+    bookmark_url.innerText = bookmark.url;
+    bookmark_card.appendChild(bookmark_url);
+
+    const bookmark_toolbox = document.createElement("div");
+    bookmark_toolbox.className = "bookmark_toolbox"
+    bookmark_card.appendChild(bookmark_toolbox);
+
+    if (add_delete_button)
+    {
+        const delete_button = document.createElement("button");
+        delete_button.className = "red_button button_with_confirm";
+        delete_button.dataset.onclick = "return delete_bookmark_form(event);";
+        delete_button.dataset.prompt = "Delete Bookmark?";
+        delete_button.dataset.cancelClass = "gray_button";
+        delete_button.innerText = "Delete";
+        bookmark_toolbox.appendChild(delete_button);
+        common.init_button_with_confirm(delete_button);
+    }
+    return bookmark_card;
+}
+
 /******************************************************************************/
 cards.photos = {};
 

frontends/etiquette_flask/templates/bookmarks.html

@@ -12,6 +12,7 @@
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/cards.js"></script>
     <script src="/static/js/spinner.js"></script>
     <script src="/static/js/editor.js"></script>
 
@@ -54,7 +55,27 @@ function create_bookmark_form()
     {
         return;
     }
-    return api.bookmarks.create(url, title, common.refresh_or_alert);
+    return api.bookmarks.create(url, title, create_bookmark_callback);
+}
+
+function create_bookmark_callback(response)
+{
+    if (! (response.meta.status === 200 && response.meta.json_ok))
+    {
+        alert(JSON.stringify(response));
+        return;
+    }
+    const bookmark = response.data;
+    const add_delete_button = true;
+    const bookmark_card = cards.bookmarks.create(bookmark, add_delete_button);
+    create_editor(bookmark_card);
+
+    const bookmark_list = document.getElementById("bookmark_list");
+    const new_bookmark_card = document.getElementById("new_bookmark_card");
+    bookmark_list.insertBefore(bookmark_card, new_bookmark_card);
+
+    document.getElementById("new_bookmark_url").value = "";
+    document.getElementById("new_bookmark_title").value = "";
 }
 
 function delete_bookmark_form(event)