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

change Stundenplan/Rauminfo currentDay on prev/next event by certain offset and update url/browser history

Browse Source
This commit is contained in:
Johann Hoffmann
2025-02-20 12:59:28 +01:00
parent 1d9ea5d091
commit 3d467524e4
9 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Calendar/Calendar.js
+4 -2
View File
@@ -95,7 +95,8 @@ export default {
'select:event',
'change:range',
'update:minimized',
'selectedEvent'
'selectedEvent',
'change:offset'
],
data() {
return {
@@ -240,7 +241,8 @@ export default {
},
template: /*html*/`
<div ref="container" class="fhc-calendar card h-100" :class="sizeClass">
<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)"
@input="handleInput" @change:offset="$emit('change:offset', $event)">
<template #calendarDownloads>
<slot name="calendarDownloads" ></slot>
</template>
public/js/components/Calendar/Day.js
+2
View File
@@ -27,9 +27,11 @@ export default {
},
prev() {
this.$refs.pane.prev();
this.$emit('change:offset', { y: 0, m: 0, d: -1 });
},
next() {
this.$refs.pane.next();
this.$emit('change:offset', { y: 0, m: 0, d: -1 });
},
selectEvent(event) {
this.$emit('input', ['select:event', event]);
public/js/components/Calendar/Month.js
+2
View File
@@ -35,9 +35,11 @@ export default {
},
prev() {
this.$refs.pane.prev();
this.$emit('change:offset', { y: 0, m: -1, d: 0 });
},
next() {
this.$refs.pane.next();
this.$emit('change:offset', { y: 0, m: 1, d: 0 });
},
selectDay(day) {
let m = day.getMonth();
public/js/components/Calendar/Week.js
+2
View File
@@ -27,9 +27,11 @@ export default {
},
prev() {
this.$refs.pane.prev();
this.$emit('change:offset', { y: 0, m: 0, d: -7 });
},
next() {
this.$refs.pane.next();
this.$emit('change:offset', { y: 0, m: 0, d: 7 });
},
selectEvent(event) {
this.$emit('input', ['select:event',event]);
public/js/components/Calendar/Week/Page.js
+6 -1
View File
@@ -272,6 +272,11 @@ export default {
this.$emit('updateMode', 'month');
}
},
changeToDay(day) {
this.date.set(day);
this.focusDate.set(day);
this.$emit('updateMode', 'day');
},
dateToMinutesOfDay(day) {
// subtract 7 from the total hours because the hours range from 7 to 24
return Math.floor(((day.getHours()-7) * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1;
@@ -320,7 +325,7 @@ export default {
<div ref="page" class="fhc-calendar-week-page" style="min-width: 700px;">
<div class="d-flex flex-column">
<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToMonth(day)">
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
<div class="fw-bold">{{dayText[day]?.tag}}</div>
<a href="#" class="small text-secondary text-decoration-none" >{{dayText[day]?.datum}}</a>
</div>
public/js/components/Calendar/Weeks.js
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
},
},
template: `
<div class="fhc-calendar-weeks">
<div class="fhc-calendar-weeks h-100">
<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
<div class="d-flex flex-wrap">
<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
public/js/components/Calendar/Years.js
+2
View File
@@ -41,9 +41,11 @@ export default {
},
prev() {
this.$refs.pane.prev();
this.$emit('change:offset', { y: -1, m: 0, d: 0 });
},
next() {
this.$refs.pane.next();
this.$emit('change:offset', { y: 1, m: 0, d: 0 });
}
},
created() {
public/js/components/Cis/Mylv/RoomInformation.js
+22 -1
View File
@@ -79,6 +79,26 @@ const RoomInformation = {
this.currentDay = day;
},
handleOffset: function(offset) {
this.currentDay = new Date(
this.currentDay.getFullYear() + offset.y,
this.currentDay.getMonth() + offset.m,
this.currentDay.getDate() + offset.d
)
const date = this.currentDay.getFullYear() + "-" +
String(this.currentDay.getMonth() + 1).padStart(2, "0") + "-" +
String(this.currentDay.getDate()).padStart(2, "0");
this.$router.push({
name: "Stundenplan",
params: {
mode: this.calendarMode,
focus_date: date,
lv_id: this.propsViewData?.lv_id || null
}
})
},
handleChangeMode(mode) {
const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
@@ -167,7 +187,8 @@ const RoomInformation = {
ref="calendar"
@selectedEvent="setSelectedEvent"
:initial-date="currentDay"
@change:range="updateRange"
@change:range="updateRange"
@change:offset="handleOffset"
:events="events"
:initial-mode="propsViewData.mode"
show-weeks
public/js/components/Cis/Stundenplan/Stundenplan.js
+22 -1
View File
@@ -106,6 +106,26 @@ const Stundenplan = {
this.currentDay = day;
},
handleOffset: function(offset) {
this.currentDay = new Date(
this.currentDay.getFullYear() + offset.y,
this.currentDay.getMonth() + offset.m,
this.currentDay.getDate() + offset.d
)
const date = this.currentDay.getFullYear() + "-" +
String(this.currentDay.getMonth() + 1).padStart(2, "0") + "-" +
String(this.currentDay.getDate()).padStart(2, "0");
this.$router.push({
name: "Stundenplan",
params: {
mode: this.calendarMode,
focus_date: date,
lv_id: this.propsViewData?.lv_id || null
}
})
},
handleChangeMode(mode) {
const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
@@ -127,7 +147,7 @@ const Stundenplan = {
});
},
updateRange: function ({start,end}) {
let checkDate = (date) => {
return date.m != this.eventCalendarDate.m || date.y != this.eventCalendarDate.y;
}
@@ -202,6 +222,7 @@ const Stundenplan = {
@selectedEvent="setSelectedEvent"
:initial-date="currentDay"
@change:range="updateRange"
@change:offset="handleOffset"
:events="events"
:initial-mode="propsViewData.mode"
show-weeks