mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-20 00:12:15 +00:00
remove id-attribute from calendar renderer templates
This commit is contained in:
chfhtw
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@ export default {
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="feiertagEventContent " >
|
||||
<i id="ferienEventIcon" class="fa-regular fa-calendar"></i>
|
||||
<span id="ferienEventTitle" class="fw-bold text-center">{{event.titel}}</span>
|
||||
</div>`,
|
||||
<div class="cis-renderer-feiertage-calendar-event">
|
||||
<i class="event-icon" class="fa-regular fa-calendar"></i>
|
||||
<span class="event-title fw-bold text-center">{{ event.titel }}</span>
|
||||
</div>`,
|
||||
};
|
||||
@@ -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*/`
|
||||
<div class="lehreinheitEventContent h-100 w-100 p-1" @wheel.stop >
|
||||
<div id="lehreinheitEventHeader" class="d-none d-xl-grid h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
|
||||
<span >{{convertTime(event.beginn.split(":"))}}</span>
|
||||
<span >{{convertTime(event.ende.split(":"))}}</span>
|
||||
<div
|
||||
class="cis-renderer-lehreinheit-calendar-event calendar-event-default h-100 w-100 p-1"
|
||||
@wheel.stop
|
||||
>
|
||||
<div
|
||||
v-if="!event.allDayEvent && event?.beginn && event?.ende"
|
||||
class="event-time d-none d-xl-grid h-100"
|
||||
>
|
||||
<span>{{ start }}</span>
|
||||
<span>{{ end }}</span>
|
||||
</div>
|
||||
<div id="lehreinheitEventText" v-tooltip="calendarEventTooltip">
|
||||
<span id="lehreinheitTopic">{{event.topic}}</span>
|
||||
<span id="lehreinheitOrt">{{event.ort_kurzbz}}</span>
|
||||
<span id="lehreinheitLektoren" v-for="(lektor,index) in event.lektor.slice(0,3)">
|
||||
{{lektor.kurzbz}}
|
||||
<div class="event-text" v-tooltip="tooltipString">
|
||||
<span class="event-topic">{{ event.topic }}</span>
|
||||
<span class="event-place">{{ event.ort_kurzbz }}</span>
|
||||
<span
|
||||
v-for="(lektor,index) in event.lektor.slice(0, 3)"
|
||||
class="event-lectors"
|
||||
>
|
||||
{{ lektor.kurzbz }}
|
||||
</span>
|
||||
<span
|
||||
v-if="event.lektor.length > 3"
|
||||
class="event-lectors-plus"
|
||||
>
|
||||
... +{{ event.lektor.length - 3 }}
|
||||
</span>
|
||||
<span id="lektorEllipsis" class="fw-bold" v-if="event.lektor.length > 3">...+
|
||||
{{event.lektor.length-3}}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -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: `
|
||||
<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>
|
||||
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 */`
|
||||
<div
|
||||
class="cis-renderer-reservierungen-calendar-event calendar-event-default h-100 w-100 p-1"
|
||||
>
|
||||
<div
|
||||
v-if="!event.allDayEvent && event?.beginn && event?.ende"
|
||||
class="event-time d-grid h-100"
|
||||
>
|
||||
<span>{{ start }}</span>
|
||||
<span>{{ end }}</span>
|
||||
</div>
|
||||
<div id="lehreinheitEventText">
|
||||
<span>{{event.topic}}</span>
|
||||
<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
|
||||
<span>{{event.ort_kurzbz}}</span>
|
||||
<div class="event-text" v-tooltip="tooltipString">
|
||||
<span class="event-topic">{{ event.topic }}</span>
|
||||
<span
|
||||
v-for="lektor in event.lektor.slice(0, 3)"
|
||||
class="event-lectors"
|
||||
>
|
||||
{{ lektor.kurzbz }}
|
||||
</span>
|
||||
<span
|
||||
v-if="event.lektor.length > 3"
|
||||
class="event-lectors-plus"
|
||||
>
|
||||
... +{{ event.lektor.length - 3 }}
|
||||
</span>
|
||||
<span class="event-place">{{ event.ort_kurzbz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
Reference in New Issue
Block a user