- removed our copy jquery & bootstrap. using cdn instead

- added search box to the header
- made reindex rake task
This commit is contained in:
Edin Dazdarevic
2015-05-25 20:49:52 +02:00
parent c99bcbda7a
commit e1be044fd9
14 changed files with 154 additions and 88 deletions

View File

@@ -56,4 +56,4 @@ group :development, :test do
gem 'spring'
end
gem 'elasticsearch'

View File

@@ -67,8 +67,18 @@ GEM
columnize (0.9.0)
debug_inspector (0.0.2)
debugger-linecache (1.2.0)
elasticsearch (1.0.9)
elasticsearch-api (= 1.0.9)
elasticsearch-transport (= 1.0.9)
elasticsearch-api (1.0.9)
multi_json
elasticsearch-transport (1.0.9)
faraday
multi_json
erubis (2.7.0)
execjs (2.2.2)
faraday (0.9.1)
multipart-post (>= 1.2, < 3)
font-awesome-rails (4.3.0.0)
railties (>= 3.2, < 5.0)
globalid (0.3.0)
@@ -98,6 +108,7 @@ GEM
mini_portile (0.6.2)
minitest (5.5.1)
multi_json (1.10.1)
multipart-post (2.0.0)
nested_form (0.3.2)
netrc (0.10.2)
nokogiri (1.6.5)
@@ -205,6 +216,7 @@ DEPENDENCIES
byebug
cloudinary
coffee-rails (~> 4.1.0)
elasticsearch
jbuilder (~> 2.0)
jquery-rails
jquery-ui-rails

View File

@@ -333,3 +333,32 @@ namespace :ribica do
do_import false
end
end
namespace :ribica do
task reindex: :environment do
es_client = Elasticsearch::Client.new log: true
# first delete the index
begin
es_client.indices.delete index: 'ribica'
rescue
logger.warn "Ribica index could not be deleted. Continuing with indexing operation..."
end
# now index items
all_items = Item.includes(sub_category: { category: :section }).all.to_a
all_items.each do |item|
es_client.index index: 'ribica', type: 'items', id: item.id, body: {
title: 'Test',
name: item.name,
code: item.code,
description: item.description,
sub_category: item.sub_category.name,
category: item.sub_category.category.name,
section: item.sub_category.category.section.name
}
end
puts "ok!"
end
end

View File

@@ -1,32 +1,3 @@
# TODO: make this private, not-public facing.
# for now we keep this here for simplicity reasons
get '/search/index' do
es_client = Elasticsearch::Client.new log: true
# first delete the index
begin
es_client.indices.delete index: 'ribica'
rescue
logger.warn "Ribica index could not be deleted. Continuing with indexing operation..."
end
# now index items
all_items = Item.includes(sub_category: { category: :section }).all.to_a
all_items.each do |item|
es_client.index index: 'ribica', type: 'items', id: item.id, body: {
title: 'Test',
name: item.name,
code: item.code,
description: item.description,
sub_category: item.sub_category.name,
category: item.sub_category.category.name,
section: item.sub_category.category.section.name
}
end
"ok".to_json
end
get '/search' do
es_client = Elasticsearch::Client.new log: true
q = params[:q]

View File

@@ -78,16 +78,13 @@ module.exports = function(grunt) {
concat: {
css: {
src: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'app/css/*.css'
],
dest: 'build/ribica.css'
},
js: {
src: ['node_modules/jquery/dist/jquery.min.js',
'app/js/bootstrap.min.js',
'build/ribica.bundle.js'],
src: ['build/ribica.bundle.js'],
dest: 'build/ribica.js'
}
}

View File

@@ -3,18 +3,14 @@ var CartStore = require('../../stores/cartStore.js');
var CartActions = require('../../actions/cartActions.js');
var Globals = require('../../globals');
var buttonHolderStyle = {
display: 'inline-block'
};
var AddToCart = React.createClass({
render: function() {
INITIAL_ITEM_COUNT: 1,
render: function() {
var itemCount = this.state.count;
var amountAndAddButton = (
<div className="row-fluid add-to-cart">
<div className="span12">
@@ -25,16 +21,14 @@ var AddToCart = React.createClass({
<div>
<div style={buttonHolderStyle}><button className="btn mybutton" onClick={this._addToCartClick}>Dodaj na popis za kupovinu</button></div>
</div>
</div>
</div>
);
return amountAndAddButton;
},
},
// Add change listeners to stores
componentDidMount: function() {
CartStore.addChangeListener(this._onChange);
CartStore.addChangeListener(this._onChange);
if(!CartStore.dataStartedLoading()) {
CartActions.load();
@@ -44,9 +38,9 @@ var AddToCart = React.createClass({
getInitialState: function() {
var itemInCart = CartStore.getStateFor(this.props.item.get('id'));
return {
return {
item: itemInCart,
count: 0
count: this.INITIAL_ITEM_COUNT
}
},
@@ -54,12 +48,12 @@ var AddToCart = React.createClass({
_onChange: function () {
if (this.isMounted()) {
var item = CartStore.getStateFor(this.props.item.get('id'));
this.setState({ item: item, count: 0 });
this.setState({ item: item, count: this.INITIAL_ITEM_COUNT });
}
},
_onIncreaseClick: function () {
if (this.state.count < Globals.MaxNumberOfItemsToBeAdded ) {
this.state.count = this.state.count + 1;
this.setState(this.state);
@@ -67,8 +61,8 @@ var AddToCart = React.createClass({
},
_onDecreaseClick: function () {
if (this.state.count > 0) {
if (this.state.count > 1) {
this.state.count = this.state.count - 1;
this.setState(this.state);
}
@@ -81,7 +75,7 @@ var AddToCart = React.createClass({
componentWillUnmount: function () {
CartStore.removeChangeListener(this._onChange);
}
});
module.exports = AddToCart;
module.exports = AddToCart;

View File

@@ -5,16 +5,16 @@ var NavigationActions = require('../../actions/navigationActions.js');
var LoginStatus = require('../shared/loginStatus');
CartTotal = require('./cartTotal');
var cartStyle = {
var cartStyle = {
fontSize: '50px'
};
var normalizeCount = function(count) {
if (count >= 0 && count < 10) {
return "\u00a0" + count;
return "\u00a0" + count;
} else {
return count;
}
@@ -22,24 +22,33 @@ var normalizeCount = function(count) {
var CartIcon = React.createClass({
render: function() {
render: function() {
var textNotificationStyle = (this.state.count > 0) ? { display: 'inline-block'} : { display: 'none'} ;
return (
return (
<div>
<ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}>
<a style={{marginBottom: 10, marginRight: 10}} className="mybutton" href="#">Završi narudžbu</a></li>
<ul className="nav navbar-nav navbar-right">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#"><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}><a style={{marginLeft: 20, marginBottom: 10, marginRight: 15}} className="mybutton" href="#">Završi narudžbu</a></li>
</ul>
<ul className="nav navbar-nav navbar-right hidden-lg">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px',borderRight: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
</ul>
</div>
);
},
// Add change listeners to stores
componentDidMount: function() {
CartStore.addChangeListener(this._onChange);
CartStore.addChangeListener(this._onChange);
if(!CartStore.dataStartedLoading()) {
CartActions.load();
};
@@ -54,7 +63,7 @@ var CartIcon = React.createClass({
_onChange: function () {
if (this.isMounted()) {
this.setState(CartStore.getWholeCartState());
this.setState(CartStore.getWholeCartState());
}
},
@@ -69,7 +78,4 @@ var CartIcon = React.createClass({
});
module.exports = CartIcon;
module.exports = CartIcon;

View File

@@ -42,14 +42,20 @@ var RootApp = React.createClass({
return (<div>loading...</div>);
}
return (
return (
<div className="container">
<div>
<div className="col-lg-12 hidden-sm hidden-xs " style={{height: 80, background: 'none', marginBottom: '0px !important'}} id="mybody">
<div style={{padding: '15px 15px'}} className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div style={{padding: '15px 15px'}} className="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
</div>
<div style={{padding: '15px 15px'}} className="col-lg-9 col-md-9 hidden-sm hidden-xs">
<div style={{padding: '30px 15px'}} className="col-lg-5 col-md-5 col-sm-4 col-xs-4">
<SearchBox />
</div>
<div style={{padding: '15px 15px'}} className="col-lg-5 col-md-5 hidden-sm hidden-xs">
<nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
<div className="container-fluid">
<CartIcon />

View File

@@ -0,0 +1,11 @@
var React = require('react');
var Breadcrumbs = React.createClass({
render: function() {
var bcText = "Ribica.ba -> " + this.props.text;
return (<div>{bcText}</div>);
}
});
module.exports = Breadcrumbs;

View File

@@ -33,13 +33,13 @@ var LoginStatus = React.createClass({
},
render : function() {
var content;
var content;
if(this.state.loggedIn){
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}>{this.state.user.first_name} {this.state.user.last_name} <a onClick={this.logout} style={{ paddingLeft: '30px' }}>Odjavite se</a></div>)
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}>{this.state.user.first_name} {this.state.user.last_name} <a onClick={this.logout} style={{ paddingLeft: '10px' }}>Odjavite se</a></div>)
} else {
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}><Link to="registracija" style={{ paddingRight: '30px' }}>Registracija</Link> <Link to="login">Prijava</Link></div>)
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}><Link to="registracija" style={{ paddingRight: '10px' }}>Registracija</Link> <Link to="login">Prijava</Link></div>)
}
return content;

View File

@@ -36,15 +36,25 @@ var SearchBox = React.createClass({
var enterKeyCode = 13;
if(e.which == enterKeyCode) {
this.doSearch();
e.preventDefault();
}
},
render: function() {
return (<div className="input-group">
<input type="text" onKeyPress={this.onKeyPress} className="form-control" value={this.state.q} onChange={this.onSearchBoxChange} placeholder="Pretraga"> </input>
<span className="input-group-btn">
<button className="btn btn-default" type="button" onClick={this.onSearchClick}>Traži</button>
</span>
</div>)
return (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
<div className="left-inner-addon">
<i className="glyphicon glyphicon-search"></i>
<input style={{width: '75%'}} type="search" onKeyPress={this.onKeyPress}
className="search-box form-control"
value={this.state.q} onChange={this.onSearchBoxChange}
aria-hidden="true">
</input>
<button className="btn btn-default search-button" type="button"
onClick={this.onSearchClick}>Traži</button>
</div>
</form>)
}
});

View File

@@ -45,7 +45,7 @@ h1 h2 h3 h4 h5{
.mybutton{
background-color: #00a8a8;
padding: 6px 22px !important;
padding: 6px 11px !important;
display: block;
border-radius: 3px;
margin-top: 8px;
@@ -57,7 +57,6 @@ h1 h2 h3 h4 h5{
.mybutton:hover {
background-color: #06c3c3 !important;
color: black !important;
padding: 6px 22px !important;
margin-top: 8px;
display: block;
border-radius: 3px;
@@ -473,7 +472,35 @@ text-decoration: none;
display: block;
border-radius: 1px;
margin-top: 8px;
border: solid #cccccc 1px;
border: solid #cccccc 1px;
color: #4d4d4d !important;
font-size: 16px;
}
.search-box {
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
padding-left: 10px;
padding-right: 10px;
}
.search-button {
background-color: #f9f9f9;
color: #31b8b8;
border: 1px solid #cccccc;
border-radius: 0px;
margin-left: 5px;
}
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
}

View File

@@ -6,6 +6,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel='stylesheet' type='text/css' href='/ribica.css'>
<meta charset="UTF-8">
<meta name="fragment" content="!">

View File

@@ -28,8 +28,6 @@
"dependencies": {
"react": "~0.12.2",
"backbone": "~1.1.2",
"bootstrap": "~3.3.1",
"jquery": "~2.1.3",
"react-router": "~0.11.6",
"superagent": "~0.21.0"
}