dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- refactored "system graphs" module (faster loading)

Browse Source 
- hide scrollbars in Chrome
This commit is contained in:
Mark Friedrich
2017-12-09 17:10:52 +01:00
parent 1bd184d73c
commit 1917f7a7b6
8 changed files with 237 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/app/ui/connection_info.js
View File

@@ -55,7 +55,7 @@ define([
/**
* get module toolbar element
* @returns {void|*|jQuery|HTMLElement}
* @returns {*|jQuery|HTMLElement|void}
*/
let getHeadlineToolbar = () => {
let headlineToolbar = $('<h5>', {
@@ -550,8 +550,6 @@ define([
});
};
for(let connectionData of connectionsData) {
// find related dom element for current connection
let connectionElement = moduleElement.find('#' + getConnectionElementId(connectionData.id));

207
js/app/ui/system_graph.js
View File

@@ -17,13 +17,12 @@ define([
moduleHeadClass: 'pf-module-head', // class for module header
moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
// system graph module
moduleTypeClass: 'pf-system-graph-module', // class for this module
systemGraphClass: 'pf-system-graph', // class for each graph
// system graph labels
systemGraphLabels: {
systemGraphs: {
jumps: {
headline: 'Jumps',
units: 'jumps',
@@ -59,9 +58,8 @@ define([
*/
let getInfoForGraph = function(graphKey, option){
let info = '';
if(config.systemGraphLabels.hasOwnProperty(graphKey)){
info = config.systemGraphLabels[graphKey][option];
if(config.systemGraphs.hasOwnProperty(graphKey)){
info = config.systemGraphs[graphKey][option];
}
return info;
@@ -72,9 +70,9 @@ define([
* @param graphElement
* @param graphKey
* @param graphData
* @param eventLine
*/
let initGraph = function(graphElement, graphKey, graphData, eventLine){
if(graphData.length > 0){
let labelYFormat = function(y){
return Math.round(y);
@@ -120,6 +118,84 @@ define([
}
};
/**
* request graphs data
* @param requestData
* @param context
* @param callback
*/
let requestGraphData = (requestData, context, callback) => {
// show loading animation
context.moduleElement.find('.' + config.systemGraphClass).showLoadingAnimation();
$.ajax({
type: 'POST',
url: Init.path.getSystemGraphData,
data: requestData,
dataType: 'json',
context: context
}).done(function(systemGraphsData){
callback(this, systemGraphsData);
}).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();
}).always(function(){
// hide loading animation
context.moduleElement.find('.' + config.systemGraphClass).hideLoadingAnimation();
});
};
/**
* update graph elements with data
* @param context
* @param systemGraphsData
*/
let addGraphData = (context, systemGraphsData) => {
// calculate time offset until system created -----------------------------------------------------------------
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 = ( timeInMinutes / 60 ).toFixed(2);
let eventLine = timeInHours + timeInMinutesPercent;
// graph is from right to left -> convert event line
eventLine = 23 - eventLine;
// update graph data ------------------------------------------------------------------------------------------
for (let [systemId, graphsData] of Object.entries(systemGraphsData)){
console.log(systemId);
for (let [graphKey, graphData] of Object.entries(graphsData)){
let graphElement = context.moduleElement.find('[data-graph="' + graphKey + '"]');
initGraph(graphElement, graphKey, graphData, eventLine);
}
}
};
/**
* @see requestGraphData
* @param moduleElement
* @param mapId
* @param systemData
*/
let updateGraphPanel = (moduleElement, mapId, systemData) => {
let requestData = {
systemIds: [systemData.systemId]
};
let contextData = {
moduleElement: moduleElement,
systemData: systemData
};
requestGraphData(requestData, contextData, addGraphData);
};
/**
* get module element
* @param parentElement
@@ -129,98 +205,45 @@ define([
*/
let getModule = (parentElement, mapId, systemData) => {
// graph data is available for k-space systems
let moduleElement = (systemData.type.id === 2) ? $('<div>') : null;
let moduleElement = null;
if(systemData.type.id === 2){
moduleElement = $('<div>');
let rowElement = $('<div>', {
class: 'row'
});
for (let [graphKey, graphConfig] of Object.entries(config.systemGraphs)){
rowElement.append(
$('<div>', {
class: ['col-xs-12', 'col-sm-6', 'col-md-4'].join(' ')
}).append(
$('<div>', {
class: config.moduleHeadClass
}).append(
$('<h5>', {
class: config.moduleHandlerClass
}),
$('<h5>', {
text: getInfoForGraph(graphKey, 'headline')
})
),
$('<div>', {
class: config.systemGraphClass
}).attr('data-graph', graphKey)
)
);
}
moduleElement.append(rowElement);
updateGraphPanel(moduleElement, mapId, systemData);
}
return moduleElement;
};
/**
* init graph module
* @param parentElement
* @param systemData
*/
let initModule = function(moduleElement, mapId, systemData){
// graph data is available for k-space systems
if(systemData.type.id === 2){
let requestData = {
systemIds: [systemData.systemId]
};
// calculate time offset until system created
let serverData = Util.getServerTime();
let timestampNow = Math.floor(serverData.getTime() / 1000);
let timeSinceUpdate = timestampNow - systemData.updated;
let timeInHours = Math.floor(timeSinceUpdate / 3600);
let timeInMinutes = Math.floor((timeSinceUpdate % 3600) / 60);
let timeInMinutesPercent = ( timeInMinutes / 60 ).toFixed(2);
let eventLine = timeInHours + timeInMinutesPercent;
// graph is from right to left -> convert event line
eventLine = 23 - eventLine;
$.ajax({
type: 'POST',
url: Init.path.getSystemGraphData,
data: requestData,
dataType: 'json'
}).done(function(systemGraphsData){
if( Object.keys(systemGraphsData).length > 0 ){
// row element
let rowElement = $('<div>', {
class: 'row'
});
moduleElement.append(rowElement);
$.each(systemGraphsData, function(systemId, graphsData){
$.each(graphsData, function(graphKey, graphData){
let colElement = $('<div>', {
class: ['col-xs-12', 'col-sm-6', 'col-md-4'].join(' ')
});
colElement.append(
$('<div>', {
class: config.moduleHeadClass
}).append(
$('<h5>', {
class: config.moduleHandlerClass
}),
$('<h5>', {
text: getInfoForGraph(graphKey, 'headline')
})
)
);
let graphElement = $('<div>', {
class: config.systemGraphClass
});
colElement.append(graphElement);
rowElement.append(colElement);
initGraph(graphElement, graphKey, graphData, eventLine);
});
});
moduleElement.append($('<div>', {
css: {'clear': 'both'}
}));
}
}).fail(function( jqXHR, status, error) {
let reason = status + ' ' + error;
Util.showNotify({title: jqXHR.status + ': System graph data', text: reason, type: 'warning'});
$(document).setProgramStatus('problem');
});
}
};
return {
config: config,
getModule: getModule,
initModule: initModule
getModule: getModule
};
});

2
public/css/pathfinder.css
View File

File diff suppressed because one or more lines are too long

4
public/js/v1.3.1/app/ui/connection_info.js
View File

@@ -55,7 +55,7 @@ define([
/**
* get module toolbar element
* @returns {void|*|jQuery|HTMLElement}
* @returns {*|jQuery|HTMLElement|void}
*/
let getHeadlineToolbar = () => {
let headlineToolbar = $('<h5>', {
@@ -550,8 +550,6 @@ define([
});
};
for(let connectionData of connectionsData) {
// find related dom element for current connection
let connectionElement = moduleElement.find('#' + getConnectionElementId(connectionData.id));

207
public/js/v1.3.1/app/ui/system_graph.js
View File

@@ -17,13 +17,12 @@ define([
moduleHeadClass: 'pf-module-head', // class for module header
moduleHandlerClass: 'pf-module-handler-drag', // class for "drag" handler
// system graph module
moduleTypeClass: 'pf-system-graph-module', // class for this module
systemGraphClass: 'pf-system-graph', // class for each graph
// system graph labels
systemGraphLabels: {
systemGraphs: {
jumps: {
headline: 'Jumps',
units: 'jumps',
@@ -59,9 +58,8 @@ define([
*/
let getInfoForGraph = function(graphKey, option){
let info = '';
if(config.systemGraphLabels.hasOwnProperty(graphKey)){
info = config.systemGraphLabels[graphKey][option];
if(config.systemGraphs.hasOwnProperty(graphKey)){
info = config.systemGraphs[graphKey][option];
}
return info;
@@ -72,9 +70,9 @@ define([
* @param graphElement
* @param graphKey
* @param graphData
* @param eventLine
*/
let initGraph = function(graphElement, graphKey, graphData, eventLine){
if(graphData.length > 0){
let labelYFormat = function(y){
return Math.round(y);
@@ -120,6 +118,84 @@ define([
}
};
/**
* request graphs data
* @param requestData
* @param context
* @param callback
*/
let requestGraphData = (requestData, context, callback) => {
// show loading animation
context.moduleElement.find('.' + config.systemGraphClass).showLoadingAnimation();
$.ajax({
type: 'POST',
url: Init.path.getSystemGraphData,
data: requestData,
dataType: 'json',
context: context
}).done(function(systemGraphsData){
callback(this, systemGraphsData);
}).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();
}).always(function(){
// hide loading animation
context.moduleElement.find('.' + config.systemGraphClass).hideLoadingAnimation();
});
};
/**
* update graph elements with data
* @param context
* @param systemGraphsData
*/
let addGraphData = (context, systemGraphsData) => {
// calculate time offset until system created -----------------------------------------------------------------
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 = ( timeInMinutes / 60 ).toFixed(2);
let eventLine = timeInHours + timeInMinutesPercent;
// graph is from right to left -> convert event line
eventLine = 23 - eventLine;
// update graph data ------------------------------------------------------------------------------------------
for (let [systemId, graphsData] of Object.entries(systemGraphsData)){
console.log(systemId);
for (let [graphKey, graphData] of Object.entries(graphsData)){
let graphElement = context.moduleElement.find('[data-graph="' + graphKey + '"]');
initGraph(graphElement, graphKey, graphData, eventLine);
}
}
};
/**
* @see requestGraphData
* @param moduleElement
* @param mapId
* @param systemData
*/
let updateGraphPanel = (moduleElement, mapId, systemData) => {
let requestData = {
systemIds: [systemData.systemId]
};
let contextData = {
moduleElement: moduleElement,
systemData: systemData
};
requestGraphData(requestData, contextData, addGraphData);
};
/**
* get module element
* @param parentElement
@@ -129,98 +205,45 @@ define([
*/
let getModule = (parentElement, mapId, systemData) => {
// graph data is available for k-space systems
let moduleElement = (systemData.type.id === 2) ? $('<div>') : null;
let moduleElement = null;
if(systemData.type.id === 2){
moduleElement = $('<div>');
let rowElement = $('<div>', {
class: 'row'
});
for (let [graphKey, graphConfig] of Object.entries(config.systemGraphs)){
rowElement.append(
$('<div>', {
class: ['col-xs-12', 'col-sm-6', 'col-md-4'].join(' ')
}).append(
$('<div>', {
class: config.moduleHeadClass
}).append(
$('<h5>', {
class: config.moduleHandlerClass
}),
$('<h5>', {
text: getInfoForGraph(graphKey, 'headline')
})
),
$('<div>', {
class: config.systemGraphClass
}).attr('data-graph', graphKey)
)
);
}
moduleElement.append(rowElement);
updateGraphPanel(moduleElement, mapId, systemData);
}
return moduleElement;
};
/**
* init graph module
* @param parentElement
* @param systemData
*/
let initModule = function(moduleElement, mapId, systemData){
// graph data is available for k-space systems
if(systemData.type.id === 2){
let requestData = {
systemIds: [systemData.systemId]
};
// calculate time offset until system created
let serverData = Util.getServerTime();
let timestampNow = Math.floor(serverData.getTime() / 1000);
let timeSinceUpdate = timestampNow - systemData.updated;
let timeInHours = Math.floor(timeSinceUpdate / 3600);
let timeInMinutes = Math.floor((timeSinceUpdate % 3600) / 60);
let timeInMinutesPercent = ( timeInMinutes / 60 ).toFixed(2);
let eventLine = timeInHours + timeInMinutesPercent;
// graph is from right to left -> convert event line
eventLine = 23 - eventLine;
$.ajax({
type: 'POST',
url: Init.path.getSystemGraphData,
data: requestData,
dataType: 'json'
}).done(function(systemGraphsData){
if( Object.keys(systemGraphsData).length > 0 ){
// row element
let rowElement = $('<div>', {
class: 'row'
});
moduleElement.append(rowElement);
$.each(systemGraphsData, function(systemId, graphsData){
$.each(graphsData, function(graphKey, graphData){
let colElement = $('<div>', {
class: ['col-xs-12', 'col-sm-6', 'col-md-4'].join(' ')
});
colElement.append(
$('<div>', {
class: config.moduleHeadClass
}).append(
$('<h5>', {
class: config.moduleHandlerClass
}),
$('<h5>', {
text: getInfoForGraph(graphKey, 'headline')
})
)
);
let graphElement = $('<div>', {
class: config.systemGraphClass
});
colElement.append(graphElement);
rowElement.append(colElement);
initGraph(graphElement, graphKey, graphData, eventLine);
});
});
moduleElement.append($('<div>', {
css: {'clear': 'both'}
}));
}
}).fail(function( jqXHR, status, error) {
let reason = status + ' ' + error;
Util.showNotify({title: jqXHR.status + ': System graph data', text: reason, type: 'warning'});
$(document).setProgramStatus('problem');
});
}
};
return {
config: config,
getModule: getModule,
initModule: initModule
getModule: getModule
};
});

4
public/js/v1.3.1/lib/sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
sass/layout/_main.scss
View File

@@ -55,6 +55,7 @@ em{
// scroll bar (webkit only) =======================================================================
::-webkit-scrollbar {
display: none; // hides the scrollbar but is still scrollable
width: 16px;
height: 16px;
}

1
sass/layout/_system-info.scss
View File

@@ -91,6 +91,7 @@
.pf-system-graph-module{
.pf-system-graph{
position: relative;
width: 100%;
height: 100px;
}