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

feature(Calendar Tagesansicht): LvInfo und LvMenu wird neben der Tagesansicht angezeigt wenn man eine Lv auswaehlt

Browse Source
This commit is contained in:
SimonGschnell
2024-11-13 14:52:46 +01:00
parent 59f8f91af9
commit e3cbbfa365
5 changed files with 162 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis/Stundenplan.js
+13 -4
View File
@@ -121,10 +121,19 @@ const app = Vue.createApp({
</div>
</template>
<template #dayPage="{event,day}">
<div @click="showModal(event?.orig)" type="button" class="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>
<div type="button" class="row">
<div class="col">
<p>Lehrveranstaltung:</p>
<p>{{event?.orig.topic}}</p>
</div>
<div class="col">
<p>Lektor:</p>
<p v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</p>
</div>
<div class="col">
<p>Ort: </p>
<p>{{event?.orig.ort_kurzbz}}</p>
</div>
</div>
</template>
</fhc-calendar>
public/js/components/Calendar/Day/Page.js
+37 -8
View File
@@ -1,13 +1,21 @@
import CalendarDate from '../../../composables/CalendarDate.js';
import LvMenu from "../../../components/Cis/Mylv/LvMenu.js"
import LvInfo from "../../../components/Cis/Mylv/LvInfo.js"
function ggt(m, n) { return n == 0 ? m : ggt(n, m % n); }
function kgv(m, n) { return (m * n) / ggt(m, n); }
export default {
components:{
LvMenu,
LvInfo,
},
data() {
return {
hourPosition: null,
hourPositionTime: null,
lvMenu:null,
selectedEvent: null,
}
},
inject: [
@@ -88,6 +96,24 @@ export default {
},
},
methods: {
eventClick(evt) {
let event = evt.orig;
this.selectedEvent = event;
if (event.type == 'lehreinheit') {
this.$fhcApi.factory.stundenplan.getLehreinheitStudiensemester(event.lehreinheit_id[0]).then(
res => res.data
).then(
studiensemester_kurzbz => {
this.$fhcApi.factory.addons.getLvMenu(event.lehrveranstaltung_id, studiensemester_kurzbz).then(res => {
if (res.data) {
this.lvMenu = res.data;
}
});
}
)
}
this.$emit('input', event);
},
calcHourPosition(event) {
let height = this.$refs.eventcontainer.getBoundingClientRect().height;
let top = this.$refs.eventcontainer.getBoundingClientRect().top;
@@ -149,8 +175,8 @@ export default {
},
template: /*html*/`
<div class="fhc-calendar-day-page ">
<div class="row">
<div class="col-12 col-xl-6">
<div class="row m-0">
<div class="col-12 col-xl-6 p-0">
<div class="d-flex flex-column">
<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'z-index':4,'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
@@ -166,12 +192,12 @@ export default {
<div>
<h1 v-if="filteredEvents.length==0" class="m-0 text-secondary" ref="noEventsText" :style="{'top':noEventsTextPosition+'px'}" style="position:absolute; left:0; text-align:center; width: 100%; z-index:1">Keine Lehrveranstaltungen</h1>
<div class="events" :class="{'fhc-calendar-no-events-overlay':filteredEvents.length==0}">
<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="{'grid-template-columns': '1 1fr', 'grid-template-rows': 'repeat(' + (hours.length * 60 / smallestTimeFrame) + ', 1fr)'}">
<div :style="{'background-color':event.orig.color}" class="mx-2 border border-dark border-2 small rounded overflow-hidden " @click.prevent="$emit('input', event.orig)" :style="{'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': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">
<div :style="{'background-color':event.orig.color}" class="mx-2 border border-dark border-2 small rounded overflow-hidden " @click.prevent="eventClick(event)" :style="{'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': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">
<slot name="dayPage" :event="event" :day="day">
<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
</slot>
@@ -180,13 +206,16 @@ export default {
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none d-xl-block col-xl-6">
<div class="bg-secondary h-100 d-flex justify-content-center align-items-center">
<p class="text-white fs-1" >other content goes in here</p>
<div class="d-none d-xl-block col-xl-6 p-0">
<div style="position:sticky; top:100px; " class="d-flex justify-content-center align-items-center flex-column">
<div class="w-100">
<lv-info v-if="selectedEvent && lvMenu" :titel="$p.t('lvinfo','lehrveranstaltungsinformationen')" :event="selectedEvent" />
</div>
<lv-menu v-show="lvMenu" :titel="'Lehrveranstaltungs Menu'" :menu="lvMenu" />
</div>
</div>
</div>
public/js/components/Cis/Mylv/LvInfo.js
+96
View File
@@ -0,0 +1,96 @@
import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js"
export default {
props: {
event: Object,
titel: String,
},
data() {
return {
}
},
computed: {
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:/*html*/`
<div>
<h3 v-if="titel">{{titel}}</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>{{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>{{event.lektor.map(lektor=>lektor.kurzbz).join("/")}}</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>
</div>
`
}
public/js/components/Cis/Mylv/LvMenu.js
+12 -8
View File
@@ -5,6 +5,7 @@ export default {
type:Array,
default:null,
},
titel:String,
},
data(){
return{
@@ -34,14 +35,17 @@ export default {
},
template:/*html*/`
<div v-if="!menu">No Menu available</div>
<div v-else class="container">
<div class="row g-2">
<div style="min-height:150px" class="col-12 col-lg-6 col-xl-4" v-for="(menuItem, index) in menu" :key="index">
<a :title="menuItem.name" :target="menuItem.c4_target ?? null" role="button" :href="menuItem.c4_link" class="border border-1 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
<span @click="selectMenu(menuItem)" class=" mt-2">{{menuItem.name}}</span>
<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1" :index="index">{{text}}</span>
</a>
<div v-else >
<h3 v-if="titel">{{titel}}</h3>
<div class="container">
<div class="row g-2">
<div style="min-height:150px" class="col-12 col-lg-6 col-xl-4" v-for="(menuItem, index) in menu" :key="index">
<a :title="menuItem.name" :target="menuItem.c4_target ?? null" role="button" :href="menuItem.c4_link" class="border border-1 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
<span @click="selectMenu(menuItem)" class=" mt-2">{{menuItem.name}}</span>
<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1" :index="index">{{text}}</span>
</a>
</div>
</div>
</div>
</div>
public/js/components/Cis/Mylv/LvModal.js
+4 -82
View File
@@ -1,13 +1,14 @@
import BsModal from "../../Bootstrap/Modal.js";
import Alert from "../../Bootstrap/Alert.js";
import LvMenu from "./LvMenu.js"
import { numberPadding,formatDate } from "../../../helpers/DateHelpers.js"
import LvInfo from "./LvInfo.js"
export default {
components: {
BsModal,
Alert,
LvMenu,
LvInfo,
},
mixins: [BsModal],
props: {
@@ -35,31 +36,7 @@ export default {
info: null,
};
},
computed: {
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);
},
onModalShow: function()
{
if (this.event.type == 'lehreinheit') {
@@ -90,63 +67,8 @@ export default {
<template v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
</template>
<template v-slot:default>
<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>{{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>{{event.lektor.map(lektor=>lektor.kurzbz).join("/")}}</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>
<h3>Lehrveranstaltungs Menu</h3>
<lv-menu :menu="menu"></lv-menu>
<lv-info :titel="$p.t('lvinfo','lehrveranstaltungsinformationen')" :event="event"></lv-info>
<lv-menu :titel="'Lehrveranstaltungs Menu'" :menu="menu"></lv-menu>
</template>
<!-- optional footer -->
<template v-slot:footer >