diff --git a/index.htm b/index.htm index fa06679c..7845490a 100644 --- a/index.htm +++ b/index.htm @@ -15,9 +15,12 @@ -
+
+
+ +
+
-

test

diff --git a/js/app/contextmenu.js b/js/app/contextmenu.js index 62ab6e01..a5ae7ab7 100644 --- a/js/app/contextmenu.js +++ b/js/app/contextmenu.js @@ -10,6 +10,7 @@ define(["jquery"], function($) { $(this).on("pf:openContextMenu", function (e, originalEvent, component) { + //open menu $(settings.menuSelector) .show() diff --git a/js/app/main.js b/js/app/main.js index 226db7de..d4747a96 100644 --- a/js/app/main.js +++ b/js/app/main.js @@ -7,6 +7,113 @@ define(["jquery", "app/ccp", "app/map"], function($, CCP, Map) { CCP.requestTrust(); - Map.render(); + // Map init options + var mapOptions = { + map: {}, + config: { + name: 'WH Test', + id: 'pf-map-1', + scope: 'wormhole' + }, + data: { + systems: [ + { + id: 2, + name: 'J150020', + effect: 'magnetar', + security: 'C6', + status: 'friendly', + position: { + x: 0, + y: 0 + } + },{ + id: 3, + name: 'J115844', + effect: 'wolfRyet', + security: 'C6', + status: 'empty', + position: { + x: 60, + y: 60 + } + },{ + id: 4, + name: 'J155207', + effect: 'wolfRyet', + security: 'C6', + status: '', + position: { + x: 200, + y: 60 + } + },{ + id: 5, + name: 'J145510', + effect: 'pulsar', + security: 'C3', + status: 'hostile', + position: { + x: 110, + y: 110 + } + } + ], + connections: [ + { + source: 3, + target: 4, + type: 'wh' + } + ] + } + + + } + + Map.render(mapOptions); + + var mapOptions = { + map: {}, + config: { + name: 'K-Space Test', + id: 'pf-map-2', + scope: 'wormhole' + }, + data: { + systems: [ + { + id: 50, + name: 'J150020', + effect: 'magnetar', + security: 'C6', + status: 'friendly', + position: { + x: 5, + y: 5 + } + },{ + id: 51, + name: 'J115844', + effect: 'wolfRyet', + security: 'C6', + status: 'empty', + position: { + x: 60, + y: 60 + } + } + ], + connections: [{ + source: 50, + target: 51, + type: 'wormhole' + }] + } + } + + // Map.render(mapOptions); + + }); }); \ No newline at end of file diff --git a/js/app/map.js b/js/app/map.js index 904b207b..eec8dbeb 100644 --- a/js/app/map.js +++ b/js/app/map.js @@ -3,15 +3,33 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende "use strict"; var config = { - containerMapClass: 'pf-container-map', - mapId: 'pf-map', + // TODO: remove temp ID counter + tempId: 100, + zIndexCounter: 110, + newSystemOffset: { + x: 150, + y: 0 + }, + + containerMapWrapperId: 'pf-map-wrapper', // wrapper for maps + mapClass: 'pf-map', // class for a map + systemIdPrefix: 'pf-system-', // id prefix for a system systemClass: 'pf-system', systemActiveClass: 'pf-system-active', systemHeadClass: 'pf-system-head', systemBody: 'pf-system-body', - contextMenuId: 'pf-map-contextmenu', - confirmDialogId: 'pf-delete-dialog', + dynamicElementWrapperId: 'pf-dialog-wrapper', // wrapper div for dynamic content (dialoges, context-menus,...) + // context menus + connectionContextMenuId: 'pf-map-connection-contextmenu', + systemContextMenuId: 'pf-map-system-contextmenu', + + // dialogs + confirmDialogId: 'pf-delete-dialog', + systemDialogId: 'pf-system-dialog', + errorConnectDialogId: 'pf-error-dialog-loopback', + + // system effect classes systemEffect: 'pf-system-effect', systemEffectMagnetar: 'pf-system-effect-magnetar', systemEffectRedGiant: 'pf-system-effect-redgiant', @@ -20,21 +38,127 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende systemEffectCataclysmic: 'pf-system-effect-cataclysmic', systemEffectBlackHole: 'pf-system-effect-blackhole', + // system security classes systemSec: 'pf-system-sec', - systemSecHigh: 'pf-system-sec-high', - systemSecLow: 'pf-system-sec-low', - systemSecNull: 'pf-system-sec-null', + systemSecHigh: 'pf-system-sec-highSec', + systemSecLow: 'pf-system-sec-lowSec', + systemSecNull: 'pf-system-sec-nullSec', systemSecWHHeigh: 'pf-system-sec-high', systemSecWHMid: 'pf-system-sec-mid', systemSecWHLow: 'pf-system-sec-low', - systemStatusFriendly: 'pf-system-status-friendly', - systemStatusOccupied: 'pf-system-status-occupied', - systemStatusHostile: 'pf-system-status-hostile', - systemStatusEmpty: 'pf-system-status-empty', - systemStatusUnscanned: 'pf-system-status-unscanned' + // system status + systemStatus: { + friendly: { + class: 'pf-system-status-friendly', + label: 'friendly' + }, + occupied: { + class: 'pf-system-status-occupied', + label: 'occupied' + }, + hostile: { + class: 'pf-system-status-hostile', + label: 'hostile' + }, + empty: { + class: 'pf-system-status-empty', + label: 'empty' + }, + unscanned: { + class: 'pf-system-status-unscanned', + label: 'unscanned' + } + } }; + // jsPlumb config + var globalMapConfig = { + source: { + filter: '.' + config.systemHeadClass, + anchor: "Continuous", + connector: [ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-wh' } ], + maxConnections: 5, + allowLoopback:false, + onMaxConnections:function(info, e) { + alert("Maximum connections (" + info.maxConnections + ") reached"); + } + }, + target: { + filter: '.' + config.systemHeadClass, + anchor: "Continuous", + dropOptions:{ hoverClass: config.systemActiveClass }, + allowLoopback:false, + beforeDrop: function(info){ + // check function for new connection + + // prevent loop back + if(info.sourceId === info.targetId){ + return false; + } + + // prevent multiple connections between same systems + var connections = checkForConnection(this.instance, info.source, info.target); + if(connections.length > 0){ + + // confirm dialog + var moduleConfig = { + name: 'modules/dialog', + position: $('#' + config.dynamicElementWrapperId), + link: 'after', + functions: { + after: function(){ + $( "#" + config.errorConnectDialogId).dialog({ + modal: true, + resizable: false, + buttons: { + 'OK': function(){ + $(this).dialog('close'); + } + } + }); + } + } + }; + + var modulData = { + id: config.errorConnectDialogId, + titel: 'error: Loopback', + content: 'Connection already exists.' + }; + + Render.showModule(moduleConfig, modulData); + + + return false; + } + + return true; + } + }, + connectionTypes: { + wh: { + cssClass: 'pf-map-connection-wh' + }, + wh_eol: { + cssClass: 'pf-map-connection-wh-eol' + }, + wh_reduced: { + cssClass: 'pf-map-connection-wh-reduced' + }, + wh_critical: { + cssClass: 'pf-map-connection-wh-critical' + }, + frig: { + cssClass: 'pf-map-connection-frig' + } + } + } + + + + + var getEffectClassForSystem = function(effect){ var effectClass = ''; @@ -98,40 +222,30 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende var statusClass = ''; - switch(status){ - case 'friendly': - statusClass = config.systemStatusFriendly; - break; - case 'occupied': - statusClass = config.systemStatusOccupied; - break; - case 'hostile': - statusClass = config.systemStatusHostile; - break; - case 'empty': - statusClass = config.systemStatusEmpty; - break; - case 'unscanned': - statusClass = config.systemStatusUnscanned; - break; + if(config.systemStatus[status]){ + statusClass = config.systemStatus[status].class; } return statusClass; }; - + /** + * get a new system by data object + * @param data + * @returns {*|HTMLElement} + */ var getSystem = function(data){ - var wh; + var system; // get system info classes var effectClass = getEffectClassForSystem(data.effect); var secClass = getSecurityClassForSystem(data.security); var statusClass = getStatusClassForSystem(data.status); - wh = $('
', { + system = $('
', { // system - id: 'pf-system-' + data.id, + id: config.systemIdPrefix + data.id, class: [config.systemClass, statusClass].join(' ') }).append( // system head @@ -157,82 +271,272 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende }) ).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' }); - return wh; + system.attr('data-id', data.id); + + return $(system); }; - var drawMap = function(){ + /** + * draw a new map with all systems and connections + * @param mapConfig + */ + var drawMap = function(mapConfig){ - var whData = [{ - id: 2, - name: 'J150020', - effect: 'magnetar', - security: 'C6', - status: 'friendly', - position: { - x: 0, - y: 0 - } - },{ - id: 3, - name: 'J115844', - effect: 'wolfRyet', - security: 'C6', - status: 'empty', - position: { - x: 60, - y: 60 - } - },{ - id: 4, - name: 'J155207', - effect: 'wolfRyet', - security: 'C6', - status: '', - position: { - x: 200, - y: 60 - } - },{ - id: 5, - name: 'J145510', - effect: 'pulsar', - security: 'C3', - status: 'hostile', - position: { - x: 110, - y: 110 - } - }]; + // create map body + var mapWrapper = $('
', { + class: 'pf-map-wrapper' + }); - // map - var map = $('#' + config.mapId); + var mapContainer = $('
', { + id: mapConfig.config.id, + class: config.mapClass + }); - $.each(whData, function(i, data){ - var wh = getSystem(data); + mapWrapper.append(mapContainer); - map.append(wh); + $('#' + config.containerMapWrapperId).append(mapWrapper); + + $.each(mapConfig.data.systems, function(i, data){ + // draw a system to a map + drawSystem(mapConfig.map, data); }); }; /** - * load contextmenu template + * mark a system as source + * @param map + * @param systems */ - var initContextMenu = function(){ + var makeSource = function(map, systems){ + + // get scope from map defaults + var sourceConfig = globalMapConfig.source; + sourceConfig.scope = map.Defaults.Scope; + + map.makeSource(systems, sourceConfig); + }; + + /** + * mark a system as target + * @param map + * @param systems + */ + var makeTarget = function(map, systems){ + + // get scope from map defaults + var targetConfig = globalMapConfig.target; + targetConfig.scope = map.Defaults.Scope; + + map.makeTarget(systems, targetConfig); + + }; + + /** + * draw a system with its data to a map + * @param map object + * @param systemData + * @param {String[]} optional Systems for connection + */ + var drawSystem = function(map, systemData, connectedSystems){ + + var mapContainer = map.Defaults.Container; + + // TODO request missing system data + if(!systemData.hasOwnProperty('id')){ + systemData.id = config.tempId++; + } + if(!systemData.hasOwnProperty('effect')){ + systemData.effect = ''; + } + if(!systemData.hasOwnProperty('security')){ + systemData.security = 'H'; + } + + // get System Element by data + var newSystem = getSystem(systemData); + + var mapElement = $('#' + mapContainer); + + mapElement.append(newSystem); + + // make new System dragable + makeDraggable(map, newSystem); + + // make target + makeTarget(map, newSystem); + + // make source + makeSource(map, newSystem); + + // Context menu on for Systems + setSystemObserver(map, newSystem); + + // connect new system (if connection data is given) + if(connectedSystems){ + + $.each(connectedSystems, function(i, connectSystem){ + + var connectionData = { + source: $(connectSystem).attr('data-id'), + target: $(newSystem).attr('data-id'), + type: 'wh' + }; + drawConnection(map, connectionData); + }) + }; + + }; + + /** + * make one or multiple systems draggable + * @param map + * @param String[] systems + */ + var makeDraggable = function(map, systems){ + + map.draggable(systems, { + containment: 'parent', + zIndex: 2000, + start: function(){ + // drag start + }, + stop: function(e, ui){ + // drag stop + + // update z-index for dragged system + connections + updateZIndex(map, e.target); + }, + drag: function(){ + // while drag + } + }); + }; + + /** + * update z-index for a system (dragged sytems should be always on top) + * @param map + * @param system + */ + var updateZIndex = function(map, system){ + /* do not update connections for now + // get all connections + var connections = getConnections(map, [system]); + + // increase global z-Index counter + var newZIndexConnections = config.zIndexCounter++; + + $.each(connections, function(i, connection){ + // $(connection.canvas).css('z-index', newZIndexConnections); + }) + */ + var newZIndexSystem = config.zIndexCounter++; + $(system).css('z-index', newZIndexSystem); + }; + + /** + * get all connections of multiple systems + * @param map + * @param systems Array of Systems objectts + * @returns {Array} of all connections + */ + var getConnections = function(map, systems){ + + var connections = []; + + $.each(systems, function(i, system){ + // get connections where system is source + connections = connections.concat( map.getConnections({source: system}) ); + // getconnections where system is target + connections = connections.concat( map.getConnections({target: system}) ); + }); + + return connections; + } + + /** + * get all direct connections between two given systems + * @param map + * @param systemA + * @param systemB + * @returns {Array} + */ + var checkForConnection = function(map, systemA, systemB){ + + var connections = []; + + connections = connections.concat( map.getConnections({source: systemA, target: systemB}) ); + // getconnections where system is target + connections = connections.concat( map.getConnections({source: systemB, target: systemA}) ); + + return connections; + }; + + /** + * connect two systems + * @param mapConfig + * @param connectionData + * @returns new connection + */ + var drawConnection = function(map, connectionData){ + + var connection = map.connect({ + source: config.systemIdPrefix + connectionData.source, + target: config.systemIdPrefix + connectionData.target, + type: connectionData.type + }); + + // set Observer for new Connection + setConnectionObserver(map, connection); + + return connection; + } + + /** + * load contextmenu template for connections + */ + var initConnectionContextMenu = function(){ var moduleConfig = { name: 'modules/contextmenu', - position: $('body'), - functions: { - after: function(){ - - } - } + position: $('#' + config.dynamicElementWrapperId) }; var moduleData = { - id: config.contextMenuId, + id: config.connectionContextMenuId, items: [ - {icon: 'fa-eraser', action: 'delete', text: 'detach'}, + {icon: 'fa-eraser', action: 'delete', text: 'delete'}, + {icon: 'fa-info-circle', action: 'info', text: 'info'}, + {divider: true}, + // {icon: 'fa-bomb', action: 'eol', text: 'toggle EOL'}, + {text: 'change status', subitems: [ + {subIcon: 'fa-clock-o', subAction: 'eol', subText: 'toggle EOL'}, + {subDivider: true}, + {subIcon: 'fa-circle', subAction: 'status_fresh', subText: 'stage 0 (fresh)'}, + {subIcon: 'fa-adjust', subAction: 'status_reduced', subText: 'stage 1 (reduced)'}, + {subIcon: 'fa-circle-o', subAction: 'status_critical', subText: 'stage 2 (critical)'} + + ]} + ] + }; + + Render.showModule(moduleConfig, moduleData); + + }; + + /** + * load contextmenu template for systems + */ + var initSystemContextMenu = function(){ + + var moduleConfig = { + name: 'modules/contextmenu', + position: $('#' + config.dynamicElementWrapperId) + }; + + var moduleData = { + id: config.systemContextMenuId, + items: [ + {icon: 'fa-plus', action: 'add_system', text: 'add system'}, {icon: 'fa-info-circle', action: 'info', text: 'info'} ] }; @@ -241,28 +545,223 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende }; - var render = function(){ + /** + * set up contextmenu for all Systems within a given map + * @param endpoints + */ + var setSystemObserver = function(map, systems){ - // create map body - var mapContainer = $('
', { - id: config.mapId + var mapContainer = map.Defaults.Container; + + // trigger context menu + $('#' + mapContainer).find(systems).on('contextmenu', function(e){ + $(e.target).trigger('pf:openContextMenu', [e, this]); + e.preventDefault(); + return false; }); - $('.pf-container-map').append(mapContainer); + // init contextmenu + $(systems).contextMenu({ + menuSelector: "#" + config.systemContextMenuId, + menuSelected: function (params) { - // draw map - drawMap(); + // click action + var action = params.selectedMenu.attr('data-action'); + + // current system + var currentSystem = $(params.component); + + switch(action){ + case 'add_system': + // add a new system + + // confirm dialog + var moduleConfig = { + name: 'modules/system_dialog', + position: $('#' + config.dynamicElementWrapperId), + link: 'after', + functions: { + after: function(){ + $( "#" + config.systemDialogId).dialog({ + modal: true, + resizable: false, + buttons: { + 'Cancel': function(){ + $(this).dialog('close'); + }, + 'Add System': function(){ + + // get form Values + var form = $('#' + config.systemDialogId).find('form'); + + var newSystemData = {}; + + $.each(form.serializeArray(), function(i, field) { + newSystemData[field.name] = field.value; + }); + + // add new position + var currentX = currentSystem.css('left'); + var currentY = currentSystem.css('top'); + + newSystemData.position = { + x: parseInt( currentX.substring(0, currentX.length - 2) ) + config.newSystemOffset.x, + y: parseInt( currentY.substring(0, currentY.length - 2) ) + config.newSystemOffset.y + } + + + // draw new system to map + drawSystem(map, newSystemData, currentSystem); + + $(this).dialog('close'); + } + } + }); + } + } + }; + + // format system status for form select + var systemStatus = []; + $.each(config.systemStatus, function(status, statusData){ + statusData.status = status; + systemStatus.push(statusData); + }) + + var modulData = { + id: config.systemDialogId, + titel: 'Add new system', + status: systemStatus, + content: 'system dialog :)' + }; + + Render.showModule(moduleConfig, modulData); + break; + case 'info': console.log('info') + break; + } + + } + }); + + + }; + + /** + * set Observer for a given connection + * @param map + * @param connection + */ + var setConnectionObserver = function(map, connection){ + + + connection.bind('contextmenu', function(component, e) { + // trigger menu "open + $(e.target).trigger('pf:openContextMenu', [e, component]); + e.preventDefault(); + return false; + }); + + /** + * init context menu for all connections + * must be triggered manually on demand + */ + + $('path').contextMenu({ + menuSelector: "#" + config.connectionContextMenuId, + menuSelected: function (params){ + + var action = params.selectedMenu.attr('data-action'); + + switch(action){ + case 'delete': + // delete a single connection + + // confirm dialog + var moduleConfig = { + name: 'modules/dialog', + position: $('#' + config.dynamicElementWrapperId), + link: 'after', + functions: { + after: function(){ + $( "#" + config.confirmDialogId).dialog({ + modal: true, + resizable: false, + buttons: { + 'Cancel': function(){ + $(this).dialog('close'); + }, + 'Yes': function(){ + map.detach(params.component); + $(this).dialog('close'); + } + } + }); + } + } + }; + + var modulData = { + id: config.confirmDialogId, + titel: 'Delete Connection', + content: 'Is this connection really gone?' + }; + + Render.showModule(moduleConfig, modulData); + + + break; + case 'eol': + // toggle eol-status of a connection + connection.toggleType('wh_eol'); + + // for some reason a new observer is needed ?! + setConnectionObserver(map, connection); + break; + case 'status_fresh': + connection.removeType('wh_reduced'); + connection.removeType('wh_critical'); + setConnectionObserver(map, connection); + break; + case 'status_reduced': + connection.removeType('wh_critical'); + connection.addType('wh_reduced'); + setConnectionObserver(map, connection); + break; + case 'status_critical': + connection.removeType('wh_reduced'); + connection.addType('wh_critical'); + setConnectionObserver(map, connection); + break; + case 'info': + console.log('info'); + break; + } + + // wh type: + console.log('is eol: ', connection.hasType('wh_eol')); + console.log('is reduced: ', connection.hasType('wh_reduced')); + console.log('is crit: ', connection.hasType('wh_critical')); + + } + }); + + + } + + var render = function(mapConfig){ + + // add context menues to dom + initConnectionContextMenu(); + initSystemContextMenu(); - // add context menu to dom - initContextMenu(); // init jsPlumb jsPlumb.ready(function() { - var scope = 'wormhole'; - - var map = jsPlumb.getInstance({ - Container: config.mapId, + // get new map instance add to mapConfig + mapConfig.map = jsPlumb.getInstance({ + Container: mapConfig.config.id, PaintStyle:{ lineWidth: 5, // width of a Connector's line. An integer. //fillStyle: "blue", // color for an Endpoint, eg. "blue", @@ -272,13 +771,18 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende //joinstyle:"round", //dashstyle:"2 2", }, - Connector:[ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-default' } ], + Connector:[ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-wh' } ], Anchor: "Continuous", Endpoint: 'Blank', - DragOptions : { cursor: "pointer", zIndex: 2000 } + Scope: mapConfig.config.scope }); - var systemElements = jsPlumb.getSelector('.' + config.systemClass); + // draw initial map + drawMap(mapConfig); + + //var systemElements = mapConfig.map.getSelector('.' + config.systemClass); + + var systemElements = $('#' + mapConfig.config.id).find('.' + config.systemClass); var dropOptions = { tolerance:"touch", @@ -286,139 +790,55 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende activeClass:"dragActive" }; - var endpoint = { - endpoint: 'Blank', - // paintStyle:{ fillStyle: "blue", opacity: 0.5 }, + // endpoint (system) config + var endpointConfig = { + endpoint: 'Blank', + //paintStyle:{ fillStyle: "blue", opacity: 0.5 }, //Connector:[ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-default' } ], - isSource:true, - scope: scope, - isTarget:true, + isSource: true, + scope: mapConfig.config.scope, + isTarget: true, dropOptions : dropOptions }; - map.doWhileSuspended(function() { + // mapConfig.map.doWhileSuspended(function() { - map.registerConnectionType('normal', { - paintStyle:{ lineWidth:5, outlineWidth:2 }, - cssClass: 'pf-map-connection-default' + // register all available connection types ============================= + mapConfig.map.registerConnectionTypes(globalMapConfig.connectionTypes); + + + // ======================================================== + + + var endpoints = mapConfig.map.addEndpoint(systemElements, { + }, endpointConfig); + + + // set up default connections + $.each(mapConfig.data.connections, function(i, connectionData){ + drawConnection(mapConfig.map, connectionData); }); - map.registerConnectionType('frig', { - paintStyle:{ lineWidth:5, outlineWidth:2 }, - cssClass: 'pf-map-connection-frig' - }); + // mapConfig.map.fire("pf-map-loaded", mapConfig.map); - map.draggable(systemElements, { - containment:"parent" - }); + // }); - var isFilterSupported = map.isDragFilterSupported(); + // global map observer for manual connections (drag & drop) + mapConfig.map.bind('connection', function(info, e) { - if (isFilterSupported) { - map.makeSource(systemElements, { - filter: "." + config.systemHeadClass, - anchor: "Continuous", - connector: [ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-default' } ], - scope: scope, - //parent: 'parent', - maxConnections: 5, - onMaxConnections:function(info, e) { - alert("Maximum connections (" + info.maxConnections + ") reached"); - } - }); - } + console.log('test') - map.makeTarget(systemElements, { - filter: "." + config.systemHeadClass, - anchor: "Continuous", - dropOptions:{ hoverClass: config.systemActiveClass }, - allowLoopback: false, - scope: scope - }); - - map.addEndpoint(systemElements, { - }, endpoint); - - - map.connect({ - source: $('#pf-system-3'), - target: $('#pf-system-4'), - //anchor: 'Continuous' - type: 'normal', - endpoint: 'Blank' - }); - - // set observer ======================================================== - - // Context Menu on connections - map.bind("contextmenu", function(component, e) { - // trigger menu "open" - $(e.target).trigger('pf:openContextMenu', [e, component]); - e.preventDefault(); - return false; - }); - - jsPlumb.fire("pf-map-loaded", map); + setConnectionObserver(mapConfig.map, info.connection); }); - /** - * init context menu for all connections - * must be triggered manually on demand - */ - $('path').contextMenu({ - menuSelector: "#" + config.contextMenuId, - menuSelected: function (params) { - - var action = params.selectedMenu.attr('data-action'); - - switch(action){ - case 'delete': - // delete a single connection - - // confirm dialog - var moduleConfig = { - name: 'modules/dialog', - position: $('body'), - link: 'after', - functions: { - after: function(){ - $( "#" + config.confirmDialogId).dialog({ - modal: true, - buttons: { - 'Cancel': function(){ - $(this).dialog('close'); - }, - 'Yes': function(){ - map.detach(params.component); - $(this).dialog('close'); - } - } - }); - } - } - }; - - var modulData = { - id: config.confirmDialogId, - titel: 'Delete Connection', - content: 123 - }; - - Render.showModule(moduleConfig, modulData); - - - break; - case 'info': console.log('info') - break; - } + // mapConfig.map.bind("beforeDrop", function(info) { + // manually connect + // }); - } - }); - }); diff --git a/sass/_colors.scss b/sass/_colors.scss index 1b316571..2bbcef51 100644 --- a/sass/_colors.scss +++ b/sass/_colors.scss @@ -24,15 +24,20 @@ $green: #5cb85c; // red $red: #d9534f; +$red-darker: #a52521; // yellow $yellow-lighter: #ffffbb; // orange -$orange: #f0ad4e; +$orange-light: #f0ad4e; +$orange: #e28a0d; // pink -$pink: #ac5287; + +$pink-light: #e88ce7; +$pink: #e06fdf; +$pink-dark: #d747d6; // WH effects $wh-color-magnetar: $pink; diff --git a/sass/_variables.scss b/sass/_variables.scss index e7096690..d3fe7755 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -36,7 +36,7 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; $font-family-base: $font-family-sans-serif; -$font-size-base: 13px; +$font-size-base: 12px; $font-size-large: ceil(($font-size-base * 1.24)); // ~16px $font-size-small: ceil(($font-size-base * 0.85)); // ~11px @@ -198,7 +198,7 @@ $input-group-addon-border-color: $input-border; $dropdown-bg: $gray-lighter; $dropdown-border: rgba(0,0,0,.15); $dropdown-fallback-border: #ccc; -$dropdown-divider-bg: #e5e5e5; +$dropdown-divider-bg: $gray-light; $dropdown-link-color: $gray-dark; $dropdown-link-hover-color: $gray-lighter; @@ -761,7 +761,6 @@ $greenBright: #40ac2b; //$red: #a90329; $yellow: #b09b5b; $orangeDark: #a57225; -$pink: #ac5287; $pinkDark: #a8829f; $purple: #6e587a; $darken: #404040; diff --git a/sass/bootstrap/_mixins.scss b/sass/bootstrap/_mixins.scss index 69d4e87f..81d34a9c 100644 --- a/sass/bootstrap/_mixins.scss +++ b/sass/bootstrap/_mixins.scss @@ -394,7 +394,7 @@ // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($color: #e5e5e5) { height: 1px; - margin: (($line-height-computed / 2) - 1) 0; + margin: (($line-height-computed / 3) - 1) 0; overflow: hidden; background-color: $color; } diff --git a/sass/layout/_map.scss b/sass/layout/_map.scss index 0418b832..de4afb1b 100644 --- a/sass/layout/_map.scss +++ b/sass/layout/_map.scss @@ -1,4 +1,4 @@ -#pf-map{ +.pf-map{ background-color: $gray-darker; width: 1200px; height: 500px; @@ -12,6 +12,7 @@ color: $gray-lighter; } + .pf-system{ position: absolute; min-width: 50px; @@ -28,23 +29,25 @@ .pf-system-head{ padding: 0px 3px 2px 3px; + cursor: pointer; } // System security ============================================= .pf-system-sec{ margin-right: 5px; + cursor: help; } - .pf-system-sec-high{ + .pf-system-sec-highSec{ color: $green; } - .pf-system-sec-low{ + .pf-system-sec-lowSec{ color: $orange; } - .pf-system-sec-null{ + .pf-system-sec-nullSec{ color: $red; } @@ -64,6 +67,7 @@ .pf-system-effect{ margin-left: 5px; + cursor: default; } .pf-system-effect-magnetar{ @@ -94,6 +98,7 @@ .pf-system-body{ min-height: 10px; + cursor: move; border: { top: { @@ -137,22 +142,55 @@ // Connections ================================================== // default hover effect for all connections - svg._jsPlumb_connector:hover{ + svg._jsPlumb_connector{ + cursor: pointer; + stroke-linecap: round; // line endings + + path:not(first-child){ + stroke: $gray; // inner line + } + path:first-child{ - stroke: $gray-lighter; + stroke: $gray-light; // outer line + } + + &:hover{ + path:first-child{ + stroke: $gray-lightest; // hover style + } } } - svg.pf-map-connection-default { - path:not(first-child){ - stroke: $gray; - } + svg.pf-map-connection-wh { + // special wh-connection style ( + } + + svg.pf-map-connection-wh-eol { path:first-child{ - stroke: $gray-light; + stroke: $pink-dark; } + &:hover{ + path:first-child{ + stroke: $pink; + } + } + } + + svg.pf-map-connection-wh-reduced { + + path:not(first-child){ + stroke: $orange; + } + } + + svg.pf-map-connection-wh-critical { + + path:not(first-child){ + stroke: $red-darker; + } } svg.pf-map-connection-frig { @@ -177,8 +215,15 @@ } +// system dialog ================================================= +#pf-system-dialog{ + label{ + min-width: 60px; + } +} + // context menu ================================================== -#pf-map-contextmenu{ +.dropdown-menu{ i{ width: 20px } diff --git a/sass/library/jqueryui/_jquery-ui-1.10.3.custom.scss b/sass/library/jqueryui/_jquery-ui-1.10.3.custom.scss index 541fb80e..febf753e 100644 --- a/sass/library/jqueryui/_jquery-ui-1.10.3.custom.scss +++ b/sass/library/jqueryui/_jquery-ui-1.10.3.custom.scss @@ -1564,7 +1564,7 @@ button.ui-button::-moz-focus-inner { border: 0 0 0 1px solid; border-color: white; padding: 5px 15px; - font-size: 18px; + font-size: 16px; text-decoration: none; -webkit-border-bottom-right-radius: 0; /* Safari 4 */ -moz-border-radius-bottomright: 0; /* Firefox 3.6 */ @@ -1642,9 +1642,11 @@ button.ui-button::-moz-focus-inner { -webkit-border-radius: 0 0 6px 6px; /* Safari 4 */ -moz-border-radius: 0 0 6px 6px; /* Firefox 3.6 */ border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; /* Safari 4 */ - -moz-box-shadow: inset 0 1px 0 #ffffff; /* Firefox 3.6 */ + /* + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; + */ margin-bottom: 0; } diff --git a/sass/smartadmin/_component-jqueryui.scss b/sass/smartadmin/_component-jqueryui.scss index f336e47d..3a914151 100644 --- a/sass/smartadmin/_component-jqueryui.scss +++ b/sass/smartadmin/_component-jqueryui.scss @@ -3,6 +3,14 @@ */ /* Overlay */ +.ui-widget{ + font-family: 'Oxygen Bold'; +} + +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { + font-family: 'Oxygen Bold'; +} + .ui-widget-overlay { background-image: none; background: #aaa; @@ -384,6 +392,7 @@ border: 1px solid $gray-light; border: 1px solid rgba(red($black), green($black), blue($black), 0.2); color: $gray-light; + background-color: $gray-lighter; } .widget-header >:first-child { @@ -416,6 +425,7 @@ font-style: normal; font-weight: normal; line-height: 1; + color: $gray-lighter; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; @@ -428,9 +438,10 @@ .ui-dialog .ui-dialog-buttonpane { margin-top: 13px; - padding: 19px 15px 20px; + padding: 10px 10px 10px; text-align: right; - border-top: 1px solid $gray-lighter; + border-top: 1px solid $gray-daskest; + background-color: $gray-light; } .ui-autocomplete { diff --git a/sass/smartadmin/_main.scss b/sass/smartadmin/_main.scss index 3faaddae..428f873c 100644 --- a/sass/smartadmin/_main.scss +++ b/sass/smartadmin/_main.scss @@ -2110,13 +2110,13 @@ a:link, .btn, button { border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; - border-left-color: $gray-mid-light; + border-left-color: $gray-light; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { - border-left-color: $white; + border-left-color: $gray-light; } .dropdown-submenu.pull-left { diff --git a/templates/modules/contextmenu.html b/templates/modules/contextmenu.html index 652bc1d4..1d5a5703 100644 --- a/templates/modules/contextmenu.html +++ b/templates/modules/contextmenu.html @@ -1,5 +1,26 @@ \ No newline at end of file diff --git a/templates/modules/system_dialog.html b/templates/modules/system_dialog.html new file mode 100644 index 00000000..34d0c28d --- /dev/null +++ b/templates/modules/system_dialog.html @@ -0,0 +1,21 @@ +
+
+
+
+ + +
+
+ + +
+ + + +
+
+
\ No newline at end of file