Spry/demo/DemoComponents/ProgressDemo.vala

using Spry;
using Inversion;

/**
 * ProgressDemo - A progress bar demo for the Continuations documentation
 * 
 * Demonstrates:
 * - spry-continuation attribute for SSE
 * - spry-dynamic for updatable sections
 * - continuation() method for real-time updates
 * - ContinuationContext API
 */
public class ProgressDemo : Component {
    
    public int percent { get; set; default = 0; }
    public string status { get; set; default = "Ready"; }
    public bool is_running { get; set; default = false; }
    
    public override string markup { get {
        return """
        <div sid="progress" spry-continuation class="demo-progress" style="padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
            <div spry-dynamic="progress-bar" class="progress-bar-container" style="background: #e0e0e0; border-radius: 8px; overflow: hidden; margin: 15px 0; height: 24px;">
                <div sid="progress-bar" class="progress-bar"
                     style-width-expr='format("%i%%", this.percent)'
                     style="height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; min-width: 40px;">
                </div>
            </div>
            <div spry-dynamic="status" class="progress-info" style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0;">
                <span sid="percent-text" class="progress-percent" spry-unique content-expr='format("%i%%", this.percent)' style="font-weight: bold; color: #333; font-size: 18px;">0%</span>
                <span sid="status-text" class="progress-status" spry-unique content-expr="this.status" style="color: #666; font-size: 14px; padding: 6px 12px; background: #e9ecef; border-radius: 4px; border-left: 3px solid #2196F3;">Ready</span>
            </div>
            <div class="progress-controls" style="display: flex; gap: 10px; margin-top: 15px;">
                <button sid="start-btn" spry-action=":Start" spry-target="progress"
                        class="progress-btn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s;">Start Task</button>
                <button sid="reset-btn" spry-action=":Reset" spry-target="progress"
                        class="progress-btn secondary" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s;">Reset</button>
            </div>
        </div>
        """;
    }}
    
    public override async void prepare() throws Error {
        this["status-text"].text_content = status;
        this["percent-text"].text_content = @"$percent%";
        
        if (is_running) {
            this["start-btn"].set_attribute("disabled", "disabled");
            this["start-btn"].text_content = "Running...";
        } else {
            this["start-btn"].remove_attribute("disabled");
            this["start-btn"].text_content = percent >= 100 ? "Complete!" : "Start Task";
        }
    }
    
    public async override void handle_action(string action) throws Error {
        switch (action) {
            case "Start":
                if (!is_running && percent < 100) {
                    is_running = true;
                    status = "Starting...";
                }
                break;
            case "Reset":
                percent = 0;
                status = "Ready";
                is_running = false;
                break;
        }
    }
    
    public async override void continuation(ContinuationContext ctx) throws Error {
        if (!is_running) return;
        
        for (int i = percent; i <= 100; i += 5) {
            percent = i;
            
            if (i < 30) {
                status = @"Processing... $i%";
            } else if (i < 60) {
                status = @"Building... $i%";
            } else if (i < 90) {
                status = @"Finalizing... $i%";
            } else {
                status = @"Almost done... $i%";
            }
            
            // Send updates via SSE to the dynamic sections
            yield ctx.send_dynamic("progress-bar");
            yield ctx.send_dynamic("status");
            
            // Simulate work
            Timeout.add(200, () => {
                continuation.callback();
                return false;
            });
            yield;
        }
        
        percent = 100;
        status = "Complete!";
        is_running = false;
        
        yield ctx.send_dynamic("progress-bar");
        yield ctx.send_dynamic("status");
    }
}