From 6096b24d356d6b85c3dd3d43fc5a04dd765a766e Mon Sep 17 00:00:00 2001
From: krasch <dev@krasch.io>
Date: Fri, 27 Dec 2024 13:14:55 +0100
Subject: [PATCH 1/3] No logo when modal is showing

---
 index.html                   | 2 +-
 script/components/sidebar.js | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d45167c..9b0bb98 100644
--- a/index.html
+++ b/index.html
@@ -169,7 +169,7 @@ <h1>Wo soll die Reise starten?</h1>
     <a id="show-sidebar" title="Show sidebar" class="hidden">››</a>
     <a id="hide-sidebar" title="Hide sidebar" class="hidden">‹‹</a>
 
-    <div class="logo"><img src="images/logo.svg" alt="logo for the trans-europe-planner"></div>
+    <div class="logo hidden"><img src="images/logo.svg" alt="logo for the trans-europe-planner"></div>
     <div class="header hidden">
         <h2><label for="date-picker-input">Abreisedatum: </label></h2>
         <div id="date-picker">
diff --git a/script/components/sidebar.js b/script/components/sidebar.js
index 8288d37..f9af64f 100644
--- a/script/components/sidebar.js
+++ b/script/components/sidebar.js
@@ -1,4 +1,6 @@
 class Sidebar {
+  #initialUpdate = true;
+
   #borderRadius;
 
   // relevant HTML elements
@@ -38,6 +40,11 @@ class Sidebar {
   }
 
   updateView(hasDate, hasActiveJourney) {
+    if (this.#initialUpdate) {
+      this.#setVisible(this.#logo);
+      this.#initialUpdate = false;
+    }
+
     this.#datePickerShouldBeVisible = hasActiveJourney;
     this.#calendarShouldBeVisible = hasActiveJourney && hasDate;
     this.#updateView();

From 73ac51f5a2547ab2480803b08f887ff61de6c98d Mon Sep 17 00:00:00 2001
From: krasch <dev@krasch.io>
Date: Fri, 27 Dec 2024 13:36:39 +0100
Subject: [PATCH 2/3] Fade-in animation for calendar events to make it clearer
 that calendar changes

---
 style/calendar.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/style/calendar.css b/style/calendar.css
index 5553785..b5240bc 100644
--- a/style/calendar.css
+++ b/style/calendar.css
@@ -46,8 +46,16 @@ calendar-entry {
 
     border-radius: 5px;
     overflow: hidden;
+
+    animation: fadein 1s;
+}
+
+@keyframes fadein {
+  from { opacity: 0}
+  to   { opacity: 1}
 }
 
+
 /* calendar entry is fully visible */
 calendar-entry.full {
     border: 1px solid darkgrey;

From e6da684563984362adbdaae98c89ae65988d2d4d Mon Sep 17 00:00:00 2001
From: krasch <dev@krasch.io>
Date: Fri, 27 Dec 2024 13:52:05 +0100
Subject: [PATCH 3/3] Fade-in should only happen on date or journey change, not
 when moving connections around in grid

---
 script/components/calendar/calendar.js | 49 ++++++++++++++++++--------
 script/components/calendar/grid.js     |  3 ++
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/script/components/calendar/calendar.js b/script/components/calendar/calendar.js
index b89a891..178cf01 100644
--- a/script/components/calendar/calendar.js
+++ b/script/components/calendar/calendar.js
@@ -43,29 +43,50 @@ class Calendar extends CalendarGrid {
   }
 
   updateView(connections) {
-    // remove all entries because they might be invalid anyway
-    // because the calendar start date might have changed
-    // which means that their column should have been updated (but which we currently don't do)
-    for (let key in this.#entries) this.#entries[key].remove();
-    this.#entries = {};
-    this.#connectionIds = {};
-
     // sort such that earliest will be first child etc
     // otherwise they might overlay each other and drag&drop won't work
     connections.sort((c1, c2) => c1.startDateTime - c2.startDateTime);
 
+    if (this.dateChanged) {
+      // remove all entries because they might be invalid anyway
+      // because the calendar start date has changed
+      // which means that their column should have been updated (but which we currently don't do)
+      for (let key in this.#entries) this.#entries[key].remove();
+      this.#entries = {};
+      this.#connectionIds = {};
+
+      this.dateChanged = false;
+    }
+
+    // remove entries that are currently in calendar but no longer necessary
+    const connectionIds = connections.map((c) => this.#idString(c.uniqueId));
+    for (let id in this.#entries) {
+      if (!connectionIds.includes(id)) {
+        this.#entries[id].remove();
+        delete this.#entries[id];
+        delete this.#connectionIds[id];
+      }
+    }
+
+    // add entries that are not yet in calendar
     for (let connection of connections) {
-      const entry = createCalendarEntry(connection);
-      entry.id = this.#idString(connection.uniqueId);
-      entry.draggable = true; // todo this should not be here
+      const idString = this.#idString(connection.uniqueId);
+      let entry = this.#entries[idString];
+
+      if (!entry) {
+        entry = createCalendarEntry(connection);
+        entry.id = idString;
+        entry.draggable = true; // todo this should not be here
 
+        this.addToGrid(entry);
+        this.#entries[idString] = entry;
+        this.#connectionIds[idString] = connection.uniqueId;
+      }
+
+      // only show the currently selected entries
       if (connection.selected) entry.visibility = "full";
       else entry.visibility = "hidden";
       entry.color = connection.color;
-
-      this.addToGrid(entry);
-      this.#entries[entry.id] = entry;
-      this.#connectionIds[entry.id] = connection.uniqueId;
     }
   }
 
diff --git a/script/components/calendar/grid.js b/script/components/calendar/grid.js
index 455109f..6d0a387 100644
--- a/script/components/calendar/grid.js
+++ b/script/components/calendar/grid.js
@@ -10,6 +10,8 @@ function diffDays(datetime, laterDatetime) {
 }
 
 class CalendarGrid extends HTMLElement {
+  dateChanged = true;
+
   static observedAttributes = ["start", "numDays", "resolution"];
 
   constructor() {
@@ -37,6 +39,7 @@ class CalendarGrid extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "start") {
       this.#updateTableHeader();
+      this.dateChanged = true;
     }
   }