more of create

nodejs/public/javascripts/servicedock.js

@@ -146,11 +146,24 @@ function upload(evt) {
     }
 }
 
+function previewCreate() {
+    var name = $('#name').val();
+    var nodes = {};
+    nodes[name] =  {
+        status: docker.containers.Status.Preview,
+        id: null,
+        name: name,
+        image: {
+            name: $('#image').val(),
+            id: null
+        },
+        links: [],
+        volumesfrom: [],
+    };
+    $('#preview').html(Viz("digraph {\n"+"  rankdir="+rankdir+";\n"+docker.containers.subgraph(name, nodes)+"\n}"));
+}
+
 function create() {
-    $("#create form fieldset input.add").click(function() {
-        $(this).siblings("select").append('<option>'+$(this).siblings("input").map(function() {return $(this).text()}).get().join(':'))+'</option>')
-    });
-    //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
 }
 
 var zoomlevel = 0;
@@ -293,10 +306,10 @@ function showCreate() {
     $("#main").hide();
     $("#logs").hide();
     $("#console").hide();
-    $("#imagetools").hide();
+    $("#imagetools").show();
     $("#close").show();
     $("#create").show();
-    create();
+    previewCreate();
 }
 
 function showConsole() {
@@ -468,6 +481,29 @@ function start() {
     }
 }
 
+function initForms() {
+    $('#create form *').change(previewCreate);
+    $("#create form fieldset .add").click(function() {
+        $(this).siblings("select.collect")
+            .append('<option '+$(this).siblings("input")
+                    .map(function() {
+                        if (this.hasAttribute('data-name')) {
+                            return this.getAttribute('data-name')+'="'+this.value.replace(/"/g, '&quot;')+'"';
+                        } else return '';
+                    }).get().join(' ')+'>'+$(this).siblings("input")
+                    .map(function() {
+                        var val = this.value;
+                        var sep = this.getAttribute('data-separator') || '';
+                        if (this.type=='checkbox' && !this.checked) {
+                            val=''; sep=''
+                        }
+                        return sep+val;
+                    }).get().join('')+'</option>')
+        $(this).siblings("input").value();
+    });
+    //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
+}
+
 function init() {
     socket.io
         .on("connect", connected)
@@ -481,6 +517,7 @@ function init() {
         .on("stats", stats)
         .on("logs", logs)
         .on("bash-data", bash_data);
+    initForms();
     start();
 }