282 lines
8.2 KiB
HTML
282 lines
8.2 KiB
HTML
|
<!--
|
|||
|
|
Twizy page plugin: Drivemode Button Configuration
|
|||
|
|
Note: included in firmware v3.2
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.fullscreened .panel-single .panel-body {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-group-lg>.btn,
|
|||
|
|
.btn-lg {
|
|||
|
|
padding: 10px 3px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
#loadmenu .btn {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.btn-group.btn-group-lg.exchange {
|
|||
|
|
width: 2%;
|
|||
|
|
}
|
|||
|
|
#editor .btn:hover {
|
|||
|
|
background-color: #e6e6e6;
|
|||
|
|
}
|
|||
|
|
#editor .btn-group-lg>.btn,
|
|||
|
|
#editor .btn-lg {
|
|||
|
|
padding: 10px 0px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
#editor .exchange .btn {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.night #editor .btn {
|
|||
|
|
color: #000;
|
|||
|
|
background: #888;
|
|||
|
|
}
|
|||
|
|
.night #editor .btn.focus,
|
|||
|
|
.night #editor .btn:focus,
|
|||
|
|
.night #editor .btn:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-list {
|
|||
|
|
height: 313px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
}
|
|||
|
|
.radio-list .radio {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.radio-list .key {
|
|||
|
|
min-width: 20px;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
.radio-list kbd {
|
|||
|
|
min-width: 60px;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 0 20px 0 10px;
|
|||
|
|
}
|
|||
|
|
.radio-list .radio label {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 8px 30px;
|
|||
|
|
}
|
|||
|
|
.radio-list .radio label.active {
|
|||
|
|
background-color: #337ab7;
|
|||
|
|
color: #fff;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
.radio-list .radio label.active input {
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
.night .radio-list .radio label:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<div class="panel panel-primary">
|
|||
|
|
<div class="panel-heading">Drivemode Button Configuration</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<form action="#">
|
|||
|
|
|
|||
|
|
<p id="info">Loading button configuration…</p>
|
|||
|
|
|
|||
|
|
<div id="loadmenu" class="btn-group btn-group-justified"></div>
|
|||
|
|
<div id="editor" class="btn-group btn-group-justified">
|
|||
|
|
<div class="btn-group btn-group-lg add back">
|
|||
|
|
<button type="button" class="btn" title="Add button">✚</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<br>
|
|||
|
|
<br>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<button type="button" class="btn btn-default" onclick="reloadpage()">Reset</button>
|
|||
|
|
<button type="button" class="btn btn-primary action-save">Save</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-footer">
|
|||
|
|
<a class="btn btn-sm btn-default" target="#main" href="/dashboard">Dashboard</a>
|
|||
|
|
<a class="btn btn-sm btn-default" target="#main" href="/xrt/drivemode">Drivemode</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="key-dialog" />
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
(function(){
|
|||
|
|
|
|||
|
|
var $menu = $('#loadmenu'), $edit = $('#editor'), $back = $edit.find('.back');
|
|||
|
|
|
|||
|
|
var pbuttons = [0,1,2,3];
|
|||
|
|
var plist = [
|
|||
|
|
{ label: "STD", title: "Standard" },
|
|||
|
|
{ label: "PWR", title: "Power" },
|
|||
|
|
{ label: "ECO", title: "Economy" },
|
|||
|
|
{ label: "ICE", title: "Winter" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// load profile list & button config:
|
|||
|
|
$('.panel').addClass("loading");
|
|||
|
|
var plistloader = loadcmd('config list xrt').then(function(data) {
|
|||
|
|
var lines = data.split('\n'), line, i, key;
|
|||
|
|
for (i = 0; i < lines.length; i++) {
|
|||
|
|
line = lines[i].match(/profile([0-9]{2})\.?([^:]*): (.*)/);
|
|||
|
|
if (line && line.length == 4) {
|
|||
|
|
key = Number(line[1]);
|
|||
|
|
if (key < 1 || key > 99) continue;
|
|||
|
|
if (!plist[key]) plist[key] = {};
|
|||
|
|
plist[key][line[2]||"profile"] = line[3];
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
line = lines[i].match(/profile_buttons: (.*)/);
|
|||
|
|
if (line && line.length == 2) {
|
|||
|
|
try {
|
|||
|
|
pbuttons = JSON.parse("[" + line[1] + "]");
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// prep key dialog:
|
|||
|
|
$('#key-dialog').dialog({
|
|||
|
|
show: false,
|
|||
|
|
title: "Select Profile",
|
|||
|
|
buttons: [{ label: 'Cancel', btnClass: 'default' },{ label: 'Select', btnClass: 'primary' }],
|
|||
|
|
onShow: function(input) {
|
|||
|
|
var $this = $(this), dlg = $this.data("dialog");
|
|||
|
|
$this.addClass("loading");
|
|||
|
|
plistloader.then(function(data) {
|
|||
|
|
var curkey = dlg.options.key || 0, i, label, title;
|
|||
|
|
$plist = $('<div class="radio-list" data-toggle="buttons" />');
|
|||
|
|
for (i = 0; i <= Math.min(99, plist.length-1); i++) {
|
|||
|
|
if (plist[i] && (i==0 || plist[i].profile)) {
|
|||
|
|
label = plist[i].label || "–";
|
|||
|
|
title = plist[i].title || (plist[i].profile.substr(0, 10) + "…");
|
|||
|
|
} else {
|
|||
|
|
label = "–";
|
|||
|
|
title = "–new–";
|
|||
|
|
}
|
|||
|
|
$plist.append('<div class="radio"><label class="btn">' +
|
|||
|
|
'<input type="radio" name="key" value="' + i + '"><span class="key">' +
|
|||
|
|
((i==0) ? "STD" : ("#" + ((i<10)?'0':'') + i)) + '</span> <kbd>' +
|
|||
|
|
encode_html(label) + '</kbd> ' + encode_html(title) + '</label></div>');
|
|||
|
|
}
|
|||
|
|
$this.find('.modal-body').html($plist).find('input[value="'+curkey+'"]')
|
|||
|
|
.prop("checked", true).parent().addClass("active");
|
|||
|
|
$plist
|
|||
|
|
.on('dblclick', 'label.btn', function(ev) { $this.dialog('triggerButton', 1); })
|
|||
|
|
.on('keypress', function(ev) { if (ev.which==13) $this.dialog('triggerButton', 1); });
|
|||
|
|
$this.removeClass("loading");
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onShown: function(input) {
|
|||
|
|
$(this).find('.btn.active').focus();
|
|||
|
|
},
|
|||
|
|
onHide: function(input) {
|
|||
|
|
var $this = $(this), dlg = $this.data("dialog");
|
|||
|
|
var key = $this.find('input[name="key"]:checked').val();
|
|||
|
|
if (key !== undefined && input.button && input.button.index)
|
|||
|
|
dlg.options.onAction.call(this, key);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// profile selection:
|
|||
|
|
$('#loadmenu').on('click', 'button', function(ev) {
|
|||
|
|
var $this = $(this);
|
|||
|
|
$('#key-dialog').dialog({
|
|||
|
|
show: true,
|
|||
|
|
key: $this.val(),
|
|||
|
|
onAction: function(key) {
|
|||
|
|
var prof = plist[key] || {};
|
|||
|
|
$this.val(key);
|
|||
|
|
$this.attr("title", prof.title || "");
|
|||
|
|
$this.text(prof.label || ("#"+((key<10)?"0":"")+key));
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// create buttons:
|
|||
|
|
|
|||
|
|
function addButton(key, front) {
|
|||
|
|
var prof = plist[key] || {};
|
|||
|
|
if ($menu[0].childElementCount == 0) {
|
|||
|
|
$back.before('\
|
|||
|
|
<div class="btn-group btn-group-lg add front">\
|
|||
|
|
<button type="button" class="btn" title="Add button">✚</button>\
|
|||
|
|
</div>\
|
|||
|
|
<div class="btn-group btn-group-lg remove">\
|
|||
|
|
<button type="button" class="btn" title="Remove button">✖</button>\
|
|||
|
|
</div>');
|
|||
|
|
} else {
|
|||
|
|
$back.before('\
|
|||
|
|
<div class="btn-group btn-group-lg exchange">\
|
|||
|
|
<button type="button" class="btn" title="Exchange buttons">⇄</button>\
|
|||
|
|
</div>\
|
|||
|
|
<div class="btn-group btn-group-lg remove">\
|
|||
|
|
<button type="button" class="btn" title="Remove button">✖</button>\
|
|||
|
|
</div>');
|
|||
|
|
}
|
|||
|
|
var $btn = $('\
|
|||
|
|
<div class="btn-group btn-group-lg">\
|
|||
|
|
<button type="button" value="{key}" class="btn btn-default" title="{title}">{label}</button>\
|
|||
|
|
</div>'
|
|||
|
|
.replace("{key}", key)
|
|||
|
|
.replace("{title}", encode_html(prof.title || ""))
|
|||
|
|
.replace("{label}", encode_html(prof.label || "#"+((key<10)?"0":"")+key)));
|
|||
|
|
if (front)
|
|||
|
|
$menu.prepend($btn);
|
|||
|
|
else
|
|||
|
|
$menu.append($btn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
plistloader.then(function() {
|
|||
|
|
var key, prof;
|
|||
|
|
for (var i = 0; i < pbuttons.length; i++) {
|
|||
|
|
addButton(pbuttons[i]);
|
|||
|
|
}
|
|||
|
|
$('.panel').removeClass("loading");
|
|||
|
|
$('#info').text("Click button to select profile:");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// editor buttons:
|
|||
|
|
$('#editor').on('click', '.add .btn', function(ev) {
|
|||
|
|
addButton(0, $(this).parent().hasClass("front"));
|
|||
|
|
}).on('click', '.remove .btn', function(ev) {
|
|||
|
|
var $this = $(this), pos = $edit.find('.btn').index(this) >> 1;
|
|||
|
|
$($menu.children().get(pos)).detach();
|
|||
|
|
if (pos > 0 || $menu[0].childElementCount == 0)
|
|||
|
|
$this.parent().prev().detach();
|
|||
|
|
else if ($menu[0].childElementCount != 0)
|
|||
|
|
$this.parent().next().detach();
|
|||
|
|
$this.parent().detach();
|
|||
|
|
}).on('click', '.exchange .btn', function(ev) {
|
|||
|
|
var pos = $edit.find('.btn').index(this) >> 1;
|
|||
|
|
if (pos > 0) $($menu.children().get(pos)).insertBefore($($menu.children().get(pos-1)));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// save:
|
|||
|
|
$('.action-save').on('click', function(ev) {
|
|||
|
|
pbuttons = [];
|
|||
|
|
$menu.find('.btn').each(function() { pbuttons.push(this.value) });
|
|||
|
|
loadcmd('config set xrt profile_buttons ' + pbuttons.toString())
|
|||
|
|
.fail(function(request, textStatus, errorThrown) {
|
|||
|
|
confirmdialog("Save Configuration", xhrErrorInfo(request, textStatus, errorThrown), ["Close"]);
|
|||
|
|
})
|
|||
|
|
.done(function(res) {
|
|||
|
|
confirmdialog("Save Configuration", res, ["Close"]);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
})();
|
|||
|
|
</script>
|