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();
 }
 

nodejs/public/stylesheets/servicedock.css

@@ -21,15 +21,19 @@ div {
   overflow: auto;
 }
 
-svg {
+#main svg, #preview svg {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   z-index: -1;
   position: relative;
+  display: block;
+  margin: auto;
+}
+#preview svg {
+  padding-top: 2em;
 }
-
 ul li {
   margin-left: 1em;
 }
@@ -55,10 +59,22 @@ fieldset {
   border: 1px solid black;
 }
 
+select {
+  width: 100%;
+}
+
 .listbutton {
   width: 100%;
 }
 
+input:invalid {
+  background-color: #FDD;
+}
+form:invalid input[type=submit] {
+  opacity: .5;
+  pointer-events: none;
+}
+
 table {
   width: 100%;
 }
@@ -132,14 +148,17 @@ table.docker li+li {
   display: inline;
 }
 
-#status {
+#statusbar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0;
   padding: 0 1em 0 1em;
-  text-align: right;
+  color: white;
+}
+#status: {
+  float: right;
 }
 @media (max-width: 45em) {
   #username {
@@ -159,17 +178,24 @@ table.docker li+li {
   color: black;
 }
 
-#menuicon, #imagetools img, #close {
+.btn {
   cursor: pointer;
   height: 1em;
   width: auto;
+  border: 1px dotted blue;
+  opacity: 0.8;
+}
+
+.btn:hover {
+  border: 1px dotted white;
+  opacity: 2.0;
 }
 
 #menu {
   clear: both;
   position: relative;
-  padding: 1em 0em 1em 0em;
-  margin: 0 1em 0 1em;
+  padding: .5em 0 .5em 0;
+  margin: 1em 0 0 0;
   float: right;
   background-color: lightblue;
   list-style-type: none;