- UI improvements "edit map" dialog,
This commit is contained in:
Mark Friedrich
@@ -1,7 +1,7 @@
|
||||
[CRON]
|
||||
log = TRUE
|
||||
cli = TRUE
|
||||
web = TRUE
|
||||
web = FALSE
|
||||
|
||||
[CRON.presets]
|
||||
; run every minute
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 <select>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. <a>-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);
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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
|
||||
|
||||
@@ -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 <select>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. <a>-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);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="navbar-header navbar-header-block">
|
||||
<ul class="nav navbar-nav {{dialogNavigationClass}}" role="tablist">
|
||||
<li class="{{#openTabNew}}active{{/openTabNew}}">
|
||||
<a role="tab" data-toggle="tab" data-name="newMap" href="#{{dialogMapCreateContainerId}}">
|
||||
<a role="tab" data-toggle="tab" data-name="newMap" href="#{{dialogMapNewContainerId}}">
|
||||
<i class="fas fa-plus fa-fw"></i> New map
|
||||
</a>
|
||||
</li>
|
||||
@@ -35,7 +35,7 @@
|
||||
</nav>
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane fade {{#openTabNew}}in active{{/openTabNew}}" id="{{dialogMapCreateContainerId}}"></div>
|
||||
<div role="tabpanel" class="tab-pane fade {{#openTabNew}}in active{{/openTabNew}}" id="{{dialogMapNewContainerId}}"></div>
|
||||
<div role="tabpanel" class="tab-pane fade {{#openTabEdit}}in active{{/openTabEdit}}" id="{{dialogMapEditContainerId}}"></div>
|
||||
|
||||
{{^hideSettingsTab}}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div class="form-group">
|
||||
<label for="icon" class="col-sm-4 control-label">Icon</label>
|
||||
<label for="{{iconSelectId}}" class="col-sm-4 control-label">Icon</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control pf-form-icon-field" name="icon" id="icon" title="Map icon" data-placement="top">
|
||||
<select name="icon" id="{{iconSelectId}}" class="form-control pf-form-icon-field {{select2Class}}">
|
||||
{{#icon}}
|
||||
<option value="{{class}}" >{{{unicode}}}</option>
|
||||
{{/icon}}
|
||||
@@ -28,9 +28,9 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="scope" class="col-sm-2 control-label">Scope</label>
|
||||
<label for="{{scopeSelectId}}" class="col-sm-2 control-label">Scope</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="scopeId" id="scope" class="form-control" title="Connections that get tracked on this map" data-placement="top">
|
||||
<select name="scopeId" id="{{scopeSelectId}}" class="form-control {{select2Class}}">
|
||||
{{#scope}}
|
||||
<option value="{{id}}">{{label}}</option>
|
||||
{{/scope}}
|
||||
@@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="type" class="col-sm-2 control-label">Type</label>
|
||||
<label for="{{typeSelectId}}" class="col-sm-2 control-label">Type</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="typeId" id="type" class="form-control" title="Alliance/Corporation maps require character authentication" data-placement="top">
|
||||
<select name="typeId" id="{{typeSelectId}}" class="form-control {{select2Class}}">
|
||||
{{#type}}
|
||||
<option value="{{id}}">{{label}}</option>
|
||||
{{/type}}
|
||||
|
||||
@@ -58,6 +58,10 @@ fieldset[disabled]{
|
||||
}
|
||||
}
|
||||
|
||||
#select2-pf-map-dialog-edit-icon-select-container, //select2 head
|
||||
#select2-pf-map-dialog-new-icon-select-container, //select2 head
|
||||
#select2-pf-map-dialog-new-icon-select-results, //Select2 body
|
||||
#select2-pf-map-dialog-edit-icon-select-results, //Select2 body
|
||||
.pf-form-icon-field {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: bold;
|
||||
|
||||
@@ -569,6 +569,7 @@
|
||||
}
|
||||
|
||||
.pricing-big{
|
||||
position: relative;
|
||||
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
||||
|
||||
.panel-heading{
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
border-radius: $border-radius;
|
||||
outline: 0;
|
||||
height: 32px;
|
||||
padding: 6px 12px;
|
||||
padding: 6px 16px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $focus-border-color;
|
||||
@@ -40,7 +40,7 @@
|
||||
border-left: none;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
height: 26px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
|
||||
Reference in New Issue
Block a user