update

src/lib/Event.svelte

@@ -5,7 +5,7 @@
   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";
+  import { calcDuration, addFavorite } from "$lib/events.js";
 
   const e = event;
   $: duration = calcDuration(e, $bundle);
@@ -25,24 +25,6 @@
   function getChildrens(e) {
     return $bundle.spec.events.filter((i) => i.parent === e.id);
   }
-
-  function handleFavorite(el) {
-    const t = el.target.getAttribute("utxo-event-id");
-    userData.update((data) => {
-      const fe = data.favoriteEvents;
-      let output = null;
-      if (fe.includes(t)) {
-        output = Object.assign($userData, {
-          favoriteEvents: fe.filter((f) => f !== t),
-        });
-      } else {
-        fe.push(t);
-        output = Object.assign($userData, { favoriteEvents: fe });
-      }
-      //localStorage.setItem('userData', JSON.stringify(output))
-      return output;
-    });
-  }
 </script>
 
 <div
@@ -57,8 +39,7 @@
       class="fa-star {$userData.favoriteEvents.includes(e.id)
         ? 'fa-solid'
         : 'fa-regular'} cursor-pointer"
-      utxo-event-id={e.id}
-      on:click={handleFavorite}
+      on:click={() => addFavorite(e.id, userData)}
     />
   </div>
   <div class="text-lg font-semibold">
@@ -96,8 +77,7 @@
                 class="fa-star {$userData.favoriteEvents.includes(pe.id)
                   ? 'fa-solid'
                   : 'fa-regular'} cursor-pointer"
-                utxo-event-id={pe.id}
-                on:click={handleFavorite}
+                on:click={() => addFavorite(e.id, userData)}
               />
             </div>
             <div class="mt-1">

src/lib/events.js

@@ -1,8 +1,9 @@
 
-export default function calcDuration(e, bundle) {
+export function calcDuration(e, bundle) {
   if (!bundle) {
     return 0
   }
+  console.log(e.duration)
   if (e.duration) {
     return e.duration
   }
@@ -13,3 +14,23 @@ export default function calcDuration(e, bundle) {
     return total
   }
 }
+
+export function addFavorite(eventId, userData) {
+  userData.update((data) => {
+    const fe = data.favoriteEvents;
+    let output = null;
+    if (fe.includes(eventId)) {
+      output = Object.assign({}, data, {
+        favoriteEvents: fe.filter((f) => f !== eventId),
+      });
+    } else {
+      fe.push(eventId);
+      output = Object.assign(data, { favoriteEvents: fe });
+    }
+    //localStorage.setItem('userData', JSON.stringify(output))
+    return output;
+  })
+}
+
+export default function () {}
+

src/routes/program.svelte

@@ -5,17 +5,19 @@
 <script>
   import Event from "$lib/Event.svelte";
   import { bundle, userData } from "$lib/stores.js";
-  import calcDuration from "$lib/events.js";
+  import { calcDuration } from "$lib/events.js";
 
-  $: totalDuration = (() => {
-    if (!$bundle) {
+  function calcTotalDuration(bundle) {
+    if (!bundle) {
       return null;
     }
-    return $bundle.spec.events.reduce(
-      (p, c) => p + (c ? calcDuration(c, $bundle) : 0),
+    return bundle.spec.events.reduce(
+      (p, e) => p + (calcDuration(e, bundle) || 0),
       0
     );
-  })();
+  }
+
+  $: totalDuration = calcTotalDuration($bundle);
 </script>
 
 <svelte:head>

src/routes/udalosti.svelte

@@ -7,6 +7,7 @@
   import { goto } from "$app/navigation";
   import { onMount } from "svelte";
   import { bundle, userData } from "$lib/stores.js";
+  import { addFavorite } from "$lib/events.js";
   import EventTypeLabel from "$lib/EventTypeLabel.svelte";
   import Avatar from "$lib/Avatar.svelte";
   import Event from "$lib/Event.svelte";
@@ -62,6 +63,17 @@
       <div class="text-md my-auto">{trackRender(e.track)}</div>
       <div class="text-sm my-auto">{duration}m</div>
     </div>
+    <div class="float-right">
+      <div class="cursor-pointer" on:click={() => addFavorite(e.id, userData)}>
+        <i
+          class="fa-star {$userData.favoriteEvents.includes(e.id)
+            ? 'fa-solid'
+            : 'fa-regular'}"
+        />
+        {#if $userData.favoriteEvents.includes(e.id)}&nbsp;Tvoje oblíbená
+          událost{/if}
+      </div>
+    </div>
     <h1 class="text-2xl font-bold">{e.name}</h1>
     {#if e.speakers && e.speakers.length > 0}
       <div class="mt-4 mb-2 flex flex-wrap gap-4">