menu; configuration; localStorage

client/servicedock.js

@@ -1,15 +1,22 @@
-var socket = null;
+var socket = io.connect()
-var docker = null;
+var docker = new Docker(socket, error, sigstack)
+var parameters = docker.graphics.parameters
+console.log(localStorage)
 
 function error(msg, data) {
+  $('#status').removeClass().addClass('error')
   $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+msg+'</p><pre>'+data+'</pre>').show()
 }
 
 function sigstack() {
   $('#error').hide()
-  var dot = docker.graphics.stack()
+  $('#clock').text((new Date()).toLocaleString())
+  $('#status').removeClass().addClass('wait')
+  var dot = docker.graphics.stack(parameters)
   var svg = docker.graphics.viz(dot, error)
   $('#stacks').html(svg)
+  $('#clock').text((new Date()).toLocaleString())
+  $('#status').removeClass().addClass('success')
   $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
                   .attr('target', '_blank')
                   .attr('download', window.location.hostname+'.svg')
@@ -19,12 +26,30 @@ function sigstack() {
 
 }
 
+function setParameters() {
+  localStorage.rankdir = (++localStorage.rankdir)%setParameters.rankdirs.length
+  parameters.rankdir = setParameters.rankdirs[localStorage.rankdir]
+  $('#orientation').removeClass().addClass(parameters.rankdir.toLowerCase())
+  console.log(localStorage.rankdir)
+}
+setParameters.rankdirs = ['LR', 'TB', 'RL', 'BT']
+if (!localStorage.rankdir)
+  localStorage.rankdir = -1
+else
+  --localStorage.rankdir
+console.log(localStorage.rankdir)
+
 function init() {
-  socket = io.connect()
+  setParameters()
-  docker = new Docker(socket, error, sigstack)
+  $('#orientation').on('click', () => {
+    setParameters()
+    sigstack()
+  })
+  if (localStorage.position)
+    $('body').removeClass().addClass(localStorage.position)
   $('header').attr('draggable', 'true')
              .on('dragstart', (event) => {
-               event.originalEvent.dataTransfer.setData("text", event.originalEvent.target.id);
+               event.originalEvent.dataTransfer.setData("text", "");
              })
   $('*').on('dragover', (event) => {
     event.preventDefault()
@@ -33,13 +58,17 @@ function init() {
     var w = window.innerWidth
     var h = window.innerHeight
     if (e.clientY < h*.1) {
-      obj.removeClass('bottom').removeClass('left').removeClass('right').addClass('top')
+      obj.removeClass().addClass('top')
+      if (localStorage) localStorage.position = 'top';
     } else if (e.clientY > h*.9) {
-      obj.addClass('bottom').removeClass('left').removeClass('right').removeClass('top')
+      obj.removeClass().addClass('bottom')
+      if (localStorage) localStorage.position = 'bottom';
     } else if (e.clientX < w*.1) {
-      obj.removeClass('bottom').addClass('left').removeClass('right').removeClass('top')
+      obj.removeClass().addClass('left')
+      if (localStorage) localStorage.position = 'left';
     } else if (e.clientX > w*.9) {
-      obj.removeClass('bottom').removeClass('left').addClass('right').removeClass('top')
+      obj.removeClass().addClass('right')
+      if (localStorage) localStorage.position = 'right';
     }
   }).on('drop', (event) => {
     event.preventDefault()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ServiceDock",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "start": "./bin/www"
@@ -10,7 +10,7 @@
     "child_process": "^1.0.2",
     "cookie-parser": "*",
     "debug": "*",
-    "docker.js": "^1.4.2",
+    "docker.js": "^1.4.8",
     "dockerode": "^2.5.7",
     "express": "*",
     "jquery": "^3.1.1",

style/style.styl

@@ -1,42 +1,103 @@
 svg
-  width: 100%
+  display: block
+  width: auto
   height: auto
+  max-width: 100%
+  max-height: 100%
+  margin: auto
+
+a
+  text-decoration: inherit
 
 header
+  z-index: 98
   display: flex
+  overflow: visible
   justify-content: space-between
   background-color: blue
   color: white
   line-height: 1em
   h1
+    z-index: 99
     font-size: 100%
-    a:link
+    margin: 0.5em
+    &::before
+      width: 1em
+      content: "☰"
       color: white
-  #downloads
+      margin-right: .25em
+    &:hover #menu
+      display: block
+    #menu
+      display: none
+      background-color: #ccc
+      color: black
+      margin: 1px
+      padding: 0
+      border: 1px solid black
+      z-index: 100
+      a
+        margin: 0
+        padding: .5em
+        &:hover
+          background-color: #eee
+      a + a
+        border-top: 1px solid black
+      &:hover
+        display: block
+  a
+    margin: 0.5em
+    display: none
+    &[href]
+      display: block
+    &:link
+      color: inherit
+  #downloads, #info
     display: flex
-
+  #clock
-#info
+    margin: 0.5em
-  display: none
+  #status
+    margin: 0.5em
+    &.wait
+      &::before
+        content: "⌛"
+        color: inherit
+    &.error
+      &::before
+        content: "✘"
+        color: red
+    &.success
+      &::before
+        content: "✔"
+        color: green
+  #orientation
+    margin: 0.5em
+    &.lr
+      &::before
+        content: "→"
+    &.tb
+      &::before
+        content: "↓"
+    &.rl
+      &::before
+        content: "←"
+    &.bt
+      &::before
+        content: "↑"
     
 #error
   display: none
   background-color: red
 
-#svg, #dot
-  text-decoration: inherit
-  color: white
-  display: none
-  &[href]
-    display: block
-
 .top
   header
     position: absolute
     top: 0
     left: 0
-    right: 0
+    width: 100%
     height: 2em
-    overflow: hidden
+    #menu
+      position: absolute
   main
     position: absolute
     top: 2em
@@ -50,9 +111,11 @@ header
     position: absolute
     bottom: 0
     left: 0
-    right: 0
+    width: 100%
     height: 2em
-    overflow: hidden
+    #menu
+      position: absolute
+      transform: translate(0, -100%) translate(0, -1em)
   main
     position: absolute
     top: 0
@@ -63,30 +126,39 @@ header
 
 .left
   header
+    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em)
     position: absolute
     top: 0
-    right: 2em
     left: 0
+    width: 100vh
     height: 2em
-    overflow: hidden
+    #orientation
-    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
+      transform: rotate(90deg)
+   #menu
+      position: absolute
+      left: -3em
+      transform: rotate(90deg) translate(50%) translate(-2em)
   main
     position: absolute
     top: 0
-    left: 2em
     right: 0
+    left: 2em
     bottom: 0
-    overflow: auto
 
 .right
   header
     position: absolute
     top: 0
     right: 0
-    left: 3em
+    width: 100vh
     height: 2em
-    overflow: hidden
     transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
+    #orientation
+      transform: rotate(270deg)
+    #menu
+      position: absolute
+      left: -3em
+      transform: rotate(270deg) translate(-50%) translate(2em)
   main
     position: absolute
     top: 0
@@ -94,3 +166,11 @@ header
     right: 2em
     bottom: 0
     overflow: auto
+  
+#image
+  height: 100%
+  
+div#loading
+  text-align: center
+  margin-top: 40vh
+  font-size: 200%

views/index.pug

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

views/layout.pug

@@ -15,11 +15,14 @@ html
   body.top
     header#header
       h1 ServiceDock
-      div#downloads
+        nav#menu
-        a#svg download image
+          a#svg download image
-        a#dot download source
+          a#dot download source
+      div#info
+        div#orientation
+        div#clock
+        div#status
     main
       block content
       footer
-        div#info
         div#error