now also rendering local standalone containers

client/servicedock.js

@@ -1,22 +1,30 @@
 var socket = io.connect()
-var docker = new Docker(socket, error, sigstack)
+var docker = new Docker(socket, error, sigstack, sigcontainer)
 var parameters = docker.graphics.parameters
+var showstack = true
+var showcontainer = true
+
+function showdate() {
+  $('#clock').text((new Date()).toLocaleString())
+}
 
 function error(e) {
+  showdate()
   $('#status').removeClass().addClass('error')
   $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+e.msg+'</p><pre>'+e.data+'</pre>').show()
 }
 
 function sigstack() {
-  $('#error').hide()
-  $('#clock').text((new Date()).toLocaleString())
+  if (!showstack) return;
+  showdate()
   $('#status').removeClass().addClass('wait')
   var dot = docker.graphics.stack(parameters)
   $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
                   .attr('target', '_blank')
                   .attr('download', window.location.hostname+'.dot')
+  $('#error').hide()
+  showdate()
   try {
-    $('#clock').text((new Date()).toLocaleString())
     var svg = docker.graphics.viz(dot)
     $('#stacks').html(svg)
     $('#status').removeClass().addClass('success')
@@ -26,7 +34,35 @@ function sigstack() {
   } catch (e) {
     error(e)
   }
-  $('#clock').text((new Date()).toLocaleString())
+  showdate()
+}
+
+function sigcontainer() {
+  if (!showcontainer) return;
+  console.log(docker.containers.get())
+  showdate()
+  $('#status').removeClass().addClass('wait')
+  var dot = docker.graphics.standalone(parameters)
+  /*
+  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
+                  .attr('target', '_blank')
+                  .attr('download', window.location.hostname+'.dot')
+  */
+  $('#error').hide()
+  showdate()
+  try {
+    var svg = docker.graphics.viz(dot)
+    $('#standalone').html(svg)
+    $('#status').removeClass().addClass('success')
+    /*
+    $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
+                    .attr('target', '_blank')
+                    .attr('download', window.location.hostname+'.svg')
+    */
+  } catch (e) {
+    error(e)
+  }
+  showdate()
 }
 
 function setParameters() {
@@ -41,6 +77,8 @@ else
   --localStorage.rankdir
 
 function init() {
+  showdate()
+  $('#status').removeClass().addClass('wait')
   setParameters()
   $('#orientation').on('click', () => {
     setParameters()

package.json

@@ -10,7 +10,7 @@
     "child_process": "^1.0.2",
     "cookie-parser": "*",
     "debug": "*",
-    "docker.js": "^1.4.10",
+    "docker.js": "^1.4.12",
     "dockerode": "^2.5.7",
     "express": "*",
     "jquery": "^3.1.1",

style/style.styl

@@ -91,7 +91,7 @@ header
 
 .top
   header
-    position: absolute
+    position: fixed
     top: 0
     left: 0
     width: 100%
@@ -108,7 +108,7 @@ header
 
 .bottom
   header
-    position: absolute
+    position: fixed
     bottom: 0
     left: 0
     width: 100%
@@ -126,15 +126,15 @@ header
 
 .left
   header
-    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em)
-    position: absolute
+    position: fixed
     top: 0
     left: 0
     width: 100vh
     height: 2em
+    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em)
     #orientation
       transform: rotate(90deg)
-   #menu
+    #menu
       position: absolute
       left: -3em
       transform: rotate(90deg) translate(50%) translate(-2em)
@@ -147,7 +147,7 @@ header
 
 .right
   header
-    position: absolute
+    position: fixed
     top: 0
     right: 0
     width: 100vh
@@ -167,6 +167,9 @@ header
     bottom: 0
     overflow: auto
 
+.imagecontainer
+  padding: 1em
+  
 #image
   height: 100%
   

views/index.pug

@@ -1,7 +1,9 @@
 extends layout
 
 block content
-  div#stacks
+  div.imagecontainer#stacks
     div#loading loading...
       noscript 
         p.error this site requires javascript
+  div.imagecontainer#standalone
+    div#loading loading...

views/layout.pug

@@ -20,8 +20,8 @@ html
           a#dot download source
       div#info
         div#orientation
-        div#clock
-        div#status
+        div#clock= (new Date()).toLocaleString()
+        div#status.error
     main
       block content
       footer