User:Admin
1. Create notes field with a data type of text via migration
________________________________________
https://fly.io/phoenix-files/sdeb-toggling-element/
https://www.youtube.com/watch?v=vBgZvQapqhs
https://blog.testdouble.com/posts/2022-11-28-how-to-use-javascript-with-phoenix-liveview/
defmodule AppWeb.PageLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, socket}
end
def button_event("invoke_writing") do
%JS{}
|> JS.remove_class("active", to: "#writing_button")
|> JS.add_class("hidden", to: "#writing_button")
|> JS.remove_class("hidden", to: "#preview_button")
|> JS.add_class("active", to: "#preview_button")
|> JS.remove_class("active", to: "#preview")
|> JS.add_class("hidden", to: "#preview")
|> JS.remove_class("hidden", to: "#writing")
|> JS.add_class("active", to: "#writing")
end
def button_event("invoke_preview") do
%JS{}
|> JS.remove_class("active", to: "#preview_button")
|> JS.add_class("hidden", to: "#preview_button")
|> JS.remove_class("hidden", to: "#writing_button")
|> JS.add_class("active", to: "#writing_button")
|> JS.remove_class("active", to: "#writing")
|> JS.add_class("hidden", to: "#writing")
|> JS.remove_class("hidden", to: "#preview")
|> JS.add_class("active", to: "#preview")
end
def render(assigns) do
~H"""
<button phx-click={button_event("invoke_writing")} id="writing_button" class="hidden">
Preview
</button>
<button phx-click={button_event("invoke_preview")} id="preview_button">
Writing
</button>
<div id="writing"> Writing Editing </div>
<div id="preview" class="hidden"> PREVIEW THE WORK </div>
"""
end
end
<%= for id <- 1..5 do %>
<.modal id={"notes-modal-#{id}"}>
<trix-editor class="trix-content"></trix-editor>
</.modal>
<% end %>
Tab 1: Lorem ipsum...
tab 2
tab 3
tab 4
tab 5
Create two working minimalistic LiveViews.
One is named SendView and the other is ReceiveView .
The SendView consist of a single form field to send data to RecieveView. ReceiveView contains code to renders SendView data to its page.
To understand web socket configuration we will:
1. Create a one way data connection between the two LiveViews and explain clearly the relationship between the code pieces with a focus on data flow.
2. Edit the code to create a two-way connection between both live views.
3. Combine both LiveViews into one live view to send and receive.
4. Write code to store real time chat content to a database.
This may seem like pointless overkill and maybe it is. However, this is what has worked for me.
PUB SUB
Before we begin, I will share three small pieces of code with you. These are the main characters, or main components for what we will build.
AppWeb.Endpoint.subscribe()
AppWeb.Endpoint.broadcast()
def handle_info(msg, socket) do
{:noreply, assign(socket)}
end
def handle_event(msg, params, socket) do
{:noreply, socket}
end
We will ultimately weave these little pieces of code into a LiveView and create a chat application.
Create Two Minimalistic Vanilla LiveViews
In router.ex create the following routes:
scope "/", AppWeb do
pipe_through :browser
live "/send", SendLive, :home
live "/receive", ReceiveLive, :home
end
In app_web create a folder named live. In the live folder create a file named send_live.ex.
Copy this code into it:
defmodule AppWeb.SendLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, data: " ")}
end
def handle_event("send", params, socket) do
{:noreply, socket}
end
def render(assigns) do
~H"""
<div>
<h1>connection Send</h1>
<form phx-submit="send">
<input type="text" name="text" />
<button type="submit">Send</button>
</form>
</div>
"""
end
end
defmodule AppWeb.SendLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
if connected?(socket) do
end
{:ok, assign(socket, username: username, messages: [])}
end
# def handle_info(%{event: "message", payload: message}, socket) do
# {:noreply, assign(socket, messages: socket.assigns.messages ++ [message])}
# end
def handle_event("send", %{"text" => text}, socket) do
AppWeb.Endpoint.broadcast("connection input-1", "SOUND", %{
text: text,
name: socket.assigns.username
})
{:noreply, socket}
end
defp username do
"User #{:rand.uniform(100)}"
end
def render(assigns) do
~H"""
<div>
<h1>connection Send</h1>
<div
class="messages"
style="border: 1px solid #eee; height: 400px; overflow: scroll; margin-bottom: 8px;"
>
</div>
<form phx-submit="send">
<input type="text" name="text" />
<button type="submit">Send</button>
</form>
</div>
"""
end
end
defmodule AppWeb.ReceiveLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, messages: " ")}
end
def handle_info(msg, socket) do
{:noreply, assign(socket, data: "")}
end
def render(assigns) do
~H"""
<div>
<h1>ReceiveLive Connection</h1>
<%= for m <- [1,2,3,4,5] do %>
<%= m %>
<% end %>
</div>
"""
end
end
defmodule AppWeb.RecieveLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
if connected?(socket) do
AppWeb.Endpoint.subscribe("connection input-1")
end
{:ok, assign(socket, username: username, messages: [])}
end
def handle_info(%{event: "SOUND", payload: message}, socket) do
{:noreply, assign(socket, messages: socket.assigns.messages ++ [message])}
end
# def handle_event("send", %{"text" => text}, socket) do
# AppWeb.Endpoint.broadcast("connection input-1", "message", %{
# text: text,
# name: "X"
# })
# {:noreply, socket}
# end
defp username do
"User #{:rand.uniform(100)}"
end
def render(assigns) do
~H"""
<div>
<h1>connection Recieve Live</h1>
<div
class="messages"
style="border: 1px solid #eee; height: 400px; overflow: scroll; margin-bottom: 8px;"
>
<%= for m <- @messages do %>
<p style="margin: 2px;"><b><%= m.name %></b>: <%= m.text %></p>
<% end %>
</div>
</div>
"""
end
end
Open the /send route and the /receive route each in their own tab. You will now write code so the form in send sends data to the page in receive.
- How to Create Database Seed Data.
- How to Use Generators in a Real World Project
- How to Work with Database Data via Basic Commands and Custom Change sets.
- How to Render Database Data to LiveView (via Context Commands).
- How to Create a Chat using PubSub.
- How to Create Event Handlers in LiveView
- How to Create a Dynamic Route from Scratch.
- How to Use Elixirs Template language
- How to Work with Modal
- How to Use CSS From Scratch (Without bundler)
- How to use JS hooks
_________________________________________________
https://elixirschool.com/blog/live-view-live-component
Note:
mix phx.gen.html Alerts Alert alerts title:string content:text enabled:boolean
defmodule AppWeb.PageLive do
use AppWeb, :live_view
alias App.Alerts
def mount(_params, _session, socket) do
{:ok, assign(socket, alerts: Alerts.list_alerts())}
end
def render(assigns) do
~H"""
<%= for alert <- @alerts do %>
<%= if alert.enabled do %>
<div><%= alert.content%></div>
<% end %>
<% end %>
"""
end
end
#_____________________________
def check_for_single_selection(data) do
list = App.Alerts.list_alerts()
IO.inspect list
result = Enum.filter(list, fn x -> x.enabled == true end)
IO.inspect "WORK_____________________________"
IO.inspect result
IO.inspect "WORK_____________________________"
data
end
__________________________________________________
Complex pattern matching https://www.youtube.com/watch?v=gCVWrM5BNVE
Genservers (and related, agent,task etc)
__________________________________________________
ECTO
query = from "artists", select:[:name]
Verbose:
Ecto.Query.from("artists", select[:name])
Repo.all(query)
- => [%{name: "Miles Davis"}, %{name: "Bill Evans"}]
Repo.to_sql(:all, query)
____________________________________________
defmodule AppWeb.PageLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok,
assign(socket,
notes: "We are the world"
)}
end
def handle_event("submit-modal-form", params, socket) do
IO.inspect("_______________SUBMITTED")
IO.inspect(params)
{:noreply, redirect(socket, to: "/")}
end
def handle_event("show", params, socket) do
end
def render(assigns) do
~H"""
<%= for id <- 1..5 do %>
<.modal id={"notes-modal-#{id}"} class="bg-red-500">
<form phx-submit="submit-modal-form">
<input
id={"notes-connection-modal-#{id}"}
value={"notes-modal-#{id}"}
type="hidden"
name="content"
/>
<trix-editor class="trix-content" input={"notes-connection-modal-#{id}"}></trix-editor>
<.button>Save Changes</.button>
</form>
</.modal>
<% end %> """ end
end