Really just index.html frontend shit

2022-10-22 02:10:40 -07:00 · 2022-10-22 02:10:40 -07:00 · a2842cdb2c
commit a2842cdb2c
parent 6306fbe175
8 changed files with 125 additions and 9 deletions
--- a/friends/lib/friends/relationship.ex
+++ b/friends/lib/friends/relationship.ex
@ -68,6 +68,12 @@ defmodule Friends.Relationship do
    )
  end

+
+  def all() do
+    preloads = []
+    @repo.all(from(r in Friends.Relationship, preload: ^preloads))
+  end
+
  def new(friend1, friend2, type \\ 0) do
    id1 = friend1.id
    id2 = friend2.id
--- a/friends/lib/friends_web/controllers/page_controller.ex
+++ b/friends/lib/friends_web/controllers/page_controller.ex
@ -1,7 +1,16 @@
 defmodule FriendsWeb.PageController do
  use FriendsWeb, :controller
+  alias Friends.{Friend, Relationship}
+  import Helpers

  def index(conn, _params) do
-    render(conn, "index.html")
+
+    new_friend = Friend.new |> Friend.changeset
+
+    conn
+    |> assign(:new_friend, new_friend)
+    |> assign(:all_friends, Friend.all)
+    |> assign(:all_relationships, Relationship.all)
+    |> render("index.html")
  end
 end
--- a/friends/lib/friends_web/live/components/sign_up.ex
+++ b/friends/lib/friends_web/live/components/sign_up.ex
@ -0,0 +1,40 @@
+defmodule FriendsWeb.Components.SignUp do
+  use FriendsWeb, :live_component
+  import Helpers
+
+  def sign_up_form(assigns) do
+    ~H"""
+    <.form
+      for={@new_friend}
+      let={f}
+      phx_change= "validate"
+    >
+
+    <div class="form-control w-full max-w-xs flex flex-row">
+    <%= label f, :name, class: "label font-bold" %>
+    <%= text_input f, :name, placeholder: "First Middle Last", class: "ml-2 flex-grow input input-bordered input-primary w-full max-w-xs", phx_debounce: "blur"%>
+    </div>
+    <div class="m-4 mt-0 pr-5 text-right max-w-xs">&nbsp;<%= error_tag f, :name %></div>
+
+    <div class="form-control w-full max-w-xs flex flex-row">
+    <%= label f, :email, class: "label font-bold" %>
+    <%= text_input f, :email, placeholder: "my.friend@gmail.com", class: "ml-2 flex-grow input input-bordered input-primary w-full max-w-xs", phx_debounce: "blur"%>
+    </div>
+    <div class="m-4 mt-0 pr-5 text-right max-w-xs">&nbsp;<%= error_tag f, :email %></div>
+
+    <div class="form-control w-full max-w-xs flex flex-row">
+    <%= label f, :phone, class: "label font-bold" %>
+    <%= text_input f, :phone, placeholder: "+1 234 5678", class: "ml-2 flex-grow input input-bordered input-primary w-full max-w-xs", phx_debounce: "blur"%>
+    </div>
+    <div class="m-4 mt-0 pr-5 text-right max-w-xs">&nbsp;<%= error_tag f, :phone %></div>
+
+
+    <div class="form-control w-full max-w-xs mt-10">
+      <%= submit "Save", phx_disable_with: "Saving...", class: "btn" %>
+    </div>
+
+    </.form>
+
+    """
+  end
+end
--- a/friends/lib/friends_web/router.ex
+++ b/friends/lib/friends_web/router.ex
@ -14,10 +14,10 @@ defmodule FriendsWeb.Router do
    plug :accepts, ["json"]
  end

-  scope "/", FriendsWeb.FriendsLive do
+  scope "/", FriendsWeb do
    pipe_through :browser

-    live "/", Index
+    get "/", PageController, :index
    live "/friend/:slug", FriendsLive.Show

  end
--- a/friends/lib/friends_web/templates/layout/app.html.heex
+++ b/friends/lib/friends_web/templates/layout/app.html.heex
@ -1,5 +1,24 @@
-<main class="container">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-  <%= @inner_content %>
-</main>
+<div id="navbar" class="sticky top-0 z-40 bg-neutral text-neutral-content border-b-4 border-primary">
+  <div class="md:w-2/3 md:mx-auto navbar">
+    <div class="flex-1">
+      <.link navigate={"/"} class="btn btn-ghost normal-case text-xl">Friends</.link>
+    </div>
+    
+  </div>
+</div>
+<div class="mx-auto w-max md:w-3/4">      
+  <main class="container p-4 mb-10 md:p-8 px-12">
+    <%= @inner_content %>
+  </main>
+</div>
+<div class="md:hidden btm-nav">
+  <button class="text-neutral active">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+  </button>
+  <button class="text-neutral">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+  </button>
+  <button class="text-neutral">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+  </button>
+</div>
--- a/friends/lib/friends_web/templates/layout/root.html.heex
+++ b/friends/lib/friends_web/templates/layout/root.html.heex
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="pastel">
+<html lang="en" data-theme="corporate"> <!-- pastel -->
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
--- a/friends/lib/friends_web/templates/page/index.html.heex
+++ b/friends/lib/friends_web/templates/page/index.html.heex
@ -0,0 +1,35 @@
+<div class="flex flex-col flex-col-reverse gap-12 items-center md:flex-row md:justify-between">
+    <div id="hero" class="prose md:w-1/2">
+        <h1>
+            Friends App
+        </h1>
+        <p class="">
+            <i>Friends</i> helps us remember the important
+            dates in your life, keep track of any big life changes,
+            and basically act like the 2011 Facebook we all miss.
+        </p>
+        <h3 class="mt-12 border-b-2">
+            Database stats
+        </h3>
+        <ul>
+            <li>
+                <.link patch="/friends" class="">
+                    <%= pluralize(@all_friends |> length, "friend")  %>
+                </.link>
+            </li>
+            <li>
+                <.link patch="/relationships" class="">
+                    <%= pluralize(@all_relationships |> length, "relationship")  %>
+                </.link>
+            </li>
+        </ul>
+    </div>                
+    <div id="sign-up" class="prose card md:w-fit bg-base-100 shadow-xl items-center">
+        <div class="card-body">
+            <h1 class="card-title border-b-2 mb-12">
+                Sign Up
+            </h1>
+                <.sign_up new_friend={@new_friend} />
+        </div>
+    </div>
+</div>
--- a/friends/lib/friends_web/views/page_view.ex
+++ b/friends/lib/friends_web/views/page_view.ex
@ -1,3 +1,10 @@
 defmodule FriendsWeb.PageView do
  use FriendsWeb, :view
+  import Phoenix.Component
+  import Helpers
+
+  alias FriendsWeb.Components.SignUp, as: SignUp
+
+  def sign_up(assigns), do: SignUp.sign_up_form(assigns)
+
 end