From ff86c85a8acd96798c7478104a27ffde88f4938f Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Thu, 5 Sep 2019 16:55:27 +0200 Subject: [PATCH] Full first draft of a working UI --- css/style.css | 25 +++++++- index.html | 30 +++++----- js/control/Profile.js | 131 +++++++++++++++++++++++++++++++++--------- locales/en.json | 7 ++- 4 files changed, 147 insertions(+), 46 deletions(-) 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 @@

Custom profile + >Customize profile

- - + +
@@ -700,6 +692,10 @@ > Help + +
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" } },