12b9c036ada723b623e3b66cd0b0c85e0328df9c
braney
  Mon Aug 14 21:45:24 2017 -0700
add AJAX store.

diff --git src/hg/js/hgCollection.js src/hg/js/hgCollection.js
index 7f2bcae..596f27f 100644
--- src/hg/js/hgCollection.js
+++ src/hg/js/hgCollection.js
@@ -63,33 +63,34 @@
 
     function checkCallback( operation, node, node_parent, node_position, more) {
         // called during a drag and drop action to see if the target is droppable
         if (operation === "move_node") {
         }
     }
 
     function newCollection() {
         // called when the "New Collection" button is pressed
         var ourCollectionName = getUniqueName("coll");
         var ourTreeName = getUniqueName("tree");
         var newName = "A New Collection";
         var newDescription = "Description of New Collection";
         var attributes = "shortLabel='" +  newName + "' ";
         attributes += "longLabel='" +  newDescription + "' ";
-        attributes += "color='" + "0" + "' ";
+        attributes += "color='" + "#0" + "' ";
         attributes += "viewType='" + "collection" + "' ";
         attributes += "visibility='" + "full" + "' ";
+        attributes += "name='" +  ourCollectionName + "' ";
 
         $('#collections').append("<li " + attributes +  "id='"+ourCollectionName+"'>A New Collection</li>");
         $('#collection').append("<div id='"+ourTreeName+"'><ul><li " + attributes+ ">A New Collection</li><ul></div>");
         var newTree = $('#collection div:last');
         trees[ourCollectionName] = newTree;
         $(newTree).jstree({
                "core" : {
                      "check_callback" : checkCallback
                          },
                'plugins' : ['dnd', 'conditionalselect', 'contextmenu'],
                'check_callback' : checkCallback,
                'dnd': {check_while_dragging: true}
         });
        $(newTree).on("select_node.jstree", selectTreeNode);
     }
@@ -113,54 +114,79 @@
         var collectTree = trees[list.id];
         var v = collectTree.jstree(true).get_json('#', {flat:true, no_data:true, no_state:true, no_a_attr:true});
         var mytext = JSON.stringify(v);
         return mytext;
     }
 
     function saveCollections(trees) {
        // called when the "Save" button is pressed
        var json = "[";
        $('#collections li').each(function() {
             json += addCollection(trees, this ) + ',';
         });
         json = json.slice(0, -1);
         json += ']';
         console.log(json);
+        var requestData = 'jsonp=' + json;
+        $.ajax({
+            data:  requestData ,
+            async: false,
+            dataType: "JSON",
+            type: "PUT",
+            url: "hgCollection?cmd=saveCollection",
+            trueSuccess: updatePage,
+            success: catchErrorOrDispatch,
+            error: errorHandler,
+        });
     }
 
     function init() {
         // called at initialization time
         $("#saveCollections").click ( function() {saveCollections(trees);} );
+        $("#discardChanges").click ( function () { window.location.reload(); });
+
         $("#newCollection").click ( newCollection );
         $("#collectionApply").click ( collectionApply );
         $("#customApply").click ( customApply );
         $('#collections').selectable({selected : selectCollection});
 
         var trackOpt = {
             hideAfterPaletteSelect : true,
             color : $('#customColorInput').val(),
             showPalette: true,
             showInput: true,
             preferredFormat: "hex",
             change: function() { var color = $("#customColorPicker").spectrum("get"); $('#customColorInput').val(color); },
         };
 
         $("#customColorPicker").spectrum(trackOpt);
-        $.jstree.defaults.core.themes.icons = false;
+        //$.jstree.defaults.core.themes.icons = false;
         $.jstree.defaults.core.themes.dots = true;
         $.jstree.defaults.contextmenu.show_at_node = false;
-        treeDiv=$('#collection');
+        $("#startCollections div").each(function(index) {
+            $("#collection").append($(this).clone());
+            var newTree = $('#collection div:last');
+            trees[this.id] = newTree;
+
+            $(newTree).jstree({
+                   'plugins' : ['dnd', 'conditionalselect', 'contextmenu'],
+            });
+           $(newTree).on("select_node.jstree", selectTreeNode);
+        });
+        $("#collection  li").each(function() {
+            names[this.getAttribute("name")] = 1;
+        });
         treeDiv=$('#tracks');
         treeDiv.jstree({
                'plugins' : ['dnd', 'conditionalselect', 'contextmenu'],
                'always_copy' : true,
         });
     }
 
     function updatePage(responseJson) {
         // called after AJAX call
         if (!responseJson) {
             return;
         }
         var message = responseJson.serverSays;
         if (message) {
             console.log('server says: ' + JSON.stringify(message));