From ca7ded38d25703e2a1fcb49c68b7078589fa4a66 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 8 Nov 2024 16:08:08 +0100
Subject: [PATCH] refactor(Stundenplan indicator): uses a 5 minute interval for
 the Stundenplan indicator

---
 public/js/components/Calendar/Day/Page.js  | 22 ++++++++++++++---
 public/js/components/Calendar/Week/Page.js | 28 ++++++++++++++++------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 0da529b98..c66dcf33a 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -79,11 +79,11 @@ export default {
 	},
 	methods: {
 		calcHourPosition(event) {
+			let height = this.$refs.eventcontainer.getBoundingClientRect().height;
 			let top = this.$refs.eventcontainer.getBoundingClientRect().top;
 			let position = event.clientY - top;
-			this.hourPosition = position;
 			// position percentage of total height
-			let timePercentage = (position / this.$refs.eventcontainer.offsetHeight) * 100;
+			let timePercentage = (position / height) * 100;
 			// minute percentage of total minutes
 			let result = (this.hours.length * 60) * (timePercentage / 100);
 			// calculate time in float
@@ -94,11 +94,27 @@ export default {
 			let minutePercentage = currentMinutes % currentHour;
 			// calculate minutes from float part of time
 			let minute = Math.round(60 * minutePercentage);
+			// convert minutes to 5 minute interval
+			if (minute % 5 != 0) 
+			{
+				minute = Math.round(minute / 5) * 5;
+			}
 			// in case the rounding made the minutes 60, increase the hour and reset the minutes
-			if (minute == 60) {
+			if (minute == 60) 
+			{
 				currentHour++;
 				minute = 0;
 			}
+			
+			// ## after rounding the time to the nearest 5 Minute interval, we have to convert the time back to the relative position
+			// convert current time in minutes
+			currentMinutes = currentHour * 60 + minute;
+			// calculate the minutes percentage of the total minutes 
+			timePercentage = ((currentMinutes - ( this.hours[0] * 60 ) ) / ( this.hours.length * 60 ) ) * 100;
+			// calculate the relative position of the time percentage
+			position = height * (timePercentage / 100);
+			this.hourPosition = position;
+			
 			// add padding to minutes that consist of only one digit
 			minute.toString().length == 1 ? minute = "0" + minute : minute;
 			this.hourPositionTime = currentHour + ":" + minute;
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 1692c457b..75b7bed4d 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -82,30 +82,44 @@ export default {
 		}
 	},
 	methods: {
-		calcHourPosition(event){
+		calcHourPosition(event) {
+			let height = this.$refs.eventcontainer.getBoundingClientRect().height;
 			let top = this.$refs.eventcontainer.getBoundingClientRect().top;
 			let position = event.clientY - top;
-			this.hourPosition = position;
 			// position percentage of total height
-			let timePercentage = (position / this.$refs.eventcontainer.offsetHeight) * 100;
+			let timePercentage = (position / height) * 100;
 			// minute percentage of total minutes
-			let result = (this.hours.length * 60) * (timePercentage/100);
+			let result = (this.hours.length * 60) * (timePercentage / 100);
 			// calculate time in float
-			let currentMinutes = ((result+(this.hours[0]*60))/60);
+			let currentMinutes = ((result + (this.hours[0] * 60)) / 60);
 			// get hour part of time
 			let currentHour = Math.floor(currentMinutes);
 			// get float part of time
 			let minutePercentage = currentMinutes % currentHour;
 			// calculate minutes from float part of time
 			let minute = Math.round(60 * minutePercentage);
+			// convert minutes to 5 minute interval
+			if (minute % 5 != 0) {
+				minute = Math.round(minute / 5) * 5;
+			}
 			// in case the rounding made the minutes 60, increase the hour and reset the minutes
-			if(minute == 60){
+			if (minute == 60) {
 				currentHour++;
 				minute = 0;
 			}
+
+			// ## after rounding the time to the nearest 5 Minute interval, we have to convert the time back to the relative position
+			// convert current time in minutes
+			currentMinutes = currentHour * 60 + minute;
+			// calculate the minutes percentage of the total minutes 
+			timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
+			// calculate the relative position of the time percentage
+			position = height * (timePercentage / 100);
+			this.hourPosition = position;
+
 			// add padding to minutes that consist of only one digit
 			minute.toString().length == 1 ? minute = "0" + minute : minute;
-			this.hourPositionTime = currentHour + ":" + minute; 
+			this.hourPositionTime = currentHour + ":" + minute;
 		},
 		getAbsolutePositionForHour(hour){
 			// used for the absolute positioning of the gutters of hours