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