ff067cfac3
Adds logic to handle event overlaps in the calendar view. It introduces two patterns: column sharing for events with the same start time (rendered using flexbox) and stacking for events with a >30 min difference (rendered with reduced width and z-index). It also introduces deep linking to specific events via URL parameters.
143 lines
No EOL
4.1 KiB
Markdown
143 lines
No EOL
4.1 KiB
Markdown
# Event Overlap Rendering Implementation Plan
|
|
|
|
## Oversigt
|
|
Implementer event overlap rendering med to forskellige patterns:
|
|
1. **Column Sharing**: Events med samme start tid deles om bredden med flexbox
|
|
2. **Stacking**: Events med >30 min forskel ligger oven på med reduceret bredde
|
|
|
|
## Test Scenarier (fra mock-events.json)
|
|
|
|
### September 2 - Stacking Test
|
|
- Event 93: "Team Standup" 09:00-09:30
|
|
- Event 94: "Product Planning" 14:00-16:00
|
|
- Event 96: "Deep Work" 15:00-15:30 (>30 min efter standup, skal være 15px mindre)
|
|
|
|
### September 4 - Column Sharing Test
|
|
- Event 97: "Team Standup" 09:00-09:30
|
|
- Event 98: "Technical Review" 15:00-16:30
|
|
- Event 100: "Sprint Review" 15:00-16:00 (samme start tid som Technical Review - skal deles 50/50)
|
|
|
|
## Teknisk Arkitektur
|
|
|
|
### 1. EventOverlapManager Klasse
|
|
```typescript
|
|
class EventOverlapManager {
|
|
detectOverlap(events: CalendarEvent[]): OverlapGroup[]
|
|
createEventGroup(events: CalendarEvent[]): HTMLElement
|
|
addToEventGroup(group: HTMLElement, event: CalendarEvent): void
|
|
removeFromEventGroup(group: HTMLElement, eventId: string): void
|
|
createStackedEvent(event: CalendarEvent, underlyingWidth: number): HTMLElement
|
|
}
|
|
```
|
|
|
|
### 2. CSS Struktur
|
|
```css
|
|
.event-group {
|
|
position: absolute;
|
|
display: flex;
|
|
gap: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
.event-group swp-event {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.stacked-event {
|
|
position: absolute;
|
|
width: calc(100% - 15px);
|
|
right: 0;
|
|
z-index: var(--z-stacked-event);
|
|
}
|
|
```
|
|
|
|
### 3. DOM Struktur
|
|
```html
|
|
<!-- Normal event -->
|
|
<swp-event>Single Event</swp-event>
|
|
|
|
<!-- Column sharing group -->
|
|
<div class="event-group" style="position: absolute; top: 200px;">
|
|
<swp-event>Event 1</swp-event>
|
|
<swp-event>Event 2</swp-event>
|
|
</div>
|
|
|
|
<!-- Stacked event -->
|
|
<swp-event class="stacked-event" style="top: 210px;">Stacked Event</swp-event>
|
|
```
|
|
|
|
## Implementerings Steps
|
|
|
|
### Phase 1: Core Infrastructure
|
|
1. Opret EventOverlapManager klasse
|
|
2. Implementer overlap detection algoritme
|
|
3. Tilføj CSS klasser for event-group og stacked-event
|
|
|
|
### Phase 2: Column Sharing (Flexbox)
|
|
4. Implementer createEventGroup metode med flexbox
|
|
5. Implementer addToEventGroup og removeFromEventGroup
|
|
6. Integrér i BaseEventRenderer.renderEvent
|
|
|
|
### Phase 3: Stacking Logic
|
|
7. Implementer stacking detection (>30 min forskel)
|
|
8. Implementer createStackedEvent med reduceret bredde
|
|
9. Tilføj z-index management
|
|
|
|
### Phase 4: Drag & Drop Integration
|
|
10. Modificer drag & drop handleDragEnd til overlap detection
|
|
11. Implementer event repositioning ved drop på eksisterende events
|
|
12. Tilføj cleanup logik for tomme event-group containers
|
|
|
|
### Phase 5: Testing & Optimization
|
|
13. Test column sharing med September 4 events (samme start tid)
|
|
14. Test stacking med September 2 events (>30 min forskel)
|
|
15. Test kombinerede scenarier
|
|
16. Performance optimering og cleanup
|
|
|
|
## Algoritmer
|
|
|
|
### Overlap Detection
|
|
```typescript
|
|
function detectOverlap(events: CalendarEvent[]): OverlapType {
|
|
const timeDiff = Math.abs(event1.startTime - event2.startTime);
|
|
|
|
if (timeDiff === 0) return 'COLUMN_SHARING';
|
|
if (timeDiff > 30 * 60 * 1000) return 'STACKING';
|
|
return 'NORMAL';
|
|
}
|
|
```
|
|
|
|
### Column Sharing Calculation
|
|
```typescript
|
|
function calculateColumnSharing(events: CalendarEvent[]) {
|
|
const eventCount = events.length;
|
|
// Flexbox håndterer automatisk: flex: 1 på hver event
|
|
return { width: `${100 / eventCount}%`, flex: 1 };
|
|
}
|
|
```
|
|
|
|
### Stacking Calculation
|
|
```typescript
|
|
function calculateStacking(underlyingEvent: HTMLElement) {
|
|
const underlyingWidth = underlyingEvent.offsetWidth;
|
|
return {
|
|
width: underlyingWidth - 15,
|
|
right: 0,
|
|
zIndex: getNextZIndex()
|
|
};
|
|
}
|
|
```
|
|
|
|
## Event Bus Integration
|
|
- `overlap:detected` - Når overlap detekteres
|
|
- `overlap:group-created` - Når event-group oprettes
|
|
- `overlap:event-stacked` - Når event stacks oven på andet
|
|
- `overlap:group-cleanup` - Når tom group fjernes
|
|
|
|
## Success Criteria
|
|
- [x] September 4: Technical Review og Sprint Review deles 50/50 i bredden
|
|
- [x] September 2: Deep Work ligger oven på med 15px mindre bredde
|
|
- [x] Drag & drop fungerer med overlap detection
|
|
- [x] Cleanup af tomme event-group containers
|
|
- [x] Z-index management - nyere events øverst |