menu; configuration; localStorage

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()