update

src/lib/Event.svelte

@@ -1,12 +1,14 @@
 <script>
   export let event;
 
-  const e = event;
-
   import Avatar from "$lib/Avatar.svelte";
+  import Tooltip from "$lib/Tooltip.svelte";
   import EventTypeLabel from "$lib/EventTypeLabel.svelte";
-
   import { bundle, userData } from "$lib/stores.js";
+  import calcDuration from "$lib/events.js";
+
+  const e = event;
+  $: duration = calcDuration(e, $bundle);
 
   function speakersMap(arr) {
     if (!arr) return;
@@ -20,7 +22,7 @@
     return track.shortname || track.name;
   }
 
-  function getParents(e) {
+  function getChildrens(e) {
     return $bundle.spec.events.filter((i) => i.parent === e.id);
   }
 
@@ -41,23 +43,14 @@
       return output;
     });
   }
+
 </script>
 
 <div
-  class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes(
+  class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes( e.id) ? 'bg-yellow-100' : ''}"
-    e.id
-  )
-    ? 'bg-yellow-100'
-    : ''}"
 >
   <div class="float-right">
-    <i
+    <i class="fa-star {$userData.favoriteEvents.includes(e.id) ? 'fa-solid' : 'fa-regular'} cursor-pointer" utxo-event-id={e.id} on:click={handleFavorite} />
-      class="fa-star {$userData.favoriteEvents.includes(e.id)
-        ? 'fa-solid'
-        : 'fa-regular'} cursor-pointer"
-      utxo-event-id={e.id}
-      on:click={handleFavorite}
-    />
   </div>
   <div class="text-lg font-semibold">
     <a href="/udalosti?id={e.id}">{e.name}</a>
@@ -75,15 +68,15 @@
   <div class="mt-2 text-sm flex flex-wrap gap-2">
     <div><EventTypeLabel event={e} /></div>
     <div class="text-sm my-auto">{trackRender(e.track)}</div>
-    <div class="text-xs my-auto">{e.duration}m</div>
+    {#if duration}<div class="text-xs my-auto">{duration}m</div>{/if}
   </div>
-  {#if getParents(e).length > 0}
+  {#if getChildrens(e).length > 0}
     <div class="mt-4 w-auto mb-2">
       <div class="flex flex-wrap gap-2" cellpadding="5">
-        {#each getParents(e) as pe}
+        {#each getChildrens(e) as pe}
-          <div class="border rounded py-1.5 px-2.5 bg-gray-100 text-sm">
+          <div class="border rounded py-1.5 px-2.5 text-sm transition-all {$userData.favoriteEvents.includes( pe.id) ? 'bg-yellow-100' : 'bg-gray-100'}">
             <div class="font-bold">
-              <a href="/udalosti?id={pe.id}">{pe.name}</a>
+              <a href="/udalosti?id={pe.id}">{pe.name}</a>  <i class="fa-star {$userData.favoriteEvents.includes(pe.id) ? 'fa-solid' : 'fa-regular'} cursor-pointer" utxo-event-id={pe.id} on:click={handleFavorite} />
             </div>
             <div class="mt-1">
               {#if pe.speakers.length === 0}

src/lib/Tooltip.svelte

@@ -0,0 +1,91 @@
+<script>
+  export let tip = "";
+  export let top = false;
+  export let right = false;
+  export let bottom = false;
+  export let left = false;
+  export let active = false;
+  export let color = "#757575";
+
+  let style = `background-color: ${color};`;
+</script>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  .tooltip {
+    position: absolute;
+    font-family: inherit;
+    display: inline-block;
+    white-space: nowrap;
+    color: inherit;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 150ms, visibility 150ms;
+    z-index: 1;
+  }
+
+  .default-tip {
+    display: inline-block;
+    padding: 8px 16px;
+    border-radius: 6px;
+    color: inherit;
+  }
+
+  .tooltip.top {
+    left: 50%;
+    transform: translate(-50%, -100%);
+    margin-top: -8px;
+  }
+
+  .tooltip.bottom {
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 100%);
+    margin-bottom: -8px;
+  }
+
+  .tooltip.left {
+    left: 0;
+    transform: translateX(-100%);
+    margin-left: -8px;
+  }
+
+  .tooltip.right {
+    right: 0;
+    transform: translateX(100%);
+    margin-right: -8px;
+  }
+
+  .tooltip.active {
+    opacity: 1;
+    visibility: initial;
+  }
+
+  .tooltip-slot:hover + .tooltip {
+    opacity: 1;
+    visibility: initial;
+  }
+</style>
+
+<div class="tooltip-wrapper">
+  <span class="tooltip-slot">
+    <slot />
+  </span>
+  <div
+    class="tooltip"
+    class:active
+    class:left
+    class:right
+    class:bottom
+    class:top>
+    {#if tip}
+      <div class="default-tip" {style}>{@html tip}</div>
+    {:else}
+      <slot name="custom-tip" />
+    {/if}
+
+  </div>
+</div>

src/lib/events.js

@@ -0,0 +1,15 @@
+
+export default function calcDuration(e, bundle) {
+  if (!bundle) {
+    return 0
+  }
+  if (e.duration) {
+    return e.duration
+  }
+  const childrens = bundle.spec.events.filter((i) => i.parent === e.id);
+  if (childrens.length > 0) {
+    let total = childrens.reduce((p, c) => p + (c.duration ? c.duration : 0), 0)
+    total += 5 * (childrens.length-1)
+    return total
+  }
+}

src/routes/program.svelte

@@ -5,6 +5,14 @@
 <script>
   import Event from "$lib/Event.svelte";
   import { bundle, userData } from "$lib/stores.js";
+  import calcDuration from "$lib/events.js";
+
+  $: totalDuration = (() => {
+    if (!$bundle) {
+      return null
+    }
+    return $bundle.spec.events.reduce((p, c) => p + (c ? calcDuration(c, $bundle) : 0), 0)
+  })()
 </script>
 
 <svelte:head>
@@ -27,8 +35,8 @@
       <div class="uppercase font-sm mt-1">přednášejících</div>
     </div>
     <div class="flex-1">
-      <div class="text-4xl">{$bundle.spec.events.reduce((p, c) => p + c.duration, 0)}</div>
+      <div class="text-4xl">{Math.round((totalDuration/60)*100)/100}</div>
-      <div class="uppercase font-sm mt-1">minut obsahu</div>
+      <div class="uppercase font-sm mt-1">hodin obsahu</div>
     </div>
   </div>
 

src/routes/udalosti.svelte

@@ -9,6 +9,8 @@
   import { bundle, userData } from "$lib/stores.js";
   import EventTypeLabel from "$lib/EventTypeLabel.svelte";
   import Avatar from "$lib/Avatar.svelte";
+  import Event from "$lib/Event.svelte";
+  import calcDuration from "$lib/events.js";
   import SvelteMarkdown from "svelte-markdown";
   import Link from "$lib/Link.svelte";
 
@@ -16,6 +18,8 @@
 
   $: id = getId($page.url.search);
   $: e = $bundle ? $bundle.spec.events.find((ev) => ev.id === id) : null;
+  $: duration = e ? calcDuration(e, $bundle) : null
+  $: childrens = $bundle.spec.events.filter(i => i.parent === e.id);
 
   function getId(search) {
     const searchParams = new URLSearchParams(search);
@@ -51,7 +55,7 @@
     <div class="mb-6 flex flex-wrap gap-4">
       <div><EventTypeLabel event={e} size="big" /></div>
       <div class="text-md my-auto">{trackRender(e.track)}</div>
-      <div class="text-sm my-auto">{e.duration}m</div>
+      <div class="text-sm my-auto">{duration}m</div>
     </div>
     <h1 class="text-2xl font-bold">{e.name}</h1>
     {#if e.speakers && e.speakers.length > 0}
@@ -71,5 +75,13 @@
         <SvelteMarkdown source={e.description} {renderers} />
       {/if}
     </div>
+    {#if childrens.length}
+      <div><h2 class="text uppercase mb-4">Obsahuje události ({ childrens.length })</h2></div>
+      <div>
+        {#each childrens as child}
+          <Event event={child} />
+        {/each}
+      </div>
+    {/if}
   {/if}
 </section>