euv-example 0.3.6

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

use crate::*;

/// Formats a duration in seconds into a MM:SS display string.
///
/// # Arguments
///
/// - `i32`: The total seconds to format.
///
/// # Returns
///
/// - `String`: The formatted time string in MM:SS format.
fn format_time(total_seconds: i32) -> String {
    let minutes: i32 = total_seconds / 60;
    let seconds: i32 = total_seconds % 60;
    format!("{:02}:{:02}", minutes, seconds)
}

/// A timer demo page with stopwatch and countdown features.
///
/// # Returns
///
/// - `VirtualNode`: The timer demo page virtual DOM tree.
pub fn page_timer() -> VirtualNode {
    let stopwatch: UseStopwatch = use_stopwatch();
    let countdown: UseCountdown = use_countdown();
    html! {
        div {
            class: c_page_container()
            { page_header("Timer", "Stopwatch and countdown timer with interval-based updates.") }
            my_card {
                title: "Stopwatch"
                div {
                    class: c_timer_display()
                    span {
                        class: c_timer_value()
                        { format_time(stopwatch.seconds.get()) }
                    }
                }
                div {
                    class: c_timer_controls()
                    if { !stopwatch.running.get() } {
                        primary_button {
                            label: "Start"
                            onclick: stopwatch_on_start(stopwatch)
                            "Start"
                        }
                    } else {
                        primary_button {
                            label: "Pause"
                            onclick: stopwatch_on_pause(stopwatch)
                            "Pause"
                        }
                    }
                    primary_button {
                        label: "Reset"
                        onclick: stopwatch_on_reset(stopwatch)
                        "Reset"
                    }
                }
            }
            my_card {
                title: "Countdown Timer"
                div {
                    class: c_form_input_wrapper()
                    label {
                        class: c_form_label()
                        "Set seconds"
                    }
                    input {
                        r#type: "number"
                        min: "1"
                        max: "3600"
                        placeholder: "Enter seconds..."
                        value: countdown.input
                        class: c_form_input()
                        oninput: countdown_on_input(countdown)
                    }
                }
                div {
                    class: c_timer_display()
                    span {
                        class: c_timer_value()
                        { format_time(countdown.remaining.get()) }
                    }
                }
                div {
                    class: c_timer_controls()
                    if { !countdown.running.get() } {
                        primary_button {
                            label: "Start"
                            onclick: countdown_on_start(countdown)
                            "Start"
                        }
                    } else {
                        primary_button {
                            label: "Pause"
                            onclick: countdown_on_pause(countdown)
                            "Pause"
                        }
                    }
                    primary_button {
                        label: "Reset"
                        onclick: countdown_on_reset(countdown)
                        "Reset"
                    }
                }
                if { countdown.remaining.get() == 0 && !countdown.running.get() } {
                    div {
                        class: c_timer_done()
                        "⏰ Time's up!"
                    }
                } else {
                    ""
                }
            }
        }
    }
}