From ac5a78113ab6e63aed8b444c4879e624d00a7c1d Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Wed, 21 Feb 2024 11:29:12 -0500
Subject: [PATCH] events work

---
 src/lib/date.ts                               |  14 ++
 .../vaccs/[id]/events/+page.server.ts         |  74 +++++++---
 .../dashboard/vaccs/[id]/events/+page.svelte  | 131 +++++++++++++++---
 .../[id]/events/data-table-actions.svelte     |  46 ++++++
 .../[id]/events/data-table-banner.svelte      |  18 +++
 5 files changed, 245 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/date.ts
 create mode 100644 src/routes/dashboard/vaccs/[id]/events/data-table-actions.svelte
 create mode 100644 src/routes/dashboard/vaccs/[id]/events/data-table-banner.svelte

diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..dbdace7
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,14 @@
+export function humanReadableDate(d: Date): string {
+  // Sat Feb 17, 2024, 18:00 (EST)
+  let options: Intl.DateTimeFormatOptions = {
+    weekday: "short",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZoneName: "short",
+  };
+
+  return new Intl.DateTimeFormat("en-US", options).format(d);
+}
diff --git a/src/routes/dashboard/vaccs/[id]/events/+page.server.ts b/src/routes/dashboard/vaccs/[id]/events/+page.server.ts
index 746198a..beb101f 100644
--- a/src/routes/dashboard/vaccs/[id]/events/+page.server.ts
+++ b/src/routes/dashboard/vaccs/[id]/events/+page.server.ts
@@ -54,38 +54,33 @@ export const actions: Actions = {
       );
     }
 
+    // combine the datetimes
+
+    let startDate = form.data.startDate.split("T")[0];
+    let startTime = String(form.data.startTime).padStart(4, "0");
+    let startHour = startTime.slice(0, 2);
+    let startMinute = startTime.slice(2);
+    let start = `${startDate}T${startHour}:${startMinute}:00Z`;
+
+    let endDate = form.data.endDate.split("T")[0];
+    let endTime = String(form.data.endTime).padStart(4, "0");
+    let endHour = endTime.slice(0, 2);
+    let endMinute = endTime.slice(2);
+    let end = `${endDate}T${endHour}:${endMinute}:00Z`;
+
     // generate the blurhash
 
     const imageData = await getPixels(form.data.bannerUrl);
     const data = Uint8ClampedArray.from(imageData.data);
     const blurhash = encode(data, imageData.width, imageData.height, 4, 4);
 
-    // combine the datetimes
-    let startDate = new Date(form.data.startDate);
-    let start_hour = parseInt(
-      String(form.data.startTime).padStart(4, "0").slice(0, 2),
-    );
-    let start_minute = parseInt(
-      String(form.data.startTime).padStart(4, "0").slice(2),
-    );
-    startDate.setHours(start_hour, start_minute);
-
-    let endDate = new Date(form.data.endDate);
-    let end_hour = parseInt(
-      String(form.data.endTime).padStart(4, "0").slice(0, 2),
-    );
-    let end_minute = parseInt(
-      String(form.data.endTime).padStart(4, "0").slice(2),
-    );
-    endDate.setHours(end_hour, end_minute);
-
     await prisma.event.create({
       data: {
         id: ulid(),
         name: form.data.name,
         hostId: event.params.id,
-        start: startDate,
-        end: endDate,
+        start: start,
+        end: end,
         description: form.data.description,
         bannerUrl: form.data.bannerUrl,
         bannerBlurHash: blurhash,
@@ -99,4 +94,41 @@ export const actions: Actions = {
       form,
     };
   },
+  setVisibility: async (event) => {
+    let { user, roles } = await loadUserData(event.cookies);
+
+    if (
+        !can(
+            roles,
+            event.params.id,
+            user.vaccId,
+            `vacc.${event.params.id}.events.manage`,
+        )
+    ) {
+      return redirect(
+          307,
+          `/dashboard/vaccs/${event.params.id}/`,
+          { message: "You don't have permission to do that.", type: "error" },
+          event.cookies,
+      );
+    }
+
+    let data = await event.request.formData();
+
+    if (!data.has("eventId") || !data.has("public")) {
+      return { success: false };
+    } else {
+      let id = data.get("eventId")!.toString();
+      let isPublic = data.get("public")!.toString() === "true";
+      await prisma.event.update({
+        where: {
+          id
+        },
+        data: {
+          public: isPublic
+        }
+      });
+      return { success: true };
+    }
+  }
 };
diff --git a/src/routes/dashboard/vaccs/[id]/events/+page.svelte b/src/routes/dashboard/vaccs/[id]/events/+page.svelte
index c0dc4f2..2ffa185 100644
--- a/src/routes/dashboard/vaccs/[id]/events/+page.svelte
+++ b/src/routes/dashboard/vaccs/[id]/events/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PageData } from "./$types";
-  import { Plus } from "lucide-svelte";
+  import { MoreHorizontal, Plus } from "lucide-svelte";
   import { Button } from "$lib/components/ui/button";
   import { can } from "$lib/perms/can";
   import * as Dialog from "$lib/components/ui/dialog";
@@ -8,15 +8,73 @@
   import { toast } from "svelte-sonner";
   import * as Table from "$lib/components/ui/table";
   import Image from "$lib/components/Image.svelte";
+  import { humanReadableDate } from "$lib/date.js";
+  import { page } from "$app/stores";
+  import CertForm from "../roster/cert-form.svelte";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { writable } from "svelte/store";
+  import {createRender, createTable, Render, Subscribe} from "svelte-headless-table";
+  import DataTableBanner from "./data-table-banner.svelte";
+  import DataTableActions from "./data-table-actions.svelte";
 
   export let data: PageData;
 
   let createDialogOpen = false;
+
+  let canManageEvents = can(
+    data.roles,
+    data.vacc_id,
+    data.user.vaccId,
+    `vacc.${data.vacc_id}.events.manage`,
+  );
+
+  let store = writable(data.events);
+  $: $store = data.events;
+
+  const table = createTable(store);
+
+  const columns = table.createColumns([
+    table.column({
+      accessor: (i) => i,
+      header: "Banner",
+      cell: ({ value }) => {
+        return createRender(DataTableBanner, { eventId: value.id, bannerUrl: value.bannerUrl, blurhash: value.bannerBlurHash })
+      }
+    }),
+    table.column({
+      accessor: "name",
+      header: "Name",
+    }),
+    table.column({
+      accessor: "start",
+      header: "Starts",
+      cell: ({ value }) => {
+        return humanReadableDate(value);
+      }
+    }),
+    table.column({
+      accessor: "end",
+      header: "Ends",
+      cell: ({ value }) => {
+        return humanReadableDate(value);
+      }
+    }),
+    table.column({
+      accessor: (e) => e,
+      header: "Actions",
+      cell: ({ value }) => {
+        return createRender(DataTableActions, { event: value, canManageEvents })
+      }
+    }),
+  ]);
+
+  const { headerRows, pageRows, tableAttrs, tableBodyAttrs } =
+          table.createViewModel(columns);
 </script>
 
 <div class="flex items-center justify-between">
   <h2 class="text-3xl font-bold tracking-tight">Upcoming Events</h2>
-  {#if can(data.roles, data.vacc_id, data.user.vaccId, `vacc.${data.vacc_id}.events.manage`)}
+  {#if canManageEvents}
     <Button
       on:click={() => {
         createDialogOpen = true;
@@ -27,32 +85,71 @@
   {/if}
 </div>
 
+<Table.Root {...$tableAttrs}>
+  <Table.Header>
+    {#each $headerRows as headerRow}
+      <Subscribe rowAttrs={headerRow.attrs()}>
+        <Table.Row>
+          {#each headerRow.cells as cell (cell.id)}
+            <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()}>
+              <Table.Head {...attrs}>
+                <Render of={cell.render()} />
+              </Table.Head>
+            </Subscribe>
+          {/each}
+        </Table.Row>
+      </Subscribe>
+    {/each}
+  </Table.Header>
+  <Table.Body {...$tableBodyAttrs}>
+    {#each $pageRows as row (row.id)}
+      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+        <Table.Row {...rowAttrs}>
+          {#each row.cells as cell (cell.id)}
+            <Subscribe attrs={cell.attrs()} let:attrs>
+              <Table.Cell {...attrs}>
+                <Render of={cell.render()} />
+              </Table.Cell>
+            </Subscribe>
+          {/each}
+        </Table.Row>
+      </Subscribe>
+    {/each}
+  </Table.Body>
+</Table.Root>
+
+<!--
 <Table.Root>
   <Table.Header>
     <Table.Row>
-      <Table.Head>Banner</Table.Head>
+      <Table.Head class="w-min">Banner</Table.Head>
       <Table.Head>Name</Table.Head>
-      <Table.Head>Time</Table.Head>
+      <Table.Head>Start</Table.Head>
+      <Table.Head>End</Table.Head>
+      {#if canManageEvents}
+        <Table.Head>Actions</Table.Head>
+      {/if}
     </Table.Row>
   </Table.Header>
   <Table.Body>
     {#each data.events as event}
-      <Table.Row>
-        <Table.Cell>
-          <Image
-            width="480px"
-            class="rounded"
-            src={event.bannerUrl}
-            blurhash={event.bannerBlurHash}
-            style="aspect-ratio: 16/9;"
-            alt="" />
-        </Table.Cell>
-        <Table.Cell>{event.name}</Table.Cell>
-        <Table.Cell>{event.start} to {event.end}</Table.Cell>
-      </Table.Row>
+      {#if event.public || canManageEvents}
+        <Table.Row>
+          <Table.Cell>
+
+          </Table.Cell>
+          <Table.Cell>{event.name}</Table.Cell>
+          <Table.Cell>{humanReadableDate(event.start)}</Table.Cell>
+          <Table.Cell>{humanReadableDate(event.end)}</Table.Cell>
+          {#if canManageEvents}
+
+          {/if}
+        </Table.Row>
+      {/if}
     {/each}
   </Table.Body>
 </Table.Root>
+-->
 
 {#if can(data.roles, data.vacc_id, data.user.vaccId, `vacc.${data.vacc_id}.events.manage`)}
   <Dialog.Root bind:open={createDialogOpen}>
diff --git a/src/routes/dashboard/vaccs/[id]/events/data-table-actions.svelte b/src/routes/dashboard/vaccs/[id]/events/data-table-actions.svelte
new file mode 100644
index 0000000..267486d
--- /dev/null
+++ b/src/routes/dashboard/vaccs/[id]/events/data-table-actions.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+    import type {Event} from "@prisma/client";
+    import {MoreHorizontal} from "lucide-svelte";
+    import {Button} from "$lib/components/ui/button";
+    import {toast} from "svelte-sonner";
+
+    export let event: Event;
+    export let canManageEvents: boolean;
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger asChild let:builder>
+        <Button
+                variant="ghost"
+                builders={[builder]}
+                size="icon"
+                class="relative w-8 h-8 p-0">
+            <span class="sr-only">Open menu</span>
+            <MoreHorizontal class="w-4 h-4" />
+        </Button>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+        <DropdownMenu.Group>
+            <DropdownMenu.Label>Actions</DropdownMenu.Label>
+            <DropdownMenu.Item
+                    on:click={() => {navigator.clipboard.writeText(event.id); toast.success("Event ID copied to clipboard");}}>
+                Copy ID
+            </DropdownMenu.Item>
+            {#if canManageEvents}
+                <DropdownMenu.Separator />
+                {#if event.public}
+                    <DropdownMenu.Item>Make Private</DropdownMenu.Item>
+                {:else}
+                    <DropdownMenu.Item>Make Public</DropdownMenu.Item>
+                {/if}
+                <DropdownMenu.Item>
+                    Edit
+                </DropdownMenu.Item>
+                <DropdownMenu.Item class="text-red-500 data-[highlighted]:bg-red-500/30 data-[highlighted]:text-red-500">
+                    Delete
+                </DropdownMenu.Item>
+            {/if}
+        </DropdownMenu.Group>
+    </DropdownMenu.Content>
+</DropdownMenu.Root>
\ No newline at end of file
diff --git a/src/routes/dashboard/vaccs/[id]/events/data-table-banner.svelte b/src/routes/dashboard/vaccs/[id]/events/data-table-banner.svelte
new file mode 100644
index 0000000..0ae51f6
--- /dev/null
+++ b/src/routes/dashboard/vaccs/[id]/events/data-table-banner.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {page} from "$app/stores";
+    import Image from "$lib/components/Image.svelte";
+
+    export let eventId: string;
+    export let bannerUrl: string;
+    export let blurhash: string;
+</script>
+
+<a href="/dashboard/vaccs/{$page.params.id}/events/{eventId}/">
+    <Image
+            width="480px"
+            class="rounded"
+            src={bannerUrl}
+            {blurhash}
+            style="aspect-ratio: 16/9;"
+            alt="" />
+</a>
\ No newline at end of file