From aded9067e56971f9262294e11dae49073597bf04 Mon Sep 17 00:00:00 2001 From: chfhtw Date: Tue, 5 Aug 2025 14:37:36 +0200 Subject: [PATCH] remove id-attribute from calendar renderer templates --- public/css/Cis4/CoreCalendarEvents.css | 60 ++++---- .../Cis/Renderer/Feiertage/calendarEvent.js | 8 +- .../Cis/Renderer/Lehreinheit/calendarEvent.js | 129 +++++++++++------- .../Renderer/Reservierungen/calendarEvent.js | 95 ++++++++++--- 4 files changed, 189 insertions(+), 103 deletions(-) diff --git a/public/css/Cis4/CoreCalendarEvents.css b/public/css/Cis4/CoreCalendarEvents.css index df451ebf1..3941872ef 100644 --- a/public/css/Cis4/CoreCalendarEvents.css +++ b/public/css/Cis4/CoreCalendarEvents.css @@ -4,96 +4,96 @@ height: 100%; } -/* Feiertag */ -.feiertagEventContent { +/* Feiertage */ +.cis-renderer-feiertage-calendar-event { align-items: center; color: var(--fhc-light); } -.monthPageContainer .feiertagEventContent, -.weekPageContainer .feiertagEventContent, -.dayPageContainer .feiertagEventContent { +.monthPageContainer .cis-renderer-feiertage-calendar-event, +.weekPageContainer .cis-renderer-feiertage-calendar-event, +.dayPageContainer .cis-renderer-feiertage-calendar-event { display: grid; grid-template-columns: auto 1fr; justify-items: center; } -.listPageContainer .feiertagEventContent { +.listPageContainer .cis-renderer-feiertage-calendar-event { display: flex; justify-content: center; } -.monthPageContainer .feiertagEventContent #ferienEventIcon { +.monthPageContainer .cis-renderer-feiertage-calendar-event .event-icon { margin: 0 .5rem; } -.weekPageContainer .feiertagEventContent #ferienEventIcon, -.dayPageContainer .feiertagEventContent #ferienEventIcon, -.listPageContainer .feiertagEventContent #ferienEventIcon { +.weekPageContainer .cis-renderer-feiertage-calendar-event .event-icon, +.dayPageContainer .cis-renderer-feiertage-calendar-event .event-icon, +.listPageContainer .cis-renderer-feiertage-calendar-event .event-icon { margin: .5rem; } -.listPageContainer .feiertagEventContent #ferienEventTitle { +.listPageContainer .cis-renderer-feiertage-calendar-event .event-title { flex-grow: 1; } /* Lehreinheit */ -.monthPageContainer .lehreinheitEventContent { +/* Reservierungen */ +.monthPageContainer .calendar-event-default { padding: 0!important; } -.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader, -.monthPageContainer .lehreinheitEventContent #lehreinheitLektoren, -.monthPageContainer .lehreinheitEventContent #lektorEllipsis { +.monthPageContainer .calendar-event-default .event-time, +.monthPageContainer .calendar-event-default .event-lectors { display: none!important; } -.monthPageContainer .lehreinheitEventContent #lehreinheitEventText { +.monthPageContainer .calendar-event-default .event-text { display: flex; justify-content: space-evenly; align-items: center; } -.weekPageContainer .lehreinheitEventContent { +.weekPageContainer .calendar-event-default { display: grid; grid-template-columns: auto 1fr; } -.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader { +.weekPageContainer .calendar-event-default .event-time { border-inline-end: solid 1px var(--bs-secondary); align-self: stretch; align-content: center; padding: .25em .5em .25em .25em; margin-inline-end: .25rem; } -.weekPageContainer .lehreinheitEventContent #lehreinheitEventText { +.weekPageContainer .calendar-event-default .event-text { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } -.dayPageContainer .lehreinheitEventContent, -.listPageContainer .lehreinheitEventContent { +.dayPageContainer .calendar-event-default, +.listPageContainer .calendar-event-default { display: flex; align-items: center; } -.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader, -.listPageContainer .lehreinheitEventContent #lehreinheitEventHeader { +.dayPageContainer .calendar-event-default .event-time, +.listPageContainer .calendar-event-default .event-time { align-content: center; padding-inline-end: .5em; border-inline-end: solid 1px; margin-inline-end: .5em; } -.dayPageContainer .lehreinheitEventContent #lehreinheitEventText, -.listPageContainer .lehreinheitEventContent #lehreinheitEventText { +.dayPageContainer .calendar-event-default .event-text, +.listPageContainer .calendar-event-default .event-text { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .25em; justify-content: center; } -.dayPageContainer .lehreinheitEventContent #lehreinheitTopic, -.dayPageContainer .lehreinheitEventContent #lehreinheitOrt, -.listPageContainer .lehreinheitEventContent #lehreinheitTopic, -.listPageContainer .lehreinheitEventContent #lehreinheitOrt { +.dayPageContainer .calendar-event-default .event-topic, +.dayPageContainer .calendar-event-default .event-place, +.listPageContainer .calendar-event-default .event-topic, +.listPageContainer .calendar-event-default .event-place { flex: 0 0 100%; text-align: center; } -.fhc-roominformation .lehreinheitEventContent #lehreinheitOrt { +.fhc-roominformation .calendar-event-default .event-place { display: none; } diff --git a/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js b/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js index ffc164117..d226e935a 100644 --- a/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js +++ b/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js @@ -7,8 +7,8 @@ export default { }, }, template: ` -
- - {{event.titel}} -
`, +
+ + {{ event.titel }} +
`, }; \ No newline at end of file diff --git a/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js b/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js index a334ea4d4..ca8d470e2 100644 --- a/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js +++ b/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js @@ -1,59 +1,92 @@ 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 }); - - }, - }, - computed:{ - calendarEventTooltip: function(){ - let lektorenEmpty = true; - let tooltipString = `${this.$p.t('global','uhrzeit')}: ${this.convertTime(this.event.beginn.split(":"))} / ${this.convertTime(this.event.ende.split(":")) }`; - - tooltipString += `\n${this.$p.t('profilUpdate', 'topic')}: ${this.event.topic}`; - tooltipString += `${this.$p.t('person', 'ort')}: ${this.event.ort_kurzbz}`; - if(Array.isArray(this.event.lektor) && this.event.lektor.length > 0){ - lektorenEmpty = false; - tooltipString += `\n${this.$p.t('lehre','lektor')}: `; - this.event.lektor.slice(0,3).forEach(lektor => { - tooltipString += `${lektor.kurzbz}\n`; - }) - if(this.event.lektor.length > 3){ - tooltipString += `${this.$p.t('lehre', 'weitereLektoren', [(this.event.lektor.length - 3)])}\n`; - } - } - if(lektorenEmpty){ - tooltipString += "\n"; - } - - - return tooltipString; - }, - }, props:{ event: { - type:Object, - required:true, + type: Object, + required: true + } + }, + computed:{ + tooltipString() { + const tooltipArray = []; + + tooltipArray.push([ + this.$p.t('global/uhrzeit'), + [this.start, this.end].join(' - ') + ].join(": ")); + + tooltipArray.push([ + this.$p.t('profilUpdate/topic'), + this.event.topic + ].join(": ")); + + tooltipArray.push([ + this.$p.t('person/ort'), + this.event.ort_kurzbz + ].join(": ")); + + this.event.lektor = [ + this.event.lektor[0], + this.event.lektor[0], + this.event.lektor[0], + this.event.lektor[0], + this.event.lektor[0], + ]; + + if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) { + if (this.event.lektor.length > 3) { + tooltipArray.push([ + this.$p.t('lehre/lektor'), + this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n") + + "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3]) + ].join(": ")); + } else {console.log(this.event.lektor); + tooltipArray.push([ + this.$p.t('lehre/lektor'), + this.event.lektor.map(lektor => lektor.kurzbz).join("\n") + ].join(": ")); + } + } + + return tooltipArray.join("\n"); }, + start() { + return luxon.Duration + .fromISOTime(this.event.beginn) + .toISOTime({ suppressSeconds: true }); + }, + end() { + return luxon.Duration + .fromISOTime(this.event.ende) + .toISOTime({ suppressSeconds: true }); + } }, template: /*html*/` -
-
- {{convertTime(event.beginn.split(":"))}} - {{convertTime(event.ende.split(":"))}} +
+
+ {{ start }} + {{ end }}
-
- {{event.topic}} - {{event.ort_kurzbz}} - - {{lektor.kurzbz}} +
+ {{ event.topic }} + {{ event.ort_kurzbz }} + + {{ lektor.kurzbz }} + + + ... +{{ event.lektor.length - 3 }} - ...+ - {{event.lektor.length-3}}
`, diff --git a/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js b/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js index c6b8054c2..2447c4f61 100644 --- a/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js +++ b/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js @@ -1,30 +1,83 @@ 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, - }, + required: true + } }, - template: ` -
-
- {{convertTime(event.beginn.split(":"))}} - {{convertTime(event.ende.split(":"))}} + computed: { + tooltipString() { + const tooltipArray = []; + + tooltipArray.push([ + this.$p.t('global/uhrzeit'), + [this.start, this.end].join(' - ') + ].join(": ")); + + tooltipArray.push([ + this.$p.t('profilUpdate/topic'), + this.event.topic + ].join(": ")); + + tooltipArray.push([ + this.$p.t('person/ort'), + this.event.ort_kurzbz + ].join(": ")); + + if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) { + if (this.event.lektor.length > 3) { + tooltipArray.push([ + this.$p.t('lehre/lektor'), + this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n") + + "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3]) + ].join(": ")); + } else { + tooltipArray.push([ + this.$p.t('lehre/lektor'), + this.event.lektor.map(lektor => lektor.kurzbz).join("\n") + ].join(": ")); + } + } + + return tooltipArray.join("\n"); + }, + start() { + return luxon.Duration + .fromISOTime(this.event.beginn) + .toISOTime({ suppressSeconds: true }); + }, + end() { + return luxon.Duration + .fromISOTime(this.event.ende) + .toISOTime({ suppressSeconds: true }); + } + }, + template: /* html */` +
+
+ {{ start }} + {{ end }}
-
- {{event.topic}} - {{lektor.kurzbz}} - {{event.ort_kurzbz}} +
+ {{ event.topic }} + + {{ lektor.kurzbz }} + + + ... +{{ event.lektor.length - 3 }} + + {{ event.ort_kurzbz }}
`,