Merge pull request #68 from krasch/no-icon-when-modal

No icon when modal, fade-in calendar events

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">

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;
     }
   }
 

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;
     }
   }
 

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();

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;