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;
}
#profile_editor {
display: none;
}
#profile_buttons {
padding-top: 4px;
}

86
index.html
View file

@ -646,37 +646,61 @@
><span data-i18n="sidebar.custom-profile.title">Custom profile</span>
</h1>
<form class="flexcolumn flexgrow">
<div id="profile_params"></div>
<textarea
class="form-control flexgrow"
id="profile_upload"
spellcheck="false"
wrap="off"
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 id="profile_params_container">
<div id="profile_params"></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
type="button"
class="btn btn-info btn-sm pull-right"
id="profile_advanced"
>
<span data-i18n="sidebar.profile.switch_advanced"
>Switch to advanced editor</span
>
</button>
</div>
</div>
<div id="profile_editor" class="flexcolumn flexgrow">
<textarea
class="form-control flexgrow"
id="profile_upload"
spellcheck="false"
wrap="off"
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>
</form>
</div>

61
js/control/Profile.js
View file

@ -7,6 +7,11 @@ BR.Profile = L.Evented.extend({
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('clear').onclick = L.bind(this.clear, this);
@ -88,24 +93,27 @@ BR.Profile = L.Evented.extend({
});
if (global) {
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 = {};
global.forEach(function(item) {
var match = item.match(assignRegex);
var value;
if (match) {
if (match[2] == 'true') {
match[2] = 1;
} else if (match[2] == 'false') {
match[2] = 0;
if (match[2] == 'true' || match[2] == 'false') {
paramType = 'checkbox';
value = match[2] == 'true';
} else {
match[2] = Number.parseFloat(match[2]);
}
if (Number.isNaN(match[2])) {
return;
value = Number.parseFloat(match[2]);
if (Number.isNaN(value)) {
return;
}
paramType = 'number';
}
params[match[1]] = {
comment: match[3] ? match[3].replace(/^#\s+|\s+$/g, '') : null,
value: match[2]
comment: match[3],
type: paramType,
value: value
};
}
});
@ -113,23 +121,32 @@ BR.Profile = L.Evented.extend({
var paramsSection = L.DomUtil.get('profile_params');
paramsSection.innerHTML = '';
Object.keys(params).forEach(function(param) {
var p = document.createElement('p');
var div = document.createElement('div');
var label = document.createElement('label');
label.innerHTML = param;
var input = document.createElement('input');
input.type = 'text';
input.value = params[param].value;
p.appendChild(label);
label.appendChild(input);
paramsSection.appendChild(label);
if (params[param].comment) {
var p = document.createElement('p');
p.innerHTML = params[param].comment;
paramsSection.append(p);
input.type = params[param].type;
if (input.type == 'checkbox') {
input.checked = params[param].value;
label.appendChild(input);
label.append(' ' + param);
} else {
input.value = params[param].value;
label.append(param + ' ');
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.markClean();
},
_toggleAdvanced: function() {
L.DomUtil.get('profile_params_container').style.display = 'none';
L.DomUtil.get('profile_editor').style.display = 'flex';
}
});