+
diff --git a/public/js/components/Dashboard/Dashboard.js b/public/js/components/Dashboard/Dashboard.js
index 81eabd31c..3d781ac72 100644
--- a/public/js/components/Dashboard/Dashboard.js
+++ b/public/js/components/Dashboard/Dashboard.js
@@ -19,9 +19,8 @@ export default {
viewData: {
type: Object,
required: true,
- default: () => ({name: '', uid: ''}),
validator(value) {
- return value && value.name && value.uid
+ return value && value.name && value.uid && value.timezone
}
}
},
@@ -37,6 +36,7 @@ export default {
return {
editMode: Vue.computed(()=>this.editMode),
widgetsSetup: Vue.computed(() => this.widgets),
+ timezone: Vue.computed(() => this.viewData.timezone)
}
},
computed: {
diff --git a/public/js/components/DashboardWidget/LvPlan.js b/public/js/components/DashboardWidget/LvPlan.js
index 1e2588161..3961bae78 100644
--- a/public/js/components/DashboardWidget/LvPlan.js
+++ b/public/js/components/DashboardWidget/LvPlan.js
@@ -1,266 +1,115 @@
-import Phrasen from '../../mixins/Phrasen.js';
import AbstractWidget from './Abstract.js';
-import FhcCalendar from '../Calendar/Calendar.js';
-import LvModal from '../Cis/Mylv/LvModal.js';
-import ContentModal from '../Cis/Cms/ContentModal.js'
-import CalendarDate from '../../composables/CalendarDate.js';
+import FhcCalendar from '../Calendar/Base.js';
import ApiLvPlan from '../../api/factory/lvPlan.js';
-import ApiOrt from '../../api/factory/ort.js';
+
+import { useEventLoader } from '../../composables/EventLoader.js';
+
+import ModeList from '../Calendar/Mode/List.js';
export default {
name: "LvPlanWidget",
+ components: {
+ FhcCalendar
+ },
mixins: [
- Phrasen,
AbstractWidget
],
- components: {
- FhcCalendar,
- LvModal,
- ContentModal
- },
-
+ inject: [
+ "renderers",
+ "timezone"
+ ],
data() {
return {
- stunden: [],
- minimized: true,
- events: null,
- currentDay: this.getCurrentDate(),
- calendarDate: new CalendarDate(new Date()),
- roomInfoContentID: null,
- ort_kurzbz: null,
- selectedEvent: null,
- isModalContentResolved: false,
- isModalTitleResolved: false,
- isShowModal: false,
- }
- },
- inject: ["renderers"],
- watch:{
- modalLoaded: {
- handler: function (newValue) {
- if (this.isShowModal && newValue.isModalContentResolved && newValue.isModalTitleResolved) {
- this.$nextTick(() => {
- if (this.$refs.lvmodal) this.$refs.lvmodal.show();
- this.isShowModal = false;
- });
+ now: luxon.DateTime.now().setZone(this.timezone),
+ modes: {
+ list: Vue.markRaw(ModeList)
+ },
+ modeOptions: {
+ list: {
+ length: 7
}
},
- immediate: true
- },
- },
- computed: {
- modalLoaded: function () {
- return { isModalContentResolved: this.isModalContentResolved, isModalTitleResolved: this.isModalTitleResolved };
- },
- allEventsGrouped() {
- // groups all events of the next 7 days together
- const currentCalendarDate = new CalendarDate(this.currentDay)
- const mapArr = currentCalendarDate.nextSevenDays.map((d) => [new CalendarDate(d), []])
-
- // return map of key => calendar date of next 7 days & values the respective events on that date
- return new Map((this.events || []).filter(evt => evt.start >= this.currentDay).reduce((acc, cur) => {
- const date = new CalendarDate(new Date(cur.datum))
- const arr = acc.find(el => el[0].compare(date))
- if(!arr) return acc
- arr[1].push(cur)
-
- return acc
- }, mapArr));
- },
- currentEvents() {
- return (this.events || []).filter(evt => evt.end < this.dayAfterCurrentDay && evt.start >= this.currentDay);
- },
- dayAfterCurrentDay() {
- let currentDay = new Date(this.currentDay);
- currentDay.setDate(currentDay.getDate() + 1);
- return currentDay;
- },
- monthFirstDay: function () {
- return this.calendarDateToString(this.calendarDate.cdFirstDayOfCalendarMonth);
- },
- monthLastDay: function () {
- return this.calendarDateToString(this.calendarDate.cdLastDayOfNextCalendarMonth);
- },
+ currentDay: luxon.DateTime.now().setZone(this.timezone).startOf('day')
+ }
},
methods: {
- showModal: function (event) {
- this.currentlySelectedEvent = event;
- Vue.nextTick(() => {
- if (this.isModalContentResolved && this.isModalTitleResolved) {
- if (this.$refs.lvmodal) this.$refs.lvmodal.show();
- }
- else {
- this.isShowModal = true;
- }
- })
- },
- modalTitleResolved: function () {
- this.isModalTitleResolved = true;
-
- },
- modalContentResolved: function () {
- this.isModalContentResolved = true;
-
- },
- modalTitleComponent(type) {
- return this.renderers[type]?.modalTitle;
- },
- modalContentComponent(type) {
- return this.renderers[type]?.modalContent;
- },
- calendarEventComponent(type) {
- return this.renderers[type]?.calendarEvent;
- },
- getEventStyle: function(evt) {
- const styles = {'background-color': evt.color};
- if(evt.start.getTime() < Date.now()) styles.opacity = 0.5;
+ eventStyle(event) {
+ const styles = {};
+ if (event.farbe)
+ styles['--event-bg'] = '#' + event.farbe;
+ else if (event.type == 'reservierung')
+ styles['--event-bg'] = '#ffffff';
+ else
+ styles['--event-bg'] = '#cccccc';
+ const eventEnd = luxon.DateTime.fromISO(event.isoend, { zone: this.timezone });
+ if (eventEnd < this.now)
+ styles['opacity'] = .5;
+
return styles;
},
- getCurrentDate: function() {
- const today = new Date()
- today.setHours(0,0,0)
- return today
- },
- calendarDateToString: function (calendarDate) {
-
- return calendarDate instanceof CalendarDate ?
- [calendarDate.y, calendarDate.m + 1, calendarDate.d].join('-') :
- null;
-
- },
- showRoomInfoModal: function(ort_kurzbz){
- // getting the content_id of the ort_kurzbz
- this.$api
- .call(ApiOrt.getContentID(ort_kurzbz))
- .then(res => {
- this.roomInfoContentID = res.data;
- this.ort_kurzbz = ort_kurzbz;
-
- // only showing the modal after vue was able to set the reactive data
- Vue.nextTick(() => { this.$refs.contentModal.show(); });
- })
- .catch(err => {
- console.err(err);
- this.ort_kurzbz = null;
- this.roomInfoContentID = null;
- });
- },
- showLvUebersicht: function (event){
- this.selectedEvent= event;
- Vue.nextTick(()=>{
- this.$refs.lvmodal.show();
- });
- },
-
- selectDay(day) {
- this.currentDay = day;
- this.minimized = true;
- },
-
- updateRange: function (data) {
-
- let tmp_date = new CalendarDate(data.start);
- // only load month data if the month or year has changed
- if (tmp_date.m != this.calendarDate.m || tmp_date.y != this.calendarDate.y) {
- this.calendarDate = tmp_date;
- Vue.nextTick(() => {
- this.loadEvents();
- });
- }
- },
-
-
- loadEvents: function () {
- Promise.allSettled([
- this.$api.call(ApiLvPlan.LvPlanEvents(this.monthFirstDay, this.monthLastDay)),
- this.$api.call(ApiLvPlan.getLvPlanReservierungen(this.monthFirstDay, this.monthLastDay))
- ]).then((result) => {
- let promise_events = [];
- result.forEach((promise_result) => {
- if (promise_result.status === 'fulfilled' && promise_result.value.meta.status === "success") {
-
- let data = promise_result.value.data;
- // adding additional information to the events
- if (data && data.forEach) {
-
- data.forEach((el, i) => {
- el.id = i;
- if (el.type === 'reservierung') {
- el.color = '#' + (el.farbe || 'FFFFFF');
- } else {
- el.color = '#' + (el.farbe || 'CCCCCC');
- }
-
- el.start = new Date(el.datum + ' ' + el.beginn);
- el.end = new Date(el.datum + ' ' + el.ende);
-
- });
- }
- promise_events = promise_events.concat(data);
- }
- })
- this.events = promise_events;
- });
- },
-
- setCalendarMaximized() {
- this.minimized = false
+ updateRange(rangeInterval) {
+ this.rangeInterval = rangeInterval;
}
-
+ },
+ setup() {
+ const $api = Vue.inject('$api');
+ const rangeInterval = Vue.ref(null);
+
+ const { events } = useEventLoader(rangeInterval, (start, end) => {
+ return [
+ $api.call(ApiLvPlan.LvPlanEvents(start.toISODate(), end.toISODate())),
+ $api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+ ];
+ });
+
+ return {
+ rangeInterval,
+ events
+ };
},
created() {
this.$emit('setConfig', false);
- this.loadEvents();
},
template: /*html*/`