diff --git a/css/style.css b/css/style.css
index 7c3b616..1570b6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -426,7 +426,6 @@ table.dataTable.display tbody tr.even:hover {
* leaflet-sidebar-v2
*/
-.leaflet-sidebar-pane#tab_profile,
.leaflet-sidebar-pane#tab_data,
.leaflet-sidebar-pane#tab_itinerary {
/* Full height for content with inner scrolling,
@@ -434,6 +433,30 @@ table.dataTable.display tbody tr.even:hover {
height: 100%;
}
+.leaflet-sidebar-pane#tab_profile {
+ min-height: 100%;
+}
+
+.leaflet-sidebar-pane#tab_profile .form-group {
+ margin-bottom: 5px;
+}
+
+.leaflet-sidebar-pane#tab_profile label {
+ font-weight: 700;
+ margin-bottom: 0;
+}
+
+.leaflet-sidebar-pane#tab_profile input[type='checkbox'] {
+ margin-right: 5px;
+ vertical-align: middle;
+}
+
+.leaflet-sidebar-pane#tab_profile .help-block {
+ display: block;
+ color: #737373;
+ margin-bottom: 0.5rem;
+}
+
.leaflet-sidebar-content {
/* for optional-layers-tree */
overflow-x: auto;
diff --git a/index.html b/index.html
index e5510ad..12111c2 100644
--- a/index.html
+++ b/index.html
@@ -554,8 +554,8 @@
@@ -643,30 +643,22 @@
diff --git a/js/control/Profile.js b/js/control/Profile.js
index 1f044a4..9e1865d 100644
--- a/js/control/Profile.js
+++ b/js/control/Profile.js
@@ -11,7 +11,11 @@ BR.Profile = L.Evented.extend({
L.DomUtil.get('profile_advanced').addEventListener('click', function() {
that._toggleAdvanced();
});
+ L.DomUtil.get('profile_basic').addEventListener('click', function() {
+ that._toggleAdvanced();
+ });
+ L.DomUtil.get('save').onclick = L.bind(this._save, this);
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
@@ -87,7 +91,41 @@ BR.Profile = L.Evented.extend({
});
},
+ _save: function(evt) {
+ var profileText = this.cache[this.profileName];
+ document.querySelectorAll('#profile_params input, #profile_params select').forEach(function(input) {
+ var name = input.name;
+ var value;
+ if (input.type == 'checkbox') {
+ value = input.checked;
+ } else {
+ value = input.value;
+ }
+
+ var re = new RegExp(
+ '(assign\\s*' +
+ name +
+ '\\s*=?\\s*)([\\w.]*)(\\s*#\\s*%(.*)%\\s*(\\|\\s*(.*)\\s*\\|\\s*(.*)\\s*)?[\\r\\n])'
+ );
+ profileText = profileText.replace(re, function(match, p1, p2, p3) {
+ return p1 + value + p3;
+ });
+ });
+ this.fire('update', {
+ profileText: profileText,
+ callback: function() {}
+ });
+ },
+
_setValue: function(profileText) {
+ if (L.DomUtil.get('profile_editor').style.display == 'flex') {
+ // Set value of the full editor and exit
+ this.editor.setValue(profileText);
+ this.editor.markClean();
+ return;
+ }
+
+ // Otherwise, create user friendly form
var global = profileText.split('---context:').filter(function(e) {
return e.startsWith('global');
});
@@ -108,9 +146,18 @@ BR.Profile = L.Evented.extend({
// Find out type
var paramType = match[6];
+ var paramValues = {};
if (paramType.match(/\[.*\]/)) {
- console.log('TODO: ' + paramType); // TODO
- return;
+ paramType
+ .slice(1, -1)
+ .split(',')
+ .forEach(function(option) {
+ var splitOption = option.split('=');
+ var value = (splitOption[0] || '').replace(/^\s+|\s+$/g, '');
+ var description = (splitOption[1] || '').replace(/^\s+|\s+$/g, '');
+ paramValues[value] = description;
+ });
+ paramType = 'select';
}
// Type is missing, let's try to induce it from value
@@ -135,7 +182,8 @@ BR.Profile = L.Evented.extend({
params[name] = {
description: description,
type: paramType,
- value: value
+ value: value,
+ possible_values: paramValues
};
}
});
@@ -145,43 +193,74 @@ BR.Profile = L.Evented.extend({
Object.keys(params).forEach(function(param) {
var div = document.createElement('div');
var label = document.createElement('label');
- var input = document.createElement('input');
var paramType = params[param].type;
- if (paramType == 'number') {
- input.type = 'number';
- input.value = params[param].value;
- } else if (paramType == 'boolean') {
- input.type = 'checkbox';
- input.checked = params[param].value;
- } else {
- // Unknown parameter type, skip it
- return;
- }
- label.appendChild(input);
- var name = i18next.exists('profileParameters.' + param + '.name')
+ var paramName = i18next.exists('profileParameters.' + param + '.name')
? i18next.t('profileParameters.' + param + '.name')
: param;
- label.append(' ' + name);
+ if (paramType == 'select') {
+ var select = document.createElement('select');
+ select.name = paramName;
+ select.className = 'form-control';
+ label.htmlFor = select.id = 'customize-profile-' + paramName;
- div.appendChild(label);
+ var paramValues = params[param].possible_values;
+ Object.keys(paramValues).forEach(function(paramValue) {
+ var option = document.createElement('option');
+ option.value = paramValue;
+ option.append(paramValues[paramValue]);
+ select.appendChild(option);
+ });
- var small = document.createElement('small');
+ label.append(paramName);
+ div.appendChild(label);
+ div.appendChild(select);
+ } else {
+ var input = document.createElement('input');
+ input.name = paramName;
+ label.htmlFor = input.id = 'customize-profile-' + paramName;
+ if (paramType == 'number') {
+ input.type = 'number';
+ input.value = params[param].value;
+ input.className = 'form-control';
+
+ label.append(paramName);
+ div.appendChild(label);
+ div.appendChild(input);
+ div.className = 'form-group';
+ } else if (paramType == 'boolean') {
+ input.type = 'checkbox';
+ input.checked = params[param].value;
+
+ div.appendChild(input);
+ label.append(paramName);
+ div.appendChild(label);
+ } else {
+ // Unknown parameter type, skip it
+ return;
+ }
+ }
+
+ var helpBlock = document.createElement('p');
var description = i18next.exists('profileParameters.' + param + '.description')
? i18next.t('profileParameters.' + param + '.description')
: params[param].description.replace(/^\s+|\s+$/g, '');
- small.innerHTML = ' (' + description + ')';
+ helpBlock.innerHTML = description;
+ helpBlock.className = 'help-block';
- div.appendChild(small);
+ div.appendChild(helpBlock);
paramsSection.appendChild(div);
});
-
- this.editor.setValue(profileText);
- this.editor.markClean();
},
_toggleAdvanced: function() {
- L.DomUtil.get('profile_params_container').style.display = 'none';
- L.DomUtil.get('profile_editor').style.display = 'flex';
+ if (L.DomUtil.get('profile_editor').style.display == 'flex') {
+ L.DomUtil.get('profile_params_container').style.display = 'initial';
+ L.DomUtil.get('profile_editor').style.display = 'none';
+ } else {
+ L.DomUtil.get('profile_params_container').style.display = 'none';
+ L.DomUtil.get('profile_editor').style.display = 'flex';
+ }
+ this._setValue(this.cache[this.profileName]);
}
});
diff --git a/locales/en.json b/locales/en.json
index e4a6a10..e64ea00 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -158,8 +158,8 @@
}
},
"sidebar": {
- "custom-profile": {
- "title": "Custom profile"
+ "customize-profile": {
+ "title": "Customize profile"
},
"data": {
"title": "Data"
@@ -197,6 +197,9 @@
"clear": "Clear",
"help": "Help",
"placeholder": "Write your custom profile here.",
+ "save": "Save",
+ "switch_advanced": "Switch to advanced editor",
+ "switch_basic": "Switch to basic editor",
"upload": "Upload"
}
},