Sunshine/assets/web/troubleshooting.html

<div id="app" class="container">
  <h1 class="my-4">Troubleshooting</h1>
  <!--Force Close App-->
  <div class="card p-2 my-4">
    <div>
      <h2>Force Close</h2>
      <br />
      <p>
        If Moonlight complains about an app currently running, force closing the
        app should fix the issue
      </p>
    </div>
    <div>
      <button
        class="btn btn-warning"
        :disabled="closeAppPressed"
        @click="closeApp"
      >
        Force Close
      </button>
    </div>
  </div>
  <!--Unpair all Clients-->
  <div class="card p-2 my-4">
    <div>
      <h2>Unpair All Clients</h2>
      <br />
      <p>Remove all your paired devices</p>
    </div>
    <div>
      <button
        class="btn btn-danger"
        :disabled="unpairAllPressed"
        @click="unpairAll"
      >
        Unpair All
      </button>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        closeAppPressed: false,
        closeAppStatus: null,
        unpairAllPressed: false,
        unpairAllStatus: null,
      };
    },
    methods: {
      closeApp() {
        this.closeAppPressed = true;
        fetch("/api/apps/close", { method: "POST" })
          .then((r) => r.json())
          .then((r) => {
            this.closeAppPressed = false;
            this.closeAppStatus = r.status.toString() === "true";
          });
      },
      unpairAll() {
        this.unpairAllPressed = true;
        fetch("/api/clients/unpair", { method: "POST" })
          .then((r) => r.json())
          .then((r) => {
            this.unpairAllPressed = false;
            this.unpairAllStatus = r.status.toString() === "true";
          });
      },
    },
  });
</script>