DevactionUI.Timer (devaction_ui v0.1.0)

Copy Markdown View Source

A timer of hours for a task: a small caption of its state, the time in large mono digits, what is being timed, and two round buttons: start or pause, and stop and log. The LiveView owns the truth (it is not lost on a reload): the seconds already counted (base) and, while it runs, the moment it started (started_at, in seconds since the epoch). The browser only draws the passing seconds between two updates (DevactionUI.Timer hook); elapsed/3 is what the server counts when it logs.

Summary

Functions

elapsed(base, started_at, now)

The seconds counted: base plus, while running, the time since started_at.

format(seconds)

Seconds as H:MM:SS.

timer(assigns)

Functions

elapsed(base, started_at, now)

@spec elapsed(non_neg_integer(), integer() | nil, integer()) :: non_neg_integer()

The seconds counted: base plus, while running, the time since started_at.

format(seconds)

@spec format(non_neg_integer()) :: String.t()

Seconds as H:MM:SS.

timer(assigns)

Attributes

  • id (:string) (required)
  • base (:integer) (required) - seconds counted before the last start.
  • started_at (:integer) - when it was started (seconds since the epoch); nil when paused. Defaults to nil.
  • now (:integer) - the server's clock in seconds; read when the component is drawn (given only in tests). Defaults to nil.
  • label (:string) (required) - what is timed, e.g. Time on DIA-142.
  • toggle_event (:string) (required) - sent by the start/pause button.
  • log_event (:string) (required) - sent by the log button.
  • start_label (:string) (required) - names the start button for assistive technology.
  • pause_label (:string) (required) - names the pause button for assistive technology.
  • log_label (:string) (required) - names the stop-and-log button for assistive technology.
  • running_text (:string) - the small caption while it runs, e.g. RUNNING. Defaults to nil.
  • paused_text (:string) - the small caption while it is paused, e.g. PAUSED. Defaults to nil.
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • start_icon - the icon of the round start button.
  • pause_icon - the icon of the round pause button.
  • log_icon - the icon of the round stop-and-log button.