Mark old schedules as finished

src/jsMain/kotlin/de/kif/frontend/views/calendar/CalendarBody.kt

@@ -126,6 +126,10 @@ class CalendarBody(val calendar: Calendar, view: HTMLElement) : ViewCollection<C
                 calendar.scrollHorizontalTo((activeRow.offsetLeft - 100).toDouble(), scroll)
             }
         }
+
+        for (entry in calendarEntries) {
+            entry.updateTime(diff, currentTime)
+        }
     }
 
     init {

src/jsMain/kotlin/de/kif/frontend/views/calendar/CalendarEntry.kt

@@ -35,6 +35,13 @@ class CalendarEntry(private val calendar: CalendarBody, view: HTMLElement) : Vie
     var startTime = dataset["time"]?.toIntOrNull() ?: 0
     var length = dataset["length"]?.toIntOrNull() ?: 0
 
+    private val finishedProperty = dataset.property("finished")
+    var finished: Boolean
+        get() = finishedProperty.value == "true"
+        set(value) {
+            finishedProperty.value = value.toString()
+        }
+
     var pending by classList.property("pending")
     private var error by classList.property("error")
     private var nextScroll = 0.0
@@ -218,6 +225,7 @@ class CalendarEntry(private val calendar: CalendarBody, view: HTMLElement) : Vie
         if (schedule.id != null) scheduleId = schedule.id
         this.schedule.set(schedule)
 
+        html.removeAttribute("style")
         style {
             val pos = (schedule.time % CALENDAR_GRID_WIDTH) / CALENDAR_GRID_WIDTH.toDouble()
 
@@ -251,7 +259,6 @@ class CalendarEntry(private val calendar: CalendarBody, view: HTMLElement) : Vie
         language = workGroup.language.code
         this.workGroup = workGroup
 
-        html.removeAttribute("style")
         style {
             val size = workGroup.length / CALENDAR_GRID_WIDTH.toDouble()
 
@@ -274,6 +281,10 @@ class CalendarEntry(private val calendar: CalendarBody, view: HTMLElement) : Vie
         calendarErrors?.setErrors(errors)
     }
 
+    fun updateTime(diff: Int, currentTime: Int) {
+        finished = (diff < 0 || diff == 0 && startTime + length < currentTime)
+    }
+
     companion object {
         fun create(calendar: CalendarBody, schedule: Schedule): CalendarEntry {
             val entry = CalendarEntry(calendar, createHtmlView())

src/jsMain/resources/style/components/_board.scss

@@ -31,7 +31,7 @@
           bottom: 0;
           left: 100%;
           margin-left: 1rem;
-          border-right: solid 1px var(--input-border-color);
+          border-right: solid 1px var(--table-border-color);
         }
       }
 

src/jsMain/resources/style/components/_calendar.scss

@@ -302,6 +302,18 @@
     outline: solid 0.4rem var(--error-color);
   }
 
+  &[data-finished = "true"]::before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-primary-color);
+    opacity: 0.6;
+  }
+
   @include no-select()
 }
 

src/jvmMain/kotlin/de/kif/backend/route/Calendar.kt

@@ -32,33 +32,34 @@ import kotlin.math.min
 
 const val MINUTES_OF_DAY = 24 * 60
 
-private fun DIV.calendarCell(schedule: Schedule?) {
+private fun DIV.calendarEntry(schedule: Schedule, diff: Int, currentTime: Int) {
-    if (schedule != null) {
+    span("calendar-entry") {
-        span("calendar-entry") {
+        attributes["style"] = CSSBuilder().apply {
-            attributes["style"] = CSSBuilder().apply {
+            val size = schedule.workGroup.length / CALENDAR_GRID_WIDTH.toDouble()
-                val size = schedule.workGroup.length / CALENDAR_GRID_WIDTH.toDouble()
+            val pos = (schedule.time % CALENDAR_GRID_WIDTH) / CALENDAR_GRID_WIDTH.toDouble()
-                val pos = (schedule.time % CALENDAR_GRID_WIDTH) / CALENDAR_GRID_WIDTH.toDouble()
 
-                this.left = (pos * 100).pct
+            this.left = (pos * 100).pct
-                this.top = (pos * 100).pct + 0.1.rem
+            this.top = (pos * 100).pct + 0.1.rem
 
-                this.width = (size * 100).pct
+            this.width = (size * 100).pct
-                this.height = (size * 100).pct - 0.2.rem
+            this.height = (size * 100).pct - 0.2.rem
 
-                val c = schedule.workGroup.track?.color
+            val c = schedule.workGroup.track?.color
-                if (c != null) {
+            if (c != null) {
-                    backgroundColor = Color(c.toString())
+                backgroundColor = Color(c.toString())
-                    color = Color(c.calcTextColor().toString())
+                color = Color(c.calcTextColor().toString())
-                }
-            }.toString()
-            attributes["data-language"] = schedule.workGroup.language.code
-            attributes["data-id"] = schedule.id.toString()
-            attributes["data-time"] = schedule.time.toString()
-            attributes["data-length"] = schedule.workGroup.length.toString()
-
-            span("calendar-entry-name") {
-                +schedule.workGroup.name
             }
+        }.toString()
+        attributes["data-language"] = schedule.workGroup.language.code
+        attributes["data-id"] = schedule.id.toString()
+        attributes["data-time"] = schedule.time.toString()
+        attributes["data-length"] = schedule.workGroup.length.toString()
+
+        val finished = (diff < 0 || diff == 0 && schedule.time + schedule.workGroup.length < currentTime)
+        attributes["data-finished"] = finished.toString()
+
+        span("calendar-entry-name") {
+            +schedule.workGroup.name
         }
     }
 }
@@ -145,7 +146,9 @@ fun DIV.renderCalendar(
 
                                 val schedule = (start..end).mapNotNull { schedules[room]?.get(it) }.firstOrNull()
 
-                                calendarCell(schedule)
+                                if (schedule != null) {
+                                    calendarEntry(schedule, diff, currentTime)
+                                }
                             }
                         }
                     }