From b32aa874e742f84eb0e04d8aba64d40cd1293abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= <marc@mrw.sh>
Date: Thu, 29 Nov 2018 14:20:18 +0100
Subject: [PATCH] also show proxied urls

---
 app.js                | 16 +++++++-
 client/servicedock.js | 29 +++++++++++++-
 package.json          |  3 +-
 style/style.styl      | 90 ++++++++++++++++++++++++++++++++++++++++++-
 views/index.pug       |  1 -
 views/layout.pug      | 19 +++++++--
 6 files changed, 147 insertions(+), 11 deletions(-)

diff --git a/app.js b/app.js
index b83f75f..22f682d 100644
--- a/app.js
+++ b/app.js
@@ -19,7 +19,21 @@ app.use(cookieParser())
 app.use(require('stylus').middleware(path.join(__dirname, 'style')))
 app.use(express.static(path.join(__dirname, 'style')))
 app.use(express.static(path.join(__dirname, 'client')))
-app.use(express.static(path.join(__dirname, 'node_modules', 'jquery', 'dist')))
+app.get('/jquery.min.js', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.min.js'))
+})
+app.get('/jquery-ui.structure.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.structure.min.css'))
+})
+app.get('/jquery-ui.theme.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.theme.min.css'))
+})
+app.get('/jquery-ui.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.css'))
+})
+app.get('/jquery-ui.min.js', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.js'))
+})
 app.use(express.static(path.join(__dirname, 'node_modules', 'viz.js')))
 app.use(express.static(path.join(__dirname, 'node_modules', 'socket.io-client', 'dist')))
 app.use(express.static(path.join(__dirname, 'node_modules', 'docker.js')))
diff --git a/client/servicedock.js b/client/servicedock.js
index 90c2c42..e37378b 100644
--- a/client/servicedock.js
+++ b/client/servicedock.js
@@ -10,14 +10,39 @@ function sigstack() {
   var dot = docker.graphics.stack()
   var svg = docker.graphics.viz(dot, error)
   $('#stacks').html(svg)
-  $('a#svgStacks').attr('href', 'data:image/svg;base64,'+btoa(svg))
+  $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
                   .attr('target', '_blank')
                   .attr('download', window.location.hostname+'.svg')
-                  .show()
+  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
+                  .attr('target', '_blank')
+                  .attr('download', window.location.hostname+'.dot')
+
 }
 
 function init() {
   socket = io.connect()
   docker = new Docker(socket, error, sigstack)
+  $('header').attr('draggable', 'true')
+             .on('dragstart', (event) => {
+               event.originalEvent.dataTransfer.setData("text", event.originalEvent.target.id);
+             })
+  $('*').on('dragover', (event) => {
+    event.preventDefault()
+    var e = event.originalEvent
+    var obj = $('body')
+    var w = window.innerWidth
+    var h = window.innerHeight
+    if (e.clientY < h*.1) {
+      obj.removeClass('bottom').removeClass('left').removeClass('right').addClass('top')
+    } else if (e.clientY > h*.9) {
+      obj.addClass('bottom').removeClass('left').removeClass('right').removeClass('top')
+    } else if (e.clientX < w*.1) {
+      obj.removeClass('bottom').addClass('left').removeClass('right').removeClass('top')
+    } else if (e.clientX > w*.9) {
+      obj.removeClass('bottom').removeClass('left').addClass('right').removeClass('top')
+    }
+  }).on('drop', (event) => {
+    event.preventDefault()
+  })
 }
 $(init)
diff --git a/package.json b/package.json
index 1e6656c..e117fbe 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,11 @@
     "child_process": "^1.0.2",
     "cookie-parser": "*",
     "debug": "*",
-    "docker.js": "^1.4.0",
+    "docker.js": "^1.4.2",
     "dockerode": "^2.5.7",
     "express": "*",
     "jquery": "^3.1.1",
+    "jqueryui": "^1.11.1",
     "morgan": "*",
     "pty.js": "^0.3.1",
     "pug": "*",
diff --git a/style/style.styl b/style/style.styl
index 61dc57a..de5d456 100644
--- a/style/style.styl
+++ b/style/style.styl
@@ -2,9 +2,95 @@ svg
   width: 100%
   height: auto
 
+header
+  display: flex
+  justify-content: space-between
+  background-color: blue
+  color: white
+  line-height: 1em
+  h1
+    font-size: 100%
+    a:link
+      color: white
+  #downloads
+    display: flex
+
+#info
+  display: none
+
 #error
   display: none
   background-color: red
 
-#svgStacks
-  display: none
\ No newline at end of file
+#svg, #dot
+  text-decoration: inherit
+  color: white
+  display: none
+  &[href]
+    display: block
+
+.top
+  header
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    height: 2em
+    overflow: hidden
+  main
+    position: absolute
+    top: 2em
+    left: 0
+    right: 0
+    bottom: 0
+    overflow: auto
+
+.bottom
+  header
+    position: absolute
+    bottom: 0
+    left: 0
+    right: 0
+    height: 2em
+    overflow: hidden
+  main
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 2em
+    overflow: auto
+
+.left
+  header
+    position: absolute
+    top: 0
+    right: 2em
+    left: 0
+    height: 2em
+    overflow: hidden
+    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
+  main
+    position: absolute
+    top: 0
+    left: 2em
+    right: 0
+    bottom: 0
+    overflow: auto
+
+.right
+  header
+    position: absolute
+    top: 0
+    right: 0
+    left: 3em
+    height: 2em
+    overflow: hidden
+    transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
+  main
+    position: absolute
+    top: 0
+    left: 0
+    right: 2em
+    bottom: 0
+    overflow: auto
diff --git a/views/index.pug b/views/index.pug
index 48c2bbf..29dd18d 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -2,4 +2,3 @@ extends layout
 
 block content
   div#stacks loading...
-  a#svgStacks download image
\ No newline at end of file
diff --git a/views/layout.pug b/views/layout.pug
index 7a5944f..50085c3 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -3,12 +3,23 @@ html
   head
     title= title
     link(rel='stylesheet', href='/style.css')
+    link(rel='stylesheet', href='/jquery-ui.structure.min.css')
+    link(rel='stylesheet', href='/jquery-ui.theme.min.css')
+    link(rel='stylesheet', href='/jquery-ui.min.css')
     script(type="text/javascript", src="/jquery.min.js")
+    script(type="text/javascript", src="/jquery-ui.min.js")
     script(type="text/javascript", src="/viz.js")
     script(type="text/javascript", src="/docker.js")
     script(type="text/javascript", src="/socket.io.js")
     script(type="text/javascript", src="/servicedock.js")
-  body
-    block content
-    footer
-      div#error
\ No newline at end of file
+  body.top
+    header#header
+      h1 ServiceDock
+      div#downloads
+        a#svg download image
+        a#dot download source
+    main
+      block content
+      footer
+        div#info
+        div#error