configui/templates/base/script.tmpl

{{define "base/script"}}
<script>
window.ToolIsFollow = false;
window.LastDelta = 0;
window.ContentChanged = false;

async function FileGet(){
  if (Active == '{{.AppName}}') {
    const res = await fetch('{{.BaseUrl}}api/conf')
      .catch(err=>{console.log(err);return;});
    const body = await res.text();
    if(!res.ok){
      Catch(res)
      return
    }
    LastDelta = 0;
    editor.session.setValue(body);
  }
  else {
    const res = await fetch('{{.BaseUrl}}api/file?name=' + Active)
      .catch(err=>{console.log(err);return;});
    const body = await res.json();
    if(!res.ok){
      Catch(res)
      return
    }
    LastDelta = body.delta;
    editor.session.setValue(body.data);
  }
}

async function FileSave(){
  if (Active == '{{.AppName}}') {
    const res = await fetch('{{.BaseUrl}}api/conf', {
      method: 'POST',
      body: editor.getValue(),
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).catch(err=>{console.log(err);return;});
    if (res.ok) {
      window.location.reload();
      window.ContentChanged = false
    }
    else Catch(res)
  }
  else {
    const res = await fetch('{{.BaseUrl}}api/file', {
      method: 'POST',
      body: JSON.stringify({"name":Active,"data":editor.getValue()}),
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).catch(err=>{console.log(err);return;});
    if(!res.ok) Catch(res)
    else window.ContentChanged = false
  }
}

async function FileApply(){
  if (Active == '{{.AppName}}') {
    return;
  }
  else {
    const res = await fetch('{{.BaseUrl}}api/apply?name='+ Active, {
      method: 'POST',
    });
    if(!res.ok){
      const result = await Catch(res)
      result_editor.session.setValue(result)
      return
    }
    const result = await res.text()
    result_editor.session.setValue(result)
  }
}

async function DoAction(type, name){
  const res = await fetch('{{.BaseUrl}}api/'+type+'?name='+ name, {
    method: 'POST',
  });
  if(!res.ok){
    const result = await Catch(res)
    result_editor.session.setValue(result)
    return
  }
  const result = await res.text()
  result_editor.session.setValue(result)
}

async function FileDelta(){
  if (Active == '{{.AppName}}') {
    await FileGet()
    return
  }
  else {
    const res = await fetch('{{.BaseUrl}}api/delta?f=true&name=' + Active+'&delta='+LastDelta)
      .catch(err=>{console.log(err);return;});
    if(!res.ok){
      await Catch(res)
      FileGet()
      return
    }
    const body = await res.json();
    LastDelta = body.delta;
    editor.session.setValue(editor.getValue()+body.data);
  }
}

async function Catch(res){
  {{/* console.trace()
  console.log(res) */}}
  const msg = await res.text()
  ShowError(msg)
  return msg
}


function setResult(){
  var result_editor = ace.edit("result_editor");
  window.result_editor = result_editor
  result_editor.setTheme("ace/theme/monokai");
  result_editor.session.setMode("ace/mode/sh");
  result_editor.setReadOnly(true);
  result_editor.setOptions({
    maxLines: Infinity
  });
  {{if not .ResultBellow}}
    document.addEventListener('keydown', function (e) {
      if (e.key === "Escape"){
        let el = document.getElementById('result_view')
        el.classList.remove('is-active')
      }
    })
  {{end}}
}

// starting point
(function(){

  // setup ace editor
  setEditor()

  // setup result code block
  setResult()
  
  // for follow mode
  setInterval((async ()=>{
    if (ToolIsFollow){
      await FileDelta()
      editor.gotoLine(editor.session.getLength());
    }
  }), 1000)
}())
</script>
{{end}}