tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
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

use leptos::prelude::*;
use std::time::Duration;

#[cfg(not(feature = "ssr"))]
use crate::Datetime;
#[cfg(feature = "ssr")]
use surrealdb::Datetime;

#[component]
pub fn Timer(
    #[prop(optional)] start_time: Option<Datetime>,
    #[prop(default = false)] is_running: bool,
) -> impl IntoView {
    // Create a reactive signal to store the elapsed seconds
    let elapsed_seconds = RwSignal::new(0i64);

    // Calculate initial elapsed time if start_time is provided and timer is running
    let initial_elapsed = if is_running {
        if let Some(start) = start_time {
            #[cfg(not(feature = "ssr"))]
            {
                let start_timestamp = start.inner().timestamp();
                let now_timestamp = chrono::Utc::now().timestamp();
                (now_timestamp - start_timestamp).max(0)
            }
            #[cfg(feature = "ssr")]
            {
                let date_str = start.to_string();
                if let Ok(dt) = chrono::DateTime::parse_from_rfc3339(&date_str) {
                    let start_timestamp = dt.timestamp();
                    let now_timestamp = chrono::Utc::now().timestamp();
                    (now_timestamp - start_timestamp).max(0)
                } else {
                    0
                }
            }
        } else {
            0
        }
    } else {
        0
    };

    // Set initial elapsed time
    elapsed_seconds.set(initial_elapsed);

    // Set up an interval to increment seconds every 1000ms
    if is_running {
        Effect::new(move |_| {
            let _ = set_interval_with_handle(
                move || {
                    elapsed_seconds.update(|n| *n += 1);
                },
                Duration::from_secs(1),
            );
        });
    }

    // Format the elapsed time
    let formatted_time = move || {
        let total_seconds = elapsed_seconds.get();
        let hours = total_seconds / 3600;
        let minutes = (total_seconds % 3600) / 60;
        let seconds = total_seconds % 60;
        format!("{:02}:{:02}:{:02}", hours, minutes, seconds)
    };

    // Render the timer
    view! {
        <span class="font-mono">
            {move || if is_running { formatted_time() } else { String::new() }}
        </span>
    }
}