From 98165212917843a0823f33d77f9cefb3cd57da27 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 28 Jan 2025 13:01:24 +0100
Subject: [PATCH 1/9] directive(text color contrast): adds a directive that
 determines a suitable font color based on the background color of the element
 through a directive

---
 public/js/directives/contrast.js | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 public/js/directives/contrast.js

diff --git a/public/js/directives/contrast.js b/public/js/directives/contrast.js
new file mode 100644
index 000000000..9210aad57
--- /dev/null
+++ b/public/js/directives/contrast.js
@@ -0,0 +1,35 @@
+const rgbToHex = (value) => {
+	const hex = value.toString(16);
+	return hex.length === 1 ? '0' + hex : hex;
+};
+
+function getContrastYIQ(hexcolor) {
+	
+	var r = parseInt(hexcolor.substring(1, 3), 16);
+	var g = parseInt(hexcolor.substring(3, 5), 16);
+	var b = parseInt(hexcolor.substring(5, 7), 16);
+	var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+	return (yiq >= 128) ? 'black' : 'white';
+}
+
+export default {
+	mounted(element, binding){
+		const bgColor = window.getComputedStyle(element).backgroundColor;
+		let rgbRegEx = new RegExp(/^rgba?\s*\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*,?\s*([0-9]+.?[0-9]?)?\s*\)/);
+		let isRgb = bgColor.match(rgbRegEx);
+		if (isRgb) {
+			if (isRgb.length < 3) {
+				console.error("Invalid RGB color format");
+			}
+			let r = parseInt(isRgb[1], 10);
+			let g = parseInt(isRgb[2], 10);
+			let b = parseInt(isRgb[3], 10);
+			let hexColor = `#${rgbToHex(r)}${rgbToHex(g)}${rgbToHex(b)}`;
+			element.style.color = getContrastYIQ(hexColor);
+		}
+		else
+		{
+			element.style.color = getContrastYIQ(bgColor);
+		}
+	},
+}
\ No newline at end of file

From 8991ab86a5a4cced0be5035854588be895db9c62 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 28 Jan 2025 13:04:43 +0100
Subject: [PATCH 2/9] update(fhc-entry css class): instead of hard coding the
 color the css rules uses the filter:brightness function to highlight or
 darken elements

---
 public/css/Cis4/Cis.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 74d8648e0..0da74a503 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -484,8 +484,7 @@ html {
 }
 
 .fhc-entry:hover{
-	background-color:#005585 !important;
-	color:white !important;
+	filter: brightness(120%) !important;
 }
 
 .fhc-entry.btn:focus {
@@ -502,8 +501,8 @@ html {
 	transition-timing-function: ease-out,ease-out;
 }
 
-[selected].fhc-entry {
-	background-color: #00649C !important;
+[selected="true"].fhc-entry {
+	filter: brightness(120%);
 }
 
 @media screen and ( max-width: 767px ) {

From 9a3221e88ee91843219d04eaed8394ae50c5b8dd Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 28 Jan 2025 13:13:02 +0100
Subject: [PATCH 3/9] update(Fhc.js): installs font contrast directive in the
 global app

---
 public/js/apps/Dashboard/Fhc.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index bf27131d4..4690c067d 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -1,6 +1,7 @@
 import FhcDashboard from '../../components/Dashboard/Dashboard.js';
 import FhcApi from '../../plugin/FhcApi.js';
 import Phrasen from '../../plugin/Phrasen.js';
+import contrast from '../../directives/contrast.js';
 import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers";
 import Stundenplan from "../../components/Cis/Stundenplan/Stundenplan";
 import MylvStudent from "../../components/Cis/Mylv/Student";
@@ -119,4 +120,5 @@ app.use(primevue.config.default, {
 	}
 })
 app.use(Phrasen);
+app.directive('contrast', contrast);
 app.mount('#fhccontent');
\ No newline at end of file

From bd3eeff684df944585160c823bfd675f381f4abd Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 28 Jan 2025 13:22:57 +0100
Subject: [PATCH 4/9] update(Stundenplan Style): changes the background/color
 styles for Calendar events in the different views

---
 public/js/components/Calendar/Calendar.js           | 10 +++++-----
 public/js/components/Calendar/Day/Page.js           |  8 ++++----
 public/js/components/Calendar/Month.js              |  4 ++--
 public/js/components/Calendar/Month/Page.js         |  4 ++--
 public/js/components/Calendar/Week.js               |  4 ++--
 public/js/components/Calendar/Week/Page.js          |  4 ++--
 public/js/components/Cis/Mylv/RoomInformation.js    |  8 ++++----
 public/js/components/Cis/Stundenplan/Stundenplan.js | 10 +++++-----
 public/js/components/DashboardWidget/Stundenplan.js |  4 ++--
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index b9107f45f..5d58f24d5 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -190,7 +190,7 @@ export default {
 	methods: {
 		handleInput(day) {
 			this.$emit(day[0], day[1]);
-		}
+		},
 	},
 	created() {
 		const allowedInitialModes = ['years'];
@@ -227,11 +227,11 @@ export default {
 	template: /*html*/`
 	<div ref="container" class="fhc-calendar card h-100" :class="sizeClass">
 		<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
-			<template #monthPage="{event,day,isSelected}">
-				<slot name="monthPage" :event="event" :day="day" :isSelected="isSelected"></slot>
+			<template #monthPage="{event,day}">
+				<slot name="monthPage" :event="event" :day="day" ></slot>
 			</template>
-			<template #weekPage="{event,day,isSelected}">
-				<slot name="weekPage" :event="event" :day="day" :isSelected="isSelected"></slot>
+			<template #weekPage="{event,day}">
+				<slot name="weekPage" :event="event" :day="day" ></slot>
 			</template>
 			<template #dayPage="{event,day,mobile}">
 				<slot name="dayPage" :event="event" :day="day" :mobile="mobile"></slot>
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index d4f35c8ae..fbd3307a8 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -309,10 +309,10 @@ export default {
 						</div>
 					</div>
 					<div id="scroll g-0" style="height: 100%; overflow: scroll;">
-					
+
 						<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
 							<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
-							
+
 							<Transition>
 								<div v-if="hourPosition && !noEventsCondition" class="position-absolute border-top small"  :style="indicatorStyle">
 									<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
@@ -321,12 +321,12 @@ export default {
 							<div>
 								<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">Keine Lehrveranstaltungen</h1>
 								<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
-		
+
 									<div class="hours">
 										<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 									</div>
 									<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle">
-										<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" :class="{'selectedEvent':event.orig == selectedEvent}" class="mx-2 small rounded overflow-hidden " >
+										<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast :selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden " >
 											<!-- desktop version of the page template, parent receives slotProp mobile = false -->
 											<div class="d-none d-xl-block h-100 "  @click.prevent="eventClick(event)">
 												<slot  name="dayPage" :event="event" :day="day" :mobile="false">
diff --git a/public/js/components/Calendar/Month.js b/public/js/components/Calendar/Month.js
index b1050c75d..c78916133 100644
--- a/public/js/components/Calendar/Month.js
+++ b/public/js/components/Calendar/Month.js
@@ -64,8 +64,8 @@ export default {
 		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'months')" />
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
 			<calendar-month-page :year="focusDate.y" :month="focusDate.m+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" >
-				<template #monthPage="{event,day,isSelected}">
-					<slot name="monthPage" :event="event" :day="day" :isSelected="isSelected"></slot>
+				<template #monthPage="{event,day}">
+					<slot name="monthPage" :event="event" :day="day" ></slot>
 				</template>
 			</calendar-month-page>
 		</calendar-pane>
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 72136b758..78302b154 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -102,8 +102,8 @@ export default {
 			<a href="#" @click.prevent="clickEvent(day,week)" @mouseover="highlight(week,day)" @mouseleave="highlightedWeek = null; highlightedDay = null" v-for="day in week.days" :key="day" :class="{'fhc-calendar-month-page-day-highlight': isHighlighted(week, day)}" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" >
 				<span class="no">{{day.getDate()}}</span>
 				<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
-					<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" >
-						<slot  name="monthPage" :event="event" :day="day" :isSelected="event == selectedEvent">
+					<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" :style="{'background-color': event.color}" class="fhc-entry" :selected="event == selectedEvent" v-contrast >
+						<slot  name="monthPage" :event="event" :day="day" >
 							<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 						</slot>
 					</div>
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
index 8f6b06515..2f704fac9 100644
--- a/public/js/components/Calendar/Week.js
+++ b/public/js/components/Calendar/Week.js
@@ -43,8 +43,8 @@ export default {
 		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'weeks')"/>
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
 			<calendar-week-page :year="focusDate.wYear" :week="focusDate.w+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
-				<template #weekPage="{event,day,isSelected}">
-					<slot name="weekPage" :event="event" :day="day" :isSelected="isSelected"></slot>
+				<template #weekPage="{event,day}">
+					<slot name="weekPage" :event="event" :day="day" ></slot>
 				</template>
 			</calendar-week-page>
 		</calendar-pane>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 15c17f8ea..d82564dd7 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -238,8 +238,8 @@ export default {
 						<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 					</div>
 					<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
-						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden "  >
-							<slot name="weekPage" :event="event" :day="day" :isSelected="event.orig == selectedEvent">
+						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :selected="event.orig == selectedEvent" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden fhc-entry " v-contrast >
+						<slot name="weekPage" :event="event" :day="day">
 								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 							</slot>
 						</div>
diff --git a/public/js/components/Cis/Mylv/RoomInformation.js b/public/js/components/Cis/Mylv/RoomInformation.js
index 299743926..0543663e0 100644
--- a/public/js/components/Cis/Mylv/RoomInformation.js
+++ b/public/js/components/Cis/Mylv/RoomInformation.js
@@ -121,13 +121,13 @@ export default{
     template: /*html*/`
 		<lv-modal v-if="currentlySelectedEvent" :showMenu="false" :event="currentlySelectedEvent" ref="lvmodal" />
 		<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
-            <template #monthPage="{event,day,isSelected}">
-				<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
+            <template #monthPage="{event,day}">
+				<span >
 					{{event.topic}}
 				</span>
 			</template>
-			<template #weekPage="{event,day,isSelected}">
-				<div @click="showModal(event?.orig)" type="button" :class="{'selectedEvent':isSelected}" class="fhc-entry border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
+			<template #weekPage="{event,day}">
+				<div @click="showModal(event?.orig)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
 					<span>{{event?.orig.topic}}</span>
 					<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
 					<span>{{event?.orig.ort_kurzbz}}</span>
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index 78fc118d5..59b8b43d7 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -127,14 +127,14 @@ export const Stundenplan = {
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
 	<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
-		<template #monthPage="{event,day,isSelected}">
-			<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
+		<template #monthPage="{event,day}">
+			<span class="fhc-entry" >
 				{{event.topic}}
 			</span>
 		</template>
-		<template #weekPage="{event,day,isSelected}">
-			<div @click="showModal(event?.orig); console.log(event.orig)" type="button" :class="{'selectedEvent':isSelected}"
-			class="fhc-entry position-relative border border-secondary border d-flex flex-row align-items-center
+		<template #weekPage="{event,day}">
+			<div @click="showModal(event?.orig); " type="button"
+			class=" position-relative border border-secondary border d-flex flex-row align-items-center
 			justify-content-evenly h-100" style="max-height: 75px; overflow: auto;">
 
 				<div v-if="event?.orig?.beginn && event?.orig?.ende" >
diff --git a/public/js/components/DashboardWidget/Stundenplan.js b/public/js/components/DashboardWidget/Stundenplan.js
index 7cba441be..3e60255b9 100644
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -190,8 +190,8 @@ export default {
 		<lv-modal v-if="selectedEvent" ref="lvmodal" :event="selectedEvent"  />
 		<content-modal :content_id="roomInfoContentID" dialogClass="modal-lg" ref="contentModal"/>
 		<fhc-calendar @change:range="updateRange" :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" :widget="true" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" >
-			<template #monthPage="{event,day,isSelected}">
-				<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
+			<template #monthPage="{event,day}">
+				<span  >
 					{{event.topic}}
 				</span>
 			</template>

From 10c718b78c0cad8cf274aec55a54dafee50fddf4 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 29 Jan 2025 12:10:16 +0100
Subject: [PATCH 5/9] update(CalendarDate):changes the stop watcher function

---
 public/js/composables/CalendarDate.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 103d85aa6..92b51b5c6 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -207,7 +207,7 @@ class CalendarDate {
 		return Object.prototype.toString.call(obj) === '[object Date]';
 	}
 	cleanup(){
-		this.watchLocale.stop();
+		this.watchLocale();
 	}
 }
 /**

From 062e6e5f904520cff576ed708fa87ed699784966 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 29 Jan 2025 14:04:36 +0100
Subject: [PATCH 6/9] update(Sprachen.js): updates the usage of the classes
 fhc-entry in the Sprachen.js component

---
 application/views/CisRouterView/CisRouterView.php |  1 +
 public/css/Cis4/Cis.css                           |  5 +++++
 public/css/components/Sprachen.css                | 11 +++++++++++
 public/js/components/Cis/Sprachen.js              |  2 +-
 public/js/components/searchbar/student.js         |  6 +++---
 public/js/composables/CalendarDate.js             |  2 +-
 6 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 public/css/components/Sprachen.css

diff --git a/application/views/CisRouterView/CisRouterView.php b/application/views/CisRouterView/CisRouterView.php
index 137f6cc65..a7b3d6f80 100644
--- a/application/views/CisRouterView/CisRouterView.php
+++ b/application/views/CisRouterView/CisRouterView.php
@@ -14,6 +14,7 @@ $includesArray = array(
 		'public/css/Fhc.css',
 		'public/css/components/dashboard.css',
 		'public/css/components/calendar.css',
+		'public/css/components/Sprachen.css',
 		'public/css/components/MyLv.css',
 		'public/css/components/FilterComponent.css',
 		'public/css/components/Profil.css',
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 0da74a503..155dd9174 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -1,5 +1,7 @@
 /* basic */
 @import '../components/searchbar/searchbar.css';
+@import '../components/Sprachen.css';
+
 html {
   font-size: 0.875em;
 }
@@ -7,6 +9,7 @@ html {
 /* variables */
 :root {
   --fhc-cis-primary: #00649c;
+  --fhc-cis-primary-hover: #005585;
   --fhc-cis-header-px: 1rem;
   --fhc-cis-header-py: .5rem;
   --fhc-cis-main-px: 1.5rem;
@@ -50,6 +53,8 @@ html {
   }
 }
 
+
+
 /* buttons */
 #cis-header .btn-level-1,
 #cis-header .btn-level-1 + .btn,
diff --git a/public/css/components/Sprachen.css b/public/css/components/Sprachen.css
new file mode 100644
index 000000000..99c47f315
--- /dev/null
+++ b/public/css/components/Sprachen.css
@@ -0,0 +1,11 @@
+.sprachen-entry{
+	background-color: var(--fhc-cis-primary);
+}
+
+[selected="true"].sprachen-entry {
+	background-color: var(--fhc-cis-primary-hover);
+}
+
+.sprachen-entry.btn {
+	border-radius: 0 !important;
+}
diff --git a/public/js/components/Cis/Sprachen.js b/public/js/components/Cis/Sprachen.js
index b64abb544..397efae82 100644
--- a/public/js/components/Cis/Sprachen.js
+++ b/public/js/components/Cis/Sprachen.js
@@ -21,7 +21,7 @@ export default {
 	template:/*html*/`
 	<div class="container">
 		<div class="row justify-content-center align-items-center flex-nowrap overflow-hidden">
-			<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col text-white fhc-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache?'':null">{{lang.bezeichnung}}</button>
+			<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col text-white sprachen-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache">{{lang.bezeichnung}}</button>
 		</div>
 	</div>
 	`,
diff --git a/public/js/components/searchbar/student.js b/public/js/components/searchbar/student.js
index 4bc801fa7..a9d52da90 100644
--- a/public/js/components/searchbar/student.js
+++ b/public/js/components/searchbar/student.js
@@ -38,7 +38,7 @@ export default {
                         </div>
 
                         <div class="searchbar_tablerow">
-                            <div class="searchbar_tablecell">Studiengang</div>
+                            <div class="searchbar_tablecell">{{$p.t('lehre','studiengang')}}</div>
                             <div class="searchbar_tablecell">
                                 {{ res.studiengang }}
                             </div>
@@ -52,14 +52,14 @@ export default {
                         </div>
         
                         <div class="searchbar_tablerow">
-                            <div class="searchbar_tablecell">Matrikelnummer</div>
+                            <div class="searchbar_tablecell">{{$p.t('person','personenkennzeichen')}}</div>
                             <div class="searchbar_tablecell">
                                 {{ res.matrikelnr }}
                             </div>
                         </div>
         
                         <div class="searchbar_tablerow">
-                            <div class="searchbar_tablecell">EMail</div>
+                            <div class="searchbar_tablecell">{{$p.t('person','email')}}</div>
                             <div class="searchbar_tablecell">
                                 <a :href="this.mailtourl">
                                     {{ res.email }}
diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 92b51b5c6..63e17148d 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -10,7 +10,7 @@ class CalendarDate {
 				this.weekStart = CalendarDate.getWeekStart();
 				this._clean();
 				onCleanup((cleanup)=>{
-					console.log(cleanup,"HERE IA M")
+					// do clean up
 				});
 			},
 			

From b855c404e42888cbb2f56f533d702ed235c113a2 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 29 Jan 2025 14:33:42 +0100
Subject: [PATCH 7/9] update(Cis Profil picture): instead of using cover, uses
 contain for the cis profile picture and adds a black border and background
 color

---
 public/css/Cis4/Cis.css          | 4 ++--
 public/js/components/Cis/Menu.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 155dd9174..2fbfb0cd7 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -348,7 +348,7 @@ html {
     background-color: var(--fhc-cis-primary);
   }
   #nav-user-btn img {
-    object-fit: cover;
+    object-fit: contain;
     height: calc(var(--fhc-cis-header-height) - 2 * var(--fhc-cis-header-py));
     width: calc(var(--fhc-cis-header-height) - 2 * var(--fhc-cis-header-py));
   }
@@ -359,7 +359,7 @@ html {
   }
 
   #nav-user-menu img {
-    object-fit: cover;
+    object-fit: contain;
     height: calc( 3 * var(--fhc-cis-header-py));
   }
 
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 3381c9686..a5e3961bb 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -109,7 +109,7 @@ export default {
     </a>
 	<div id="nav-user">
 		<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
-			<img :src="avatarUrl" class="avatar rounded-circle"/>
+			<img :src="avatarUrl" class="bg-dark avatar rounded-circle border border-dark"/>
 		</button>
 		<ul ref="navUserDropdown"
 		@[\`shown.bs.collapse\`]="handleShowNavUser"

From 0892b94c930cd696afc5ce1f95bb92ebd436b26a Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 31 Jan 2025 12:08:40 +0100
Subject: [PATCH 8/9] update(legacyLinkHelper): fixes little regex bugs

---
 public/js/helpers/LegacyLinkReplaceHelper.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/js/helpers/LegacyLinkReplaceHelper.js b/public/js/helpers/LegacyLinkReplaceHelper.js
index 2b2086108..1042e01ca 100644
--- a/public/js/helpers/LegacyLinkReplaceHelper.js
+++ b/public/js/helpers/LegacyLinkReplaceHelper.js
@@ -19,12 +19,12 @@ const regexList = {
 		},
 		{ 
 			priority: 3,
-			regex: new RegExp(/^\.\.\/index\.ci\.php\//),
+			regex: new RegExp(/^\.\.\/index\.ci\.php/),
 			replacement: FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router,
 		},
 		{ 
 			priority: 10, 
-			regex: new RegExp("/^\.\.\//"),
+			regex: new RegExp(/^\.\.\//),
 			replacement: FHC_JS_DATA_STORAGE_OBJECT.app_root,
 		},
 	],
@@ -61,7 +61,7 @@ const absolute_regex = regexList.absolute
 
 
 export function replaceRelativeLegacyLink(relativeLegacyLink){
-	for (let {regex,replacement,group_replacement_strategy} of relative_regex){		
+	for (let {regex,replacement,group_replacement_strategy} of relative_regex){	
 		// if any of the regex matches the relativeLegacyLink, replace the matched part with the new app_root path
 		let match = relativeLegacyLink.match(regex);
 		if (match) {

From c1918726df16e5f84fd23bd7849997201c399dec Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Fri, 31 Jan 2025 14:09:05 +0100
Subject: [PATCH 9/9] Stundenplan Week Page smaller breakpoints style handling;
 searchbar emit action finished on default link click; month stundenplan past
 days  use opacity-50 class; Day page height fix of right col;

---
 public/js/apps/Cis.js                         | 13 +++++-----
 public/js/components/Calendar/Day/Page.js     |  6 ++---
 public/js/components/Calendar/Month/Page.js   | 26 +++++++++++++++++--
 public/js/components/Calendar/Pane.js         |  2 +-
 public/js/components/Calendar/Week/Page.js    | 12 ++++++---
 .../components/Cis/Stundenplan/Stundenplan.js | 10 +++----
 public/js/components/Dashboard/Item.js        |  1 +
 public/js/components/Dashboard/Section.js     |  2 +-
 .../components/DashboardWidget/Stundenplan.js | 22 ----------------
 public/js/components/Drop/Grid.js             |  1 +
 public/js/components/searchbar/action.js      |  2 +-
 public/js/composables/CalendarDate.js         |  7 ++++-
 12 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js
index da658dc47..482c2774a 100644
--- a/public/js/apps/Cis.js
+++ b/public/js/apps/Cis.js
@@ -27,13 +27,12 @@ const app = Vue.createApp({
                         defaultaction: {
                             type: "link",
                             action: function(data) {
-                                return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router+
-                                "/Cis/Profil/View/"+data.uid; 
-                                
-                            }
-                        },
+									return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router+
+										"/Cis/Profil/View/"+data.uid;
+							}
+						},
                         childactions: []
-                    },
+					},
 					student: {
 						defaultaction: {
 							type: "link",
@@ -115,7 +114,7 @@ const app = Vue.createApp({
     methods: {
         searchfunction: function(searchsettings) {
             return Vue.$fhcapi.search.search(searchsettings);
-        },
+        }
     }
 });
 app.use(FhcApi);
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index fbd3307a8..f545c61ae 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -348,9 +348,9 @@ export default {
 					</div>
 				</div>
 			</div>
-			<div class="d-xl-block col-xl-6 p-0">
-				<div style="z-index:0" class="p-4 sticky-top d-flex justify-content-center align-items-center flex-column">
-					<div style="max-height: calc(var(--fhc-calendar-pane-height)); overflow-y:auto;" class="w-100">
+			<div class="d-xl-block col-xl-6 p-4" style="max-height: 100%">
+				<div style="z-index:0; max-height: 100%" class="sticky-top d-flex justify-content-center align-items-center flex-column">
+					<div style="max-height: 100%; overflow-y:auto;" class="w-100">
 						<template v-if="selectedEvent && lvMenu">
 							<slot name="pageMobilContent" :lvMenu="lvMenu" >
 								<p>this is a slot placeholder</p>
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 78302b154..a52a94b55 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -1,6 +1,7 @@
 import CalendarDate from '../../../composables/CalendarDate.js';
 
 export default {
+	name: 'MonthPage',
 	data(){
 		return{
 			highlightedWeek: null,
@@ -60,6 +61,18 @@ export default {
 		
 	},
 	methods: {
+		getDayClass(week, day) {
+			let classstring = 'fhc-calendar-month-page-day text-decoration-none overflow-hidden'
+			const isHighlighted = this.isHighlighted(week, day)
+			const isThisDate = this.date.compare(day)
+			const isNotThisMonth = day.getMonth() != this.month
+			const isInThePast = this.date.isInPast(day)
+			if(isHighlighted) classstring += ' fhc-calendar-month-page-day-highlight'
+			if(isThisDate) classstring += ' active'
+			if(isNotThisMonth || isInThePast) classstring += ' opacity-50'
+			
+			return classstring
+		},
 		selectDay(day) {
 			this.date.set(day);
 			this.$emit('input', day);
@@ -72,6 +85,7 @@ export default {
 			}
 		},
 		highlight(week, day){
+			console.log('highlight method')
 			this.highlightedWeek = week.no; 
 			this.highlightedDay = day;
 		},
@@ -97,9 +111,17 @@ export default {
 		<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
 			{{dayText[day]}}
 		</div>
-		<template v-for="week in weeks" :key="week.no">
+		<template v-for="week in weeks" 
+		:key="week.no">
 			<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end opacity-25" @click.prevent="changeToWeek(week)">{{week.no}}</a>
-			<a href="#" @click.prevent="clickEvent(day,week)" @mouseover="highlight(week,day)" @mouseleave="highlightedWeek = null; highlightedDay = null" v-for="day in week.days" :key="day" :class="{'fhc-calendar-month-page-day-highlight': isHighlighted(week, day)}" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" >
+			<a href="#" 
+			@click.prevent="clickEvent(day,week)" 
+			@mouseover="highlight(week,day)" 
+			@mouseleave="highlightedWeek = null; highlightedDay = null"
+			v-for="day in week.days" 
+			:key="day"
+			:class="getDayClass(week, day)" 
+			>
 				<span class="no">{{day.getDate()}}</span>
 				<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
 					<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" :style="{'background-color': event.color}" class="fhc-entry" :selected="event == selectedEvent" v-contrast >
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index fe23dcd09..5a3a43aa9 100644
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -1,4 +1,5 @@
 export default {
+	name: 'Pane',
 	emits: [
 		'slid'
 	],
@@ -81,7 +82,6 @@ export default {
 	},
 	template: `
 	<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
-		<!--height calc function just for user testing purpose (has to be fixed)-->
 		<div id="calendarContainer" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
 			<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item" style="height:var(--fhc-calendar-pane-height);">
 				<slot :active="i == activeCarouselItemIndex" :index="i" :offset="offsets[i]" />
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index d82564dd7..7e3697590 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -4,6 +4,7 @@ function ggt(m,n) { return n==0 ? m : ggt(n, m%n); }
 function kgv(m,n) { return (m*n) / ggt(m,n); }
 
 export default {
+	name: 'WeekPage',
 	data(){
 		return{
 			hourPosition:null,
@@ -83,7 +84,6 @@ export default {
 		eventsPerDayAndHour() {
 			// return early if the calendar pane is sliding
 			if (this.isSliding) return {};
-			
 			const res = {};
 			this.days.forEach(day => {
 				let key = day.toDateString();
@@ -148,7 +148,7 @@ export default {
 				'grid-row-start': this.dateToMinutesOfDay(event.start),
 				'grid-row-end': this.dateToMinutesOfDay(event.end),
 				'background-color': event.orig.color,
-				'--test': this.dateToMinutesOfDay(event.end),
+				'max-height': '75px'				
 			}
 		},
 		calcHourPosition(event) {
@@ -218,7 +218,7 @@ export default {
 		if(container) container.style.overflow = 'scroll'
 	},
 	template: /*html*/`
-	<div class="fhc-calendar-week-page">
+	<div class="fhc-calendar-week-page" style="min-width: 700px;">
 		<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
 				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToMonth(day)">
@@ -238,7 +238,11 @@ export default {
 						<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 					</div>
 					<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
-						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :selected="event.orig == selectedEvent" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden fhc-entry " v-contrast >
+						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" 
+						:selected="event.orig == selectedEvent"
+						:style="eventGridStyle(day,event)"
+						class="mx-2 small rounded overflow-hidden fhc-entry "
+						v-contrast >
 						<slot name="weekPage" :event="event" :day="day">
 								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 							</slot>
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index 59b8b43d7..06566f643 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -134,16 +134,16 @@ export const Stundenplan = {
 		</template>
 		<template #weekPage="{event,day}">
 			<div @click="showModal(event?.orig); " type="button"
-			class=" position-relative border border-secondary border d-flex flex-row align-items-center
-			justify-content-evenly h-100" style="max-height: 75px; overflow: auto;">
+			class=" position-relative border border-secondary border d-flex flex-col align-items-center
+			justify-content-evenly h-100" style="overflow: auto;">
 
-				<div v-if="event?.orig?.beginn && event?.orig?.ende" >
-					<div class="d-flex flex-column p-4 border-end border-secondary">
+				<div v-if="event?.orig?.beginn && event?.orig?.ende" class="d-none d-xl-block" >
+					<div class="d-flex flex-column p-4 p-xl-2 border-end border-secondary">
 						<span class="small">{{convertTime(event.orig.beginn.split(":"))}}</span>
 						<span class="small">{{convertTime(event.orig.ende.split(":"))}}</span>
 					</div>
 				</div>
-				<div class="d-flex flex-column flex-grow-1 align-items-center">
+				<div class="d-flex flex-column flex-grow-1 align-items-center" style="font-size: 0.75rem">
 					<span>{{event?.orig.topic}}</span>
 					<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
 					<span>{{event?.orig.ort_kurzbz}}</span>
diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index 8bfd55908..379437b74 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -3,6 +3,7 @@ import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.j
 import HeightTransition from "../Tranistion/HeightTransition.js";
 
 export default {
+	name: 'Item',
 	components: {
 		BsModal,
 		HeightTransition
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index 91c978a63..6ab57ee77 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -2,8 +2,8 @@ import BsConfirm from "../Bootstrap/Confirm.js";
 import DropGrid from '../Drop/Grid.js'
 import DashboardItem from "./Item.js";
 import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
-
 export default {
+	name: 'Section',
 	components: {
 		DropGrid,
 		DashboardItem
diff --git a/public/js/components/DashboardWidget/Stundenplan.js b/public/js/components/DashboardWidget/Stundenplan.js
index 3e60255b9..aca6227d8 100644
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -162,28 +162,6 @@ export default {
 	created() {
 		this.$emit('setConfig', false);
 		this.loadEvents();
-		/* axios
-			.get(this.apiurl + '/components/Cis/Stundenplan/Stunden').then(res => {
-				res.data.retval.forEach(std => {
-					this.stunden[std.stunde] = std; // TODO(chris): geht besser
-				});
-				axios
-					.get(this.apiurl + '/components/Cis/Stundenplan')
-					.then(res => {
-						res.data.retval.forEach((el, i) => {
-							el.id = i;
-							el.color = '#' + (el.farbe || 'CCCCCC');
-							el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
-							el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
-							el.title = el.lehrfach;
-							if (el.lehrform)
-								el.title += '-' + el.lehrform;
-						});
-						this.events = res.data.retval || [];
-					})
-					.catch(err => { console.log(err);console.error('ERROR: ', err.response.data) });
-			})
-			.catch(err => { console.error('ERROR: ', err.response.data) }); */
 	},
 	template: /*html*/`
 	<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index 44ee91e23..97f83ddd3 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -8,6 +8,7 @@ const MODE_MOVE = 1;
 const MODE_RESIZE = 2;
 
 export default {
+	name: 'Grid',
 	components: {
 		GridItem
 	},
diff --git a/public/js/components/searchbar/action.js b/public/js/components/searchbar/action.js
index f4745a08e..e8db391c9 100644
--- a/public/js/components/searchbar/action.js
+++ b/public/js/components/searchbar/action.js
@@ -15,7 +15,7 @@ export default {
     template: `
 		<template v-if="this.renderif()">
 			<a :class="this.cssclass" :href="this.getactionhref()"
-				@click="(this.action.type === 'function') ? this.execaction() : null">
+				@click="this.execaction()">
 				<slot>Action</slot>
 			</a>
 		</template>
diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 63e17148d..25fa51452 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -199,6 +199,11 @@ class CalendarDate {
 			return true;
 		return false;
 	}
+	isInPast(d) {
+		if (this.isDate(d))
+			return (this.y > d.getFullYear() || this.m > d.getMonth() || this.d > d.getDate());
+		return false
+	}
 	setLocale(locale) {
 		this.weekStart = CalendarDate.getWeekStart(locale);
 	}
@@ -207,7 +212,7 @@ class CalendarDate {
 		return Object.prototype.toString.call(obj) === '[object Date]';
 	}
 	cleanup(){
-		this.watchLocale();
+		if(this.watchLocale && this.watchLocale.stop) this.watchLocale.stop(); // TODO: ?
 	}
 }
 /**