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="text-sm flex flex-wrap gap-3 flex-1">
|
||||||
<div class="opacity-80"><EventTypeLabel event={e} /></div>
|
<div class="opacity-80"><EventTypeLabel event={e} /></div>
|
||||||
{#if schedule && !hideDate}
|
{#if schedule && !hideDate}
|
||||||
<EventSchedule item={schedule} e={e} bundle={$bundle} />
|
<EventSchedule item={schedule} {e} bundle={$bundle} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if duration}<div class="text-xs my-auto">{duration}m</div>{/if}
|
{#if duration}<div class="text-xs my-auto">{duration}m</div>{/if}
|
||||||
{#if e.track}
|
{#if e.track}
|
||||||
|
|
|
@ -9,11 +9,19 @@
|
||||||
? bundle.spec.stages.find((s) => s.id === item.stage)
|
? bundle.spec.stages.find((s) => s.id === item.stage)
|
||||||
: null;
|
: 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>
|
</script>
|
||||||
|
|
||||||
<div class="font-semibold">
|
<div class="font-semibold">
|
||||||
{formatCET(start, "yyyy-MM-dd") === "2022-06-04" ? "SO" : "NE"}
|
{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>
|
</div>
|
||||||
|
|
|
@ -37,9 +37,11 @@ class API {
|
||||||
description: sp.desc
|
description: sp.desc
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const schedule = this.bundle.schedule.find(s => s.event === ev.id)
|
if (this.bundle.schedule) {
|
||||||
if (schedule) {
|
const schedule = this.bundle.schedule.find(s => s.event === ev.id)
|
||||||
ev.scheduleId = '@' + schedule.id
|
if (schedule) {
|
||||||
|
ev.scheduleId = '@' + schedule.id
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 { goto } from "$app/navigation";
|
||||||
import { page } from "$app/stores";
|
import { page } from "$app/stores";
|
||||||
import { format, compareAsc, compareDesc } from "date-fns";
|
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 { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js";
|
||||||
import { parsePeriod } from "$lib/periods.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 SvelteMarkdown from "svelte-markdown";
|
||||||
import SvelteTooltip from "$lib/SvelteTooltip.svelte";
|
import SvelteTooltip from "$lib/SvelteTooltip.svelte";
|
||||||
const renderers = { link: Link };
|
const renderers = { link: Link };
|
||||||
|
@ -228,6 +229,16 @@
|
||||||
return "border border-blue-web/50";
|
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) {
|
function isPeriodOverlap(x, y) {
|
||||||
const xstart = new Date(x.start);
|
const xstart = new Date(x.start);
|
||||||
const xend = new Date(x.end);
|
const xend = new Date(x.end);
|
||||||
|
@ -274,25 +285,9 @@
|
||||||
console.log(`Event not found: ${eventId}`);
|
console.log(`Event not found: ${eventId}`);
|
||||||
return null;
|
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;
|
return ev;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -402,26 +397,40 @@
|
||||||
{#if $bundle}
|
{#if $bundle}
|
||||||
{#each scheduleTimes($bundle, $schedulePref.time) as st}
|
{#each scheduleTimes($bundle, $schedulePref.time) as st}
|
||||||
<div
|
<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}
|
{#if st.name}
|
||||||
{st.name}
|
{st.name}
|
||||||
{:else}
|
{:else}
|
||||||
{formatCET(new Date(st.date), "iiii d.M.y")}
|
{formatCET(new Date(st.date), "iiii d.M.y")}
|
||||||
{/if}
|
{/if}
|
||||||
</h2>
|
</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
|
<a
|
||||||
href="https://pub.utxo.cz/22/pdf/{st.code}.pdf"
|
href="https://pub.utxo.cz/22/pdf/{st.code}.pdf"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class=""><i class="fa-regular fa-file-pdf" /> PDF</a
|
class=""><i class="fa-regular fa-file-pdf" /> PDF</a
|
||||||
>
|
>
|
||||||
</div>
|
</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
|
<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>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
|
@ -541,8 +550,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/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>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
Načítám ..
|
Načítám ..
|
||||||
|
|
|
@ -106,10 +106,12 @@
|
||||||
arr = arr.filter((e) => e.track === f.key);
|
arr = arr.filter((e) => e.track === f.key);
|
||||||
}
|
}
|
||||||
if (f.type === "text") {
|
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) {
|
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];
|
arr = [ev];
|
||||||
} else {
|
} else {
|
||||||
arr = [];
|
arr = [];
|
||||||
|
@ -243,7 +245,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4">
|
<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} />
|
<Event event={ev} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import { bundle, userData } from "$lib/stores.js";
|
import { bundle, userData } from "$lib/stores.js";
|
||||||
import { format, formatDistanceToNow } from "date-fns";
|
import { format, formatDistanceToNow } from "date-fns";
|
||||||
|
import { formatCET } from "$lib/utils.js";
|
||||||
import { parsePeriod } from "$lib/periods.js";
|
import { parsePeriod } from "$lib/periods.js";
|
||||||
import EventTypeLabel from "$lib/EventTypeLabel.svelte";
|
import EventTypeLabel from "$lib/EventTypeLabel.svelte";
|
||||||
import Avatar from "$lib/Avatar.svelte";
|
import Avatar from "$lib/Avatar.svelte";
|
||||||
|
@ -89,8 +90,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function genStatus(_bundle) {
|
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`)
|
//const now = new Date(`2022-06-04T13:25`)
|
||||||
|
|
||||||
let globalNextEvents = events.filter((ev) => {
|
let globalNextEvents = events.filter((ev) => {
|
||||||
|
@ -130,7 +131,10 @@
|
||||||
currentPercentage = elapsed / (duration / 100);
|
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;
|
let ctime = 0;
|
||||||
if (day === "2022-06-05") {
|
if (day === "2022-06-05") {
|
||||||
ctime = 2;
|
ctime = 2;
|
||||||
|
@ -178,7 +182,7 @@
|
||||||
on:click={() => startStream(stage.id)}
|
on:click={() => startStream(stage.id)}
|
||||||
>
|
>
|
||||||
<div class="uppercase font-semibold text-white text-lg">
|
<div class="uppercase font-semibold text-white text-lg">
|
||||||
#{i + 1}
|
<i class="fa-solid fa-video mr-1 text-white/50" />
|
||||||
{stage.name}
|
{stage.name}
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 text-sm">
|
<div class="mt-2 text-sm">
|
||||||
|
@ -200,10 +204,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="text-white/70"
|
<span class="text-white/70"
|
||||||
>{format(
|
>{formatCET(
|
||||||
new Date(ss.current.period.start),
|
new Date(ss.current.period.start),
|
||||||
"HH:mm"
|
"HH:mm"
|
||||||
)}-{format(
|
)}-{formatCET(
|
||||||
new Date(ss.current.period.end),
|
new Date(ss.current.period.end),
|
||||||
"HH:mm"
|
"HH:mm"
|
||||||
)}</span
|
)}</span
|
||||||
|
@ -212,7 +216,7 @@
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="italic"
|
<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),
|
new Date(ss.next[0].period.start),
|
||||||
"HH:mm"
|
"HH:mm"
|
||||||
)}{/if}</span
|
)}{/if}</span
|
||||||
|
@ -227,14 +231,14 @@
|
||||||
<section class="relative mx-auto lg:py-6 px-6 text-white">
|
<section class="relative mx-auto lg:py-6 px-6 text-white">
|
||||||
{#each $bundle.spec.stages.filter((s) => s.livestream) as stage, i}
|
{#each $bundle.spec.stages.filter((s) => s.livestream) as stage, i}
|
||||||
<div
|
<div
|
||||||
use:scrollRef={stage.id}
|
|
||||||
id={stage.id}
|
id={stage.id}
|
||||||
class="mb-8 bg-blue-web-bg/90 p-4 rounded-lg shadow-xl"
|
class="mb-8 bg-blue-web-bg/90 p-4 rounded-lg shadow-xl"
|
||||||
>
|
>
|
||||||
<div class="md:flex gap-4">
|
<div class="md:flex gap-4">
|
||||||
<h1 class="uppercase text-2xl font-bold">
|
<h1 class="uppercase text-2xl font-bold">
|
||||||
<a use:scrollTo={stage.id} on:click={() => startStream(stage.id)}
|
<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>
|
</h1>
|
||||||
<div class="my-auto mt-2 md:mt-0 text-sm flex-1 md:text-right">
|
<div class="my-auto mt-2 md:mt-0 text-sm flex-1 md:text-right">
|
||||||
|
@ -246,7 +250,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-6 mt-4 flex-wrap xl:flex-nowrap">
|
<div class="flex gap-6 mt-4 flex-wrap xl:flex-nowrap">
|
||||||
<div>
|
<div use:scrollRef={stage.id}>
|
||||||
<YouTube
|
<YouTube
|
||||||
videoId={stageStatus[stage.id].stream.name}
|
videoId={stageStatus[stage.id].stream.name}
|
||||||
class="bg-blue-web-bg/60"
|
class="bg-blue-web-bg/60"
|
||||||
|
@ -380,6 +384,9 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</section>
|
</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}
|
{:else}
|
||||||
Načítám ...
|
Načítám ...
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -951,7 +951,7 @@
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
<div class="uppercase text-sm font-bold">Platební metoda</div>
|
<div class="uppercase text-sm font-bold">Platební metoda</div>
|
||||||
<div class="mt-2">
|
<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">
|
<div class="mb-4 text-sm">
|
||||||
Platba pomocí BTC není dočasně k dispozici, zkuste to
|
Platba pomocí BTC není dočasně k dispozici, zkuste to
|
||||||
prosím později. Omlouváme se :(
|
prosím později. Omlouváme se :(
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu