Update

src/routes/specialni-vstupenky.svelte

@@ -12,10 +12,31 @@
   let lastUpdate = null;
   let data = null;
   let speakersWithoutTicket = null;
+  let selectedType = "all";
+
+  $: ticketTypes = {
+    all: { title: "Vše" },
+    organizator: { title: "Organizátor" },
+    speaker: { title: "Přednášející" },
+    partner: { title: "Partner" },
+    staff: { title: "Obsluha" },
+    host: { title: "Host" },
+  };
+
+  function countType(type = "all") {
+    if (!data) {
+      return null;
+    }
+    if (type === "all") {
+      return data.length;
+    }
+    const res = data.filter((i) => i.type === type);
+    return res ? res.length : null;
+  }
 
   async function loadData() {
     data = await api.apiCall("claims");
-    speakersWithoutTicket = speakersWithoutTicketGen()
+    speakersWithoutTicket = speakersWithoutTicketGen();
 
     lastUpdate = new Date();
   }
@@ -52,17 +73,17 @@
     return arr;
   }
 
-  function speakersWithoutTicketGen () {
+  function speakersWithoutTicketGen() {
     if (!data) {
-      return null
+      return null;
     }
-    const wt = []
-    $bundle.spec.speakers.forEach(sp => {
-      if (!data.find(i => i.link.type === 'speaker' && i.link.id === sp.id)) {
-        wt.push(sp)
+    const wt = [];
+    $bundle.spec.speakers.forEach((sp) => {
+      if (!data.find((i) => i.link.type === "speaker" && i.link.id === sp.id)) {
+        wt.push(sp);
       }
-    })
-    return wt
+    });
+    return wt;
   }
 
   onMount(() => {
@@ -83,16 +104,42 @@
     </div>
     {#if speakersWithoutTicket}
       <div class="mt-10">
-        <h2 class="text-lg font-semibold uppercase">Přednášející bez kódu ({speakersWithoutTicket.length})</h2>
+        <h2 class="text-lg font-semibold uppercase">
+          Přednášející bez kódu ({speakersWithoutTicket.length})
+        </h2>
         <div class="flex gap-4 flex-wrap mt-4">
           {#each speakersWithoutTicket as sp}
-          <div><a href="/lide?id={sp.id}"><div class="inline-block align-middle"><Avatar speaker={sp} size="extra-small" /></div>&nbsp;{sp.name}</a></div>
+            <div>
+              <a href="/lide?id={sp.id}"
+                ><div class="inline-block align-middle">
+                  <Avatar speaker={sp} size="extra-small" />
+                </div>
+                &nbsp;{sp.name}</a
+              >
+            </div>
           {/each}
         </div>
       </div>
     {/if}
     <div class="mt-10">
-      <h2 class="text-lg font-semibold uppercase">Seznam všech speciálních vstupenek ({data.length})</h2>
+      <h2 class="text-lg font-semibold uppercase">
+        Seznam všech speciálních vstupenek ({data.length})
+      </h2>
+      <div class="mt-4 flex gap-4">
+        {#each Object.keys(ticketTypes) as tid}
+          <div>
+            <label class="cursor-pointer"
+              ><input
+                type="radio"
+                bind:group={selectedType}
+                name="type"
+                value={tid}
+              />
+              {ticketTypes[tid].title} ({countType(tid)})</label
+            >
+          </div>
+        {/each}
+      </div>
       <table class="table-auto mt-6 w-full" cellpadding="6">
         <thead>
           <tr class="text-xs uppercase text-blue-web/80">
@@ -104,6 +151,7 @@
         </thead>
         <tbody>
           {#each claimsMap(data) as claim}
+            {#if !selectedType || selectedType === "all" || (selectedType && selectedType === claim.type)}
               <tr
                 class={claim.claimed
                   ? "hover:bg-blue-500/10"
@@ -150,6 +198,7 @@
                   {/if}
                 </td>
               </tr>
+            {/if}
           {/each}
         </tbody>
       </table>
@@ -158,4 +207,4 @@
     <div>Načítám ..</div>
   {/if}
 </section>
-<section class="h-20"></section>
+<section class="h-20" />

src/routes/vstupenky.svelte

@@ -37,7 +37,9 @@
     public: "Běžná vstupenka",
     speaker: "Přednášející",
     organizator: "Organizátor",
-    host: "Doprovod",
+    staff: "Obsluha",
+    partner: "Partner",
+    host: "Host",
   };
 
   let forceShow = false;
@@ -414,7 +416,7 @@
                   </div>
                 {/if}
                 <div class="flex gap-3 text-sm">
-                  {#if ticket.type === "speaker" && ticket.link && ticket.link.id}
+                  {#if (ticket.type === "speaker" || ticket.type === "organizator") && ticket.link && ticket.link.id}
                     <a href="/lide?id={ticket.link.id}"
                       ><Avatar
                         speaker={$bundle.spec.speakers.find(