tinypilot/app/templates/custom-elements/error-dialog.html at master · tiny-pilot/tinypilot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template id="error-dialog-template">
  <style>
    @import "css/style.css";

    #message {
      margin-bottom: 2em;
    }

    #share-logs-button {
      display: none;
    }

    :host([is-shareable]) #share-logs-button {
      display: block;
    }

    .details-header {
      display: flex;
      align-items: end;
    }

    #details {
      padding: 0.5rem;
      max-height: 30vh;
      overflow: auto;
      opacity: 0.7;
      border: 1px solid black;
      background-color: white;
      text-align: left;
      font-size: 0.8em;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      border-radius: var(--border-radius);
    }

    .details-label {
      color: var(--brand-red);
      font-weight: 600;
      text-align: left;
      margin: 0 0.4rem;
    }
  </style>

  <h3 id="title"></h3>
  <p id="message"></p>
  <div id="details-container">
    <div class="details-header">
      <div class="details-label">Details:</div>
      <div style="flex: 1"><!-- Spacer --></div>
      <share-logs-button id="share-logs-button"></share-logs-button>
    </div>
    <pre id="details" class="monospace"></pre>
  </div>
  <button id="close">Close</button>
</template>

<script type="module">
  import { DialogClosedEvent } from "/js/events.js";

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

    customElements.define(
      "error-dialog",
      class extends HTMLElement {
        DEFAULT_MESSAGE = "Please refresh the page and try again.";

        connectedCallback() {
          this.attachShadow({ mode: "open" }).appendChild(
            template.content.cloneNode(true)
          );
          this.shadowRoot
            .getElementById("close")
            .addEventListener("click", () =>
              this.dispatchEvent(new DialogClosedEvent())
            );
        }

        /**
         * @see `DialogFailedEvent` for description of parameters.
         */
        setup({
          title,
          message = this.DEFAULT_MESSAGE,
          details = "",
          isShareable = false,
        }) {
          this.shadowRoot.getElementById("title").innerText = title;
          this.shadowRoot.getElementById("message").innerText = message;
          this.shadowRoot.getElementById("details").innerText = details;
          this.shadowRoot.getElementById("details-container").style.display =
            details ? "block" : "none";
          this.shadowRoot
            .getElementById("share-logs-button")
            .initialize(/*getLogsTextCb=*/ () => String(details));
          this.toggleAttribute("is-shareable", details && isShareable);
        }
      }
    );
  })();
</script>