Refactor snack index view and add javascript

Javascript will show and hide the new snack submission form
rweald · Jan 9, 2011 · c9706ac · c9706ac
1 parent c214485
commit c9706ac
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 2 deletions.
diff --git a/app/controllers/snacks_controller.rb b/app/controllers/snacks_controller.rb
@@ -6,6 +6,7 @@ def new
   def index
     @snacks = Snack.all()
     render :action => "index"
+    @snack = Snack.new
   end
 
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,6 +4,7 @@
   <title>SnackPicker</title>
   <%= stylesheet_link_tag :all %>
   <%= javascript_include_tag :defaults %>
+  <%= javascript_include_tag "jquery.min.js" %>
   <%= csrf_meta_tag %>
 </head>
 <body>

diff --git a/app/views/snacks/_snack_form.html.erb b/app/views/snacks/_snack_form.html.erb
@@ -0,0 +1,23 @@
+<div class="form_container">
+  <% form_for :snack, @snack, :url => {:controller => "snacks", :action => "create"} do |f| -%>
+    <div  class="field">
+      <%= f.label :name, "Name" %>
+      <%= f.text_field :name %> 
+    </div>
+    <div class="field">
+      <%= f.label :category, "Category" %>
+    <%= f.text_field :category %>
+    </div>
+    <div class="field">
+      <%= f.label :price, "Price" %>
+    <%= f.text_field :price %>
+    </div>
+    <div class="field">
+    <%= f.label :quantity, "Quantity" %>
+    <%= f.text_field :quantity %>
+    </div>
+    <div class="submission">
+      <%= f.submit "Add New Snack" %>
+    </div>
+  <% end -%>
+</div>
diff --git a/app/views/snacks/index.html.erb b/app/views/snacks/index.html.erb
@@ -14,7 +14,7 @@
         <tr>
           <td class="name"> <%= item.name %> </td>
           <td class="quantity"><%= item.quantity %> </td>
-          <td class="price"> <%= item.price %> </td>
+          <td class="price"> $ <%= item.price %> </td>
           <td class="votes"> <%= item.votes %> </td>
         </tr>
       <% end %>
@@ -24,3 +24,20 @@
 
   </tbody>
 </table>
+
+<div class="form_instructions"> 
+  <p>Don't see your snack on the list? </p>
+  <center><button id="show_form">Click Here to Add it</button> </center>
+</div>
+
+<%= render :partial => "snack_form" %>
+
+<script type="text/javascript">
+  $(function  () {
+    $("#show_form").click(function  () {
+      $(".form_container").toggle();
+    });
+
+  });
+</script>
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -80,4 +80,35 @@ table td:first-child{
 table tbody tr:hover{
   background-color:yellow;
   cursor: pointer;
-}
+}
+
+/*styling for the new snack form*/
+.form_instructions{
+  width: 80%;
+  margin: auto;
+  text-align: center;
+  margin-top: 20px;
+}
+
+.form_instructions button{
+  margin-top: 10px;
+  width: 275px;
+}
+
+.form_instructions p{
+  font-size: 16pt;
+}
+
+.form_container{
+  width: 60%;
+  margin: auto;
+  margin-top: 20px;
+  border: 2px solid #999;
+  padding: 5px;
+  display:none;
+}
+
+.form_container .field{
+  width: 70%;
+  margin: auto;
+}