From 094a3ed56a585f85e3c488bf0513090d6cd3c88b Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 11 Nov 2024 15:46:09 +0100
Subject: [PATCH] feature(Calendar): scrolls to the first event of the day if
 the prop scrollTime is passed to Calendar component

---
 public/js/apps/Cis/Stundenplan.js          | 20 ++++++++++++++++++--
 public/js/components/Calendar/Calendar.js  | 17 ++++++++++++++++-
 public/js/components/Calendar/Day/Page.js  |  2 +-
 public/js/components/Calendar/Week/Page.js |  7 ++++---
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index cb019952c..6835dc3a3 100644
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -32,6 +32,17 @@ const app = Vue.createApp({
 		monthLastDay: function () {
 			return this.calendarDateToString(this.calendarDate.cdLastDayOfCalendarMonth);
 		},
+		// returns the hour of the earliest event 
+		eventsBeginnTime: function(){
+			if(this.events && Array.isArray(this.events) && this.events.length > 0)
+			{
+				return parseInt(this.events.sort((a, b) => parseInt(a.beginn) - parseInt(b.beginn))[0].beginn);
+			}
+			else
+			{
+				return null;
+			}
+		},
 	},
 	methods:{
 		selectDay: function(day){
@@ -98,15 +109,20 @@ const app = Vue.createApp({
 			});
 		},
 	},
-	created(){
+	created()
+	{
 		this.loadEvents();
+	},
+	mounted()
+	{
+		
 	},
 	//TODO: Stundenplan phrase
 	template:/*html*/`
 	<h2>Stundenplan</h2>
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
-	<fhc-calendar :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
+	<fhc-calendar :scrollTime="eventsBeginnTime" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
 		<template #weekPage="{event,day}">
 			<div @click="showModal(event?.orig)" type="button" class="d-flex flex-column align-items-center justify-content-evenly h-100">
 				<span>{{event?.orig.topic}}</span>
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index dd12456ca..73ad54730 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -55,7 +55,22 @@ export default {
 		},
 		minimized: Boolean,
 		noWeekView: Boolean,
-		noMonthView: Boolean
+		noMonthView: Boolean,
+		scrollTime: Number,
+	},
+	watch:{
+		scrollTime(newScrollTime){
+			let previousScrollAnchor = document.getElementById('scroll' + (newScrollTime-1) + this.focusDate.w)			// scroll the Stundenplan to the closest event
+			let scrollAnchor = document.getElementById('scroll' + newScrollTime+this.focusDate.w);
+			if (previousScrollAnchor)
+			{
+				previousScrollAnchor.scrollIntoView();
+			}else{
+				if (scrollAnchor) {
+					scrollAnchor.scrollIntoView();
+				}
+			}
+		}
 	},
 	emits: [
 		'select:day',
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 877ab9873..e02cffa3f 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -149,7 +149,7 @@ export default {
 					</div>
 				</div>
 				<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
-					<div v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
+					<div :id="'scroll'+hour+week" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
 					<div v-if="hourPosition" class="position-absolute border-top small"  style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
 						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
 					</div>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 2eba70699..001bbfe33 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -137,11 +137,12 @@ export default {
 		}
 	},
 	mounted() {
+
 		setTimeout(() => this.$refs.eventcontainer.scrollTop = this.$refs.eventcontainer.scrollHeight / 3 + 1, 0);
 	},
-	template: `
+	template: /*html*/`
 	<div class="fhc-calendar-week-page">
-	
+
 		<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'z-index':4,'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
 				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
@@ -150,7 +151,7 @@ export default {
 				</div>
 			</div>
 			<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
-				<div v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
+				<div :id="'scroll'+hour+week" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
 				<div v-if="hourPosition" class="position-absolute border-top small"  style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
 					<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
 				</div>