From 99022edc58b7be73048e4b1134f07557386e207f Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Sun, 22 Jul 2018 21:05:08 +0200 Subject: [PATCH] - UI improvements "edit map" dialog, --- app/cron.ini | 2 +- js/app/page.js | 8 ++- js/app/ui/dialog/map_settings.js | 59 +++++++++++++------ public/css/v1.4.1/pathfinder.css | 4 +- public/css/v1.4.1/pathfinder.css.map | 2 +- public/js/v1.4.1/app/page.js | 8 ++- .../js/v1.4.1/app/ui/dialog/map_settings.js | 59 +++++++++++++------ public/templates/dialog/map.html | 4 +- public/templates/form/map.html | 12 ++-- sass/layout/_forms.scss | 4 ++ sass/layout/_landing.scss | 1 + .../select2/theme/pathfinder/_single.scss | 4 +- 12 files changed, 115 insertions(+), 52 deletions(-) diff --git a/app/cron.ini b/app/cron.ini index 306f9ae8..3d37ac96 100644 --- a/app/cron.ini +++ b/app/cron.ini @@ -1,7 +1,7 @@ [CRON] log = TRUE cli = TRUE -web = TRUE +web = FALSE [CRON.presets] ; run every minute diff --git a/js/app/page.js b/js/app/page.js index a9b50868..57c04d16 100644 --- a/js/app/page.js +++ b/js/app/page.js @@ -734,7 +734,13 @@ define([ // global "modal" callback (for all modals) $('body').on('hide.bs.modal', '> .modal', function(e) { - $(this).destroyTimestampCounter(); + let modalElement = $(this); + modalElement.destroyTimestampCounter(); + + // destroy all Select2 + modalElement.find('.' + Util.config.select2Class) + .filter((i, element) => $(element).data('select2')) + .select2('destroy'); }); // disable menu links based on current map config diff --git a/js/app/ui/dialog/map_settings.js b/js/app/ui/dialog/map_settings.js index faffb9f7..b11052d2 100644 --- a/js/app/ui/dialog/map_settings.js +++ b/js/app/ui/dialog/map_settings.js @@ -16,11 +16,22 @@ define([ let config = { // map dialog newMapDialogId: 'pf-map-dialog', // id for map settings dialog - dialogMapCreateContainerId: 'pf-map-dialog-create', // id for the "new map" container + dialogMapNewContainerId: 'pf-map-dialog-new', // id for the "new map" container dialogMapEditContainerId: 'pf-map-dialog-edit', // id for the "edit" container dialogMapSettingsContainerId: 'pf-map-dialog-settings', // id for the "settings" container dialogMapDownloadContainerId: 'pf-map-dialog-download', // id for the "download" container + // new map form + newIconSelectId: 'pf-map-dialog-new-icon-select', // id for "icon" select + newScopeSelectId: 'pf-map-dialog-new-scope-select', // id for "scope" select + newTypeSelectId: 'pf-map-dialog-new-type-select', // id for "type" select + + // edit map form + editIconSelectId: 'pf-map-dialog-edit-icon-select', // id for "icon" select + editScopeSelectId: 'pf-map-dialog-edit-scope-select', // id for "scope" select + editTypeSelectId: 'pf-map-dialog-edit-type-select', // id for "type" select + + // settings map form deleteExpiredConnectionsId: 'pf-map-dialog-delete-connections-expired', // id for "deleteExpiredConnections" checkbox deleteEolConnectionsId: 'pf-map-dialog-delete-connections-eol', // id for "deleteEOLConnections" checkbox persistentAliasesId: 'pf-map-dialog-persistent-aliases', // id for "persistentAliases" checkbox @@ -111,6 +122,7 @@ define([ let mapTypes = MapUtil.getMapTypes(true); let mapFormData = { + select2Class: Util.config.select2Class, scope: MapUtil.getMapScopes(), type: mapTypes, icon: MapUtil.getMapIcons(), @@ -121,13 +133,19 @@ define([ // render "new map" tab content ----------------------------------------------------------------------- let mapFormDataNew = $.extend({}, mapFormData, { - hasRightMapForm: hasRightMapCreate + hasRightMapForm: hasRightMapCreate, + iconSelectId: config.newIconSelectId, + scopeSelectId: config.newScopeSelectId, + typeSelectId: config.newTypeSelectId }); let contentNewMap = Mustache.render(templateMapForm, mapFormDataNew); // render "edit map" tab content ---------------------------------------------------------------------- let mapFormDataEdit = $.extend({}, mapFormData, { - hasRightMapForm: hasRightMapUpdate + hasRightMapForm: hasRightMapUpdate, + iconSelectId: config.editIconSelectId, + scopeSelectId: config.editScopeSelectId, + typeSelectId: config.editTypeSelectId }); let contentEditMap = Mustache.render(templateMapForm, mapFormDataEdit); contentEditMap = $(contentEditMap); @@ -220,7 +238,7 @@ define([ openTabSettings: options.tab === 'settings', openTabDownload: options.tab === 'download', - dialogMapCreateContainerId: config.dialogMapCreateContainerId, + dialogMapNewContainerId: config.dialogMapNewContainerId, dialogMapEditContainerId: config.dialogMapEditContainerId, dialogMapSettingsContainerId: config.dialogMapSettingsContainerId, dialogMapDownloadContainerId: config.dialogMapDownloadContainerId, @@ -308,7 +326,7 @@ define([ contentDialog = $(contentDialog); // set tab content - $('#' + config.dialogMapCreateContainerId, contentDialog).html(contentNewMap); + $('#' + config.dialogMapNewContainerId, contentDialog).html(contentNewMap); $('#' + config.dialogMapEditContainerId, contentDialog).html(contentEditMap); let mapInfoDialog = bootbox.dialog({ @@ -422,7 +440,6 @@ define([ } }); - // after modal is shown =============================================================================== mapInfoDialog.on('shown.bs.modal', function(e){ mapInfoDialog.initTooltips(); @@ -438,6 +455,15 @@ define([ } }); + // make s to Select2 fields + mapInfoDialog.find( + '#' + config.dialogMapNewContainerId + ' .' + Util.config.select2Class + ', ' + + '#' + config.dialogMapEditContainerId + ' .' + Util.config.select2Class + ).select2({ + minimumResultsForSearch: -1, + width: '100%' + }); + // set form validator mapInfoDialog.find('form').initFormValidation(); @@ -475,11 +501,12 @@ define([ getAll: true }); + let exportButton = $(this); // set map data right before download - $(this).setExportMapData(exportMapData); + setExportMapData(exportButton, exportMapData); // disable button - $(this).attr('disabled', true); + exportButton.attr('disabled', true); }else{ console.error('Map not found'); } @@ -652,9 +679,9 @@ define([ /** * import new map(s) data * @param importData + * @param callback */ let importMaps = (importData, callback) => { - let importForm = $('#' + config.dialogMapImportFormId); importForm.hideFormMessage('all'); @@ -694,10 +721,10 @@ define([ /** * set json map data for export to an element (e.g. -Tag or button) for download + * @param element * @param mapData - * @returns {*} */ - $.fn.setExportMapData = function(mapData){ + let setExportMapData = (element, mapData) => { let fieldExport = $('#' + config.fieldExportId); let filename = ''; @@ -711,19 +738,15 @@ define([ } } - return this.each(function(){ - let exportButton = $(this); - exportButton.attr('href', 'data:' + mapDataEncoded); - exportButton.attr('download', filename + '.json'); - }); + element.attr('href', 'data:' + mapDataEncoded); + element.attr('download', filename + '.json'); }; - /** * init select2 fields within the settings dialog * @param mapInfoDialog */ - let initSettingsSelectFields = function(mapInfoDialog){ + let initSettingsSelectFields = mapInfoDialog => { let selectElementCharacter = mapInfoDialog.find('#' + config.characterSelectId); let selectElementCorporation = mapInfoDialog.find('#' + config.corporationSelectId); diff --git a/public/templates/dialog/map.html b/public/templates/dialog/map.html index 57ea9601..777bc101 100644 --- a/public/templates/dialog/map.html +++ b/public/templates/dialog/map.html @@ -4,7 +4,7 @@