feature(Calendar Moodle Events): displays moodle events as allDayEvents in the Calendar

public/js/components/Calendar/Week/Page.js

@@ -10,7 +10,7 @@ export default {
 			hourPosition:null,
 			hourPositionTime:null,
 			resizeObserver: null,
-			width: 0
+			width: 0,
 		}
 	},
 	inject: [
@@ -36,6 +36,16 @@ export default {
 		'input',
 	],
 	computed: {
+		allDayEvents(){
+			let allDayEvents = {};
+			for(let day in this.events){
+				const filteredAllDayEvents = this.events[day].filter(event=>event.allDayEvent);
+				if (filteredAllDayEvents.length > 0){
+					allDayEvents[day]=filteredAllDayEvents;
+				}
+			};
+			return allDayEvents;
+		},
 		getGridStyle() {
 			return {
 				'min-height': '100px',
@@ -126,6 +136,7 @@ export default {
 				d.isToday = nextDay.getFullYear() === this.todayDate.getFullYear() && nextDay.getMonth() === this.todayDate.getMonth() && nextDay.getDate() === this.todayDate.getDate()
 				if (this.events[key]) {
 					this.events[key].forEach(evt => {
+						if (evt.allDayEvent) return;
 						let event = {orig:evt,lane:1,maxLane:1,start: evt.start < day ? day : evt.start, end: evt.end > nextDay ? nextDay : evt.end,shared:[],setSharedMaxRecursive(doneItems) {
 							this.maxLane = Math.max(doneItems[0].maxLane, this.maxLane);
 							doneItems.push(this);
@@ -197,31 +208,44 @@ export default {
 				'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)',
 				'grid-template-rows': 'repeat(' + (this.hours.length * 60 / this.smallestTimeFrame) + ', 1fr)',
 			}
-			console.log(this.smallestTimeFrame,"this is the smallest timeframe")
-			console.log(this.hours.length,"this is the length of the hours")
-			console.log(this.hours.length/60, "this is the length of the hours multiplied by 60 resulting in minutes")
 			if(day.isPast) {
 				styleObj['background-color'] = '#F5E9D7'
 				styleObj['border-color'] = '#E8E8E8';
 				styleObj.opacity = 0.5;
 			} else if (day.isToday) {
 				
-				// styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
-				// styleObj['border-color'] = '#E8E8E8';
-				// styleObj.opacity = 0.5;
+				styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
+				styleObj['border-color'] = '#E8E8E8';
+				styleObj.opacity = 0.5;
 			}
 			
 			return styleObj
 		},
 		eventGridStyle(day, event) {
-			return {
-				'z-index': 1,
-				'grid-column-start': 1 + (event.lane - 1) * day.lanes / event.maxLane,
-				'grid-column-end': 1 + event.lane * day.lanes / event.maxLane,
-				'grid-row-start': this.dateToMinutesOfDay(event.start),
-				'grid-row-end': this.dateToMinutesOfDay(event.end),
-				'background-color': event.orig.color,
-				'max-height': '75px'				
+			if (event.orig.allDayEvent)
+			{
+				return;
+				return {
+					'z-index': '2',
+					'grid-column': '1 / -1',
+					'background-color': 'rgb(204, 204, 204)',
+					'max-height': '75px',
+					color: 'black',
+					position: 'sticky',
+					top: '44px',
+				};
+			}
+			else
+			{
+				return {
+					'z-index': 1,
+					'grid-column-start': 1 + (event.lane - 1) * day.lanes / event.maxLane,
+					'grid-column-end': 1 + event.lane * day.lanes / event.maxLane,
+					'grid-row-start': this.dateToMinutesOfDay(event.start),
+					'grid-row-end': this.dateToMinutesOfDay(event.end),
+					'background-color': event.orig.color,
+					'max-height': '75px'
+				};
 			}
 		},
 		calcHourPosition(event) {
@@ -333,12 +357,27 @@ export default {
 						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
 					</div>
 				</Transition>
-				
+
 				<div class="events" :ref="'eventsRef'+week">
+
 					<div class="hours">
 						<div v-for="hour in hours" :style="getGridStyle" :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="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start position-relative" :style="dayGridStyle(day)">
+						<div class="position-absolute w-100" style="top:0; bottom:0;">
+							<div class="position-sticky d-grid gap-1" style="top:44px;" v-for="(events,_day) in allDayEvents" :key="day">
+								<div v-if="dayindex == _day" v-for="event in events" :key="event" @click.prevent="weekPageClick(event, _day)"
+									:selected="event == selectedEvent"
+									:style="{'background-color': event?.color, 'z-index':2}"
+									class="small rounded overflow-hidden fhc-entry "
+									v-contrast
+									>
+									<slot class="p-1" 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>
+							</div>
+						</div>
 						<Transition>
 							<div v-if="day.isToday" class="position-absolute border-top small"  :style="curIndicatorStyle">
 								<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
@@ -350,7 +389,7 @@ export default {
 						:style="eventGridStyle(day,event)"
 						class="mx-2 small rounded overflow-hidden fhc-entry "
 						v-contrast >
-							<slot name="weekPage" :event="event" :day="day">
+							<slot name="weekPage" :event="event.orig" :day="day">
 								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 							</slot>		
 						</div>

public/js/components/Cis/Mylv/LvModal.js

@@ -35,7 +35,7 @@ export default {
 	},
 	data() {
 		return {
-			menu: [],
+			menu: null,
 			result: false,
 			info: null,
 		};
@@ -76,7 +76,7 @@ export default {
 		<template v-slot:default>
 			<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
 			<lv-info :event="event"></lv-info>
-			<template v-if="showMenu">
+			<template v-if="showMenu && this.menu">
 				<h3 >Lehrveranstaltungs Menu</h3>
 				<lv-menu :menu="menu"></lv-menu>
 			</template>

public/js/components/Cis/Stundenplan/Stundenplan.js

@@ -118,7 +118,8 @@ export const Stundenplan = {
 		loadEvents: function(){
 			Promise.allSettled([
 				this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay, this.viewData.lv_id),
-				this.$fhcApi.factory.stundenplan.getStundenplanReservierungen(this.monthFirstDay, this.monthLastDay)
+				this.$fhcApi.factory.stundenplan.getStundenplanReservierungen(this.monthFirstDay, this.monthLastDay),
+				this.loadMoodleEvents(this.monthFirstDay, this.monthLastDay)
 			]).then((result) => {
 				let promise_events = [];
 				result.forEach((promise_result) => {
@@ -147,14 +148,49 @@ export const Stundenplan = {
 				this.events = promise_events;
 			});
 		},
+		loadMoodleEvents: function(start_date, end_date){
+			
+			let date_start = Math.floor(new Date(start_date).getTime() / 1000);
+			let date_end = Math.floor(new Date(end_date).getTime() / 1000);
+			return this.$fhcApi.factory.stundenplan.getMoodleEventsByUserid('io23m005', date_start, date_end).then((response) => response.events).then(events => {
+				let data =events.map(event =>{
+					const start_date = new Date(event.timestart * 1000);
+					const formatted_year = Intl.DateTimeFormat(this.$p.user_locale, { year: 'numeric' }).format(start_date);
+					const formatted_month = Intl.DateTimeFormat(this.$p.user_locale, { month: '2-digit' }).format(start_date);
+					const formatted_day = Intl.DateTimeFormat(this.$p.user_locale, { year: '2-digit' }).format(start_date);
+					const formatted_date = `${formatted_year}-${formatted_month}-${formatted_day}`;
+					return {
+						type:'moodle',
+						beginn: "14:00:00",
+						ende: "15:00:00",
+						allDayEvent: true,
+						datum: formatted_date,
+						topic: event.activityname,
+						lektor:[],
+						gruppe:[],
+						ort_kurzbz: event.location,
+						lehreinheit_id:0,
+						titel: event.activitystr,
+						lehrfach:'',
+						lehrform:'',
+						lehrfach_bez:'',
+						organisationseinheit:'',
+						farbe:'00689E',
+						lehrveranstaltung_id:0,
+						ort_content_id:0,
+					}
+				});
+				return {
+					data: data,
+					meta: { status: 'success' }
+				};
+			})
+			
+		},
 	},
 	created()
 	{
-		let time_start = Math.floor(this.eventCalendarDate.firstDayOfCalendarMonth.getTime() / 1000);
-		let time_end = Math.floor(this.eventCalendarDate.lastDayOfCalendarMonth.getTime() / 1000);
-		this.$fhcApi.factory.stundenplan.getMoodleEventsByUserid('io23m005', time_start, time_end).then((response) => {
-			console.log(response);
-		})
+		
 		this.$fhcApi.factory.authinfo.getAuthUID().then((res) => res.data)
 		.then(data=>{
 			this.uid = data.uid;
@@ -185,20 +221,24 @@ export const Stundenplan = {
 			</span>
 		</template>
 		<template #weekPage="{event,day}">
-			<div @click="showModal(event?.orig); " type="button"
-			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" class="d-none d-xl-block" >
+			<div @click="showModal(event); " type="button"
+			class=" position-relative border border-secondary border d-flex flex-col align-items-center justify-content-evenly h-100"
+			:class="{'p-1':event.allDayEvent}"
+			style="overflow: auto;">
+				<div v-if="!event.allDayEvent && event?.beginn && event?.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>
+						<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
+						<span class="small">{{convertTime(event.ende.split(":"))}}</span>
 					</div>
 				</div>
-				<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>
+				<div v-if="event.type=='moodle'" class="d-flex small w-100" >
+					<span >moodle:</span>
+					<span class="flex-grow-1 text-center">{{event.titel}}</span>
+				</div>
+				<div v-else class="d-flex flex-column flex-grow-1 align-items-center small">
+					<span>{{event.topic}}</span>
+					<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
+					<span>{{event.ort_kurzbz}}</span>
 				</div>
 			</div>
 		</template>