feat: add shocker logs page

Author: TuTiDore

src/lib/components/ControlModules/ClassicControlModule.svelte

@@ -12,6 +12,7 @@
   import ControlListener from './ControlListener.svelte';
   import ActionButtons from './impl/ActionButtons.svelte';
   import CircleSlider from './impl/CircleSlider.svelte';
+  import ShockerMenu from './impl/ShockerMenu.svelte';
 
   interface Props {
     shocker: ShockerResponse;
@@ -36,7 +37,12 @@
   class="border-surface-400-500-token flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border p-2"
 >
   <!-- Title -->
-  <h2 class="w-full truncate px-4 text-center text-lg font-bold">{shocker.name}</h2>
+  <h2 class="w-full truncate px-4 text-center text-lg font-bold flex justify-between">
+    <span>
+      {shocker.name}
+    </span>
+    <ShockerMenu {shocker} />
+  </h2>
   <!-- Sliders -->
   <div class="flex items-center gap-2">
     <CircleSlider name="Intensity" bind:value={intensity} {...ControlIntensityProps} />

src/lib/components/ControlModules/impl/ShockerMenu.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Ellipsis } from '@lucide/svelte';
+  import { goto } from '$app/navigation';
+  import type { ShockerResponse } from '$lib/api/internal/v1';
+  import { Button } from '$lib/components/ui/button';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+
+  interface Props {
+    shocker: ShockerResponse;
+  }
+
+  let { shocker }: Props = $props();
+
+  function viewLogs() {
+    goto(`/shockers/logs/${shocker.id}`);
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <Ellipsis class="size-4" />
+      </Button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content>
+    <DropdownMenu.Item class="cursor-pointer" onclick={viewLogs}>View Logs</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

src/lib/stores/ShockerLogStore.ts

@@ -0,0 +1,33 @@
+import { shockersV1Api } from '$lib/api';
+import { type LogEntry } from '$lib/api/internal/v1';
+import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+import { writable } from 'svelte/store';
+
+export const ShockerLogStore = writable<Map<string, LogEntry[]>>(new Map());
+
+export function fetchLogsForShocker(shockerId: string) {
+  shockersV1Api
+    .shockerGetShockerLogs(shockerId)
+    .then((response) => {
+      if (!response.data) {
+        throw new Error(`Failed to fetch logs: ${response.message}`);
+      }
+
+      const grouped = response.data.reduce((acc, entry) => {
+        if (!acc.has(entry.id)) {
+          acc.set(entry.id, []);
+        }
+        acc.get(entry.id)!.push({
+          id: entry.id,
+          createdOn: new Date(entry.createdOn),
+          type: entry.type,
+          controlledBy: entry.controlledBy,
+          intensity: entry.intensity,
+          duration: entry.duration,
+        });
+        return acc;
+      }, new Map<string, LogEntry[]>());
+      ShockerLogStore.set(grouped);
+    })
+    .catch(handleApiError);
+}

src/routes/(authenticated)/shockers/logs/[shockerId=guid]/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+  import type { ColumnDef, SortingState } from '@tanstack/table-core';
+  import { page } from '$app/state';
+  import type { LogEntry } from '$lib/api/internal/v1';
+  import Container from '$lib/components/Container.svelte';
+  import {
+    CreateColumnDef,
+    CreateSortableColumnDef,
+    LocaleDateTimeRenderer,
+    NumberRenderer,
+    RenderCell,
+  } from '$lib/components/Table/ColumnUtils';
+  import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
+  import Button from '$lib/components/ui/button/button.svelte';
+  import * as Card from '$lib/components/ui/card';
+  import { ShockerLogStore, fetchLogsForShocker } from '$lib/stores/ShockerLogStore';
+  import { onMount } from 'svelte';
+
+  let data = $derived.by<LogEntry[]>(() => {
+    const logMap = $ShockerLogStore;
+    let allLogs: LogEntry[] = [];
+    logMap.forEach((logs) => {
+      allLogs = allLogs.concat(logs);
+    });
+    return allLogs;
+  });
+
+  let sorting = $state<SortingState>([{ id: 'createdOn', desc: true }]);
+
+  const columns: ColumnDef<LogEntry>[] = [
+    CreateSortableColumnDef('createdOn', 'Time', LocaleDateTimeRenderer),
+    CreateSortableColumnDef('type', 'Type', (t) => RenderCell(String(t))),
+    CreateSortableColumnDef('controlledBy', 'By', (c) => RenderCell(c.customName ?? c.name)),
+    CreateSortableColumnDef('intensity', 'Intensity', NumberRenderer),
+    CreateSortableColumnDef('duration', 'Duration', NumberRenderer),
+  ];
+
+  let shockerId = page.params.shockerId ?? '';
+
+  function refresh() {
+    if (!shockerId) return;
+    fetchLogsForShocker(shockerId);
+  }
+
+  onMount(() => {
+    if (shockerId) refresh();
+  });
+</script>
+
+<Container>
+  <Card.Header class="w-full">
+    <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
+      <div class="flex items-center space-x-2">
+        <span>Shocker Logs</span>
+      </div>
+      <div class="flex items-center justify-end space-x-2">
+        <Button variant="ghost" aria-label="Refresh logs" onclick={refresh}>
+          <RotateCcw />
+        </Button>
+      </div>
+    </Card.Title>
+    <Card.Description>This is the logs for the specified shocker.</Card.Description>
+  </Card.Header>
+  <div class="w-full p-6 gap-6 grid">
+    <DataTable {data} {columns} bind:sorting />
+  </div>
+</Container>