types: reflect #102 changes

src/lib/stores/messageStore.ts → src/lib/stores/statusStore.ts

@@ -1,6 +1,6 @@
 import { createGenericPbStore } from "$stores/pbStore";
 import pb, { Collections, type MessageResponse } from "$lib/pocketbase";
-import { Message, ActiveMessage } from "$lib/types";
+import { Message, Status } from "$lib/types";
 import { writable } from "svelte/store";
 
 import eventsource from "eventsource";
@@ -9,8 +9,8 @@ import eventsource from "eventsource";
 
 export const messages = createGenericPbStore(Collections.Message, Message);
 
-function createActiveMessageStore() {
-  const { subscribe, set, update } = writable<ActiveMessage>(ActiveMessage.baseValue);
+function createStatusStore() {
+  const { subscribe, set, update } = writable(Status.baseValue);
 
   (async () => {
     // Only use the first record. Assumes that PB already has this and only this record.
@@ -19,15 +19,12 @@ function createActiveMessageStore() {
       .collection(Collections.Message)
       .getFullList();
 
-    const initialData = ActiveMessage.fromPb(
-      initialActiveMessage,
-      initialMessages.map(Message.fromPb)
-    );
+    const initialData = Status.fromPb(initialActiveMessage, initialMessages.map(Message.fromPb));
     set(initialData);
 
     pb.collection(Collections.Status).subscribe("*", async (event) => {
       update((state) => {
-        return ActiveMessage.fromPb(event.record, state.messages);
+        return Status.fromPb(event.record, state.messages);
       });
     });
 
@@ -56,9 +53,9 @@ function createActiveMessageStore() {
   return subscribe;
 }
 
-export const activeMessage = {
-  subscribe: createActiveMessageStore(),
-  update: async (activeMessage: ActiveMessage) => {
-    await pb.collection(Collections.Status).update(activeMessage.id, activeMessage.toPb());
+export const status = {
+  subscribe: createStatusStore(),
+  update: async (status: Status) => {
+    await pb.collection(Collections.Status).update(status.id, status.toPb());
   }
 };

src/lib/types.ts

@@ -203,39 +203,35 @@ export class Message extends Record implements RecordBase {
   }
 }
 
-export type ExpandedActiveMessageRecord = StatusResponse & {
-  expand: { message: MessageResponse };
-};
-
-export class ActiveMessage extends Record implements RecordBase {
+export class Status extends Record implements RecordBase {
   message: Message;
   messages: Message[];
-  visible: boolean;
+  online: boolean;
 
   static baseValue = {
     id: "",
-    visible: false,
+    online: false,
     message: Message.baseValue,
     messages: [Message.baseValue]
-  } as ActiveMessage;
+  } as Status;
 
-  constructor(data: ActiveMessage) {
+  constructor(data: Status) {
     super(data);
     this.messages = data.messages;
     this.message = data.message;
-    this.visible = data.visible;
+    this.online = data.online;
   }
 
   toPb() {
-    return { message: this.message.id, online: this.visible };
+    return { message: this.message.id, online: this.online };
   }
 
-  static fromPb(activeMessage: StatusResponse, messages: Message[]): ActiveMessage {
-    return new ActiveMessage({
-      id: activeMessage.id,
-      message: messages.filter((m) => m.id == activeMessage.message)[0] || Message.baseValue,
+  static fromPb(status: StatusResponse, messages: Message[]): Status {
+    return new Status({
+      id: status.id,
+      message: messages.filter((m) => m.id == status.message)[0] || Message.baseValue,
       messages: messages,
-      visible: activeMessage.online
-    } as ActiveMessage);
+      online: status.online
+    } as Status);
   }
 }

src/routes/+page.svelte

@@ -3,7 +3,7 @@
   import Logo from "$assets/logo.png";
   import AuthButton from "$components/AuthButton.svelte";
   import Menu from "./Menu.svelte";
-  import { activeMessage } from "$stores/messageStore";
+  import { status } from "$stores/statusStore";
 </script>
 
 <img
@@ -17,9 +17,9 @@
 
   <br />
   <ul>
-    {#if $activeMessage.visible}
-      <li class="font-bold">{$activeMessage.message.title}</li>
-      <li>{$activeMessage.message.subtitle}</li>
+    {#if $status.online}
+      <li class="font-bold">{$status.message.title}</li>
+      <li>{$status.message.subtitle}</li>
     {:else}
       <li>Vi er åpen!</li>
     {/if}

src/routes/Menu.svelte

@@ -1,6 +1,6 @@
 <script>
   import { categories } from "$stores/menuStore";
-  import { activeMessage } from "$stores/messageStore";
+  import { status } from "$stores/statusStore";
   import MenuItem from "$components/MenuItem.svelte";
 </script>
 
@@ -9,7 +9,7 @@
     <h1 class="mb-4 text-3xl text-primary">{category.name}</h1>
     <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
       {#each category.items as item}
-        <MenuItem {item} buyButton={!$activeMessage.visible} />
+        <MenuItem {item} buyButton={!$status.online} />
       {/each}
     </div>
   </div>

src/routes/admin/message/+page.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { messages, activeMessage } from "$stores/messageStore";
-  import { Message, ActiveMessage } from "$lib/types";
+  import { messages, status } from "$stores/statusStore";
+  import { Message, Status } from "$lib/types";
 
-  const handleActiveMessageChange = (message: Message) => {
-    activeMessage.update(
-      new ActiveMessage({
-        ...$activeMessage,
-        visible: true,
+  const handleStatusChange = (message: Message) => {
+    status.update(
+      new Status({
+        ...$status,
+        online: true,
         message
-      } as ActiveMessage)
+      } as Status)
     );
   };
 
@@ -22,11 +22,11 @@
   };
 
   const handleVisibilityChange = () => {
-    activeMessage.update(
-      new ActiveMessage({
-        ...$activeMessage,
-        visible: false
-      } as ActiveMessage)
+    status.update(
+      new Status({
+        ...$status,
+        online: false
+      } as Status)
     );
   };
 </script>
@@ -40,9 +40,9 @@
             type="radio"
             class="radio"
             name="selected"
-            checked={message.id == $activeMessage.message.id}
+            checked={message.id == $status.message.id}
             value={message}
-            onchange={() => handleActiveMessageChange(message)}
+            onchange={() => handleStatusChange(message)}
           />
           <input
             type="text"
@@ -75,7 +75,7 @@
           type="radio"
           class="radio mr-4"
           name="selected"
-          checked={!$activeMessage.visible}
+          checked={!$status.online}
           onchange={handleVisibilityChange}
         />
         <span>Åpent!</span>

src/routes/admin/orders/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { activeMessage } from "$stores/messageStore";
-  import { ActiveMessage } from "$lib/types";
+  import { status } from "$stores/statusStore";
+  import { Status } from "$lib/types";
   import { type Snippet } from "svelte";
 
   interface Props {
@@ -10,18 +10,18 @@
   let { children }: Props = $props();
 </script>
 
-{#if $activeMessage.visible}
+{#if $status.online}
   <div class="flex h-full w-full flex-col items-center justify-center">
     <span class="p-2 text-center text-3xl font-bold md:text-6xl">Det er stengt</span>
     <button
       class="btn relative m-4 flex h-24 w-1/2 flex-col items-center justify-center text-3xl lg:text-5xl
 "
       onclick={() =>
-        activeMessage.update(
-          new ActiveMessage({
-            ...$activeMessage,
-            visible: false
-          } as ActiveMessage)
+        status.update(
+          new Status({
+            ...$status,
+            online: false
+          } as Status)
         )}>Åpne</button
     >
     <a

src/routes/display/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { activeMessage } from "$stores/messageStore";
+  import { status } from "$stores/statusStore";
   import { type Snippet } from "svelte";
 
   // import QR from "$assets/qr-code.svg";
@@ -11,10 +11,10 @@
   let { children }: Props = $props();
 </script>
 
-{#if $activeMessage?.visible}
+{#if $status?.online}
   <div class="flex h-screen flex-col items-center justify-center text-center">
-    <span class="p-2 text-7xl font-bold md:text-9xl">{$activeMessage.message.title}</span>
-    <span class="p-2 text-4xl md:text-6xl">{$activeMessage.message.subtitle}</span>
+    <span class="p-2 text-7xl font-bold md:text-9xl">{$status.message.title}</span>
+    <span class="p-2 text-4xl md:text-6xl">{$status.message.subtitle}</span>
   </div>
 {:else}
   <main class="relative mx-auto h-screen w-11/12 py-4">