shutdown-dialog.html

<template id="shutdown-dialog-template">
  <style>
    @import "css/style.css";

    #prompt,
    #restarting,
    #shutting-down,
    #shutdown-complete {
      display: none;
    }

    :host([state="prompt"]) #prompt {
      display: block;
    }

    :host([state="restarting"]) #restarting {
      display: block;
    }

    :host([state="shutting-down"]) #shutting-down {
      display: block;
    }

    :host([state="shutdown-complete"]) #shutdown-complete {
      display: block;
    }
  </style>

  <div id="prompt">
    <h3>Shut Down TinyPilot Device?</h3>
    <p>
      Note that this will shut down <strong>TinyPilot</strong>, not the machine
      to which it is attached.
    </p>
    <button id="confirm-shutdown" class="btn-danger" type="button">
      Shut Down
    </button>
    <button id="confirm-restart" class="btn-danger" type="button">
      Restart
    </button>
    <button id="cancel-shutdown" type="button">Close</button>
  </div>

  <div id="restarting">
    <h3>Restarting TinyPilot Device</h3>
    <progress-spinner></progress-spinner>
  </div>

  <div id="shutting-down">
    <h3>Shutting Down TinyPilot Device</h3>
    <progress-spinner></progress-spinner>
  </div>

  <div id="shutdown-complete">
    <h3>Shutdown Complete</h3>
  </div>
</template>

<script type="module">
  import {
    DialogClosedEvent,
    DialogFailedEvent,
    DialogCloseStateChangedEvent,
    DialogVariantChangedEvent,
  } from "/js/events.js";
  import { shutdown } from "/js/controllers.js";

  (function () {
    const template = document.querySelector("#shutdown-dialog-template");

    customElements.define(
      "shutdown-dialog",
      class extends HTMLElement {
        _states = {
          PROMPT: "prompt",
          RESTARTING: "restarting",
          SHUTTING_DOWN: "shutting-down",
          SHUTDOWN_COMPLETE: "shutdown-complete",
        };
        _statesWithoutDialogClose = new Set([
          this._states.RESTARTING,
          this._states.SHUTTING_DOWN,
          this._states.SHUTDOWN_COMPLETE,
        ]);

        constructor() {
          super();
        }

        connectedCallback() {
          this.attachShadow({ mode: "open" }).appendChild(
            template.content.cloneNode(true)
          );
          this._state = this._states.PROMPT;

          this.shadowRoot
            .getElementById("confirm-shutdown")
            .addEventListener("click", () => {
              this._doShutdown(/*restart=*/ false);
            });
          this.shadowRoot
            .getElementById("confirm-restart")
            .addEventListener("click", () => {
              this._doShutdown(/*restart=*/ true);
            });
          this.shadowRoot
            .getElementById("cancel-shutdown")
            .addEventListener("click", () => {
              this.dispatchEvent(new DialogClosedEvent());
            });
        }

        get _state() {
          return this.getAttribute("state");
        }

        set _state(newValue) {
          this.setAttribute("state", newValue);
          this.dispatchEvent(
            new DialogCloseStateChangedEvent(
              !this._statesWithoutDialogClose.has(newValue)
            )
          );
        }

        _doShutdown(restart) {
          shutdown(restart)
            .then(() => {
              this._emitShutdownStartedEvent(restart);
              if (restart) {
                this._state = this._states.RESTARTING;
              } else {
                this._state = this._states.SHUTTING_DOWN;
                // We can't tell when the system has fully shut down, but assume
                // that it's done after 30 seconds.
                setTimeout(() => {
                  this._state = this._states.SHUTDOWN_COMPLETE;
                  this.dispatchEvent(new DialogVariantChangedEvent("success"));
                }, 30 * 1000);
              }
            })
            .catch((error) => {
              if (restart) {
                this.dispatchEvent(
                  new DialogFailedEvent({
                    title: "Failed to Restart TinyPilot Device",
                    details: error,
                  })
                );
              } else {
                this.dispatchEvent(
                  new DialogFailedEvent({
                    title: "Failed to Shut Down TinyPilot Device",
                    details: error,
                  })
                );
              }
            });
        }

        _emitShutdownStartedEvent(restart) {
          this.dispatchEvent(
            new CustomEvent("shutdown-started", {
              detail: { restart },
              bubbles: true,
              composed: true,
            })
          );
        }
      }
    );
  })();
</script>