40 |
41 |
42 |
--------------------------------------------------------------------------------
/lib/stopwatch_web/live/stopwatch_live.ex:
--------------------------------------------------------------------------------
1 | defmodule StopwatchWeb.StopwatchLive do
2 | use StopwatchWeb, :live_view
3 | alias Stopwatch.TimerServer
4 |
5 | def mount(_params, _session, socket) do
6 | if connected?(socket), do: TimerServer.subscribe()
7 |
8 | {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
9 | {:ok, assign(socket, time: time, timer_status: timer_status)}
10 | end
11 |
12 | def render(assigns) do
13 | Phoenix.View.render(StopwatchWeb.StopwatchView, "stopwatch.html", assigns)
14 | end
15 |
16 | def handle_event("start", _value, socket) do
17 | :running = TimerServer.start_timer(Stopwatch.TimerServer)
18 | TimerServer.notify()
19 | {:noreply, socket}
20 | end
21 |
22 | def handle_event("stop", _value, socket) do
23 | :stopped = TimerServer.stop_timer(Stopwatch.TimerServer)
24 | TimerServer.notify()
25 | {:noreply, socket}
26 | end
27 |
28 | def handle_event("reset", _value, socket) do
29 | :reset = TimerServer.reset(Stopwatch.TimerServer)
30 | TimerServer.notify()
31 | {:noreply, socket}
32 | end
33 |
34 | def handle_info(:timer_updated, socket) do
35 | {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
36 |
37 | {:noreply, assign(socket, time: time, timer_status: timer_status)}
38 | end
39 | end
40 |
--------------------------------------------------------------------------------
/config/config.exs:
--------------------------------------------------------------------------------
1 | # This file is responsible for configuring your application
2 | # and its dependencies with the aid of the Config module.
3 | #
4 | # This configuration file is loaded before any dependency and
5 | # is restricted to this project.
6 |
7 | # General application configuration
8 | import Config
9 |
10 | # Configures the endpoint
11 | config :stopwatch, StopwatchWeb.Endpoint,
12 | url: [host: "localhost"],
13 | render_errors: [view: StopwatchWeb.ErrorView, accepts: ~w(html json), layout: false],
14 | pubsub_server: Stopwatch.PubSub,
15 | live_view: [signing_salt: "aLdXkckn"]
16 |
17 | # Configure esbuild (the version is required)
18 | config :esbuild,
19 | version: "0.14.29",
20 | default: [
21 | args:
22 | ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
23 | cd: Path.expand("../assets", __DIR__),
24 | env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
25 | ]
26 |
27 | # Configures Elixir's Logger
28 | config :logger, :console,
29 | format: "$time $metadata[$level] $message\n",
30 | metadata: [:request_id]
31 |
32 | # Use Jason for JSON parsing in Phoenix
33 | config :phoenix, :json_library, Jason
34 |
35 | # Import environment specific config. This must remain at the bottom
36 | # of this file so it overrides the configuration defined above.
37 | import_config "#{config_env()}.exs"
38 |
--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | # This file excludes paths from the Docker build context.
2 | #
3 | # By default, Docker's build context includes all files (and folders) in the
4 | # current directory. Even if a file isn't copied into the container it is still sent to
5 | # the Docker daemon.
6 | #
7 | # There are multiple reasons to exclude files from the build context:
8 | #
9 | # 1. Prevent nested folders from being copied into the container (ex: exclude
10 | # /assets/node_modules when copying /assets)
11 | # 2. Reduce the size of the build context and improve build time (ex. /build, /deps, /doc)
12 | # 3. Avoid sending files containing sensitive information
13 | #
14 | # More information on using .dockerignore is available here:
15 | # https://docs.docker.com/engine/reference/builder/#dockerignore-file
16 |
17 | .dockerignore
18 |
19 | # Ignore git, but keep git HEAD and refs to access current commit hash if needed:
20 | #
21 | # $ cat .git/HEAD | awk '{print ".git/"$2}' | xargs cat
22 | # d0b8727759e1e0e7aa3d41707d12376e373d5ecc
23 | .git
24 | !.git/HEAD
25 | !.git/refs
26 |
27 | # Common development/test artifacts
28 | /cover/
29 | /doc/
30 | /test/
31 | /tmp/
32 | .elixir_ls
33 |
34 | # Mix artifacts
35 | /_build/
36 | /deps/
37 | *.ez
38 |
39 | # Generated on crash by the VM
40 | erl_crash.dump
41 |
42 | # Static artifacts - These should be fetched and built inside the Docker image
43 | /assets/node_modules/
44 | /priv/static/assets/
45 | /priv/static/cache_manifest.json
46 |
--------------------------------------------------------------------------------
/lib/stopwatch_web/endpoint.ex:
--------------------------------------------------------------------------------
1 | defmodule StopwatchWeb.Endpoint do
2 | use Phoenix.Endpoint, otp_app: :stopwatch
3 |
4 | # The session will be stored in the cookie and signed,
5 | # this means its contents can be read but not tampered with.
6 | # Set :encryption_salt if you would also like to encrypt it.
7 | @session_options [
8 | store: :cookie,
9 | key: "_stopwatch_key",
10 | signing_salt: "XlKk51Ac"
11 | ]
12 |
13 | socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
14 |
15 | # Serve at "/" the static files from "priv/static" directory.
16 | #
17 | # You should set gzip to true if you are running phx.digest
18 | # when deploying your static files in production.
19 | plug Plug.Static,
20 | at: "/",
21 | from: :stopwatch,
22 | gzip: false,
23 | only: ~w(assets fonts images favicon.ico robots.txt)
24 |
25 | # Code reloading can be explicitly enabled under the
26 | # :code_reloader configuration of your endpoint.
27 | if code_reloading? do
28 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
29 | plug Phoenix.LiveReloader
30 | plug Phoenix.CodeReloader
31 | end
32 |
33 | plug Plug.RequestId
34 | plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
35 |
36 | plug Plug.Parsers,
37 | parsers: [:urlencoded, :multipart, :json],
38 | pass: ["*/*"],
39 | json_decoder: Phoenix.json_library()
40 |
41 | plug Plug.MethodOverride
42 | plug Plug.Head
43 | plug Plug.Session, @session_options
44 | plug StopwatchWeb.Router
45 | end
46 |
--------------------------------------------------------------------------------
/lib/stopwatch_web/live/stopwatch_live_js.ex:
--------------------------------------------------------------------------------
1 | defmodule StopwatchWeb.StopwatchLiveJS do
2 | use StopwatchWeb, :live_view
3 | alias Stopwatch.TimerDB
4 |
5 | def mount(_params, _session, socket) do
6 | if connected?(socket), do: TimerDB.subscribe()
7 |
8 | # {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
9 | # {:ok, assign(socket, time: time, timer_status: timer_status)}
10 | {status, start, stop} = TimerDB.get_timer_state(Stopwatch.TimerDB)
11 | # if running
12 | TimerDB.notify()
13 | {:ok, assign(socket, timer_status: status, start: start, stop: stop)}
14 | end
15 |
16 | def render(assigns) do
17 | Phoenix.View.render(StopwatchWeb.StopwatchView, "stopwatch_js.html", assigns)
18 | end
19 |
20 | def handle_event("start", _value, socket) do
21 | TimerDB.start_timer(Stopwatch.TimerDB)
22 |
23 | TimerDB.notify()
24 | {:noreply, socket}
25 | end
26 |
27 | def handle_event("stop", _value, socket) do
28 | TimerDB.stop_timer(Stopwatch.TimerDB)
29 | TimerDB.notify()
30 | {:noreply, socket}
31 | end
32 |
33 | def handle_event("reset", _value, socket) do
34 | TimerDB.reset_timer(Stopwatch.TimerDB)
35 | TimerDB.notify()
36 | {:noreply, socket}
37 | end
38 |
39 | def handle_info(:timer_updated, socket) do
40 | {timer_status, start, stop} = TimerDB.get_timer_state(Stopwatch.TimerDB)
41 | socket = assign(socket, timer_status: timer_status, start: start, stop: stop)
42 |
43 | {:noreply,
44 | push_event(socket, "timerUpdated", %{timer_status: timer_status, start: start, stop: stop})}
45 | end
46 | end
47 |
--------------------------------------------------------------------------------
/lib/stopwatch_web/telemetry.ex:
--------------------------------------------------------------------------------
1 | defmodule StopwatchWeb.Telemetry do
2 | use Supervisor
3 | import Telemetry.Metrics
4 |
5 | def start_link(arg) do
6 | Supervisor.start_link(__MODULE__, arg, name: __MODULE__)
7 | end
8 |
9 | @impl true
10 | def init(_arg) do
11 | children = [
12 | # Telemetry poller will execute the given period measurements
13 | # every 10_000ms. Learn more here: https://hexdocs.pm/telemetry_metrics
14 | {:telemetry_poller, measurements: periodic_measurements(), period: 10_000}
15 | # Add reporters as children of your supervision tree.
16 | # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()}
17 | ]
18 |
19 | Supervisor.init(children, strategy: :one_for_one)
20 | end
21 |
22 | def metrics do
23 | [
24 | # Phoenix Metrics
25 | summary("phoenix.endpoint.stop.duration",
26 | unit: {:native, :millisecond}
27 | ),
28 | summary("phoenix.router_dispatch.stop.duration",
29 | tags: [:route],
30 | unit: {:native, :millisecond}
31 | ),
32 |
33 | # VM Metrics
34 | summary("vm.memory.total", unit: {:byte, :kilobyte}),
35 | summary("vm.total_run_queue_lengths.total"),
36 | summary("vm.total_run_queue_lengths.cpu"),
37 | summary("vm.total_run_queue_lengths.io")
38 | ]
39 | end
40 |
41 | defp periodic_measurements do
42 | [
43 | # A module, function and arguments to be invoked periodically.
44 | # This function must call :telemetry.execute/3 and a metric must be added above.
45 | # {StopwatchWeb, :count_users, []}
46 | ]
47 | end
48 | end
49 |
--------------------------------------------------------------------------------
/lib/stopwatch/timer_server.ex:
--------------------------------------------------------------------------------
1 | defmodule Stopwatch.TimerServer do
2 | use GenServer
3 | alias Phoenix.PubSub
4 |
5 | def start_link(opts) do
6 | GenServer.start_link(__MODULE__, :ok, opts)
7 | end
8 |
9 | def start_timer(server) do
10 | GenServer.call(server, :start)
11 | end
12 |
13 | def stop_timer(server) do
14 | GenServer.call(server, :stop)
15 | end
16 |
17 | def get_timer_state(server) do
18 | GenServer.call(server, :state)
19 | end
20 |
21 | def reset(server) do
22 | GenServer.call(server, :reset)
23 | end
24 |
25 | @impl true
26 | def init(:ok) do
27 | {:ok, {:stopped, ~T[00:00:00]}}
28 | end
29 |
30 | @impl true
31 | def handle_call(:start, _from, {_status, time}) do
32 | Process.send_after(self(), :tick, 1000)
33 | {:reply, :running, {:running, time}}
34 | end
35 |
36 | @impl true
37 | def handle_call(:stop, _from, {_status, time}) do
38 | {:reply, :stopped, {:stopped, time}}
39 | end
40 |
41 | @impl true
42 | def handle_call(:state, _from, stopwatch) do
43 | {:reply, stopwatch, stopwatch}
44 | end
45 |
46 | @impl true
47 | def handle_call(:reset, _from, _stopwatch) do
48 | {:reply, :reset, {:stopped, ~T[00:00:00]}}
49 | end
50 |
51 | @impl true
52 | def handle_info(:tick, {status, time} = stopwatch) do
53 | if status == :running do
54 | Process.send_after(self(), :tick, 1000)
55 | notify()
56 | {:noreply, {status, Time.add(time, 1, :second)}}
57 | else
58 | {:noreply, stopwatch}
59 | end
60 | end
61 |
62 | def subscribe() do
63 | PubSub.subscribe(Stopwatch.PubSub, "liveview_stopwatch")
64 | end
65 |
66 | def notify() do
67 | PubSub.broadcast(Stopwatch.PubSub, "liveview_stopwatch", :timer_updated)
68 | end
69 | end
70 |
--------------------------------------------------------------------------------
/config/prod.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # For production, don't forget to configure the url host
4 | # to something meaningful, Phoenix uses this information
5 | # when generating URLs.
6 | #
7 | # Note we also include the path to a cache manifest
8 | # containing the digested version of static files. This
9 | # manifest is generated by the `mix phx.digest` task,
10 | # which you should run after static files are built and
11 | # before starting your production server.
12 | config :stopwatch, StopwatchWeb.Endpoint, cache_static_manifest: "priv/static/cache_manifest.json"
13 |
14 | # Do not print debug messages in production
15 | config :logger, level: :info
16 |
17 | # ## SSL Support
18 | #
19 | # To get SSL working, you will need to add the `https` key
20 | # to the previous section and set your `:url` port to 443:
21 | #
22 | # config :stopwatch, StopwatchWeb.Endpoint,
23 | # ...,
24 | # url: [host: "example.com", port: 443],
25 | # https: [
26 | # ...,
27 | # port: 443,
28 | # cipher_suite: :strong,
29 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
30 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
31 | # ]
32 | #
33 | # The `cipher_suite` is set to `:strong` to support only the
34 | # latest and more secure SSL ciphers. This means old browsers
35 | # and clients may not be supported. You can set it to
36 | # `:compatible` for wider support.
37 | #
38 | # `:keyfile` and `:certfile` expect an absolute path to the key
39 | # and cert in disk or a relative path inside priv, for example
40 | # "priv/ssl/server.key". For all supported SSL configuration
41 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
42 | #
43 | # We also recommend setting `force_ssl` in your endpoint, ensuring
44 | # no data is ever sent via http, always redirecting to https:
45 | #
46 | # config :stopwatch, StopwatchWeb.Endpoint,
47 | # force_ssl: [hsts: true]
48 | #
49 | # Check `Plug.SSL` for all available options in `force_ssl`.
50 |
--------------------------------------------------------------------------------
/config/runtime.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # config/runtime.exs is executed for all environments, including
4 | # during releases. It is executed after compilation and before the
5 | # system starts, so it is typically used to load production configuration
6 | # and secrets from environment variables or elsewhere. Do not define
7 | # any compile-time configuration in here, as it won't be applied.
8 | # The block below contains prod specific runtime configuration.
9 |
10 | # ## Using releases
11 | #
12 | # If you use `mix release`, you need to explicitly enable the server
13 | # by passing the PHX_SERVER=true when you start it:
14 | #
15 | # PHX_SERVER=true bin/stopwatch start
16 | #
17 | # Alternatively, you can use `mix phx.gen.release` to generate a `bin/server`
18 | # script that automatically sets the env var above.
19 | if System.get_env("PHX_SERVER") do
20 | config :stopwatch, StopwatchWeb.Endpoint, server: true
21 | end
22 |
23 | if config_env() == :prod do
24 | # The secret key base is used to sign/encrypt cookies and other secrets.
25 | # A default value is used in config/dev.exs and config/test.exs but you
26 | # want to use a different value for prod and you most likely don't want
27 | # to check this value into version control, so we use an environment
28 | # variable instead.
29 | secret_key_base =
30 | System.get_env("SECRET_KEY_BASE") ||
31 | raise """
32 | environment variable SECRET_KEY_BASE is missing.
33 | You can generate one by calling: mix phx.gen.secret
34 | """
35 |
36 | host = System.get_env("PHX_HOST") || "example.com"
37 | port = String.to_integer(System.get_env("PORT") || "4000")
38 |
39 | config :stopwatch, StopwatchWeb.Endpoint,
40 | url: [host: host, port: 443, scheme: "https"],
41 | http: [
42 | # Enable IPv6 and bind on all interfaces.
43 | # Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
44 | # See the documentation on https://hexdocs.pm/plug_cowboy/Plug.Cowboy.html
45 | # for details about using IPv6 vs IPv4 and loopback vs public addresses.
46 | ip: {0, 0, 0, 0, 0, 0, 0, 0},
47 | port: port
48 | ],
49 | secret_key_base: secret_key_base
50 | end
51 |
--------------------------------------------------------------------------------
/config/dev.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # For development, we disable any cache and enable
4 | # debugging and code reloading.
5 | #
6 | # The watchers configuration can be used to run external
7 | # watchers to your application. For example, we use it
8 | # with esbuild to bundle .js and .css sources.
9 | config :stopwatch, StopwatchWeb.Endpoint,
10 | # Binding to loopback ipv4 address prevents access from other machines.
11 | # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
12 | http: [ip: {127, 0, 0, 1}, port: 4000],
13 | check_origin: false,
14 | code_reloader: true,
15 | debug_errors: true,
16 | secret_key_base: "HbMpQwVovTusrMkXP4odvg/ZcoK1IJgn0CX9N02ItCnt69on8aLlLB5ykZhwtF7Z",
17 | watchers: [
18 | # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
19 | esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
20 | ]
21 |
22 | # ## SSL Support
23 | #
24 | # In order to use HTTPS in development, a self-signed
25 | # certificate can be generated by running the following
26 | # Mix task:
27 | #
28 | # mix phx.gen.cert
29 | #
30 | # Note that this task requires Erlang/OTP 20 or later.
31 | # Run `mix help phx.gen.cert` for more information.
32 | #
33 | # The `http:` config above can be replaced with:
34 | #
35 | # https: [
36 | # port: 4001,
37 | # cipher_suite: :strong,
38 | # keyfile: "priv/cert/selfsigned_key.pem",
39 | # certfile: "priv/cert/selfsigned.pem"
40 | # ],
41 | #
42 | # If desired, both `http:` and `https:` keys can be
43 | # configured to run both http and https servers on
44 | # different ports.
45 |
46 | # Watch static and templates for browser reloading.
47 | config :stopwatch, StopwatchWeb.Endpoint,
48 | live_reload: [
49 | patterns: [
50 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
51 | ~r"lib/stopwatch_web/(live|views)/.*(ex)$",
52 | ~r"lib/stopwatch_web/templates/.*(eex)$"
53 | ]
54 | ]
55 |
56 | # Do not include metadata nor timestamps in development logs
57 | config :logger, :console, format: "[$level] $message\n"
58 |
59 | # Set a higher stacktrace during development. Avoid configuring such
60 | # in production as building large stacktraces may be expensive.
61 | config :phoenix, :stacktrace_depth, 20
62 |
63 | # Initialize plugs at runtime for faster development compilation
64 | config :phoenix, :plug_init_mode, :runtime
65 |
--------------------------------------------------------------------------------
/mix.exs:
--------------------------------------------------------------------------------
1 | defmodule Stopwatch.MixProject do
2 | use Mix.Project
3 |
4 | def project do
5 | [
6 | app: :stopwatch,
7 | version: "0.1.0",
8 | elixir: "~> 1.13",
9 | elixirc_paths: elixirc_paths(Mix.env()),
10 | compilers: Mix.compilers(),
11 | start_permanent: Mix.env() == :prod,
12 | aliases: aliases(),
13 | deps: deps(),
14 | test_coverage: [tool: ExCoveralls],
15 | preferred_cli_env: [
16 | c: :test,
17 | coveralls: :test,
18 | "coveralls.detail": :test,
19 | "coveralls.post": :test,
20 | "coveralls.html": :test,
21 | "coveralls.json": :test
22 | ],
23 | ]
24 | end
25 |
26 | # Configuration for the OTP application.
27 | #
28 | # Type `mix help compile.app` for more information.
29 | def application do
30 | [
31 | mod: {Stopwatch.Application, []},
32 | extra_applications: [:logger, :runtime_tools]
33 | ]
34 | end
35 |
36 | # Specifies which paths to compile per environment.
37 | defp elixirc_paths(:test), do: ["lib", "test/support"]
38 | defp elixirc_paths(_), do: ["lib"]
39 |
40 | # Specifies your project dependencies.
41 | #
42 | # Type `mix help deps` for examples and options.
43 | defp deps do
44 | [
45 | {:phoenix, "~> 1.8.1"},
46 | {:phoenix_html, "~> 4.0"},
47 | {:phoenix_html_helpers, "~> 1.0"},
48 | {:phoenix_live_reload, "~> 1.2", only: :dev},
49 | {:phoenix_live_view, "~> 1.1.2"},
50 | {:phoenix_view, "~> 2.0"},
51 | {:floki, ">= 0.30.0", only: :test},
52 | {:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
53 | {:telemetry_metrics, "~> 1.0"},
54 | {:telemetry_poller, "~> 1.0"},
55 | {:jason, "~> 1.2"},
56 | {:plug_cowboy, "~> 2.5"},
57 |
58 | # Check test coverage: hex.pm/packages/excoveralls
59 | {:excoveralls, "~> 0.18.0", only: :test},
60 | {:lazy_html, ">= 0.1.0", only: :test}
61 | ]
62 | end
63 |
64 | # Aliases are shortcuts or tasks specific to the current project.
65 | # For example, to install project dependencies and perform other setup tasks, run:
66 | #
67 | # $ mix setup
68 | #
69 | # See the documentation for `Mix` for more info on aliases.
70 | defp aliases do
71 | [
72 | c: ["coveralls.html"],
73 | setup: ["deps.get"],
74 | "assets.deploy": ["esbuild default --minify", "phx.digest"]
75 | ]
76 | end
77 | end
78 |
--------------------------------------------------------------------------------
/assets/css/app.css:
--------------------------------------------------------------------------------
1 | /* This file is for your main application CSS */
2 | @import "./phoenix.css";
3 |
4 | /* Alerts and form errors used by phx.new */
5 | .alert {
6 | padding: 15px;
7 | margin-bottom: 20px;
8 | border: 1px solid transparent;
9 | border-radius: 4px;
10 | }
11 | .alert-info {
12 | color: #31708f;
13 | background-color: #d9edf7;
14 | border-color: #bce8f1;
15 | }
16 | .alert-warning {
17 | color: #8a6d3b;
18 | background-color: #fcf8e3;
19 | border-color: #faebcc;
20 | }
21 | .alert-danger {
22 | color: #a94442;
23 | background-color: #f2dede;
24 | border-color: #ebccd1;
25 | }
26 | .alert p {
27 | margin-bottom: 0;
28 | }
29 | .alert:empty {
30 | display: none;
31 | }
32 | .invalid-feedback {
33 | color: #a94442;
34 | display: block;
35 | margin: -1rem 0 2rem;
36 | }
37 |
38 | /* LiveView specific classes for your customization */
39 | .phx-no-feedback.invalid-feedback,
40 | .phx-no-feedback .invalid-feedback {
41 | display: none;
42 | }
43 |
44 | .phx-click-loading {
45 | opacity: 0.5;
46 | transition: opacity 1s ease-out;
47 | }
48 |
49 | .phx-loading{
50 | cursor: wait;
51 | }
52 |
53 | .phx-modal {
54 | opacity: 1!important;
55 | position: fixed;
56 | z-index: 1;
57 | left: 0;
58 | top: 0;
59 | width: 100%;
60 | height: 100%;
61 | overflow: auto;
62 | background-color: rgba(0,0,0,0.4);
63 | }
64 |
65 | .phx-modal-content {
66 | background-color: #fefefe;
67 | margin: 15vh auto;
68 | padding: 20px;
69 | border: 1px solid #888;
70 | width: 80%;
71 | }
72 |
73 | .phx-modal-close {
74 | color: #aaa;
75 | float: right;
76 | font-size: 28px;
77 | font-weight: bold;
78 | }
79 |
80 | .phx-modal-close:hover,
81 | .phx-modal-close:focus {
82 | color: black;
83 | text-decoration: none;
84 | cursor: pointer;
85 | }
86 |
87 | .fade-in-scale {
88 | animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
89 | }
90 |
91 | .fade-out-scale {
92 | animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
93 | }
94 |
95 | .fade-in {
96 | animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
97 | }
98 | .fade-out {
99 | animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
100 | }
101 |
102 | @keyframes fade-in-scale-keys{
103 | 0% { scale: 0.95; opacity: 0; }
104 | 100% { scale: 1.0; opacity: 1; }
105 | }
106 |
107 | @keyframes fade-out-scale-keys{
108 | 0% { scale: 1.0; opacity: 1; }
109 | 100% { scale: 0.95; opacity: 0; }
110 | }
111 |
112 | @keyframes fade-in-keys{
113 | 0% { opacity: 0; }
114 | 100% { opacity: 1; }
115 | }
116 |
117 | @keyframes fade-out-keys{
118 | 0% { opacity: 1; }
119 | 100% { opacity: 0; }
120 | }
121 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian instead of
2 | # Alpine to avoid DNS resolution issues in production.
3 | #
4 | # https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
5 | # https://hub.docker.com/_/ubuntu?tab=tags
6 | #
7 | #
8 | # This file is based on these images:
9 | #
10 | # - https://hub.docker.com/r/hexpm/elixir/tags - for the build image
11 | # - https://hub.docker.com/_/debian?tab=tags&page=1&name=bullseye-20210902-slim - for the release image
12 | # - https://pkgs.org/ - resource for finding needed packages
13 | # - Ex: hexpm/elixir:1.13.3-erlang-24.3.1-debian-bullseye-20210902-slim
14 | #
15 | ARG ELIXIR_VERSION=1.13.3
16 | ARG OTP_VERSION=24.3.1
17 | ARG DEBIAN_VERSION=bullseye-20210902-slim
18 |
19 | ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
20 | ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
21 |
22 | FROM ${BUILDER_IMAGE} as builder
23 |
24 | # install build dependencies
25 | RUN apt-get update -y && apt-get install -y build-essential git \
26 | && apt-get clean && rm -f /var/lib/apt/lists/*_*
27 |
28 | # prepare build dir
29 | WORKDIR /app
30 |
31 | # install hex + rebar
32 | RUN mix local.hex --force && \
33 | mix local.rebar --force
34 |
35 | # set build ENV
36 | ENV MIX_ENV="prod"
37 |
38 | # install mix dependencies
39 | COPY mix.exs mix.lock ./
40 | RUN mix deps.get --only $MIX_ENV
41 | RUN mkdir config
42 |
43 | # copy compile-time config files before we compile dependencies
44 | # to ensure any relevant config change will trigger the dependencies
45 | # to be re-compiled.
46 | COPY config/config.exs config/${MIX_ENV}.exs config/
47 | RUN mix deps.compile
48 |
49 | COPY priv priv
50 |
51 | COPY lib lib
52 |
53 | COPY assets assets
54 |
55 | # compile assets
56 | RUN mix assets.deploy
57 |
58 | # Compile the release
59 | RUN mix compile
60 |
61 | # Changes to config/runtime.exs don't require recompiling the code
62 | COPY config/runtime.exs config/
63 |
64 | COPY rel rel
65 | RUN mix release
66 |
67 | # start a new build stage so that the final image will only contain
68 | # the compiled release and other runtime necessities
69 | FROM ${RUNNER_IMAGE}
70 |
71 | RUN apt-get update -y && apt-get install -y libstdc++6 openssl libncurses5 locales \
72 | && apt-get clean && rm -f /var/lib/apt/lists/*_*
73 |
74 | # Set the locale
75 | RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen
76 |
77 | ENV LANG en_US.UTF-8
78 | ENV LANGUAGE en_US:en
79 | ENV LC_ALL en_US.UTF-8
80 |
81 | WORKDIR "/app"
82 | RUN chown nobody /app
83 |
84 | # set runner ENV
85 | ENV MIX_ENV="prod"
86 |
87 | # Only copy the final release from the build stage
88 | COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/stopwatch ./
89 |
90 | USER nobody
91 |
92 | CMD ["/app/bin/server"]
93 | # Appended by flyctl
94 | ENV ECTO_IPV6 true
95 | ENV ERL_AFLAGS "-proto_dist inet6_tcp"
96 |
--------------------------------------------------------------------------------
/lib/stopwatch_web.ex:
--------------------------------------------------------------------------------
1 | defmodule StopwatchWeb do
2 | @moduledoc """
3 | The entrypoint for defining your web interface, such
4 | as controllers, views, channels and so on.
5 |
6 | This can be used in your application as:
7 |
8 | use StopwatchWeb, :controller
9 | use StopwatchWeb, :view
10 |
11 | The definitions below will be executed for every view,
12 | controller, etc, so keep them short and clean, focused
13 | on imports, uses and aliases.
14 |
15 | Do NOT define functions inside the quoted expressions
16 | below. Instead, define any helper function in modules
17 | and import those modules here.
18 | """
19 |
20 | def controller do
21 | quote do
22 | use Phoenix.Controller, namespace: StopwatchWeb
23 |
24 | import Plug.Conn
25 | alias StopwatchWeb.Router.Helpers, as: Routes
26 | end
27 | end
28 |
29 | def view do
30 | quote do
31 | use Phoenix.View,
32 | root: "lib/stopwatch_web/templates",
33 | namespace: StopwatchWeb
34 |
35 | # Import convenience functions from controllers
36 | import Phoenix.Controller,
37 | only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
38 |
39 | # Include shared imports and aliases for views
40 | unquote(view_helpers())
41 | end
42 | end
43 |
44 | def live_view do
45 | quote do
46 | use Phoenix.LiveView,
47 | layout: {StopwatchWeb.LayoutView, :live}
48 |
49 | unquote(view_helpers())
50 | end
51 | end
52 |
53 | def live_component do
54 | quote do
55 | use Phoenix.LiveComponent
56 |
57 | unquote(view_helpers())
58 | end
59 | end
60 |
61 | def component do
62 | quote do
63 | use Phoenix.Component
64 |
65 | unquote(view_helpers())
66 | end
67 | end
68 |
69 | def router do
70 | quote do
71 | use Phoenix.Router
72 |
73 | import Plug.Conn
74 | import Phoenix.Controller
75 | import Phoenix.LiveView.Router
76 | end
77 | end
78 |
79 | def channel do
80 | quote do
81 | use Phoenix.Channel
82 | end
83 | end
84 |
85 | defp view_helpers do
86 | quote do
87 | # Use all HTML functionality (forms, tags, etc)
88 | import Phoenix.HTML
89 | use PhoenixHTMLHelpers
90 |
91 | # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
92 | import Phoenix.LiveView.Helpers
93 | import Phoenix.Component
94 |
95 | # Import basic rendering functionality (render, render_layout, etc)
96 | import Phoenix.View
97 |
98 | import StopwatchWeb.ErrorHelpers
99 | alias StopwatchWeb.Router.Helpers, as: Routes
100 | end
101 | end
102 |
103 | @doc """
104 | When used, dispatch to the appropriate controller/view/etc.
105 | """
106 | defmacro __using__(which) when is_atom(which) do
107 | apply(__MODULE__, which, [])
108 | end
109 | end
110 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | // We import the CSS which is extracted to its own file by esbuild.
2 | // Remove this line if you add a your own CSS build pipeline (e.g postcss).
3 | import "../css/app.css"
4 |
5 | // If you want to use Phoenix channels, run `mix help phx.gen.channel`
6 | // to get started and then uncomment the line below.
7 | // import "./user_socket.js"
8 |
9 | // You can include dependencies in two ways.
10 | //
11 | // The simplest option is to put them in assets/vendor and
12 | // import them using relative paths:
13 | //
14 | // import "../vendor/some-package.js"
15 | //
16 | // Alternatively, you can `npm install some-package --prefix assets` and import
17 | // them using a path starting with the package name:
18 | //
19 | // import "some-package"
20 | //
21 |
22 | // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
23 | import "phoenix_html"
24 | // Establish Phoenix Socket and LiveView configuration.
25 | import {Socket} from "phoenix"
26 | import {LiveSocket} from "phoenix_live_view"
27 | import topbar from "../vendor/topbar"
28 |
29 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
30 | let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
31 |
32 | // Show progress bar on live navigation and form submits
33 | topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
34 | window.addEventListener("phx:page-loading-start", info => topbar.show())
35 | window.addEventListener("phx:page-loading-stop", info => topbar.hide())
36 | timer = document.getElementById("timer")
37 | T = {ticking: false}
38 | window.addEventListener("phx:timerUpdated", e => {
39 | if (e.detail.timer_status == "running" && !T.ticking) {
40 | T.ticking = true
41 | T.timerInterval = setInterval(function() {
42 | text = timer_text(new Date(e.detail.start), Date.now())
43 | timer.textContent = text
44 | }, 1000);
45 | }
46 |
47 | if (e.detail.timer_status == "stopped") {
48 | clearInterval(T.timerInterval)
49 | T.ticking = false
50 | text = timer_text(new Date(e.detail.start), new Date(e.detail.stop))
51 | timer.textContent = text
52 | }
53 | })
54 |
55 | function leftPad(val) {
56 | return val < 10 ? '0' + String(val) : val;
57 | }
58 |
59 | function timer_text(start, current) {
60 | let h="00", m="00", s="00";
61 | const diff = current - start;
62 | // seconds
63 | if(diff > 1000) {
64 | s = Math.floor(diff / 1000);
65 | s = s > 60 ? s % 60 : s;
66 | s = leftPad(s);
67 | }
68 | // minutes
69 | if(diff > 60000) {
70 | m = Math.floor(diff/60000);
71 | m = m > 60 ? m % 60 : leftPad(m);
72 | }
73 | // hours
74 | if(diff > 3600000) {
75 | h = Math.floor(diff/3600000);
76 | h = leftPad(h)
77 | }
78 |
79 | return h + ':' + m + ':' + s;
80 | }
81 | // connect if there are any LiveViews on the page
82 | liveSocket.connect()
83 |
84 | // expose liveSocket on window for web console debug logs and latency simulation:
85 | // >> liveSocket.enableDebug()
86 | // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
87 | // >> liveSocket.disableLatencySim()
88 | window.liveSocket = liveSocket
89 |
90 |
--------------------------------------------------------------------------------
/assets/vendor/topbar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license MIT
3 | * topbar 1.0.0, 2021-01-06
4 | * https://buunguyen.github.io/topbar
5 | * Copyright (c) 2021 Buu Nguyen
6 | */
7 | (function (window, document) {
8 | "use strict";
9 |
10 | // https://gist.github.com/paulirish/1579671
11 | (function () {
12 | var lastTime = 0;
13 | var vendors = ["ms", "moz", "webkit", "o"];
14 | for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
15 | window.requestAnimationFrame =
16 | window[vendors[x] + "RequestAnimationFrame"];
17 | window.cancelAnimationFrame =
18 | window[vendors[x] + "CancelAnimationFrame"] ||
19 | window[vendors[x] + "CancelRequestAnimationFrame"];
20 | }
21 | if (!window.requestAnimationFrame)
22 | window.requestAnimationFrame = function (callback, element) {
23 | var currTime = new Date().getTime();
24 | var timeToCall = Math.max(0, 16 - (currTime - lastTime));
25 | var id = window.setTimeout(function () {
26 | callback(currTime + timeToCall);
27 | }, timeToCall);
28 | lastTime = currTime + timeToCall;
29 | return id;
30 | };
31 | if (!window.cancelAnimationFrame)
32 | window.cancelAnimationFrame = function (id) {
33 | clearTimeout(id);
34 | };
35 | })();
36 |
37 | var canvas,
38 | progressTimerId,
39 | fadeTimerId,
40 | currentProgress,
41 | showing,
42 | addEvent = function (elem, type, handler) {
43 | if (elem.addEventListener) elem.addEventListener(type, handler, false);
44 | else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
45 | else elem["on" + type] = handler;
46 | },
47 | options = {
48 | autoRun: true,
49 | barThickness: 3,
50 | barColors: {
51 | 0: "rgba(26, 188, 156, .9)",
52 | ".25": "rgba(52, 152, 219, .9)",
53 | ".50": "rgba(241, 196, 15, .9)",
54 | ".75": "rgba(230, 126, 34, .9)",
55 | "1.0": "rgba(211, 84, 0, .9)",
56 | },
57 | shadowBlur: 10,
58 | shadowColor: "rgba(0, 0, 0, .6)",
59 | className: null,
60 | },
61 | repaint = function () {
62 | canvas.width = window.innerWidth;
63 | canvas.height = options.barThickness * 5; // need space for shadow
64 |
65 | var ctx = canvas.getContext("2d");
66 | ctx.shadowBlur = options.shadowBlur;
67 | ctx.shadowColor = options.shadowColor;
68 |
69 | var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
70 | for (var stop in options.barColors)
71 | lineGradient.addColorStop(stop, options.barColors[stop]);
72 | ctx.lineWidth = options.barThickness;
73 | ctx.beginPath();
74 | ctx.moveTo(0, options.barThickness / 2);
75 | ctx.lineTo(
76 | Math.ceil(currentProgress * canvas.width),
77 | options.barThickness / 2
78 | );
79 | ctx.strokeStyle = lineGradient;
80 | ctx.stroke();
81 | },
82 | createCanvas = function () {
83 | canvas = document.createElement("canvas");
84 | var style = canvas.style;
85 | style.position = "fixed";
86 | style.top = style.left = style.right = style.margin = style.padding = 0;
87 | style.zIndex = 100001;
88 | style.display = "none";
89 | if (options.className) canvas.classList.add(options.className);
90 | document.body.appendChild(canvas);
91 | addEvent(window, "resize", repaint);
92 | },
93 | topbar = {
94 | config: function (opts) {
95 | for (var key in opts)
96 | if (options.hasOwnProperty(key)) options[key] = opts[key];
97 | },
98 | show: function () {
99 | if (showing) return;
100 | showing = true;
101 | if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
102 | if (!canvas) createCanvas();
103 | canvas.style.opacity = 1;
104 | canvas.style.display = "block";
105 | topbar.progress(0);
106 | if (options.autoRun) {
107 | (function loop() {
108 | progressTimerId = window.requestAnimationFrame(loop);
109 | topbar.progress(
110 | "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
111 | );
112 | })();
113 | }
114 | },
115 | progress: function (to) {
116 | if (typeof to === "undefined") return currentProgress;
117 | if (typeof to === "string") {
118 | to =
119 | (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
120 | ? currentProgress
121 | : 0) + parseFloat(to);
122 | }
123 | currentProgress = to > 1 ? 1 : to;
124 | repaint();
125 | return currentProgress;
126 | },
127 | hide: function () {
128 | if (!showing) return;
129 | showing = false;
130 | if (progressTimerId != null) {
131 | window.cancelAnimationFrame(progressTimerId);
132 | progressTimerId = null;
133 | }
134 | (function loop() {
135 | if (topbar.progress("+.1") >= 1) {
136 | canvas.style.opacity -= 0.05;
137 | if (canvas.style.opacity <= 0.05) {
138 | canvas.style.display = "none";
139 | fadeTimerId = null;
140 | return;
141 | }
142 | }
143 | fadeTimerId = window.requestAnimationFrame(loop);
144 | })();
145 | },
146 | };
147 |
148 | if (typeof module === "object" && typeof module.exports === "object") {
149 | module.exports = topbar;
150 | } else if (typeof define === "function" && define.amd) {
151 | define(function () {
152 | return topbar;
153 | });
154 | } else {
155 | this.topbar = topbar;
156 | }
157 | }.call(this, window, document));
158 |
--------------------------------------------------------------------------------
/assets/css/phoenix.css:
--------------------------------------------------------------------------------
1 | /* Includes some default style for the starter application.
2 | * This can be safely deleted to start fresh.
3 | */
4 |
5 | /* Milligram v1.4.1 https://milligram.github.io
6 | * Copyright (c) 2020 CJ Patoilo Licensed under the MIT license
7 | */
8 |
9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,') center right no-repeat;padding-right:3.0rem}select:focus{background-image:url('data:image/svg+xml;utf8,')}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.container{margin:0 auto;max-width:112.0rem;padding:0 2.0rem;position:relative;width:100%}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding>.column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-40{margin-left:40%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-60{margin-left:60%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{align-self:center}@media (min-width: 40rem){.row{flex-direction:row;margin-left:-1.0rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1.0rem}}a{color:#0069d9;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3.0rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1.0rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;display:block;overflow-x:auto;text-align:left;width:100%}td,th{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}@media (min-width: 40rem){table{display:table;overflow-x:initial}}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2.0rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right}
10 |
11 | /* General style */
12 | h1{font-size: 3.6rem; line-height: 1.25}
13 | h2{font-size: 2.8rem; line-height: 1.3}
14 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35}
15 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5}
16 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4}
17 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2}
18 | pre{padding: 1em;}
19 |
20 | .container{
21 | margin: 0 auto;
22 | max-width: 80.0rem;
23 | padding: 0 2.0rem;
24 | position: relative;
25 | width: 100%
26 | }
27 | select {
28 | width: auto;
29 | }
30 |
31 | /* Phoenix promo and logo */
32 | .phx-hero {
33 | text-align: center;
34 | border-bottom: 1px solid #e3e3e3;
35 | background: #eee;
36 | border-radius: 6px;
37 | padding: 3em 3em 1em;
38 | margin-bottom: 3rem;
39 | font-weight: 200;
40 | font-size: 120%;
41 | }
42 | .phx-hero input {
43 | background: #ffffff;
44 | }
45 | .phx-logo {
46 | min-width: 300px;
47 | margin: 1rem;
48 | display: block;
49 | }
50 | .phx-logo img {
51 | width: auto;
52 | display: block;
53 | }
54 |
55 | /* Headers */
56 | header {
57 | width: 100%;
58 | background: #fdfdfd;
59 | border-bottom: 1px solid #eaeaea;
60 | margin-bottom: 2rem;
61 | }
62 | header section {
63 | align-items: center;
64 | display: flex;
65 | flex-direction: column;
66 | justify-content: space-between;
67 | }
68 | header section :first-child {
69 | order: 2;
70 | }
71 | header section :last-child {
72 | order: 1;
73 | }
74 | header nav ul,
75 | header nav li {
76 | margin: 0;
77 | padding: 0;
78 | display: block;
79 | text-align: right;
80 | white-space: nowrap;
81 | }
82 | header nav ul {
83 | margin: 1rem;
84 | margin-top: 0;
85 | }
86 | header nav a {
87 | display: block;
88 | }
89 |
90 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */
91 | header section {
92 | flex-direction: row;
93 | }
94 | header nav ul {
95 | margin: 1rem;
96 | }
97 | .phx-logo {
98 | flex-basis: 527px;
99 | margin: 2rem 1rem;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/mix.lock:
--------------------------------------------------------------------------------
1 | %{
2 | "castore": {:hex, :castore, "1.0.15", "8aa930c890fe18b6fe0a0cff27b27d0d4d231867897bd23ea772dee561f032a3", [:mix], [], "hexpm", "96ce4c69d7d5d7a0761420ef743e2f4096253931a3ba69e5ff8ef1844fe446d3"},
3 | "cc_precompiler": {:hex, :cc_precompiler, "0.1.11", "8c844d0b9fb98a3edea067f94f616b3f6b29b959b6b3bf25fee94ffe34364768", [:mix], [{:elixir_make, "~> 0.7", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "3427232caf0835f94680e5bcf082408a70b48ad68a5f5c0b02a3bea9f3a075b9"},
4 | "certifi": {:hex, :certifi, "2.9.0", "6f2a475689dd47f19fb74334859d460a2dc4e3252a3324bd2111b8f0429e7e21", [:rebar3], [], "hexpm", "266da46bdb06d6c6d35fde799bcb28d36d985d424ad7c08b5bb48f5b5cdd4641"},
5 | "cowboy": {:hex, :cowboy, "2.14.2", "4008be1df6ade45e4f2a4e9e2d22b36d0b5aba4e20b0a0d7049e28d124e34847", [:make, :rebar3], [{:cowlib, ">= 2.16.0 and < 3.0.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, ">= 1.8.0 and < 3.0.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "569081da046e7b41b5df36aa359be71a0c8874e5b9cff6f747073fc57baf1ab9"},
6 | "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
7 | "cowlib": {:hex, :cowlib, "2.16.0", "54592074ebbbb92ee4746c8a8846e5605052f29309d3a873468d76cdf932076f", [:make, :rebar3], [], "hexpm", "7f478d80d66b747344f0ea7708c187645cfcc08b11aa424632f78e25bf05db51"},
8 | "elixir_make": {:hex, :elixir_make, "0.9.0", "6484b3cd8c0cee58f09f05ecaf1a140a8c97670671a6a0e7ab4dc326c3109726", [:mix], [], "hexpm", "db23d4fd8b757462ad02f8aa73431a426fe6671c80b200d9710caf3d1dd0ffdb"},
9 | "esbuild": {:hex, :esbuild, "0.10.0", "b0aa3388a1c23e727c5a3e7427c932d89ee791746b0081bbe56103e9ef3d291f", [:mix], [{:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "468489cda427b974a7cc9f03ace55368a83e1a7be12fba7e30969af78e5f8c70"},
10 | "excoveralls": {:hex, :excoveralls, "0.18.5", "e229d0a65982613332ec30f07940038fe451a2e5b29bce2a5022165f0c9b157e", [:mix], [{:castore, "~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "523fe8a15603f86d64852aab2abe8ddbd78e68579c8525ae765facc5eae01562"},
11 | "file_system": {:hex, :file_system, "1.1.0", "08d232062284546c6c34426997dd7ef6ec9f8bbd090eb91780283c9016840e8f", [:mix], [], "hexpm", "bfcf81244f416871f2a2e15c1b515287faa5db9c6bcf290222206d120b3d43f6"},
12 | "fine": {:hex, :fine, "0.1.4", "b19a89c1476c7c57afb5f9314aed5960b5bc95d5277de4cb5ee8e1d1616ce379", [:mix], [], "hexpm", "be3324cc454a42d80951cf6023b9954e9ff27c6daa255483b3e8d608670303f5"},
13 | "floki": {:hex, :floki, "0.38.0", "62b642386fa3f2f90713f6e231da0fa3256e41ef1089f83b6ceac7a3fd3abf33", [:mix], [], "hexpm", "a5943ee91e93fb2d635b612caf5508e36d37548e84928463ef9dd986f0d1abd9"},
14 | "hackney": {:hex, :hackney, "1.18.1", "f48bf88f521f2a229fc7bae88cf4f85adc9cd9bcf23b5dc8eb6a1788c662c4f6", [:rebar3], [{:certifi, "~>2.9.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~>6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~>1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~>1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.3.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~>1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a4ecdaff44297e9b5894ae499e9a070ea1888c84afdd1fd9b7b2bc384950128e"},
15 | "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
16 | "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
17 | "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
18 | "lazy_html": {:hex, :lazy_html, "0.1.8", "677a8642e644eef8de98f3040e2520d42d0f0f8bd6c5cd49db36504e34dffe91", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "0d8167d930b704feb94b41414ca7f5779dff9bca7fcf619fcef18de138f08736"},
19 | "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
20 | "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
21 | "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
22 | "parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"},
23 | "phoenix": {:hex, :phoenix, "1.8.1", "865473a60a979551a4879db79fbfb4503e41cd809e77c85af79716578b6a456d", [:mix], [{:bandit, "~> 1.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "84d77d2b2e77c3c7e7527099bd01ef5c8560cd149c036d6b3a40745f11cd2fb2"},
24 | "phoenix_html": {:hex, :phoenix_html, "4.3.0", "d3577a5df4b6954cd7890c84d955c470b5310bb49647f0a114a6eeecc850f7ad", [:mix], [], "hexpm", "3eaa290a78bab0f075f791a46a981bbe769d94bc776869f4f3063a14f30497ad"},
25 | "phoenix_html_helpers": {:hex, :phoenix_html_helpers, "1.0.1", "7eed85c52eff80a179391036931791ee5d2f713d76a81d0d2c6ebafe1e11e5ec", [:mix], [{:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "cffd2385d1fa4f78b04432df69ab8da63dc5cf63e07b713a4dcf36a3740e3090"},
26 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.6.1", "05df733a09887a005ed0d69a7fc619d376aea2730bf64ce52ac51ce716cc1ef0", [:mix], [{:file_system, "~> 0.2.10 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "74273843d5a6e4fef0bbc17599f33e3ec63f08e69215623a0cd91eea4288e5a0"},
27 | "phoenix_live_view": {:hex, :phoenix_live_view, "1.1.16", "e42f95337b912a73a1c4ddb077af2eb13491712d7ab79b67e13de4237dfcac50", [:mix], [{:igniter, ">= 0.6.16 and < 1.0.0-0", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:lazy_html, "~> 0.1.0", [hex: :lazy_html, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0-rc", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f2a0093895b8ef4880af76d41de4a9cf7cff6c66ad130e15a70bdabc4d279feb"},
28 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.2.0", "ff3a5616e1bed6804de7773b92cbccfc0b0f473faf1f63d7daf1206c7aeaaa6f", [:mix], [], "hexpm", "adc313a5bf7136039f63cfd9668fde73bba0765e0614cba80c06ac9460ff3e96"},
29 | "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
30 | "phoenix_view": {:hex, :phoenix_view, "2.0.4", "b45c9d9cf15b3a1af5fb555c674b525391b6a1fe975f040fb4d913397b31abf4", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "4e992022ce14f31fe57335db27a28154afcc94e9983266835bb3040243eb620b"},
31 | "plug": {:hex, :plug, "1.18.1", "5067f26f7745b7e31bc3368bc1a2b818b9779faa959b49c934c17730efc911cf", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "57a57db70df2b422b564437d2d33cf8d33cd16339c1edb190cd11b1a3a546cc2"},
32 | "plug_cowboy": {:hex, :plug_cowboy, "2.7.4", "729c752d17cf364e2b8da5bdb34fb5804f56251e88bb602aff48ae0bd8673d11", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "9b85632bd7012615bae0a5d70084deb1b25d2bcbb32cab82d1e9a1e023168aa3"},
33 | "plug_crypto": {:hex, :plug_crypto, "2.1.1", "19bda8184399cb24afa10be734f84a16ea0a2bc65054e23a62bb10f06bc89491", [:mix], [], "hexpm", "6470bce6ffe41c8bd497612ffde1a7e4af67f36a15eea5f921af71cf3e11247c"},
34 | "ranch": {:hex, :ranch, "2.2.0", "25528f82bc8d7c6152c57666ca99ec716510fe0925cb188172f41ce93117b1b0", [:make, :rebar3], [], "hexpm", "fa0b99a1780c80218a4197a59ea8d3bdae32fbff7e88527d7d8a4787eff4f8e7"},
35 | "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.6", "cf344f5692c82d2cd7554f5ec8fd961548d4fd09e7d22f5b62482e5aeaebd4b0", [:make, :mix, :rebar3], [], "hexpm", "bdb0d2471f453c88ff3908e7686f86f9be327d065cc1ec16fa4540197ea04680"},
36 | "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
37 | "telemetry_metrics": {:hex, :telemetry_metrics, "1.1.0", "5bd5f3b5637e0abea0426b947e3ce5dd304f8b3bc6617039e2b5a008adc02f8f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7b79e8ddfde70adb6db8a6623d1778ec66401f366e9a8f5dd0955c56bc8ce67"},
38 | "telemetry_poller": {:hex, :telemetry_poller, "1.3.0", "d5c46420126b5ac2d72bc6580fb4f537d35e851cc0f8dbd571acf6d6e10f5ec7", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "51f18bed7128544a50f75897db9974436ea9bfba560420b646af27a9a9b35211"},
39 | "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
40 | "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
41 | "websock_adapter": {:hex, :websock_adapter, "0.5.8", "3b97dc94e407e2d1fc666b2fb9acf6be81a1798a2602294aac000260a7c4a47d", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "315b9a1865552212b5f35140ad194e67ce31af45bcee443d4ecb96b5fd3f3782"},
42 | }
43 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 2, June 1991
3 |
4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
6 | Everyone is permitted to copy and distribute verbatim copies
7 | of this license document, but changing it is not allowed.
8 |
9 | Preamble
10 |
11 | The licenses for most software are designed to take away your
12 | freedom to share and change it. By contrast, the GNU General Public
13 | License is intended to guarantee your freedom to share and change free
14 | software--to make sure the software is free for all its users. This
15 | General Public License applies to most of the Free Software
16 | Foundation's software and to any other program whose authors commit to
17 | using it. (Some other Free Software Foundation software is covered by
18 | the GNU Lesser General Public License instead.) You can apply it to
19 | your programs, too.
20 |
21 | When we speak of free software, we are referring to freedom, not
22 | price. Our General Public Licenses are designed to make sure that you
23 | have the freedom to distribute copies of free software (and charge for
24 | this service if you wish), that you receive source code or can get it
25 | if you want it, that you can change the software or use pieces of it
26 | in new free programs; and that you know you can do these things.
27 |
28 | To protect your rights, we need to make restrictions that forbid
29 | anyone to deny you these rights or to ask you to surrender the rights.
30 | These restrictions translate to certain responsibilities for you if you
31 | distribute copies of the software, or if you modify it.
32 |
33 | For example, if you distribute copies of such a program, whether
34 | gratis or for a fee, you must give the recipients all the rights that
35 | you have. You must make sure that they, too, receive or can get the
36 | source code. And you must show them these terms so they know their
37 | rights.
38 |
39 | We protect your rights with two steps: (1) copyright the software, and
40 | (2) offer you this license which gives you legal permission to copy,
41 | distribute and/or modify the software.
42 |
43 | Also, for each author's protection and ours, we want to make certain
44 | that everyone understands that there is no warranty for this free
45 | software. If the software is modified by someone else and passed on, we
46 | want its recipients to know that what they have is not the original, so
47 | that any problems introduced by others will not reflect on the original
48 | authors' reputations.
49 |
50 | Finally, any free program is threatened constantly by software
51 | patents. We wish to avoid the danger that redistributors of a free
52 | program will individually obtain patent licenses, in effect making the
53 | program proprietary. To prevent this, we have made it clear that any
54 | patent must be licensed for everyone's free use or not licensed at all.
55 |
56 | The precise terms and conditions for copying, distribution and
57 | modification follow.
58 |
59 | GNU GENERAL PUBLIC LICENSE
60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
61 |
62 | 0. This License applies to any program or other work which contains
63 | a notice placed by the copyright holder saying it may be distributed
64 | under the terms of this General Public License. The "Program", below,
65 | refers to any such program or work, and a "work based on the Program"
66 | means either the Program or any derivative work under copyright law:
67 | that is to say, a work containing the Program or a portion of it,
68 | either verbatim or with modifications and/or translated into another
69 | language. (Hereinafter, translation is included without limitation in
70 | the term "modification".) Each licensee is addressed as "you".
71 |
72 | Activities other than copying, distribution and modification are not
73 | covered by this License; they are outside its scope. The act of
74 | running the Program is not restricted, and the output from the Program
75 | is covered only if its contents constitute a work based on the
76 | Program (independent of having been made by running the Program).
77 | Whether that is true depends on what the Program does.
78 |
79 | 1. You may copy and distribute verbatim copies of the Program's
80 | source code as you receive it, in any medium, provided that you
81 | conspicuously and appropriately publish on each copy an appropriate
82 | copyright notice and disclaimer of warranty; keep intact all the
83 | notices that refer to this License and to the absence of any warranty;
84 | and give any other recipients of the Program a copy of this License
85 | along with the Program.
86 |
87 | You may charge a fee for the physical act of transferring a copy, and
88 | you may at your option offer warranty protection in exchange for a fee.
89 |
90 | 2. You may modify your copy or copies of the Program or any portion
91 | of it, thus forming a work based on the Program, and copy and
92 | distribute such modifications or work under the terms of Section 1
93 | above, provided that you also meet all of these conditions:
94 |
95 | a) You must cause the modified files to carry prominent notices
96 | stating that you changed the files and the date of any change.
97 |
98 | b) You must cause any work that you distribute or publish, that in
99 | whole or in part contains or is derived from the Program or any
100 | part thereof, to be licensed as a whole at no charge to all third
101 | parties under the terms of this License.
102 |
103 | c) If the modified program normally reads commands interactively
104 | when run, you must cause it, when started running for such
105 | interactive use in the most ordinary way, to print or display an
106 | announcement including an appropriate copyright notice and a
107 | notice that there is no warranty (or else, saying that you provide
108 | a warranty) and that users may redistribute the program under
109 | these conditions, and telling the user how to view a copy of this
110 | License. (Exception: if the Program itself is interactive but
111 | does not normally print such an announcement, your work based on
112 | the Program is not required to print an announcement.)
113 |
114 | These requirements apply to the modified work as a whole. If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works. But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 |
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 |
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 |
134 | 3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 |
138 | a) Accompany it with the complete corresponding machine-readable
139 | source code, which must be distributed under the terms of Sections
140 | 1 and 2 above on a medium customarily used for software interchange; or,
141 |
142 | b) Accompany it with a written offer, valid for at least three
143 | years, to give any third party, for a charge no more than your
144 | cost of physically performing source distribution, a complete
145 | machine-readable copy of the corresponding source code, to be
146 | distributed under the terms of Sections 1 and 2 above on a medium
147 | customarily used for software interchange; or,
148 |
149 | c) Accompany it with the information you received as to the offer
150 | to distribute corresponding source code. (This alternative is
151 | allowed only for noncommercial distribution and only if you
152 | received the program in object code or executable form with such
153 | an offer, in accord with Subsection b above.)
154 |
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it. For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable. However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 |
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 |
172 | 4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License. Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 |
180 | 5. You are not required to accept this License, since you have not
181 | signed it. However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works. These actions are
183 | prohibited by law if you do not accept this License. Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 |
189 | 6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions. You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 |
197 | 7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License. If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all. For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 |
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 |
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices. Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 |
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 |
229 | 8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded. In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 |
237 | 9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time. Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 |
242 | Each version is given a distinguishing version number. If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation. If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 |
250 | 10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission. For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this. Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 |
258 | NO WARRANTY
259 |
260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 |
270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 |
280 | END OF TERMS AND CONDITIONS
281 |
282 | How to Apply These Terms to Your New Programs
283 |
284 | If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 |
288 | To do so, attach the following notices to the program. It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 |
293 |
294 | Copyright (C)
295 |
296 | This program is free software; you can redistribute it and/or modify
297 | it under the terms of the GNU General Public License as published by
298 | the Free Software Foundation; either version 2 of the License, or
299 | (at your option) any later version.
300 |
301 | This program is distributed in the hope that it will be useful,
302 | but WITHOUT ANY WARRANTY; without even the implied warranty of
303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
304 | GNU General Public License for more details.
305 |
306 | You should have received a copy of the GNU General Public License along
307 | with this program; if not, write to the Free Software Foundation, Inc.,
308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 |
310 | Also add information on how to contact you by electronic and paper mail.
311 |
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 |
315 | Gnomovision version 69, Copyright (C) year name of author
316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 | This is free software, and you are welcome to redistribute it
318 | under certain conditions; type `show c' for details.
319 |
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License. Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 |
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary. Here is a sample; alter the names:
328 |
329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 | `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 |
332 | , 1 April 1989
333 | Ty Coon, President of Vice
334 |
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs. If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library. If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
164 | <%= if @timer_status == :stopped do %>
165 |
166 | <% end %>
167 |
168 | <%= if @timer_status == :running do %>
169 |
170 | <% end %>
171 | ```
172 |
173 | If you run the server with
174 | `mix phx.server`
175 | you should now be able
176 | to start/stop the stopwatch.
177 |
178 | ## Sync Stopwatch
179 |
180 | So far the application will create a new timer for each client.
181 | That is good but doesn't really showcase the power of `LiveView`.
182 | We might aswell just be using _any_ other framework/library.
183 | To really see the power of using `LiveView`,
184 | we're going to use its' super power -
185 | lightweight websocket "channels" -
186 | to create a _collaborative_ stopwatch experience!
187 |
188 |
196 |
197 | To be able to sync a timer
198 | between all the connected clients
199 | we can move the stopwatch logic
200 | to its own module and use
201 | [`Agent`](https://elixir-lang.org/getting-started/mix-otp/agent.html).
202 |
203 | Create `lib/stopwatch/timer.ex` file and add the folowing content:
204 |
205 | ```elixir
206 | defmodule Stopwatch.Timer do
207 | use Agent
208 | alias Phoenix.PubSub
209 |
210 | def start_link(opts) do
211 | Agent.start_link(fn -> {:stopped, ~T[00:00:00]} end, opts)
212 | end
213 |
214 | def get_timer_state(timer) do
215 | Agent.get(timer, fn state -> state end)
216 | end
217 |
218 | def start_timer(timer) do
219 | Agent.update(timer, fn {_timer_status, time} -> {:running, time} end)
220 | notify()
221 | end
222 |
223 | def stop_timer(timer) do
224 | Agent.update(timer, fn {_timer_status, time} -> {:stopped, time} end)
225 | notify()
226 | end
227 |
228 | def tick(timer) do
229 | Agent.update(timer, fn {timer_status, timer} ->
230 | {timer_status, Time.add(timer, 1, :second)}
231 | end)
232 |
233 | notify()
234 | end
235 |
236 | def subscribe() do
237 | PubSub.subscribe(Stopwatch.PubSub, "liveview_stopwatch")
238 | end
239 |
240 | def notify() do
241 | PubSub.broadcast(Stopwatch.PubSub, "liveview_stopwatch", :timer_updated)
242 | end
243 | end
244 | ```
245 |
246 | The agent defines the state of the stopwatch
247 | as a tuple `{timer_status, time}`.
248 | We defined the
249 | `get_timer_state/1`, `start_timer/1`, `stop_timer/1`
250 | and `tick/1` functions
251 | which are responsible for updating the tuple.
252 |
253 | Finally the last two funtions:
254 | `subscribe/0` and `notify/0`
255 | are responsible for listening and sending
256 | the `:timer_updated` event via PubSub to the clients.
257 |
258 |
259 | Now we have the Timer agent defined
260 | we can tell the application to create
261 | a stopwatch when the application starts.
262 | Update the `lib/stopwatch/application.ex` file
263 | to add the `StopwatchTimer`
264 | in the supervision tree:
265 |
266 | ```elixir
267 | children = [
268 | # Start the Telemetry supervisor
269 | StopwatchWeb.Telemetry,
270 | # Start the PubSub system
271 | {Phoenix.PubSub, name: Stopwatch.PubSub},
272 | # Start the Endpoint (http/https)
273 | StopwatchWeb.Endpoint,
274 | # Start a worker by calling: Stopwatch.Worker.start_link(arg)
275 | # {Stopwatch.Worker, arg}
276 | {Stopwatch.Timer, name: Stopwatch.Timer} # Create timer
277 | ]
278 | ```
279 |
280 | We define the timer name as `Stopwatch.Timer`.
281 | This name could be any `atom`
282 | and doesn't have to be an existing module name.
283 | It is just a unique way to find the timer.
284 |
285 | We can now update our `LiveView` logic
286 | to use the function defined in `Stopwatch.Timer`.
287 | Update
288 | `lib/stopwatch_web/live/stopwatch_live.ex`:
289 |
290 | ```elixir
291 | defmodule StopwatchWeb.StopwatchLive do
292 | use StopwatchWeb, :live_view
293 |
294 | def mount(_params, _session, socket) do
295 | if connected?(socket), do: Stopwatch.Timer.subscribe()
296 |
297 | {timer_status, time} = Stopwatch.Timer.get_timer_state(Stopwatch.Timer)
298 | {:ok, assign(socket, time: time, timer_status: timer_status)}
299 | end
300 |
301 | def render(assigns) do
302 | Phoenix.View.render(StopwatchWeb.StopwatchView, "stopwatch.html", assigns)
303 | end
304 |
305 | def handle_event("start", _value, socket) do
306 | Process.send_after(self(), :tick, 1000)
307 | Stopwatch.Timer.start_timer(Stopwatch.Timer)
308 | {:noreply, socket}
309 | end
310 |
311 | def handle_event("stop", _value, socket) do
312 | Stopwatch.Timer.stop_timer(Stopwatch.Timer)
313 | {:noreply, socket}
314 | end
315 |
316 | def handle_info(:timer_updated, socket) do
317 | {timer_status, time} = Stopwatch.Timer.get_timer_state(Stopwatch.Timer)
318 | {:noreply, assign(socket, time: time, timer_status: timer_status)}
319 | end
320 |
321 | def handle_info(:tick, socket) do
322 | {timer_status, _time} = Stopwatch.Timer.get_timer_state(Stopwatch.Timer)
323 |
324 | if timer_status == :running do
325 | Process.send_after(self(), :tick, 1000)
326 | Stopwatch.Timer.tick(Stopwatch.Timer)
327 | {:noreply, socket}
328 | else
329 | {:noreply, socket}
330 | end
331 | end
332 | end
333 | ```
334 |
335 | In `mount/3`, when the socket is connected
336 | we subscribe the client to the PubSub channel.
337 | This will allow our `LiveView`
338 | to listen for events from other clients.
339 |
340 | The `start`, `stop` and `tick` events
341 | are now calling the
342 | `start_timer`, `stop_timer` and `tick` functions
343 | from `Timer`,
344 | and we return `{:ok, socket}`
345 | without any changes on the `assigns`.
346 | All the updates are now done
347 | in the new
348 | `handle_info(:timer_updated, socket)`
349 | function.
350 | The `:timer_updated` event
351 | is sent by `PubSub`
352 | each time the timer state is changed.
353 |
354 |
355 | If you run the application:
356 | ```sh
357 | mix phx.server
358 | ```
359 |
360 | And open it in two different clients
361 | you should now have a synchronised stopwatch!
362 |
363 | 
364 |
365 | To _test_ our new `Stopwatch.Timer` agent,
366 | we can add the following code to
367 | `test/stopwatch/timer_test.exs`:
368 |
369 | ```elixir
370 | defmodule Stopwatch.TimerTest do
371 | use ExUnit.Case, async: true
372 |
373 | setup context do
374 | start_supervised!({Stopwatch.Timer, name: context.test})
375 | %{timer: context.test}
376 | end
377 |
378 | test "Timer agent is working!", %{timer: timer} do
379 | assert {:stopped, ~T[00:00:00]} == Stopwatch.Timer.get_timer_state(timer)
380 | assert :ok = Stopwatch.Timer.start_timer(timer)
381 | assert :ok = Stopwatch.Timer.tick(timer)
382 | assert {:running, time} = Stopwatch.Timer.get_timer_state(timer)
383 | assert Time.truncate(time, :second) == ~T[00:00:01]
384 | assert :ok = Stopwatch.Timer.stop_timer(timer)
385 | assert {:stopped, _time} = Stopwatch.Timer.get_timer_state(timer)
386 | end
387 |
388 |
389 | test "Timer is reset", %{timer: timer} do
390 | assert :ok = Stopwatch.Timer.start_timer(timer)
391 | :ok = Stopwatch.Timer.tick(timer)
392 | :ok = Stopwatch.Timer.tick(timer)
393 | {:running, time} = Stopwatch.Timer.get_timer_state(timer)
394 | assert Time.truncate(time, :second) == ~T[00:00:02]
395 | Stopwatch.Timer.reset(timer)
396 | assert {:stopped, ~T[00:00:00]} == Stopwatch.Timer.get_timer_state(timer)
397 | end
398 | end
399 | ```
400 |
401 | We use the `setup` function
402 | to create a new timer for each test.
403 | `start_supervised!` takes care of creating
404 | and stopping the process timer for the tests.
405 | Since `mix run` will automatically run the `Timer`
406 | defined in `application.ex`,
407 | i.e. the Timer with the name `Stopwatch.Timer`
408 | we want to create new timers
409 | for the tests using other names to avoid conflicts.
410 | This is why we use `context.test`
411 | to define the name of the test `Timer` process.
412 |
413 |
414 | ## `GenServer`
415 |
416 | One problem with our current code is if the stopwatch is running and the
417 | client is closed (ex: browser tab closed) then the `tick` actions are stopped
418 | however the stopwatch status is still `:running`.
419 | This is because our live logic is responsible for updating the timer with:
420 |
421 | ```elixir
422 | def handle_info(:tick, socket) do
423 | {timer_status, _time} = Stopwatch.Timer.get_timer_state(Stopwatch.Timer)
424 |
425 | if timer_status == :running do
426 | Process.send_after(self(), :tick, 1000)
427 | Stopwatch.Timer.tick(Stopwatch.Timer)
428 | {:noreply, socket}
429 | else
430 | {:noreply, socket}
431 | end
432 | end
433 | ```
434 |
435 | as `Process.send_after` will send the `:tick` message after 1s.
436 | When the client is closed the live process is also closed and the `tick`
437 | message is not sent anymore.
438 |
439 | Instead we want to move the ticking logic to the `Timer`.
440 | However `Agent` are not ideal to work with `Process.send_after` function and
441 | instead we are going to rewrite our `Timer` module using `GenServer`.
442 |
443 | Create the `lib/stopwatch/timer_server.ex` file and add the following:
444 |
445 | ```elixir
446 | defmodule Stopwatch.TimerServer do
447 | use GenServer
448 | alias Phoenix.PubSub
449 |
450 | # Client API
451 |
452 | def start_link(opts) do
453 | GenServer.start_link(__MODULE__, :ok, opts)
454 | end
455 |
456 | def start_timer(server) do
457 | GenServer.call(server, :start)
458 | end
459 |
460 | def stop_timer(server) do
461 | GenServer.call(server, :stop)
462 | end
463 |
464 | def get_timer_state(server) do
465 | GenServer.call(server, :state)
466 | end
467 |
468 | def reset(server) do
469 | GenServer.call(server, :reset)
470 | end
471 |
472 | # Server
473 | @impl true
474 | def init(:ok) do
475 | {:ok, {:stopped, ~T[00:00:00]}}
476 | end
477 |
478 | @impl true
479 | def handle_call(:start, _from, {_status, time}) do
480 | Process.send_after(self(), :tick, 1000)
481 | {:reply, :running, {:running, time}}
482 | end
483 |
484 | @impl true
485 | def handle_call(:stop, _from, {_status, time}) do
486 | {:reply, :stopped, {:stopped, time}}
487 | end
488 |
489 | @impl true
490 | def handle_info(:tick, {status, time} = stopwatch) do
491 | if status == :running do
492 | Process.send_after(self(), :tick, 1000)
493 | notify()
494 | {:noreply, {status, Time.add(time, 1, :second)}}
495 | else
496 | {:noreply, stopwatch}
497 | end
498 | end
499 |
500 | @impl true
501 | def handle_call(:state, _from, stopwatch) do
502 | {:reply, stopwatch, stopwatch}
503 | end
504 |
505 | @impl true
506 | def handle_call(:reset, _from, _stopwatch) do
507 | {:reply, :reset, {:stopped, ~T[00:00:00]}}
508 | end
509 |
510 | def subscribe() do
511 | PubSub.subscribe(Stopwatch.PubSub, "liveview_stopwatch")
512 | end
513 |
514 | def notify() do
515 | PubSub.broadcast(Stopwatch.PubSub, "liveview_stopwatch", :timer_updated)
516 | end
517 | end
518 | ```
519 |
520 | Compared to `Agent`, `GenServer` splits functions into client and server logic.
521 | We can define the same client api functions name and use `hand_call` to send
522 | messages to the `GenServer` to `stop`, `start` and `reset` the stopwatch.
523 |
524 | The ticking process is now done by calling `Process.send_after(self(), :tick 1000)`.
525 | The `GenServer` will then manage the `tick` events with `handle_info(:tick, stopwatch)`.
526 |
527 | Now that we have defined our server, we need to update `lib/stopwatch/application.ex` to use
528 | the `GenServer` instead of the `Agent`:
529 |
530 | ```elixir
531 | children = [
532 | # Start the Telemetry supervisor
533 | StopwatchWeb.Telemetry,
534 | # Start the PubSub system
535 | {Phoenix.PubSub, name: Stopwatch.PubSub},
536 | # Start the Endpoint (http/https)
537 | StopwatchWeb.Endpoint,
538 | # Start a worker by calling: Stopwatch.Worker.start_link(arg)
539 | # {Stopwatch.Worker, arg}
540 | # {Stopwatch.Timer, name: Stopwatch.Timer}
541 | {Stopwatch.TimerServer, name: Stopwatch.TimerServer}
542 | ]
543 | ```
544 |
545 | We have commented our `Stopwatch.Timer` agent and added the GenServer:
546 | `{Stopwatch.TimerServer, name: Stopwatch.TimerServer}`
547 |
548 |
549 | Finally we can update our live logic to use Stopwatch.TimerServer and to
550 | remove the `tick` logic from it:
551 |
552 |
553 | ```elixir
554 | defmodule StopwatchWeb.StopwatchLive do
555 | use StopwatchWeb, :live_view
556 | alias Stopwatch.TimerServer
557 |
558 | def mount(_params, _session, socket) do
559 | if connected?(socket), do: TimerServer.subscribe()
560 |
561 | {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
562 | {:ok, assign(socket, time: time, timer_status: timer_status)}
563 | end
564 |
565 | def render(assigns) do
566 | Phoenix.View.render(StopwatchWeb.StopwatchView, "stopwatch.html", assigns)
567 | end
568 |
569 | def handle_event("start", _value, socket) do
570 | :running = TimerServer.start_timer(Stopwatch.TimerServer)
571 | TimerServer.notify()
572 | {:noreply, socket}
573 | end
574 |
575 | def handle_event("stop", _value, socket) do
576 | :stopped = TimerServer.stop_timer(Stopwatch.TimerServer)
577 | TimerServer.notify()
578 | {:noreply, socket}
579 | end
580 |
581 | def handle_event("reset", _value, socket) do
582 | :reset = TimerServer.reset(Stopwatch.TimerServer)
583 | TimerServer.notify()
584 | {:noreply, socket}
585 | end
586 |
587 | def handle_info(:timer_updated, socket) do
588 | {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
589 |
590 | {:noreply, assign(socket, time: time, timer_status: timer_status)}
591 | end
592 | end
593 | ```
594 |
595 | ## `Liveview` + `JavaScript`
596 |
597 | This section will combine
598 | `LiveView` and `JavaScript`
599 | to create the stopwatch logic.
600 | On `start|stop|reset`
601 | the `LiveView` will save
602 | the state of the stopwatch.
603 | The `JavaScript` is then responsible
604 | for handling the `start|stop`.
605 |
606 | Open the `lib/stopwatch_web/router.ex` file
607 | and define a new endpoint `/stopwatch-js`:
608 |
609 | ```elixir
610 | live("/stopwatch-js", StopwatchLiveJS)
611 | ```
612 |
613 | Next create a new file at:
614 | `lib/stopwatch_web/live/stopwatch_live_js.ex`
615 | and add the
616 | `StopwatchLiveJS` module definition:
617 |
618 |
619 | ```elixir
620 | defmodule StopwatchWeb.StopwatchLiveJS do
621 | use StopwatchWeb, :live_view
622 | alias Stopwatch.TimerDB
623 |
624 | def mount(_params, _session, socket) do
625 | if connected?(socket), do: TimerDB.subscribe()
626 |
627 | # {timer_status, time} = TimerServer.get_timer_state(Stopwatch.TimerServer)
628 | # {:ok, assign(socket, time: time, timer_status: timer_status)}
629 | {status, start, stop} = TimerDB.get_timer_state(Stopwatch.TimerDB)
630 | TimerDB.notify()
631 | {:ok, assign(socket, timer_status: status, start: start, stop: stop)}
632 | end
633 |
634 | def render(assigns) do
635 | Phoenix.View.render(StopwatchWeb.StopwatchView, "stopwatch_js.html", assigns)
636 | end
637 |
638 | def handle_event("start", _value, socket) do
639 | TimerDB.start_timer(Stopwatch.TimerDB)
640 |
641 | TimerDB.notify()
642 | {:noreply, socket}
643 | end
644 |
645 | def handle_event("stop", _value, socket) do
646 | TimerDB.stop_timer(Stopwatch.TimerDB)
647 | TimerDB.notify()
648 | {:noreply, socket}
649 | end
650 |
651 | def handle_event("reset", _value, socket) do
652 | TimerDB.reset_timer(Stopwatch.TimerDB)
653 | TimerDB.notify()
654 | {:noreply, socket}
655 | end
656 |
657 | def handle_info(:timer_updated, socket) do
658 | {timer_status, start, stop} = TimerDB.get_timer_state(Stopwatch.TimerDB)
659 | socket = assign(socket, timer_status: timer_status, start: start, stop: stop)
660 |
661 | {:noreply,
662 | push_event(socket, "timerUpdated", %{timer_status: timer_status, start: start, stop: stop})}
663 | end
664 | end
665 | ```
666 |
667 | `TimerDB` is an `Agent` used
668 | to store the stopwatch status as a `tuple`:
669 | `{status, start_time, stop_time}`
670 |
671 | Since we have created the project with
672 | `mix phx.new --no-ecto`
673 | it was easier
674 | to use `Agent` but you can also use a `database`
675 | (e.g. `Postgres`)
676 | to store the state
677 | of the stopwatch.
678 |
679 | The module listens for
680 | "start", "stop" and "reset" events,
681 | saves the updated status
682 | using the `TimerDB` module
683 | and notifies the changes
684 | to connected clients with
685 | `handle_info`
686 |
687 | The template is defined in:
688 | `lib/stopwatch_web/templates/stopwatch/stopwatch_js.html.heex`:
689 |
690 | ```html
691 |