From d3001c2e4d0f4312e0eee5e52cb2baf634696116 Mon Sep 17 00:00:00 2001 From: Exodus4D Date: Tue, 6 Sep 2016 20:36:04 +0200 Subject: [PATCH] - added settings dialog to route module for default configuration, closed #247 --- js/app/map/map.js | 2 +- js/app/page.js | 4 +- js/app/ui/form_element.js | 8 +- js/app/ui/system_route.js | 165 +++++++++++++++++--- public/js/v1.1.5/app/map/map.js | 2 +- public/js/v1.1.5/app/page.js | 4 +- public/js/v1.1.5/app/ui/form_element.js | 8 +- public/js/v1.1.5/app/ui/system_route.js | 165 +++++++++++++++++--- public/templates/dialog/route_settings.html | 24 +++ 9 files changed, 324 insertions(+), 58 deletions(-) create mode 100644 public/templates/dialog/route_settings.html diff --git a/js/app/map/map.js b/js/app/map/map.js index ef8a4a5c..569ace7d 100644 --- a/js/app/map/map.js +++ b/js/app/map/map.js @@ -165,7 +165,7 @@ define([ systemBody.empty(); // loop "again" and build DOM object with user information - for(var j = 0; j < data.user.length; j++){ + for(let j = 0; j < data.user.length; j++){ var userData = data.user[j]; var statusClass = Util.getStatusInfoForCharacter(userData, 'class'); diff --git a/js/app/page.js b/js/app/page.js index d1b388d6..d9337789 100644 --- a/js/app/page.js +++ b/js/app/page.js @@ -138,7 +138,7 @@ define([ href: '#' }).html('  Settings').prepend( $('',{ - class: 'fa fa-gears fa-fw' + class: 'fa fa-sliders fa-fw' }) ).on('click', function(){ $(document).triggerMenuEvent('ShowSettingsDialog'); @@ -253,7 +253,7 @@ define([ href: '#' }).html('  Settings').prepend( $('',{ - class: 'fa fa-gears fa-fw' + class: 'fa fa-sliders fa-fw' }) ).on('click', function(){ $(document).triggerMenuEvent('ShowMapSettings', {tab: 'settings'}); diff --git a/js/app/ui/form_element.js b/js/app/ui/form_element.js index 1188f6e5..665eb33b 100644 --- a/js/app/ui/form_element.js +++ b/js/app/ui/form_element.js @@ -26,8 +26,6 @@ define([ ); }; - - /** * init a select element as an ajax based "select2" object for system search * @param options @@ -35,6 +33,11 @@ define([ $.fn.initSystemSelect = function(options){ var selectElement = $(this); + var config = { + maxSelectionLength: 1 + }; + options = $.extend({}, config, options); + // format result data function formatResultData (data) { @@ -135,6 +138,7 @@ define([ templateResult: formatResultData, placeholder: 'System name', allowClear: true, + maximumSelectionLength: options.maxSelectionLength, escapeMarkup: function (markup) { // let our custom formatter work return markup; diff --git a/js/app/ui/system_route.js b/js/app/ui/system_route.js index 393ace52..87b12626 100644 --- a/js/app/ui/system_route.js +++ b/js/app/ui/system_route.js @@ -6,8 +6,9 @@ define([ 'jquery', 'app/init', 'app/util', - 'bootbox' -], function($, Init, Util, bootbox) { + 'bootbox', + 'app/map/util' +], function($, Init, Util, bootbox, MapUtil) { 'use strict'; var config = { @@ -22,12 +23,14 @@ define([ // headline toolbar systemModuleHeadlineIcon: 'pf-module-icon-button', // class for toolbar icons in the head systemModuleHeadlineIconSearch: 'pf-module-icon-button-search', // class for "search" icon + systemModuleHeadlineIconSettings: 'pf-module-icon-button-settings', // class for "settings" icon systemModuleHeadlineIconRefresh: 'pf-module-icon-button-refresh', // class for "refresh" icon systemSecurityClassPrefix: 'pf-system-security-', // prefix class for system security level (color) // dialog - routeDialogId: 'pf-route-dialog', // id for route 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 mapSelectId: 'pf-route-dialog-map-select', // id for "map" select @@ -192,10 +195,7 @@ define([ buttons: { close: { label: 'cancel', - className: 'btn-default', - callback: function(){ - $(findRouteDialog).modal('hide'); - } + className: 'btn-default' }, success: { label: ' search route', @@ -279,6 +279,105 @@ define([ }); }; + /** + * show route settings dialog + * @param dialogData + * @param moduleElement + * @param systemFromData + * @param routesTable + */ + var showSettingsDialog = function(dialogData, moduleElement, systemFromData, routesTable){ + + var promiseStore = MapUtil.getLocaleData('map', dialogData.mapId); + promiseStore.then(function(dataStore) { + // selected systems (if already stored) + var systemSelectOptions = []; + if( + dataStore && + dataStore.routes + ){ + systemSelectOptions = dataStore.routes; + } + + var maxSelectionLength = 4; + + var data = { + id: config.routeSettingsDialogId, + selectClass: config.systemDialogSelectClass, + systemSelectOptions: systemSelectOptions, + maxSelectionLength: maxSelectionLength + }; + + requirejs(['text!templates/dialog/route_settings.html', 'mustache'], function(template, Mustache) { + var content = Mustache.render(template, data); + + var settingsDialog = bootbox.dialog({ + title: 'Route settings', + message: content, + show: false, + buttons: { + close: { + label: 'cancel', + className: 'btn-default' + }, + success: { + label: ' save', + className: 'btn-success', + callback: function () { + var form = this.find('form'); + // get all system data from select2 + var systemSelectData = form.find('.' + config.systemDialogSelectClass).select2('data'); + var systemsTo = []; + + if( systemSelectData.length > 0 ){ + systemsTo = formSystemSelectData(systemSelectData); + MapUtil.storeLocalData('map', dialogData.mapId, 'routes', systemsTo); + }else{ + MapUtil.deleteLocalData('map', dialogData.mapId, 'routes'); + } + + Util.showNotify({title: 'Route settings stored', type: 'success'}); + + // (re) draw table + drawRouteTable(dialogData.mapId, moduleElement, systemFromData, routesTable, systemsTo); + } + } + } + }); + + settingsDialog.on('shown.bs.modal', function(e) { + + // init default system select ----------------------------------------------------- + // -> add some delay until modal transition has finished + var systemTargetSelect = $(this).find('.' + config.systemDialogSelectClass); + systemTargetSelect.delay(240).initSystemSelect({key: 'name', maxSelectionLength: maxSelectionLength}); + }); + + // show dialog + settingsDialog.modal('show'); + }); + }); + }; + + /** + * format select2 system data + * @param {Array} data + * @returns {Array} + */ + var formSystemSelectData = function(data){ + var formattedData = []; + for(let i = 0; i < data.length; i++){ + var tmpData = data[i]; + + formattedData.push({ + name: tmpData.id, + systemId: parseInt( tmpData.hasOwnProperty('systemId') ? tmpData.systemId : tmpData.element.getAttribute('data-systemid') ) + }); + } + + return formattedData; + }; + /** * set event observer for route finder dialog * @param routeDialog @@ -463,6 +562,10 @@ define([ class: ['fa', 'fa-fw', 'fa-search', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconSearch].join(' '), title: 'find route' }).attr('data-html', 'true').attr('data-toggle', 'tooltip'), + $('', { + class: ['fa', 'fa-fw', 'fa-sliders', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconSettings].join(' '), + title: 'settings' + }).attr('data-html', 'true').attr('data-toggle', 'tooltip'), $('', { class: ['fa', 'fa-fw', 'fa-refresh', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconRefresh].join(' '), title: 'refresh all' @@ -722,22 +825,6 @@ define([ systemId: systemData.systemId }; - var systemsTo = [ - { - name: 'Jita', - systemId: 30000142 - },{ - name: 'Amarr', - systemId: 30002187 - },{ - name: 'Rens', - systemId: 30002510 - },{ - name: 'Dodixie', - systemId: 30002659 - } - ]; - var routesTableElement = moduleElement.find('.' + config.systemInfoRoutesTableClass); var routesTable = routesTableElement.DataTable(); @@ -759,7 +846,38 @@ define([ showFindRouteDialog(dialogData); }); + // init settings dialog ------------------------------------------------------------------- + moduleElement.find('.' + config.systemModuleHeadlineIconSettings).on('click', function(e){ + var dialogData = { + mapId: mapId + }; + + showSettingsDialog(dialogData, moduleElement, systemFromData, routesTable); + }); + // fill routesTable with data ------------------------------------------------------------- + var promiseStore = MapUtil.getLocaleData('map', mapId); + promiseStore.then(function(dataStore) { + // selected systems (if already stored) + var systemsTo = [{ + name: 'Jita', + systemId: 30000142 + }]; + + if( + dataStore && + dataStore.routes + ){ + systemsTo = dataStore.routes; + } + + drawRouteTable(mapId, moduleElement, systemFromData, routesTable, systemsTo); + }); + + }; + + + var drawRouteTable = function(mapId, moduleElement, systemFromData, routesTable, systemsTo){ var requestRouteData = []; var currentTimestamp = Util.getServerTime().getTime(); @@ -809,7 +927,6 @@ define([ } }; - /** * updates an dom element with the system route module * @param mapId diff --git a/public/js/v1.1.5/app/map/map.js b/public/js/v1.1.5/app/map/map.js index ef8a4a5c..569ace7d 100644 --- a/public/js/v1.1.5/app/map/map.js +++ b/public/js/v1.1.5/app/map/map.js @@ -165,7 +165,7 @@ define([ systemBody.empty(); // loop "again" and build DOM object with user information - for(var j = 0; j < data.user.length; j++){ + for(let j = 0; j < data.user.length; j++){ var userData = data.user[j]; var statusClass = Util.getStatusInfoForCharacter(userData, 'class'); diff --git a/public/js/v1.1.5/app/page.js b/public/js/v1.1.5/app/page.js index d1b388d6..d9337789 100644 --- a/public/js/v1.1.5/app/page.js +++ b/public/js/v1.1.5/app/page.js @@ -138,7 +138,7 @@ define([ href: '#' }).html('  Settings').prepend( $('',{ - class: 'fa fa-gears fa-fw' + class: 'fa fa-sliders fa-fw' }) ).on('click', function(){ $(document).triggerMenuEvent('ShowSettingsDialog'); @@ -253,7 +253,7 @@ define([ href: '#' }).html('  Settings').prepend( $('',{ - class: 'fa fa-gears fa-fw' + class: 'fa fa-sliders fa-fw' }) ).on('click', function(){ $(document).triggerMenuEvent('ShowMapSettings', {tab: 'settings'}); diff --git a/public/js/v1.1.5/app/ui/form_element.js b/public/js/v1.1.5/app/ui/form_element.js index 1188f6e5..665eb33b 100644 --- a/public/js/v1.1.5/app/ui/form_element.js +++ b/public/js/v1.1.5/app/ui/form_element.js @@ -26,8 +26,6 @@ define([ ); }; - - /** * init a select element as an ajax based "select2" object for system search * @param options @@ -35,6 +33,11 @@ define([ $.fn.initSystemSelect = function(options){ var selectElement = $(this); + var config = { + maxSelectionLength: 1 + }; + options = $.extend({}, config, options); + // format result data function formatResultData (data) { @@ -135,6 +138,7 @@ define([ templateResult: formatResultData, placeholder: 'System name', allowClear: true, + maximumSelectionLength: options.maxSelectionLength, escapeMarkup: function (markup) { // let our custom formatter work return markup; diff --git a/public/js/v1.1.5/app/ui/system_route.js b/public/js/v1.1.5/app/ui/system_route.js index 393ace52..87b12626 100644 --- a/public/js/v1.1.5/app/ui/system_route.js +++ b/public/js/v1.1.5/app/ui/system_route.js @@ -6,8 +6,9 @@ define([ 'jquery', 'app/init', 'app/util', - 'bootbox' -], function($, Init, Util, bootbox) { + 'bootbox', + 'app/map/util' +], function($, Init, Util, bootbox, MapUtil) { 'use strict'; var config = { @@ -22,12 +23,14 @@ define([ // headline toolbar systemModuleHeadlineIcon: 'pf-module-icon-button', // class for toolbar icons in the head systemModuleHeadlineIconSearch: 'pf-module-icon-button-search', // class for "search" icon + systemModuleHeadlineIconSettings: 'pf-module-icon-button-settings', // class for "settings" icon systemModuleHeadlineIconRefresh: 'pf-module-icon-button-refresh', // class for "refresh" icon systemSecurityClassPrefix: 'pf-system-security-', // prefix class for system security level (color) // dialog - routeDialogId: 'pf-route-dialog', // id for route 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 mapSelectId: 'pf-route-dialog-map-select', // id for "map" select @@ -192,10 +195,7 @@ define([ buttons: { close: { label: 'cancel', - className: 'btn-default', - callback: function(){ - $(findRouteDialog).modal('hide'); - } + className: 'btn-default' }, success: { label: ' search route', @@ -279,6 +279,105 @@ define([ }); }; + /** + * show route settings dialog + * @param dialogData + * @param moduleElement + * @param systemFromData + * @param routesTable + */ + var showSettingsDialog = function(dialogData, moduleElement, systemFromData, routesTable){ + + var promiseStore = MapUtil.getLocaleData('map', dialogData.mapId); + promiseStore.then(function(dataStore) { + // selected systems (if already stored) + var systemSelectOptions = []; + if( + dataStore && + dataStore.routes + ){ + systemSelectOptions = dataStore.routes; + } + + var maxSelectionLength = 4; + + var data = { + id: config.routeSettingsDialogId, + selectClass: config.systemDialogSelectClass, + systemSelectOptions: systemSelectOptions, + maxSelectionLength: maxSelectionLength + }; + + requirejs(['text!templates/dialog/route_settings.html', 'mustache'], function(template, Mustache) { + var content = Mustache.render(template, data); + + var settingsDialog = bootbox.dialog({ + title: 'Route settings', + message: content, + show: false, + buttons: { + close: { + label: 'cancel', + className: 'btn-default' + }, + success: { + label: ' save', + className: 'btn-success', + callback: function () { + var form = this.find('form'); + // get all system data from select2 + var systemSelectData = form.find('.' + config.systemDialogSelectClass).select2('data'); + var systemsTo = []; + + if( systemSelectData.length > 0 ){ + systemsTo = formSystemSelectData(systemSelectData); + MapUtil.storeLocalData('map', dialogData.mapId, 'routes', systemsTo); + }else{ + MapUtil.deleteLocalData('map', dialogData.mapId, 'routes'); + } + + Util.showNotify({title: 'Route settings stored', type: 'success'}); + + // (re) draw table + drawRouteTable(dialogData.mapId, moduleElement, systemFromData, routesTable, systemsTo); + } + } + } + }); + + settingsDialog.on('shown.bs.modal', function(e) { + + // init default system select ----------------------------------------------------- + // -> add some delay until modal transition has finished + var systemTargetSelect = $(this).find('.' + config.systemDialogSelectClass); + systemTargetSelect.delay(240).initSystemSelect({key: 'name', maxSelectionLength: maxSelectionLength}); + }); + + // show dialog + settingsDialog.modal('show'); + }); + }); + }; + + /** + * format select2 system data + * @param {Array} data + * @returns {Array} + */ + var formSystemSelectData = function(data){ + var formattedData = []; + for(let i = 0; i < data.length; i++){ + var tmpData = data[i]; + + formattedData.push({ + name: tmpData.id, + systemId: parseInt( tmpData.hasOwnProperty('systemId') ? tmpData.systemId : tmpData.element.getAttribute('data-systemid') ) + }); + } + + return formattedData; + }; + /** * set event observer for route finder dialog * @param routeDialog @@ -463,6 +562,10 @@ define([ class: ['fa', 'fa-fw', 'fa-search', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconSearch].join(' '), title: 'find route' }).attr('data-html', 'true').attr('data-toggle', 'tooltip'), + $('', { + class: ['fa', 'fa-fw', 'fa-sliders', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconSettings].join(' '), + title: 'settings' + }).attr('data-html', 'true').attr('data-toggle', 'tooltip'), $('', { class: ['fa', 'fa-fw', 'fa-refresh', config.systemModuleHeadlineIcon, config.systemModuleHeadlineIconRefresh].join(' '), title: 'refresh all' @@ -722,22 +825,6 @@ define([ systemId: systemData.systemId }; - var systemsTo = [ - { - name: 'Jita', - systemId: 30000142 - },{ - name: 'Amarr', - systemId: 30002187 - },{ - name: 'Rens', - systemId: 30002510 - },{ - name: 'Dodixie', - systemId: 30002659 - } - ]; - var routesTableElement = moduleElement.find('.' + config.systemInfoRoutesTableClass); var routesTable = routesTableElement.DataTable(); @@ -759,7 +846,38 @@ define([ showFindRouteDialog(dialogData); }); + // init settings dialog ------------------------------------------------------------------- + moduleElement.find('.' + config.systemModuleHeadlineIconSettings).on('click', function(e){ + var dialogData = { + mapId: mapId + }; + + showSettingsDialog(dialogData, moduleElement, systemFromData, routesTable); + }); + // fill routesTable with data ------------------------------------------------------------- + var promiseStore = MapUtil.getLocaleData('map', mapId); + promiseStore.then(function(dataStore) { + // selected systems (if already stored) + var systemsTo = [{ + name: 'Jita', + systemId: 30000142 + }]; + + if( + dataStore && + dataStore.routes + ){ + systemsTo = dataStore.routes; + } + + drawRouteTable(mapId, moduleElement, systemFromData, routesTable, systemsTo); + }); + + }; + + + var drawRouteTable = function(mapId, moduleElement, systemFromData, routesTable, systemsTo){ var requestRouteData = []; var currentTimestamp = Util.getServerTime().getTime(); @@ -809,7 +927,6 @@ define([ } }; - /** * updates an dom element with the system route module * @param mapId diff --git a/public/templates/dialog/route_settings.html b/public/templates/dialog/route_settings.html new file mode 100644 index 00000000..03d92c77 --- /dev/null +++ b/public/templates/dialog/route_settings.html @@ -0,0 +1,24 @@ +
+
+ +
+
+
+ +
+
+ + + Set default systems (max {{maxSelectionLength}}) for route search +
+
+
+
+
+ +
+
\ No newline at end of file