Add legend to program, various fixes
This commit is contained in:
rodič
55ff60f95c
revize
633ee04850
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
$: end = typeof(item.period.end) === 'string' ? new Date(item.period.end) : item.period.end
|
||||
$: start =
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
case "panel":
|
||||
ev.color = "bg-orange-400/20 hover:bg-orange-400/40";
|
||||
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";
|
||||
}
|
||||
const et = EventTypes[ev.type];
|
||||
ev.color = et.color ? `${et.colorLight} hover:${et.colorDark}` : "";
|
||||
console.log(ev.color);
|
||||
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">
|
||||
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
|
||||
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 ..
|
||||
|
|
|
|||
|
|
@ -106,10 +106,12 @@
|
|||
arr = arr.filter((e) => e.track === f.key);
|
||||
}
|
||||
if (f.type === "text") {
|
||||
if (f.key.substring(0,1) === '@') {
|
||||
const schedule = bd.spec.schedule.find(e => e.id === f.key.substring(1))
|
||||
if (f.key.substring(0, 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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
//const now = new Date(`2022-06-05T${format(new Date(), "HH:mm:ss")}`);
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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 :(
|
||||
|
|
|
|||
Načítá se…
Odkázat v novém úkolu