dyndns-updater/web/index.html

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DynDns Updater</title>
  <link rel="stylesheet" href="beer.min.css">
  <script type="module" src="beer.min.js" defer></script>
  <script src="alpine.min.js" defer></script>
</head>

<body>
  <main x-data="data" class="responsive">
    <h2>DynDns Updater</h2>
    <button class="small float-right" x-on:click="update">
      <i>refresh</i>
      <span>Update</span>
    </button>
    <table>
      <tbody>
        <tr>
          <th>IPv4</td>
          <td><span x-text="addrs.ipv4"></span></td>
        </tr>
        <tr>
          <th>IPv6</td>
          <td><span x-text="addrs.ipv6"></span></td>
        </tr>
        <tr>
          <th>Last Update</td>
          <td><span x-text="niceTime(lastUpdate)"></span></td>
        </tr>
      </tbody>
    </table>
    <template x-for="domain in domains">
      <article>
        <h6>
          <template x-if="domain.success">
            <i class="success-text">check_circle</i>
          </template>
          <template x-else>
            <i class="error-text">error</i>
          </template>
          <span x-text="domain.name"></span>
        </h6>
        <table>
          <tbody>
            <tr>
              <th>IPv4</td>
              <td><span x-text="domain.addrs.ipv4"></span></td>
            </tr>
            <tr>
              <th>IPv6</td>
              <td><span x-text="domain.addrs.ipv6"></span></td>
            </tr>
            <tr>
              <th>Last Update</td>
              <td><span x-text="niceTime(domain.lastUpdate)"></span></td>
            </tr>
          </tbody>
        </table>
        <details>
          <summary>
            <button class="small">
              <i>history</i>
              <span>History</span>
              <i>expand_more</i>
            </button>
          </summary>
          <ul class="list border no-space">
            <template x-for="update in domain.history">
              <li>
                <template x-if="update.success">
                  <i class="success-text">check_circle</i>
                </template>
                <template x-else>
                  <i class="error-text">error</i>
                </template>
                <div class="max">
                  <template x-if="update.success">
                    <div>
                      <div>
                        <b>IPv4:</b> <span class="small-text" x-text="update.addrs.ipv4"></span>
                      </div>
                      <div>
                        <b>IPv6:</b> <span class="small-text" x-text="update.addrs.ipv6"></span>
                      </div>
                    </div>
                  </template>
                  <template x-else>
                    <p x-text="update.response_text"></p>
                  </template>
                </div>
                <label><span x-text="niceTime(update.timestamp)"></span></label>
              </li>
            </template>
          </ul>
        </details>
      </article>
    </template>
  </main>
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('data', () => ({
        addrs: { ipv4: null, ipv6: null },
        lastUpdate: null,
        domains: [],
        niceTime(time) {
          if (!time) return '';
          const diff = new Date() - time;
          if (diff < 1000) {
            return 'just now';
          } else if (diff < 60000) {
            return `${Math.round(diff / 1000)} seconds ago`;
          } else if (diff < 3600000) {
            return `${Math.round(diff / 60000)} minutes ago`;
          } else if (diff < 86400000) {
            return `${Math.round(diff / 3600000)} hours ago`;
          } else if (diff < 604800000) {
            return `${Math.round(diff / 86400000)} days ago`;
          } else {
            return time.toISOString();
          }
        },
        async update() {
          const res = await fetch('/state');
          const data = await res.json();
          this.addrs = data.addrs;
          this.lastUpdate = new Date(data.timestamp * 1000);
          this.domains = Object.entries(data.domains).map(([domain, history]) => ({
            name: domain,
            success: history[history.length - 1].success,
            lastUpdate: new Date(history[history.length - 1].timestamp * 1000),
            addrs: history[history.length - 1].addrs,
            history: history.reverse().map(h => ({
              timestamp: new Date(h.timestamp * 1000),
              addrs: h.addrs,
              success: h.success,
              response_text: h.response_text
            }))
          }));
        },
        async init() {
          await this.update();
          window.setInterval(() => {
            this.update();
          }, 10000);
        },
      }))
    });
  </script>
  <style>
    main {
      overflow: unset;
      margin-top: 2rem;
    }

    .float-right {
      float: right;
    }

    .success-text {
      color: #006e1c
    }
  </style>
</body>

</html>