From ebbec03de40f8daa1a3f8a11424b415e57dd70c6 Mon Sep 17 00:00:00 2001 From: SimonGschnell Date: Fri, 21 Feb 2025 14:21:38 +0100 Subject: [PATCH] feature(Calendar Moodle): adds moodle svg and adopts month page view for moodle events --- public/css/components/calendar.css | 41 ++++++++-- public/js/components/Calendar/Day/Page.js | 76 ++++++++++--------- public/js/components/Calendar/Month/Page.js | 10 +-- public/js/components/Calendar/Week.js | 2 +- public/js/components/Calendar/Week/Page.js | 37 +++++++-- .../components/Cis/Stundenplan/Stundenplan.js | 25 +++--- public/js/helpers/moodleSVG.js | 5 ++ 7 files changed, 131 insertions(+), 65 deletions(-) create mode 100644 public/js/helpers/moodleSVG.js diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css index 3e6eeb3e2..0cc0b8533 100644 --- a/public/css/components/calendar.css +++ b/public/css/components/calendar.css @@ -69,25 +69,43 @@ display: grid; } -.all-day-event-border{ +.fhc-calendar-week-page .all-day-event-border{ box-shadow: 1px 1px 0 #dee2e6; } -.all-day-event{ +.fhc-calendar-week-page .all-day-event{ max-height: 75px; overflow:scroll; } -.all-day-event-container{ +.fhc-calendar-week-page .all-day-event-container{ position: sticky; top: 44px; display:grid; grid-template-columns:repeat(7,1fr); width:100%; - box-shadow: 0px 1px 0px #dee2e6; z-index:3; } +.fhc-calendar-day-page .all-day-event-border { + box-shadow: 1px 1px 0 #dee2e6; +} + +.fhc-calendar-day-page .all-day-event { + grid-column:2; + max-height: 75px; + overflow: scroll; +} + +.fhc-calendar-day-page .all-day-event-container { + position: sticky; + top:0; + display: grid; + grid-template-columns: 3em 1fr; + width: 100%; + z-index: 3; +} + /* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/ .box-shadow-border{ box-shadow: 0 0 0 1px #dee2e6 !important; @@ -113,8 +131,6 @@ min-height: 0; } .fhc-calendar-day-page > div { - /*transform: translate(-0.75em, -0.75em);*/ - /*width: calc(100% + 1.5em);*/ height: calc(100% + 1.5em); } .fhc-calendar-day-page .flex-column > .flex-grow-1 { @@ -126,7 +142,6 @@ .fhc-calendar-day-page .events { display: grid; grid-template-columns: 3em 1fr; - /*min-height: 266.6666666667%;*/ } .fhc-calendar-day-page .events .day { gap: 1px; @@ -222,7 +237,19 @@ } .fhc-highlight-day { + position:relative; +} + +.fhc-highlight-day::before { + content:''; + position:absolute; + top:0; + bottom:0; + left:0; + right:0; box-shadow: inset 0 0 0 2px black !important; + pointer-events: none; + z-index: 2; } .fhc-calendar-sm .fhc-calendar-month-page-day.active .no, diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js index 679086885..01cbd8ba9 100644 --- a/public/js/components/Calendar/Day/Page.js +++ b/public/js/components/Calendar/Day/Page.js @@ -61,13 +61,13 @@ export default { }, immediate: true, }, - eventsPerDayAndHour: { + events: { handler(newEvents) { // if no event is selected, select the first event of the day - if (this.selectedEvent == null && newEvents[this.day.toDateString()]?.events.length > 0) { - let events = newEvents[this.day.toDateString()]?.events; + if (this.selectedEvent == null && newEvents[this.day.toDateString()].length > 0) { + let events = newEvents[this.day.toDateString()]; if (Array.isArray(events) && events.length > 0) { - this.setSelectedEvent(events[0].orig); + this.setSelectedEvent(events[0]); } } }, @@ -298,8 +298,8 @@ export default { this.$emit('input', event); }, calcHourPosition(event) { - let height = this.$refs.eventcontainer.getBoundingClientRect().height; - let top = this.$refs.eventcontainer.getBoundingClientRect().top; + let height = this.$refs.events.getBoundingClientRect().height; + let top = this.$refs.events.getBoundingClientRect().top; let position = event.clientY - top; // position percentage of total height let timePercentage = (position / height) * 100; @@ -365,35 +365,18 @@ export default {
-
-
+
+
+
+ +
+
+ + + +
+

Keine Lehrveranstaltungen

+
+ +
+ {{hourPositionTime}}
+ + +
+ {{curTime}} +
+ +
+
+
{{hour}}:00
+
+
+
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js index 04e3a8e64..896be61bc 100644 --- a/public/js/components/Calendar/Month/Page.js +++ b/public/js/components/Calendar/Month/Page.js @@ -138,15 +138,15 @@ export default {
{{dayText[day]}}
- - + diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js index b4ee7626c..86db5947e 100644 --- a/public/js/components/Calendar/Week/Page.js +++ b/public/js/components/Calendar/Week/Page.js @@ -11,6 +11,7 @@ export default { hourPositionTime:null, resizeObserver: null, width: 0, + scrollContainer: null, } }, inject: [ @@ -27,7 +28,8 @@ export default { ], props: { year: Number, - week: Number + week: Number, + active: Boolean }, emits: [ 'updateMode', @@ -35,6 +37,23 @@ export default { 'page:forward', 'input', ], + watch: { + active: { + handler(value) { + const activeContainer = document.querySelector("#calendarContainer") + if(value){ + Vue.nextTick(() => { + this.scrollContainer = activeContainer; + activeContainer.addEventListener('wheel', this.scrollFunction); + }) + }else{ + this.scrollContainer=null; + activeContainer?.removeEventListener('wheel', this.scrollFunction); + } + }, + immediate: true, + } + }, computed: { allDayEvents(){ let allDayEvents = {}; @@ -190,6 +209,10 @@ export default { } }, methods: { + scrollFunction(event){ + event.preventDefault(); + this.scrollContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' }); + }, hourGridIdentifier(hour) { // this is the id attribute that is responsible to scroll the calender to the first event return 'scroll' + hour + this.focusDate.d + this.week; @@ -335,7 +358,7 @@ export default { container.style['overflow-y'] = 'scroll' container.style['overflow-x'] = 'auto' } - + this.initResizeObserver(); }, beforeUnmount() { @@ -350,12 +373,12 @@ export default { {{dayText[day]?.datum}}
-
+
-
- -
+ +
this is a placeholder which means that no template was passed to the Calendar Page slot

-
+
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js index b5ade9542..4b4879e29 100644 --- a/public/js/components/Cis/Stundenplan/Stundenplan.js +++ b/public/js/components/Cis/Stundenplan/Stundenplan.js @@ -3,6 +3,7 @@ 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" export const Stundenplan = { name: 'Stundenplan', @@ -36,7 +37,7 @@ export const Stundenplan = { } }, components: { - FhcCalendar, LvModal, LvMenu, LvInfo + FhcCalendar, LvModal, LvMenu, LvInfo, moodleSvg }, computed:{ downloadLinks: function(){ @@ -221,9 +222,15 @@ export const Stundenplan = {