+
diff --git a/public/js/components/Calendar/Abstract.js b/public/js/components/Calendar/Abstract.js
deleted file mode 100644
index 54b0304c7..000000000
--- a/public/js/components/Calendar/Abstract.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import CalendarHeader from './Header.js';
-
-export default {
- components: {
- CalendarHeader
- },
- inject: [
- 'date',
- 'focusDate',
- 'size'
- ],
- emits: [
- 'updateMode',
- 'change:range',
- 'input'
- ]
-}
diff --git a/public/js/components/Calendar/Base.js b/public/js/components/Calendar/Base.js
new file mode 100644
index 000000000..2069347da
--- /dev/null
+++ b/public/js/components/Calendar/Base.js
@@ -0,0 +1,308 @@
+import BaseDraganddrop from './Base/DragAndDrop.js';
+import BaseHeader from './Base/Header.js';
+import BaseSlider from './Base/Slider.js';
+import BsModal from '../Bootstrap/Modal.js';
+
+import CalClick from '../../directives/Calendar/Click.js';
+
+export default {
+ name: "CalendarBase",
+ components: {
+ BaseDraganddrop,
+ BaseHeader,
+ BaseSlider,
+ BsModal
+ },
+ directives: {
+ CalClick
+ },
+ provide() {
+ return {
+ locale: Vue.computed(() => this.locale),
+ timezone: Vue.computed(() => this.timezone),
+ timeGrid: Vue.computed(() => this.timeGrid),
+ draggableEvents: Vue.computed(() => {
+ if (!this.draggableEvents)
+ return () => false;
+
+ if (Array.isArray(this.draggableEvents))
+ return event => this.draggableEvents.includes(event.type);
+ if (this.draggableEvents instanceof Function)
+ return this.draggableEvents;
+
+ return () => true;
+ }),
+ dropableEvents: Vue.computed(() => {
+ if (!this.onDrop)
+ return () => false;
+
+ if (Array.isArray(this.dropableEvents))
+ return item => this.dropableEvents.includes(item.type);
+ if (this.dropableEvents instanceof Function)
+ return this.dropableEvents;
+
+ return () => true;
+ }),
+ hasDragoverFunc: Vue.computed(() => this.onDragover),
+ mode: Vue.computed(() => this.mode)
+ };
+ },
+ props: {
+ locale: {
+ type: String,
+ default: 'de'
+ },
+ timezone: {
+ type: String,
+ required: true
+ },
+ date: {
+ type: [Date, String, Number, luxon.DateTime],
+ default: props => luxon.DateTime.now().setZone(props.timezone).startOf('day')
+ },
+ modes: {
+ type: Object,
+ required: true,
+ default: {}
+ // TODO(chris): verfication functions
+ },
+ mode: String,
+ modeOptions: Object,
+ events: {
+ type: Array,
+ default: []
+ },
+ backgrounds: {
+ type: Array,
+ default: []
+ },
+ showBtns: Boolean,
+ btnMonth: {
+ type: Boolean,
+ default: undefined
+ },
+ btnWeek: {
+ type: Boolean,
+ default: undefined
+ },
+ btnDay: {
+ type: Boolean,
+ default: undefined
+ },
+ btnList: {
+ type: Boolean,
+ default: undefined
+ },
+ timeGrid: Array,
+ draggableEvents: [Boolean, Array, Function],
+ dropableEvents: [Boolean, Array, Function],
+ onDragover: Function,
+ onDrop: Function
+ },
+ emits: [
+ "click:next",
+ "click:prev",
+ "click:mode",
+ "click:event",
+ "click:day",
+ "click:week",
+ "update:date",
+ "update:mode",
+ "update:range",
+ "drop"
+ ],
+ data() {
+ return {
+ internalView: null,
+ internalDate: null,
+ modalEvent: null
+ };
+ },
+ computed: {
+ convertedEvents() {
+ return this.events.map(orig => ({
+ id: orig.type + orig[orig.type + '_id'],
+ type: orig.type,
+ start: luxon.DateTime.fromISO(orig.isostart).setZone(this.timezone),
+ end: luxon.DateTime.fromISO(orig.isoend).setZone(this.timezone),
+ orig
+ }));
+ },
+ convertedBackgrounds() {
+ return this.backgrounds.map(bg => {
+ const res = { ...bg };
+ if (res.start) {
+ if (Number.isInteger(res.start))
+ res.start = luxon.DateTime.fromMillis(res.start, { zone: this.timezone, locale: this.locale });
+ else if (res.start instanceof Date)
+ res.start = luxon.DateTime.fromJSDate(res.start, { zone: this.timezone, locale: this.locale });
+ else if (typeof res.start ===
+ 'string' || res.start instanceof String)
+ res.start = luxon.DateTime.fromISO(res.start, { zone: this.timezone, locale: this.locale });
+ }
+ if (res.end) {
+ if (Number.isInteger(res.end))
+ res.end = luxon.DateTime.fromMillis(res.end, { zone: this.timezone, locale: this.locale });
+ else if (res.end instanceof Date)
+ res.end = luxon.DateTime.fromJSDate(res.end, { zone: this.timezone, locale: this.locale });
+ else if (typeof res.end ===
+ 'string' || res.end instanceof String)
+ res.end = luxon.DateTime.fromISO(res.end, { zone: this.timezone, locale: this.locale });
+ }
+ return res;
+ });
+ },
+ sDate() {
+ if (this.date instanceof luxon.DateTime)
+ return this.date;
+ return luxon.DateTime.fromJSDate(new Date(this.date)).setZone(this.timezone);
+ },
+ cDate: {
+ get() {
+ const date = this.internalDate ? this.internalDate : this.sDate;
+ return date.setLocale(this.locale);
+ },
+ set(value) {
+ this.internalDate = value;
+ this.$emit('update:date', value, this.cMode);
+ }
+ },
+ sMode() {
+ // choose default mode
+ let mode = this.mode;
+ if (mode)
+ mode = mode.toLowerCase();
+ if (!mode || !this.modes[mode])
+ mode = Object.keys(this.modes).find(Boolean); // start with first entry as active mode
+ return mode || '';
+ },
+ cMode: {
+ get() {
+ return this.internalView ? this.internalView : this.sMode;
+ },
+ set(value) {
+ this.internalView = value;
+ this.$emit('update:mode', value, this.cDate);
+ }
+ }
+ },
+ watch: {
+ sDate(n, o) {
+ if (this.sDate.isValid && !this.sDate.hasSame(this.internalDate, 'day'))
+ this.internalDate = this.sDate;
+ },
+ sMode() {
+ if (this.sMode)
+ this.internalView = this.sMode;
+ }
+ },
+ methods: {
+ clickPrev() {
+ const evt = new Event('click:prev', {cancelable: true});
+ this.$emit('click:prev', evt);
+ if (evt.defaultPrevented)
+ return;
+
+ // default: switch page
+ this.$refs.mode.prevPage();
+ },
+ clickNext() {
+ const evt = new Event('click:next', {cancelable: true});
+ this.$emit('click:next', evt);
+ if (evt.defaultPrevented)
+ return;
+
+ // default: switch page
+ this.$refs.mode.nextPage();
+ },
+ handleClickDefaults(evt) {
+ // TODO(chris): implement
+ switch (evt.detail.source) {
+ case 'day':
+ if (this.cMode != 'day' && this.modes['day']) {
+ evt.stopPropagation();
+ this.cDate = evt.detail.value;
+ this.cMode = 'day';
+ }
+ break;
+ case 'week':
+ if (this.cMode != 'week' && this.modes['week']) {
+ evt.stopPropagation();
+ this.cDate = luxon.DateTime.fromObject({
+ localWeekNumber: evt.detail.value.number,
+ localWeekYear: evt.detail.value.year
+ }, {
+ zone: this.cDate.zoneName,
+ locale: this.cDate.locale
+ });
+ this.cMode = 'week';
+ }
+ break;
+ }
+ },
+ onDropItem(evt, start, end) {
+ this.$emit('drop', evt, start, end);
+ },
+ showEventModal(eventObj) {
+ this.modalEvent = eventObj;
+ this.$refs.modal.show();
+ },
+ hideEventModal() {
+ if (this.modalEvent)
+ this.modalEvent.closeFn = undefined;
+ this.$refs.modal.hide();
+ this.modalEvent = null;
+ },
+ onModalHidden() {
+ if (this.modalEvent.closeFn)
+ this.modalEvent.closeFn();
+ }
+ },
+ template: /* html */`
+
+
-
diff --git a/public/js/components/Calendar/Abstract.js b/public/js/components/Calendar/Abstract.js
deleted file mode 100644
index 54b0304c7..000000000
--- a/public/js/components/Calendar/Abstract.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import CalendarHeader from './Header.js';
-
-export default {
- components: {
- CalendarHeader
- },
- inject: [
- 'date',
- 'focusDate',
- 'size'
- ],
- emits: [
- 'updateMode',
- 'change:range',
- 'input'
- ]
-}
diff --git a/public/js/components/Calendar/Base.js b/public/js/components/Calendar/Base.js
new file mode 100644
index 000000000..2069347da
--- /dev/null
+++ b/public/js/components/Calendar/Base.js
@@ -0,0 +1,308 @@
+import BaseDraganddrop from './Base/DragAndDrop.js';
+import BaseHeader from './Base/Header.js';
+import BaseSlider from './Base/Slider.js';
+import BsModal from '../Bootstrap/Modal.js';
+
+import CalClick from '../../directives/Calendar/Click.js';
+
+export default {
+ name: "CalendarBase",
+ components: {
+ BaseDraganddrop,
+ BaseHeader,
+ BaseSlider,
+ BsModal
+ },
+ directives: {
+ CalClick
+ },
+ provide() {
+ return {
+ locale: Vue.computed(() => this.locale),
+ timezone: Vue.computed(() => this.timezone),
+ timeGrid: Vue.computed(() => this.timeGrid),
+ draggableEvents: Vue.computed(() => {
+ if (!this.draggableEvents)
+ return () => false;
+
+ if (Array.isArray(this.draggableEvents))
+ return event => this.draggableEvents.includes(event.type);
+ if (this.draggableEvents instanceof Function)
+ return this.draggableEvents;
+
+ return () => true;
+ }),
+ dropableEvents: Vue.computed(() => {
+ if (!this.onDrop)
+ return () => false;
+
+ if (Array.isArray(this.dropableEvents))
+ return item => this.dropableEvents.includes(item.type);
+ if (this.dropableEvents instanceof Function)
+ return this.dropableEvents;
+
+ return () => true;
+ }),
+ hasDragoverFunc: Vue.computed(() => this.onDragover),
+ mode: Vue.computed(() => this.mode)
+ };
+ },
+ props: {
+ locale: {
+ type: String,
+ default: 'de'
+ },
+ timezone: {
+ type: String,
+ required: true
+ },
+ date: {
+ type: [Date, String, Number, luxon.DateTime],
+ default: props => luxon.DateTime.now().setZone(props.timezone).startOf('day')
+ },
+ modes: {
+ type: Object,
+ required: true,
+ default: {}
+ // TODO(chris): verfication functions
+ },
+ mode: String,
+ modeOptions: Object,
+ events: {
+ type: Array,
+ default: []
+ },
+ backgrounds: {
+ type: Array,
+ default: []
+ },
+ showBtns: Boolean,
+ btnMonth: {
+ type: Boolean,
+ default: undefined
+ },
+ btnWeek: {
+ type: Boolean,
+ default: undefined
+ },
+ btnDay: {
+ type: Boolean,
+ default: undefined
+ },
+ btnList: {
+ type: Boolean,
+ default: undefined
+ },
+ timeGrid: Array,
+ draggableEvents: [Boolean, Array, Function],
+ dropableEvents: [Boolean, Array, Function],
+ onDragover: Function,
+ onDrop: Function
+ },
+ emits: [
+ "click:next",
+ "click:prev",
+ "click:mode",
+ "click:event",
+ "click:day",
+ "click:week",
+ "update:date",
+ "update:mode",
+ "update:range",
+ "drop"
+ ],
+ data() {
+ return {
+ internalView: null,
+ internalDate: null,
+ modalEvent: null
+ };
+ },
+ computed: {
+ convertedEvents() {
+ return this.events.map(orig => ({
+ id: orig.type + orig[orig.type + '_id'],
+ type: orig.type,
+ start: luxon.DateTime.fromISO(orig.isostart).setZone(this.timezone),
+ end: luxon.DateTime.fromISO(orig.isoend).setZone(this.timezone),
+ orig
+ }));
+ },
+ convertedBackgrounds() {
+ return this.backgrounds.map(bg => {
+ const res = { ...bg };
+ if (res.start) {
+ if (Number.isInteger(res.start))
+ res.start = luxon.DateTime.fromMillis(res.start, { zone: this.timezone, locale: this.locale });
+ else if (res.start instanceof Date)
+ res.start = luxon.DateTime.fromJSDate(res.start, { zone: this.timezone, locale: this.locale });
+ else if (typeof res.start ===
+ 'string' || res.start instanceof String)
+ res.start = luxon.DateTime.fromISO(res.start, { zone: this.timezone, locale: this.locale });
+ }
+ if (res.end) {
+ if (Number.isInteger(res.end))
+ res.end = luxon.DateTime.fromMillis(res.end, { zone: this.timezone, locale: this.locale });
+ else if (res.end instanceof Date)
+ res.end = luxon.DateTime.fromJSDate(res.end, { zone: this.timezone, locale: this.locale });
+ else if (typeof res.end ===
+ 'string' || res.end instanceof String)
+ res.end = luxon.DateTime.fromISO(res.end, { zone: this.timezone, locale: this.locale });
+ }
+ return res;
+ });
+ },
+ sDate() {
+ if (this.date instanceof luxon.DateTime)
+ return this.date;
+ return luxon.DateTime.fromJSDate(new Date(this.date)).setZone(this.timezone);
+ },
+ cDate: {
+ get() {
+ const date = this.internalDate ? this.internalDate : this.sDate;
+ return date.setLocale(this.locale);
+ },
+ set(value) {
+ this.internalDate = value;
+ this.$emit('update:date', value, this.cMode);
+ }
+ },
+ sMode() {
+ // choose default mode
+ let mode = this.mode;
+ if (mode)
+ mode = mode.toLowerCase();
+ if (!mode || !this.modes[mode])
+ mode = Object.keys(this.modes).find(Boolean); // start with first entry as active mode
+ return mode || '';
+ },
+ cMode: {
+ get() {
+ return this.internalView ? this.internalView : this.sMode;
+ },
+ set(value) {
+ this.internalView = value;
+ this.$emit('update:mode', value, this.cDate);
+ }
+ }
+ },
+ watch: {
+ sDate(n, o) {
+ if (this.sDate.isValid && !this.sDate.hasSame(this.internalDate, 'day'))
+ this.internalDate = this.sDate;
+ },
+ sMode() {
+ if (this.sMode)
+ this.internalView = this.sMode;
+ }
+ },
+ methods: {
+ clickPrev() {
+ const evt = new Event('click:prev', {cancelable: true});
+ this.$emit('click:prev', evt);
+ if (evt.defaultPrevented)
+ return;
+
+ // default: switch page
+ this.$refs.mode.prevPage();
+ },
+ clickNext() {
+ const evt = new Event('click:next', {cancelable: true});
+ this.$emit('click:next', evt);
+ if (evt.defaultPrevented)
+ return;
+
+ // default: switch page
+ this.$refs.mode.nextPage();
+ },
+ handleClickDefaults(evt) {
+ // TODO(chris): implement
+ switch (evt.detail.source) {
+ case 'day':
+ if (this.cMode != 'day' && this.modes['day']) {
+ evt.stopPropagation();
+ this.cDate = evt.detail.value;
+ this.cMode = 'day';
+ }
+ break;
+ case 'week':
+ if (this.cMode != 'week' && this.modes['week']) {
+ evt.stopPropagation();
+ this.cDate = luxon.DateTime.fromObject({
+ localWeekNumber: evt.detail.value.number,
+ localWeekYear: evt.detail.value.year
+ }, {
+ zone: this.cDate.zoneName,
+ locale: this.cDate.locale
+ });
+ this.cMode = 'week';
+ }
+ break;
+ }
+ },
+ onDropItem(evt, start, end) {
+ this.$emit('drop', evt, start, end);
+ },
+ showEventModal(eventObj) {
+ this.modalEvent = eventObj;
+ this.$refs.modal.show();
+ },
+ hideEventModal() {
+ if (this.modalEvent)
+ this.modalEvent.closeFn = undefined;
+ this.$refs.modal.hide();
+ this.modalEvent = null;
+ },
+ onModalHidden() {
+ if (this.modalEvent.closeFn)
+ this.modalEvent.closeFn();
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/DragAndDrop.js b/public/js/components/Calendar/Base/DragAndDrop.js
new file mode 100644
index 000000000..0be17ddb4
--- /dev/null
+++ b/public/js/components/Calendar/Base/DragAndDrop.js
@@ -0,0 +1,162 @@
+import DragAndDrop from '../../../helpers/DragAndDrop.js';
+
+import CalDnd from '../../../directives/Calendar/DragAndDrop.js';
+
+/**
+ * TODO(chris): this needs serious rework!
+ */
+
+export default {
+ name: "CalendarDragAndDrop",
+ directives: {
+ CalDnd
+ },
+ provide() {
+ return {
+ events: Vue.computed(() => this.correctedEvents),
+ backgrounds: Vue.computed(() => this.backgrounds),
+ dropAllowed: Vue.computed(() => this.dragging && this.dropAllowed)
+ };
+ },
+ inject: {
+ mode: "mode",
+ dropableEvents: "dropableEvents"
+ },
+ props: {
+ events: Array,
+ backgrounds: Array
+ },
+ emits: [
+ "drop"
+ ],
+ data() {
+ return {
+ dragging: false,
+ allowed: false,
+ draggedInternalEvent: null,
+ draggedExternalEvent: null,
+ targetTimestamp: 0,
+ targetGridEnds: null,
+ dropAllowed: false,
+
+ shadowPreview: false // TODO(chris): IMPLEMENT! (use background instead of event as preview)
+ };
+ },
+ computed: {
+ correctedEvents() {
+ if (this.dragging) {
+ if (this.draggedInternalEvent) {
+ const index = this.events.findIndex(e => e.id == this.draggedInternalEvent.id);
+ if (this.previewEvent && !this.shadowPreview)
+ return this.events.toSpliced(index, 1, this.previewEvent);
+ else
+ return this.events.toSpliced(index, 1);
+ }
+ if (this.previewEvent && !this.shadowPreview)
+ return [...this.events, this.previewEvent];
+ }
+
+ return this.events;
+ },
+ correctedBackgrounds() {
+ if (this.dragging) {
+ if (this.shadowPreview) {
+ // TODO(chris): how to get the length
+ return [...this.backgrounds, {
+ start: new Date(this.targetTimestamp),
+ class: 'shadow-preview'
+ }];
+ }
+ }
+
+ return this.backgrounds;
+ },
+ previewEvent() {
+ if (!this.dragging || !this.dropAllowed)
+ return null;
+ if (!this.targetTimestamp)
+ return null;
+
+ const event = this.draggedInternalEvent || this.draggedExternalEvent;
+
+ if (!event)
+ return null;
+
+ // TODO(chris): calculate length correctly from orig
+ let length = event.end - event.start;
+ if (this.targetGridEnds)
+ length = this.targetGridEnds.find(end => end >= this.targetTimestamp + length) - this.targetTimestamp;
+
+ return {
+ orig: event.orig,
+ start: this.targetTimestamp,
+ end: this.targetTimestamp + length
+ };
+ }
+ },
+ methods: {
+ onDragstart(evt) {
+ DragAndDrop.setTransferData(evt.detail.originalEvent, evt.detail.item.orig);
+ this.draggedInternalEvent = evt.detail.item;
+ },
+ onDragend() {
+ this.draggedInternalEvent = null;
+ this.dragging = false;
+ },
+ onDragenter(evt) {
+ this.dragging = true;
+
+ if (!this.draggedInternalEvent) {
+ const event = DragAndDrop.getValidTransferData(evt.detail.originalEvent);
+ if (event) {
+ this.draggedExternalEvent = {
+ id: event.id,
+ type: event.type,
+ start: event.isostart
+ ? luxon.DateTime.fromISO(event.isostart).setZone(this.timezone)
+ : luxon.DateTime.local().setZone(this.timezone),
+ end: event.isoend
+ ? luxon.DateTime.fromISO(event.isoend).setZone(this.timezone)
+ : luxon.DateTime.local().setZone(this.timezone),
+ orig: event
+ };
+ } else {
+ this.draggedExternalEvent = null;
+ }
+ this.dropAllowed = this.dropableEvents(event, this.mode);
+ } else {
+ this.dropAllowed = this.dropableEvents(this.draggedInternalEvent, this.mode);
+ }
+ },
+ onDragleave() {
+ this.dragging = false;
+ },
+ onDragchange(evt) {
+ this.targetTimestamp = evt.detail.timestamp;
+
+ this.targetGridEnds = evt.detail.ends || null;
+ },
+ onDrop(evt) {
+ if (!this.dragging || !this.dropAllowed)
+ return;
+
+ this.$emit('drop', evt, this.previewEvent.start, this.previewEvent.end);
+ this.dropAllowed = false;
+ this.dragging = false;
+ }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js
new file mode 100644
index 000000000..9a6c2f579
--- /dev/null
+++ b/public/js/components/Calendar/Base/Grid/Line.js
@@ -0,0 +1,85 @@
+import LineEvent from './Line/Event.js';
+import LineBackground from './Line/Background.js';
+
+/**
+ * TODO(chris):
+ * Event overflow for Month mode (more-button)
+ */
+
+export default {
+ name: "GridLine",
+ components: {
+ LineEvent,
+ LineBackground
+ },
+ inject: {
+ axisRow: "axisRow"
+ },
+ props: {
+ date: {
+ type: luxon.DateTime,
+ required: true
+ },
+ start: {
+ type: luxon.DateTime,
+ required: true
+ },
+ end: {
+ type: luxon.DateTime,
+ required: true
+ },
+ events: {
+ type: Array,
+ default: []
+ },
+ backgrounds: {
+ type: Array,
+ default: []
+ }
+ },
+ computed: {
+ eventsWithRowInfo() {
+ const events = [];
+ this.events.forEach(event => {
+ const rows = [1, -1];
+ if (event.startsHere) {
+ rows[0] = 't_' + event.start.diff(this.date).toMillis();
+ }
+ if (event.endsHere) {
+ rows[1] = 't_' + event.end.diff(this.date).toMillis();
+ }
+
+ events.push({
+ ...event,
+ rows
+ });
+ });
+ return events;
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+ {{ event.orig }}
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Header.js b/public/js/components/Calendar/Base/Header.js
new file mode 100644
index 000000000..46b5843f9
--- /dev/null
+++ b/public/js/components/Calendar/Base/Header.js
@@ -0,0 +1,123 @@
+/**
+ * TODO(chris): use click-directive
+ */
+import DatePicker from './Header/Datepicker.js';
+
+export default {
+ name: "CalendarHeader",
+ components: {
+ DatePicker
+ },
+ props: {
+ date: {
+ type: luxon.DateTime,
+ required: true
+ },
+ mode: {
+ type: String,
+ required: true
+ },
+ modeOptions: {
+ type: Object,
+ default: {}
+ },
+ btnMonth: Boolean,
+ btnWeek: Boolean,
+ btnDay: Boolean,
+ btnList: Boolean
+ },
+ emits: [
+ "next",
+ "prev",
+ "click:mode",
+ "update:date",
+ "update:mode"
+ ],
+ data() {
+ return {
+ open: false
+ };
+ },
+ methods: {
+ clickMode(evt, mode) {
+ this.$emit('click:mode', evt);
+ if (!evt.defaultPrevented)
+ this.$emit('update:mode', mode);
+ }
+ },
+ template: /* html */`
+
+
+
+
-
-
- `
-}
diff --git a/public/js/components/Calendar/Day.js b/public/js/components/Calendar/Day.js
deleted file mode 100644
index c0f1040f5..000000000
--- a/public/js/components/Calendar/Day.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-import CalendarPane from './Pane.js';
-import CalendarDayPage from './Day/Page.js';
-import CalendarDate from '../../composables/CalendarDate.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- components: {
- CalendarDayPage,
- CalendarPane
- },
- computed: {
- title() {
- return this.focusDate.wYear + ' KW ' + this.focusDate.w;
- }
- },
- methods: {
- paneChanged(dir) {
- let previousDate = new CalendarDate(this.focusDate);
- this.focusDate.d += dir;
- this.emitRangeChanged(previousDate);
- },
- emitRangeChanged(previousDate) {
- this.$emit('change:range', { start: previousDate, end:this.focusDate });
- },
- 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]);
- }
- },
- created() {
- this.emitRangeChanged();
- },
- template: /*html*/`
-
-
-
-
-
-
-
-
-
- `
-}
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
deleted file mode 100644
index f8d05f7de..000000000
--- a/public/js/components/Calendar/Day/Page.js
+++ /dev/null
@@ -1,434 +0,0 @@
-import CalendarDate from '../../../composables/CalendarDate.js';
-import LvModal from "../../../components/Cis/Mylv/LvModal.js";
-
-import ApiStundenplan from '../../../api/factory/stundenplan.js';
-import ApiAddons from '../../../api/factory/addons.js';
-
-function ggt(m, n) {
- return n == 0 ? m : ggt(n, m % n);
-}
-
-function kgv(m, n) {
- return (m * n) / ggt(m, n);
-}
-
-export default {
- name: 'DayPage',
- components: {
- LvModal,
- },
- data() {
- return {
- hourPosition: null,
- curHourPosition: null,
- hourPositionTime: null,
- lvMenu: null,
- }
- },
- inject: [
- 'today',
- 'todayDate',
- 'date',
- 'focusDate',
- 'size',
- 'events',
- 'noMonthView',
- 'filteredEvents',
- 'isSliding',
- 'calendarScrollTop',
- 'calendarClientHeight',
- 'setSelectedEvent',
- 'selectedEvent',
- 'rowMinHeight'
- ],
- props: {
- year: Number,
- week: Number,
- active: Boolean,
- },
- emits: [
- 'updateMode',
- 'page:back',
- 'page:forward',
- 'input'
- ],
- watch: {
- //TODO: on first render non of the day-page components are active and the watcher on selectedEvent does not fetch the lvMenu
- //TODO: workaround is to watch the active state and refetch in case the lvMenu is empty
- active: {
- handler(value) {
- if (value) {
- if (!this.lvMenu) {
- this.fetchLvMenu(this.selectedEvent);
- }
- }
- },
- immediate: true,
- },
- eventsPerDayAndHour: {
- 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 (Array.isArray(events) && events.length > 0) {
- this.setSelectedEvent(events[0].orig);
- }
- }
- },
- immediate: true
- },
- selectedEvent: {
- handler(event) {
- // return early if the day-page component is not the active carousel item
- if (!this.active) {
- return;
- }
- this.lvMenu = null;
- this.fetchLvMenu(event);
- },
- immediate: true,
- },
- isSliding: {
- handler(value) {
- if (value) {
- this.setSelectedEvent(null);
- }
- }
- }
- },
- computed: {
- overlayStyle() {
- return {
- 'background-color': '#F5E9D7',
- 'position': 'absolute',
- 'pointer-events': 'none',
- 'z-index': 2,
- height: this.getDayTimePercent + '%',
- opacity: 0.5,
- overflow: 'hidden'
- }
- },
- pageHeaderStyle() {
- return {
- 'z-index': 4,
- 'grid-template-columns': 'repeat(' + this.day.length + ', 1fr)',
- 'grid-template-rows': 1,
- position: 'sticky',
- top: 0,
- }
- },
- dayText(){
- if(!this.day)return {};
- return {
- heading: this.day.toLocaleString(this.$p.user_locale.value, { dateStyle: 'short' }),
- tag: this.day.toLocaleString(this.$p.user_locale.value, { weekday: this.size < 2 ? 'narrow' : (this.size < 3 ? 'short' : 'long') }),
- datum: this.day.toLocaleString(this.$p.user_locale.value, [{ day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { dateStyle: 'short' }][this.size]),
- }
- },
- noLvStyle() {
- return {
- top: (this.calendarScrollTop + 100) + 'px',
- position: 'absolute',
- left: 0,
- 'text-align': 'center',
- width: '100%',
- 'z-index': 1,
- }
- },
- indicatorStyle() {
- return {
- 'pointer-events': 'none',
- 'padding-left': '3.5rem',
- 'margin-top': '-1px',
- 'z-index': 2,
- 'border-color': '#00649C!important',
- top: this.hourPosition + 'px',
- left: 0,
- right: 0,
- }
- },
- curTime() {
- const now = new Date();
- return String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
- },
- curIndicatorStyle() {
- return {
- 'pointer-events': 'none',
- 'padding-left': '7rem',
- 'margin-top': '-1px',
- 'z-index': 2,
- 'border-color': '#00649C!important',
- top: this.getDayTimePercent + '%',
- left: 0,
- right: 0,
- }
- },
- noEventsCondition() {
- return !this.isSliding && (this.filteredEvents?.length === 0 || !this.filteredEvents);
- },
- hours() {
- // returns an array with elements starting at 7 and ending at 24
- return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24);
- },
- day() {
- return new Date(this.focusDate.y, this.focusDate.m, this.focusDate.d);
- },
- eventsPerDayAndHour() {
- // return early if the calendar pane is sliding
- if (this.isSliding) return {};
-
- const res = {};
-
- let key = this.day.toDateString();
-
- let nextDay = new Date(this.day);
- nextDay.setDate(nextDay.getDate() + 1);
- nextDay.setMilliseconds(nextDay.getMilliseconds() - 1);
- let d = {events: [], lanes: 1};
- if (this.events[key]) {
- this.events[key].forEach(evt => {
- let event = {
- orig: evt,
- lane: 1,
- maxLane: 1,
- start: evt.start < this.day ? this.day : evt.start,
- end: evt.end > nextDay ? nextDay : evt.end,
- shared: [],
- setSharedMaxRecursive(doneItems) {
- this.maxLane = Math.max(doneItems[0].maxLane, this.maxLane);
- doneItems.push(this);
- this.shared.filter(other => !doneItems.includes(other)).forEach(i => i.setSharedMaxRecursive(doneItems));
- }
- };
- event.shared = d.events.filter(other => other.start < event.end && other.end > event.start);
- event.shared.forEach(other => other.shared.push(event));
- let occupiedLanes = event.shared.map(other => other.lane);
- while (occupiedLanes.includes(event.lane))
- event.lane++;
- event.maxLane = Math.max(...[event.lane], ...occupiedLanes);
- if (event.maxLane > 1) {
- event.setSharedMaxRecursive([event]);
- }
- d.events.push(event);
- });
- d.lanes = d.events.map(e => e.maxLane).reduce((res, i) => kgv(res, i), 1);
- }
- res[key] = d;
-
- return res;
- },
- smallestTimeFrame() {
- return [30, 15, 10, 5][this.size];
- },
- lookingAtToday() {
- return this.date.compare(this.todayDate)
- },
- getDayTimePercent() {
- const now = new Date(Date.now())
- const currentMinutes = now.getMinutes() + now.getHours() * 60
- let timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
-
- return timePercentage
- }
- },
- methods: {
- dayGridStyle(day) {
- const styleObj = {
- 'grid-template-columns': '1 1fr',
- 'grid-template-rows': 'repeat(' + (this.hours.length * 60 / this.smallestTimeFrame) + ', 1fr)',
- }
-
- if(this.date.compare(this.todayDate)) {
- styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
- styleObj['border-color'] = '#E8E8E8';
- // styleObj.opacity = 0.5; // would opaque the whole column
- }
-
- return styleObj
- },
- fetchLvMenu(event) {
- if (event && event.type == 'lehreinheit') {
- this.$api
- .call(ApiStundenplan.getLehreinheitStudiensemester(event.lehreinheit_id[0]))
- .then(res => res.data)
- .then(studiensemester_kurzbz => this.$api.call(
- ApiAddons.getLvMenu(
- event.lehreinheit_id,
- studiensemester_kurzbz
- )
- ))
- .then(res => {
- if (res.data) {
- this.lvMenu = res.data;
- }
- });
- }
- },
- 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;
- },
- hourGridStyle(hour) {
- return {
- 'pointer-events': 'none',
- top: this.getAbsolutePositionForHour(hour),
- left: 0,
- right: 0,
- 'z-index': 0,
- }
- },
- eventGridStyle(day, event) {
- return {
- 'z-index': 1,
- 'grid-column-start': 1 + (event.lane - 1) * day.lanes / event.maxLane,
- 'grid-column-end': 1 + event.lane * day.lanes / event.maxLane,
- 'grid-row-start': this.dateToMinutesOfDay(event.start),
- 'grid-row-end': this.dateToMinutesOfDay(event.end),
- 'background-color': event.orig.color,
- '--test': this.dateToMinutesOfDay(event.end),
- }
- },
- eventClick(evt) {
- let event = evt.orig;
- this.setSelectedEvent(event);
- this.$emit('input', event);
- },
- calcHourPosition(event) {
- let height = this.$refs.eventcontainer.getBoundingClientRect().height;
- let top = this.$refs.eventcontainer.getBoundingClientRect().top;
- let position = event.clientY - top;
- // position percentage of total height
- let timePercentage = (position / height) * 100;
- // minute percentage of total minutes
- let result = (this.hours.length * 60) * (timePercentage / 100);
- // calculate time in float
- let currentMinutes = ((result + (this.hours[0] * 60)) / 60);
- // get hour part of time
- let currentHour = Math.floor(currentMinutes);
- // get float part of time
- let minutePercentage = currentMinutes % currentHour;
- // calculate minutes from float part of time
- let minute = Math.round(60 * minutePercentage);
- // convert minutes to 5 minute interval
- if (minute % 5 != 0) {
- minute = Math.round(minute / 5) * 5;
- }
- // in case the rounding made the minutes 60, increase the hour and reset the minutes
- if (minute == 60) {
- currentHour++;
- minute = 0;
- }
-
- // ## after rounding the time to the nearest 5 Minute interval, we have to convert the time back to the relative position
- // convert current time in minutes
- currentMinutes = currentHour * 60 + minute;
- // calculate the minutes percentage of the total minutes
- timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
- // calculate the relative position of the time percentage
- position = height * (timePercentage / 100);
- this.hourPosition = position;
-
- // add padding to minutes that consist of only one digit
- minute.toString().length == 1 ? minute = "0" + minute : minute;
- this.hourPositionTime = currentHour + ":" + minute;
- },
- getAbsolutePositionForHour(hour) {
- // used for the absolute positioning of the gutters of hours
- return (100 / this.hours.length) * (hour - (24 - this.hours.length)) + '%';
- },
- changeToMonth(day) {
- if (!this.noMonthView) {
- this.date.set(day);
- this.focusDate.set(day);
- this.$emit('updateMode', 'month');
- }
- },
- dateToMinutesOfDay(day) {
- return Math.floor(((day.getHours() - 7) * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1;
- }
-
- },
- template: /*html*/`
-
-
-
-
-
-
- {{dayText.tag}}
- {{dayText.datum}}
-
-
-
-
-
-
-
-
-
- {{hourPositionTime}}
-
-
-
-
- {{curTime}}
-
-
-
- {{ $p.t('lehre/noLvFound') }}
-
-
-
- {{hour}}:00
-
-
-
-
-
-
-
- this is a slot placeholder
-
-
-
-
-
- this is a slot placeholder
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this is a slot placeholder
-
-
-
-
- This is an slot placeholder
-
-
-
-
-
-
-
-
-
-
-
-
-
-`
-}
diff --git a/public/js/components/Calendar/Header.js b/public/js/components/Calendar/Header.js
deleted file mode 100644
index 5ee3d51e7..000000000
--- a/public/js/components/Calendar/Header.js
+++ /dev/null
@@ -1,73 +0,0 @@
-export default {
- data(){
- return{
- selected: this.mode,
- modes:{
- day: { mode_bezeichnung: "day", icon: "fa-calendar-day" , condition:true},
- week: { mode_bezeichnung: "week", icon: "fa-calendar-week", condition: !this.noWeekView },
- month: { mode_bezeichnung: "month", icon: "fa-calendar-days", condition: !this.noMonthView },
- },
- headerPadding:null,
- }
- },
- inject: [
- 'eventsAreNull',
- 'size',
- 'mode',
- 'noWeekView',
- 'noMonthView',
- 'containerWidth'
- ],
- props: {
- title: String
- },
- emits: [
- 'updateMode',
- 'prev',
- 'next',
- 'click'
- ],
- computed: {
- getHeaderClassSide() {
- return this.containerWidth > 780 ? 'col-3' : 'col-12'
- },
- getHeaderClassMiddle() {
- return this.containerWidth > 780 ? 'col-6' : 'col-12'
- }
- },
- template: /*html*/`
-
-
-
-
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Minimized.js b/public/js/components/Calendar/Minimized.js
deleted file mode 100644
index 96db36ada..000000000
--- a/public/js/components/Calendar/Minimized.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- inject: [
- 'size',
- 'minimized',
- 'date',
- ],
- data() {
- return {
- start: 0
- }
- },
- methods: {
- maximize() {
- this.minimized = false;
- }
- },
- template: `
-
-
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/Day/View.js b/public/js/components/Calendar/Mode/Day/View.js
new file mode 100644
index 000000000..cd953f33a
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Day/View.js
@@ -0,0 +1,175 @@
+import CalendarGrid from '../../Base/Grid.js';
+import LabelDay from '../../Base/Label/Day.js';
+import LabelDow from '../../Base/Label/Dow.js';
+import LabelTime from '../../Base/Label/Time.js';
+
+import { useResizeObserver } from '../../../../composables/Responsive.js';
+
+export default {
+ name: "DayView",
+ components: {
+ CalendarGrid,
+ LabelDay,
+ LabelDow,
+ LabelTime
+ },
+ inject: {
+ timeGrid: "timeGrid",
+ originalEvents: "events",
+ timezone: "timezone"
+ },
+ props: {
+ day: {
+ type: luxon.DateTime,
+ required: true
+ },
+ emptyMessage: String,
+ emptyMessageDetails: String
+ },
+ emits: [
+ "requestModalOpen",
+ "requestModalClose"
+ ],
+ data() {
+ return {
+ chosenEvent: null,
+ gridMainRef: null
+ };
+ },
+ computed: {
+ axisMain() {
+ return [this.day.startOf('day')];
+ },
+ axisParts() {
+ if (this.timeGrid) {
+ // create {start, end} array
+ return this.timeGrid.map(tu => {
+ return {
+ start: luxon.Duration.fromISOTime(tu.start),
+ end: luxon.Duration.fromISOTime(tu.end)
+ };
+ });
+ } else {
+ // create 07:00-23:00
+ return Array.from({ length: 17 }, (e, i) => luxon.Duration.fromObject({ hours: i + 7 }));
+ }
+ },
+ events() {
+ return this.originalEvents
+ .filter(event => event.start < this.day.plus({ days: 1 }) && event.end > this.day)
+ .sort((a, b) => a.start.ts - b.start.ts)
+ .map(evt => evt.orig);
+ },
+ currentEvent() {
+ if (this.chosenEvent) {
+ if (this.events.find(e => e == this.chosenEvent))
+ return this.chosenEvent;
+ }
+ let first = null;
+ if (this.events)
+ first = this.events.find(Boolean); // undefined => none found
+
+ if (first && first.type == 'loading')
+ return null; // null => loading
+
+ return first;
+ },
+ isToday() {
+ return this.day.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+ }
+ },
+ watch: {
+ compact() {
+ if (this.compact) {
+ if (this.chosenEvent) {
+ this.$emit('requestModalOpen', {
+ event: this.chosenEvent,
+ closeFn: () => { this.chosenEvent = null; }
+ });
+ }
+ } else {
+ this.$emit('requestModalClose');
+ }
+ }
+ },
+ methods: {
+ handleClickDefaults(evt) {
+ if (evt.detail.source == 'event') {
+ this.chosenEvent = evt.detail.value;
+ if (this.compact) {
+ this.$emit('requestModalOpen', {
+ event: this.chosenEvent,
+ closeFn: () => { this.chosenEvent = null; }
+ });
+ }
+ }
+ }
+ },
+ setup() {
+ const container = Vue.ref(null); // use useTemplateRef when updating to Vue 3.5
+ const { compact } = useResizeObserver(container, 750);
+
+ return {
+ container, // must be exposed or it won't be set in Vue < 3.5
+ compact
+ };
+ },
+ mounted() {
+ this.gridMainRef = this.$refs.grid.$refs.main;
+ },
+ template: /* html */`
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ emptyMessageDetails }}
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/List/View.js b/public/js/components/Calendar/Mode/List/View.js
new file mode 100644
index 000000000..76b4c887d
--- /dev/null
+++ b/public/js/components/Calendar/Mode/List/View.js
@@ -0,0 +1,98 @@
+import LabelDay from '../../Base/Label/Day.js';
+import LabelDow from '../../Base/Label/Dow.js';
+
+import CalDnd from '../../../../directives/Calendar/DragAndDrop.js';
+import CalClick from '../../../../directives/Calendar/Click.js';
+
+// TODO(chris): drag and drop
+
+export default {
+ name: "ListView",
+ components: {
+ LabelDay,
+ LabelDow
+ },
+ directives: {
+ CalDnd,
+ CalClick
+ },
+ inject: {
+ draggableEvents: "draggableEvents",
+ events: "events",
+ timezone: "timezone"
+ },
+ props: {
+ day: {
+ type: luxon.DateTime,
+ required: true
+ },
+ length: {
+ type: Number,
+ required: true
+ }
+ },
+ data() {
+ return {
+ chosenEvent: null
+ };
+ },
+ computed: {
+ days() {
+ return Array.from({ length: this.length }, (e, days) => this.day.plus({ days }));
+ },
+ eventsPerDay() {
+ const eventsPerDay = this.days.map(day => {
+ return {
+ day,
+ events: this.events
+ .filter(event => event.start < day.plus({ days: 1 }) && event.end > day)
+ .sort((a, b) => a.start.ts - b.start.ts)
+ };
+ });
+ return eventsPerDay.filter(day => day.events.length);
+ }
+ },
+ methods: {
+ draggable(event) {
+ return this.draggableEvents(event.orig, 'list');
+ },
+ isToday(date) {
+ return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/Month/View.js b/public/js/components/Calendar/Mode/Month/View.js
new file mode 100644
index 000000000..ea83b6c96
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Month/View.js
@@ -0,0 +1,95 @@
+import CalendarGrid from '../../Base/Grid.js';
+import LabelWeek from '../../Base/Label/Week.js';
+import LabelDow from '../../Base/Label/Dow.js';
+import LabelDay from '../../Base/Label/Day.js';
+
+export default {
+ name: "MonthView",
+ components: {
+ CalendarGrid,
+ LabelWeek,
+ LabelDow,
+ LabelDay
+ },
+ provide() {
+ return {
+ // NOTE(chris): snap events to day
+ events: Vue.computed(() => {
+ //const events = [];
+ const events = this.events.map(event => {
+ const start = event.start.startOf('day');
+ const end = event.end.plus({ days: 1 }).startOf('day');
+ return {
+ ...event,
+ start,
+ end
+ };
+ });
+ for (var w = 5; w > -1; w--) {
+ for (var d = 6; d > -1; d--) {
+ const startdate = this.axisMain[w].plus(this.axisParts[d]);
+ events.unshift({
+ start: startdate,
+ end: startdate.plus({ days: 1 }),
+ orig: 'header'
+ });
+ }
+ }
+ return events;
+ })
+ };
+ },
+ inject: {
+ events: "events",
+ timezone: "timezone"
+ },
+ props: {
+ day: {
+ type: luxon.DateTime,
+ required: true
+ }
+ },
+ computed: {
+ axisMain() {
+ const start = this.day.startOf('month').startOf('week', { useLocaleWeeks: true });
+ return Array.from({ length: 6 }, (e, i) => start.plus({ weeks: i }));
+ },
+ axisParts() {
+ return Array.from({ length: 8 }, (e, i) => luxon.Duration.fromObject({ days: i }));
+ }
+ },
+ methods: {
+ isToday(date) {
+ return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/Week.js b/public/js/components/Calendar/Mode/Week.js
new file mode 100644
index 000000000..f8653b9e9
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Week.js
@@ -0,0 +1,113 @@
+import BaseSlider from '../Base/Slider.js';
+import WeekView from './Week/View.js';
+
+export default {
+ name: "ModeWeek",
+ components: {
+ BaseSlider,
+ WeekView
+ },
+ props: {
+ currentDate: {
+ type: luxon.DateTime,
+ required: true
+ }
+ },
+ emits: [
+ "update:currentDate",
+ "update:range",
+ "click",
+ "requestModalOpen"
+ ],
+ data() {
+ return {
+ focusDate: this.currentDate,
+ rangeOffset: 0
+ };
+ },
+ computed: {
+ range() {
+ let first = this.focusDate.startOf('week', { useLocaleWeeks: true });
+ let last = this.focusDate.endOf('week', { useLocaleWeeks: true });
+
+ if (this.rangeOffset != 0) {
+ if (this.rangeOffset < 0) {
+ first = first.plus({ weeks: this.rangeOffset });
+ } else {
+ last = last.plus({ weeks: this.rangeOffset });
+ }
+ }
+
+ return luxon.Interval.fromDateTimes(first, last);
+ }
+ },
+ watch: {
+ currentDate() {
+ if (this.currentDate.locale != this.focusDate.locale) {
+ this.focusDate = this.currentDate;
+ this.$emit('update:range', this.range);
+ } else {
+ this.rangeOffset = this.currentDate.startOf('week', { useLocaleWeeks: true }).diff(this.focusDate.startOf('week', { useLocaleWeeks: true }), 'weeks').weeks;
+ if (this.rangeOffset) {
+ this.$refs.view.$refs.grid.disableAutoScroll();
+ this.$emit('update:range', this.range);
+ this.$refs.slider.slidePages(this.rangeOffset).then(this.updatePage);
+ }
+ }
+ }
+ },
+ methods: {
+ prevPage() {
+ this.rangeOffset = this.$refs.slider.target - 1;
+ this.$refs.view.$refs.grid.disableAutoScroll();
+ this.$emit('update:range', this.range);
+ this.$refs.slider.prevPage().then(this.updatePage);
+ },
+ nextPage() {
+ this.rangeOffset = this.$refs.slider.target + 1;
+ this.$refs.view.$refs.grid.disableAutoScroll();
+ this.$emit('update:range', this.range);
+ this.$refs.slider.nextPage().then(this.updatePage);
+ },
+ updatePage(weeks) {
+ const newFocusDate = this.focusDate.plus({ weeks });
+ this.focusDate = newFocusDate;
+ this.rangeOffset = 0;
+ this.$emit('update:currentDate', this.focusDate);
+ this.$emit('update:range', this.range);
+ this.$refs.view.$refs.grid.enableAutoScroll();
+ },
+ viewAttrs(weeks) {
+ const day = this.focusDate.plus({ weeks });
+ return { ...this.$attrs, day };
+ },
+ handleClickDefaults(evt) {
+ switch (evt.detail.source) {
+ case 'day':
+ // default: Set current-date
+ this.$emit('update:currentDate', evt.detail.value);
+ break;
+ case 'event':
+ // default: Request Modal
+ this.$emit('requestModalOpen', { event: evt.detail.value });
+ break;
+ }
+ }
+ },
+ mounted() {
+ this.$emit('update:range', this.range);
+ this.$refs.view.$refs.grid.enableAutoScroll();
+ },
+ template: `
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/Week/View.js b/public/js/components/Calendar/Mode/Week/View.js
new file mode 100644
index 000000000..612c4ad55
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Week/View.js
@@ -0,0 +1,85 @@
+import CalendarGrid from '../../Base/Grid.js';
+import LabelDay from '../../Base/Label/Day.js';
+import LabelDow from '../../Base/Label/Dow.js';
+import LabelTime from '../../Base/Label/Time.js';
+
+export default {
+ name: "WeekView",
+ components: {
+ CalendarGrid,
+ LabelDay,
+ LabelDow,
+ LabelTime
+ },
+ inject: {
+ timeGrid: "timeGrid",
+ timezone: "timezone"
+ },
+ props: {
+ day: {
+ type: luxon.DateTime,
+ required: true
+ },
+ collapseEmptyDays: Boolean
+ },
+ computed: {
+ start() {
+ return this.day.startOf('week', { useLocaleWeeks: true });
+ },
+ axisMain() {
+ return Array.from({ length: 7 }, (e, i) => this.start.plus({ days: i }));
+ },
+ axisParts() {
+ if (this.timeGrid) {
+ // create {start, end} array
+ return this.timeGrid.map(tu => {
+ return {
+ start: luxon.Duration.fromISOTime(tu.start),
+ end: luxon.Duration.fromISOTime(tu.end)
+ };
+ });
+ } else {
+ // create 07:00-23:00
+ return Array.from({ length: 17 }, (e, i) => luxon.Duration.fromObject({ hours: i + 7 }));
+ }
+ }
+ },
+ methods: {
+ isToday(date) {
+ return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day');
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Month.js b/public/js/components/Calendar/Month.js
deleted file mode 100644
index 513ed1c8c..000000000
--- a/public/js/components/Calendar/Month.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-import CalendarPane from './Pane.js';
-import CalendarMonthPage from './Month/Page.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- components: {
- CalendarMonthPage,
- CalendarPane
- },
- data() {
- return {
- syncOnNextChange: false
- }
- },
- computed: {
- title() {
- return this.focusDate.format({month: ['short','long','long','long'][this.size], year: 'numeric'}, this.$p.user_locale.value);
- }
- },
- methods: {
- paneChanged(dir) {
- if (this.syncOnNextChange) {
- this.syncOnNextChange = false;
- this.focusDate.set(this.date);
- } else {
- this.focusDate.moveMonthInDirection(dir)
- }
- this.$emit('change:range', {
- start: new Date(this.focusDate.y, this.focusDate.m, 1),
- end: new Date(this.focusDate.y, this.focusDate.m+1, 0)
- });
- },
- 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();
- if (this.focusDate.m != m) {
- this.syncOnNextChange = true;
- if (this.focusDate.m-1 == m || (m == 11 && !this.focusDate.m))
- this.$refs.pane.prev();
- else
- this.$refs.pane.next();
- } else {
- this.focusDate.set(this.date);
- }
- this.$emit('input', ['select:day',day])
- }
- },
- created() {
- this.$emit('change:range', {
- start: new Date(this.focusDate.y, this.focusDate.m, 1),
- end: new Date(this.focusDate.y, this.focusDate.m+1, 0)
- });
- },
- template: `
-
-
-
-
-
-
-
-
-
- `
-}
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
deleted file mode 100644
index 8ec700ce7..000000000
--- a/public/js/components/Calendar/Month/Page.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import CalendarDate from '../../../composables/CalendarDate.js';
-
-export default {
- name: 'MonthPage',
- data(){
- return{
- highlightedWeek: null,
- highlightedDay: null,
- }
- },
- inject: [
- 'today',
- 'todayDate',
- 'date',
- 'focusDate',
- 'size',
- 'events',
- 'showWeeks',
- 'noWeekView',
- 'selectedEvent',
- 'setSelectedEvent'
- ],
- props: {
- year: Number,
- month: Number
- },
- emits: [
- 'updateMode',
- 'page:back',
- 'page:forward',
- 'input'
- ],
- computed: {
- dayText(){
- if (!this.size || !this.weeks[0]?.days) return {};
- let dayTextMap ={};
- this.weeks[0].days.forEach((day)=>{
- dayTextMap[day] = day.toLocaleString(this.$p.user_locale.value, { weekday: this.size < 1 ? 'narrow' : (this.size < 3 ? 'short' : 'long') });
- });
- return dayTextMap;
- },
- weeks() {
- let firstDayOfMonth = new CalendarDate(this.year, this.month, 1);
- let startDay = firstDayOfMonth.firstDayOfCalendarMonth;
- let endDay = firstDayOfMonth.lastDayOfCalendarMonth;
-
- let res = [];
- let week = {no:0,y:0,days:[]};
- while (startDay <= endDay) {
- week.days.push(new Date(startDay));
-
- if (week.days.length == 7) {
- let d = new CalendarDate(week.days[5]);
- week.no = d.w;
- week.y = d.y;
- res.push(week);
- week = {no:0,y:0,days:[]};
- }
- startDay.setDate(startDay.getDate() + 1);
- }
- return res;
- },
-
- },
- methods: {
- getDayClass(week, day) {
- let classstring = 'fhc-calendar-month-page-day text-decoration-none overflow-hidden'
- const isHighlightedWeek = this.isHighlightedWeek(week)
- const isHighlightedDay = this.isHighlightedDay(day)
- const isThisDate = this.date.compare(day)
- const isNotThisMonth = day.getMonth() != this.month
- const isInThePast = day.getTime() < this.today // this.date is just the focusDate but not the initial Date
-
- if(isHighlightedWeek) classstring += ' fhc-highlight-week'
- if(isHighlightedDay) classstring += ' fhc-highlight-day'
-
- if(isNotThisMonth) classstring += ' opacity-25'
- if(isInThePast) classstring += ' fhc-calendar-past'
- return classstring
- },
- selectDay(day) {
- this.date.set(day);
- this.$emit('input', day);
- },
- changeToWeek(week) {
- if (!this.noWeekView) {
- if (!this.focusDate.isInWeek(week.no, week.y))
- this.focusDate.set(week.days[0]);
- this.$emit('updateMode', 'week');
- }
- },
- highlight(week, day){
- this.highlightedWeek = week.no;
- this.highlightedDay = day;
- },
- isHighlightedDay(day) {
- return day == this.highlightedDay
- },
- isHighlightedWeek(week) {
- return week.no == this.highlightedWeek
- },
- clickEvent(day,week) {
- if(!this.noWeekView)
- {
- this.focusDate.set(day);
- this.$emit('updateMode', 'day');
- }
- this.selectDay(day);
- },
- getNumberStyle(day) {
-
- const styleObj = {}
- styleObj.display = 'inline-block';
- styleObj.height = '32px';
- styleObj['line-height'] = '32px';
- styleObj['text-align'] = 'center';
- styleObj['font-weight'] = 'bold';
- styleObj['font-size'] = '14px';
-
- if(day.getDate() === this.todayDate.getDate()
- && day.getMonth() === this.todayDate.getMonth()
- && day.getFullYear() === this.todayDate.getFullYear()) {
- styleObj['background-color'] = '#00649c'; // fh blau
- styleObj.color = 'white';
- }
-
- return styleObj
- }
- },
- mounted() {
- const container = document.getElementById("calendarContainer")
- if(container) container.style['overflow-y'] = 'auto'
-
- },
- template: /*html*/`
-
-
-
- {{dayText[day]}}
-
-
- {{week.no}}
-
- {{day.getDate()}}
-
-
-
- this is a placeholder which means that no template was passed to the Calendar Page slot
-
-
-
-
-
-
-`
-}
diff --git a/public/js/components/Calendar/Months.js b/public/js/components/Calendar/Months.js
deleted file mode 100644
index 6ef9b1bb1..000000000
--- a/public/js/components/Calendar/Months.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- inject: [
- 'size'
- ],
- data() {
- return {
- monthIndices: [...Array(12).keys()]
- }
- },
- computed: {
- title() {
- return this.focusDate.format({year: 'numeric'});
- },
- months() {
- return this.monthIndices.map(i => (new Date(0, i, 1)).toLocaleString(this.$p.user_locale.value, {month: this.size < 2 ? 'short' : 'long'}));
- }
- },
- template: `
-
-
-
-
-
-
-
-
-
- `
-}
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
deleted file mode 100644
index c9f751f66..000000000
--- a/public/js/components/Calendar/Week/Page.js
+++ /dev/null
@@ -1,368 +0,0 @@
-import CalendarDate from '../../../composables/CalendarDate.js';
-
-function ggt(m,n) { return n==0 ? m : ggt(n, m%n); }
-function kgv(m,n) { return (m*n) / ggt(m,n); }
-
-export default {
- name: 'WeekPage',
- data(){
- return{
- hourPosition:null,
- hourPositionTime:null,
- resizeObserver: null,
- width: 0
- }
- },
- inject: [
- 'today',
- 'todayDate',
- 'date',
- 'focusDate',
- 'size',
- 'events',
- 'noMonthView',
- 'isSliding',
- 'selectedEvent',
- 'setSelectedEvent',
- 'rowMinHeight'
- ],
- props: {
- year: Number,
- week: Number
- },
- emits: [
- 'updateMode',
- 'page:back',
- 'page:forward',
- 'input',
- ],
- computed: {
- getGridStyle() {
- return {
- 'min-height': this.rowMinHeight,
- // this.size is the magic number anyway which directs font-size,
- // which in turn influences a lot of layout
- width: '42px'
- }
- },
- laneWidth() {
- return (this.width - 42) / this.days.length
- },
- curTime() {
- const now = new Date();
- return String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
- },
- pageHeaderStyle(){
- return {
- 'z-index': 4,
- 'grid-template-columns': 'repeat(' + this.days.length + ', 1fr)',
- 'grid-template-rows': 1,
- position: 'sticky',
- top: 0,
- }
- },
- overlayStyle() {
- return {
- 'background-color': '#F5E9D7',
- 'position': 'absolute',
- 'pointer-events': 'none',
- 'z-index': 2,
- height: this.getDayTimePercent + '%',
- width: this.laneWidth + 'px',
- opacity: 0.5
- }
- },
- indicatorStyle() {
- return {
- 'pointer-events': 'none',
- 'padding-left': '3.5rem',
- 'margin-top': '-1px',
- 'z-index': 2,
- 'border-color': '#00649C!important',
- top: this.hourPosition + 'px',
- left: 0,
- right: 0,
- }
- },
- hours(){
- // returns an array with elements starting at 7 and ending at 24
- return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24);
- },
- dayText() {
- if (!this.size || !this.days) return {};
- let dayTextMap ={};
- this.days.forEach((day)=>{
- dayTextMap[day] = {
- heading: day.toLocaleString(this.$p.user_locale.value, { dateStyle: 'short' }),
- tag: day.toLocaleString(this.$p.user_locale.value, { weekday: this.size < 2 ? 'narrow' : (this.size < 3 ? 'short' : 'long') }),
- datum: day.toLocaleString(this.$p.user_locale.value, [{ day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { dateStyle: 'short' }][this.size]),
- };
- });
- return dayTextMap;
- },
- days() {
-
- let tmpDate = new CalendarDate(this.year,1,1); // NOTE(chris): somewhere in the middle of the year
- tmpDate.w = this.week;
- let startDay = tmpDate.firstDayOfWeek;
- let result = [];
- for (let i = 0; i < 7; i++) {
- result.push(new Date(startDay.getFullYear(), startDay.getMonth(), startDay.getDate() + i));
- }
- return result;
-
- },
- eventsPerDayAndHour() {
- // return early if the calendar pane is sliding
- if (this.isSliding) return {};
- const res = {};
- this.days.forEach(day => {
- let key = day.toDateString();
-
- let nextDay = new Date(day);
- nextDay.setDate(nextDay.getDate()+1);
- nextDay.setMilliseconds(nextDay.getMilliseconds()-1);
- let d = {events:[],lanes:1, isPast: false};
- d.isPast = nextDay.getTime() < this.today
- d.isToday = nextDay.getFullYear() === this.todayDate.getFullYear() && nextDay.getMonth() === this.todayDate.getMonth() && nextDay.getDate() === this.todayDate.getDate()
- if (this.events[key]) {
- this.events[key].forEach(evt => {
- let event = {orig:evt,lane:1,maxLane:1,start: evt.start < day ? day : evt.start, end: evt.end > nextDay ? nextDay : evt.end,shared:[],setSharedMaxRecursive(doneItems) {
- this.maxLane = Math.max(doneItems[0].maxLane, this.maxLane);
- doneItems.push(this);
- this.shared.filter(other => !doneItems.includes(other)).forEach(i => i.setSharedMaxRecursive(doneItems));
- }};
- event.shared = d.events.filter(other => other.start < event.end && other.end > event.start);
- event.shared.forEach(other => other.shared.push(event));
- let occupiedLanes = event.shared.map(other => other.lane);
- while (occupiedLanes.includes(event.lane))
- event.lane++;
- event.maxLane = Math.max(...[event.lane], ...occupiedLanes);
- if (event.maxLane > 1) {
- event.setSharedMaxRecursive([event]);
- }
- d.events.push(event);
- });
- d.lanes = d.events.map(e => e.maxLane).reduce((res, i) => kgv(res, i), 1);
- }
- res[key] = d;
- });
- return res;
- },
- smallestTimeFrame() {
- return [30,15,10,5][this.size];
- },
- lookingAtToday() {
- return this.days.some(d =>
- d.getFullYear() === this.todayDate.getFullYear() &&
- d.getMonth() === this.todayDate.getMonth() &&
- d.getDate() === this.todayDate.getDate()
- )
- },
- curIndicatorStyle() {
-
- return {
- 'pointer-events': 'none',
- 'padding-left': '1rem',
- 'margin-top': '-1px',
- 'z-index': 2,
- 'border-color': '#00649C!important',
- top: this.getDayTimePercent + '%',
- width: this.laneWidth + 'px'
- }
- },
- getDayTimePercent() {
- const now = new Date(Date.now())
- const currentMinutes = now.getMinutes() + now.getHours() * 60
- let timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
-
- return timePercentage
- }
- },
- methods: {
- 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;
- },
- hourGridStyle(hour) {
- return {
- 'pointer-events': 'none',
- top: this.getAbsolutePositionForHour(hour),
- left: 0,
- right: 0,
- 'z-index': 0
- }
- },
- dayGridStyle(day) {
- const styleObj = {
- 'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)',
- 'grid-template-rows': 'repeat(' + (this.hours.length * 60 / this.smallestTimeFrame) + ', 1fr)',
- }
-
- if(day.isPast) {
- styleObj['background-color'] = '#F5E9D7'
- styleObj['border-color'] = '#E8E8E8';
- styleObj.opacity = 0.5;
- } else if (day.isToday) {
-
- // styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
- // styleObj['border-color'] = '#E8E8E8';
- // styleObj.opacity = 0.5;
- }
-
- return styleObj
- },
- eventGridStyle(day, event) {
- return {
- 'z-index': 1,
- 'grid-column-start': 1 + (event.lane - 1) * day.lanes / event.maxLane,
- 'grid-column-end': 1 + event.lane * day.lanes / event.maxLane,
- 'grid-row-start': this.dateToMinutesOfDay(event.start),
- 'grid-row-end': this.dateToMinutesOfDay(event.end),
- 'background-color': event.orig.color,
- 'max-height': '75px'
- }
- },
- calcHourPosition(event) {
- let height = this.$refs.eventcontainer.getBoundingClientRect().height;
- let top = this.$refs.eventcontainer.getBoundingClientRect().top;
- let position = event.clientY - top;
- // position percentage of total height
- let timePercentage = (position / height) * 100;
- // minute percentage of total minutes
- let result = (this.hours.length * 60) * (timePercentage / 100);
- // calculate time in float
- let currentMinutes = ((result + (this.hours[0] * 60)) / 60);
- // get hour part of time
- let currentHour = Math.floor(currentMinutes);
- // get float part of time
- let minutePercentage = currentMinutes % currentHour;
- // calculate minutes from float part of time
- let minute = Math.round(60 * minutePercentage);
- // convert minutes to 5 minute interval
- if (minute % 5 != 0) {
- minute = Math.round(minute / 5) * 5;
- }
- // in case the rounding made the minutes 60, increase the hour and reset the minutes
- if (minute == 60) {
- currentHour++;
- minute = 0;
- }
-
- // ## after rounding the time to the nearest 5 Minute interval, we have to convert the time back to the relative position
- // convert current time in minutes
- currentMinutes = currentHour * 60 + minute;
- // calculate the minutes percentage of the total minutes
- timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
- // calculate the relative position of the time percentage
- position = height * (timePercentage / 100);
- this.hourPosition = position;
-
- // add padding to minutes that consist of only one digit
- minute.toString().length == 1 ? minute = "0" + minute : minute;
- this.hourPositionTime = currentHour + ":" + minute;
- },
- getAbsolutePositionForHour(hour){
- // used for the absolute positioning of the gutters of hours
- return (100 / this.hours.length) * (hour - (24-this.hours.length)) + '%';
- },
- changeToMonth(day) {
- if (!this.noMonthView) {
- this.date.set(day);
- this.focusDate.set(day);
- 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;
- },
- weekPageClick(event, day) {
- this.setSelectedEvent(event);
- this.focusDate.set(new CalendarDate(new Date(event.datum)));
- this.$emit('input', event)
- },
- initResizeObserver() {
- const events = this.$refs['eventsRef'+this.week];
- if (!events) return;
-
- this.resizeObserver = new ResizeObserver((entries) => {
- for (let entry of entries) {
- const { width, height } = entry.contentRect;
- if(width > 0) this.width = width
- }
- });
-
- this.resizeObserver.observe(events);
- },
- destroyResizeObserver() {
- if (this.resizeObserver) {
- this.resizeObserver.disconnect();
- this.resizeObserver = null;
- }
- },
- },
- mounted() {
-
- setTimeout(() => this.$refs.eventcontainer.scrollTop = this.$refs.eventcontainer.scrollHeight / 3 + 1, 0);
-
- const container = document.getElementById("calendarContainer")
- if(container) {
- container.style['overflow-y'] = 'scroll'
- container.style['overflow-x'] = 'auto'
- }
-
- this.initResizeObserver();
- },
- beforeUnmount() {
- this.destroyResizeObserver();
- },
- template: /*html*/`
-
-
-
-
- {{dayText[day]?.tag}}
- {{dayText[day]?.datum}}
-
-
-
-
-
-
- {{hourPositionTime}}
-
-
-
-
-
- {{hour}}:00
-
-
-
-
- {{curTime}}
-
-
-
-
-
- this is a placeholder which means that no template was passed to the Calendar Page slot
-
-
-
-
-
-
-
- `
-}
diff --git a/public/js/components/Calendar/Weeks.js b/public/js/components/Calendar/Weeks.js
deleted file mode 100644
index 76243c67b..000000000
--- a/public/js/components/Calendar/Weeks.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- inject: [
- 'size',
- 'focusDate'
- ],
- computed: {
- weeks(){
- return [...Array(this.focusDate.numWeeks).keys()].map(i => i + 1);
- },
- title() {
- return this.focusDate.format({year: 'numeric'});
- }
- },
- methods: {
- setWeek(week) {
- // TODO(chris): test is there a week jump on year select? => yes there is if the same month/day are in different weeks ... should we prevent that?
- this.focusDate.w = week;
- this.$emit('updateMode', 'week');
- },
- prev(){
- this.focusDate.y--;
- this.focusDate._clean();
- },
- next() {
- this.focusDate.y++;
- this.focusDate._clean();
- },
- },
- template: `
-
-
+
+
+ {{ $p.t('lehre/noLvFound') }}
+
+ `
+}
diff --git a/public/js/components/Calendar/Years.js b/public/js/components/Calendar/Years.js
deleted file mode 100644
index baff2eb6c..000000000
--- a/public/js/components/Calendar/Years.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-import CalendarPane from './Pane.js';
-import CalendarYearsPage from './Years/Page.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- components: {
- CalendarYearsPage,
- CalendarPane
- },
- inject: [
- 'size'
- ],
- data() {
- return {
- start: 0
- }
- },
- computed: {
- range() {
- switch (this.size) {
- case 3:
- // eslint-disable-next-line
- case 2:
- return 24;
- }
- return 12;
- },
- end() {
- return this.start + this.range - 1;
- },
- title() {
- return this.start + ' - ' + this.end;
- }
- },
- methods: {
- paneChanged(dir) {
- this.start += this.range * dir;
- },
- 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() {
- this.start = this.focusDate.y - this.focusDate.y%this.range;
- },
- template: `
-
-
-
- `
-}
diff --git a/public/js/components/Calendar/Years/Page.js b/public/js/components/Calendar/Years/Page.js
deleted file mode 100644
index 3d78fc38d..000000000
--- a/public/js/components/Calendar/Years/Page.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
- inject: [
- 'focusDate'
- ],
- props: {
- start: Number,
- end: Number
- },
- emits: [
- 'updateMode'
- ],
- data() {
- return {
- }
- },
- computed: {
- years() {
- return [...Array(this.end - this.start).keys()].map(i => i + this.start);
- }
- },
- mounted() {
- const container = document.getElementById("calendarContainer")
- if(container) {
- container.style['overflow-y'] = 'scroll'
- container.style['overflow-x'] = 'auto'
- }
- },
- template: `
-
-
-
-
- `
-}
diff --git a/public/js/components/Cis/Abgabetool/AbgabeMitarbeiterDetail.js b/public/js/components/Cis/Abgabetool/AbgabeMitarbeiterDetail.js
new file mode 100644
index 000000000..0900282ef
--- /dev/null
+++ b/public/js/components/Cis/Abgabetool/AbgabeMitarbeiterDetail.js
@@ -0,0 +1,315 @@
+import BsModal from '../../Bootstrap/Modal.js';
+import VueDatePicker from '../../vueDatepicker.js.php';
+
+const today = new Date()
+export const AbgabeMitarbeiterDetail = {
+ name: "AbgabeMitarbeiterDetail",
+ components: {
+ BsModal,
+ InputNumber: primevue.inputnumber,
+ Checkbox: primevue.checkbox,
+ Dropdown: primevue.dropdown,
+ Textarea: primevue.textarea,
+ VueDatePicker
+ },
+ props: {
+ projektarbeit: {
+ type: Object,
+ default: null
+ }
+ },
+ data() {
+ return {
+ oldPaBeurteilungLink: 'https://moodle.technikum-wien.at/mod/page/view.php?id=1005052', // TODO: inject from app & app provide link from config
+ eidAkzeptiert: false,
+ enduploadTermin: null,
+ allActiveLanguages: FHC_JS_DATA_STORAGE_OBJECT.server_languages,
+ // TODO: fetch types
+ allAbgabeTypes: [
+ {
+ paabgabetyp_kurzbz: 'abstract',
+ bezeichnung: 'Entwurf'
+ },
+ {
+ paabgabetyp_kurzbz: 'zwischen',
+ bezeichnung: 'Zwischenabgabe'
+ },
+ {
+ paabgabetyp_kurzbz: 'note',
+ bezeichnung: 'Benotung'
+ },
+ {
+ paabgabetyp_kurzbz: 'end',
+ bezeichnung: 'Endupload'
+ },
+ {
+ paabgabetyp_kurzbz: 'enda',
+ bezeichnung: 'Endabgabe im Sekretariat'
+ }
+ ]
+ }
+ },
+ methods: {
+ openZusatzdatenModal(termin) {
+
+ },
+ saveTermin(termin) {
+ const paabgabe_id = termin.paabgabe_id
+ this.$fhcApi.factory.lehre.postProjektarbeitAbgabe(termin).then( (res) => {
+ if(res?.meta?.status == 'success') {
+ this.$fhcAlert.alertSuccess(this.$p.t('ui/gespeichert'))
+
+ if(paabgabe_id === -1) { // new abgabe has been inserted
+ termin.paabgabe_id = res?.data?.retval
+
+ this.projektarbeit.abgabetermine.push({ // new abgatermin row
+
+ 'paabgabe_id': -1,
+ 'projektarbeit_id': this.projektarbeit.projektarbeit_id,
+ 'fixtermin': false,
+ 'kurzbz': '',
+ 'datum': new Date().toISOString().split('T')[0],
+ 'paabgabetyp_kurzbz': '',
+ 'bezeichnung': '',
+ 'abgabedatum': null,
+ 'insertvon': this.viewData?.uid ?? '',
+ 'allowedToSave': true,
+ 'allowedToDelete': true
+ })
+ }
+
+
+ } else if(res?.meta?.status == 'error'){
+ this.$fhcAlert.alertError()
+ }
+
+ })
+ },
+ deleteTermin(termin) {
+ this.$fhcApi.factory.lehre.deleteProjektarbeitAbgabe(termin.paabgabe_id).then( (res) => {
+ if(res?.meta?.status == 'success') {
+ this.$fhcAlert.alertSuccess(this.$p.t('ui/genericDeleted', [this.$p.t('abgabetool/abgabe')]))
+ // this.$p.t('global/tooltipLektorDeleteKontrolle', [this.$entryParams.permissions.kontrolleDeleteMaxReach ])
+ const deletedTerminIndex = this.projektarbeit.abgabetermine.findIndex(t => t.paabgabe_id === termin.paabgabe_id)
+ this.projektarbeit.abgabetermine.splice(deletedTerminIndex, 1)
+
+
+ } else if(res?.meta?.status == 'error'){
+ this.$fhcAlert.alertError()
+ }
+ })
+ },
+ validate: function(termin) {
+ if(!termin.file.length) {
+ this.$fhcAlert.alertWarning(this.$p.t('global/warningChooseFile'));
+ return false
+ }
+
+ return true;
+ },
+ downloadAbgabe(termin) {
+ this.$fhcApi.factory.lehre.getStudentProjektarbeitAbgabeFile(termin.paabgabe_id, this.projektarbeit.student_uid)
+ },
+ dateDiffInDays(datum, today){
+ const oneDayMs = 1000 * 60 * 60 * 24
+ return Math.round((new Date(datum) - new Date(today)) / oneDayMs)
+ },
+ getDateStyle(termin) {
+ const datum = new Date(termin.datum)
+ const abgabedatum = new Date(termin.abgabedatum)
+
+ // todo: rework styling but keep the color pattern logic
+ // https://wiki.fhcomplete.info/doku.php?id=cis:abgabetool_fuer_studierende
+ let color = 'white'
+ let fontColor = 'black'
+ if (termin.abgabedatum === null) {
+ if(datum < today) {
+ color = 'red'
+ fontColor = 'white'
+ } else if (datum > today && this.dateDiffInDays(datum, today) <= 12) {
+ color = 'yellow'
+ }
+ } else if(abgabedatum > datum) {
+ color = 'pink' // aka "hellrot"
+ fontColor = 'white'
+ } else {
+ color = 'green'
+ }
+
+ return `font-color: ${fontColor} ; background-color: ${color}; border-radius: 50%;`
+ },
+ openBeurteilungLink(link) {
+ window.open(link, '_blank')
+ },
+ getOptionLabelSprache(option) {
+ return option.sprache
+ },
+ getOptionLabelAbgabetyp(option){
+ return option.bezeichnung
+ },
+ formatDate(dateParam) {
+ const date = new Date(dateParam)
+ // handle missing leading 0
+ const padZero = (num) => String(num).padStart(2, '0');
+
+ const month = padZero(date.getMonth() + 1); // Months are zero-based
+ const day = padZero(date.getDate());
+ const year = date.getFullYear();
+
+ return `${day}.${month}.${year}`;
+ },
+ openStudentPage() {
+ const link = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router
+ + '/Cis/Abgabetool/Student/' + this.projektarbeit?.student_uid
+ window.open(link, '_blank')
+ },
+ openPlagiatcheck() {
+ // todo: hardcoded turnitin link?
+ const link = "https://technikum-wien.turnitin.com/sso/sp/redwood/saml/5IyfmBr2OcSIaWQTKlFCGj/start"
+ window.open(link, '_blank')
+ },
+ openBenotung() {
+ const path = this.projektarbeit?.betreuerart_kurzbz == 'Zweitbegutachter' ? 'ProjektarbeitsbeurteilungZweitbegutachter' : 'ProjektarbeitsbeurteilungErstbegutachter'
+ const link = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'index.ci.php/extensions/FHC-Core-Projektarbeitsbeurteilung/' + path
+ window.open(link, '_blank')
+ }
+ },
+ computed: {
+ getEid() {
+ return this.$p.t('abgabetool/c4eidesstattlicheErklaerung')
+ },
+ getEnduploadErlaubt() {
+ return !this.eidAkzeptiert
+ },
+ getSemesterBenotbar(){
+ return this.projektarbeit?.isCurrent ?? false
+ },
+ endUploadVorhanden(){
+ return this.projektarbeit?.abgabetermine.find(abgabe => abgabe.paabgabetyp_kurzbz === 'end' && abgabe.abgabedatum !== null)
+ }
+
+ },
+ created() {
+
+ },
+ mounted() {
+
+ },
+ template: `
+
+
+
+ {{$p.t('abgabetool/c4abgabeMitarbeiterbereich')}}
+
+
+
+
+ {{projektarbeit?.student}}
+ {{projektarbeit?.titel}}
+ {{projektarbeit?.zweitbegutachter}}
+
+
+
+
+
+
+
+
+ Kein Endupload vorhanden!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4fixtermin')}}
+ {{$p.t('abgabetool/c4zieldatum')}}
+ {{$p.t('abgabetool/c4abgabetyp')}}
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+ {{$p.t('abgabetool/c4abgabedatum')}}
+
+
+
+
+ keine Termine gefunden!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ termin.abgabedatum?.split("-").reverse().join(".") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`,
+};
+
+export default AbgabeMitarbeiterDetail;
diff --git a/public/js/components/Cis/Abgabetool/AbgabeStudentDetail.js b/public/js/components/Cis/Abgabetool/AbgabeStudentDetail.js
new file mode 100644
index 000000000..1eb5d099c
--- /dev/null
+++ b/public/js/components/Cis/Abgabetool/AbgabeStudentDetail.js
@@ -0,0 +1,378 @@
+import Upload from '../../../components/Form/Upload/Dms.js';
+import BsModal from '../../Bootstrap/Modal.js';
+import VueDatePicker from '../../vueDatepicker.js.php';
+
+const today = new Date()
+export const AbgabeStudentDetail = {
+ name: "AbgabeStudentDetail",
+ components: {
+ Upload,
+ BsModal,
+ InputNumber: primevue.inputnumber,
+ Checkbox: primevue.checkbox,
+ Dropdown: primevue.dropdown,
+ Textarea: primevue.textarea,
+ VueDatePicker
+ },
+ props: {
+ projektarbeit: {
+ type: Object,
+ default: null
+ },
+ viewMode: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ eidAkzeptiert: false,
+ enduploadTermin: null,
+ allActiveLanguages: FHC_JS_DATA_STORAGE_OBJECT.server_languages,
+ form: Vue.reactive({
+ sprache: '',
+ abstract: '',
+ abstract_en: '',
+ schlagwoerter: '',
+ schlagwoerter_en: '',
+ kontrollschlagwoerter: '',
+ seitenanzahl: 1,
+ })
+ }
+ },
+ methods: {
+ validate: function(termin) {
+ if(!termin.file.length) {
+ this.$fhcAlert.alertWarning(this.$p.t('global/warningChooseFile'));
+ return false
+ }
+
+ return true;
+ },
+ triggerEndupload() {
+ if (!this.validate(this.enduploadTermin))
+ {
+ return false;
+ }
+
+ // post endabgabe
+ const formData = new FormData();
+ formData.append('paabgabetyp_kurzbz', this.enduploadTermin.paabgabetyp_kurzbz)
+ formData.append('projektarbeit_id', this.enduploadTermin.projektarbeit_id);
+ formData.append('paabgabe_id', this.enduploadTermin.paabgabe_id)
+ formData.append('student_uid', this.projektarbeit.student_uid)
+ formData.append('bperson_id', this.projektarbeit.bperson_id)
+
+ // TODO: validate/check for null etc.
+ formData.append('sprache', this.form['sprache'].sprache)
+ formData.append('abstract', this.form['abstract'])
+ formData.append('abstract_en', this.form['abstract_en'])
+ formData.append('schlagwoerter', this.form['schlagwoerter'])
+ formData.append('schlagwoerter_en', this.form['schlagwoerter_en'])
+ formData.append('seitenanzahl', this.form['seitenanzahl'])
+
+ for (let i = 0; i < this.enduploadTermin.file.length; i++) {
+ formData.append('file', this.enduploadTermin.file[i]);
+ }
+ this.$fhcApi.factory.lehre.postStudentProjektarbeitEndupload(formData)
+ .then(res => {
+ this.handleUploadRes(res)
+ })
+
+ this.$refs.modalContainerEnduploadZusatzdaten.hide()
+ },
+ downloadAbgabe(termin) {
+ this.$fhcApi.factory.lehre.getStudentProjektarbeitAbgabeFile(termin.paabgabe_id, this.projektarbeit.student_uid)
+ },
+ formatDate(dateParam) {
+ const date = new Date(dateParam)
+ // handle missing leading 0
+ const padZero = (num) => String(num).padStart(2, '0');
+
+ const month = padZero(date.getMonth() + 1); // Months are zero-based
+ const day = padZero(date.getDate());
+ const year = date.getFullYear();
+
+ return `${day}.${month}.${year}`;
+ },
+ upload(termin) {
+
+ if (!this.validate(termin))
+ {
+ return false;
+ }
+
+ if(termin.bezeichnung === 'Endupload') {
+ // open endupload form modal for further inputs
+ this.enduploadTermin = termin
+ this.$refs.modalContainerEnduploadZusatzdaten.show()
+ } else {
+ const formData = new FormData();
+ formData.append('paabgabetyp_kurzbz', termin.paabgabetyp_kurzbz)
+ formData.append('projektarbeit_id', this.projektarbeit.projektarbeit_id)
+ formData.append('paabgabe_id', termin.paabgabe_id)
+ formData.append('student_uid', this.projektarbeit.student_uid)
+ formData.append('bperson_id', this.projektarbeit.bperson_id)
+
+ for (let i = 0; i < termin.file.length; i++) {
+ formData.append('file', termin.file[i]);
+ }
+ this.$fhcApi.factory.lehre.postStudentProjektarbeitZwischenabgabe(formData)
+ .then(res => {
+ this.handleUploadRes(res)
+ })
+ }
+ },
+ handleUploadRes(res) {
+ if(res.meta.status == "success") {
+ this.$fhcAlert.alertSuccess('File erfolgreich hochgeladen')
+ } else {
+ this.$fhcAlert.alertError('File upload error')
+ }
+
+ if(res.meta.signaturInfo) {
+ this.$fhcAlert.alertInfo(res.meta.signaturInfo)
+ }
+ },
+ dateDiffInDays(datum, today){
+ const oneDayMs = 1000 * 60 * 60 * 24
+ return Math.round((new Date(datum) - new Date(today)) / oneDayMs)
+ },
+ getDateStyle(termin, mode) {
+ const datum = new Date(termin.datum)
+ const abgabedatum = new Date(termin.abgabedatum)
+
+ // todo: rework styling but keep the color pattern logic
+ // https://wiki.fhcomplete.info/doku.php?id=cis:abgabetool_fuer_studierende
+ let color = 'white'
+ let fontColor = 'black'
+ let icon = '';
+ if (termin.abgabedatum === null) {
+ if(datum < today) {
+ color = 'red'
+ fontColor = 'white'
+ icon = 'fa-triangle-exclamation'
+ } else if (datum > today && this.dateDiffInDays(datum, today) <= 12) {
+ color = 'yellow'
+ icon = 'fa-circle-exclamation'
+ }
+ } else if(abgabedatum > datum) {
+ color = 'pink' // aka "hellrot"
+ fontColor = 'white'
+ icon = 'fa-circle-question'
+ } else {
+ color = 'green'
+ icon = 'fa-square-check'
+ }
+
+ //return `font-color: ${fontColor} ; background-color: ${color}; border-radius: 50%;`
+ if( typeof mode !== 'undefined' || mode === 'icon') {
+ return icon;
+ } else {
+ return 'abgabe-zieldatum-border-' + color;
+ }
+ },
+ openBeurteilungLink(link) {
+ window.open(link, '_blank')
+ },
+ getOptionLabel(option) {
+ return option.sprache
+ }
+ },
+ watch: {
+ projektarbeit(newVal) {
+ // default select german if projektarbeit sprache was null
+ this.form.sprache = newVal.sprache ? this.allActiveLanguages.find(lang => lang.sprache == newVal.sprache) : this.allActiveLanguages.find(lang => lang.sprache == 'German')
+ this.form.abstract = newVal.abstract
+ this.form.abstract_en = newVal.abstract_en
+ this.form.schlagwoerter = newVal.schlagwoerter
+ this.form.schlagwoerter_en = newVal.schlagwoerter_en
+ this.form.kontrollschlagwoerter = newVal.kontrollschlagwoerter
+ this.form.seitenanzahl = newVal.seitenanzahl
+ }
+ },
+ computed: {
+ getEid() {
+ return this.$p.t('abgabetool/c4eidesstattlicheErklaerung')
+ },
+ getEnduploadErlaubt() {
+ return !this.eidAkzeptiert
+ }
+ },
+ created() {
+
+ },
+ mounted() {
+
+ },
+ template: `
+
+
+ {{$p.t('abgabetool/c4abgabeStudentenbereich')}}
+
+ {{projektarbeit?.betreuer}}
+ {{projektarbeit?.titel}}
+
+
+
+ {{$p.t('abgabetool/c4fixtermin')}}
+ {{$p.t('abgabetool/c4zieldatum')}}
+ {{$p.t('abgabetool/c4abgabetyp')}}
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+ {{$p.t('abgabetool/c4abgabedatum')}}
+
+ {{$p.t('abgabetool/c4fileupload')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ termin.bezeichnung }}
+
+
+
+
+ {{ termin.abgabedatum?.split("-").reverse().join(".") }}
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4enduploadZusatzdaten')}}
+
+
+
+ Student UID: {{ projektarbeit?.student_uid}}
+
+
+
+
+ Titel: {{ projektarbeit?.titel }}
+
+
+
+
+
+ {{$p.t('abgabetool/c4Sprache')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4schlagwoerterGer')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4schlagwoerterEng')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4abstractGer')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4abstractEng')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4seitenanzahl')}}
+
+
+
+
+
+
+
+
+
+
+ {{ $p.t('abgabetool/c4gelesenUndAkzeptiert') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+};
+
+export default AbgabeStudentDetail;
diff --git a/public/js/components/Cis/Abgabetool/AbgabetoolMitarbeiter.js b/public/js/components/Cis/Abgabetool/AbgabetoolMitarbeiter.js
new file mode 100644
index 000000000..341d61920
--- /dev/null
+++ b/public/js/components/Cis/Abgabetool/AbgabetoolMitarbeiter.js
@@ -0,0 +1,483 @@
+import {CoreFilterCmpt} from "../../../components/filter/Filter.js";
+import AbgabeDetail from "./AbgabeMitarbeiterDetail.js";
+import VerticalSplit from "../../verticalsplit/verticalsplit.js"
+import BsModal from '../../Bootstrap/Modal.js';
+import VueDatePicker from '../../vueDatepicker.js.php';
+
+export const AbgabetoolMitarbeiter = {
+ name: "AbgabetoolMitarbeiter",
+ components: {
+ BsModal,
+ CoreFilterCmpt,
+ AbgabeDetail,
+ VerticalSplit,
+ Dropdown: primevue.dropdown,
+ Textarea: primevue.textarea,
+ VueDatePicker
+ },
+ props: {
+ viewData: {
+ type: Object,
+ required: true,
+ default: () => ({name: '', uid: ''}),
+ validator(value) {
+ return value && value.name && value.uid
+ }
+ }
+ },
+ data() {
+ return {
+ saving: false,
+ loading: false,
+ // TODO: fetch types
+ allAbgabeTypes: [
+ {
+ paabgabetyp_kurzbz: 'abstract',
+ bezeichnung: 'Entwurf'
+ },
+ {
+ paabgabetyp_kurzbz: 'zwischen',
+ bezeichnung: 'Zwischenabgabe'
+ },
+ {
+ paabgabetyp_kurzbz: 'note',
+ bezeichnung: 'Benotung'
+ },
+ {
+ paabgabetyp_kurzbz: 'end',
+ bezeichnung: 'Endupload'
+ },
+ {
+ paabgabetyp_kurzbz: 'enda',
+ bezeichnung: 'Endabgabe im Sekretariat'
+ }
+ ],
+ serienTermin: Vue.reactive({
+ datum: new Date(),
+ bezeichnung: {
+ paabgabetyp_kurzbz: 'zwischen',
+ bezeichnung: 'Zwischenabgabe'
+ },
+ kurzbz: ''
+ }),
+ showAll: false,
+ tabulatorUuid: Vue.ref(0),
+ selectedData: [],
+ domain: '',
+ student_uid: null,
+ detail: null,
+ detailOffset: 0,
+ projektarbeiten: null,
+ selectedProjektarbeit: null,
+ tableBuiltResolve: null,
+ tableBuiltPromise: null,
+ abgabeTableOptions: {
+ height: 700,
+ index: 'projektarbeit_id',
+ layout: 'fitDataStretch',
+ placeholder: this.$p.t('global/noDataAvailable'),
+ selectable: true,
+ selectableCheck: this.selectionCheck,
+ columns: [
+ {
+ formatter: 'rowSelection',
+ titleFormatter: 'rowSelection',
+ titleFormatterParams: {
+ rowRange: "active" // Only toggle the values of the active filtered rows
+ },
+ hozAlign:"center",
+ headerSort: false,
+ frozen: true,
+ width: 70
+ },
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4details')), field: 'details', formatter: this.detailFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4personenkennzeichen')), field: 'pkz', formatter: this.pkzTextFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4kontakt')), field: 'mail', formatter: this.mailFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4vorname')), field: 'vorname', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4nachname')), field: 'nachname', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4projekttyp')), field: 'projekttyp_kurzbz', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4stg')), field: 'stg', formatter: this.centeredTextFormatter, widthGrow: 2},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4sem')), field: 'studiensemester_kurzbz', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4titel')), field: 'titel', formatter: this.centeredTextFormatter, maxWidth: 500, widthGrow: 8},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4betreuerart')), field: 'betreuerart_beschreibung',formatter: this.centeredTextFormatter, widthGrow: 8}
+ ],
+ persistence: false,
+ },
+ abgabeTableEventHandlers: [{
+ event: "tableBuilt",
+ handler: async () => {
+ this.tableBuiltResolve()
+ }
+ },
+ {
+ event: "cellClick",
+ handler: async (e, cell) => {
+ if(cell.getColumn().getField() === "details") {
+ this.setDetailComponent(cell.getValue())
+ this.undoSelection(cell)
+ } else if (cell.getColumn().getField() === "mail") {
+ this.undoSelection(cell)
+ }
+ }
+ },
+ {
+ event: "rowSelectionChanged",
+ handler: async(data) => {
+ this.selectedData = data
+ }
+ }
+ ]};
+ },
+ methods: {
+ getOptionLabelAbgabetyp(option){
+ return option.bezeichnung
+ },
+ formatDate(dateParam) {
+ const date = new Date(dateParam)
+ // handle missing leading 0
+ const padZero = (num) => String(num).padStart(2, '0');
+
+ const month = padZero(date.getMonth() + 1); // Months are zero-based
+ const day = padZero(date.getDate());
+ const year = date.getFullYear();
+
+ return `${day}.${month}.${year}`;
+ },
+ undoSelection(cell) {
+ // checks if cells row is selected and unselects -> imitates columns which dont trigger row selection
+ // but actually just revert it after the fact
+
+ const row = cell.getRow()
+ if(row.isSelected()) {
+ row.deselect();
+ }
+ },
+ selectionCheck(row) {
+ const data = row.getData()
+ if(data?.betreuerart_kurzbz == 'Zweitbegutachter') return false
+ return true
+ },
+ showDeadlines(){
+ const link = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router
+ + '/Cis/Abgabetool/Deadlines'
+ window.open(link, '_blank')
+ },
+ toggleShowAll(showall) {
+ this.showAll = showall
+ this.loading = true
+ this.loadProjektarbeiten(showall, () => {
+ this.$refs.abgabeTable?.tabulator.redraw(true)
+ this.$refs.abgabeTable?.tabulator.setSort([]);
+ this.loading = false
+ })
+ },
+ openAddSeriesModal() {
+ this.$refs.modalContainerAddSeries.show()
+ },
+ addSeries() {
+ this.saving = true
+ this.$fhcApi.factory.lehre.postSerientermin(
+ this.serienTermin.datum.toISOString(),
+ this.serienTermin.bezeichnung.paabgabetyp_kurzbz,
+ this.serienTermin.bezeichnung.bezeichnung,
+ this.serienTermin.kurzbz,
+ this.selectedData?.map(projekt => projekt.projektarbeit_id)
+ ).then(res => {
+ if (res.meta.status === "success" && res.data) {
+ this.$fhcAlert.alertSuccess(this.$p.t('abgabetool/serienTerminGespeichert'))
+ // TODO: sticky lifetime erhöhen um sinnvoll lesen zu können?
+ this.$fhcAlert.alertInfo(this.$p.t('abgabetool/serienTerminEmailSentInfo', [this.createInfoString(res.data)]));
+ } else {
+ this.$fhcAlert.alertError(this.$p.t('abgabetool/errorSerienterminSpeichern'))
+ }
+ }).finally(()=>{
+ this.saving = false
+ })
+
+ this.$refs.modalContainerAddSeries.hide()
+ },
+ createInfoString(data) {
+ let str = '';
+
+ data.forEach(name => {
+ str += name
+ str += '; '
+ })
+
+ return str
+ },
+ isPastDate(date) {
+ return new Date(date) < new Date(Date.now())
+ },
+ setDetailComponent(details){
+ this.loadAbgaben(details).then((res)=> {
+ const pa = this.projektarbeiten?.retval?.find(projekarbeit => projekarbeit.projektarbeit_id == details.projektarbeit_id)
+ pa.abgabetermine = res.data[0].retval
+ pa.isCurrent = res.data[1]
+ pa.abgabetermine.push({ // new abgatermin row
+
+ 'paabgabe_id': -1,
+ 'projektarbeit_id': pa.projektarbeit_id,
+ 'fixtermin': false,
+ 'kurzbz': '',
+ 'datum': new Date().toISOString().split('T')[0],
+ 'paabgabetyp_kurzbz': '',
+ 'bezeichnung': '',
+ 'abgabedatum': null,
+ 'insertvon': this.viewData?.uid ?? ''
+
+ })
+ pa.abgabetermine.forEach(termin => {
+ termin.file = []
+ termin.allowedToSave = termin.insertvon == this.viewData?.uid && pa.betreuerart_kurzbz != 'Zweitbegutachter'
+ termin.allowedToDelete = termin.allowedToSave && !termin.abgabedatum
+
+ termin.bezeichnung = {
+ bezeichnung: termin.bezeichnung,
+ paabgabetyp_kurzbz: termin.paabgabetyp_kurzbz
+ }
+ })
+ pa.betreuer = this.buildBetreuer(pa)
+ pa.student_uid = details.student_uid
+ pa.student = `${pa.vorname} ${pa.nachname}`
+
+ this.selectedProjektarbeit = pa
+
+
+ this.$refs.verticalsplit.showBoth()
+
+
+ })
+ },
+ centeredTextFormatter(cell) {
+ const val = cell.getValue()
+ if(!val) return
+
+ return '' +
+ ''+val+'
'
+ },
+ detailFormatter(cell) {
+ return ''
+ },
+ mailFormatter(cell) {
+ const val = cell.getValue()
+ return ''
+ },
+ beurteilungFormatter(cell) {
+ const val = cell.getValue()
+ if(val) {
+ return ''
+ } else return '-'
+ },
+ pkzTextFormatter(cell) {
+ const val = cell.getValue()
+
+ return '' +
+ ''+val+'
'
+ },
+ tableResolve(resolve) {
+ this.tableBuiltResolve = resolve
+ },
+ buildMailToLink(abgabe) {
+ return 'mailto:' + abgabe.uid +'@'+ this.domain
+ },
+ buildPKZ(projekt) {
+ return `${projekt.uid} / ${projekt.matrikelnr}`
+ },
+ buildStg(projekt) {
+ return (projekt.typ + projekt.kurzbz)?.toUpperCase()
+ },
+ buildBetreuer(abgabe) {
+ // TODO: preload and insert own titled name of betreuer somehow
+ return abgabe.betreuerart_beschreibung + ': ' + (abgabe.btitelpre ? abgabe.btitelpre + ' ' : '') + abgabe.bvorname + ' ' + abgabe.bnachname + (abgabe.btitelpost ? ' ' + abgabe.btitelpost : '')
+ },
+ setupData(data){
+ this.projektarbeiten = data[0]
+ this.domain = data[1]
+
+ const d = data[0]?.retval?.map(projekt => {
+ let mode = 'detailTermine'
+
+ return {
+ ...projekt,
+ details: {
+ student_uid: projekt.uid,
+ projektarbeit_id: projekt.projektarbeit_id,
+ },
+ pkz: this.buildPKZ(projekt),
+ beurteilung: projekt.beurteilungLink ?? null,
+ sem: projekt.studiensemester_kurzbz,
+ stg: this.buildStg(projekt),
+ mail: this.buildMailToLink(projekt),
+ typ: projekt.projekttyp_kurzbz,
+ titel: projekt.titel
+ }
+ })
+
+ this.$refs.abgabeTable.tabulator.setColumns(this.abgabeTableOptions.columns)
+ this.$refs.abgabeTable.tabulator.setData(d);
+ },
+ loadProjektarbeiten(all = false, callback) {
+ this.$fhcApi.factory.lehre.getMitarbeiterProjektarbeiten(this.viewData?.uid ?? null, all)
+ .then(res => {
+ if(res?.data) this.setupData(res.data)
+ }).finally(() => {
+ if(callback) {
+ callback()
+ }
+ })
+ },
+ loadAbgaben(details) {
+ return new Promise((resolve) => {
+ this.$fhcApi.factory.lehre.getStudentProjektabgaben(details)
+ .then(res => {
+ resolve(res)
+ })
+ })
+ },
+ handleUuidDefined(uuid) {
+ this.tabulatorUuid = uuid
+ },
+ calcMaxTableHeight() {
+ const tableID = this.tabulatorUuid ? ('-' + this.tabulatorUuid) : ''
+ const tableDataSet = document.getElementById('filterTableDataset' + tableID);
+ if(!tableDataSet) return
+ const rect = tableDataSet.getBoundingClientRect();
+
+ this.abgabeTableOptions.height = window.visualViewport.height - rect.top
+ this.$refs.abgabeTable.tabulator.setHeight(this.abgabeTableOptions.height)
+ },
+ async setupMounted() {
+ this.tableBuiltPromise = new Promise(this.tableResolve)
+ await this.tableBuiltPromise
+
+ this.loadProjektarbeiten()
+
+
+ this.$refs.verticalsplit.collapseBottom()
+ this.calcMaxTableHeight()
+
+ }
+ },
+ watch: {
+
+ },
+ computed: {
+
+ },
+ created() {
+
+ },
+ mounted() {
+ this.setupMounted()
+ },
+ template: `
+
+
+
+ {{ $p.t('abgabetool/neueTerminserie') }}
+
+
+
+
+
+ {{$p.t('abgabetool/c4zieldatum')}}
+
+
+ {{$p.t('abgabetool/c4abgabetyp')}}
+
+
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/abgabetoolTitle')}}
+
+
+
+
+
+
+
+
+ {{ $p.t('abgabetool/currentlySaving') }}
+
+
+ {{ $p.t('abgabetool/currentlyLoading') }}
+
+
+
+
+
+
+
+
+
+
+
+ `,
+};
+
+export default AbgabetoolMitarbeiter;
diff --git a/public/js/components/Cis/Abgabetool/AbgabetoolStudent.js b/public/js/components/Cis/Abgabetool/AbgabetoolStudent.js
new file mode 100644
index 000000000..d1eab7c6e
--- /dev/null
+++ b/public/js/components/Cis/Abgabetool/AbgabetoolStudent.js
@@ -0,0 +1,264 @@
+import {CoreFilterCmpt} from "../../../components/filter/Filter.js";
+import AbgabeDetail from "./AbgabeStudentDetail.js";
+import VerticalSplit from "../../verticalsplit/verticalsplit.js";
+
+export const AbgabetoolStudent = {
+ name: "AbgabetoolStudent",
+ components: {
+ CoreFilterCmpt,
+ AbgabeDetail,
+ VerticalSplit
+ },
+ props: {
+ student_uid_prop: {
+ default: null
+ },
+ viewData: {
+ type: Object,
+ required: true,
+ default: () => ({uid: ''}),
+ validator(value) {
+ return value && value.uid
+ }
+ }
+ },
+ data() {
+ return {
+ tabulatorUuid: Vue.ref(0),
+ domain: '',
+ student_uid: null,
+ detail: null,
+ projektarbeiten: null,
+ selectedProjektarbeit: null,
+ tableBuiltResolve: null,
+ tableBuiltPromise: null,
+ abgabeTableOptions: {
+ minHeight: 250,
+ index: 'projektarbeit_id',
+ layout: 'fitColumns',
+ placeholder: this.$p.t('global/noDataAvailable'),
+ columns: [
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4details')), field: 'details', formatter: this.detailFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4beurteilung')), field: 'beurteilung', formatter: this.beurteilungFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4sem')), field: 'sem', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4stg')), field: 'stg', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4kontakt')), field: 'mail', formatter: this.mailFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4betreuer')), field: 'betreuer', formatter: this.centeredTextFormatter,widthGrow: 2},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4projekttyp')), field: 'typ', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4titel')), field: 'titel', formatter: this.centeredTextFormatter, widthGrow: 8}
+ ],
+ persistence: false,
+ },
+ abgabeTableEventHandlers: [{
+ event: "tableBuilt",
+ handler: async () => {
+ this.tableBuiltResolve()
+ }
+ },
+ {
+ event: "cellClick",
+ handler: async (e, cell) => {
+
+ if(cell.getColumn().getField() === "details") {
+ const val = cell.getValue()
+
+ if(val.mode === 'detailTermine') {
+ this.setDetailComponent(cell.getValue())
+ } else if (val.mode === 'beurteilungDownload') {
+ const pdfExportLink = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'cis/private/pdfExport.php?xml=projektarbeitsbeurteilung.xml.php&xsl=Projektbeurteilung&betreuerart_kurzbz='+val.betreuerart_kurzbz+'&projektarbeit_id='+val.projektarbeit_id+'&person_id=' + val.betreuer_person_id
+ // const pdfExportLink2 = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'cis/private/lehre/projektbeurteilungDocumentExport.php?betreuerart_kurzbz='+val.betreuerart_kurzbz+'&projektarbeit_id='+val.projektarbeit_id+'&person_id=' + val.betreuer_person_id
+ window.open(pdfExportLink, '_blank')
+ }
+
+ } else if (cell.getColumn().getField() === "beurteilung") {
+ const val = cell.getValue()
+
+ if(val != '-') window.open(val, '_blank')
+ }
+ e.stopPropagation()
+
+ }
+ }
+ ]};
+ },
+ methods: {
+ isPastDate(date) {
+ return new Date(date) < new Date(Date.now())
+ },
+ setDetailComponent(details){
+ this.loadAbgaben(details).then((res)=> {
+ const pa = this.projektarbeiten?.retval?.find(projekarbeit => projekarbeit.projektarbeit_id == details.projektarbeit_id)
+ pa.abgabetermine = res.data[0].retval
+ pa.abgabetermine.forEach(termin => {
+ termin.file = []
+ termin.allowedToUpload = true
+
+ // TODO: fixtermin logic?
+ if(termin.bezeichnung == 'Endupload' && this.isPastDate(termin.datum)) {
+
+ // termin.allowedToUpload = false
+ } else {
+ // termin.allowedToUpload = true
+ }
+
+ })
+ pa.betreuer = this.buildBetreuer(pa)
+ pa.student_uid = this.student_uid
+
+ this.selectedProjektarbeit = pa
+
+
+ this.$refs.verticalsplit.showBoth()
+
+ })
+
+ },
+ centeredTextFormatter(cell) {
+ const val = cell.getValue()
+
+ return '' +
+ ''+val+'
'
+ },
+ detailFormatter(cell) {
+ const val = cell.getValue()
+
+ if(val.mode === 'detailTermine') {
+ return ''
+ } else if (val.mode === 'beurteilungDownload') {
+ return ''
+ }
+ },
+ mailFormatter(cell) {
+ const val = cell.getValue()
+ return ''
+ },
+ beurteilungFormatter(cell) {
+ const val = cell.getValue()
+ if(val) {
+ return ''
+ } else return '-'
+ },
+ tableResolve(resolve) {
+ this.tableBuiltResolve = resolve
+ },
+ buildMailToLink(abgabe) {
+ return 'mailto:' + abgabe.mitarbeiter_uid +'@'+ this.domain
+ },
+ buildBetreuer(abgabe) {
+ return abgabe.betreuerart_beschreibung + ': ' + (abgabe.btitelpre ? abgabe.btitelpre + ' ' : '') + abgabe.bvorname + ' ' + abgabe.bnachname + (abgabe.btitelpost ? ' ' + abgabe.btitelpost : '')
+ },
+ setupData(data){
+ this.projektarbeiten = data[0]
+ this.domain = data[1]
+ this.student_uid = data[2]
+ const d = data[0]?.retval?.map(projekt => {
+ let mode = 'detailTermine'
+
+ if (projekt.babgeschickt || projekt.zweitbetreuer_abgeschickt) {
+ // mode = 'beurteilungDownload' // build dl link for both betreuer documents
+ projekt.beurteilungLink = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'cis/private/pdfExport.php?xml=projektarbeitsbeurteilung.xml.php&xsl=Projektbeurteilung&betreuerart_kurzbz='+projekt.betreuerart_kurzbz+'&projektarbeit_id='+projekt.projektarbeit_id+'&person_id=' + projekt.bperson_id
+
+ }
+
+ return {
+ details: {
+ student_uid: this.student_uid,
+ projektarbeit_id: projekt.projektarbeit_id,
+ betreuer_person_id: projekt.bperson_id,
+ betreuerart_kurzbz: projekt.betreuerart_kurzbz,
+ mode
+ },
+ beurteilung: projekt.beurteilungLink ?? null,
+ sem: projekt.studiensemester_kurzbz,
+ stg: projekt.kurzbzlang,
+ mail: this.buildMailToLink(projekt),
+ betreuer: this.buildBetreuer(projekt),
+ typ: projekt.projekttypbezeichnung,
+ titel: projekt.titel
+ }
+ })
+
+ this.$refs.abgabeTable.tabulator.setColumns(this.abgabeTableOptions.columns)
+ this.$refs.abgabeTable.tabulator.setData(d);
+ },
+ loadProjektarbeiten() {
+ this.$fhcApi.factory.lehre.getStudentProjektarbeiten(this.student_uid_prop || this.viewData?.uid || null)
+ .then(res => {
+ if(res?.data) this.setupData(res.data)
+ })
+ },
+ loadAbgaben(details) {
+ return new Promise((resolve) => {
+ this.$fhcApi.factory.lehre.getStudentProjektabgaben(details)
+ .then(res => {
+ resolve(res)
+ })
+ })
+ },
+ handleUuidDefined(uuid) {
+ this.tabulatorUuid = uuid
+ },
+ calcMaxTableHeight() {
+ const tableID = this.tabulatorUuid ? ('-' + this.tabulatorUuid) : ''
+ const tableDataSet = document.getElementById('filterTableDataset' + tableID);
+ if(!tableDataSet) return
+ const rect = tableDataSet.getBoundingClientRect();
+
+ this.abgabeTableOptions.height = window.visualViewport.height - rect.top
+ this.$refs.abgabeTable.tabulator.setHeight(this.abgabeTableOptions.height)
+ },
+ async setupMounted() {
+ this.tableBuiltPromise = new Promise(this.tableResolve)
+ await this.tableBuiltPromise
+
+ this.loadProjektarbeiten()
+
+ this.$refs.verticalsplit.collapseBottom()
+ //this.calcMaxTableHeight()
+ }
+ },
+ watch: {
+
+ },
+ computed: {
+ isViewMode() {
+ return this.student_uid !== this.viewData.uid
+ }
+ },
+ created() {
+
+ },
+ mounted() {
+ this.setupMounted()
+ },
+ template: `
+
+
+ {{$p.t('abgabetool/abgabetoolTitle')}}
+
+
+
+ `,
+};
+
+export default AbgabetoolStudent;
diff --git a/public/js/components/Cis/Abgabetool/DeadlineOverview.js b/public/js/components/Cis/Abgabetool/DeadlineOverview.js
new file mode 100644
index 000000000..d2b133979
--- /dev/null
+++ b/public/js/components/Cis/Abgabetool/DeadlineOverview.js
@@ -0,0 +1,151 @@
+import {CoreFilterCmpt} from "../../../components/filter/Filter.js";
+
+export const DeadlineOverview = {
+ name: "DeadlineOverview",
+ components: {
+ CoreFilterCmpt,
+ },
+ props: {
+ person_uid_prop: {
+ default: null
+ },
+ viewData: {
+ type: Object,
+ required: true,
+ default: () => ({name: '', uid: ''}),
+ validator(value) {
+ return value && value.name && value.uid
+ }
+ }
+ },
+ data() {
+ return {
+ fullName: null, // TODO: fetch this somewhere
+ deadlines: null,
+ tabulatorUuid: Vue.ref(0),
+ tableBuiltResolve: null,
+ tableBuiltPromise: null,
+ deadlineTableOptions: {
+ height: 700,
+ index: 'projektarbeit_id',
+ layout: 'fitColumns',
+ placeholder: this.$p.t('global/noDataAvailable'),
+ columns: [
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4zieldatum')), field: 'datum', formatter: this.centeredTextFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4fixtermin')), field: 'fixterminstring', formatter: this.centeredTextFormatter, widthGrow: 1, tooltip: false},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4abgabetyp')), field: 'typ_bezeichnung', formatter: this.centeredTextFormatter, widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4abgabekurzbz')), field: 'kurzbz', formatter: this.centeredTextFormatter, widthGrow: 3},
+ {title: Vue.computed(() => this.$p.t('person/studentIn')), field: 'student', formatter: this.centeredTextFormatter, widthGrow: 2},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4stg')), field: 'stg', formatter: this.centeredTextFormatter,widthGrow: 1},
+ {title: Vue.computed(() => this.$p.t('abgabetool/c4sem')), field: 'semester', formatter: this.centeredTextFormatter, widthGrow: 1}
+ ],
+ persistence: false,
+ },
+ deadlineTableEventHandlers: [{
+ event: "tableBuilt",
+ handler: async () => {
+ this.tableBuiltResolve()
+ }
+ },
+ {
+ event: "cellClick",
+ handler: async (e, cell) => {
+
+ if(cell.getColumn().getField() === "details") {
+ const val = cell.getValue()
+
+ if(val.mode === 'detailTermine') {
+ this.setDetailComponent(cell.getValue())
+ } else if (val.mode === 'beurteilungDownload') {
+ const pdfExportLink = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'cis/private/pdfExport.php?xml=projektarbeitsbeurteilung.xml.php&xsl=Projektbeurteilung&betreuerart_kurzbz='+val.betreuerart_kurzbz+'&projektarbeit_id='+val.projektarbeit_id+'&person_id=' + val.betreuer_person_id
+ // const pdfExportLink2 = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'cis/private/lehre/projektbeurteilungDocumentExport.php?betreuerart_kurzbz='+val.betreuerart_kurzbz+'&projektarbeit_id='+val.projektarbeit_id+'&person_id=' + val.betreuer_person_id
+ window.open(pdfExportLink, '_blank')
+ }
+
+ } else if (cell.getColumn().getField() === "beurteilung") {
+ const val = cell.getValue()
+
+ if(val != '-') window.open(val, '_blank')
+ }
+ e.stopPropagation()
+
+ }
+ }
+ ]};
+ },
+ methods: {
+ centeredTextFormatter(cell) {
+ const val = cell.getValue()
+
+ return '' +
+ ''+val+'
'
+ },
+ tableResolve(resolve) {
+ this.tableBuiltResolve = resolve
+ },
+ loadDeadlines() {
+ this.$fhcApi.factory.lehre.fetchDeadlines(this.person_uid_prop ?? null)
+ .then(res => {
+ if(res?.data) this.setupData(res.data)
+ })
+ },
+ setupData(data) {
+ this.deadlines = data
+
+ this.deadlines.forEach(dl => {
+ dl.student = (dl.stud_titelpre ? (dl.stud_titelpre + ' ') :'') + dl.stud_vorname + ' ' + dl.stud_nachname + (dl.stud_titelpost ? (' ' + dl.stud_titelpost) :'')
+ dl.fixterminstring = dl.fixtermin ? this.$p.t('abgabetool/c4yes') : this.$p.t('abgabetool/c4no')
+ })
+
+ this.$refs.deadlineTable.tabulator.setColumns(this.deadlineTableOptions.columns)
+ this.$refs.deadlineTable.tabulator.setData(this.deadlines);
+ },
+ handleUuidDefined(uuid) {
+ this.tabulatorUuid = uuid
+ },
+ calcMaxTableHeight() {
+ const tableID = this.tabulatorUuid ? ('-' + this.tabulatorUuid) : ''
+ const tableDataSet = document.getElementById('filterTableDataset' + tableID);
+ if(!tableDataSet) return
+ const rect = tableDataSet.getBoundingClientRect();
+
+ this.deadlineTableOptions.height = window.visualViewport.height - rect.top
+ this.$refs.deadlineTable.tabulator.setHeight(this.deadlineTableOptions.height)
+ },
+ async setupMounted() {
+ this.tableBuiltPromise = new Promise(this.tableResolve)
+ await this.tableBuiltPromise
+
+ this.loadDeadlines()
+ this.calcMaxTableHeight()
+ }
+ },
+ watch: {
+
+ },
+ computed: {
+
+ },
+ created() {
+
+ },
+ mounted() {
+ this.setupMounted()
+ },
+ template: `
+ {{$p.t('abgabetool/deadlinesTitle')}} {{ fullName ? ('-' + fullName) : ''}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- {{dayText.tag}}
- {{dayText.datum}}
-
-
-
-
-
-
-
-
-
-
-
-
- {{hourPositionTime}}
-
-
- {{curTime}}
-
-
-
- {{ $p.t('lehre/noLvFound') }}
-
-
-
-
-
- {{hour}}:00
-
-
-
-
-
-
-
-
-
-
-
- this is a slot placeholder
-
-
-
-
-
- this is a slot placeholder
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this is a slot placeholder
-This is an slot placeholder
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ emptyMessageDetails }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{dayText[day]}}
-
-
- {{week.no}}
-
- {{day.getDate()}}
-
-
-
-
-
-
-
-
- this is a placeholder which means that no template was passed to the Calendar Page slot
-
-
-
-
-
-
-
-
-
-
-
- {{dayText[day]?.tag}}
- {{dayText[day]?.datum}}
-
-
-
-
-
-
-
- {{hourPositionTime}}
-
-
-
-
-
- {{hour}}:00
-
-
-
-
-
-
- {{curTime}}
-
-
-
-
-
-
- this is a placeholder which means that no template was passed to the Calendar Page slot
-
-
-
-
-
-
+ {{ $p.t('lehre/noLvFound') }}
+
+
+
+
+
-
-
- {{$p.t('abgabetool/c4abgabeMitarbeiterbereich')}}
+ + +
+
+
+
+ {{projektarbeit?.student}}
+{{projektarbeit?.titel}}
+{{projektarbeit?.zweitbegutachter}}
+
+
+
+
+
+
+
+
+
+ Kein Endupload vorhanden!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4fixtermin')}}
+ {{$p.t('abgabetool/c4zieldatum')}}
+ {{$p.t('abgabetool/c4abgabetyp')}}
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+ {{$p.t('abgabetool/c4abgabedatum')}}
+
+
+
+ keine Termine gefunden!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ termin.abgabedatum?.split("-").reverse().join(".") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4abgabeStudentenbereich')}}
+
+
+ {{projektarbeit?.betreuer}}
+{{projektarbeit?.titel}}
+
+
+
+
+ {{$p.t('abgabetool/c4fixtermin')}}
+ {{$p.t('abgabetool/c4zieldatum')}}
+ {{$p.t('abgabetool/c4abgabetyp')}}
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+ {{$p.t('abgabetool/c4abgabedatum')}}
+
+ {{$p.t('abgabetool/c4fileupload')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ termin.bezeichnung }}
+
+
+
+
+ {{ termin.abgabedatum?.split("-").reverse().join(".") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4enduploadZusatzdaten')}}
+
+
+
+
+ Student UID: {{ projektarbeit?.student_uid}}
+ +
+
+
+
+
+ Titel: {{ projektarbeit?.titel }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4Sprache')}}
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4schlagwoerterGer')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4schlagwoerterEng')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4abstractGer')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4abstractEng')}}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4seitenanzahl')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $p.t('abgabetool/c4gelesenUndAkzeptiert') }}
+
+
+
+
+ '+val+'
'+val+'
+ {{ $p.t('abgabetool/neueTerminserie') }}
+
+
+
+
+
+
+ {{$p.t('abgabetool/c4zieldatum')}}
+
+
+ {{$p.t('abgabetool/c4abgabetyp')}}
+
+
+ {{$p.t('abgabetool/c4abgabekurzbz')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$p.t('abgabetool/abgabetoolTitle')}}
++
+ {{ $p.t('abgabetool/currentlySaving') }}
+
+
+ {{ $p.t('abgabetool/currentlyLoading') }}
+
+
+
+
+
+
+ '+val+'
{{$p.t('abgabetool/abgabetoolTitle')}}
++ +
+
+
+ '+val+'
No content is available to display
`, }; diff --git a/public/js/components/Cis/Cms/Content_types/General.js b/public/js/components/Cis/Cms/Content_types/General.js index 692843e3e..c57ccd8ca 100644 --- a/public/js/components/Cis/Cms/Content_types/General.js +++ b/public/js/components/Cis/Cms/Content_types/General.js @@ -85,26 +85,36 @@ export default { .then(() => { Axios.get(el.href) .then((res) => { - // TODO(chris): check for success then show message and/or reload - location = location; + // TODO(chris): check for success then show message and/or reload + location = location; }) .catch((err) => console.error("ERROR:", err)); }) .catch(() => {}); }); }); - document.querySelectorAll("#cms [data-href]").forEach((el) => { + document.querySelectorAll("#cms [data-href]").forEach((el) => { el.href = el.dataset.href.replace( - /^ROOT\//, - FHC_JS_DATA_STORAGE_OBJECT.app_root + /^ROOT\//, + FHC_JS_DATA_STORAGE_OBJECT.app_root ); - }); + }); - document.querySelectorAll("[href]").forEach((element) => { - let orignal_href = element.getAttribute("href"); - let new_href = replaceRelativeLegacyLink(orignal_href); - element.href = new_href; - }); + document.querySelectorAll("[href]").forEach((element) => { + let orignal_href = element.getAttribute("href"); + let new_href = replaceRelativeLegacyLink(orignal_href); + element.href = new_href; + }); + + document.querySelectorAll("[style*=background-color]").forEach((element) => { + if (element.style.backgroundColor == "rgb(255, 255, 255)"){ + element.style.backgroundColor = "var(--fhc-background)"; + } + if(element.querySelector("*[style*=background-color]")){ + element.style.backgroundColor = "var(--fhc-tertiary)"; + } + }); + }, template: /*html*/ ` diff --git a/public/js/components/Cis/Cms/Content_types/News_content.js b/public/js/components/Cis/Cms/Content_types/News_content.js new file mode 100644 index 000000000..a4eacd332 --- /dev/null +++ b/public/js/components/Cis/Cms/Content_types/News_content.js @@ -0,0 +1,142 @@ +import { replaceRelativeLegacyLink } from "../../../../helpers/LegacyLinkReplaceHelper.js" +export default { + name: "GeneralComponent", + props:{ + content:{ + type:String, + required:true, + }, + }, + methods: { + sanitizeLegacyTables(table) { + + // find nested tables and replace with p element + const tt = table.querySelectorAll('table') + tt.forEach(t => { + const textContent = t.textContent.trim(); + const pElement = document.createElement('p'); + pElement.textContent = textContent; + t.parentNode.replaceChild(pElement, t); + }) + + // find unordered lists, traverse li childs and replace with p element -> more readable than 1 p tag for ul + const ul = table.querySelectorAll('ul') + ul.forEach(u => { + Array.from(u.children).forEach(li => { + const p = document.createElement('p'); + p.textContent = li.textContent + u.parentNode.appendChild(p) + }) + u.parentNode.removeChild(u) + + }) + + // find bare text nodes and put into p element + const td = Array.from(table.querySelectorAll('td')).filter(el => el.scrollWidth > 100) + td.forEach(element => { + if (element.firstChild?.nodeType === Node.TEXT_NODE && element.firstChild.length > 10) { + const p = document.createElement('p'); + p.appendChild(element.firstChild) + element.appendChild(p); + } + }); + + // flatten nested th elements + const ths = Array.from(table.querySelectorAll('th')) + ths.forEach(th => { + + if(th.children.length > 1) { + th.innerHTML = Array.from(th.childNodes).find(cn => cn.textContent).textContent + } + }) + + // let p elements wrap on overflow + const p = table.querySelectorAll('p') + p.forEach(p => { + p.style.setProperty('word-wrap', 'break-word'); + p.style.setProperty('white-space', 'normal'); + p.style.setProperty('max-width', '400px'); + }) + } + }, + mounted(){ + // replaces the tablesorter with the tabulator + let tables = Array.from(document.getElementsByClassName("tablesorter")); + + tables.forEach((table, index) => { + this.sanitizeLegacyTables(table) + + new Tabulator(table, { + index: index, + layout: "fitDataFill", + + columnDefaults: { + formatter: "html", + resizable: true, + minWidth: "100px" + } + }) + }) + + document.querySelectorAll("#cms [data-confirm]").forEach((el) => { + el.addEventListener("click", (evt) => { + evt.preventDefault(); + BsConfirm.popup(el.dataset.confirm) + .then(() => { + Axios.get(el.href) + .then((res) => { + // TODO(chris): check for success then show message and/or reload + location = location; + }) + .catch((err) => console.error("ERROR:", err)); + }) + .catch(() => {}); + }); + }); + document.querySelectorAll("#cms [data-href]").forEach((el) => { + el.href = el.dataset.href.replace( + /^ROOT\//, + FHC_JS_DATA_STORAGE_OBJECT.app_root + ); + }); + + document.querySelectorAll("[href]").forEach((element) => { + let orignal_href = element.getAttribute("href"); + let new_href = replaceRelativeLegacyLink(orignal_href); + element.href = new_href; + }); + + document.querySelectorAll("[style*=background-color]").forEach((element) => { + if (element.style.backgroundColor == "rgb(255, 255, 255)"){ + element.style.backgroundColor = "var(--fhc-background)"; + } + if(element.querySelector("*[style*=background-color]")){ + element.style.backgroundColor = "var(--fhc-tertiary)"; + } + }); + + Vue.nextTick(() => { + document.querySelectorAll(".card-header").forEach((el) => { + el.classList.add("fhc-primary"); + }); + document.querySelectorAll(".row").forEach((el) => { + el.classList.add("w-100"); + el.classList.add("align-items-center"); + + }); + document.querySelectorAll(".row h2").forEach((el) => { + el.classList.add("mb-0"); + }); + + }) + + }, + template: /*html*/ ` + +
+
+
Content was not found
+ `, + }; + \ No newline at end of file diff --git a/public/js/components/Cis/Cms/News.js b/public/js/components/Cis/Cms/News.js index d9c00bc67..bf17666a2 100644 --- a/public/js/components/Cis/Cms/News.js +++ b/public/js/components/Cis/Cms/News.js @@ -58,6 +58,20 @@ export default { FHC_JS_DATA_STORAGE_OBJECT.app_root ); }); + Vue.nextTick(()=>{ + document.querySelectorAll(".card-header").forEach((el) => { + el.classList.add("fhc-primary"); + }); + document.querySelectorAll(".row").forEach((el) => { + el.classList.add("w-100"); + el.classList.add("align-items-center"); + + }); + document.querySelectorAll(".row h2").forEach((el) => { + el.classList.add("mb-0"); + }); + + }) }); }, loadNewPageContent(data) { @@ -66,6 +80,7 @@ export default { .then(res => res.data) .then(result => { this.content = result; + }); } }, @@ -80,11 +95,11 @@ export default { }); }, template: /*html*/ ` -News
+News
+
diff --git a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
index 01ac2cd83..aa2438044 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
@@ -28,16 +28,16 @@ components:{
StudiengangVertretung,
},
template:/*html*/`
-
+
-
+
{{$p.t('lehre','studiengang')}}:
{{studiengang?.bezeichnung}}{{$p.t('lehre','studiensemester')}}:
@@ -74,6 +74,7 @@ template:/*html*/`
-
+
+
![mitarbeiter_foto]()
-
-
-
{{fullname}}
+-
-
-
+
`,
diff --git a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
index abb476c19..2914919a1 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
@@ -5,14 +5,14 @@ export default {
showBezeichnung:Boolean,
},
template:/*html*/`
-
+
+
-
+
- +
- {{phone.number}} + +
- +
- {{ort}} + +
- +
- +
+
![Logo]()
-
+
{{title}}
- - + + {{vertretungFormatedName(vertretung,false)}}
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js new file mode 100644 index 000000000..2fbac0e3a --- /dev/null +++ b/public/js/components/Cis/LvPlan/LvPlan.js @@ -0,0 +1,148 @@ +import FhcCalendar from "../../Calendar/LvPlan.js"; + +import ApiLvPlan from '../../../api/factory/lvPlan.js'; +import ApiAuthinfo from '../../../api/factory/authinfo.js'; + +export const DEFAULT_MODE_LVPLAN = 'Week' + +export default { + name: 'LvPlan', + components: { + FhcCalendar + }, + props: { + viewData: Object, // NOTE(chris): this is inherited from router-view + propsViewData: Object + }, + data() { + const now = luxon.DateTime.now().setZone(this.viewData.timezone); + return { + studiensemester_kurzbz: null, + studiensemester_start: null, + studiensemester_ende: null, + uid: null, + lv: null + }; + }, + computed:{ + currentDay() { + return this.propsViewData?.focus_date || luxon.DateTime.now().setZone(this.viewData.timezone).toISODate(); + }, + currentMode() { + return this.propsViewData?.mode || DEFAULT_MODE_LVPLAN; + }, + downloadLinks() { + if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid) + return false; + + const opts = { zone: this.viewData.timezone }; + const start = luxon.DateTime + .fromISO(this.studiensemester_start, opts) + .toUnixInteger(); + const ende = luxon.DateTime + .fromISO(this.studiensemester_ende, opts) + .toUnixInteger(); + + const download_link = FHC_JS_DATA_STORAGE_OBJECT.app_root + + 'cis/private/lvplan/stpl_kalender.php' + + '?type=student' + + '&pers_uid=' + this.uid + + '&begin=' + start + + '&ende=' + ende; + + return [ + { title: "excel", icon: 'fa-solid fa-file-excel', link: download_link + '&format=excel' }, + { title: "csv", icon: 'fa-solid fa-file-csv', link: download_link + '&format=csv' }, + { title: "ical1", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=1&target=ical' }, + { title: "ical2", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=2&target=ical' } + ]; + } + }, + methods: { + handleChangeDate(day, newMode) { + return this.handleChangeMode(newMode, day); + }, + handleChangeMode(newMode, day) { + const mode = newMode[0].toUpperCase() + newMode.slice(1) + const focus_date = day.toISODate(); + + this.$router.push({ + name: "LvPlan", + params: { + mode, + focus_date, + lv_id: this.propsViewData?.lv_id ?? null + } + }); + }, + updateRange(rangeInterval) { + this.$api + .call(ApiLvPlan.studiensemesterDateInterval( + rangeInterval.end.startOf('week').toISODate() + )) + .then(res => { + this.studiensemester_kurzbz = res.data.studiensemester_kurzbz; + this.studiensemester_start = res.data.start; + this.studiensemester_ende = res.data.ende; + }); + }, + getPromiseFunc(start, end) { + return [ + this.$api.call(ApiLvPlan.LvPlanEvents(start.toISODate(), end.toISODate(), this.propsViewData.lv_id)), + this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate())) + ]; + } + }, + created() { + this.$api + .call(ApiAuthinfo.getAuthUID()) + .then(res => { + this.uid = res.data.uid; + }); + }, + template: /*html*/` +
+
+
+
+
+
`
+};
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index cada49636..ee1b671e6 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -1,7 +1,7 @@
import CisMenuEntry from "./Menu/Entry.js";
import FhcSearchbar from "../searchbar/searchbar.js";
-import CisSprachen from "./Sprachen.js";
-
+import CisSprachen from "./Sprachen.js"
+import ThemeSwitch from "./ThemeSwitch.js";
import ApiCisMenu from '../../api/factory/cis/menu.js';
export default {
@@ -9,6 +9,7 @@ export default {
CisMenuEntry,
FhcSearchbar,
CisSprachen,
+ ThemeSwitch,
},
props: {
rootUrl: String,
@@ -26,6 +27,7 @@ export default {
url:null,
urlMatchRankings:[],
navUserDropdown:null,
+ menuOpen:true,
};
},
provide(){
@@ -36,6 +38,13 @@ export default {
}
},
computed:{
+ menuCollapseAriaLabel(){
+ if(this.menuOpen){
+ return this.$p.t('global', 'collapseMenu');
+ }else{
+ return this.$p.t('global', 'extendMenu');
+ }
+ },
highestMatchingUrlCount(){
// gets the hightest ranking inside the array
let highestMatch = Math.max(...this.urlMatchRankings);
@@ -97,7 +106,7 @@ export default {
this.fetchMenu();
},
mounted(){
- this.$p.loadCategory(['ui', 'global'])
+ this.$p.loadCategory(['ui', 'global', 'profilUpdate'])
this.navUserDropdown = new bootstrap.Collapse(this.$refs.navUserDropdown,{
toggle: false
});
@@ -106,31 +115,36 @@ export default {
- + {{ $p.t('lehre/stundenplan') }} + + {{ studiensemester_kurzbz }} + + + {{ $p.user_language.value === 'German' ? lv?.bezeichnung : lv?.bezeichnung_english }} + +
++
+
+
+
+
+
-
+
+ ![Corporate Identity Logo]()
+
+
+