lili
/
pokemon-couture
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

liveview now works i guess

This commit is contained in:
Lili (Tlapka) 2021-09-01 13:29:11 +02:00
parent 6c33f540a2
commit 6e568c170a
5 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/assets/package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "assets",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

17
assets/js/app.js
View File

@ -13,3 +13,20 @@ import "../css/app.scss"
// import socket from "./socket"
//
import "phoenix_html"
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
// Connect if there are any LiveViews on the page
liveSocket.connect()
// Expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000)
// The latency simulator is enabled for the duration of the browser session.
// Call disableLatencySim() to disable:
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket

23
lib/pokemon_couture_web.ex
View File

@ -39,8 +39,6 @@ defmodule PokemonCoutureWeb do
# Include shared imports and aliases for views
unquote(view_helpers())
import Phoenix.LiveView.Helpers
end
end
@ -66,6 +64,9 @@ defmodule PokemonCoutureWeb do
# Use all HTML functionality (forms, tags, etc)
use Phoenix.HTML
# Import LiveView helpers (live_render, live_component, live_patch, etc)
import Phoenix.LiveView.Helpers
# Import basic rendering functionality (render, render_layout, etc)
import Phoenix.View
@ -75,6 +76,24 @@ defmodule PokemonCoutureWeb do
end
end
def live_view do
quote do
use Phoenix.LiveView,
layout: {PokemonCoutureWeb.LayoutView, "live.html"}
unquote(view_helpers())
end
end
def live_component do
quote do
use Phoenix.LiveComponent
unquote(view_helpers())
end
end
@doc """
When used, dispatch to the appropriate controller/view/etc.
"""

35
lib/pokemon_couture_web/templates/layout/live.html.leex Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PokemonCouture · Phoenix Framework</title>
<link rel="stylesheet" href="<%= Routes.static_path(@socket, "/css/app.css") %>"/>
<%= csrf_meta_tag() %>
<script defer type="text/javascript" src="<%= Routes.static_path(@socket, "/js/app.js") %>"></script>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@socket, :home) %></li>
<% end %>
</ul>
<%= render "_user_menu.html", assigns %>
</nav>
<a href="http://localhost:4000/" class="phx-logo"> <!-- TODO: needs a way to show the proper link -->
<img src="<%= Routes.static_path(@socket, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<main role="main" class="container">
<p class="alert alert-info" role="alert"><%= get_flash(@socket, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@socket, :error) %></p>
<%= @inner_content %>
</main>
</body>
</html>

12
lib/pokemon_couture_web/templates/layout/root.html.leex Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "MyApp" %>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body>
<%= @inner_content %>
</body>
</html>