DevactionUI.Timer (devaction_ui v0.2.3)

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. The stop-and-log button stays disabled while nothing has been counted (log_event is not sent then).

timer_mini/1 is the same clock made small for the bar of the app: a dot (green while it runs) and HH:MM in mono, drawn by the same hook. time_log/1 is the list of what was logged today, each entry with its time in mono on the right (HH:MM, or what the duration function of the caller makes of the seconds).

Summary

Functions

elapsed(base, started_at, now)

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

format(seconds)

Seconds as HH:MM:SS.

format_short(seconds)

Seconds as HH:MM, the seconds dropped.

time_log(assigns)
timer(assigns)
timer_mini(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 HH:MM:SS.

format_short(seconds)

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

Seconds as HH:MM, the seconds dropped.

time_log(assigns)

Attributes

  • id (:string) (required)
  • title (:string) (required) - the caption of the list, e.g. LOGGED TODAY.
  • entries (:list) (required) - %{id, label, seconds} each.
  • duration (:any) - a function of the seconds returning the text of the time; HH:MM when nil. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

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.

timer_mini(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; given only in tests. Defaults to nil.
  • label (:string) (required) - names the clock for assistive technology, e.g. Timer running.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. e.g. phx-click.