Implements offline-first calendar sync infrastructure
Adds IndexedDB and operation queue for robust offline synchronization Introduces SyncManager to handle background data synchronization Supports local event operations with automatic remote sync queuing Enhances application reliability and user experience in low/no connectivity scenarios
This commit is contained in:
Janus C. H. Knudsen
parent
9c765b35ab
commit
e7011526e3
20 changed files with 3822 additions and 57 deletions
|
|
@ -1,150 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="da">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event Stacking Scenarios - Test Suite</title>
|
||||
<link rel="stylesheet" href="scenarios/scenario-styles.css">
|
||||
<style>
|
||||
.scenario-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.scenario-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.scenario-card h3 {
|
||||
margin-top: 0;
|
||||
color: #b53f7a;
|
||||
}
|
||||
|
||||
.scenario-card p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scenario-link {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #b53f7a;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.scenario-link:hover {
|
||||
background: #8e3260;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-left: 4px solid #b53f7a;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scenario-container">
|
||||
<h1>Event Stacking & Grid Layout - Test Scenarios</h1>
|
||||
|
||||
<div class="intro">
|
||||
<h2>About This Test Suite</h2>
|
||||
<p>
|
||||
This test suite validates the event layout algorithm for the Calendar Plantempus application.
|
||||
The algorithm determines how overlapping events should be rendered using two strategies:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>GRID Layout:</strong> Events that start within a threshold (±30 minutes) are placed in a grid container where they can share columns</li>
|
||||
<li><strong>STACKED Layout:</strong> Events are stacked with horizontal offsets (15px per level)</li>
|
||||
</ul>
|
||||
<p>
|
||||
Each scenario tests a specific edge case or layout pattern. Click on a scenario below to view the visual representation and test results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scenario-grid">
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 1: No Overlap</h3>
|
||||
<p>Three sequential events with no time overlap. All should have stack level 0.</p>
|
||||
<a href="scenarios/scenario-1.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 2: Column Sharing (Grid)</h3>
|
||||
<p>Two events starting at same time (10:00) - should share columns in a grid with 2 columns.</p>
|
||||
<a href="scenarios/scenario-2.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 3: Nested Stacking</h3>
|
||||
<p>Events with progressive nesting: A contains B, B contains C, C and D overlap. Tests stack level calculation.</p>
|
||||
<a href="scenarios/scenario-3.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 4: Complex Stacking</h3>
|
||||
<p>Long event (A) with multiple shorter events (B, C, D) nested inside at different times.</p>
|
||||
<a href="scenarios/scenario-4.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 5: Three Column Share</h3>
|
||||
<p>Three events all starting at 10:00 - should create a 3-column grid layout.</p>
|
||||
<a href="scenarios/scenario-5.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 6: Overlapping Pairs</h3>
|
||||
<p>Two separate pairs of overlapping events. Each pair should be independent.</p>
|
||||
<a href="scenarios/scenario-6.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 7: Long Event Container</h3>
|
||||
<p>One long event (A) containing two shorter events (B, C) that don't overlap each other.</p>
|
||||
<a href="scenarios/scenario-7.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 8: Edge-Adjacent Events</h3>
|
||||
<p>Events that touch but don't overlap (A ends when B starts). Should not stack.</p>
|
||||
<a href="scenarios/scenario-8.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 9: End-to-Start Chain</h3>
|
||||
<p>Events linked by end-to-start conflicts within threshold. Tests conflict chain detection.</p>
|
||||
<a href="scenarios/scenario-9.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 10: Four Column Grid</h3>
|
||||
<p>Four events all starting at same time - maximum column sharing test.</p>
|
||||
<a href="scenarios/scenario-10.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue