Update specialni vstupenky

src/routes/specialni-vstupenky.svelte

@@ -0,0 +1,71 @@
+<script context="module">
+  export const prerender = true;
+</script>
+
+<script>
+  import { bundle } from "$lib/stores.js";
+  import { onMount, onDestroy } from "svelte";
+  import { format, formatDistanceToNow } from "date-fns";
+  import api from "$lib/api.js";
+
+  let lastUpdate = null;
+  let data = null;
+
+  async function loadData() {
+    data = await api.apiCall("claims");
+    lastUpdate = new Date();
+  }
+
+  function fdate(d) {
+    return format(new Date(d), "d.M HH:mm");
+  }
+
+  onMount(() => {
+    loadData();
+  });
+</script>
+
+<svelte:head>
+  <title>Speciální vstupenky | {$bundle ? $bundle.name : "UTXO.22"}</title>
+</svelte:head>
+
+<section class="relative mx-auto py-6 sm:py-10 px-6 max-w-6xl text-blue-web">
+  <h1 class="uppercase text-2xl font-bold">Speciální vstupenky</h1>
+  {#if data}
+    <div class="mt-4">
+      Celkem: {data.length}, vyzvednuto: {data.filter((x) => x.claimed)
+        .length}/{data.length}
+    </div>
+    <div class="mt-4">
+      <table class="table-auto mt-6 w-full" cellpadding="6">
+        <thead>
+          <tr class="text-xs uppercase text-blue-web/80">
+            <th align="left">Typ</th>
+            <th align="left">Odkaz</th>
+            <th align="left">Vytvořeno</th>
+            <th align="left">Vyzvednuto</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each data as claim}
+            <tr
+              class={claim.claimed
+                ? "hover:bg-blue-500/10"
+                : "bg-yellow-400/20 hover:bg-yello-600/20"}
+            >
+              <td class="border-b font-bold">{claim.type}</td>
+              <td class="border-b">{claim.link.type}:{claim.link.id}</td>
+              <td class="border-b">{fdate(claim.created)}</td>
+              <td class="border-b">
+                {#if claim.claimed}{fdate(claim.claimedOn)} |
+                  <code>{claim.ticketId}</code>{:else}-{/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {:else}
+    <div>Načítám ..</div>
+  {/if}
+</section>

src/routes/vyzvednuti-vstupenky.svelte

@@ -29,6 +29,9 @@
     if (link.type === "speaker") {
       return $bundle.spec.speakers.find((s) => s.id === link.id);
     }
+    if (link.type === "partner") {
+      return $bundle.spec.partners.find((s) => s.id === link.id);
+    }
     return null;
   }
 
@@ -43,7 +46,12 @@
     if (!claim) {
       goto("/");
     }
-    if ($bundle && claim.link && claim.link.type === "speaker") {
+    if (
+      $bundle &&
+      claim.type === "speaker" &&
+      claim.link &&
+      claim.link.type === "speaker"
+    ) {
       const sp = $bundle.spec.speakers.find((s) => s.id === claim.link.id);
       if (sp) {
         form.name = sp.name || "";
@@ -53,12 +61,40 @@
     }
   });
 
-  const linkTypes = {
+  const ticketTypes = {
     speaker: {
       title: "Přednášející",
+      hostTitle: "Host přednášejícího",
+      col: "speakers",
     },
+    organizator: {
+      title: "Organizátor",
+      hostTitle: "Host organizátora",
+      col: "speakers",
+    },
+    partner: { title: "Partner", hostTitle: "Host partnera", col: "partners" },
+    host: { title: "Host" },
   };
 
+  function makeTicketTypeInfo(c) {
+    if (!c) {
+      return null;
+    }
+    const out = { title: null, col: null };
+    if (c.type === "host") {
+      const tt = ticketTypes[c.link.type];
+      out.title = tt.hostTitle;
+      out.col = tt.col;
+    } else {
+      const tt = ticketTypes[c.type];
+      out.title = tt.title;
+      out.col = tt.col;
+    }
+    return out;
+  }
+
+  $: ticketTypeInfo = makeTicketTypeInfo(claim);
+
   function processErrors(error) {
     if (typeof error === "string") {
       return { title: error };
@@ -146,10 +182,15 @@
           <div class="mt-6">
             <div class="uppercase text-sm font-bold">Typ vstupenky</div>
             <div class="mt-2">
-              <span class="">{linkTypes[claim.link.type].title}</span>
+              <span class="">{ticketTypeInfo ? ticketTypeInfo.title : ""}</span>
               {#if target}
-                - <Avatar speaker={target} size="extra-small" inline="true" />
-                <a href="/lide?id={target.id}">{target.name}</a>
+                (<Avatar
+                  speaker={target}
+                  size="extra-small"
+                  inline="true"
+                  col={ticketTypeInfo.col}
+                />
+                <a href="/lide?id={target.id}">{target.name}</a>)
               {/if}
             </div>
           </div>
@@ -192,7 +233,9 @@
                           maxlength="25"
                           class="border border-blue-web rounded-md p-2 w-full text-blue-web"
                           bind:value={form.name}
-                          placeholder={faker.name.findName()}
+                          placeholder={claim.type !== "speaker"
+                            ? faker.name.findName()
+                            : ""}
                         />
                       </div>
                     </div>
@@ -204,7 +247,9 @@
                           maxlength="25"
                           class="border border-blue-web rounded-md p-2 w-full text-blue-web"
                           bind:value={form.org}
-                          placeholder={faker.company.companyName()}
+                          placeholder={claim.type !== "speaker"
+                            ? faker.company.companyName()
+                            : ""}
                         />
                       </div>
                     </div>
@@ -216,7 +261,9 @@
                           maxlength="25"
                           class="border border-blue-web rounded-md p-2 w-full text-blue-web"
                           bind:value={form.twitter}
-                          placeholder="@{faker.internet.userName()}"
+                          placeholder={claim.type !== "speaker"
+                            ? faker.internet.userName()
+                            : ""}
                         />
                       </div>
                     </div>