From 05be2309113b14dd456b513fe522a06753f9d60d Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Wed, 18 May 2022 02:14:31 +0200
Subject: [PATCH] Update schedule UX

---
 src/lib/stores.js            |   4 +
 src/routes/casova-osa.svelte | 156 ++++++++++++++++++++++-------------
 2 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/src/lib/stores.js b/src/lib/stores.js
index 37d62d1..30c5c87 100644
--- a/src/lib/stores.js
+++ b/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: []
+});
diff --git a/src/routes/casova-osa.svelte b/src/routes/casova-osa.svelte
index e289f32..cff14dd 100644
--- a/src/routes/casova-osa.svelte
+++ b/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,71 +128,93 @@
   <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=""> 
-    {#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>
-    {/each}
+    <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}
+          <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>
-      {/each}
-    </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 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>
-        <table width="100%" class="table table-auto">
-          <thead class="">
-            <tr>
-              <th></th>
-              {#each $bundle.spec.stages as stage}
-                <th class="text-md py-1.5 px-1">{stage.name}</th>
+      </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="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>
+      <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}
+                  {#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, $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></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} {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>
+                            <div class="text-xs mt-1">
+                              {showEventDetail($bundle, event)}
+                            </div>
+                          </div>
+                        </td>
+                      {/each}
+                    {/if}
+                  {/if}
+                {/each}
+                <!--th valign="top" class="pl-2 pt-1 text-sm" height="70">{ds.title}</th-->
+              </tr>
               {/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 $bundle.spec.stages as stage}
-                {#if ds.stages[stage.id] === undefined}
-                  <td class="bg-gray-200/70"></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}>
-                      <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>
-                        <div class="text-xs mt-1">
-                          {showEventDetail($bundle, event)}
-                        </div>
-                      </div>
-                    </td>
-                  {/each}
-                {/if}
-              {/each}
-              <!--th valign="top" class="pl-2 pt-1 text-sm" height="70">{ds.title}</th-->
-            </tr>
-            {/each}
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
     {/each}
   {:else}
     Načítám ..
   {/if}
 </section>
+
+<style>
+</style>