Merge branch 'feature-25999/C4_cleanup' into merge_C4_25999_61235_61730_testremerge

application/controllers/api/frontend/v1/RendererLoader.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * Copyright (C) 2024 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+use CI3_Events as Events;
+
+class RendererLoader extends FHCAPI_Controller
+{
+
+	/**
+	 * Object initialization
+	 */
+	public function __construct()
+	{
+
+		parent::__construct([
+			'GetRenderers' => self::PERM_LOGGED,
+           
+		]);
+
+        $this->load->library('LogLib');
+        $this->loglib->setConfigs(array(
+			'classIndex' => 5,
+			'functionIndex' => 5,
+			'lineIndex' => 4,
+			'dbLogType' => 'API', // required
+			'dbExecuteUser' => 'RESTful API'
+		));
+
+
+	}
+
+	//------------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+	 /**
+     * fetches Stundenplan and Moodle events together
+     * @access public
+     *
+     */
+	public function GetRenderers(){
+		$renderer_paths = [];
+		Events::trigger(
+				'loadRenderers',
+				function & () use (&$renderer_paths)
+				{
+					return $renderer_paths;
+				}
+			);
+		$this->terminateWithSuccess($renderer_paths);
+	}
+
+	
+	
+
+}

application/controllers/api/frontend/v1/Stundenplan.php

@@ -82,10 +82,12 @@ class Stundenplan extends FHCAPI_Controller
 		$lv_id = $this->input->get('lv_id', TRUE);
 
 		$stundenplan_events = $this->stundenplanlib->getStundenplan($start_date,$end_date,$lv_id);
+		$stundenplan_events = $this->getDataOrTerminateWithError($stundenplan_events);
 		if( is_null($stundenplan_events) || isEmptyArray($stundenplan_events) )
 		{
 			$stundenplan_events = array();
 		}
+
 		// fetching moodle events
 		$moodle_events = [];
 		Events::trigger(

application/core/CI3_Events.php

@@ -49,6 +49,9 @@ require_once(APPPATH.'config/Events.php');
 
 $active_addons_array = explode(";", ACTIVE_ADDONS);
 
+// Load Events from FHC core
+require_once APPPATH.'core/Events.php';
+
 foreach (scandir(APPPATH.'config/extensions') as $dir)
 	if ($dir[0] != '.' && file_exists(APPPATH.'config/extensions/'.$dir.'/Events.php'))
 		require_once APPPATH.'config/extensions/'.$dir.'/Events.php';

application/core/Events.php

@@ -0,0 +1,15 @@
+<?php
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+use CI3_Events as Events;
+
+Events::on('loadRenderers', function ($renderers) {
+	$fhc_core_renderers =& $renderers();
+	$fhc_core_renderers["lehreinheit"] = array(
+		'calendarEvent' => APP_ROOT.'public/js/components/Cis/Stundenplan/EventTypes/calendarEvent.js',
+		'modalTitle' => APP_ROOT.'public/js/components/Cis/Mylv/modalTitle.js',
+		'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js'
+	);
+});
+
+

public/css/components/calendar.css

@@ -411,4 +411,79 @@
 	pointer-events: none;
 	z-index: 2;
 	opacity: 0.5;
-}
+}
+
+
+.dayPageContainer, .weekPageContainer{
+	container-type: inline-size;
+}
+
+.dayPageContainer .lehreinheitEventContent,
+.weekPageContainer .lehreinheitEventContent {
+	display: flex;
+	flex-direction: column;
+}
+
+.dayPageContainer .moodleEventContent,
+.weekPageContainer .moodleEventContent{
+	display: flex;
+	flex-direction: row;
+}
+
+.dayPageContainer .lehreinheitEventContent{
+	flex-grow:1;
+	align-items: center;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height:1.25;
+}
+
+.dayPageContainer .lehreinheitEventHeader {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	border-right: 1px solid gray;
+}
+
+.dayPageContainer .moodleEventContent {
+	align-items: center;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.25;
+	width:100%;
+}
+
+.weekPageContainer .moodleEventContent {
+	align-items: center;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.25;
+	width: 100%;
+}
+
+.weekPageContainer .lehreinheitEventHeader {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	border-right: 1px solid gray;
+}
+
+.weekPageContainer .lehreinheitEventContent {
+	flex-grow: 1;
+	align-items: center;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.25;
+}
+
+
+@container( min-width: 500px){
+	.dayPageContainer .lehreinheitEventContent,
+	.weekPageContainer .lehreinheitEventContent {
+		flex-direction: row;
+	}
+
+	.dayPageContainer .lehreinheitEventContent{
+		justify-content: space-evenly;
+	}
+}

public/js/api/factory/renderers.js

@@ -0,0 +1,12 @@
+
+export default {
+		
+	loadRenderers() {
+		return {
+			method: 'get',
+			url: '/api/frontend/v1/RendererLoader/GetRenderers',
+			params: {
+			}
+		};
+	},
+}

public/js/apps/Dashboard/Fhc.js

@@ -16,6 +16,8 @@ import AbgabetoolMitarbeiter from "../../components/Cis/Abgabetool/AbgabetoolMit
 import DeadlineOverview from "../../components/Cis/Abgabetool/DeadlineOverview.js";
 import Studium from "../../components/Cis/Studium/Studium.js";
 
+import ApiRenderers from '../../api/factory/renderers.js';
+
 const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 
 const router = VueRouter.createRouter({
@@ -235,7 +237,8 @@ const router = VueRouter.createRouter({
 const app = Vue.createApp({
 	name: 'FhcApp',
 	data: () => ({
-		appSideMenuEntries: {}
+		appSideMenuEntries: {},
+		renderers: null,
 	}),
 	components: {},
 	computed: {
@@ -245,7 +248,8 @@ const app = Vue.createApp({
 	},
 	provide() {
 		return { // provide injectable & watchable language property
-			language: Vue.computed(() => this.$p.user_language)
+			language: Vue.computed(() => this.$p.user_language),
+			renderers: Vue.computed(() => this.renderers),
 		}	
 	},
 	methods: {
@@ -283,6 +287,28 @@ const app = Vue.createApp({
 			}
 		}
 	},
+	async created(){
+		await this.$api
+			.call(ApiRenderers.loadRenderers())
+			.then(res => res.data)
+			.then(data => {
+				for (let rendertype of Object.keys(data)) {
+					
+					let modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
+					let modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
+					let calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
+					if(this.renderers === null) {
+						this.renderers = {};
+					}
+					if (!this.renderers[rendertype]) {
+						this.renderers[rendertype] = {}
+					}
+					this.renderers[rendertype].modalTitle = modalTitle;
+					this.renderers[rendertype].modalContent = modalContent;
+					this.renderers[rendertype].calendarEvent = calendarEvent;
+				}
+			});
+	},
 	mounted() {
 		document.addEventListener('click', this.handleClick);
 	},

public/js/components/Cis/Mylv/LvInfo.js

@@ -10,13 +10,6 @@ export default {
 		}
 	},
 	computed: {
-		LV_TYPES: function () {
-			return {
-				lehreinheit: "lehreinheit",
-				reservierung: "reservierung",
-				moodle: "moodle",
-			};
-		},
 		lektorenLinks: function () {
 			if (!this.event || !Array.isArray(this.event.lektor) || !this.event.lektor.length) return "a";
 
@@ -56,49 +49,6 @@ export default {
 	},
 	template:/*html*/`
 		<table class="table table-hover mb-4">
-			<template v-if="event.type == LV_TYPES.moodle">
-				<tbody>
-					<tr v-if="event?.datum">
-						<th>{{
-							$p.t('global','datum')?
-							$p.t('global','datum')+':'
-							:''
-						}}</th>
-						<td>{{methodFormatDate(event?.datum)}}</td>
-					</tr>
-					<tr>
-						<th>{{$p.t('global','aktivitaet')}}:</th>
-						<td v-html="event?.assignment"></td>
-					</tr>
-					<tr>
-						<th>{{$p.t('global','typ')}}:</th>
-						<td><img v-if="event?.activityIcon" class="me-1" :src="event?.activityIcon" />{{event?.purpose}}</td>
-					</tr>
-					<tr>
-						<th>{{$p.t('fristenmanagement','frist')}}:</th>
-						<td>{{start_time}}</td>
-					</tr>
-					<tr v-if="event?.actionname">
-						<th>{{$p.t('lvinfo','actionname')}}:</th>
-						<td>
-							{{event?.actionname}}
-						</td>
-					</tr>
-					<tr v-if="event?.overdue">
-						<th>{{$p.t('lvinfo','overdue')}}:</th>
-						<td>
-							{{$p.t('lvinfo','overdueEvent')}}
-						</td>
-					</tr>
-					<tr >
-				    	<th>{{$p.t('lvinfo','moodleLink')}}</th>
-						<td>
-							<a :href="event?.url" target="_blank"><i class="fa fa-arrow-up-right-from-square me-1"></i></a>
-						</td>
-					</tr>
-				</tbody>
-			</template>
-			<template v-else>
 				<tbody>
 					<tr v-if="event?.datum">
 						<th>{{
@@ -157,7 +107,6 @@ export default {
 						<td>{{event.organisationseinheit}}</td>
 					</tr>
 				</tbody>
-			</template>
 		</table>
 	`
 }

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

@@ -1,7 +1,6 @@
 import BsModal from "../../Bootstrap/Modal.js";
 import Alert from "../../Bootstrap/Alert.js";
 import LvMenu from "./LvMenu.js"
-import LvInfo from "./LvInfo.js"
 
 import ApiStundenplan from '../../../api/factory/stundenplan.js';
 import ApiAddons from '../../../api/factory/addons.js';
@@ -11,7 +10,6 @@ export default {
 		BsModal,
 		Alert,
 		LvMenu,
-		LvInfo,
 	},
 	mixins: [BsModal],
 	props: {
@@ -44,6 +42,9 @@ export default {
 		};
 	},
 	methods:{
+		onHideModal: function(){
+			this.menu = null;
+		},
 		onModalShow: function()
 		{
 			// do not load the menu if the menu is not getting rendered
@@ -74,22 +75,13 @@ export default {
 		return BsModal.popup.bind(this)(null, options);
 	},
 	template: /*html*/ `
-	<bs-modal ref="modalContainer" @showBsModal="onModalShow" v-bind="$props" :bodyClass="''" dialogClass='modal-lg' class="bootstrap-alert" :backdrop="false" >
+	<bs-modal ref="modalContainer" @showBsModal="onModalShow" @hideBsModal="onHideModal" v-bind="$props" :bodyClass="''" dialogClass='modal-lg' class="bootstrap-alert" :backdrop="false" >
 		<template v-slot:title>
-			<template v-if="event?.type=='moodle'"><strong v-html="event.titel"></strong></template>
-			<template v-else-if="event.titel">{{ event.titel + ' - ' + event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
-			<template v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
+			<slot name="modalTitle"></slot>
 		</template>
 		<template v-slot:default>
-			<h3>
-				<template v-if="event?.type =='moodle'">
-					{{$p.t('lvinfo','Moodleinformationen')}}
-				</template>
-				<template v-else>
-					{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
-				</template>
-			</h3>
-			<lv-info :event="event"></lv-info>
+			<slot name="modalContent"></slot>
+			
 			<template v-if="showMenu && this.menu">
 				<h3>{{$p.t('lehre','lehrveranstaltungsmenue')}}</h3>
 				<lv-menu :menu="menu"></lv-menu>

public/js/components/Cis/Mylv/modalContent.js

@@ -0,0 +1,113 @@
+import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js"
+
+
+export default {
+	props:{
+		event: {
+			type: Object,
+			required: true,
+		}
+	},
+	computed: {
+		lektorenLinks: function () {
+			if (!this.event || !Array.isArray(this.event.lektor) || !this.event.lektor.length) return "a";
+
+			let lektorenLinks = {};
+			this.event.lektor.forEach((lektor) => {
+				lektorenLinks[lektor.kurzbz] = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + `/Cis/Profil/View/${lektor.mitarbeiter_uid}`;
+			})
+			return lektorenLinks;
+		},
+		getOrtContentLink: function () {
+			if (!this.event || !this.event.ort_content_id) return "a";
+
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + `/CisVue/Cms/content/${this.event.ort_content_id}`
+		},
+		start_time: function () {
+			if (!this.event.start) return 'N/A';
+			if (!this.event.start instanceof Date) {
+				return this.event.start;
+			}
+			return numberPadding(this.event.start.getHours()) + ":" + numberPadding(this.event.start.getMinutes());
+		},
+		end_time: function () {
+			if (!this.event.end) return 'N/A';
+			if (!this.event.end instanceof Date) {
+				return this.event.end;
+			}
+			return numberPadding(this.event.end.getHours()) + ":" + numberPadding(this.event.end.getMinutes());
+		}
+	},
+	methods: {
+		mehtodNumberPadding: function (number) {
+			return numberPadding(number);
+		},
+		methodFormatDate: function (d) {
+			return formatDate(d);
+		},
+	},
+	template: `
+		<h3>
+			{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
+		</h3>
+		<table class="table table-hover mb-4">
+				<tbody>
+					<tr>
+						<th>{{
+							$p.t('global','datum')?
+							$p.t('global','datum')+':'
+							:''
+						}}</th>
+						<td>{{methodFormatDate(event.datum)}}</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('global','raum')?
+							$p.t('global','raum')+':'
+							:''
+						}}</th>
+						<td>
+							<a v-if="event.ort_content_id" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+							{{event.ort_kurzbz}}
+						</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','lehrveranstaltung')?
+							$p.t('lehre','lehrveranstaltung')+':'
+							:''
+						}}</th>
+						<td>{{'('+event.lehrform+') ' + event.lehrfach_bez}}</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','lektor')?
+							$p.t('lehre','lektor')+':'
+							:''
+						}}</th>
+						<td>
+							<div v-for="lektor in event.lektor" class="d-block">
+								<a v-if="lektorenLinks[lektor.kurzbz]" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+								{{lektor.kurzbz}}
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<th>{{
+								$p.t('ui','zeitraum')?
+								$p.t('ui','zeitraum')+':'
+								:''
+							}}</th>
+						<td>{{start_time + ' - ' + end_time}}</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','organisationseinheit')?
+							$p.t('lehre','organisationseinheit')+':'
+							:''
+						}}</th>
+						<td>{{event.organisationseinheit}}</td>
+					</tr>
+				</tbody>
+		</table>`,
+}

public/js/components/Cis/Mylv/modalTitle.js

@@ -0,0 +1,12 @@
+export default {
+	props:{
+		event: {
+			type: Object,
+			required: true,
+		}
+	},
+	template:`
+			<div v-if="event.titel">{{ event.titel + ' - ' + event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</div>
+			<div v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</div>
+`
+}

public/js/components/Cis/Stundenplan/EventTypes/calendarEvent.js

@@ -0,0 +1,30 @@
+export default {
+	methods:{
+		convertTime: function ([hour, minute]) {
+			let date = new Date();
+			date.setHours(hour);
+			date.setMinutes(minute);
+			// returns date string as hh:mm
+			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false });
+
+		},
+	},
+	props:{
+		event: {
+			type:Object,
+			required:true,
+		},
+	},
+	template: `
+	<div class="lehreinheitEventHeader" v-if="!event.allDayEvent && event?.beginn && event?.ende" >
+		<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
+		<span class="small">{{convertTime(event.ende.split(":"))}}</span>
+	</div>
+	<div class="lehreinheitEventContent">
+		<span>{{event.topic}}</span>
+		<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
+		<span>{{event.ort_kurzbz}}</span>
+	</div>
+	
+	`,
+}

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

@@ -1,13 +1,13 @@
 import FhcCalendar from "../../Calendar/Calendar.js";
 import CalendarDate from "../../../composables/CalendarDate.js";
 import LvModal from "../Mylv/LvModal.js";
-import LvInfo from "../Mylv/LvInfo.js"
 import LvMenu from "../Mylv/LvMenu.js"
-import moodleSvg from "../../../helpers/moodleSVG.js"
+import lehreinheitEvent from "./EventTypes/calendarEvent.js"
 
 import ApiStundenplan from '../../../api/factory/stundenplan.js';
 import ApiAuthinfo from '../../../api/factory/authinfo.js';
 
+
 export const DEFAULT_MODE_STUNDENPLAN = 'Week'
 
 const Stundenplan = {
@@ -25,7 +25,10 @@ const Stundenplan = {
 			studiensemester_kurzbz: null,
 			studiensemester_start: null,
 			studiensemester_ende: null,
-			uid: null
+			uid: null,
+			renderComponents: {},
+			isModalContentResolved: false,
+			isModalTitleResolved: false,
 		}
 	},
 	props: {
@@ -46,7 +49,9 @@ const Stundenplan = {
 			eventMaxHeight: this.eventMaxHeight
 		}	
 	},
+	inject:["renderers"],
 	watch: {
+		
 		weekFirstDay: {
 			handler: async function (newValue) {
 				let data = await this.fetchStudiensemesterDetails(newValue);
@@ -69,9 +74,10 @@ const Stundenplan = {
 		}
 	},
 	components: {
-		FhcCalendar, LvModal, LvMenu, LvInfo, moodleSvg
+		FhcCalendar, LvModal, LvMenu, lehreinheitEvent, 
 	},
 	computed:{
+		
 		downloadLinks: function(){
 			if(!this.studiensemester_start || !this.studiensemester_ende || !this.uid )return;
 			let start = new Date(this.studiensemester_start);
@@ -105,17 +111,38 @@ const Stundenplan = {
 		},
 	},
 	methods:{
+		modalTitleResolved: function () {
+			this.isModalTitleResolved = true;
+			if(this.isModalContentResolved && this.isModalTitleResolved)
+				Vue.nextTick(() => {
+					if(this.$refs.lvmodal) 
+						this.$refs.lvmodal.show();
+				});
+		},
+		modalContentResolved: function () {
+			this.isModalContentResolved = true;
+			if (this.isModalContentResolved && this.isModalTitleResolved)
+				Vue.nextTick(() => {
+					if (this.$refs.lvmodal)
+						this.$refs.lvmodal.show();
+				});
+		},
+		// component renderers fetches from different addons
+		modalTitleComponent(type){
+			return this.renderers[type].modalTitle;
+		},
+		modalContentComponent(type) {
+			return this.renderers[type].modalContent;
+		},
+		calendarEventComponent(type){
+			return this.renderers[type].calendarEvent;
+		},
+		
+
 		fetchStudiensemesterDetails: async function (date) {
 			return this.$api.call(ApiStundenplan.studiensemesterDateInterval(date));
 		},
-		convertTime: function([hour,minute]){
-			let date = new Date();
-			date.setHours(hour);
-			date.setMinutes(minute);
-			// returns date string as hh:mm
-			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12:false}); 
-
-		},
+		
 		setSelectedEvent: function (event) {
 			this.currentlySelectedEvent = event;
 		},
@@ -177,9 +204,8 @@ const Stundenplan = {
 		},
 		showModal: function(event){
 			this.currentlySelectedEvent = event;
-			Vue.nextTick(() => {
-				this.$refs.lvmodal.show();
-			});
+			this.isModalTitleResolved = false;
+			this.isModalContentResolved = false;
 		},
 		updateRange: function ({start,end, mounted}) {
 			let checkDate = (date) => {
@@ -242,25 +268,41 @@ const Stundenplan = {
 		},
 	},
 	created() {
+		
+
 		this.$api
 			.call(ApiAuthinfo.getAuthUID())
 			.then(res => res.data)
 			.then(data => {
 				this.uid = data.uid;
 			});
+		
 		// this.loadEvents();
 	},
 	beforeUnmount() {
 		if(this.$refs.lvmodal) this.$refs.lvmodal.hide()	
 	},
 	template:/*html*/`
+	<template v-if="renderers">
 	<h2>
 		{{$p.t('lehre/stundenplan')}}
 		<span style="padding-left: 0.4em;" v-show="studiensemester_kurzbz">{{studiensemester_kurzbz}}</span>
 		<span style="padding-left: 0.5em;" v-show="propsViewData?.lv_id && lv"> {{ $p.user_language.value === 'German' ? lv?.bezeichnung : lv?.bezeichnung_english}}</span>
 	</h2>
 	<hr>
-	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
+	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" >
+		<template #modalTitle>
+		<Suspense @resolve="modalTitleResolved">
+			<component :is="modalTitleComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+		</Suspense>
+		</template>
+		<template #modalContent>
+		<Suspense @resolve="modalContentResolved">
+			<component :is="modalContentComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+		</Suspense>
+		</template>
+	</lv-modal>
+
 	<fhc-calendar
 		ref="calendar"
 		@selectedEvent="setSelectedEvent"
@@ -285,68 +327,23 @@ const Stundenplan = {
 			</div>
 		</template>
 		<template #monthPage="{event,day}">
-			<div class="p-1" v-if="event.type=='moodle'" @click="showModal(event)">
-				<div class="d-flex small w-100" >
-					<moodle-svg></moodle-svg>
-					<span class="flex-grow-1 text-center "><strong v-html="event.titel"></strong> - {{event.topic}}</span>
-				</div>
-			</div>
-			<div v-else @click="showModal(event)" class="p-1">
-				<span>{{event.topic}}</span>
+			<div @click="showModal(event)" class="p-1">
+				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
 			</div>
 		</template>
 		<template #weekPage="{event,day}">
-			<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.beginn.split(":"))}}</span>
-						<span class="small">{{convertTime(event.ende.split(":"))}}</span>
-					</div>
-				</div>
-				<div v-if="event.type=='moodle'" class="d-flex small w-100" >
-					<moodle-svg></moodle-svg>
-					<span class="flex-grow-1 text-center"><strong v-html="event.titel"></strong> - {{event.topic}}</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 @click="showModal(event)" type = "button"
+				class="weekPageContainer 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;" >
+				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
 			</div>
 		</template>
 		<template #dayPage="{event,day,mobile}">
-			<div @click="mobile? showModal(event):null" type="button" class="fhc-entry border border-secondary border m-0 h-100  text-center">
-				<template v-if="event.type=='moodle'">
-					<div class="d-flex small align-items-center w-100 p-1" >
-						<moodle-svg></moodle-svg>
-						<span class="flex-grow-1 text-center"><strong v-html="event.titel"></strong> - {{event.topic}}</span>
-					</div>
-				</template>
-				<template v-else>
-					<div class="row justify-content-center align-items-center">
-						<div class="col-auto" v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-							<div class="d-flex flex-column p-4 border-end border-secondary">
-								<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
-								<span class="small">{{convertTime(event.ende.split(":"))}}</span>
-							</div>
-						</div>
-						<div class="col">
-							<p>{{ $p.t('lehre/lehrveranstaltung') }}:</p>
-							<p class="m-0">{{event?.topic}}</p>
-						</div>
-						<div class="col" :style="'max-height: ' + eventMaxHeight + '; overflow: auto;'">
-							<p>{{ $p.t('lehre/lektor') }}:</p>
-							<p class="m-0" v-for="lektor in event?.lektor">{{lektor.kurzbz}}</p>
-						</div>
-						<div class="col">
-							<p>{{ $p.t('profil/Ort') }}: </p>
-							<p class="m-0">{{event?.ort_kurzbz}}</p>
-						</div>
-					</div>
-				</template>
+			<div @click="mobile? showModal(event):null" type="button" class="dayPageContainer fhc-entry border border-secondary border m-0 h-100  text-center">
+				<div class="h-100 d-flex flex-col justify-content-evenly align-items-center">
+					<component :is="calendarEventComponent(event.type)" :event="event"></component>
+				</div>
 			</div>
 		</template>
 		<template #pageMobilContent="{lvMenu, event}">
@@ -362,7 +359,8 @@ const Stundenplan = {
 		<template #pageMobilContentEmpty >
 			<h3>{{ $p.t('lehre/noLvFound') }}</h3>
 		</template>
-	</fhc-calendar>`
+	</fhc-calendar>
+	</template>`
 }
 
 export default Stundenplan

public/js/helpers/moodleSVG.js

@@ -1,5 +0,0 @@
-export default {
-	template:`
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 130 90" style="height:1.5em" ><radialGradient id="moodle-original-a" cx="532.855" cy="-537.557" r="209.76" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FAAF40" /><stop offset=".043" stop-color="#F9A538" /><stop offset=".112" stop-color="#F89D31" /><stop offset=".227" stop-color="#F89A2F" /><stop offset=".528" stop-color="#F7922D" /><stop offset="1" stop-color="#F37B28" /></radialGradient><path fill="white" stroke="black" stroke-width="1" d="M106.259 105.754V66.975c0-8.164-3.397-12.244-10.034-12.244-6.629 0-10.034 4.08-10.034 12.244v38.779H66.294V66.975c0-8.164-3.228-12.244-9.862-12.244-6.633 0-10.036 4.08-10.036 12.244v38.779H26.667V64.768c0-8.504 2.891-14.801 8.844-19.223 5.102-3.91 12.246-5.777 20.92-5.777 9.015 0 15.478 2.207 19.727 6.801 3.57-4.594 10.207-6.801 19.897-6.801 8.844 0 15.819 1.867 20.922 5.777 5.951 4.422 8.843 10.719 8.843 19.223v41.152h-19.563v-.166z" /><path fill="black" d="M28.539 49.627l-2.041 10.207c18.708 6.291 36.395.166 45.751-16.158-13.778-9.522-26.535.17-43.71 5.951" /><linearGradient id="moodle-original-b" gradientUnits="userSpaceOnUse" x1="324.268" y1="-509.952" x2="368.932" y2="-509.952" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#929497" /><stop offset=".124" stop-color="#757578" /><stop offset=".279" stop-color="#575658" /><stop offset=".44" stop-color="#403E3F" /><stop offset=".609" stop-color="#302D2E" /><stop offset=".788" stop-color="#262223" /><stop offset="1" stop-color="#231F20" /></linearGradient><path fill="black" d="M28.539 47.08c-.681 3.91-1.192 7.65-1.872 11.563 17.857 6.125 35.375.85 44.73-15.137-11.909-13.776-25.17-2.383-42.858 3.574" /><linearGradient id="moodle-original-c" gradientUnits="userSpaceOnUse" x1="332.834" y1="-495.051" x2="351.377" y2="-521.534" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#231F20" /><stop offset="1" stop-color="#231F20" stop-opacity="0" /></linearGradient><path fill="none" d="M49.799 51.668c-8.164-1.701-17.009 2.555-23.131 6.975-3.912-28.57 13.777-27.893 36.903-20.75-1.529 6.975-4.083 16.33-8.502 21.941-.169-3.744-1.869-6.293-5.27-8.166" /><linearGradient id="moodle-original-d" gradientUnits="userSpaceOnUse" x1="299.778" y1="-495.802" x2="381.412" y2="-495.802" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#929497" /><stop offset=".124" stop-color="#757578" /><stop offset=".279" stop-color="#575658" /><stop offset=".44" stop-color="#403E3F" /><stop offset=".609" stop-color="#302D2E" /><stop offset=".788" stop-color="#262223" /><stop offset="1" stop-color="#231F20" /></linearGradient><path fill="black" d="M2.178 47.08c29.932-18.031 46.77-21.43 81.634-25-40.478 31.969-41.499 25-81.634 25" /><path stroke="#4A4A4C" stroke-width=".5" fill="black" d="M83.812 22.246L51.667 45.545" /><path opacity=".23" fill="black" d="M45.545 34.66c.34 3.744-.511-3.572 0 0" /><path stroke="#4A4A4C" stroke-width=".5" fill="black" d="M2.178 47.08l49.489-1.535" /><path stroke="#F16922" stroke-width=".5" d="M42.484 35.002C33.98 37.383 6.09 43.506 5.747 47.08c-.849 6.631-.167 17.176-.167 17.176" fill="none" /><path fill="#F16922" d="M8.131 89.596c-3.063-7.652-6.804-16.158-2.384-26.703C8.64 72.756 8.131 80.24 8.131 89.596" /><path fill="#6D6E70" d="M41.076 33.844c.708-.25 1.384-.17 1.509.184.126.355-.344.846-1.052 1.096-.709.256-1.384.172-1.51-.184-.127-.352.344-.844 1.053-1.096z" /></svg> 
-	`
-}