buzzer_2/webpage/src/components/DeviceInfo.svelte

<script lang="ts">
  import FlashUsage from "./FlashUsage.svelte";
  import { deviceInfo, fwInfo } from "../lib/store";
  import { FW_STATUS } from "../lib/protocol/constants";
  import { tooltip } from "../lib/actions/tooltip";
  import {
    CheckCircleIcon,
    WarningIcon,
    BatteryEmptyIcon,
    BatteryLowIcon,
    BatteryMediumIcon,
    BatteryHighIcon,
    BatteryFullIcon,
    BatteryChargingIcon,
  } from "phosphor-svelte";
</script>

<div class="text-sm">
  <table>
    <tbody>
      <tr>
        <td class="key">Modell</td>
        <td class="value">
          {#if $deviceInfo}
            {$deviceInfo.boardName}
            {#if $deviceInfo.boardRevision}
              <span class="text-muted">>Rev. {$deviceInfo.boardRevision}</span>
            {/if}
          {:else}
            unbekannt
          {/if}
        </td>
      </tr>
      <tr>
        <td class="key">Version</td>
        <td class="value flex items-center gap-1">
          {#if $fwInfo}
            <span
              use:tooltip={{
                text: `Die Firmware-Slotgrösse beträgt <span class="font-medium">${$fwInfo.slot1Size / 1024} kB</span>. Wieso musst Du das wissen? Edi sorgt schon dafür, dass die Updates nicht zu gross sind.<br/> <div class="text-3xl align-center text-center pb-2">😈</div>`,
                pos: "bottom",
              }}
            >
              {$fwInfo.fwVersion}
            </span>
            {#if $fwInfo.fwStatus === FW_STATUS.CONFIRMED}
              <span
                use:tooltip={{
                  text: "Firmware ist bestätigt und damit dauerhaft nutzbar",
                  pos: "bottom",
                }}
                class="relative flex size-5"
              >
                <CheckCircleIcon
                  weight="fill"
                  class="text-emerald-500 relative inline-flex h-full w-full"
                />
              </span>
              {:else if $fwInfo.fwStatus === FW_STATUS.PENDING}
              <span
                use:tooltip={{
                  text: "Firmware ist nur hochgeladen und noch nicht bestätigt. Du kannst sie nach einem <b>reboot</b> testen. Wenn sie funktioniert, bestätige sie, damit sie dauerhaft nutzbar ist.<br/><b><i>Achtung:</i></b> der Reboot dauert einen Moment, da die Firmware erst umkopiert werden muss.",
                  pos: "bottom",
                }}
                class="relative flex size-5"
              >
                <WarningIcon
                  weight="fill"
                  class="text-amber-500 absolute inline-flex h-full w-full animate-ping"
                />
                <WarningIcon
                  weight="fill"
                  class="text-amber-500 relative inline-flex h-full w-full"
                />
              </span>
              {:else if $fwInfo.fwStatus === FW_STATUS.TESTING}
              <span
                use:tooltip={{
                  text: "Die Firmware ist im Testmodus. Wenn sie gut funktioniert, dann <b>bestätige</b> sie, damit sie dauerhaft nutzbar ist. Wenn sie nicht richtig funktioniert, dann kannst Du den Buzzer <b>rebooten</b>, er kehrt dann zur vorhergehenden Version zurück.<br/><b><i>Achtung:</i></b> der Reboot dauert einen Moment, da die Firmware erst umkopiert werden muss.",
                  pos: "bottom",
                }}
                class="relative flex size-5"
              >
                <WarningIcon
                  weight="fill"
                  class="text-amber-600 absolute inline-flex h-full w-full animate-ping"
                />
                <WarningIcon
                  weight="fill"
                  class="text-amber-600 relative inline-flex h-full w-full"
                />
              </span>
              {:else if $fwInfo.fwStatus === FW_STATUS.UNKNOWN}
              <span
                use:tooltip={{
                  text: `Die Firmware hat den unbekannten Status <span class="bold font-mono">0x${$fwInfo.fwStatus.toString(16).padStart(2, "0").toUpperCase()}.</span> Weiss der Teufel, was da wieder passiert ist... Vielleicht hilft ein Reboot? Oder Firmware neu flashen? Oder... hast Du ne Idee???`,
                  pos: "bottom",
                }}
                class="relative flex size-5"
              >
                <WarningIcon
                  weight="fill"
                  class="text-red-500 absolute inline-flex h-full w-full animate-ping"
                />
                <WarningIcon
                  weight="fill"
                  class="text-red-500 relative inline-flex h-full w-full"
                />
              </span>
            {/if}
            <span class="text-text-muted ml-1">(Zephyr {$fwInfo.kernelVersion})</span>
          {:else}
            unbekannt
          {/if}
        </td>
      </tr>
      <tr>
        <td class="key">HW-ID</td>
        <td class="value">
          {#if $deviceInfo}
            <span class="font-mono">{$deviceInfo.deviceId}</span>
          {:else}
            unbekannt
          {/if}
        </td>
      </tr>
      <tr>
        <td class="key">Batterie</td>
        <td class="value flex items-center gap-2">
          85% <BatteryChargingIcon weight="bold" class="w-5 h-5" /> 1200mAh
        </td>
      </tr>
      <tr>
        <td class="key">Speicher</td>
        <td class="value">
          <div class="py-1">
            <FlashUsage />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  @reference "../styles/app.css";

  table {
    @apply w-full text-left;
  }

  tr {
    @apply even:bg-slate-100 border-b border-slate-200 last:border-0;
  }

  .key {
    @apply p-1 pl-4 text-right text-text-muted;
  }

  .value {
    @apply p-1 pr-4 font-semibold;
  }
</style>