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>
|