From 0e1e666f42fb271a8195d57772059dfa86480b65 Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Sun, 29 Jan 2023 08:42:19 +0100
Subject: [PATCH] Styles update

---
 src/lib/components/CalendarList.svelte     | 51 ++++++++++---------
 src/lib/components/CollectionList.svelte   |  2 +-
 src/lib/components/TimelineHeatmap.svelte  | 59 ++++++++++++----------
 src/routes/[entry]/day/[date]/+page.svelte | 14 ++---
 4 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/src/lib/components/CalendarList.svelte b/src/lib/components/CalendarList.svelte
index c298f5fd..e4a7acf1 100644
--- a/src/lib/components/CalendarList.svelte
+++ b/src/lib/components/CalendarList.svelte
@@ -11,32 +11,35 @@
 
 <div class="text-2xl">
     {#each segments as segment}
-        <div class="flex flex-wrap mb-2 gap-3 items-center text-gray-800">
-            <div class="text-xl md:w-32 text-right">{format(new Date(segment.startTime), "HH:mm")} - {format(new Date(segment.endTime), "HH:mm")}</div>
-            <div class="flex flex-wrap gap-2 items-center mb-6 md:mb-0">
-                    <div>
-                        <a href="/{entry}/event/{(segment.event || event).id}">
-                            <ItemLogo item={segment.event || event} width={event ? 'w-8' : 'w-10'}/>
-                        </a>
-                    </div>
-                    <div class="">
-                        {#if !event}
-                            <a href="/{entry}/event/{(segment.event || event).id}" class="text-pbw-red hover:underline">{(segment.event || event)[event && event.shortname ? 'shortname' : 'name']}</a>
-                        {:else}
-                            <span class="">{event.shortname || event.name}</span>
-                        {/if}
-                        {#if segment.title}
-                           - {segment.title}
+        <div class="md:flex flex-wrap mb-2 gap-3 items-center text-gray-800">
+            <div class="text-xl md:w-32 md:text-right">{format(new Date(segment.startTime), "HH:mm")} - {format(new Date(segment.endTime), "HH:mm")}</div>
+            <div class="md:flex gap-2 items-center mb-6 md:mb-0">
+                <div class="flex gap-2 items-center my-2 md:my-0">
+                    <a href="/{entry}/event/{(segment.event || event).id}">
+                        <ItemLogo item={segment.event || event} width={event ? 'w-8' : 'w-10'}/>
+                    </a>
+                    {#if !event}
+                        <a href="/{entry}/event/{(segment.event || event).id}" class="text-pbw-red hover:underline">{(segment.event || event)[event && event.shortname ? 'shortname' : 'name']}</a>
+                    {:else}
+                        <span class="">{event.shortname || event.name}</span>
+                    {/if}
+                    {#if segment.title}
+                        - {segment.title}
+                    {/if}
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <div class="text-xl">
+                        {#if segment.venues || event?.venues}
+                            📍 {@html ((segment.venues || event.venues).map(vId => {
+                                const place = bundle.places.find(p => p.id === vId)
+                                return `<a href="/${entry}/place/${place.id}" class=\"underline hover:no-underline\">${place.name}</a>`
+                            })).join("<span>, </span>")}
+                        {:else if (segment.event?.venueName || event?.venueName)}
+                            📍 {(segment.event?.venueName || event?.venueName)}
                         {/if}
                     </div>
-                <div class="text-xl">
-                    {#if segment.venues || event?.venues}
-                        @ {@html ((segment.venues || event.venues).map(vId => {
-                            const place = bundle.places.find(p => p.id === vId)
-                            return `<a href="/${entry}/place/${place.id}" class=\"underline hover:no-underline\">${place.name}</a>`
-                        })).join("<span>, </span>")}
-                    {:else if (segment.event?.venueName || event?.venueName)}
-                        @ {(segment.event?.venueName || event?.venueName)}
+                    {#if segment.ecap || event?.attendees || segment.event?.attendees }
+                        <div class="text-lg">👥 {segment.ecap || event?.attendees || segment.event?.attendees}</div>
                     {/if}
                 </div>
             </div>
diff --git a/src/lib/components/CollectionList.svelte b/src/lib/components/CollectionList.svelte
index 3fce2b74..0f4d16a4 100644
--- a/src/lib/components/CollectionList.svelte
+++ b/src/lib/components/CollectionList.svelte
@@ -32,7 +32,7 @@
                 {#if col === "event"}
                     <div class="text-xl text-gray-500 dark:text-gray-400  my-2">
                         <span class="font-bold">{formatItemDate(item)}</span>
-                        {#if item.attendees}<br />{item.attendees}+ ppl{/if}
+                        {#if item.attendees}<br />{item.attendees} ppl{/if}
                     </div>
                 {/if}
                 {#if col === "media-partner"}
diff --git a/src/lib/components/TimelineHeatmap.svelte b/src/lib/components/TimelineHeatmap.svelte
index 567004cf..0c300736 100644
--- a/src/lib/components/TimelineHeatmap.svelte
+++ b/src/lib/components/TimelineHeatmap.svelte
@@ -3,6 +3,7 @@
     import { goto } from '$app/navigation';
     import ItemLogo from '$lib/components/ItemLogo.svelte';
     export let data;
+    export let highlightDay = false;
 
     const startDate = "2023-06-02"
     const endDate = "2023-06-11"
@@ -35,7 +36,7 @@
         }
     }
 
-    function updateTimelineEvent(time, eventId, attendees) {
+    function updateTimelineEvent(time, eventId, attendees, eventSegmentId) {
         for (const day of days) {
             for (const segment of segments) {
                 const sstart = new Date(`${day}T${segment}`)
@@ -45,7 +46,7 @@
                     const baseScore = attendees ? (attendees > 3000 ? 3000 : (attendees < 200 ? 200 : attendees)) : 0
                     const target = timelineData[[day, segment].join(';')]
                     target.score += baseScore || 0
-                    target.events.push(eventId)
+                    target.events.push([eventId, eventSegmentId])
                 }
             }
         }
@@ -53,25 +54,14 @@
 
     const defaultTimes = "09:00-18:00"
     for (const event of bundle.events) {
-        if (event.segments) {
-            for (const eventSegment of event.segments) {
-                const [ tstart, tend ] = (eventSegment.times || defaultTimes).split('-')
-                const time = {
-                    start: new Date(`${eventSegment.date}T${tstart}`),
-                    end: new Date(`${tend <= tstart ? format(addDays(new Date(eventSegment.date),1), 'yyyy-MM-dd') : eventSegment.date}T${tend}`)
-                }
-                updateTimelineEvent(time, event.id, eventSegment.ecap || event.attendees)               
-            }
-        } else {
-            const [ tstart, tend ] = (event.times || defaultTimes).split('-').map(t => t.trim())
-            const times = []
-            for (let i = 0; i < (event.days || 1); i++) {
-                const time = {
-                    start: addDays(new Date(event.date + "T" + tstart), i),
-                    end: addDays(new Date(event.date + "T" + tend), (tend < tstart ? i+1 : i))
-                }
-                updateTimelineEvent(time, event.id, event.attendees)
+        for (let i = 0; i < event.segments.length; i++) {
+            const eventSegment = event.segments[i]
+            const [ tstart, tend ] = (eventSegment.times || defaultTimes).split('-')
+            const time = {
+                start: new Date(`${eventSegment.date}T${tstart}`),
+                end: new Date(`${tend <= tstart ? format(addDays(new Date(eventSegment.date),1), 'yyyy-MM-dd') : eventSegment.date}T${tend}`)
             }
+            updateTimelineEvent(time, event.id, eventSegment.ecap || event.attendees, i)               
         }
     }
 
@@ -116,34 +106,49 @@
 
 <div class="w-full mb-10 relative">
     {#if selectedSegment}
-        <div class="absolute top-[66px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
+        <div class="absolute top-[81px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
             <div class="uppercase">{selectedSegment.title}</div>
             <div class="text-xl mt-4">
-                {#each selectedSegment.data.events.map(e => eventDetail(e)) as item}
+                {#each selectedSegment.data.events.map(e => { return [eventDetail(e[0]), e[1]] }) as [item, segmentId]}
                     <div class="flex gap-2 items-center mb-1">
                         <div class="">
                             <ItemLogo {item} width="h-8" />
                         </div>
                         <div class="">
                             {item.shortname || item.name}
+                            {#if item.segments[segmentId].title}
+                                - {item.segments[segmentId].title}
+                            {/if}
                         </div>
                     </div>
                 {/each}
             </div>
         </div>
     {/if}
-    <div class="flex text-center text-gray-400 text-sm">
+    <div class="flex text-center text-gray-400 text-sm items-end h-10">
         {#each days as day}
-            <div class="mb-1 uppercase" style="width: {1/(days.length/100)}%;">
+            <div class="mb-1 uppercase {highlightDay && highlightDay !== day ? "text-gray-400 text-lg" : "text-pbw-red text-lg"}" style="width: {1/(days.length/100)}%;">
                 <a href="/23/day/{format(new Date(day), 'yyyy-MM-dd')}"><span class="hidden md:inline-block">{format(new Date(day), 'eee ')}</span> {format(new Date(day), 'd')}</a>
             </div>
         {/each}
     </div>
-    <div class="w-full border border-gray-300 rounded flex">
+    <div class="w-full border {highlightDay ? 'border-gray-300' : 'border-pbw-red'} flex">
         {#each days as day, i}
-            <div class="h-10 flex flex-grow hover:bg-pbw-yellow/20" style="width: {1/(days.length/100)}%; {days.length-i > 1 ? "border-right: 1px solid silver;" : ""}">
+            <div
+                class="h-10 flex flex-grow hover:bg-pbw-yellow/20"
+                style="width: {1/(days.length/100)}%; {days.length-i > 1 ? "border-right: 1px solid "+ (highlightDay ? "silver" : "rgb(255, 22, 22)")+ ";" : ""}"
+            >
                 {#each segments as segment}
-                    <div id="{day}-{segment}" data-events={timelineData[[day, segment].join(";")].events} data-score={timelineData[[day, segment].join(";")].score} class="hover:border hover:border-pbw-yellow flex-grow cursor-pointer" style="width: {1/(segments.length/50)}%; background-color: rgba(255, 22, 22, {timelineData[[day, segment].join(";")].perc}%);" on:click={makeClick(day, segment, timelineData[[day, segment].join(";")])} on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])} on:mouseleave={hiddenSelected}>
+                    <div 
+                        id="{day}-{segment}"
+                        data-events={timelineData[[day, segment].join(";")].events}
+                        data-score={timelineData[[day, segment].join(";")].score}
+                        class="hover:border hover:border-pbw-yellow flex-grow cursor-pointer"
+                        style="width: {1/(segments.length/50)}%; background-color: rgba({!highlightDay || highlightDay === day ? "255, 22, 22" : "115, 115, 115"}, {timelineData[[day, segment].join(";")].perc}%);"
+                        on:click={makeClick(day, segment, timelineData[[day, segment].join(";")])}
+                        on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])}
+                        on:mouseleave={hiddenSelected}
+                    >
                     </div>
                 {/each}
             </div>
diff --git a/src/routes/[entry]/day/[date]/+page.svelte b/src/routes/[entry]/day/[date]/+page.svelte
index 5c6fd737..abe8f39a 100644
--- a/src/routes/[entry]/day/[date]/+page.svelte
+++ b/src/routes/[entry]/day/[date]/+page.svelte
@@ -48,13 +48,13 @@
             <div class="flex gap-8 mb-6 md:mb-10">
                 <h1 class="text-4xl md:text-5xl font-bold text-pbw-red"><a href="/{$page.params.entry}">#PBW23</a><span class="text-pbw-yellow">.day</span></h1>
             </div>
+        
+            <TimelineHeatmap {data} highlightDay={$page.params.date} />
+            <h2 class="text-4xl font-bold text-gray-600">{format(new Date($page.params.date), "MMMM d, yyyy - EEEE")}</h2>
+            <div class="mt-10">
+                <CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
+            </div>
+            <Footer bundle={data.bundle} />
         </div>
-
-        <TimelineHeatmap {data} />
-        <h2 class="text-4xl font-bold text-gray-600">{format(new Date($page.params.date), "MMMM d, yyyy - EEEE")}</h2>
-        <div class="mt-10">
-            <CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
-        </div>
-        <Footer bundle={data.bundle} />
     </div>
 </div>
\ No newline at end of file