From cae0789ee1c5ea8a92e8feef823febbd4c9082bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= <marc@mrw.sh>
Date: Tue, 4 Dec 2018 00:29:26 +0100
Subject: [PATCH] bugs fixed for standalone volumes; zoom added

---
 client/servicedock.js | 22 +++++++++++++++++++++-
 package.json          |  2 +-
 style/style.styl      | 29 ++++++++++++++++++++++-------
 views/layout.pug      |  4 ++++
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/client/servicedock.js b/client/servicedock.js
index 803fb91..98a263a 100644
--- a/client/servicedock.js
+++ b/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()
diff --git a/package.json b/package.json
index 1e438aa..a704e89 100644
--- a/package.json
+++ b/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",
diff --git a/style/style.styl b/style/style.styl
index d01fb43..37c1247 100644
--- a/style/style.styl
+++ b/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%
@@ -48,19 +49,32 @@ header
         border-top: 1px solid black
       &:hover
         display: block
-  a
-    margin: 0.5em
-    display: none
-    &[href]
-      display: block
-    &:link
+      a
+        display: none
+        &[href]
+          display: block
+  #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: "→"
diff --git a/views/layout.pug b/views/layout.pug
index 9be7aaf..9650d2f 100644
--- a/views/layout.pug
+++ b/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