Started Work on Web UI

assets/web/apps.html

@@ -0,0 +1,124 @@
+<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>