Make things a lot more beautiful

app/assets/stylesheets/application.css.scss

@@ -56,6 +56,10 @@ input {
   height: auto !important;
 }
 
+/* boostrap */
+body {
+  padding-top: 80px;
+}
 
 /* footer */
 

app/controllers/products_controller.rb

@@ -6,16 +6,12 @@ class ProductsController < ApplicationController
   def create
     @product = Product.new(product_params)
     if @product.save
-      redirect_to @product
+      redirect_to action: :index
     else
-      render 'new'
+      render :new
     end
   end
 
-  def show
-    @product = Product.find(params[:id])
-  end
-
   def index
     @products = Product.all
   end
@@ -27,7 +23,7 @@ class ProductsController < ApplicationController
   def update
     @product = Product.find(params[:id])
     if @product.update_attributes(product_params)
-      redirect_to @product
+      redirect_to action: :index
     else
       render 'edit'
     end

app/helpers/application_helper.rb

@@ -14,10 +14,58 @@ module ApplicationHelper
     get_inverted_color(user)+ ";"
   end
 
+  def euro(f)
+    "€#{number_with_precision f, precision: 2}"
+  end
+
   #tijdelijk voor layout
   def koelkast(status)
     @koelkast ||= status
   end
 
+  # Form helpers
+  def form_errors(object)
+    render partial: "form_errors", locals: {object: object}
+  end
+
+  def form_text_field(f, tag)
+    render partial: "form_text_field", locals: {f: f, tag: tag}
+  end
+
+  def form_password_field(f, tag)
+    render partial: "form_password_field", locals: {f: f, tag: tag}
+  end
+
+  def form_text_area(f, tag)
+    render partial: "form_text_area", locals: {f: f, tag: tag}
+  end
+
+  def form_fancy_text_area(f, tag)
+    render partial: "form_fancy_text_area", locals: {f: f, tag: tag}
+  end
+
+  def form_email_field(f, tag)
+    render partial: "form_email_field", locals: {f: f, tag: tag}
+  end
+
+  def form_date_field(f, tag, id, value)
+    render partial: "form_date_field", locals: {f: f, tag: tag, id: id, value: value}
+  end
+
+  def form_number_field(f, tag)
+    render partial: "form_number_field", locals: {f: f, tag: tag}
+  end
+
+  def form_collection_select(f, *args)
+    # This line enable passing optional arguments such as include_blank to the
+    # partial. If nothing is passed, an empty options hash is appended.
+    args << {} if args.length < 5
+
+    render partial: "form_collection_select", locals: {f: f, args: args}
+  end
+
+  def form_check_box(f, tag)
+    render partial: "form_check_box", locals: {f: f, tag: tag}
+  end
 
 end

app/models/product.rb

@@ -24,4 +24,14 @@ class Product < ActiveRecord::Base
   def count(order)
     order_products.find_by(order: order).count
   end
+
+  def price
+    (read_attribute(:price) || 0) / 100.0
+  end
+
+  def price=(value)
+    if value.is_a? String then value.sub!(',', '.') end
+    write_attribute(:price, (value.to_f * 100).to_int)
+  end
+
 end

app/views/application/_form_check_box.html.erb

@@ -0,0 +1,6 @@
+<div class="checkbox">
+  <label>
+    <%= f.label tag %>
+  </label>
+  <%= f.check_box tag %>
+</div>

app/views/application/_form_collection_select.html.erb

@@ -0,0 +1,5 @@
+<%# To pass options to the collection_select, add {options} as the last argument %>
+<div class="form-group">
+  <%= f.label args.first %>:
+  <%= f.collection_select *args, {class: 'form-control'} %>
+</div>

app/views/application/_form_date_field.html.erb

@@ -0,0 +1,7 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <div class="input-group">
+    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
+    <%= f.text_field tag, class: 'form-control', id: id, value: value %>
+  </div>
+</div>

app/views/application/_form_email_field.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.email_field tag, class: 'form-control' %>
+</div>

app/views/application/_form_errors.html.erb

@@ -0,0 +1,14 @@
+<% if object.errors.any? %>
+  <div class="panel panel-danger form-errors">
+    <div class="panel-heading">
+      <%= pluralize(object.errors.count, "error") %> prohibited this <%= object.class.name.downcase %> from being saved:
+    </div>
+    <div class="panel-body">
+      <ul>
+        <% object.errors.full_messages.each do |msg| %>
+          <li><%= msg %></li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% end %>

app/views/application/_form_fancy_text_area.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.text_area tag, class: 'form-control ckeditor' %>
+</div>

app/views/application/_form_number_field.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.number_field tag, class: 'form-control', min: 0 %>
+</div>

app/views/application/_form_password_field.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.password_field tag, class: 'form-control' %>
+</div>

app/views/application/_form_text_area.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.text_area tag, class: 'form-control' %>
+</div>

app/views/application/_form_text_field.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label tag %>:
+  <%= f.text_field tag, class: 'form-control' %>
+</div>

app/views/layouts/_header.html.erb

@@ -1,7 +1,12 @@
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
       <%= link_to "Tab", root_path, class: "navbar-brand" %>
     </div>
 

app/views/layouts/application.html.erb

@@ -1,24 +1,21 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Tab002</title>
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
+  <head>
+    <title>Tab002</title>
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+    <%= csrf_meta_tags %>
+  </head>
 
+  <body>
+    <%= render "layouts/header" %>
+    <div class="container">
 
-<%= render "layouts/header" %>
-<div class="container">
+      <%= yield %>
 
-  <%= yield %>
+      <%= render "layouts/footer" %>
+    </div>
 
-  <%#= render "layouts/footer" %>
-</div>
-
-<%= debug(params) if Rails.env.development? %>
-
-
-</body>
+    <%= debug(params) if Rails.env.development? %>
+  </body>
 </html>

app/views/products/_form.html.erb

@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col-md-6 col-md-offset-3">
+    <%= form_for @product, html: { multipart: true } do |f| %>
+      <%= render 'application/errors', model: @product %>
+
+      <%= form_text_field f, :name %>
+
+      <%= f.label :price %>
+      <%= f.number_field :price, value: number_with_precision(f.object.price, precision: 2), class: 'form-control', placeholder: "0.00", step: :any %>
+
+      <%= f.label :avatar %>
+      <%= f.file_field :avatar %>
+
+      <%= f.submit class: "btn btn-primary" %>
+    <% end %>
+  </div>
+</div>

app/views/products/_product.html.erb

@@ -0,0 +1,12 @@
+<div class="col-md-3">
+  <div class="thumbnail">
+    <%= image_tag product.avatar %>
+    <div class="caption">
+      <h3><%= product.name %> - <%= euro(product.price) %></h3>
+      <p>
+        <%= link_to "Edit", edit_product_path(product), class: "btn btn-default" %>
+        <%= link_to "Delete", product_path(product), method: :delete, class: "btn btn-danger", data: {confirm: 'Are you sure?'} %>
+      </p>
+    </div>
+  </div>
+</div>

app/views/products/edit.html.erb

@@ -1,24 +1,2 @@
 <h1>Update product</h1>
-
-<div class="row">
-  <div class="col-md-6 col-md-offset-3">
-    <%= form_for(@product) do |f| %>
-      <%= render 'application/errors', model: @product %>
-
-      <%= f.label :name %>
-      <%= f.text_field :name %>
-
-      <%= f.label :purchase_price %>
-      <%= f.number_field :purchase_price %>
-
-      <%= f.label :sale_price %>
-      <%= f.number_field :sale_price %>
-
-      <%= f.label :avatar %>
-      <%= f.file_field :avatar %>
-
-      <%= f.submit "Save changes", class: "btn btn-primary" %>
-    <% end %>
-
-  </div>
-</div>
+<%= render "form" %>

app/views/products/index.html.erb

@@ -1,11 +1,7 @@
 <h1>All products</h1>
 
-<ul class="products">
-  <% @products.each do |product| %>
-    <li>
-      <%= link_to product.name, product %> |
-      <%= link_to "delete", product, method: :delete,
-                                  data: { confirm: "You sure?" } %>
-    </li>
-  <% end %>
-</ul>
+<div class="row">
+  <div class="col-md-12">
+    <%= render @products %>
+  </div>
+</div>

app/views/products/new.html.erb

@@ -1,14 +1,2 @@
-<%= form_for @product, html: { multipart: true } do |f| %>
-  <%= render 'application/errors', model: @product %>
-
-  <%= f.label :name %>
-  <%= f.text_field :name %>
-
-  <%= f.label :price %>
-  <%= f.number_field :price %>
-
-  <%= f.label :avatar %>
-  <%= f.file_field :avatar %>
-
-  <%= f.submit "Create product", class: "btn btn-primary" %>
-<% end %>
+<h1>New product</h1>
+<%= render "form" %>

app/views/products/show.html.erb

@@ -1,11 +0,0 @@
-<aside>
-
-
-  <p>Products#show</p>
-  <p>Name: <%= @product.name %></p>
-  <p>Purchase price: <%= @product.purchase_price %> </p>
-  <p>Sale price:  <%= @product.sale_price  %> </p>
-  <p><%= image_tag @product.avatar %></p>
-  <%= link_to "edit", edit_product_path(@product) %>
-
-</aside>