From 786cb0be5bbd6992a9803885de4742f73ec6849d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= Date: Fri, 30 Nov 2018 21:52:10 +0100 Subject: [PATCH] menu; configuration; localStorage --- client/servicedock.js | 49 ++++++++++++---- package.json | 4 +- style/style.styl | 130 ++++++++++++++++++++++++++++++++++-------- views/index.pug | 5 +- views/layout.pug | 11 ++-- 5 files changed, 157 insertions(+), 42 deletions(-) diff --git a/client/servicedock.js b/client/servicedock.js index e37378b..72fac74 100644 --- 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('

Error

'+(new Date()).toLocaleString()+'

'+msg+'

'+data+'
').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() diff --git a/package.json b/package.json index e117fbe..276e5fe 100644 --- 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", diff --git a/style/style.styl b/style/style.styl index de5d456..51367b6 100644 --- 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% diff --git a/views/index.pug b/views/index.pug index 29dd18d..186f799 100644 --- 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 diff --git a/views/layout.pug b/views/layout.pug index 50085c3..72a16ff 100644 --- 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