+
diff --git a/public/js/components/Betriebsmittel/Betriebsmittel.js b/public/js/components/Betriebsmittel/Betriebsmittel.js
index 95678d8dd..6d976a1fa 100644
--- a/public/js/components/Betriebsmittel/Betriebsmittel.js
+++ b/public/js/components/Betriebsmittel/Betriebsmittel.js
@@ -137,8 +137,6 @@ export default {
layout: 'fitColumns',
layoutColumnsOnNewData: false,
height: '550',
- selectableRangeMode: 'click',
- selectable: true,
persistenceID: 'core-betriebsmittel'
},
tabulatorEvents: [
@@ -292,12 +290,6 @@ export default {
this.formData.anmerkung = null;
this.formData.beschreibung = null;
this.statusNew = true;
- },
- //helper function: workaround to trigger validation if input is not a number
- normalizeKaution() {
- if (this.formData.kaution === null || this.formData.kaution === '') {
- this.formData.kaution = 'xxx'
- }
}
},
created() {
@@ -317,6 +309,7 @@ export default {
table-only
:side-menu="false"
reload
+ :reload-btn-infotext="this.$p.t('table', 'reload')"
new-btn-show
:new-btn-label="this.$p.t('ui', 'betriebsmittel')"
@click:new="actionNewBetriebsmittel"
@@ -407,10 +400,9 @@ export default {
diff --git a/public/js/components/Betriebsmittel/Betriebsmittel.js b/public/js/components/Betriebsmittel/Betriebsmittel.js
index 95678d8dd..6d976a1fa 100644
--- a/public/js/components/Betriebsmittel/Betriebsmittel.js
+++ b/public/js/components/Betriebsmittel/Betriebsmittel.js
@@ -137,8 +137,6 @@ export default {
layout: 'fitColumns',
layoutColumnsOnNewData: false,
height: '550',
- selectableRangeMode: 'click',
- selectable: true,
persistenceID: 'core-betriebsmittel'
},
tabulatorEvents: [
@@ -292,12 +290,6 @@ export default {
this.formData.anmerkung = null;
this.formData.beschreibung = null;
this.statusNew = true;
- },
- //helper function: workaround to trigger validation if input is not a number
- normalizeKaution() {
- if (this.formData.kaution === null || this.formData.kaution === '') {
- this.formData.kaution = 'xxx'
- }
}
},
created() {
@@ -317,6 +309,7 @@ export default {
table-only
:side-menu="false"
reload
+ :reload-btn-infotext="this.$p.t('table', 'reload')"
new-btn-show
:new-btn-label="this.$p.t('ui', 'betriebsmittel')"
@click:new="actionNewBetriebsmittel"
@@ -407,10 +400,9 @@ export default {
@@ -434,6 +426,7 @@ export default {
v-model="formData.ausgegebenam"
auto-apply
:enable-time-picker="false"
+ text-input
format="dd.MM.yyyy"
preview-format="dd.MM.yyyy"
:teleport="true"
@@ -449,6 +442,7 @@ export default {
v-model="formData.retouram"
auto-apply
:enable-time-picker="false"
+ text-input
format="dd.MM.yyyy"
preview-format="dd.MM.yyyy"
:teleport="true"
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..36d9877da
--- /dev/null
+++ b/public/js/components/Calendar/Base.js
@@ -0,0 +1,311 @@
+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();
+ }
+ },
+ beforeUnmount() {
+ this.hideEventModal();
+ },
+ 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) : ''}}
+
+
+ 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}}
+
-
-
-
+
+
+
+ - {{phone.number}}
+
+ - {{ort}}
+
+
+
`,
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*/`
-
+
{{title}}
-
-
+
+
{{vertretungFormatedName(vertretung,false)}}
diff --git a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
new file mode 100644
index 000000000..4364a5df4
--- /dev/null
+++ b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
@@ -0,0 +1,107 @@
+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: 'LvPlanLehrveranstaltung',
+ components: {
+ FhcCalendar
+ },
+ props: {
+ viewData: Object, // NOTE(chris): this is inherited from router-view
+ propsViewData: Object
+ },
+ data() {
+ return {
+ lv: null
+ };
+ },
+ computed:{
+ currentDay() {
+ if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+ return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+ return this.propsViewData?.focus_date;
+ },
+ currentMode() {
+ if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+ return DEFAULT_MODE_LVPLAN;
+ return this.propsViewData?.mode;
+ },
+ currentLv() {
+ if (isNaN(parseInt(this.propsViewData?.lv_id)))
+ return null;
+ return this.propsViewData.lv_id;
+ },
+ lvTitle() {
+ if (this.currentLv === null)
+ return '';
+ if (!this.lv)
+ return '';
+
+ if (this.$p.user_language.value === 'English')
+ return this.lv.bezeichnung_english;
+
+ return this.lv.bezeichnung;
+ }
+ },
+ 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.currentLv
+ }
+ });
+ },
+ getPromiseFunc(start, end) {
+ return [
+ this.$api.call(ApiLvPlan.eventsLv(this.propsViewData.lv_id, start.toISODate(), end.toISODate())),
+ this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+ ];
+ }
+ },
+ created() {
+ if (this.currentLv === null)
+ return;
+ this.$api
+ .call(ApiLvPlan.getLv(this.propsViewData?.lv_id))
+ .then(res => {
+ this.lv = res.data;
+ });
+ },
+ template: /*html*/`
+
+
+ {{ $p.t('lehre/stundenplan') }}
+
+ {{ lvTitle }}
+
+
+
+
+ {{ $p.t('lehre/noLvFound') }}
+
+
+ {{ $p.t('lehre/stundenplan') }}
+
+ {{ studiensemester_kurzbz }}
+
+
+ {{ $p.user_language.value === 'German' ? lv?.bezeichnung : lv?.bezeichnung_english }}
+
+
+
+
+
+
+
+
+ `
+};
diff --git a/public/js/components/Cis/LvPlan/Personal.js b/public/js/components/Cis/LvPlan/Personal.js
new file mode 100644
index 000000000..f6fd462da
--- /dev/null
+++ b/public/js/components/Cis/LvPlan/Personal.js
@@ -0,0 +1,155 @@
+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: 'LvPlanPersonal',
+ components: {
+ FhcCalendar
+ },
+ props: {
+ viewData: Object, // NOTE(chris): this is inherited from router-view
+ propsViewData: Object
+ },
+ data() {
+ return {
+ studiensemester_kurzbz: null,
+ studiensemester_start: null,
+ studiensemester_ende: null,
+ uid: null,
+ isMitarbeiter: false,
+ isStudent: false
+ };
+ },
+ computed:{
+ currentDay() {
+ if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+ return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+ return this.propsViewData?.focus_date;
+ },
+ currentMode() {
+ if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+ return DEFAULT_MODE_LVPLAN;
+ return this.propsViewData?.mode;
+ },
+ downloadLinks() {
+ if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+ return false;
+
+ let type = false;
+ type = this.isStudent ? 'student' : type;
+ type = this.isMitarbeiter ? 'lektor' : type;
+ if (false === type)
+ {
+ return;
+ }
+
+ 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=' + type
+ + '&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: "MyLvPlan",
+ params: {
+ mode,
+ focus_date
+ }
+ });
+ },
+ 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.eventsPersonal(start.toISODate(), end.toISODate())),
+ this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+ ];
+ }
+ },
+ created() {
+ this.$api
+ .call(ApiAuthinfo.getAuthInfo())
+ .then(res => {
+ this.uid = res.data.uid;
+ this.isMitarbeiter = res.data.isMitarbeiter;
+ this.isStudent = res.data.isStudent;
+ });
+ },
+ template: /*html*/`
+
+
+ {{ $p.t('lehre/stundenplan') }}
+
+ {{ studiensemester_kurzbz }}
+
+
+
+
+
+
+
+
+ `
+};
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index cada49636..f073d5a38 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 {
- ![Logo]()
-
+ ![Corporate Identity Logo]()
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+}
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.js b/public/js/components/Calendar/Base/Grid.js
new file mode 100644
index 000000000..c232dd955
--- /dev/null
+++ b/public/js/components/Calendar/Base/Grid.js
@@ -0,0 +1,435 @@
+import GridLine from './Grid/Line.js';
+import GridLineEvent from './Grid/Line/Event.js';
+
+import CalDnd from '../../../directives/Calendar/DragAndDrop.js';
+
+export default {
+ name: "CalendarGrid",
+ components: {
+ GridLine,
+ GridLineEvent
+ },
+ directives: {
+ CalDnd
+ },
+ inject: {
+ originalEvents: "events",
+ originalBackgrounds: "backgrounds",
+ dropAllowed: "dropAllowed"
+ },
+ provide() {
+ return {
+ flipAxis: Vue.computed(() => this.flipAxis),
+ axisRow: Vue.computed(() => this.axisRow)
+ };
+ },
+ props: {
+ axisMain: {
+ type: Array,
+ required: true,
+ validator(value) {
+ return value.every(item => item instanceof luxon.DateTime);
+ }
+ },
+ axisParts: {
+ type: Array,
+ required: true,
+ validator(value) {
+ return value.every(item =>
+ item instanceof luxon.Duration
+ || Number.isInteger(item)
+ || (
+ (
+ item.start instanceof luxon.Duration
+ || Number.isInteger(item.start)
+ ) && (
+ item.end instanceof luxon.Duration
+ || Number.isInteger(item.end)
+ )
+ )
+ );
+ }
+ },
+ flipAxis: Boolean,
+ allDayEvents: Boolean,
+ axisMainCollapsible: Boolean,
+ snapToGrid: Boolean
+ },
+ data() {
+ return {
+ dragging: false,
+ resizeObserver: null,
+ mutationObserver: null,
+ userScroll: true
+ };
+ },
+ computed: {
+ axisRow() {
+ return this.flipAxis ? 'column' : 'row';
+ },
+ axisCol() {
+ return this.flipAxis ? 'row' : 'column';
+ },
+ axisPartsWithBreaks() {
+ return this.axisParts.reduce((res, tu, index) => {
+ const start = tu.start || tu;
+ const end = tu.end;
+
+ if (res.length) {
+ const lastTuEnd = res.pop();
+ if (Array.isArray(lastTuEnd)) {
+ res.push({
+ start: lastTuEnd[0],
+ end: start,
+ index: lastTuEnd[1]
+ });
+ } else if (lastTuEnd != start) {
+ // add pause
+ res.push({
+ start: lastTuEnd,
+ end: start
+ });
+ }
+ }
+
+ if (!end) {
+ res.push([start, index]);
+ } else {
+ res.push({
+ start,
+ end,
+ index
+ });
+ res.push(end);
+ }
+ return res;
+ }, []).slice(0, -1);
+ },
+ axisPartsSave() {
+ if (!this.axisParts[this.axisParts.length - 1].end)
+ return this.axisParts.slice(0, -1);
+ return this.axisParts;
+ },
+ start() {
+ return this.axisPartsWithBreaks[0].start;
+ },
+ end() {
+ return this.axisPartsWithBreaks[this.axisPartsWithBreaks.length - 1].end;
+ },
+ ends() {
+ const ends = [];
+ const partsEnds = this.axisPartsWithBreaks
+ .filter(p => p.index !== undefined)
+ .map(p => p.end);
+ for (var date of this.axisMain)
+ for (var part of partsEnds)
+ ends.push(date.plus(part));
+
+ return ends;
+ },
+ axisMainBorders() {
+ return this.axisMain.reduce(
+ (res, curr) => res.concat([curr.plus(this.start), curr.plus(this.end)]),
+ []
+ );
+ },
+ eventsAllDay() {
+ if (!this.allDayEvents)
+ return [];
+ return this.mapIntoMainAxis(this.originalEvents.filter(event => event.orig.allDayEvent));
+ },
+ eventsNormal() {
+ if (!this.allDayEvents)
+ return this.events;
+ return this.mapIntoMainAxis(this.originalEvents.filter(event => !event.orig.allDayEvent));
+ },
+ events() {
+ return this.mapIntoMainAxis(this.originalEvents);
+ },
+ backgrounds() {
+ return this.mapIntoMainAxis(this.originalBackgrounds);
+ },
+ hasValidEvents() {
+ return this.events.find(e => e.length);
+ },
+ styleGridCols() {
+ let cols = 'repeat(' + this.axisMain.length + ', 1fr)';
+ if (this.axisMainCollapsible) {
+ if (this.hasValidEvents)
+ cols = this.events
+ .map(e => e.length
+ ? '1fr'
+ : 'var(--fhc-calendar-axis-collapsible, .5fr)')
+ .join(' ');
+ }
+ return cols;
+ },
+ styleGridRows() {
+ const gridlines = {};
+
+ this.axisPartsWithBreaks.forEach(part => {
+ let ts = part.start.toMillis();
+ if (!gridlines[ts])
+ gridlines[ts] = ['t_' + ts];
+ if (part.index !== undefined)
+ gridlines[ts].push('ps_' + part.index);
+ ts = part.end.toMillis();
+ if (!gridlines[ts])
+ gridlines[ts] = ['t_' + ts];
+ if (part.index !== undefined)
+ gridlines[ts].push('pe_' + part.index);
+ });
+
+ this.eventsNormal.forEach((events, mainIndex) => {
+ let day = this.axisMain[mainIndex];
+ events.forEach(event => {
+ if (!event.startsHere && !event.endsHere)
+ return;
+
+ if (event.startsHere) {
+ let ts = event.start.diff(day).toMillis();
+ if (!gridlines[ts])
+ gridlines[ts] = ['t_' + ts, 'e_' + ts];
+ }
+ if (event.endsHere) {
+ let ts = event.end.diff(day).toMillis();
+ if (!gridlines[ts])
+ gridlines[ts] = ['t_' + ts, 'e_' + ts];
+ }
+ });
+ });
+
+ return Object.keys(gridlines).sort((a,b) => parseInt(a)-parseInt(b)).map((start, i, keys) => {
+ let end = keys[i + 1];
+ if (!end) {
+ gridlines[start].push('end');
+ return '[' + gridlines[start].join(' ') + ']';
+ }
+ return '[' + gridlines[start].join(' ') + '] ' + (end - start) + 'fr';
+ }).join(' ');
+ }
+ },
+ methods: {
+ mapIntoMainAxis(target) {
+ const result = Array.from({length: this.axisMain.length}, () => Array());
+
+ target.forEach(event => {
+ const start = event.start || this.axisMainBorders[0].plus(-1);
+ const end = event.end || this.axisMainBorders[this.axisMainBorders.length - 1].plus(1);
+
+ for (var i = 0; i < this.axisMain.length; i++) {
+ let laneStart = this.axisMainBorders[i * 2];
+ let laneEnd = this.axisMainBorders[i * 2 + 1];
+ if (event.orig?.allDayEvent) {
+ laneStart = laneStart.startOf('day');
+ laneEnd = laneEnd.endOf('day');
+ }
+ if (start < laneEnd && end > laneStart) {
+ const startsHere = start >= laneStart;
+ const endsHere = end <= laneEnd;
+ result[i].push({
+ ...event,
+ startsHere,
+ endsHere
+ });
+ }
+ }
+ });
+
+ return result;
+ },
+
+ /* DRAG AND DROP */
+ getPageTop(el) {
+ let pageTop = el.offsetTop;
+ if (el.offsetParent)
+ pageTop += this.getPageTop(el.offsetParent);
+ return pageTop;
+ },
+ getPageLeft(el) {
+ let pageLeft = el.offsetLeft;
+ if (el.offsetParent)
+ pageLeft += this.getPageLeft(el.offsetParent);
+ return pageLeft;
+ },
+ getTimestampFromMouse(evt, dayTimestamp) {
+ let mouse, mouseFrac;
+ if (this.flipAxis) {
+ mouse = evt.pageX - this.getPageLeft(this.$refs.body) + this.$refs.main.scrollLeft;
+ mouseFrac = mouse / this.$refs.body.offsetWidth;
+ } else {
+ mouse = evt.pageY - this.getPageTop(this.$refs.body) + this.$refs.main.scrollTop;
+ mouseFrac = mouse / this.$refs.body.offsetHeight;
+ }
+
+ return dayTimestamp + this.start + Math.floor((this.end - this.start) * mouseFrac);
+ },
+
+ /* SCROLLING */
+ enableAutoScroll() {
+ if (!this.resizeObserver)
+ this.resizeObserver = new ResizeObserver(this.scrollToEarliestEvent);
+ this.resizeObserver.observe(this.$refs.body);
+
+ if (!this.mutationObserver)
+ this.mutationObserver = new MutationObserver(mutations => {
+ if (mutations.some(m => m.addedNodes.length && [].some.call(m.addedNodes, el => el.matches && el.matches('.fhc-calendar-base-grid-line-event'))))
+ this.scrollToEarliestEvent();
+ });
+ this.mutationObserver.observe(this.$refs.body, {
+ subtree: true,
+ childList: true
+ });
+
+ this.scrollToEarliestEvent();
+ },
+ disableAutoScroll() {
+ if (this.resizeObserver)
+ this.resizeObserver.disconnect();
+ this.resizeObserver = null;
+
+ if (this.mutationObserver)
+ this.mutationObserver.disconnect();
+ this.mutationObserver = null;
+ },
+ scrollToEarliestEvent() {
+ const eventElements = this.$refs.scroller.querySelectorAll('.fhc-calendar-base-grid-line-event');
+
+ let earliestEventOffset = [0, null];
+ for (var el of eventElements.values()) {
+ const top = el.offsetTop;
+ if (!earliestEventOffset[1] || top < earliestEventOffset[0])
+ earliestEventOffset = [top, el];
+ }
+
+ this.userScroll = false;
+ if (earliestEventOffset[1]) {
+ earliestEventOffset[1].scrollIntoView({ behavior: "smooth" });
+ } else {
+ this.$refs.scroller.scrollTo(0, 0);
+ }
+ }
+ },
+ beforeUnmount() {
+ this.disableAutoScroll();
+ },
+ template: /* html */`
+
+
+ `
+}
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 */`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Grid/Line/Background.js b/public/js/components/Calendar/Base/Grid/Line/Background.js
new file mode 100644
index 000000000..e87737ffc
--- /dev/null
+++ b/public/js/components/Calendar/Base/Grid/Line/Background.js
@@ -0,0 +1,72 @@
+export default {
+ name: "GridLineBackground",
+ inject: {
+ flipAxis: "flipAxis"
+ },
+ props: {
+ start: {
+ type: luxon.DateTime,
+ required: true
+ },
+ end: {
+ type: luxon.DateTime,
+ required: true
+ },
+ background: {
+ type: Object,
+ required: true,
+ validator(value) {
+ if (!value.start && !value.end)
+ return false;
+ if (value.start && !(value.start instanceof luxon.DateTime))
+ return false;
+ if (value.end && !(value.end instanceof luxon.DateTime))
+ return false;
+ return true;
+ }
+ }
+ },
+ computed: {
+ styles() {
+ if (!this.background.endsHere && !this.background.startsHere)
+ return this.background.style;
+
+ const perc = (this.end.ts - this.start.ts) / 100;
+
+ let border = {};
+ if (this.background.startsHere)
+ border[this.flipAxis ? 'left' : 'top'] = (this.background.start.diff(this.start)) / perc + '%';
+ if (this.background.endsHere)
+ border[this.flipAxis ? 'right' : 'bottom'] = (this.end.diff(this.background.end)) / perc + '%';
+
+ if (!this.background.style)
+ return border;
+
+ return [this.background.style, border];
+ },
+ classes() {
+ if (!this.background.endsHere && !this.background.startsHere)
+ return this.background.class;
+
+ const result = [];
+ if (this.background.class)
+ result.push(this.background.class);
+ if (this.background.startsHere)
+ result.push('bg-begin');
+ if (this.background.endsHere)
+ result.push('bg-end');
+ return result;
+ }
+ },
+ template: /* html */`
+
+ {{ background.label }}
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Grid/Line/Event.js b/public/js/components/Calendar/Base/Grid/Line/Event.js
new file mode 100644
index 000000000..6512d1fa1
--- /dev/null
+++ b/public/js/components/Calendar/Base/Grid/Line/Event.js
@@ -0,0 +1,57 @@
+import CalDnd from '../../../../../directives/Calendar/DragAndDrop.js';
+import CalClick from '../../../../../directives/Calendar/Click.js';
+
+export default {
+ name: "GridLineEvent",
+ directives: {
+ CalDnd,
+ CalClick
+ },
+ inject: {
+ draggableEvents: "draggableEvents",
+ mode: "mode"
+ },
+ props: {
+ event: {
+ type: Object,
+ required: true,
+ validator(value) {
+ return (value.start && value.end && value.orig);
+ }
+ }
+ },
+ computed: {
+ isHeaderOrFooter() {
+ return ['header', 'footer'].includes(this.event.orig);
+ },
+ draggable() {
+ return !this.isHeaderOrFooter && this.draggableEvents(this.event.orig, this.mode);
+ },
+ classes() {
+ const classes = [];
+ if (this.isHeaderOrFooter) {
+ classes.push('event-' + this.event.orig);
+ } else {
+ if (this.event.startsHere)
+ classes.push('event-begin');
+ if (this.event.endsHere)
+ classes.push('event-end');
+ }
+ return classes
+ }
+ },
+ 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/Base/Header/Datepicker.js b/public/js/components/Calendar/Base/Header/Datepicker.js
new file mode 100644
index 000000000..2d3237643
--- /dev/null
+++ b/public/js/components/Calendar/Base/Header/Datepicker.js
@@ -0,0 +1,116 @@
+// TODO(chris): translate aria-labels
+
+export default {
+ name: "CalendarHeaderDatepicker",
+ components: {
+ VueDatePicker
+ },
+ inject: [
+ "locale",
+ "timezone"
+ ],
+ props: {
+ date: {
+ type: luxon.DateTime,
+ required: true
+ },
+ mode: {
+ type: String,
+ required: true
+ },
+ listLength: {
+ type: Number,
+ default: 7
+ }
+ },
+ emits: [
+ "update:date"
+ ],
+ computed: {
+ convertedDate() {
+ // convert to target TZ then strip TZ Information
+ // so the datepicker can work with local times
+ return this.date.setZone(this.timezone).setZone('local', { keepLocalTime: true });
+ },
+ current() {
+ switch (this.mode) {
+ case "month":
+ return {month: this.convertedDate.month-1, year: this.convertedDate.year};
+ case "list":
+ return [this.convertedDate.startOf('day').ts, this.convertedDate.startOf('day').plus({ days: this.listLength }).ts - 1];
+ case "week":
+ return [this.convertedDate.startOf('week', { useLocaleWeeks: true }).ts, this.convertedDate.endOf('week', { useLocaleWeeks: true }).ts];
+ case "day":
+ return this.convertedDate;
+ default:
+ return null;
+ }
+ },
+ title() {
+ switch (this.mode) {
+ case "month":
+ return this.date.toLocaleString({ month: 'long', year: 'numeric' });
+ case "week":
+ var year = this.date.localWeekYear;
+ var week = this.date.toFormat('nn');
+ return this.$p.t('calendar/year_kw', { year, week });
+ case "list":
+ return this.date.toLocaleString(luxon.DateTime.DATE_FULL) + '-' + this.date.plus({ days: this.listLength - 1 }).toLocaleString(luxon.DateTime.DATE_FULL);
+ case "day":
+ return this.date.toLocaleString(luxon.DateTime.DATE_FULL);
+ default:
+ return 'View not Supported';
+ }
+ },
+ weekStart() {
+ return luxon.Info.getStartOfWeek(this.date)%7;
+ }
+ },
+ methods: {
+ update(value) {
+ let date;
+ switch (this.mode) {
+ case "month":
+ value.month++;
+ date = luxon.DateTime.fromObject(value).setZone(this.timezone, { keepLocalTime: true }).setLocale(this.locale);
+ break;
+ case "list":
+ case "week":
+ date = luxon.DateTime.fromJSDate(value[0]).setZone(this.timezone, { keepLocalTime: true }).setLocale(this.locale);
+ break;
+ case "day":
+ date = luxon.DateTime.fromJSDate(value).setZone(this.timezone, { keepLocalTime: true }).setLocale(this.locale);
+ break;
+ default:
+ return; // Don't update if the value is invalid!
+ }
+ this.$emit("update:date", date);
+ },
+ weekNumbers(date) {
+ return luxon.DateTime.fromJSDate(date, { locale: this.locale }).localWeekNumber;
+ }
+ },
+ template: /* html */`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ titleFull }}
+ {{ titleLong }}
+ {{ titleShort }}
+ {{ titleNarrow }}
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Label/Dow.js b/public/js/components/Calendar/Base/Label/Dow.js
new file mode 100644
index 000000000..4da02de64
--- /dev/null
+++ b/public/js/components/Calendar/Base/Label/Dow.js
@@ -0,0 +1,35 @@
+import CalClick from '../../../../directives/Calendar/Click.js';
+
+export default {
+ name: "LabelDow",
+ directives: {
+ CalClick
+ },
+ props: {
+ date: {
+ type: luxon.DateTime,
+ required: true
+ }
+ },
+ computed: {
+ titleLong() {
+ return this.date.toLocaleString({weekday: 'long'});
+ },
+ titleShort() {
+ return this.date.toLocaleString({weekday: 'short'});
+ },
+ titleNarrow() {
+ return this.date.toLocaleString({weekday: 'narrow'});
+ }
+ },
+ template: /* html */`
+
+ {{ titleLong }}
+ {{ titleShort }}
+ {{ titleNarrow }}
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Label/Time.js b/public/js/components/Calendar/Base/Label/Time.js
new file mode 100644
index 000000000..a7fc21ae7
--- /dev/null
+++ b/public/js/components/Calendar/Base/Label/Time.js
@@ -0,0 +1,58 @@
+export default {
+ name: "LabelTime",
+ props: {
+ part: {
+ type: [luxon.Duration, Number, Object],
+ required: true,
+ validator(value) {
+ if (value instanceof Object) {
+ if (value instanceof luxon.Duration)
+ return true;
+ let start_ok = true;
+ let end_ok = true;
+ if (value.start) {
+ start_ok = (
+ value.start instanceof luxon.Duration
+ || Number.isInteger(value.start)
+ );
+ }
+ if (value.end) {
+ end_ok = (
+ value.end instanceof luxon.Duration
+ || Number.isInteger(value.end)
+ );
+ }
+ return start_ok && end_ok;
+ }
+ return true;
+ }
+ }
+ },
+ computed: {
+ sanitizedTimestamps() {
+ return this.part.start || this.part.end ? this.part : { start: this.part };
+ },
+ start() {
+ if (!this.sanitizedTimestamps.start)
+ return null;
+ return this.formatTime(this.sanitizedTimestamps.start);
+ },
+ end() {
+ if (!this.sanitizedTimestamps.end)
+ return null;
+ return this.formatTime(this.sanitizedTimestamps.end);
+ }
+ },
+ methods: {
+ formatTime(date) {
+ return date.toISOTime({ suppressSeconds: true });
+ }
+ },
+ template: `
+
+ {{ start }}
+ -
+ {{ end }}
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Label/Week.js b/public/js/components/Calendar/Base/Label/Week.js
new file mode 100644
index 000000000..76849f2c6
--- /dev/null
+++ b/public/js/components/Calendar/Base/Label/Week.js
@@ -0,0 +1,38 @@
+import CalClick from '../../../../directives/Calendar/Click.js';
+
+export default {
+ name: "LabelWeek",
+ directives: {
+ CalClick
+ },
+ props: {
+ date: {
+ type: luxon.DateTime,
+ required: true
+ }
+ },
+ computed: {
+ weeks() {
+ const firstDay = this.date.startOf('week', { useLocaleWeeks: true });
+ const lastDay = this.date.endOf('week', { useLocaleWeeks: true });
+
+ const weeks = [
+ { number: firstDay.localWeekNumber, year: firstDay.localWeekYear },
+ { number: lastDay.localWeekNumber, year: lastDay.localWeekYear }
+ ];
+ if (weeks[0].number == weeks[1].number)
+ weeks.pop();
+ return weeks;
+ }
+ },
+ template: `
+
+
+ {{ week.number }}
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Base/Slider.js b/public/js/components/Calendar/Base/Slider.js
new file mode 100644
index 000000000..192eccd5f
--- /dev/null
+++ b/public/js/components/Calendar/Base/Slider.js
@@ -0,0 +1,129 @@
+export default {
+ name: 'CalendarSlider',
+ inject: {
+ time: {
+ from: "sliderTime",
+ default: ".3s"
+ }
+ },
+ emits: [
+ 'slid'
+ ],
+ data() {
+ return {
+ target: 0,
+ extrasAfter: 0,
+ extrasBefore: 0,
+ running: false,
+ promiseResolve: null
+ }
+ },
+ computed: {
+ itemsAfter() {
+ return [...Array(this.extrasAfter)].map((i, k) => 1+k);
+ },
+ itemsBefore() {
+ return [...Array(this.extrasBefore)].map((i, k) => k-this.extrasBefore);
+ },
+ styleSlider() {
+ const style = {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%'
+ };
+ if (this.running) {
+ style.left = (-this.target * 100) + '%';
+ style.transition = 'left ' + this.time + ' ease-in-out';
+ }
+ return style;
+ },
+ styleBefore() {
+ return {
+ position: 'absolute',
+ top: 0,
+ height: '100%',
+ display: 'flex',
+ right: '100%',
+ width: (this.extrasBefore * 100) + '%'
+ };
+ },
+ styleAfter() {
+ return {
+ position: 'absolute',
+ top: 0,
+ height: '100%',
+ display: 'flex',
+ left: '100%',
+ width: (this.extrasAfter * 100) + '%'
+ };
+ }
+ },
+ methods: {
+ prevPage() {
+ return this.slidePages(-1);
+ },
+ nextPage() {
+ return this.slidePages(1);
+ },
+ slidePages(dir) {
+ return new Promise(resolve => {
+ this.promiseResolve = resolve;
+ this.running = true;
+ const newTarget = this.target + dir;
+ if (newTarget > 0) {
+ if (this.extrasAfter < newTarget)
+ this.extrasAfter = newTarget;
+ } else if (newTarget < 0) {
+ if (-this.extrasBefore > newTarget)
+ this.extrasBefore = -newTarget;
+ }
+ this.target = newTarget;
+ });
+ },
+ endSlide() {
+ if (this.promiseResolve) {
+ this.promiseResolve(this.target);
+ this.promiseResolve = null;
+ }
+ this.$emit('slid', this.target);
+ this.running = false;
+ this.target = 0;
+ this.extrasAfter = this.extrasBefore = 0;
+ }
+ },
+ template: /* html */`
+
+ `
+}
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
deleted file mode 100644
index cd935b2ad..000000000
--- a/public/js/components/Calendar/Calendar.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import CalendarMonth from './Month.js';
-import CalendarMonths from './Months.js';
-import CalendarYears from './Years.js';
-import CalendarWeek from './Week.js';
-import CalendarWeeks from './Weeks.js';
-import CalendarDay from './Day.js';
-import CalendarMinimized from './Minimized.js';
-import CalendarDate from '../../composables/CalendarDate.js';
-import CalendarDates from '../../composables/CalendarDates.js';
-
-const todayDate = new Date(new Date().setHours(0, 0, 0, 0));
-const today = todayDate.getTime()
-
-export default {
- components: {
- CalendarMonth,
- CalendarMonths,
- CalendarYears,
- CalendarWeek,
- CalendarWeeks,
- CalendarDay,
- CalendarMinimized,
- },
- provide() {
- return {
- today,
- todayDate,
- date: this.date,
- focusDate: this.focusDate,
- size: Vue.computed({ get: () => this.size }),
- containerHeight: Vue.computed({ get: () => this.containerHeight }),
- containerWidth: Vue.computed({ get: () => this.containerWidth }),
-
- events: Vue.computed(() => this.eventsPerDay),
- filteredEvents: Vue.computed(() => this.filteredEvents),
- minimized: Vue.computed({ get: () => this.minimized, set: v => this.$emit('update:minimized', v) }),
- showWeeks: this.showWeeks,
- noMonthView: this.noMonthView,
- noWeekView: this.noWeekView,
- eventsAreNull: Vue.computed(() => this.events === null),
- mode: Vue.computed(()=>this.mode),
- selectedEvent: Vue.computed(() => this.selectedEvent),
- setSelectedEvent: (event)=>{this.selectedEvent = event;},
- };
- },
- props: {
- events: Array,
- initialDate: {
- type: [Date, String],
- default: new Date()
- },
- showWeeks: {
- type: Boolean,
- default: true
- },
- initialMode: {
- type: String,
- default: 'month'
- },
- minimized: Boolean,
- noWeekView: Boolean,
- noMonthView: Boolean
- },
- watch:{
- mode(newVal) {
- this.$emit('change:mode', newVal)
- },
- selectedEvent:{
- handler(newSelectedEvent) {
- this.$emit('selectedEvent', newSelectedEvent);
- },
- immediate: true,
- },
- // scroll to the first event if the html element was found
- scrollTime({focusDate,scrollTime}){
- // return early if the scrollTime is not set
- if(!scrollTime) return;
- // scroll the Stundenplan to the closest event
- Vue.nextTick(()=>{
- let previousScrollAnchor = document.getElementById('scroll' + (scrollTime - 1) + this.focusDate.d + this.focusDate.w)
- let scrollAnchor = document.getElementById('scroll' + scrollTime + this.focusDate.d + this.focusDate.w);
- if (previousScrollAnchor) {
- previousScrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
- }
- else {
- if (scrollAnchor) {
- scrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
- }
- }
- });
- },
- },
- emits: [
- 'select:day',
- 'select:event',
- 'change:range',
- 'update:minimized',
- 'selectedEvent',
- 'change:offset'
- ],
- data() {
- return {
- header: '',
- prevMode: null,
- currMode: null,
- date: new CalendarDate(),
- focusDate: new CalendarDate(),
- size: 0,
- containerWidth: 0,
- containerHeight: 0,
- selectedEvent:null,
- }
- },
- computed: {
- sizeClass() {
- // mainly determines calendar font-size
- return 'fhc-calendar-' + ['xs', 'sm', 'md', 'lg'][this.size];
- },
- mode: {
- get() { return this.minimized ? 'minimized' : this.currMode; },
- set(v) {
- if (!v && this.prevMode) {
- this.currMode = this.prevMode;
- this.prevMode = null;
- } else {
- this.prevMode = this.currMode;
- this.currMode = v;
- }
- }
- },
- eventsPerDay() {
- if (!this.events)
- return {};
- return this.events.reduce((result, event) => {
- let days = Math.ceil((event.end - event.start) / 86400000) || 1;
- while (days-- > 0) {
- let day = (new Date(event.start.getFullYear(), event.start.getMonth(), event.start.getDate() + days)).toDateString();
- if (!result[day])
- result[day] = [];
- result[day].push(event);
- }
- return result;
- }, {});
- },
- // returns the hour of the earliest event, used to scroll to the events in the calendar (week / day view)
- scrollTime() {
- // return the first beginning time of the filtered events
- if(this.filteredEvents && Array.isArray(this.filteredEvents) && this.filteredEvents.length > 0)
- {
- let scrollTime = parseInt(this.filteredEvents.sort((a, b) => parseInt(a.beginn) - parseInt(b.beginn))[0].beginn);
- // to ensure that the scrollTime watcher triggers even if the scrollTime doesn't change, it returns both the scrollTime and the focusDate
- return { focusDate: this.focusDate, scrollTime };
- }
- // there is no event that matches the current view mode constraints
- else
- {
- return { focusDate: this.focusDate, scrollTime: null };
- }
- },
- // filters the events based on the current calendar view mode
- // week view - filter events based on their week
- // day view - filter events based on their day and week
- // month view - does not filter the events
- filteredEvents: function(){
- if (this.events && Array.isArray(this.events) && this.events.length > 0) {
- let filteredEvents = this.events.filter(event => {
- let eventDate = new CalendarDate(new Date(event.datum));
- if (this.mode == 'week' || this.mode == 'Week')
- {
- // week view filters the elements only for the same week
- return this.focusDate.w == eventDate.w;
- }
- else if (this.mode == 'day' || this.mode == 'Day')
- {
- // day view filters the elements for the same day and the same week
- return this.focusDate.d == eventDate.d && this.focusDate.w == eventDate.w;
- }
- else
- {
- // returns all the events, does not filter the events
- return true;
- }
- })
-
- return filteredEvents;
- }
- else
- {
- return null;
- }
- },
- },
- methods: {
- setMode(mode) {
- this.mode = mode
- },
- handleInput(day) {
- this.$emit(day[0], day[1]);
- },
- },
- created() {
- const initMode = this.initialMode.toLowerCase()
- const allowedInitialModes = ['day'];
- if (!this.noWeekView)
- allowedInitialModes.push('week');
- if (!this.noMonthView)
- allowedInitialModes.push('month');
- this.mode = allowedInitialModes[allowedInitialModes.indexOf(initMode)] || allowedInitialModes.pop();
- this.date.set(new Date(this.initialDate));
- this.focusDate.set(this.date);
- },
- mounted() {
- if (this.$refs.container) {
- new ResizeObserver(entries => {
- for (const entry of entries) {
- const w = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;
- const h = entry.contentBoxSize ? entry.contentBoxSize[0].blockSize : entry.contentRect.height;
-
- // https://getbootstrap.com/docs/5.0/layout/breakpoints/
- // bootstrap breakpoints watch window size and this function monitors container size of calendar itself.
- // calendar is using bootstrap breakpoints which influence layout, which retriggers this function
- // -> some width constellations will loop so we dont use values around bs5 breakpoints
- // ['xs', 'sm', 'md', 'lg'][this.size]
- if (w >= 600)
- this.size = 3;
- else if (w >= 350)
- this.size = 2;
- else if (w >= 250)
- this.size = 1;
- else
- this.size = 0;
-
- this.containerWidth = w
- this.containerHeight = h
- }
- }).observe(this.$refs.container);
- }
- },
- unmounted(){
- CalendarDates.cleanup();
- },
- 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*/`
-
-
-
-`
-}
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*/`
-
-
-
-
-
-
-
-
-
-
- {{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
-
-
-
-
-
-
`
-}
\ No newline at end of file
diff --git a/public/js/components/Calendar/LvPlan.js b/public/js/components/Calendar/LvPlan.js
new file mode 100644
index 000000000..e0e918f01
--- /dev/null
+++ b/public/js/components/Calendar/LvPlan.js
@@ -0,0 +1,164 @@
+import FhcCalendar from "./Base.js";
+
+import ApiLvPlan from '../../api/factory/lvPlan.js';
+
+import { useEventLoader } from '../../composables/EventLoader.js';
+
+import ModeDay from './Mode/Day.js';
+import ModeWeek from './Mode/Week.js';
+import ModeMonth from './Mode/Month.js';
+
+export default {
+ name: "CalendarLvPlan",
+ components: {
+ FhcCalendar
+ },
+ inject: [
+ "renderers"
+ ],
+ props: {
+ timezone: {
+ type: String,
+ required: true
+ },
+ date: {
+ type: [Date, String, Number, luxon.DateTime],
+ default: luxon.DateTime.local()
+ },
+ mode: {
+ type: String,
+ default: 'Week'
+ },
+ getPromiseFunc: {
+ type: Function,
+ required: true
+ }
+ },
+ emits: [
+ "update:date",
+ "update:mode",
+ "update:range"
+ ],
+ data() {
+ return {
+ modes: {
+ day: Vue.markRaw(ModeDay),
+ week: Vue.markRaw(ModeWeek),
+ month: Vue.markRaw(ModeMonth)
+ },
+ modeOptions: {
+ day: {
+ emptyMessage: Vue.computed(() => this.$p.t('lehre/noLvFound')),
+ emptyMessageDetails: Vue.computed(() => this.$p.t('lehre/noLvFound'))
+ },
+ week: {
+ collapseEmptyDays: false
+ }
+ },
+ teachingunits: null
+ };
+ },
+ computed: {
+ backgrounds() {
+ let now = luxon.DateTime.now().setZone(this.timezone);
+
+ if (this.mode == 'Month')
+ return [
+ {
+ class: 'background-past',
+ end: now.startOf('day')
+ }
+ ];
+
+ return [
+ {
+ class: 'background-past',
+ end: now,
+ label: now.startOf('minute').toISOTime({ suppressSeconds: true, includeOffset: false })
+ }
+ ];
+ }
+ },
+ methods: {
+ eventStyle(event) {
+ if (!event.farbe)
+ return undefined;
+ return '--event-bg:#' + event.farbe;
+ },
+ updateRange(rangeInterval) {
+ this.rangeInterval = rangeInterval;
+ this.$emit('update:range', rangeInterval);
+ }
+ },
+ setup(props, context) {
+ const rangeInterval = Vue.ref(null);
+
+ const { events, lv } = useEventLoader(rangeInterval, props.getPromiseFunc);
+
+ Vue.watch(lv, newValue => {
+ context.emit('update:lv', newValue);
+ });
+
+ return {
+ rangeInterval,
+ events,
+ lv
+ };
+ },
+ created() {
+ this.$api
+ .call(ApiLvPlan.getStunden())
+ .then(res => {
+ return this.teachingunits = res.data.map(el => ({
+ id: el.stunde,
+ start: el.beginn,
+ end: el.ende
+ }));
+ });
+ },
+ template: /* html */`
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
`
-}
diff --git a/public/js/components/Calendar/Mode/Day.js b/public/js/components/Calendar/Mode/Day.js
new file mode 100644
index 000000000..68ca1fa89
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Day.js
@@ -0,0 +1,101 @@
+import BaseSlider from '../Base/Slider.js';
+import DayView from './Day/View.js';
+
+export default {
+ name: "ModeDay",
+ components: {
+ BaseSlider,
+ DayView
+ },
+ props: {
+ currentDate: {
+ type: luxon.DateTime,
+ required: true
+ }
+ },
+ emits: [
+ "update:currentDate",
+ "update:range",
+ "click",
+ "requestModalOpen",
+ "requestModalClose"
+ ],
+ data() {
+ return {
+ focusDate: this.currentDate,
+ rangeOffset: 0
+ };
+ },
+ computed: {
+ range() {
+ let first = this.focusDate.startOf('day');
+ let last = this.focusDate.endOf('day');
+
+ if (this.rangeOffset != 0) {
+ if (this.rangeOffset < 0) {
+ first = first.plus({ days: this.rangeOffset });
+ } else {
+ last = last.plus({ days: this.rangeOffset });
+ }
+ }
+
+ return luxon.Interval.fromDateTimes(first, last);
+ }
+ },
+ watch: {
+ currentDate() {
+ this.rangeOffset = this.currentDate.startOf('day').diff(this.focusDate.startOf('day'), 'days').days;
+ 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(days) {
+ const newFocusDate = this.focusDate.plus({ days });
+ 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(days) {
+ const day = this.focusDate.plus({ days });
+ return { ...this.$attrs, day };
+ }
+ },
+ mounted() {
+ this.$emit('update:range', this.range);
+ this.$refs.view.$refs.grid.enableAutoScroll();
+ },
+ 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 */`
+
+
+
+
+
+
+
+
+ `
+}
diff --git a/public/js/components/Calendar/Mode/List.js b/public/js/components/Calendar/Mode/List.js
new file mode 100644
index 000000000..97990a5a3
--- /dev/null
+++ b/public/js/components/Calendar/Mode/List.js
@@ -0,0 +1,103 @@
+import BaseSlider from '../Base/Slider.js';
+import ListView from './List/View.js';
+
+export default {
+ name: "ModeList",
+ components: {
+ BaseSlider,
+ ListView
+ },
+ props: {
+ currentDate: {
+ type: luxon.DateTime,
+ required: true
+ },
+ length: {
+ type: Number,
+ default: 7
+ }
+ },
+ emits: [
+ "update:currentDate",
+ "update:range",
+ "click",
+ "requestModalOpen"
+ ],
+ data() {
+ return {
+ focusDate: this.currentDate,
+ rangeOffset: 0
+ };
+ },
+ computed: {
+ range() {
+ let first = this.focusDate;
+ let last = first.plus({ days: this.length });
+
+ if (this.rangeOffset != 0) {
+ if (this.rangeOffset < 0) {
+ first = first.plus({ days: this.rangeOffset });
+ } else {
+ last = first.plus({ days: this.rangeOffset + this.length });
+ }
+ }
+
+ return luxon.Interval.fromDateTimes(first, last);
+ }
+ },
+ watch: {
+ currentDate() {
+ this.rangeOffset = this.currentDate.startOf('day').diff(this.focusDate.startOf('day'), 'days').days;
+ if (this.rangeOffset) {
+ 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.$emit('update:range', this.range);
+ this.$refs.slider.prevPage().then(this.updatePage);
+ },
+ nextPage() {
+ this.rangeOffset = this.$refs.slider.target + 1;
+ this.$emit('update:range', this.range);
+ this.$refs.slider.nextPage().then(this.updatePage);
+ },
+ updatePage(offset) {
+ const newFocusDate = this.focusDate.plus({ days: offset });
+ this.focusDate = newFocusDate;
+ this.rangeOffset = 0;
+ this.$emit('update:currentDate', this.focusDate);
+ this.$emit('update:range', this.range);
+ },
+ viewAttrs(offset) {
+ const day = this.focusDate.plus({ days: offset });
+ return { day, length: this.length };
+ },
+ handleClickDefaults(evt) {
+ switch (evt.detail.source) {
+ case 'event':
+ // default: Request Modal
+ this.$emit('requestModalOpen', { event: evt.detail.value });
+ break;
+ }
+ }
+ },
+ mounted() {
+ this.$emit('update:range', this.range);
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ 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.js b/public/js/components/Calendar/Mode/Month.js
new file mode 100644
index 000000000..a352ccc98
--- /dev/null
+++ b/public/js/components/Calendar/Mode/Month.js
@@ -0,0 +1,126 @@
+import BaseSlider from '../Base/Slider.js';
+import MonthView from './Month/View.js';
+
+export default {
+ name: "ModeMonth",
+ components: {
+ BaseSlider,
+ MonthView
+ },
+ 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('month').startOf('week', { useLocaleWeeks: true });
+ let last = first.plus({ days: 41 }).endOf('day'); // NOTE(chris): 6 weeks minus 1 day
+
+ if (this.rangeOffset != 0) {
+ const nextFocusDate = this.focusDate.plus({ months: this.rangeOffset});
+ const nextRangeStart = nextFocusDate.startOf('month').startOf('week', { useLocaleWeeks: true });
+ if (this.rangeOffset < 0) {
+ first = nextRangeStart;
+ } else {
+ last = nextRangeStart.plus({ days: 41 }).endOf('day');
+ }
+ }
+
+ 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('month').diff(this.focusDate.startOf('month'), 'months').months;
+ if (this.rangeOffset) {
+ 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.$emit('update:range', this.range);
+ this.$refs.slider.prevPage().then(this.updatePage);
+ },
+ nextPage() {
+ this.rangeOffset = this.$refs.slider.target + 1;
+ this.$emit('update:range', this.range);
+ this.$refs.slider.nextPage().then(this.updatePage);
+ },
+ updatePage(months) {
+ const newFocusDate = this.focusDate.plus({ months });
+ this.focusDate = newFocusDate;
+ this.rangeOffset = 0;
+ this.$emit('update:currentDate', this.focusDate);
+ this.$emit('update:range', this.range);
+ },
+ viewAttrs(months) {
+ const day = this.focusDate.plus({ months });
+ return { day };
+ },
+ handleClickDefaults(evt) {
+ switch (evt.detail.source) {
+ case 'week':
+ // default: Move to week if not in month
+ let dayInWeek = luxon.DateTime.fromObject({
+ localWeekNumber: evt.detail.value.number,
+ localWeekYear: evt.detail.value.year
+ }, {
+ zone: this.currentDate.zoneName,
+ locale: this.currentDate.locale
+ });
+
+ if (!this.focusDate.hasSame(dayInWeek.startOf('week', { useLocaleWeeks: true }), 'month')) {
+ this.$emit('update:currentDate', dayInWeek.startOf('week', { useLocaleWeeks: true }));
+ } else if (!this.focusDate.hasSame(dayInWeek.endOf('week', { useLocaleWeeks: true }), 'month')) {
+ this.$emit('update:currentDate', dayInWeek.endOf('week', { useLocaleWeeks: true }));
+ }
+ break;
+ 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);
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+}
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*/`
-
-
-
-`
-}
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: `
-
- {{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/Pane.js b/public/js/components/Calendar/Pane.js
deleted file mode 100644
index 5a3a43aa9..000000000
--- a/public/js/components/Calendar/Pane.js
+++ /dev/null
@@ -1,91 +0,0 @@
-export default {
- name: 'Pane',
- emits: [
- 'slid'
- ],
- data() {
- return {
- carousel: null,
- queue: 0,
- offset: 0,
- slideAnimation:false,
- scrollTop:null,
- clientHeight:null,
- carouselItems:null,
- }
- },
- provide() {
- return {
- isSliding: Vue.computed(() => this.slideAnimation),
- calendarScrollTop: Vue.computed(() =>this.scrollTop),
- calendarClientHeight: Vue.computed(() => this.clientHeight),
- }
- },
- computed: {
- offsets() {
- return [...Array(3).keys()].map(i => (3+i-this.offset)%3-1);
- },
- activeCarouselItemIndex() {
- if (Array.isArray(this.carouselItems) && this.carouselItems.length > 0) {
- for(let index=0; index < this.carouselItems.length; index++){
- if (this.carouselItems[index] == true){
- return index;
- }
- }
-
- }
- return -1;
- }
-
- },
- methods: {
- scrollCalendar(event){
- this.scrollTop = this.$refs.calendarContainer.scrollTop;
- this.clientHeight = this.$refs.calendarContainer.clientHeight;
- },
- prev() {
- if (!this.queue--)
- this.carousel.prev();
- },
- next() {
- if (!this.queue++)
- this.carousel.next();
- },
- slid(evt) {
- let dir = evt.direction == 'left' ? 1 : -1;
- this.queue -= dir;
- this.$emit('slid', dir);
- this.offset = (3+this.offset+dir)%3;
- if (this.queue) {
- if (this.queue > 0)
- this.carousel.next();
- else
- this.carousel.prev();
- }
- this.carouselItems = this.$refs.carouselItems.map((item) => { return item.classList.contains('active') });
- this.slideAnimation = false;
- },
- slide(evt) {
- this.slideAnimation = true;
- }
- },
- mounted() {
- if (this.$refs.carousel) {
- this.$refs.carousel.children[0].children[1].classList.add('active');
- this.carousel = new window.bootstrap.Carousel(this.$refs.carousel, {
- interval: false
- });
- }
- this.carouselItems = this.$refs.carouselItems.map((item)=>{return item.classList.contains('active')});
- this.scrollTop = this.$refs.calendarContainer.scrollTop;
- this.clientHeight = this.$refs.calendarContainer.clientHeight;
- },
- template: `
- `
-}
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
deleted file mode 100644
index 350f0130d..000000000
--- a/public/js/components/Calendar/Week.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import CalendarAbstract from './Abstract.js';
-import CalendarPane from './Pane.js';
-import CalendarWeekPage from './Week/Page.js';
-
-export default {
- mixins: [
- CalendarAbstract
- ],
- components: {
- CalendarWeekPage,
- CalendarPane
- },
- computed: {
- title() {
- return this.focusDate.wYear + ' KW ' + this.focusDate.w;
- }
- },
- methods: {
- paneChanged(dir) {
- this.focusDate.d += dir * 7;
- this.emitRangeChanged();
- },
- emitRangeChanged() {
- let start = this.focusDate.firstDayOfWeek;
- let end = this.focusDate.lastDayOfWeek;
- this.$emit('change:range', { start, end });
- },
- prev() {
- this.$refs.pane.prev();
- this.$emit('change:offset', { y: 0, m: 0, d: -7 });
- },
- next() {
- this.$refs.pane.next();
- this.$emit('change:offset', { y: 0, m: 0, d: 7 });
- },
- selectEvent(event) {
- this.$emit('input', ['select:event',event]);
- }
- },
- created() {
- this.emitRangeChanged();
- },
- template: /*html*/`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`
-}
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*/`
-
-
`
-}
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: `
-
-
-
-
-
-
- {{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/Widget.js b/public/js/components/Calendar/Widget.js
new file mode 100644
index 000000000..f9d641d4e
--- /dev/null
+++ b/public/js/components/Calendar/Widget.js
@@ -0,0 +1,106 @@
+import FhcCalendar from "./Base.js";
+
+import { useEventLoader } from '../../composables/EventLoader.js';
+
+import ModeList from '../Calendar/Mode/List.js';
+
+export default {
+ name: "CalendarWidget",
+ components: {
+ FhcCalendar
+ },
+ inject: [
+ "renderers"
+ ],
+ props: {
+ timezone: {
+ type: String,
+ required: true
+ },
+ getPromiseFunc: {
+ type: Function,
+ required: true
+ }
+ },
+ data() {
+ return {
+ now: luxon.DateTime.now().setZone(this.timezone),
+ modes: {
+ list: Vue.markRaw(ModeList)
+ },
+ modeOptions: {
+ list: {
+ length: 7
+ }
+ }
+ };
+ },
+ methods: {
+ eventStyle(event) {
+ const styles = {};
+ if (event.farbe)
+ styles['--event-bg'] = '#' + event.farbe;
+ else if (event.type == 'reservierung')
+ styles['--event-bg'] = '#ffffff';
+ else
+ styles['--event-bg'] = '#cccccc';
+
+ const eventEnd = luxon.DateTime.fromISO(event.isoend, { zone: this.timezone });
+ if (eventEnd < this.now)
+ styles['opacity'] = .5;
+
+ return styles;
+ },
+ updateRange(rangeInterval) {
+ this.rangeInterval = rangeInterval;
+ }
+ },
+ setup(props) {
+ const rangeInterval = Vue.ref(null);
+
+ const { events } = useEventLoader(rangeInterval, props.getPromiseFunc);
+
+ return {
+ rangeInterval,
+ events
+ };
+ },
+ template: /* html */`
+
-
-
-
-
-
+ {{ $p.t('lehre/noLvFound') }}
+
+
+
+
+
-
-
-
`
-}
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: `
+
-
-
-
+
+
+
+
+`,
+};
+
+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/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') }}
+
+
+
+
+ ' +
+ '
'
+ },
+ 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: `
+ '+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') }}
+
+
+
+
+
+
+ ' +
+ '
'
+ },
+ 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: `
+ '+val+'
{{$p.t('abgabetool/abgabetoolTitle')}}
++ +
+
+
+ ' +
+ '
'
+ },
+ 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: `
+ '+val+'
{{$p.t('abgabetool/deadlinesTitle')}} {{ fullName ? ('-' + fullName) : ''}}
++ +
+
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/Lehrveranstaltung.js b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js new file mode 100644 index 000000000..4364a5df4 --- /dev/null +++ b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js @@ -0,0 +1,107 @@ +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: 'LvPlanLehrveranstaltung', + components: { + FhcCalendar + }, + props: { + viewData: Object, // NOTE(chris): this is inherited from router-view + propsViewData: Object + }, + data() { + return { + lv: null + }; + }, + computed:{ + currentDay() { + if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date))) + return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate(); + return this.propsViewData?.focus_date; + }, + currentMode() { + if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase())) + return DEFAULT_MODE_LVPLAN; + return this.propsViewData?.mode; + }, + currentLv() { + if (isNaN(parseInt(this.propsViewData?.lv_id))) + return null; + return this.propsViewData.lv_id; + }, + lvTitle() { + if (this.currentLv === null) + return ''; + if (!this.lv) + return ''; + + if (this.$p.user_language.value === 'English') + return this.lv.bezeichnung_english; + + return this.lv.bezeichnung; + } + }, + 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.currentLv + } + }); + }, + getPromiseFunc(start, end) { + return [ + this.$api.call(ApiLvPlan.eventsLv(this.propsViewData.lv_id, start.toISODate(), end.toISODate())), + this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate())) + ]; + } + }, + created() { + if (this.currentLv === null) + return; + this.$api + .call(ApiLvPlan.getLv(this.propsViewData?.lv_id)) + .then(res => { + this.lv = res.data; + }); + }, + template: /*html*/` +
+
+
`
+};
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js
new file mode 100644
index 000000000..f7763c54b
--- /dev/null
+++ b/public/js/components/Cis/LvPlan/LvPlan.js
@@ -0,0 +1,146 @@
+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*/`
+ + {{ $p.t('lehre/stundenplan') }} + + {{ lvTitle }} + +
++
+ {{ $p.t('lehre/noLvFound') }}
+
+
+
+
+
+
`
+};
diff --git a/public/js/components/Cis/LvPlan/Personal.js b/public/js/components/Cis/LvPlan/Personal.js
new file mode 100644
index 000000000..f6fd462da
--- /dev/null
+++ b/public/js/components/Cis/LvPlan/Personal.js
@@ -0,0 +1,155 @@
+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: 'LvPlanPersonal',
+ components: {
+ FhcCalendar
+ },
+ props: {
+ viewData: Object, // NOTE(chris): this is inherited from router-view
+ propsViewData: Object
+ },
+ data() {
+ return {
+ studiensemester_kurzbz: null,
+ studiensemester_start: null,
+ studiensemester_ende: null,
+ uid: null,
+ isMitarbeiter: false,
+ isStudent: false
+ };
+ },
+ computed:{
+ currentDay() {
+ if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+ return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+ return this.propsViewData?.focus_date;
+ },
+ currentMode() {
+ if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+ return DEFAULT_MODE_LVPLAN;
+ return this.propsViewData?.mode;
+ },
+ downloadLinks() {
+ if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+ return false;
+
+ let type = false;
+ type = this.isStudent ? 'student' : type;
+ type = this.isMitarbeiter ? 'lektor' : type;
+ if (false === type)
+ {
+ return;
+ }
+
+ 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=' + type
+ + '&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: "MyLvPlan",
+ params: {
+ mode,
+ focus_date
+ }
+ });
+ },
+ 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.eventsPersonal(start.toISODate(), end.toISODate())),
+ this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+ ];
+ }
+ },
+ created() {
+ this.$api
+ .call(ApiAuthinfo.getAuthInfo())
+ .then(res => {
+ this.uid = res.data.uid;
+ this.isMitarbeiter = res.data.isMitarbeiter;
+ this.isStudent = res.data.isStudent;
+ });
+ },
+ template: /*html*/`
+ + {{ $p.t('lehre/stundenplan') }} + + {{ studiensemester_kurzbz }} + + + {{ $p.user_language.value === 'German' ? lv?.bezeichnung : lv?.bezeichnung_english }} + +
++
+
+
+
+
+
+
+
`
+};
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index cada49636..f073d5a38 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 }} + +
++
+
+
+
+
-
+
+ ![Corporate Identity Logo]()
+
+
+