|
|
@@ -18,18 +18,15 @@ public class ProgressDemo : Component {
|
|
|
|
|
|
public override string markup { get {
|
|
|
return """
|
|
|
- <div sid="progress" class="demo-progress">
|
|
|
- <div class="progress-header">
|
|
|
- <h3>Task Progress</h3>
|
|
|
- <span sid="status-text" class="progress-status"></span>
|
|
|
- </div>
|
|
|
- <div class="progress-bar-container">
|
|
|
+ <div sid="progress" spry-continuation class="demo-progress">
|
|
|
+ <div spry-dynamic="progress-bar" class="progress-bar-container">
|
|
|
<div sid="progress-bar" class="progress-bar"
|
|
|
style-width-expr='format("%i%%", this.percent)'>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="progress-info">
|
|
|
- <span sid="percent-text" class="progress-percent"></span>
|
|
|
+ <div spry-dynamic="status" class="progress-info">
|
|
|
+ <span sid="percent-text" class="progress-percent" spry-unique content-expr='format("%i%%", this.percent)'>0%</span>
|
|
|
+ <span sid="status-text" class="progress-status" spry-unique content-expr="this.status">Ready</span>
|
|
|
</div>
|
|
|
<div class="progress-controls">
|
|
|
<button sid="start-btn" spry-action=":Start" spry-target="progress"
|
|
|
@@ -86,8 +83,9 @@ public class ProgressDemo : Component {
|
|
|
status = @"Almost done... $i%";
|
|
|
}
|
|
|
|
|
|
- // Send updates via SSE
|
|
|
- yield ctx.send_dynamic("progress");
|
|
|
+ // Send updates via SSE to the dynamic sections
|
|
|
+ yield ctx.send_dynamic("progress-bar");
|
|
|
+ yield ctx.send_dynamic("status");
|
|
|
|
|
|
// Simulate work
|
|
|
Timeout.add(200, () => {
|
|
|
@@ -101,23 +99,7 @@ public class ProgressDemo : Component {
|
|
|
status = "Complete!";
|
|
|
is_running = false;
|
|
|
|
|
|
- yield ctx.send_dynamic("progress");
|
|
|
+ yield ctx.send_dynamic("progress-bar");
|
|
|
+ yield ctx.send_dynamic("status");
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-/**
|
|
|
- * ProgressDemoWithSSE - Progress demo with SSE wrapper
|
|
|
- *
|
|
|
- * This version includes the spry-continuation attribute wrapper
|
|
|
- * for demonstrating SSE in the documentation.
|
|
|
- */
|
|
|
-public class ProgressDemoWithSSE : Component {
|
|
|
-
|
|
|
- public override string markup { get {
|
|
|
- return """
|
|
|
- <div sid="wrapper" spry-continuation>
|
|
|
- <spry-component name="ProgressDemo" sid="progress-demo" spry-dynamic="progress"/>
|
|
|
- </div>
|
|
|
- """;
|
|
|
- }}
|
|
|
-}
|