[timeline] overlapovanie taskov s rovnakou dlzkou, zaciatkom a koncom casu

This commit is contained in:
Filip Kaluža committed 2022-12-19 22:26:31 +01:00
1 parent 9d70fe378d
commit 761c32ef5e
4 files changed
+48 -18

No files matched your search

+14 -14
View File
@@ -39,8 +39,8 @@
{
"id": 1,
"task_id": 1,
"starts_at": "2022-12-12T08:01:00+00:00",
"ends_at": "2022-12-12T09:00:00+00:00",
"starts_at": "2022-12-19T08:01:00+00:00",
"ends_at": "2022-12-19T09:00:00+00:00",
"title": "Task 1",
"project_code": "CO-2201",
"master_task_color": "#E9FFE6"
@@ -49,8 +49,8 @@
{
"id": 2,
"task_id": 2,
"starts_at": "2022-12-12T08:30:00+00:00",
"ends_at": "2022-12-12T09:00:00+00:00",
"starts_at": "2022-12-19T08:30:00+00:00",
"ends_at": "2022-12-19T09:00:00+00:00",
"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
"project_code": "CO-2201",
"master_task_color": "#f27e57"
@@ -59,8 +59,8 @@
{
"id": 3,
"task_id": 3,
"starts_at": "2022-12-12T10:30:00+00:00",
"ends_at": "2022-12-12T10:45:00+00:00",
"starts_at": "2022-12-19T10:30:00+00:00",
"ends_at": "2022-12-19T10:45:00+00:00",
"title": "Kratky 15min",
"project_code": "CO-2201",
"master_task_color": "#57e0f2"
@@ -69,8 +69,8 @@
{
"id": 4,
"task_id": 4,
"starts_at": "2022-12-12T08:00:00+00:00",
"ends_at": "2022-12-12T10:00:00+00:00",
"starts_at": "2022-12-19T08:00:00+00:00",
"ends_at": "2022-12-19T10:00:00+00:00",
"title": "Task 2",
"project_code": "CO-2201",
"master_task_color": "#FDE1FF"
@@ -79,8 +79,8 @@
{
"id": 5,
"task_id": 5,
"starts_at": "2022-12-13T07:00:00+00:00",
"ends_at": "2022-12-13T11:00:00+00:00",
"starts_at": "2022-12-20T09:00:00+00:00",
"ends_at": "2022-12-20T12:00:00+00:00",
"title": "Task 5",
"is_blocker": true,
"master_task_color": null
@@ -89,8 +89,8 @@
{
"id": 6,
"task_id": 6,
"starts_at": "2022-12-13T09:00:00+00:00",
"ends_at": "2022-12-13T12:00:00+00:00",
"starts_at": "2022-12-20T09:00:00+00:00",
"ends_at": "2022-12-20T12:00:00+00:00",
"title": "Task 6",
"project_code": "CO-2201",
"master_task_color": "#E9FFE6"
@@ -99,8 +99,8 @@
{
"id": 7,
"task_id": 7,
"starts_at": "2022-12-14T12:00:00+00:00",
"ends_at": "2022-12-14T16:00:00+00:00",
"starts_at": "2022-12-21T12:00:00+00:00",
"ends_at": "2022-12-21T16:00:00+00:00",
"title": "Task 7",
"project_code": "CO-2201",
"master_task_color": "#E7DBF8"
+1 -1
View File
@@ -48,7 +48,7 @@ transition-group.vuecal__cell(
:event="event"
:all-day="allDay"
:cell-events="splitsCount ? split.events : events"
:overlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || []).overlaps"
:cellOverlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || [])"
:event-position="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || []).position"
:overlaps-streak="splitsCount ? split.overlapsStreak : cellOverlapsStreak")
template(#event="{ event, view }")
+16 -1
View File
@@ -40,7 +40,7 @@ export default {
cellFormattedDate: { type: String, default: "" },
event: { type: Object, default: () => ({}) },
cellEvents: { type: Array, default: () => [] },
overlaps: { type: Array, default: () => [] },
cellOverlaps: { type: Object, default: () => ({}) },
// If multiple simultaneous events, the events are placed from left to right from the
// one starting first to the last. (See utils/event.js > checkCellOverlappingEvents)
eventPosition: { type: Number, default: 0 },
@@ -225,6 +225,14 @@ export default {
},
computed: {
overlaps() {
return this.cellOverlaps.overlaps
},
sameOverlaps() {
return this.cellOverlaps.sameOverlaps
},
eventDimensions() {
const { startTimeMinutes, endTimeMinutes } = this.segment || this.event;
@@ -260,11 +268,18 @@ export default {
return {};
// let width = 100 / Math.min(this.overlaps.length + 1, this.overlapsStreak)
// let left = (100 - ((this.overlaps.length + 1) * 10 )) * this.eventPosition
let width = 100 - this.eventPosition * 10;
let left = (10 * this.eventPosition) / 2;
let zIdnex = (this.eventPosition + 1) * 10;
let background = this.event.master_task_color;
if (Array.isArray(this.cellOverlaps.sameOverlaps) && this.cellOverlaps.sameOverlaps.length) {
width = 50
left = 50 * this.eventPosition
zIdnex = 10
}
if (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) {
width = this.vuecal.minEventWidth;
left =
@@ -324,13 +324,14 @@ export default class EventUtils {
// The array is smaller and smaller as we loop.
_comparisonArray.shift()
if (!_cellOverlaps[e._eid]) _cellOverlaps[e._eid] = { overlaps: [], start: e.start, position: 0 }
if (!_cellOverlaps[e._eid]) _cellOverlaps[e._eid] = { overlaps: [], start: e.start, position: 0, sameOverlaps: [] }
_cellOverlaps[e._eid].position = 0
_comparisonArray.forEach(e2 => {
if (!_cellOverlaps[e2._eid]) _cellOverlaps[e2._eid] = { overlaps: [], start: e2.start, position: 0 }
if (!_cellOverlaps[e2._eid]) _cellOverlaps[e2._eid] = { overlaps: [], start: e2.start, position: 0, sameOverlaps: [] }
const eventIsInRange = this.eventInRange(e2, e.start, e.end)
const eventSameOverlap = this.eventSameRange(e2, e)
const eventsInSameTimeStep = options.overlapsPerTimeStep ? ud.datesInSameTimeStep(e.start, e2.start, options.timeStep) : 1
// Add to the overlaps array if overlapping.
if (!e.background && !e.allDay && !e2.background && !e2.allDay && eventIsInRange && eventsInSameTimeStep) {
@@ -340,6 +341,14 @@ export default class EventUtils {
_cellOverlaps[e2._eid].overlaps.push(e._eid)
_cellOverlaps[e2._eid].overlaps = [...new Set(_cellOverlaps[e2._eid].overlaps)] // Dedupe, most performant way.
_cellOverlaps[e2._eid].position++
if (eventSameOverlap) {
_cellOverlaps[e._eid].sameOverlaps.push(e2._eid)
_cellOverlaps[e._eid].sameOverlaps = [...new Set(_cellOverlaps[e._eid].sameOverlaps)] // Dedupe, most performant way.
_cellOverlaps[e2._eid].sameOverlaps.push(e._eid)
_cellOverlaps[e2._eid].sameOverlaps = [...new Set(_cellOverlaps[e2._eid].sameOverlaps)] // Dedupe, most performant way.
}
}
// Remove from the overlaps array if not overlapping or if 1 of the 2 events is background or all-day long.
else {
@@ -425,4 +434,10 @@ export default class EventUtils {
const endTimestamp = event.end.getTime()
return startTimestamp < end.getTime() && endTimestamp > start.getTime()
}
eventSameRange(event1, event2) {
const isSameStart = event1.start.getTime() == event2.start.getTime()
const isSameEnd = event1.end.getTime() == event2.end.getTime()
return isSameStart && isSameEnd
}
}