406 lines
19 KiB
JavaScript
406 lines
19 KiB
JavaScript
/**
|
|
* System info module
|
|
*/
|
|
|
|
define([
|
|
'jquery',
|
|
'app/init',
|
|
'app/util',
|
|
'app/map/util'
|
|
], ($, Init, Util, MapUtil) => {
|
|
'use strict';
|
|
|
|
let config = {
|
|
// module info
|
|
modulePosition: 2,
|
|
moduleName: 'systemInfo',
|
|
|
|
// system info module
|
|
moduleTypeClass: 'pf-system-info-module', // class for this module
|
|
|
|
// headline toolbar
|
|
moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
|
|
|
|
// 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
|
|
urlLinkClass: 'pf-system-info-url', // class for "url" copy link
|
|
|
|
// info table
|
|
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
|
|
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)
|
|
|
|
// 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);
|
|
}
|
|
|
|
// 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, '<br>');
|
|
newDescription = '<p>' + newDescription + '</p>';
|
|
}
|
|
|
|
descriptionTextareaElement.html(newDescription);
|
|
}
|
|
}
|
|
}
|
|
|
|
if(setUpdated){
|
|
moduleElement.data('updated', systemData.updated.updated);
|
|
}
|
|
}
|
|
|
|
moduleElement.find('.' + config.descriptionAreaClass).hideLoadingAnimation();
|
|
};
|
|
|
|
/**
|
|
* get module element
|
|
* @param parentElement
|
|
* @param mapId
|
|
* @param systemData
|
|
*/
|
|
let getModule = (parentElement, mapId, systemData) => {
|
|
let moduleElement = $('<div>');
|
|
|
|
// store systemId -> module can be updated with the correct data
|
|
moduleElement.data('id', systemData.id);
|
|
|
|
// 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]);
|
|
wormholeData.class = Util.getSecurityClassForSystem(wormholeData.security);
|
|
staticsData.push(wormholeData);
|
|
}
|
|
}
|
|
|
|
let effectName = MapUtil.getEffectInfoForSystem(systemData.effect, 'name');
|
|
let effectClass = MapUtil.getEffectInfoForSystem(systemData.effect, 'class');
|
|
|
|
let data = {
|
|
system: systemData,
|
|
static: staticsData,
|
|
moduleHeadlineIconClass: config.moduleHeadlineIconClass,
|
|
tableClass: config.systemInfoTableClass,
|
|
nameInfoClass: config.systemInfoNameClass,
|
|
effectInfoClass: config.systemInfoEffectClass,
|
|
planetsInfoClass: config.systemInfoPlanetsClass,
|
|
wormholePrefixClass: config.systemInfoWormholeClass,
|
|
statusInfoClass: config.systemInfoStatusLabelClass,
|
|
popoverTriggerClass: Util.config.popoverTriggerClass,
|
|
|
|
systemUrl: MapUtil.getMapDeeplinkUrl(mapId, systemData.id),
|
|
systemTypeName: MapUtil.getSystemTypeInfo(systemData.type.id, 'name'),
|
|
systemIsWormhole: MapUtil.getSystemTypeInfo(systemData.type.id, 'name') === 'w-space',
|
|
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 : '';
|
|
};
|
|
},
|
|
formatUrl: () => {
|
|
return (val, render) => render(val).replace(/ /g, '_');
|
|
},
|
|
planetCount: systemData.planets ? systemData.planets.length : 0,
|
|
|
|
shatteredClass: Util.getSecurityClassForSystem('SH'),
|
|
|
|
ajaxConstellationInfoUrl: Init.path.getConstellationData,
|
|
|
|
systemConstellationLinkClass: config.constellationLinkClass,
|
|
systemRegionLinkClass: config.regionLinkClass,
|
|
systemTypeLinkClass: config.typeLinkClass,
|
|
systemUrlLinkClass: config.urlLinkClass
|
|
};
|
|
|
|
requirejs(['text!templates/modules/system_info.html', 'mustache', 'summernote.loader'], (template, Mustache, Summernote) => {
|
|
let content = Mustache.render(template, data);
|
|
moduleElement.append(content);
|
|
|
|
let descriptionArea = moduleElement.find('.' + config.descriptionAreaClass);
|
|
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
|
|
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
|
|
|
// lock "description" field until first update
|
|
descriptionArea.showLoadingAnimation();
|
|
|
|
// WYSIWYG init on button click ---------------------------------------------------------------------------
|
|
descriptionButton.on('click', function(e){
|
|
e.stopPropagation();
|
|
let descriptionButton = $(this);
|
|
// hide edit button
|
|
descriptionButton.hide();
|
|
|
|
// content has changed
|
|
let descriptionChanged = false;
|
|
|
|
Summernote.initSummernote(descriptionTextareaElement, {
|
|
height: 75, // set editor height
|
|
minHeight: 75, // set minimum height of editor
|
|
maxHeight: 500, // set maximum height of editor
|
|
focus: true,
|
|
placeholder: false,
|
|
maxTextLength: maxDescriptionLength,
|
|
disableDragAndDrop: true,
|
|
shortcuts: false,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['underline', 'strikethrough', 'clear']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['table', ['table']],
|
|
['insert', ['link', 'hr']],
|
|
//['view', ['codeview', 'help']],
|
|
['misc', ['undo', 'redo']],
|
|
['lengthField'],
|
|
['customBtn', ['discardBtn', 'saveBtn']]
|
|
],
|
|
buttons: {
|
|
saveBtn: context => {
|
|
let ui = $.summernote.ui;
|
|
let button = ui.button({
|
|
contents: '<i class="fas fa-fw fa-check"/>',
|
|
container: 'body',
|
|
className: ['btn-success', 'btn-save'],
|
|
click: e => {
|
|
context.layoutInfo.editable.removeClass('has-error');
|
|
|
|
// save changes
|
|
if(descriptionChanged){
|
|
let validDescription = true;
|
|
let description = '';
|
|
|
|
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) ){
|
|
// ... not valid HTML
|
|
validDescription = false;
|
|
context.layoutInfo.editable.addClass('has-error');
|
|
Util.showNotify({title: 'Validation failed', text: 'HTML not valid', type: 'error'});
|
|
}
|
|
}
|
|
|
|
if(validDescription){
|
|
// ... valid -> save()
|
|
descriptionArea.showLoadingAnimation();
|
|
|
|
Util.request('PATCH', 'system', systemData.id, {
|
|
description: description
|
|
}, {
|
|
descriptionArea: descriptionArea
|
|
}, context => {
|
|
// always do
|
|
context.descriptionArea.hideLoadingAnimation();
|
|
}).then(
|
|
payload => {
|
|
context.$note.summernote('destroy');
|
|
updateModule(moduleElement, payload.data);
|
|
},
|
|
Util.handleAjaxErrorResponse
|
|
);
|
|
}
|
|
}else{
|
|
// ... no changes -> no save()
|
|
context.$note.summernote('destroy');
|
|
}
|
|
}
|
|
});
|
|
|
|
return button.render();
|
|
}
|
|
},
|
|
callbacks: {
|
|
onInit: function(context){
|
|
// make editable field a bit larger
|
|
context.editable.css('height', '150px');
|
|
|
|
// 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);
|
|
},
|
|
onChange: function(contents){
|
|
descriptionChanged = true;
|
|
},
|
|
onPaste: function (e) {
|
|
let bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
|
|
e.preventDefault();
|
|
|
|
// Firefox fix
|
|
setTimeout(() => {
|
|
document.execCommand('insertText', false, bufferText);
|
|
}, 10);
|
|
},
|
|
onDestroy: function(context){
|
|
descriptionButton.show();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// init system effect popover -----------------------------------------------------------------------------
|
|
moduleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
|
|
|
|
// init planets popover -----------------------------------------------------------------------------------
|
|
moduleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
|
|
|
|
// init static wormhole information -----------------------------------------------------------------------
|
|
for(let staticData of staticsData){
|
|
let staticRowElement = moduleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
|
|
staticRowElement.addWormholeInfoTooltip(staticData);
|
|
}
|
|
|
|
// copy system deeplink URL -------------------------------------------------------------------------------
|
|
moduleElement.find('.' + config.urlLinkClass).on('click', function(){
|
|
let mapUrl = $(this).attr('data-url');
|
|
Util.copyToClipboard(mapUrl).then(payload => {
|
|
if(payload.data){
|
|
Util.showNotify({title: 'Copied to clipbaord', text: mapUrl, type: 'success'});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
|
|
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...';
|
|
};
|
|
|
|
// init tooltips ------------------------------------------------------------------------------------------
|
|
let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
|
|
tooltipElements.tooltip({
|
|
container: 'body',
|
|
placement: 'top'
|
|
});
|
|
});
|
|
|
|
return moduleElement;
|
|
};
|
|
|
|
/**
|
|
* efore module destroy callback
|
|
* @param moduleElement
|
|
*/
|
|
let beforeDestroy = moduleElement => {
|
|
moduleElement.find('.' + config.descriptionTextareaElementClass).summernote('destroy');
|
|
|
|
moduleElement.destroyPopover(true);
|
|
};
|
|
|
|
return {
|
|
config: config,
|
|
getModule: getModule,
|
|
updateModule: updateModule,
|
|
beforeDestroy: beforeDestroy
|
|
};
|
|
});
|