') );
- tbody.append(rows[i + 2]);
-
- // add label
- rows[i + 2].append( $('| ').text( data.effect ));
- }
-
-
- rows[i + 2].append( $(' | ', {
- class: 'text-right'
- }).text( data.value ));
- }
+ rows[i + 2].append( $(' | ', {
+ class: 'text-right'
+ }).text( data.value ));
}
-
- let colElement = $('', {
- class: ['col-md-6'].join(' ')
- }).append(
- $(' ', {
- class: [Util.config.dynamicAreaClass].join(' ')
- }).append(
- table.append(thead).append(tbody)
- )
- );
-
- rowElement.append(colElement);
-
- // add clearfix after even col count
- if(colCount % 2 === 0){
- rowElement.append(
- $(' ', {
- class: ['clearfix', 'visible-md', 'visible-lg'].join(' ')
- })
- );
- }
-
- cache.systemEffectDialog = rowElement;
}
- let effectsDialog = bootbox.dialog({
- className: config.systemEffectDialogClass,
- title: 'System effect information',
- message: cache.systemEffectDialog,
- size: 'large',
- show: false
- });
+ let colElement = $(' ', {
+ class: ['col-md-6'].join(' ')
+ }).append(
+ $(' ', {
+ class: [Util.config.dynamicAreaClass].join(' ')
+ }).append(
+ table.append(thead).append(tbody)
+ )
+ );
- effectsDialog.on('show.bs.modal', function(e){
- let headerAll = $();
- let columnsAll = $();
+ rowElement.append(colElement);
- let removeColumnHighlight = () => {
- headerAll.removeClass('colHighlight');
- columnsAll.removeClass('colHighlight');
- };
+ // add clearfix after even col count
+ if(colCount % 2 === 0){
+ rowElement.append(
+ $(' ', {
+ class: ['clearfix', 'visible-md', 'visible-lg'].join(' ')
+ })
+ );
+ }
- let tableApis = $(this).find('table').DataTable({
- pageLength: -1,
- paging: false,
- lengthChange: false,
- ordering: false,
- searching: false,
- info: false,
- columnDefs: [],
- data: null, // use DOM data overwrites [] default -> data.loader.js
- initComplete: function(settings, json){
- let tableApi = this.api();
+ cache.systemEffectDialog = rowElement;
+ }
- tableApi.tables().nodes().to$().on('mouseover', 'td', function(){
- // inside table cell -> get current hover colIndex
- let colIndex = tableApi.cell(this).index().column;
- let colName = tableApi.column(colIndex).header().dataset.name || '';
-
- if(colName !== lastActiveColName){
- removeColumnHighlight();
-
- lastActiveColName = colName;
-
- if(colName.length){
- // active column changed -> highlight same colName on other tables
- let tableApis = $.fn.dataTable.tables({ visible: false, api: true })
- .tables('.' + config.systemEffectTableClass);
-
- let columns = tableApis.columns([colName + ':name']);
- columns.header().flatten().to$().addClass('colHighlight');
- columns.nodes().flatten().to$().addClass('colHighlight');
- }
- }
- }).on('mouseleave', function(){
- // no longer inside table
- lastActiveColName = null;
- removeColumnHighlight();
- });
- }
- });
-
- // table cells will not change so we should cache them once
- headerAll = tableApis.columns().header().to$();
- columnsAll = tableApis.cells().nodes().to$();
- });
-
- effectsDialog.on('hide.bs.modal', function(e){
- // destroy logTable
- $(this).find('table').DataTable().destroy(true);
- });
-
- effectsDialog.modal('show');
+ let effectsDialog = bootbox.dialog({
+ className: config.systemEffectDialogClass,
+ title: 'System effect information',
+ message: cache.systemEffectDialog,
+ size: 'large',
+ show: false
});
+
+ effectsDialog.on('show.bs.modal', function(e){
+ let headerAll = $();
+ let columnsAll = $();
+
+ let removeColumnHighlight = () => {
+ headerAll.removeClass('colHighlight');
+ columnsAll.removeClass('colHighlight');
+ };
+
+ let tableApis = $(this).find('table').DataTable({
+ pageLength: -1,
+ paging: false,
+ lengthChange: false,
+ ordering: false,
+ searching: false,
+ info: false,
+ columnDefs: [],
+ data: null, // use DOM data overwrites [] default -> data.loader.js
+ initComplete: function(settings, json){
+ let tableApi = this.api();
+
+ tableApi.tables().nodes().to$().on('mouseover', 'td', function(){
+ // inside table cell -> get current hover colIndex
+ let colIndex = tableApi.cell(this).index().column;
+ let colName = tableApi.column(colIndex).header().dataset.name || '';
+
+ if(colName !== lastActiveColName){
+ removeColumnHighlight();
+
+ lastActiveColName = colName;
+
+ if(colName.length){
+ // active column changed -> highlight same colName on other tables
+ let tableApis = $.fn.dataTable.tables({ visible: false, api: true })
+ .tables('.' + config.systemEffectTableClass);
+
+ let columns = tableApis.columns([colName + ':name']);
+ columns.header().flatten().to$().addClass('colHighlight');
+ columns.nodes().flatten().to$().addClass('colHighlight');
+ }
+ }
+ }).on('mouseleave', function(){
+ // no longer inside table
+ lastActiveColName = null;
+ removeColumnHighlight();
+ });
+ }
+ });
+
+ // table cells will not change so we should cache them once
+ headerAll = tableApis.columns().header().to$();
+ columnsAll = tableApis.cells().nodes().to$();
+ });
+
+ effectsDialog.on('hide.bs.modal', function(e){
+ // destroy logTable
+ $(this).find('table').DataTable().destroy(true);
+ });
+
+ effectsDialog.modal('show');
};
});
\ No newline at end of file
diff --git a/js/app/ui/form_element.js b/js/app/ui/form_element.js
index 9817cc7d..814ed2de 100644
--- a/js/app/ui/form_element.js
+++ b/js/app/ui/form_element.js
@@ -25,12 +25,12 @@ define([
if(data.loading) return data.text;
if(data.placeholder) return data.placeholder;
- let markup = ' ';
+ let markup = ` `;
if(data.hasOwnProperty('children')){
// category group label
- markup += ' ' + data.text + ' ';
- markup += ' (' + data.children.length + ') ';
+ markup += ` ${data.text} `;
+ markup += ` (${data.children.length}) `;
}else{
let imagePath = '';
let iconName = '';
@@ -61,13 +61,13 @@ define([
}
if(imagePath){
- thumb = ' ![]() ';
+ thumb = ` }svg/logo_simple.svg) `;
}else if(iconName){
- thumb = ' ';
+ thumb = ` `;
}
- markup += ' ' + thumb + ' ';
- markup += ' ' + data.text + ' ';
+ markup += ` ${thumb} `;
+ markup += ` ${data.text} `;
}
markup += ' ';
@@ -90,8 +90,7 @@ define([
let name = parts[0];
let sizeLabel;
if(Util.getObjVal(customOptions, 'showWhSizeLabel')){
- let wormholeSizeData = Util.getObjVal(Init, 'wormholes.' + name + '.size');
- sizeLabel = Util.getObjVal(wormholeSizeData, 'label') || '';
+ sizeLabel = Util.getObjVal(Init, `wormholes.${name}.size.label`) || '';
}
let securityClass = Util.getSecurityClassForSystem(getSystemSecurityFromLabel(parts[1]));
@@ -102,19 +101,17 @@ define([
let classes = [securityClass, Util.config.popoverTriggerClass, Util.config.helpDefaultClass];
- markup += ' ' + name + '';
+ markup += ` ${name}`;
if(sizeLabel !== undefined){
- markup += ' ' + sizeLabel + '';
- }else{
- markup += ' ';
+ markup += ` ${sizeLabel}`;
}
markup += ' ';
- markup += ' ' + label + '';
+ markup += ` ${label}`;
if(suffix.length){
- markup += ' ' + suffix + '';
+ markup += ` ${suffix}`;
}
}else{
- markup += ' ' + state.text + '';
+ markup += ` ${state.text}`;
}
return $(markup);
@@ -152,7 +149,7 @@ define([
markup += ' ' + parts[0] + ' ';
- markup += '
';
+ markup += '
';
markup += ' ' + label + ' ';
markup += ' ' + suffix + ' ';
break;
@@ -203,10 +200,10 @@ define([
}
let securityClass = Util.getSecurityClassForSystem(parts[1]);
- markup += ' ' + parts[0] + ' ';
- markup += ' ' + parts[1] + '';
+ markup += ` ${parts[0]}`;
+ markup += ` ${parts[1]}`;
}else{
- markup += ' ' + state.text + '';
+ markup += ` ${state.text}`;
}
return $(markup);
@@ -250,7 +247,7 @@ define([
let defaultConfig = {
dropdownParent: selectElement.parents('.modal-body'),
- minimumResultsForSearch: -1,
+ minimumResultsForSearch: Infinity,
width: '100%',
maxSelectionLength: 1
};
@@ -296,7 +293,7 @@ define([
$.fn.initStatusSelect = function(options){
let defaultConfig = {
- minimumResultsForSearch: -1,
+ minimumResultsForSearch: Infinity,
width: '100%',
iconClass: 'fa-circle'
};
@@ -787,7 +784,7 @@ define([
*/
$.fn.initSignatureGroupSelect = function(options){
let defaultConfig = {
- minimumResultsForSearch: -1,
+ minimumResultsForSearch: Infinity,
width: '110px',
dropdownParent: this.parents('.popover-content')
};
@@ -883,7 +880,7 @@ define([
*/
$.fn.initSignatureConnectionSelect = function(options){
let defaultConfig = {
- minimumResultsForSearch: -1,
+ minimumResultsForSearch: Infinity,
width: '140px',
dropdownParent: this.parents('.popover-content')
};
diff --git a/js/app/ui/layout/demo_map.js b/js/app/ui/layout/demo_map.js
deleted file mode 100644
index 3803037b..00000000
--- a/js/app/ui/layout/demo_map.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * Demo SVG map
- */
-
-define([
- 'jquery',
- 'lazylinepainter'
-], ($) => {
-
- 'use strict';
-
- let config = {
- headerSystemsContainerId: 'pf-header-systems', // id for systems layer
- headerSystemConnectorsId: 'pf-header-connectors', // id for connectors layer
- headerConnectionsContainerId: 'pf-header-connections', // id for connections layer
- headerBackgroundContainerId: 'pf-header-background', // id for background layer
-
- headerSystemClass: 'pf-header-system', // class for all header background systems
-
- // map dimensions
- mapWidth: 600, // map width (px)
- mapHeight: 380 // map height (px)
- };
-
- /**
- * draw systems layer
- * @param callback
- */
- let drawSystems = function(callback){
-
- let pathObj = {
- systems: {
- strokepath: [
- // systems =======================================================================
- // 1
- {
- path: 'm 155 30 90 0 c 2.8 0 5 2.2 5 5 l 0 10 c 0 2.8 -2.2 5 -5 5 l -90 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -10 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#568A89' //teal
- },
- // 2
- {
- path: 'm 374 91 110 0 c 2.8 0 5 2.2 5 5 l 0 10 c 0 2.8 -2.2 5 -5 5 l -110 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -10 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#63676A' //gray
- },
- // 3
- {
- path: 'm 15 149 90 0 c 2.8 0 5 2.2 5 5 l 0 30 c 0 2.8 -2.2 5 -5 5 l -90 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -30 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#D9534F ' //red
- },
- // 4
- {
- path: 'm 235 230 90 0 c 2.8 0 5 2.2 5 5 l 0 10 c 0 2.8 -2.2 5 -5 5 l -90 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -10 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#63676A' //gray
- },
- // 5
- {
- path: 'm 175 330 90 0 c 2.8 0 5 2.2 5 5 l 0 30 c 0 2.8 -2.2 5 -5 5 l -90 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -30 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#E28A0D ' //orange
- },
- // 6
- {
- path: 'm 436 312 90 0 c 2.8 0 5 2.2 5 5 l 0 10 c 0 2.8 -2.2 5 -5 5 l -90 0 c -2.8 0 -5 -2.2 -5 -5 l 0 -10 c 0 -2.8 2.2 -5 5 -5 z',
- duration: 500,
- strokeColor: '#5CB85C ' //green
- }
- ],
- dimensions: {
- width: config.mapWidth,
- height: config.mapHeight
- }
- }
- };
-
-
- // draw systems into header
- $('#' + config.headerSystemsContainerId).lazylinepainter(
- {
- svgData: pathObj,
- strokeWidth: 2,
- strokeOpacity: 1,
- overrideKey: 'systems',
- strokeJoin: 'miter',
- strokeCap: 'butt',
- delay: 1000,
- onComplete: function(){
- drawConnectors(callback);
- }
-
- }).lazylinepainter('paint');
- };
-
- /**
- * draw connectors layer
- * @param callback
- */
- let drawConnectors = function(callback){
-
- let connectorDuration = 150;
-
- let pathObj = {
- connectors: {
- strokepath: [
- // connectors ====================================================================
- // 1
- {
- path: 'm 250.4 34.8 c 1.7 0 3.1 1.3 3.9 2.9 0.8 1.7 0.8 3.7 0 5.3 -0.8 1.7 -2.4 2.7 -4 2.7',
- duration: connectorDuration
- },
- {
- path: 'm 150 34.7 c -1.7 0 -3.1 1.3 -3.9 2.9 -0.8 1.7 -0.8 3.7 0 5.3 0.8 1.7 2.4 2.7 4 2.7',
- duration: connectorDuration
- },
- // 2
- {
- path: 'm 369 96 c -1.7 0 -3.1 1.3 -3.9 2.9 -0.8 1.7 -0.8 3.7 0 5.3 0.8 1.7 2.4 2.7 4 2.7',
- duration: connectorDuration
- },
- // 3
- {
- path: 'm 110.4 165 c 1.7 0 3.1 1.3 3.9 2.9 0.8 1.7 0.8 3.7 0 5.3 -0.8 1.7 -2.4 2.7 -4 2.7',
- duration: connectorDuration
- },
- {
- path: 'm 56 148 c 0 -1.7 1.3 -3.1 2.9 -3.9 1.7 -0.8 3.7 -0.8 5.3 0 1.7 0.8 2.7 2.4 2.7 4',
- duration: connectorDuration
- },
- // 4
- {
- path: 'm 229 236 c -1.7 0 -3.1 1.3 -3.9 2.9 -0.8 1.7 -0.8 3.7 0 5.3 0.8 1.7 2.4 2.7 4 2.7',
- duration: connectorDuration
- },
- {
- path: 'm 331 234.7 c 1.7 0 3.1 1.3 3.9 2.9 0.8 1.7 0.8 3.7 0 5.3 -0.8 1.7 -2.4 2.7 -4 2.7',
- duration: connectorDuration
- },
- {
- path: 'm 285 251 c 0 1.7 -1.3 3.1 -2.9 3.9 -1.7 0.8 -3.7 0.8 -5.3 0 -1.7 -0.8 -2.7 -2.4 -2.7 -4',
- duration: connectorDuration
- },
- // 5
- {
- path: 'm 213 329.5 c 0 -1.7 1.3 -3.1 2.9 -3.9 1.7 -0.8 3.7 -0.8 5.3 0 1.7 0.8 2.7 2.4 2.7 4',
- duration: connectorDuration
- },
- // 6
- {
- path: 'm 430 316 c -1.7 0 -3.1 1.3 -3.9 2.9 -0.8 1.7 -0.8 3.7 0 5.3 0.8 1.7 2.4 2.7 4 2.7',
- duration: connectorDuration
- }
- ],
- dimensions: {
- width: config.mapWidth,
- height: config.mapHeight
- }
- }
- };
-
-
- // draw systems into header
- $('#' + config.headerConnectionsContainerId).lazylinepainter(
- {
- svgData: pathObj,
- strokeWidth: 2,
- duration: 600,
- drawSequential: false,
- strokeOpacity: 1,
- overrideKey: 'connectors',
- strokeJoin: 'miter',
- strokeCap: 'butt',
- strokeColor: '#63676A', //gray
- onComplete: function(){
- drawConnections(callback);
- }
-
- }).lazylinepainter('paint');
- };
-
- /**
- * draw connections layer
- * @param callback
- */
- let drawConnections = function(callback){
-
- let connectionDuration = 250;
- let connectionWidth = 8;
- let connectionInnerWidth = 4;
- let connectionBorderColor = '#63676A'; //gray
-
- let pathObj = {
- connections: {
- strokepath: [
- // connections ====================================================================
- // 1 - 2
- {
- path: 'm 255,40 c 44.5,0 64.2,61.1 109.0,61.15',
- duration: connectionDuration,
- strokeWidth: connectionWidth
- },
- {
- path: 'm 255,40 c 44.5,0 64.2,61.1 109.0,61.15',
- duration: connectionDuration,
- strokeWidth: connectionInnerWidth,
- strokeColor: '#3C3F41' // gray
- },
- // 2 - 3
- {
- path: 'm 146,40.0 c -51.7,0 -83.8,58.8 -83.8,104.5',
- duration: connectionDuration,
- strokeWidth: connectionWidth
- },
- {
- path: 'm 146,40.0 c -51.7,0 -83.8,58.8 -83.8,104.5',
- duration: connectionDuration,
- strokeWidth: connectionInnerWidth,
- strokeColor: '#E28A0D' // orange
- },
- // 3 - 4
- {
- path: 'm 115,171 c 45.7,0 64.1,71.2 109.6,70.8',
- duration: connectionDuration,
- strokeWidth: connectionWidth
- },
- {
- path: 'm 115,171 c 45.7,0 64.1,71.2 109.6,70.8',
- duration: connectionDuration,
- strokeWidth: connectionInnerWidth,
- strokeColor: '#A52521' // red
- },
- // 4 - 5
- {
- path: 'm 279,256 c 0.5,35.9 -60.1,35.1 -60.1,70.0',
- duration: connectionDuration,
- strokeWidth: connectionWidth
- },
- {
- path: 'm 279,256 c 0.5,35.9 -60.1,35.1 -60.1,70.0',
- duration: connectionDuration,
- strokeWidth: connectionInnerWidth,
- strokeColor: '#3C3F41' // gray
- },
- // 4 - 6
- {
- path: 'm 335,240 c 44.2,0 43.7,81.6 89.9,81.6',
- duration: connectionDuration,
- strokeWidth: connectionWidth
- },
- {
- path: 'm 335,240 c 44.2,0 43.7,81.6 89.9,81.6',
- duration: connectionDuration,
- strokeWidth: connectionInnerWidth,
- strokeColor: '#3C3F41' // gray
- }
- ],
- dimensions: {
- width: config.mapWidth,
- height: config.mapHeight
- }
- }
- };
-
-
- // draw systems into header
- $('#' + config.headerSystemConnectorsId).lazylinepainter(
- {
- svgData: pathObj,
- strokeWidth: 2,
- duration: 600,
- // drawSequential: false,
- strokeOpacity: 1,
- overrideKey: 'connections',
- strokeJoin: 'miter',
- strokeCap: 'butt',
- strokeColor: connectionBorderColor,
- onComplete: function(){
- drawBackground(callback);
- }
-
- }).lazylinepainter('paint');
-
- };
-
- /**
- * draw background layer
- * @param callback
- */
- let drawBackground = function(callback){
- $('#' + config.headerBackgroundContainerId + ' .' + config.headerSystemClass).velocity('transition.bounceUpIn', {
- stagger: 150,
- complete: function(){
- if(typeof callback === 'function'){
- callback();
- }
- }
- });
- };
-
- /**
- * draws the demo map
- * @param callback
- */
- $.fn.drawDemoMap = function(callback){
- let canvasElement = $(this);
-
-
- // draw systems
- drawSystems(callback);
- };
-
-});
\ No newline at end of file
diff --git a/js/app/ui/layout/header_login.js b/js/app/ui/layout/header_login.js
index 8d491be7..d35ad50d 100644
--- a/js/app/ui/layout/header_login.js
+++ b/js/app/ui/layout/header_login.js
@@ -4,236 +4,565 @@
define([
'jquery',
- 'easePack',
- 'tweenLite'
-], ($) => {
+ 'app/util'
+], ($, Util) => {
'use strict';
let config = {
- previewElementClass: 'pf-header-preview-element' // class for "preview" elements
+ headerId: 'pf-landing-top', // id for page header
+ canvasId: 'pf-header-canvas', // id for canvas background
+ previewElementClass: 'pf-header-preview-element' // class for "preview" elements
};
+ class Color {
+ constructor(r, g, b, a = 1){
+ this._r = r;
+ this._g = g;
+ this._b = b;
+ this._a = a;
+ }
- let width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
+ get r(){
+ return this._r;
+ }
- let canvasHeight = 355;
- let colorRGB = '108, 174, 173';
- let connectionCount = 4;
+ get g(){
+ return this._g;
+ }
+ get b(){
+ return this._b;
+ }
- let initHeader = function(){
- width = window.innerWidth;
- height = canvasHeight;
- target = {x: width * 1, y: 230};
+ style(a = this.a){
+ return `rgba(${this.r}, ${this.g}, ${this.b}, ${a})`;
+ }
+ }
- largeHeader.style.height = height+'px';
+ class Node {
+ constructor(x, y, ctx, config = {}){
+ this._anchorX = x;
+ this._anchorY = y;
+ this._ctx = ctx;
+ this._config = config;
+ this._x = Math.random() * (x - (x - this._config.anchorLength)) + (x - this._config.anchorLength);
+ this._y = Math.random() * (y - (y - this._config.anchorLength)) + (y - this._config.anchorLength);
+ this._vx = Math.random() * 2 - 1;
+ this._vy = Math.random() * 2 - 1;
+ this._energy = Math.random() * 100;
+ this._radius = Math.random();
+ this._siblings = [];
+ this._brightness = 0;
+ this._isPointer = false;
+ }
- canvas.width = width;
- canvas.height = height;
- ctx = canvas.getContext('2d');
+ set x(x){
+ this._x = x;
+ }
- // create points
- points = [];
- for(let x = 0; x < width; x = x + width/20){
- for(let y = 0; y < height; y = y + height/15){
- let px = x + Math.random()*width/15;
- let py = y + Math.random()*height/15;
- let p = {x: px, originX: px, y: py, originY: py };
- points.push(p);
+ get x(){
+ return this._x;
+ }
+
+ set y(y){
+ this._y = y;
+ }
+
+ get y(){
+ return this._y;
+ }
+
+ set siblings(siblings){
+ this._siblings = siblings;
+ }
+
+ get siblings(){
+ return this._siblings;
+ }
+
+ get radius(){
+ if(this.isPointer){
+ return 3;
}
+ return 2 * this._radius + 2 * this._siblings.length / this._config.siblingsLimit;
}
- // for each point find the 5 closest points
- for(let i = 0; i < points.length; i++){
- let closest = [];
- let p1 = points[i];
- for(let j = 0; j < points.length; j++){
- let p2 = points[j];
- if(p1 !== p2){
- let placed = false;
- for(let k = 0; k < connectionCount; k++){
- if(!placed){
- if(closest[k] === undefined){
- closest[k] = p2;
- placed = true;
- }
- }
- }
-
- for(let m = 0; m < connectionCount; m++){
- if(!placed){
- if(getDistance(p1, p2) < getDistance(p1, closest[m])){
- closest[m] = p2;
- placed = true;
- }
- }
- }
- }
- }
- p1.closest = closest;
+ set brightness(brightness){
+ this._brightness = brightness;
}
- // assign a circle to each point
- for(let n in points){
- let c = new Circle(points[n], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
- points[n].circle = c;
+ get brightness(){
+ return this.isPointer ? 1 : this._brightness;
}
- };
- // Event handling
- let addListeners = function(){
- if(!('ontouchstart' in window)){
- window.addEventListener('mousemove', mouseMove);
+ set color(color){
+ this._color = color;
}
- window.addEventListener('scroll', scrollCheck);
- window.addEventListener('resize', resize);
- };
- let mouseMove = function(e){
- let posx = 0;
- let posy = 0;
- if(e.pageX || e.pageY){
- posx = e.pageX;
- posy = e.pageY;
- }else if(e.clientX || e.clientY){
- posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
- posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+ get color(){
+ return this._color;
}
- target.x = posx;
- target.y = posy;
- };
- let scrollCheck = function(){
- if(document.body.scrollTop > height){
- animateHeader = false;
- }else{
- animateHeader = true;
+ set isPointer(isPointer){
+ this._isPointer = isPointer;
}
- };
- let resize = function(){
- width = window.innerWidth;
- height = canvasHeight;
- largeHeader.style.height = height+'px';
- canvas.width = width;
- canvas.height = height;
- };
-
- // animation
- let initAnimation = function(){
- animate();
- for(let i in points){
- shiftPoint(points[i]);
+ get isPointer(){
+ return this._isPointer;
}
- };
- let animate = function animate(){
- if(animateHeader){
- ctx.clearRect(0,0,width,height);
- for(let i in points){
- // detect points in range
- if(Math.abs(getDistance(target, points[i])) < 4000){
- points[i].active = 0.25;
- points[i].circle.active = 0.45;
- }else if(Math.abs(getDistance(target, points[i])) < 20000){
- points[i].active = 0.1;
- points[i].circle.active = 0.3;
- }else if(Math.abs(getDistance(target, points[i])) < 40000){
- points[i].active = 0.02;
- points[i].circle.active = 0.1;
+ drawNode(){
+ this._ctx.beginPath();
+ this._ctx.arc(this.x, this.y, this.radius, 0, StarCanvas.circ);
+ this._ctx.fillStyle = this.color.style(this.brightness * this._config.brightnessMultiplierNode);
+ this._ctx.fill();
+ }
+
+ drawConnections(){
+ for(let i = 0; i < this._siblings.length; i++){
+ this._ctx.beginPath();
+ this._ctx.moveTo(this.x, this.y);
+ this._ctx.lineTo(this._siblings[i].x, this._siblings[i].y);
+ this._ctx.lineWidth = 1 - StarCanvas.calcDistance(this, this._siblings[i]) / this._config.sensitivity;
+ if(this.color === this._siblings[i].color){
+ // no gradient
+ this._ctx.strokeStyle = this.color.style(this.brightness * this._config.brightnessMultiplierConnection);
}else{
- points[i].active = 0;
- points[i].circle.active = 0;
+ // gradient
+ this._ctx.strokeStyle = this.gradient(this._siblings[i], StarCanvas.lineStyle(this, this._siblings[i])) ;
}
-
- drawLines(points[i]);
- points[i].circle.draw();
+ this._ctx.stroke();
}
}
- requestAnimationFrame(animate);
- };
- let shiftPoint = function(p){
- TweenLite.to(p, 1 + 1 * Math.random(), {x: p.originX - 50 + Math.random() * 100,
- y: p.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
- onComplete: function(){
- shiftPoint(p);
- }});
- };
-
- // Canvas manipulation
- let drawLines = function(p){
- if(!p.active) return;
- for(let i in p.closest){
- ctx.beginPath();
- ctx.moveTo(p.x, p.y);
- ctx.lineTo(p.closest[i].x, p.closest[i].y);
- ctx.strokeStyle = 'rgba(' + colorRGB +','+ p.active+')';
- ctx.stroke();
+ gradient(node2, midColor){
+ let grad = this._ctx.createLinearGradient(Math.floor(this.x), Math.floor(this.y), Math.floor(node2.x), Math.floor(node2.y));
+ grad.addColorStop(0, this.color.style(this.brightness * this._config.brightnessMultiplierConnection));
+ grad.addColorStop(0.5, midColor);
+ grad.addColorStop(1, node2.color.style(node2.brightness * this._config.brightnessMultiplierConnection));
+ return grad;
}
+
+ moveNode(){
+ this._energy -= 2;
+ if(this._energy < 1){
+ this._energy = Math.random() * 100;
+ if(this.x - this._anchorX < -this._config.anchorLength){
+ this._vx = Math.random() * 2;
+ }else if(this.x - this._anchorX > this._config.anchorLength){
+ this._vx = Math.random() * -2;
+ }else{
+ this._vx = Math.random() * 4 - 2;
+ }
+ if(this.y - this._anchorY < -this._config.anchorLength){
+ this._vy = Math.random() * 2;
+ }else if (this.y - this._anchorY > this._config.anchorLength){
+ this._vy = Math.random() * -2;
+ }else{
+ this._vy = Math.random() * 4 - 2;
+ }
+ }
+ this.x += this._vx * this._energy / 100;
+ this.y += this._vy * this._energy / 100;
+ }
+ }
+
+ class StarCanvas {
+ constructor(canvas, config = {}) {
+ this._canvas = canvas;
+ this._config = Object.assign({}, new.target.defaultConfig, config);
+ this._nodes = [];
+ this._nodesQty = 0;
+ this._updateActive = true;
+ this._minWait = Math.floor(1 / this._config.fps * 1000);
+
+ this.resizeWindow();
+ this._mouse = this._config.startCoordinates(this._canvas);
+
+ this._ctx = this._canvas.getContext('2d', {alpha: true, desynchronized: true});
+ this.initHandlers();
+
+ // must be bind to this instance -> https://stackoverflow.com/a/46014225/4329969
+ this.onPointerDown = this.onPointerDown.bind(this);
+ this.onPointerEnter = this.onPointerEnter.bind(this);
+ this.onPointerLeave = this.onPointerLeave.bind(this);
+ this.onPointerMove = this.onPointerMove.bind(this);
+
+ this.initPointerLock();
+ this.initIntersectionObserver();
+ this.setColorBase();
+ this.initNodes();
+ this.redrawCheck();
+ }
+
+ setColorBase(){
+ // if base color does not change -> re-use same instance for all nodes
+ this._colorBase = Array.isArray(this._config.colorBase) ? new Color(...this._config.colorBase) : null;
+ }
+
+ isPaused(){
+ return (typeof this._config.isPaused === 'function') ? this._config.isPaused(this) : this._config.isPaused;
+ }
+
+ findSiblings(){
+ let node1, node2, distance;
+ for(let i = 0; i < this._nodesQty; i++){
+ node1 = this._nodes[i];
+ node1.siblings = [];
+ for(let j = 0; j < this._nodesQty; j++){
+ node2 = this._nodes[j];
+ if(node1 !== node2){
+ distance = StarCanvas.calcDistance(node1, node2);
+ if(distance < this._config.sensitivity){
+ if(node1.siblings.length < this._config.siblingsLimit){
+ node1.siblings.push(node2);
+ }else{
+ let node_sibling_distance = 0;
+ let max_distance = 0;
+ let s;
+ for(let k = 0; k < this._config.siblingsLimit; k++){
+ node_sibling_distance = StarCanvas.calcDistance(node1, node1.siblings[k]);
+ if(node_sibling_distance > max_distance){
+ max_distance = node_sibling_distance;
+ s = k;
+ }
+ }
+ if(distance < max_distance){
+ node1.siblings.splice(s, 1);
+ node1.siblings.push(node2);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ redrawScene(){
+ //this.resizeWindow();
+ this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ this.findSiblings();
+ // skip nodes move to move if they are outside the visible radius -> performance boost
+ let haltRadius = this._config.mouseRadius + this._config.anchorLength;
+ // mouse pointer node moves on mousemove
+ this._pointerNode.x = this._mouse.x;
+ this._pointerNode.y = this._mouse.y;
+ let skipNodesMove = [0]; // pointer node
+
+ let i, node, distance;
+ for(i = 0; i < this._nodesQty; i++){
+ node = this._nodes[i];
+ distance = StarCanvas.calcDistance({
+ x: this._mouse.x,
+ y: this._mouse.y
+ }, node);
+
+ if(distance < this._config.mouseRadius){
+ node.brightness = 1 - distance / this._config.mouseRadius;
+ }else{
+ node.brightness = 0;
+ }
+
+ if(distance > haltRadius){
+ skipNodesMove.push(i);
+ }
+ skipNodesMove = [];
+ }
+
+ for(i = 0; i < this._nodesQty; i++){
+ node = this._nodes[i];
+ if(node.brightness){
+ node.drawNode();
+ node.drawConnections();
+ }
+
+ if(!skipNodesMove.includes(i)){
+ node.moveNode();
+ }
+ }
+ }
+
+ redrawCheck(){
+ if(this._animationFrameId){
+ cancelAnimationFrame(this._animationFrameId);
+ }
+
+ this._animationFrameId = requestAnimationFrame(() => {
+ let now = Date.now();
+
+ if(
+ this._updateActive && !this.isPaused() &&
+ now - (this._lastRender || 0) >= this._minWait
+ ){
+ this._lastRender = now;
+ this.redrawScene();
+ }
+
+
+ this._animationFrameId = null;
+ this.redrawCheck();
+ });
+ }
+
+ initNodes(){
+ this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ this._nodes = [];
+ for(let i = this._config.density; i < this._canvas.width; i += this._config.density) {
+ for(let j = this._config.density; j < this._canvas.height; j += this._config.density) {
+ let node = new Node(i, j, this._ctx, this._config);
+ if(typeof this._config.colorBase === 'function'){
+ node.color = this._config.colorBase(node, this);
+ }else{
+ node.color = this._colorBase;
+ }
+ this._nodes.push(node);
+ this._nodesQty++;
+ }
+ }
+
+ // mouse cursor node
+ this._pointerNode = new Node(
+ this._mouse.x,
+ this._mouse.y,
+ this._ctx,
+ this._config
+ );
+ this._pointerNode.color = new Color(...this._config.colorCursor);
+ this._pointerNode.brightness = 1;
+ this._pointerNode.isPointer = true;
+ this._nodes.unshift(this._pointerNode);
+ this._nodesQty++;
+ }
+
+ initHandlers(){
+ this._canvas.addEventListener('pointerover', e => this.onPointerEnter(e), {passive: true});
+ this._canvas.addEventListener('pointermove', e => this.onPointerMove(e), {passive: true});
+ }
+
+ initPointerLock(){
+ if(!this._config.pointerLock){
+ return;
+ }
+
+ let lockChange = (e) => {
+ /*
+ if(document.pointerLockElement === this._canvas){
+ this._canvas.addEventListener('pointermove', this.onPointerMove, {passive: true});
+ }else{
+ this._canvas.removeEventListener('pointermove', this.onPointerMove, {passive: true});
+ }*/
+ };
+
+ //this._canvas.requestPointerLock()
+ this._canvas.addEventListener('pointerdown', this.onPointerDown, false);
+ //this._canvas.addEventListener('mouseenter', this.onPointerEnter, false);
+ //this._canvas.addEventListener('mouseleave', this.onPointerLeave, false);
+
+ document.addEventListener('pointerlockchange', lockChange, false);
+ }
+
+ initIntersectionObserver(){
+ let intersectionCallback = entries => {
+ let visiblePct = Math.floor(entries[0].intersectionRatio * 100);
+ this._updateActive = visiblePct > 0;
+ };
+
+ this._intersectionObserver = new IntersectionObserver(intersectionCallback, {
+ threshold: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
+ });
+ this._intersectionObserver.observe(this._canvas);
+ }
+
+ mousemoveHandler(e){
+ this._mouse.x = e.clientX;
+ this._mouse.y = e.clientY;
+ }
+
+ onPointerMove(e){
+ let x = this._mouse.x + Math.floor(e.movementX);
+ let y = this._mouse.y + Math.floor(e.movementY);
+
+ this._mouse.x = Math.min(this._canvas.width, Math.max(0, x));
+ this._mouse.y = Math.min(this._canvas.height, Math.max(0, y));
+
+ /*
+ if(x !== this._mouse.x || y !== this._mouse.y){
+ // cursor outside canvas
+ document.exitPointerLock();
+ }
+ */
+ }
+
+ onPointerDown(e){
+ this._mouse.x = e.clientX;
+ this._mouse.y = e.clientY;
+ if(document.pointerLockElement === this._canvas){
+ document.exitPointerLock();
+ }else{
+ this._canvas.requestPointerLock();
+ }
+ }
+
+ onPointerEnter(e){
+ this._mouse.x = e.clientX;
+ this._mouse.y = e.clientY;
+ }
+
+ onPointerLeave(e){
+ document.exitPointerLock();
+ }
+
+ resizeWindow(){
+ let dimension = this._config.newDimension(this);
+ this._canvas.width = dimension.width;
+ this._canvas.height = dimension.height;
+ }
+ }
+
+ StarCanvas.circ = 2 * Math.PI;
+
+ StarCanvas.calcDistance = (node1, node2) => {
+ return Math.sqrt(Math.pow(node1.x - node2.x, 2) + (Math.pow(node1.y - node2.y, 2)));
};
- let Circle = function(pos,rad,color){
- let _this = this;
-
- // constructor
- (function(){
- _this.pos = pos || null;
- _this.radius = rad || null;
- _this.color = color || null;
- })();
-
- this.draw = function(){
- if(!_this.active) return;
- ctx.beginPath();
- ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
- ctx.fillStyle = 'rgba(' + colorRGB + ','+ _this.active+')';
- ctx.fill();
- };
+ StarCanvas.lineStyle = (node1, node2) => {
+ let r = StarCanvas.mixComponents(node1.color.r, node2.color.r, node1.radius, node2.radius);
+ let g = StarCanvas.mixComponents(node1.color.g, node2.color.g, node1.radius, node2.radius);
+ let b = StarCanvas.mixComponents(node1.color.b, node2.color.b, node1.radius, node2.radius);
+ let a = (node1.brightness + node2.brightness) / 2;
+ return `rgba(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)}, ${a})`;
};
- // Util
- let getDistance = function(p1, p2){
- return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
+ StarCanvas.mixComponents = (comp1, comp2, weight1, weight2) => {
+ return (comp1*weight1 + comp2*weight2) / (weight1 + weight2);
};
- /**
- * init header animation
- * @param callback
- */
- $.fn.initHeader = function(callback){
- largeHeader = $(this)[0];
- canvas = $(this).find('canvas:visible')[0];
+ StarCanvas.getRandomIntInclusive = (min, max) => {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min +1)) + min;
+ };
- // header preview elements
- $('.' + config.previewElementClass).velocity('transition.bounceIn', {
+
+ StarCanvas.defaultConfig = {
+ // limit render interval to max fps
+ // lower fps == less CPU
+ fps: 80,
+ // how close next node must be to activate connection (in px)
+ // shorter distance == better connection (line width)
+ sensitivity: 90,
+ // note that siblings limit is not 'accurate' as the node can actually have more connections than this value
+ // that's because the node accepts sibling nodes with no regard to their current connections this is acceptable
+ // because potential fix would not result in significant visual difference
+ // more siblings == bigger node
+ siblingsLimit: 15,
+ // default node margin
+ density: 50,
+ // avoid nodes spreading
+ anchorLength: 80,
+ // highlight radius
+ mouseRadius: 150,
+ // values < 1 will lower the calculated node brightness [0-1]
+ brightnessMultiplierNode: 1,
+ // values < 1 will lower the calculated connection brightness [0-1]
+ brightnessMultiplierConnection: 1,
+ colorBase: [108, 174, 173], // teal
+ colorCursor: [226, 138, 13], // orange
+ // callback for canvas dimension re-calc
+ newDimension: () => ({width: window.innerWidth, height: window.innerHeight}),
+ // start coordinates (before mouse move)
+ startCoordinates: canvas => ({
+ x: canvas.width / 2,
+ y: canvas.height / 2
+ }),
+ // callback/boolean to pause canvas updated (e.g. while page scroll). Better scroll performance
+ isPaused: false,
+ pointerLock: true
+ };
+
+ // custom configuration -------------------------------------------------------------------------------------------
+ let defaultConfig = {
+ brightnessMultiplierConnection: 0.95,
+ colorCursor: [200, 184, 71], // yellow dark
+ newDimension: starCanvas => ({
+ width: window.innerWidth,
+ height: 354 // max height + 1px border
+ }),
+ startCoordinates: canvas => ({
+ x: canvas.width / 2 + 500,
+ y: canvas.height / 2 + 50
+ }),
+ isPaused: () => document.body.classList.contains('on-scroll')
+ };
+
+ if(navigator.userAgent.indexOf('Chrome') > -1){
+ // Chrome user
+ Object.assign(defaultConfig, {
+ sensitivity: 85,
+ siblingsLimit: 10,
+ density: 60,
+ anchorLength: 20,
+ colorBase: (node, instance) => {
+ let colorId = StarCanvas.getRandomIntInclusive(0, 4);
+ let colorKey = `_randColor${colorId}`;
+ if(instance[colorKey]){
+ return instance[colorKey];
+ }
+
+ let rgb = StarCanvas.defaultConfig.colorBase;
+ switch(colorId){
+ case 1: rgb = [ 92, 184, 92]; break; // green
+ case 2: rgb = [ 68, 170, 130]; break; // aqua
+ case 3: rgb = [194, 118, 12]; break; // orange dark
+ case 4: rgb = StarCanvas.defaultConfig.colorBase; break;
+ }
+
+ instance[colorKey] = new Color(...rgb);
+ return instance[colorKey];
+ }
+ });
+ }else{
+ // Non Chrome user
+ Object.assign(defaultConfig, {
+ sensitivity: 85,
+ siblingsLimit: 6,
+ density: 60,
+ anchorLength: 20,
+ mouseRadius: 120
+ });
+ }
+
+ let init = headerEl => {
+ let previewEls = headerEl.getElementsByClassName(config.previewElementClass);
+
+ $(previewEls).velocity('transition.bounceIn', {
duration: 600,
stagger: 60,
delay: 120,
complete: function(){
-
- // show header canvas animation
+ let canvas = document.getElementById(config.canvasId);
+ // not on mobile
if(canvas){
- // header animation
- initHeader();
- initAnimation();
- addListeners();
+ let starCanvasInstance = new StarCanvas(canvas, defaultConfig);
+ canvas.classList.add('in');
- $(canvas).velocity('fadeIn', {
- duration: 900,
- visibility: 'visible',
- complete: function(){
- if(callback !== undefined){
- callback();
+ // watch for resize
+ Util.getResizeManager().observe(
+ canvas.parentNode,
+ (el, contentRect) => {
+ // ignore "height" change (css transition) (no canvas repaint)
+ if(canvas.width !== contentRect.width){
+ starCanvasInstance.resizeWindow();
}
- }
- });
+ },
+ {debounce: true, ms: 260}
+ );
}
}
-
});
-
-
};
+ return {
+ init
+ };
});
\ No newline at end of file
diff --git a/js/app/ui/layout/logo.js b/js/app/ui/layout/logo.js
deleted file mode 100644
index 7d62b125..00000000
--- a/js/app/ui/layout/logo.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * Logo
- */
-
-define([
- 'jquery',
- 'lazylinepainter'
-], ($) => {
-
- 'use strict';
-
- let config = {
- staticLogoId: 'pf-static-logo-svg', // id for "static" logo
-
- logoPartTopRightClass: 'logo-ploygon-top-right', // class for logo part "top right"
- logoPartBottomLeftClass: 'logo-ploygon-bottom-left', // class for logo part "bottom left"
- logoPartBottomRightClass: 'logo-ploygon-bottom-right', // class for logo part "bottom right"
- logoPartTopLeftClass: 'logo-ploygon-top-left'
- };
-
-
- /**
- * draws the pathfinder logo to an element and add some animation features
- * @param callback
- * @param enableHover
- */
- $.fn.drawLogo = function(callback, enableHover){
- let canvasElement = $(this);
-
- let pathObj = {
- logo: {
- strokepath: [
- {
- path: 'M195.9 9.6 226.9 297.1 354.2 365 196.2 9.8 ',
- strokeColor: '#477372',
- duration: 1600
- },
- {
- path: 'M1.7 361.3 73.9 284.9 178.6 286.7 2.2 361.4 ',
- strokeColor: '#5cb85c',
- duration: 1000
- },
- {
- path: 'M192.9 286.7 121.2 318.6 335.6 363.5 193.4 286.7 ',
- strokeColor: '#375959',
- duration: 900
- },
- {
- path: 'M202.8 141.9 0.2 352.6 189.1 0.8 202.7 141.3 ',
- strokeColor: '#63676a',
- duration: 1500
- }
- ],
- dimensions: {
- width: 355,
- height: 366
- }
- }
- };
-
- // load Logo svg
- requirejs(['text!templates/layout/logo.html', 'mustache'], function(template, Mustache){
- let logoData = {
- staticLogoId: config.staticLogoId,
- logoPartTopRightClass: config.logoPartTopRightClass,
- logoPartBottomLeftClass: config.logoPartBottomLeftClass,
- logoPartBottomRightClass: config.logoPartBottomRightClass,
- logoPartTopLeftClass: config.logoPartTopLeftClass
- };
-
- let logoContent = Mustache.render(template, logoData);
-
- canvasElement.html(logoContent);
-
- // draw the logo
- canvasElement.lazylinepainter(
- {
- svgData: pathObj,
- strokeWidth: 2,
- drawSequential: false,
- delay: 300,
- overrideKey: 'logo',
- strokeJoin: 'bevel',
- onComplete: function(){
-
- // hide lines
- canvasElement.find('svg:not(#' + config.staticLogoId + ')').velocity({
- opacity: 0
- },{
- delay: 100
- });
-
- // show full logo
- canvasElement.find('#' + config.staticLogoId + '').velocity({
- opacity: 1
- },{
- delay: 100,
- duration: 200,
- complete: function(){
-
- // execute callback
- if(typeof callback === 'function'){
- callback();
- }
-
- // init logo animation
- if(enableHover === true){
- let logoElements = $('#' + config.staticLogoId + ' path');
-
- let animate = [];
- logoElements.on('mouseover', function(e){
- let currentLogoElement = $(e.target);
- let currentLogoElementIndex = logoElements.index(currentLogoElement);
-
- let animationXValue = currentLogoElement.attr('data-animationX');
- let animationYValue = currentLogoElement.attr('data-animationY');
-
- let animationConfig = {};
- animationConfig.opacity = [1, 1];
- animationConfig.translateZ = [0, 0];
- animationConfig.translateX = [animationXValue, 0 ];
- animationConfig.translateY = [animationYValue, 0];
-
- if(animate[currentLogoElementIndex] !== false){
- $(this).velocity(animationConfig,{
- duration: 120,
- begin: function(){
- animate[currentLogoElementIndex] = false;
- }
- }).velocity('reverse',{
- delay: 240,
- complete: function(){
- animate[currentLogoElementIndex] = true;
- }
- });
- }
-
- });
- }
-
-
- }
- });
- }
- }).lazylinepainter('paint');
- });
- };
-
-});
\ No newline at end of file
diff --git a/js/app/ui/module/base.js b/js/app/ui/module/base.js
new file mode 100644
index 00000000..edfa3447
--- /dev/null
+++ b/js/app/ui/module/base.js
@@ -0,0 +1,513 @@
+define([
+ 'jquery',
+ 'app/init',
+ 'app/util',
+ 'app/map/util',
+ 'app/lib/cache',
+ 'app/promises/promise.deferred',
+ 'app/promises/promise.queue'
+], ($, Init, Util, MapUtil, Cache, DeferredPromise, PromiseQueue) => {
+ 'use strict';
+
+ /**
+ * abstract BaseModel class
+ * -> custom/plugin modules must extend from it
+ * @type {BaseModule}
+ */
+ let BaseModule = class BaseModule {
+
+ constructor(config= {}){
+ if(new.target === BaseModule){
+ throw new TypeError('Cannot construct ' + this.constructor.name + ' instances directly');
+ }
+
+ // check for abstract methods to be implemented in child
+ if(this.render === undefined){
+ throw new TypeError('Abstract method render() missing in ' + new.target.name + ' class');
+ }
+
+ this._config = Object.assign({}, BaseModule.defaultConfig, config);
+ this._updateQueue = new PromiseQueue();
+ }
+
+ /**
+ * get current module configuration
+ * @returns {*}
+ */
+ get config(){
+ return this._config;
+ }
+
+ /**
+ * get root node for this module
+ * -> parent container for custom body HTML
+ * @returns {HTMLElement}
+ */
+ get moduleElement(){
+ if(!this._moduleEl){
+ // init new moduleElement
+ this._moduleEl = Object.assign(document.createElement('div'), {
+ className: `${BaseModule.className} ${this._config.className}`,
+ style: {
+ opacity: '0'
+ }
+ }).setData('module', this);
+
+ this._moduleEl.dataset.position = this._config.position;
+ this._moduleEl.dataset.module = this.constructor.name;
+
+ // module header
+ this._moduleEl.append(this.newHeaderElement());
+ }
+ return this._moduleEl;
+ }
+
+ /**
+ * module header element
+ * -> dragHandler + headline
+ * @param text
+ * @returns {HTMLDivElement}
+ */
+ newHeaderElement(text){
+ let headEl = this.newHeadElement();
+ headEl.append(
+ this.newHandlerElement(),
+ this.newHeadlineElement(text || this._config.headline)
+ );
+ return headEl;
+ }
+
+ /**
+ * module head element
+ * @returns {HTMLDivElement}
+ */
+ newHeadElement(){
+ return Object.assign(document.createElement('div'), {
+ className: this._config.headClassName
+ });
+ }
+
+ /**
+ * module dragHandler element
+ * @returns {HTMLHeadingElement}
+ */
+ newHandlerElement(){
+ return Object.assign(document.createElement('h5'), {
+ className: this._config.handlerClassName
+ });
+ }
+
+ /**
+ * module headline element
+ * @param text
+ * @returns {HTMLHeadingElement}
+ */
+ newHeadlineElement(text){
+ return Object.assign(document.createElement('h5'), {
+ textContent: typeof text === 'string' ? text : ''
+ });
+ }
+
+ /**
+ * module toolbar element (wrapper)
+ * @returns {HTMLHeadingElement}
+ */
+ newHeadlineToolbarElement(){
+ return Object.assign(document.createElement('h5'), {
+ className: 'pull-right'
+ });
+ }
+
+ /**
+ * icon element
+ * @param cls
+ * @returns {HTMLElement}
+ */
+ newIconElement(cls = []){
+ return Object.assign(document.createElement('i'), {
+ className: ['fas', ...cls].join(' ')
+ });
+ }
+
+ /**
+ * label element
+ * @param text
+ * @param cls
+ * @returns {HTMLSpanElement}
+ */
+ newLabelElement(text, cls = []){
+ let labelEl = document.createElement('span');
+ labelEl.classList.add('label', 'center-block', ...cls);
+ labelEl.textContent = text || '';
+ return labelEl;
+ }
+
+ /**
+ * control button element
+ * @param text
+ * @param cls
+ * @param iconCls
+ * @returns {HTMLDivElement}
+ */
+ newControlElement(text, cls = [], iconCls = ['fa-sync']){
+ let controlEl = document.createElement('div');
+ controlEl.classList.add(...[BaseModule.Util.config.dynamicAreaClass, this._config.controlAreaClass, ...cls]);
+ controlEl.insertAdjacentHTML('beforeend', ` ${text}`);
+ controlEl.prepend(this.newIconElement(iconCls));
+ return controlEl;
+ }
+
+ /**
+ * HTTP request handler for internal (Pathfinder) ajax calls
+ * @param args
+ * @returns {Promise}
+ */
+ request(...args){
+ return BaseModule.Util.request(...args);
+ }
+
+ /**
+ * scoped instance for LocalStore for current module
+ * @returns {LocalStore}
+ */
+ getLocalStore(){
+ if(!this._localStore){
+ // make accessible -> scope Store keys!
+ this._localStore = BaseModule.Util.getLocalStore('module');
+ this._localStore.scope = this.constructor.name;
+ }
+ return this._localStore;
+ }
+
+ /**
+ * visual notification handler (UI popover)
+ * -> can be used for info/error on-screen messages
+ * @param args
+ */
+ showNotify(...args){
+ return BaseModule.Util.showNotify(...args);
+ }
+
+ /**
+ * responsible for dispatching all incoming method calls
+ * @param handler
+ * @param data
+ * @returns {*}
+ */
+ handle(handler, ...data){
+ try{
+ if(BaseModule.handler.includes(handler)){
+ // .. run module handler
+ let returnData = this[handler].apply(this, data);
+ if(returnData instanceof Promise){
+ // log returned Promise from handler call resolved
+ returnData.then(() => { this.logHandler(handler, 0);});
+ }
+ // log handler call
+ this.logHandler(handler);
+
+ return returnData;
+ }else{
+ console.error('Error in module %o. Invalid handler %o', this.constructor.name, handler);
+ }
+ }catch(e){
+ console.error('Error in module %o in handler %s() %o', this.constructor.name, handler, e);
+ }
+ }
+
+ /**
+ * log handler calls for this instance
+ * -> can be helpful for debugging
+ * @param handler
+ * @param increment
+ */
+ logHandler(handler, increment = 1){
+ if(increment){
+ if(!this._config.logHandler){
+ this._config.logHandler = {};
+ }
+
+ this._config.logHandler[handler] = (this._config.logHandler[handler] || 0) + increment;
+ }
+ }
+
+ /**
+ * init module
+ */
+ init(){}
+
+ /**
+ * update module
+ * @param data
+ * @returns {Promise}
+ */
+ update(data){
+ return this._updateQueue.enqueue(() => Promise.resolve(data), 'end', 'upd');
+ }
+
+ beforeHide(){}
+
+ beforeDestroy(){
+ $(this.moduleElement).destroyPopover(true);
+
+ // destroy DataTable instances
+ for(let table of $(this.moduleElement).find('table.dataTable')){
+ $(table).DataTable().destroy(true);
+ }
+ }
+
+ /**
+ * events from 'Sortable' lib
+ * @see https://github.com/SortableJS/Sortable
+ * @param name
+ * @param e
+ */
+ onSortableEvent(name, e){
+ if(name === 'onUnchoose' && this._sortableChoosePromise){
+ this._sortableChoosePromise.resolve();
+ }
+
+ if(name === 'onChoose' && !this._sortableChoosePromise){
+ this._sortableChoosePromise = BaseModule.newDeferredPromise();
+ this._updateQueue.enqueue(() => this._sortableChoosePromise.then(() => {
+ this._sortableChoosePromise = null;
+ }), 'start');
+ }
+ }
+
+ /**
+ * get a unique cache key name for "source"/"target"-name
+ * @param sourceName
+ * @param targetName
+ * @returns {string|boolean}
+ */
+ static getConnectionDataCacheKey(sourceName, targetName){
+ let key = false;
+ if(sourceName && targetName){
+ // names can be "undefined" in case system is currently in drag/drop state
+ // sort() is important -> ignore direction
+ key = `con_` + `${ [String(sourceName).toLowerCase(), String(targetName).toLowerCase()].sort() }`.hashCode();
+ }
+ return key;
+ }
+
+ /**
+ * get a connectionsData object that holds all connections for given mapIds (used as cache for route search)
+ * @param mapIds
+ * @returns {{}}
+ */
+ static getConnectionsDataFromMaps(mapIds){
+ let data = {};
+ for(let mapId of mapIds){
+ let map = MapUtil.getMapInstance(mapId);
+ if(map){
+ let cacheKey = `map_${mapId}`;
+ let cache = BaseModule.getCache('mapConnections');
+ let mapConnectionsData = cache.get(cacheKey);
+
+ if(!mapConnectionsData){
+ mapConnectionsData = this.getConnectionsDataFromConnections(mapId, map.getAllConnections());
+ // update cache
+ cache.set(cacheKey, mapConnectionsData);
+ }
+ Object.assign(data, mapConnectionsData);
+ }
+ }
+ return data;
+ }
+
+ /**
+ * get a connectionsData object for all connections
+ * @param mapId
+ * @param connections
+ * @returns {{}}
+ */
+ static getConnectionsDataFromConnections(mapId = 0, connections = []){
+ let data = {};
+ if(connections.length){
+ let connectionsData = MapUtil.getDataByConnections(connections);
+ for(let connectionData of connectionsData){
+ let connectionDataCacheKey = BaseModule.getConnectionDataCacheKey(connectionData.sourceName, connectionData.targetName);
+
+ // skip double connections between same systems
+ if(connectionDataCacheKey && !Object.keys(data).includes(connectionDataCacheKey)){
+ data[connectionDataCacheKey] = {
+ map: {
+ id: mapId
+ },
+ connection: {
+ id: connectionData.id,
+ type: connectionData.type,
+ scope: connectionData.scope,
+ updated: connectionData.updated
+ },
+ source: {
+ id: connectionData.source,
+ name: connectionData.sourceName,
+ alias: connectionData.sourceAlias
+ },
+ target: {
+ id: connectionData.target,
+ name: connectionData.targetName,
+ alias: connectionData.targetAlias
+ }
+ };
+ }
+ }
+ }
+ return data;
+ }
+
+ /**
+ * search for a specific connection by "source"/"target"-name inside connectionsData cache
+ * @param connectionsData
+ * @param sourceName
+ * @param targetName
+ * @returns {*}
+ */
+ static findConnectionsData(connectionsData, sourceName, targetName){
+ return this.Util.getObjVal(connectionsData, this.getConnectionDataCacheKey(sourceName, targetName));
+ }
+
+ /**
+ * get fake connection data (default connection type in case connection was not found on a map)
+ * @param sourceSystemData
+ * @param targetSystemData
+ * @param scope
+ * @param types
+ * @returns {{connection: {scope: string, id: number, type: [*]}, source: {name: number, alias: number, id: number}, target: {name: number, alias: number, id: number}}}
+ */
+ static getFakeConnectionData(sourceSystemData, targetSystemData, scope = 'stargate', types = []){
+ return {
+ connection: {
+ id: 0,
+ scope: scope,
+ type: types.length ? types : [MapUtil.getDefaultConnectionTypeByScope(scope)],
+ updated: 0
+ },
+ source: {
+ id: 0,
+ name: sourceSystemData.system,
+ alias: sourceSystemData.system
+ },
+ target: {
+ id: 0,
+ name: targetSystemData.system,
+ alias: targetSystemData.system
+ }
+ };
+ }
+
+ /**
+ * get fake connection Element
+ * @param connectionData
+ * @returns {string}
+ */
+ static getFakeConnectionElement(connectionData){
+ let mapId = this.Util.getObjVal(connectionData, 'map.id') || 0;
+ let connectionId = this.Util.getObjVal(connectionData, 'connection.id') || 0;
+ let scope = this.Util.getObjVal(connectionData, 'connection.scope') || '';
+ let classes = MapUtil.getConnectionFakeClassesByTypes(this.Util.getObjVal(connectionData, 'connection.type') || []);
+ let disabled = !mapId || !connectionId;
+
+ let connectionElement = ' ';
+ return connectionElement;
+ }
+
+ /**
+ * get static instance of in-memory Cache() store by 'name'
+ * -> not persistent across page reloads
+ * -> persistent across module instances (different and same maps)
+ * @param name
+ * @returns {Cache}
+ */
+ static getCache(name){
+ let key = `CACHE-${name}`;
+ if(!this.Util.getObjVal(this, key)){
+ let configKey = `cacheConfig.${name}`;
+ let cacheConfig = this.Util.getObjVal(this, configKey);
+ if(!cacheConfig){
+ console.warn('Missing Cache config for %o. Expected at %o. Default config loaded…',
+ name, `${this.name}.${configKey}`
+ );
+ cacheConfig = {};
+ }else{
+ // set cache name
+ cacheConfig.name = name;
+ }
+
+ this[key] = new Cache(cacheConfig);
+ }
+ return this[key];
+ }
+
+ static now(){
+ return new Date().getTime() / 1000;
+ }
+
+ static getOrderPrio(){
+ return this.isPlugin ?
+ this.scopeOrder.indexOf('plugin') :
+ (this.scopeOrder.indexOf(this.scope) !== -1 ?
+ this.scopeOrder.indexOf(this.scope) :
+ this.scopeOrder.length - 1
+ );
+ }
+
+ static newDeferredPromise(){
+ return new DeferredPromise();
+ }
+ };
+
+ BaseModule.isPlugin = true; // module is defined as 'plugin'
+ BaseModule.scope = 'system'; // static module scope controls how module gets updated and what type of data is injected
+ BaseModule.sortArea = 'a'; // static default sortable area
+ BaseModule.position = 0; // static default sort/order position within sortable area
+ BaseModule.label = '???'; // static module label (e.g. description)
+ BaseModule.className = 'pf-module'; // static CSS class name
+ BaseModule.fullDataUpdate = false; // static module requires additional data (e.g. system description,...)
+ BaseModule.Util = Util; // static access to Pathfinders Util object
+
+ BaseModule.scopeOrder = [
+ 'system',
+ 'connection',
+ 'global',
+ 'plugin',
+ 'undefined'
+ ];
+
+ BaseModule.handler = [
+ 'render',
+ 'init',
+ 'update',
+ 'beforeHide',
+ 'beforeDestroy',
+ 'onSortableEvent'
+ ];
+
+ BaseModule.cacheConfig = {
+ mapConnections: {
+ ttl: 5,
+ maxSize: 600,
+ debug: false
+ }
+ };
+
+ BaseModule.defaultConfig = {
+ position: 1,
+ className: 'pf-base-module', // class for module
+ headClassName: 'pf-module-head', // class for module header
+ handlerClassName: 'pf-sortable-handle', // class for "drag" handler
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Base headline', // module headline
+ bodyClassName: 'pf-module-body', // class for module body [optional: can be used]
+ controlAreaClass: 'pf-module-control-area', // class for "control" areas
+
+ moduleHeadlineIconClass: 'pf-module-icon-button' // class for toolbar icons in the head
+ };
+
+ return BaseModule;
+});
diff --git a/js/app/ui/module/connection_info.js b/js/app/ui/module/connection_info.js
index 10429887..11702972 100644
--- a/js/app/ui/module/connection_info.js
+++ b/js/app/ui/module/connection_info.js
@@ -6,31 +6,1252 @@ define([
'jquery',
'app/init',
'app/util',
+ 'module/base',
'bootbox',
'app/counter',
'app/map/util'
-], ($, Init, Util, bootbox, Counter, MapUtil) => {
+], ($, Init, Util, BaseModule, bootbox, Counter, MapUtil) => {
'use strict';
- let config = {
- // module info
- modulePosition: 1,
- moduleName: 'connectionInfo',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
+ let ConnectionInfoModule = class ConnectionInfoModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
- // connection info module
- moduleTypeClass: 'pf-connection-info-module', // class for this module
+ /**
+ * get HTML id by connectionId
+ * @param connectionId
+ * @returns {string}
+ */
+ getConnectionElementId(connectionId = 0){
+ return [
+ this._config.connectionInfoPanelClass,
+ this._mapId,
+ connectionId
+ ].join('-');
+ }
+
+ /**
+ * get all visible connection panel elements
+ * @returns {*|T|{}}
+ */
+ getConnectionElements(){
+ return [...this.moduleElement.getElementsByClassName(this._config.connectionInfoPanelClass)]
+ .filter(el => el.id !== this.getConnectionElementId());
+ }
+
+ /**
+ * module header
+ * @param text
+ * @returns {HTMLDivElement}
+ */
+ newHeaderElement(text){
+ let headEl = super.newHeaderElement(text);
+
+ let toolbarEl = this.newHeadlineToolbarElement();
+
+ let iconMassEl = this.newIconElement([
+ 'fa-male', 'fa-fw',
+ this._config.moduleHeadlineIconClass,
+ this._config.moduleHeadlineIconCurrentMassClass,
+ this._config.showShip ? 'active' : ''
+ ]);
+ iconMassEl.setAttribute('title', 'toggle current ship mass');
+
+ let iconRefreshEl = this.newIconElement([
+ 'fa-sync', 'fa-fw',
+ this._config.moduleHeadlineIconClass,
+ this._config.moduleHeadlineIconRefreshClass
+ ]);
+ iconRefreshEl.setAttribute('title', 'refresh all');
+
+ toolbarEl.append(iconMassEl, iconRefreshEl);
+ headEl.append(toolbarEl);
+
+ return headEl;
+ }
+
+ /**
+ * get info control panel element
+ * @param mapId
+ * @returns {HTMLDivElement}
+ */
+ newInfoPanelControlEl(mapId){
+ let connectionEl = this.newConnectionElement(mapId);
+ connectionEl.append(
+ this.newControlElement('add connection ctrl + click', [], ['fa-plus'])
+ );
+
+ return connectionEl;
+ }
+
+ /**
+ * get new connection element
+ * @param mapId
+ * @param connectionId
+ * @returns {HTMLDivElement}
+ */
+ newConnectionElement(mapId, connectionId = 0){
+ let connectionEl = document.createElement('div');
+ connectionEl.id = this.getConnectionElementId(connectionId);
+ connectionEl.classList.add(this._config.connectionInfoPanelClass);
+ $(connectionEl).data({
+ mapId: mapId,
+ connectionId: connectionId
+ });
+
+ return connectionEl;
+ }
+
+ /**
+ * render module
+ * @param mapId
+ * @param connections
+ * @returns {HTMLElement}
+ */
+ render(mapId, connections){
+ this._mapId = mapId;
+
+ let rowEl = document.createElement('div');
+ rowEl.classList.add(this._config.bodyClassName, 'grid');
+ rowEl.append(this.newInfoPanelControlEl(mapId));
+ this.moduleElement.append(rowEl);
+
+ this.updateConnectionPanels(mapId, MapUtil.getDataByConnections(connections), []);
+ this.setModuleObserver();
+
+ return this.moduleElement;
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ $(document).off('pf:updateConnectionInfoModule').on('pf:updateConnectionInfoModule', (e, data) => {
+ this.updateConnectionPanels(
+ data.mapId,
+ MapUtil.getDataByConnections(data.connectionsUpdate),
+ MapUtil.getDataByConnections(data.connectionsRemove)
+ );
+ });
+
+ $(document).off('pf:activeShip').on('pf:activeShip', (e) => {
+ $(this.moduleElement).find('.' + this._config.connectionInfoPanelClass).each((i, connectionElement) => {
+ $(connectionElement).find('.' + this._config.moduleTableClass).each((i, tableElement) => {
+ $(tableElement).trigger('pf:calcInfoTable');
+ });
+ });
+ });
+
+ // init toggle active ship ----------------------------------------------------------------
+ $(this.moduleElement).find('.' + this._config.moduleHeadlineIconCurrentMassClass).on('click', e => {
+ let currentMassIcon = $(e.target).toggleClass('active');
+ $(this.moduleElement).find('.' + this._config.connectionInfoPanelClass).each((i, connectionElement) => {
+ $(connectionElement).find('.' + this._config.moduleTableClass).each((i, tableElement) => {
+ $(tableElement).data('showShip', currentMassIcon.hasClass('active')).trigger('pf:calcInfoTable');
+ });
+ });
+ });
+
+ // init refresh connections ---------------------------------------------------------------
+ $(this.moduleElement).find('.' + this._config.moduleHeadlineIconRefreshClass).on('click', e => {
+ this.refreshConnectionPanels();
+ });
+
+ // init tooltips
+ $(this.moduleElement).initTooltips({
+ html: true
+ });
+ }
+
+ /**
+ * refresh all connection panels in a module
+ */
+ refreshConnectionPanels(){
+ let connectionsData = this.getConnectionsDataFromModule();
+ this.updateConnectionPanels(this._mapId, connectionsData.connectionsDataUpdate, connectionsData.connectionsDataRemove);
+ }
+
+
+ /**
+ * get connections from ModuleElement
+ * -> validate with current map data
+ * @returns {{connectionsDataUpdate: Array, connectionsDataRemove: Array}}
+ */
+ getConnectionsDataFromModule(){
+ let activeMap = Util.getMapModule().getActiveMap();
+ let mapData = activeMap.getMapDataFromClient(['hasId']);
+ let connectionsData = {
+ connectionsDataUpdate: [],
+ connectionsDataRemove: [],
+ };
+
+ if(mapData !== false){
+ this.getConnectionElements().forEach((connectionElement, i) => {
+ let removeConnectionPanel = true;
+ let connectionData = {id: $(connectionElement).data('connectionId') };
+
+ let connection = $().getConnectionById(this._mapId, connectionData.id);
+ if(connection){
+ let connectionDataTemp = MapUtil.getDataByConnection(connection);
+ if(connectionDataTemp.id > 0){
+ // connection still on map - OK
+ removeConnectionPanel = false;
+ connectionData = connectionDataTemp;
+ }
+ }
+
+ if(removeConnectionPanel){
+ connectionsData.connectionsDataRemove.push(connectionData);
+ }else{
+ connectionsData.connectionsDataUpdate.push(connectionData);
+ }
+ });
+ }
+
+ return connectionsData;
+ }
+
+ /**
+ * enrich connectionData with "logs" data (if available) and other "missing" data
+ * @param connectionsData
+ * @param newConnectionsData
+ * @returns {*}
+ */
+ enrichConnectionsData(connectionsData, newConnectionsData){
+ for(let i = 0; i < connectionsData.length; i++){
+ for(let newConnectionData of newConnectionsData){
+ if(connectionsData[i].id === newConnectionData.id){
+ // copy some missing data
+ connectionsData[i].character = newConnectionData.character;
+ connectionsData[i].created = newConnectionData.created;
+ connectionsData[i].type = newConnectionData.type;
+ // check for mass logs and copy data
+ if(newConnectionData.logs && newConnectionData.logs.length){
+ connectionsData[i].logs = newConnectionData.logs;
+ }
+ // check for signatures and copy data
+ if(newConnectionData.signatures && newConnectionData.signatures.length){
+ connectionsData[i].signatures = newConnectionData.signatures;
+ }
+ break;
+ }
+ }
+ }
+ return connectionsData;
+ }
+
+ /**
+ * @param mapId
+ * @param connectionsData
+ * @returns {Promise}
+ */
+ getConnectionsLogData(mapId, connectionsData){
+ let connectionIds = connectionsData.map(connectionData => connectionData.id);
+
+ // show loading animation
+ for(let connectionId of connectionIds){
+ let tableEls = this.moduleElement.querySelector('#' + this.getConnectionElementId(connectionId))
+ .getElementsByTagName('table');
+ $(tableEls).showLoadingAnimation();
+ }
+
+ return this.request('GET', 'Connection', connectionIds, {
+ mapId: mapId,
+ addData : ['signatures', 'logs'],
+ // filterData : ['logs'] // do not exclude connections with NO "logs" -> sig data will be used as well
+ }, {
+ connectionsData: connectionsData
+ }, context => {
+ // hide loading animation
+ for(let contextData of context.connectionsData){
+ let connectionEl = this.moduleElement.querySelector('#' + this.getConnectionElementId(contextData.id));
+ // connectionEl might be removed in meantime ( e.g. module removed)
+ if(connectionEl){
+ let tableEls = connectionEl.getElementsByTagName('table');
+ $(tableEls).hideLoadingAnimation();
+ }
+ }
+ });
+ }
+
+ /**
+ * replace/insert dataTables log data
+ * @param connectionsData
+ */
+ addConnectionsData(connectionsData){
+
+ let getRowIndexesByData = (tableApi, colName, value) => {
+ return tableApi.rows().eq(0).filter((rowIdx) => {
+ return (tableApi.cell(rowIdx, colName + ':name').data() === value);
+ });
+ };
+
+ for(let connectionData of connectionsData){
+ // find related dom element for current connection
+ let connectionElement = document.getElementById(this.getConnectionElementId(connectionData.id));
+ if(connectionElement){
+ // attach connectionData to connection information for later use ------------------
+ let connectionInfoElement = $(connectionElement.querySelector('.' + this._config.moduleTableClass));
+ connectionInfoElement.data('connectionData', connectionData);
+
+ // update dataTable ---------------------------------------------------------------
+ let tableApi = $(connectionElement).find('.dataTable').dataTable().api();
+
+ if(connectionData.logs && connectionData.logs.length > 0){
+ for(let i = 0; i < connectionData.logs.length; i++){
+ let rowData = connectionData.logs[i];
+ let rowNew;
+ let animationStatus = null;
+ let indexes = getRowIndexesByData(tableApi, 'index', rowData.id);
+ if(indexes.length === 0){
+ // row not found -> add new row
+ rowNew = tableApi.row.add(rowData);
+ animationStatus = 'added';
+ }else{
+ // update row with FIRST index
+ let row = tableApi.row(parseInt(indexes[0]));
+ let rowDataCurrent = row.data();
+
+ // check if row data changed
+ if(rowDataCurrent.updated.updated !== rowData.updated.updated){
+ // ... row changed -> delete old and re-add
+ // -> cell actions might have changed
+ row.remove();
+ rowNew = tableApi.row.add(rowData);
+ animationStatus = 'changed';
+ }
+ }
+
+ if(
+ animationStatus !== null &&
+ rowNew.length > 0
+ ){
+ rowNew.nodes().to$().data('animationStatus', animationStatus);
+ }
+ }
+ }else{
+ // clear table or leave empty
+ tableApi.clear();
+ }
+
+ // redraw dataTable
+ tableApi.draw(false);
+ }
+ }
+ }
+
+ /**
+ * get connection information element
+ * @param connectionData
+ * @returns {HTMLDivElement}
+ */
+ getInformationElement(connectionData){
+
+ // connection scope -----------------------------------------------------------------------
+ let scopeLabel = MapUtil.getScopeInfoForConnection(connectionData.scope, 'label');
+
+ let element = document.createElement('div');
+ element.classList.add(BaseModule.Util.config.dynamicAreaClass, this._config.controlAreaClass);
+
+ $(element).append(
+ $(' ', {
+ class: ['table', 'table-condensed', 'pf-table-fixed', this._config.moduleTableClass].join(' ')
+ }).data('showShip', this._config.showShip).append(
+ $('').append(
+ $('').append(
+ $('| ', {
+ class: ['pf-table-cell-20', 'text-right', Util.config.helpClass, 'pf-pie-chart'].join(' ')
+ }).attr('data-toggle', 'tooltip').attr('data-percent', '-100').easyPieChart({
+ barColor: (percent) => {
+ let color = '#e28a0d';
+ if((percent * -1) >= 100){
+ color = '#a52521';
+ }
+ return color;
+ },
+ overrideOptions: 'signed',
+ trackColor: '#5cb85c',
+ size: 14,
+ scaleColor: false,
+ lineWidth: 2,
+ lineCap: 'butt',
+ animate: false
+ }),
+ $(' | ', {
+ class: ['text-right'].join(' ')
+ }).attr('colspan', 2).append(
+ $('', {
+ class: 'pf-link',
+ html: connectionData.sourceAlias + ' '
+ }).on('click', function(){
+ Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.source});
+ }),
+ $('', {
+ class: [this._config.connectionInfoTableLabelSourceClass].join(' ')
+ }),
+ $('', {
+ class: 'fas fa-fw fa-angle-double-right'
+ }),
+ $('', {
+ class: [this._config.connectionInfoTableLabelTargetClass].join(' ')
+ }),
+ $('', {
+ class: 'pf-link',
+ html: ' ' + connectionData.targetAlias
+ }).on('click', function(){
+ Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.target});
+ })
+ )
+ )
+ ),
+ $('').append(
+ $('').append(
+ $('| ', {
+ class: ['text-right', Util.config.helpClass, this._config.connectionInfoTableCellMassTotalTooltipClass].join(' '),
+ html: ''
+ }),
+ $(' | ', {
+ text: scopeLabel.capitalize()
+ }),
+ $(' | ', {
+ class: ['text-right', this._config.connectionInfoTableCellConnectionClass].join(' ')
+ }).append(
+ $('', {
+ class: MapUtil.getConnectionFakeClassesByTypes(connectionData.type).join(' ')
+ })
+ )
+ ),
+ $(' ').append(
+ $('| ', {
+ class: ['text-right', Util.config.helpClass].join(' '),
+ html: '',
+ title: 'initial mass. From signature table'
+ }).attr('data-toggle', 'tooltip'),
+ $(' | ', {
+ text: 'Total mass'
+ }),
+ $(' | ', {
+ class: ['text-right', 'txt-color', this._config.connectionInfoTableCellMassTotalClass].join(' ')
+ })
+ ),
+ $(' | ', {
+ class: this._config.connectionInfoTableRowMassLogClass
+ }).append(
+ $('| ', {
+ class: ['text-right', Util.config.helpClass].join(' '),
+ title: 'recorded total jump mass'
+ }).attr('data-toggle', 'tooltip').append(
+ $('', {
+ class: [
+ 'fas', 'fa-fw', 'fa-question-circle'
+ ].join(' ')
+ }),
+ $('', {
+ class: [
+ 'fas', 'fa-fw', 'fa-adjust',
+ 'txt-color', 'txt-color-warning',
+ 'hidden'
+ ].join(' ')
+ }),
+ $('', {
+ class: [
+ 'far', 'fa-fw', 'fa-circle',
+ 'txt-color', 'txt-color-danger',
+ 'hidden'
+ ].join(' ')
+ })
+ ),
+ $(' | ', {
+ text: 'Logged mass'
+ }),
+ $(' | ', {
+ class: ['text-right', this._config.connectionInfoTableCellMassLogClass].join(' ')
+ })
+ ),
+ $(' | ', {
+ class: this._config.connectionInfoTableRowMassShipClass
+ }).append(
+ $('| ', {
+ class: ['text-right', Util.config.helpClass].join(' '),
+ title: 'current ship mass'
+ }).attr('data-toggle', 'tooltip').append(
+ $('', {
+ class: ['fas', 'fa-fw', 'fa-question-circle'].join(' ')
+ }),
+ $('', {
+ class: [
+ 'fas', 'fa-fw', 'fa-exclamation-triangle',
+ 'txt-color', 'txt-color-danger',
+ 'hidden'
+ ].join(' ')
+ })
+ ),
+ $(' | ', {
+ class: ['pf-table-cell-ellipses-auto'].join(' '),
+ text: 'Ship mass'
+ }),
+ $(' | ', {
+ class: ['text-right', 'txt-color', this._config.connectionInfoTableCellMassShipClass].join(' ')
+ })
+ ),
+ $(' | ').append(
+ $('| ', {
+ class: ['text-right', Util.config.helpClass].join(' '),
+ html: '',
+ title: 'max. mass left'
+ }).attr('data-toggle', 'tooltip'),
+ $(' | ', {
+ text: 'Mass left'
+ }),
+ $(' | ', {
+ class: ['text-right', 'txt-color', this._config.connectionInfoTableCellMassLeftClass].join(' ')
+ })
+ )
+ )
+ ).on('pf:updateInfoTable', (e, data) => {
+ // update information table -------------------------------------------------------
+ let tableElement = $(e.target);
+ let connectionData = tableElement.data('connectionData');
+ if(connectionData){
+ if(connectionData.scope === 'wh'){
+ // update signature information -------------------------------------------
+ let sourceLabelElement = tableElement.find('.' + this._config.connectionInfoTableLabelSourceClass);
+ let targetLabelElement = tableElement.find('.' + this._config.connectionInfoTableLabelTargetClass);
+
+ // get related jsPlumb connection
+ let connection = $().getConnectionById(data.mapId, data.connectionId);
+ let signatureTypeNames = MapUtil.getConnectionDataFromSignatures(connection, connectionData);
+
+ let sourceLabels = signatureTypeNames.source.labels;
+ let targetLabels = signatureTypeNames.target.labels;
+ sourceLabelElement.html(MapUtil.formatEndpointOverlaySignatureLabel(sourceLabels));
+ targetLabelElement.html(MapUtil.formatEndpointOverlaySignatureLabel(targetLabels));
+
+ // remove K162
+ sourceLabels = sourceLabels.diff(['K162']);
+ targetLabels = targetLabels.diff(['K162']);
+
+ // get static wormhole data by endpoint Labels
+ let wormholeName = '';
+ let wormholeData = null;
+ if(sourceLabels.length === 1 && targetLabels.length === 0){
+ wormholeName = sourceLabels[0];
+ }else if(sourceLabels.length === 0 && targetLabels.length === 1){
+ wormholeName = targetLabels[0];
+ }
+
+ if(
+ wormholeName &&
+ Init.wormholes.hasOwnProperty(wormholeName)
+ ){
+ wormholeData = Object.assign({}, Init.wormholes[wormholeName]);
+
+ // init wormhole tooltip ----------------------------------------------
+ let massTotalTooltipCell = tableElement.find('.' + this._config.connectionInfoTableCellMassTotalTooltipClass);
+ massTotalTooltipCell.addWormholeInfoTooltip(wormholeData);
+ }
+
+ // all required data is set -> re-calculate rows
+ tableElement.data('wormholeData', wormholeData);
+ tableElement.trigger('pf:calcInfoTable');
+ }
+
+ }
+ }).on('pf:calcInfoTable', e => {
+ // re-calculate information table from .data() cell values ------------------------
+ let tableElement = $(e.target);
+ let connectionData = tableElement.data('connectionData');
+ let massChartCell = tableElement.find('[data-percent]');
+
+ let wormholeData = tableElement.data('wormholeData');
+ let shipData = null;
+ let shipName = '';
+ let showShip = Boolean(tableElement.data('showShip'));
+ let massLogRow = tableElement.find('.' + this._config.connectionInfoTableRowMassLogClass);
+ let massShipRow = tableElement.find('.' + this._config.connectionInfoTableRowMassShipClass);
+
+ // icons
+ let massLogTooltipIcon = massLogRow.find('i.fa-question-circle');
+ let massLogStage2Icon = massLogRow.find('i.fa-adjust');
+ let massLogStage3Icon = massLogRow.find('i.fa-circle');
+
+ let massShipTooltipIcon = massShipRow.find('i.fa-question-circle');
+ let massShipWarningIcon = massShipRow.find('i.fa-exclamation-triangle');
+
+ // table cells
+ let connectionCell = tableElement.find('.' + this._config.connectionInfoTableCellConnectionClass);
+ let massTotalCell = tableElement.find('.' + this._config.connectionInfoTableCellMassTotalClass);
+ let massLogCell = tableElement.find('.' + this._config.connectionInfoTableCellMassLogClass);
+ let massShipCell = tableElement.find('.' + this._config.connectionInfoTableCellMassShipClass);
+ let massLeftCell = tableElement.find('.' + this._config.connectionInfoTableCellMassLeftClass);
+ let massTotal = null; // initial connection mass
+ let massReduction = 0; // default reduction (e.g. reduced, crit) in percent
+ let massLog = massLogCell.data('mass'); // recorded mass
+ let massLogTotal = massLog; // recorded mass + current ship
+ let massIndividual = null; // mass mass per jump
+ let massShip = 0; // current ship
+ let massIndividualError = false;
+
+ // get wormhole data from signature binding ---------------------------------------
+ if(wormholeData){
+ massTotal = parseInt(wormholeData.massTotal);
+ massIndividual = parseInt(wormholeData.massIndividual);
+ }
+
+ // get connection type (show fake connection div) ---------------------------------
+ connectionCell.find('div').removeClass().addClass(MapUtil.getConnectionFakeClassesByTypes(connectionData.type).join(' '));
+
+ // get wormhole status ------------------------------------------------------------
+ if(connectionData.type.indexOf('wh_critical') !== -1){
+ massReduction = 90;
+ massLogTooltipIcon.toggleClass('hidden', true);
+ massLogStage2Icon.toggleClass('hidden', true);
+ massLogStage3Icon.toggleClass('hidden', false);
+ massLogStage3Icon.parent().attr('title', 'stage 3 (critical)').tooltip('fixTitle');
+ }else if(connectionData.type.indexOf('wh_reduced') !== -1){
+ massReduction = 50;
+ massLogTooltipIcon.toggleClass('hidden', true);
+ massLogStage2Icon.toggleClass('hidden', false);
+ massLogStage3Icon.toggleClass('hidden', true);
+ massLogStage3Icon.parent().attr('title', 'stage 2 (reduced)').tooltip('fixTitle');
+ }else{
+ massLogTooltipIcon.toggleClass('hidden', false);
+ massLogStage2Icon.toggleClass('hidden', true);
+ massLogStage3Icon.toggleClass('hidden', true);
+ massLogStage3Icon.parent().attr('title', 'recorded total jump mass').tooltip('fixTitle');
+ }
+
+ if(massReduction){
+ let massLogReduction = massTotal / 100 * massReduction;
+ if(massLogReduction > massLog){
+ massLog = massLogTotal = massLogReduction;
+ }
+ }
+
+ // get current ship data ----------------------------------------------------------
+ massShipCell.parent().toggle(showShip);
+ if(showShip){
+ shipData = Util.getObjVal(Util.getCurrentCharacterData('log'), 'ship');
+ if(shipData){
+ if(shipData.mass){
+ massShip = parseInt(shipData.mass);
+
+ // check individual mass jump
+ if(massIndividual){
+ massIndividualError = massShip > massIndividual;
+ }
+ }
+ if(shipData.typeId && shipData.typeName){
+ shipName = shipData.typeName;
+ }
+ }
+ }
+
+ // update ship mass and "individual mass" cells ----------------------------------
+ massShipTooltipIcon.toggleClass('hidden', massIndividualError);
+ massShipWarningIcon.toggleClass('hidden', !massIndividualError);
+ let shipMassTooltip = 'current ship mass ' + (shipName ? '"' + shipName + '"' : '');
+ if(massIndividualError){
+ shipMassTooltip = '"' + shipName + '" exceeds max jump mass for this connection: ' + Util.formatMassValue(massIndividual);
+ }else{
+ // current ship mass check is OK -> add to massLogTotal
+ massLogTotal += massShip;
+ }
+ massShipTooltipIcon.parent().attr('title', shipMassTooltip).tooltip('fixTitle');
+
+ // current ship mass --------------------------------------------------------------
+ massShipCell.html( function(){
+ let cell = $(this);
+ let value = ' ';
+ let error = false;
+ let textLineThrough = false;
+ if(massShip > 0){
+ value += Util.formatMassValue(massShip);
+ if(massIndividualError){
+ error = textLineThrough = true;
+ value = ' ' + value;
+ }else{
+ value = '-' + value;
+ }
+ }else{
+ error = true;
+ value = 'undefined';
+ }
+
+ // change cell style
+ cell.toggleClass('txt-color-red', error)
+ .toggleClass('txt-color-warning', !error)
+ .toggleClass('pf-font-line-through', textLineThrough);
+
+ return value;
+ });
+
+ // calculate mass left ------------------------------------------------------------
+ let massLeft = massTotal - massLogTotal;
+ massLeft = (massLeft < 0) ? 0 : massLeft;
+ let massPercentLog = (massTotal > 0) ? Math.floor((100 / massTotal) * massLogTotal) : 0;
+
+ // update easyPieChart and tooltip ------------------------------------------------
+ let massPercentLeft = (100 - massPercentLog <= 0) ? 0 : '< ' + (100 - massPercentLog);
+ massChartCell.data('easyPieChart').enableAnimation().update(massPercentLog * -1);
+ massChartCell.attr('title', massPercentLeft + '% mass left').tooltip('fixTitle');
+
+ // update mass cells --------------------------------------------------------------
+ massTotalCell.html(massTotal > 0 ? Util.formatMassValue(massTotal) : 'undefined')
+ .toggleClass('txt-color-red', massTotal <= 0);
+ massLogCell.html('- ' + Util.formatMassValue(massLog));
+ massLeftCell.html(
+ massLeft > 0 ?
+ '~ ' + Util.formatMassValue(massLeft) :
+ (massLeft === 0 && massTotal) ?
+ 'will collapse' : 'undefined')
+ .toggleClass('txt-color-red', massLeft <= 0)
+ .toggleClass('txt-color-success', massLeft > 0);
+ })
+ );
+
+ $(element).find('[data-toggle="tooltip"]').tooltip({
+ container: 'body'
+ });
+
+ return element;
+ }
+
+ /**
+ * update/init multiple connection panels at once
+ * @param mapId
+ * @param connectionsDataUpdate
+ * @param connectionsDataRemove
+ */
+ updateConnectionPanels(mapId, connectionsDataUpdate, connectionsDataRemove){
+ for(let connectionData of connectionsDataRemove){
+ let connectionElement = this.moduleElement.querySelector('#' + this.getConnectionElementId(connectionData.id));
+ this.removeConnectionPanel(connectionElement);
+ }
+
+ for(let connectionData of connectionsDataUpdate){
+ this.updateConnectionPanel(mapId, connectionData);
+ }
+
+ // request connectionsLogData for each updated connection
+ if(connectionsDataUpdate.length){
+ this.getConnectionsLogData(mapId, connectionsDataUpdate)
+ //.then(payload => this.addConnectionsData(payload.data))
+ .then(payload => this.addConnectionsData(
+ this.enrichConnectionsData(payload.context.connectionsData, payload.data)
+ ))
+ .catch(payload => {
+ console.error(payload);
+ });
+ }
+
+ // remove module if no connection panel left
+ // --> all connection deselected on map
+ let connectionElements = this.getConnectionElements();
+ if(connectionElements.length === 0){
+ MapUtil.getTabContentElementByMapElement(this.moduleElement).trigger('pf:removeConnectionModules');
+ }
+
+ // hide "control" panel when multiple connection
+ let connectionEl = this.moduleElement.querySelector('#' + this.getConnectionElementId());
+ connectionEl.style.display = connectionElements.length < 2 ? 'block' : 'none';
+ }
+
+
+ /**
+ * remove connection Panel from moduleElement
+ * @param connectionElement
+ */
+ removeConnectionPanel(connectionElement){
+ connectionElement = $(connectionElement);
+ if(connectionElement.length){
+ // destroy dataTable (and remove table from DOM)
+ let logTable = connectionElement.find('.' + this._config.connectionInfoTableClass);
+ logTable.dataTable().api().destroy(true);
+ // remove belonging connectionElement
+ connectionElement.remove();
+ }
+ }
+
+ /**
+ * @param mapId
+ * @param connectionData
+ */
+ updateConnectionPanel(mapId, connectionData){
+ let module = this;
+
+ let rowElement = module.moduleElement.querySelector('.' + module._config.bodyClassName);
+ let connectionElement = rowElement.querySelector('#' + module.getConnectionElementId(connectionData.id));
+
+ if(!connectionElement){
+ connectionElement = module.newConnectionElement(mapId, connectionData.id);
+ connectionElement.append(module.getInformationElement(connectionData));
+
+ let tableEl = document.createElement('table');
+ tableEl.classList.add('compact', 'stripe', 'order-column', 'row-border', 'nowrap', module._config.connectionInfoTableClass);
+ tableEl.insertAdjacentHTML('beforeend', ' | | | | | | | |
|---|
');
+
+ connectionElement.append(tableEl);
+
+ // init empty table
+ let tableApi = $(tableEl).DataTable({
+ dom: '<"flex-row flex-between ' + module._config.tableToolbarCondensedClass + '"' +
+ '<"flex-col"i><"flex-col flex-grow"p><"flex-col"BS>>' +
+ '<"flex-row"<"flex-col flex-grow"tr>>',
+ buttons: {
+ name: 'tableTools',
+ buttons: [
+ {
+ name: 'addLog',
+ tag: 'a',
+ className: module._config.moduleHeadlineIconClass,
+ text: ' ',
+ action: function(e, tableApi, node, conf){
+ let logData = {};
+
+ // pre-fill form with current character data (if available)
+ let currentUserData = Util.getCurrentUserData();
+ if(currentUserData && currentUserData.character){
+ logData.character = {
+ id: currentUserData.character.id,
+ name: currentUserData.character.name
+ };
+ if(currentUserData.character.log){
+ logData.ship = {
+ id: currentUserData.character.log.ship.typeId,
+ name: currentUserData.character.log.ship.typeName,
+ mass: currentUserData.character.log.ship.mass
+ };
+ }
+ }
+
+ module.showLogDialog(connectionElement, connectionData, logData);
+ }
+ }
+ ]
+ },
+ pageLength: 8,
+ paging: true,
+ pagingType: 'simple',
+ lengthChange: false,
+ ordering: true,
+ order: [[ 4, 'desc' ]],
+ info: true,
+ searching: false,
+ hover: false,
+ autoWidth: false,
+ language: {
+ emptyTable: 'No jumps recorded',
+ info: '_START_ - _END_ of _MAX_',
+ infoEmpty: '',
+ paginate: {
+ previous: '',
+ next: ''
+ }
+ },
+ columnDefs: [
+ {
+ targets: 0,
+ name: 'index',
+ title: ' ',
+ orderable: false,
+ searchable: false,
+ width: 20,
+ className: ['text-center', 'txt-color'].join(' '),
+ data: 'id',
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ if(
+ !rowData.record ||
+ (rowData.updated.updated !== rowData.created.created)
+ ){
+ // log was manually modified or added
+ $(cell)
+ .addClass(Util.config.helpClass)
+ .addClass( 'txt-color-orange').tooltip({
+ title: 'added/updated manually'
+ });
+ }
+ }
+ },{
+ targets: 1,
+ name: 'ship',
+ title: '',
+ width: 26,
+ orderable: false,
+ className: [Util.config.helpDefaultClass, 'text-center', module._config.tableCellImageClass].join(' '),
+ data: 'ship',
+ render: {
+ _: function(data, type, row){
+ let value = data.typeId;
+ if(type === 'display'){
+ value = '  + ' "' + data.typeName + '") ';
+ }
+ return value;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ $(cell).find('img').tooltip();
+ }
+ },{
+ targets: 2,
+ name: 'character',
+ title: '',
+ width: 26,
+ orderable: false,
+ className: [Util.config.helpDefaultClass, 'text-center', module._config.tableCellImageClass].join(' '),
+ data: 'character',
+ render: {
+ _: (cellData, type, rowData, meta) => {
+ let value = cellData.name;
+ if(type === 'display'){
+ value = '  + ' "' + value + '") ';
+ }
+ return value;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ $(cell).find('img').tooltip();
+ }
+ },{
+ targets: 3,
+ name: 'mass',
+ title: 'mass',
+ className: ['text-right'].join(' ') ,
+ data: 'ship.mass',
+ render: {
+ _: (cellData, type, rowData, meta) => {
+ let value = cellData;
+ if(type === 'display'){
+ value = Util.formatMassValue(value);
+ if(!rowData.active){
+ // log is "deleted"
+ value = ' ' + value + '';
+ }
+ }
+ return value;
+ }
+ }
+ },{
+ targets: 4,
+ name: 'created',
+ title: 'log',
+ width: 55,
+ className: ['text-right', module._config.tableCellCounterClass].join(' '),
+ data: 'created.created'
+ },{
+ targets: 5,
+ name: 'edit',
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ className: ['text-center', module._config.tableCellActionClass, module._config.moduleHeadlineIconClass].join(' '),
+ data: null,
+ render: {
+ display: data => {
+ let icon = '';
+ if(data.active){
+ icon = ' ';
+ }
+ return icon;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ if($(cell).is(':empty')){
+ $(cell).removeClass(module._config.tableCellActionClass + ' ' + module._config.moduleHeadlineIconClass);
+ }else{
+ $(cell).on('click', function(e){
+ module.showLogDialog(connectionElement, connectionData, rowData);
+ });
+ }
+ }
+ },{
+ targets: 6,
+ name: 'delete',
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ className: ['text-center', module._config.tableCellActionClass].join(' '),
+ data: 'active',
+ render: {
+ display: data => {
+ let val = ' ';
+ if(data){
+ val = ' ';
+ }
+ return val;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ if(rowData.active){
+ let confirmationSettings = {
+ title: '---',
+ template: Util.getConfirmationTemplate(null, {
+ size: 'small',
+ noTitle: true
+ }),
+ onConfirm : function(e, target){
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowData = tableApi.row($(cell).parents('tr')).data();
+
+ $(connectionElement.getElementsByTagName('table')).showLoadingAnimation();
+
+ module.request('DELETE', 'Log', rowData.id, {}, {
+ connectionElement: connectionElement
+ }, module.requestAlways)
+ .then(
+ payload => {
+ module.addConnectionsData(module.enrichConnectionsData([connectionData], payload.data));
+ },
+ Util.handleAjaxErrorResponse
+ );
+ }
+ };
+
+ // init confirmation dialog
+ $(cell).confirmation(confirmationSettings);
+ }else {
+ $(cell).on('click', function(e){
+ $(connectionElement.getElementsByTagName('table')).showLoadingAnimation();
+
+ let requestData = {
+ active: 1
+ };
+
+ module.request('PATCH', 'Log', rowData.id, requestData, {
+ connectionElement: connectionElement
+ }, module.requestAlways)
+ .then(
+ payload => {
+ module.addConnectionsData(module.enrichConnectionsData([connectionData], payload.data));
+ },
+ Util.handleAjaxErrorResponse
+ );
+ });
+ }
+ }
+ }
+ ],
+ initComplete: function(settings, json){
+ Counter.initTableCounter(this, ['created:name']);
+ },
+ drawCallback: function(settings){
+ let animationRows = this.api().rows().nodes().to$().filter(function(a,b ){
+ return (
+ $(this).data('animationStatus') ||
+ $(this).data('animationTimer')
+ );
+ });
+
+ for(let i = 0; i < animationRows.length; i++){
+ $(animationRows[i]).pulseBackgroundColor($(animationRows[i]).data('animationStatus'));
+ $(animationRows[i]).removeData('animationStatus');
+ }
+
+ },
+ footerCallback: function(row, data, start, end, display ){
+ let tableApi = this.api();
+ let sumColumnIndexes = ['mass:name', 'delete:name'];
+
+ // column data for "sum" columns over this page
+ let pageTotalColumns = tableApi
+ .columns(sumColumnIndexes, { page: 'all'} )
+ .data();
+
+ // sum columns for "total" sum
+ pageTotalColumns.each((colData, colIndex) => {
+ pageTotalColumns[colIndex] = colData.reduce((sum, val, rowIndex) => {
+ // sum "mass" (colIndex 0) only if not "deleted" (colIndex 1)
+ if(colIndex === 0 && pageTotalColumns[1][rowIndex]){
+ return sum + parseInt(val);
+ }else{
+ return sum;
+ }
+ }, 0);
+ });
+
+ sumColumnIndexes.forEach((colSelector, index) => {
+ // only "mass" column footer needs updates
+ if(colSelector === 'mass:name'){
+ $(tableApi.column(colSelector).footer()).text( Util.formatMassValue(pageTotalColumns[index]) );
+
+ // save mass for further reCalculation of "info" table
+ $(connectionElement).find('.' + module._config.connectionInfoTableCellMassLogClass).data('mass', pageTotalColumns[index]);
+ }
+ });
+
+ // calculate "info" table -----------------------------------------------------
+ $(connectionElement).find('.' + module._config.moduleTableClass).trigger('pf:updateInfoTable', $(connectionElement).data());
+ }
+ });
+
+ // find position to insert
+ rowElement.querySelector('#' + module.getConnectionElementId()).insertAdjacentElement('beforebegin', connectionElement);
+
+
+ tableApi.on('order.dt search.dt', function(){
+ let pageInfo = tableApi.page.info();
+ tableApi.column('index:name', {search:'applied', order:'applied'}).nodes().each((cell, i) => {
+ let content = (pageInfo.recordsTotal - i) + '.';
+ $(cell).html(content);
+ });
+ });
+ }
+ }
+
+ /**
+ * callback after ajax request
+ * -> is always called regardless of error response or not
+ * @param context
+ */
+ requestAlways(context){
+ $(context.connectionElement.getElementsByTagName('table')).hideLoadingAnimation();
+ }
+
+ /**
+ * show jump log dialog
+ * @param connectionElement
+ * @param connectionData
+ * @param logData
+ */
+ showLogDialog(connectionElement, connectionData, logData = {}){
+
+ let data = {
+ id: this._config.connectionDialogId,
+ typeSelectId: this._config.typeSelectId,
+ shipMassId: this._config.shipMassId,
+ characterSelectId: this._config.characterSelectId,
+ logData: logData,
+ massFormat: () => {
+ return (val, render) => {
+ return (parseInt(render(val) || 0) / 1000) || '';
+ };
+ }
+ };
+
+ requirejs(['text!templates/dialog/connection_log.html', 'mustache'], (template, Mustache) => {
+ let content = Mustache.render(template, data);
+
+ let connectionDialog = bootbox.dialog({
+ title: 'Jump log',
+ message: content,
+ show: false,
+ buttons: {
+ close: {
+ label: 'cancel',
+ className: 'btn-default'
+ },
+ success: {
+ label: ' save',
+ className: 'btn-success',
+ callback: e => {
+ let form = $(e.delegateTarget).find('form');
+
+ // validate form
+ form.validator('validate');
+
+ // check whether the form is valid
+ let formValid = form.isValidForm();
+
+ if(formValid){
+ // get form data
+ let formData = form.getFormValues();
+ formData.id = Util.getObjVal(logData, 'id') || 0;
+ formData.connectionId = Util.getObjVal(connectionData, 'id') || 0;
+ formData.shipTypeId = Util.getObjVal(formData, 'shipTypeId') || 0;
+ formData.shipMass = parseInt((Util.getObjVal(formData, 'shipMass') || 0) * 1000);
+ formData.characterId = Util.getObjVal(formData, 'characterId') || 0;
+
+ // we need some "additional" form data from the Select2 dropdown
+ // -> data is required on the backend side
+ let formDataShip = form.find('#' + this._config.typeSelectId).select2('data');
+ let formDataCharacter = form.find('#' + this._config.characterSelectId).select2('data');
+ formData.shipTypeName = formDataShip.length ? formDataShip[0].text : '';
+ formData.characterName = formDataCharacter.length ? formDataCharacter[0].text : '';
+
+ let method = formData.id ? 'PATCH' : 'PUT';
+
+ this.request(method, 'Log', formData.id, formData, {
+ connectionElement: connectionElement,
+ formElement: form
+ }, this.requestAlways)
+ .then(
+ payload => {
+ this.addConnectionsData(this.enrichConnectionsData([connectionData], payload.data));
+ $(e.delegateTarget).modal('hide');
+ },
+ Util.handleAjaxErrorResponse
+ );
+
+ }
+
+ return false;
+ }
+ }
+ }
+ });
+
+ connectionDialog.on('show.bs.modal', e => {
+ let modalContent = $(e.target);
+
+ // init type select live search
+ let selectElementType = modalContent.find('#' + this._config.typeSelectId);
+ selectElementType.initUniverseTypeSelect({
+ categoryIds: [6],
+ maxSelectionLength: 1,
+ selected: [Util.getObjVal(logData, 'ship.typeId')]
+ }).on('select2:select select2:unselecting', e => {
+ // get ship mass from selected ship type and update mass input field
+ let shipMass = e.params.data ? e.params.data.mass / 1000 : '';
+ modalContent.find('#' + this._config.shipMassId).val(shipMass);
+ });
+
+ // init character select live search
+ let selectElementCharacter = modalContent.find('#' + this._config.characterSelectId);
+ selectElementCharacter.initUniverseSearch({
+ categoryNames: ['character'],
+ maxSelectionLength: 1
+ });
+
+ });
+
+ // show dialog
+ connectionDialog.modal('show');
+ });
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+ }
+ };
+
+ ConnectionInfoModule.isPlugin = false; // module is defined as 'plugin'
+ ConnectionInfoModule.scope = 'connection'; // module scope controls how module gets updated and what type of data is injected
+ ConnectionInfoModule.sortArea = 'a'; // default sortable area
+ ConnectionInfoModule.position = 1; // default sort/order position within sortable area
+ ConnectionInfoModule.label = 'Mass tracking'; // static module label (e.g. description)
+
+ ConnectionInfoModule.defaultConfig = {
+ className: 'pf-connection-info-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Connection',
// headline toolbar
- moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
moduleHeadlineIconRefreshClass: 'pf-module-icon-button-refresh', // class for "refresh" icon
moduleHeadlineIconCurrentMassClass: 'pf-module-icon-button-mass', // class for "current ship mass" toggle icon
+ // body
connectionInfoPanelClass: 'pf-connection-info-panel', // class for connection info panels
- connectionInfoPanelId: 'pf-connection-info-panel-', // id prefix for connection info panels
-
- controlAreaClass: 'pf-module-control-area', // class for "control" areas
// info table
moduleTableClass: 'pf-module-table', // class for module tables
@@ -62,1257 +1283,5 @@ define([
showShip: true // default for "show current ship mass" toggle
};
- /**
- * get module toolbar element
- * @returns {*|jQuery|HTMLElement|void}
- */
- let getHeadlineToolbar = () => {
- let headlineToolbar = $(' ', {
- class: 'pull-right'
- }).append(
- $('', {
- class: ['fas', 'fa-fw', 'fa-male',
- config.showShip ? 'active' : '' ,
- config.moduleHeadlineIconClass,
- config.moduleHeadlineIconCurrentMassClass].join(' '),
- title: 'toggle current ship mass'
- }).attr('data-html', 'true').attr('data-toggle', 'tooltip'),
- $('', {
- class: ['fas', 'fa-fw', 'fa-sync',
- config.moduleHeadlineIconClass,
- config.moduleHeadlineIconRefreshClass].join(' '),
- title: 'refresh all'
- }).attr('data-html', 'true').attr('data-toggle', 'tooltip')
- );
-
- headlineToolbar.find('[data-toggle="tooltip"]').tooltip({
- container: 'body'
- });
-
- return headlineToolbar;
- };
-
- /**
- * get new connection element
- * @param mapId
- * @param connectionId
- * @returns {jQuery}
- */
- let getConnectionElement = (mapId, connectionId) => {
- return $('', {
- id: getConnectionElementId(connectionId),
- class: ['col-xs-12', 'col-sm-4', 'col-lg-3' , config.connectionInfoPanelClass].join(' ')
- }).data({
- mapId: mapId,
- connectionId: connectionId
- });
- };
-
- /**
- * get info control panel element
- * @param mapId
- * @returns {void|jQuery|*}
- */
- let getInfoPanelControl = mapId => {
- return getConnectionElement(mapId, 0).append($(' ', {
- class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' '),
- html: ' add connection ctrl + click'
- }));
- };
-
- /**
- * get connection information element
- * @param connectionData
- * @returns {void|*|jQuery|HTMLElement}
- */
- let getInformationElement = (connectionData) => {
-
- // connection scope -----------------------------------------------------------------------
- let scopeLabel = MapUtil.getScopeInfoForConnection(connectionData.scope, 'label');
-
- let element = $(' ', {
- class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' ')
- }).append(
- $(' ', {
- class: ['table', 'table-condensed', 'pf-table-fixed', config.moduleTableClass].join(' ')
- }).data('showShip', config.showShip).append(
- $('').append(
- $('').append(
- $('| ', {
- class: ['pf-table-cell-20', 'text-right', Util.config.helpClass, 'pf-pie-chart'].join(' ')
- }).attr('data-toggle', 'tooltip').attr('data-percent', '-100').easyPieChart({
- barColor: (percent) => {
- let color = '#e28a0d';
- if((percent * -1) >= 100){
- color = '#a52521';
- }
- return color;
- },
- overrideOptions: 'signed',
- trackColor: '#5cb85c',
- size: 14,
- scaleColor: false,
- lineWidth: 2,
- lineCap: 'butt',
- animate: false
- }),
- $(' | ', {
- class: ['text-right'].join(' ')
- }).attr('colspan', 2).append(
- $('', {
- class: 'pf-link',
- html: connectionData.sourceAlias + ' '
- }).on('click', function(){
- Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.source});
- }),
- $('', {
- class: [config.connectionInfoTableLabelSourceClass].join(' ')
- }),
- $('', {
- class: 'fas fa-fw fa-angle-double-right'
- }),
- $('', {
- class: [config.connectionInfoTableLabelTargetClass].join(' ')
- }),
- $('', {
- class: 'pf-link',
- html: ' ' + connectionData.targetAlias
- }).on('click', function(){
- Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.target});
- })
- )
- )
- ),
- $('').append(
- $('').append(
- $('| ', {
- class: ['text-right', Util.config.helpClass, config.connectionInfoTableCellMassTotalTooltipClass].join(' '),
- html: ''
- }),
- $(' | ', {
- text: scopeLabel.capitalize()
- }),
- $(' | ', {
- class: ['text-right', config.connectionInfoTableCellConnectionClass].join(' ')
- }).append(
- $('', {
- class: MapUtil.getConnectionFakeClassesByTypes(connectionData.type).join(' ')
- })
- )
- ),
- $(' ').append(
- $('| ', {
- class: ['text-right', Util.config.helpClass].join(' '),
- html: '',
- title: 'initial mass. From signature table'
- }).attr('data-toggle', 'tooltip'),
- $(' | ', {
- text: 'Total mass'
- }),
- $(' | ', {
- class: ['text-right', 'txt-color', config.connectionInfoTableCellMassTotalClass].join(' ')
- })
- ),
- $(' | ', {
- class: config.connectionInfoTableRowMassLogClass
- }).append(
- $('| ', {
- class: ['text-right', Util.config.helpClass].join(' '),
- title: 'recorded total jump mass'
- }).attr('data-toggle', 'tooltip').append(
- $('', {
- class: [
- 'fas', 'fa-fw', 'fa-question-circle'
- ].join(' ')
- }),
- $('', {
- class: [
- 'fas', 'fa-fw', 'fa-adjust',
- 'txt-color', 'txt-color-warning',
- 'hidden'
- ].join(' ')
- }),
- $('', {
- class: [
- 'far', 'fa-fw', 'fa-circle',
- 'txt-color', 'txt-color-danger',
- 'hidden'
- ].join(' ')
- })
- ),
- $(' | ', {
- text: 'Logged mass'
- }),
- $(' | ', {
- class: ['text-right', config.connectionInfoTableCellMassLogClass].join(' ')
- })
- ),
- $(' | ', {
- class: config.connectionInfoTableRowMassShipClass
- }).append(
- $('| ', {
- class: ['text-right', Util.config.helpClass].join(' '),
- title: 'current ship mass'
- }).attr('data-toggle', 'tooltip').append(
- $('', {
- class: ['fas', 'fa-fw', 'fa-question-circle'].join(' ')
- }),
- $('', {
- class: [
- 'fas', 'fa-fw', 'fa-exclamation-triangle',
- 'txt-color', 'txt-color-danger',
- 'hidden'
- ].join(' ')
- })
- ),
- $(' | ', {
- class: ['pf-table-cell-ellipses-auto'].join(' '),
- text: 'Ship mass'
- }),
- $(' | ', {
- class: ['text-right', 'txt-color', config.connectionInfoTableCellMassShipClass].join(' ')
- })
- ),
- $(' | ').append(
- $('| ', {
- class: ['text-right', Util.config.helpClass].join(' '),
- html: '',
- title: 'max. mass left'
- }).attr('data-toggle', 'tooltip'),
- $(' | ', {
- text: 'Mass left'
- }),
- $(' | ', {
- class: ['text-right', 'txt-color', config.connectionInfoTableCellMassLeftClass].join(' ')
- })
- )
- )
- ).on('pf:updateInfoTable', function(e, data){
- // update information table -------------------------------------------------------
- let tableElement = $(this);
- let connectionData = tableElement.data('connectionData');
- if(connectionData){
- if(connectionData.scope === 'wh'){
- // update signature information -------------------------------------------
- let sourceLabelElement = tableElement.find('.' + config.connectionInfoTableLabelSourceClass);
- let targetLabelElement = tableElement.find('.' + config.connectionInfoTableLabelTargetClass);
-
- // get related jsPlumb connection
- let connection = $().getConnectionById(data.mapId, data.connectionId);
- let signatureTypeNames = MapUtil.getConnectionDataFromSignatures(connection, connectionData);
-
- let sourceLabels = signatureTypeNames.source.labels;
- let targetLabels = signatureTypeNames.target.labels;
- sourceLabelElement.html(MapUtil.formatEndpointOverlaySignatureLabel(sourceLabels));
- targetLabelElement.html(MapUtil.formatEndpointOverlaySignatureLabel(targetLabels));
-
- // remove K162
- sourceLabels = sourceLabels.diff(['K162']);
- targetLabels = targetLabels.diff(['K162']);
-
- // get static wormhole data by endpoint Labels
- let wormholeName = '';
- let wormholeData = null;
- if(sourceLabels.length === 1 && targetLabels.length === 0){
- wormholeName = sourceLabels[0];
- }else if(sourceLabels.length === 0 && targetLabels.length === 1){
- wormholeName = targetLabels[0];
- }
-
- if(
- wormholeName &&
- Init.wormholes.hasOwnProperty(wormholeName)
- ){
- wormholeData = Object.assign({}, Init.wormholes[wormholeName]);
-
- // init wormhole tooltip ----------------------------------------------
- let massTotalTooltipCell = tableElement.find('.' + config.connectionInfoTableCellMassTotalTooltipClass);
- massTotalTooltipCell.addWormholeInfoTooltip(wormholeData);
- }
-
- // all required data is set -> re-calculate rows
- tableElement.data('wormholeData', wormholeData);
- tableElement.trigger('pf:calcInfoTable');
- }
-
- }
- }).on('pf:calcInfoTable', function(e){
- // re-calculate information table from .data() cell values ------------------------
- let tableElement = $(this);
- let connectionData = tableElement.data('connectionData');
- let massChartCell = tableElement.find('[data-percent]');
-
- let wormholeData = tableElement.data('wormholeData');
- let shipData = null;
- let shipName = '';
- let showShip = Boolean(tableElement.data('showShip'));
- let massLogRow = tableElement.find('.' + config.connectionInfoTableRowMassLogClass);
- let massShipRow = tableElement.find('.' + config.connectionInfoTableRowMassShipClass);
-
- // icons
- let massLogTooltipIcon = massLogRow.find('i.fa-question-circle');
- let massLogStage2Icon = massLogRow.find('i.fa-adjust');
- let massLogStage3Icon = massLogRow.find('i.fa-circle');
-
- let massShipTooltipIcon = massShipRow.find('i.fa-question-circle');
- let massShipWarningIcon = massShipRow.find('i.fa-exclamation-triangle');
-
- // table cells
- let connectionCell = tableElement.find('.' + config.connectionInfoTableCellConnectionClass);
- let massTotalCell = tableElement.find('.' + config.connectionInfoTableCellMassTotalClass);
- let massLogCell = tableElement.find('.' + config.connectionInfoTableCellMassLogClass);
- let massShipCell = tableElement.find('.' + config.connectionInfoTableCellMassShipClass);
- let massLeftCell = tableElement.find('.' + config.connectionInfoTableCellMassLeftClass);
- let massTotal = null; // initial connection mass
- let massReduction = 0; // default reduction (e.g. reduced, crit) in percent
- let massLog = massLogCell.data('mass'); // recorded mass
- let massLogTotal = massLog; // recorded mass + current ship
- let massIndividual = null; // mass mass per jump
- let massShip = 0; // current ship
- let massIndividualError = false;
-
- // get wormhole data from signature binding ---------------------------------------
- if(wormholeData){
- massTotal = parseInt(wormholeData.massTotal);
- massIndividual = parseInt(wormholeData.massIndividual);
- }
-
- // get connection type (show fake connection div) ---------------------------------
- connectionCell.find('div').removeClass().addClass(MapUtil.getConnectionFakeClassesByTypes(connectionData.type).join(' '));
-
- // get wormhole status ------------------------------------------------------------
- if(connectionData.type.indexOf('wh_critical') !== -1){
- massReduction = 90;
- massLogTooltipIcon.toggleClass('hidden', true);
- massLogStage2Icon.toggleClass('hidden', true);
- massLogStage3Icon.toggleClass('hidden', false);
- massLogStage3Icon.parent().attr('title', 'stage 3 (critical)').tooltip('fixTitle');
- }else if(connectionData.type.indexOf('wh_reduced') !== -1){
- massReduction = 50;
- massLogTooltipIcon.toggleClass('hidden', true);
- massLogStage2Icon.toggleClass('hidden', false);
- massLogStage3Icon.toggleClass('hidden', true);
- massLogStage3Icon.parent().attr('title', 'stage 2 (reduced)').tooltip('fixTitle');
- }else{
- massLogTooltipIcon.toggleClass('hidden', false);
- massLogStage2Icon.toggleClass('hidden', true);
- massLogStage3Icon.toggleClass('hidden', true);
- massLogStage3Icon.parent().attr('title', 'recorded total jump mass').tooltip('fixTitle');
- }
-
- if(massReduction){
- let massLogReduction = massTotal / 100 * massReduction;
- if(massLogReduction > massLog){
- massLog = massLogTotal = massLogReduction;
- }
- }
-
- // get current ship data ----------------------------------------------------------
- massShipCell.parent().toggle(showShip);
- if(showShip){
- shipData = Util.getObjVal(Util.getCurrentCharacterLog(), 'ship');
- if(shipData){
- if(shipData.mass){
- massShip = parseInt(shipData.mass);
-
- // check individual mass jump
- if(massIndividual){
- massIndividualError = massShip > massIndividual;
- }
- }
- if(shipData.typeId && shipData.typeName){
- shipName = shipData.typeName;
- }
- }
- }
-
- // update ship mass and "individual mass" cells ----------------------------------
- massShipTooltipIcon.toggleClass('hidden', massIndividualError);
- massShipWarningIcon.toggleClass('hidden', !massIndividualError);
- let shipMassTooltip = 'current ship mass ' + (shipName ? '"' + shipName + '"' : '');
- if(massIndividualError){
- shipMassTooltip = '"' + shipName + '" exceeds max jump mass for this connection: ' + Util.formatMassValue(massIndividual);
- }else{
- // current ship mass check is OK -> add to massLogTotal
- massLogTotal += massShip;
- }
- massShipTooltipIcon.parent().attr('title', shipMassTooltip).tooltip('fixTitle');
-
- // current ship mass --------------------------------------------------------------
- massShipCell.html( function(){
- let cell = $(this);
- let value = ' ';
- let error = false;
- let textLineThrough = false;
- if(massShip > 0){
- value += Util.formatMassValue(massShip);
- if(massIndividualError){
- error = textLineThrough = true;
- value = ' ' + value;
- }else{
- value = '-' + value;
- }
- }else{
- error = true;
- value = 'undefined';
- }
-
- // change cell style
- cell.toggleClass('txt-color-red', error)
- .toggleClass('txt-color-warning', !error)
- .toggleClass('pf-font-line-through', textLineThrough);
-
- return value;
- });
-
- // calculate mass left ------------------------------------------------------------
- let massLeft = massTotal - massLogTotal;
- massLeft = (massLeft < 0) ? 0 : massLeft;
- let massPercentLog = (massTotal > 0) ? Math.floor((100 / massTotal) * massLogTotal) : 0;
-
- // update easyPieChart and tooltip ------------------------------------------------
- let massPercentLeft = (100 - massPercentLog <= 0) ? 0 : '< ' + (100 - massPercentLog);
- massChartCell.data('easyPieChart').enableAnimation().update(massPercentLog * -1);
- massChartCell.attr('title', massPercentLeft + '% mass left').tooltip('fixTitle');
-
- // update mass cells --------------------------------------------------------------
- massTotalCell.html(massTotal > 0 ? Util.formatMassValue(massTotal) : 'undefined')
- .toggleClass('txt-color-red', massTotal <= 0);
- massLogCell.html('- ' + Util.formatMassValue(massLog));
- massLeftCell.html(
- massLeft > 0 ?
- '~ ' + Util.formatMassValue(massLeft) :
- (massLeft === 0 && massTotal) ?
- 'will collapse' : 'undefined')
- .toggleClass('txt-color-red', massLeft <= 0)
- .toggleClass('txt-color-success', massLeft > 0);
- })
- );
-
- element.find('[data-toggle="tooltip"]').tooltip({
- container: 'body'
- });
-
- return element;
- };
-
- /**
- * get HTML id by connectionId
- * @param connectionId
- * @returns {string}
- */
- let getConnectionElementId = connectionId => config.connectionInfoPanelId + connectionId;
-
- /**
- * get all visible connection panel elements
- * @param moduleElement
- * @returns {*|T|{}}
- */
- let getConnectionElements = moduleElement => moduleElement.find('.' + config.connectionInfoPanelClass).not('#' + getConnectionElementId(0));
-
- /**
- * enrich connectionData with "logs" data (if available) and other "missing" data
- * @param connectionsData
- * @param newConnectionsData
- * @returns {*}
- */
- let enrichConnectionsData = (connectionsData, newConnectionsData) => {
- for(let i = 0; i < connectionsData.length; i++){
- for(let newConnectionData of newConnectionsData){
- if(connectionsData[i].id === newConnectionData.id){
- // copy some missing data
- connectionsData[i].character = newConnectionData.character;
- connectionsData[i].created = newConnectionData.created;
- connectionsData[i].type = newConnectionData.type;
- // check for mass logs and copy data
- if(newConnectionData.logs && newConnectionData.logs.length){
- connectionsData[i].logs = newConnectionData.logs;
- }
- // check for signatures and copy data
- if(newConnectionData.signatures && newConnectionData.signatures.length){
- connectionsData[i].signatures = newConnectionData.signatures;
- }
- break;
- }
- }
- }
- return connectionsData;
- };
-
- /**
- * request connection log data
- * @param requestData
- * @param context
- * @param callback
- */
- let requestConnectionLogData = (requestData, context, callback) => {
- // show loading animation
- for(let connectionId of requestData.connectionIds){
- context.moduleElement.find('#' + getConnectionElementId(connectionId) + ' table').showLoadingAnimation();
- }
-
- $.ajax({
- type: 'POST',
- url: Init.path.getMapConnectionData,
- data: requestData,
- dataType: 'json',
- context: context
- }).done(function(connectionsData){
- this.connectionsData = enrichConnectionsData(this.connectionsData, connectionsData);
-
- callback(this.moduleElement, this.connectionsData);
- }).always(function(){
- // hide loading animation
- for(let contextData of this.connectionsData){
- context.moduleElement.find('#' + getConnectionElementId(contextData.id) + ' table').hideLoadingAnimation();
- }
- });
- };
-
- /**
- * @see requestConnectionLogData
- * @param moduleElement
- * @param mapId
- * @param connectionsData
- */
- let getConnectionsLogData = (moduleElement, mapId, connectionsData) => {
- let connectionIds = [];
- for(let connectionData of connectionsData){
- connectionIds.push(connectionData.id);
- }
-
- let requestData = {
- mapId: mapId,
- connectionIds: connectionIds,
- addData : ['signatures', 'logs'],
- // filterData : ['logs'] // do not exclude connections with NO "logs" -> sig data will be used as well
- };
-
- let contextData = {
- moduleElement: moduleElement,
- connectionsData: connectionsData
- };
-
- requestConnectionLogData(requestData, contextData, addConnectionsData);
- };
-
- /**
- * replace/insert dataTables log data
- * @param moduleElement
- * @param connectionsData
- */
- let addConnectionsData = (moduleElement, connectionsData) => {
-
- let getRowIndexesByData = (tableApi, colName, value) => {
- return tableApi.rows().eq(0).filter((rowIdx) => {
- return (tableApi.cell(rowIdx, colName + ':name').data() === value);
- });
- };
-
- for(let connectionData of connectionsData){
- // find related dom element for current connection
- let connectionElement = moduleElement.find('#' + getConnectionElementId(connectionData.id));
- if(connectionElement.length){
- // attach connectionData to connection information for later use ------------------
- let connectionInfoElement = connectionElement.find('.' + config.moduleTableClass);
- connectionInfoElement.data('connectionData', connectionData);
-
- // update dataTable ---------------------------------------------------------------
- let tableApi = connectionElement.find('.dataTable').dataTable().api();
-
- if(connectionData.logs && connectionData.logs.length > 0){
- for(let i = 0; i < connectionData.logs.length; i++){
- let rowData = connectionData.logs[i];
- let rowNew = null;
- let animationStatus = null;
- let indexes = getRowIndexesByData(tableApi, 'index', rowData.id);
- if(indexes.length === 0){
- // row not found -> add new row
- rowNew = tableApi.row.add(rowData);
- animationStatus = 'added';
- }else{
- // update row with FIRST index
- let row = tableApi.row( parseInt(indexes[0]));
- let rowDataCurrent = row.data();
-
- // check if row data changed
- if(rowDataCurrent.updated.updated !== rowData.updated.updated){
- // ... row changed -> delete old and re-add
- // -> cell actions might have changed
- row.remove();
- rowNew = tableApi.row.add(rowData);
- animationStatus = 'changed';
- }
- }
-
- if(
- animationStatus !== null &&
- rowNew.length > 0
- ){
- rowNew.nodes().to$().data('animationStatus', animationStatus);
- }
- }
- }else{
- // clear table or leave empty
- tableApi.clear();
- }
-
- // redraw dataTable
- tableApi.draw(false);
- }
- }
- };
-
- /**
- *
- * @param moduleElement
- * @param mapId
- * @param connectionData
- */
- let updateConnectionPanel = (moduleElement, mapId, connectionData) => {
- let rowElement = moduleElement.find('.row');
- let connectionElement = rowElement.find('#' + getConnectionElementId(connectionData.id));
-
- if( !connectionElement.length ){
- connectionElement = getConnectionElement(mapId, connectionData.id);
- connectionElement.append(getInformationElement(connectionData));
-
- let table = $('', {
- class: ['compact', 'stripe', 'order-column', 'row-border', 'nowrap', config.connectionInfoTableClass].join(' ')
- }).append(' | | | | | | |
|---|
');
- connectionElement.append(table);
-
- // init empty table
- let logTable = table.DataTable({
- dom: '<"container-fluid"' +
- '<"row ' + config.tableToolbarCondensedClass + '"' +
- '<"col-xs-5"i><"col-xs-5"p><"col-xs-2 text-right"B>>' +
- '<"row"tr>>',
- buttons: {
- name: 'tableTools',
- buttons: [
- {
- name: 'addLog',
- tag: 'a',
- className: config.moduleHeadlineIconClass,
- text: '',
- action: function(e, tableApi, node, conf){
- let logData = {};
-
- // pre-fill form with current character data (if available)
- let currentUserData = Util.getCurrentUserData();
- if(currentUserData && currentUserData.character){
- logData.character = {
- id: currentUserData.character.id,
- name: currentUserData.character.name
- };
- if(currentUserData.character.log){
- logData.ship = {
- id: currentUserData.character.log.ship.typeId,
- name: currentUserData.character.log.ship.typeName,
- mass: currentUserData.character.log.ship.mass
- };
- }
- }
-
- showLogDialog(moduleElement, connectionElement, connectionData, logData);
- }
- }
- ]
- },
- pageLength: 8,
- paging: true,
- pagingType: 'simple',
- lengthChange: false,
- ordering: true,
- order: [[ 4, 'desc' ]],
- info: true,
- searching: false,
- hover: false,
- autoWidth: false,
- language: {
- emptyTable: 'No jumps recorded',
- info: '_START_ - _END_ of _MAX_',
- infoEmpty: '',
- paginate: {
- previous: '',
- next: ''
- }
- },
- columnDefs: [
- {
- targets: 0,
- name: 'index',
- title: '',
- orderable: false,
- searchable: false,
- width: 20,
- className: ['text-center', 'txt-color'].join(' '),
- data: 'id',
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- if(
- !rowData.record ||
- (rowData.updated.updated !== rowData.created.created)
- ){
- // log was manually modified or added
- $(cell)
- .addClass(Util.config.helpClass)
- .addClass( 'txt-color-orange').tooltip({
- container: 'body',
- title: 'added/updated manually'
- });
- }
- }
- },{
- targets: 1,
- name: 'ship',
- title: '',
- width: 26,
- orderable: false,
- className: [Util.config.helpDefaultClass, 'text-center', config.tableCellImageClass].join(' '),
- data: 'ship',
- render: {
- _: function(data, type, row){
- let value = data.typeId;
- if(type === 'display'){
- value = '';
- }
- return value;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- $(cell).find('img').tooltip();
- }
- },{
- targets: 2,
- name: 'character',
- title: '',
- width: 26,
- orderable: false,
- className: [Util.config.helpDefaultClass, 'text-center', config.tableCellImageClass].join(' '),
- data: 'character',
- render: {
- _: (cellData, type, rowData, meta) => {
- let value = cellData.name;
- if(type === 'display'){
- value = '';
- }
- return value;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- $(cell).find('img').tooltip();
- }
- },{
- targets: 3,
- name: 'mass',
- title: 'mass',
- className: ['text-right'].join(' ') ,
- data: 'ship.mass',
- render: {
- _: (cellData, type, rowData, meta) => {
- let value = cellData;
- if(type === 'display'){
- value = Util.formatMassValue(value);
- if(!rowData.active){
- // log is "deleted"
- value = '' + value + '';
- }
- }
- return value;
- }
- }
- },{
- targets: 4,
- name: 'created',
- title: 'log',
- width: 55,
- className: ['text-right', config.tableCellCounterClass].join(' '),
- data: 'created.created'
- },{
- targets: 5,
- name: 'edit',
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- className: ['text-center', config.tableCellActionClass, config.moduleHeadlineIconClass].join(' '),
- data: null,
- render: {
- display: data => {
- let icon = '';
- if(data.active){
- icon = '';
- }
- return icon;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tableApi = this.api();
-
- if($(cell).is(':empty')){
- $(cell).removeClass(config.tableCellActionClass + ' ' + config.moduleHeadlineIconClass);
- }else{
- $(cell).on('click', function(e){
- showLogDialog(moduleElement, connectionElement, connectionData, rowData);
- });
- }
- }
- },{
- targets: 6,
- name: 'delete',
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- className: ['text-center', config.tableCellActionClass].join(' '),
- data: 'active',
- render: {
- display: data => {
- let val = '';
- if(data){
- val = '';
- }
- return val;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tableApi = this.api();
-
- if(rowData.active){
- let confirmationSettings = {
- title: 'delete jump log',
- template: Util.getConfirmationTemplate(null, {
- size: 'small',
- noTitle: true
- }),
- onConfirm : function(e, target){
- // get current row data (important!)
- // -> "rowData" param is not current state, values are "on createCell()" state
- rowData = tableApi.row($(cell).parents('tr')).data();
-
- connectionElement.find('table').showLoadingAnimation();
-
- Util.request('DELETE', 'log', rowData.id, {}, {
- connectionElement: connectionElement
- }, requestAlways)
- .then(
- payload => {
- addConnectionsData(moduleElement, enrichConnectionsData([connectionData], payload.data));
- },
- Util.handleAjaxErrorResponse
- );
- }
- };
-
- // init confirmation dialog
- $(cell).confirmation(confirmationSettings);
- }else {
- $(cell).on('click', function(e){
- connectionElement.find('table').showLoadingAnimation();
-
- let requestData = {
- active: 1
- };
-
- Util.request('PATCH', 'log', rowData.id, requestData, {
- connectionElement: connectionElement
- }, requestAlways)
- .then(
- payload => {
- addConnectionsData(moduleElement, enrichConnectionsData([connectionData], payload.data));
- },
- Util.handleAjaxErrorResponse
- );
- });
- }
- }
- }
- ],
- initComplete: function(settings, json){
- Counter.initTableCounter(this, ['created:name']);
- },
- drawCallback: function(settings){
- let animationRows = this.api().rows().nodes().to$().filter(function(a,b ){
- return (
- $(this).data('animationStatus') ||
- $(this).data('animationTimer')
- );
- });
-
- for(let i = 0; i < animationRows.length; i++){
- $(animationRows[i]).pulseBackgroundColor($(animationRows[i]).data('animationStatus'));
- $(animationRows[i]).removeData('animationStatus');
- }
-
- },
- footerCallback: function(row, data, start, end, display ){
- let tableApi = this.api();
- let sumColumnIndexes = ['mass:name', 'delete:name'];
-
- // column data for "sum" columns over this page
- let pageTotalColumns = tableApi
- .columns( sumColumnIndexes, { page: 'all'} )
- .data();
-
- // sum columns for "total" sum
- pageTotalColumns.each((colData, colIndex) => {
- pageTotalColumns[colIndex] = colData.reduce((sum, val, rowIndex) => {
- // sum "mass" (colIndex 0) only if not "deleted" (colIndex 1)
- if(colIndex === 0 && pageTotalColumns[1][rowIndex]){
- return sum + parseInt(val);
- }else{
- return sum;
- }
- }, 0);
- });
-
- sumColumnIndexes.forEach((colSelector, index) => {
- // only "mass" column footer needs updates
- if(colSelector === 'mass:name'){
- $(tableApi.column(colSelector).footer()).text( Util.formatMassValue(pageTotalColumns[index]) );
-
- // save mass for further reCalculation of "info" table
- connectionElement.find('.' + config.connectionInfoTableCellMassLogClass).data('mass', pageTotalColumns[index]);
- }
- });
-
- // calculate "info" table -----------------------------------------------------
- connectionElement.find('.' + config.moduleTableClass).trigger('pf:updateInfoTable', connectionElement.data());
- }
- });
-
- // find position to insert
- connectionElement.insertBefore(rowElement.find('#' + getConnectionElementId(0)));
-
- logTable.on('order.dt search.dt', function(){
- let pageInfo = logTable.page.info();
- logTable.column('index:name', {search:'applied', order:'applied'}).nodes().each((cell, i) => {
- let content = (pageInfo.recordsTotal - i) + '.';
- $(cell).html(content);
- });
- });
- }
- };
-
- /**
- *
- * @param context
- */
- let requestAlways = (context) => {
- context.connectionElement.find('table').hideLoadingAnimation();
- };
-
- /**
- * show jump log dialog
- * @param moduleElement
- * @param connectionElement
- * @param connectionData
- * @param logData
- */
- let showLogDialog = (moduleElement, connectionElement, connectionData, logData = {}) => {
-
- let data = {
- id: config.connectionDialogId,
- typeSelectId: config.typeSelectId,
- shipMassId: config.shipMassId,
- characterSelectId: config.characterSelectId,
- logData: logData,
- massFormat: () => {
- return (val, render) => {
- return (parseInt(render(val) || 0) / 1000) || '';
- };
- }
- };
-
- requirejs(['text!templates/dialog/connection_log.html', 'mustache'], (template, Mustache) => {
- let content = Mustache.render(template, data);
-
- let connectionDialog = bootbox.dialog({
- title: 'Jump log',
- message: content,
- show: false,
- buttons: {
- close: {
- label: 'cancel',
- className: 'btn-default'
- },
- success: {
- label: ' save',
- className: 'btn-success',
- callback: function(){
- let form = this.find('form');
-
- // validate form
- form.validator('validate');
-
- // check whether the form is valid
- let formValid = form.isValidForm();
-
- if(formValid){
- // get form data
- let formData = form.getFormValues();
- formData.id = Util.getObjVal(logData, 'id') || 0;
- formData.connectionId = Util.getObjVal(connectionData, 'id') || 0;
- formData.shipTypeId = Util.getObjVal(formData, 'shipTypeId') || 0;
- formData.shipMass = parseInt((Util.getObjVal(formData, 'shipMass') || 0) * 1000);
- formData.characterId = Util.getObjVal(formData, 'characterId') || 0;
-
- // we need some "additional" form data from the Select2 dropdown
- // -> data is required on the backend side
- let formDataShip = form.find('#' + config.typeSelectId).select2('data');
- let formDataCharacter = form.find('#' + config.characterSelectId).select2('data');
- formData.shipTypeName = formDataShip.length ? formDataShip[0].text : '';
- formData.characterName = formDataCharacter.length ? formDataCharacter[0].text : '';
-
- let method = formData.id ? 'PATCH' : 'PUT';
-
- Util.request(method, 'log', formData.id, formData, {
- connectionElement: connectionElement,
- formElement: form
- }, requestAlways)
- .then(
- payload => {
- addConnectionsData(moduleElement, enrichConnectionsData([connectionData], payload.data));
- this.modal('hide');
- },
- Util.handleAjaxErrorResponse
- );
-
- }
-
- return false;
- }
- }
- }
- });
-
- connectionDialog.on('show.bs.modal', function(e){
- let modalContent = $('#' + config.connectionDialogId);
-
- // init type select live search
- let selectElementType = modalContent.find('#' + config.typeSelectId);
- selectElementType.initUniverseTypeSelect({
- categoryIds: [6],
- maxSelectionLength: 1,
- selected: [Util.getObjVal(logData, 'ship.typeId')]
- }).on('select2:select select2:unselecting', function(e){
- // get ship mass from selected ship type and update mass input field
- let shipMass = e.params.data ? e.params.data.mass / 1000 : '';
- modalContent.find('#' + config.shipMassId).val(shipMass);
- });
-
- // init character select live search
- let selectElementCharacter = modalContent.find('#' + config.characterSelectId);
- selectElementCharacter.initUniverseSearch({
- categoryNames: ['character'],
- maxSelectionLength: 1
- });
-
- });
-
- // show dialog
- connectionDialog.modal('show');
- });
- };
-
- /**
- * remove connection Panel from moduleElement
- * @param connectionElement
- */
- let removeConnectionPanel = (connectionElement) => {
- connectionElement = $(connectionElement);
- if(connectionElement.length){
- // destroy dataTable (and remove table from DOM)
- let logTable = connectionElement.find('.' + config.connectionInfoTableClass);
- logTable.dataTable().api().destroy(true);
- // remove belonging connectionElement
- connectionElement.remove();
- }
- };
-
- /**
- * get connections from ModuleElement
- * -> validate with current map data
- * @param moduleElement
- * @param mapId
- * @returns {{connectionsDataUpdate: Array, connectionsDataRemove: Array}}
- */
- let getConnectionsDataFromModule = (moduleElement, mapId) => {
- let activeMap = Util.getMapModule().getActiveMap();
- let mapData = activeMap.getMapDataFromClient(['hasId']);
- let connectionsData = {
- connectionsDataUpdate: [],
- connectionsDataRemove: [],
- };
-
- if(mapData !== false){
- getConnectionElements(moduleElement).each((i, connectionElement) => {
- let removeConnectionPanel = true;
- let connectionData = {id: $(connectionElement).data('connectionId') };
-
- let connection = $().getConnectionById(mapId, connectionData.id);
- if(connection){
- let connectionDataTemp = MapUtil.getDataByConnection(connection);
- if(connectionDataTemp.id > 0){
- // connection still on map - OK
- removeConnectionPanel = false;
- connectionData = connectionDataTemp;
- }
- }
-
- if(removeConnectionPanel){
- connectionsData.connectionsDataRemove.push(connectionData);
- }else{
- connectionsData.connectionsDataUpdate.push(connectionData);
- }
- });
- }
-
- return connectionsData;
- };
-
- /**
- * update/init multiple connection panels at once
- * @param moduleElement
- * @param mapId
- * @param connectionsDataUpdate
- * @param connectionsDataRemove
- */
- let updateConnectionPanels = (moduleElement, mapId, connectionsDataUpdate, connectionsDataRemove) => {
- for(let connectionData of connectionsDataRemove){
- let connectionElement = moduleElement.find('#' + getConnectionElementId(connectionData.id));
- removeConnectionPanel(connectionElement);
- }
-
- for(let connectionData of connectionsDataUpdate){
- updateConnectionPanel(moduleElement, mapId, connectionData);
- }
-
- // request connectionsLogData for each updated connection
- if(connectionsDataUpdate.length){
- getConnectionsLogData(moduleElement, mapId, connectionsDataUpdate);
- }
-
- // remove module if no connection panel left
- // --> all connection deselected on map
- let connectionElements = getConnectionElements(moduleElement);
- if(connectionElements.length === 0){
- MapUtil.getTabContentElementByMapElement(moduleElement).trigger('pf:removeConnectionModules');
- }
-
- // hide "control" panel when multiple connection
- moduleElement.find('#' + getConnectionElementId(0)).toggle(connectionElements.length < 2);
- };
-
- /**
- * set module observer
- * @param moduleElement
- * @param mapId
- */
- let setModuleObserver = (moduleElement, mapId) => {
- $(document).off('pf:updateConnectionInfoModule').on('pf:updateConnectionInfoModule', function(e, data){
- updateConnectionPanels(
- moduleElement,
- data.mapId,
- MapUtil.getDataByConnections(data.connectionsUpdate),
- MapUtil.getDataByConnections(data.connectionsRemove)
- );
- });
-
- $(document).off('pf:activeShip').on('pf:activeShip', function(e){
- moduleElement.find('.' + config.connectionInfoPanelClass).each((i, connectionElement) => {
- $(connectionElement).find('.' + config.moduleTableClass).each((i, tableElement) => {
- $(tableElement).trigger('pf:calcInfoTable');
- });
- });
- });
-
- // init toggle active ship ----------------------------------------------------------------
- moduleElement.find('.' + config.moduleHeadlineIconCurrentMassClass).on('click', function(e){
- let currentMassIcon = $(this).toggleClass('active');
- moduleElement.find('.' + config.connectionInfoPanelClass).each((i, connectionElement) => {
- $(connectionElement).find('.' + config.moduleTableClass).each((i, tableElement) => {
- $(tableElement).data('showShip', currentMassIcon.hasClass('active')).trigger('pf:calcInfoTable');
- });
- });
- });
-
- // init refresh connections ---------------------------------------------------------------
- moduleElement.find('.' + config.moduleHeadlineIconRefreshClass).on('click', function(e){
- refreshConnectionPanels(moduleElement, mapId);
- });
- };
-
- /**
- * refresh all connection panels in a module
- * @param moduleElement
- * @param mapId
- */
- let refreshConnectionPanels = (moduleElement, mapId) => {
- let connectionsData = getConnectionsDataFromModule(moduleElement, mapId);
- updateConnectionPanels(moduleElement, mapId, connectionsData.connectionsDataUpdate, connectionsData.connectionsDataRemove);
- };
-
- /**
- * before module destroy callback
- * @param moduleElement
- */
- let beforeDestroy = (moduleElement) => {
- getConnectionElements(moduleElement).each((i, connectionElement) => {
- removeConnectionPanel(connectionElement);
- });
- };
-
- /**
- * init callback
- * @param moduleElement
- * @param mapId
- * @param connectionData
- */
- let initModule = (moduleElement, mapId, connectionData) => {
- setModuleObserver(moduleElement, mapId);
- };
-
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param connections
- * @returns {*|jQuery|HTMLElement}
- */
- let getModule = (parentElement, mapId, connections) => {
- let moduleElement = $('').append(
- $(' ', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- text: 'Connection'
- }),
- getHeadlineToolbar()
- )
- );
-
- let rowElement = $('', {
- class: 'row'
- });
-
- moduleElement.append(rowElement);
-
- rowElement.append(getInfoPanelControl(mapId));
-
- updateConnectionPanels(moduleElement, mapId, MapUtil.getDataByConnections(connections), []);
-
- return moduleElement;
- };
-
- return {
- config: config,
- getModule: getModule,
- initModule: initModule,
- beforeDestroy: beforeDestroy
- };
+ return ConnectionInfoModule;
});
\ No newline at end of file
diff --git a/js/app/ui/module/demo.js b/js/app/ui/module/demo.js
new file mode 100644
index 00000000..5bf82148
--- /dev/null
+++ b/js/app/ui/module/demo.js
@@ -0,0 +1,311 @@
+define([ // dependencies for this module
+ 'module/base', // abstract `parent` module class definition [required]
+ 'app/render' // ... for demo purpose, we load a Render helper object
+], (BaseModule, Render) => {
+ 'use strict';
+
+ /**
+ * DemoModule class
+ * -> skeleton for custom module plugins
+ * @type {DemoModule}
+ */
+ let DemoModule = class DemoModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
+
+ /**
+ * module header
+ * @param text
+ * @returns {HTMLDivElement}
+ */
+ newHeaderElement(text){
+ let headEl = super.newHeaderElement(text);
+ let toolbarEl = this.newHeadlineToolbarElement();
+ let iconPlayEl = this.newIconElement([
+ 'fa-play', 'fa-fw',
+ 'txt-color', 'txt-color-success',
+ this._config.moduleHeadlineIconClass
+ ]);
+ iconPlayEl.setAttribute('title', 'pause update()');
+ iconPlayEl.onclick = e => this.toggleUpdates(e.target);
+
+ toolbarEl.append(iconPlayEl);
+ headEl.append(toolbarEl);
+ return headEl;
+ }
+
+ /**
+ * extends logHandler() from BaseModule
+ * -> updates moduleBody (demo)
+ * @param handler
+ * @param increment
+ */
+ logHandler(handler, increment = 1){
+ super.logHandler(handler, increment);
+
+ /**
+ * @param handler
+ * @returns {[HTMLSpanElement, HTMLSpanElement]}
+ */
+ let newLiContent = handler => {
+ let count = this._config.logHandler[handler] || 0;
+ let label = count ? 'success' : false;
+ let icon = 'fa-circle';
+ let handlerQueueLength;
+ if(this[`_${handler}Queue`]){
+ handlerQueueLength = this[`_${handler}Queue`].filterQueue(item => item.data === 'upd').length;
+ label = handlerQueueLength ? 'warning' : label;
+ icon = handlerQueueLength ? 'fa-sync fa-spin' : icon;
+ }
+
+ let iconLiEl = Object.assign(document.createElement('span'), {
+ className: 'fa-li'
+ });
+ iconLiEl.append(this.newIconElement([icon, 'fa-fw', 'txt-color', label ? `txt-color-${label}` : ``]));
+
+ let textLiEl = Object.assign(document.createElement('span'), {
+ textContent: `${handler} [${count}]${Number.isInteger(handlerQueueLength) ? `[${handlerQueueLength}]`: ``}`,
+ className: label ? `pf-animation-pulse-${label}` : ``
+ });
+ return [iconLiEl, textLiEl];
+ };
+
+ let ulEl = this.queryGridItem('info').querySelector(`.fa-ul`);
+ if(!ulEl){
+ ulEl = Object.assign(document.createElement('ul'), {
+ className: 'fa-ul'
+ });
+
+ let liEls = BaseModule.handler.map(handler => {
+ let liEl = document.createElement('li');
+ liEl.dataset.handler = handler;
+ liEl.prepend(...newLiContent(handler));
+ return liEl;
+ });
+
+ ulEl.append(...liEls);
+ this.queryGridItem('info').querySelector(`code`).insertAdjacentElement('beforebegin', ulEl);
+ }else{
+ ulEl.querySelector(`[data-handler="${handler}"]`).innerHTML = newLiContent(handler).map(el => el.outerHTML).join('');
+ }
+ }
+
+ /**
+ * initial module render method
+ * -> implementation is enforced by BaseModule
+ * -> must return a single node element
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
+
+ // ... append your custom module body
+ let bodyEl = Object.assign(document.createElement('div'), {
+ className: [this._config.bodyClassName, 'grid'].join(' ')
+ });
+
+ let gridItems = [];
+ for(let [area, conf] of Object.entries(this._config.gridItems)){
+ gridItems.push(this.newGridItemEl(area, conf.label));
+ }
+ bodyEl.append(...gridItems);
+ this.moduleElement.append(bodyEl);
+
+ this.renderJson('_config', this._config, 'info');
+ this.renderJson('render()', {mapId, systemData});
+
+ let {config, data} = BaseModule.Util.getCurrentMapData(this._systemData.mapId);
+ this.renderJson('currentMapData', {config, data}, 'mapData');
+ return this.moduleElement;
+ }
+
+ /**
+ * update module
+ * @param systemData
+ * @returns {Promise}
+ */
+ update(systemData){
+ return super.update(systemData).then(systemData => new Promise(resolve => {
+ this.renderJson('update()', {systemData});
+
+ // ... custom (async) code e.g. request external API and update module
+ // -> resolve() Promise when module is updated.
+ resolve({
+ action: 'update',
+ data: {
+ module: this
+ }
+ });
+ }));
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+ this.renderJson('init()', null);
+ this.renderJson('currentUserData', BaseModule.Util.getCurrentUserData(), 'userData');
+ }
+
+ beforeHide(){
+ super.beforeHide();
+ this.renderJson('beforeHide()', null);
+ }
+
+ beforeDestroy(){
+ super.beforeDestroy();
+ this.renderJson('beforeDestroy()', null);
+ }
+
+ /**
+ * @param name
+ * @param e
+ */
+ onSortableEvent(name, e){
+ super.onSortableEvent(name, e);
+ this.renderJson(`${name}()`, e, 'sortableJs');
+ }
+
+ /**
+ * @param label
+ * @param data
+ * @param area
+ */
+ renderJson(label, data, area = 'trigger'){
+ let now = new Date();
+ let codeEl = this.queryGridItem(area).querySelector(`code`);
+ codeEl.prepend(Object.assign(document.createElement('section'), {
+ className: this._config.highlightClassName,
+ innerHTML: `${++this._config.counter}. ${now.toLocaleTimeString('en-GB')}.${String(now.getMilliseconds()).padStart(3, '0')} ${label} \n` +
+ `${Render.highlightJson(data, this._config.gridItems[area].jsonConf)}`
+ }));
+ // limit code blocks
+ if(codeEl.childElementCount > this._config.maxCodeSections){
+ codeEl.removeChild(codeEl.lastChild);
+ }
+ }
+
+ /**
+ * @param iconEl
+ */
+ toggleUpdates(iconEl){
+ iconEl.classList.toggle('fa-pause');
+ iconEl.classList.toggle('txt-color-danger');
+ iconEl.classList.toggle('fa-play');
+ iconEl.classList.toggle('txt-color-success');
+
+ if(this._pauseUpdatesPromise){
+ this._pauseUpdatesPromise.resolve();
+ }else{
+ this._pauseUpdatesPromise = BaseModule.newDeferredPromise();
+ this._updateQueue.enqueue(() => this._pauseUpdatesPromise.then(() => {
+ this._pauseUpdatesPromise = null;
+ }), 'start');
+ }
+ }
+
+ /**
+ * new gridItem element
+ * @param area
+ * @param label
+ * @returns {HTMLPreElement}
+ */
+ newGridItemEl(area, label){
+ if(!this._gridItemEl){
+ // create blank gridItem element for later cloning
+ this._gridItemEl = Object.assign(document.createElement('pre'), {
+ className: this._config.gridItemClassName,
+ innerHTML: ' '
+ });
+ }
+
+ let iconClearEl = this.newIconElement([
+ 'fa-trash', 'fa-fw', 'pull-right',
+ this._config.moduleHeadlineIconClass
+ ]);
+ iconClearEl.setAttribute('title', 'clear output');
+ iconClearEl.onclick = e => e.target.closest(`.${this._config.gridItemClassName}`).querySelector('code').innerHTML = '';
+
+ let toolbarEl = this.newHeadlineToolbarElement();
+ toolbarEl.append(iconClearEl);
+
+ let gridItemEl = this._gridItemEl.cloneNode(true);
+ gridItemEl.dataset.area = area;
+ gridItemEl.prepend(toolbarEl, this.newHeadlineElement(label));
+ return gridItemEl;
+ }
+
+ /**
+ * get gridItem element from module body
+ * @param {string} area
+ * @returns {HTMLPreElement}
+ */
+ queryGridItem(area){
+ return this.moduleElement.querySelector(`.${this._config.bodyClassName} .${this._config.gridItemClassName}[data-area="${area}"]`);
+ }
+ };
+
+ DemoModule.isPlugin = true; // module is defined as 'plugin'
+ DemoModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ DemoModule.sortArea = 'a'; // default sortable area
+ DemoModule.position = 10; // default sort/order position within sortable area
+ DemoModule.label = 'Demo'; // static module label (e.g. description)
+ DemoModule.fullDataUpdate = true; // subscribe module for frequently updates see update() method
+
+ DemoModule.defaultConfig = {
+ className: 'pf-system-demo-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Demo Module',
+
+ // ... custom config for DemoModule
+ gridItemClassName: 'pf-dynamic-area',
+ highlightClassName: 'pf-animation-pulse-success',
+ counter: 0,
+ maxCodeSections: 8,
+ gridItems: {
+ info: {
+ label: `handler/config`,
+ jsonConf: {
+ collapseDepth: 1,
+ maxDepth: 3
+ }
+ },
+ trigger: {
+ label: `trigger`,
+ jsonConf: {
+ collapseDepth: 1,
+ maxDepth: 5
+ }
+ },
+ userData: {
+ label: `user/char data`,
+ jsonConf: {
+ collapseDepth: 1,
+ maxDepth: 8
+ }
+ },
+ mapData: {
+ label: `map data`,
+ jsonConf: {
+ collapseDepth: 2,
+ maxDepth: 8,
+ maxLinesFunctions: 2
+ }
+ },
+ sortableJs: {
+ label: `drag&drop events`,
+ jsonConf: {
+ collapseDepth: 0,
+ maxDepth: 4,
+ maxLinesFunctions: 2
+ }
+ }
+ }
+ };
+
+ return DemoModule;
+});
\ No newline at end of file
diff --git a/js/app/ui/module/empty.js b/js/app/ui/module/empty.js
new file mode 100644
index 00000000..c567f0eb
--- /dev/null
+++ b/js/app/ui/module/empty.js
@@ -0,0 +1,71 @@
+define([ // dependencies for this module
+ 'module/base', // abstract `parent` module class definition [required]
+ 'app/render' // ... for demo purpose, we load a Render helper object
+], (BaseModule, Render) => {
+ 'use strict';
+
+ /**
+ * EmptyModule class
+ * -> skeleton for custom module plugins
+ * @type {EmptyModule}
+ */
+ let EmptyModule = class EmptyModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
+
+ /**
+ * initial module render method
+ * -> implementation is enforced by BaseModule
+ * -> must return a single node element
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
+
+ // ... append your custom module body
+ let bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
+ });
+
+ this.moduleElement.append(bodyEl);
+
+ return this.moduleElement;
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+ }
+
+ beforeHide(){
+ super.beforeHide();
+ }
+
+ beforeDestroy(){
+ super.beforeDestroy();
+ }
+
+ onSortableEvent(name, e){
+ super.onSortableEvent(name, e);
+ }
+ };
+
+ EmptyModule.isPlugin = true; // module is defined as 'plugin'
+ EmptyModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ EmptyModule.sortArea = 'a'; // default sortable area
+ EmptyModule.position = 15; // default sort/order position within sortable area
+ EmptyModule.label = 'Empty'; // static module label (e.g. description)
+
+ EmptyModule.defaultConfig = {
+ className: 'pf-system-empty-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Empty Module',
+ };
+
+ return EmptyModule;
+});
\ No newline at end of file
diff --git a/js/app/ui/module/global_thera.js b/js/app/ui/module/global_thera.js
new file mode 100644
index 00000000..906aa8a2
--- /dev/null
+++ b/js/app/ui/module/global_thera.js
@@ -0,0 +1,1028 @@
+define([
+ 'jquery',
+ 'app/init',
+ 'app/util',
+ 'module/base',
+ 'app/map/map',
+ 'app/map/util',
+ 'app/ui/form_element'
+], ($, Init, Util, BaseModule, Map, MapUtil, FormElement) => {
+ 'use strict';
+
+ /**
+ * TheraModule class
+ * @type {TheraModule}
+ */
+ let TheraModule = class TheraModule extends BaseModule {
+ constructor(config = {}) {
+ config.eveScoutUrl = new URL(Init.url.eveScout);
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
+
+ /**
+ * get icon for undefined/missing cell value
+ * @returns {string}
+ */
+ getIconForUndefinedCellValue(){
+ return '';
+ }
+
+ /**
+ * get icon for "syncStatus" (connection is mapped) cell value
+ * @param status
+ * @returns {string}
+ */
+ getIconForStatusCellValue(status = ''){
+ let title = '';
+ switch(status){
+ case 'warning':
+ title = `not in ${this._config.eveScoutUrl.hostname.replace('www.', '')} connections`;
+ break;
+ case 'success':
+ title = `in ${this._config.eveScoutUrl.hostname.replace('www.', '')} connections`;
+ break;
+ case 'hint':
+ title += `sync connections/signatures`;
+ break;
+ default:
+ title = `not mapped`;
+ }
+
+ return ``;
+ }
+
+ /**
+ * get dataTable id
+ * @param {...string} parts e.g. 'tableType', 'mapId', 'systemId'
+ * @returns {string}
+ */
+ getTableId(...parts){
+ return BaseModule.Util.getTableId(this._config.theraTableId, ...parts);
+ }
+
+ /**
+ * get dataTable row id
+ * @param tableType
+ * @param id
+ * @returns {string}
+ */
+ getRowId(tableType, id){
+ return BaseModule.Util.getTableRowId(this._config.theraTableRowIdPrefix, tableType, id);
+ }
+
+ /**
+ * get DOM id by id
+ * @param tableApi
+ * @param id
+ * @returns {*}
+ */
+ getRowById(tableApi, id){
+ return tableApi.rows().ids().toArray().find(rowId =>
+ rowId === this.getRowId(BaseModule.Util.getObjVal(this.getTableMetaData(tableApi), 'type'), id)
+ );
+ }
+
+ /**
+ * get custom "metaData" from dataTables API
+ * @param tableApi
+ * @returns {*}
+ */
+ getTableMetaData(tableApi){
+ return tableApi ? tableApi.init().pfMeta : null;
+ }
+
+ /**
+ * initial module render method
+ * -> implementation is enforced by BaseModule
+ * -> must return a single node element
+ * @param mapId
+ * @returns {HTMLElement}
+ */
+ render(mapId){
+ this._mapId = mapId;
+
+ // ... append your custom module body
+ this._bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
+ });
+
+ this.moduleElement.append(this._bodyEl);
+
+ this._bodyEl.append(
+ this.newControlElement(
+ 'Thera not found on map. Click here to add',
+ [this._config.moduleHeadlineIconClass, this._config.controlAreaTheraClass, 'hidden'],
+ ['fa-plus']
+ )
+ );
+
+ $(this.moduleElement).showLoadingAnimation();
+
+ this.initTheraTable();
+
+ this.setModuleObserver();
+
+ return this.moduleElement;
+ }
+
+ /**
+ * init 'Thera connections' table (EveScout)
+ */
+ initTheraTable(){
+ let module = this;
+
+ let tableEl = document.createElement('table');
+ tableEl.id = module.getTableId('thera', module._mapId);
+ tableEl.classList.add('compact', 'stripe', 'order-column', 'row-border', 'pf-table-fixed', module._config.globalTheraTableClass);
+ this._bodyEl.append(tableEl);
+
+ this._tableApi = $(tableEl).DataTable( {
+ pfMeta: {
+ type: 'theraConnection'
+ },
+ paging: false,
+ ordering: true,
+ order: [[0, 'desc'], [8, 'desc']],
+ orderFixed: [[ 10, 'desc']],
+ info: false,
+ searching: false,
+ hover: false,
+ autoWidth: false,
+ rowId: rowData => module.getRowId('theraConnection', rowData.id),
+ select: {
+ style: 'os',
+ selector: 'td:not(.' + module._config.tableCellActionClass + ')'
+ },
+ language: {
+ emptyTable: 'No Thera connections found'
+ },
+ columnDefs: [
+ {
+ targets: 0,
+ name: 'syncStatus',
+ title: '',
+ width: 2,
+ className: 'text-center',
+ data: 'syncStatus',
+ defaultContent: module.getIconForStatusCellValue(),
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ return module.getIconForStatusCellValue(cellData);
+ },
+ sort: syncStatus => ['warning', 'hint', 'success'].indexOf(syncStatus)
+ }
+ },{
+ targets: 1,
+ name: 'trueSec',
+ title: 'sec',
+ width: 15,
+ className:'text-center',
+ data: 'target.trueSec',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ if(cellData !== undefined){
+ let systemTrueSecClass = BaseModule.Util.getTrueSecClassForSystem(cellData);
+ return '' + cellData.toFixed(1) + '';
+ }
+ }
+ }
+ },{
+ targets: 2,
+ name: 'systemName',
+ title: 'system',
+ className: module._config.tableCellEllipsisClass,
+ data: 'target',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ let systemId = cellData.id || '';
+ let cls = (
+ cellData.name && (
+ BaseModule.Util.getObjVal(rowData, 'relRowId') || // secondary table
+ BaseModule.Util.getObjVal(rowData, 'connectionId') // primary table
+ )
+ ) ? module._config.linkClass : '';
+ return `${cellData.name || ''}`;
+ },
+ sort: 'name'
+ }
+ },{
+ targets: 3,
+ name: 'region',
+ title: 'region',
+ className: module._config.tableCellEllipsisClass,
+ data: 'target',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ _: 'region.name'
+ }
+ },{
+ targets: 4,
+ name: 'outSig',
+ title: '',
+ width: 12,
+ className: ['text-center', module._config.fontUppercaseClass].join(' '),
+ data: 'sourceSignature',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ _: 'name'
+ }
+ },{
+ targets: 5,
+ name: 'fakeConnection',
+ title: 'con.',
+ orderable: false,
+ width: 30,
+ className: 'text-center',
+ data: 'fakeConnection',
+ defaultContent: ''
+ },{
+ targets: 6,
+ name: 'inSig',
+ title: '',
+ width: 12,
+ className: ['text-center', module._config.fontUppercaseClass].join(' '),
+ data: 'targetSignature',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ _: 'name'
+ }
+ },{
+ targets: 7,
+ name: 'wormholeLabel',
+ title: 'type',
+ width: 50,
+ className: module._config.tableCellTypeClass,
+ data: 'wormholeLabel',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ if(cellData){
+ let wormholeData = BaseModule.Util.getObjVal(Init, `wormholes.${cellData}`);
+ let security = BaseModule.Util.getObjVal(wormholeData, `security`);
+ let typeNodes = FormElement.formatSignatureTypeSelectionData({text: `${cellData} - ${security}`}, undefined, {showWhSizeLabel: false});
+ return [...typeNodes].reduce((acc, node) => {
+ acc += node.outerHTML;
+ return acc;
+ }, '');
+ }
+ }
+ }
+ },{
+ targets: 8,
+ name: 'estimatedLife',
+ title: '',
+ width: 15,
+ className: 'text-right',
+ data: 'estimatedEol',
+ defaultContent: module.getIconForUndefinedCellValue(),
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ try{
+ let timeNow = (new Date()).getTime();
+ let timeEol = Date.parse(cellData);
+ if(!isNaN(timeNow) && !isNaN(timeEol) ){
+ let diff = (timeEol - timeNow) / 1000;
+ diff /= (60 * 60);
+ return `< ${Math.ceil(diff)}h`;
+ }
+ }catch(e){}
+ },
+ sort: dateVal => Date.parse(dateVal)
+ }
+ },{
+ targets: 9,
+ name: 'action',
+ title: '',
+ orderable: false,
+ width: 10,
+ className: ['text-center', module._config.tableCellActionClass, module._config.moduleHeadlineIconClass].join(' '),
+ data: null,
+ render: {
+ display: data => {
+ let icon = '';
+ if(data.connectionId){
+ icon = '';
+ }else if(!data.syncStatus){
+ icon = '';
+ }
+ return icon;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ cell.addEventListener('click', e => {
+ e.stopPropagation();
+
+ let rowClicked = tableApi.row(e.target.closest('tr'));
+ rowData = rowClicked.data();
+
+ if(rowData.connectionId){
+ // delete row(s) ------------------------------------------------------------------
+ let deleteData = {
+ systemIds: [],
+ connectionIds: [],
+ };
+
+ let value, label;
+ // check if multiple rows are selected + current row is one of them -> bulk edit
+ let rowsSelected = tableApi.rows({selected: true});
+ if(rowsSelected.count() > 1 && tableApi.row(rowIndex, {selected: true}).count()){
+ deleteData = rowsSelected.data().toArray()
+ .reduce((acc, rowData) => {
+ acc.systemIds.push(BaseModule.Util.getObjVal(rowData, 'target.realId'));
+ acc.connectionIds.push(BaseModule.Util.getObjVal(rowData, 'connectionId'));
+ return acc;
+ }, deleteData);
+ label = `delete ${deleteData.systemIds.length} systems`;
+ }else{
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowsSelected = tableApi.row( $(cell).parents('tr'));
+ rowData = rowsSelected.data();
+ deleteData.systemIds.push(BaseModule.Util.getObjVal(rowData, 'target.realId') || 0);
+ deleteData.connectionIds.push(BaseModule.Util.getObjVal(rowData, 'connectionId') || 0);
+ label = `delete '${BaseModule.Util.getObjVal(rowData, 'target.name')}'`;
+ }
+
+ let confirmationSettings = {
+ title: '---',
+ template: BaseModule.Util.getConfirmationTemplate(BaseModule.Util.getConfirmationContent([{
+ name: 'deleteSystems',
+ value: 1,
+ label: label,
+ class: 'pf-editable-warn',
+ checked: false
+ }]), {
+ size: 'small',
+ noTitle: true
+ }),
+ trigger: 'manual',
+ onConfirm : function(e, target){
+ // stop scroll to top
+ e.preventDefault();
+
+ // get form data (check if form tag is not hidden!) from confirmation popover
+ let tip = target.data('bs.confirmation').tip();
+ let form = tip.find('form:not(.hidden)').first();
+ let formData = form.getFormValues();
+ let deleteSystems = BaseModule.Util.getObjVal(formData, 'deleteSystems');
+
+ if(deleteSystems){
+ // delete systems -> connections get auto removed as well
+ let activeMap = BaseModule.Util.getMapModule().getActiveMap();
+ let systems = deleteData.systemIds.map(systemId =>
+ document.getElementById(MapUtil.getSystemId(module._mapId, systemId))
+ ).filter(Boolean);
+
+ $(module.moduleElement).showLoadingAnimation();
+ activeMap.trigger('pf:deleteSystems', [{
+ systems: systems,
+ callback: deletedSystems => {
+ // callback function after ajax "delete" success
+ // check if system was deleted
+ if(deletedSystems.length){
+ // remove table row
+ rowsSelected.remove().draw();
+ }else{
+ // error
+ this.showNotify({title: 'Failed to delete system', type: 'error'});
+ }
+ $(module.moduleElement).hideLoadingAnimation();
+ }
+ }]);
+ }else{
+ // just delete connections
+ let connections = deleteData.connectionIds.map(connectionId =>
+ $().getConnectionById(module._mapId, connectionId)
+ ).filter(Boolean);
+
+ $(module.moduleElement).showLoadingAnimation();
+ MapUtil.deleteConnections(connections, () => {
+ // callback function after ajax "delete" success
+ // remove table row
+ rowsSelected.remove().draw();
+ $(module.moduleElement).hideLoadingAnimation();
+ });
+ }
+ }
+ };
+
+ // init confirmation dialog
+ $(cell).confirmation('destroy').confirmation(confirmationSettings).confirmation('show');
+ }else if(!rowData.syncStatus){
+ // add row ------------------------------------------------------------------------
+
+ let systemDataThera = MapUtil.getSystemData(module._mapId, TheraModule.systemIdThera, 'systemId');
+ let systemDataSource = MapUtil.getSystemData(module._mapId, BaseModule.Util.getObjVal(rowData, 'target.id'), 'systemId');
+
+ if(systemDataThera && systemDataSource){
+ // source & target system are already on map -> just draw connection
+ let map = MapUtil.getMapInstance(module._mapId);
+ let connectionData = {
+ source: systemDataThera.id,
+ target: systemDataSource.id,
+ scope: rowData.scope,
+ type: rowData.type
+ };
+
+ $(module.moduleElement).showLoadingAnimation();
+
+ Map.drawConnection(map, connectionData)
+ .then(payload => Map.saveConnection(payload.data.connection, true))
+ .catch(console.warn);
+ }else{
+ let options = {
+ systemData: {
+ id: BaseModule.Util.getObjVal(rowData, 'target.id'),
+ name: BaseModule.Util.getObjVal(rowData, 'target.name')
+ }
+ };
+
+ if(systemDataThera){
+ let systemThera = document.getElementById(MapUtil.getSystemId(systemDataThera.mapId, systemDataThera.id));
+ if(systemThera){
+ options.sourceSystem = $(systemThera);
+ options.connectionData = {
+ scope: rowData.scope,
+ type: rowData.type,
+ disableAutoScope: true
+ };
+ }
+ }
+
+ module.showNewSystemDialog(options);
+ }
+ }
+ });
+ }
+ },{
+ targets: 10,
+ name: 'rowGroupData',
+ className: 'never', // never show this column. see: https://datatables.net/extensions/responsive/classes
+ data: 'rowGroupData',
+ defaultContent: 0,
+ visible: false,
+ render: {
+ sort: 'id'
+ }
+ }
+ ],
+ drawCallback: function(settings){
+ let animationRows = this.api().rows().nodes().to$().filter(function(){
+ return (
+ $(this).data('animationStatus') ||
+ $(this).data('animationTimer')
+ );
+ });
+
+ animationRows.initTooltips();
+
+ for(let i = 0; i < animationRows.length; i++){
+ let animationRow = $(animationRows[i]);
+ animationRow.pulseBackgroundColor(animationRow.data('animationStatus'));
+ animationRow.removeData('animationStatus');
+ }
+ },
+ initComplete: function(settings, json){
+ module.getTheraConnectionsData('callbackUpdateTableRows');
+
+ // hover effect -----------------------------------------------------------------------------------
+ let tableApi = this.api();
+ let relRowId = null;
+ tableApi.tables().nodes().to$().on('mouseenter', 'td', function(){
+ relRowId = BaseModule.Util.getObjVal(tableApi.row(this.parentElement).data(), 'relRowId') || null;
+ if(relRowId){
+ let colIndex = tableApi.cell(this).index().column;
+ if(colIndex <= 8){
+ let cell = tableApi.cell(this);
+ let relCell = tableApi.cell(
+ `#${module.getRowById(tableApi, relRowId)}`,
+ colIndex
+ );
+ cell.nodes().to$().addClass('cellHighlight');
+ relCell.nodes().to$().addClass('cellHighlight');
+
+ if([4,5,6,7,8].includes(colIndex)){
+ let cellNode = cell.node();
+ let relCellNode = relCell.node(); // might not exist if relRow was recently removed
+ if(
+ cellNode && relCellNode &&
+ cellNode.innerHTML !== relCellNode.innerHTML
+ ){
+ cellNode.dataset.origValue = cellNode.innerHTML;
+ cellNode.innerHTML = relCellNode.innerHTML;
+ }
+ }
+ }
+ }
+ }).on('mouseleave', 'td', function(){
+ if(relRowId){
+ if(this.dataset.origValue){
+ this.innerHTML = this.dataset.origValue;
+ delete this.dataset.origValue;
+ }
+ tableApi.cells().nodes().to$().removeClass('cellHighlight');
+ relRowId = null;
+ }
+ });
+
+ // click on "fake connection" ---------------------------------------------------------------------
+ $(this).on('click', '.pf-fake-connection', function(){
+ let rowData = tableApi.row(this.closest('tr')).data();
+ if(rowData.connectionId){
+ let connection = $().getConnectionById(module._mapId, rowData.connectionId);
+ if(connection){
+ let map = connection._jsPlumb.instance;
+ MapUtil.showConnectionInfo(map, [connection]);
+ }
+ }
+ });
+
+ // click on "target system name" ------------------------------------------------------------------
+ $(this).on('click', `.${module._config.linkClass}[data-systemid]:not([data-systemid=''])`, e => {
+ BaseModule.Util.triggerMenuAction(
+ BaseModule.Util.getMapModule().getActiveMap(),
+ 'SelectSystem',
+ {systemId: MapUtil.getSystemData(module._mapId, parseInt(e.target.dataset.systemid), 'systemId').id}
+ );
+ });
+ },
+ data: [] // will be added dynamic
+ });
+
+ let buttons = new $.fn.dataTable.Buttons(this._tableApi, {
+ dom: {
+ container: {
+ tag: 'h5',
+ className: 'pull-right'
+ },
+ button: {
+ tag: 'i',
+ className: ['fas', 'fa-fw', module._config.moduleHeadlineIconClass].join(' '),
+ },
+ buttonLiner: {
+ tag: null
+ }
+ },
+ name: 'tableTools',
+ buttons: [
+ {
+ name: 'eveScout',
+ className: 'fa-external-link-alt',
+ titleAttr: module._config.eveScoutUrl.hostname.replace('www.', ''),
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ e.stopPropagation();
+ window.open(`//${module._config.eveScoutUrl.hostname}`, '_blank');
+ }
+ }, {
+ name: 'refresh',
+ className: 'fa-sync',
+ titleAttr: 'refresh',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ $(module.moduleElement).showLoadingAnimation();
+ module.getTheraConnectionsData('callbackUpdateTableRows');
+ }
+ }
+ ]
+ });
+
+ // "RowGroup" Datatables Plugin
+ this._tableApi.buttons().container().appendTo(module.moduleElement.querySelector('.' + module._config.headClassName));
+
+ new $.fn.dataTable.RowGroup(this._tableApi, {
+ dataSrc: 'rowGroupData.name',
+ startRender: function(rows, group, level){
+ return `` +
+ `${group}` +
+ `${rows.count()}` +
+ ` `;
+ }
+ });
+
+ // "Select" Datatables Plugin
+ this._tableApi.select();
+
+ this._tableApi.on('user-select', function(e, tableApi, type, cell, originalEvent){
+ let rowData = tableApi.row(cell.index().row).data();
+ if(!BaseModule.Util.getObjVal(rowData, 'connectionId')){
+ e.preventDefault();
+ }
+ });
+ }
+
+ /**
+ * @param options
+ * @param isThera
+ */
+ showNewSystemDialog(options = {}, isThera = false){
+ let activeMap = BaseModule.Util.getMapModule().getActiveMap();
+
+ // custom callback -> refresh Thera table
+ options.callback = (map, newSystemData, sourceSystem, connectionData) => {
+ $(this.moduleElement).showLoadingAnimation();
+
+ Map.saveSystemCallback(map, newSystemData, sourceSystem, connectionData);
+ };
+ BaseModule.Util.triggerMenuAction(activeMap, 'AddSystem', options);
+ }
+
+ /**
+ * get thera connections data
+ * @param callback
+ * @param system
+ */
+ getTheraConnectionsData(callback, system = null){
+
+ this.getLocalStore().getItem('eveScout')
+ .then(cacheEntry => new Promise(resolve => {
+
+ if(
+ cacheEntry && cacheEntry.tSet &&
+ TheraModule.ttlEveScoutResponse > BaseModule.now() - cacheEntry.tSet
+ ){
+ $(this.moduleElement).hideLoadingAnimation();
+ resolve(cacheEntry.value);
+ }else{
+ this.request('GET', 'SystemThera', [], {}, this, context => {
+ $(this.moduleElement).hideLoadingAnimation();
+ }).then(payload => {
+ let cacheEntry = {
+ tSet: BaseModule.now(),
+ value: Array.isArray(payload.data) ? payload.data : []
+ };
+ this.getLocalStore().setItem('eveScout', cacheEntry)
+ .then(cacheEntry => resolve(cacheEntry.value));
+ }).catch(payload => {
+ let reason = payload.data.status + ' ' + payload.data.error;
+ this.showNotify({
+ title: payload.data.jqXHR.status + ': Thera connections data',
+ text: reason,
+ type: 'warning'
+ });
+ resolve([]);
+ });
+ }
+ }))
+ .then(connectionsData => this[callback](connectionsData, system));
+ }
+
+ /**
+ * update thera table with data
+ * @param connectionsData
+ * @param systemThera
+ */
+ callbackUpdateTableRows(connectionsData = [], systemThera = null){
+ if(!this._tableApi){
+ return;
+ }
+
+ connectionsData = Array.isArray(connectionsData) ? connectionsData : [];
+
+ let getGroupedRowId = (groupData, rowId) => {
+ return `${groupData.id}-${rowId}`;
+ };
+
+ let touchedRows = [];
+ let hadData = this._tableApi.rows().any();
+ let notificationCounter = {
+ added: 0,
+ changed: 0,
+ deleted: 0
+ };
+
+ let map = MapUtil.getMapInstance(this._mapId);
+ let currentMapData = BaseModule.Util.getCurrentMapData(this._mapId);
+ if(map && currentMapData){
+ let groupDataMap = {
+ id: this._mapId,
+ name: BaseModule.Util.getObjVal(currentMapData, 'config.name')
+ };
+
+ let groupDataEveScout = {
+ id: 0,
+ name: 'eve-scout.com'
+ };
+
+ // get data from all Thera connections from current map -----------------------------------------------
+ let currentConnectionsData = {};
+ let systemTheraFound = false;
+ if(systemThera){
+ systemTheraFound = true;
+ let currentConnections = MapUtil.searchConnectionsBySystems(map, [systemThera], '*');
+ currentConnectionsData = BaseModule.getConnectionsDataFromConnections(this._mapId, currentConnections);
+ }else{
+ let systemDataThera = MapUtil.getSystemData(this._mapId, TheraModule.systemIdThera, 'systemId');
+ if(systemDataThera){
+ systemTheraFound = true;
+ let systemIdThera = MapUtil.getSystemId(this._mapId, systemDataThera.id);
+ let currentConnections = MapUtil.searchConnectionsBySystems(map, [systemIdThera], '*');
+ currentConnectionsData = BaseModule.getConnectionsDataFromConnections(this._mapId, currentConnections);
+ }
+ }
+
+ this._bodyEl.querySelector(`.${this._config.controlAreaTheraClass}`).classList.toggle('hidden', systemTheraFound);
+
+ let dateNow = new Date();
+
+ let tableDataPrimary = [];
+ let tableDataSecondary = [];
+
+ let formatSignatureData = data => ({
+ id: data.ids,
+ name: data.names.length ? data.names.map(name => name.substring(0, 3)).join(', ') : null,
+ type: {
+ name: data.labels.length ? data.labels.join(', ') : null
+ }
+ });
+
+ let equalPropVal = (val, prop = 'id') => b => b[prop] === val;
+
+ // add mapped Thera connections (primary) -------------------------------------------------------------
+ for(let currentConnectionData of Object.values(currentConnectionsData)){
+ let connectionId = BaseModule.Util.getObjVal(currentConnectionData, 'connection.id') || 0;
+ let updated = BaseModule.Util.getObjVal(currentConnectionData, 'connection.updated') || 0;
+ let source = currentConnectionData.source;
+ let target = currentConnectionData.target;
+ let connectionHash = BaseModule.getConnectionDataCacheKey(source.name, target.name);
+
+ // mapped connection not exists in eveScout data
+ let currentConnectionDataFull = MapUtil.getConnectionDataFromMapData(currentMapData, connectionId);
+ let connection = $().getConnectionById(this._mapId, connectionId);
+ let signatureTypeNames = MapUtil.getConnectionDataFromSignatures(connection, currentConnectionDataFull);
+
+ let sourceSignature = formatSignatureData(signatureTypeNames.source);
+ let targetSignature = formatSignatureData(signatureTypeNames.target);
+
+ // swap source <-> target. 'Thera' should be the source system
+ // -> In order to match the eve-scout response format for connections
+ if(target.name.toLowerCase() === 'thera'){
+ [source, target] = [target, source];
+ [sourceSignature, targetSignature] = [targetSignature, sourceSignature];
+ }
+
+ let whLabel = null;
+ let whSigId = 0;
+ for(let data of Object.values(signatureTypeNames)){
+ if(!data.labels){
+ continue;
+ }
+ let i = data.labels.findIndex(label => label !== 'K162');
+ if(i !== -1){
+ whLabel = data.labels[i];
+ whSigId = data.ids[i];
+ break;
+ }
+ }
+
+ // to calc the remaining lifetime of the wormhole, we need the 'created' date of linked sig.
+ // -> This is "hacky"! We re-search all signatures by whSigId === id... :(
+ let estimatedEol;
+ let maxStableTime = BaseModule.Util.getObjVal(Object.assign({}, Init.wormholes[whLabel]), 'maxStableTime');
+ if(maxStableTime && whSigId){
+ let whSignatureData = (BaseModule.Util.getObjVal(currentConnectionDataFull, 'signatures') || [])
+ .find(equalPropVal(whSigId));
+ let whSignatureCreated = BaseModule.Util.getObjVal(whSignatureData, 'created.created') || 0;
+ if(whSignatureCreated){
+ let createdDate = new Date( whSignatureCreated * 1000);
+ createdDate.setHours(createdDate.getHours() + maxStableTime);
+ //estimatedEol = Math.floor(createdDate.getTime() / 1000);
+ estimatedEol = createdDate.toISOString();
+ }
+ }
+
+ let rowData = {
+ id: getGroupedRowId(groupDataMap, connectionHash),
+ hash: connectionHash,
+ scope: BaseModule.Util.getObjVal(currentConnectionData, 'connection.scope'),
+ type: BaseModule.Util.getObjVal(currentConnectionData, 'connection.type'),
+ source: (({id:realId, systemId:id, name, trueSec, constellation, region}) =>
+ ({
+ realId,
+ id,
+ name,
+ trueSec,
+ constellation,
+ region
+ }))(MapUtil.getSystemDataFromMapData(currentMapData, source.id)),
+ target: (({id:realId, systemId:id, name, trueSec, constellation, region}) =>
+ ({
+ realId,
+ id,
+ name,
+ trueSec,
+ constellation,
+ region
+ }))(MapUtil.getSystemDataFromMapData(currentMapData, target.id)),
+ sourceSignature: sourceSignature,
+ targetSignature: targetSignature,
+ wormholeLabel: whLabel,
+ syncStatus: 'warning',
+ rowGroupData: groupDataMap,
+ connectionId: connectionId,
+ fakeConnection: BaseModule.getFakeConnectionElement(currentConnectionData),
+ estimatedEol: estimatedEol,
+ updated: updated,
+ updatedHash: [updated, signatureTypeNames.hash].join().hashCode()
+ };
+
+ tableDataPrimary.push(rowData);
+ }
+
+ // add EveScout Thera connections (secondary) ---------------------------------------------------------
+ for(let rowData of connectionsData){
+ let systemNameSource = BaseModule.Util.getObjVal(rowData, 'source.name');
+ let systemNameTarget = BaseModule.Util.getObjVal(rowData, 'target.name');
+ let connectionHash = BaseModule.getConnectionDataCacheKey(systemNameSource, systemNameTarget);
+
+ let whLabel = BaseModule.Util.getObjVal(rowData, 'sourceSignature.type.name') || null;
+ if(!whLabel){
+ whLabel = BaseModule.Util.getObjVal(rowData, 'targetSignature.type.name') || null;
+ }
+
+ let massType = BaseModule.Util.getObjVal(Object.assign({}, Init.wormholes[whLabel]), 'size.type');
+ let connectionType = [...rowData.type, massType];
+
+ // overwrite eveScout id with new id (hash)
+ rowData.id = getGroupedRowId(groupDataEveScout, connectionHash);
+ rowData.hash = connectionHash;
+ rowData.wormholeLabel = whLabel;
+ rowData.syncStatus = null;
+ rowData.rowGroupData = groupDataEveScout;
+ rowData.connectionId = null;
+ rowData.type = connectionType;
+ rowData.fakeConnection = BaseModule.getFakeConnectionElement(BaseModule.getFakeConnectionData(
+ {system: systemNameSource},
+ {system: systemNameTarget},
+ rowData.scope,
+ rowData.type
+ ));
+ rowData.updatedHash = String(rowData.updated).hashCode();
+ tableDataSecondary.push(rowData);
+ }
+
+ // + Merge Primary + Secondary table data -------------------------------------------------------------
+ for(let primaryRowData of tableDataPrimary){
+ let secondaryIndex = tableDataSecondary.findIndex(equalPropVal(primaryRowData.hash, 'hash'));
+ if(secondaryIndex !== -1){
+ // get a new hash key from both 'updated' values (primary + secondary) tableData
+ // -> if a signature gets updated on map, table row should be updated, too
+ // -> so we can check it later on if either prim. or sec. data has changed...
+ let updatedHash = [
+ primaryRowData.updatedHash,
+ tableDataSecondary[secondaryIndex].updatedHash
+ ].join().hashCode();
+
+ primaryRowData.syncStatus = 'success';
+ primaryRowData.relRowId = tableDataSecondary[secondaryIndex].id;
+ primaryRowData.updatedHash = updatedHash;
+
+ // remove from secondary table data -> no duplicated rows
+ //tableDataSecondary.splice(secondaryIndex, 1);
+
+ tableDataSecondary[secondaryIndex].syncStatus = 'hint';
+ tableDataSecondary[secondaryIndex].relRowId = primaryRowData.id;
+ tableDataSecondary[secondaryIndex].updatedHash = updatedHash;
+ }
+ }
+
+ let tableData = [...tableDataPrimary, ...tableDataSecondary];
+
+ // update table data ----------------------------------------------------------------------------------
+ for(let rowData of tableData){
+ let rowId = this.getRowById(this._tableApi, rowData.id);
+
+ if(rowId){
+ // update row
+ let api = this._tableApi.row('#' + rowId);
+ let rowDataCurrent = api.data();
+
+ // check for update
+ if(
+ BaseModule.Util.getObjVal(rowDataCurrent, 'updatedHash') !==
+ BaseModule.Util.getObjVal(rowData, 'updatedHash')
+ ){
+ // row data changed -> update
+ api.data(rowData);
+ api.nodes().to$().data('animationStatus', 'changed');
+ notificationCounter.changed++;
+ }
+
+ touchedRows.push(api.id());
+ }else{
+ // insert new row
+ let api = this._tableApi.row.add(rowData);
+ api.nodes().to$().data('animationStatus', 'added');
+ notificationCounter.added++;
+
+ touchedRows.push(api.id());
+ }
+ }
+
+ let api = this._tableApi.rows((idx, data, node) => !touchedRows.includes(node.id));
+ notificationCounter.deleted += api.ids().count();
+ api.remove();
+
+ if(Math.max(...Object.values(notificationCounter))){
+ this._tableApi.draw();
+ }
+
+ // show notification ----------------------------------------------------------------------------------
+ let notification = Object.keys(notificationCounter).reduce((acc, key) => {
+ return `${acc}${notificationCounter[key] ? `${notificationCounter[key]} ${key}
` : ''}`;
+ }, '');
+
+ if(hadData && notification.length){
+ this.showNotify({title: 'Thera connections updated', text: notification, type: 'success', textTrusted: true});
+ }
+ }else{
+ console.warn('Table update failed for Thera connections. MapData is missing');
+ }
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+
+ // add Thera system
+ this._bodyEl.querySelector(`.${this._config.controlAreaTheraClass}`).addEventListener('click', e => {
+ this.showNewSystemDialog({
+ systemData: {
+ id: TheraModule.systemIdThera,
+ name: 'Thera'
+ }
+ }, true);
+ }, false);
+
+ // signature column - "type" popover
+ MapUtil.initWormholeInfoTooltip(
+ $(this.moduleElement).find('.' + this._config.globalTheraTableClass),
+ `.${this._config.tableCellTypeClass} span[class^="pf-system-sec-"]`
+ );
+
+ // init tooltips
+ $(this.moduleElement).initTooltips();
+ }
+
+ /**
+ * update module
+ * compare data and update module
+ * @param mapId
+ * @returns {Promise}
+ */
+ update(mapId){
+ return super.update(mapId).then(mapId => new Promise(resolve => {
+ this.getTheraConnectionsData('callbackUpdateTableRows');
+
+ resolve({
+ action: 'update',
+ data: {
+ module: this
+ }
+ });
+ }));
+ }
+ };
+
+ TheraModule.isPlugin = false; // module is defined as 'plugin'
+ TheraModule.scope = 'global'; // module scope controls how module gets updated and what type of data is injected
+ TheraModule.sortArea = 'b'; // default sortable area
+ TheraModule.position = 3; // default sort/order position within sortable area
+ TheraModule.label = 'Thera'; // static module label (e.g. description)
+ TheraModule.systemIdThera = 31000005;
+ TheraModule.ttlEveScoutResponse = 120;
+
+ TheraModule.defaultConfig = {
+ className: 'pf-global-thera-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Thera Connection',
+
+ // Thera module
+ theraTableId: 'pf-thera-table-', // id prefix for all tables in module
+ theraTableRowIdPrefix: 'pf-thera-row-', // id prefix for table rows
+ globalTheraTableClass: 'pf-global-thera-table', // class for NPC owned stations table
+ controlAreaTheraClass: 'pf-global-thera-control', // class for "thera system exists" label
+
+ // fonts
+ fontUppercaseClass: 'pf-font-uppercase', // class for "uppercase" font
+ linkClass: 'pf-link',
+
+ // Thera connections table
+ tableCellTypeClass: 'pf-table-type-cell', // class for "type" cells
+ tableCellEllipsisClass: 'pf-table-cell-ellipses-auto', // class for table "ellipsis" cells
+ tableCellActionClass: 'pf-table-action-cell'
+ };
+
+ return TheraModule;
+});
\ No newline at end of file
diff --git a/js/app/ui/module/system_graph.js b/js/app/ui/module/system_graph.js
index c92aa0da..990cb9d8 100644
--- a/js/app/ui/module/system_graph.js
+++ b/js/app/ui/module/system_graph.js
@@ -4,29 +4,362 @@
define([
'jquery',
- 'app/init',
'app/util',
+ 'module/base',
'morris'
-], ($, Init, Util, Morris) => {
+], ($, Util, BaseModule, Morris) => {
'use strict';
- let config = {
- // module info
- modulePosition: 3,
- moduleName: 'systemGraph',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
+ let SystemGraphModule = class SystemGraphModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
- // system graph module
- moduleTypeClass: 'pf-system-graph-module', // class for this module
- systemGraphClass: 'pf-system-graph', // class for each graph
+ newHeaderElement(){
+ return ''; // no default header for this module
+ }
- // system graph labels
+ newHeadlineToolbarElement(){
+ let toolbarEl = super.newHeadlineToolbarElement();
+
+ let infoEl = document.createElement('small');
+ infoEl.innerHTML = '';
+ toolbarEl.append(infoEl);
+
+ return toolbarEl;
+ }
+
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
+
+ // graph data is available for k-space systems
+ if(systemData.type.id === 2){
+
+ let rowEl = document.createElement('div');
+ rowEl.classList.add(this._config.bodyClassName, 'grid');
+
+ for(let graphKey of Object.keys(this._config.systemGraphs)){
+ let colEl = document.createElement('div');
+ colEl.dataset.graph = graphKey;
+
+ let headEl = this.newHeadElement();
+ headEl.append(
+ this.newHandlerElement(),
+ this.newHeadlineElement(this.getInfoForGraph(graphKey, 'headline')),
+ this.newHeadlineToolbarElement()
+ );
+
+ let graphEl = document.createElement('div');
+ graphEl.classList.add(this._config.systemGraphClass);
+
+ colEl.append(headEl, graphEl);
+ rowEl.append(colEl);
+ }
+ this.moduleElement.append(rowEl);
+
+ this.setModuleObserver();
+
+ // request graph data and store result promise
+ // -> module is not full rendered jet
+ this._dataPromise = this.getGraphsData();
+
+ return this.moduleElement;
+ }
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+
+ if(this._dataPromise instanceof Promise){
+ this._dataPromise
+ .then(payload => this.addGraphData(payload.data))
+ .catch(payload => {
+ let reason = payload.data.status + ' ' + payload.data.error;
+ this.showNotify({title: payload.data.jqXHR.status + ': System graph data', text: reason, type: 'warning'});
+ });
+ }
+ }
+
+ /**
+ * get data for graphs
+ * @returns {Promise}
+ */
+ getGraphsData(){
+ $(this.moduleElement).find('.' + this._config.systemGraphClass).showLoadingAnimation();
+ return this.request('GET', 'SystemGraph', this._systemData.id, {
+ systemIds: [this._systemData.systemId]
+ });
+ }
+
+ /**
+ * update graph elements with data
+ * @param graphData
+ */
+ addGraphData(graphData){
+
+ // calculate time offset until system updated -------------------------------------------------------------
+ let serverData = Util.getServerTime();
+ let timestampNow = Math.floor(serverData.getTime() / 1000);
+ let timeSinceUpdate = timestampNow - this._systemData.updated.updated;
+
+ let timeInHours = Math.floor(timeSinceUpdate / 3600);
+ let timeInMinutes = Math.floor((timeSinceUpdate % 3600) / 60);
+ let timeInMinutesPercent = parseFloat((timeInMinutes / 60).toFixed(2));
+
+ // graph is from right to left -> convert event line
+ let eventLine = Math.max(parseFloat((24 - timeInHours - timeInMinutesPercent).toFixed(2)), 0);
+
+ // update graph data --------------------------------------------------------------------------------------
+ for(let [systemId, graphsData] of Object.entries(graphData)){
+ for(let [graphKey, graphData] of Object.entries(graphsData)){
+ let graphColElement = $(this.moduleElement).find('[data-graph="' + graphKey + '"]');
+ let graphElement = graphColElement.find('.' + this._config.systemGraphClass);
+ graphElement.hideLoadingAnimation();
+
+ graphColElement.data('infoData', this.initGraph(graphElement, graphKey, graphData, eventLine));
+ }
+ }
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ $(this.moduleElement).hoverIntent({
+ over: function(e){
+ let element = $(this);
+ let tooltipData = element.parents('[data-graph]').data('infoData');
+ if(tooltipData){
+ SystemGraphModule.addSystemGraphTooltip(element, tooltipData.rows, {
+ trigger: 'manual',
+ title: tooltipData.title
+ }).popover('show');
+ }
+ },
+ out: function(e){
+ $(this).destroyPopover();
+ },
+ selector: '.' + Util.config.popoverTriggerClass
+ });
+ }
+
+ /**
+ * get info for a given graph key
+ * @param graphKey
+ * @param option
+ * @returns {*|string}
+ */
+ getInfoForGraph(graphKey, option){
+ return Util.getObjVal(this._config.systemGraphs, graphKey + '.' + option) || '';
+ }
+
+ /**
+ * init Morris Graph
+ * @param graphElement
+ * @param graphKey
+ * @param graphData
+ * @param eventLine
+ * @returns {null|Object}
+ */
+ initGraph(graphElement, graphKey, graphData, eventLine){
+ let tooltipData = null;
+
+ if(
+ graphData.logExists &&
+ graphData.data &&
+ graphData.data.length
+ ){
+ let dataLength = graphData.data.length;
+ let xKey = 'x';
+ let yKeys = this.getInfoForGraph(graphKey, 'ykeys');
+
+ // calc average (goal) ------------------------------------------------------------------------------------
+ // ... init empty sum object ...
+ let sum = yKeys.reduce((result, key) => {
+ result[key] = 0;
+ return result;
+ }, {});
+
+ // ... sum all values ...
+ sum = graphData.data.reduce((sum, obj) => {
+ for(let [key, value] of Object.entries(obj)){
+ if(sum.hasOwnProperty(key)){
+ sum[key] += value;
+ }
+ }
+ return sum;
+ }, sum);
+
+ // ... calc average
+ let goals = Object.values(sum).map(value => Math.floor(value / dataLength));
+
+ // init Morris chart --------------------------------------------------------------------------------------
+ let graphConfig = {
+ element: graphElement,
+ data: graphData.data,
+ xkey: xKey,
+ ykeys: yKeys,
+ labels: this.getInfoForGraph(graphKey, 'labels'),
+ xLabelAngle: 0,
+ parseTime: false,
+ ymin: 0,
+ yLabelFormat: value => Math.round(value),
+ padding: 8,
+ hideHover: true,
+ pointSize: 2.5,
+ lineColors: this.getInfoForGraph(graphKey, 'lineColors'),
+ pointFillColors: this.getInfoForGraph(graphKey, 'pointFillColors'),
+ pointStrokeColors: ['#141519'],
+ lineWidth: 1.5,
+ grid: true,
+ gridTextColor: '#63676a',
+ gridTextSize: 10,
+ gridTextFamily: 'Arial, "Oxygen Bold"',
+ gridStrokeWidth: 0.3,
+ behaveLikeLine: true,
+ goals: goals,
+ goalStrokeWidth: 1,
+ goalLineColors: ['#c2760c'],
+ smooth: true,
+ fillOpacity: 0.5,
+ //belowArea: true,
+ areaColors: ['#c2760c', '#c2760c'],
+ belowArea: true,
+ //resize: true,
+ //redraw: true,
+ dataLabels: false,
+ eventStrokeWidth: 1,
+ eventLineColors: ['#63676a'],
+ nbYkeys2: this.getInfoForGraph(graphKey, 'nbYkeys2')
+ };
+
+ if(eventLine > 0){
+ graphConfig.events = [eventLine];
+ }
+
+ this['_aChart_' + graphKey] = Morris.Line(graphConfig);
+
+ // data for info "popover" --------------------------------------------------------------------------------
+ tooltipData = {};
+ let tooltipRows = [];
+ let infoLabels = this.getInfoForGraph(graphKey, 'infoLabels');
+ goals.forEach((goal, i) => {
+ tooltipRows.push({
+ label: infoLabels[i],
+ value: goal,
+ class: 'txt-color txt-color-orangeDark'
+ });
+ });
+ tooltipData.rows = tooltipRows;
+
+ let serverDate = Util.getServerTime();
+ let updatedDate = Util.convertTimestampToServerTime(graphData.updated);
+ let updatedDiff = Util.getTimeDiffParts(updatedDate, serverDate);
+
+ tooltipData.title = '' + Util.formatTimeParts(updatedDiff) + '';
+ }else{
+ // make container a bit smaller -> no graph shown
+ graphElement.css('height', '22px').text('No data');
+ }
+
+ return tooltipData;
+ }
+
+ beforeDestroy(){
+ super.beforeDestroy();
+
+ for(let graphKey of Object.keys(this._config.systemGraphs)){
+ if(typeof this['_aChart_' + graphKey] === 'object'){
+ this['_aChart_' + graphKey].destroy();
+ delete this['_aChart_' + graphKey];
+ }
+ }
+ }
+
+ /**
+ * detect changed drop area, -> should trigger graph redraw
+ * @param name
+ * @param e
+ */
+ onSortableEvent(name, e){
+ super.onSortableEvent(name, e);
+ if(e.type === 'add' && e.from !== e.to){
+ for(let graphKey of Object.keys(this._config.systemGraphs)){
+ if(typeof this['_aChart_' + graphKey] === 'object'){
+ this['_aChart_' + graphKey].resizeHandler();
+ }
+ }
+ }
+ }
+
+ /**
+ * add info tooltip for graphs
+ * @param element
+ * @param tooltipData
+ * @param options
+ * @returns {jQuery}
+ */
+ static addSystemGraphTooltip(element, tooltipData, options = {}){
+ let table = '';
+ for(let data of tooltipData){
+ let css = data.class || '';
+
+ table += '';
+ table += '| ';
+ table += data.label;
+ table += ' | ';
+ table += '';
+ table += data.value;
+ table += ' | ';
+ table += ' ';
+ }
+ table += ' ';
+
+ let defaultOptions = {
+ placement: 'top',
+ html: true,
+ trigger: 'hover',
+ container: 'body',
+ title: 'Info',
+ content: table,
+ delay: {
+ show: 0,
+ hide: 0
+ },
+ };
+
+ options = Object.assign({}, defaultOptions, options);
+
+ return $(element).popover(options);
+ }
+ };
+
+ SystemGraphModule.isPlugin = false; // module is defined as 'plugin'
+ SystemGraphModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ SystemGraphModule.sortArea = 'a'; // default sortable area
+ SystemGraphModule.position = 3; // default sort/order position within sortable area
+ SystemGraphModule.label = 'Graphs'; // static module label (e.g. description)
+
+ SystemGraphModule.defaultConfig = {
+ className: 'pf-system-graph-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+
+ systemGraphClass: 'pf-system-graph', // class for each graph
systemGraphs: {
jumps: {
headline: 'Jumps',
- units: 'jumps',
+ postUnits: 'jumps',
ykeys: ['y'],
+ nbYkeys2: 0,
labels: ['Jumps'],
lineColors: ['#375959'],
pointFillColors: ['#477372'],
@@ -34,8 +367,9 @@ define([
},
shipKills: {
headline: 'Ship/POD Kills',
- units: 'kills',
+ postUnits: 'kills',
ykeys: ['y', 'z'],
+ nbYkeys2: 1,
labels: ['Ships', 'PODs'],
lineColors: ['#375959', '#477372'],
pointFillColors: ['#477372', '#568a89'],
@@ -43,8 +377,9 @@ define([
},
factionKills: {
headline: 'NPC Kills',
- units: 'kills',
+ postUnits: 'kills',
ykeys: ['y'],
+ nbYkeys2: 0,
labels: ['NPCs'],
lineColors: ['#375959'],
pointFillColors: ['#477372'],
@@ -53,353 +388,5 @@ define([
}
};
- // temp storage for graphsData response Promise
- // -> stored until module is fully rendered (attached to DOM)
- // otherwise graph can not be rendered
- let graphDataPromise = null;
-
- /**
- * get info for a given graph key
- * @param graphKey
- * @param option
- * @returns {string}
- */
- let getInfoForGraph = (graphKey, option) => Util.getObjVal(config.systemGraphs, graphKey + '.' + option) || '';
-
- /**
- * init Morris Graph
- * @param graphElement
- * @param graphKey
- * @param graphData
- * @param eventLine
- * @returns {Array|null}
- */
- let initGraph = (graphElement, graphKey, graphData, eventLine) => {
- let tooltipData = null;
-
- if(
- graphData.logExists &&
- graphData.data &&
- graphData.data.length
- ){
- let dataLength = graphData.data.length;
- let xKey = 'x';
- let yKeys = getInfoForGraph(graphKey, 'ykeys');
-
- // calc average (goal) ------------------------------------------------------------------------------------
- // ... init empty sum object ...
- let sum = yKeys.reduce((result, key) => {
- result[key] = 0;
- return result;
- }, {});
-
- // ... sum all values ...
- sum = graphData.data.reduce((sum, obj) => {
- for(let [key, value] of Object.entries(obj)){
- if(sum.hasOwnProperty(key)){
- sum[key] += value;
- }
- }
- return sum;
- }, sum);
-
- // ... calc average
- let goals = Object.values(sum).map(value => Math.floor(value / dataLength));
-
- // init Morris chart --------------------------------------------------------------------------------------
- let graphConfig = {
- element: graphElement,
- data: graphData.data,
- xkey: xKey,
- ykeys: yKeys,
- labels: getInfoForGraph(graphKey, 'labels'),
- parseTime: false,
- ymin: 0,
- yLabelFormat: value => Math.round(value),
- padding: 8,
- hideHover: true,
- pointSize: 2.5,
- lineColors: getInfoForGraph(graphKey, 'lineColors'),
- pointFillColors: getInfoForGraph(graphKey, 'pointFillColors'),
- pointStrokeColors: ['#141519'],
- lineWidth: 1.5,
- grid: true,
- gridStrokeWidth: 0.3,
- gridTextSize: 9,
- gridTextFamily: 'Oxygen Bold',
- gridTextColor: '#63676a',
- behaveLikeLine: false,
- goals: goals,
- goalStrokeWidth: 1,
- goalLineColors: ['#c2760c'],
- smooth: false,
- fillOpacity: 0.2,
- resize: true,
- redraw: true,
- eventStrokeWidth: 1,
- eventLineColors: ['#63676a']
- };
-
- if(eventLine > 0){
- graphConfig.events = [eventLine];
- }
-
- Morris.Area(graphConfig);
-
- // data for info "popover" --------------------------------------------------------------------------------
- tooltipData = {};
- let tooltipRows = [];
- let infoLabels = getInfoForGraph(graphKey, 'infoLabels');
- goals.forEach((goal, i) => {
- tooltipRows.push({
- label: infoLabels[i],
- value: goal,
- class: 'txt-color txt-color-orangeDark'
- });
- });
- tooltipData.rows = tooltipRows;
-
- let serverDate = Util.getServerTime();
- let updatedDate = Util.convertTimestampToServerTime(graphData.updated);
- let updatedDiff = Util.getTimeDiffParts(updatedDate, serverDate);
-
- tooltipData.title = '' + Util.formatTimeParts(updatedDiff) + '';
- }else{
- // make container a bit smaller -> no graph shown
- graphElement.css('height', '22px').text('No data');
- }
-
- return tooltipData;
- };
-
- /**
- * request graphs data
- * @param requestData
- * @param context
- * @returns {Promise}
- */
- let requestGraphData = (requestData, context) => {
-
- let requestGraphDataExecutor = (resolve, reject) => {
- // show loading animation
- context.moduleElement.find('.' + config.systemGraphClass).showLoadingAnimation();
-
- $.ajax({
- type: 'GET',
- url: Init.path.getSystemGraphData,
- data: requestData,
- dataType: 'json',
- context: context
- }).done(function(graphData){
- resolve({
- action: 'requestGraphData',
- data: {
- context: this,
- graphData: graphData
- }
- });
- }).fail(function(jqXHR, status, error){
- let reason = status + ' ' + error;
- Util.showNotify({title: jqXHR.status + ': System graph data', text: reason, type: 'warning'});
- $(document).setProgramStatus('problem');
- this.moduleElement.hide();
-
- reject();
- });
- };
-
- return new Promise(requestGraphDataExecutor);
- };
-
- /**
- * update graph elements with data
- * @param context
- * @param graphData
- */
- let addGraphData = (context, graphData) => {
-
- // calculate time offset until system updated -----------------------------------------------------------------
- let serverData = Util.getServerTime();
- let timestampNow = Math.floor(serverData.getTime() / 1000);
- let timeSinceUpdate = timestampNow - context.systemData.updated.updated;
-
- let timeInHours = Math.floor(timeSinceUpdate / 3600);
- let timeInMinutes = Math.floor((timeSinceUpdate % 3600) / 60);
- let timeInMinutesPercent = parseFloat((timeInMinutes / 60).toFixed(2));
-
- // graph is from right to left -> convert event line
- let eventLine = Math.max(parseFloat((24 - timeInHours - timeInMinutesPercent).toFixed(2)), 0);
-
- // update graph data ------------------------------------------------------------------------------------------
- for(let [systemId, graphsData] of Object.entries(graphData)){
- for(let [graphKey, graphData] of Object.entries(graphsData)){
- let graphColElement = context.moduleElement.find('[data-graph="' + graphKey + '"]');
- let graphElement = graphColElement.find('.' + config.systemGraphClass);
- graphElement.hideLoadingAnimation();
-
- graphColElement.data('infoData', initGraph(graphElement, graphKey, graphData, eventLine));
- }
- }
-
- setModuleObserver(context.moduleElement);
- };
-
- /**
- * @param moduleElement
- */
- let setModuleObserver = moduleElement => {
- moduleElement.hoverIntent({
- over: function(e){
- let element = $(this);
- let tooltipData = element.parents('[data-graph]').data('infoData');
- if(tooltipData){
- element.addSystemGraphTooltip(tooltipData.rows, {
- trigger: 'manual',
- title: tooltipData.title
- }).popover('show');
- }
- },
- out: function(e){
- $(this).destroyPopover();
- },
- selector: '.' + Util.config.popoverTriggerClass
- });
- };
-
- /**
- * add info tooltip for graphs
- * @param tooltipData
- * @param options
- * @returns {void|*|undefined}
- */
- $.fn.addSystemGraphTooltip = function(tooltipData, options = {}){
-
- let table = '';
- for(let data of tooltipData){
- let css = data.class || '';
-
- table += '';
- table += '| ';
- table += data.label;
- table += ' | ';
- table += '';
- table += data.value;
- table += ' | ';
- table += ' ';
- }
- table += ' ';
-
- let defaultOptions = {
- placement: 'top',
- html: true,
- trigger: 'hover',
- container: 'body',
- title: 'Info',
- content: table,
- delay: {
- show: 0,
- hide: 0
- },
- };
-
- options = $.extend({}, defaultOptions, options);
-
- return this.each(function(){
- $(this).popover(options);
- });
- };
-
- /**
- * @see requestGraphData
- * @param moduleElement
- * @param systemData
- * @returns {Promise}
- */
- let getGraphsData = (moduleElement, systemData) => {
- let requestData = {
- systemIds: [systemData.systemId]
- };
-
- let contextData = {
- moduleElement: moduleElement,
- systemData: systemData
- };
-
- return requestGraphData(requestData, contextData);
- };
-
- /**
- * init callback
- * @param moduleElement
- * @param mapId
- * @param systemData
- */
- let initModule = (moduleElement, mapId, systemData) => {
- if(graphDataPromise instanceof Promise){
- graphDataPromise
- .then(payload => addGraphData(payload.data.context, payload.data.graphData))
- .catch(payload => {});
- }
- };
-
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param systemData
- * @returns {*}
- */
- let getModule = (parentElement, mapId, systemData) => {
- // graph data is available for k-space systems
- let moduleElement = null;
- if(systemData.type.id === 2){
- moduleElement = $('');
- let rowElement = $(' ', {
- class: 'row'
- });
-
- for(let graphKey of Object.keys(config.systemGraphs)){
- rowElement.append(
- $(' ', {
- class: ['col-xs-12', 'col-sm-4'].join(' ')
- }).attr('data-graph', graphKey).append(
- $(' ', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- text: getInfoForGraph(graphKey, 'headline')
- }),
- $('', {
- class: 'pull-right'
- }).append(
- $('', {
- html: ''
- })
- )
- ),
- $('', {
- class: config.systemGraphClass
- })
- )
- );
- }
- moduleElement.append(rowElement);
-
- // request graph data and store result promise globally
- // -> moduleElement is not full rendered at this point
- graphDataPromise = getGraphsData(moduleElement, systemData);
- }
-
- return moduleElement;
- };
-
- return {
- config: config,
- getModule: getModule,
- initModule: initModule
- };
-
+ return SystemGraphModule;
});
diff --git a/js/app/ui/module/system_info.js b/js/app/ui/module/system_info.js
index f1fa9ec3..d2b76b0e 100644
--- a/js/app/ui/module/system_info.js
+++ b/js/app/ui/module/system_info.js
@@ -6,426 +6,448 @@ define([
'jquery',
'app/init',
'app/util',
- 'app/map/util'
-], ($, Init, Util, MapUtil) => {
+ 'app/map/util',
+ 'module/base'
+], ($, Init, Util, MapUtil, BaseModule) => {
'use strict';
- let config = {
- // module info
- modulePosition: 2,
- moduleName: 'systemInfo',
+ let SystemInfoModule = class SystemInfoModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
- // system info module
- moduleTypeClass: 'pf-system-info-module', // class for this module
+ /**
+ * custom header for this module
+ * @returns {*}
+ */
+ newHeaderElement(){
+ let headEl = this.newHeadElement();
- // headline toolbar
- moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
- textActionIconCopyClass: 'pf-module-icon-button-copy', // class for text action "copy"
-
- // breadcrumb
- constellationLinkClass: 'pf-system-info-constellation', // class for "constellation" name
- regionLinkClass: 'pf-system-info-region', // class for "region" name
- typeLinkClass: 'pf-system-info-type', // class for "type" name
-
- // info col/table
- systemInfoSectionClass: 'pf-system-info-section', // class for system info section
- systemInfoTableClass: 'pf-module-table', // class for system info table
- systemInfoNameClass: 'pf-system-info-name', // class for "name" information element
- systemInfoEffectClass: 'pf-system-info-effect', // class for "effect" information element
- systemInfoPlanetsClass: 'pf-system-info-planets', // class for "planets" information element
- systemInfoStatusLabelClass: 'pf-system-info-status-label', // class for "status" information element
- systemInfoStatusAttributeName: 'data-status', // attribute name for status label
- systemInfoWormholeClass: 'pf-system-info-wormhole-', // class prefix for static wormhole element
-
- // description field
- descriptionSectionClass: 'pf-system-description-section', // class for system description section
- descriptionAreaClass: 'pf-system-info-description-area', // class for description area
- addDescriptionButtonClass: 'pf-system-info-description-button', // class for "add description" button
- descriptionTextareaElementClass: 'pf-system-info-description', // class for description textarea element (Summernote)
-
- // sovereignty col/table
- systemSovSectionClass: 'pf-system-sov-section', // class for system sov. section
- systemSovTableClass: 'pf-module-table', // class for system sov. table
- systemSovFwContestedRowClass: 'pf-system-sov-fw-contested-row', // class for "contested" sov. table row
- systemSovFwOccupationRowClass: 'pf-system-sov-fw-occupation-row', // class for "-occupation" sov. table row
- systemSovFwContestedClass: 'pf-system-sov-fw-contested',
- systemSovFwPercentageClass: 'pf-system-sov-fw-percentage',
- systemSovFwOccupationClass: 'pf-system-sov-fw-occupation',
- systemSovFwOccupationImageClass: 'pf-system-sov-fw-occupation-image',
- systemSovFwStatusIconClass: 'pf-system-sov-fw-status-icon',
-
- // fonts
- fontTriglivianClass: 'pf-triglivian', // class for "Triglivian" names (e.g. Abyssal systems)
-
- // Summernote
- defaultBgColor: '#e2ce48'
- };
-
- // max character length for system description
- let maxDescriptionLength = 9000;
-
- /**
- * update trigger function for this module
- * compare data and update module
- * @param moduleElement
- * @param systemData
- */
- let updateModule = (moduleElement, systemData) => {
- let systemId = moduleElement.data('id');
- let updated = moduleElement.data('updated');
-
- if(
- systemId === systemData.id &&
- updated !== systemData.updated.updated
- ){
- let setUpdated = true;
-
- // created/updated tooltip --------------------------------------------------------------------------------
- let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
-
- let tooltipData = {
- created: systemData.created,
- updated: systemData.updated
- };
-
- nameRowElement.addCharacterInfoTooltip( tooltipData );
-
- // update system status -----------------------------------------------------------------------------------
- let systemStatusLabelElement = moduleElement.find('.' + config.systemInfoStatusLabelClass);
- let systemStatusId = parseInt( systemStatusLabelElement.attr( config.systemInfoStatusAttributeName ) );
-
- if(systemStatusId !== systemData.status.id){
- // status changed
- let currentStatusClass = Util.getStatusInfoForSystem(systemStatusId, 'class');
- let newStatusClass = Util.getStatusInfoForSystem(systemData.status.id, 'class');
- let newStatusLabel = Util.getStatusInfoForSystem(systemData.status.id, 'label');
- systemStatusLabelElement.removeClass(currentStatusClass).addClass(newStatusClass).text(newStatusLabel);
-
- // set new status attribute
- systemStatusLabelElement.attr( config.systemInfoStatusAttributeName, systemData.status.id);
+ let headAliasEl = this.newHeadlineElement(this._systemData.alias || this._systemData.name);
+ headAliasEl.setAttribute('title', 'alias');
+ headAliasEl.classList.add('pull-right');
+ if(this._systemData.security === 'A'){
+ headAliasEl.classList.add(this._config.fontTriglivianClass);
}
- // update description textarea ----------------------------------------------------------------------------
- let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
- if(descriptionTextareaElement.length){
- let description = descriptionTextareaElement.html();
- if(description !== systemData.description){
- // description has changed
- if(typeof descriptionTextareaElement.data().summernote === 'object'){
- // "Summernote" editor is currently open
- setUpdated = false;
- }else{
- // not open
- let newDescription = systemData.description;
- if( !Util.isValidHtml(newDescription) ){
- // try to convert raw text into valid html
- newDescription = newDescription.replace(/(\r\n|\n|\r)/g, ' ');
- newDescription = ' ' + newDescription + ' ';
- }
+ let iconEl = this.newIconElement(['fa-fw', 'fa-angle-double-right']);
- descriptionTextareaElement.html(newDescription);
+ let headSysTypeEl = this.newHeadlineElement();
+ let sysTypeEl = document.createElement('span');
+ sysTypeEl.setAttribute('title', 'type');
+ sysTypeEl.classList.add(this._config.typeLinkClass);
+ sysTypeEl.textContent = MapUtil.getSystemTypeInfo(this._systemData.type.id, 'name');
+ headSysTypeEl.append(sysTypeEl, iconEl);
+
+ let headSysRegionEl = this.newHeadlineElement();
+ let sysRegionEl = document.createElement('span');
+ sysRegionEl.setAttribute('title', 'region');
+ sysRegionEl.classList.add(this._config.regionLinkClass);
+ if(this._systemData.security === 'A'){
+ sysRegionEl.classList.add(this._config.fontTriglivianClass);
+ }
+ sysRegionEl.textContent = this._systemData.region.name;
+ headSysRegionEl.append(sysRegionEl, iconEl.cloneNode());
+
+ let headSysConstellationEl = this.newHeadlineElement();
+ let sysConstellationEl = document.createElement('span');
+ sysConstellationEl.classList.add(this._config.constellationLinkClass, this._config.linkClass, Util.config.popoverTriggerClass);
+ if(this._systemData.security === 'A'){
+ sysConstellationEl.classList.add(this._config.fontTriglivianClass);
+ }
+ sysConstellationEl.textContent = this._systemData.constellation.name;
+ sysConstellationEl.setAttribute('popup-ajax', Init.path.getConstellationData + '/' + this._systemData.constellation.id);
+ headSysConstellationEl.append(sysConstellationEl, iconEl.cloneNode());
+
+ let headSysNameEl = this.newHeadlineElement();
+ let sysNameEl = document.createElement('span');
+ sysNameEl.setAttribute('title', 'system');
+ if(this._systemData.security === 'A'){
+ sysNameEl.classList.add(this._config.fontTriglivianClass);
+ }
+ sysNameEl.textContent = this._systemData.name;
+ let iconCopyEl = this.newIconElement(['fa-fw', 'fa-copy', this._config.moduleHeadlineIconClass, this._config.textActionIconCopyClass]);
+ iconCopyEl.setAttribute('title', 'copy url');
+ iconCopyEl.dataset.copy = MapUtil.getMapDeeplinkUrl(this._systemData.mapId, this._systemData.id);
+ headSysNameEl.append(sysNameEl, iconCopyEl);
+ if(this._systemData.locked){
+ let iconLockedEl = this.newIconElement(['fa-fw', 'fa-lock', this._config.moduleHeadlineIconClass]);
+ iconLockedEl.setAttribute('title', 'locked');
+ headSysNameEl.append(iconLockedEl);
+ }
+ for(let linkData of this.getThirdPartySystemLinks(['dotlan', 'eveeye', 'anoik'])){
+ if(linkData.showInModuleHead){
+ let headSysLinkEl = document.createElement('a');
+ headSysLinkEl.classList.add('pf-bg-icon-inline');
+ headSysLinkEl.style.setProperty('--bg-image', `url("${Util.imgRoot()}icons/logo_${linkData.page}.png")`);
+ headSysLinkEl.setAttribute('title', linkData.title);
+ headSysLinkEl.setAttribute('href', linkData.url);
+ headSysLinkEl.setAttribute('target', '_blank');
+ headSysLinkEl.setAttribute('rel', 'noopener');
+ headSysNameEl.append(headSysLinkEl);
+ }
+ }
+
+ headEl.append(
+ this.newHandlerElement(),
+ headAliasEl,
+ headSysTypeEl,
+ headSysRegionEl,
+ headSysConstellationEl,
+ headSysNameEl
+ );
+ return headEl;
+ }
+
+ /**
+ * update module
+ * @param systemData
+ * @returns {Promise}
+ */
+ update(systemData){
+ return super.update(systemData).then(systemData => new Promise(resolve => {
+ if(
+ this._systemData.id === systemData.id &&
+ this._updated !== systemData.updated.updated
+ ){
+ let setUpdated = true;
+
+ // created/updated tooltip ------------------------------------------------------------------------
+ let nameRowElement = $(this.moduleElement).find('.' + this._config.systemInfoNameClass);
+ let tooltipData = {
+ created: systemData.created,
+ updated: systemData.updated
+ };
+ nameRowElement.addCharacterInfoTooltip(tooltipData);
+
+ // update system status ---------------------------------------------------------------------------
+ let systemStatusLabelElement = $(this.moduleElement).find('.' + this._config.systemInfoStatusLabelClass);
+ let systemStatusId = parseInt(systemStatusLabelElement.attr('data-status'));
+
+ if(systemStatusId !== systemData.status.id){
+ // status changed
+ let currentStatusClass = Util.getStatusInfoForSystem(systemStatusId, 'class');
+ let newStatusClass = Util.getStatusInfoForSystem(systemData.status.id, 'class');
+ let newStatusLabel = Util.getStatusInfoForSystem(systemData.status.id, 'label');
+ systemStatusLabelElement.removeClass(currentStatusClass).addClass(newStatusClass).text(newStatusLabel);
+
+ // set new status attribute
+ systemStatusLabelElement.attr('data-status', systemData.status.id);
+ }
+
+ // update description textarea --------------------------------------------------------------------
+ let descriptionTextareaElement = $(this.moduleElement).find('.' + this._config.descriptionTextareaElementClass);
+ if(descriptionTextareaElement.length){
+ let description = descriptionTextareaElement.html();
+ if(description !== systemData.description){
+ // description has changed
+ if(typeof descriptionTextareaElement.data().summernote === 'object'){
+ // "Summernote" editor is currently open
+ setUpdated = false;
+ }else{
+ // not open
+ let newDescription = systemData.description;
+ if(!Util.isValidHtml(newDescription)){
+ // try to convert raw text into valid html
+ newDescription = newDescription.replace(/(\r\n|\n|\r)/g, ' ');
+ newDescription = ' ' + newDescription + ' ';
+ }
+
+ descriptionTextareaElement.html(newDescription);
+ }
+ }
+ }
+
+ if(setUpdated){
+ this._updated = systemData.updated.updated;
}
}
- }
- // update faction warfare rows ----------------------------------------------------------------------------
- let fwContestedRow = moduleElement.find('.' + config.systemSovFwContestedRowClass);
- let fwOccupationRow = moduleElement.find('.' + config.systemSovFwOccupationRowClass);
- if(systemData.factionWar){
- let contested = String(Util.getObjVal(systemData.factionWar, 'contested') || '');
- let percentage = parseInt(Util.getObjVal(systemData.factionWar, 'victoryPercentage')) || 0;
- let occupierFaction = Util.getObjVal(systemData.factionWar, 'occupierFaction');
+ $(this.moduleElement).hideLoadingAnimation();
- let statusColor = 'red';
- if(occupierFaction){
- // system is "occupied" by hostile "occupierFaction" (stable)
- // -> hide percent
- statusColor = '#d9534f';
- percentage += '%';
- }else if('uncontested' === contested){
- // system is "uncontested" and owned by default ownerFaction (stable)
- // -> hide percent
- statusColor = '#4f9e4f';
- percentage = 'stable';
- }else if('contested' === contested){
- // system is "contested", 0%-99% percentage
- statusColor = '#e28a0d';
- percentage += '%';
- }else if(
- 'vulnerable' === contested ||
- 'captured' === contested
- ){
- // system is "vulnerable", 100% percentage
- // -> "captured" state is might be the same?!
- statusColor = '#d747d6';
- percentage = '100%';
- }
-
- fwContestedRow.find('.' + config.systemSovFwStatusIconClass)[0].style.setProperty('--color', statusColor);
- fwContestedRow.find('.' + config.systemSovFwContestedClass).text(contested);
- fwContestedRow.find('.' + config.systemSovFwPercentageClass).text(percentage);
- fwContestedRow.show();
-
- let occupierFactionImage = Util.eveImageUrl('factions', (occupierFaction ? occupierFaction.id : 0), 64);
- let occupierFactionName = occupierFaction ? occupierFaction.name : '';
-
- fwOccupationRow.find('.' + config.systemSovFwOccupationImageClass)[0].style.setProperty('--bg-image', 'url(\'' + occupierFactionImage + '\')');
- fwOccupationRow.find('.' + config.systemSovFwOccupationClass).text(occupierFactionName);
- if(occupierFaction){
- fwOccupationRow.show();
- }
- }else{
- fwContestedRow.hide();
- fwOccupationRow.hide();
- }
-
- if(setUpdated){
- moduleElement.data('updated', systemData.updated.updated);
- }
+ resolve({
+ action: 'update',
+ data: {
+ module: this
+ }
+ });
+ }));
}
- moduleElement.find('.' + config.descriptionAreaClass).hideLoadingAnimation();
- moduleElement.find('.' + config.systemSovSectionClass + ' .' + Util.config.dynamicAreaClass).hideLoadingAnimation();
- };
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
- /**
- * @param pages
- * @param systemData
- */
- let getThirdPartySystemLinks = (pages, systemData) => {
- let links = [];
- let isWormhole = MapUtil.getSystemTypeInfo(Util.getObjVal(systemData, 'type.id'), 'name') === 'w-space';
- let systemName = Util.getObjVal(systemData, 'name') || '';
- let regionName = Util.getObjVal(systemData, 'region.name') || '';
+ let rowEl = document.createElement('div');
+ rowEl.classList.add(this._config.bodyClassName, 'grid');
- let setDestination = e => {
- e.preventDefault();
- e.stopPropagation();
- Util.setDestination('set_destination', 'system', {id: systemData.systemId, name: systemData.name});
- };
+ let colInfoEl, colSovEl, colDescEl;
- for(let i = 0; i < pages.length; i++){
- let link = null;
- let showInModuleHead = true;
- let domain = Util.getObjVal(Init, 'url.' + pages[i]);
- if(domain){
- // linkOut url
- let url = false;
- switch(pages[i]){
- case 'dotlan':
- let systemNameTemp = systemName.replace(/ /g, '_');
- let regionNameTemp = regionName.replace(/ /g, '_');
- if(isWormhole){
- url = domain + '/system/' + systemNameTemp;
- }else{
- url = domain + '/map/' + regionNameTemp + '/' + systemNameTemp;
- }
- break;
- case 'eveeye':
- if(!isWormhole){
- url = domain + '/?m=' + encodeURIComponent(regionName) + '&s=' + encodeURIComponent(systemName);
- url += '&t=eswkc&o=thera,con_svc,node_sov,sub_sec,sector_fac,tag_mk';
- }
- break;
- case 'anoik':
- if(isWormhole){
- url = domain + '/systems/' + systemName;
- }
- break;
- }
+ colInfoEl = document.createElement('div');
+ colInfoEl.classList.add(this._config.systemInfoSectionClass);
+ rowEl.append(colInfoEl);
- if(url){
- let urlObj = new URL(url);
- link = {
- title: urlObj.hostname,
- url: url
- };
- }
- }else{
- // custom callback
- let action = false;
- let title = false;
- switch(pages[i]){
- case 'eve':
- action = setDestination;
- title = 'set destination';
- showInModuleHead = false;
- break;
- }
+ colSovEl = document.createElement('div');
+ colSovEl.classList.add(this._config.systemSovSectionClass, 'pf-dynamic-area');
+ rowEl.append(colSovEl);
- if(action){
- link = {
- title: title|| pages[i],
- action: action
- };
- }
- }
+ colDescEl = document.createElement('div');
+ colDescEl.classList.add(this._config.descriptionSectionClass);
+ rowEl.append(colDescEl);
+ this.moduleElement.append(rowEl);
- if(link){
- links.push(Object.assign({}, link, {
- page: pages[i],
- showInModuleHead: showInModuleHead
- }));
- }
+ require(['text!templates/modules/system_info.html', 'mustache', 'summernote.loader'], (template, Mustache, Summernote) => {
+ SystemInfoModule.Mustache = Mustache;
+ SystemInfoModule.Summernote = Summernote;
+
+ template = new DOMParser().parseFromString(template, 'text/html');
+ SystemInfoModule.tplInfoSection = template.getElementById('tplInfoSection').innerHTML;
+ SystemInfoModule.tplSovSection = template.getElementById('tplSovSection').innerHTML;
+ SystemInfoModule.tplDescSection = template.getElementById('tplDescSection').innerHTML;
+
+ // optional parse() for cache parsed templates
+ SystemInfoModule.Mustache.parse(SystemInfoModule.tplInfoSection);
+ SystemInfoModule.Mustache.parse(SystemInfoModule.tplSovSection);
+ SystemInfoModule.Mustache.parse(SystemInfoModule.tplDescSection);
+
+ this.renderInfoSection(colInfoEl, SystemInfoModule.tplInfoSection);
+ this.renderSovSection(colSovEl, SystemInfoModule.tplSovSection);
+ this.renderDescSection(colDescEl, SystemInfoModule.tplDescSection);
+
+ this.setModuleObserver();
+ });
+
+ return this.moduleElement;
}
- return links;
- };
-
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param systemData
- */
- let getModule = (parentElement, mapId, systemData) => {
- let moduleElement = $(' ');
-
- // store systemId -> module can be updated with the correct data
- moduleElement.data('id', systemData.id);
-
- // system "sovereignty" data
- // "primary" data is eigther "alliance" -> 0.0 space
- // or "faction" -> Empire Regions (LS, HS)
- let sovereigntyDefault = {
- row1Label: 'Sov.',
- row1Val: '???',
- row1Img: undefined,
- row1ImgTitle: undefined,
- row2Label: undefined,
- row2Val: undefined,
- row3Label: undefined,
- row3Val: undefined
- };
-
- let sovereigntyPrimary;
- let sovereigntySecondary;
-
- if(systemData.sovereignty){
- let sovDataFact = Util.getObjVal(systemData.sovereignty, 'faction');
- let sovDataAlly = Util.getObjVal(systemData.sovereignty, 'alliance');
- let sovDataCorp = Util.getObjVal(systemData.sovereignty, 'corporation');
-
- if(sovDataFact){
- sovereigntyPrimary = {
- row1Val: 'Faction',
- row1Img: Util.eveImageUrl('factions', sovDataFact.id, 64),
- row1ImgTitle: sovDataFact.name,
- row2Val: sovDataFact.name
+ /**
+ * render 'sovereignty' section
+ * @param parentEl
+ * @param template
+ */
+ renderInfoSection(parentEl, template){
+ if(SystemInfoModule.Mustache && parentEl && template){
+ let data = {
+ config: this._config,
+ system: this._systemData,
+ systemStatusClass: Util.getStatusInfoForSystem(this._systemData.status.id, 'class'),
+ systemStatusLabel: Util.getStatusInfoForSystem(this._systemData.status.id, 'label'),
+ systemNameClass: this._systemData.security === 'A' ? this._config.fontTriglivianClass : '',
+ systemSecurityClass: Util.getSecurityClassForSystem(this._systemData.security),
+ trueSec: this._systemData.trueSec.toFixed(1),
+ trueSecClass: Util.getTrueSecClassForSystem(this._systemData.trueSec),
+ systemEffectName: MapUtil.getEffectInfoForSystem(this._systemData.effect, 'name'),
+ systemEffectClass: MapUtil.getEffectInfoForSystem(this._systemData.effect, 'class'),
+ systemPlanetCount: this._systemData.planets ? this._systemData.planets.length : 0,
+ systemStaticData: (Util.getObjVal(this._systemData, 'statics') || []).reduce((acc, wormholeName) => {
+ acc.push(Object.assign({}, Init.wormholes[wormholeName]));
+ return acc;
+ }, []),
+ systemShatteredClass: Util.getSecurityClassForSystem('SH'),
+ popoverTriggerClass: Util.config.popoverTriggerClass
};
- }else{
- if(sovDataAlly){
- sovereigntyPrimary = {
- row1Val: 'Alliance',
- row1Img: Util.eveImageUrl('alliances', sovDataAlly.id, 64),
- row1ImgTitle: sovDataAlly.name,
- row2Val: '<' + sovDataAlly.ticker + '>',
- row3Label: 'Ally',
- row3Val: sovDataAlly.name
- };
- }
- if(sovDataCorp){
- sovereigntySecondary = {
- row1Label: 'Corp',
- row1Val: sovDataCorp.name,
- row1Img: Util.eveImageUrl('corporations', sovDataCorp.id, 64)
- };
- }
+ parentEl.innerHTML = SystemInfoModule.Mustache.render(template, data);
+
+ this.setInfoSectionObserver(parentEl);
}
}
- // system "static" wh data
- let staticsData = [];
- if(
- systemData.statics &&
- systemData.statics.length > 0
- ){
- for(let wormholeName of systemData.statics){
- let wormholeData = Object.assign({}, Init.wormholes[wormholeName]);
- staticsData.push(wormholeData);
- }
- }
-
- let effectName = MapUtil.getEffectInfoForSystem(systemData.effect, 'name');
- let effectClass = MapUtil.getEffectInfoForSystem(systemData.effect, 'class');
-
- let data = {
- system: systemData,
- sovereigntyPrimary: sovereigntyPrimary ? Object.assign({}, sovereigntyDefault, sovereigntyPrimary) : undefined,
- sovereigntySecondary: sovereigntySecondary ? Object.assign({}, sovereigntyDefault, sovereigntySecondary) : undefined,
- static: staticsData,
- moduleHeadlineIconClass: config.moduleHeadlineIconClass,
- textActionIconCopyClass: config.textActionIconCopyClass,
- infoSectionClass: config.systemInfoSectionClass,
- descriptionSectionClass: config.descriptionSectionClass,
- sovSectionClass: config.systemSovSectionClass,
- infoTableClass: config.systemInfoTableClass,
- sovTableClass: config.systemSovTableClass,
- nameInfoClass: config.systemInfoNameClass,
- effectInfoClass: config.systemInfoEffectClass,
- planetsInfoClass: config.systemInfoPlanetsClass,
- wormholePrefixClass: config.systemInfoWormholeClass,
- statusInfoClass: config.systemInfoStatusLabelClass,
- popoverTriggerClass: Util.config.popoverTriggerClass,
-
- // sovereignty table
- sovFwContestedRowClass: config.systemSovFwContestedRowClass,
- sovFwOccupationRowClass: config.systemSovFwOccupationRowClass,
- sovFwContestedInfoClass: config.systemSovFwContestedClass,
- sovFwPercentageInfoClass: config.systemSovFwPercentageClass,
- sovFwOccupationInfoClass: config.systemSovFwOccupationClass,
- sovFwOccupationImageClass: config.systemSovFwOccupationImageClass,
- sovFwStatusIconClass: config.systemSovFwStatusIconClass,
-
- systemUrl: MapUtil.getMapDeeplinkUrl(mapId, systemData.id),
- systemTypeName: MapUtil.getSystemTypeInfo(systemData.type.id, 'name'),
- systemStatusId: systemData.status.id,
- systemStatusClass: Util.getStatusInfoForSystem(systemData.status.id, 'class'),
- systemStatusLabel: Util.getStatusInfoForSystem(systemData.status.id, 'label'),
- securityClass: Util.getSecurityClassForSystem(systemData.security),
- trueSec: systemData.trueSec.toFixed(1),
- trueSecClass: Util.getTrueSecClassForSystem( systemData.trueSec ),
- effectName: effectName,
- effectClass: effectClass,
- descriptionAreaClass: config.descriptionAreaClass,
- descriptionButtonClass: config.addDescriptionButtonClass,
- descriptionTextareaClass: config.descriptionTextareaElementClass,
- summernoteClass: Util.config.summernoteClass,
- systemNameClass: () => {
- return (val, render) => {
- return render(val) === 'A' ? config.fontTriglivianClass : '';
+ /**
+ * render 'sovereignty' section
+ * @param parentEl
+ * @param template
+ */
+ renderSovSection(parentEl, template){
+ if(SystemInfoModule.Mustache && parentEl && template){
+ // system "sovereignty" data
+ // "primary" data is either "alliance" -> 0.0 space
+ // or "faction" -> Empire Regions (LS, HS)
+ let sovereigntyDefault = {
+ row1Label: 'Sov.',
+ row1Val: '???',
+ row1Img: undefined,
+ row1ImgTitle: undefined,
+ row2Label: undefined,
+ row2Val: undefined,
+ row3Label: undefined,
+ row3Val: undefined
};
- },
- formatUrl: () => {
- return (val, render) => render(val).replace(/ /g, '_');
- },
- planetCount: systemData.planets ? systemData.planets.length : 0,
- shatteredClass: Util.getSecurityClassForSystem('SH'),
+ let sovereigntyPrimary;
+ let sovereigntySecondary;
- ajaxConstellationInfoUrl: Init.path.getConstellationData,
+ if(this._systemData.sovereignty){
+ let sovDataFact = Util.getObjVal(this._systemData.sovereignty, 'faction');
+ let sovDataAlly = Util.getObjVal(this._systemData.sovereignty, 'alliance');
+ let sovDataCorp = Util.getObjVal(this._systemData.sovereignty, 'corporation');
- systemConstellationLinkClass: config.constellationLinkClass,
- systemRegionLinkClass: config.regionLinkClass,
- systemTypeLinkClass: config.typeLinkClass,
- systemUrlLinkClass: config.textActionIconCopyClass,
- ccpImageServerUrl: Init.url.ccpImageServer,
- thirdPartyLinks: getThirdPartySystemLinks(['dotlan', 'eveeye', 'anoik', 'eve'], systemData)
- };
+ if(sovDataFact){
+ sovereigntyPrimary = {
+ row1Val: 'Faction',
+ row1Img: Util.eveImageUrl('factions', sovDataFact.id, 64),
+ row1ImgTitle: sovDataFact.name,
+ row2Val: sovDataFact.name
+ };
+ }else{
+ if(sovDataAlly){
+ sovereigntyPrimary = {
+ row1Val: 'Alliance',
+ row1Img: Util.eveImageUrl('alliances', sovDataAlly.id, 64),
+ row1ImgTitle: sovDataAlly.name,
+ row2Val: '<' + sovDataAlly.ticker + '>',
+ row3Label: 'Ally',
+ row3Val: sovDataAlly.name
+ };
+ }
+ if(sovDataCorp){
+ sovereigntySecondary = {
+ row1Label: 'Corp',
+ row1Val: sovDataCorp.name,
+ row1Img: Util.eveImageUrl('corporations', sovDataCorp.id, 64)
+ };
+ }
+ }
+ }
- requirejs(['text!templates/modules/system_info.html', 'mustache', 'summernote.loader'], (template, Mustache, Summernote) => {
- let content = Mustache.render(template, data);
- moduleElement.append(content);
+ let data = {
+ config: this._config,
+ sovereigntyPrimary: sovereigntyPrimary ? Object.assign({}, sovereigntyDefault, sovereigntyPrimary) : undefined,
+ sovereigntySecondary: sovereigntySecondary ? Object.assign({}, sovereigntyDefault, sovereigntySecondary) : undefined,
+ };
- let sovSectionArea = moduleElement.find('.' + config.systemSovSectionClass + ' .' + Util.config.dynamicAreaClass);
- let descriptionArea = moduleElement.find('.' + config.descriptionAreaClass);
- let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
- let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
+ // show only if sov data exists
+ if(data.sovereigntyPrimary){
+ parentEl.innerHTML = SystemInfoModule.Mustache.render(template, data);
- // lock "description" field until first update
+ this.setSovSectionObserver(parentEl);
+ }else{
+ parentEl.parentNode.classList.add(this._config.bodyClassName + '-small');
+ parentEl.remove();
+ }
+ }
+ }
+
+ /**
+ * render 'description' section
+ * @param parentEl
+ * @param template
+ */
+ renderDescSection(parentEl, template){
+ if(SystemInfoModule.Mustache && parentEl && template){
+ let data = {
+ config: this._config,
+ summernoteClass: Util.config.summernoteClass
+ };
+ parentEl.innerHTML = SystemInfoModule.Mustache.render(template, data);
+
+ this.setDescSectionObserver(parentEl);
+ }
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ // init copy system deeplink URL
+ $(this.moduleElement).find('.' + this._config.textActionIconCopyClass).on('click', function(){
+ let mapUrl = $(this).attr('data-copy');
+ Util.copyToClipboard(mapUrl).then(payload => {
+ if(payload.data){
+ Util.showNotify({title: 'Copied to clipboard', text: mapUrl, type: 'success'});
+ }
+ });
+ });
+
+ // init constellation popover
+ $(this.moduleElement).find('[popup-ajax]').popover({
+ html: true,
+ trigger: 'hover',
+ placement: 'top',
+ delay: 200,
+ container: 'body',
+ content: function(){
+ //return details_in_popup(this);
+ let popoverElement = $(this);
+ let popover = popoverElement.data('bs.popover');
+
+ $.ajax({
+ url: popoverElement.attr('popup-ajax'),
+ success: function(data){
+ popover.options.content = Util.getSystemsInfoTable(data.systemsData);
+ // reopen popover (new content size)
+ popover.show();
+ }
+ });
+ return 'Loading...';
+ }
+ });
+
+ // init tooltips
+ $(this.moduleElement).initTooltips({
+ placement: 'top'
+ });
+ }
+
+ /**
+ * observer 'info' section
+ * @param parentEl
+ */
+ setInfoSectionObserver(parentEl){
+ // init system effect popover
+ $(parentEl).find('.' + this._config.systemInfoEffectClass).addSystemEffectTooltip(
+ this._systemData.security,
+ this._systemData.effect, {
+ placement: 'left'
+ });
+
+ // init planets popover
+ $(parentEl).find('.' + this._config.systemInfoPlanetsClass).addSystemPlanetsTooltip(
+ this._systemData.planets, {
+ placement: 'left'
+ });
+
+ // init static wormhole popover
+ MapUtil.initWormholeInfoTooltip($(parentEl), '[data-name]', {
+ placement: 'left'
+ });
+ }
+
+ /**
+ * observer 'sovereignty' section
+ * @param parentEl
+ */
+ setSovSectionObserver(parentEl){
+ // "lock" area until first update
+ $(parentEl).showLoadingAnimation();
+ }
+
+ /**
+ * observer 'description' section
+ * @param parentEl
+ */
+ setDescSectionObserver(parentEl){
+ let descriptionArea = $(parentEl).find('.' + this._config.descriptionAreaClass);
+ let descriptionButton = $(parentEl).find('.' + this._config.addDescriptionButtonClass);
+ let descriptionTextareaElement = $(parentEl).find('.' + this._config.descriptionTextareaElementClass);
+ let maxDescriptionLength = this._config.maxDescriptionLength;
+ let systemId = this._systemData.id;
+ let saveCallback = this.update.bind(this);
+
+ // "lock" area until first update
descriptionArea.showLoadingAnimation();
- sovSectionArea.showLoadingAnimation();
// WYSIWYG init on button click ---------------------------------------------------------------------------
descriptionButton.on('click', function(e){
@@ -437,7 +459,7 @@ define([
// content has changed
let descriptionChanged = false;
- Summernote.initSummernote(descriptionTextareaElement, {
+ SystemInfoModule.Summernote.initSummernote(descriptionTextareaElement, {
height: 75, // set editor height
minHeight: 75, // set minimum height of editor
maxHeight: 500, // set maximum height of editor
@@ -473,12 +495,12 @@ define([
let validDescription = true;
let description = '';
- if( context.$note.summernote('isEmpty') ){
+ if(context.$note.summernote('isEmpty')){
// ... isEmpty -> clear empty default tags as well
context.$note.summernote('code', '');
}else{
description = context.$note.summernote('code');
- if( !Util.isValidHtml(description) ){
+ if(!Util.isValidHtml(description)){
// ... not valid HTML
validDescription = false;
context.layoutInfo.editable.addClass('has-error');
@@ -490,7 +512,7 @@ define([
// ... valid -> save()
descriptionArea.showLoadingAnimation();
- Util.request('PATCH', 'system', systemData.id, {
+ Util.request('PATCH', 'System', systemId, {
description: description
}, {
descriptionArea: descriptionArea
@@ -500,7 +522,7 @@ define([
}).then(
payload => {
context.$note.summernote('destroy');
- updateModule(moduleElement, payload.data);
+ saveCallback(payload.data);
},
Util.handleAjaxErrorResponse
);
@@ -522,13 +544,14 @@ define([
// set default background color
// -> could not figure out how to set by API as default color
- context.toolbar.find('.note-current-color-button').attr('data-backcolor', config.defaultBgColor)
- .find('.note-recent-color').css('background-color', config.defaultBgColor);
+ let defaultBgColor = '#e2ce48';
+ context.toolbar.find('.note-current-color-button').attr('data-backcolor', defaultBgColor)
+ .find('.note-recent-color').css('background-color', defaultBgColor);
},
onChange: function(contents){
descriptionChanged = true;
},
- onPaste: function (e) {
+ onPaste: function(e){
let bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
@@ -543,94 +566,128 @@ define([
}
});
});
+ }
- // init system effect popover -----------------------------------------------------------------------------
- moduleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
+ /**
+ * get 3rd party system link configuration
+ * @param pages
+ * @returns {[]}
+ */
+ getThirdPartySystemLinks(pages){
+ let links = [];
+ let isWormhole = MapUtil.getSystemTypeInfo(Util.getObjVal(this._systemData, 'type.id'), 'name') === 'w-space';
+ let systemName = Util.getObjVal(this._systemData, 'name') || '';
+ let regionName = Util.getObjVal(this._systemData, 'region.name') || '';
- // init planets popover -----------------------------------------------------------------------------------
- moduleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
+ for(let i = 0; i < pages.length; i++){
+ let link = null;
+ let showInModuleHead = true;
+ let domain = Util.getObjVal(Init, 'url.' + pages[i]);
+ if(domain){
+ // linkOut url
+ let url = false;
+ switch(pages[i]){
+ case 'dotlan':
+ let systemNameTemp = systemName.replace(/ /g, '_');
+ let regionNameTemp = regionName.replace(/ /g, '_');
+ if(isWormhole){
+ url = domain + '/system/' + systemNameTemp;
+ }else{
+ url = domain + '/map/' + regionNameTemp + '/' + systemNameTemp;
+ }
+ break;
+ case 'eveeye':
+ if(!isWormhole){
+ url = domain + '/?m=' + encodeURIComponent(regionName) + '&s=' + encodeURIComponent(systemName);
+ url += '&t=eswkc&o=thera,con_svc,node_sov,sub_sec,sector_fac,tag_mk';
+ }
+ break;
+ case 'anoik':
+ if(isWormhole){
+ url = domain + '/systems/' + systemName;
+ }
+ break;
+ }
- // init static wormhole information -----------------------------------------------------------------------
- for(let staticData of staticsData){
- let staticRowElement = moduleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
- staticRowElement.addWormholeInfoTooltip(staticData);
+ if(url){
+ let urlObj = new URL(url);
+ link = {
+ title: urlObj.hostname,
+ url: url
+ };
+ }
+ }
+
+ if(link){
+ links.push(Object.assign({}, link, {
+ page: pages[i],
+ showInModuleHead: showInModuleHead
+ }));
+ }
}
- // copy system deeplink URL -------------------------------------------------------------------------------
- moduleElement.find('.' + config.textActionIconCopyClass).on('click', function(){
- let mapUrl = $(this).attr('data-url');
- Util.copyToClipboard(mapUrl).then(payload => {
- if(payload.data){
- Util.showNotify({title: 'Copied to clipboard', text: mapUrl, type: 'success'});
- }
- });
- });
+ return links;
+ }
- // constellation popover ----------------------------------------------------------------------------------
- moduleElement.find('a.popup-ajax').popover({
- html: true,
- trigger: 'hover',
- placement: 'top',
- delay: 200,
- container: 'body',
- content: function(){
- return details_in_popup(this);
- }
- });
+ beforeDestroy(){
+ super.beforeDestroy();
- let details_in_popup = popoverElement => {
- popoverElement = $(popoverElement);
- let popover = popoverElement.data('bs.popover');
-
- $.ajax({
- url: popoverElement.data('url'),
- success: function(data){
- popover.options.content = Util.getSystemsInfoTable(data.systemsData);
- // reopen popover (new content size)
- popover.show();
- }
- });
- return 'Loading...';
- };
-
- // 3rd party click callbacks ------------------------------------------------------------------------------
- moduleElement.on('click', '[data-link]', e => {
- for(let link of data.thirdPartyLinks){
- if(
- e.target.dataset.link === link.page &&
- typeof link.action === 'function'
- ){
- link.action(e);
- break;
- }
- }
- });
-
- // init tooltips ------------------------------------------------------------------------------------------
- let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
- tooltipElements.tooltip({
- container: 'body',
- placement: 'top'
- });
- });
-
- return moduleElement;
+ let descriptionTextareaEl = this.moduleElement.querySelector(`.${this._config.descriptionTextareaElementClass}`);
+ if(descriptionTextareaEl && $(descriptionTextareaEl).summernote){
+ $(descriptionTextareaEl).summernote('destroy');
+ }
+ }
};
- /**
- * efore module destroy callback
- * @param moduleElement
- */
- let beforeDestroy = moduleElement => {
- moduleElement.find('.' + config.descriptionTextareaElementClass).summernote('destroy');
+ SystemInfoModule.isPlugin = false; // module is defined as 'plugin'
+ SystemInfoModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ SystemInfoModule.sortArea = 'a'; // default sortable area
+ SystemInfoModule.position = 2; // default sort/order position within sortable area
+ SystemInfoModule.label = 'Information'; // static module label (e.g. description)
+ SystemInfoModule.fullDataUpdate = true; // static module requires additional data (e.g. system description,...)
- moduleElement.destroyPopover(true);
+ SystemInfoModule.defaultConfig = {
+ className: 'pf-system-info-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+
+ // headline toolbar
+ textActionIconCopyClass: 'pf-module-icon-button-copy', // class for text action "copy"
+
+ // breadcrumb
+ constellationLinkClass: 'pf-system-info-constellation', // class for "constellation" name
+ regionLinkClass: 'pf-system-info-region', // class for "region" name
+ typeLinkClass: 'pf-system-info-type', // class for "type" name
+
+ // info area
+ systemInfoSectionClass: 'pf-system-info-section', // class for system info section
+ systemInfoTableClass: 'pf-module-table', // class for system info table
+ systemInfoNameClass: 'pf-system-info-name', // class for "name" information element
+ systemInfoEffectClass: 'pf-system-info-effect', // class for "effect" information element
+ systemInfoPlanetsClass: 'pf-system-info-planets', // class for "planets" information element
+ systemInfoStatusLabelClass: 'pf-system-info-status-label', // class for "status" information element
+
+ // sovereignty area
+ systemSovSectionClass: 'pf-system-sov-section', // class for system sov. section
+ systemSovTableClass: 'pf-module-table', // class for system sov. table
+ systemSovFwContestedRowClass: 'pf-system-sov-fw-contested-row', // class for "contested" sov. table row
+ systemSovFwOccupationRowClass: 'pf-system-sov-fw-occupation-row', // class for "-occupation" sov. table row
+ systemSovFwContestedClass: 'pf-system-sov-fw-contested',
+ systemSovFwPercentageClass: 'pf-system-sov-fw-percentage',
+ systemSovFwOccupationClass: 'pf-system-sov-fw-occupation',
+ systemSovFwOccupationImageClass: 'pf-system-sov-fw-occupation-image',
+ systemSovFwStatusIconClass: 'pf-system-sov-fw-status-icon',
+
+ // description area
+ descriptionSectionClass: 'pf-system-description-section', // class for system description section
+ descriptionAreaClass: 'pf-system-info-description-area', // class for description area
+ addDescriptionButtonClass: 'pf-system-info-description-button', // class for "add description" button
+ descriptionTextareaElementClass: 'pf-system-info-description', // class for description textarea element (Summernote)
+ maxDescriptionLength: 9000, // max character length for system description
+
+ // fonts
+ fontTriglivianClass: 'pf-triglivian', // class for "Triglivian" names (e.g. Abyssal systems)
+ linkClass: 'pf-link'
};
- return {
- config: config,
- getModule: getModule,
- updateModule: updateModule,
- beforeDestroy: beforeDestroy
- };
+ return SystemInfoModule;
});
diff --git a/js/app/ui/module/system_intel.js b/js/app/ui/module/system_intel.js
index 985eb653..09bbba63 100644
--- a/js/app/ui/module/system_intel.js
+++ b/js/app/ui/module/system_intel.js
@@ -6,859 +6,403 @@ define([
'jquery',
'app/init',
'app/util',
+ 'module/base',
'bootbox',
- 'app/counter',
- 'app/map/util',
-], ($, Init, Util, bootbox, Counter, MapUtil) => {
+ 'app/counter'
+], ($, Init, Util, BaseModule, bootbox, Counter) => {
'use strict';
- let config = {
- // module info
- modulePosition: 1,
- moduleName: 'systemIntel',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
-
- // system intel module
- moduleTypeClass: 'pf-system-intel-module', // class for this module
-
- // headline toolbar
- moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
-
- // system intel module
- intelTableId: 'pf-intel-table-', // id prefix for all tables in module
- intelTableRowIdPrefix: 'pf-intel-row-', // id prefix for table rows
- systemStationsTableClass: 'pf-system-station-table', // class for NPC owned stations table
- systemStructuresTableClass: 'pf-system-structure-table', // class for player owned structures table
-
- // structure dialog
- structureDialogId: 'pf-structure-dialog', // id for "structure" dialog
- nameInputId: 'pf-structure-dialog-name-input', // id for "name" input
- statusSelectId: 'pf-structure-dialog-status-select', // id for "status" select
- typeSelectId: 'pf-structure-dialog-type-select', // id for "type" select
- corporationSelectId: 'pf-structure-dialog-corporation-select', // id for "corporation" select
- descriptionTextareaId: 'pf-structure-dialog-description-textarea', // id for "description" textarea
- descriptionTextareaCharCounter: 'pf-form-field-char-count', // class for "character counter" element for form field
-
- // dataTable
- tableCellImageClass: 'pf-table-image-smaller-cell', // class for table "image" cells
- tableCellCounterClass: 'pf-table-counter-cell', // class for table "counter" cells
- tableCellEllipsisClass: 'pf-table-cell-ellipses-auto', // class for table "ellipsis" cells
- tableCellActionClass: 'pf-table-action-cell', // class for "action" cells
- tableCellActionIconClass: 'pf-table-action-icon-cell', // class for table "action" icon (icon is part of cell content)
- tableCellServicesClass: 'pf-table-services-cell', // class for table station "services" cells
- tableCellPopoverClass: 'pf-table-popover-cell' // class for table cells with a "popover"
- };
-
- let maxDescriptionLength = 512;
-
- /**
- * get status icon for structure
- * @param statusData
- * @returns {string}
- */
- let getIconForStatusData = statusData => {
- return ' ';
- };
-
- /**
- * get icon that marks a table cell as clickable
- * @returns {string}
- */
- let getIconForInformationWindow = () => {
- return ' ';
- };
-
- /**
- * get a dataTableApi instance from global cache
- * @param mapId
- * @param systemId
- * @param tableType
- * @returns {*}
- */
- let getDataTableInstance = (mapId, systemId, tableType) => Util.getDataTableInstance(config.intelTableId, mapId, systemId, tableType);
-
- /**
- * get dataTable id
- * @param mapId
- * @param systemId
- * @param tableType
- * @returns {string}
- */
- let getTableId = (tableType, mapId, systemId) => Util.getTableId(config.intelTableId, tableType, mapId, systemId);
-
- /**
- * get dataTable row id
- * @param tableType
- * @param id
- * @returns {string}
- */
- let getRowId = (tableType, id) => Util.getTableRowId(config.intelTableRowIdPrefix, tableType, id);
-
- /**
- * get DOM id by id
- * @param tableApi
- * @param id
- * @returns {*}
- */
- let getRowById = (tableApi, id) => {
- return tableApi.rows().ids().toArray().find(rowId => rowId === getRowId(Util.getObjVal(getTableMetaData(tableApi), 'type'), id));
- };
-
- /**
- * get custom "metaData" from dataTables API
- * @param tableApi
- * @returns {*}
- */
- let getTableMetaData = tableApi => {
- let data = null;
- if(tableApi){
- data = tableApi.init().pfMeta;
- }
- return data;
- };
-
- /**
- * vormat roman numeric string to int
- * -> e.g. 'VII' => 7
- * @param str
- * @returns {number}
- */
- let romanToInt = str => {
- let charToTnt = char => {
- switch (char) {
- case 'I': return 1;
- case 'V': return 5;
- case 'X': return 10;
- case 'L': return 50;
- case 'C': return 100;
- case 'D': return 500;
- case 'M': return 1000;
- default: return -1;
- }
- };
-
- if(str == null) return -1;
- let num = charToTnt(str.charAt(0));
- let pre, curr;
-
- for(let i = 1; i < str.length; i++){
- curr = charToTnt(str.charAt(i));
- pre = charToTnt(str.charAt(i - 1));
- if(curr <= pre){
- num += curr;
- }else{
- num = num - pre * 2 + curr;
- }
+ let SystemIntelModule = class SystemIntelModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
}
- return num;
- };
+ /**
+ * get status icon for structure
+ * @param statusData
+ * @returns {string}
+ */
+ getIconForStatusData(statusData){
+ return '';
+ }
- /**
- * callback -> add table rows from grouped tableData
- * @param context
- * @param tableData
- * @param groupedDataKey
- */
- let callbackUpdateTableRows = (context, tableData, groupedDataKey = 'structures') => {
- let touchedRows = [];
- let hadData = context.tableApi.rows().any();
- let notificationCounter = {
- added: 0,
- changed: 0,
- deleted: 0
- };
+ /**
+ * get icon that marks a table cell as clickable
+ * @returns {string}
+ */
+ getIconForInformationWindow(){
+ return '';
+ }
- if(tableData){
- for(let [rowGroupId, rowGroupData] of Object.entries(tableData)){
- if(rowGroupData[groupedDataKey] && rowGroupData[groupedDataKey].length){
- for(let rowData of rowGroupData[groupedDataKey]){
- let rowId = getRowById(context.tableApi, rowData.id);
+ /**
+ * get a dataTableApi instance from global cache
+ * @param mapId
+ * @param systemId
+ * @param tableType
+ * @returns {*}
+ */
+ getDataTableInstance(mapId, systemId, tableType){
+ return BaseModule.Util.getDataTableInstance(this._config.intelTableId, mapId, systemId, tableType);
+ }
- // add rowGroupData as well to each rowData
- rowData.rowGroupData = {
- id: rowGroupData.id,
- name: rowGroupData.name,
- groupedDataKey: groupedDataKey
- };
+ /**
+ * get dataTable id
+ * @param {...string} parts e.g. 'tableType', 'mapId', 'systemId'
+ * @returns {string}
+ */
+ getTableId(...parts){
+ return BaseModule.Util.getTableId(this._config.intelTableId, ...parts);
+ }
- if(rowId){
- // update row
- let api = context.tableApi.row('#' + rowId);
- let rowDataCurrent = api.data();
+ /**
+ * get dataTable row id
+ * @param tableType
+ * @param id
+ * @returns {string}
+ */
+ getRowId(tableType, id){
+ return BaseModule.Util.getTableRowId(this._config.intelTableRowIdPrefix, tableType, id);
+ }
- // check for update
- if(rowDataCurrent.updated.updated !== rowData.updated.updated){
- // row data changed -> update
- api.data(rowData);
- notificationCounter.changed++;
- }
+ /**
+ * get DOM id by id
+ * @param tableApi
+ * @param id
+ * @returns {*}
+ */
+ getRowById(tableApi, id){
+ return tableApi.rows().ids().toArray().find(rowId => rowId === this.getRowId(BaseModule.Util.getObjVal(this.getTableMetaData(tableApi), 'type'), id));
+ }
- touchedRows.push(api.id());
- }else{
- // insert new row
- let api = context.tableApi.row.add(rowData);
- api.nodes().to$().data('animationStatus', 'added');
- notificationCounter.added++;
+ /**
+ * get custom "metaData" from dataTables API
+ * @param tableApi
+ * @returns {*}
+ */
+ getTableMetaData(tableApi){
+ return tableApi ? tableApi.init().pfMeta : null;
+ }
- touchedRows.push(api.id());
- }
- }
+ /**
+ * vormat roman numeric string to int
+ * -> e.g. 'VII' => 7
+ * @param str
+ * @returns {number}
+ */
+ romanToInt(str){
+ let charToTnt = char => {
+ switch (char) {
+ case 'I': return 1;
+ case 'V': return 5;
+ case 'X': return 10;
+ case 'L': return 50;
+ case 'C': return 100;
+ case 'D': return 500;
+ case 'M': return 1000;
+ default: return -1;
+ }
+ };
+
+ if(str == null) return -1;
+ let num = charToTnt(str.charAt(0));
+ let pre, curr;
+
+ for(let i = 1; i < str.length; i++){
+ curr = charToTnt(str.charAt(i));
+ pre = charToTnt(str.charAt(i - 1));
+ if(curr <= pre){
+ num += curr;
+ }else{
+ num = num - pre * 2 + curr;
}
}
+
+ return num;
}
- if(context.removeMissing){
- let api = context.tableApi.rows((idx, data, node) => !touchedRows.includes(node.id));
- notificationCounter.deleted += api.ids().count();
- api.remove();
- }
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
+ let showStationTable = ['H', 'L', '0.0', 'C12'].includes(Util.getObjVal(this._systemData, 'security'));
- if(
- notificationCounter.added > 0 ||
- notificationCounter.changed > 0 ||
- notificationCounter.deleted > 0
- ){
- context.tableApi.draw();
- }
-
- // show notification ------------------------------------------------------------------------------------------
- let notification = '';
- notification += notificationCounter.added > 0 ? notificationCounter.added + ' added
' : '';
- notification += notificationCounter.changed > 0 ? notificationCounter.changed + ' changed
' : '';
- notification += notificationCounter.deleted > 0 ? notificationCounter.deleted + ' deleted
' : '';
-
- if(hadData && notification.length){
- Util.showNotify({title: 'Structures updated', text: notification, type: 'success'});
- }
- };
-
- /**
- * callback -> delete structure rows
- * @param context
- * @param structureIds
- */
- let callbackDeleteStructures = (context, structureIds) => {
- let deletedCounter = 0;
- if(structureIds && structureIds.length){
- for(let structureId of structureIds){
- let rowId = getRowById(context.tableApi, structureId);
- if(rowId){
- context.tableApi.row('#' + rowId).remove();
- deletedCounter++;
- }
- }
- }
-
- if(deletedCounter){
- context.tableApi.draw();
- Util.showNotify({title: 'Structure deleted', text: deletedCounter + ' deleted', type: 'success'});
- }
- };
-
- /**
- * send ajax request
- * @param url
- * @param requestData
- * @param context
- * @param callback
- */
- let sendRequest = (url, requestData, context, callback) => {
- context.moduleElement.showLoadingAnimation();
-
- $.ajax({
- url: url,
- type: 'POST',
- dataType: 'json',
- data: requestData,
- context: context
- }).done(function(data){
- callback(this, data);
- }).fail(function(jqXHR, status, error){
- let reason = status + ' ' + error;
- Util.showNotify({title: jqXHR.status + ': System intel data', text: reason, type: 'warning'});
- $(document).setProgramStatus('problem');
- }).always(function(){
- // hide loading animation
- this.moduleElement.hideLoadingAnimation();
- });
- };
-
- /**
- * show structure dialog
- * @param moduleElement
- * @param tableApi
- * @param systemId
- * @param structureData
- * @param bulkData
- */
- let showStructureDialog = (moduleElement, tableApi, systemId, structureData = null, bulkData = null) => {
- let structureStatusData = Util.getObjVal(Init, 'structureStatus');
-
- let statusData = Object.keys(structureStatusData).map((k) => {
- let data = structureStatusData[k];
- data.selected = data.id === Util.getObjVal(structureData, 'status.id');
- return data;
- });
-
- // if current user is currently docked at a structure (not station)
- // -> add a modal button for pre-fill modal with it
- // -> systemId must match systemId from current character log
- let currentUserData = Util.getCurrentUserData();
- let isCurrentLocation = false;
- let characterStructureId = Util.getObjVal(currentUserData, 'character.log.structure.id') || 0;
- let characterStructureName = Util.getObjVal(currentUserData, 'character.log.structure.name') || '';
- let characterStructureTypeId = Util.getObjVal(currentUserData, 'character.log.structure.type.id') || 0;
- let characterStructureTypeName = Util.getObjVal(currentUserData, 'character.log.structure.type.name') || '';
-
- if(systemId === Util.getObjVal(currentUserData, 'character.log.system.id')){
- isCurrentLocation = true;
- }
-
- let disableButtonAutoFill = true;
- let buttonLabelAutoFill = ' ';
- if(characterStructureId){
- buttonLabelAutoFill += characterStructureTypeName + ' "' + characterStructureName + '"';
- if(isCurrentLocation){
- disableButtonAutoFill = false;
- }
- }else{
- buttonLabelAutoFill += 'unknown structure';
- }
-
- let data = {
- id: config.structureDialogId,
- structureData: structureData,
- bulkData: bulkData,
- structureStatus: statusData,
- nameInputId: config.nameInputId,
- statusSelectId: config.statusSelectId,
- typeSelectId: config.typeSelectId,
- corporationSelectId: config.corporationSelectId,
- descriptionTextareaId: config.descriptionTextareaId,
- descriptionTextareaCharCounter: config.descriptionTextareaCharCounter,
- maxDescriptionLength: maxDescriptionLength
- };
-
- requirejs(['text!templates/dialog/structure.html', 'mustache'], (template, Mustache) => {
- let content = Mustache.render(template, data);
- let title = 'Structure';
- if(bulkData){
- title += ' (' + bulkData.length + ' rows) ';
- }
-
- let structureDialog = bootbox.dialog({
- title: title,
- message: content,
- show: false,
- buttons: {
- close: {
- label: 'cancel',
- className: 'btn-default pull-left'
- },
- autoFill: {
- label: buttonLabelAutoFill,
- className: 'btn-primary' +
- (disableButtonAutoFill ? ' pf-font-italic disabled' : '') +
- (bulkData ? ' hidden' : ''),
- callback: function(){
- let form = this.find('form');
- form.find('#' + config.nameInputId).val(characterStructureName);
- form.find('#' + config.statusSelectId).val(2).trigger('change');
- form.find('#' + config.typeSelectId).val(characterStructureTypeId).trigger('change');
- return false;
- }
- },
- success: {
- label: ' save',
- className: 'btn-success',
- callback: function(){
- let form = this.find('form');
-
- // validate form
- form.validator('validate');
-
- // check whether the form is valid
- let formValid = form.isValidForm();
-
- if(formValid){
- // get form data
- let formData = form.getFormValues();
- formData.id = Util.getObjVal(structureData, 'id') | 0;
- formData.structureId = Util.getObjVal(formData, 'structureId') | 0;
- formData.corporationId = Util.getObjVal(formData, 'corporationId') | 0;
- formData.systemId = systemId | 0;
-
- moduleElement.showLoadingAnimation();
-
- let method = formData.id ? 'PATCH' : 'PUT';
- let ids = formData.id;
- let data = formData;
-
- if(bulkData){
- // bulk update multiple rows
- method = 'POST';
- ids = [];
- data = bulkData.map(structureData => {
- structureData.corporationId = formData.corporationId;
- return structureData;
- });
- }
-
- Util.request(method, 'structure', ids, data,
- {
- moduleElement: moduleElement,
- tableApi: tableApi
- },
- context => context.moduleElement.hideLoadingAnimation()
- ).then(
- payload => callbackUpdateTableRows(payload.context, payload.data),
- Util.handleAjaxErrorResponse
- );
- }else{
- return false;
- }
- }
- }
- }
+ this._bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
});
+ this.moduleElement.append(this._bodyEl);
- structureDialog.on('show.bs.modal', function(e){
- let modalContent = $('#' + config.structureDialogId);
+ $(this.moduleElement).showLoadingAnimation();
- // init type select live search
- let selectElementType = modalContent.find('#' + config.typeSelectId);
- selectElementType.initUniverseTypeSelect({
- categoryIds: [65],
- maxSelectionLength: 1,
- selected: [Util.getObjVal(structureData, 'structure.id')]
- });
-
- // init corporation select live search
- let selectElementCorporation = modalContent.find('#' + config.corporationSelectId);
- selectElementCorporation.initUniverseSearch({
- categoryNames: ['corporation'],
- maxSelectionLength: 1
- });
-
- // init status select2
- modalContent.find('#' + config.statusSelectId).initStatusSelect({
- data: statusData
- });
-
- // init char counter
- let textarea = modalContent.find('#' + config.descriptionTextareaId);
- let charCounter = modalContent.find('.' + config.descriptionTextareaCharCounter);
- Util.updateCounter(textarea, charCounter, maxDescriptionLength);
-
- textarea.on('keyup', function(){
- Util.updateCounter($(this), charCounter, maxDescriptionLength);
- });
-
- // set form validator (after select2 init finish)
- modalContent.find('form').initFormValidation();
- });
-
- // show dialog
- structureDialog.modal('show');
- });
- };
-
- /**
- * show D-Scan reader dialog
- * @param moduleElement
- * @param tableApi
- * @param systemData
- */
- let showDscanReaderDialog = (moduleElement, tableApi, systemData) => {
- requirejs(['text!templates/dialog/dscan_reader.html', 'mustache'], (template, Mustache) => {
- let structureDialog = bootbox.dialog({
- title: 'D-Scan reader',
- message: Mustache.render(template, {}),
- show: true,
- buttons: {
- close: {
- label: 'cancel',
- className: 'btn-default'
- },
- success: {
- label: ' update intel',
- className: 'btn-success',
- callback: function(){
- let form = this.find('form');
- let formData = form.getFormValues();
-
- updateStructureTableByClipboard(systemData, formData.clipboard, {
- moduleElement: moduleElement,
- tableApi: tableApi
- });
- }
- }
- }
- });
-
- // dialog shown event
- structureDialog.on('shown.bs.modal', function(e){
- // set focus on textarea
- structureDialog.find('textarea').focus();
- });
- });
- };
-
- /**
- * init station services tooltips
- * @param element
- * @param tableApi
- */
- let initStationServiceTooltip = (element, tableApi) => {
- element.hoverIntent({
- over: function(e){
- let cellElement = $(this);
- let rowData = tableApi.row(cellElement.parents('tr')).data();
- cellElement.addStationServiceTooltip(Util.getObjVal(rowData, 'services'), {
- placement: 'left',
- trigger: 'manual',
- show: true
- });
- },
- out: function(e){
- $(this).destroyPopover();
- },
- selector: 'td.' + config.tableCellServicesClass
- });
- };
-
- /**
- * get dataTables default options for intel tables
- * @returns {*}
- */
- let getDataTableDefaults = () => {
- return {
- paging: false,
- lengthChange: false,
- ordering: true,
- info: false,
- searching: false,
- hover: false,
- autoWidth: false,
- drawCallback: function (settings) {
- let tableApi = this.api();
- let columnCount = tableApi.columns(':visible').count();
- let rows = tableApi.rows({page: 'current'}).nodes();
- let last = null;
-
- tableApi.column('rowGroupData:name', {page: 'current'}).data().each(function (group, i) {
- if (!last || last.id !== group.id) {
- // "stations" are grouped by "raceId" with its "factionId"
- // "structures" are grouped by "corporationId" that ADDED it (not the ingame "owner" of it)
- let imgType = 'stations' === group.groupedDataKey ? 'factions' : 'corporations';
-
- $(rows).eq(i).before(
- ' ' +
- ' | ' +
- '' +
- ' + ') ' +
- ' | ' +
- '' + group.name + ' | ' +
- ' '
- );
- last = group;
- }
- });
-
- let animationRows = rows.to$().filter(function () {
- return (
- $(this).data('animationStatus') ||
- $(this).data('animationTimer')
- );
- });
-
- for (let i = 0; i < animationRows.length; i++) {
- let animationRow = $(animationRows[i]);
- animationRow.pulseBackgroundColor(animationRow.data('animationStatus'));
- animationRow.removeData('animationStatus');
- }
+ this.initStructureTable();
+ if(showStationTable){
+ this.initStationTable();
}
- };
- };
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param systemData
- * @returns {jQuery}
- */
- let getModule = (parentElement, mapId, systemData) => {
- let showStationTable = ['H', 'L', '0.0', 'C12'].includes(Util.getObjVal(systemData, 'security'));
- let corporationId = Util.getCurrentUserInfo('corporationId');
+ this.setModuleObserver();
- let moduleElement = $(' ').append(
- $(' ', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- text: 'Structures'
- })
- )
- );
+ return this.moduleElement;
+ }
- // "Structures" table -----------------------------------------------------------------------------------------
- let structureTable = $('', {
- id: getTableId('structure', mapId, systemData.id),
- class: ['compact', 'stripe', 'order-column', 'row-border', 'pf-table-fixed', config.systemStructuresTableClass].join(' ')
- });
- moduleElement.append(structureTable);
+ /**
+ * init 'Structure' table
+ */
+ initStructureTable(){
+ let module = this;
+ let corporationId = Util.getCurrentUserInfo('corporationId');
- let structureDataTableOptions = {
- pfMeta: {
- type: 'structures'
- },
- order: [[10, 'desc' ], [0, 'asc' ]],
- rowId: rowData => getRowId('structures', rowData.id),
- select: {
- style: 'os',
- selector: 'td:not(.' + config.tableCellActionClass + ')'
- },
- language: {
- emptyTable: 'No structures recorded',
- info: '_START_ to _END_ of _MAX_',
- infoEmpty: ''
- },
- columnDefs: [
- {
- targets: 0,
- name: 'status',
- title: '',
- width: 2,
- className: ['text-center', 'all'].join(' '),
- data: 'status',
- render: {
- display: data => getIconForStatusData(data),
- sort: data => data.id
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- $(cell).find('i').tooltip();
- }
- },{
- targets: 1,
- name: 'structureImage',
- title: '',
- width: 24,
- orderable: false,
- className: [config.tableCellImageClass, 'text-center', 'all'].join(' '),
- data: 'structure.id',
- defaultContent: '',
- render: {
- _: function(data, type, row, meta){
- let value = data;
- if(type === 'display' && value){
- value = ' +') ';
- }
- return value;
- }
- }
- },{
- targets: 2,
- name: 'structureType',
- title: 'type',
- width: 30,
- className: [config.tableCellEllipsisClass, 'all'].join(' '),
- data: 'structure.name',
- defaultContent: '',
- },{
- targets: 3,
- name: 'name',
- title: 'name',
- width: 60,
- className: [config.tableCellEllipsisClass, 'all'].join(' '),
- data: 'name'
- },{
- targets: 4,
- name: 'ownerImage',
- title: '',
- width: 24,
- orderable: false,
- className: [config.tableCellImageClass, 'text-center', 'all'].join(' '),
- data: 'owner.id',
- defaultContent: '',
- render: {
- _: function(data, type, row, meta){
- let value = data;
- if(type === 'display' && value){
- value = '';
- value += ' + ') ';
- value += '';
- }
- return value;
- }
- }
- },{
- targets: 5,
- name: 'ownerName',
- title: 'owner',
- width: 50,
- className: [config.tableCellEllipsisClass, 'all'].join(' '),
- data: 'owner.name',
- defaultContent: '',
- },{
- targets: 6,
- name: 'note',
- title: 'note',
- className: [config.tableCellEllipsisClass, 'all', Util.config.popoverTriggerClass, config.tableCellPopoverClass].join(' '),
- data: 'description'
- },{
- targets: 7,
- name: 'updated',
- title: 'updated',
- width: 60,
- className: ['text-right', config.tableCellCounterClass, 'not-screen-l'].join(' '),
- data: 'updated.updated'
- },{
- targets: 8,
- name: 'edit',
- title: '',
- orderable: false,
- width: 10,
- className: ['text-center', config.tableCellActionClass, config.moduleHeadlineIconClass, 'all'].join(' '),
- data: null,
- render: {
- display: data => {
- let icon = '';
- if(data.rowGroupData.id !== corporationId){
- icon = '';
- }
- return icon;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tableApi = this.api();
+ let structureTableEl = document.createElement('table');
+ structureTableEl.id = module.getTableId('structure', module._systemData.mapId, module._systemData.id);
+ structureTableEl.classList.add('compact', 'stripe', 'order-column', 'row-border', 'pf-table-fixed', module._config.systemStructuresTableClass);
+ this._bodyEl.append(structureTableEl);
- if($(cell).is(':empty')){
- $(cell).removeClass(config.tableCellActionClass + ' ' + config.moduleHeadlineIconClass);
- }else{
- $(cell).on('click', function(e){
- let rowData = null;
- let bulkData = null;
- // check if multiple rows are selected + current row is one of them -> bulk edit
- let rowsSelected = tableApi.rows({selected: true});
- if(rowsSelected.count() && tableApi.row(rowIndex, {selected: true}).count()){
- bulkData = [...new Set(rowsSelected.data().toArray().map(rowData => ({id: rowData.id})))];
- }else{
- // get current row data (important!)
- // -> "rowData" param is not current state, values are "on createCell()" state
- rowData = tableApi.row( $(cell).parents('tr')).data();
- }
-
- showStructureDialog(moduleElement, tableApi, systemData.systemId, rowData, bulkData);
- });
- }
- }
- },{
- targets: 9,
- name: 'delete',
- title: '',
- orderable: false,
- width: 10,
- className: ['text-center', config.tableCellActionClass, 'all'].join(' '),
- data: null,
- render: {
- display: data => {
- let icon = '';
- if(data.rowGroupData.id !== corporationId){
- icon = '';
- }
- return icon;
- }
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tableApi = this.api();
-
- if($(cell).find('.fa-ban').length){
- $(cell).removeClass(config.tableCellActionClass + ' ' + config.moduleHeadlineIconClass);
+ let structureDataTableOptions = {
+ pfMeta: {
+ type: 'structures'
+ },
+ order: [[10, 'desc' ], [0, 'asc' ]],
+ rowId: rowData => module.getRowId('structures', rowData.id),
+ select: {
+ style: 'os',
+ selector: 'td:not(.' + module._config.tableCellActionClass + ')'
+ },
+ language: {
+ emptyTable: 'No structures recorded',
+ info: '_START_ to _END_ of _MAX_',
+ infoEmpty: ''
+ },
+ columnDefs: [
+ {
+ targets: 0,
+ name: 'status',
+ title: '',
+ width: 2,
+ className: ['text-center', 'all'].join(' '),
+ data: 'status',
+ render: {
+ display: data => module.getIconForStatusData(data),
+ sort: data => data.id
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
$(cell).find('i').tooltip();
- }else{
- let confirmationSettings = {
- title: 'delete structure',
- template: Util.getConfirmationTemplate(null, {
- size: 'small',
- noTitle: true
- }),
- onConfirm : function(e, target){
- // get current row data (important!)
- // -> "rowData" param is not current state, values are "on createCell()" state
- rowData = tableApi.row( $(cell).parents('tr')).data();
-
- // let deleteRowElement = $(cell).parents('tr');
- // tableApi.rows(deleteRowElement).remove().draw();
-
- moduleElement.showLoadingAnimation();
- Util.request('DELETE', 'structure', rowData.id, {},
- {
- moduleElement: moduleElement,
- tableApi: tableApi
- },
- context => context.moduleElement.hideLoadingAnimation()
- ).then(
- payload => callbackDeleteStructures(payload.context, payload.data),
- Util.handleAjaxErrorResponse
- );
+ }
+ },{
+ targets: 1,
+ name: 'structureImage',
+ title: '',
+ width: 24,
+ orderable: false,
+ className: [module._config.tableCellImageClass, 'text-center', 'all'].join(' '),
+ data: 'structure.id',
+ defaultContent: '',
+ render: {
+ _: function(data, type, row, meta){
+ let value = data;
+ if(type === 'display' && value){
+ value = '';
}
- };
+ return value;
+ }
+ }
+ },{
+ targets: 2,
+ name: 'structureType',
+ title: 'type',
+ width: 30,
+ className: [module._config.tableCellEllipsisClass, 'all'].join(' '),
+ data: 'structure.name',
+ defaultContent: '',
+ },{
+ targets: 3,
+ name: 'name',
+ title: 'name',
+ width: 60,
+ className: [module._config.tableCellEllipsisClass, 'all'].join(' '),
+ data: 'name'
+ },{
+ targets: 4,
+ name: 'ownerImage',
+ title: '',
+ width: 24,
+ orderable: false,
+ className: [module._config.tableCellImageClass, 'text-center', 'all'].join(' '),
+ data: 'owner.id',
+ defaultContent: '',
+ render: {
+ _: function(data, type, row, meta){
+ let value = data;
+ if(type === 'display' && value){
+ value = '';
+ value += '';
+ value += '';
+ }
+ return value;
+ }
+ }
+ },{
+ targets: 5,
+ name: 'ownerName',
+ title: 'owner',
+ width: 50,
+ className: [module._config.tableCellEllipsisClass, 'all'].join(' '),
+ data: 'owner.name',
+ defaultContent: '',
+ },{
+ targets: 6,
+ name: 'note',
+ title: 'note',
+ className: [module._config.tableCellEllipsisClass, 'all', Util.config.popoverTriggerClass, module._config.tableCellPopoverClass].join(' '),
+ data: 'description'
+ },{
+ targets: 7,
+ name: 'updated',
+ title: 'updated',
+ width: 60,
+ className: ['text-right', module._config.tableCellCounterClass, 'not-screen-l'].join(' '),
+ data: 'updated.updated'
+ },{
+ targets: 8,
+ name: 'edit',
+ title: '',
+ orderable: false,
+ width: 10,
+ className: ['text-center', module._config.tableCellActionClass, module._config.moduleHeadlineIconClass, 'all'].join(' '),
+ data: null,
+ render: {
+ display: data => {
+ let icon = '';
+ if(data.rowGroupData.id !== corporationId){
+ icon = '';
+ }
+ return icon;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
- // init confirmation dialog
- $(cell).confirmation(confirmationSettings);
- }
- }
- },{
- targets: 10,
- name: 'rowGroupData',
- className: 'never', // never show this column. see: https://datatables.net/extensions/responsive/classes
- data: 'rowGroupData',
- visible: false,
- render: {
- sort: function(data){
- return data.name;
+ if($(cell).is(':empty')){
+ $(cell).removeClass(module._config.tableCellActionClass + ' ' + module._config.moduleHeadlineIconClass);
+ }else{
+ $(cell).on('click', function(e){
+ let rowData = null;
+ let bulkData = null;
+ // check if multiple rows are selected + current row is one of them -> bulk edit
+ let rowsSelected = tableApi.rows({selected: true});
+ if(rowsSelected.count() && tableApi.row(rowIndex, {selected: true}).count()){
+ bulkData = [...new Set(rowsSelected.data().toArray().map(rowData => ({id: rowData.id})))];
+ }else{
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowData = tableApi.row( $(cell).parents('tr')).data();
+ }
+
+ module.showStructureDialog(tableApi, rowData, bulkData);
+ });
+ }
+ }
+ },{
+ targets: 9,
+ name: 'delete',
+ title: '',
+ orderable: false,
+ width: 10,
+ className: ['text-center', module._config.tableCellActionClass, 'all'].join(' '),
+ data: null,
+ render: {
+ display: data => {
+ let icon = '';
+ if(data.rowGroupData.id !== corporationId){
+ icon = '';
+ }
+ return icon;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ if($(cell).find('.fa-ban').length){
+ $(cell).removeClass(module._config.tableCellActionClass + ' ' + module._config.moduleHeadlineIconClass);
+ $(cell).find('i').tooltip();
+ }else{
+ let confirmationSettings = {
+ title: '---',
+ template: Util.getConfirmationTemplate(null, {
+ size: 'small',
+ noTitle: true
+ }),
+ onConfirm : function(e, target){
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowData = tableApi.row( $(cell).parents('tr')).data();
+
+ // let deleteRowElement = $(cell).parents('tr');
+ // tableApi.rows(deleteRowElement).remove().draw();
+
+ $(module.moduleElement).showLoadingAnimation();
+ Util.request('DELETE', 'Structure', rowData.id, {},
+ {
+ tableApi: tableApi
+ },
+ () => $(module.moduleElement).hideLoadingAnimation()
+ ).then(
+ payload => module.callbackDeleteStructures(payload.context, payload.data),
+ Util.handleAjaxErrorResponse
+ );
+ }
+ };
+
+ // init confirmation dialog
+ $(cell).confirmation(confirmationSettings);
+ }
+ }
+ },{
+ targets: 10,
+ name: 'rowGroupData',
+ className: 'never', // never show this column. see: https://datatables.net/extensions/responsive/classes
+ data: 'rowGroupData',
+ visible: false,
+ render: {
+ sort: function(data){
+ return data.name;
+ }
}
}
+ ],
+ initComplete: function(settings){
+ // table data is load in updateModule() method
+ // -> no need to trigger additional ajax call here for data
+ // -> in case table update failed -> each if this initComplete() function finished before table updated
+ // e.g. return now promise in getModule() function
+
+ Counter.initTableCounter(this, ['updated:name'], 'd');
}
- ],
- initComplete: function(settings){
- // table data is load in updateModule() method
- // -> no need to trigger additional ajax call here for data
- // -> in case table update failed -> each if this initComplete() function finished before table updated
- // e.g. return now promise in getModule() function
+ };
- Counter.initTableCounter(this, ['updated:name'], 'd');
- }
- };
+ this._tableApiStructure = $(structureTableEl).DataTable($.extend(true, {}, module.getDataTableDefaults(module), structureDataTableOptions));
- let tableApiStructure = structureTable.DataTable($.extend(true, {}, getDataTableDefaults(), structureDataTableOptions));
+ // "Responsive" Datatables Plugin
+ new $.fn.dataTable.Responsive(this._tableApiStructure);
- // "Responsive" Datatables Plugin
- new $.fn.dataTable.Responsive(tableApiStructure);
+ this._tableApiStructure.on('responsive-resize', function(e, tableApi, columns){
+ // rowGroup length changes as well -> trigger draw() updates rowGroup length (see drawCallback())
+ tableApi.draw();
+ });
- tableApiStructure.on('responsive-resize', function(e, tableApi, columns){
- // rowGroup length changes as well -> trigger draw() updates rowGroup length (see drawCallback())
- tableApi.draw();
- });
+ // "Select" Datatables Plugin
+ this._tableApiStructure.select();
- // "Select" Datatables Plugin
- tableApiStructure.select();
+ this._tableApiStructure.on('user-select', function(e, tableApi, type, cell, originalEvent){
+ let rowData = tableApi.row(cell.index().row).data();
+ if(Util.getObjVal(rowData, 'rowGroupData.id') !== corporationId){
+ e.preventDefault();
+ }
+ });
- // "Buttons" Datatables Plugin
- tableApiStructure.on('user-select', function(e, tableApi, type, cell, originalEvent){
- let rowData = tableApi.row(cell.index().row).data();
- if(Util.getObjVal(rowData, 'rowGroupData.id') !== corporationId){
- e.preventDefault();
- }
- });
-
- let buttons = new $.fn.dataTable.Buttons(tableApiStructure, {
+ // "Buttons" Datatables Plugin
+ let buttons = new $.fn.dataTable.Buttons(this._tableApiStructure, {
dom: {
container: {
tag: 'h5',
@@ -866,7 +410,7 @@ define([
},
button: {
tag: 'i',
- className: ['fas', 'fa-fw', config.moduleHeadlineIconClass].join(' '),
+ className: ['fas', 'fa-fw', module._config.moduleHeadlineIconClass].join(' '),
},
buttonLiner: {
tag: null
@@ -874,6 +418,18 @@ define([
},
name: 'tableTools',
buttons: [
+ {
+ name: 'add',
+ className: 'fa-plus',
+ titleAttr: 'add',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ module.showStructureDialog(tableApi);
+ }
+ },
{
name: 'selectToggle',
className: ['fa-check-double'].join(' '),
@@ -898,18 +454,6 @@ define([
}
}
},
- {
- name: 'add',
- className: 'fa-plus',
- titleAttr: 'add',
- attr: {
- 'data-toggle': 'tooltip',
- 'data-html': true
- },
- action: function(e, tableApi, node, config){
- showStructureDialog(moduleElement, tableApi, systemData.systemId);
- }
- },
{
name: 'dScan',
className: 'fa-paste',
@@ -918,64 +462,55 @@ define([
'data-toggle': 'tooltip',
'data-html': true
},
- action: function(e, tableApi, node, config ){
- showDscanReaderDialog(moduleElement, tableApi, systemData);
+ action: function(e, tableApi, node, config){
+ module.showDscanReaderDialog(tableApi);
}
},
{
name: 'refresh',
className: 'fa-sync',
- titleAttr: 'refresh all',
+ titleAttr: 'refresh',
attr: {
'data-toggle': 'tooltip',
'data-html': true
},
- action: function(e, tableApi, node, config ){
- moduleElement.showLoadingAnimation();
+ action: function(e, tableApi, node, config){
+ $(module.moduleElement).showLoadingAnimation();
- Util.request('GET', 'system', systemData.id, {mapId: mapId},
+ Util.request('GET', 'System', module._systemData.id, {mapId: module._systemData.mapId},
{
- moduleElement: moduleElement,
tableApi: tableApi,
removeMissing: true
},
- context => context.moduleElement.hideLoadingAnimation()
- ).then(payload => callbackUpdateTableRows(payload.context, Util.getObjVal(payload.data, 'structures')));
+ context => $(module.moduleElement).hideLoadingAnimation()
+ ).then(payload => module.callbackUpdateTableRows(payload.context, Util.getObjVal(payload.data, 'structures')));
}
}
]
- });
-
- tableApiStructure.buttons().container().appendTo(moduleElement.find('.' + config.moduleHeadClass));
-
- if(showStationTable){
- // "Stations" table ---------------------------------------------------------------------------------------
-
- moduleElement.append(
- $('', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- text: 'Stations'
- })
- )
- );
-
- let stationTable = $('', {
- id: getTableId('station', mapId, systemData.id),
- class: ['compact', 'stripe', 'order-column', 'row-border', 'pf-table-fixed', config.systemStationsTableClass].join(' ')
});
- moduleElement.append(stationTable);
+
+ this._tableApiStructure.buttons().container().appendTo(module.moduleElement.querySelector('.' + module._config.headClassName));
+ }
+
+ /**
+ * init 'Station' table
+ */
+ initStationTable(){
+ let module = this;
+
+ this._bodyEl.append(module.newHeaderElement(module._config.headlineSub));
+
+ let stationTableEl = document.createElement('table');
+ stationTableEl.id = module.getTableId('station', module._systemData.mapId, module._systemData.id);
+ stationTableEl.classList.add('compact', 'stripe', 'order-column', 'row-border', 'pf-table-fixed', module._config.systemStationsTableClass);
+ this._bodyEl.append(stationTableEl);
let stationDataTableOptions = {
pfMeta: {
type: 'stations'
},
order: [[1, 'asc' ], [8, 'asc' ]],
- rowId: rowData => getRowId('stations', rowData.id),
+ rowId: rowData => module.getRowId('stations', rowData.id),
language: {
emptyTable: 'No stations found',
info: '_START_ to _END_ of _MAX_',
@@ -988,7 +523,7 @@ define([
title: '',
width: 24,
orderable: false,
- className: [config.tableCellImageClass, 'text-center', 'all'].join(' '),
+ className: [module._config.tableCellImageClass, 'text-center', 'all'].join(' '),
data: 'type.id',
defaultContent: '',
render: {
@@ -1020,7 +555,7 @@ define([
if(type === 'display'){
value = count || 0;
}else{
- value = romanToInt(count) || '';
+ value = module.romanToInt(count) || '';
}
}
@@ -1031,7 +566,7 @@ define([
targets: 2,
name: 'name',
title: 'station',
- className: [config.tableCellEllipsisClass, 'all'].join(' '),
+ className: [module._config.tableCellEllipsisClass, 'all'].join(' '),
data: 'name',
render: {
_: function(cellData, type, rowData, meta){
@@ -1043,7 +578,7 @@ define([
let systemName = Util.getObjVal(matches, '1');
let count = Util.getObjVal(matches, '2');
let moon = Util.getObjVal(matches, '4');
- if(systemName === (Util.getObjVal(systemData, 'name') || '')){
+ if(systemName === (Util.getObjVal(module._systemData, 'name') || '')){
value = value.slice(systemName.length).trim();
if(count){
value = value.slice(count.length).trimLeftChars(' \-');
@@ -1062,7 +597,7 @@ define([
name: 'stationType',
title: 'type',
width: 100,
- className: [config.tableCellEllipsisClass, 'not-screen-l'].join(' '),
+ className: [module._config.tableCellEllipsisClass, 'not-screen-l'].join(' '),
data: 'type.name',
defaultContent: '',
render: {
@@ -1083,7 +618,7 @@ define([
title: '',
width: 24,
orderable: false,
- className: [config.tableCellImageClass, 'text-center', 'all'].join(' '),
+ className: [module._config.tableCellImageClass, 'text-center', 'all'].join(' '),
data: 'corporation.id',
defaultContent: '',
render: {
@@ -1102,14 +637,14 @@ define([
name: 'ownerName',
title: 'owner',
width: 80,
- className: [config.tableCellActionClass, config.tableCellEllipsisClass, 'all'].join(' '),
+ className: [module._config.tableCellActionClass, module._config.tableCellEllipsisClass, 'all'].join(' '),
data: 'corporation',
defaultContent: '',
render: {
_: function(data, type, row, meta){
let value = data.name;
if(type === 'display'){
- value += ' ' + getIconForInformationWindow();
+ value += ' ' + module.getIconForInformationWindow();
}
return value;
}
@@ -1127,7 +662,7 @@ define([
orderable: false,
searchable: false,
width: 10,
- class: [config.tableCellActionClass, config.moduleHeadlineIconClass, 'text-center', 'all'].join(' '),
+ class: [module._config.tableCellActionClass, module._config.moduleHeadlineIconClass, 'text-center', 'all'].join(' '),
data: 'id',
render: {
display: (cellData, type, rowData, meta) => {
@@ -1147,7 +682,12 @@ define([
orderable: false,
searchable: false,
width: 10,
- class: [config.tableCellActionClass, config.moduleHeadlineIconClass, config.tableCellServicesClass, Util.config.popoverTriggerClass, 'text-center', 'all'].join(' '),
+ class: [
+ module._config.tableCellActionClass,
+ module._config.moduleHeadlineIconClass,
+ module._config.tableCellServicesClass,
+ Util.config.popoverTriggerClass, 'text-center', 'all'
+ ].join(' '),
data: 'services',
defaultContent: '',
render: {
@@ -1160,7 +700,7 @@ define([
createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
let cellElement = $(cell);
if(cellElement.find('.fa-ban').length){
- cellElement.removeClass(config.tableCellActionClass + ' ' + config.moduleHeadlineIconClass);
+ cellElement.removeClass(module._config.tableCellActionClass + ' ' + module._config.moduleHeadlineIconClass);
}
}
},{
@@ -1179,233 +719,650 @@ define([
initComplete: function(settings, json){
let tableApi = this.api();
- initStationServiceTooltip(this, tableApi);
+ module.initStationServiceTooltip(this, tableApi);
}
};
- let tableApiStation = stationTable.DataTable($.extend(true, {}, getDataTableDefaults(), stationDataTableOptions));
+ this._tableApiStation = $(stationTableEl).DataTable($.extend(true, {}, module.getDataTableDefaults(module), stationDataTableOptions));
- new $.fn.dataTable.Responsive(tableApiStation);
+ new $.fn.dataTable.Responsive(this._tableApiStation);
- tableApiStation.on('responsive-resize', function(e, tableApi, columns){
+ this._tableApiStation.on('responsive-resize', function(e, tableApi, columns){
// rowGroup length changes as well -> trigger draw() updates rowGroup length (see drawCallback())
tableApi.draw();
});
}
- // init tooltips for this module
- let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
- tooltipElements.tooltip({
- container: 'body'
- });
+ /**
+ *
+ * @param module
+ * @returns {*}
+ */
+ getDataTableDefaults(module){
+ return {
+ paging: false,
+ lengthChange: false,
+ ordering: true,
+ info: false,
+ searching: false,
+ hover: false,
+ autoWidth: false,
+ drawCallback: function(settings){
+ let tableApi = this.api();
+ let columnCount = tableApi.columns(':visible').count();
+ let rows = tableApi.rows({page: 'current'}).nodes();
+ let last = null;
- moduleElement.showLoadingAnimation();
+ tableApi.column('rowGroupData:name', {page: 'current'}).data().each(function(group, i){
+ if (!last || last.id !== group.id) {
+ // "stations" are grouped by "raceId" with its "factionId"
+ // "structures" are grouped by "corporationId" that ADDED it (not the ingame "owner" of it)
+ let imgType = 'stations' === group.groupedDataKey ? 'factions' : 'corporations';
- return moduleElement;
- };
+ $(rows).eq(i).before(
+ '' +
+ ' | ' +
+ '' +
+ '' +
+ ' | ' +
+ '' + group.name + ' | ' +
+ ' '
+ );
+ last = group;
+ }
+ });
- /**
- * get universe typeIds for given categoryIds
- * @param categoryIds
- * @returns {Array}
- */
- let getUniverseTypeIdsByCategoryIds = (categoryIds) => {
- let typeIds = [];
- let mapIds = type => type.id;
- for(let categoryId of categoryIds){
- let categoryData = Util.getObjVal(Init, 'universeCategories.' + categoryId);
- if(categoryData && categoryData.groups){
- for(let groupData of categoryData.groups){
- if(groupData && groupData.types){
- typeIds = typeIds.concat(groupData.types.map(mapIds));
+ let animationRows = rows.to$().filter(function(){
+ return (
+ $(this).data('animationStatus') ||
+ $(this).data('animationTimer')
+ );
+ });
+
+ for(let i = 0; i < animationRows.length; i++){
+ let animationRow = $(animationRows[i]);
+ animationRow.pulseBackgroundColor(animationRow.data('animationStatus'));
+ animationRow.removeData('animationStatus');
}
}
- }
+ };
}
- return typeIds;
- };
+ /**
+ * show structure dialog
+ * @param tableApi
+ * @param structureData
+ * @param bulkData
+ */
+ showStructureDialog(tableApi, structureData = null, bulkData = null){
+ let structureStatusData = Util.getObjVal(Init, 'structureStatus');
- /**
- * parse a copy&paste string from ingame dScan windows
- * @param systemData
- * @param clipboard
- * @returns {Array}
- */
- let parseDscanString = (systemData, clipboard) => {
- let dScanData = [];
- let structureTypeIds = getUniverseTypeIdsByCategoryIds([65]);
+ let statusData = Object.keys(structureStatusData).map((k) => {
+ let data = structureStatusData[k];
+ data.selected = data.id === Util.getObjVal(structureData, 'status.id');
+ return data;
+ });
- if(clipboard.length){
- let dScanRows = clipboard.split(/\r\n|\r|\n/g);
+ // if current user is currently docked at a structure (not station)
+ // -> add a modal button for pre-fill modal with it
+ // -> systemId must match systemId from current character log
+ let currentUserData = Util.getCurrentUserData();
+ let characterStructureId = Util.getCurrentCharacterData('log.structure.id') || 0;
+ let characterStructureName = Util.getCurrentCharacterData('log.structure.name') || '';
+ let characterStructureTypeId = Util.getCurrentCharacterData('log.structure.type.id') || 0;
+ let characterStructureTypeName = Util.getCurrentCharacterData('log.structure.type.name') || '';
+ let isCurrentLocation = false;
- for(let rowData of dScanRows){
- rowData = rowData.split(/\t/g);
+ if(this._systemData.id === Util.getCurrentCharacterData('log.system.id')){
+ isCurrentLocation = true;
+ }
- if(rowData.length === 4){
- rowData[0] = parseInt(rowData[0]);
- // valid dScan result
- if(structureTypeIds.indexOf( rowData[0] ) !== -1){
- dScanData.push({
- structureId: rowData[0],
- name: rowData[1],
- systemId: systemData.systemId
- });
- }
+ let disableButtonAutoFill = true;
+ let buttonLabelAutoFill = ' ';
+ if(characterStructureId){
+ buttonLabelAutoFill += characterStructureTypeName + ' "' + characterStructureName + '"';
+ if(isCurrentLocation){
+ disableButtonAutoFill = false;
}
+ }else{
+ buttonLabelAutoFill += 'unknown structure';
}
- }
- return dScanData;
- };
+ let data = {
+ id: this._config.structureDialogId,
+ structureData: structureData,
+ bulkData: bulkData,
+ structureStatus: statusData,
+ nameInputId: this._config.nameInputId,
+ statusSelectId: this._config.statusSelectId,
+ typeSelectId: this._config.typeSelectId,
+ corporationSelectId: this._config.corporationSelectId,
+ descriptionTextareaId: this._config.descriptionTextareaId,
+ descriptionTextareaCharCounter: this._config.descriptionTextareaCharCounter,
+ maxDescriptionLength: SystemIntelModule.maxDescriptionLength
+ };
- /**
- * parse clipboard data for structures and update table
- * @param systemData
- * @param clipboard
- * @param context
- */
- let updateStructureTableByClipboard = (systemData, clipboard, context) => {
+ requirejs(['text!templates/dialog/structure.html', 'mustache'], (template, Mustache) => {
+ let content = Mustache.render(template, data);
+ let title = 'Structure';
+ if(bulkData){
+ title += ' (' + bulkData.length + ' rows) ';
+ }
- let saveStructureData = (structureData, context) => {
- context.moduleElement.showLoadingAnimation();
+ let structureDialog = bootbox.dialog({
+ title: title,
+ message: content,
+ show: false,
+ buttons: {
+ close: {
+ label: 'cancel',
+ className: 'btn-default pull-left'
+ },
+ autoFill: {
+ label: buttonLabelAutoFill,
+ className: 'btn-primary' +
+ (disableButtonAutoFill ? ' pf-font-italic disabled' : '') +
+ (bulkData ? ' hidden' : ''),
+ callback: e => {
+ let form = $(e.delegateTarget).find('form');
+ form.find('#' + this._config.nameInputId).val(characterStructureName);
+ form.find('#' + this._config.statusSelectId).val(2).trigger('change');
+ form.find('#' + this._config.typeSelectId).val(characterStructureTypeId).trigger('change');
+ return false;
+ }
+ },
+ success: {
+ label: ' save',
+ className: 'btn-success',
+ callback: e => {
+ let form = $(e.delegateTarget).find('form');
- Util.request('POST', 'structure', [], structureData, context, context => context.moduleElement.hideLoadingAnimation())
- .then(
- payload => callbackUpdateTableRows(payload.context, payload.data),
- Util.handleAjaxErrorResponse
- );
- };
+ // validate form
+ form.validator('validate');
- let structureData = parseDscanString(systemData, clipboard);
- if(structureData.length){
- // valid structure data parsed
+ // check whether the form is valid
+ let formValid = form.isValidForm();
- // check if structures will be added to a system where character is currently in
- // if character is not in any system -> id === undefined -> no "confirmation required
- let currentLocationData = Util.getCurrentLocationData();
- if(
- currentLocationData.id &&
- currentLocationData.id !== systemData.systemId
- ){
- let systemNameStr = (systemData.name === systemData.alias) ? '"' + systemData.name + '"' : '"' + systemData.alias + '" (' + systemData.name + ')';
- systemNameStr = '' + systemNameStr + '';
+ if(formValid){
+ // get form data
+ let formData = form.getFormValues();
+ formData.id = Util.getObjVal(structureData, 'id') | 0;
+ formData.structureId = Util.getObjVal(formData, 'structureId') | 0;
+ formData.corporationId = Util.getObjVal(formData, 'corporationId') | 0;
+ formData.systemId = this._systemData.systemId | 0;
- let msg = 'Update structures in ' + systemNameStr + ' ? This is not your current location, "' + currentLocationData.name + '" !';
- bootbox.confirm(msg, result => {
- if(result){
- saveStructureData(structureData, context);
+ $(this.moduleElement).showLoadingAnimation();
+
+ let method = formData.id ? 'PATCH' : 'PUT';
+ let ids = formData.id;
+ let data = formData;
+
+ if(bulkData){
+ // bulk update multiple rows
+ method = 'POST';
+ ids = [];
+ data = bulkData.map(structureData => {
+ structureData.corporationId = formData.corporationId;
+ return structureData;
+ });
+ }
+
+ this.request(method, 'Structure', ids, data,
+ {
+ tableApi: tableApi
+ },
+ () => $(this.moduleElement).hideLoadingAnimation()
+ ).then(
+ payload => this.callbackUpdateTableRows(payload.context, payload.data),
+ Util.handleAjaxErrorResponse
+ );
+ }else{
+ return false;
+ }
+ }
+ }
}
});
- }else{
- saveStructureData(structureData, context);
+
+ structureDialog.on('show.bs.modal', e => {
+ let modalContent = $('#' + this._config.structureDialogId);
+
+ // init type select live search
+ let selectElementType = modalContent.find('#' + this._config.typeSelectId);
+ selectElementType.initUniverseTypeSelect({
+ categoryIds: [65],
+ maxSelectionLength: 1,
+ selected: [Util.getObjVal(structureData, 'structure.id')]
+ });
+
+ // init corporation select live search
+ let selectElementCorporation = modalContent.find('#' + this._config.corporationSelectId);
+ selectElementCorporation.initUniverseSearch({
+ categoryNames: ['corporation'],
+ maxSelectionLength: 1
+ });
+
+ // init status select2
+ modalContent.find('#' + this._config.statusSelectId).initStatusSelect({
+ data: statusData
+ });
+
+ // init char counter
+ let textarea = modalContent.find('#' + this._config.descriptionTextareaId);
+ let charCounter = modalContent.find('.' + this._config.descriptionTextareaCharCounter);
+ Util.updateCounter(textarea, charCounter, SystemIntelModule.maxDescriptionLength);
+
+ textarea.on('keyup', function(){
+ Util.updateCounter($(this), charCounter, SystemIntelModule.maxDescriptionLength);
+ });
+
+ // set form validator (after select2 init finish)
+ modalContent.find('form').initFormValidation();
+ });
+
+ // show dialog
+ structureDialog.modal('show');
+ });
+ }
+
+ /**
+ * show D-Scan reader dialog
+ * @param tableApi
+ */
+ showDscanReaderDialog(tableApi){
+ requirejs(['text!templates/dialog/dscan_reader.html', 'mustache'], (template, Mustache) => {
+ let structureDialog = bootbox.dialog({
+ title: 'D-Scan reader',
+ message: Mustache.render(template, {}),
+ show: true,
+ buttons: {
+ close: {
+ label: 'cancel',
+ className: 'btn-default'
+ },
+ success: {
+ label: ' update intel',
+ className: 'btn-success',
+ callback: e => {
+ let form = $(e.delegateTarget).find('form');
+ let formData = form.getFormValues();
+
+ this.updateStructureTableByClipboard(formData.clipboard, {
+ tableApi: tableApi
+ });
+ }
+ }
+ }
+ });
+
+ // dialog shown event
+ structureDialog.on('shown.bs.modal', function(e){
+ // set focus on textarea
+ structureDialog.find('textarea').focus();
+ });
+ });
+ }
+
+ /**
+ * callback -> add table rows from grouped tableData
+ * @param context
+ * @param tableData
+ * @param groupedDataKey
+ */
+ callbackUpdateTableRows(context, tableData, groupedDataKey = 'structures'){
+ let touchedRows = [];
+ let hadData = context.tableApi.rows().any();
+ let notificationCounter = {
+ added: 0,
+ changed: 0,
+ deleted: 0
+ };
+
+ if(tableData){
+ for(let [rowGroupId, rowGroupData] of Object.entries(tableData)){
+ if(rowGroupData[groupedDataKey] && rowGroupData[groupedDataKey].length){
+ for(let rowData of rowGroupData[groupedDataKey]){
+ let rowId = this.getRowById(context.tableApi, rowData.id);
+
+ // add rowGroupData as well to each rowData
+ rowData.rowGroupData = {
+ id: rowGroupData.id,
+ name: rowGroupData.name,
+ groupedDataKey: groupedDataKey
+ };
+
+ if(rowId){
+ // update row
+ let api = context.tableApi.row('#' + rowId);
+ let rowDataCurrent = api.data();
+
+ // check for update
+ if(Util.getObjVal(rowDataCurrent, 'updated.updated') !== Util.getObjVal(rowData, 'updated.updated')){
+ // row data changed -> update
+ api.data(rowData);
+ notificationCounter.changed++;
+ }
+
+ touchedRows.push(api.id());
+ }else{
+ // insert new row
+ let api = context.tableApi.row.add(rowData);
+ api.nodes().to$().data('animationStatus', 'added');
+ notificationCounter.added++;
+
+ touchedRows.push(api.id());
+ }
+ }
+ }
+ }
}
+
+ if(context.removeMissing){
+ let api = context.tableApi.rows((idx, data, node) => !touchedRows.includes(node.id));
+ notificationCounter.deleted += api.ids().count();
+ api.remove();
+ }
+
+ if(Math.max(...Object.values(notificationCounter))){
+ context.tableApi.draw();
+ }
+
+ // show notification --------------------------------------------------------------------------------------
+ let notification = Object.keys(notificationCounter).reduce((acc, key) => {
+ return `${acc}${notificationCounter[key] ? `${notificationCounter[key]} ${key}
` : ''}`;
+ }, '');
+
+ if(hadData && notification.length){
+ this.showNotify({title: 'Structures updated', text: notification, type: 'success', textTrusted: true});
+ }
+ }
+
+
+ /**
+ * parse clipboard data for structures and update table
+ * @param clipboard
+ * @param context
+ */
+ updateStructureTableByClipboard(clipboard, context){
+
+ let saveStructureData = (structureData, context) => {
+ $(this.moduleElement).showLoadingAnimation();
+
+ this.request('POST', 'Structure', [], structureData, context, () => $(this.moduleElement).hideLoadingAnimation())
+ .then(
+ payload => this.callbackUpdateTableRows(payload.context, payload.data),
+ Util.handleAjaxErrorResponse
+ );
+ };
+
+ let structureData = this.parseDscanString(this._systemData, clipboard);
+ if(structureData.length){
+ // valid structure data parsed
+
+ // check if structures will be added to a system where character is currently in
+ // if character is not in any system -> id === undefined -> no "confirmation required
+ let currentLocationData = Util.getCurrentLocationData();
+ if(
+ currentLocationData.id &&
+ currentLocationData.id !== this._systemData.systemId
+ ){
+ let systemNameStr = (this._systemData.name === this._systemData.alias) ?
+ '"' + this._systemData.name + '"' :
+ '"' + this._systemData.alias + '" (' + this._systemData.name + ')';
+ systemNameStr = '' + systemNameStr + '';
+
+ let msg = 'Update structures in ' + systemNameStr + ' ? This is not your current location, "' + currentLocationData.name + '" !';
+ bootbox.confirm(msg, result => {
+ if(result){
+ saveStructureData(structureData, context);
+ }
+ });
+ }else{
+ saveStructureData(structureData, context);
+ }
+ }
+ }
+
+ /**
+ * get universe typeIds for given categoryIds
+ * @param categoryIds
+ * @returns {Array}
+ */
+ getUniverseTypeIdsByCategoryIds(categoryIds){
+ let typeIds = [];
+ let mapIds = type => type.id;
+ for(let categoryId of categoryIds){
+ let categoryData = Util.getObjVal(Init, 'universeCategories.' + categoryId);
+ if(categoryData && categoryData.groups){
+ for(let groupData of categoryData.groups){
+ if(groupData && groupData.types){
+ typeIds = typeIds.concat(groupData.types.map(mapIds));
+ }
+ }
+ }
+ }
+
+ return typeIds;
+ }
+
+ /**
+ * parse a copy&paste string from ingame dScan windows
+ * @param systemData
+ * @param clipboard
+ * @returns {Array}
+ */
+ parseDscanString(systemData, clipboard){
+ let dScanData = [];
+ let structureTypeIds = this.getUniverseTypeIdsByCategoryIds([65]);
+
+ if(clipboard.length){
+ let dScanRows = clipboard.split(/\r\n|\r|\n/g);
+
+ for(let rowData of dScanRows){
+ rowData = rowData.split(/\t/g);
+
+ if(rowData.length === 4){
+ rowData[0] = parseInt(rowData[0]);
+ // valid dScan result
+ if(structureTypeIds.indexOf( rowData[0] ) !== -1){
+ dScanData.push({
+ structureId: rowData[0],
+ name: rowData[1],
+ systemId: systemData.systemId
+ });
+ }
+ }
+ }
+ }
+
+ return dScanData;
+ }
+
+ /**
+ * callback -> delete structure rows
+ * @param context
+ * @param structureIds
+ */
+ callbackDeleteStructures(context, structureIds){
+ let deletedCounter = 0;
+ if(structureIds && structureIds.length){
+ for(let structureId of structureIds){
+ let rowId = this.getRowById(context.tableApi, structureId);
+ if(rowId){
+ context.tableApi.row('#' + rowId).remove();
+ deletedCounter++;
+ }
+ }
+ }
+
+ if(deletedCounter){
+ context.tableApi.draw();
+ Util.showNotify({title: 'Structure deleted', text: deletedCounter + ' deleted', type: 'success'});
+ }
+ }
+
+ /**
+ * init station services tooltips
+ * @param element
+ * @param tableApi
+ */
+ initStationServiceTooltip(element, tableApi){
+ element.hoverIntent({
+ over: function(e){
+ let cellElement = $(this);
+ let rowData = tableApi.row(cellElement.parents('tr')).data();
+ cellElement.addStationServiceTooltip(Util.getObjVal(rowData, 'services'), {
+ placement: 'left',
+ trigger: 'manual',
+ show: true
+ });
+ },
+ out: function(e){
+ $(this).destroyPopover();
+ },
+ selector: 'td.' + this._config.tableCellServicesClass
+ });
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ let module = this;
+ let structureTableElement = $(module.moduleElement).find('.' + module._config.systemStructuresTableClass);
+ let tableApi = structureTableElement.DataTable();
+
+ // init listener for global "past" dScan into this page
+ $(module.moduleElement).on('pf:updateIntelModuleByClipboard', (e, clipboard) => {
+ module.updateStructureTableByClipboard(clipboard, {
+ tableApi: tableApi
+ });
+ });
+
+ // init popovers for some table cells
+ $(module.moduleElement).hoverIntent({
+ over: function(e){
+ let tableApi = module.getDataTableInstance(module._systemData.mapId, module._systemData.id, 'structure');
+
+ // simple for layout (CSS)
+ let cellData = tableApi.cell(this).data();
+ if(cellData && cellData.length){
+ let content = '' + cellData.replace(/\r?\n/g, '
') + ' |
';
+
+ let options = {
+ placement: 'top',
+ html: true,
+ trigger: 'manual',
+ container: 'body',
+ title: '',
+ content: content,
+ delay: {
+ show: 0,
+ hide: 0
+ },
+ };
+
+ $(this).popover(options).popover('show');
+ }
+ },
+ out: function(e){
+ $(this).destroyPopover();
+ },
+ selector: '.' + module._config.tableCellPopoverClass
+ });
+
+ // init tooltips
+ $(this.moduleElement).initTooltips();
+ }
+
+ /**
+ * update module
+ * compare data and update module
+ * @param systemData
+ * @returns {Promise}
+ */
+ update(systemData){
+ return super.update(systemData).then(systemData => new Promise(resolve => {
+ // update structure table data ------------------------------------------------------------------------
+ if(this._tableApiStructure){
+ let structureContext = {
+ tableApi: this._tableApiStructure,
+ removeMissing: true
+ };
+
+ this.callbackUpdateTableRows(structureContext, Util.getObjVal(systemData, 'structures'));
+ }else{
+ console.warn('DataTable "structures" not initialized. Can not update "intel" module');
+ }
+
+ // update station table data --------------------------------------------------------------------------
+ if(this._tableApiStation){
+ let stationContext = {
+ tableApi: this._tableApiStation,
+ removeMissing: false
+ };
+
+ this.callbackUpdateTableRows(stationContext, Util.getObjVal(systemData, 'stations'), 'stations');
+ }
+
+ $(this.moduleElement).hideLoadingAnimation();
+
+ resolve({
+ action: 'update',
+ data: {
+ module: this
+ }
+ });
+ }));
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
}
};
- /**
- * update trigger function for this module
- * compare data and update module
- * @param moduleElement
- * @param systemData
- */
- let updateModule = (moduleElement, systemData) => {
+ SystemIntelModule.isPlugin = false; // module is defined as 'plugin'
+ SystemIntelModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ SystemIntelModule.sortArea = 'b'; // default sortable area
+ SystemIntelModule.position = 2; // default sort/order position within sortable area
+ SystemIntelModule.label = 'Structures'; // static module label (e.g. description)
+ SystemIntelModule.fullDataUpdate = true; // static module requires additional data (e.g. system description,...)
- // update structure table data --------------------------------------------------------------------------------
- let structureTable = moduleElement.find('.' + config.systemStructuresTableClass);
- let tableApiStructure = structureTable.DataTable();
+ SystemIntelModule.maxDescriptionLength = 512;
- let structureContext = {
- tableApi: tableApiStructure,
- removeMissing: true
- };
+ SystemIntelModule.defaultConfig = {
+ className: 'pf-system-intel-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Structures',
+ headlineSub: 'Stations',
- callbackUpdateTableRows(structureContext, Util.getObjVal(systemData, 'structures'));
+ // system intel module
+ intelTableId: 'pf-intel-table-', // id prefix for all tables in module
+ intelTableRowIdPrefix: 'pf-intel-row-', // id prefix for table rows
+ systemStationsTableClass: 'pf-system-station-table', // class for NPC owned stations table
+ systemStructuresTableClass: 'pf-system-structure-table', // class for player owned structures table
- // update station table data ----------------------------------------------------------------------------------
- let stationTable = moduleElement.find('.' + config.systemStationsTableClass);
- let tableApiStation = stationTable.DataTable();
+ // structure dialog
+ structureDialogId: 'pf-structure-dialog', // id for "structure" dialog
+ nameInputId: 'pf-structure-dialog-name-input', // id for "name" input
+ statusSelectId: 'pf-structure-dialog-status-select', // id for "status" select
+ typeSelectId: 'pf-structure-dialog-type-select', // id for "type" select
+ corporationSelectId: 'pf-structure-dialog-corporation-select', // id for "corporation" select
+ descriptionTextareaId: 'pf-structure-dialog-description-textarea', // id for "description" textarea
+ descriptionTextareaCharCounter: 'pf-form-field-char-count', // class for "character counter" element for form field
- let stationContext = {
- tableApi: tableApiStation,
- removeMissing: false
- };
-
- callbackUpdateTableRows(stationContext, Util.getObjVal(systemData, 'stations'), 'stations');
-
- moduleElement.hideLoadingAnimation();
- };
-
- /**
- * init intel module
- * @param moduleElement
- * @param mapId
- * @param systemData
- */
- let initModule = (moduleElement, mapId, systemData) => {
- let structureTableElement = moduleElement.find('.' + config.systemStructuresTableClass);
- let tableApi = structureTableElement.DataTable();
-
- // init listener for global "past" dScan into this page -------------------------------------------------------
- moduleElement.on('pf:updateIntelModuleByClipboard', function(e, clipboard){
- updateStructureTableByClipboard(systemData, clipboard, {
- moduleElement: moduleElement,
- tableApi: tableApi
- });
- });
-
- // init popovers for some table cells -------------------------------------------------------------------------
- moduleElement.hoverIntent({
- over: function(e){
- let tableApi = getDataTableInstance(mapId, systemData.id, 'structure');
-
- // simple for layout (CSS)
- let cellData = tableApi.cell(this).data();
- if(cellData && cellData.length){
- let content = '' + cellData.replace(/\r?\n/g, '
') + ' |
';
-
- let options = {
- placement: 'top',
- html: true,
- trigger: 'manual',
- container: 'body',
- title: '',
- content: content,
- delay: {
- show: 0,
- hide: 0
- },
- };
-
- $(this).popover(options).popover('show');
- }
- },
- out: function(e){
- $(this).destroyPopover();
- },
- selector: '.' + config.tableCellPopoverClass
- });
- };
-
- /**
- * before module destroy callback
- * @param moduleElement
- */
- let beforeDestroy = moduleElement => {
- let structureTable = moduleElement.find('.' + config.systemStructuresTableClass);
- let stationTable = moduleElement.find('.' + config.systemStationsTableClass);
- let tableApiStructure = structureTable.DataTable();
- let tableApiStation = stationTable.DataTable();
- tableApiStructure.destroy(true);
- tableApiStation.destroy(true);
- };
-
- return {
- config: config,
- getModule: getModule,
- initModule: initModule,
- updateModule: updateModule,
- beforeDestroy: beforeDestroy
+ // dataTable
+ tableCellImageClass: 'pf-table-image-smaller-cell', // class for table "image" cells
+ tableCellCounterClass: 'pf-table-counter-cell', // class for table "counter" cells
+ tableCellEllipsisClass: 'pf-table-cell-ellipses-auto', // class for table "ellipsis" cells
+ tableCellActionClass: 'pf-table-action-cell', // class for "action" cells
+ tableCellActionIconClass: 'pf-table-action-icon-cell', // class for table "action" icon (icon is part of cell content)
+ tableCellServicesClass: 'pf-table-services-cell', // class for table station "services" cells
+ tableCellPopoverClass: 'pf-table-popover-cell' // class for table cells with a "popover"
};
+ return SystemIntelModule;
});
\ No newline at end of file
diff --git a/js/app/ui/module/system_killboard.js b/js/app/ui/module/system_killboard.js
index c707f00f..47ff2308 100644
--- a/js/app/ui/module/system_killboard.js
+++ b/js/app/ui/module/system_killboard.js
@@ -6,356 +6,820 @@ define([
'jquery',
'app/init',
'app/util',
- 'app/lib/cache'
-], ($, Init, Util, Cache) => {
+ 'module/base',
+ 'app/map/util'
+], ($, Init, Util, BaseModule, MapUtil) => {
'use strict';
- let config = {
- // module info
- modulePosition: 2,
- moduleName: 'systemKillboard',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
+ let SystemKillboardModule = class SystemKillboardModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
- // headline toolbar
- moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
+ /**
+ * module header
+ * @param text
+ * @returns {HTMLDivElement}
+ */
+ newHeaderElement(text){
+ let headEl = super.newHeaderElement(text);
- // system killboard module
- moduleTypeClass: 'pf-system-killboard-module', // class for this module
+ // WebSocket status
+ let wsStatusEl = Object.assign(document.createElement('h5'), {
+ className: this._config.wsStatusWrapperClass
+ });
+ this._iconWsEl = this.newIconElement([
+ 'fa-circle', 'fa-fw', 'txt-color', this._config.wsStatusClass
+ ]);
+ wsStatusEl.append(this._iconWsEl);
- // system killboard list
- systemKillboardListClass: 'pf-system-killboard-list', // class for a list with kill entries
- systemKillboardListEntryClass: 'pf-system-killboard-list-entry', // class for a list entry
- systemKillboardListImgShip: 'pf-system-killboard-img-ship', // class for all ship images
- systemKillboardListImgChar: 'pf-system-killboard-img-char', // class for all character logos
- systemKillboardListImgAlly: 'pf-system-killboard-img-ally', // class for all alliance logos
- systemKillboardListImgCorp: 'pf-system-killboard-img-corp', // class for all corp logos
+ // toolbar
+ let toolbarEl = this.newHeadlineToolbarElement();
+ this._iconFilterEl = this.newIconElement([
+ 'fa-filter', 'fa-fw',
+ this._config.moduleHeadlineIconClass
+ ]);
- labelRecentKillsClass: 'pf-system-killboard-label-recent', // class for "recent kills" label
- controlAreaClass: 'pf-module-control-area', // class for "control" areas
+ let iconKbEl = this.newIconElement([
+ 'fa-external-link-alt', 'fa-fw',
+ this._config.moduleHeadlineIconClass
+ ]);
+ iconKbEl.setAttribute('title', 'zkillboard.com');
+ iconKbEl.onclick = e => this.openKillboardUrl(e);
- minCountKills: 5,
- chunkCountKills: 5,
- maxCountKills: 43
- };
+ toolbarEl.append(iconKbEl, this._iconFilterEl);
+ headEl.append(wsStatusEl, toolbarEl);
- let cache = new Cache({
- name: 'killboardModule',
- ttl: 60 * 60,
- maxSize: 600,
- debug: false
- });
+ return headEl;
+ }
- /**
- *
- * @param text
- * @param options
- * @returns {jQuery}
- */
- let getLabel = (text, options) => $('', {
- class: ['label', options.type, options.align, options.class].join(' ')
- }).text(text);
+ /**
+ * HTTP request
+ * @param url
+ * @returns {Promise}
+ */
+ request(url){
+ return new Promise((resolve, reject) => {
+ let handleResponse = response => {
+ return response.json()
+ .then((json) => {
+ if(!response.ok){
+ return Promise.reject(Object.assign({}, json, {
+ status: response.status,
+ statusText: response.statusText,
+ }));
+ }
+ return json;
+ });
+ };
- /**
- * get killmail data from ESI
- * @param requestData
- * @param context
- * @param callback
- */
- let loadKillmailData = (requestData, context, callback) => {
- let cacheKey = 'killmail_' + requestData.killId;
- let responseData = cache.get(cacheKey);
- if(responseData){
- // ... already cached -> return from cache
- callback(context, responseData)
- .then(payload => showKills(payload.data.killboardElement, payload.data.systemId, payload.data.chunkSize));
- }else{
- // ...not cached -> request data
- let url = 'https://esi.evetech.net/latest/killmails/' + requestData.killId + '/' + requestData.hash + '/';
+ fetch(url)
+ .then(handleResponse)
+ .then((result) => {
+ resolve(result);
+ }).catch((e) => {
+ console.error(url, e);
- $.ajax({
- type: 'GET',
- url: url,
- dataType: 'json',
- context: context
- }).done(function(responseData){
- cache.set(cacheKey, responseData);
+ let title = e.status ? e.status : e;
+ let text = e.error ? e.error : url;
+ this.showNotify({title: title, text: text, type: 'error'});
- callback(this, responseData)
- .then(payload => showKills(payload.data.killboardElement, payload.data.systemId, payload.data.chunkSize));
- }).fail(function(jqXHR, status, error){
- // request failed -> skip this and load next
- showKills(this.killboardElement, this.systemId, this.chunkSize);
+ reject(e);
+ }).finally(() => {
+ $(this.moduleElement).hideLoadingAnimation();
+ });
});
}
- };
-
- /**
- * load a chunk of killmails and render them
- * @param killboardElement
- * @param systemId
- * @param chunkSize
- */
- let showKills = (killboardElement, systemId, chunkSize) => {
- if(chunkSize){
- let cacheKey = 'zkb_' + systemId;
- let data = cache.getOrDefault(cacheKey, []);
- if(
- killboardElement.children().length < config.maxCountKills &&
- data.length
- ){
- // next killmail to load
- let nextZkb = data.shift();
-
- loadKillmailData({
- killId: parseInt(nextZkb.killmail_id) || 0,
- hash: nextZkb.zkb.hash
- }, {
- chunkSize: --chunkSize,
- zkb: nextZkb.zkb,
- systemId: systemId,
- killboardElement: killboardElement
- }, renderKillmail);
+ /**
+ * get zKillboard data
+ * @returns {Promise}
+ */
+ getSystemKillsData(){
+ // check for cached responses "short term cache"
+ let cacheKey = SystemKillboardModule.getCacheKey('systemId', this._systemData.systemId);
+ let result = SystemKillboardModule.getCache('zkb').get(cacheKey);
+ if(result){
+ // could also be an empty array!
+ return Promise.resolve(result);
}else{
- // no more kills available OR max kills reached
- killboardElement.closest('.' + config.moduleTypeClass).find('.' + config.controlAreaClass).hide();
+ return new Promise(resolve => {
+ $(this.moduleElement).showLoadingAnimation();
+
+ // get kills within the last 24h
+ let timeFrameInSeconds = 60 * 60 * 24;
+
+ // if system is w-space system -> add link modifier
+ let wSpaceLinkModifier = '';
+ if(this._systemData.type.id === 1){
+ wSpaceLinkModifier = 'w-space/';
+ }
+
+ let url = `${Init.url.zKillboard}/no-items/${wSpaceLinkModifier}no-attackers/npc/0/solarSystemID/${this._systemData.systemId}/pastSeconds/${timeFrameInSeconds}/`;
+
+ this.request(url).then(result => {
+ if(result.error){
+ // successful request with error response
+ this.showNotify({title: 'Data fetch() from zKillboard failed', text: result.error, type: 'error'});
+ return Promise.reject(result);
+ }else{
+ // zkb result needs to be cached and becomes reduced on "load more"
+ SystemKillboardModule.getCache('zkb').set(cacheKey, result);
+ return result;
+ }
+ }).then(result => resolve(result)).catch(e => {
+ console.error(e);
+ this.showNotify({title: 'Data fetch() from zKillboard failed', text: e, type: 'error'});
+ });
+ });
}
-
}
- };
- /**
- * render a single killmail
- * @param context
- * @param killmailData
- * @returns {Promise}
- */
- let renderKillmail = (context, killmailData) => {
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._mapId = mapId;
+ this._systemData = systemData;
- let renderKillmailExecutor = (resolve, reject) => {
- // calculate time diff in hours
- let serverDate= Util.getServerTime();
- let killDate = Util.convertDateToUTC(new Date(killmailData.killmail_time));
+ // request graph data and store result promise
+ // -> module is not full rendered jet
+ this._dataPromise = this.getSystemKillsData();
- // get time diff
- let timeDiffMin = Math.round((serverDate - killDate) / 1000 / 60);
- let timeDiffHour = Math.floor(timeDiffMin / 60);
+ this._bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
+ });
+ this.moduleElement.append(this._bodyEl);
- let data = {
- zkb: context.zkb,
- killmail: killmailData,
- systemKillboardListEntryClass: config.systemKillboardListEntryClass,
- systemKillboardListImgShip: config.systemKillboardListImgShip,
- systemKillboardListImgChar: config.systemKillboardListImgChar,
- systemKillboardListImgCorp: config.systemKillboardListImgCorp,
- systemKillboardListImgAlly: config.systemKillboardListImgAlly,
- zKillboardUrl: 'https://zkillboard.com',
- ccpImageServerUrl: Init.url.ccpImageServer,
- dateFormat: () => {
- return (val, render) => {
- let killDate = Util.convertDateToUTC(new Date(render(val)));
- return Util.convertDateToString(killDate);
- };
- },
- iskFormat: () => {
- return (val, render) => {
- return Util.formatPrice(render(val));
- };
- },
- };
+ this.setModuleObserver();
- requirejs(['text!templates/modules/killmail.html', 'mustache'], (template, Mustache) => {
- // show hint for recent kills -------------------------------------------------------------------------
- if(timeDiffHour === 0){
- context.killboardElement.siblings('.' + config.labelRecentKillsClass).css('display', 'block');
+ // init webSocket connection
+ SystemKillboardModule.initWebSocket();
+
+ return this.moduleElement;
+ }
+
+ /**
+ * init module
+ */
+ init(){
+ super.init();
+
+ // subscribe this module instance to the zKB WebSocket
+ SystemKillboardModule.subscribeToWS(this);
+ this.updateWsStatus();
+
+ // show "historic" killmails
+ if(this._dataPromise instanceof Promise){
+ this._dataPromise
+ .then(result => {
+ this._killboardLabelEl = this.newLabelElement('recent kills within the last hour', [
+ 'label-warning', this._config.labelRecentKillsClass, 'hidden'
+ ]);
+
+ if(result.length){
+ // kills found
+ this._killboardEl = document.createElement('ul');
+ this._killboardEl.classList.add(this._config.systemKillboardListClass);
+
+ this._bodyEl.append(
+ this._killboardLabelEl,
+ this._killboardEl,
+ this.newControlElement('load more', [this._config.moduleHeadlineIconClass])
+ );
+
+ // set a "local" copy of all indexes from cached response
+ // -> this "local" array gets reduces when KM gets loaded
+ // -> manipulation does NOT affect cached data
+ this._tempZkbKillmailIndexes = Object.keys(result);
+
+ this.showKills(this._config.chunkCountKills);
+ }else{
+ // no kills found
+ this._bodyEl.append(
+ this.newLabelElement('No kills found within the last 24h', ['label-success'])
+ );
+ }
+ })
+ .catch(e => {
+ console.error(e);
+ });
+ }
+ }
+
+ beforeHide(){
+ super.beforeHide();
+ SystemKillboardModule.unsubscribeFromWS(this);
+ }
+
+ /**
+ * load a chunk of killmails and render them
+ * @param chunkSize
+ */
+ showKills(chunkSize){
+ if(chunkSize){
+ let cacheKey = SystemKillboardModule.getCacheKey('systemId', this._systemData.systemId);
+ let result = SystemKillboardModule.getCache('zkb').get(cacheKey);
+
+ if(
+ this._killboardEl.children.length < this._config.maxCountKillHistoric &&
+ (this._tempZkbKillmailIndexes || []).length &&
+ (result || []).length
+ ){
+ // next killmail to load -> reduce "local" index array
+ let nextZkb = result[this._tempZkbKillmailIndexes.shift()];
+ if(nextZkb){
+ this.loadKillmailData({
+ killId: parseInt(nextZkb.killmail_id) || 0,
+ hash: nextZkb.zkb.hash
+ }, {
+ chunkSize: --chunkSize,
+ zkb: nextZkb.zkb
+ }, 'renderKillmail');
+ }else{
+ console.warn('Killmail not found in local zkb cache');
+ }
+ }else{
+ // no more kills available OR max kills reached
+ this.moduleElement.querySelector('.' + this._config.controlAreaClass).style.display = 'none';
+ }
+ }
+ }
+
+ /**
+ * get killmail data from ESI
+ * @param requestData
+ * @param context
+ * @param callback
+ */
+ loadKillmailData(requestData, context, callback){
+ let cacheKey = SystemKillboardModule.getCacheKey('killmail', requestData.killId);
+ let cacheItem = SystemKillboardModule.getCache('killmail').get(cacheKey);
+ if(cacheItem){
+ // ... already cached -> show cache killmail
+ this[callback](cacheItem.zkb, cacheItem.killmailData, cacheItem.systemData, context.chunkSize)
+ .then(payload => this.showKills(payload.data.chunkSize))
+ .catch(e => console.error(e));
+ }else{
+ // ...not cached -> request data
+ let url = 'https://esi.evetech.net/latest/killmails/' + requestData.killId + '/' + requestData.hash + '/';
+
+ this.request(url).then(killmailData => {
+ let systemData = SystemKillboardModule.getSystemDataForCache(this._systemData);
+ SystemKillboardModule.getCache('killmail').set(cacheKey, {zkb: context.zkb, killmailData: killmailData, systemData: systemData});
+
+ this[callback](context.zkb, killmailData, systemData, context.chunkSize)
+ .then(payload => this.showKills(payload.data.chunkSize))
+ .catch(e => console.error(e));
+ }).catch(e => {
+ // request failed -> skip this and load next
+ console.warn(e);
+ this.showKills(context.chunkSize);
+ });
+ }
+ }
+
+ /**
+ * @param zkb
+ * @param attackersCount
+ * @returns {{color: string, label: string}}
+ */
+ getAttackerBadgeData(zkb, attackersCount){
+ let color, label;
+ if(zkb.solo){
+ color = '#5cb85c';
+ label = 'solo';
+ }else if(zkb.npc){
+ color = '#d747d6';
+ label = 'npc';
+ }else if(attackersCount){
+ color = '#adadad';
+ label = attackersCount;
+ }
+ return {color, label};
+ }
+
+ /**
+ * render a single killmail
+ * @param zkbData
+ * @param killmailData
+ * @param systemData
+ * @param chunkSize
+ * @param position
+ * @returns {Promise}
+ */
+ renderKillmail(zkbData, killmailData, systemData, chunkSize, position = 'bottom'){
+ return new Promise((resolve, reject) => {
+ if(!this._killboardEl){
+ // killboard element might not be rendered at this point (e.g. if new kills pushed to WS)
+ return reject(new ReferenceError('Could not render killmail. KB element not found.'));
}
- // render killmail entry ------------------------------------------------------------------------------
- let content = Mustache.render(template, data);
- context.killboardElement.append(content);
+ // calculate time diff in hours
+ let serverDate = SystemKillboardModule.serverTime;
+ let serverHours = serverDate.setHours(0,0,0,0);
- // animate kill li-element ----------------------------------------------------------------------------
- context.killboardElement.children().last().velocity('transition.expandIn', {
- complete: function(){
- $(this).find('[title]').tooltip({
- container: 'body'
- });
+ let killDate = Util.convertDateToUTC(new Date(killmailData.killmail_time));
+
+ // get time diff
+ let timeDiffMin = Math.round((serverDate - killDate) / 1000 / 60);
+ let timeDiffHour = Math.floor(timeDiffMin / 60);
+
+ let attackers = BaseModule.Util.getObjVal(killmailData, 'attackers') || [];
+ let attackersCount = attackers.length;
+ let attackerFinal = attackers.find(attacker => attacker.final_blow);
+
+
+ let data = {
+ zkb: zkbData,
+ killmail: killmailData,
+ system: systemData,
+ isPodKill: BaseModule.Util.getObjVal(killmailData, 'victim.ship_type_id') === 670, // POD shipId
+ attackersCount: attackersCount,
+ attackerFinal: attackerFinal,
+ attackerBadge: this.getAttackerBadgeData(zkbData, attackersCount),
+ config: this._config,
+ zKillboardUrl: 'https://zkillboard.com',
+ ccpImageServerUrl: Init.url.ccpImageServer,
+ imgUrlType: () => {
+ return (val, render) => this.getImageUrl('types', parseInt(render(val)) || 0, 64);
+ },
+ imgUrlChar: () => {
+ return (val, render) => this.getImageUrl('characters', parseInt(render(val)) || 0);
+ },
+ imgUrlCorp: () => {
+ return (val, render) => this.getImageUrl('corporations', parseInt(render(val)) || 0);
+ },
+ imgUrlAlly: () => {
+ return (val, render) => this.getImageUrl('alliances', parseInt(render(val)) || 0);
+ },
+ dateFormat: () => {
+ return (val, render) => {
+ let killDate = Util.convertDateToUTC(new Date(render(val)));
+ let value = Util.convertDateToString(killDate);
+
+ // check whether log is new (today) ->
+ if(killDate.setHours(0,0,0,0) === serverHours){
+ // replace dd/mm/YYYY
+ value = 'today' + value.substring(10);
+ }
+
+ return value;
+ };
+ },
+ iskFormat: () => {
+ return (val, render) => {
+ return Util.formatPrice(render(val));
+ };
+ },
+ };
+
+ requirejs(['text!templates/modules/killmail.html', 'mustache'], (template, Mustache) => {
+ // show hint for recent kills
+ this._killboardLabelEl.classList.toggle('hidden', !(timeDiffHour === 0 && this._killboardLabelEl));
+
+ // render killmail entry
+ let insertPos = ['append', 'beforeend'];
+ let animationPos = 'lastChild';
+ if(position === 'top'){
+ insertPos = ['prepend', 'afterbegin'];
+ animationPos = 'firstChild';
+ }
+
+ this._killboardEl.insertAdjacentHTML(insertPos[1], Mustache.render(template, data));
+
+ // animate kill li-element
+ $(this._killboardEl[animationPos]).velocity('transition.expandIn', {
+ display: 'flex',
+ complete: function(){
+ $(this).initTooltips();
+ }
+ }, {
+ display: 'flex'
+ });
+
+ resolve({
+ action: 'renderKillmail',
+ data: {
+ chunkSize: chunkSize
+ }
+ });
+ });
+ });
+ }
+
+ /**
+ * remove last killmail list entry
+ */
+ removeKillmail(){
+ if(this._killboardEl){
+ let lastEl = this._nextToRemove || (this._listStreamHeadline ? this._listStreamHeadline.previousElementSibling : null) || this._killboardEl.lastChild;
+ if(lastEl){
+ this._nextToRemove = lastEl.previousElementSibling;
+ this._killboardEl.removeChild(lastEl);
+ }
+ }
+ }
+
+ /**
+ * get image src URL
+ * @param resourceType
+ * @param resourceId
+ * @param size
+ * @returns {string}
+ */
+ getImageUrl(resourceType, resourceId, size = 32){
+ let url = '#';
+ if(resourceId){
+ url = BaseModule.Util.eveImageUrl(resourceType, resourceId, size);
+ }
+ return url;
+ }
+
+ /**
+ * Li headline (devider)
+ * @param text
+ * @returns {HTMLLIElement}
+ */
+ newListItemHeadElement(text){
+ let listHeadEl = Object.assign(document.createElement('li'), {
+ className: ['flex-row', 'flex-between', 'media', this._config.systemKillboardListHeadClass].join(' ')
+ });
+
+ let iconDownEl = this.newIconElement(['fa-angle-double-down']);
+ let iconUpEl = this.newIconElement(['fa-angle-double-up']);
+ let headlineIconLeftEl = Object.assign(this.newHeadlineElement(), {
+ className: 'flex-col'
+ });
+ let headlineIconRightEl = Object.assign(this.newHeadlineElement(), {
+ className: 'flex-col'
+ });
+ headlineIconLeftEl.append(iconDownEl);
+ headlineIconRightEl.append(iconUpEl);
+
+ let headlineLeftEl = this.newHeadlineElement(text);
+ headlineLeftEl.classList.add('flex-col', 'flex-grow', 'media-body');
+ let headlineRightEl = this.newHeadlineElement('Killstream');
+ headlineRightEl.classList.add('flex-col', 'flex-grow', 'media-body', 'text-right');
+
+ listHeadEl.append(headlineIconLeftEl, headlineLeftEl, headlineRightEl, headlineIconRightEl);
+ return listHeadEl;
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ this.setFilterIconObserver();
+
+ $(this.moduleElement).initTooltips({
+ placement: 'top'
+ });
+
+ this.moduleElement.addEventListener('click', e => {
+ if(e.target.closest('.' + this._config.controlAreaClass)){
+ e.stopPropagation();
+ this.showKills(this._config.chunkCountKills);
+ }
+ });
+ }
+
+ /**
+ * init filter icon for WebSocket streams
+ */
+ setFilterIconObserver(){
+ let cacheKey = `map_${this._mapId}.streams`;
+ this.getLocalStore().getItem(cacheKey).then(streams => {
+ if(!streams){
+ // not saved yet -> default streams
+ streams = ['system', 'map'];
+ this.getLocalStore().setItem(cacheKey, streams);
+ }
+ this._filterStreams = streams;
+
+ let sourceOptions = [{
+ value: 'system',
+ text: `System (${this._systemData.name})`
+ },{
+ value: 'map',
+ text: `Map (${BaseModule.Util.getObjVal(BaseModule.Util.getCurrentMapData(this._mapId), 'config.name')})`
+ },{
+ value: 'all',
+ text: `All (New Eden)`
+ }];
+
+ $(this._iconFilterEl).editable({
+ // toggle: 'manual',
+ mode: 'popup',
+ type: 'checklist',
+ showbuttons: false,
+ onblur: 'submit',
+ highlight: false,
+ title: 'Streams',
+ placement: 'left',
+ pk: this._mapId,
+ value: this._filterStreams,
+ source: sourceOptions,
+ emptyclass: '',
+ emptytext: '',
+ display: function(value, sourceData){
+ // update filter badge
+ if(
+ value && sourceData &&
+ value.length < sourceData.length
+ ){
+ this.dataset.badge = String(value.length);
+ }else{
+ delete this.dataset.badge;
+ }
+ },
+ viewport: {
+ selector: this.moduleElement,
+ padding: 5
}
});
- resolve({
- action: 'renderKillmail',
- data: context
+ $(this._iconFilterEl).on('save', (e, params) => {
+ this.getLocalStore().setItem(cacheKey, params.newValue).then(streams => this._filterStreams = streams);
});
});
- };
-
- return new Promise(renderKillmailExecutor);
- };
-
- /**
- * updates the system info graph
- * @param systemData
- */
- $.fn.updateSystemInfoGraphs = function(systemData){
- let moduleElement = $(this);
-
- let labelOptions = {
- align: 'center-block'
- };
- let label = '';
-
- // get kills within the last 24h
- let timeFrameInSeconds = 60 * 60 * 24;
-
- // if system is w-space system -> add link modifier
- let wSpaceLinkModifier = '';
- if(systemData.type.id === 1){
- wSpaceLinkModifier = 'w-space/';
}
- let url = Init.url.zKillboard + '/';
- url += 'no-items/' + wSpaceLinkModifier + 'no-attackers/npc/0/solarSystemID/' + systemData.systemId + '/pastSeconds/' + timeFrameInSeconds + '/';
+ /**
+ * open external zKillboard URL
+ * @param e
+ */
+ openKillboardUrl(e){
+ e.stopPropagation();
+ window.open(`//zkillboard.com/system/${this._systemData.systemId}`, '_blank');
+ }
- moduleElement.showLoadingAnimation();
+ /**
+ * check if killmailData matches any killStream
+ * @param killmailData
+ * @returns {boolean}
+ */
+ filterKillmailByStreams(killmailData){
+ let streams = this._filterStreams || [];
+ return !!(streams.includes('all') ||
+ (streams.includes('system') && this._systemData.systemId === killmailData.solar_system_id) ||
+ (streams.includes('map') && MapUtil.getSystemData(this._mapId, killmailData.solar_system_id, 'systemId')));
- $.ajax({
- url: url,
- type: 'GET',
- dataType: 'json'
- }).done(function(result){
- // zkb result needs to be cached and becomes reduced on "load more"
- let cacheKey = 'zkb_' + systemData.systemId;
- cache.set(cacheKey, result);
+ }
- if(result.length){
- // kills found -> insert hidden warning for recent kills
- labelOptions.type = 'label-warning';
- labelOptions.class = config.labelRecentKillsClass;
- let label = getLabel('recent kills within the last hour', labelOptions);
- moduleElement.append(label);
+ /**
+ * callback for WebSocket responses
+ * @param zkbData
+ * @param killmailData
+ */
+ onWsMessage(zkbData, killmailData){
+ // check if killmail belongs to current filtered "streams"
+ if(this.filterKillmailByStreams(killmailData)){
+ // check max limit for WS kill entries
+ this._countKillsWS = (this._countKillsWS || 0) + 1;
+ if(this._countKillsWS > this._config.maxCountKillsWS){
+ // remove oldest KM
+ this.removeKillmail();
+ }
- let killboardElement = $('', {
- class: config.systemKillboardListClass
- });
- moduleElement.append(killboardElement);
- moduleElement.append(getControlElement());
+ // add headline before first WS killmail gets added to top
+ if(this._killboardEl && this._countKillsWS === 1){
+ this._listStreamHeadline = this.newListItemHeadElement(this._systemData.name);
+ this._killboardEl.prepend(this._listStreamHeadline);
+ }
- showKills(killboardElement, systemData.systemId, config.chunkCountKills);
- }else{
- // no kills found
- labelOptions.type = 'label-success';
- label = getLabel('No kills found within the last 24h', labelOptions);
- moduleElement.append(label);
+ // get systemData for killmailData
+ // -> systemData should exist if KM belongs to any system on any map
+ let systemData = MapUtil.getSystemData(this._mapId, killmailData.solar_system_id, 'systemId') || null;
+
+ this.renderKillmail(zkbData, killmailData, systemData, 0, 'top')
+ .catch(e => console.warn(e));
}
- }).fail(function(e){
- labelOptions.type = 'label-danger';
- label = getLabel('zKillboard is not responding', labelOptions);
- moduleElement.find('.' + config.moduleHeadClass).after(label);
+ }
- Util.showNotify({title: e.status + ': Get system kills', text: 'Loading failed', type: 'error'});
- }).always(function(){
- moduleElement.hideLoadingAnimation();
- });
+ /**
+ * update module with current WebSocket status
+ */
+ updateWsStatus(){
+ let isSuccess = false;
+ let isWarning = false;
+ let isError = false;
+ let title = 'unknown';
+ switch(SystemKillboardModule.wsStatus){
+ case 1: // connecting
+ title = 'connecting…';
+ isWarning = true;
+ break;
+ case 2: // connected
+ title = 'connected';
+ isSuccess = true;
+ break;
+ case 3: // error
+ title = 'error';
+ isError = true;
+ break;
+ case 4: // close
+ title = 'closed';
+ isError = true;
+ break;
+ }
- // init tooltips
- let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
- tooltipElements.tooltip({
- container: 'body'
- });
+
+ this._iconWsEl.classList.toggle('txt-color-green', isSuccess);
+ this._iconWsEl.classList.toggle('txt-color-orange', isWarning);
+ this._iconWsEl.classList.toggle('txt-color-red', isError);
+ this._iconWsEl.setAttribute('title', title);
+
+ $(this._iconWsEl).destroyTooltips().initTooltips({
+ placement: 'top'
+ });
+ }
+
+ /**
+ * reduce full systemData to minimal data that should be cached with a KM
+ * @param systemData
+ * @returns {*}
+ */
+ static getSystemDataForCache(systemData){
+ return systemData ? {id: systemData.systemId, name: systemData.name} : null;
+ }
+
+ /**
+ * get all systems from all maps, that might be relevant for any cache stream
+ * -> KMs belonging to any of these systems are cached
+ * @returns {Object}
+ */
+ static getWsRelevantSystemsFromMaps(){
+ let cacheKey = SystemKillboardModule.getCacheKey('tempSystemsData', 1);
+ let systemsData = SystemKillboardModule.getCache('zkb').get(cacheKey);
+
+ if(!systemsData){
+ // KB cache ist for all maps (not just the current one)
+ let mapsData = BaseModule.Util.getCurrentMapData() || [];
+ systemsData = mapsData.reduce(
+ (accAll, mapData) => Object.assign(
+ accAll,
+ (BaseModule.Util.getObjVal(mapData, 'data.systems') || []).reduce(
+ (accMap, systemData) => Object.assign(
+ accMap,
+ {[systemData.systemId]: this.getSystemDataForCache(systemData)}
+ ), {})
+ ), {});
+
+ SystemKillboardModule.getCache('zkb').set(cacheKey, systemsData);
+ }
+ return systemsData;
+ }
+
+ /**
+ * cache WebSocket response if it is relevant for us
+ * @param response
+ * @returns {*[]}
+ */
+ static cacheWsResponse(response){
+ let zkbData = response.zkb;
+ delete response.zkb;
+ let killmailData = response;
+ let systemData = null;
+
+ // check if killmailData is relevant (belongs to any system on any map
+ let systemsData = this.getWsRelevantSystemsFromMaps();
+ if(Object.keys(systemsData).map(systemId => parseInt(systemId)).includes(killmailData.solar_system_id)){
+ // system is on map! -> cache
+ systemData = BaseModule.Util.getObjVal(systemsData, String(killmailData.solar_system_id));
+ let cacheKey = SystemKillboardModule.getCacheKey('killmail', killmailData.killmail_id);
+ SystemKillboardModule.getCache('killmail').set(cacheKey, {
+ zkb: zkbData,
+ killmailData: killmailData,
+ systemData: systemData
+ });
+ }
+
+ return [zkbData, killmailData];
+ }
+
+ /**
+ * subscribe instance of Killboard module to WebSocket
+ * @param module
+ */
+ static unsubscribeFromWS(module){
+ SystemKillboardModule.wsSubscribtions = SystemKillboardModule.wsSubscribtions.filter(subscriber => subscriber !== module);
+ }
+
+ /**
+ * unsubscribe instance of Killboard module to WebSocket
+ * @param module
+ */
+ static subscribeToWS(module){
+ if(
+ !SystemKillboardModule.wsSubscribtions.includes(module) &&
+ module instanceof SystemKillboardModule
+ ){
+ SystemKillboardModule.wsSubscribtions.push(module);
+ }
+ }
+
+ /**
+ * init/connect to WebSocket if not already done
+ */
+ static initWebSocket(){
+ if(!SystemKillboardModule.ws){
+ SystemKillboardModule.ws = new WebSocket('wss://zkillboard.com:2096');
+ SystemKillboardModule.wsStatus = 1;
+ }
+
+ let sendMessage = req => {
+ SystemKillboardModule.ws.send(JSON.stringify(req));
+ };
+
+ SystemKillboardModule.ws.onopen = e => {
+ SystemKillboardModule.wsStatus = 2;
+ SystemKillboardModule.wsSubscribtions.forEach(subscriber => subscriber.updateWsStatus());
+
+ sendMessage({action:'sub', channel:'killstream'});
+ };
+
+ SystemKillboardModule.ws.onmessage = e => {
+ let response = JSON.parse(e.data);
+
+ let [zkbData, killmailData] = this.cacheWsResponse(response);
+ SystemKillboardModule.wsSubscribtions.forEach(subscriber => subscriber.onWsMessage(zkbData, killmailData));
+ };
+
+ SystemKillboardModule.ws.onerror = e => {
+ SystemKillboardModule.wsStatus = 3;
+ SystemKillboardModule.ws = null;
+ SystemKillboardModule.wsSubscribtions.forEach(subscriber => subscriber.updateWsStatus());
+ };
+
+ SystemKillboardModule.ws.onclose = e => {
+ SystemKillboardModule.wsStatus = 4;
+ SystemKillboardModule.ws = null;
+ SystemKillboardModule.wsSubscribtions.forEach(subscriber => subscriber.updateWsStatus());
+ };
+ }
+
+ /**
+ * get cache key
+ * @param type
+ * @param objId
+ * @returns {string}
+ */
+ static getCacheKey(type, objId){
+ if(
+ typeof type === 'string' && type.length &&
+ parseInt(objId)
+ ){
+ return `${type}_${objId}`;
+ }
+ throw new TypeError('Invalid cache key types');
+ }
};
- /**
- * get module toolbar element
- * @param systemData
- * @returns {*|jQuery|HTMLElement|void}
- */
- let getHeadlineToolbar = (systemData) => {
- let headlineToolbar = $('', {
- class: 'pull-right'
- }).append(
- $('', {
- class: ['fas', 'fa-fw', 'fa-external-link-alt ', config.moduleHeadlineIconClass].join(' '),
- title: 'zkillboard.com'
- }).on('click', function(e){
- window.open(
- '//zkillboard.com/system/' + systemData.systemId,
- '_blank'
- );
- }).attr('data-toggle', 'tooltip')
- );
-
- headlineToolbar.find('[data-toggle="tooltip"]').tooltip({
- container: 'body'
- });
-
- return headlineToolbar;
+ SystemKillboardModule.isPlugin = false; // module is defined as 'plugin'
+ SystemKillboardModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ SystemKillboardModule.sortArea = 'c'; // default sortable area
+ SystemKillboardModule.position = 1; // default sort/order position within sortable area
+ SystemKillboardModule.label = 'Killboard'; // static module label (e.g. description)
+ SystemKillboardModule.wsStatus = undefined;
+ SystemKillboardModule.serverTime = BaseModule.Util.getServerTime(); // static Date() with current EVE server time
+ SystemKillboardModule.wsSubscribtions = []; // static container for all KB module instances (from multiple maps) for WS responses
+ SystemKillboardModule.cacheConfig = {
+ zkb: { // cache for "zKillboard" responses -> short term cache
+ ttl: 60 * 3,
+ maxSize: 50
+ },
+ killmail: { // cache for "Killmail" data -> long term cache
+ ttl: 60 * 30,
+ maxSize: 500
+ }
};
- /**
- * get info control element
- * @returns {void|jQuery|*}
- */
- let getControlElement = () => {
- let controlElement = $('', {
- class: [Util.config.dynamicAreaClass, config.controlAreaClass, config.moduleHeadlineIconClass].join(' '),
- html: ' load more'
- });
- return controlElement;
+ SystemKillboardModule.defaultConfig = {
+ className: 'pf-system-killboard-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Killboard',
+
+ // system killboard list
+ systemKillboardListClass: 'pf-system-killboard-list', // class for a list with kill entries
+ systemKillboardListHeadClass: 'pf-system-killboard-list-head', // class for a list entry headline
+ systemKillboardListImgL: 'pf-system-killboard-img-l', // class for all large centered img (ship images)
+ systemKillboardListImgM: 'pf-system-killboard-img-m', // class for all medium centered img (character logos)
+ systemKillboardListImgS: 'pf-system-killboard-img-s', // class for all small top/bottom img (alliance/corp logos)
+
+ wsStatusWrapperClass: 'pf-system-killboard-wsStatusWrapper', // class for WebSocket "status" wrapper
+ wsStatusClass: 'pf-system-killboard-wsStatus', // class for WebSocket "status" headline
+ labelRecentKillsClass: 'pf-system-killboard-label-recent', // class for "recent kills" label
+
+ minCountKills: 5,
+ chunkCountKills: 5,
+ maxCountKillHistoric: 43,
+
+ maxCountKillsWS: 150
};
- /**
- * @param moduleElement
- * @param systemData
- */
- let setModuleObserver = (moduleElement, systemData) => {
- moduleElement.on('click', '.' + config.controlAreaClass, function(){
- let killboardElement = moduleElement.find('.' + config.systemKillboardListClass);
- showKills(killboardElement, systemData.systemId, config.chunkCountKills);
- });
- };
-
- /**
- * before module "show" callback
- * @param moduleElement
- * @param systemData
- */
- let beforeShow = (moduleElement, systemData) => {
- // update graph
- moduleElement.updateSystemInfoGraphs(systemData);
- };
-
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param systemData
- * @returns {jQuery}
- */
- let getModule = (parentElement, mapId, systemData) => {
- let moduleElement = $(' ').append(
- $(' ', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- text: 'Killboard'
- }),
- getHeadlineToolbar(systemData)
- )
- );
-
- setModuleObserver(moduleElement, systemData);
-
- return moduleElement;
- };
-
- return {
- config: config,
- getModule: getModule,
- beforeShow: beforeShow
- };
+ return SystemKillboardModule;
});
\ No newline at end of file
diff --git a/js/app/ui/module/system_route.js b/js/app/ui/module/system_route.js
index 0e23b9bb..90604c8a 100644
--- a/js/app/ui/module/system_route.js
+++ b/js/app/ui/module/system_route.js
@@ -7,483 +7,980 @@ define([
'app/init',
'app/util',
'bootbox',
- 'app/map/util'
-], ($, Init, Util, bootbox, MapUtil) => {
+ 'app/map/util',
+ 'module/base'
+], ($, Init, Util, bootbox, MapUtil, BaseModule) => {
'use strict';
- let config = {
- // module info
- modulePosition: 1,
- moduleName: 'systemRoute',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
-
- // system route module
- moduleTypeClass: 'pf-system-route-module', // class for this module
-
- // headline toolbar
- moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
- moduleHeadlineIconSearchClass: 'pf-module-icon-button-search', // class for "search" icon
- moduleHeadlineIconSettingsClass: 'pf-module-icon-button-settings', // class for "settings" icon
- moduleHeadlineIconRefreshClass: 'pf-module-icon-button-refresh', // class for "refresh" icon
-
- systemSecurityClassPrefix: 'pf-system-security-', // prefix class for system security level (color)
-
- // dialog
- routeSettingsDialogId: 'pf-route-settings-dialog', // id for route "settings" dialog
- routeDialogId: 'pf-route-dialog', // id for route "search" dialog
- systemDialogSelectClass: 'pf-system-dialog-select', // class for system select Element
- systemInfoRoutesTableClass: 'pf-system-route-table', // class for route tables
-
- routeDialogMapSelectId: 'pf-route-dialog-map-select', // id for "map" select
- routeDialogSizeSelectId: 'pf-route-dialog-size-select', // id for "wh size" select
-
- dataTableActionCellClass: 'pf-table-action-cell', // class for "action" cells
- dataTableRouteCellClass: 'pf-table-route-cell', // class for "route" cells
- dataTableJumpCellClass: 'pf-table-jump-cell', // class for "route jump" cells
-
- rallyClass: 'pf-rally', // class for "rally point" style
-
- routeCacheTTL: 5 // route cache timer (client) in seconds
- };
-
- // cache for system routes
- let cache = {
- systemRoutes: {}, // jump information between solar systems
- mapConnections: {} // connection data read from UI
- };
-
- /**
- * set cache data
- * @param cacheType
- * @param cacheKey
- * @param data
- */
- let setCacheData = (cacheType, cacheKey, data) => {
- cache[cacheType][cacheKey] = {
- data: data,
- updated: Util.getServerTime().getTime() / 1000
- };
- };
-
- /**
- * get cache data
- * @param cacheType
- * @param cacheKey
- * @returns {*}
- */
- let getCacheData = (cacheType, cacheKey) => {
- let cachedData = null;
- let currentTimestamp = Util.getServerTime().getTime();
-
- if(
- cache[cacheType].hasOwnProperty(cacheKey) &&
- Math.round(
- ( currentTimestamp - (new Date( cache[cacheType][cacheKey].updated * 1000).getTime())) / 1000
- ) <= config.routeCacheTTL
- ){
- cachedData = cache[cacheType][cacheKey].data;
+ let SystemRouteModule = class SystemRouteModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
}
- return cachedData;
- };
-
- /**
- * @param mapIds
- * @param sourceName
- * @param targetName
- * @returns {string}
- */
- let getRouteDataCacheKey = (mapIds, sourceName, targetName) => {
- return [mapIds.join('_'), sourceName.toLowerCase(), targetName.toLowerCase()].join('###');
- };
-
- /**
- * get a unique cache key name for "source"/"target"-name
- * @param sourceName
- * @param targetName
- * @returns {*}
- */
- let getConnectionDataCacheKey = (sourceName, targetName) => {
- let key = false;
- if(sourceName && targetName){
- // names can be "undefined" in case system is currently on drag/drop
- key = [sourceName.toLowerCase(), targetName.toLowerCase()].sort().join('###');
- }
- return key;
- };
-
- /**
- * callback function, adds new row to a dataTable with jump information for a route
- * @param context
- * @param routesData
- */
- let callbackAddRouteRows = (context, routesData) => {
- if(routesData.length > 0){
- for(let routeData of routesData){
- // format routeData
- let rowData = formatRouteData(routeData);
- if(rowData.route){
- // update route cache
- let cacheKey = getRouteDataCacheKey(rowData.mapIds, routeData.systemFromData.name, routeData.systemToData.name);
- setCacheData('systemRoutes', cacheKey, rowData);
-
- addRow(context, rowData);
+ /**
+ * update module
+ * @param payload
+ * @returns {Promise}
+ */
+ update(payload){
+ return super.update(payload).then(payload => new Promise(resolve => {
+ switch(payload.task){
+ case 'showFindRouteDialog':
+ this.showFindRouteDialog({
+ mapId: this._systemData.mapId,
+ systemFromData: this._systemFromData,
+ systemToData: payload.systemToData
+ });
+ break;
+ case 'findRoute':
+ this.drawRouteTable(this._systemData.mapId, this._systemFromData, [payload.systemToData]);
+ break;
}
- }
- // redraw dataTable
- context.dataTable.draw();
- }
- };
-
- /**
- * add a new dataTable row to the routes table
- * @param context
- * @param rowData
- * @returns {*}
- */
- let addRow = (context, rowData) => {
- let dataTable = context.dataTable;
- let rowElement = null;
- let row = null;
- let animationStatus = 'changed';
-
- // search for an existing row (e.g. on mass "table refresh" [all routes])
- // get rowIndex where column 1 (equals to "systemToData.name") matches rowData.systemToData.name
- let indexes = dataTable.rows().eq(0).filter((rowIdx) => {
- return (dataTable.cell(rowIdx, 1).data().name === rowData.systemToData.name);
- });
-
- if(indexes.length > 0){
- // update row with FIRST index
- // -> systemFrom should be unique!
- row = dataTable.row( parseInt(indexes[0]) );
- // update row data
- row.data(rowData);
- }else{
- // no existing route found -> add new row
- row = dataTable.row.add( rowData );
-
- animationStatus = 'added';
+ resolve({
+ action: 'update',
+ data: {
+ module: this
+ }
+ });
+ }));
}
- if(row.length > 0){
- rowElement = row.nodes().to$();
- rowElement.data('animationStatus', animationStatus);
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
- rowElement.initTooltips({
- container: 'body'
+ // save systemFromData to module (data never changes during module lifetime)
+ // -> we need this later in updateModule()
+ this._systemFromData = {
+ systemId: systemData.systemId,
+ name: systemData.name,
+ };
+
+ this._bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
+ });
+ this.moduleElement.append(this._bodyEl);
+
+ this.initRouteTable();
+
+ this.setModuleObserver();
+
+ return this.moduleElement;
+ }
+
+ /**
+ * set module observer
+ */
+ setModuleObserver(){
+ // init tooltips
+ $(this.moduleElement).initTooltips({
+ placement: 'top'
});
}
- return rowElement;
- };
+ /**
+ * init new route dataTable
+ */
+ initRouteTable(){
+ let module = this;
- /**
- * requests route data from eveCentral API and execute callback
- * @param requestData
- * @param context
- * @param callback
- */
- let getRouteData = (requestData, context, callback) => {
- context.moduleElement.showLoadingAnimation();
+ let tableEl = document.createElement('table');
+ tableEl.classList.add('compact', 'stripe', 'order-column', 'row-border', module._config.systemInfoRoutesTableClass);
+ this._bodyEl.append(tableEl);
- $.ajax({
- url: Init.path.searchRoute,
- type: 'POST',
- dataType: 'json',
- data: requestData,
- context: context
- }).done(function(routesData){
- this.moduleElement.hideLoadingAnimation();
+ this._tableApi = $(tableEl).DataTable( {
+ paging: false,
+ ordering: true,
+ order: [[ 2, 'asc' ], [ 0, 'asc' ]],
+ info: false,
+ searching: false,
+ hover: false,
+ autoWidth: false,
+ rowId: 'systemTo',
+ language: {
+ emptyTable: 'No routes added'
+ },
+ columnDefs: [
+ {
+ targets: 0,
+ orderable: true,
+ title: '',
+ width: 2,
+ class: ['text-center'].join(' '),
+ data: 'status',
+ render: {
+ _: 'formatted',
+ sort: 'value'
+ }
+ },{
+ targets: 1,
+ orderable: true,
+ title: 'system ',
+ class: Util.config.popoverTriggerClass,
+ data: 'systemToData',
+ render: {
+ _: 'name',
+ sort: 'name'
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ // init context menu
+ module.initSystemPopover($(cell),{
+ systemToData: rowData.systemToData
+ });
- // execute callback
- callback(this, routesData.routesData);
- });
- };
+ $(cell).toggleClass(module._config.rallyClass, cellData.hasOwnProperty('rally'));
+ }
+ },{
+ targets: 2,
+ orderable: true,
+ title: ' ',
+ width: 16,
+ class: 'text-right',
+ data: 'jumps',
+ render: {
+ _: 'formatted',
+ sort: 'value'
+ }
+ },{
+ targets: 3,
+ orderable: true,
+ title: 'Ø ',
+ width: 14,
+ class: 'text-right',
+ data: 'avgTrueSec',
+ render: {
+ _: 'formatted',
+ sort: 'value'
+ }
+ },{
+ targets: 4,
+ orderable: false,
+ title: 'route',
+ class: [this._config.dataTableRouteCellClass].join(' '),
+ data: 'route',
+ render: {
+ _: 'value'
+ }
+ },{
+ targets: 5,
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', this._config.dataTableActionCellClass].join(' '),
+ data: 'connections',
+ render: {
+ _: 'button'
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
- /**
- * update complete routes table (refresh all)
- * @param moduleElement
- * @param dataTable
- */
- let updateRoutesTable = (moduleElement, dataTable) => {
- let context = {
- moduleElement: moduleElement,
- dataTable: dataTable
- };
- let routeData = [];
+ $(cell).on('click', function(e){
+ let routeCellElement = tableApi.cell( rowIndex, 4 ).nodes().to$();
- dataTable.rows().every(function(){
- routeData.push(getRouteRequestDataFromRowData(this.data()));
- });
+ if(routeCellElement.hasClass(module._config.dataTableJumpCellClass)){
+ routeCellElement.toggleClass(module._config.dataTableJumpCellClass, false);
+ $(this).find('i').toggleClass('txt-color-orange', false);
+ }else{
+ routeCellElement.toggleClass(module._config.dataTableJumpCellClass, true);
+ $(this).find('i').toggleClass('txt-color-orange', true);
+ }
+ });
+ }
+ },{
+ targets: 6,
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', this._config.dataTableActionCellClass].join(' '),
+ data: 'flag',
+ render: {
+ _: 'button'
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
- getRouteData({routeData: routeData}, context, callbackAddRouteRows);
- };
+ $(cell).on('click', function(e){
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowData = tableApi.row( $(cell).parents('tr')).data();
+ let routeData = module.getRouteRequestDataFromRowData(rowData);
- /**
- * format rowData for route search/update request
- * @param {Object} rowData
- * @returns {Object}
- */
- let getRouteRequestDataFromRowData = rowData => {
- return {
- mapIds: (rowData.hasOwnProperty('mapIds')) ? rowData.mapIds : [],
- systemFromData: (rowData.hasOwnProperty('systemFromData')) ? rowData.systemFromData : {},
- systemToData: (rowData.hasOwnProperty('systemToData')) ? rowData.systemToData : {},
- skipSearch: (rowData.hasOwnProperty('skipSearch')) ? rowData.skipSearch | 0 : 0,
- stargates: (rowData.hasOwnProperty('stargates')) ? rowData.stargates | 0 : 1,
- jumpbridges: (rowData.hasOwnProperty('jumpbridges')) ? rowData.jumpbridges | 0 : 1,
- wormholes: (rowData.hasOwnProperty('wormholes')) ? rowData.wormholes | 0 : 1,
- wormholesReduced: (rowData.hasOwnProperty('wormholesReduced')) ? rowData.wormholesReduced | 0 : 1,
- wormholesCritical: (rowData.hasOwnProperty('wormholesCritical')) ? rowData.wormholesCritical | 0 : 1,
- wormholesEOL: (rowData.hasOwnProperty('wormholesEOL')) ? rowData.wormholesEOL | 0 : 1,
- wormholesSizeMin: (rowData.hasOwnProperty('wormholesSizeMin')) ? rowData.wormholesSizeMin : '',
- excludeTypes: (rowData.hasOwnProperty('excludeTypes')) ? rowData.excludeTypes : [],
- endpointsBubble: (rowData.hasOwnProperty('endpointsBubble')) ? rowData.endpointsBubble | 0 : 1,
- connections: (rowData.hasOwnProperty('connections')) ? rowData.connections.value | 0 : 0,
- flag: (rowData.hasOwnProperty('flag')) ? rowData.flag.value : 'shortest'
- };
- };
-
- /**
- * show route dialog. User can search for systems and jump-info for each system is added to a data table
- * @param dialogData
- */
- let showFindRouteDialog = dialogData => {
- let mapSelectOptions = [];
- let currentMapData = Util.getCurrentMapData();
- if(currentMapData !== false){
- for(let i = 0; i < currentMapData.length; i++){
- mapSelectOptions.push({
- id: currentMapData[i].config.id,
- name: currentMapData[i].config.name,
- selected: (dialogData.mapId === currentMapData[i].config.id)
- });
- }
- }
-
- let sizeOptions = MapUtil.allConnectionJumpMassTypes().map(type => {
- return {
- id: type,
- name: type,
- selected: false
- };
- });
-
- let data = {
- id: config.routeDialogId,
- select2Class: Util.config.select2Class,
- selectClass: config.systemDialogSelectClass,
- routeDialogMapSelectId: config.routeDialogMapSelectId,
- routeDialogSizeSelectId: config.routeDialogSizeSelectId,
- systemFromData: dialogData.systemFromData,
- systemToData: dialogData.systemToData,
- mapSelectOptions: mapSelectOptions,
- sizeOptions: sizeOptions
- };
-
- requirejs(['text!templates/dialog/route.html', 'mustache'], (template, Mustache) => {
-
- let content = Mustache.render(template, data);
-
- let findRouteDialog = bootbox.dialog({
- title: 'Route finder',
- message: content,
- show: false,
- buttons: {
- close: {
- label: 'cancel',
- className: 'btn-default'
- },
- success: {
- label: ' search route',
- className: 'btn-primary',
- callback: function(){
- // add new route to route table
-
- // get form Values
- let form = $('#' + config.routeDialogId).find('form');
-
- let routeDialogData = $(form).getFormValues();
-
- // validate form
- form.validator('validate');
-
- // check whether the form is valid
- let formValid = form.isValidForm();
-
- if(formValid === false){
- // don't close dialog
- return false;
- }
-
- // get all system data from select2
- // -> we could also get value from "routeDialogData" var, but we need systemName also
- let systemSelectData = form.find('.' + config.systemDialogSelectClass).select2('data');
-
- if(
- systemSelectData &&
- systemSelectData.length === 1
- ){
- let context = {
- moduleElement: dialogData.moduleElement,
- dataTable: dialogData.dataTable
- };
+ // overwrite some params
+ routeData.skipSearch = 0;
+ routeData.flag = routeData.flag === 'shortest' ? 'secure' : 'shortest'; // toggle
let requestData = {
- routeData: [{
- mapIds: routeDialogData.mapIds,
- systemFromData: dialogData.systemFromData,
- systemToData: {
- systemId: parseInt(systemSelectData[0].id),
- name: systemSelectData[0].text
- },
- stargates: routeDialogData.hasOwnProperty('stargates') ? parseInt(routeDialogData.stargates) : 0,
- jumpbridges: routeDialogData.hasOwnProperty('jumpbridges') ? parseInt(routeDialogData.jumpbridges) : 0,
- wormholes: routeDialogData.hasOwnProperty('wormholes') ? parseInt(routeDialogData.wormholes) : 0,
- wormholesReduced: routeDialogData.hasOwnProperty('wormholesReduced') ? parseInt(routeDialogData.wormholesReduced) : 0,
- wormholesCritical: routeDialogData.hasOwnProperty('wormholesCritical') ? parseInt(routeDialogData.wormholesCritical) : 0,
- wormholesEOL: routeDialogData.hasOwnProperty('wormholesEOL') ? parseInt(routeDialogData.wormholesEOL) : 0,
- wormholesSizeMin: routeDialogData.wormholesSizeMin || '',
- excludeTypes: getLowerSizeConnectionTypes(routeDialogData.wormholesSizeMin),
- endpointsBubble: routeDialogData.hasOwnProperty('endpointsBubble') ? parseInt(routeDialogData.endpointsBubble) : 0
- }]
+ routeData: [routeData]
};
- getRouteData(requestData, context, callbackAddRouteRows);
- }
+ module.getRouteData(requestData, 'callbackAddRouteRows');
+ });
+ }
+ },{
+ targets: 7,
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', this._config.dataTableActionCellClass].join(' '),
+ data: 'reload',
+ render: {
+ _: 'button'
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ $(cell).on('click', function(e){
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ rowData = tableApi.row( $(cell).parents('tr')).data();
+ let routeData = module.getRouteRequestDataFromRowData(rowData);
+
+ // overwrite some params
+ routeData.skipSearch = 0;
+
+ let requestData = {
+ routeData: [routeData]
+ };
+
+ module.getRouteData(requestData, 'callbackAddRouteRows');
+ });
+ }
+ },{
+ targets: 8,
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', this._config.dataTableActionCellClass].join(' '),
+ data: 'clear',
+ render: {
+ _: 'button'
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tempTableElement = this;
+
+ let confirmationSettings = {
+ title: '---',
+ template: Util.getConfirmationTemplate(null, {
+ size: 'small',
+ noTitle: true
+ }),
+ onConfirm : function(e, target){
+ let deleteRowElement = $(cell).parents('tr');
+ tempTableElement.api().rows(deleteRowElement).remove().draw();
+ }
+ };
+
+ // init confirmation dialog
+ $(cell).confirmation(confirmationSettings);
}
}
+ ],
+ drawCallback: function(settings){
+ let animationRows = this.api().rows().nodes().to$().filter(function(){
+ return (
+ $(this).data('animationStatus') ||
+ $(this).data('animationTimer')
+ );
+ });
+
+ for(let i = 0; i < animationRows.length; i++){
+ let animationRow = $(animationRows[i]);
+ animationRow.pulseBackgroundColor(animationRow.data('animationStatus'));
+ animationRow.removeData('animationStatus');
+ }
+ },
+ initComplete: function(settings, json){
+ // fill routesTable with data ---------------------------------------------------------------------
+ Util.getLocalStore('map').getItem(module._systemData.mapId).then(dataStore => {
+ // selected systems (if already stored)
+ let systemsTo = [{
+ systemId: 30000142,
+ name: 'Jita'
+ }];
+
+ if(
+ dataStore &&
+ dataStore.routes
+ ){
+ systemsTo = dataStore.routes;
+ }
+
+ // add "Rally Point" systems to table
+ let systemsToData = module.getRallySystemsData(module._systemData.mapId);
+ systemsToData.push(...systemsTo);
+
+ module.drawRouteTable(module._systemData.mapId, module._systemFromData, systemsToData);
+ });
+
+ // click on "fake connection" ---------------------------------------------------------------------
+ $(this).on('click', '.pf-fake-connection', function(){
+ let fakeConnectionElement = $(this);
+ let mapId = fakeConnectionElement.attr('data-mapId');
+ let connectionId = fakeConnectionElement.attr('data-connectionId');
+ let connection = $().getConnectionById(mapId, connectionId);
+
+ if(connection){
+ let map = connection._jsPlumb.instance;
+ MapUtil.showConnectionInfo(map, [connection]);
+ }
+ });
+ },
+ data: [] // will be added dynamic
+ });
+
+
+ let buttons = new $.fn.dataTable.Buttons(this._tableApi, {
+ dom: {
+ container: {
+ tag: 'h5',
+ className: 'pull-right'
+ },
+ button: {
+ tag: 'i',
+ className: ['fas', 'fa-fw', module._config.moduleHeadlineIconClass].join(' '),
+ },
+ buttonLiner: {
+ tag: null
+ }
+ },
+ name: 'tableTools',
+ buttons: [
+ {
+ name: 'settings',
+ className: ['fa-sliders-h'].join(' '),
+ titleAttr: 'settings',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ module.showSettingsDialog({
+ mapId: module._systemData.mapId,
+ systemFromData: module._systemFromData
+ });
+ }
+ },
+ {
+ name: 'search',
+ className: 'fa-search',
+ titleAttr: 'find route',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ let maxRouteSearchLimit = Init.routeSearch.limit;
+
+ if(tableApi.rows().count() >= maxRouteSearchLimit){
+ // max routes limit reached -> show warning
+ module.showNotify({title: 'Route limit reached', text: 'Search is limited by ' + maxRouteSearchLimit, type: 'warning'});
+ }else{
+ module.showFindRouteDialog({
+ mapId: module._systemData.mapId,
+ systemFromData: module._systemFromData
+ });
+ }
+ }
+ },
+ {
+ name: 'refresh',
+ className: 'fa-sync',
+ titleAttr: 'refresh',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ module.updateRoutesTable();
+ }
+ }
+ ]
+ });
+
+ this._tableApi.buttons().container().appendTo(module.moduleElement.querySelector('.' + module._config.headClassName));
+ }
+
+ /**
+ * draw route table
+ * @param mapId
+ * @param systemFromData
+ * @param systemsToData
+ */
+ drawRouteTable(mapId, systemFromData, systemsToData){
+ let requestRouteData = [];
+
+ // Skip some routes from search
+ // -> this should help to throttle requests (heavy CPU load for route calculation)
+ let defaultRoutesCount = Init.routeSearch.defaultCount;
+ let rowElements = [];
+
+ for(let systemToData of systemsToData){
+ if(systemFromData.name !== systemToData.name){
+ // check for cached rowData
+ let cacheKey = this.getRouteDataCacheKey([mapId], systemFromData.name, systemToData.name);
+ let rowData = SystemRouteModule.getCache('routes').get(cacheKey);
+ if(rowData){
+ // route data is cached (client side)
+ rowElements.push(this.addRow(rowData));
+ }else{
+ // get route data -> ajax
+ let searchData = {
+ mapIds: [mapId],
+ systemFromData: systemFromData,
+ systemToData: systemToData,
+ skipSearch: requestRouteData.length >= defaultRoutesCount
+ };
+
+ requestRouteData.push(this.getRouteRequestDataFromRowData(searchData));
+ }
}
- });
+ }
- findRouteDialog.on('show.bs.modal', function(e){
- findRouteDialog.initTooltips();
+ // rows added from cache -> redraw() table
+ if(rowElements.length){
+ this._tableApi.draw();
+ }
- // init some dialog/form observer
- setDialogObserver( $(this) );
+ // check if routes data is not cached and is requested
+ if(requestRouteData.length > 0){
+ //let contextData = {
+ // tableApi: tableApi
+ //};
- // init map select ------------------------------------------------------------------------------------
- let mapSelect = findRouteDialog.find('#' + config.routeDialogMapSelectId);
- mapSelect.initMapSelect();
+ let requestData = {
+ routeData: requestRouteData
+ };
- // init connection jump size select -------------------------------------------------------------------
- findRouteDialog.find('#' + config.routeDialogSizeSelectId).initConnectionSizeSelect();
- });
-
-
- findRouteDialog.on('shown.bs.modal', function(e){
-
- // init system select live search --------------------------------------------------------------------
- // -> add some delay until modal transition has finished
- let systemTargetSelect = $(this).find('.' + config.systemDialogSelectClass);
- systemTargetSelect.delay(240).initSystemSelect({key: 'id'});
- });
-
- // show dialog
- findRouteDialog.modal('show');
- });
- };
-
- /**
- * draw route table
- * @param mapId
- * @param moduleElement
- * @param systemFromData
- * @param routesTable
- * @param systemsToData
- */
- let drawRouteTable = (mapId, moduleElement, systemFromData, routesTable, systemsToData) => {
- let requestRouteData = [];
-
- // Skip some routes from search
- // -> this should help to throttle requests (heavy CPU load for route calculation)
- let defaultRoutesCount = Init.routeSearch.defaultCount;
- let rowElements = [];
-
- for(let systemToData of systemsToData){
- if(systemFromData.name !== systemToData.name){
- // check for cached rowData
- let cacheKey = getRouteDataCacheKey([mapId], systemFromData.name, systemToData.name);
- let rowData = getCacheData('systemRoutes', cacheKey);
- if(rowData){
- // route data is cached (client side)
- let context = {
- dataTable: routesTable
- };
-
- rowElements.push( addRow(context, rowData) );
- }else{
- // get route data -> ajax
- let searchData = {
- mapIds: [mapId],
- systemFromData: systemFromData,
- systemToData: systemToData,
- skipSearch: requestRouteData.length >= defaultRoutesCount
- };
-
- requestRouteData.push(getRouteRequestDataFromRowData(searchData));
- }
+ this.getRouteData(requestData, 'callbackAddRouteRows');
}
}
- // rows added from cache -> redraw() table
- if(rowElements.length){
- routesTable.draw();
+ /**
+ * get cache key
+ * @param mapIds
+ * @param sourceName
+ * @param targetName
+ * @returns {string}
+ */
+ getRouteDataCacheKey(mapIds, sourceName, targetName){
+ return `route_` + `${mapIds.join('_')}${sourceName}${targetName}`.hashCode();
}
- // check if routes data is not cached and is requested
- if(requestRouteData.length > 0){
- let contextData = {
- moduleElement: moduleElement,
- dataTable: routesTable
+ /**
+ * format rowData for route search/update request
+ * @param {Object} rowData
+ * @returns {Object}
+ */
+ getRouteRequestDataFromRowData(rowData){
+ return {
+ mapIds: (rowData.hasOwnProperty('mapIds')) ? rowData.mapIds : [],
+ systemFromData: (rowData.hasOwnProperty('systemFromData')) ? rowData.systemFromData : {},
+ systemToData: (rowData.hasOwnProperty('systemToData')) ? rowData.systemToData : {},
+ skipSearch: (rowData.hasOwnProperty('skipSearch')) ? rowData.skipSearch | 0 : 0,
+ stargates: (rowData.hasOwnProperty('stargates')) ? rowData.stargates | 0 : 1,
+ jumpbridges: (rowData.hasOwnProperty('jumpbridges')) ? rowData.jumpbridges | 0 : 1,
+ wormholes: (rowData.hasOwnProperty('wormholes')) ? rowData.wormholes | 0 : 1,
+ wormholesReduced: (rowData.hasOwnProperty('wormholesReduced')) ? rowData.wormholesReduced | 0 : 1,
+ wormholesCritical: (rowData.hasOwnProperty('wormholesCritical')) ? rowData.wormholesCritical | 0 : 1,
+ wormholesEOL: (rowData.hasOwnProperty('wormholesEOL')) ? rowData.wormholesEOL | 0 : 1,
+ wormholesThera: (rowData.hasOwnProperty('wormholesThera')) ? rowData.wormholesThera | 0 : 1,
+ wormholesSizeMin: (rowData.hasOwnProperty('wormholesSizeMin')) ? rowData.wormholesSizeMin : '',
+ excludeTypes: (rowData.hasOwnProperty('excludeTypes')) ? rowData.excludeTypes : [],
+ endpointsBubble: (rowData.hasOwnProperty('endpointsBubble')) ? rowData.endpointsBubble | 0 : 1,
+ connections: (rowData.hasOwnProperty('connections')) ? rowData.connections.value | 0 : 0,
+ flag: (rowData.hasOwnProperty('flag')) ? rowData.flag.value : 'shortest'
};
-
- let requestData = {
- routeData: requestRouteData
- };
-
- getRouteData(requestData, contextData, callbackAddRouteRows);
}
- };
- /**
- * show route settings dialog
- * @param dialogData
- * @param moduleElement
- * @param systemFromData
- * @param routesTable
- */
- let showSettingsDialog = (dialogData, moduleElement, systemFromData, routesTable) => {
+ /**
+ * requests route data from eveCentral API and execute callback
+ * @param requestData
+ * @param callback
+ */
+ getRouteData(requestData, callback){
+ $(this.moduleElement).showLoadingAnimation();
+
+ this.request('POST', 'Route', [], requestData, this, context => {
+ $(this.moduleElement).hideLoadingAnimation();
+ })
+ .then(payload => payload.context[callback](payload.data.routesData))
+ .catch(payload => {
+ let reason = payload.data.status + ' ' + payload.data.error;
+ this.showNotify({
+ title: payload.data.jqXHR.status + ': System route data',
+ text: reason,
+ type: 'warning'
+ });
+ });
+ }
+
+ /**
+ * update complete routes table (refresh all)
+ */
+ updateRoutesTable(){
+ let module = this;
+ let routeData = [];
+
+ this._tableApi.rows().every(function(){
+ routeData.push(module.getRouteRequestDataFromRowData(this.data()));
+ });
+
+ this.getRouteData({routeData: routeData}, 'callbackAddRouteRows');
+ }
+
+ /**
+ * callback function, adds new row to a dataTable with jump information for a route
+ * @param routesData
+ */
+ callbackAddRouteRows(routesData){
+ if(routesData.length > 0){
+ for(let routeData of routesData){
+ // format routeData
+ let rowData = this.formatRouteData(routeData);
+ if(rowData.route){
+ // update route cache
+ let cacheKey = this.getRouteDataCacheKey(rowData.mapIds, routeData.systemFromData.name, routeData.systemToData.name);
+ SystemRouteModule.getCache('routes').set(cacheKey, rowData);
+
+ this.addRow(rowData);
+ }
+ }
+
+ // redraw dataTable
+ this._tableApi.draw();
+ }
+ }
+
+ /**
+ * add a new dataTable row to the routes table
+ * @param rowData
+ * @returns {*}
+ */
+ addRow(rowData){
+ let rowElement = null;
+ let row;
+ let animationStatus = 'changed';
+
+ // search for an existing row (e.g. on mass "table refresh" [all routes])
+ // get rowIndex where column 1 (equals to "systemToData.name") matches rowData.systemToData.name
+ let indexes = this._tableApi.rows().eq(0).filter((rowIdx) => {
+ return (this._tableApi.cell(rowIdx, 1).data().name === rowData.systemToData.name);
+ });
+
+ if(indexes.length > 0){
+ // update row with FIRST index
+ // -> systemFrom should be unique!
+ row = this._tableApi.row(parseInt(indexes[0]));
+ // update row data
+ row.data(rowData);
+ }else{
+ // no existing route found -> add new row
+ row = this._tableApi.row.add(rowData);
+ animationStatus = 'added';
+ }
+
+ if(row.length > 0){
+ rowElement = row.nodes().to$();
+ rowElement.data('animationStatus', animationStatus);
+
+ rowElement.initTooltips();
+ }
+ return rowElement;
+ }
+
+ /**
+ * format route data from API request into dataTable row format
+ * @param routeData
+ * @returns {{}}
+ */
+ formatRouteData(routeData){
+
+ /**
+ * get status icon for route
+ * @param status
+ * @returns {string}
+ */
+ let getStatusIcon = status => {
+ let color = 'txt-color-danger';
+ let title = 'route not found';
+ switch(status){
+ case 1:
+ color = 'txt-color-success';
+ title = 'route exists';
+ break;
+ case 2:
+ color = 'txt-color-warning';
+ title = 'not search performed';
+ break;
+ }
+ return '';
+ };
+
+ /**
+ * check systemName if it "might" be a wormhole
+ * @param systemName
+ * @returns {boolean}
+ */
+ let isWormholeSystemName = systemName => /^J\d+$/.test(systemName) || systemName === 'Thera';
+
+ // route status:
+ // 0: not found
+ // 1: round (OK)
+ // 2: not searched
+ let routeStatus = routeData.skipSearch ? 2 : 0;
+
+ // button class for flag (e.g. "secure" routes)
+ let flagButtonClass = routeData.flag === 'secure' ? 'txt-color-success' : '';
+
+ let connectionButton = '';
+ let flagButton = '';
+ let reloadButton = '';
+ let searchButton = '';
+ let deleteButton = '';
+
+ // default row data (e.g. no route found)
+ let tableRowData = {
+ systemFromData: routeData.systemFromData,
+ systemToData: routeData.systemToData,
+ jumps: {
+ value: 9999, // for sorting
+ formatted: ''
+ },
+ avgTrueSec: {
+ value: '',
+ formatted: ''
+ },
+ route: {
+ value: routeStatus === 2 ? 'search now' : 'not found',
+ data: routeData.route
+ },
+ stargates: routeData.stargates,
+ jumpbridges: routeData.jumpbridges,
+ wormholes: routeData.wormholes,
+ wormholesReduced: routeData.wormholesReduced,
+ wormholesCritical: routeData.wormholesCritical,
+ wormholesEOL: routeData.wormholesEOL,
+ wormholesThera: routeData.wormholesThera,
+ wormholesSizeMin: routeData.wormholesSizeMin,
+ excludeTypes: routeData.excludeTypes,
+ endpointsBubble: routeData.endpointsBubble,
+ connections: {
+ value: 0,
+ button: connectionButton
+ },
+ flag: {
+ value: routeData.flag,
+ button: flagButton
+ },
+ reload: {
+ button: routeData.skipSearch ? searchButton : reloadButton
+ },
+ clear: {
+ button: deleteButton
+ },
+ maps: routeData.maps,
+ mapIds: routeData.mapIds //map data (mapIds is "redundant")
+ };
- let promiseStore = MapUtil.getLocaleData('map', dialogData.mapId);
- promiseStore.then(dataStore => {
- // selected systems (if already stored)
- let systemSelectOptions = [];
if(
- dataStore &&
- dataStore.routes
+ routeData.routePossible === true &&
+ routeData.route.length > 0
){
- systemSelectOptions = dataStore.routes;
+ // route data available
+ routeStatus = 1;
+
+ // add route Data
+ let routeJumpElements = [];
+ let avgSecTemp = 0;
+
+ let connectionsData = BaseModule.getConnectionsDataFromMaps(routeData.mapIds);
+ let prevRouteNodeData = null;
+ // loop all systems on this route
+ for(let i = 0; i < routeData.route.length; i++){
+ let routeNodeData = routeData.route[i];
+ let systemName = routeNodeData.system;
+
+ // fake connection elements between systems -----------------------------------------------------------
+ if(prevRouteNodeData){
+ let connectionData = BaseModule.findConnectionsData(connectionsData, prevRouteNodeData.system, systemName);
+ if(!connectionData){
+ connectionData = BaseModule.getFakeConnectionData(prevRouteNodeData, routeNodeData, isWormholeSystemName(systemName) ? 'wh' : 'stargate');
+ }
+ let connectionElement = BaseModule.getFakeConnectionElement(connectionData);
+
+ routeJumpElements.push(connectionElement);
+ }
+
+ // system elements ------------------------------------------------------------------------------------
+ let systemSec = Number(routeNodeData.security).toFixed(1).toString();
+ let tempSystemSec = systemSec;
+
+ if(tempSystemSec <= 0){
+ tempSystemSec = '0-0';
+ }
+
+ let systemSecClass = this._config.systemSecurityClassPrefix + tempSystemSec.replace('.', '-');
+
+ // check for wormhole
+ let icon = 'fas fa-square-full';
+ if(isWormholeSystemName(systemName)){
+ icon = 'fas fa-dot-circle';
+ }
+
+ let system = '';
+ routeJumpElements.push( system );
+
+ // "source" system is not relevant for average security
+ if(i > 0){
+ avgSecTemp += Number(routeNodeData.security);
+ }
+
+ prevRouteNodeData = routeNodeData;
+ }
+
+ let avgSec = ( avgSecTemp / (routeData.route.length - 1)).toFixed(2);
+ let avgSecForClass = Number(avgSec).toFixed(1);
+
+ if(avgSecForClass <= 0){
+ avgSecForClass = '0.0';
+ }
+
+ let avgSecClass = this._config.systemSecurityClassPrefix + avgSecForClass.toString().replace('.', '-');
+
+ tableRowData.jumps = {
+ value: routeData.routeJumps,
+ formatted: routeData.routeJumps
+ };
+
+ tableRowData.avgTrueSec = {
+ value: avgSec,
+ formatted: '' + avgSec + ''
+ };
+
+ tableRowData.route.value = routeJumpElements.join(' ');
}
- // max count of "default" target systems
- let maxSelectionLength = Init.routeSearch.maxDefaultCount;
-
- let data = {
- id: config.routeSettingsDialogId,
- selectClass: config.systemDialogSelectClass,
- systemSelectOptions: systemSelectOptions,
- maxSelectionLength: maxSelectionLength
+ // route status data ------------------------------------------------------------------------------------------
+ tableRowData.status = {
+ value: routeStatus,
+ formatted: getStatusIcon(routeStatus)
};
- requirejs(['text!templates/dialog/route_settings.html', 'mustache'], (template, Mustache) => {
+ return tableRowData;
+ }
+
+ /**
+ *
+ * @param mapId
+ * @returns {[]}
+ */
+ getRallySystemsData(mapId){
+ let systemsRallyData = [];
+ let map = MapUtil.getMapInstance(mapId);
+ if(map){
+ let mapContainer = $(map.getContainer());
+ let systems = mapContainer.find('.pf-system-info-rally');
+
+ for(let system of systems){
+ system = $(system);
+ systemsRallyData.push({
+ systemId: system.data('systemId'),
+ name: system.data('name'),
+ rally: 1
+ });
+ }
+ }
+ return systemsRallyData;
+ }
+
+ /**
+ * init system popover (e.g. for setWaypoints)
+ * @param elements
+ * @param options
+ */
+ initSystemPopover(elements, options){
+ let eventNamespace = 'hideSystemPopup';
+ let systemToData = options.systemToData;
+
+ requirejs(['text!templates/tooltip/system_popover.html', 'mustache'], (template, Mustache) => {
+ let data = {
+ systemToData: systemToData
+ };
+
let content = Mustache.render(template, data);
- let settingsDialog = bootbox.dialog({
- title: 'Route settings',
+ elements.each(function(){
+ let element = $(this);
+ // destroy "popover" and remove "click" event for animation
+ element.popover('destroy').off();
+
+ // init popover and add specific class to it (for styling)
+ element.popover({
+ html: true,
+ title: systemToData.name,
+ trigger: 'manual',
+ placement: 'top',
+ container: 'body',
+ content: content
+ }).data('bs.popover').tip().addClass(Util.config.popoverClass);
+ });
+
+ // set popup "close" observer
+ elements.initPopoverClose(eventNamespace);
+
+ // set "open" trigger on "right click"
+ // -> this is not supported by the "trigger" param in .popover();
+ // -> therefore we need to set it up manually
+ elements.on('contextmenu', function(e){
+ e.preventDefault();
+ $(this).popover('show');
+ });
+
+ // set link observer "on shown" event
+ elements.on('shown.bs.popover', function(){
+ let popoverRoot = $(this);
+
+ popoverRoot.data('bs.popover').tip().find('a').on('click', function(){
+ // hint: "data" attributes should be in lower case!
+ let systemData = {
+ id: $(this).data('systemid'),
+ name: $(this).data('name')
+ };
+ Util.setDestination('set_destination', 'system', systemData);
+
+ // close popover
+ popoverRoot.popover('hide');
+ });
+ });
+ });
+ }
+
+ /**
+ * show route settings dialog
+ * @param dialogData
+ */
+ showSettingsDialog(dialogData){
+ Util.getLocalStore('map').getItem(dialogData.mapId).then(dataStore => {
+ // selected systems (if already stored)
+ let systemSelectOptions = [];
+ if(
+ dataStore &&
+ dataStore.routes
+ ){
+ systemSelectOptions = dataStore.routes;
+ }
+
+ // max count of "default" target systems
+ let maxSelectionLength = Init.routeSearch.maxDefaultCount;
+
+ let data = {
+ id: this._config.routeSettingsDialogId,
+ selectClass: this._config.systemDialogSelectClass,
+ systemSelectOptions: systemSelectOptions,
+ maxSelectionLength: maxSelectionLength
+ };
+
+ requirejs(['text!templates/dialog/route_settings.html', 'mustache'], (template, Mustache) => {
+ let content = Mustache.render(template, data);
+
+ let settingsDialog = bootbox.dialog({
+ title: 'Route settings',
+ message: content,
+ show: false,
+ buttons: {
+ close: {
+ label: 'cancel',
+ className: 'btn-default'
+ },
+ success: {
+ label: ' save',
+ className: 'btn-success',
+ callback: e => {
+ let form = $(e.delegateTarget).find('form');
+ // get all system data from select2
+ let systemSelectData = form.find('.' + this._config.systemDialogSelectClass).select2('data');
+ let systemsToData = [];
+
+ if(systemSelectData.length > 0){
+ systemsToData = SystemRouteModule.formSystemSelectData(systemSelectData);
+ Util.getLocalStore('map').setItem(`${dialogData.mapId}.routes`, systemsToData);
+ }else{
+ Util.getLocalStore('map').removeItem(`${dialogData.mapId}.routes`);
+ }
+
+ this.showNotify({title: 'Route settings stored', type: 'success'});
+
+ // (re) draw table
+ this.drawRouteTable(dialogData.mapId, dialogData.systemFromData, systemsToData);
+ }
+ }
+ }
+ });
+
+ settingsDialog.on('shown.bs.modal', e => {
+
+ // init default system select ---------------------------------------------------------------------
+ // -> add some delay until modal transition has finished
+ let systemTargetSelect = $(e.target).find('.' + this._config.systemDialogSelectClass);
+ systemTargetSelect.delay(240).initSystemSelect({key: 'id', maxSelectionLength: maxSelectionLength});
+ });
+
+ // show dialog
+ settingsDialog.modal('show');
+ });
+ });
+ }
+
+ /**
+ * show route dialog. User can search for systems and jump-info
+ * @param dialogData
+ */
+ showFindRouteDialog(dialogData){
+ let mapSelectOptions = [];
+ let currentMapData = Util.getCurrentMapData();
+ if(currentMapData !== false){
+ for(let i = 0; i < currentMapData.length; i++){
+ mapSelectOptions.push({
+ id: currentMapData[i].config.id,
+ name: currentMapData[i].config.name,
+ selected: (dialogData.mapId === currentMapData[i].config.id)
+ });
+ }
+ }
+
+ let data = {
+ id: this._config.routeDialogId,
+ select2Class: Util.config.select2Class,
+ selectClass: this._config.systemDialogSelectClass,
+ routeDialogMapSelectId: this._config.routeDialogMapSelectId,
+ routeDialogSizeSelectId: this._config.routeDialogSizeSelectId,
+ systemFromData: dialogData.systemFromData,
+ systemToData: dialogData.systemToData,
+ mapSelectOptions: mapSelectOptions,
+ sizeOptions: MapUtil.allConnectionJumpMassTypes().map(type => ({
+ id: type,
+ name: type,
+ selected: false
+ }))
+ };
+
+ requirejs(['text!templates/dialog/route.html', 'mustache'], (template, Mustache) => {
+ let content = Mustache.render(template, data);
+
+ let findRouteDialog = bootbox.dialog({
+ title: 'Route finder',
message: content,
show: false,
buttons: {
@@ -492,930 +989,222 @@ define([
className: 'btn-default'
},
success: {
- label: ' save',
- className: 'btn-success',
- callback: function(){
- let form = this.find('form');
- // get all system data from select2
- let systemSelectData = form.find('.' + config.systemDialogSelectClass).select2('data');
- let systemsTo = [];
+ label: ' search route',
+ className: 'btn-primary',
+ callback: e => {
+ // add new route to route table
+ let form = $(e.delegateTarget).find('form');
+ let routeDialogData = $(form).getFormValues();
- if( systemSelectData.length > 0 ){
- systemsTo = formSystemSelectData(systemSelectData);
- MapUtil.storeLocalData('map', dialogData.mapId, 'routes', systemsTo);
- }else{
- MapUtil.deleteLocalData('map', dialogData.mapId, 'routes');
+ // validate form
+ form.validator('validate');
+
+ // check whether the form is valid
+ let formValid = form.isValidForm();
+
+ if(formValid === false){
+ // don't close dialog
+ return false;
}
- Util.showNotify({title: 'Route settings stored', type: 'success'});
+ // get all system data from select2
+ // -> we could also get value from "routeDialogData" var, but we need systemName also
+ let systemSelectData = form.find('.' + this._config.systemDialogSelectClass).select2('data');
- // (re) draw table
- drawRouteTable(dialogData.mapId, moduleElement, systemFromData, routesTable, systemsTo);
+ if(
+ systemSelectData &&
+ systemSelectData.length === 1
+ ){
+ let requestData = {
+ routeData: [{
+ mapIds: routeDialogData.mapIds,
+ systemFromData: dialogData.systemFromData,
+ systemToData: {
+ systemId: parseInt(systemSelectData[0].id),
+ name: systemSelectData[0].text
+ },
+ stargates: routeDialogData.hasOwnProperty('stargates') ? parseInt(routeDialogData.stargates) : 0,
+ jumpbridges: routeDialogData.hasOwnProperty('jumpbridges') ? parseInt(routeDialogData.jumpbridges) : 0,
+ wormholes: routeDialogData.hasOwnProperty('wormholes') ? parseInt(routeDialogData.wormholes) : 0,
+ wormholesReduced: routeDialogData.hasOwnProperty('wormholesReduced') ? parseInt(routeDialogData.wormholesReduced) : 0,
+ wormholesCritical: routeDialogData.hasOwnProperty('wormholesCritical') ? parseInt(routeDialogData.wormholesCritical) : 0,
+ wormholesEOL: routeDialogData.hasOwnProperty('wormholesEOL') ? parseInt(routeDialogData.wormholesEOL) : 0,
+ wormholesThera: routeDialogData.hasOwnProperty('wormholesThera') ? parseInt(routeDialogData.wormholesThera) : 0,
+ wormholesSizeMin: routeDialogData.wormholesSizeMin || '',
+ excludeTypes: SystemRouteModule.getLowerSizeConnectionTypes(routeDialogData.wormholesSizeMin),
+ endpointsBubble: routeDialogData.hasOwnProperty('endpointsBubble') ? parseInt(routeDialogData.endpointsBubble) : 0,
+ flag: routeDialogData.hasOwnProperty('flag') ? routeDialogData.flag : 'shortest'
+ }]
+ };
+
+ this.getRouteData(requestData, 'callbackAddRouteRows');
+ }
}
}
}
});
- settingsDialog.on('shown.bs.modal', function(e){
+ findRouteDialog.on('show.bs.modal', e => {
+ $(e.target).initTooltips();
- // init default system select ---------------------------------------------------------------------
+ // init some dialog/form observer
+ this.setDialogObserver($(e.target));
+
+ // init map select ------------------------------------------------------------------------------------
+ $(e.target).find('#' + this._config.routeDialogMapSelectId).initMapSelect();
+
+ // init connection jump size select -------------------------------------------------------------------
+ $(e.target).find('#' + this._config.routeDialogSizeSelectId).initConnectionSizeSelect();
+ });
+
+
+ findRouteDialog.on('shown.bs.modal', e => {
+ // init system select live search --------------------------------------------------------------------
// -> add some delay until modal transition has finished
- let systemTargetSelect = $(this).find('.' + config.systemDialogSelectClass);
- systemTargetSelect.delay(240).initSystemSelect({key: 'id', maxSelectionLength: maxSelectionLength});
+ let systemTargetSelect = $(e.target).find('.' + this._config.systemDialogSelectClass);
+ systemTargetSelect.delay(240).initSystemSelect({key: 'id'});
});
// show dialog
- settingsDialog.modal('show');
- });
- });
- };
-
- /**
- * format select2 system data
- * @param {Array} data
- * @returns {Array}
- */
- let formSystemSelectData = (data) => {
- let formattedData = [];
- for(let i = 0; i < data.length; i++){
- let tmpData = data[i];
-
- formattedData.push({
- systemId: parseInt(tmpData.id),
- name: tmpData.text
+ findRouteDialog.modal('show');
});
}
- return formattedData;
- };
-
- /**
- * set event observer for route finder dialog
- * @param routeDialog
- */
- let setDialogObserver = routeDialog => {
- let wormholeCheckbox = routeDialog.find('input[type="checkbox"][name="wormholes"]');
- let wormholeReducedCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesReduced"]');
- let wormholeCriticalCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesCritical"]');
- let wormholeEolCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesEOL"]');
- let wormholeSizeSelect = routeDialog.find('#' + config.routeDialogSizeSelectId);
-
- // store current "checked" state for each box ---------------------------------------------
- let storeCheckboxStatus = function(){
- wormholeReducedCheckbox.data('selectState', wormholeReducedCheckbox.prop('checked'));
- wormholeCriticalCheckbox.data('selectState', wormholeCriticalCheckbox.prop('checked'));
- wormholeEolCheckbox.data('selectState', wormholeEolCheckbox.prop('checked'));
- };
-
- // on wormhole checkbox change ------------------------------------------------------------
- let onWormholeCheckboxChange = function(){
-
- if( $(this).is(':checked') ){
- wormholeSizeSelect.prop('disabled', false);
-
- wormholeReducedCheckbox.prop('disabled', false);
- wormholeCriticalCheckbox.prop('disabled', false);
- wormholeEolCheckbox.prop('disabled', false);
-
- wormholeReducedCheckbox.prop('checked', wormholeReducedCheckbox.data('selectState'));
- wormholeCriticalCheckbox.prop('checked', wormholeCriticalCheckbox.data('selectState'));
- wormholeEolCheckbox.prop('checked', wormholeEolCheckbox.data('selectState'));
- }else{
- wormholeSizeSelect.prop('disabled', true);
-
- storeCheckboxStatus();
-
- wormholeReducedCheckbox.prop('checked', false);
- wormholeReducedCheckbox.prop('disabled', true);
- wormholeCriticalCheckbox.prop('checked', false);
- wormholeCriticalCheckbox.prop('disabled', true);
- wormholeEolCheckbox.prop('checked', false);
- wormholeEolCheckbox.prop('disabled', true);
- }
- }.bind(wormholeCheckbox);
-
- wormholeCheckbox.on('change', onWormholeCheckboxChange);
-
- // initial checkbox check
- storeCheckboxStatus();
- onWormholeCheckboxChange();
- };
-
- /**
- * get a connectionsData object that holds all connections for given mapIds (used as cache for route search)
- * @param mapIds
- * @returns {{}}
- */
- let getConnectionsDataFromMaps = (mapIds) => {
- let connectionsData = {};
- for(let mapId of mapIds){
- let map = MapUtil.getMapInstance(mapId);
- if(map){
- let cacheKey = 'map_' + mapId;
- let mapConnectionsData = getCacheData('mapConnections', cacheKey);
-
- if(!mapConnectionsData){
- mapConnectionsData = {};
- let connections = map.getAllConnections();
- if(connections.length){
- let connectionsData = MapUtil.getDataByConnections(connections);
- for(let connectionData of connectionsData){
- let connectionDataCacheKey = getConnectionDataCacheKey(connectionData.sourceName, connectionData.targetName);
-
- // skip double connections between same systems
- if( !mapConnectionsData.hasOwnProperty(connectionDataCacheKey) ){
- mapConnectionsData[connectionDataCacheKey] = {
- map: {
- id: mapId
- },
- connection: {
- id: connectionData.id,
- type: connectionData.type,
- scope: connectionData.scope
- },
- source: {
- id: connectionData.source,
- name: connectionData.sourceName,
- alias: connectionData.sourceAlias
- },
- target: {
- id: connectionData.target,
- name: connectionData.targetName,
- alias: connectionData.targetAlias
- }
- };
- }
- }
- }
-
- // update cache
- setCacheData('mapConnections', cacheKey, mapConnectionsData);
- }
-
- if(connectionsData !== null){
- connectionsData = Object.assign({}, mapConnectionsData, connectionsData);
- }
- }
- }
-
- return connectionsData;
- };
-
- /**
- * search for a specific connection by "source"/"target"-name inside connectionsData cache
- * @param connectionsData
- * @param sourceName
- * @param targetName
- * @returns {{}}
- */
- let findConnectionsData = (connectionsData, sourceName, targetName) => {
- let connectionDataCacheKey = getConnectionDataCacheKey(sourceName, targetName);
- return connectionsData.hasOwnProperty(connectionDataCacheKey) ?
- connectionsData[connectionDataCacheKey] : {};
- };
-
- /**
- * get stargate connection data (default connection type in case connection was not found on a map)
- * @param sourceRouteNodeData
- * @param targetRouteNodeData
- * @returns {{connection: {id: number, type: string[], scope: string}, source: {id: number, name, alias}, target: {id: number, name, alias}}}
- */
- let getStargateConnectionData = (sourceRouteNodeData, targetRouteNodeData) => {
- return {
- connection: {
- id: 0,
- type: ['stargate'],
- scope: 'stargate'
- },
- source: {
- id: 0,
- name: sourceRouteNodeData.system,
- alias: sourceRouteNodeData.system
- },
- target: {
- id: 0,
- name: targetRouteNodeData.system,
- alias: targetRouteNodeData.system
- }
- };
- };
-
- /**
- * get fake connection Element
- * @param connectionData
- * @returns {string}
- */
- let getFakeConnectionElement = (connectionData) => {
- let mapId = Util.getObjVal(connectionData, 'map.id') | 0;
- let connectionId = Util.getObjVal(connectionData, 'connection.id') | 0;
- let scope = Util.getObjVal(connectionData, 'connection.scope');
- let classes = MapUtil.getConnectionFakeClassesByTypes(connectionData.connection.type);
- let disabled = !mapId || !connectionId;
-
- let connectionElement = '';
- return connectionElement;
- };
-
- /**
- * format route data from API request into dataTable row format
- * @param routeData
- * @returns {{}}
- */
- let formatRouteData = (routeData) => {
-
/**
- * get status icon for route
- * @param status
- * @returns {string}
+ * set event observer for route finder dialog
+ * @param routeDialog
*/
- let getStatusIcon= (status) => {
- let color = 'txt-color-danger';
- let title = 'route not found';
- switch(status){
- case 1:
- color = 'txt-color-success';
- title = 'route exists';
- break;
- case 2:
- color = 'txt-color-warning';
- title = 'not search performed';
- break;
- }
+ setDialogObserver(routeDialog){
+ let wormholeCheckbox = routeDialog.find('input[type="checkbox"][name="wormholes"]');
+ let wormholeReducedCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesReduced"]');
+ let wormholeCriticalCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesCritical"]');
+ let wormholeEolCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesEOL"]');
+ let wormholeTheraCheckbox = routeDialog.find('input[type="checkbox"][name="wormholesThera"]');
+ let wormholeSizeSelect = routeDialog.find('#' + this._config.routeDialogSizeSelectId);
- return '';
- };
-
- // route status:
- // 0: not found
- // 1: round (OK)
- // 2: not searched
- let routeStatus = routeData.skipSearch ? 2 : 0;
-
- // button class for flag (e.g. "secure" routes)
- let flagButtonClass = routeData.flag === 'secure' ? 'txt-color-success' : '';
-
- let connectionButton = '';
- let flagButton = '';
- let reloadButton = '';
- let searchButton = '';
- let deleteButton = '';
-
- // default row data (e.g. no route found)
- let tableRowData = {
- systemFromData: routeData.systemFromData,
- systemToData: routeData.systemToData,
- jumps: {
- value: 9999, // for sorting
- formatted: ''
- },
- avgTrueSec: {
- value: '',
- formatted: ''
- },
- route: {
- value: routeStatus === 2 ? 'search now' : 'not found',
- data: routeData.route
- },
- stargates: routeData.stargates,
- jumpbridges: routeData.jumpbridges,
- wormholes: routeData.wormholes,
- wormholesReduced: routeData.wormholesReduced,
- wormholesCritical: routeData.wormholesCritical,
- wormholesEOL: routeData.wormholesEOL,
- wormholesSizeMin: routeData.wormholesSizeMin,
- excludeTypes: routeData.excludeTypes,
- endpointsBubble: routeData.endpointsBubble,
- connections: {
- value: 0,
- button: connectionButton
- },
- flag: {
- value: routeData.flag,
- button: flagButton
- },
- reload: {
- button: routeData.skipSearch ? searchButton : reloadButton
- },
- clear: {
- button: deleteButton
- },
- maps: routeData.maps,
- mapIds: routeData.mapIds //map data (mapIds is "redundant")
- };
-
- if(
- routeData.routePossible === true &&
- routeData.route.length > 0
- ){
- // route data available
- routeStatus = 1;
-
- // add route Data
- let routeJumpElements = [];
- let avgSecTemp = 0;
-
- let connectionsData = getConnectionsDataFromMaps(routeData.mapIds);
- let prevRouteNodeData = null;
- // loop all systems on this route
- for(let i = 0; i < routeData.route.length; i++){
- let routeNodeData = routeData.route[i];
- let systemName = routeNodeData.system;
-
- // fake connection elements between systems -----------------------------------------------------------
- if(prevRouteNodeData){
- let connectionData = findConnectionsData(connectionsData, prevRouteNodeData.system, systemName);
- if(!connectionData.hasOwnProperty('connection')){
- connectionData = getStargateConnectionData(prevRouteNodeData, routeNodeData);
- }
- let connectionElement = getFakeConnectionElement(connectionData);
-
- routeJumpElements.push( connectionElement );
- }
-
- // system elements ------------------------------------------------------------------------------------
- let systemSec = Number(routeNodeData.security).toFixed(1).toString();
- let tempSystemSec = systemSec;
-
- if(tempSystemSec <= 0){
- tempSystemSec = '0-0';
- }
-
- let systemSecClass = config.systemSecurityClassPrefix + tempSystemSec.replace('.', '-');
-
- // check for wormhole
- let icon = 'fas fa-square';
- if( /^J\d+$/.test(systemName) ){
- icon = 'fas fa-dot-circle';
- }
-
- let system = '';
- routeJumpElements.push( system );
-
- // "source" system is not relevant for average security
- if(i > 0){
- avgSecTemp += Number(routeNodeData.security);
- }
-
- prevRouteNodeData = routeNodeData;
- }
-
- let avgSec = ( avgSecTemp / (routeData.route.length - 1)).toFixed(2);
- let avgSecForClass = Number(avgSec).toFixed(1);
-
- if(avgSecForClass <= 0){
- avgSecForClass = '0.0';
- }
-
- let avgSecClass = config.systemSecurityClassPrefix + avgSecForClass.toString().replace('.', '-');
-
- tableRowData.jumps = {
- value: routeData.routeJumps,
- formatted: routeData.routeJumps
+ // store current "checked" state for each box ---------------------------------------------
+ let storeCheckboxStatus = () => {
+ wormholeReducedCheckbox.data('selectState', wormholeReducedCheckbox.prop('checked'));
+ wormholeCriticalCheckbox.data('selectState', wormholeCriticalCheckbox.prop('checked'));
+ wormholeEolCheckbox.data('selectState', wormholeEolCheckbox.prop('checked'));
+ wormholeTheraCheckbox.data('selectState', wormholeTheraCheckbox.prop('checked'));
};
- tableRowData.avgTrueSec = {
- value: avgSec,
- formatted: '' + avgSec + ''
+ // on wormhole checkbox change ------------------------------------------------------------
+ let onWormholeCheckboxChange = e => {
+ if($(e.target).is(':checked')){
+ wormholeSizeSelect.prop('disabled', false);
+
+ wormholeReducedCheckbox.prop('disabled', false);
+ wormholeCriticalCheckbox.prop('disabled', false);
+ wormholeEolCheckbox.prop('disabled', false);
+ wormholeTheraCheckbox.prop('disabled', false);
+
+ wormholeReducedCheckbox.prop('checked', wormholeReducedCheckbox.data('selectState'));
+ wormholeCriticalCheckbox.prop('checked', wormholeCriticalCheckbox.data('selectState'));
+ wormholeEolCheckbox.prop('checked', wormholeEolCheckbox.data('selectState'));
+ wormholeTheraCheckbox.prop('checked', wormholeTheraCheckbox.data('selectState'));
+ }else{
+ wormholeSizeSelect.prop('disabled', true);
+
+ storeCheckboxStatus();
+
+ wormholeReducedCheckbox.prop('checked', false);
+ wormholeReducedCheckbox.prop('disabled', true);
+ wormholeCriticalCheckbox.prop('checked', false);
+ wormholeCriticalCheckbox.prop('disabled', true);
+ wormholeEolCheckbox.prop('checked', false);
+ wormholeEolCheckbox.prop('disabled', true);
+ wormholeTheraCheckbox.prop('checked', false);
+ wormholeTheraCheckbox.prop('disabled', true);
+ }
};
- tableRowData.route.value = routeJumpElements.join(' ');
+ wormholeCheckbox.on('change', onWormholeCheckboxChange);
+
+ // initial checkbox check
+ storeCheckboxStatus();
+ onWormholeCheckboxChange({target: wormholeCheckbox});
}
- // route status data ------------------------------------------------------------------------------------------
- tableRowData.status = {
- value: routeStatus,
- formatted: getStatusIcon(routeStatus)
- };
-
- return tableRowData;
- };
-
- /**
- * get module element
- * @param parentElement
- * @param mapId
- * @param systemData
- * @returns {jQuery}
- */
- let getModule = (parentElement, mapId, systemData) => {
- let moduleElement = $('').append(
- $(' ', {
- class: config.moduleHeadClass
- }).append(
- $(' ', {
- class: config.moduleHandlerClass
- }),
- $('', {
- class: 'pull-right'
- }).append(
- $('', {
- class: ['fas', 'fa-fw', 'fa-sliders-h', config.moduleHeadlineIconClass, config.moduleHeadlineIconSettingsClass].join(' '),
- title: 'settings'
- }).attr('data-html', 'true').attr('data-toggle', 'tooltip'),
- $('', {
- class: ['fas', 'fa-fw', 'fa-search', config.moduleHeadlineIconClass, config.moduleHeadlineIconSearchClass].join(' '),
- title: 'find route'
- }).attr('data-html', 'true').attr('data-toggle', 'tooltip'),
- $('', {
- class: ['fas', 'fa-fw', 'fa-sync', config.moduleHeadlineIconClass, config.moduleHeadlineIconRefreshClass].join(' '),
- title: 'refresh all'
- }).attr('data-html', 'true').attr('data-toggle', 'tooltip')
- ),
- $('', {
- text: 'Routes'
- })
- )
- );
-
- // save systemFromData to module (data never changes during module lifetime)
- // -> we need this later in updateModule()
- let systemFromData = {
- systemId: systemData.systemId,
- name: systemData.name,
- };
-
- moduleElement.data('systemFromData', systemFromData);
-
- let table = $('', {
- class: ['compact', 'stripe', 'order-column', 'row-border', config.systemInfoRoutesTableClass].join(' ')
- });
- moduleElement.append(table);
-
- // init empty table
- let routesTable = table.dataTable( {
- paging: false,
- ordering: true,
- order: [[ 2, 'asc' ], [ 0, 'asc' ]],
- info: false,
- searching: false,
- hover: false,
- autoWidth: false,
- rowId: 'systemTo',
- language: {
- emptyTable: 'No routes added'
- },
- columnDefs: [
- {
- targets: 0,
- orderable: true,
- title: '',
- width: 2,
- class: ['text-center'].join(' '),
- data: 'status',
- render: {
- _: 'formatted',
- sort: 'value'
- }
- },{
- targets: 1,
- orderable: true,
- title: 'system ',
- class: Util.config.popoverTriggerClass,
- data: 'systemToData',
- render: {
- _: 'name',
- sort: 'name'
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- // init context menu
- $(cell).initSystemPopover({
- systemToData: rowData.systemToData
- });
-
- $(cell).toggleClass(config.rallyClass, cellData.hasOwnProperty('rally'));
- }
- },{
- targets: 2,
- orderable: true,
- title: ' ',
- width: 16,
- class: 'text-right',
- data: 'jumps',
- render: {
- _: 'formatted',
- sort: 'value'
- }
- },{
- targets: 3,
- orderable: true,
- title: 'Ø ',
- width: 14,
- class: 'text-right',
- data: 'avgTrueSec',
- render: {
- _: 'formatted',
- sort: 'value'
- }
- },{
- targets: 4,
- orderable: false,
- title: 'route',
- class: [config.dataTableRouteCellClass].join(' '),
- data: 'route',
- render: {
- _: 'value'
- }
- },{
- targets: 5,
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- class: ['text-center', config.dataTableActionCellClass].join(' '),
- data: 'connections',
- render: {
- _: 'button'
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tempTableApi = this.api();
-
- $(cell).on('click', function(e){
- let routeCellElement = tempTableApi.cell( rowIndex, 4 ).nodes().to$();
-
- if(routeCellElement.hasClass(config.dataTableJumpCellClass)){
- routeCellElement.toggleClass(config.dataTableJumpCellClass, false);
- $(this).find('i').toggleClass('txt-color-orange', false);
- }else{
- routeCellElement.toggleClass(config.dataTableJumpCellClass, true);
- $(this).find('i').toggleClass('txt-color-orange', true);
- }
- });
- }
- },{
- targets: 6,
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- class: ['text-center', config.dataTableActionCellClass].join(' '),
- data: 'flag',
- render: {
- _: 'button'
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tempTableApi = this.api();
-
- $(cell).on('click', function(e){
- // get current row data (important!)
- // -> "rowData" param is not current state, values are "on createCell()" state
- rowData = tempTableApi.row( $(cell).parents('tr')).data();
- let routeData = getRouteRequestDataFromRowData( rowData );
-
- // overwrite some params
- routeData.skipSearch = 0;
- routeData.flag = routeData.flag === 'shortest' ? 'secure' : 'shortest'; // toggle
-
- let context = {
- moduleElement: moduleElement,
- dataTable: tempTableApi
- };
-
- let requestData = {
- routeData: [routeData]
- };
-
- getRouteData(requestData, context, callbackAddRouteRows);
- });
- }
- },{
- targets: 7,
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- class: ['text-center', config.dataTableActionCellClass].join(' '),
- data: 'reload',
- render: {
- _: 'button'
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tempTableApi = this.api();
-
- $(cell).on('click', function(e){
- // get current row data (important!)
- // -> "rowData" param is not current state, values are "on createCell()" state
- rowData = tempTableApi.row( $(cell).parents('tr')).data();
- let routeData = getRouteRequestDataFromRowData( rowData );
-
- // overwrite some params
- routeData.skipSearch = 0;
-
- let context = {
- moduleElement: moduleElement,
- dataTable: tempTableApi
- };
-
- let requestData = {
- routeData: [routeData]
- };
-
- getRouteData(requestData, context, callbackAddRouteRows);
- });
- }
- },{
- targets: 8,
- title: '',
- orderable: false,
- searchable: false,
- width: 10,
- class: ['text-center', config.dataTableActionCellClass].join(' '),
- data: 'clear',
- render: {
- _: 'button'
- },
- createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
- let tempTableElement = this;
-
- let confirmationSettings = {
- title: 'delete route',
- template: Util.getConfirmationTemplate(null, {
- size: 'small',
- noTitle: true
- }),
- onConfirm : function(e, target){
- let deleteRowElement = $(cell).parents('tr');
- tempTableElement.api().rows(deleteRowElement).remove().draw();
- }
- };
-
- // init confirmation dialog
- $(cell).confirmation(confirmationSettings);
- }
- }
- ],
- drawCallback: function(settings){
-
- let animationRows = this.api().rows().nodes().to$().filter(function(){
- return (
- $(this).data('animationStatus') ||
- $(this).data('animationTimer')
- );
- });
-
- for(let i = 0; i < animationRows.length; i++){
- let animationRow = $(animationRows[i]);
- animationRow.pulseBackgroundColor(animationRow.data('animationStatus'));
- animationRow.removeData('animationStatus');
- }
- },
- initComplete: function(settings, json){
- // click on "fake connection" -------------------------------------------------------------------------
- $(this).on('click', '.pf-fake-connection', function(){
- let fakeConnectionElement = $(this);
- let mapId = fakeConnectionElement.attr('data-mapId');
- let connectionId = fakeConnectionElement.attr('data-connectionId');
- let connection = $().getConnectionById(mapId, connectionId);
-
- if(connection){
- let map = connection._jsPlumb.instance;
- MapUtil.showConnectionInfo(map, [connection]);
- }
- });
- },
- data: [] // will be added dynamic
- });
-
- // init tooltips for this module
- let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
- tooltipElements.tooltip({
- container: 'body'
- });
-
- return moduleElement;
- };
-
-
- /**
- * init system popover (e.g. for setWaypoints)
- * @param options
- */
- $.fn.initSystemPopover = function(options){
- let elements = $(this);
- let eventNamespace = 'hideSystemPopup';
- let systemToData = options.systemToData;
-
- requirejs(['text!templates/tooltip/system_popover.html', 'mustache'], function(template, Mustache){
- let data = {
- systemToData: systemToData
- };
-
- let content = Mustache.render(template, data);
-
- elements.each(function(){
- let element = $(this);
- // destroy "popover" and remove "click" event for animation
- element.popover('destroy').off();
-
- // init popover and add specific class to it (for styling)
- element.popover({
- html: true,
- title: systemToData.name,
- trigger: 'manual',
- placement: 'top',
- container: 'body',
- content: content
- }).data('bs.popover').tip().addClass(Util.config.popoverClass);
- });
-
- // set popup "close" observer
- elements.initPopoverClose(eventNamespace);
-
- // set "open" trigger on "right click"
- // -> this is not supported by the "trigger" param in .popover();
- // -> therefore we need to set it up manually
- elements.on('contextmenu', function(e){
- e.preventDefault();
- $(this).popover('show');
- });
-
- // set link observer "on shown" event
- elements.on('shown.bs.popover', function(){
- let popoverRoot = $(this);
-
- popoverRoot.data('bs.popover').tip().find('a').on('click', function(){
- // hint: "data" attributes should be in lower case!
- let systemData = {
- id: $(this).data('systemid'),
- name: $(this).data('name')
- };
- Util.setDestination('set_destination', 'system', systemData);
-
- // close popover
- popoverRoot.popover('hide');
- });
- });
- });
- };
-
- /**
- * get data from all Rally Point systems
- * @param mapId
- * @returns {Array}
- */
- let getRallySystemsData = (mapId) => {
- let systemsRallyData = [];
- let map = MapUtil.getMapInstance(mapId);
- if(map){
- let mapContainer = $(map.getContainer());
- let systems = mapContainer.find('.pf-system-info-rally');
-
- for(let system of systems){
- system = $(system);
- systemsRallyData.push({
- systemId: system.data('systemId'),
- name: system.data('name'),
- rally: 1
- });
- }
+ /**
+ * init module
+ */
+ init(){
+ super.init();
}
- return systemsRallyData;
- };
+ /**
+ * get all jump mass related connection types that have a lower "jumpMassMin" than connectionType
+ * @param connectionType
+ * @returns {Array}
+ */
+ static getLowerSizeConnectionTypes(connectionType){
+ let lowerSizeTypes = [];
+ let jumpMassMin = Util.getObjVal(Init.wormholeSizes, connectionType + '.jumpMassMin') || 0;
- /**
- * update trigger function for this module
- * @param moduleElement
- * @param data
- */
- let updateModule = (moduleElement, data) => {
- let routesTableElement = moduleElement.find('.' + config.systemInfoRoutesTableClass);
- let routesTable = routesTableElement.DataTable();
+ if(jumpMassMin){
+ for(let [type, data] of Object.entries(Init.wormholeSizes)){
+ if(data.jumpMassMin < jumpMassMin){
+ lowerSizeTypes.push(type);
+ }
+ }
+ }
+ return lowerSizeTypes;
+ }
- switch(data.task){
- case 'showFindRouteDialog':
- let dialogData = {
- moduleElement: moduleElement,
- mapId: data.mapId,
- systemFromData: moduleElement.data('systemFromData'),
- systemToData: data.systemToData,
- dataTable: routesTable
- };
-
- showFindRouteDialog(dialogData);
- break;
- case 'findRoute':
- drawRouteTable(data.mapId, moduleElement, moduleElement.data('systemFromData'), routesTable, [data.systemToData]);
- break;
+ /**
+ * format select2 system data
+ * @param {Array} data
+ * @returns {Array}
+ */
+ static formSystemSelectData(data){
+ let formattedData = [];
+ for(let i = 0; i < data.length; i++){
+ let tmpData = data[i];
+ formattedData.push({
+ systemId: parseInt(tmpData.id),
+ name: tmpData.text
+ });
+ }
+ return formattedData;
}
};
- /**
- * init route module
- * -> request route path fore "default" trade hub systems
- * @param moduleElement
- * @param mapId
- * @param systemData
- */
- let initModule = (moduleElement, mapId, systemData) => {
-
- let systemFromData = {
- systemId: systemData.systemId,
- name: systemData.name
- };
-
- let routesTableElement = moduleElement.find('.' + config.systemInfoRoutesTableClass);
- let routesTable = routesTableElement.DataTable();
-
- // init refresh routes ----------------------------------------------------------------------------------------
- moduleElement.find('.' + config.moduleHeadlineIconRefreshClass).on('click', function(e){
- updateRoutesTable(moduleElement, routesTable);
- });
-
- // init search routes dialog ----------------------------------------------------------------------------------
- moduleElement.find('.' + config.moduleHeadlineIconSearchClass).on('click', function(e){
- let maxRouteSearchLimit = this.Init.routeSearch.limit;
-
- if(routesTable.rows().count() >= maxRouteSearchLimit){
- // max routes limit reached -> show warning
- Util.showNotify({title: 'Route limit reached', text: 'Search is limited by ' + maxRouteSearchLimit, type: 'warning'});
- }else{
- let dialogData = {
- moduleElement: moduleElement,
- mapId: mapId,
- systemFromData: systemFromData,
- dataTable: routesTable
- };
-
- showFindRouteDialog(dialogData);
- }
- }.bind({
- Init: Init
- }));
-
- // init settings dialog ---------------------------------------------------------------------------------------
- moduleElement.find('.' + config.moduleHeadlineIconSettingsClass).on('click', function(e){
- let dialogData = {
- mapId: mapId
- };
-
- showSettingsDialog(dialogData, moduleElement, systemFromData, routesTable);
- });
-
- // fill routesTable with data --------------------------------------------------------------------------------
- let promiseStore = MapUtil.getLocaleData('map', mapId);
- promiseStore.then(function(dataStore){
- // selected systems (if already stored)
- let systemsTo = [{
- systemId: 30000142,
- name: 'Jita'
- }];
-
- if(
- dataStore &&
- dataStore.routes
- ){
- systemsTo = dataStore.routes;
- }
-
- // add "Rally Point" systems to table
- let systemsToData = getRallySystemsData(mapId);
- systemsToData.push(...systemsTo);
-
- drawRouteTable(mapId, moduleElement, systemFromData, routesTable, systemsToData);
- });
- };
-
- /**
- * before module destroy callback
- * @param moduleElement
- */
- let beforeDestroy = moduleElement => {
- let routeTableElement = moduleElement.find('.' + config.systemInfoRoutesTableClass);
- let tableApi = routeTableElement.DataTable();
- tableApi.destroy();
- };
-
- /**
- * get all jump mass related connection types that have a lower "jumpMassMin" than connectionType
- * @param connectionType
- * @returns {Array}
- */
- let getLowerSizeConnectionTypes = connectionType => {
- let lowerSizeTypes = [];
- let jumpMassMin = Util.getObjVal(Init.wormholeSizes, connectionType + '.jumpMassMin') || 0;
-
- if(jumpMassMin){
- for(let [type, data] of Object.entries(Init.wormholeSizes)){
- if(data.jumpMassMin < jumpMassMin){
- lowerSizeTypes.push(type);
- }
- }
+ SystemRouteModule.isPlugin = false; // module is defined as 'plugin'
+ SystemRouteModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
+ SystemRouteModule.sortArea = 'b'; // default sortable area
+ SystemRouteModule.position = 1; // default sort/order position within sortable area
+ SystemRouteModule.label = 'Routes'; // static module label (e.g. description)
+ SystemRouteModule.cacheConfig = {
+ routes: {
+ ttl: 5,
+ maxSize: 100
}
-
- return lowerSizeTypes;
};
- return {
- config: config,
- getModule: getModule,
- initModule: initModule,
- updateModule: updateModule,
- beforeDestroy: beforeDestroy
+ SystemRouteModule.defaultConfig = {
+ className: 'pf-system-route-module', // class for module
+ sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
+ headline: 'Routes',
+
+ // dialog
+ routeDialogId: 'pf-route-dialog', // id for route "search" dialog
+ routeSettingsDialogId: 'pf-route-settings-dialog', // id for route "settings" dialog
+ systemDialogSelectClass: 'pf-system-dialog-select', // class for system select Element
+
+ routeDialogMapSelectId: 'pf-route-dialog-map-select', // id for "map" select
+ routeDialogSizeSelectId: 'pf-route-dialog-size-select', // id for "wh size" select
+
+ // table
+ systemInfoRoutesTableClass: 'pf-system-route-table', // class for route tables
+ dataTableActionCellClass: 'pf-table-action-cell', // class for "action" cells
+ dataTableRouteCellClass: 'pf-table-route-cell', // class for "route" cells
+ dataTableJumpCellClass: 'pf-table-jump-cell', // class for "route jump" cells
+
+ systemSecurityClassPrefix: 'pf-system-security-', // prefix class for system security level (color)
+ rallyClass: 'pf-rally', // class for "rally point" style
};
+ return SystemRouteModule;
});
\ No newline at end of file
diff --git a/js/app/ui/module/system_signature.js b/js/app/ui/module/system_signature.js
index 9cd89c4e..4be5db80 100644
--- a/js/app/ui/module/system_signature.js
+++ b/js/app/ui/module/system_signature.js
@@ -6,27 +6,3185 @@ define([
'jquery',
'app/init',
'app/util',
+ 'module/base',
'bootbox',
'app/counter',
'app/map/map',
'app/map/util',
- 'app/lib/cache',
'app/ui/form_element'
-], ($, Init, Util, bootbox, Counter, Map, MapUtil, Cache, FormElement) => {
+], ($, Init, Util, BaseModule, bootbox, Counter, Map, MapUtil, FormElement) => {
'use strict';
- let config = {
- // module info
- modulePosition: 4,
- moduleName: 'systemSignature',
- moduleHeadClass: 'pf-module-head', // class for module header
- moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
+ let SystemSignatureModule = class SystemSignatureModule extends BaseModule {
+ constructor(config = {}) {
+ super(Object.assign({}, new.target.defaultConfig, config));
+ }
- // system signature module
- moduleTypeClass: 'pf-system-signature-module', // class for this module
+ /**
+ * get custom "metaData" from dataTables API
+ * @param tableApi
+ * @returns {*}
+ */
+ getTableMetaData(tableApi){
+ return tableApi ? tableApi.init().pfMeta : null;
+ }
+
+ /**
+ * get dataTable id
+ * @param {...string} parts e.g. 'tableType', 'mapId', 'systemId'
+ * @returns {string}
+ */
+ getTableId(...parts){
+ return Util.getTableId(this._config.sigTableId, ...parts);
+ }
+
+ /**
+ * get a dataTableApi instance from global cache
+ * @param mapId
+ * @param systemId
+ * @param tableType
+ * @returns {*}
+ */
+ getDataTableInstance(mapId, systemId, tableType){
+ return Util.getDataTableInstance(this._config.sigTableId, mapId, systemId, tableType);
+ }
+
+ /**
+ * Update/set tooltip for an element
+ * @param element
+ * @param title
+ */
+ updateTooltip(element, title){
+ $(element).attr('title', title.toUpperCase()).tooltip('fixTitle').tooltip('setContent');
+ }
+
+ /**
+ * get progressbar
+ * @param progress
+ * @returns {HTMLDivElement}
+ */
+ newProgressElement(progress = 0){
+ let progressWrapperEl = document.createElement('div');
+ progressWrapperEl.classList.add(this._config.moduleHeadlineProgressBarClass);
+
+ let progressEl = document.createElement('div');
+ progressEl.classList.add('progress', 'progress-micro');
+
+ let barEl = document.createElement('div');
+ barEl.classList.add('progress-bar', 'progress-bar-success');
+ barEl.setAttribute('role', 'progressbar');
+ barEl.setAttribute('aria-valuenow', progress.toString());
+ barEl.setAttribute('aria-valuemin', '0');
+ barEl.setAttribute('aria-valuemax', '100');
+ barEl.style.width = progress + 'px';
+ barEl.style.willChange = 'width';
+ progressEl.append(barEl);
+ progressWrapperEl.append(progressEl);
+
+ return progressWrapperEl;
+ }
+
+ /**
+ * module header
+ * @returns {HTMLDivElement}
+ */
+ newHeaderElement(text){
+ let headEl = super.newHeaderElement(text);
+
+ let progressEl = this.newProgressElement();
+ headEl.append(progressEl);
+
+ let progressLabelEl = this.newHeadlineElement('0%');
+ progressLabelEl.classList.add('progress-label-right');
+ headEl.append(progressLabelEl);
+
+ return headEl;
+ }
+
+ /**
+ * render module
+ * @param mapId
+ * @param systemData
+ * @returns {HTMLElement}
+ */
+ render(mapId, systemData){
+ this._systemData = systemData;
+
+ this._bodyEl = Object.assign(document.createElement('div'), {
+ className: this._config.bodyClassName
+ });
+ this.moduleElement.append(this._bodyEl);
+
+ $(this.moduleElement).showLoadingAnimation();
+
+ // draw "new signature" add table
+ this.drawSignatureTableNew();
+
+ // draw signature table
+ this.drawSignatureTable();
+
+ this.setModuleObserver();
+
+ return this.moduleElement;
+ }
+
+ /**
+ * draw signature 'info' (preview) table in 'signatureReader' dialog
+ * @param dialogElement
+ * @returns {jQuery}
+ */
+ drawSignatureTableInfo(dialogElement){
+ let module = this;
+
+ let infoElement = $(dialogElement).find('#' + module._config.sigInfoId);
+
+ let infoTableEl = document.createElement('table');
+ infoTableEl.id = module.getTableId('info', module._systemData.mapId, module._systemData.id);
+ infoTableEl.classList.add('display', 'compact', 'nowrap', module._config.sigTableClass, module._config.sigTableInfoClass);
+ infoElement.append(infoTableEl);
+
+
+ let dataTableOptions = {
+ tabIndex: -1,
+ dom: '<"flex-row flex-between"<"flex-col"l><"flex-col flex-grow ' + module._config.tableToolbarStatusClass + '"><"flex-col"fS>>' +
+ '<"flex-row"<"flex-col flex-grow"tr>>' +
+ '<"flex-row flex-between"<"flex-col"i><"flex-col"p>>',
+ initComplete: function(settings, json){
+ let tableApi = this.api();
+
+ module.initCharacterInfoTooltip(this, tableApi);
+
+ tableApi.columns(['action:name']).visible(false);
+
+ Counter.initTableCounter(this, ['created:name', 'updated:name']);
+ }
+ };
+
+ let tableApi = $(infoTableEl).DataTable($.extend(true, dataTableOptions, module.getSignatureDataTableDefaults(module._systemData.mapId, module._systemData)));
+
+ tableApi.on('draw.dt', function(e, settings){
+ // xEditable cells should not be editable in this table
+ $(dialogElement).find('.' + module._config.sigTableInfoClass).find('td.editable').editable('disable');
+ });
+
+ return tableApi;
+ }
+
+ /**
+ * draw signature table toolbar (add signature button, scan progress bar
+ */
+ drawSignatureTableNew(){
+ let module = this;
+
+ let secondaryTableWrapperEl = document.createElement('div');
+ secondaryTableWrapperEl.classList.add(module._config.tableToolsActionClass);
+
+ // create "empty table for new signature
+ let secondaryTableEl = document.createElement('table');
+ secondaryTableEl.id = module.getTableId('secondary', module._systemData.mapId, module._systemData.id);
+ secondaryTableEl.classList.add('compact', 'stripe', 'row-border', 'nowrap', module._config.sigTableClass, module._config.sigTableSecondaryClass);
+ secondaryTableWrapperEl.append(secondaryTableEl);
+ this._bodyEl.append(secondaryTableWrapperEl);
+
+ let dataTableOptions = {
+ paging: false,
+ info: false,
+ searching: false,
+ tabIndex: -1,
+ data: [$.extend(true, {}, SystemSignatureModule.emptySignatureData)],
+ initComplete: function(settings, json){
+ let tableApi = this.api();
+
+ $(this).on('keyup', 'td', {tableApi: tableApi}, function(e){
+ module.keyNavigation(tableApi, e);
+ });
+ }
+ };
+
+ let tableApi = $(secondaryTableEl).DataTable($.extend(true, dataTableOptions, module.getSignatureDataTableDefaults(module._systemData.mapId, module._systemData)));
+
+ // "Responsive" dataTables plugin did not load automatic (because table is invisible onInit)
+ // -> manually start "Responsive" extension -> see default dataTable setting for config e.g. breakpoints
+ new $.fn.dataTable.Responsive(tableApi);
+ }
+
+ /**
+ * draw empty signature table
+ */
+ drawSignatureTable(){
+ let module = this;
+
+ let primaryTableEl = document.createElement('table');
+ primaryTableEl.id = module.getTableId('primary', module._systemData.mapId, module._systemData.id);
+ primaryTableEl.classList.add('display', 'compact', 'nowrap', module._config.sigTableClass, module._config.sigTablePrimaryClass);
+ this._bodyEl.append(primaryTableEl);
+
+ let dataTableOptions = {
+ select: {
+ style: 'os',
+ selector: 'td:not(.' + module._config.tableCellActionClass + ')'
+ },
+ tabIndex: -1,
+ dom: '<"flex-row flex-between"<"flex-col"l><"flex-col flex-grow"B><"flex-col"fS>>' +
+ '<"flex-row"<"flex-col flex-grow"tr>>' +
+ '<"flex-row flex-between"<"flex-col"i><"flex-col"p>>',
+ buttons: {
+ name: 'tableTools',
+ buttons: [
+ {
+ name: 'filterGroup',
+ tag: 'a',
+ className: module._config.moduleHeadlineIconClass,
+ text: '', // set by js (xEditable)
+ init: function(tableApi, node, config){
+
+ Util.getLocalStore('character').getItem(Util.getCurrentCharacterId()).then(data => {
+ let prependOptions = [{value: 0, text: 'unknown'}];
+ let sourceOptions = module._config.signatureGroupsLabels;
+ let selectedValues = [];
+
+ if(data && data.filterSignatureGroups && data.filterSignatureGroups.length){
+ // select local stored values
+ selectedValues = data.filterSignatureGroups;
+ }else{
+ // no default group filter options -> show all
+ selectedValues = sourceOptions.map(option => option.value);
+ selectedValues.unshift(0);
+ }
+
+ node.editable({
+ mode: 'popup',
+ type: 'checklist',
+ showbuttons: false,
+ onblur: 'submit',
+ highlight: false,
+ title: 'filter groups',
+ value: selectedValues,
+ prepend: prependOptions,
+ source: sourceOptions,
+ inputclass: module._config.editableUnknownInputClass,
+ display: function(value, sourceData){
+ // update filter button label
+ let html = 'filter';
+ let allSelected = value.length >= sourceData.length;
+ if( !allSelected ){
+ html += ' (' + value.length + ')';
+ }
+ $(this).toggleClass('active', !allSelected).html(html);
+ },
+ validate: function(value){
+ // convert string to int -> important for further processing
+ return {newValue: value.map(num => parseInt(num)), msg: null};
+ }
+ });
+
+ let allOptions = prependOptions.concat(sourceOptions);
+
+ node.on('save', {tableApi: tableApi, sourceOptions: allOptions}, (e, params) => {
+ // store values local -> IndexDB
+ Util.getLocalStore('character').setItem(`${Util.getCurrentCharacterId()}.filterSignatureGroups`, params.newValue);
+ module.searchGroupColumn(e.data.tableApi, params.newValue, e.data.sourceOptions);
+ });
+
+ // set initial search string -> even if table ist currently empty
+ module.searchGroupColumn(tableApi, selectedValues, allOptions);
+ });
+ }
+ },
+ {
+ name: 'undo',
+ tag: 'a',
+ className: module._config.moduleHeadlineIconClass,
+ text: '', // set by js (xEditable)
+ init: function(tableApi, node, config){
+
+ let getIconByAction = action => {
+ switch(action){
+ case 'add': return 'fa-plus txt-color-green';
+ case 'delete': return 'fa-times txt-color-redDark';
+ case 'edit': return 'fa-pen txt-color-orangeDark';
+ case 'undo': return 'fa-undo txt-color-grayLight';
+ case 'sync': return 'fa-exchange-alt txt-color-orangeDark';
+ }
+ };
+
+ node.on('shown', (e, editable) => {
+ // check if history options loaded -> else forward to error function
+ if(!editable.input.$input.length){
+ editable.options.error.call(editable, ['No record found']);
+ }else{
+ // disable first option
+ editable.input.$input.first().prop('disabled', true);
+ // preselect second option
+ //editable.input.$input.eq(1).prop('checked', true);
+
+ // "fake" radio button behaviour
+ editable.input.$input.attr('name', 'test').attr('type', 'radio');
+
+ // preselect second option
+ editable.input.$input.eq(1).prop('checked', true);
+
+ let labels = editable.container.$form.find('label');
+ labels.addClass('radio');
+
+ for(let span of labels.find('span')){
+ span.style.display = 'inline-block';
+ span.style.width = '100%';
+ let parts = span.innerText.trim().split('%%');
+ parts[0] = '' + parts[0] + '';
+ parts[1] = '';
+ parts[2] = '' + parts[2] + '';
+ parts[3] = '' + parts[3] + '';
+ span.innerHTML = parts.join('');
+ }
+
+ labels.initTooltips();
+ }
+ });
+
+ let processLockPromise = null;
+
+ node.editable({
+ url: Init.path.api + '/SignatureHistory',
+ ajaxOptions: {
+ processData: false,
+ type: 'PUT',
+ dataType: 'json', //assuming json response
+ contentType: 'application/json',
+ beforeSend: function(xhr, settings){
+ processLockPromise = tableApi.newProcess('lock');
+ },
+ },
+ params: function(params){
+ return JSON.stringify({
+ systemId: params.pk,
+ stamp: params.value[0]
+ });
+ },
+ mode: 'popup',
+ type: 'checklist',
+ showbuttons: true,
+ highlight: false,
+ title: 'historical records',
+ name: 'history',
+ pk: module._systemData.id,
+ source: Init.path.api + '/SignatureHistory/' + module._systemData.id,
+ sourceOptions: {
+ type: 'GET',
+ data: {
+ mapId: module._systemData.mapId
+ }
+ },
+ sourceCache: false, // always get new source options on open
+ display: function(value){
+ $(this).html('undo');
+ },
+ success: (response, newValue) => {
+ // update signature table
+ tableApi.endProcess(processLockPromise);
+
+ module.updateSignatureTable(tableApi, response, true);
+ },
+ error: function(errors){
+ let errorAll = [];
+ if(errors && errors.responseText){ //ajax error, errors = xhr object
+ if(errors.responseJSON && errors.responseJSON.error){
+ for(let error of errors.responseJSON.error){
+ errorAll.push(error.message);
+ }
+ }else{
+ //fallback -> other ajax error
+ errorAll.push(errors.responseText);
+ }
+ }else if(errors.length){
+ // manual called error
+ errorAll = errors;
+
+ let form = this.container.$form.addClass('has-error');
+ form.find('.editable-buttons').hide();
+ form.find('.editable-input').hide();
+ form.find('.editable-error-block').html(errorAll.join('
')).show();
+ }
+
+ return errorAll.join(' | ');
+ },
+ validate: function(value){
+ if(!Array.isArray(value) || value.length !== 1){
+ return {newValue: value, msg: 'No record selected', field: this};
+ }
+ }
+ });
+ }
+ },
+ {
+ name: 'selectAll',
+ tag: 'a',
+ className: module._config.moduleHeadlineIconClass,
+ text: 'select all',
+ action: function(e, tableApi, node, config){
+ let rows = tableApi.rows();
+ let rowCountAll = rows.count();
+ let rowCountSelected = tableApi.rows({selected: true}).count();
+
+ if(rowCountSelected && (rowCountSelected >= rowCountAll)){
+ rows.deselect();
+ node.removeClass('active');
+ }else{
+ rows.select();
+ node.addClass('active');
+ }
+ }
+ },
+ {
+ extend: 'selected',
+ name: 'delete',
+ tag: 'a',
+ className: [module._config.moduleHeadlineIconClass, module._config.sigTableClearButtonClass].join(' '),
+ text: 'delete (0)',
+ init: function(tableApi, node, config){
+ // call `super` init() for "extend: 'selected'" button
+ $.fn.dataTable.ext.buttons.selected.init.call(this, tableApi, node, config);
+
+ tableApi.on('select deselect', (e, tableApi, type, indexes) => {
+ let rowCountAll = tableApi.rows().count();
+ let rowCountSelected = tableApi.rows({selected: true}).count();
+ let countText = (rowCountSelected >= rowCountAll) ? 'all' : rowCountSelected;
+ node.find('i+span').text(countText);
+ });
+ },
+ action: function(e, tableApi, node, config){
+ let selectedRows = tableApi.rows({selected: true});
+ if(selectedRows.count()){
+ bootbox.confirm('Delete ' + selectedRows.count() + ' signature?', result => {
+ if(result){
+ // for some reason using 'tableApi' as first param in deleteSignature()
+ // does not work because my custom plugin fkt 'newProcess()' is missing here...
+ // -> using 'this' seems to work...
+ module.deleteSignatures(this, selectedRows);
+ }
+ });
+ }
+ }
+ }
+ ]
+ },
+ initComplete: function(settings, json){
+ let tableApi = this.api();
+ module.initCharacterInfoTooltip(this, tableApi);
+
+ $(this).on('keyup', 'td', {tableApi: tableApi}, function(e){
+ module.keyNavigation(tableApi, e);
+ });
+
+
+ Counter.initTableCounter(this, ['created:name', 'updated:name']);
+ }
+ };
+
+ let tableApi = $(primaryTableEl).DataTable($.extend(true, dataTableOptions, module.getSignatureDataTableDefaults(module._systemData.mapId, module._systemData)));
+
+ // "Responsive" dataTables plugin did not load automatic (because table is invisible onInit)
+ // -> manually start "Responsive" extension -> see default dataTable setting for config e.g. breakpoints
+ new $.fn.dataTable.Responsive(tableApi);
+
+ // "Select" Datatables Plugin
+ tableApi.select();
+
+ let buttons = new $.fn.dataTable.Buttons(tableApi, {
+ dom: {
+ container: {
+ tag: 'h5',
+ className: 'pull-right'
+ },
+ button: {
+ tag: 'i',
+ className: ['fas', 'fa-fw', module._config.moduleHeadlineIconClass].join(' '),
+ },
+ buttonLiner: {
+ tag: null
+ }
+ },
+ name: 'moduleTools',
+ buttons: [
+ {
+ name: 'add',
+ className: ['fa-plus', module._config.moduleHeadlineIconAddClass].join(' '),
+ titleAttr: 'add',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ module.toggleAddSignature('auto');
+ }
+ },
+ {
+ name: 'reader',
+ className: ['fa-paste', module._config.moduleHeadlineIconReaderClass].join(' '),
+ titleAttr: 'signature reader',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ module.showSignatureReaderDialog(tableApi);
+ }
+ },
+ {
+ name: 'lazy',
+ className: ['fa-exchange-alt', module._config.moduleHeadlineIconLazyClass].join(' '),
+ titleAttr: 'lazy \'delete\' signatures',
+ attr: {
+ 'data-toggle': 'tooltip',
+ 'data-html': true
+ },
+ action: function(e, tableApi, node, config){
+ $(node).toggleClass('active');
+ }
+ }
+ ]
+ });
+
+ tableApi.buttons('moduleTools', null).container().appendTo(module.moduleElement.querySelector('.' + module._config.headClassName));
+
+ // lock table until module is fully rendered
+ $(module.moduleElement).data('lockPromise', tableApi.newProcess('lock'));
+ }
+
+ /**
+ * get dataTables default options for signature tables
+ * @param mapId
+ * @param systemData
+ * @returns {{}}
+ */
+ getSignatureDataTableDefaults(mapId, systemData){
+ let module = this;
+
+ /**
+ * add map/system specific data for each editable field in the sig-table
+ * @param params
+ * @returns {*}
+ */
+ let modifyFieldParamsOnSend = params => {
+ params.systemId = systemData.id;
+ return params;
+ };
+
+ let dataTableDefaults = {
+ pfMeta: {
+ 'mapId': mapId,
+ 'systemId': systemData.id
+ },
+ order: [1, 'asc'],
+ rowId: rowData => module._config.sigTableRowIdPrefix + rowData.id,
+ language: {
+ emptyTable: 'No signatures added',
+ info: 'Showing _START_ to _END_ of _TOTAL_ signatures',
+ infoEmpty: 'Showing 0 to 0 of 0 signatures',
+ infoFiltered: '( from _MAX_ total)',
+ lengthMenu: 'Show _MENU_',
+ zeroRecords: 'No signatures recorded'
+ },
+ columnDefs: [
+ {
+ targets: 0,
+ name: 'status',
+ orderable: true,
+ searchable: false,
+ title: '',
+ width: 2,
+ class: ['text-center'].join(' '),
+ data: 'updated',
+ type: 'html',
+ render: {
+ _: (cellData, type, rowData, meta) => {
+ let value = '';
+ if(cellData && cellData.character){
+ value = Util.getStatusInfoForCharacter(cellData.character, 'class');
+ }
+
+ if(type === 'display'){
+ value = '';
+ }
+ return value;
+ }
+ }
+ },{
+ targets: 1,
+ name: 'id',
+ orderable: true,
+ searchable: true,
+ title: 'id',
+ type: 'string',
+ width: 12,
+ class: [module._config.tableCellFocusClass, module._config.sigTableEditSigNameInput, module._config.fontUppercaseClass].join(' '),
+ data: 'name',
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ module.updateTooltip(cell, cellData);
+
+ module.editableOnSave(tableApi, cell, [], ['group:name', 'type:name', 'action:name']);
+ module.editableOnHidden(tableApi, cell);
+
+ $(cell).editable($.extend({
+ mode: 'popup',
+ type: 'text',
+ title: 'signature id',
+ name: 'name',
+ pk: rowData.id || null,
+ emptytext: '? ? ?',
+ value: cellData,
+ inputclass: module._config.fontUppercaseClass,
+ display: function(value){
+ // change display value to first 3 chars -> unicode beware
+ $(this).text([...$.trim(value)].slice(0, 3).join('').toLowerCase());
+ },
+ validate: function(value){
+ let msg = false;
+ //let mbLength = [...$.trim(value)].length; // unicode beware
+ if(! value.trimChars().match(/^[a-zA-Z]{3}-\d{3}$/)){
+ msg = 'ID format invalid. E.g.: ABC-123';
+ }
+
+ if(msg){
+ return {newValue: value, msg: msg, field: this};
+ }
+ },
+ params: modifyFieldParamsOnSend,
+ success: function(response, newValue){
+ tableApi.cell(cell).data(newValue);
+
+ $(this).pulseBackgroundColor('changed');
+ module.updateTooltip(cell, newValue);
+
+ if(response){
+ let newRowData = response[0];
+ module.updateSignatureCell(tableApi, rowIndex, 'status:name', newRowData.updated);
+ module.updateSignatureCell(tableApi, rowIndex, 'updated:name', newRowData.updated.updated);
+ }
+ tableApi.draw();
+ }
+ }, SystemSignatureModule.editableDefaults));
+ }
+ },{
+ targets: 2,
+ name: 'group',
+ orderable: true,
+ searchable: true,
+ title: 'group',
+ type: 'string', // required for sort/filter because initial data type is numeric
+ width: 40,
+ class: [module._config.tableCellFocusClass].join(' '),
+ data: 'groupId',
+ render: {
+ sort: module.getGroupLabelById.bind(module),
+ filter: module.getGroupLabelById.bind(module)
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ module.editableOnSave(tableApi, cell, ['type:name'], ['type:name', 'action:name']);
+ module.editableOnHidden(tableApi, cell);
+ module.editableGroupOnShown(cell);
+ module.editableGroupOnSave(tableApi, cell);
+
+ $(cell).editable($.extend({
+ mode: 'popup',
+ type: 'select',
+ title: 'group',
+ name: 'groupId',
+ pk: rowData.id || null,
+ emptytext: 'unknown',
+ onblur: 'submit',
+ showbuttons: false,
+ value: cellData,
+ prepend: [{value: 0, text: ''}],
+ params: modifyFieldParamsOnSend,
+ source: module._config.signatureGroupsLabels,
+ display: function(value, sourceData){
+ let selected = $.fn.editableutils.itemsByValue(value, sourceData);
+ if(selected.length && selected[0].value > 0){
+ $(this).html(selected[0].text);
+ }else{
+ $(this).empty();
+ }
+ },
+ validate: function(value){
+ // convert string to int -> important for further processing
+ // -> on submit record (new signature) validate() is called and no error should be returned
+ // value should already be integer
+ if( !Number.isInteger(value) ){
+ return {newValue: parseInt(value) || 0, msg: null};
+ }
+ },
+ success: function(response, newValue){
+ tableApi.cell(cell).data(newValue);
+
+ $(this).pulseBackgroundColor('changed');
+
+ if(response){
+ let newRowData = response[0];
+ module.updateSignatureCell(tableApi, rowIndex, 'status:name', newRowData.updated);
+ module.updateSignatureCell(tableApi, rowIndex, 'updated:name', newRowData.updated.updated);
+ }
+ tableApi.draw();
+
+ // find related "type" select (same row) and change options ---------------------------
+ let signatureTypeCell = module.getNeighboringCell(tableApi, cell, 'type:name');
+ let signatureTypeField = signatureTypeCell.nodes().to$();
+ module.editableSelectCheck(signatureTypeField);
+
+ signatureTypeCell.data(0);
+ signatureTypeField.editable('setValue', 0);
+
+
+ // find "connection" select (same row) and change "enabled" flag ----------------------
+ let signatureConnectionCell = module.getNeighboringCell(tableApi, cell, 'connection:name');
+ let signatureConnectionField = signatureConnectionCell.nodes().to$();
+
+ if(newValue === 5){
+ // wormhole
+ module.editableEnable(signatureConnectionField);
+ }else{
+ module.checkConnectionConflicts();
+ module.editableDisable(signatureConnectionField);
+ }
+ signatureConnectionCell.data(0);
+ signatureConnectionField.editable('setValue', 0);
+ }
+ }, SystemSignatureModule.editableDefaults));
+ }
+ },{
+ targets: 3,
+ name: 'type',
+ orderable: false,
+ searchable: false,
+ title: 'type',
+ type: 'string', // required for sort/filter because initial data type is numeric
+ width: 180,
+ class: [module._config.tableCellFocusClass, module._config.tableCellTypeClass].join(' '),
+ data: 'typeId',
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ module.editableOnSave(tableApi, cell, ['connection:name'], ['action:name']);
+ module.editableOnHidden(tableApi, cell);
+ module.editableTypeOnInit(cell);
+ module.editableTypeOnShown(cell);
+
+ $(cell).editable($.extend({
+ mode: 'popup',
+ type: 'select',
+ title: 'type',
+ name: 'typeId',
+ pk: rowData.id || null,
+ emptytext: 'unknown',
+ onblur: 'submit',
+ showbuttons: false,
+ disabled: rowData.groupId <= 0, // initial disabled if groupId not set
+ value: cellData,
+ prepend: [{value: 0, text: ''}],
+ params: modifyFieldParamsOnSend,
+ source: function(){
+ // get current row data (important!)
+ // -> "rowData" param is not current state, values are "on createCell()" state
+ let rowData = tableApi.row($(cell).parents('tr')).data();
+
+ return SystemSignatureModule.getSignatureTypeOptions(
+ systemData.type.id,
+ Util.getAreaIdBySecurity(systemData.security),
+ rowData.groupId,
+ systemData
+ );
+ },
+ display: function(value, sourceData){
+ let selected = $.fn.editableutils.itemsByValue(value, sourceData);
+ if(selected.length && selected[0].value > 0){
+ $(this).html(FormElement.formatSignatureTypeSelectionData({text: selected[0].text}, undefined, {showWhSizeLabel: true}));
+ }else{
+ $(this).empty();
+ }
+ },
+ validate: function(value){
+ // convert string to int -> important for further processing
+ // -> on submit record (new signature) validate() is called and no error should be returned
+ // value should already be integer
+ if( !Number.isInteger(value) ){
+ return {newValue: parseInt(value) || 0, msg: null};
+ }
+ },
+ success: function(response, newValue){
+ tableApi.cell(cell).data(newValue);
+
+ $(this).pulseBackgroundColor('changed');
+
+ if(response){
+ let newRowData = response[0];
+ module.updateSignatureCell(tableApi, rowIndex, 'status:name', newRowData.updated);
+ module.updateSignatureCell(tableApi, rowIndex, 'updated:name', newRowData.updated.updated);
+ }
+ tableApi.draw();
+ }
+ }, SystemSignatureModule.editableDefaults));
+ }
+ },{
+ targets: 4,
+ name: 'description',
+ orderable: false,
+ searchable: true,
+ title: 'description',
+ class: [module._config.tableCellFocusClass, module._config.tableCellActionClass].join(' '),
+ type: 'html',
+ data: 'description',
+ defaultContent: '',
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ module.editableOnSave(tableApi, cell, [], ['action:name']);
+ module.editableOnHidden(tableApi, cell);
+ module.editableDescriptionOnShown(cell);
+ module.editableDescriptionOnHidden(cell);
+
+ $(cell).editable($.extend({
+ mode: 'inline',
+ type: 'textarea',
+ title: 'description',
+ name: 'description',
+ pk: rowData.id || null,
+ emptytext: '',
+ onblur: 'submit',
+ showbuttons: false,
+ inputclass: module._config.editableDescriptionInputClass,
+ emptyclass: module._config.moduleHeadlineIconClass,
+ params: modifyFieldParamsOnSend,
+ success: function(response, newValue){
+ tableApi.cell(cell).data(newValue);
+
+ $(this).pulseBackgroundColor('changed');
+
+ if(response){
+ let newRowData = response[0];
+ module.updateSignatureCell(tableApi, rowIndex, 'status:name', newRowData.updated);
+ module.updateSignatureCell(tableApi, rowIndex, 'updated:name', newRowData.updated.updated);
+ }
+ tableApi.draw();
+ }
+ }, SystemSignatureModule.editableDefaults));
+ }
+ },{
+ targets: 5,
+ name: 'connection',
+ orderable: false,
+ searchable: false,
+ title: 'leads to',
+ type: 'string', // required for sort/filter because initial data type is numeric
+ className: [module._config.tableCellFocusClass, module._config.tableCellConnectionClass].join(' '),
+ width: 80,
+ data: 'connection.id',
+ defaultContent: 0,
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ module.editableOnSave(tableApi, cell, [], ['action:name']);
+ module.editableOnHidden(tableApi, cell);
+ module.editableConnectionOnInit(cell);
+ module.editableConnectionOnShown(tableApi, cell);
+ module.editableConnectionOnSave(cell);
+
+ $(cell).editable($.extend({
+ mode: 'popup',
+ type: 'select',
+ title: 'system',
+ name: 'connectionId',
+ pk: rowData.id || null,
+ emptytext: 'unknown',
+ onblur: 'submit',
+ showbuttons: false,
+ disabled: rowData.groupId !== 5, // initial disabled if NON wh
+ value: cellData,
+ prepend: [{value: 0, text: ''}],
+ params: modifyFieldParamsOnSend,
+ source: function(){
+ let activeMap = Util.getMapModule().getActiveMap();
+ let mapId = activeMap.data('id');
+ return SystemSignatureModule.getSignatureConnectionOptions(mapId, systemData);
+ },
+ display: function(value, sourceData){
+ let selected = $.fn.editableutils.itemsByValue(value, sourceData);
+ if(selected.length && selected[0].value > 0){
+ let errorIcon = ' ';
+ $(this).html(FormElement.formatSignatureConnectionSelectionData({
+ text: selected[0].text,
+ metaData: selected[0].metaData
+ })).prepend(errorIcon);
+ }else{
+ $(this).empty();
+ }
+ },
+ validate: function(value){
+ // convert string to int -> important for further processing
+ // -> on submit record (new signature) validate() is called and no error should be returned
+ // value should already be integer
+ if(!Number.isInteger(value)){
+ return {newValue: parseInt(value) || 0, msg: null};
+ }
+ },
+ success: function(response, newValue){
+ tableApi.cell(cell).data(newValue);
+
+ $(this).pulseBackgroundColor('changed');
+
+ if(response){
+ let newRowData = response[0];
+ module.updateSignatureCell(tableApi, rowIndex, 'status:name', newRowData.updated);
+ module.updateSignatureCell(tableApi, rowIndex, 'updated:name', newRowData.updated.updated);
+ }
+ tableApi.draw();
+ }
+ }, SystemSignatureModule.editableDefaults));
+ }
+ },{
+ targets: 6,
+ name: 'created',
+ title: 'created',
+ searchable: false,
+ width: 80,
+ className: ['text-right', module._config.tableCellCounterClass, 'min-screen-d'].join(' '),
+ data: 'created.created',
+ defaultContent: '',
+ },{
+ targets: 7,
+ name: 'updated',
+ title: 'updated',
+ searchable: false,
+ width: 80,
+ className: ['text-right', module._config.tableCellCounterClass, 'min-screen-d'].join(' '),
+ data: 'updated.updated',
+ defaultContent: ''
+ },{
+ targets: 8,
+ name: 'info',
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', Util.config.helpClass , Util.config.popoverTriggerClass].join(' '),
+ data: 'created.created',
+ defaultContent: '',
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ if(cellData){
+ return '';
+ }
+ }
+ }
+ },{
+ targets: 9,
+ name: 'action',
+ title: '',
+ orderable: false,
+ searchable: false,
+ width: 10,
+ class: ['text-center', module._config.tableCellFocusClass, module._config.tableCellActionClass].join(' '),
+ data: null,
+ render: {
+ display: (cellData, type, rowData, meta) => {
+ let val = '';
+ if(rowData.id){
+ val = '';
+ }
+ return val;
+ }
+ },
+ createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
+ let tableApi = this.api();
+
+ if(rowData.id){
+ // delete signature -----------------------------------------------------------------------
+ let confirmationSettings = {
+ title: '---',
+ template: Util.getConfirmationTemplate(Util.getConfirmationContent([{
+ name: 'deleteConnection',
+ value: '1',
+ label: 'delete connection',
+ class: 'pf-editable-warn',
+ checked: true
+ }]), {
+ size: 'small',
+ noTitle: true
+ }),
+ onConfirm: function(e, target){
+ // top scroll to top
+ e.preventDefault();
+
+ // get form data (check if form tag is not hidden!) from confirmation popover
+ let tip = target.data('bs.confirmation').tip();
+ let form = tip.find('form:not(.hidden)').first();
+ let formData = form.getFormValues();
+ let deleteOptions = Util.getObjVal(formData, 'deleteConnection') ? formData : {};
+
+ // add "processing" state or connection that will be deleted as well
+ if(deleteOptions.deleteConnection){
+ let connectionId = tableApi.cell(rowIndex, 'connection:name').data();
+ if(connectionId){
+ let metaData = module.getTableMetaData(tableApi);
+ let connection = $().getConnectionById(metaData.mapId, connectionId);
+ if(connection){
+ connection.addType('state_process');
+ }
+ }
+ }
+
+ let deleteRowElement = $(target).parents('tr');
+ let row = tableApi.rows(deleteRowElement);
+ module.deleteSignatures(tableApi, row, deleteOptions);
+ },
+ onShow: function(e, target){
+ // hide "deleteConnection" checkbox if no connectionId linked
+ let tip = target.data('bs.confirmation').tip();
+ let form = tip.find('form').first();
+ let connectionId = tableApi.cell(rowIndex, 'connection:name').data();
+ form.toggleClass('hidden', !connectionId);
+ }
+ };
+
+ $(cell).confirmation(confirmationSettings);
+ }else{
+ // add new signature ----------------------------------------------------------------------
+ $(cell).on('click', {tableApi: tableApi, rowIndex: rowIndex}, function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ let secondaryTableApi = e.data.tableApi;
+ let metaData = module.getTableMetaData(secondaryTableApi);
+ let primaryTableApi = module.getDataTableInstance(metaData.mapId, metaData.systemId, 'primary');
+
+ let formFields = secondaryTableApi.row(e.data.rowIndex).nodes().to$().find('.editable');
+
+ // the "hide" makes sure to take care about open editable fields (e.g. description)
+ // otherwise, changes would not be submitted in this field (not necessary)
+ formFields.editable('hide');
+
+ let processLockPromise = null;
+ let processRequestPromise = null;
+
+ // submit all xEditable fields
+ formFields.editable('submit', {
+ url: Init.path.api + '/Signature',
+ ajaxOptions: {
+ processData: false, // we need to "process" data in beforeSend()
+ type: 'PUT',
+ dataType: 'json', //assuming json response
+ contentType: 'application/json',
+ beforeSend: function(xhr, settings){
+ settings.data = JSON.stringify(settings.data);
+
+ processLockPromise = primaryTableApi.newProcess('lock');
+ processRequestPromise = primaryTableApi.newProcess('request');
+
+ },
+ context: {
+ primaryTableApi: primaryTableApi,
+ secondaryTableApi: secondaryTableApi,
+ }
+ },
+ data: {
+ systemId: metaData.systemId
+ },
+ error: SystemSignatureModule.editableDefaults.error, // user default xEditable error function
+ success: function(response, editableConfig){
+ let context = editableConfig.ajaxOptions.context;
+ let primaryTableApi = context.primaryTableApi;
+ let secondaryTableApi = context.secondaryTableApi;
+
+ let signatureData = response[0];
+ let row = module.addSignatureRow(primaryTableApi, signatureData);
+ if(row){
+ primaryTableApi.draw();
+ // highlight
+ row.nodes().to$().pulseBackgroundColor('added');
+
+ // prepare "add signature" table for new entry -> reset -------------------
+ secondaryTableApi.clear().row.add($.extend(true, {}, SystemSignatureModule.emptySignatureData)).draw();
+
+ Util.showNotify({
+ title: 'Signature added',
+ text: 'Name: ' + signatureData.name,
+ type: 'success'
+ });
+
+ // update signature bar
+ module.updateScannedSignaturesBar(primaryTableApi, {showNotice: true});
+ }
+
+ primaryTableApi.endProcess(processLockPromise);
+ primaryTableApi.endProcess(processRequestPromise);
+ }
+ });
+ });
+ }
+ }
+ }
+ ],
+ createdRow: function(row, data, dataIndex){
+ // enable tabbing for interactive cells
+ let focusCells = $(row).find('.' + module._config.tableCellFocusClass + ':not(.editable-disabled)').attr('tabindex', 0);
+ // enable "return" key -> click()
+ focusCells.on('keydown', function(e){
+ e.stopPropagation();
+ if(e.which === 13){
+ $(this).trigger('click');
+ }
+ });
+ },
+ rowCallback: function(){
+ let tableApi = this.api();
+ let time = Math.floor((new Date()).getTime());
+
+ tableApi.cells(null, ['updated:name']).every(function(rowIndex, colIndex, tableLoopCount, cellLoopCount){
+ let cell = this;
+ let node = cell.node();
+ let cellData = cell.data();
+ let diff = time - cellData * 1000;
+
+ // highlight cell: age > 1 day
+ $(node).toggleClass('txt-color txt-color-warning', diff > 86400000);
+ });
+ }
+ };
+
+ return dataTableDefaults;
+ }
+
+ /**
+ * toggle primary table visibility
+ * @param show
+ */
+ toggleAddSignature(show = 'auto'){
+ let button = $(this.moduleElement).find('.' + this._config.moduleHeadlineIconAddClass);
+ let toolsElement = $(this.moduleElement).find('.' + this._config.tableToolsActionClass);
+ button.toggleClass('active', show === 'auto' ? undefined : show);
+
+ if(toolsElement.is(':visible') && (!show || show === 'auto')){
+ // hide container
+ toolsElement.velocity('stop').velocity({
+ opacity: [0, 1],
+ height: [0, '70px']
+ },{
+ duration: 150,
+ display: 'none'
+ });
+ }else if(!toolsElement.is(':visible') && (show || show === 'auto')){
+ // show container
+ toolsElement.velocity('stop').velocity({
+ opacity: [1, 0],
+ height: ['70px', 0]
+ },{
+ duration: 150,
+ display: 'block',
+ complete: () => {
+ this.focusNewSignatureEditableField();
+ }
+ });
+ }else if(toolsElement.is(':visible') && show){
+ // still visible -> no animation
+ this.focusNewSignatureEditableField();
+ }
+ }
+
+ /**
+ * filter table "group" column
+ * @param tableApi
+ * @param newValue
+ * @param sourceOptions
+ */
+ searchGroupColumn(tableApi, newValue, sourceOptions){
+ let column = tableApi.column('group:name');
+ let pattern = '';
+
+ if(newValue.length <= sourceOptions.length){
+ // all options selected + "prepend" option
+ let selected = $.fn.editableutils.itemsByValue(newValue, sourceOptions);
+
+ pattern = selected.map(option => option.value !== 0 ? $.fn.dataTable.util.escapeRegex(option.text) : '^$').join('|');
+ }
+ column.search(pattern, true, false).draw();
+ }
+
+ /**
+ * init character info tooltips
+ * -> e.g. table cell 'question mark' icon
+ * @param element
+ * @param tableApi
+ */
+ initCharacterInfoTooltip(element, tableApi){
+ element.hoverIntent({
+ over: function(e){
+ let cellElement = $(this);
+ let rowData = tableApi.row(cellElement.parents('tr')).data();
+ cellElement.addCharacterInfoTooltip(rowData, {
+ trigger: 'manual',
+ placement: 'top',
+ show: true
+ });
+ },
+ out: function(e){
+ $(this).destroyPopover();
+ },
+ selector: 'td.' + Util.config.helpClass
+ });
+ }
+
+ /**
+ * Parsed scan result data (from EVE client) should be enriched with some data
+ * -> fill up more columns in the 'preview' signature tab.e
+ * @param signatureData
+ * @returns {*}
+ */
+ enrichParsedSignatureData(signatureData){
+ let characterData = Util.getCurrentCharacter();
+ let timestamp = Math.floor((new Date()).getTime() / 1000);
+
+ for(let i = 0; i < signatureData.length; i++){
+ signatureData[i].created = {
+ created: timestamp,
+ character: characterData
+ };
+ signatureData[i].updated = {
+ updated: timestamp,
+ character: characterData
+ };
+ }
+
+ return signatureData;
+ }
+
+ /**
+ * parses a copy&paste string from ingame scanning window
+ * @param clipboard
+ * @returns {Array}
+ */
+ parseSignatureString(clipboard){
+ let signatureData = [];
+
+ if(clipboard.length){
+ let signatureRows = clipboard.split(/\r\n|\r|\n/g);
+ let signatureGroupOptions = this._config.signatureGroupsNames;
+ let invalidSignatures = 0;
+
+ for(let i = 0; i < signatureRows.length; i++){
+ let rowData = signatureRows[i].split(/\t|\s{4}/g);
+ if(rowData.length === 6){
+ // check if sig Type = anomaly or combat site
+ if(SystemSignatureModule.validSignatureNames.indexOf(rowData[1]) !== -1){
+
+ let sigGroup = $.trim(rowData[2]).toLowerCase();
+ let sigDescription = $.trim(rowData[3]);
+ let sigGroupId = 0;
+ let typeId = 0;
+
+ // get groupId by groupName
+ for(let groupOption of signatureGroupOptions){
+ let reg = new RegExp(groupOption.text, 'i');
+ if(reg.test(sigGroup)){
+ sigGroupId = groupOption.value;
+ break;
+ }
+ }
+
+ // wormhole type cant be extracted from signature string -> skip function call
+ if(sigGroupId !== 5){
+ // try to get "typeId" from description string
+ let sigDescriptionLowerCase = sigDescription.toLowerCase();
+
+ let typeOptions = SystemSignatureModule.getSignatureTypeOptions(
+ this._systemData.type.id,
+ Util.getAreaIdBySecurity(this._systemData.security),
+ sigGroupId,
+ this._systemData
+ );
+
+ for(let [key, name] of Object.entries(Util.flattenXEditableSelectArray(typeOptions))){
+ if(name.toLowerCase() === sigDescriptionLowerCase){
+ typeId = parseInt(key);
+ break;
+ }
+ }
+
+ // set signature name as "description" if signature matching failed
+ sigDescription = (typeId === 0) ? sigDescription : '';
+ }else{
+ sigDescription = '';
+ }
+
+ // map array values to signature Object
+ let signatureObj = {
+ systemId: this._systemData.id,
+ name: $.trim(rowData[0]).toLowerCase(),
+ groupId: sigGroupId,
+ typeId: typeId,
+ description: sigDescription
+ };
+
+ signatureData.push(signatureObj);
+ }else{
+ invalidSignatures++;
+ }
+ }
+ }
+
+ if(invalidSignatures > 0){
+ let notification = invalidSignatures + ' / ' + signatureRows.length + ' signatures invalid';
+ Util.showNotify({title: 'Invalid signature(s)', text: notification, type: 'warning'});
+ }
+ }
+
+ return signatureData;
+ }
+
+ /**
+ * updates the signature table with all signatures pasted into the "signature reader" dialog
+ * -> Hint: copy&paste signature data (without any open dialog) will add signatures as well
+ * @param tableApi
+ * @param clipboard data stream
+ * @param options
+ */
+ updateSignatureTableByClipboard(tableApi, clipboard, options){
+ if(tableApi.hasProcesses('request')){
+ console.info('Update signature table By clipboard locked.');
+ return;
+ }
+
+ let saveSignatureData = signatureData => {
+ // lock update function until request is finished
+ let processLockPromise = tableApi.newProcess('lock');
+ let processRequestPromise = tableApi.newProcess('request');
+
+ Util.request(
+ 'POST',
+ 'Signature',
+ [],
+ {
+ signatures: signatureData,
+ deleteOld: options.deleteOld || 0,
+ deleteConnection: options.deleteConnection || 0,
+ systemId: parseInt(this._systemData.id)
+ },
+ {
+ tableApi: tableApi,
+ processLockPromise: processLockPromise,
+ processRequestPromise: processRequestPromise
+ },
+ context => {
+ context.tableApi.endProcess(context.processLockPromise);
+ context.tableApi.endProcess(context.processRequestPromise);
+ }).then(
+ payload => {
+ // updates table with new/updated signature information
+ this.updateSignatureTable(payload.context.tableApi, payload.data, !!options.deleteOld);
+ },
+ Util.handleAjaxErrorResponse
+ );
+ };
+
+ // parse input stream
+ let signatureData = this.parseSignatureString(clipboard);
+ if(signatureData.length > 0){
+ // valid signature data parsed
+
+ // check if signatures will be added to a system where character is currently in
+ // if character is not in any system -> id === undefined -> no "confirmation required
+ let currentLocationData = Util.getCurrentLocationData();
+ if(
+ currentLocationData.id &&
+ currentLocationData.id !== this._systemData.systemId
+ ){
+ let systemNameStr = (this._systemData.name === this._systemData.alias) ?
+ '"' + this._systemData.name + '"' :
+ '"' + this._systemData.alias + '" (' + this._systemData.name + ')';
+ systemNameStr = '' + systemNameStr + '';
+
+ let msg = 'Update signatures in ' + systemNameStr + ' ? This is not your current location, "' + currentLocationData.name + '" !';
+ bootbox.confirm(msg, result => {
+ if(result){
+ saveSignatureData(signatureData);
+ }
+ });
+ }else{
+ // current system selected -> no "confirmation" required
+ saveSignatureData(signatureData);
+ }
+ }
+ }
+
+ /**
+ * deletes signature rows from signature table
+ * @param tableApi
+ * @param rows
+ * @param deleteOptions
+ */
+ deleteSignatures(tableApi, rows, deleteOptions = {}){
+ let module = this;
+ // get unique id array from rows -> in case there are 2 rows with same id -> you never know
+ let signatureIds = [...new Set(rows.data().toArray().map(rowData => rowData.id))];
+ let metaData = module.getTableMetaData(tableApi);
+ let data = Object.assign(deleteOptions, {
+ systemId: metaData.systemId
+ });
+
+ let processRequestPromise = tableApi.newProcess('request');
+
+ Util.request('DELETE', 'Signature', signatureIds, data, {
+ tableApi: tableApi,
+ processRequestPromise: processRequestPromise
+ },
+ context => {
+ context.tableApi.endProcess(context.processRequestPromise);
+ }).then(
+ payload => {
+ let tableApi = payload.context.tableApi;
+
+ // promises for all delete rows
+ let promisesToggleRow = [];
+ // get deleted rows -> match with response data
+ let rows = tableApi.rows((idx, rowData, node) => payload.data.includes(rowData.id));
+ // toggle hide animation for rows one by one...
+ rows.every(function (rowIdx, tableLoop, rowLoop) {
+ let row = this;
+ let rowElement = row.nodes().to$();
+
+ rowElement.pulseBackgroundColor('deleted');
+
+ promisesToggleRow.push(module.toggleTableRow(rowElement));
+ });
+
+ // ... all hide animations done ...
+ Promise.all(promisesToggleRow).then(payloads => {
+ // ... get deleted (hide animation done) and delete them
+ tableApi.rows(payloads.map(payload => payload.row)).remove().draw();
+
+ // update signature bar
+ module.updateScannedSignaturesBar(tableApi, {showNotice: false});
+
+ // update connection conflicts
+ module.checkConnectionConflicts();
+
+ let notificationOptions = {
+ type: 'success'
+ };
+ if (payloads.length === 1) {
+ notificationOptions.title = 'Signature deleted';
+ } else {
+ notificationOptions.title = payloads.length + ' Signatures deleted ';
+ }
+ module.showNotify(notificationOptions);
+ });
+ },
+ Util.handleAjaxErrorResponse
+ );
+ }
+
+ /**
+ * updates a single cell with new data (e.g. "updated" cell)
+ * @param tableApi
+ * @param rowIndex
+ * @param columnSelector
+ * @param data
+ */
+ updateSignatureCell(tableApi, rowIndex, columnSelector, data){
+ tableApi.cell(rowIndex, columnSelector).data(data);
+ }
+
+ /**
+ * check connectionIds for conflicts (multiple signatures -> same connection)
+ * -> show "conflict" icon next to select
+ */
+ checkConnectionConflicts(){
+ setTimeout(() => {
+ let connectionSelectsSelector = [this._config.sigTablePrimaryClass, this._config.sigTableSecondaryClass].map(
+ tableClass => '.' + tableClass + ' .' + this._config.tableCellConnectionClass + '.editable'
+ ).join(', ');
+
+ let connectionSelects = $(connectionSelectsSelector);
+ let connectionIds = [];
+ let duplicateConnectionIds = [];
+ let groupedSelects = [];
+
+ connectionSelects.each(function(){
+ let select = $(this);
+ let value = parseInt(select.editable('getValue', true) )|| 0;
+
+ if(
+ connectionIds.indexOf(value) > -1 &&
+ duplicateConnectionIds.indexOf(value) === -1
+ ){
+ // duplicate found
+ duplicateConnectionIds.push(value);
+ }
+
+ if(groupedSelects[value] !== undefined){
+ groupedSelects[value].push(select[0]);
+ }else{
+ groupedSelects[value] = [select[0]];
+ }
+
+ connectionIds.push(value);
+ });
+
+ // update "conflict" icon next to select label for connectionIds
+ connectionSelects.each(function(){
+ let select = $(this);
+ let value = parseInt(select.editable('getValue', true) )|| 0;
+ let conflictIcon = select.find('.fa-exclamation-triangle');
+ if(
+ duplicateConnectionIds.indexOf(value) > -1 &&
+ groupedSelects[value].indexOf(select[0]) > -1
+ ){
+ conflictIcon.removeClass('hide');
+ }else{
+ conflictIcon.addClass('hide');
+ }
+ });
+ }, 200);
+ }
+
+ /**
+ * get group label by groupId
+ * @param groupId
+ * @returns {string}
+ */
+ getGroupLabelById(groupId){
+ let options = this._config.signatureGroupsLabels.filter(option => option.value === groupId);
+ return options.length ? options[0].text : '';
+ }
+
+ /**
+ * helper function - get cell by columnSelector from same row as cell
+ * @param tableApi
+ * @param cell
+ * @param columnSelector
+ * @returns {*}
+ */
+ getNeighboringCell(tableApi, cell, columnSelector){
+ return tableApi.cell(tableApi.cell(cell).index().row, columnSelector);
+ }
+
+ /**
+ * get next cell by columnSelector
+ * @param tableApi
+ * @param cell
+ * @param columnSelectors
+ * @returns {*}
+ */
+ searchNextCell(tableApi, cell, columnSelectors){
+ if(columnSelectors.length){
+ // copy selectors -> .shift() modifies the orig array, important!
+ columnSelectors = columnSelectors.slice(0);
+ let nextCell = this.getNeighboringCell(tableApi, cell, columnSelectors.shift());
+ let nextCellElement = nextCell.nodes().to$();
+ if( nextCellElement.data('editable') ){
+ // cell is xEditable field -> skip "disabled" OR check value
+ let nextCellValue = nextCellElement.editable('getValue', true);
+ if(
+ [0, null].includes(nextCellValue) &&
+ !nextCellElement.data('editable').options.disabled
+ ){
+ // xEditable value is empty
+ return nextCell;
+ }else{
+ // search next cell
+ return this.searchNextCell(tableApi, cell, columnSelectors);
+ }
+ }else if( nextCell.index().column === tableApi.column(-1).index() ){
+ // NO xEditable cell BUT last column (=> action cell) -> OK
+ return nextCell;
+ }else{
+ console.error('No cell found for activation!');
+ }
+ }else{
+ // return origin cell
+ return tableApi.cell(cell);
+ }
+ }
+
+ /**
+ * make cell active -> focus() + show xEditable
+ * @param cell
+ */
+ activateCell(cell){
+ let cellElement = cell.nodes().to$();
+ // check if cell is visible and not e.g. immediately filtered out by a search filter
+ // -> https://github.com/exodus4d/pathfinder/issues/865
+ if(cellElement.is(':visible')){
+ // NO xEditable
+ cellElement.focus();
+
+ if(cellElement.data('editable')){
+ // cell is xEditable field -> show xEditable form
+ cellElement.editable('show');
+ }
+ }
+ }
+
+ /**
+ * search neighboring cell (same row) and set "active" -> show editable
+ * @param tableApi
+ * @param cell
+ * @param columnSelectors
+ */
+ activateNextCell(tableApi, cell, columnSelectors){
+ let nextCell = this.searchNextCell(tableApi, cell, columnSelectors);
+ this.activateCell(nextCell);
+ }
+
+ /**
+ * helper function - set 'save' observer for xEditable cell
+ * -> show "neighboring" xEditable field
+ * @param tableApi
+ * @param cell
+ * @param columnSelectorsAjax - used for Ajax save (edit signature)
+ * @param columnSelectorsDry - used for dry save (new signature)
+ */
+ editableOnSave(tableApi, cell, columnSelectorsAjax = [], columnSelectorsDry = []){
+ $(cell).on('save', (e, params) => {
+ if(params.response){
+ // send by Ajax
+ this.activateNextCell(tableApi, cell, columnSelectorsAjax);
+ }else{
+ // dry save - no request
+ this.activateNextCell(tableApi, cell, columnSelectorsDry);
+ }
+ });
+ }
+
+ /**
+ * helper function - set 'hidden' observer for xEditable cell
+ * -> set focus() on xEditable field
+ * @param tableApi
+ * @param cell
+ */
+ editableOnHidden(tableApi, cell){
+ $(cell).on('hidden', function(e, reason){
+ // re-focus element on close (keyboard navigation)
+ // 'save' event handles default focus (e.g. open new xEditable)
+ // 'hide' handles all the rest (experimental)
+ if(reason !== 'save'){
+ this.focus();
+ }
+ });
+ }
+
+ /**
+ * helper function - set 'shown' observer for xEditable type cell
+ * -> enable Select2 for xEditable form
+ * @param cell
+ */
+ editableGroupOnShown(cell){
+ $(cell).on('shown', (e, editable) => {
+ let inputField = editable.input.$input;
+ inputField.addClass('pf-select2').initSignatureGroupSelect();
+ });
+ }
+
+ /**
+ * helper function - set 'save' observer for xEditable group cell
+ * -> update scanned signature bar
+ * @param tableApi
+ * @param cell
+ */
+ editableGroupOnSave(tableApi, cell){
+ $(cell).on('save', (e, params) => {
+ if(params.response){
+ // send by Ajax
+ this.updateScannedSignaturesBar(tableApi, {showNotice: true});
+ }
+ });
+ }
+
+ /**
+ * helper function - set 'init' observer for xEditable type cell
+ * -> disable xEditable field if no options available
+ * @param cell
+ */
+ editableTypeOnInit(cell){
+ $(cell).on('init', (e, editable) => {
+ if(!editable.options.source().length){
+ this.editableDisable($(e.target));
+ }
+ });
+ }
+
+ /**
+ * helper function - set 'shown' observer for xEditable type cell
+ * -> enable Select2 for xEditable form
+ * @param cell
+ */
+ editableTypeOnShown(cell){
+ $(cell).on('shown', (e, editable) => {
+ // destroy possible open popovers (e.g. wormhole types)
+ $(e.target).destroyPopover(true);
+
+ let inputField = editable.input.$input;
+ let hasOptGroups = inputField.has('optgroup').length > 0;
+ inputField.addClass('pf-select2').initSignatureTypeSelect({}, hasOptGroups);
+ });
+ }
+
+ /**
+ * helper function - set 'shown' observer for xEditable description cell
+ * -> change height for "new signature" table wrapper
+ * @param cell
+ */
+ editableDescriptionOnShown(cell){
+ $(cell).on('shown', (e, editable) => {
+ $(e.target).parents('.' + this._config.tableToolsActionClass).css('height', '+=35px');
+ });
+ }
+
+ /**
+ * helper function - set 'hidden' observer for xEditable description cell
+ * -> change height for "new signature" table wrapper
+ * @param cell
+ */
+ editableDescriptionOnHidden(cell){
+ $(cell).on('hidden', (e, editable) => {
+ $(cell).parents('.' + this._config.tableToolsActionClass).css('height', '-=35px');
+ });
+ }
+
+ /**
+ * helper function - set 'init' observer for xEditable connection cell
+ * -> set focus() on xEditable field
+ * @param cell
+ */
+ editableConnectionOnInit(cell){
+ $(cell).on('init', (e, editable) => {
+ if(editable.value > 0){
+ // empty connection selects ON INIT don´t make a difference for conflicts
+ this.checkConnectionConflicts();
+ }
+ });
+ }
+
+ /**
+ * helper function - set 'shown' observer for xEditable connection cell
+ * -> enable Select2 for xEditable form
+ * @param tableApi
+ * @param cell
+ */
+ editableConnectionOnShown(tableApi, cell){
+ $(cell).on('shown', (e, editable) => {
+ let inputField = editable.input.$input;
+
+ if(!$(tableApi.table().node()).hasClass(this._config.sigTablePrimaryClass)){
+ // we need the primary table API to get selected connections
+ let metaData = this.getTableMetaData(tableApi);
+ tableApi = this.getDataTableInstance(metaData.mapId, metaData.systemId, 'primary');
+ }
+
+ // Select2 init would work without passing select options as "data", Select2 would grap data from DOM
+ // -> We want to pass "meta" data for each option into Select2 for formatting
+ let selectOptions = Util.convertXEditableOptionsToSelect2(editable);
+
+ // for better UX, systems that are already linked to a wh signatures should be "disabled"
+ // -> and grouped into a new | | | | | |