Updates

src/lib/Event.svelte

@@ -60,12 +60,12 @@
       <div><EventTypeLabel event={e} /></div>
       {#if duration}<div class="text-xs my-auto">{duration}m</div>{/if}
       {#if e.track}
-        <div class="text-sm my-auto">{trackRender(e.track)}</div>
+        <div class="text-sm my-auto"><a href="/program?track={e.track}">{trackRender(e.track)}</a></div>
       {/if}
       {#if e.tags}
       <div class="flex text-xs gap-1 my-auto text-blue-web/60">
         {#each e.tags as tag}
-          <div>#{tag}</div>
+          <div><a href="/program?tag={tag}">#{tag}</a></div>
         {/each}
       </div>
       {/if}

src/lib/WordCloud.svelte

@@ -5,6 +5,7 @@
   import { select } from "d3-selection";
   import { scaleOrdinal } from "d3-scale";
   import * as CS from "d3-scale-chromatic";
+  import { layouts } from "$lib/stores.js";
 
   $: outerWidth = 0;
   $: innerWidth = 0;
@@ -54,6 +55,8 @@
   const onWordMouseOut = (d) => dispatch("mouseout", d);
   const onWordMouseMove = (d) => dispatch("mousemove", d);
 
+  let layout = null
+
   $: cwidth =
     outerWidth > 1152
       ? 1000
@@ -62,23 +65,40 @@
       : outerWidth - 50;
   $: cheight = cwidth < 800 ? 400 : cwidth < 500 ? 600 : 250;
 
-  function makeLayout() {
+  async function makeLayout() {
-    return cloud()
+    const lid = [cwidth, cheight].join(':')
-      .size([cwidth, cheight])
+    let l = null
-      .words(words)
+    await layouts.update(larr => {
-      .padding(padding)
+
-      .rotate(() => ~~(Math.random() * maxRotate) + minRotate)
+      console.log(Object.keys(larr))
-      .font(font)
+      if (larr && larr[lid]) {
-      .fontSize(
+        console.log('making from stored layout')
-        //(d) =>  Math.floor((d.count / maxWordCount) * maxFontSize)
+        l = larr[lid]
-        (d) => d.count + 15
+
-      );
+      } else {
+
+        l = cloud()
+          .size([cwidth, cheight])
+          .words(words)
+          .padding(padding)
+          .rotate(() => ~~(Math.random() * maxRotate) + minRotate)
+          .font(font)
+          .fontSize(
+            //(d) =>  Math.floor((d.count / maxWordCount) * maxFontSize)
+            (d) => d.count + 15
+          );
+
+        larr[lid] = l
+      }
+
+      console.log(Object.keys(larr))
+      return larr
+    })
+    return l
   }
 
-  let layout = null;
-
   function draw(words) {
-    select("#wordcloud").selectAll("*").remove();
+    //select("#wordcloud").selectAll("*").remove();
 
     select("#wordcloud")
       .append("svg")
@@ -110,8 +130,8 @@
       .on("mousemove", onWordMouseMove);
   }
 
-  function drawAll() {
+  async function drawAll() {
-    layout = makeLayout().on("end", draw);
+    layout = (await makeLayout()).on("end", draw);
     layout.start();
   }
 

src/lib/stores.js

@@ -24,3 +24,6 @@ export const userDataLocal = writable({
   tickets: [],
   orders: [],
 })
+
+export const layouts = writable({ test: null })
+

src/routes/program.svelte

@@ -52,10 +52,31 @@
     if (tag) {
       goto(`/program?tag=${tag}`)
     }
+    return true
   }
 
   $: events = applyFilters($page, $bundle)
   $: ids = []
+  $: filters = makeFilters($page, $bundle)
+
+  function makeFilters (pg, bd) {
+    const search = pg.url.searchParams
+    let fl = []
+
+    // tags
+    if (search.get('tag')) {
+      fl.push({ type: 'tag', title: `Tag: #${search.get('tag')}` })
+    }
+    // tracks
+    if (search.get('track')) {
+      const track = bd.spec.tracks.find(t => t.id === search.get('track'))
+      if (!track) {
+        return goto('/program')
+      }
+      fl.push({ type: 'track', title: `Sekce: ${track.name}` })
+    }
+    return fl
+  }
 
   function applyFilters (pg, bd) {
     if (!pg || !bd) {
@@ -66,6 +87,9 @@
     if (search.get('tag')) {
       arr = arr.filter(e => e.tags && e.tags.includes(search.get('tag')))
     }
+    if (search.get('track')) {
+      arr = arr.filter(e => e.track === search.get('track'))
+    }
     ids = arr.map(a => a.id)
     return arr
   }
@@ -98,12 +122,26 @@
       <div class="uppercase font-sm mt-1">hodin obsahu</div>
     </div>
   </div-->
-  <div class="mt-6 lg:mt-10 flex sm:justify-center overflow-auto">
+  {#if filters.length > 0}
-    <WordCloud words={tags} on:click={wordClick} />
+    <div class="mt-6 flex flex-wrap gap-3">
-  </div>
+      <div class="my-auto">Filtry:</div>
+      <div class="text-sm my-auto">
+        {#each filters as filter}
+          <div class="py-1 px-2 rounded bg-blue-web/60 text-white">{filter.title}</div>
+        {/each}
+      </div>
+      <div class="ml-3 my-auto">
+        <a href="/program"><i class="fa-solid fa-xmark text-red-500 mr-1" /> Zrušit filtr</a>
+      </div>
+    </div>
+  {:else}
+    <div class="mt-6 lg:mt-10 flex sm:justify-center overflow-auto">
+      <WordCloud words={tags} on:click={wordClick} />
+    </div>
+  {/if}
 
   <h1 class="mt-6 uppercase text-lg font-semibold">
-    Seznam událostí ({ids.length})
+    Seznam událostí ({ids.length}/{$bundle.spec.events.length})
   </h1>
   <div class="mt-4">
     {#each $bundle.spec.events as e}

src/routes/udalosti.svelte

@@ -60,11 +60,18 @@
     </div>
     <div class="mb-6 flex flex-wrap gap-4">
       <div><EventTypeLabel event={e} size="big" /></div>
+      {#if duration}
+        <div class="text-sm my-auto">{duration}m</div>
+      {/if}
       {#if e.track}
         <div class="text-md my-auto">{trackRender(e.track)}</div>
       {/if}
-      {#if duration}
+      {#if e.tags}
-        <div class="text-sm my-auto">{duration}m</div>
+      <div class="flex text-xs gap-1 my-auto text-blue-web/60">
+        {#each e.tags as tag}
+          <div><a href="/program?tag={tag}">#{tag}</a></div>
+        {/each}
+      </div>
       {/if}
     </div>
     <div class="float-right">
@@ -96,11 +103,6 @@
         <SvelteMarkdown source={e.description} {renderers} />
       </div>
     {/if}
-    {#if e.tags && e.tags.length > 0}
-      <div class="mt-6 mb-6 text-sm">
-        Tagy: <span class="font-semibold">{e.tags.join(", ")}</span>
-      </div>
-    {/if}
     {#if e.parent}
       <div class="mt-6">
         <h2 class="text uppercase mb-4 font-semibold">Součást události:</h2>