User: Admin: Difference between revisions

Revision as of 21:00, 12 October 2023

https://blixtdev.com/whats-new-phoenix-1-7/ https://github.com/devato/inertia_phoenix https://phoenixonrails.com/blog/you-can-stop-using-form-for-in-phoenix

https://samuelmullen.com/articles/phoenix_templates_rendering_and_layouts

WorkFlow of Todo App in Both LiveView and DeadView.

Note:

Create foreign key data. Create live view. List all testbeds and form to assign each a group by group-name.

Repeat in dead view

Mental model and data flows

home.html.heex <a href="/data" name="we are the world" > click me</a>

<%= @message %>

page controller

defmodule AppWeb.PageController do
  use AppWeb, :controller

  def home(conn, _params) do
    IO.inspect _params
    render(conn, :home, message: "Hello")
  end

end

get "/:yay", PageController, :index

get "/", PageController, :index

Explain control flow of "Dead Views" and the Generator HTML Control flow.
Proper Way to use Modal
How to give Focus to Fields in Modal (or other forms fields)
How to Create Database Seed Data.
How to structure code so controller code is in one file and HTML Heex is in another
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://studioindie.co/blog/heex-guide/

get "/", PageController, :some-atom    #This is the route. some-atom is the controller name

defmodule AppWeb.PageController do
  use AppWeb, :controller

  def some-atom(conn, _params) do                 # controller name
    # The home page is often custom made,
    # so skip the default app layout.
    render(conn, :some-atom, layout: false)      # :some-atom is template name
  end
end

Controllers page_html.ex contains

defmodule AppWeb.PageHTML do
  use AppWeb, :html

  embed_templates "page_html/*"
end

page_html is the name of the folder in Controllers/page_html

Controllers/page_html/some-atom.html.heex (this is the template)

__________________________________________ Set all association with preload:

  def list_groups do
    Repo.all(Group)
     |> Repo.preload([:testbeds])
  end

Insert Child into Parent

Example:

App.get_group!(2) # arg is id
|> Ecto.build_assoc(:testbeds)
|> Repo.insert()

Or

group = App.get_group!(2) # arg is id

testbeds = Ecto.build_assoc(group, :testbeds)

App.Group.create_group(testbeds)

group = App.Groups.get_group!(1)
thing = Ecto.build_assoc(group, :testbeds, name: "DUMB")
alias App.{Repo}
Repo.insert(thing)

Example

avatar = %Avatar{nick_name: "Elixir", pic_url: "http://elixir-lang.org/images/logo.png"}
user = %User{name: "John Doe", email: "john.doe@example.com", avatar: avatar}

https://www.reddit.com/r/elixir/comments/oh318k/is_there_a_way_to_avoid_ectoassociationnotloaded/h4mmcfi/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

Create Group Table

mix phx.gen.html Groups Group groups name:string

Set the resources /

mix ecto.migrate

For testbeds create a migration file and add this field: group_id:references:groups

def change do
    alter table(:testbeds) do    # customize to your code
      add :group_id, references(:groups)
    end
  end

Update Groups Schema (Don't forget alias / has_many)


defmodule App.Groups.Group do
	use Ecto.Schema
	import Ecto.Changeset
	alias App.Testbeds.Testbed   # Alias!

	schema "posts" do
		field :body, :string
		field :title, :string
		has_many :testbeds, Testbed    # Has many

		timestamps()
	end

	@doc false
	def changeset(post, attrs) do
		post
		|> cast(attrs, [:title, :body])
		|> validate_required([:title, :body])
	end
end

TESTBEDS Schema

defmodule App.Testbeds.Testbed do
  use Ecto.Schema
  import Ecto.Changeset
  alias App.Groups.Group      # Alias
  schema "testbeds" do
    field :name, :string
    belongs_to :group, Group    # Belongs to
    timestamps()
  end

  @doc false
  def changeset(testbed, attrs) do
    testbed
    |> cast(attrs, [:name])
    |> validate_required([:name])
  end
end

_____________________________________ Side notes.

defmodule App.Repo.Migrations.CreateTestbeds do

 use Ecto.Migration

 def change do
   create table(:testbeds) do
     add :name, :string
     add :group_id, references(:groups, on_delete: :nothing)

     timestamps()
   end

   create index(:testbeds, [:group_id])
 end

end

________________________________

mix phx.gen.context Comments Comment comments name:string content:text post_id:references:posts

mix phx.gen.html Testbeds Testbed testbeds name:string group_id:references:groups

https://graffino.com/web-development/first-steps-in-elixir-and-phoenix-create-a-blog-prototype

https://blog.logrocket.com/getting-started-ecto-phoenix/

https://serokell.io/blog/ecto-guide-for-beginners

mix phx.gen.html Testbeds Testbed testbeds name:string

mix phx.gen.html Groups Group groups name:string

Create migration for

mix ecto.gen.migration add_testbed_group_reference

Migration:

  def change do
    alter table(:testbeds) do    # customize to your code
      add :group_id, references(:groups)
    end
  end

Manually Change:


defmodule App.Group do
  use Ecto.Schema

  schema "groups" do
    field :title, :string
    field :tagline, :string
    has_many :testbeds, App.Testbed
  end
end

testbeds

defmodule App.Repo.Migrations.AddTextbedGroups do
  use Ecto.Migration

  def change do
    create table(:testbeds) do
      add :name, :string
      add :group_id, references(:groups)
    end
  end
end

# lib/app/testbeds.ex

defmodule App.Testbed do
  use Ecto.Schema

  schema "testbedss" do
    field :name, :string
    belongs_to :group, App.Group
  end
end

_____________________

%App.TestBeds.TestBed{

 __meta__: #Ecto.Schema.Metadata<:loaded, "testbeds">,
 id: 1,
 developer: "None",
 name: "sdfsd",
 owner: "sdfsddf",
 note: "sdsfsddf",
 status: "Available",
 url: "sdf",
 version: "ddf",
 manager: "sf",
 inserted_at: ~N[2023-08-21 13:45:39],
 updated_at: ~N[2023-08-21 13:45:44]

} ________________________________________________________________---

defmodule AppWeb.SendLive do
  use AppWeb, :live_view
  
  def mount(_params, _session, socket) do
    {:ok, socket}
  end
  
  
  def handle_event("send", %{"text" => text}, socket) do

    AppWeb.Endpoint.broadcast(topic, "message", text)
    {:noreply, socket}
  end
  

  defp topic do
    "chat"
  end


  def render(assigns)do   
   ~H"""
<div>
  <h1>Send Message</h1>

  <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
    if connected?(socket) do
      AppWeb.Endpoint.subscribe(topic)
    end
    {:ok, assign(socket, messages: "")}
  end
  
  def handle_info(%{event: "message", payload: message}, socket) do
    IO.inspect message
    {:noreply, assign(socket, messages: message)}
  end
  

  defp topic do
    "chat"
  end

  def render(assigns)do   
   ~H"""
<div>
  <h1>ChatLive</h1>
  <%= @messages %>


</div>

"""
  end
  
end

______________________________________________________________ When you hover over a list of items this hook finds items with the same name and sets the opacity of all others to 0. You see all the items similar to the one you are hovering over.


TestbedVersionHover: {
			// https://jsfiddle.net/IrvinDominin/7K2Z3/
            mounted() {

                let rows = document.getElementsByClassName("testbed-version")
                // this.ele = element
				// rows = this.ele;
                
				for (var i = 0; i < rows.length; i++) {
					rows[i].onmouseenter = function (event) {
						for (var j = 0; j < rows.length; j++) {
							let preversion = this.textContent;
							let version = preversion.slice(0,5)
							let compareVersion = rows[j].textContent.slice(0,5)
							if (compareVersion === version) continue
							rows[j].className += " other";
						}
					};
				
					rows[i].onmouseleave = function (event) {
						var hovers = document.getElementsByClassName('other');
						var len = hovers.length;
						for (var j = 0; j < len; j++) {
							hovers[0].className = hovers[0].className.replace(/\sother(\s|$)/, '');
						}
					};
				}

                // this.ele.addEventListener("click", (e) => {
                //     console.log(e.target)
                    
                // });

            }
        }

How to Create Database Seed Data.
How to structure code so controller code is in one file and HTML Heex is in another
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
Dissect Table Component and Update it to Order List in Reverse.

Selenium https://www.builder.io/blog/debug-nodejs

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server#running-the-extension

This was added recently (see microsoft/vscode#109276).

   1. Open the palette (Ctrl + Shift + P)
   2. Select "Simple Browser: Preview"
   3. Enter web address

_______________________

const {By, Key, Builder} = require("selenium-webdriver");
const assert = require("assert")

require("chromedriver");

async function test_case(){
  let driver = await new Builder().forBrowser("chrome").build();
  await driver.get("sie");


  await driver.findElement(By.name('password')).clear();
  await driver.findElement(By.name('identification')).clear();
  await driver.findElement(By.name('identification')).sendKeys("bill");
  await driver.findElement(By.name('password')).sendKeys("password", Key.RETURN);




 setTimeout(()=>{
   driver.findElement(By.className("req_lan_license")).click();
 },5000)

defmodule AppWeb.PageLive do 

  use AppWeb, :live_view  
  alias App.Testbeds 
  def mount(_params, _session, socket)do   
     {:ok, assign(socket, testbeds: Testbeds.list_testbeds())}   
  end

    def button_event("invoke_editing") do
    %JS{}
    |> JS.remove_class("active", to: "#editing_button")
    |> JS.add_class("hidden", to: "#editing_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: "#editing")
    |> JS.add_class("active", to: "#editing")
  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: "#editing_button")
    |> JS.add_class("active", to: "#editing_button")
    |> JS.remove_class("active", to: "#editing")
    |> JS.add_class("hidden", to: "#editing")
    |> JS.remove_class("hidden", to: "#preview")
    |> JS.add_class("active", to: "#preview")

  end

  def handle_event("send", params, socket) do
    hide_modal("notes-modal-0")
    {:noreply, socket}
  end

  

  def render(assigns) do  
     ~H"""

    <%= for testbed <- @testbeds do %>
		<.modal id={"notes-modal-#{testbed.id}"}>
		    <.button phx-click={button_event("invoke_editing")} id="editing_button" class="hidden">
		      Preview
		    </.button>
		    <.button phx-click={button_event("invoke_preview")} id="preview_button">
		      Edit Me
		    </.button>
		    <div id="editing"> PREVIEWING THE WORK</div>
		    <form phx-submit = "send"   id="preview" class="hidden">
		      <textarea value = {testbed.note}></textarea>
		      <.button type="submit" phx-click={hide_modal("notes-modal-#{testbed.id}")}>SAVE WORK</.button>
		    </form>
		</.modal>

    <%= if testbed.note do %>
      <div phx-click={show_modal("notes-modal-#{testbed.id}")}>READ ME  ...<%= testbed.note %></div>
    <% end %>
	   
    <% end %>
       
      """
  end

end

import {HfInference} from "@huggingface/inference";
import dotenv from "dotenv";
dotenv.config()

const HF_ACCESS_TOKEN = process.env.HF_ACCESS_TOKEN

const hf = new HfInference(HF_ACCESS_TOKEN);


/*______Uncomment for this example______________________

const model = "nlpconnect/vit-gpt2-image-captioning";
const imageURL = "https://i.imgur.com/lTvb7Et.png";

const response = await fetch(imageURL);
const imageBlob = await response.blob();

const result  = await hf.imageToText({
	data: imageBlob,
	model: model,
});

_______________________________________________________*/



/*________Another example ___________________*/

const result = await hf.summarization({
	model: 'facebook/bart-large-cnn',
	inputs: "The role of a dumb man is to get smarter oogy bookie boo",
	parameters:{
		max_length: 100
	}
});





console.log(result);

________________________________________

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/

https://hexdocs.pm/phoenix_live_view/0.19.3/Phoenix.Component.html _______________________________________ https://www.smashingmagazine.com/2011/10/quick-look-math-animations-javascript/

Depth first traversal
Breadth first traversal

https://dev.to/codesphere/10-algorithms-every-developer-should-learn-3lnm

https://www.youtube.com/watch?v=fPz40W9mfCg

@@ Line 1: / Line 1: @@
 https://blixtdev.com/whats-new-phoenix-1-7/
+https://github.com/devato/inertia_phoenix
 https://phoenixonrails.com/blog/you-can-stop-using-form-for-in-phoenix