Skip to content

dhp-venshop
dhp-venshop
Commit ceefb1c4 by Hoang Phuc Do
Options

Add toast notification

parent 4f37530b
Showing with 344 additions and 18 deletions
Gemfile
...@@ -52,6 +52,8 @@ gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2' ...@@ -52,6 +52,8 @@ gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
gem 'rails-assets-bootstrap-touchspin', source: 'https://rails-assets.org' gem 'rails-assets-bootstrap-touchspin', source: 'https://rails-assets.org'
# Simple, efficient background processing for Ruby. # Simple, efficient background processing for Ruby.
gem 'sidekiq', '~> 5.0', '>= 5.0.2' gem 'sidekiq', '~> 5.0', '>= 5.0.2'
# Toastr: Simple javascript toast notifications, plugged into the rails asset pipeline.
gem 'toastr-rails', '~> 1.0', '>= 1.0.3'
# Use Capistrano for deployment # Use Capistrano for deployment
# gem 'capistrano-rails', group: :development # gem 'capistrano-rails', group: :development
......
Gemfile.lock
...@@ -225,6 +225,8 @@ GEM ...@@ -225,6 +225,8 @@ GEM
thor (0.19.4) thor (0.19.4)
thread_safe (0.3.6) thread_safe (0.3.6)
tilt (2.0.7) tilt (2.0.7)
toastr-rails (1.0.3)
railties (>= 3.1.0)
turbolinks (5.0.1) turbolinks (5.0.1)
turbolinks-source (~> 5) turbolinks-source (~> 5)
turbolinks-source (5.0.3) turbolinks-source (5.0.3)
...@@ -275,6 +277,7 @@ DEPENDENCIES ...@@ -275,6 +277,7 @@ DEPENDENCIES
sidekiq (~> 5.0, >= 5.0.2) sidekiq (~> 5.0, >= 5.0.2)
spring spring
spring-watcher-listen (~> 2.0.0) spring-watcher-listen (~> 2.0.0)
toastr-rails (~> 1.0, >= 1.0.3)
turbolinks (~> 5) turbolinks (~> 5)
tzinfo-data tzinfo-data
uglifier (>= 1.3.0) uglifier (>= 1.3.0)
......
app/assets/javascripts/application.js
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
// //
//= require jquery //= require jquery
//= require jquery_ujs //= require jquery_ujs
//= require bootstrap-touchspin
//# require rails-ujs //# require rails-ujs
//= require turbolinks //= require turbolinks
//# require_tree . //# require_tree .
app/assets/javascripts/theme-main.js
//= require toastr
//= require bootstrap-touchspin
//= require cart/cart //= require cart/cart
\ No newline at end of file
app/assets/stylesheets/application.css
...@@ -12,8 +12,5 @@ ...@@ -12,8 +12,5 @@
* *
*# require_tree . *# require_tree .
*= require_self *= require_self
*= require bootstrap-touchspin
*= require custom *= require custom
*= require main_style
*= require skin_14
*/ */
app/assets/stylesheets/custom.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets"; @import "bootstrap-sprockets";
@import "bootstrap"; @import "bootstrap";
@import "font-awesome"; @import "font-awesome";
\ No newline at end of file @import "bootstrap-touchspin";
@import "toastr";
@import "main_style";
@import "skin_14";
\ No newline at end of file
app/assets/stylesheets/main_style.scss
...@@ -87,7 +87,14 @@ a { ...@@ -87,7 +87,14 @@ a {
padding-right: 12px; padding-right: 12px;
} }
} }
/*
* Notification
*/
.alert-notice {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
/* /*
* Header * Header
*/ */
...@@ -183,7 +190,33 @@ a { ...@@ -183,7 +190,33 @@ a {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
#header .custom-block {
display: inline-block;
text-align: center;
font-size: 14px;
line-height: 39px;
font-weight: 400;
vertical-align: middle;
}
@media (max-width: 991px) {
#header .custom-block {
display: none;
}
}
#header .custom-block i {
margin-right: 5px;
}
#header .custom-block .split {
display: inline-block;
height: 14px;
width: 1px;
border-right: 1px solid #ccc;
vertical-align: middle;
margin: 0 10px;
}
#header .custom-block a {
font-size: 12px;
}
/* /*
* Button * Button
*/ */
...@@ -1330,4 +1363,154 @@ html .featured-box-primary .box-content { ...@@ -1330,4 +1363,154 @@ html .featured-box-primary .box-content {
.form-col .checkout-review-action h5 span { .form-col .checkout-review-action h5 span {
margin-left: 45px; margin-left: 45px;
}
/*
* Panel box
*/
.panel-box {
margin-bottom: 30px;
}
.panel-box a {
color: #000;
}
.panel-box a:hover, .panel-box a:focus {
color: #0f0f0f;
}
.panel-box .panel-box-title {
padding: 10px 15px;
border: 1px solid #ddd;
background-color: #f5f5f5;
position: relative;
border-radius: 0 0 0 0;
}
.panel-box .panel-box-title:after {
content: '';
display: table;
clear: both;
}
.panel-box .panel-box-title h3, .panel-box .panel-box-title h4 {
float: left;
font-size: 13px;
font-weight: 700;
line-height: 18px;
text-transform: uppercase;
margin: 0;
color: #313131;
}
.panel-box .panel-box-title .panel-box-edit {
float: right;
line-height: 18px;
font-size: 12px;
}
.panel-box .panel-box-content {
padding: 20px 15px;
font-size: 13px;
border: 1px solid #ddd;
border-top: 0;
border-radius: 0 0 0 0;
background-color: #fbfbfb;
min-height: 135px;
}
/*
* Sidebar
*/
aside ul.nav-list > li > a {
font-size: 13px;
padding-left: 21px;
}
aside ul.nav-list > li > a:before {
margin-left: -11px;
}
aside ul.nav-list > li.active > a {
color: #000;
font-weight: 600;
}
aside ul.nav-list > li.active > a:before {
border-left-color: #000;
}
.sidebar h4 {
margin: 5px 0 10px;
line-height: 1.2;
font-size: 16px;
font-weight: bold;
color: #313131;
}
.sidebar .nav.nav-list {
margin-bottom: 30px;
}
/* Nav List */
ul.nav-list li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
ul.nav-list li a {
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
transition: background 0.1s;
border-bottom: 1px solid #EDEDDE;
padding: 8px 0 8px 18px;
display: block;
color: #666;
font-size: 0.9em;
text-decoration: none;
line-height: 20px;
}
ul.nav-list li a:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
margin: 7px 0 0 -9px;
position: absolute;
}
ul.nav-list li a:hover {
background-color: #eee;
text-decoration: none;
}
ul.nav-list li.active > a {
font-weight: bold;
}
ul.nav-list li ul {
list-style: none;
margin: 0 0 0 25px;
padding: 0;
}
ul.nav-list.hide-not-active li ul {
display: none;
}
ul.nav-list.hide-not-active li.active ul {
display: block;
}
ul.nav-list.show-bg-active .active > a {
background-color: #f5f5f5;
}
ul.nav-list.show-bg-active .active > a:hover {
background-color: #eee;
}
ul.narrow li a {
padding: 4px 0;
}
ul.nav-pills > li.active > a {
background-color: #CCC;
}
ul.nav-pills > li.active > a:hover, ul.nav-pills > li.active > a:focus {
background-color: #CCC;
} }
\ No newline at end of file
app/controllers/line_items_controller.rb
...@@ -12,16 +12,17 @@ class LineItemsController < ApplicationController ...@@ -12,16 +12,17 @@ class LineItemsController < ApplicationController
# POST /line_items # POST /line_items
def create def create
product = Product.find(params[:product_id]) product = Product.find(params[:product_id])
product_is_in_stock = product_is_in_stock?(product, get_line_item_quantity(product.id, params[:product_quantity])) product_is_in_stock = product_is_in_stock?(product,
get_line_item_quantity(product.id,
params[:product_quantity]))
add_to_cart(product.id, params[:product_quantity]) if product_is_in_stock add_to_cart(product.id, params[:product_quantity]) if product_is_in_stock
respond_to do |format| respond_to do |format|
if product_is_in_stock notice_msg = get_create_notice_msg(product_is_in_stock, product)
format.html { redirect_to cart_index_url, notice: "#{product.title} was sucessfully added to your cart" } notice_type = get_create_notice_type(product_is_in_stock)
format.js format.html { redirect_to cart_index_url,
else notice: notice_msg }
format.html { redirect_to cart_index_url, notice: "#{product.title} is out of stock" } format.js { @notice = { msg: notice_msg, type: notice_type } }
end
end end
end end
...@@ -47,7 +48,8 @@ class LineItemsController < ApplicationController ...@@ -47,7 +48,8 @@ class LineItemsController < ApplicationController
product = Product.find(params[:id]) product = Product.find(params[:id])
respond_to do |format| respond_to do |format|
format.html { redirect_to cart_index_url, notice: "#{product.title} was sucessfully removed from your cart" } format.html { redirect_to cart_index_url,
notice: "#{product.title} was sucessfully removed from your cart" }
end end
end end
...@@ -61,4 +63,13 @@ class LineItemsController < ApplicationController ...@@ -61,4 +63,13 @@ class LineItemsController < ApplicationController
def product_is_in_stock?(product, quantity) def product_is_in_stock?(product, quantity)
product.quantity >= quantity.to_i product.quantity >= quantity.to_i
end end
def get_create_notice_msg(result, product)
result ? "#{product.title} was sucessfully added to your cart" :
"#{product.title} is out of stock"
end
def get_create_notice_type(result)
result ? :success : :error
end
end end
\ No newline at end of file
app/controllers/users_controller.rb 0 → 100644
class UsersController < ApplicationController
# GET /users/1
def show
@user = User.find(current_user.id)
end
# GET /users/products
def products
@products = current_user.products.page(params[:page]).per(5)
end
end
\ No newline at end of file
app/helpers/application_helper.rb
module ApplicationHelper module ApplicationHelper
def active_class(page_name, class_name = 'active')
class_name if params[:action] == page_name
end
end end
app/views/devise/registrations/edit.html.erb
...@@ -13,6 +13,30 @@ ...@@ -13,6 +13,30 @@
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-md-6">
<div class="form-group">
<%= f.label :first_name %>
<%= f.text_field :first_name, class: "form-control" %>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<%= f.label :last_name %>
<%= f.text_field :last_name, class: "form-control" %>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
<%= f.label :email %> <%= f.label :email %>
...@@ -57,5 +81,8 @@ ...@@ -57,5 +81,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3 col-md-pull-9">
<%= render 'shared/account_sidebar' %>
</div>
</div> </div>
</div> </div>
app/views/layouts/_header.html.erb
...@@ -16,6 +16,15 @@ ...@@ -16,6 +16,15 @@
<div class="header-column"> <div class="header-column">
<div class="row"> <div class="row">
<div class="cart-area"> <div class="cart-area">
<div class="custom-block">
<% if user_signed_in? %>
<%= link_to 'MY PROFILE', user_profile_path %>
<span class="split"></span>
<%= link_to 'SIGN OUT', destroy_user_session_path, method: :delete %>
<% else %>
<%= link_to 'SIGN IN', new_user_session_path %>
<% end %>
</div>
<div class="cart-dropdown"> <div class="cart-dropdown">
<a href="<%= cart_index_url %>" class="cart-dropdown-icon"> <a href="<%= cart_index_url %>" class="cart-dropdown-icon">
<i class="minicart-icon"></i> <i class="minicart-icon"></i>
......
app/views/line_items/create.js.erb
$('.cart-qty').html("<%= render 'carts/cart_quantity' %>"); $('.cart-qty').html("<%= render 'carts/cart_quantity' %>");
\ No newline at end of file toastr.<%= @notice[:type] %>('<%= @notice[:msg] %>');
\ No newline at end of file
app/views/shared/_account_sidebar.html.erb 0 → 100644
<aisde class="sidebar">
<h4>My Account</h4>
<ul class="nav nav-list">
<li class="<%= active_class('show') %>">
<%= link_to 'My Dashboard', user_profile_path %>
</li>
<li class="<%= active_class('edit') %>">
<%= link_to 'Edit Account Information', edit_user_registration_path %>
</li>
<li class="<%= active_class('products') %>">
<%= link_to 'My Products', user_products_path %>
</li>
</ul>
</aisde>
\ No newline at end of file
app/views/users/products.html.erb 0 → 100644
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 my-account">
<h2 class="h2 heading-primary font-weight-normal">
My Products
</h2>
<%= render partial: 'products/product_list', locals: { products: @products } %>
<div class="toolbar-bottom">
<div class="toolbar">
<div class="sorter">
<%= paginate @products, theme: 'bootstrap' %>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<%= render 'shared/account_sidebar' %>
</div>
</div>
</div>
\ No newline at end of file
app/views/users/show.html.erb 0 → 100644
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 my-account">
<h2 class="h2 heading-primary font-weight-normal">
My Dashboard
</h2>
<h2 class="h3 mb-sm">
<strong>Account Information</strong>
</h2>
<div class="row">
<div class="col-sm-12">
<div class="panel-box">
<div class="panel-box-title">
<h3>Contact Information</h3>
<%= link_to 'Edit', edit_user_registration_path, class: 'panel-box-edit' %>
</div>
<div class="panel-box-content">
<p><%= @user.first_name %> <%= @user.last_name %></p>
<p><%= @user.email %></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<%= render 'shared/account_sidebar' %>
</div>
</div>
</div>
\ No newline at end of file
config/routes.rb
...@@ -8,4 +8,8 @@ Rails.application.routes.draw do ...@@ -8,4 +8,8 @@ Rails.application.routes.draw do
resources :cart, only: :index, controller: 'carts' resources :cart, only: :index, controller: 'carts'
delete '/cart/remove', to: 'carts#destroy', as: 'remove_cart' delete '/cart/remove', to: 'carts#destroy', as: 'remove_cart'
devise_for :users devise_for :users
scope '/users' do
get '/', to: 'users#show', as: 'user_profile'
get '/products', to: 'users#products', as: 'user_products'
end
end end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment