new ma functions
This commit is contained in:
exodus4d
@@ -15,9 +15,12 @@
|
||||
</head>
|
||||
<body class="pf-body">
|
||||
|
||||
<div class="pf-container-map">
|
||||
<div id="pf-map-wrapper">
|
||||
</div>
|
||||
|
||||
<div id="pf-dialog-wrapper">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<p>test</p>
|
||||
</html>
|
||||
|
||||
@@ -10,6 +10,7 @@ define(["jquery"], function($) {
|
||||
$(this).on("pf:openContextMenu", function (e, originalEvent, component) {
|
||||
|
||||
|
||||
|
||||
//open menu
|
||||
$(settings.menuSelector)
|
||||
.show()
|
||||
|
||||
109
js/app/main.js
109
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);
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
862
js/app/map.js
862
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 = $('<div>', {
|
||||
system = $('<div>', {
|
||||
// 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 = $('<div>', {
|
||||
class: 'pf-map-wrapper'
|
||||
});
|
||||
|
||||
// map
|
||||
var map = $('#' + config.mapId);
|
||||
var mapContainer = $('<div>', {
|
||||
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 = $('<div>', {
|
||||
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
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,5 +1,26 @@
|
||||
<ul class="dropdown-menu" id="{{id}}" role="menu" style="display: none">
|
||||
{{#items}}
|
||||
<li><a href="#" tabindex="-1" data-action="{{action}}"><i class="fa {{icon}}"></i>{{text}}</a></li>
|
||||
{{#text}}
|
||||
<li {{#subitems}}class="dropdown-submenu"{{/subitems}}>
|
||||
<a href="#" tabindex="-1" data-action="{{action}}"><i class="fa {{#icon}}{{icon}}{{/icon}}"></i>{{text}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{{#subitems}}
|
||||
{{#subText}}
|
||||
<li>
|
||||
<a href="#" tabindex="-1" data-action="{{subAction}}"><i class="fa {{#subIcon}}{{subIcon}}{{/subIcon}}"></i>{{subText}}</a>
|
||||
</li>
|
||||
{{/subText}}
|
||||
|
||||
{{#subDivider}}
|
||||
<li class="divider"></li>
|
||||
{{/subDivider}}
|
||||
{{/subitems}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/text}}
|
||||
|
||||
{{#divider}}
|
||||
<li class="divider"></li>
|
||||
{{/divider}}
|
||||
{{/items}}
|
||||
</ul>
|
||||
21
templates/modules/system_dialog.html
Normal file
21
templates/modules/system_dialog.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<div id="{{id}}" title="{{titel}}">
|
||||
<form>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="system">System</label>
|
||||
<input type="text" name="name" id="system" value="{{system}}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="text ui-widget-content ui-corner-all">
|
||||
{{#status}}
|
||||
<option value="{{status}}">{{label}}</option>
|
||||
{{/status}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Allow form submission with keyboard without duplicating the dialog button -->
|
||||
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user