Update schedule UX
This commit is contained in:
rodič
8dd60b38c9
revize
05be230911
|
@ -29,3 +29,7 @@ export const layouts = writable({ test: null })
|
||||||
|
|
||||||
export const loadInfo = writable({ loaded: false })
|
export const loadInfo = writable({ loaded: false })
|
||||||
|
|
||||||
|
export const schedulePref = writable({
|
||||||
|
stages: [],
|
||||||
|
tracks: []
|
||||||
|
});
|
||||||
|
|
|
@ -5,20 +5,31 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import { bundle, userData, loadInfo } from "$lib/stores.js";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import { format, compareAsc } from "date-fns"
|
import { format, compareAsc } from "date-fns"
|
||||||
|
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";
|
||||||
|
|
||||||
let planNumber = 0
|
let planNumber = 0
|
||||||
$: plan = $bundle ? $bundle.spec['schedule-candidates'][planNumber] : null
|
$: plan = $bundle ? $bundle.spec['schedule-candidates'][planNumber] : null
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
|
||||||
|
bundle.subscribe(bundle => {
|
||||||
|
const pref = {}
|
||||||
|
pref.stages = bundle.spec.stages.map(s => s.id)
|
||||||
|
pref.tracks = bundle.spec.tracks.map(s => s.id)
|
||||||
|
schedulePref.set(pref)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
function filterDateStage (arr, date, stageId) {
|
function filterDateStage (arr, date, stageId) {
|
||||||
return arr
|
return arr
|
||||||
.filter(i => i.date === date)
|
.filter(i => i.date === date)
|
||||||
.filter(i => i.stage === stageId)
|
.filter(i => i.stage === stageId)
|
||||||
}
|
}
|
||||||
|
|
||||||
function dateSlots (pl, period, bundle) {
|
function dateSlots (pl, period, bundle, schedulePref = null) {
|
||||||
let time = period.start
|
let time = period.start
|
||||||
const endTime = period.end
|
const endTime = period.end
|
||||||
const arr = []
|
const arr = []
|
||||||
|
@ -32,7 +43,9 @@
|
||||||
rowspans[stage.id]--
|
rowspans[stage.id]--
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
if (schedulePref && !schedulePref.stages.includes(stage.id)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
const si = pl.schedule.find(pi => (new Date(pi.period.start).getTime() === new Date(time).getTime()) && pi.stage === stage.id)
|
const si = pl.schedule.find(pi => (new Date(pi.period.start).getTime() === new Date(time).getTime()) && pi.stage === stage.id)
|
||||||
stages[stage.id] = si
|
stages[stage.id] = si
|
||||||
if (si) {
|
if (si) {
|
||||||
|
@ -75,6 +88,13 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function eventTrackClasses (bundle, ev, selectedTracks) {
|
||||||
|
if (!selectedTracks.includes(ev.track || '')) {
|
||||||
|
return 'opacity-20'
|
||||||
|
}
|
||||||
|
return 'border border-blue-web/50'
|
||||||
|
}
|
||||||
|
|
||||||
function findEvent (bundle, eventId) {
|
function findEvent (bundle, eventId) {
|
||||||
const ev = bundle.spec.events.find(ev => ev.id === eventId)
|
const ev = bundle.spec.events.find(ev => ev.id === eventId)
|
||||||
if (!ev) {
|
if (!ev) {
|
||||||
|
@ -108,52 +128,69 @@
|
||||||
<title>Časová osa | UTXO.22</title>
|
<title>Časová osa | UTXO.22</title>
|
||||||
</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 pt-6 sm:pt-10 pb-6 px-6 max-w-6xl text-blue-web">
|
||||||
<h1 class="uppercase text-2xl font-bold">Časová osa</h1>
|
<h1 class="uppercase text-2xl font-bold mb-6">Časová osa</h1>
|
||||||
{#if $bundle}
|
{#if $bundle}
|
||||||
<div class="">
|
<div class="font-semibold uppercase mb-1">Plán (řešení)</div>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<select class="border border-blue-web rounded-md p-1.5 text-blue-web bg-white" bind:value={planNumber}>
|
||||||
{#each $bundle.spec['schedule-candidates'] as p, i}
|
{#each $bundle.spec['schedule-candidates'] as p, i}
|
||||||
<div>
|
<option value={i}>plan-{i} [{[ 'score', 'thc:themeCrossing', 'tgc:tagsCrossing' ].map(key => { const [title,rkey] = key.split(':'); return `${title}:${Math.round(p.metrics[rkey || title]*1000)/1000}` }).join(', ')}]</option>
|
||||||
<a href="#" class="hover:underline" on:click={() => planNumber = i}>Plán {i}</a>
|
|
||||||
<span class="text-sm">[{[ 'score', 'themeCrossing', 'tagsCrossing' ].map(key => { return `${key}=${Math.round(p.metrics[key]*1000)/1000}` }).join(', ')}]</span>
|
|
||||||
</div>
|
|
||||||
{/each}
|
{/each}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="mt-4">Current plan: {planNumber}</div>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="relative mx-auto pb-6 sm:pb-10 px-6 text-blue-web">
|
<section class="relative mx-auto pb-6 sm:pb-10 px-6 text-blue-web">
|
||||||
{#if $bundle}
|
{#if $bundle}
|
||||||
<div class="font-semibold uppercase mb-1">Kategorie</div>
|
<div class="max-w-6xl mx-auto px-6 mb-10">
|
||||||
<!--div class="flex gap-2 flex-wrap">
|
<div class="">
|
||||||
{#each $bundle.spec.tracks as et}
|
<div class="font-semibold uppercase mb-1">Sál / Místo</div>
|
||||||
<div class="m-1"><label><input type="checkbox" /> {et.shortname || et.name}</label></div>
|
<div class="flex gap-1 flex-wrap">
|
||||||
|
<div class="m-0.5"><a href="#" class="hover:underline" on:click={() => $schedulePref.stages = $bundle.spec.stages.map(s => s.id)}>Všechny sály</a></div>
|
||||||
|
{#each $bundle.spec.stages as et}
|
||||||
|
<div class="u-choose-div m-0.5"><label class="cursor-pointer"><input type="checkbox" bind:group={$schedulePref.stages} value={et.id} /></label> <span class="cursor-pointer" on:click={() => $schedulePref.stages = [et.id]}>{et.name}</span></div>
|
||||||
{/each}
|
{/each}
|
||||||
</div-->
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<div class="font-semibold uppercase mb-1">Kategorie</div>
|
||||||
|
<div class="flex gap-2 flex-wrap">
|
||||||
|
<div class="m-0.5"><a href="#" class="hover:underline" on:click={() => $schedulePref.tracks = $bundle.spec.tracks.map(s => s.id)}>Všechny kategorie</a></div>
|
||||||
|
{#each $bundle.spec.tracks as et}
|
||||||
|
<div class="u-choose-div m-0.5"><label class="cursor-pointer"><input type="checkbox" bind:group={$schedulePref.tracks} value={et.id} /></label> <span class="cursor-pointer" on:click={() => $schedulePref.tracks = [et.id]}> {et.shortname || et.name}</span></div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{#each scheduleTimes($bundle) as st}
|
{#each scheduleTimes($bundle) as st}
|
||||||
<div class="mt-4 mb-10">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 mb-4">
|
<div class="max-w-6xl mx-auto px-6 mb-4">
|
||||||
<h2 class="uppercase text-xl font-bold">{format(new Date(st.date), 'iiii d.M.y', { locale: cs })}</h2>
|
<h2 class="uppercase text-xl font-bold">{format(new Date(st.date), 'iiii d.M.y', { locale: cs })}</h2>
|
||||||
</div>
|
</div>
|
||||||
<table width="100%" class="table table-auto">
|
<div class="relative">
|
||||||
|
<div class="mt-4 mb-10">
|
||||||
|
<table width="100%" class="table table-auto relative">
|
||||||
<thead class="">
|
<thead class="">
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th></th>
|
||||||
{#each $bundle.spec.stages as stage}
|
{#each $bundle.spec.stages as stage}
|
||||||
<th class="text-md py-1.5 px-1">{stage.name}</th>
|
{#if $schedulePref && $schedulePref.stages.includes(stage.id)}
|
||||||
|
<th class="text-md py-1.5 px-1 sticky top-0 bg-white">{stage.name}</th>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each dateSlots(plan, st.period, $bundle) as ds}
|
{#each dateSlots(plan, st.period, $bundle, $schedulePref) as ds}
|
||||||
<tr>
|
<tr class="bg-gray-100">
|
||||||
<th valign="top" class="pr-2 pt-1 text-sm" height="70">{ds.title}</th>
|
<th valign="top" class="pr-2 pt-1 text-sm sticky left-0 bg-white" height="125">{ds.title}</th>
|
||||||
{#each $bundle.spec.stages as stage}
|
{#each $bundle.spec.stages as stage}
|
||||||
|
{#if $schedulePref && $schedulePref.stages.includes(stage.id)}
|
||||||
{#if ds.stages[stage.id] === undefined}
|
{#if ds.stages[stage.id] === undefined}
|
||||||
<td class="bg-gray-200/70"></td>
|
<td></td>
|
||||||
{:else if ds.stages[stage.id] !== null}
|
{:else if ds.stages[stage.id] !== null}
|
||||||
{#each [[ds.stages[stage.id], findEvent($bundle, ds.stages[stage.id].event)]] as [si, event]}
|
{#each [[ds.stages[stage.id], findEvent($bundle, ds.stages[stage.id].event)]] as [si, event]}
|
||||||
<td class="text-sm h-full {event.color} border border-blue-web/50" valign="top" rowspan={ds.stages[stage.id].span}>
|
<td class="text-sm h-full {event.color} {eventTrackClasses($bundle, event, $schedulePref.tracks)}" valign="top" rowspan={ds.stages[stage.id].span}>
|
||||||
<div class="px-2 py-1 mb-1 mt-1">
|
<div class="px-2 py-1 mb-1 mt-1">
|
||||||
<div class="text-xs">{format(new Date(si.period.start), 'HH:mm')}-{format(new Date(si.period.end), 'HH:mm')} {#if event.track}[{event.track}]{/if}</div>
|
<div class="text-xs">{format(new Date(si.period.start), 'HH:mm')}-{format(new Date(si.period.end), 'HH:mm')} {#if event.track}[{event.track}]{/if}</div>
|
||||||
<div class="font-semibold mt-1"><a href="/udalosti?id={event.id}">{event.name}</a></div>
|
<div class="font-semibold mt-1"><a href="/udalosti?id={event.id}">{event.name}</a></div>
|
||||||
|
@ -164,6 +201,7 @@
|
||||||
</td>
|
</td>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
<!--th valign="top" class="pl-2 pt-1 text-sm" height="70">{ds.title}</th-->
|
<!--th valign="top" class="pl-2 pt-1 text-sm" height="70">{ds.title}</th-->
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -171,8 +209,12 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
Načítám ..
|
Načítám ..
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu