utxo
/
utxo22-web
1
0
Rozštěpit 0
Zdrojový kód Úkoly Požadavky na natažení Vydání Aktivita

prettier

This commit is contained in:
tree 2022-05-30 07:40:44 +02:00
rodič 39f485e594
revize 5c03eb02cc
16 změnil soubory, kde provedl 717 přidání a 415 odebrání
Zobrazit statistiky Stáhněte soubor záplaty Stáhněte rozdílový soubor Rozbalit všechny soubory Sbalit všechny soubory

6
src/lib/Avatar.svelte
Zobrazit soubor

@ -115,7 +115,11 @@
{#if size === "small"} {#if size === "small"}
<div class="w-16 h-16 text-center"> <div class="w-16 h-16 text-center">
<img src={currentImg} class="w-16 h-16 rounded-full m-auto" alt={speaker.name} /> <img
src={currentImg}
class="w-16 h-16 rounded-full m-auto"
alt={speaker.name}
/>
</div> </div>
{/if} {/if}

6
src/lib/Event.svelte
Zobrazit soubor

@ -5,7 +5,7 @@
import Tooltip from "$lib/Tooltip.svelte"; import Tooltip from "$lib/Tooltip.svelte";
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
import EventTypeLabel from "$lib/EventTypeLabel.svelte"; import EventTypeLabel from "$lib/EventTypeLabel.svelte";
import EventSchedule from '$lib/EventSchedule.svelte'; import EventSchedule from "$lib/EventSchedule.svelte";
import { bundle, userData } from "$lib/stores.js"; import { bundle, userData } from "$lib/stores.js";
import { calcDuration, addFavorite } from "$lib/events.js"; import { calcDuration, addFavorite } from "$lib/events.js";
@ -15,7 +15,9 @@
$: e = event; $: e = event;
$: duration = calcDuration(e, $bundle); $: duration = calcDuration(e, $bundle);
$: spoiler = makeSpoiler(e); $: spoiler = makeSpoiler(e);
$: schedule = $bundle ? $bundle.spec.schedule.find(s => s.event === e.id) : null $: schedule = $bundle
? $bundle.spec.schedule.find((s) => s.event === e.id)
: null;
function makeSpoiler(_e) { function makeSpoiler(_e) {
if (!_e.description) { if (!_e.description) {

13
src/lib/EventSchedule.svelte
Zobrazit soubor

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

8
src/lib/EventTypeLabel.svelte
Zobrazit soubor

@ -3,7 +3,7 @@
export let size = null; export let size = null;
export let black = false; export let black = false;
const textColor = black ? 'text-black' : 'text-white' const textColor = black ? "text-black" : "text-white";
const config = { const config = {
panel: { title: "Panelová debata", style: "bg-orange-400" }, panel: { title: "Panelová debata", style: "bg-orange-400" },
@ -21,7 +21,11 @@
$: current = config[event.type]; $: current = config[event.type];
</script> </script>
<div class="inline-block {size === 'big' ? 'h-6 text-sm' : 'h-5 text-xs'} font-normal"> <div
class="inline-block {size === 'big'
? 'h-6 text-sm'
: 'h-5 text-xs'} font-normal"
>
<div <div
class="{size === 'big' class="{size === 'big'
? 'px-2 py-0.5' ? 'px-2 py-0.5'

44
src/lib/YouTube.svelte
Zobrazit soubor

@ -15,18 +15,18 @@
</script> </script>
<script> <script>
import { onMount } from 'svelte'; import { onMount } from "svelte";
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from "svelte";
import YoutubePlayer from 'youtube-player'; import YoutubePlayer from "youtube-player";
export { className as class }; // HTML class names for container element (optional) export { className as class }; // HTML class names for container element (optional)
export let id = undefined; // HTML element ID for player (optional) export let id = undefined; // HTML element ID for player (optional)
export let videoId; // Youtube video ID (required) export let videoId; // Youtube video ID (required)
export let options = undefined; // YouTube player options (optional) export let options = undefined; // YouTube player options (optional)
let className; // HTML class names for container element let className; // HTML class names for container element
let playerElem; // player DOM element reference let playerElem; // player DOM element reference
export let player; // player API instance export let player; // player API instance
// Create and tear down player as component mounts or unmounts // Create and tear down player as component mounts or unmounts
onMount(() => createPlayer()); onMount(() => createPlayer());
@ -38,11 +38,11 @@
player = YoutubePlayer(playerElem, options); player = YoutubePlayer(playerElem, options);
// Register event handlers // Register event handlers
player.on('ready', onPlayerReady); player.on("ready", onPlayerReady);
player.on('error', onPlayerError); player.on("error", onPlayerError);
player.on('stateChange', onPlayerStateChange); player.on("stateChange", onPlayerStateChange);
player.on('playbackRateChange', onPlayerPlaybackRateChange); player.on("playbackRateChange", onPlayerPlaybackRateChange);
player.on('playbackQualityChange', onPlayerPlaybackQualityChange); player.on("playbackQualityChange", onPlayerPlaybackQualityChange);
// Tear down player when done // Tear down player when done
return () => player.destroy(); return () => player.destroy();
@ -64,7 +64,7 @@
// ------------------------------------------- // -------------------------------------------
// Event handling // Event handling
// ------------------------------------------- // -------------------------------------------
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
/** /**
* https://developers.google.com/youtube/iframe_api_reference#onReady * https://developers.google.com/youtube/iframe_api_reference#onReady
@ -73,7 +73,7 @@
* @param {Object} target - player object * @param {Object} target - player object
*/ */
function onPlayerReady(event) { function onPlayerReady(event) {
dispatch('ready', event); dispatch("ready", event);
// Start playing // Start playing
play(videoId); play(videoId);
@ -87,7 +87,7 @@
* @param {Object} target - player object * @param {Object} target - player object
*/ */
function onPlayerError(event) { function onPlayerError(event) {
dispatch('error', event); dispatch("error", event);
} }
/** /**
@ -98,19 +98,19 @@
* @param {Object} target - actual YT player * @param {Object} target - actual YT player
*/ */
function onPlayerStateChange(event) { function onPlayerStateChange(event) {
dispatch('stateChange', event) dispatch("stateChange", event);
switch (event.data) { switch (event.data) {
case PlayerState.ENDED: case PlayerState.ENDED:
dispatch('end', event); dispatch("end", event);
break; break;
case PlayerState.PLAYING: case PlayerState.PLAYING:
dispatch('play', event); dispatch("play", event);
break; break;
case PlayerState.PAUSED: case PlayerState.PAUSED:
dispatch('pause', event); dispatch("pause", event);
break; break;
default: default:
@ -125,7 +125,7 @@
* @param {Object} target - actual YT player * @param {Object} target - actual YT player
*/ */
function onPlayerPlaybackRateChange(event) { function onPlayerPlaybackRateChange(event) {
dispatch('playbackRateChange', event); dispatch("playbackRateChange", event);
} }
/** /**
@ -136,10 +136,10 @@
* @param {Object} target - actual YT player * @param {Object} target - actual YT player
*/ */
function onPlayerPlaybackQualityChange(event) { function onPlayerPlaybackQualityChange(event) {
dispatch('playbackQualityChange', event); dispatch("playbackQualityChange", event);
} }
</script> </script>
<div class={className}> <div class={className}>
<div id={id} bind:this={playerElem}></div> <div {id} bind:this={playerElem} />
</div> </div>

74
src/lib/header/Header.svelte
Zobrazit soubor

@ -13,7 +13,9 @@
</script> </script>
<header <header
class="relative bg-center bg-cover {$page.url.pathname !== '/tv' ? "bg-[url('/img/bg-header.jpg')]" : ''} bg-no-repeat bg-blue-web-bg print:hidden" class="relative bg-center bg-cover {$page.url.pathname !== '/tv'
? "bg-[url('/img/bg-header.jpg')]"
: ''} bg-no-repeat bg-blue-web-bg print:hidden"
> >
<!-- <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li> --> <!-- <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li> -->
<div> <div>
@ -22,7 +24,7 @@
> >
<div class=""> <div class="">
<div class="lg:flex lg:flex-wrap lg:space-x-10"> <div class="lg:flex lg:flex-wrap lg:space-x-10">
{#if !["/","/tv"].includes($page.url.pathname)} {#if !["/", "/tv"].includes($page.url.pathname)}
<div <div
class="block justify-start lg:flex-1 my-auto text-center pb-3 lg:pb-0 pt-3 lg:pt-0" class="block justify-start lg:flex-1 my-auto text-center pb-3 lg:pb-0 pt-3 lg:pt-0"
> >
@ -36,7 +38,7 @@
> >
</div> </div>
</div> </div>
{:else if $page.url.pathname === '/tv'} {:else if $page.url.pathname === "/tv"}
<div <div
class="block justify-start lg:flex-1 my-auto text-center pb-3 lg:pb-0 pt-3 lg:pt-0" class="block justify-start lg:flex-1 my-auto text-center pb-3 lg:pb-0 pt-3 lg:pt-0"
> >
@ -56,23 +58,23 @@
<div <div
class="flex lg:space-x-10 uppercase text-sm font-bold text-white flex-wrap gap-3" class="flex lg:space-x-10 uppercase text-sm font-bold text-white flex-wrap gap-3"
> >
{#if $page.url.pathname === '/tv'} {#if $page.url.pathname === "/tv"}
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="m-auto hover:text-[#E16A61] " class="m-auto hover:text-[#E16A61] "
class:text-blue-400={$page.url.pathname === "/"}>O konferenci</a class:text-blue-400={$page.url.pathname === "/"}>O konferenci</a
> >
{:else} {:else}
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="m-auto hover:text-[#E16A61] " class="m-auto hover:text-[#E16A61] "
class:text-blue-400={$page.url.pathname === "/"}>Úvod</a class:text-blue-400={$page.url.pathname === "/"}>Úvod</a
> >
{/if} {/if}
{#if $page.url.pathname !== '/tv'} {#if $page.url.pathname !== "/tv"}
<!--a <!--a
sveltekit:prefetch sveltekit:prefetch
href="/tv" href="/tv"
class="m-auto hover:text-[#E16A61] text-custom-green" class="m-auto hover:text-[#E16A61] text-custom-green"
@ -85,34 +87,34 @@
class="m-auto hover:text-[#E16A61]" class="m-auto hover:text-[#E16A61]"
class:text-blue-400={$page.url.pathname === "/program"}>Program</a class:text-blue-400={$page.url.pathname === "/program"}>Program</a
> >
{#if $page.url.pathname !== '/tv'} {#if $page.url.pathname !== "/tv"}
<!--a <!--a
sveltekit:prefetch sveltekit:prefetch
href="/mapa" href="/mapa"
class="m-auto hover:text-[#E16A61]" class="m-auto hover:text-[#E16A61]"
class:text-blue-400={$page.url.pathname === "/mapa"}>Mapa</a class:text-blue-400={$page.url.pathname === "/mapa"}>Mapa</a
--> -->
<!--a <!--a
sveltekit:prefetch sveltekit:prefetch
href="/prakticke" href="/prakticke"
class="m-auto hover:text-[#E16A61]" class="m-auto hover:text-[#E16A61]"
class:text-blue-400={$page.url.pathname === "/prakticke"}>Praktické</a class:text-blue-400={$page.url.pathname === "/prakticke"}>Praktické</a
--> -->
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/vstupenky" href="/vstupenky"
class="m-auto border-solid border border-[#E16A61] rounded-full {$page class="m-auto border-solid border border-[#E16A61] rounded-full {$page
.url.pathname === '/vstupenky' .url.pathname === '/vstupenky'
? 'border-0 bg-utxo-gradient m-px' ? 'border-0 bg-utxo-gradient m-px'
: 'hover:border-0 hover:bg-utxo-gradient hover:p-px'}" : 'hover:border-0 hover:bg-utxo-gradient hover:p-px'}"
><div class="py-1.5 px-2 lg:px-6"> ><div class="py-1.5 px-2 lg:px-6">
Vstupenky{#if $userDataLocal.tickets && $userDataLocal.tickets.length > 0}&nbsp;({$userDataLocal Vstupenky{#if $userDataLocal.tickets && $userDataLocal.tickets.length > 0}&nbsp;({$userDataLocal
.tickets.length}){/if} .tickets.length}){/if}
</div></a </div></a
> >
{/if} {/if}
</div> </div>
{#if $page.url.pathname === '/'} {#if $page.url.pathname === "/"}
<div <div
class="hidden lg:block my-auto lg:flex-1 lg:pt-0 pt-4 lg:justify-end justify-center" class="hidden lg:block my-auto lg:flex-1 lg:pt-0 pt-4 lg:justify-end justify-center"
> >
@ -128,7 +130,9 @@
class="relative mx-auto lg:px-6 px-4 pt-4 sm:pt-6 sm:pb-6 pb-2 max-w-6xl text-left text-white" class="relative mx-auto lg:px-6 px-4 pt-4 sm:pt-6 sm:pb-6 pb-2 max-w-6xl text-left text-white"
> >
<div class="pl-2 sm:pl-6 lg:pl-10"> <div class="pl-2 sm:pl-6 lg:pl-10">
<div class="uppercase font-semibold text-md lg:text-lg lg:w-1/3 text-white/70"> <div
class="uppercase font-semibold text-md lg:text-lg lg:w-1/3 text-white/70"
>
Otevřená komunitní kryptoměnová konference Otevřená komunitní kryptoměnová konference
</div> </div>
<div class="mt-6"> <div class="mt-6">

36
src/routes/casova-osa.svelte
Zobrazit soubor

@ -134,12 +134,15 @@
return "border border-blue-web/50"; return "border border-blue-web/50";
} }
function activeStages (bundle, stages, day, pl) { function activeStages(bundle, stages, day, pl) {
return stages.filter(stage => { return stages.filter((stage) => {
const dt = format(new Date(day), 'yyyy-MM-dd') const dt = format(new Date(day), "yyyy-MM-dd");
return Boolean(pl.schedule.filter(i => i.stage === stage.id).find(i => i.date === dt) return Boolean(
) pl.schedule
}) .filter((i) => i.stage === stage.id)
.find((i) => i.date === dt)
);
});
} }
function findEvent(bundle, eventId) { function findEvent(bundle, eventId) {
@ -188,7 +191,12 @@
> >
{#each $bundle.spec["schedule-candidates"] as p, i} {#each $bundle.spec["schedule-candidates"] as p, i}
<option value={i} <option value={i}
>#{i} [{["score", "thc:themeCrossing", "tgc:tagsCrossing", "exd:exclusivityDev"] >#{i} [{[
"score",
"thc:themeCrossing",
"tgc:tagsCrossing",
"exd:exclusivityDev",
]
.map((key) => { .map((key) => {
const [title, rkey] = key.split(":"); const [title, rkey] = key.split(":");
return `${title}:${ return `${title}:${
@ -281,9 +289,14 @@
<th class="xl:w-16" /> <th class="xl:w-16" />
{#each activeStages($bundle, $bundle.spec.stages, st.date, plan) as stage} {#each activeStages($bundle, $bundle.spec.stages, st.date, plan) as stage}
{#if $schedulePref && $schedulePref.stages.includes(stage.id)} {#if $schedulePref && $schedulePref.stages.includes(stage.id)}
<th class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"> <th
<div class="text-xs font-normal text-blue-web/60 mb-2.5">{stage.capacity.seat} <i class="fa-solid fa-chair"></i> + {stage.capacity.stand} <i class="fa-solid fa-person"></div> class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"
<div>{stage.name}</div> >
<div class="text-xs font-normal text-blue-web/60 mb-2.5">
{stage.capacity.seat} <i class="fa-solid fa-chair" /> + {stage
.capacity.stand} <i class="fa-solid fa-person" />
</div>
<div>{stage.name}</div>
</th> </th>
{/if} {/if}
{/each} {/each}
@ -317,7 +330,8 @@
{format( {format(
new Date(si.period.start), new Date(si.period.start),
"HH:mm" "HH:mm"
)}-{format(new Date(si.period.end), "HH:mm")} <span class="opacity-70">@{si.id}</span> )}-{format(new Date(si.period.end), "HH:mm")}
<span class="opacity-70">@{si.id}</span>
{#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname || {#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname ||
track.name}{/each}]{/if} track.name}{/each}]{/if}
</div> </div>

4
src/routes/mapa.svelte
Zobrazit soubor

@ -14,7 +14,5 @@
<section class="relative mx-auto py-6 sm:py-10 px-6 max-w-6xl text-blue-web"> <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">Mapa</h1> <h1 class="uppercase text-2xl font-bold">Mapa</h1>
<div class="mt-6"> <div class="mt-6">TBA</div>
TBA
</div>
</section> </section>

8
src/routes/prakticke.svelte
Zobrazit soubor

@ -18,9 +18,13 @@
<h1 class="uppercase text-2xl font-bold">Praktické informace</h1> <h1 class="uppercase text-2xl font-bold">Praktické informace</h1>
{#if bundle} {#if bundle}
{#each $bundle.spec['practical-info'] as item} {#each $bundle.spec["practical-info"] as item}
<div class="mt-8"> <div class="mt-8">
<div><a id={item.id} href="#{item.id}"><h2 class="text-xl uppercase font-bold">{item.name}</h2></div> <div>
<a id={item.id} href="#{item.id}"
><h2 class="text-xl uppercase font-bold">{item.name}</h2></a
>
</div>
<div class="mt-4"> <div class="mt-4">
<SvelteMarkdown source={item.text} {renderers} /> <SvelteMarkdown source={item.text} {renderers} />
</div> </div>

232
src/routes/program-candidates.svelte
Zobrazit soubor

@ -9,90 +9,98 @@
import { format, compareAsc, compareDesc } from "date-fns"; import { format, compareAsc, compareDesc } from "date-fns";
import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js"; import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js";
import { cs } from "date-fns/locale/index.js"; import { cs } from "date-fns/locale/index.js";
import { parsePeriod } from '$lib/periods.js'; import { parsePeriod } from "$lib/periods.js";
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
const renderers = { link: Link }; const renderers = { link: Link };
import Link from "$lib/Link.svelte"; import Link from "$lib/Link.svelte";
let scheduleTimesArr = null let scheduleTimesArr = null;
let stagesArr = null let stagesArr = null;
let planNumber = 0; let planNumber = 0;
$: plan = $bundle ? $bundle.spec["schedule-candidates"][planNumber] : null; $: plan = $bundle ? $bundle.spec["schedule-candidates"][planNumber] : null;
const params = { const params = {
time: { key: 'time' }, time: { key: "time" },
stage: { key: 'stage' }, stage: { key: "stage" },
desc: { key: 'showDescriptions', type: 'boolean' } desc: { key: "showDescriptions", type: "boolean" },
} };
let subs = [];
let subs = [] subs.push(
page.subscribe(() => {
subs.push(page.subscribe(() => { schedulePref.update((sp) => {
for (const upk of Object.keys(params)) {
schedulePref.update(sp => { const up = params[upk];
for (const upk of Object.keys(params)) { const _sp = $page.url.searchParams.get(upk);
const up = params[upk] if (up.type === "boolean") {
const _sp = $page.url.searchParams.get(upk) if (_sp !== undefined) {
if (up.type === 'boolean') { sp[up.key] = Boolean(_sp);
if (_sp !== undefined) { }
sp[up.key] = Boolean(_sp) } else {
sp[up.key] = _sp ? _sp : "all";
} }
} else {
sp[up.key] = _sp ? _sp : 'all'
} }
} return sp;
return sp });
}) })
})) );
onMount(async () => { onMount(async () => {
const bsub = bundle.subscribe((bundle) => { const bsub = bundle.subscribe((bundle) => {
scheduleTimesArr = scheduleTimes(bundle);
scheduleTimesArr = scheduleTimes(bundle) stagesArr = bundle.spec.stages;
stagesArr = bundle.spec.stages
const pref = {}; const pref = {};
//pref.stages = bundle.spec.stages.map((s) => s.id); //pref.stages = bundle.spec.stages.map((s) => s.id);
//pref.tracks = bundle.spec.tracks.map((s) => s.id); //pref.tracks = bundle.spec.tracks.map((s) => s.id);
//pref.times = scheduleTimesArr.map((s) => s.id); //pref.times = scheduleTimesArr.map((s) => s.id);
//schedulePref.set(pref); //schedulePref.set(pref);
}); });
subs.push(bsub) subs.push(bsub);
const pref = {} const pref = {};
let schedulePrefInicialized = null let schedulePrefInicialized = null;
const spsub = schedulePref.subscribe((sp) => { const spsub = schedulePref.subscribe((sp) => {
const updates = [] const updates = [];
updates.push([ 'time', sp.time === 'all' ? undefined : sp.time ]) updates.push(["time", sp.time === "all" ? undefined : sp.time]);
updates.push([ 'stage', sp.stage === 'all' ? undefined : sp.stage ]) updates.push(["stage", sp.stage === "all" ? undefined : sp.stage]);
updates.push([ 'desc', sp.showDescriptions === null || sp.showDescriptions === false || sp.showDescriptions === undefined ? undefined : true ]) updates.push([
"desc",
sp.showDescriptions === null ||
sp.showDescriptions === false ||
sp.showDescriptions === undefined
? undefined
: true,
]);
let target = '?' let target = "?";
if (updates.length > 0) { if (updates.length > 0) {
for (const up of updates) { for (const up of updates) {
if (up[1] === undefined && $page.url.searchParams.get(up[0]) !== undefined) { if (
$page.url.searchParams.delete(up[0]) up[1] === undefined &&
$page.url.searchParams.get(up[0]) !== undefined
) {
$page.url.searchParams.delete(up[0]);
} else { } else {
$page.url.searchParams.set(up[0], up[1]) $page.url.searchParams.set(up[0], up[1]);
} }
} }
target = `?${$page.url.searchParams.toString()}` target = `?${$page.url.searchParams.toString()}`;
} }
goto(target); goto(target);
return false return false;
}) });
subs.push(spsub) subs.push(spsub);
}); });
onDestroy(() => { onDestroy(() => {
for (const unsub of subs) { for (const unsub of subs) {
unsub() unsub();
} }
}) });
function filterDateStage(arr, date, stageId) { function filterDateStage(arr, date, stageId) {
return arr return arr
@ -129,7 +137,11 @@
rowspans[stage.id]--; rowspans[stage.id]--;
continue; continue;
} }
if (schedulePref && (schedulePref.stage !== stage.id && schedulePref.stage !== 'all')) { if (
schedulePref &&
schedulePref.stage !== stage.id &&
schedulePref.stage !== "all"
) {
continue; continue;
} }
let si = pl.schedule.find( let si = pl.schedule.find(
@ -185,15 +197,15 @@
function scheduleTimes(bundle, filter = false) { function scheduleTimes(bundle, filter = false) {
let arr = bundle.scheduleTimes.map((item, i) => { let arr = bundle.scheduleTimes.map((item, i) => {
const out = parsePeriod(bundle, item); const out = parsePeriod(bundle, item);
out.id = String(i) out.id = String(i);
return out return out;
}); });
if (filter) { if (filter) {
arr = arr.filter(st => st.id === filter || filter === 'all') arr = arr.filter((st) => st.id === filter || filter === "all");
} }
return arr return arr;
} }
function eventTrackClasses(bundle, ev, selectedTracks) { function eventTrackClasses(bundle, ev, selectedTracks) {
@ -203,35 +215,32 @@
return "border border-blue-web/50"; return "border border-blue-web/50";
} }
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);
const ystart = new Date(y.start) const ystart = new Date(y.start);
const yend = new Date(y.end) const yend = new Date(y.end);
return (xstart.getTime() < yend.getTime() && return (
xend.getTime() > ystart.getTime()); xstart.getTime() < yend.getTime() && xend.getTime() > ystart.getTime()
);
} }
function activeStages (bundle, stages, st, pl) { function activeStages(bundle, stages, st, pl) {
return stages.filter(stage => { return stages.filter((stage) => {
return Boolean(pl.schedule.filter(i => i.stage === stage.id).find(i => isPeriodOverlap(st.period, i.period)) return Boolean(
pl.schedule
) .filter((i) => i.stage === stage.id)
}) .find((i) => isPeriodOverlap(st.period, i.period))
);
});
} }
function allScheduleTimes (bundle) { function allScheduleTimes(bundle) {
return [ return [{ id: "all", name: "Všechny dny" }, ...scheduleTimes(bundle)];
{ id: 'all', name: 'Všechny dny' },
...scheduleTimes(bundle)
]
} }
function allStages (bundle) { function allStages(bundle) {
return [ return [{ id: "all", name: "Všechny sály" }, ...bundle.spec.stages];
{ id: 'all', name: 'Všechny sály' },
...bundle.spec.stages
]
} }
function makeSpoiler(_e) { function makeSpoiler(_e) {
@ -292,7 +301,12 @@
> >
{#each $bundle.spec["schedule-candidates"] as p, i} {#each $bundle.spec["schedule-candidates"] as p, i}
<option value={i} <option value={i}
>#{i} | {p.hash.substring(0,8)} [{["score", "thc:themeCrossing", "tgc:tagsCrossing", "exd:exclusivityDev"] >#{i} | {p.hash.substring(0, 8)} [{[
"score",
"thc:themeCrossing",
"tgc:tagsCrossing",
"exd:exclusivityDev",
]
.map((key) => { .map((key) => {
const [title, rkey] = key.split(":"); const [title, rkey] = key.split(":");
return `${title}:${ return `${title}:${
@ -308,7 +322,9 @@
</div> </div>
<h1 class="uppercase text-2xl font-bold mb-2">Program</h1> <h1 class="uppercase text-2xl font-bold mb-2">Program</h1>
<div class="mb-4"> <div class="mb-4">
<a href="/seznam-udalosti" class="underline hover:no-underline">Seznam všech událostí</a> <a href="/seznam-udalosti" class="underline hover:no-underline"
>Seznam všech událostí</a
>
</div> </div>
<div> <div>
{#if $bundle} {#if $bundle}
@ -316,9 +332,12 @@
<div class="flex gap-1 flex-wrap"> <div class="flex gap-1 flex-wrap">
<div class="font-semibold uppercase my-auto mx-3">Den</div> <div class="font-semibold uppercase my-auto mx-3">Den</div>
{#each allScheduleTimes($bundle) as st} {#each allScheduleTimes($bundle) as st}
<button class="{($schedulePref.time === st.id) ? 'bg-utxo-gradient text-white' : 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-bold py-2 px-4 rounded-full" <button
on:click={() => $schedulePref.time = st.id} class="{$schedulePref.time === st.id
>{st.name}</button> ? 'bg-utxo-gradient text-white'
: 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-bold py-2 px-4 rounded-full"
on:click={() => ($schedulePref.time = st.id)}>{st.name}</button
>
{/each} {/each}
</div> </div>
</div> </div>
@ -326,9 +345,12 @@
<div class="flex gap-1 flex-wrap"> <div class="flex gap-1 flex-wrap">
<div class="font-semibold uppercase my-auto mx-3">Sál</div> <div class="font-semibold uppercase my-auto mx-3">Sál</div>
{#each allStages($bundle) as et} {#each allStages($bundle) as et}
<button class="{($schedulePref.stage === et.id) ? 'bg-utxo-gradient text-white' : 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-bold py-1.5 px-3 rounded-full text-sm" <button
on:click={() => $schedulePref.stage = et.id} class="{$schedulePref.stage === et.id
>{et.name}</button> ? 'bg-utxo-gradient text-white'
: 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-bold py-1.5 px-3 rounded-full text-sm"
on:click={() => ($schedulePref.stage = et.id)}>{et.name}</button
>
<!--div class="u-choose-div m-0.5"> <!--div class="u-choose-div m-0.5">
<label class="cursor-pointer" <label class="cursor-pointer"
><input ><input
@ -347,7 +369,12 @@
</div> </div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label><input type="checkbox" bind:checked={$schedulePref.showDescriptions} /> Zobrazit popisy</label> <label
><input
type="checkbox"
bind:checked={$schedulePref.showDescriptions}
/> Zobrazit popisy</label
>
</div> </div>
<!--div class="mb-4"> <!--div class="mb-4">
@ -383,7 +410,6 @@
</div--> </div-->
{/if} {/if}
</div> </div>
</section> </section>
<section class="relative mx-auto pb-6 sm:pb-10 px-0 text-blue-web"> <section class="relative mx-auto pb-6 sm:pb-10 px-0 text-blue-web">
{#if $bundle} {#if $bundle}
@ -402,12 +428,21 @@
<table width="100%" class="table table-auto xl:table-fixed relative"> <table width="100%" class="table table-auto xl:table-fixed relative">
<thead class=""> <thead class="">
<tr> <tr>
<th class="xl:w-16 top-0 sticky bg-white uppercase text-sm px-0.5 text-custom-blue">{format(new Date(st.date), "iiiiii", { locale: cs })}<br />{format(new Date(st.date), "d.M.")}</th> <th
class="xl:w-16 top-0 sticky bg-white uppercase text-sm px-0.5 text-custom-blue"
>{format(new Date(st.date), "iiiiii", { locale: cs })}<br
/>{format(new Date(st.date), "d.M.")}</th
>
{#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage} {#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage}
{#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === 'all')} {#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === "all")}
<th class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"> <th
<div class="text-xs font-normal text-blue-web/60 mb-2.5">{stage.capacity.seat} <i class="fa-solid fa-chair"></i> + {stage.capacity.stand} <i class="fa-solid fa-person"></div> class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"
<div>{stage.name}</div> >
<div class="text-xs font-normal text-blue-web/60 mb-2.5">
{stage.capacity.seat} <i class="fa-solid fa-chair" /> + {stage
.capacity.stand} <i class="fa-solid fa-person" />
</div>
<div>{stage.name}</div>
</th> </th>
{/if} {/if}
{/each} {/each}
@ -422,7 +457,7 @@
height="60">{ds.title}</th height="60">{ds.title}</th
> >
{#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage} {#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage}
{#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === 'all')} {#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === "all")}
{#if ds.stages[stage.id] === undefined} {#if ds.stages[stage.id] === undefined}
<td /> <td />
{:else if ds.stages[stage.id] !== null} {:else if ds.stages[stage.id] !== null}
@ -441,13 +476,15 @@
{format( {format(
new Date(si.period.start), new Date(si.period.start),
"HH:mm" "HH:mm"
)}-{format(new Date(si.period.end), "HH:mm")} <span class="text-blue-web/80">@{si.id}</span> )}-{format(new Date(si.period.end), "HH:mm")}
<span class="text-blue-web/80">@{si.id}</span>
{#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname || {#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname ||
track.name}{/each}]{/if} track.name}{/each}]{/if}
</div> </div>
<div class="font-semibold mt-1"> <div class="font-semibold mt-1">
<a href="/udalosti?id={event.id}" class="hover:underline" <a
>{event.name}</a href="/udalosti?id={event.id}"
class="hover:underline">{event.name}</a
> >
</div> </div>
<div class="text-xs mt-1"> <div class="text-xs mt-1">
@ -458,11 +495,18 @@
</div> </div>
{#if event.description && $schedulePref.showDescriptions} {#if event.description && $schedulePref.showDescriptions}
{#each [makeSpoiler(event)] as spoiler} {#each [makeSpoiler(event)] as spoiler}
<div class="mt-2 overflow-hidden text-sm text-blue-web/90"> <div
<SvelteMarkdown source={spoiler.md} {renderers} /> class="mt-2 overflow-hidden text-sm text-blue-web/90"
>
<SvelteMarkdown
source={spoiler.md}
{renderers}
/>
{#if spoiler.stripped} {#if spoiler.stripped}
<div class="text-xs text-blue-web/60"> <div class="text-xs text-blue-web/60">
(<a href="/udalosti?id={event.id}">Zobrazit celý popis</a>) (<a href="/udalosti?id={event.id}"
>Zobrazit celý popis</a
>)
</div> </div>
{/if} {/if}
</div> </div>

275
src/routes/program.svelte
Zobrazit soubor

@ -9,90 +9,99 @@
import { format, compareAsc, compareDesc } from "date-fns"; import { format, compareAsc, compareDesc } from "date-fns";
import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js"; import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js";
import { cs } from "date-fns/locale/index.js"; import { cs } from "date-fns/locale/index.js";
import { parsePeriod } from '$lib/periods.js'; import { parsePeriod } from "$lib/periods.js";
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
import SvelteTooltip from "$lib/SvelteTooltip.svelte";
const renderers = { link: Link }; const renderers = { link: Link };
import Link from "$lib/Link.svelte"; import Link from "$lib/Link.svelte";
let scheduleTimesArr = null let scheduleTimesArr = null;
let stagesArr = null let stagesArr = null;
let planNumber = 0; let planNumber = 0;
$: plan = $bundle ? $bundle.spec.schedule : null; $: plan = $bundle ? $bundle.spec.schedule : null;
const params = { const params = {
time: { key: 'time' }, time: { key: "time" },
stage: { key: 'stage' }, stage: { key: "stage" },
desc: { key: 'showDescriptions', type: 'boolean' } desc: { key: "showDescriptions", type: "boolean" },
} };
let subs = [];
let subs = [] subs.push(
page.subscribe(() => {
subs.push(page.subscribe(() => { schedulePref.update((sp) => {
for (const upk of Object.keys(params)) {
schedulePref.update(sp => { const up = params[upk];
for (const upk of Object.keys(params)) { const _sp = $page.url.searchParams.get(upk);
const up = params[upk] if (up.type === "boolean") {
const _sp = $page.url.searchParams.get(upk) if (_sp !== undefined) {
if (up.type === 'boolean') { sp[up.key] = Boolean(_sp);
if (_sp !== undefined) { }
sp[up.key] = Boolean(_sp) } else {
sp[up.key] = _sp ? _sp : "all";
} }
} else {
sp[up.key] = _sp ? _sp : 'all'
} }
} return sp;
return sp });
}) })
})) );
onMount(async () => { onMount(async () => {
const bsub = bundle.subscribe((bundle) => { const bsub = bundle.subscribe((bundle) => {
scheduleTimesArr = scheduleTimes(bundle);
scheduleTimesArr = scheduleTimes(bundle) stagesArr = bundle.spec.stages;
stagesArr = bundle.spec.stages
const pref = {}; const pref = {};
//pref.stages = bundle.spec.stages.map((s) => s.id); //pref.stages = bundle.spec.stages.map((s) => s.id);
//pref.tracks = bundle.spec.tracks.map((s) => s.id); //pref.tracks = bundle.spec.tracks.map((s) => s.id);
//pref.times = scheduleTimesArr.map((s) => s.id); //pref.times = scheduleTimesArr.map((s) => s.id);
//schedulePref.set(pref); //schedulePref.set(pref);
}); });
subs.push(bsub) subs.push(bsub);
const pref = {} const pref = {};
let schedulePrefInicialized = null let schedulePrefInicialized = null;
const spsub = schedulePref.subscribe((sp) => { const spsub = schedulePref.subscribe((sp) => {
const updates = [] const updates = [];
updates.push([ 'time', sp.time === 'all' ? undefined : sp.time ]) updates.push(["time", sp.time === "all" ? undefined : sp.time]);
updates.push([ 'stage', sp.stage === 'all' ? undefined : sp.stage ]) updates.push(["stage", sp.stage === "all" ? undefined : sp.stage]);
updates.push([ 'desc', sp.showDescriptions === null || sp.showDescriptions === false || sp.showDescriptions === undefined ? undefined : true ]) updates.push([
"desc",
sp.showDescriptions === null ||
sp.showDescriptions === false ||
sp.showDescriptions === undefined
? undefined
: true,
]);
let target = '?' let target = "?";
if (updates.length > 0) { if (updates.length > 0) {
for (const up of updates) { for (const up of updates) {
if (up[1] === undefined && $page.url.searchParams.get(up[0]) !== undefined) { if (
$page.url.searchParams.delete(up[0]) up[1] === undefined &&
$page.url.searchParams.get(up[0]) !== undefined
) {
$page.url.searchParams.delete(up[0]);
} else { } else {
$page.url.searchParams.set(up[0], up[1]) $page.url.searchParams.set(up[0], up[1]);
} }
} }
target = `?${$page.url.searchParams.toString()}` target = `?${$page.url.searchParams.toString()}`;
} }
goto(target); goto(target);
return false return false;
}) });
subs.push(spsub) subs.push(spsub);
}); });
onDestroy(() => { onDestroy(() => {
for (const unsub of subs) { for (const unsub of subs) {
unsub() unsub();
} }
}) });
function filterDateStage(arr, date, stageId) { function filterDateStage(arr, date, stageId) {
return arr return arr
@ -129,7 +138,11 @@
rowspans[stage.id]--; rowspans[stage.id]--;
continue; continue;
} }
if (schedulePref && (schedulePref.stage !== stage.id && schedulePref.stage !== 'all')) { if (
schedulePref &&
schedulePref.stage !== stage.id &&
schedulePref.stage !== "all"
) {
continue; continue;
} }
let si = pl.find( let si = pl.find(
@ -185,26 +198,26 @@
function scheduleTimes(bundle, filter = false) { function scheduleTimes(bundle, filter = false) {
let arr = bundle.scheduleTimes.map((item, i) => { let arr = bundle.scheduleTimes.map((item, i) => {
const out = parsePeriod(bundle, item); const out = parsePeriod(bundle, item);
out.id = String(i) out.id = String(i);
switch (i) { switch (i) {
case 0: case 0:
out.code = 'sobota'; out.code = "sobota";
break break;
case 1: case 1:
out.code = 'sobota-party'; out.code = "sobota-party";
break break;
case 2: case 2:
out.code = 'nedele'; out.code = "nedele";
break break;
} }
return out return out;
}); });
if (filter) { if (filter) {
arr = arr.filter(st => st.id === filter || filter === 'all') arr = arr.filter((st) => st.id === filter || filter === "all");
} }
return arr return arr;
} }
function eventTrackClasses(bundle, ev, selectedTracks) { function eventTrackClasses(bundle, ev, selectedTracks) {
@ -214,35 +227,32 @@
return "border border-blue-web/50"; return "border border-blue-web/50";
} }
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);
const ystart = new Date(y.start) const ystart = new Date(y.start);
const yend = new Date(y.end) const yend = new Date(y.end);
return (xstart.getTime() < yend.getTime() && return (
xend.getTime() > ystart.getTime()); xstart.getTime() < yend.getTime() && xend.getTime() > ystart.getTime()
);
} }
function activeStages (bundle, stages, st, pl) { function activeStages(bundle, stages, st, pl) {
return stages.filter(stage => { return stages.filter((stage) => {
return Boolean(pl.filter(i => i.stage === stage.id).find(i => isPeriodOverlap(st.period, i.period)) return Boolean(
pl
) .filter((i) => i.stage === stage.id)
}) .find((i) => isPeriodOverlap(st.period, i.period))
);
});
} }
function allScheduleTimes (bundle) { function allScheduleTimes(bundle) {
return [ return [{ id: "all", name: "Všechny dny" }, ...scheduleTimes(bundle)];
{ id: 'all', name: 'Všechny dny' },
...scheduleTimes(bundle)
]
} }
function allStages (bundle) { function allStages(bundle) {
return [ return [{ id: "all", name: "Všechny sály" }, ...bundle.spec.stages];
{ id: 'all', name: 'Všechny sály' },
...bundle.spec.stages
]
} }
function makeSpoiler(_e) { function makeSpoiler(_e) {
@ -295,7 +305,12 @@
> >
<h1 class="uppercase text-2xl font-bold mb-2">Program</h1> <h1 class="uppercase text-2xl font-bold mb-2">Program</h1>
<div class="mb-4 utxo-program-head"> <div class="mb-4 utxo-program-head">
<a href="/seznam-udalosti">Seznam všech událostí</a>, PDF: <a href="https://pub.utxo.cz/22/pdf/sobota.pdf" target="_blank">sobota</a>, <a href="https://pub.utxo.cz/22/pdf/sobota-party.pdf" target="_blank">sobota (party)</a>, <a href="https://pub.utxo.cz/22/pdf/nedele.pdf" target="_blank">neděle</a> <a href="/seznam-udalosti">Seznam všech událostí</a>, PDF:
<a href="https://pub.utxo.cz/22/pdf/sobota.pdf" target="_blank">sobota</a>,
<a href="https://pub.utxo.cz/22/pdf/sobota-party.pdf" target="_blank"
>sobota (party)</a
>,
<a href="https://pub.utxo.cz/22/pdf/nedele.pdf" target="_blank">neděle</a>
</div> </div>
<div> <div>
{#if $bundle} {#if $bundle}
@ -303,9 +318,12 @@
<div class="flex gap-1 flex-wrap"> <div class="flex gap-1 flex-wrap">
<div class="font-semibold uppercase my-auto mx-3">Den</div> <div class="font-semibold uppercase my-auto mx-3">Den</div>
{#each allScheduleTimes($bundle) as st} {#each allScheduleTimes($bundle) as st}
<button class="{($schedulePref.time === st.id) ? 'bg-utxo-gradient text-white' : 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-semibold py-1 px-2 sm:py-2 sm:px-4 rounded-full" <button
on:click={() => $schedulePref.time = st.id} class="{$schedulePref.time === st.id
>{st.name}</button> ? 'bg-utxo-gradient text-white'
: 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-semibold py-1 px-2 sm:py-2 sm:px-4 rounded-full"
on:click={() => ($schedulePref.time = st.id)}>{st.name}</button
>
{/each} {/each}
</div> </div>
</div> </div>
@ -313,9 +331,12 @@
<div class="flex gap-1 flex-wrap"> <div class="flex gap-1 flex-wrap">
<div class="font-semibold uppercase my-auto mx-3">Sál</div> <div class="font-semibold uppercase my-auto mx-3">Sál</div>
{#each allStages($bundle) as et} {#each allStages($bundle) as et}
<button class="{($schedulePref.stage === et.id) ? 'bg-utxo-gradient text-white' : 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-semibold py-1 px-2 rounded-full text-sm" <button
on:click={() => $schedulePref.stage = et.id} class="{$schedulePref.stage === et.id
>{et.name}</button> ? 'bg-utxo-gradient text-white'
: 'text-blue-web bg-blue-web-light hover:text-[#E16A61] hover:bg-[#E16A61]/20'} font-semibold py-1 px-2 rounded-full text-sm"
on:click={() => ($schedulePref.stage = et.id)}>{et.name}</button
>
<!--div class="u-choose-div m-0.5"> <!--div class="u-choose-div m-0.5">
<label class="cursor-pointer" <label class="cursor-pointer"
><input ><input
@ -334,7 +355,12 @@
</div> </div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label><input type="checkbox" bind:checked={$schedulePref.showDescriptions} /> Zobrazit popisy</label> <label
><input
type="checkbox"
bind:checked={$schedulePref.showDescriptions}
/> Zobrazit popisy</label
>
</div> </div>
<!--div class="mb-4"> <!--div class="mb-4">
@ -370,12 +396,13 @@
</div--> </div-->
{/if} {/if}
</div> </div>
</section> </section>
<section class="relative mx-auto pb-6 sm:pb-10 px-0 text-blue-web"> <section class="relative mx-auto pb-6 sm:pb-10 px-0 text-blue-web">
{#if $bundle} {#if $bundle}
{#each scheduleTimes($bundle, $schedulePref.time) as st} {#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"> <div
class="max-w-6xl mx-auto px-6 mb-4 print:max-w-full break-before-page flex gap-3"
>
<h2 class="uppercase text-xl font-bold"> <h2 class="uppercase text-xl font-bold">
{#if st.name} {#if st.name}
{st.name} {st.name}
@ -383,20 +410,53 @@
{format(new Date(st.date), "iiii d.M.y", { locale: cs })} {format(new Date(st.date), "iiii d.M.y", { locale: cs })}
{/if} {/if}
</h2> </h2>
<div class="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"></i> PDF</a></div> <div class="inline-block ml-2 text-sm font-normal my-auto print:hidden">
<div class="flex-1 text-right hidden sm:block float-right text-blue-web/50">Zdrojová data: {format(new Date($bundle.time), 'd.M.y H:mm')}</div> <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-1 text-right hidden sm:block float-right text-blue-web/50"
>
Zdrojová data: {format(new Date($bundle.time), "d.M.y H:mm")}
</div>
</div> </div>
<div class="relative"> <div class="relative">
<div class="mt-4 mb-10 h-screen sm:h-auto overflow-scroll sm:overflow-clip"> <div
class="mt-4 mb-10 h-screen sm:h-auto overflow-scroll sm:overflow-clip"
>
<table width="100%" class="table table-auto xl:table-fixed relative"> <table width="100%" class="table table-auto xl:table-fixed relative">
<thead class=""> <thead class="">
<tr> <tr>
<th class="xl:w-16 top-0 sticky bg-white uppercase text-sm px-0.5 text-custom-blue">{format(new Date(st.date), "iiiiii", { locale: cs })}<br />{format(new Date(st.date), "d.M.")}</th> <th
class="xl:w-16 top-0 sticky bg-white uppercase text-sm px-0.5 text-custom-blue"
>{format(new Date(st.date), "iiiiii", { locale: cs })}<br
/>{format(new Date(st.date), "d.M.")}</th
>
{#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage} {#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage}
{#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === 'all')} {#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === "all")}
<th class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"> <th
<div class="text-xs font-normal text-blue-web/60 mb-2.5">{stage.capacity.seat} <i class="fa-solid fa-chair"></i> + {stage.capacity.stand} <i class="fa-solid fa-person"></div> class="text-md py-1.5 px-1 sticky top-0 bg-white align-bottom"
<div>{stage.name}</div> >
<div class="text-xs font-normal text-blue-web/60 mb-2.5">
{#if stage.livestream}<SvelteTooltip
tip={"Sál je náhrávaný a livestreamovaný."}
bottom="true"
><div class="inline-block mr-2 text-sm cursor-help">
<i class="fa-solid fa-video" />
</div></SvelteTooltip
>{/if}
{stage.capacity.seat} <i class="fa-solid fa-chair" /> + {stage
.capacity.stand} <i class="fa-solid fa-person" />
</div>
<div>
<a
href="/program?stage={stage.id}&time={$schedulePref.time}"
>{stage.name}</a
>
</div>
</th> </th>
{/if} {/if}
{/each} {/each}
@ -411,7 +471,7 @@
height="60">{ds.title}</th height="60">{ds.title}</th
> >
{#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage} {#each activeStages($bundle, $bundle.spec.stages, st, plan) as stage}
{#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === 'all')} {#if $schedulePref && ($schedulePref.stage === stage.id || $schedulePref.stage === "all")}
{#if ds.stages[stage.id] === undefined} {#if ds.stages[stage.id] === undefined}
<td /> <td />
{:else if ds.stages[stage.id] !== null} {:else if ds.stages[stage.id] !== null}
@ -430,13 +490,15 @@
{format( {format(
new Date(si.period.start), new Date(si.period.start),
"HH:mm" "HH:mm"
)}-{format(new Date(si.period.end), "HH:mm")} <span class="text-blue-web/80">@{si.id}</span> )}-{format(new Date(si.period.end), "HH:mm")}
<span class="text-blue-web/80">@{si.id}</span>
{#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname || {#if event.track}[{#each [$bundle.spec.tracks.find((t) => t.id === event.track)] as track}{track.shortname ||
track.name}{/each}]{/if} track.name}{/each}]{/if}
</div> </div>
<div class="font-bold mt-1"> <div class="font-bold mt-1">
<a href="/udalosti?id={event.id}" class="hover:underline" <a
>{event.name}</a href="/udalosti?id={event.id}"
class="hover:underline">{event.name}</a
> >
</div> </div>
<div class="text-xs mt-1"> <div class="text-xs mt-1">
@ -447,11 +509,18 @@
</div> </div>
{#if event.description && $schedulePref.showDescriptions} {#if event.description && $schedulePref.showDescriptions}
{#each [makeSpoiler(event)] as spoiler} {#each [makeSpoiler(event)] as spoiler}
<div class="mt-2 overflow-hidden text-sm text-blue-web/90"> <div
<SvelteMarkdown source={spoiler.md} {renderers} /> class="mt-2 overflow-hidden text-sm text-blue-web/90"
>
<SvelteMarkdown
source={spoiler.md}
{renderers}
/>
{#if spoiler.stripped} {#if spoiler.stripped}
<div class="text-xs text-blue-web/60"> <div class="text-xs text-blue-web/60">
(<a href="/udalosti?id={event.id}">Zobrazit celý popis</a>) (<a href="/udalosti?id={event.id}"
>Zobrazit celý popis</a
>)
</div> </div>
{/if} {/if}
</div> </div>

8
src/routes/seznam-udalosti.svelte
Zobrazit soubor

@ -160,10 +160,14 @@
</svelte:head> </svelte:head>
<section class="relative mx-auto py-6 sm:py-10 px-6 max-w-6xl text-blue-web"> <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"><a href="/program">Program</a> → Seznam událostí</h1> <h1 class="uppercase text-2xl font-bold">
<a href="/program">Program</a> → Seznam událostí
</h1>
<div class="mt-2"> <div class="mt-2">
<p> <p>
<a href="/program" class="underline hover:no-underline">Časový rozpis (program)</a> <a href="/program" class="underline hover:no-underline"
>Časový rozpis (program)</a
>
| <a href="/changelog" class="underline hover:no-underline">Changelog</a> | <a href="/changelog" class="underline hover:no-underline">Changelog</a>
</p> </p>
</div> </div>

351
src/routes/tv.svelte
Zobrazit soubor

@ -6,135 +6,146 @@
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 { 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";
import YouTube from '$lib/YouTube.svelte'; import YouTube from "$lib/YouTube.svelte";
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
import Link from "$lib/Link.svelte"; import Link from "$lib/Link.svelte";
import { scrollTo, scrollRef, scrollTop } from 'svelte-scrolling'; import { scrollTo, scrollRef, scrollTop } from "svelte-scrolling";
const renderers = { link: Link }; const renderers = { link: Link };
const YToptions = { const YToptions = {
playerVars: { playerVars: {
autoplay: 0 autoplay: 0,
} },
} };
const stageStatus = {} const stageStatus = {};
const stagePlayers = {} const stagePlayers = {};
let events = [] let events = [];
let cachedBundle = [] let cachedBundle = [];
function typeColor (type) { function typeColor(type) {
let color = null let color = null;
switch (type) { switch (type) {
case 'talk': case "talk":
color = 'bg-custom-green/70' color = "bg-custom-green/70";
break break;
case 'panel': case "panel":
color = 'bg-orange-400/70' color = "bg-orange-400/70";
break break;
case 'lightning-series': case "lightning-series":
color = 'bg-yellow-400/70' color = "bg-yellow-400/70";
break break;
case 'other': case "other":
color = 'bg-rose-400/70' color = "bg-rose-400/70";
break break;
} }
return color return color;
} }
bundle.subscribe(_bundle => { bundle.subscribe((_bundle) => {
events = _bundle.spec.schedule events = _bundle.spec.schedule;
cachedBundle = _bundle cachedBundle = _bundle;
genStatus(cachedBundle) genStatus(cachedBundle);
}) });
let interval = null let interval = null;
onMount(() => { onMount(() => {
interval = setInterval(() => { interval = setInterval(() => {
genStatus(cachedBundle) genStatus(cachedBundle);
}, 5000) }, 5000);
}) });
onDestroy(() => { onDestroy(() => {
clearInterval(interval) clearInterval(interval);
}) });
function startStream (stageId) { function startStream(stageId) {
const player = stagePlayers[stageId] const player = stagePlayers[stageId];
if (!player) { if (!player) {
return null return null;
} }
player.playVideo() player.playVideo();
} }
function youtubePlayed (stageId) { function youtubePlayed(stageId) {
for (const pi of Object.keys(stagePlayers)) { for (const pi of Object.keys(stagePlayers)) {
if (pi !== stageId) { if (pi !== stageId) {
console.log(`stopping player: ${pi}`) console.log(`stopping player: ${pi}`);
stagePlayers[pi].stopVideo() stagePlayers[pi].stopVideo();
} }
} }
} }
function findSpeaker (sp, _bundle) { function findSpeaker(sp, _bundle) {
return _bundle.spec.speakers.find(s => s.id === sp) return _bundle.spec.speakers.find((s) => s.id === sp);
} }
function extendEvents (arr, _bundle) { function extendEvents(arr, _bundle) {
for (const ev of arr) { for (const ev of arr) {
ev._event = _bundle.spec.events.find(e => e.id === ev.event) ev._event = _bundle.spec.events.find((e) => e.id === ev.event);
} }
return arr return arr;
} }
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-04T${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) => {
return new Date(ev.period.end).getTime() > now.getTime() return new Date(ev.period.end).getTime() > now.getTime();
}) });
const stages = _bundle.spec.stages const stages = _bundle.spec.stages;
for (const stage of stages.filter(s => s.livestream)) { for (const stage of stages.filter((s) => s.livestream)) {
let nextEvents = [...globalNextEvents.filter(e => e.stage === stage.id)] let nextEvents = [
let current = null ...globalNextEvents.filter((e) => e.stage === stage.id),
if (nextEvents.length > 0 && new Date(nextEvents[0].period.start).getTime() <= now.getTime()) { ];
current = nextEvents[0] let current = null;
nextEvents = nextEvents.slice(1) if (
nextEvents.length > 0 &&
new Date(nextEvents[0].period.start).getTime() <= now.getTime()
) {
current = nextEvents[0];
nextEvents = nextEvents.slice(1);
} }
const allStreams = stage.streams.map(st => parsePeriod(_bundle, st)) const allStreams = stage.streams.map((st) => parsePeriod(_bundle, st));
const nextStreams = allStreams.filter(s => s.period.end.getTime() >= now.getTime()) const nextStreams = allStreams.filter(
(s) => s.period.end.getTime() >= now.getTime()
);
if (nextStreams.length === 0) { if (nextStreams.length === 0) {
nextStreams.push(allStreams[allStreams.length-1]) nextStreams.push(allStreams[allStreams.length - 1]);
} }
let currentPercentage = null let currentPercentage = null;
if (current) { if (current) {
let duration = (new Date(current.period.end).getTime() - new Date(current.period.start).getTime()) / 1000 let duration =
let elapsed = Math.floor((now.getTime() - new Date(current.period.start).getTime()) / 1000) (new Date(current.period.end).getTime() -
currentPercentage = elapsed/(duration/100) new Date(current.period.start).getTime()) /
1000;
let elapsed = Math.floor(
(now.getTime() - new Date(current.period.start).getTime()) / 1000
);
currentPercentage = elapsed / (duration / 100);
} }
const day = format(new Date(nextStreams[0].period.start), 'yyyy-MM-dd') const day = format(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;
} }
const scheduleLink = `/program?time=${ctime}&stage=${stage.id}&desc=true` const scheduleLink = `/program?time=${ctime}&stage=${stage.id}&desc=true`;
stageStatus[stage.id] = { stageStatus[stage.id] = {
current: current ? extendEvents([current], _bundle)[0] : null, current: current ? extendEvents([current], _bundle)[0] : null,
currentPercentage, currentPercentage,
next: extendEvents(nextEvents.slice(0,2), _bundle), next: extendEvents(nextEvents.slice(0, 2), _bundle),
stream: nextStreams[0], stream: nextStreams[0],
scheduleLink scheduleLink,
} };
} }
console.log(stageStatus) console.log(stageStatus);
} }
function makeSpoiler(_e) { function makeSpoiler(_e) {
@ -157,20 +168,55 @@
<div class="w-full h-full bg-blue-web-bg/90"> <div class="w-full h-full bg-blue-web-bg/90">
{#if $bundle} {#if $bundle}
<div class="px-16 py-4"> <div class="px-16 py-4">
<div class="flex w-full justify-center lg:pt-6 text-white gap-4 flex-wrap lg:flex-nowrap"> <div
{#each $bundle.spec.stages.filter(s => s.livestream) as stage, i} class="flex w-full justify-center lg:pt-6 text-white gap-4 flex-wrap lg:flex-nowrap"
<div class="w-full md:w-1/3 lg:w-1/4 px-6 py-4 bg-blue-web-bg/70 hover:bg-blue-web-bg rounded-2xl text-center cursor-pointer transition-all shadow-xl" use:scrollTo={stage.id} on:click={() => startStream(stage.id)}> >
<div class="uppercase font-semibold text-white text-lg">#{i+1} {stage.name}</div> {#each $bundle.spec.stages.filter((s) => s.livestream) as stage, i}
<div
class="w-full md:w-1/3 lg:w-1/4 px-6 py-4 bg-blue-web-bg/70 hover:bg-blue-web-bg rounded-2xl text-center cursor-pointer transition-all shadow-xl"
use:scrollTo={stage.id}
on:click={() => startStream(stage.id)}
>
<div class="uppercase font-semibold text-white text-lg">
#{i + 1}
{stage.name}
</div>
<div class="mt-2 text-sm"> <div class="mt-2 text-sm">
{#each [stageStatus[stage.id]] as ss} {#each [stageStatus[stage.id]] as ss}
{#if ss.current} {#if ss.current}
<div class="text-center mb-2"><span class="uppercase text-xs mr-2 text-white/70"></span> <EventTypeLabel event={ss.current._event} black={true} /></div> <div class="text-center mb-2">
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mt-4 mb-2 transition-all"> <span class="uppercase text-xs mr-2 text-white/70" />
<div class="{typeColor(ss.current._event.type)} h-2 rounded-full" style="width: {ss.currentPercentage}%"></div> <EventTypeLabel event={ss.current._event} black={true} />
</div>
<div
class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mt-4 mb-2 transition-all"
>
<div
class="{typeColor(
ss.current._event.type
)} h-2 rounded-full"
style="width: {ss.currentPercentage}%"
/>
</div>
<div>
<span class="text-white/70"
>{format(
new Date(ss.current.period.start),
"HH:mm"
)}-{format(
new Date(ss.current.period.end),
"HH:mm"
)}</span
>
{ss.current._event.name}
</div> </div>
<div><span class="text-white/70">{format(new Date(ss.current.period.start), 'HH:mm')}-{format(new Date(ss.current.period.end), 'HH:mm')}</span> {ss.current._event.name}</div>
{:else} {:else}
<span class="italic">☕ Přestávka {#if ss.next[0]}do {format(new Date(ss.next[0].period.start), 'HH:mm')}{/if}</span> <span class="italic"
>☕ Přestávka {#if ss.next[0]}do {format(
new Date(ss.next[0].period.start),
"HH:mm"
)}{/if}</span
>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -179,31 +225,92 @@
</div> </div>
</div> </div>
<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 use:scrollRef={stage.id} id="{stage.id}" class="mb-8 bg-blue-web-bg/90 p-4 rounded-lg shadow-xl"> <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"> <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></h1> <h1 class="uppercase text-2xl font-bold">
<div class="my-auto mt-2 md:mt-0 text-sm flex-1 md:text-right"><a href={stageStatus[stage.id].scheduleLink} class="hover:underline" target="_blank">Program tohoto sálu ({stage.name})</a></div> <a use:scrollTo={stage.id} on:click={() => startStream(stage.id)}
>Stream #{i + 1} - {stage.name}</a
>
</h1>
<div class="my-auto mt-2 md:mt-0 text-sm flex-1 md:text-right">
<a
href={stageStatus[stage.id].scheduleLink}
class="hover:underline"
target="_blank">Program tohoto sálu ({stage.name})</a
>
</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>
<YouTube videoId={stageStatus[stage.id].stream.name} class="bg-blue-web-bg/60" id="player-{stage.id}" options={Object.assign({}, YToptions)} bind:player={stagePlayers[stage.id]} on:play={() => youtubePlayed(stage.id)} /> <YouTube
videoId={stageStatus[stage.id].stream.name}
class="bg-blue-web-bg/60"
id="player-{stage.id}"
options={Object.assign({}, YToptions)}
bind:player={stagePlayers[stage.id]}
on:play={() => youtubePlayed(stage.id)}
/>
</div> </div>
<div class="pr-2 w-full"> <div class="pr-2 w-full">
{#each [stageStatus[stage.id]] as ss} {#each [stageStatus[stage.id]] as ss}
<div> <div>
{#if ss.current} {#if ss.current}
<div class="uppercase text-xs mb-2 font-semibold flex flex-wrap gap-2"> <div
class="uppercase text-xs mb-2 font-semibold flex flex-wrap gap-2"
>
<div class="my-auto whitespace-nowrap">Právě probíhá</div> <div class="my-auto whitespace-nowrap">Právě probíhá</div>
<div class="my-auto"><EventTypeLabel event={ss.current._event} black={true} /></div> <div class="my-auto">
<EventTypeLabel
event={ss.current._event}
black={true}
/>
</div>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700 mb-3 mt-3"> <div
<div class="{typeColor(ss.current._event.type)} h-3 rounded-full transition-all" style="width: {ss.currentPercentage}%"></div> class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700 mb-3 mt-3"
>
<div
class="{typeColor(
ss.current._event.type
)} h-3 rounded-full transition-all"
style="width: {ss.currentPercentage}%"
/>
</div>
<div class="text-xl">
<span class="text-white/70"
>{format(
new Date(ss.current.period.start),
"HH:mm"
)}-{format(
new Date(ss.current.period.end),
"HH:mm"
)}</span
>
<a
href="/udalosti?id={ss.current.event}"
class="hover:underline"
target="_blank">{ss.current._event.name}</a
>
</div> </div>
<div class="text-xl"><span class="text-white/70">{format(new Date(ss.current.period.start), 'HH:mm')}-{format(new Date(ss.current.period.end), 'HH:mm')}</span> <a href="/udalosti?id={ss.current.event}" class="hover:underline" target="_blank">{ss.current._event.name}</a></div>
<div class="flex flex-wrap mt-2 gap-3"> <div class="flex flex-wrap mt-2 gap-3">
{#each ss.current._event.speakers.map(sp => findSpeaker(sp, $bundle)) as speaker} {#each ss.current._event.speakers.map( (sp) => findSpeaker(sp, $bundle) ) as speaker}
<div class="flex gap-2"><Avatar speaker={speaker} size="extra-small" /><div><a href="/lide?id={speaker.id}" target="_blank" class="hover:underline">{speaker.name} {#if speaker.nickname}({speaker.nickname}){/if}</a></div></div> <div class="flex gap-2">
<Avatar {speaker} size="extra-small" />
<div>
<a
href="/lide?id={speaker.id}"
target="_blank"
class="hover:underline"
>{speaker.name}
{#if speaker.nickname}({speaker.nickname}){/if}</a
>
</div>
</div>
{/each} {/each}
</div> </div>
{#if ss.current._event.description} {#if ss.current._event.description}
@ -212,26 +319,62 @@
<SvelteMarkdown source={spoiler.md} {renderers} /> <SvelteMarkdown source={spoiler.md} {renderers} />
{#if spoiler.stripped} {#if spoiler.stripped}
<div class="text-sm text-white/30"> <div class="text-sm text-white/30">
(<a href="/udalosti?id={ss.current.event}" target="_blank">Zobrazit celý popis</a>) (<a
href="/udalosti?id={ss.current.event}"
target="_blank">Zobrazit celý popis</a
>)
</div> </div>
{/if} {/if}
</div> </div>
{/each} {/each}
{/if} {/if}
<div class="text-sm mt-3 text-white/50">{@html ss.current._event.tags.map(t => `<a href="/seznam-udalosti?tag=${t}" target="_blank" class="hover:underline">#${t}</a>`).join(' ')}</div> <div class="text-sm mt-3 text-white/50">
{@html ss.current._event.tags
.map(
(t) =>
`<a href="/seznam-udalosti?tag=${t}" target="_blank" class="hover:underline">#${t}</a>`
)
.join(" ")}
</div>
{:else} {:else}
<div class="text-xl italic">☕ Přestávka {#if ss.next[0]}do {format(new Date(ss.next[0].period.start), 'HH:mm')}{/if}</div> <div class="text-xl italic">
☕ Přestávka {#if ss.next[0]}do {format(
new Date(ss.next[0].period.start),
"HH:mm"
)}{/if}
</div>
{/if} {/if}
</div> </div>
{/each} {/each}
<div class="uppercase text-xs mb-2 font-semibold mt-6"><a href="{stageStatus[stage.id].scheduleLink}" target="_blank">Následuje</div> <div class="uppercase text-xs mb-2 font-semibold mt-6">
<a href={stageStatus[stage.id].scheduleLink} target="_blank"
>Následuje</a
>
</div>
<div class="text-sm 2xl:text-base"> <div class="text-sm 2xl:text-base">
{#each stageStatus[stage.id].next as ne} {#each stageStatus[stage.id].next as ne}
<div><span class="text-white/70">{format(new Date(ne.period.start), 'HH:mm')}-{format(new Date(ne.period.end), 'HH:mm')}</span> <a href="/udalosti?id={ne.event}" target="_blank" class="hover:underline">{ne._event.name}</a></div> <div>
<span class="text-white/70"
>{format(new Date(ne.period.start), "HH:mm")}-{format(
new Date(ne.period.end),
"HH:mm"
)}</span
>
<a
href="/udalosti?id={ne.event}"
target="_blank"
class="hover:underline">{ne._event.name}</a
>
</div>
{/each} {/each}
</div> </div>
<div class="mt-2 text-xs"><a href="{stageStatus[stage.id].scheduleLink}" class="hover:underline" target="_blank">Zobrazit následující program v tomto sále</a></div> <div class="mt-2 text-xs">
<a
href={stageStatus[stage.id].scheduleLink}
class="hover:underline"
target="_blank">Zobrazit následující program v tomto sále</a
>
</div>
</div> </div>
</div> </div>
</div> </div>

8
src/routes/udalosti.svelte
Zobrazit soubor

@ -15,16 +15,18 @@
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
import Link from "$lib/Link.svelte"; import Link from "$lib/Link.svelte";
import Paragraph from "$lib/Paragraph.svelte"; import Paragraph from "$lib/Paragraph.svelte";
import EventSchedule from '$lib/EventSchedule.svelte'; import EventSchedule from "$lib/EventSchedule.svelte";
const renderers = { link: Link, paragraph: Paragraph }; const renderers = { link: Link, paragraph: Paragraph };
$: id = getId($page.url.search); $: id = getId($page.url.search);
$: e = $bundle ? $bundle.spec.events.find((ev) => ev.id === id) : null; $: e = $bundle ? $bundle.spec.events.find((ev) => ev.id === id) : null;
$: duration = e ? calcDuration(e, $bundle) : null; $: duration = e ? calcDuration(e, $bundle) : null;
$: childrens = e ? $bundle.spec.events.filter((i) => i.parent === e.id) : [] $: childrens = e ? $bundle.spec.events.filter((i) => i.parent === e.id) : [];
$: schedule = $bundle ? $bundle.spec.schedule.find(s => s.event === id) : null $: schedule = $bundle
? $bundle.spec.schedule.find((s) => s.event === id)
: null;
function getId(search) { function getId(search) {
const searchParams = new URLSearchParams(search); const searchParams = new URLSearchParams(search);

55
src/routes/vstupenky.svelte
Zobrazit soubor

@ -637,9 +637,11 @@
Platební metoda: <span class="font-bold" Platební metoda: <span class="font-bold"
>{$apiStatus.config.paymentMethods.find( >{$apiStatus.config.paymentMethods.find(
(pm) => pm.id === order.paymentMethod (pm) => pm.id === order.paymentMethod
) ? $apiStatus.config.paymentMethods.find( )
(pm) => pm.id === order.paymentMethod ? $apiStatus.config.paymentMethods.find(
).shortname : 'null (?)'}</span (pm) => pm.id === order.paymentMethod
).shortname
: "null (?)"}</span
> >
</div> </div>
</div> </div>
@ -949,31 +951,34 @@
<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">Platba pomocí BTC není dočasně k dispozici, zkuste to prosím později. Omlouváme se :(</div> <div class="mb-4 text-sm">
Platba pomocí BTC není dočasně k dispozici, zkuste to
prosím později. Omlouváme se :(
</div>
{/if} {/if}
{#each $apiStatus.config.paymentMethods as pm} {#each $apiStatus.config.paymentMethods as pm}
{#if !pm.hidden} {#if !pm.hidden}
<div class="mb-2"> <div class="mb-2">
<label class="cursor-pointer" <label class="cursor-pointer"
><input ><input
checked={$orderTicketForm.paymentMethod === pm.id} checked={$orderTicketForm.paymentMethod === pm.id}
name="paymentMethod" name="paymentMethod"
value={pm.id} value={pm.id}
type="radio" type="radio"
on:change={selectPaymentMethod} on:change={selectPaymentMethod}
class="cursor-pointer" class="cursor-pointer"
/> />
{pm.name} {pm.name}
{#if pm.id === "btcpay"}<span class="ml-4 text-xs" {#if pm.id === "btcpay"}<span class="ml-4 text-xs"
><i class="fas fa-heart text-red-500" /> Doporučujeme</span ><i class="fas fa-heart text-red-500" /> Doporučujeme</span
>{/if} >{/if}
{#if pm.id === "card"}<img {#if pm.id === "card"}<img
src="/img/credit-card-logos.png" src="/img/credit-card-logos.png"
class="h-6 leading-7 inline ml-2" class="h-6 leading-7 inline ml-2"
/>{/if} />{/if}
</label> </label>
</div> </div>
{/if} {/if}
{/each} {/each}
</div> </div>

2
src/routes/vyzvednuti-vstupenky.svelte
Zobrazit soubor

@ -77,7 +77,7 @@
}, },
partner: { title: "Partner", hostTitle: "Host partnera", col: "partners" }, partner: { title: "Partner", hostTitle: "Host partnera", col: "partners" },
host: { title: "Host" }, host: { title: "Host" },
team: { title: "Team", hostTitle: "Host organizátora" } team: { title: "Team", hostTitle: "Host organizátora" },
}; };
function makeTicketTypeInfo(c) { function makeTicketTypeInfo(c) {