diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css index 720b79156..b3559df23 100644 --- a/public/css/components/calendar.css +++ b/public/css/components/calendar.css @@ -219,3 +219,8 @@ .fhc-calendar-xs .fhc-calendar-month-page-day .events span { overflow: hidden; } + +.selectedEvent { + background-color: #00649c !important; + color: white; +} \ No newline at end of file diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js index f5a988319..c2cfe87db 100644 --- a/public/js/apps/Cis/Stundenplan.js +++ b/public/js/apps/Cis/Stundenplan.js @@ -122,18 +122,18 @@ const app = Vue.createApp({ diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js index 3b0465a96..eef260216 100644 --- a/public/js/components/Calendar/Day/Page.js +++ b/public/js/components/Calendar/Day/Page.js @@ -39,56 +39,87 @@ export default { 'page:forward', 'input' ], + watch:{ + eventsPerDayAndHour:{ + handler(newEvents) { + if (newEvents[this.day.toDateString()]?.events.length > 0) { + let events = newEvents[this.day.toDateString()]?.events; + if (Array.isArray(events) && events.length > 0) { + this.selectedEvent = events[0].orig; + } + } else { + this.selectedEvent = null; + } + }, + immediate: true + }, + selectedEvent:{ + handler(event) { + this.lvMenu = null; + if (event && 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; + } + }); + } + ) + } + }, + immediate:true, + } + }, computed: { - noEventsTextPosition(){ - return this.calendarScrollTop + 100; + noEventsCondition(){ + return !this.isSliding && this.filteredEvents.length === 0; }, hours() { // returns an array with elements starting at 7 and ending at 24 return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24); }, - days() { - let startDay = this.focusDate; - let result = []; - result.push(new Date(startDay.y, startDay.m, startDay.d)); - return result; + day() { + return new Date(this.focusDate.y, this.focusDate.m, this.focusDate.d); }, eventsPerDayAndHour() { // return early if the calendar pane is sliding if (this.isSliding) return {}; const res = {}; - this.days.forEach(day => { - let key = day.toDateString(); + + let key = this.day.toDateString(); - let nextDay = new Date(day); - nextDay.setDate(nextDay.getDate() + 1); - nextDay.setMilliseconds(nextDay.getMilliseconds() - 1); - let d = { events: [], lanes: 1 }; - if (this.events[key]) { - this.events[key].forEach(evt => { - 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); - this.shared.filter(other => !doneItems.includes(other)).forEach(i => i.setSharedMaxRecursive(doneItems)); - } - }; - event.shared = d.events.filter(other => other.start < event.end && other.end > event.start); - event.shared.forEach(other => other.shared.push(event)); - let occupiedLanes = event.shared.map(other => other.lane); - while (occupiedLanes.includes(event.lane)) - event.lane++; - event.maxLane = Math.max(...[event.lane], ...occupiedLanes); - if (event.maxLane > 1) { - event.setSharedMaxRecursive([event]); + let nextDay = new Date(this.day); + nextDay.setDate(nextDay.getDate() + 1); + nextDay.setMilliseconds(nextDay.getMilliseconds() - 1); + let d = { events: [], lanes: 1 }; + if (this.events[key]) { + this.events[key].forEach(evt => { + let event = { + orig: evt, lane: 1, maxLane: 1, start: evt.start < this.day ? this.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); + this.shared.filter(other => !doneItems.includes(other)).forEach(i => i.setSharedMaxRecursive(doneItems)); } - d.events.push(event); - }); - d.lanes = d.events.map(e => e.maxLane).reduce((res, i) => kgv(res, i), 1); - } - res[key] = d; - }); + }; + event.shared = d.events.filter(other => other.start < event.end && other.end > event.start); + event.shared.forEach(other => other.shared.push(event)); + let occupiedLanes = event.shared.map(other => other.lane); + while (occupiedLanes.includes(event.lane)) + event.lane++; + event.maxLane = Math.max(...[event.lane], ...occupiedLanes); + if (event.maxLane > 1) { + event.setSharedMaxRecursive([event]); + } + d.events.push(event); + }); + d.lanes = d.events.map(e => e.maxLane).reduce((res, i) => kgv(res, i), 1); + } + res[key] = d; + return res; }, smallestTimeFrame() { @@ -99,19 +130,6 @@ export default { 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) { @@ -170,16 +188,13 @@ export default { return Math.floor(((day.getHours() - 7) * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1; } }, - mounted() { - setTimeout(() => this.$refs.eventcontainer.scrollTop = this.$refs.eventcontainer.scrollHeight / 3 + 1, 0); - }, template: /*html*/`
-
-
+
+
{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}
{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}
@@ -190,14 +205,14 @@ export default { {{hourPositionTime}}
-

Keine Lehrveranstaltungen

-
+

Keine Lehrveranstaltungen

+
{{hour}}:00
-
+

this is a placeholder which means that no template was passed to the Calendar Page slot

 @@ -211,11 +226,25 @@ export default {
-
-
- +
+
+ + +
-
diff --git a/public/js/components/Cis/Mylv/LvInfo.js b/public/js/components/Cis/Mylv/LvInfo.js index 829850cbc..b7f3a7214 100644 --- a/public/js/components/Cis/Mylv/LvInfo.js +++ b/public/js/components/Cis/Mylv/LvInfo.js @@ -4,7 +4,6 @@ import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js" export default { props: { event: Object, - titel: String, }, data() { return { @@ -36,8 +35,6 @@ export default { }, }, template:/*html*/` -
-

{{titel}}

@@ -90,7 +87,6 @@ export default {
-
` } diff --git a/public/js/components/Cis/Mylv/LvMenu.js b/public/js/components/Cis/Mylv/LvMenu.js index 0bbad589f..2315eaf1f 100644 --- a/public/js/components/Cis/Mylv/LvMenu.js +++ b/public/js/components/Cis/Mylv/LvMenu.js @@ -5,7 +5,8 @@ export default { type:Array, default:null, }, - titel:String, + containerStyles: Array, + rowStyles: Array, }, data(){ return{ @@ -36,14 +37,13 @@ export default { template:/*html*/`
No Menu available
-

{{titel}}

-
-
-
- +
+
+
+ - {{menuItem.name}} - {{text}} +

{{menuItem.name}}

+

{{text}}
diff --git a/public/js/components/Cis/Mylv/LvModal.js b/public/js/components/Cis/Mylv/LvModal.js index fcffdeb5c..718231968 100644 --- a/public/js/components/Cis/Mylv/LvModal.js +++ b/public/js/components/Cis/Mylv/LvModal.js @@ -67,8 +67,10 @@ export default {