ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Checkbox for boolean values + rework UI a bit

Browse source
This commit is contained in:
Phyks (Lucas Verney) 2019-08-21 14:52:20 +02:00
parent fadf2d1a70
commit 93de9c0164
3 changed files with 98 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -188,6 +188,10 @@ input#trackname:focus:invalid {
cursor: auto; cursor: auto;
} }
#profile_editor {
display: none;
}
#profile_buttons { #profile_buttons {
padding-top: 4px; padding-top: 4px;
} }

86
index.html
View file

@ -646,37 +646,61 @@
><span data-i18n="sidebar.custom-profile.title">Custom profile</span> ><span data-i18n="sidebar.custom-profile.title">Custom profile</span>
</h1> </h1>
<form class="flexcolumn flexgrow"> <form class="flexcolumn flexgrow">
<div id="profile_params"></div> <div id="profile_params_container">
<textarea <div id="profile_params"></div>
class="form-control flexgrow" <div class="form-group" id="profile_buttons">
id="profile_upload" <button
spellcheck="false" id="upload"
wrap="off" type="button"
data-i18n="[placeholder]sidebar.profile.placeholder" class="btn btn-primary btn-sm"
placeholder="Write your custom profile here." data-uploading-text="Uploading…"
></textarea> >
<div id="profile_message"></div> <span class="fa fa-cloud-upload"></span>
<div class="form-group" id="profile_buttons"> <span data-i18n="sidebar.profile.upload">Upload</span>
<button </button>
id="upload" <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-info btn-sm pull-right"
data-uploading-text="Uploading…" id="profile_advanced"
> >
<span class="fa fa-cloud-upload"></span> <span data-i18n="sidebar.profile.switch_advanced"
<span data-i18n="sidebar.profile.upload">Upload</span> >Switch to advanced editor</span
</button> >
<button id="clear" type="button" class="btn btn-secondary btn-sm"> </button>
<span class="fa fa-eraser"></span> </div>
<span data-i18n="sidebar.profile.clear">Clear</span> </div>
</button> <div id="profile_editor" class="flexcolumn flexgrow">
<a <textarea
href="https://brouter.de/brouter/costfunctions.html" class="form-control flexgrow"
target="_blank" id="profile_upload"
class="btn btn-info btn-sm pull-right" spellcheck="false"
><span class="fa fa-question"></span> wrap="off"
<span data-i18n="sidebar.profile.help">Help</span></a data-i18n="[placeholder]sidebar.profile.placeholder"
> placeholder="Write your custom profile here."
></textarea>
<div id="profile_message"></div>
<div class="form-group" id="profile_buttons">
<button
id="upload"
type="button"
class="btn btn-primary btn-sm"
data-uploading-text="Uploading…"
>
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.upload">Upload</span>
</button>
<button id="clear" type="button" class="btn btn-secondary btn-sm">
<span class="fa fa-eraser"></span>
<span data-i18n="sidebar.profile.clear">Clear</span>
</button>
<a
href="https://brouter.de/brouter/costfunctions.html"
target="_blank"
class="btn btn-info btn-sm pull-right"
><span class="fa fa-question"></span>
<span data-i18n="sidebar.profile.help">Help</span></a
>
</div>
</div> </div>
</form> </form>
</div> </div>

61
js/control/Profile.js
View file

@ -7,6 +7,11 @@ BR.Profile = L.Evented.extend({
lineNumbers: true lineNumbers: true
}); });
var that = this;
L.DomUtil.get('profile_advanced').addEventListener('click', function() {
that._toggleAdvanced();
});
L.DomUtil.get('upload').onclick = L.bind(this._upload, this); L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
L.DomUtil.get('clear').onclick = L.bind(this.clear, this); L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
@ -88,24 +93,27 @@ BR.Profile = L.Evented.extend({
}); });
if (global) { if (global) {
global = global[0].split('\n').slice(1); global = global[0].split('\n').slice(1);
var assignRegex = /assign\s*(\w*)\s*=?\s*([\w\.]*)\s*(#.*)?$/; // Comment is mandatory
var assignRegex = /assign\s*(\w*)\s*=?\s*([\w\.]*)\s*#\s*(.*)\s*$/;
var params = {}; var params = {};
global.forEach(function(item) { global.forEach(function(item) {
var match = item.match(assignRegex); var match = item.match(assignRegex);
var value;
if (match) { if (match) {
if (match[2] == 'true') { if (match[2] == 'true' || match[2] == 'false') {
match[2] = 1; paramType = 'checkbox';
} else if (match[2] == 'false') { value = match[2] == 'true';
match[2] = 0;
} else { } else {
match[2] = Number.parseFloat(match[2]); value = Number.parseFloat(match[2]);
} if (Number.isNaN(value)) {
if (Number.isNaN(match[2])) { return;
return; }
paramType = 'number';
} }
params[match[1]] = { params[match[1]] = {
comment: match[3] ? match[3].replace(/^#\s+|\s+$/g, '') : null, comment: match[3],
value: match[2] type: paramType,
value: value
}; };
} }
}); });
@ -113,23 +121,32 @@ BR.Profile = L.Evented.extend({
var paramsSection = L.DomUtil.get('profile_params'); var paramsSection = L.DomUtil.get('profile_params');
paramsSection.innerHTML = ''; paramsSection.innerHTML = '';
Object.keys(params).forEach(function(param) { Object.keys(params).forEach(function(param) {
var p = document.createElement('p'); var div = document.createElement('div');
var label = document.createElement('label'); var label = document.createElement('label');
label.innerHTML = param;
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'text'; input.type = params[param].type;
input.value = params[param].value; if (input.type == 'checkbox') {
p.appendChild(label); input.checked = params[param].value;
label.appendChild(input); label.appendChild(input);
paramsSection.appendChild(label); label.append(' ' + param);
if (params[param].comment) { } else {
var p = document.createElement('p'); input.value = params[param].value;
p.innerHTML = params[param].comment; label.append(param + ' ');
paramsSection.append(p); label.appendChild(input);
} }
div.appendChild(label);
var small = document.createElement('small');
small.innerHTML = ' (' + params[param].comment + ')';
div.appendChild(small);
paramsSection.appendChild(div);
}); });
this.editor.setValue(profileText); this.editor.setValue(profileText);
this.editor.markClean(); this.editor.markClean();
},
_toggleAdvanced: function() {
L.DomUtil.get('profile_params_container').style.display = 'none';
L.DomUtil.get('profile_editor').style.display = 'flex';
} }
}); });