menu; configuration; localStorage

2018-11-30 21:52:10 +01:00
parent b32aa874e7
commit 786cb0be5b
5 changed files with 157 additions and 42 deletions
--- a/client/servicedock.js
+++ b/client/servicedock.js
@@ -1,15 +1,22 @@
-var socket = null;
-var docker = null;
+var socket = io.connect()
+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()
-  docker = new Docker(socket, error, sigstack)
+  setParameters()
+  $('#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()
--- a/package.json
+++ b/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",
--- a/style/style.styl
+++ b/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
-
-#info
-  display: none
-
+  #clock
+    margin: 0.5em
+  #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
-    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
+    #orientation
+      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%
--- a/views/index.pug
+++ b/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
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -15,11 +15,14 @@ html
  body.top
    header#header
      h1 ServiceDock
-      div#downloads
-        a#svg download image
-        a#dot download source
+        nav#menu
+          a#svg download image
+          a#dot download source
+      div#info
+        div#orientation
+        div#clock
+        div#status
    main
      block content
      footer
-        div#info
        div#error