Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup test files and move to another folder

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-11-05 00:07:19 +01:00
parent 8456d8aa28
commit 9c765b35ab
28 changed files with 0 additions and 1981 deletions
Download patch file Download diff file Expand all files Collapse all files

62
.workbench/scenarios/scenario-1.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 1: No Overlap</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 1: No Overlap</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Three sequential events with no time overlap. All events should have stack level 0 since they don't conflict.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Event A: stackLevel=0 (stacked)<br>
Event B: stackLevel=0 (stacked)<br>
Event C: stackLevel=0 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S1A" data-title="Scenario 1: Event A" data-start="2025-10-06T08:00:00.000Z" data-end="2025-10-06T09:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 1px; height: 77px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 1: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S1B" data-title="Scenario 1: Event B" data-start="2025-10-06T09:00:00.000Z" data-end="2025-10-06T10:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 81px; height: 77px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="60">11:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 1: Event B</swp-event-title>
</swp-event>
<swp-event data-event-id="S1C" data-title="Scenario 1: Event C" data-start="2025-10-06T10:00:00.000Z" data-end="2025-10-06T11:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 161px; height: 77px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="60">12:00 - 13:00</swp-event-time>
<swp-event-title>Scenario 1: Event C</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-1',
expected: [
{ eventId: 'S1A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S1B', stackLevel: 0, type: 'stacked' },
{ eventId: 'S1C', stackLevel: 0, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

77
.workbench/scenarios/scenario-10.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 10: Four Column Grid</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 10: Four Column Grid</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Four events all starting at exactly the same time (14:00). Tests maximum column sharing with a 4-column grid layout.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Grid group with 4 columns at stackLevel=0<br>
Event A: in grid<br>
Event B: in grid<br>
Event C: in grid<br>
Event D: in grid
</div>
</div>
<div class="calendar-column">
<swp-event-group class="cols-4 stack-level-0" data-stack-link="{&quot;stackLevel&quot;:0}" style="top: 561px; margin-left: 0px; z-index: 100;">
<div style="position: relative;">
<swp-event data-event-id="S10A" data-title="Scenario 10: Event A" data-start="2025-10-10T12:00:00.000Z" data-end="2025-10-10T13:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 10: Event A</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S10B" data-title="Scenario 10: Event B" data-start="2025-10-10T12:00:00.000Z" data-end="2025-10-10T13:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 10: Event B</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S10C" data-title="Scenario 10: Event C" data-start="2025-10-10T12:00:00.000Z" data-end="2025-10-10T13:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 10: Event C</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S10D" data-title="Scenario 10: Event D" data-start="2025-10-10T12:00:00.000Z" data-end="2025-10-10T13:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 10: Event D</swp-event-title>
</swp-event>
</div>
</swp-event-group>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-10',
expected: [
{ eventId: 'S10A', stackLevel: 0, cols: 4, type: 'grid' },
{ eventId: 'S10B', stackLevel: 0, cols: 4, type: 'grid' },
{ eventId: 'S10C', stackLevel: 0, cols: 4, type: 'grid' },
{ eventId: 'S10D', stackLevel: 0, cols: 4, type: 'grid' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

61
.workbench/scenarios/scenario-2.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 2: Column Sharing (Grid)</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 2: Column Sharing (Grid)</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Two events starting at exactly the same time (10:00). These should be placed in a grid container with 2 columns, allowing them to share horizontal space.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Grid group with 2 columns at stackLevel=0<br>
Event A: in grid<br>
Event B: in grid
</div>
</div>
<div class="calendar-column">
<swp-event-group class="cols-2 stack-level-0" data-stack-link="{&quot;stackLevel&quot;:0}" style="top: 1px; margin-left: 0px; z-index: 100;">
<div style="position: relative;">
<swp-event data-event-id="S2A" data-title="Scenario 2: Event A" data-start="2025-10-06T08:00:00.000Z" data-end="2025-10-06T09:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 2: Event A</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S2B" data-title="Scenario 2: Event B" data-start="2025-10-06T08:00:00.000Z" data-end="2025-10-06T09:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 2: Event B</swp-event-title>
</swp-event>
</div>
</swp-event-group>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-2',
expected: [
{ eventId: 'S2A', stackLevel: 0, cols: 2, type: 'grid' },
{ eventId: 'S2B', stackLevel: 0, cols: 2, type: 'grid' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

69
.workbench/scenarios/scenario-3.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 3: Nested 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 3: Nested Stacking</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Progressive nesting pattern: Event A (09:00-15:00) contains B (10:00-13:00), B contains C (11:00-12:00), and C overlaps with D (12:30-13:30). Tests correct stack level calculation for nested events.</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=2 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S3A" data-title="Scenario 3: Event A" data-start="2025-10-07T07:00:00.000Z" data-end="2025-10-07T13:00:00.000Z" data-type="work" data-duration="360" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 1px; height: 357px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="360">09:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 3: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S3B" data-title="Scenario 3: Event B" data-start="2025-10-07T08:00:00.000Z" data-end="2025-10-07T11:00:00.000Z" data-type="work" data-duration="180" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 81px; height: 217px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="180">10:00 - 13:00</swp-event-time>
<swp-event-title>Scenario 3: Event B</swp-event-title>
</swp-event>
<swp-event data-event-id="S3C" data-title="Scenario 3: Event C" data-start="2025-10-07T09:00:00.000Z" data-end="2025-10-07T10:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:2}" style="position: absolute; top: 161px; height: 77px; left: 2px; right: 2px; margin-left: 30px; z-index: 102;">
<swp-event-time data-duration="60">11:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 3: Event C</swp-event-title>
</swp-event>
<swp-event data-event-id="S3D" data-title="Scenario 3: Event D" data-start="2025-10-07T10:30:00.000Z" data-end="2025-10-07T11:30:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:2}" style="position: absolute; top: 241px; height: 77px; left: 2px; right: 2px; margin-left: 30px; z-index: 102;">
<swp-event-time data-duration="60">12:30 - 13:30</swp-event-time>
<swp-event-title>Scenario 3: Event D</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-3',
expected: [
{ eventId: 'S3A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S3B', stackLevel: 1, type: 'stacked' },
{ eventId: 'S3C', stackLevel: 2, type: 'stacked' },
{ eventId: 'S3D', stackLevel: 2, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

69
.workbench/scenarios/scenario-4.html Normal file
View file

@ -0,0 +1,69 @@
<!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="{&quot;stackLevel&quot;: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="{&quot;stackLevel&quot;: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="{&quot;stackLevel&quot;: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="{&quot;stackLevel&quot;: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>

69
.workbench/scenarios/scenario-5.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 5: Three Column Share</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 5: Three Column Share</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Three events all starting at exactly the same time (10:00). Should create a grid layout with 3 columns.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Grid group with 3 columns at stackLevel=0<br>
Event A: in grid<br>
Event B: in grid<br>
Event C: in grid
</div>
</div>
<div class="calendar-column">
<swp-event-group class="cols-3 stack-level-0" data-stack-link="{&quot;stackLevel&quot;:0}" style="top: 1px; margin-left: 0px; z-index: 100;">
<div style="position: relative;">
<swp-event data-event-id="S5A" data-title="Scenario 5: Event A" data-start="2025-10-08T08:00:00.000Z" data-end="2025-10-08T09:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 5: Event A</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S5B" data-title="Scenario 5: Event B" data-start="2025-10-08T08:00:00.000Z" data-end="2025-10-08T09:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 5: Event B</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S5C" data-title="Scenario 5: Event C" data-start="2025-10-08T08:00:00.000Z" data-end="2025-10-08T09:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 5: Event C</swp-event-title>
</swp-event>
</div>
</swp-event-group>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-5',
expected: [
{ eventId: 'S5A', stackLevel: 0, cols: 3, type: 'grid' },
{ eventId: 'S5B', stackLevel: 0, cols: 3, type: 'grid' },
{ eventId: 'S5C', stackLevel: 0, cols: 3, type: 'grid' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

69
.workbench/scenarios/scenario-6.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 6: Overlapping Pairs</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 6: Overlapping Pairs</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Two separate pairs of overlapping events: (A, B) and (C, D). Each pair should be independent with their own stack levels.</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=0 (stacked)<br>
Event D: stackLevel=1 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S6A" data-title="Scenario 6: Event A" data-start="2025-10-08T08:00:00.000Z" data-end="2025-10-08T10:00:00.000Z" data-type="work" data-duration="120" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 161px; height: 157px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="120">10:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 6: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S6B" data-title="Scenario 6: Event B" data-start="2025-10-08T09:00:00.000Z" data-end="2025-10-08T10:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 241px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">11:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 6: Event B</swp-event-title>
</swp-event>
<swp-event data-event-id="S6C" data-title="Scenario 6: Event C" data-start="2025-10-08T11:00:00.000Z" data-end="2025-10-08T13:00:00.000Z" data-type="work" data-duration="120" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 401px; height: 157px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="120">13:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 6: Event C</swp-event-title>
</swp-event>
<swp-event data-event-id="S6D" data-title="Scenario 6: Event D" data-start="2025-10-08T12:00:00.000Z" data-end="2025-10-08T13:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 481px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 6: Event D</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-6',
expected: [
{ eventId: 'S6A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S6B', stackLevel: 1, type: 'stacked' },
{ eventId: 'S6C', stackLevel: 0, type: 'stacked' },
{ eventId: 'S6D', stackLevel: 1, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

62
.workbench/scenarios/scenario-7.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 7: Long Event Container</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 7: Long Event Container</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>One long event (A: 09:00-15:00) containing two shorter events (B: 10:00-11:00, C: 12:00-13:00) that don't overlap with each other. B and C should both have the same stack level.</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=1 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S7A" data-title="Scenario 7: Event A" data-start="2025-10-09T07:00:00.000Z" data-end="2025-10-09T13:00:00.000Z" data-type="work" data-duration="360" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 1px; height: 357px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="360">09:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 7: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S7B" data-title="Scenario 7: Event B" data-start="2025-10-09T08:00:00.000Z" data-end="2025-10-09T09:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 81px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 7: Event B</swp-event-title>
</swp-event>
<swp-event data-event-id="S7C" data-title="Scenario 7: Event C" data-start="2025-10-09T10:00:00.000Z" data-end="2025-10-09T11:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 241px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">12:00 - 13:00</swp-event-time>
<swp-event-title>Scenario 7: Event C</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-7',
expected: [
{ eventId: 'S7A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S7B', stackLevel: 1, type: 'stacked' },
{ eventId: 'S7C', stackLevel: 1, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

55
.workbench/scenarios/scenario-8.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 8: Edge-Adjacent Events</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 8: Edge-Adjacent Events</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Events that touch but don't overlap: Event A (10:00-11:00) and Event B (11:00-12:00). A ends exactly when B starts, so they should NOT stack.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Event A: stackLevel=0 (stacked)<br>
Event B: stackLevel=0 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S8A" data-title="Scenario 8: Event A" data-start="2025-10-09T08:00:00.000Z" data-end="2025-10-09T09:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 241px; height: 77px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="60">10:00 - 11:00</swp-event-time>
<swp-event-title>Scenario 8: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S8B" data-title="Scenario 8: Event B" data-start="2025-10-09T09:00:00.000Z" data-end="2025-10-09T10:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 321px; height: 77px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="60">11:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 8: Event B</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-8',
expected: [
{ eventId: 'S8A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S8B', stackLevel: 0, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

67
.workbench/scenarios/scenario-9.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 9: End-to-Start Chain</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 9: End-to-Start Chain</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Events linked by end-to-start conflicts within the threshold: Event A (12:00-13:00), Event B (12:30-13:30), and Event C (13:15-15:00). Even though C doesn't start close to A, it starts within threshold before B ends, creating a conflict chain A→B→C.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Grid group with 2 columns at stackLevel=0<br>
Event A: in grid (column 1)<br>
Event B: in grid (column 2)<br>
Event C: in grid (column 1)
</div>
</div>
<div class="calendar-column">
<swp-event-group class="cols-2 stack-level-0" data-stack-link="{&quot;stackLevel&quot;:0}" style="top: 481px; margin-left: 0px; z-index: 100;">
<div style="position: relative;">
<swp-event data-event-id="S9A" data-title="Scenario 9: Event A" data-start="2025-10-09T10:00:00.000Z" data-end="2025-10-09T11:00:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 0px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">12:00 - 13:00</swp-event-time>
<swp-event-title>Scenario 9: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S9C" data-title="Scenario 9: Event C" data-start="2025-10-09T11:15:00.000Z" data-end="2025-10-09T13:00:00.000Z" data-type="work" data-duration="105" style="position: absolute; top: 100px; height: 137px; left: 0px; right: 0px;">
<swp-event-time data-duration="105">13:15 - 15:00</swp-event-time>
<swp-event-title>Scenario 9: Event C</swp-event-title>
</swp-event>
</div>
<div style="position: relative;">
<swp-event data-event-id="S9B" data-title="Scenario 9: Event B" data-start="2025-10-09T10:30:00.000Z" data-end="2025-10-09T11:30:00.000Z" data-type="work" data-duration="60" style="position: absolute; top: 40px; height: 77px; left: 0px; right: 0px;">
<swp-event-time data-duration="60">12:30 - 13:30</swp-event-time>
<swp-event-title>Scenario 9: Event B</swp-event-title>
</swp-event>
</div>
</swp-event-group>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-9',
expected: [
{ eventId: 'S9A', stackLevel: 0, cols: 2, type: 'grid' },
{ eventId: 'S9B', stackLevel: 0, cols: 2, type: 'grid' },
{ eventId: 'S9C', stackLevel: 0, cols: 2, type: 'grid' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>

162
.workbench/scenarios/scenario-styles.css Normal file
View file

@ -0,0 +1,162 @@
/* Shared styles for all scenario visualization files */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
.scenario-container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
margin-top: 0;
}
.scenario-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e0e0e0;
}
.scenario-title {
margin: 0;
}
.test-badge {
display: inline-block;
margin-left: 15px;
padding: 6px 14px;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.test-passed {
background: #4caf50;
color: white;
}
.test-failed {
background: #f44336;
color: white;
}
.test-pending {
background: #ff9800;
color: white;
}
.scenario-description {
background: #f8f9fa;
padding: 15px;
border-left: 4px solid #b53f7a;
margin-bottom: 20px;
}
.expected-result {
background: #e8f5e9;
padding: 12px;
border-radius: 4px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.calendar-column {
position: relative;
width: 350px;
height: 800px;
border: 2px solid #ddd;
border-radius: 8px;
background: white;
overflow: hidden;
margin: 20px 0;
}
/* Event styling */
swp-event-group {
position: absolute;
left: 0;
right: 0;
display: flex;
gap: 4px;
}
swp-event-group > div {
flex: 1;
min-width: 0;
}
swp-event {
display: block;
padding: 8px;
border-left: 4px solid #b53f7a;
background: #fff3e0;
border-radius: 4px;
font-size: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
swp-event-time {
display: block;
font-weight: bold;
margin-bottom: 4px;
color: #666;
}
swp-event-title {
display: block;
color: #333;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #b53f7a;
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}
.test-details {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.test-details h4 {
margin-top: 0;
color: #666;
}
.test-result-line {
padding: 4px 0;
}
.test-result-line.passed {
color: #4caf50;
}
.test-result-line.failed {
color: #f44336;
}

152
.workbench/scenarios/scenario-test-runner.js Normal file
View file

@ -0,0 +1,152 @@
/**
* Scenario Test Runner
* Validates that rendered events match expected layout
*/
export class ScenarioTestRunner {
/**
* Validate a scenario's rendered output
* @param {string} scenarioId - e.g., "scenario-1"
* @param {Array} expectedResults - Array of {eventId, stackLevel, cols?, type: 'grid'|'stacked'}
* @returns {object} - {passed: boolean, results: Array, message: string}
*/
static validateScenario(scenarioId, expectedResults) {
const results = [];
let allPassed = true;
for (const expected of expectedResults) {
const result = this.validateEvent(expected.eventId, expected);
results.push(result);
if (!result.passed) {
allPassed = false;
}
}
return {
passed: allPassed,
results,
message: allPassed ? 'All tests passed ✅' : 'Some tests failed ❌'
};
}
/**
* Validate a single event
*/
static validateEvent(eventId, expected) {
const eventEl = document.querySelector(`swp-event[data-event-id="${eventId}"]`);
if (!eventEl) {
return {
passed: false,
eventId,
message: `Event ${eventId} not found in DOM`
};
}
const errors = [];
// Check if in grid group
const gridGroup = eventEl.closest('swp-event-group');
if (expected.type === 'grid') {
if (!gridGroup) {
errors.push(`Expected to be in grid group, but found as stacked event`);
} else {
// Validate grid group properties
const groupStackLevel = this.getStackLevel(gridGroup);
if (groupStackLevel !== expected.stackLevel) {
errors.push(`Grid group stack level: expected ${expected.stackLevel}, got ${groupStackLevel}`);
}
if (expected.cols) {
const cols = this.getColumnCount(gridGroup);
if (cols !== expected.cols) {
errors.push(`Grid columns: expected ${expected.cols}, got ${cols}`);
}
}
}
} else if (expected.type === 'stacked') {
if (gridGroup) {
errors.push(`Expected to be stacked, but found in grid group`);
} else {
// Validate stacked event properties
const stackLevel = this.getStackLevel(eventEl);
if (stackLevel !== expected.stackLevel) {
errors.push(`Stack level: expected ${expected.stackLevel}, got ${stackLevel}`);
}
}
}
return {
passed: errors.length === 0,
eventId,
message: errors.length === 0 ? '✅' : errors.join('; ')
};
}
/**
* Get stack level from element
*/
static getStackLevel(element) {
const stackLink = element.getAttribute('data-stack-link');
if (stackLink) {
try {
const parsed = JSON.parse(stackLink);
return parsed.stackLevel;
} catch (e) {
return null;
}
}
// Try class name fallback
const classMatch = element.className.match(/stack-level-(\d+)/);
return classMatch ? parseInt(classMatch[1]) : null;
}
/**
* Get column count from grid group
*/
static getColumnCount(gridGroup) {
const classMatch = gridGroup.className.match(/cols-(\d+)/);
return classMatch ? parseInt(classMatch[1]) : null;
}
/**
* Display test results in the DOM
*/
static displayResults(containerId, results) {
const container = document.getElementById(containerId);
if (!container) return;
const badge = document.createElement('span');
badge.className = `test-badge ${results.passed ? 'test-passed' : 'test-failed'}`;
badge.textContent = results.message;
container.appendChild(badge);
// Add detailed results
const details = document.createElement('div');
details.className = 'test-details';
details.innerHTML = '<h4>Test Results:</h4>';
results.results.forEach(r => {
const line = document.createElement('div');
line.className = `test-result-line ${r.passed ? 'passed' : 'failed'}`;
line.textContent = `${r.eventId}: ${r.message}`;
details.appendChild(line);
});
container.appendChild(details);
}
}
// Auto-run tests if window.scenarioTests is defined
window.addEventListener('DOMContentLoaded', () => {
if (window.scenarioTests) {
const results = ScenarioTestRunner.validateScenario(
window.scenarioTests.id,
window.scenarioTests.expected
);
ScenarioTestRunner.displayResults('test-results', results);
}
});