-
-
-
-
- {{course.showname}}
- {{course.tag}}
-
-
+ template: `
+
`
+
+
+
+ {{ course.showname }}
+
+
+ {{ course.studiengang }} - {{ course.semester }}
+
+
+ {{ course.lektoren }}
+
+
+ WR: {{ course.wochenrythmus }} Bl: {{ course.stundenblockung }}
+
+
+
+
+ Drag & Drop on Calendar
+
+
+`
}
diff --git a/public/js/components/Tempus/LectureSelection.js b/public/js/components/Tempus/LectureSelection.js
new file mode 100644
index 000000000..5b223fff4
--- /dev/null
+++ b/public/js/components/Tempus/LectureSelection.js
@@ -0,0 +1,44 @@
+import FormInput from '../Form/Input.js';
+
+export default {
+ name: "LectureSelection",
+ props: {
+ lecturers: {
+ type: Array,
+ required: true
+ }
+ },
+ emits: ['remove'],
+ template: `
+
+
+
+ {{ l.label }}
+
+
+
+
+
+
+ Plan
+
+
+
+ Zeitsperren
+
+
+
+ Zeitwünsche
+
+
+
+
+ `
+}
\ No newline at end of file
diff --git a/public/js/components/Tempus/ParkingSlot.js b/public/js/components/Tempus/ParkingSlot.js
new file mode 100644
index 000000000..d5e632b9d
--- /dev/null
+++ b/public/js/components/Tempus/ParkingSlot.js
@@ -0,0 +1,78 @@
+import EventCard from '../Calendar/Base/Grid/Line/EventCard.js';
+import drop from '../../directives/drop.js';
+
+export default {
+ name: "ParkingSlot",
+ components: {
+ EventCard
+ },
+ directives: {
+ drop
+ },
+ emits: ['update:parkedKeys'],
+ data() {
+ return {
+ parked: [],
+ parkedKeys: new Set()
+ };
+ },
+ methods: {
+ park(evt, items) {
+ const list = Array.isArray(items) ? items : [items];
+
+ const stored = JSON.parse(localStorage.getItem('tempus_parking') || '[]');
+
+ list.forEach(item => {
+ const key = `${item.id}`;
+ if (this.parkedKeys.has(key))
+ return;
+ this.parkedKeys.add(key);
+ stored.push({
+ type: item.type,
+ id: item.id,
+ orig: item.orig
+ });
+ this.parked.push(item);
+ });
+
+ localStorage.setItem('tempus_parking', JSON.stringify(stored));
+ this.$emit('update:parkedKeys', this.parkedKeys);
+ },
+ unpark(event) {
+ const key = `${event.id}`;
+ this.parkedKeys.delete(key);
+ this.parked = this.parked.filter(parkedEvent => parkedEvent.id !== event.id);
+
+ const stored = JSON.parse(localStorage.getItem('tempus_parking') || '[]').filter(parkedEvent => parkedEvent.id !== event.id);
+ localStorage.setItem('tempus_parking', JSON.stringify(stored));
+ this.$emit('update:parkedKeys', this.parkedKeys);
+ },
+ isParked(id) {
+ return this.parkedKeys.has(`${id}`);
+ }
+ },
+ mounted() {
+ const stored = JSON.parse(localStorage.getItem('tempus_parking') || '[]');
+ this.parked = stored;
+ this.parkedKeys = new Set(stored.map(store => `${store.id}`));
+ this.$emit('update:parkedKeys', this.parkedKeys);
+ },
+ template: `
+
+ `
+}
\ No newline at end of file
diff --git a/public/js/composables/EventLoader.js b/public/js/composables/EventLoader.js
index 7360d0286..a61295dd4 100644
--- a/public/js/composables/EventLoader.js
+++ b/public/js/composables/EventLoader.js
@@ -111,7 +111,7 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
return mergePromiseArr(getPromiseFunc(start, end), result);
};
- Vue.watchEffect(() => {
+ const reload = () => {
const range = Vue.toValue(rangeInterval);
if (!(range instanceof luxon.Interval))
return;
@@ -132,7 +132,18 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
}
})
});
- })
+ };
- return { events: allEvents, lv }
+ Vue.watchEffect(reload);
+
+ const reset = () => {
+ loading_id = 0;
+ events.value = [];
+ loadingEvents.value = [];
+ eventsLoaded.splice(0, eventsLoaded.length);
+ reload();
+ }
+
+
+ return { events: allEvents, lv, reset }
}
\ No newline at end of file
diff --git a/public/js/directives/Calendar/DragAndDrop.js b/public/js/directives/Calendar/DragAndDrop.js
deleted file mode 100644
index b1cd015ec..000000000
--- a/public/js/directives/Calendar/DragAndDrop.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * TODO(chris): This needs serious rework!!!
- */
-export default {
- mounted(el, binding, vnode) {
- if (binding.arg == 'draggable') {
- el.addEventListener('update-my-value', evt => {
- evt.preventDefault();
- binding.value = evt.detail.item;
- });
- el.addEventListener('dragstart', evt => {
- el.dispatchEvent(new CustomEvent('calendar-dragstart', {
- cancelable: true,
- bubbles: true,
- detail: {
- item: binding.value,
- x: evt.offsetX / el.offsetWidth,
- y: evt.offsetY / el.offsetHeight,
- originalEvent: evt
- }
- }));
- });
- el.addEventListener('dragend', evt => {
- el.dispatchEvent(new CustomEvent('calendar-dragend', {
- cancelable: true,
- bubbles: true,
- detail: {
- item: binding.value,
- originalEvent: evt
- }
- }));
- });
- } else if (binding.arg == 'dropcage') {
- let hitbox = null;
- el.addEventListener('dragover', evt => {
- if (hitbox)
- return;
- hitbox = el.getBoundingClientRect();
- return el.dispatchEvent(new CustomEvent('calendar-dragenter', {
- detail: { originalEvent: evt }
- }));
- });
- window.addEventListener('dragleave', evt => {
- if (!hitbox)
- return;
- let pos;
- if (typeof evt.clientX === 'undefined')
- pos = {
- x: evt.pageX + document.documentElement.scrollLeft,
- y: evt.pageY + document.documentElement.scrollTop
- };
- else
- pos = {
- x: evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
- y: evt.clientY + document.body.scrollTop + document.documentElement.scrollTop
- };
- if (pos.x > hitbox.left + hitbox.width - 1 || pos.x < hitbox.left || pos.y > hitbox.top + hitbox.height - 1 || pos.y < hitbox.top) {
- hitbox = null;
- return el.dispatchEvent(new CustomEvent('calendar-dragleave', {
- detail: { originalEvent: evt }
- }));
- }
- });
- window.addEventListener('drop', evt => {
- if (!hitbox)
- return;
-
- hitbox = null;
- return el.dispatchEvent(new CustomEvent('calendar-dragleave', {
- detail: { originalEvent: evt }
- }));
- });
- } else if (binding.arg == 'dropzone') {
- el.addEventListener(
- binding.modifiers.once ? 'dragenter' : 'dragover',
- evt => {
- const timestamp = binding.value instanceof Function
- ? binding.value(evt)
- : binding.value;
- const detail = timestamp.timestamp ? timestamp : { timestamp };
- el.dispatchEvent(new CustomEvent('calendar-dragchange', {
- cancelable: true,
- bubbles: true,
- detail
- }));
- }
- );
- }
- },
- updated(el, binding, vnode, prevVnode) {
- if (binding.arg == 'draggable') {
- el.dispatchEvent(new CustomEvent('update-my-value', {
- cancelable: true,
- detail: {
- item: binding.value
- }
- }));
- }
- }
-}
\ No newline at end of file
diff --git a/public/js/directives/draggable.js b/public/js/directives/draggable.js
index 64747c15a..697bcbb26 100644
--- a/public/js/directives/draggable.js
+++ b/public/js/directives/draggable.js
@@ -30,7 +30,8 @@ export default {
function onStart(evt) {
const value = el.dataset.fhcDraggableValue;
if (value) {
- setTransferData(evt, JSON.parse(value), true);
+ let disableImage = binding.modifiers?.noimage === true;
+ setTransferData(evt, JSON.parse(value), !disableImage);
if (el.dataset.fhcEffectAllowed)
evt.dataTransfer.effectAllowed = el.dataset.fhcEffectAllowed;
diff --git a/public/js/helpers/DragAndDrop.js b/public/js/helpers/DragAndDrop.js
index f98697eb2..ec4e9cb9d 100644
--- a/public/js/helpers/DragAndDrop.js
+++ b/public/js/helpers/DragAndDrop.js
@@ -5,11 +5,13 @@
const TYPE_DEFINITION = {
lehreinheit: {
id: "lehreinheit_id",
- dragIcon: "fa-solid fa-chalkboard-user",
extras: [
"stundenblockung"
]
},
+ kalender: {
+ id: "kalender_id",
+ },
vevent: {
id: "uid",
dragIcon: "fa-solid fa-calendar",
@@ -53,12 +55,16 @@ function isValidDragObject(value) {
if (!Object.prototype.hasOwnProperty.call(value, 'values'))
return false;
+
if (!VALID_TYPES.includes(value.type.substr(0, value.type.length-11)))
return false;
+
} else {
+
if (!Object.prototype.hasOwnProperty.call(value, 'id'))
return false;
+
if (!VALID_TYPES.includes(value.type))
return false;
@@ -182,10 +188,10 @@ function convertToValidDragObject(data, strict) {
const found = Object.entries(TYPE_DEFINITION).find(([ , typedef ]) => {
if (!Object.prototype.hasOwnProperty.call(data, typedef.id))
return false;
- if (typedef.extras) {
+ /*if (typedef.extras) {
if (!typedef.extras.every(extra => Object.prototype.hasOwnProperty.call(data, extra)))
return false;
- }
+ }*/
return true;
});
@@ -198,13 +204,16 @@ function convertToValidDragObject(data, strict) {
const newData = {};
newData.type = type;
newData.id = data[typedef.id];
- if (typedef.extras)
- typedef.extras.forEach(extra => newData[extra] = data[extra]);
+
+ /*if (typedef.extras)
+ typedef.extras.forEach(extra => newData[extra] = data[extra]);*/
return newData;
}
function setTransferData(event, validDragObject, setDragImage = false) {
+
+
if (setDragImage) {
const dragItems = Array.isArray(validDragObject) ? validDragObject : [ validDragObject ];
const dragElements = dragItems.map(item => {
@@ -246,9 +255,9 @@ function setTransferData(event, validDragObject, setDragImage = false) {
});
}
if (Array.isArray(validDragObject)) {
+
return validDragObject.forEach(data => setTransferData(event, data));
}
-
event.dataTransfer.setData('application/fhc-' + validDragObject.type, JSON.stringify(validDragObject));
}
@@ -267,16 +276,16 @@ function eventHasTypes(event, allowedTypes, strict) {
allowedTypes = allowedTypes.map(type => 'application/fhc-' + type);
const dataTypes = [...event.dataTransfer.types];
-
+
// NOTE(chris): if dragging across browsers the dataTransfer object is
// set to a default one without data. Since we do not support dragging
// across browsers (yet) we return false which will disallow dropping.
if (!dataTypes.length)
return false;
-
+
if (!strict)
return allowedTypes.some(type => [...event.dataTransfer.types].includes(type));
-
+
return [...event.dataTransfer.types].every(type => allowedTypes.includes(type));
}
diff --git a/public/js/helpers/Tempus/ResizeGhost.js b/public/js/helpers/Tempus/ResizeGhost.js
new file mode 100644
index 000000000..ceb2e3876
--- /dev/null
+++ b/public/js/helpers/Tempus/ResizeGhost.js
@@ -0,0 +1,102 @@
+export function useResizeGhost() {
+ let ghostEl = null;
+ let labelEl = null;
+
+ function create(gridEl, eventEl, edge)
+ {
+ const gridRect = gridEl.getBoundingClientRect();
+ const eventRect = eventEl.getBoundingClientRect();
+ const scrollTop = gridEl.scrollTop;
+
+ const topInGrid = (eventRect.top - gridRect.top) + scrollTop;
+ const leftInGrid = eventRect.left - gridRect.left;
+
+ ghostEl = document.createElement('div');
+ ghostEl.className = 'fhc-event-ghost';
+ ghostEl.style.cssText = `
+ position: absolute;
+ left: ${leftInGrid}px;
+ width: ${eventRect.width}px;
+ top: ${topInGrid}px;
+ height: ${eventRect.height}px;
+ z-index: 9999;
+ pointer-events: none;
+ box-sizing: border-box;
+ border-radius: 6px;
+ outline: 2px dashed currentColor;
+ opacity: 0.9;
+ `;
+
+ labelEl = document.createElement('div');
+ labelEl.className = 'fhc-resize-preview';
+ labelEl.style.cssText = `
+ position: absolute;
+ right: 6px;
+ padding: 2px 6px;
+ border-radius: 6px;
+ font-size: 12px;
+ background: rgba(0,0,0,0.75);
+ color: white;
+ white-space: nowrap;
+ pointer-events: none;
+ `;
+
+ if (edge === 'start')
+ {
+ labelEl.style.top = '6px';
+ labelEl.style.bottom = 'auto';
+ }
+ else
+ {
+ labelEl.style.top = 'auto';
+ labelEl.style.bottom = '6px';
+ }
+
+ ghostEl.appendChild(labelEl);
+
+ gridEl.style.position = 'relative';
+ gridEl.appendChild(ghostEl);
+
+ return {
+ startTop: topInGrid,
+ startHeight: eventRect.height
+ };
+ }
+
+ function updateLabel(text)
+ {
+ if (labelEl)
+ labelEl.textContent = text;
+ }
+
+ function updatePosition(top, height)
+ {
+ if (!ghostEl)
+ return;
+ if (top !== null)
+ ghostEl.style.top = `${top}px`;
+ if (height !== null)
+ ghostEl.style.height = `${height}px`;
+ }
+
+ function getPosition()
+ {
+ if (!ghostEl)
+ return { top: 0, height: 0 };
+ return {
+ top: parseFloat(ghostEl.style.top),
+ height: parseFloat(ghostEl.style.height)
+ };
+ }
+
+ function remove()
+ {
+ if (ghostEl?.parentNode)
+ ghostEl.parentNode.removeChild(ghostEl);
+
+ ghostEl = null;
+ labelEl = null;
+ }
+
+ return { create, updateLabel, updatePosition, getPosition, remove };
+}
\ No newline at end of file
diff --git a/public/js/helpers/Tempus/ResizeHandler.js b/public/js/helpers/Tempus/ResizeHandler.js
new file mode 100644
index 000000000..a2896bf00
--- /dev/null
+++ b/public/js/helpers/Tempus/ResizeHandler.js
@@ -0,0 +1,217 @@
+import { useResizeGhost } from './ResizeGhost.js';
+
+const MIN_HEIGHT_PX = 20;
+const MIN_DURATION_MIN = 5;
+const SNAP_MINUTES = 5;
+
+function snapToGrid(minutes, edge)
+{
+ if (edge === 'start')
+ {
+ return minutes >= 0 ? Math.floor(minutes / SNAP_MINUTES) * SNAP_MINUTES : Math.ceil(minutes / SNAP_MINUTES) * SNAP_MINUTES;
+ }
+
+ return minutes >= 0 ? Math.ceil(minutes / SNAP_MINUTES) * SNAP_MINUTES : Math.floor(minutes / SNAP_MINUTES) * SNAP_MINUTES;
+}
+
+function getSnapTimes(timeGrid, dayISO, zoneName)
+{
+ const parseTime = (time) =>
+ {
+ if (!time)
+ return null;
+ let dt = luxon.DateTime.fromFormat(`${dayISO} ${time}`, 'yyyy-MM-dd HH:mm:ss', { zone: zoneName });
+
+ if (!dt.isValid)
+ dt = luxon.DateTime.fromFormat(`${dayISO} ${time}`, 'yyyy-MM-dd HH:mm', { zone: zoneName });
+
+ return dt.isValid ? dt : null;
+ };
+
+ const startTimes = timeGrid.map(s => parseTime(s?.start)).filter(Boolean);
+ const endTimes = timeGrid.map(s => parseTime(s?.end)).filter(Boolean);
+
+ const sort = arr => arr.sort((a, b) => a.toMillis() - b.toMillis());
+
+ return {
+ start: sort(startTimes),
+ end: sort(endTimes),
+ };
+}
+
+function calculateNewTimes(activeResize, ghostPosition)
+{
+ const { edge, event, timeGrid, startTop, startHeight } = activeResize;
+ const { start, end } = event;
+
+ const durationMinutes = end.diff(start, 'minutes').minutes;
+ if (!durationMinutes || durationMinutes <= 0)
+ return null;
+
+ const pxPerMinute = startHeight / durationMinutes;
+
+ let draggedPx = 0;
+ if (edge === 'end')
+ draggedPx = ghostPosition.height - startHeight;
+ if (edge === 'start')
+ draggedPx = ghostPosition.top - startTop;
+
+ const draggedMinutes = snapToGrid(draggedPx / pxPerMinute, edge);
+
+ let newStart = start;
+ let newEnd = end;
+
+ if (edge === 'start')
+ newStart = start.plus({ minutes: draggedMinutes });
+ if (edge === 'end')
+ newEnd = end.plus({ minutes: draggedMinutes });
+
+ if (Array.isArray(timeGrid) && timeGrid.length)
+ {
+ const snapTimes = getSnapTimes(timeGrid, start.toISODate(), start.zoneName);
+
+ if (edge === 'start')
+ {
+ const targets = snapTimes.start;
+ newStart = [...targets].reverse().find(t => t <= newStart) || targets[0];
+ }
+ else
+ {
+ const targets = snapTimes.end;
+ newEnd = targets.find(t => t >= newEnd) || targets[targets.length - 1];
+ }
+ }
+
+ return { newStart, newEnd };
+}
+
+
+export function useResizeHandler() {
+ const ghost = useResizeGhost();
+
+ let activeResize = null;
+
+ function getPointerYInGrid(evt)
+ {
+ const gridRect = activeResize.gridEl.getBoundingClientRect();
+ return (evt.clientY - gridRect.top) + activeResize.gridEl.scrollTop;
+ }
+
+ function updateGhostLabel()
+ {
+ const result = calculateNewTimes(activeResize, ghost.getPosition());
+ if (!result)
+ return;
+ ghost.updateLabel(`${result.newStart.toFormat('HH:mm')}–${result.newEnd.toFormat('HH:mm')}`);
+ }
+
+ function onPointerMove(evt)
+ {
+ if (!activeResize || evt.pointerId !== activeResize.pointerId)
+ return;
+ evt.preventDefault();
+
+ const maxBottom = activeResize.gridEl.scrollHeight;
+ const pointerY = getPointerYInGrid(evt);
+ const draggedPx = pointerY - activeResize.dragStartY;
+
+ if (activeResize.edge === 'end')
+ {
+ let newHeight = Math.max(MIN_HEIGHT_PX, activeResize.startHeight + draggedPx);
+ if (activeResize.startTop + newHeight > maxBottom)
+ newHeight = maxBottom - activeResize.startTop;
+
+ ghost.updatePosition(null, newHeight);
+ }
+ else if (activeResize.edge === 'start')
+ {
+ let newTop = activeResize.startTop + draggedPx;
+ let newHeight = activeResize.startHeight - draggedPx;
+
+ if (newTop < 0)
+ {
+ newHeight -= (0 - newTop);
+ newTop = 0;
+ }
+
+ if (newHeight < MIN_HEIGHT_PX)
+ {
+ newTop = (activeResize.startTop + activeResize.startHeight) - MIN_HEIGHT_PX;
+ newHeight = MIN_HEIGHT_PX;
+ }
+
+ ghost.updatePosition(newTop, newHeight);
+ }
+
+ updateGhostLabel();
+ }
+
+ function onPointerUp(evt)
+ {
+ if (!activeResize || evt.pointerId !== activeResize.pointerId)
+ return;
+
+ window.removeEventListener('pointermove', onPointerMove);
+ window.removeEventListener('pointerup', onPointerUp);
+
+ if (activeResize.eventEl)
+ activeResize.eventEl.style.opacity = activeResize.originalOpacity ?? '';
+
+ const result = calculateNewTimes(activeResize, ghost.getPosition());
+
+ ghost.remove();
+
+ if (result)
+ {
+ if ((activeResize.event.start.toISO() !== result.newStart.toISO()) || (activeResize.event.end.toISO() !== result.newEnd.toISO()))
+ {
+ activeResize.onEnd({
+ event: activeResize.event,
+ newStart: result.newStart.toISO(),
+ newEnd: result.newEnd.toISO()
+ });
+ }
+ }
+
+ activeResize = null;
+ }
+
+ function startResize(edge, evt, { el, gridEl, event, timeGrid, onEnd })
+ {
+ const { startTop, startHeight } = ghost.create(gridEl, el, edge);
+
+ activeResize = {
+ edge,
+ pointerId: evt.pointerId,
+ eventEl: el,
+ gridEl,
+ event,
+ timeGrid,
+ onEnd,
+ dragStartY: (evt.clientY - gridEl.getBoundingClientRect().top) + gridEl.scrollTop,
+ startTop,
+ startHeight,
+ originalOpacity: el.style.opacity,
+ };
+
+ el.style.opacity = '0.35';
+ ghost.updateLabel(`${event.start.toFormat('HH:mm')}–${event.end.toFormat('HH:mm')}`);
+
+ evt.currentTarget.setPointerCapture(evt.pointerId);
+ window.addEventListener('pointermove', onPointerMove, { passive: false });
+ window.addEventListener('pointerup', onPointerUp, { passive: false });
+ }
+
+ function cleanup()
+ {
+ if (!activeResize)
+ return;
+
+ window.removeEventListener('pointermove', onPointerMove);
+ window.removeEventListener('pointerup', onPointerUp);
+ ghost.remove();
+ activeResize = null;
+ }
+
+ return { startResize, cleanup };
+}
\ No newline at end of file