bugs fixed for standalone volumes; zoom added

client/servicedock.js

@@ -1,6 +1,7 @@
 var socket = io.connect()
 var docker = new Docker(socket, error, sigstack, sigcontainer)
 var parameters = docker.graphics.parameters
+var zoom = 1
 var stack = null
 var standalone = null
 
@@ -14,7 +15,6 @@ function error(e) {
   $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+e.msg+'</p><pre>'+e.data+'</pre>').show()
 }
 
-
 function update() {
   var data = {
     'containers': docker.containers.get(),
@@ -88,6 +88,26 @@ function init() {
              .on('dragstart', (event) => {
                event.originalEvent.dataTransfer.setData("text", "");
              })
+  // zoom in
+  $('#zoomin').on('click', () => {
+    zoom *= 1.5
+    if (zoom>500) zoom=500;
+    $('#wizard').width(100*zoom+'%')
+    $('#wizard svg').width('100%')
+  })
+  // zoom reset
+  $('#zoomreset').on('click', () => {
+    zoom = 1
+    $('#wizard').width('100%')
+    $('#wizard svg').width('auto')
+  })
+  // zoom out
+  $('#zoomout').on('click', () => {
+    zoom /= 1.5
+    if (zoom<0.1) zoom=0.1;
+    $('#wizard').width(100*zoom+'%')
+    $('#wizard svg').width('100%')
+  })
   // restart on click on status
   $('#status').on('click', () => {
     docker.unpause()

package.json

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

style/style.styl

@@ -17,6 +17,7 @@ header
   background-color: blue
   color: white
   line-height: 1em
+  cursor: grabbing
   h1
     z-index: 99
     font-size: 100%
@@ -49,18 +50,31 @@ header
       &:hover
         display: block
       a
-    margin: 0.5em
         display: none
         &[href]
           display: block
-    &:link
+  #info
+    a
       color: inherit
+      cursor: pointer
+    #zoom
+      margin: 0.5em
+      display: flex
+      a
+        margin 0 0.1em
+      #zoomin
+        cursor: zoom-in
+      #zoomreset
+        cursor: pointer
+      #zoomout
+        cursor: zoom-out
   #downloads, #info
     display: flex
   #clock
     margin: 0.5em
   #status
     margin: 0.5em
+    cursor: pointer
     &.wait
       &::before
         content: "⌛"
@@ -76,9 +90,10 @@ header
     &.paused
       &::before
         content: "⏯"
-        color: gray
+        color: yellow
   #orientation
     margin: 0.5em
+    cursor: pointer
     &.lr
       &::before
         content: "→"

views/layout.pug

@@ -23,6 +23,10 @@ html
             label(for="upload") upload data
             input(type="file", name="upload")#upload
       div#info
+        div#zoom
+          a#zoomin 🔎+
+          a#zoomreset 0
+          a#zoomout -🔍
         div#orientation
         div#clock= (new Date()).toLocaleString()
         div#status.error