70 lines
3.5 KiB
HTML
70 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="da">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Scenario 4: Complex Stacking</title>
|
||
|
|
<link rel="stylesheet" href="scenario-styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="scenario-container">
|
||
|
|
<a href="../stacking-visualization-new.html" class="back-link">← Back to All Scenarios</a>
|
||
|
|
|
||
|
|
<div class="scenario-header">
|
||
|
|
<h1 class="scenario-title">Scenario 4: Complex Stacking</h1>
|
||
|
|
<div id="test-results"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="scenario-description">
|
||
|
|
<h3>Description</h3>
|
||
|
|
<p>Long event A (14:00-20:00) with multiple shorter events (B, C, D) nested inside at different times. Tests multiple stack levels with varying overlap patterns.</p>
|
||
|
|
|
||
|
|
<div class="expected-result">
|
||
|
|
<strong>Expected Result:</strong><br>
|
||
|
|
Event A: stackLevel=0 (stacked)<br>
|
||
|
|
Event B: stackLevel=1 (stacked)<br>
|
||
|
|
Event C: stackLevel=2 (stacked)<br>
|
||
|
|
Event D: stackLevel=1 (stacked)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="calendar-column">
|
||
|
|
<swp-event data-event-id="S4A" data-title="Scenario 4: Event A" data-start="2025-10-07T12:00:00.000Z" data-end="2025-10-07T18:00:00.000Z" data-type="work" data-duration="360" data-stack-link="{"stackLevel":0}" style="position: absolute; top: 481px; height: 357px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
|
||
|
|
<swp-event-time data-duration="360">14:00 - 20:00</swp-event-time>
|
||
|
|
<swp-event-title>Scenario 4: Event A</swp-event-title>
|
||
|
|
</swp-event>
|
||
|
|
|
||
|
|
<swp-event data-event-id="S4B" data-title="Scenario 4: Event B" data-start="2025-10-07T13:00:00.000Z" data-end="2025-10-07T15:00:00.000Z" data-type="work" data-duration="120" data-stack-link="{"stackLevel":1}" style="position: absolute; top: 561px; height: 157px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
|
||
|
|
<swp-event-time data-duration="120">15:00 - 17:00</swp-event-time>
|
||
|
|
<swp-event-title>Scenario 4: Event B</swp-event-title>
|
||
|
|
</swp-event>
|
||
|
|
|
||
|
|
<swp-event data-event-id="S4C" data-title="Scenario 4: Event C" data-start="2025-10-07T13:30:00.000Z" data-end="2025-10-07T14:30:00.000Z" data-type="work" data-duration="60" data-stack-link="{"stackLevel":2}" style="position: absolute; top: 601px; height: 77px; left: 2px; right: 2px; margin-left: 30px; z-index: 102;">
|
||
|
|
<swp-event-time data-duration="60">15:30 - 16:30</swp-event-time>
|
||
|
|
<swp-event-title>Scenario 4: Event C</swp-event-title>
|
||
|
|
</swp-event>
|
||
|
|
|
||
|
|
<swp-event data-event-id="S4D" data-title="Scenario 4: Event D" data-start="2025-10-07T16:00:00.000Z" data-end="2025-10-07T17:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{"stackLevel":1}" style="position: absolute; top: 721px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
|
||
|
|
<swp-event-time data-duration="60">18:00 - 19:00</swp-event-time>
|
||
|
|
<swp-event-title>Scenario 4: Event D</swp-event-title>
|
||
|
|
</swp-event>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import { ScenarioTestRunner } from './scenario-test-runner.js';
|
||
|
|
|
||
|
|
window.scenarioTests = {
|
||
|
|
id: 'scenario-4',
|
||
|
|
expected: [
|
||
|
|
{ eventId: 'S4A', stackLevel: 0, type: 'stacked' },
|
||
|
|
{ eventId: 'S4B', stackLevel: 1, type: 'stacked' },
|
||
|
|
{ eventId: 'S4C', stackLevel: 2, type: 'stacked' },
|
||
|
|
{ eventId: 'S4D', stackLevel: 1, type: 'stacked' }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="module" src="scenario-test-runner.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|