Sunshine/assets/web/apps.html

<div id="app" class="container">
  <div class="my-4">
    <h1>Applications</h1>
    <div>Applications are refreshed only when Client is restarted</div>
  </div>
  <div class="card p-4">
    <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>
  <div class="edit-form card mt-2" v-if="showEditForm">
    <div class="p-4">
      <!--name-->
      <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>
      <!--output-->
      <div class="mb-3">
        <label for="appOutput" class="form-label">Output</label>
        <input
          type="text"
          class="form-control monospace"
          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>
      <!--prep-cmd-->
      <div class="mb-3 d-flex flex-column">
        <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 v-if="editForm['prep-cmd'].length > 0">
          <thead>
            <th class="precmd-head">Do</th>
            <th class="precmd-head">Undo</th>
            <th style="width: 48px"></th>
          </thead>
          <tbody>
            <tr v-for="(c,i) in editForm['prep-cmd']">
              <td>
                <input
                  type="text"
                  class="form-control monospace"
                  v-model="c.do"
                />
              </td>
              <td>
                <input
                  type="text"
                  class="form-control monospace"
                  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="mt-2 btn btn-success"
          style="margin: 0 auto"
          @click="addPrepCmd"
        >
          &plus; Add
        </button>
      </div>
      <!--detatched-->
      <div class="mb-3">
        <label for="appName" class="form-label">Detached Commands</label>
        <div
          v-for="(c,i) in editForm.detached"
          class="d-flex justify-content-between my-2"
        >
          <pre>{{c}}</pre>
          <button
            class="btn btn-danger mx-2"
            @click="editForm.detached.splice(i,1)"
          >
            &times;
          </button>
        </div>
        <div class="d-flex justify-content-between">
          <input
            type="text"
            class="form-control monospace"
            v-model="detachedCmd"
          />
          <button
            class="btn btn-success mx-2"
            @click="editForm.detached.push(detachedCmd);detachedCmd = '';"
          >
            +
          </button>
        </div>
        <div class="form-text">
          A list of commands to be run and forgotten about
        </div>
      </div>
      <!--command-->
      <div class="mb-3">
        <label for="appCmd" class="form-label">Command</label>
        <input
          type="text"
          class="form-control monospace"
          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>
      <!--working dir-->
      <div class="mb-3">
        <label for="appWorkingDir" class="form-label">Working Directory</label>
        <input
          type="text"
          class="form-control monospace"
          id="appWorkingDir"
          aria-describedby="appWorkingDirHelp"
          v-model="editForm['working-dir']"
        />
        <div id="appWorkingDirHelp" class="form-text">
          The working directory that should be passed to the process.
          For example, some applications use the working directory to search for configuration files.
          If not set, Sunshine will default to the parent directory of the command
        </div>
      </div>
      <!--buttons-->
      <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>
  </div>
  <div class="mt-2" v-else>
    <button class="btn btn-primary" @click="newApp">+ Add New</button>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        apps: [],
        showEditForm: false,
        editForm: null,
        detachedCmd: "",
      };
    },
    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": [],
          detached: [],
        };
        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", []);
        if (this.editForm["detached"] === undefined)
          this.$set(this.editForm, "detached", []);
        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() {
        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;
  }

  .monospace {
    font-family: monospace;
  }
</style>