blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

update(LvPlan Reservierungen):renderer componente erstellt und in Events geladen + styling fixes

Browse Source
This commit is contained in:
SimonGschnell
2025-06-18 12:26:20 +02:00
parent d558240459
commit 23e32a51b2
12 changed files with 201 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/core/Events.php
+13 -3
View File
@@ -6,9 +6,19 @@ 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/LvPlan/EventTypes/calendarEvent.js',
'modalTitle' => APP_ROOT.'public/js/components/Cis/Mylv/modalTitle.js',
'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js',
'calendarEvent' => APP_ROOT.'public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js',
'modalTitle' => APP_ROOT.'public/js/components/Cis/Renderer/Lehreinheit/modalTitle.js',
'modalContent' => APP_ROOT.'public/js/components/Cis/Renderer/Lehreinheit/modalContent.js',
'calendarEventStyles' => APP_ROOT.'public/css/Cis4/CoreCalendarEvents.css'
);
});
Events::on('loadRenderers', function ($renderers) {
$fhc_core_renderers =& $renderers();
$fhc_core_renderers["reservierung"] = array(
'calendarEvent' => APP_ROOT.'public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js',
'modalTitle' => APP_ROOT.'public/js/components/Cis/Renderer/Reservierungen/modalTitle.js',
'modalContent' => APP_ROOT.'public/js/components/Cis/Renderer/Reservierungen/modalContent.js',
'calendarEventStyles' => APP_ROOT.'public/css/Cis4/CoreCalendarEvents.css'
);
});
public/css/Cis4/CoreCalendarEvents.css
+15 -16
View File
@@ -1,30 +1,29 @@
/* Moodle Events in Month Page */
.monthPageContainer .lehreinheitEventContent{
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
border-bottom: 1px solid var(--bs-border-color);
display: flex;
border-bottom: 1px solid var(--bs-border-color);
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display:grid;
padding: .25rem .5rem .25rem .25rem;
margin-right: .25rem;
align-content: center;
display:none;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
width: 100%;
font-size: .875em;
align-items:center;
justify-content: space-evenly;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:flex;
place-content: center space-evenly;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText #lehreinheitLektoren{
display:none;
}
/* Moodle Events in Week Page */
.weekPageContainer .lehreinheitEventContent {
display: grid;
@@ -44,10 +43,10 @@
.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-direction: column;
place-content: center space-evenly;
flex-wrap: wrap;
column-gap: 5px;
align-items: center;
justify-content: space-evenly;
}
public/js/apps/Dashboard/Fhc.js
+7 -5
View File
@@ -305,11 +305,13 @@ const app = Vue.createApp({
if (data[rendertype].calendarEventStyles){
var head = document.head;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = data[rendertype].calendarEventStyles;
head.appendChild(link);
if(!head.querySelector(`link[href="${data[rendertype].calendarEventStyles}"]`)){
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = data[rendertype].calendarEventStyles;
head.appendChild(link);
}
}
if(this.renderers === null) {
public/js/components/Calendar/Day/Page.js
+4 -4
View File
@@ -441,10 +441,10 @@ export default {
<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
</div>
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
<div v-if="lookingAtToday && !noEventsCondition" class="overlay" :style="overlayStyle"></div>
<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" >
<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 border border-secondary 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.orig" :day="day" :mobile="false">
@@ -452,7 +452,7 @@ export default {
</slot>
</div>
<!-- mobile version of the page template, parent receives slotProp mobile = true -->
<div class="d-block d-xl-none h-100" @click.prevent="eventClick(event)">
<div class="d-block d-xl-none h-100 " @click.prevent="eventClick(event)">
<slot name="dayPage" :event="event.orig" :day="day" :mobile="true">
<p>this is a slot placeholder</p>
</slot>
public/js/components/Calendar/Week/Page.js
+2 -2
View File
@@ -369,10 +369,10 @@ export default {
</div>
</Transition>
<div v-if="day.isToday" class="overlay" :style="overlayStyle"></div>
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, 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 "
class="mx-2 small rounded overflow-hidden fhc-entry border border-secondary"
v-contrast >
<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>
public/js/components/Cis/LvPlan/LvPlan.js
+3 -3
View File
@@ -2,7 +2,7 @@ import FhcCalendar from "../../Calendar/Calendar.js";
import CalendarDate from "../../../composables/CalendarDate.js";
import LvModal from "../Mylv/LvModal.js";
import LvMenu from "../Mylv/LvMenu.js"
import lehreinheitEvent from "./EventTypes/calendarEvent.js"
import lehreinheitEvent from "../Renderer/Lehreinheit/calendarEvent.js"
import ApiLvPlan from '../../../api/factory/lvPlan.js';
import ApiAuthinfo from '../../../api/factory/authinfo.js';
@@ -352,14 +352,14 @@ const LvPlan = {
</template>
<template #weekPage="{event,day}">
<div @click="showModal(event)" type = "button"
class="weekPageContainer position-relative border border-secondary border h-100"
class="weekPageContainer position-relative 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="dayPageContainer fhc-entry border border-secondary border m-0 h-100 text-center">
<div @click="mobile? showModal(event):null" type="button" class="dayPageContainer fhc-entry m-0 h-100 text-center">
<component :is="calendarEventComponent(event.type)" :event="event"></component>
</div>
</template>
public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js
+31
View File
@@ -0,0 +1,31 @@
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="lehreinheitEventContent h-100 w-100 p-1" >
<div id="lehreinheitEventHeader" class="h-100 " 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 id="lehreinheitEventText">
<span id="lehreinheitTopic">{{event.topic}}</span>
<span id="lehreinheitLektoren" v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
<span id="lehreinheitOrt">{{event.ort_kurzbz}}</span>
</div>
</div>
`,
}
public/js/components/Cis/Mylv/modalContent.js → public/js/components/Cis/Renderer/Lehreinheit/modalContent.js
+2 -2
View File
@@ -1,5 +1,5 @@
import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js"
import LvMenu from "./LvMenu.js";
import { numberPadding, formatDate } from "../../../../helpers/DateHelpers.js"
import LvMenu from "../../Mylv/LvMenu.js";
export default {
props:{
public/js/components/Cis/Mylv/modalTitle.js → public/js/components/Cis/Renderer/Lehreinheit/modalTitle.js
View File
public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js → public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js
+4 -4
View File
@@ -1,5 +1,5 @@
export default {
methods:{
methods: {
convertTime: function ([hour, minute]) {
let date = new Date();
date.setHours(hour);
@@ -9,10 +9,10 @@ export default {
},
},
props:{
props: {
event: {
type:Object,
required:true,
type: Object,
required: true,
},
},
template: `
public/js/components/Cis/Renderer/Reservierungen/modalContent.js
+109
View File
@@ -0,0 +1,109 @@
import { numberPadding, formatDate } from "../../../../helpers/DateHelpers.js"
import LvMenu from "../../Mylv/LvMenu.js";
export default {
props:{
event: {
type: Object,
required: true,
},
lvMenu:{
type: Object,
required: false,
default: null,
},
},
components:{
LvMenu,
},
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: `
<div>
<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','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>
</tbody>
</table>
</div>`,
}
public/js/components/Cis/Renderer/Reservierungen/modalTitle.js
+11
View File
@@ -0,0 +1,11 @@
export default {
props:{
event: {
type: Object,
required: true,
}
},
template:`
<div >{{ event.topic + ' [' + event.ort_kurzbz+']'}}</div>
`
}