Update schedule UX

src/lib/stores.js

@@ -29,3 +29,7 @@ export const layouts = writable({ test: null })
 
 export const loadInfo = writable({ loaded: false })
 
+export const schedulePref = writable({
+  stages: [],
+  tracks: []
+});

src/routes/casova-osa.svelte

@@ -5,20 +5,31 @@
 
 <script>
 
-  import { bundle, userData, loadInfo } from "$lib/stores.js";
+  import { onMount, onDestroy } from "svelte";
   import { format, compareAsc } from "date-fns"
+  import { bundle, userData, loadInfo, schedulePref } from "$lib/stores.js";
   import { cs } from "date-fns/locale/index.js";
 
   let planNumber = 0
   $: 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) {
     return arr
       .filter(i => i.date === date)
       .filter(i => i.stage === stageId)
   }
 
-  function dateSlots (pl, period, bundle) {
+  function dateSlots (pl, period, bundle, schedulePref = null) {
     let time = period.start
     const endTime = period.end
     const arr = []
@@ -32,7 +43,9 @@
           rowspans[stage.id]--
           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)
         stages[stage.id] = 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) {
     const ev = bundle.spec.events.find(ev => ev.id === eventId)
     if (!ev) {
@@ -108,52 +128,69 @@
   <title>Časová osa | UTXO.22</title>
 </svelte:head>
 
-<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">Časová osa</h1>
+<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 mb-6">Časová osa</h1>
   {#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}
-      <div>
-        <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>
+          <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>
         {/each}
+      </select>
     </div>
   {/if}
-  <div class="mt-4">Current plan: {planNumber}</div>
 </section>
 <section class="relative mx-auto pb-6 sm:pb-10 px-6 text-blue-web">
   {#if $bundle}
-    <div class="font-semibold uppercase mb-1">Kategorie</div>
-    <!--div class="flex gap-2 flex-wrap">
-      {#each $bundle.spec.tracks as et}
-        <div class="m-1"><label><input type="checkbox" /> {et.shortname || et.name}</label></div>
+    <div class="max-w-6xl mx-auto px-6 mb-10">
+      <div class="">
+        <div class="font-semibold uppercase mb-1">Sál / Místo</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}
-    </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}
-      <div class="mt-4 mb-10">
       <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>
       </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="">
               <tr>
                 <th></th>
                 {#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}
               </tr>
             </thead>
             <tbody>
-            {#each dateSlots(plan, st.period, $bundle) as ds}
-            <tr>
-              <th valign="top" class="pr-2 pt-1 text-sm" height="70">{ds.title}</th>
+              {#each dateSlots(plan, st.period, $bundle, $schedulePref) as ds}
+              <tr class="bg-gray-100">
+                <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}
+                  {#if $schedulePref && $schedulePref.stages.includes(stage.id)}
                     {#if ds.stages[stage.id] === undefined}
-                  <td class="bg-gray-200/70"></td>
+                      <td></td>
                     {:else if ds.stages[stage.id] !== null}
                       {#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="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>
@@ -164,6 +201,7 @@
                         </td>
                       {/each}
                     {/if}
+                  {/if}
                 {/each}
                 <!--th valign="top" class="pl-2 pt-1 text-sm" height="70">{ds.title}</th-->
               </tr>
@@ -171,8 +209,12 @@
             </tbody>
           </table>
         </div>
+      </div>
     {/each}
   {:else}
     Načítám ..
   {/if}
 </section>
+
+<style>
+</style>