Add legend to program, various fixes

src/lib/Event.svelte

@@ -85,7 +85,7 @@
     <div class="text-sm flex flex-wrap gap-3 flex-1">
       <div class="opacity-80"><EventTypeLabel event={e} /></div>
       {#if schedule && !hideDate}
-        <EventSchedule item={schedule} e={e} bundle={$bundle} />
+        <EventSchedule item={schedule} {e} bundle={$bundle} />
       {/if}
       {#if duration}<div class="text-xs my-auto">{duration}m</div>{/if}
       {#if e.track}

src/lib/EventSchedule.svelte

@@ -9,11 +9,19 @@
     ? bundle.spec.stages.find((s) => s.id === item.stage)
     : null;
 
-  $: start = typeof(item.period.start) === 'string' ? new Date(item.period.start) : item.period.start
+  $: start =
-  $: end = typeof(item.period.end) === 'string' ? new Date(item.period.end) : item.period.end
+    typeof item.period.start === "string"
+      ? new Date(item.period.start)
+      : item.period.start;
+  $: end =
+    typeof item.period.end === "string"
+      ? new Date(item.period.end)
+      : item.period.end;
 </script>
 
 <div class="font-semibold">
   {formatCET(start, "yyyy-MM-dd") === "2022-06-04" ? "SO" : "NE"}
-  {formatCET(start, "HH:mm")}-{formatCET(end, "HH:mm")} ({stage ? stage.name : "n/a"}) @{item.id}
+  {formatCET(start, "HH:mm")}-{formatCET(end, "HH:mm")} ({stage
+    ? stage.name
+    : "n/a"}) @{item.id}
 </div>

src/lib/api.js

@@ -37,12 +37,14 @@ class API {
             description: sp.desc
           }
         })
+        if (this.bundle.schedule) {
           const schedule = this.bundle.schedule.find(s => s.event === ev.id)
           if (schedule) {
             ev.scheduleId = '@' + schedule.id
           }
         }
       }
+    }
     return this.bundle
   }
 

src/lib/config.js

@@ -0,0 +1,33 @@
+
+export const EventTypes = {
+  panel: {
+    color: 'bg-orange-400',
+    colorLight: 'bg-orange-400/20',
+    colorDark: 'bg-orange-400/40'
+  },
+  talk: {
+    color: 'bg-custom-green',
+    colorLight: 'bg-custom-green/20',
+    colorDark: 'bg-custom-green/40'
+  },
+  workshop: {
+    color: 'bg-custom-blue',
+    colorLight: 'bg-custom-blue/20',
+    colorDark: 'bg-custom-blue/40'
+  },
+  campfire: {
+    color: 'bg-purple-400',
+    colorLight: 'bg-purple-400/20',
+    colorDark: 'bg-purple-400/40'
+  },
+  'lightning-series': {
+    color: 'bg-yellow-400',
+    colorLight: 'bg-yellow-400/20',
+    colorDark: 'bg-yellow-400/40'
+  },
+  other: {
+    color: 'bg-rose-400',
+    colorLight: 'bg-rose-400/20',
+    colorDark: 'bg-rose-400/40'
+  }
+}

src/routes/program.svelte

@@ -7,10 +7,11 @@
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import { format, compareAsc, compareDesc } from "date-fns";
-  import { formatCET } from '$lib/utils.js';
+  import { formatCET } from "$lib/utils.js";
   import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js";
   import { parsePeriod } from "$lib/periods.js";
-  import { cs } from "date-fns/locale/index.js"
+  import { cs } from "date-fns/locale/index.js";
+  import { EventTypes } from "$lib/config.js";
   import SvelteMarkdown from "svelte-markdown";
   import SvelteTooltip from "$lib/SvelteTooltip.svelte";
   const renderers = { link: Link };
@@ -228,6 +229,16 @@
     return "border border-blue-web/50";
   }
 
+  $: eventTypes = $bundle && $bundle.spec ? extendEventTypes($bundle) : [];
+
+  function extendEventTypes(bundle) {
+    return bundle.spec["event-types"]
+      .map((et) => {
+        return Object.assign({}, et, EventTypes[et.id]);
+      })
+      .filter((et) => !et.hidden);
+  }
+
   function isPeriodOverlap(x, y) {
     const xstart = new Date(x.start);
     const xend = new Date(x.end);
@@ -274,25 +285,9 @@
       console.log(`Event not found: ${eventId}`);
       return null;
     }
-    switch (ev.type) {
+    const et = EventTypes[ev.type];
-      case "panel":
+    ev.color = et.color ? `${et.colorLight} hover:${et.colorDark}` : "";
-        ev.color = "bg-orange-400/20 hover:bg-orange-400/40";
+    console.log(ev.color);
-        break;
-      case "talk":
-        ev.color = "bg-custom-green/20 hover:bg-custom-green/40";
-        break;
-      case "workshop":
-        ev.color = "bg-custom-blue/20 hover:bg-custom-blue/40";
-        break;
-      case "campfire":
-        ev.color = "bg-purple-400/20 hover:bg-purple-400/40";
-        break;
-      case "lightning-series":
-        ev.color = "bg-yellow-400/20 hover:bg-yellow-400/40";
-        break;
-      default:
-        ev.color = "bg-rose-400/20 hover:bg-rose-400/40";
-    }
     return ev;
   }
 </script>
@@ -402,26 +397,40 @@
   {#if $bundle}
     {#each scheduleTimes($bundle, $schedulePref.time) as st}
       <div
-        class="max-w-6xl mx-auto px-6 mb-4 print:max-w-full break-before-page flex gap-3"
+        class="max-w-6xl mx-auto px-6 mb-4 print:max-w-full break-before-page flex flex-wrap gap-3"
       >
-        <h2 class="uppercase text-xl font-bold">
+        <h2 class="flex-0 print:flex-1 uppercase text-xl font-bold">
           {#if st.name}
             {st.name}
           {:else}
             {formatCET(new Date(st.date), "iiii d.M.y")}
           {/if}
         </h2>
-        <div class="inline-block ml-2 text-sm font-normal my-auto print:hidden">
+        <div
+          class="flex-1 inline-block ml-2 text-sm font-normal my-auto print:hidden"
+        >
           <a
             href="https://pub.utxo.cz/22/pdf/{st.code}.pdf"
             target="_blank"
             class=""><i class="fa-regular fa-file-pdf" /> PDF</a
           >
         </div>
+        <div class="flex my-auto gap-2 justify-items-end mr-4">
+          {#each eventTypes as et}
+            <div class="flex gap-1 w-1/4 text-blue-web">
+              <div class="w-3 h-3 {et.color} my-auto rounded-sm shrink-0" />
+              <div class="text-sm print:text-lg my-auto whitespace-nowrap">
+                {#if et.url}<a href={et.url} target="_blank"
+                    >{et.shortname || et.name}</a
+                  >{:else}{et.shortname || et.name}{/if}
+              </div>
+            </div>
+          {/each}
+        </div>
         <div
-          class="flex-1 text-right hidden sm:block float-right text-blue-web/50"
+          class="text-right hidden sm:block float-right text-blue-web/50 text-sm print:text-base my-auto"
         >
-          Poslední aktualizace: {formatCET(new Date($bundle.time), "d.M.y H:mm")}
+          Aktualizováno: {formatCET(new Date($bundle.time), "d.M.y H:mm")}
         </div>
       </div>
       <div class="relative">
@@ -541,8 +550,12 @@
         </div>
       </div>
     {/each}
-    <div class="print:hidden italic max-w-6xl mx-auto px-6 mb-4 print:max-w-full break-before-page flex gap-3">
+    <div
-      Všechny časy jsou lokální - středoevropské časové pásmo CET (+02:00). Všechny události jsou v češtině nebo slovenštině, pokud není uvedeno jinak.
+      class="print:hidden italic max-w-6xl mx-auto px-6 mb-4 print:max-w-full break-before-page flex gap-3"
+    >
+      Všechny časy jsou lokální - středoevropské časové pásmo CET (+02:00).
+      Všechny události jsou v češtině nebo slovenštině, pokud není uvedeno
+      jinak.
     </div>
   {:else}
     Načítám ..

src/routes/seznam-udalosti.svelte

@@ -106,10 +106,12 @@
         arr = arr.filter((e) => e.track === f.key);
       }
       if (f.type === "text") {
-        if (f.key.substring(0,1) === '@') {
+        if (f.key.substring(0, 1) === "@") {
-          const schedule = bd.spec.schedule.find(e => e.id === f.key.substring(1))
+          const schedule = bd.spec.schedule.find(
+            (e) => e.id === f.key.substring(1)
+          );
           if (schedule) {
-            const ev = bd.spec.events.find(e => e.id === schedule.event)
+            const ev = bd.spec.events.find((e) => e.id === schedule.event);
             arr = [ev];
           } else {
             arr = [];
@@ -243,7 +245,7 @@
     </div>
   </div>
   <div class="mt-4">
-    {#each ids.map(id => $bundle.spec.events.find(e => e.id === id)) as ev}
+    {#each ids.map((id) => $bundle.spec.events.find((e) => e.id === id)) as ev}
       <Event event={ev} />
     {/each}
   </div>

src/routes/tv.svelte

@@ -6,6 +6,7 @@
   import { onMount, onDestroy } from "svelte";
   import { bundle, userData } from "$lib/stores.js";
   import { format, formatDistanceToNow } from "date-fns";
+  import { formatCET } from "$lib/utils.js";
   import { parsePeriod } from "$lib/periods.js";
   import EventTypeLabel from "$lib/EventTypeLabel.svelte";
   import Avatar from "$lib/Avatar.svelte";
@@ -89,8 +90,8 @@
   }
 
   function genStatus(_bundle) {
-    const now = new Date(`2022-06-04T${format(new Date(), "HH:mm:ss")}`);
+    //const now = new Date(`2022-06-05T${format(new Date(), "HH:mm:ss")}`);
-    //const now = new Date()
+    const now = new Date();
     //const now = new Date(`2022-06-04T13:25`)
 
     let globalNextEvents = events.filter((ev) => {
@@ -130,7 +131,10 @@
         currentPercentage = elapsed / (duration / 100);
       }
 
-      const day = format(new Date(nextStreams[0].period.start), "yyyy-MM-dd");
+      const day = formatCET(
+        new Date(nextStreams[0].period.start),
+        "yyyy-MM-dd"
+      );
       let ctime = 0;
       if (day === "2022-06-05") {
         ctime = 2;
@@ -178,7 +182,7 @@
             on:click={() => startStream(stage.id)}
           >
             <div class="uppercase font-semibold text-white text-lg">
-              #{i + 1}
+              <i class="fa-solid fa-video mr-1 text-white/50" />
               {stage.name}
             </div>
             <div class="mt-2 text-sm">
@@ -200,10 +204,10 @@
                   </div>
                   <div>
                     <span class="text-white/70"
-                      >{format(
+                      >{formatCET(
                         new Date(ss.current.period.start),
                         "HH:mm"
-                      )}-{format(
+                      )}-{formatCET(
                         new Date(ss.current.period.end),
                         "HH:mm"
                       )}</span
@@ -212,7 +216,7 @@
                   </div>
                 {:else}
                   <span class="italic"
-                    >☕ Přestávka {#if ss.next[0]}do {format(
+                    >☕ Přestávka {#if ss.next[0]}do {formatCET(
                         new Date(ss.next[0].period.start),
                         "HH:mm"
                       )}{/if}</span
@@ -227,14 +231,14 @@
     <section class="relative mx-auto lg:py-6 px-6 text-white">
       {#each $bundle.spec.stages.filter((s) => s.livestream) as stage, i}
         <div
-          use:scrollRef={stage.id}
           id={stage.id}
           class="mb-8 bg-blue-web-bg/90 p-4 rounded-lg shadow-xl"
         >
           <div class="md:flex gap-4">
             <h1 class="uppercase text-2xl font-bold">
               <a use:scrollTo={stage.id} on:click={() => startStream(stage.id)}
-                >Stream #{i + 1} - {stage.name}</a
+                ><i class="fa-solid fa-video mr-1 text-white/50" />
+                {stage.name}</a
               >
             </h1>
             <div class="my-auto mt-2 md:mt-0 text-sm flex-1 md:text-right">
@@ -246,7 +250,7 @@
             </div>
           </div>
           <div class="flex gap-6 mt-4 flex-wrap xl:flex-nowrap">
-            <div>
+            <div use:scrollRef={stage.id}>
               <YouTube
                 videoId={stageStatus[stage.id].stream.name}
                 class="bg-blue-web-bg/60"
@@ -380,6 +384,9 @@
         </div>
       {/each}
     </section>
+    <div class="text-center text-white/50 pb-10">
+      Všechny časy jsou lokální - středoevropské časové pásmo CET (+02:00).
+    </div>
   {:else}
     Načítám ...
   {/if}

src/routes/vstupenky.svelte

@@ -951,7 +951,7 @@
                 <div class="mt-8">
                   <div class="uppercase text-sm font-bold">Platební metoda</div>
                   <div class="mt-2">
-                    {#if $apiStatus.config.paymentMethods.find((pm) => pm.id === "btcpay") && ($apiStatus.config.paymentMethods.find((pm) => pm.id === "btcpay").hidden === true)}
+                    {#if $apiStatus.config.paymentMethods.find((pm) => pm.id === "btcpay") && $apiStatus.config.paymentMethods.find((pm) => pm.id === "btcpay").hidden === true}
                       <div class="mb-4 text-sm">
                         Platba pomocí BTC není dočasně k dispozici, zkuste to
                         prosím později. Omlouváme se :(