diff --git a/augie/assets/css/app.css b/augie/assets/css/app.css index fec0b3f..f4627f1 100644 --- a/augie/assets/css/app.css +++ b/augie/assets/css/app.css @@ -1,3 +1,4 @@ /* This file is for your main application css. */ @import "./phoenix.css"; +@import "../../deps/phoenix_live_view/assets/css/live_view.css"; diff --git a/augie/assets/js/app.js b/augie/assets/js/app.js index 8a5d386..a7a1191 100644 --- a/augie/assets/js/app.js +++ b/augie/assets/js/app.js @@ -15,3 +15,9 @@ import "phoenix_html" // // Local files can be imported directly using relative paths, for example: // import socket from "./socket" + +import { Socket } from "phoenix" +import LiveSocket from "phoenix_live_view" + +let liveSocket = new LiveSocket("/live", Socket) +liveSocket.connect() diff --git a/augie/assets/package-lock.json b/augie/assets/package-lock.json index a13aa3b..55b1e9e 100644 --- a/augie/assets/package-lock.json +++ b/augie/assets/package-lock.json @@ -4561,6 +4561,9 @@ "phoenix_html": { "version": "file:../deps/phoenix_html" }, + "phoenix_live_view": { + "version": "file:../deps/phoenix_live_view" + }, "pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", diff --git a/augie/assets/package.json b/augie/assets/package.json index 48633fd..bb28ece 100644 --- a/augie/assets/package.json +++ b/augie/assets/package.json @@ -7,7 +7,8 @@ }, "dependencies": { "phoenix": "file:../deps/phoenix", - "phoenix_html": "file:../deps/phoenix_html" + "phoenix_html": "file:../deps/phoenix_html", + "phoenix_live_view": "file:../deps/phoenix_live_view" }, "devDependencies": { "@babel/core": "^7.0.0", diff --git a/augie/config/config.exs b/augie/config/config.exs index 5e07ea7..87c8c8a 100644 --- a/augie/config/config.exs +++ b/augie/config/config.exs @@ -12,7 +12,10 @@ config :augie, AugieWeb.Endpoint, url: [host: "localhost"], secret_key_base: "QPhpYWd10BTjgc2nnA/hPn0a19UG6xpAm5fnnNUQh7u5UCG6uW3jz1PNM0p583TF", render_errors: [view: AugieWeb.ErrorView, accepts: ~w(html json)], - pubsub: [name: Augie.PubSub, adapter: Phoenix.PubSub.PG2] + pubsub: [name: Augie.PubSub, adapter: Phoenix.PubSub.PG2], + live_view: [ + signing_salt: "not-used-in-production" + ] # Configures Elixir's Logger config :logger, :console, diff --git a/augie/config/releases.exs b/augie/config/releases.exs index ba8f144..af4254c 100644 --- a/augie/config/releases.exs +++ b/augie/config/releases.exs @@ -3,6 +3,9 @@ import Config config :augie, AugieWeb.Endpoint, server: true, url: [host: "#{System.get_env("BALENA_DEVICE_UUID")}.balena-devices.com", port: 80], - http: [:inet, port: 80] + http: [:inet, port: 80], + live_view: [ + signing_salt: System.get_env("LIVE_VIEW_SIGNING_SALT") + ] # config :logger, level: :debug diff --git a/augie/lib/augie_web.ex b/augie/lib/augie_web.ex index 3396df1..beb2706 100644 --- a/augie/lib/augie_web.ex +++ b/augie/lib/augie_web.ex @@ -24,6 +24,7 @@ defmodule AugieWeb do import Plug.Conn import AugieWeb.Gettext alias AugieWeb.Router.Helpers, as: Routes + import Phoenix.LiveView.Controller end end @@ -42,6 +43,17 @@ defmodule AugieWeb do import AugieWeb.ErrorHelpers import AugieWeb.Gettext alias AugieWeb.Router.Helpers, as: Routes + + import Phoenix.LiveView, + only: [ + live_render: 2, + live_render: 3, + live_link: 1, + live_link: 2, + live_component: 2, + live_component: 3, + live_component: 4 + ] end end @@ -50,6 +62,7 @@ defmodule AugieWeb do use Phoenix.Router import Plug.Conn import Phoenix.Controller + import Phoenix.LiveView.Router end end diff --git a/augie/lib/augie_web/endpoint.ex b/augie/lib/augie_web/endpoint.ex index afc7ccf..d049853 100644 --- a/augie/lib/augie_web/endpoint.ex +++ b/augie/lib/augie_web/endpoint.ex @@ -1,46 +1,52 @@ defmodule AugieWeb.Endpoint do use Phoenix.Endpoint, otp_app: :augie - socket "/socket", AugieWeb.UserSocket, + socket("/socket", AugieWeb.UserSocket, websocket: true, longpoll: false + ) + + socket("/live", Phoenix.LiveView.Socket) # Serve at "/" the static files from "priv/static" directory. # # You should set gzip to true if you are running phx.digest # when deploying your static files in production. - plug Plug.Static, + plug(Plug.Static, at: "/", from: :augie, gzip: false, only: ~w(css fonts images js favicon.ico robots.txt) + ) # Code reloading can be explicitly enabled under the # :code_reloader configuration of your endpoint. if code_reloading? do - socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket - plug Phoenix.LiveReloader - plug Phoenix.CodeReloader + socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket) + plug(Phoenix.LiveReloader) + plug(Phoenix.CodeReloader) end - plug Plug.RequestId - plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint] + plug(Plug.RequestId) + plug(Plug.Telemetry, event_prefix: [:phoenix, :endpoint]) - plug Plug.Parsers, + plug(Plug.Parsers, parsers: [:urlencoded, :multipart, :json], pass: ["*/*"], json_decoder: Phoenix.json_library() + ) - plug Plug.MethodOverride - plug Plug.Head + plug(Plug.MethodOverride) + plug(Plug.Head) # The session will be stored in the cookie and signed, # this means its contents can be read but not tampered with. # Set :encryption_salt if you would also like to encrypt it. - plug Plug.Session, + plug(Plug.Session, store: :cookie, key: "_augie_key", signing_salt: "g3Ev0ToK" + ) - plug AugieWeb.Router + plug(AugieWeb.Router) end diff --git a/augie/lib/augie_web/router.ex b/augie/lib/augie_web/router.ex index 99b0da2..ccd37e8 100644 --- a/augie/lib/augie_web/router.ex +++ b/augie/lib/augie_web/router.ex @@ -2,21 +2,22 @@ defmodule AugieWeb.Router do use AugieWeb, :router pipeline :browser do - plug :accepts, ["html"] - plug :fetch_session - plug :fetch_flash - plug :protect_from_forgery - plug :put_secure_browser_headers + plug(:accepts, ["html"]) + plug(:fetch_session) + plug(:fetch_flash) + plug(Phoenix.LiveView.Flash) + plug(:protect_from_forgery) + plug(:put_secure_browser_headers) end pipeline :api do - plug :accepts, ["json"] + plug(:accepts, ["json"]) end scope "/", AugieWeb do - pipe_through :browser + pipe_through(:browser) - get "/", PageController, :index + get("/", PageController, :index) end # Other scopes may use custom stacks. diff --git a/augie/mix.exs b/augie/mix.exs index 0456a17..a3057d5 100644 --- a/augie/mix.exs +++ b/augie/mix.exs @@ -42,7 +42,9 @@ defmodule Augie.MixProject do {:balena_device, "~> 0.1"}, {:mdns, "~> 1.0"}, {:swarm, "~> 3.4"}, - {:libcluster, "~> 3.1"} + {:libcluster, "~> 3.1"}, + {:phoenix_live_view, "~> 0.4.0"}, + {:floki, ">= 0.0.0", only: :test} ] end end diff --git a/augie/mix.lock b/augie/mix.lock index d60390d..a8e12a5 100644 --- a/augie/mix.lock +++ b/augie/mix.lock @@ -6,9 +6,11 @@ "dbus": {:hex, :dbus, "0.7.0", "71b7660523be6e222a8a4f9ddcbf54ad95638479bd17654975bb751aadbe81de", [:make, :rebar3], [], "hexpm"}, "dns": {:hex, :dns, "2.1.2", "81c46d39f7934f0e73368355126e4266762cf227ba61d5889635d83b2d64a493", [:mix], [{:socket, "~> 0.3.13", [hex: :socket, repo: "hexpm", optional: false]}], "hexpm"}, "file_system": {:hex, :file_system, "0.2.7", "e6f7f155970975789f26e77b8b8d8ab084c59844d8ecfaf58cbda31c494d14aa", [:mix], [], "hexpm"}, + "floki": {:hex, :floki, "0.23.0", "956ab6dba828c96e732454809fb0bd8d43ce0979b75f34de6322e73d4c917829", [:mix], [{:html_entities, "~> 0.4.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm"}, "gen_state_machine": {:hex, :gen_state_machine, "2.0.5", "9ac15ec6e66acac994cc442dcc2c6f9796cf380ec4b08267223014be1c728a95", [:mix], [], "hexpm"}, "gettext": {:hex, :gettext, "0.17.1", "8baab33482df4907b3eae22f719da492cee3981a26e649b9c2be1c0192616962", [:mix], [], "hexpm"}, "hackney": {:hex, :hackney, "1.15.2", "07e33c794f8f8964ee86cebec1a8ed88db5070e52e904b8f12209773c1036085", [:rebar3], [{:certifi, "2.5.1", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "6.0.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "1.0.1", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~>1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "1.1.5", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}], "hexpm"}, + "html_entities": {:hex, :html_entities, "0.4.0", "f2fee876858cf6aaa9db608820a3209e45a087c5177332799592142b50e89a6b", [:mix], [], "hexpm"}, "httpoison": {:hex, :httpoison, "1.6.2", "ace7c8d3a361cebccbed19c283c349b3d26991eff73a1eaaa8abae2e3c8089b6", [:mix], [{:hackney, "~> 1.15 and >= 1.15.2", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm"}, "idna": {:hex, :idna, "6.0.0", "689c46cbcdf3524c44d5f3dde8001f364cd7608a99556d8fbd8239a5798d4c10", [:rebar3], [{:unicode_util_compat, "0.4.1", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm"}, "jason": {:hex, :jason, "1.1.2", "b03dedea67a99223a2eaf9f1264ce37154564de899fd3d8b9a21b1a6fd64afe7", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm"}, @@ -22,6 +24,7 @@ "phoenix": {:hex, :phoenix, "1.4.11", "d112c862f6959f98e6e915c3b76c7a87ca3efd075850c8daa7c3c7a609014b0d", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 1.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.8.1 or ~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm"}, "phoenix_html": {:hex, :phoenix_html, "2.13.3", "850e292ff6e204257f5f9c4c54a8cb1f6fbc16ed53d360c2b780a3d0ba333867", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"}, "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.1", "274a4b07c4adbdd7785d45a8b0bb57634d0b4f45b18d2c508b26c0344bd59b8f", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm"}, + "phoenix_live_view": {:hex, :phoenix_live_view, "0.4.1", "17e04bd09873c64d8d8e9b8322fee1911044af3d5b2ec5e54fa5c06fbe35c4e6", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.4.9", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.13.2", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm"}, "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.1.2", "496c303bdf1b2e98a9d26e89af5bba3ab487ba3a3735f74bf1f4064d2a845a3e", [:mix], [], "hexpm"}, "plug": {:hex, :plug, "1.8.3", "12d5f9796dc72e8ac9614e94bda5e51c4c028d0d428e9297650d09e15a684478", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm"}, "plug_cowboy": {:hex, :plug_cowboy, "2.1.0", "b75768153c3a8a9e8039d4b25bb9b14efbc58e9c4a6e6a270abff1cd30cbe320", [:mix], [{:cowboy, "~> 2.5", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},