Basic RESTful actions for cards.

2020-12-28 19:54:28 -08:00
parent 4a31d8a31b
commit 6266b089a5
25 changed files with 427 additions and 102 deletions
@@ -13,8 +13,22 @@ defmodule BwcWeb.CardController do
  end

  def create(conn,card_params) do
-      {:ok, card} = Bwc.create_card(Map.get(card_params,"card"))
-      redirect(conn, to: Routes.card_path(conn, :show, card))
+      case Bwc.create_card(Map.get(card_params,"card")) do
+        {:ok, card} -> redirect(conn, to: Routes.card_path(conn, :show, card))
+        {:error, card} -> render(conn, "new.html", card: card)
+      end
+
+  end
+
+  def delete(conn, params) do
+    id = Map.get(params, "id")
+    {:ok, card} = Bwc.delete_card(Bwc.get_card(id))
+    render(conn, "delete.json", card: card)
+  end
+
+  def index(conn, _params) do
+    cards = Bwc.list_cards()
+    render(conn, "index.html", cards: cards)
  end

 end
@@ -19,14 +19,15 @@ defmodule BwcWeb.Router do
    get "/", PageController, :index
    get "/create", CardController, :new

-    resources "/cards", CardController, only: [:show, :new, :create]
+    resources "/cards", CardController, only: [:show, :new, :create, :index]

  end

-  # Other scopes may use custom stacks.
-  # scope "/api", BwcWeb do
-  #   pipe_through :api
-  # end
+  scope "/api", BwcWeb do
+    pipe_through :api
+
+    resources "/cards", CardController, only: [:delete]
+  end

  # Enables LiveDashboard only for development
  #
@@ -0,0 +1,45 @@
+<div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top uk-flex-column">
+<h1>All Cards</h1>
+<hr/>
+
+<div class="uk-flex  uk-flex-wrap uk-flex-center">
+    <input type="hidden" value="<%= Phoenix.Controller.get_csrf_token() %>" name="_csrf_token"/>
+
+<%= if Enum.empty? @cards do %>
+<div class="create">
+            There are no cards.<br/>
+            What are you waiting for?
+            <a href="/create">
+                Create a card!
+            </a>
+        </div>
+<% end %>
+
+<%= for card <- @cards do %>
+
+<div class="uk-flex uk-text-center" id="card-<%=card.id%>">
+  <div class="card-preview uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
+    <h3 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= card.title %> </h3>
+    <div class="card-picture uk-flex uk-flex-center">
+      <img class="card-picture" src="<%=card.picture%>" />
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+      <%=card.description          %>
+    </div>
+  </div>
+<a class="delete-tool" uk-icon="icon: trash; ratio:1" uk-tooltip="title: Delete" href="javascript:deleteCard(<%=card.id %>)"></a>
+</div>
+
+
+<% end %>
+
+
+</div>
+     <div class="create uk-margin-top">
+
+   <hr />
+               What are you waiting for?
+            <a href="/create">
+                Create more cards!
+            </a>
+        </div>
@@ -1,12 +1,46 @@
-<h1>New Card</h1>
-<%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
-<%= label f, :title %>
-<%= text_input f, :title %>
-<%= label f, :picture %>
-<%= text_input f, :picture %>
-<%= label f, :description %>
-<%= textarea f, :description %>
-<div>
-<%= submit "Submit" %>
+<div class="new-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
+    <%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
+    <%= text_input f, :title, class: "card-title uk-text-xlarge uk-margin-large-bottom" %>
+    <%= error_tag f, :title %>
+    <div class="card-picture uk-flex uk-flex-center uk-inline">
+        <%= text_input f, :picture, class: "uk-hidden" %>
+        <img class="card-picture" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yMjguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjI4LjE4NHogTTM2MC4yNDQsMjQ0LjI0N0gyNDAuNDM3di04OC40OTRoMTE5LjgwOEwzNjAuMjQ0LDI0NC4yNDcNCgkJTDM2MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI0Ni44ODEsMjM0LjcxNyAyNzEuNTcyLDIwOC43NjQgMjgwLjgyNCwyMTIuNzY4IDMxMC4wMTYsMTgxLjY4OCAzMjEuNTA1LDE5NS40MzQgDQoJCTMyNi42ODksMTkyLjMwMyAzNTQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjI3NS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K" />
+        <div class="image-tools uk-flex uk-overlay-default uk-position-center">
+            <a class="image-tool" id="imageSearch" uk-icon="icon: search; ratio:2" uk-tooltip="title: Search" uk-toggle="target: #imageModal"></a>
+            <!--a class="image-tool" id="imageInsta" uk-icon="icon: instagram; ratio: 2" uk-tooltip="Instagram"></a>
+		<div class="uploader" uk-form-custom style="margin:1em;"  uk-tooltip="Upload">
+		  <input type="file">
+		  <a style="margin:0px;" class="image-tool" id="imageUpload" uk-icon="icon: upload; ratio: 2"></a></div>
+		  <a class="image-tool" id="imageDraw" uk-icon="icon: pencil; ratio: 2" uk-tooltip="Draw"></a-->
+        </div>
+
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+        <%= textarea f, :description, class: "card-content-box"%>
+        <%= error_tag f, :description %>
+    </div>
+<div class="controls uk-margin-top">
+    <div class="uk-flex uk-flex-center">
+        <ul class="uk-subnav uk-subnav-pill" style="margin-bottom:0px;">
+            <li><button id="newCard" class="uk-subnav-pill" href="#">New</a></li>
+            <li>
+                <%= submit "Submit", class: "uk-active uk-subnav-pill", id: "submitCard" %>
+            </li>
+        </ul>
+    </div>
 </div>
-<% end %>
+<%end %>
+</div>
+
+<div id="imageModal" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body">
+	<form class='uk-search uk-search-large' id="imageModalContent">
+	  <a href="#" id="giphySearchButton" class="uk-search-icon-flip" uk-search-icon></a>
+	  <input id="giphySearch" class="uk-search-input" placeholder="Search GIPHY..." />
+	</form>
+	<div id="giphySearchResults" class="uk-flex uk-flex-center uk-flex-wrap">
+
+	</div>
+	<button class="uk-modal-close-default" type="button" uk-close></button>
+      </div>
+    </div>
@@ -1,10 +1,22 @@
-<div>
-  <h1><%= @card.title %> </h1>
+<div id="play_mode" class="game-mode uk-flex uk-text-center">
+  <div id='card-view' class="active-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
+    <span class="uk-label your-card-" style="display:none;">your card</span>
+    <h1 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= @card.title %> </h1>
+    <div class="card-picture uk-flex uk-flex-center">
+      <img class="card-picture" src="<%=@card.picture%>" />
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+      <%=@card.description          %>
+    </div>
+  </div> <!-- active-card -->

-  <div class="picture">
-  <img src="<%= Routes.static_path(@conn, @card.picture) %>"/>
-  </div>
-  <div class="description">
-  <%= @card.description %>
+  <div class="active-card-controls uk-margin-top">
+    <div class="uk-flex uk-flex-center">
+      <ul class="uk-subnav uk-subnav-pill">
+        <li class="card-control reveal-card"><a onClick="revealCard()" id="revealCard" href="#">Reveal Card</a></li>
+        <li class="card-control done-with-card"> <a onClick="doneWithCard()" id="doneWithCard" class="uk-subnav-pill"
+            href="#">Done</a></li>
+      </ul>
+    </div>
  </div>
 </div>
@@ -1,33 +1,31 @@
 <!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"/>
+
+<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>Blank White Cards!</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <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>
-    <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(@conn, :home) %></li>
-            <% end %>
-          </ul>
-        </nav>
-        <a href="/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo"/>
-        </a>
-      </section>
-    </header>
-    <main role="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>
-  </body>
+</head>
+
+<body>
+    <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom uk-height-1-1">
+        <div class="uk-text-center uk-container" id="top-bar">
+            <h1 class="uk-heading-line-">
+                <a href="/">
+                    <img class="bwc-logo" src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo" />
+                </a>
+            </h1>
+        </div>
+
+        <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+        <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+        <div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top">
+            <%= @inner_content %>
+        </div>
+    </div>
+</body>
+
 </html>
@@ -1,18 +1,19 @@
-<div  style="margin:0 auto; width: 800px; text-align:center;">
-  <h1></h1>
-
-  <div class="picture">
-  <img height=200px src="<%= Routes.static_path(@conn, "/images/logo.png") %>"/>
-  </div>
-  <div class="description">
-	<h2><%= @status %></h2>
-	<i>Cards in the pot: <%= length(@cards) %></i>
-  </div>
-  <hr/>
-  <div class="create">
-	What are you waiting for?
-	<a href="/create">
-	Create a card!
-	</a>
-  </div>
+<div class='uk-container uk-container-center uk-flex uk-text-center uk-flex-column'>
+    <div class="logo uk-flex uk-flex-center uk-margin-large-bottom">
+        <img width=400px src="<%= Routes.static_path(@conn, "/images/logo.png") %>" />
+    </div>
+    <div>
+        <h2><%= @status %></h2>
+        <i>Cards in the pot: <%= length(@cards) %></i>
+        <emph>
+            <%= link("(View all)", to: Routes.card_path(@conn, :index)) %>
+        </emph>
+        <hr />
+        <div class="create">
+            What are you waiting for?
+            <a href="/create">
+                Create a card!
+            </a>
+        </div>
+    </div>
 </div>
@@ -1,3 +1,14 @@
 defmodule BwcWeb.CardView do
+  require Logger
  use BwcWeb, :view
+
+  def render("delete.json", params) do
+    card = Map.get(params,:card)
+    Logger.debug(card.title)
+    %{
+      data: "Deleted '#{card.title}'.",
+      card: card.id
+    }
+  end
+
 end