configui/templates/components/toolbar.tmpl

132 lines
3.4 KiB
Cheetah

{{define "components/toolbar"}}
<div class="level">
<div class="level-left">
<div class="field has-addons">
<p class="control">
<div class="select">
<select onchange="SetTabstop(this)">
<option value="0">Tabstop</option>
<option value="4">Tabstop 4</option>
<option value="2">Tabstop 2</option>
<option value="-1">Tab</option>
</select>
</div>
</p>
<p class="control">
<button class="button" id="toolFollow" onclick="toolFollow()">Follow</button>
</p>
<p class="control">
<button class="button" onclick="toolFormat()">Format</button>
</p>
<p class="control">
<button class="button is-light is-danger" id="toolWrap" onclick="toggleWrap()">NoWrap</button>
</p>
</div>
</div>
<div class="level-right">
<div class="field has-addons">
<p class="control">
<button class="button" id="toolRefresh" onclick="toolRefresh()">Refresh</button>
</p>
{{if not .File.RO}}
<p class="control">
{{if eq .File.Alias "ConfigUI"}}
<button class="button" id="toolSave" onclick="toolSave()">Apply</button>
{{else}}
<button class="button" id="toolSave" onclick="toolSave()">Save</button>
{{end}}
</p>
{{end}}
{{if .File.Action}}
<p class="control">
<button class="button has-tooltip-arrow"
data-tooltip="{{.File.Action}}"
id="toolApply" onclick="toolApply()"
>Apply</button>
</p>
{{/* <p class="control">
<a class="button" href="/api/dl?name">Download</a>
</p> */}}
{{end}}
</div>
</div>
</div>
<script>
function SetTabstop(obj){
let value = obj.value;
switch (value) {
case "-1":
editor.session.setUseSoftTabs(false);
break;
case "2":
editor.session.setTabSize(2);
editor.session.setUseSoftTabs(true);
break;
case "4":
editor.session.setTabSize(4);
editor.session.setUseSoftTabs(true);
break;
default:
break;
}
}
function toggleWrap(){
let mode = editor.session.getUseWrapMode();
editor.session.setUseWrapMode(!mode)
let el = document.getElementById('toolWrap');
if (mode){
el.classList.remove('is-success');
el.classList.add('is-danger');
el.innerHTML = 'NoWrap'
} else {
el.classList.remove('is-danger');
el.classList.add('is-success');
el.innerHTML = 'Wrap'
}
}
function toolFormat(){
beautify.beautify(editor.session);
}
function toolFollow(){
if (ToolIsFollow){
ToolIsFollow = false
let el = document.getElementById('toolFollow');
el.classList.remove('is-primary');
} else {
ToolIsFollow = true
let el = document.getElementById('toolFollow');
el.classList.add('is-primary');
editor.gotoLine(editor.session.getLength());
}
}
async function toolRefresh(){
let el = document.getElementById('toolRefresh');
el.classList.add("is-loading")
await FileGet()
el.classList.remove("is-loading")
}
async function toolSave(){
let el = document.getElementById('toolSave');
el.classList.add("is-loading")
await FileSave()
el.classList.remove("is-loading")
}
async function toolApply(){
let el = document.getElementById('toolApply');
el.classList.add("is-loading")
await FileApply()
el.classList.remove("is-loading")
ResultViewTog()
}
</script>
{{end}}