From e2fc8e4f03502693301679cc15fdf909cbe4462e Mon Sep 17 00:00:00 2001 From: fsignorini Date: Mon, 20 Aug 2018 22:46:38 +0000 Subject: [PATCH] WIP --- app/graph/applications/persistenceGraph.js | 82 ++-- app/templates/index.dust | 152 ++++--- public/css/main.css | 482 ++++++++++++--------- public/js/main.js | 396 ++++++++--------- 4 files changed, 601 insertions(+), 511 deletions(-) diff --git a/app/graph/applications/persistenceGraph.js b/app/graph/applications/persistenceGraph.js index 8aaadc2..1f36d25 100644 --- a/app/graph/applications/persistenceGraph.js +++ b/app/graph/applications/persistenceGraph.js @@ -1,41 +1,41 @@ -'use strict'; - -const _ = require('lodash'); - -const DPersistenceServices = require('core/services/PersistenceServices'); -const UploadHTML = require('graph/services/uploadHTML'); - - -const ApplicationAnalytics = (Entity, PersistenceServices = DPersistenceServices) => { - - - return { - create(req, res, next) { - const port = process.env.MAESTRO_PORT; - const hostname = `${req.protocol}://${req.hostname}:${port}`; - - const data = Object.assign({}, req.body, req.user, {hostname}); - - if (_.has(data, 'graph_id') && _.has(data, 'owner_id')) { - res.render('index', data, (err, out) => { - if (err) - next(err); - - const post = {'status': 'finished', 'msg': 'Finish'}; - const owner = {'_id': _.get(data, 'owner_id')}; - const _id = _.get(data, 'graph_id') - - UploadHTML(Entity)(out, req.user)() - .then(() => { - return PersistenceServices(Entity) - .patch(_id, post, owner); - }) - .then(e => res.json(e)) - .catch(next); - }); - } - } - }; -}; - -module.exports = _.curry(ApplicationAnalytics); +'use strict'; + +const _ = require('lodash'); + +const DPersistenceServices = require('core/services/PersistenceServices'); +const UploadHTML = require('graph/services/uploadHTML'); + + +const ApplicationAnalytics = (Entity, PersistenceServices = DPersistenceServices) => { + + + return { + create(req, res, next) { + const port = process.env.MAESTRO_PORT; + const hostname = `${req.protocol}://${req.hostname}:${port}`; + + const data = Object.assign({}, req.body, req.user, {hostname}); + + if (_.has(data, 'graph_id') && _.has(data, 'owner_id')) { + res.render('index', data, (err, out) => { + if (err) + next(err); + + const post = {'status': 'finished', 'msg': 'Finish'}; + const owner = {'_id': _.get(data, 'owner_id')}; + const _id = _.get(data, 'graph_id') + + UploadHTML(Entity)(out, req.user)() + .then(() => { + return PersistenceServices(Entity) + .patch(_id, post, owner); + }) + .then(e => res.json(e)) + .catch(next); + }); + } + } + }; +}; + +module.exports = _.curry(ApplicationAnalytics); diff --git a/app/templates/index.dust b/app/templates/index.dust index a3d1c95..ced58af 100644 --- a/app/templates/index.dust +++ b/app/templates/index.dust @@ -1,67 +1,87 @@ - - - - - Maestro Server - Cloud Inventory - - - - - - - - - - -
- {payload|s} -
- -
- - - Maestro Server -
- -
- -
- -
- > -
-
- - - - - - - + + + + + Maestro Server - Cloud Inventory + + + + + + + + + + + + + + + + + + + + + + + +
+ {payload|s} +
+ +
+ + + Powered by
Maestro Server +
+ +
+ +
+ +
+ > +
+
+ + + + + + + \ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css index 87531c4..1b05c11 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,212 +1,272 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) - - Reset -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* - ===================== Structure -*/ -body { - background: #eaeaea; - padding: 10px; -} - -svg { - max-width: 100%; - max-height: 100%; - height: 100vh; - width: 100vw; -} - -#info { - top: 0; - right: 0; - height: 100vh; - position: fixed; - - background-color: rgba(91, 91, 91, 0.6); -} - -.footer { - text-align: right; - font-size: 12px; - padding: 5px; -} - -/* - ===================== Layout -*/ -p, a, b, li, span { - font-size: 12px; - font-family:Arial, Helvetica, sans-serif; fill: #672064; -} - -a { - color: #672064; - text-decoration: none; -} - -/* - ===================== TooltipApps -*/ -.apptlp { - border: 1px solid #a0a0a0; - background: rgba(0, 0, 0, 0.6); - padding: 10px 15px 15px; - border-radius: 3px; - display: inline-block; - color: #fff; -} - -.apptlp ul { - position: relative; - display: inline-block; - max-width: 400px; -} - -.apptlp ul li { - padding: 6px 0; - border-bottom: 1px solid #fff; -} - -.apptlp ul li span { - color: #e0e0e0; -} - -.apptlp ul li:first-child { - border-bottom: 1px solid #fff; - margin-bottom: 5px; -} - -.apptlp ul li:first-child b { - display: none -} - -.apptlp ul li:first-child span { - font-size: 14px; - font-weight: bold; -} - -.apptlp ul li b { - text-transform: capitalize; -} - -.tb-btn a { - border-top: 1px solid #a0a0a0; - border-bottom: 1px solid #a0a0a0; - border-right: 1px solid #a0a0a0; - - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - - position: absolute; - display: inline-block; - background: rgba(0, 0, 0, 0.8); - height: 100%; - width: 20px; - text-align: center; - right: -20px; - top: -1px; - - display: flex; - flex-direction: column; - justify-content: center; - - color: #fff; - font-weight: bold; -} - - - -/* - ===================== connector -*/ -.conector_h, .conector { - cursor: crosshair; -} - -.mini-ell { - pointer-events: none; -} - -.boundaries { - cursor: pointer; -} - - -/* - ===================== Mini tooltip -*/ -.minitlp { - background: #672064; - border-radius: 4px; - padding: 10px; - color: #fff; - display: inline; - text-transform: capitalize; - font-size: 14px; - pointer-events: none; -} - -.noshow { - visibility: hidden; - opacity: 0; - transition: opacity 0.5s; -} - -.show { - opacity: 1; - visibility: visible; +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) + + Reset +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* + ===================== Layout +*/ +p, a, b, li, span, h1, h2, h3, h4, h5, h6 { + font-size: 12px; + font-family:Arial, Helvetica, sans-serif; fill: #672064; +} + +a { + color: #672064; + text-decoration: none; +} + +/* + ===================== Structure +*/ +body { + background: #eaeaea; + padding: 10px; +} + +#viewer { + position: absolute; + top: 0; + left: 0; + padding: 0; + + max-width: 100%; + max-height: 100%; + height: 100vh; + width: 100vw; + overflow: hidden; +} + +#viewer svg { + max-width: 100%; + max-height: 100%; + height: 100vh; + width: 100vw; +} + +#info { + top: 0; + left: 0; + height: 100vh; + position: fixed; + + background-color: rgba(91, 91, 91, 0.6); + padding: 10px 16px 10px; + + min-width: 120px; + max-width: 120px; +} + +#info h1 { + font-weight: bold; + color: #fff; + font-size: 16px; + padding: 5px 0; +} + +#info ul li { + border-bottom: 1px solid #a0a0a0; + padding: 5px 0; + margin-bottom: 5px; +} + +#info ul li h2 { + color: #fff; + font-size: 14px; + padding: 4px 0; +} + +#info ul li ul { + padding: 2px 0; + display: none; + position: relative; + overflow: hidden; +} + +#info ul li ul li { + color: #dddbdb; + font-size: 12px; + padding: 2px 0; + border: none; +} + +.number { + color: #fff; + font-size: 24px; + text-align: center; + display: inline; +} + + +/* + ===================== TooltipApps +*/ +.apptlp { + border: 1px solid #767676; + background: rgba(0, 0, 0, 0.6); + padding: 10px 15px 15px; + border-radius: 3px; + display: inline-block; + color: #fff; +} + +.apptlp ul { + position: relative; + display: inline-block; + max-width: 280px; +} + +.apptlp ul li { + padding: 6px 0; + border-bottom: 1px solid #fff; +} + +.apptlp ul li span { + color: #e0e0e0; +} + +.apptlp ul li:first-child { + border-bottom: 1px solid #fff; + margin-bottom: 5px; +} + +.apptlp ul li:first-child b { + display: none +} + +.apptlp ul li:first-child span { + font-size: 14px; + font-weight: bold; + color: #fff; +} + +.apptlp ul li b { + text-transform: capitalize; +} + +.tb-btn a { + border-top: 1px solid #a0a0a0; + border-bottom: 1px solid #a0a0a0; + border-right: 1px solid #a0a0a0; + + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + + position: absolute; + display: inline-block; + background: rgba(0, 0, 0, 0.8); + height: 100%; + width: 20px; + text-align: center; + right: -20px; + top: -1px; + + display: flex; + flex-direction: column; + justify-content: center; + + color: #fff; + font-weight: bold; +} + +.glowing { + filter: url(#glow); +} + + +/* + ===================== connector +*/ +.conector_h, .conector { + cursor: crosshair; +} + +.mini-ell { + pointer-events: none; +} + +.boundaries { + cursor: pointer; +} + + +/* + ===================== Mini tooltip +*/ +.minitlp { + background: #672064; + border-radius: 4px; + padding: 10px; + color: #fff; + display: inline; + text-transform: capitalize; + font-size: 14px; + pointer-events: none; +} + +.noshow { + visibility: hidden; + opacity: 0; + transition: opacity 0.5s; +} + +.show { + opacity: 1; + visibility: visible; +} + +.footer { + font-size: 10px; } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index 25467a7..fd35f64 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,194 +1,204 @@ -'use strict'; - -function AnimateLines(app, color="#6b2626") { - this.name = "AnimateLines"; - var actived = false; - - var tooltip = $('#conn-tooltip'); - - function animateMinis(path) { - var length = path.length(); - var c = app.ellipse(5, 4).fill(color).addClass('mini-ell'); - - var vel = 500 + length - - c.animate(vel, '<>').during(function (pos, morph, eased) { - var p = path.pointAt(eased * length) - - c.move(p.x - 2.5, p.y - 2) - }).after(function () { - c.remove(); - }); - } - - function startAnimation(target) { - var path = SVG.adopt(target); - animateMinis(path); - - var timer = setInterval(function() { - if (actived) { - animateMinis(path); - - if (!actived) - clearInterval(timer); - } else { - clearInterval(timer); - } - }, 100); - } - - function transfPath(target, stk, stkw) { - var obj = $(target).parent().find('.conector')[0]; - var path = SVG.adopt(obj); - - path.attr({ - stroke: stk, - 'stroke-width': stkw - }); - } - - function showLabel(target, e) { - var txt = $(target).parent().find('text'); - - tooltip - .offset({ top : e.pageY, left: e.pageX}) - .text(txt.text()) - .addClass('show'); - } - - function hideLabel() { - tooltip - .offset({ top : 0, left: 0}) - .removeClass('show'); - } - - this.setup = function() { - $('svg').find('.conector_h') - .mouseover(this.actived) - .mouseleave(this.desactived); - }; - - this.actived = function(e) { - actived = true - - showLabel(this, e); - transfPath(this, color, 2); - startAnimation(this); - }; - - this.desactived = function() { - actived = false - - hideLabel(); - transfPath(this, '#000', 1); - }; -} - - -function AppTooltip(app) { - this.name = "AppTooltip"; - - var tooltip = $('#app-tooltip'); - - function showTool(target, e) { - var ul = tooltip.find('ul'); - ul.empty(); - - $(target).find('tspan').each(function() { - var vl = $(this).text(); - var ky = $(this).attr('class'); - - var apd = ""+ky+": "+vl+""; - - ul.append("
  • "+apd+"
    • "); - }); - - tooltip - .offset({ top : e.pageY, left: e.pageX}) - .addClass('show'); - } - - function hiddenTool(target) { - tooltip - .removeClass('show'); - } - - function getIdTool(id) { - return '#tool-'+id; - } - - this.setup = function() { - $('.boundaries') - .mouseover(this.actived) - .mouseleave(this.desactived); - }; - - this.actived = function(e) { - var id = $(this).attr('id'); - var elID = getIdTool(id); - var obj = $(elID) - - console.log(obj) - showTool(obj, e); - }; - - this.desactived = function(e) { - if ($(e.toElement).hasClass('apptlp')) { - $(e.toElement).mouseleave(function() { - hiddenTool(); - $(this).off('mouseleave'); - }) - } else { - hiddenTool(); - } - }; -} - -function AppSVG(svg) { - this.app = null; - - this.setup = function() { - this.setupZoom(); - this.setupSVGObject(); - - var AToolTips = new AppTooltip(this.root); - AToolTips.setup(); - - var ALines = new AnimateLines(this.app); - ALines.setup(); - }, - - this.setupSVGObject = function() { - var qapp = document.querySelector("svg .svg-pan-zoom_viewport"); - this.app = SVG.adopt(qapp); - - var qobj = document.querySelector("svg"); - this.root = SVG.adopt(qobj); - }, - - this.setupZoom = function () { - var panZoom = svgPanZoom('#graph', { - zoomEnabled: true, - controlIconsEnabled: true, - fit: true, - center: true, - dblClickZoomEnabled: false, - maxZoom:4 - }); - - $(window).resize(function() { - panZoom.resize(); - panZoom.fit(); - panZoom.center(); - }); - } - -} - - - - -$(document).ready(function() { - var app = new AppSVG(); - app.setup(); +'use strict'; + +function AnimateLines(app, color="#6b2626") { + this.name = "AnimateLines"; + var actived = false; + + var tooltip = $('#conn-tooltip'); + + function animateMinis(path) { + var length = path.length(); + var c = app.ellipse(5, 4).fill(color).addClass('mini-ell'); + + var vel = 500 + length + + c.animate(vel, '<>').during(function (pos, morph, eased) { + var p = path.pointAt(eased * length) + + c.move(p.x - 2.5, p.y - 2) + }).after(function () { + c.remove(); + }); + } + + function startAnimation(target) { + var path = SVG.adopt(target); + animateMinis(path); + + var timer = setInterval(function() { + if (actived) { + animateMinis(path); + + if (!actived) + clearInterval(timer); + } else { + clearInterval(timer); + } + }, 100); + } + + function transfPath(target, stk, stkw) { + var obj = $(target).parent().find('.conector')[0]; + var path = SVG.adopt(obj); + + path.attr({ + stroke: stk, + 'stroke-width': stkw + }); + } + + function showLabel(target, e) { + var txt = $(target).parent().find('text'); + + tooltip + .offset({ top : e.pageY, left: e.pageX}) + .text(txt.text()) + .addClass('show'); + } + + function hideLabel() { + tooltip + .offset({ top : 0, left: 0}) + .removeClass('show'); + } + + this.setup = function() { + $('svg').find('.conector_h') + .mouseover(this.actived) + .mouseleave(this.desactived); + }; + + this.actived = function(e) { + actived = true + + showLabel(this, e); + transfPath(this, color, 2); + startAnimation(this); + }; + + this.desactived = function() { + actived = false + + hideLabel(); + transfPath(this, '#000', 1); + }; +} + + +function AppTooltip(app) { + this.name = "AppTooltip"; + + var tooltip = $('#app-tooltip'); + + function showTool(target, e) { + var ul = tooltip.find('ul'); + ul.empty(); + + $(target).find('tspan').each(function() { + var vl = $(this).text(); + var ky = $(this).attr('class'); + + var apd = ""+ky+": "+vl+""; + + ul.append("
  • "+apd+"
    • "); + }); + + tooltip + .offset({ top : e.pageY, left: e.pageX}) + .addClass('show'); + } + + function hiddenTool(target) { + target.removeClass('glowing'); + + tooltip + .removeClass('show'); + } + + function getIdTool(id) { + return '#tool-'+id; + } + + this.setup = function() { + $('.boundaries') + .mouseover(this.actived) + .mouseleave(this.desactived); + }; + + this.actived = function(e) { + var id = $(this).attr('id'); + var elID = getIdTool(id); + var obj = $(elID) + + showTool(obj, e); + $(this).addClass('glowing'); + }; + + this.desactived = function(e) { + var that = $(this); + + if ($(e.toElement).hasClass('apptlp')) { + $(e.toElement).mouseleave(function() { + hiddenTool(that); + $(this).off('mouseleave'); + }); + } else { + hiddenTool(that); + } + + + }; +} + +function AppSVG(svg) { + this.app = null; + + this.setup = function() { + this.setupZoom(); + this.setupSVGObject(); + + var AToolTips = new AppTooltip(this.root); + AToolTips.setup(); + + var ALines = new AnimateLines(this.app); + ALines.setup(); + }, + + this.setupSVGObject = function() { + var qapp = document.querySelector("svg .svg-pan-zoom_viewport"); + this.app = SVG.adopt(qapp); + + var qobj = document.querySelector("svg"); + this.root = SVG.adopt(qobj); + }, + + this.setupZoom = function () { + var panZoom = svgPanZoom('#graph', { + zoomEnabled: true, + controlIconsEnabled: true, + fit: true, + center: true, + dblClickZoomEnabled: false, + maxZoom:4 + }); + + $(window).resize(function() { + panZoom.resize(); + panZoom.fit(); + panZoom.center(); + }); + } + +} + + + + +$(document).ready(function() { + var app = new AppSVG(); + app.setup(); + + $('.menu li').hover(function(){ + $(this).find('ul').slideToggle('fast'); + }); }); \ No newline at end of file