Sunshine/assets/web/apps.html

<div id="app" class="container">
  <h1>Applications</h1>
  <div>Applications are refreshed only when Client is restarted</div>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(app,i) in apps" :key="i">
        <td>{{app.name}}</td>
        <td><button class="btn btn-primary" @click="editApp(i)">Edit</button>
        <button class="btn btn-danger" @click="showDeleteForm(i)">Delete</button></td>
      </tr>
    </tbody>
  </table>
  <div class="edit-form" v-if="showEditForm">
    <div class="mb-3">
      <label for="appName" class="form-label">Application Name</label>
      <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name">
      <div id="appNameHelp" class="form-text">Application Name, as shown on Moonlight</div>
    </div>
    <div class="mb-3">
      <label for="appName" class="form-label">Output</label>
      <input type="text" class="form-control" id="appOutput" aria-describedby="appOutputHelp" v-model="editForm.output">
      <div id="appOutputHelp" class="form-text">The file where the output of the command is stored, if it is not specified, the output is ignored</div>
    </div>
    <div class="mb-3">
      <label for="appName" class="form-label">Command Preparations</label>
      <div class="form-text">A list of commands to be run before/after the application. <br> If any of the prep-commands fail, starting the application is aborted</div>
      <table>
        <thead>
          <th class="precmd-head">Do</th>
          <th class="precmd-head">Undo</th>
          <th></th>
        </thead>
        <tbody>
          <tr v-for="(c,i) in editForm['prep-cmd']">
            <td><input type="text" class="form-control" v-model="c.do"></td>
            <td><input type="text" class="form-control" v-model="c.undo"></td>
            <td><button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">&times;</button></td>
          </tr>
        </tbody>
      </table>
      <button class="btn btn-success" @click="addPrepCmd">&plus;</button>
    </div>
    <div class="mb-3">
      <label for="appCmd" class="form-label">Command</label>
      <input type="text" class="form-control" id="appCmd" aria-describedby="appCmdHelp" v-model="editForm.cmd">
      <div id="appCmdHelp" class="form-text">The main application, if it is not specified, a processs is started that sleeps indefinitely</div>
    </div>
    <div class="d-flex">
      <button @click="showEditForm = false" class="btn btn-secondary m-2">Cancel</button>
      <button class="btn btn-primary m-2" @click="save">Save</button>
    </div>
  </div>
  <button class="btn btn-primary" v-else @click="newApp">+ Add New</button>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        apps: [],
        showEditForm: false,
        editForm: null,
      }
    },
    created() {
      fetch("/api/apps").then(r => r.json()).then((r) => {
        console.log(r);
        this.apps = r.apps;
      })
    },
    methods: {
      newApp(){
        this.editForm = {
          name: '',
          output: '',
          cmd: [],
          index: -1,
          "prep-cmd": []
        };
        this.editForm.index = -1;
        this.showEditForm = true;
      },
      editApp(id){
        this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
        this.$set(this.editForm,"index",id);
        if(this.editForm["prep-cmd"] === undefined)this.$set(this.editForm,"prep-cmd",[]);
        this.showEditForm = true;
      },
      showDeleteForm(id){
        let resp = confirm("Are you sure to delete " + this.apps[id].name + "?");
        if(resp){
          fetch("/api/apps/" + id,{method: "DELETE"}).then((r)=>{
          if(r.status == 200)document.location.reload();
        });
        }
      },
      addPrepCmd(){
        this.editForm['prep-cmd'].push({
          do: '',
          undo: '',
        });
      },
      save(){
        console.log("AAAAAAA")
        fetch("/api/apps",{method: "POST",body: JSON.stringify(this.editForm)}).then((r)=>{
          if(r.status == 200)document.location.reload();
        });
      }
    }
  })
</script>

<style>
  .precmd-head {
    width: 200px;
  }
</style>