cart display now shows price and amount per item

front-api/db/schema.rb

@@ -34,7 +34,7 @@ ActiveRecord::Schema.define(version: 20150207120207) do
     t.string  "title"
     t.string  "field_name"
     t.integer "type"
-    t.integer "owner_type"
+    t.string  "owner_type"
     t.integer "owner_id"
   end
 
@@ -86,8 +86,10 @@ ActiveRecord::Schema.define(version: 20150207120207) do
   end
 
   create_table "sub_categories", force: :cascade do |t|
-    t.string  "name"
-    t.integer "category_id"
+    t.string   "name"
+    t.integer  "category_id"
+    t.datetime "created_at",  null: false
+    t.datetime "updated_at",  null: false
   end
 
   create_table "units", force: :cascade do |t|

front-ui/app/components/cart/addToCart.js

@@ -4,8 +4,8 @@ var CartActions = require('../../actions/cartActions.js');
 
 
 
-var countStyle = { 
-  width: '100%'
+var buttonHolderStyle = {
+  display: 'inline-block'
 };
 
 var AddToCart = React.createClass({
@@ -14,12 +14,14 @@ var AddToCart = React.createClass({
 
       return (
           <div className="row-fluid add-to-cart">
-            <div className="col-xs-offset-1 col-xs-1"><button className="btn btn-success" onClick={this._onIncreaseClick}>+</button></div>
-            <div className="col-xs-2"><button className="btn" style={countStyle} > { this.state.item.get('count') } </button></div>
-            <div className="col-xs-1"><button className="btn btn-success"  onClick={this._onDecreaseClick}>-</button></div>
+            <div className="span12">
+              <div style={buttonHolderStyle}><button className="btn btn-success" onClick={this._onIncreaseClick}>+</button></div>
+              <div style={buttonHolderStyle}><button className="btn"> { this.state.item.get('count') } </button></div>
+              <div style={buttonHolderStyle}><button className="btn btn-success"  onClick={this._onDecreaseClick}>-</button></div>
+            </div>
           </div> 
         );
-  },
+  }, 
 
     // Add change listeners to stores
     componentDidMount: function() {

front-ui/app/components/cart/cartPage.js

@@ -3,20 +3,31 @@ var React = require('react'),
     AddToCart = require('../cart/addToCart'),
     CartActions = require('../../actions/cartActions'),
     SingleItem = require('../items/singleItem'),
-    AddToCart = require('../cart/addToCart');
+    AddToCart = require('../cart/addToCart'),
+    Globals = require('../../globals');
+    ;
 
 var Router = require('react-router');
 
 
-var ItemWithDetailsPage = React.createClass({
+var CartPage = React.createClass({
 
     render: function() {
 
+      var counts = this.state.itemCounts;
+
       var displayedItems = this.state.items.map(function (i) {
+
+        var count = counts[i.get('id')].get('count');
+        var price = i.get('list_price');
         return (
-           <div key={i.get('id')} className="row">
-              <div className="col-md-3"><SingleItem item={i} /> </div>
-              <div className="col-md-6"> <AddToCart itemId={i.get('id')} /> </div>
+           <div key={i.get('id')} className="row cart-items">
+              <div className="col-md-3"><SingleItem item={i} hidePrice={true}/> </div>
+              <div className="col-md-2"> { Globals.FormatCurrency(price) }</div>
+              <div className="col-md-1"> X </div>
+              <div className="col-md-3"> <AddToCart itemId={i.get('id')} /> </div>
+              <div className="col-md-1"> = </div>
+              <div className="col-md-2"> { Globals.FormatCurrency(count * price) }</div>
            </div> 
           )
       });
@@ -54,4 +65,4 @@ var ItemWithDetailsPage = React.createClass({
 });
 
 
-module.exports = ItemWithDetailsPage; 
+module.exports = CartPage; 

front-ui/app/components/items/singleItem.js

@@ -7,17 +7,28 @@ var Router = require('react-router');
 
 var SingleItem = React.createClass({
     render: function() {
+      var hidePrice = this.props.hidePrice || false;
       var self = this;
       var itemClick = this.itemClick;
       var firstImage = this.props.item.get('multi_media_descriptions')[0];
       firstImage = firstImage || { url:  "https://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
-      return (    
+      if (hidePrice) { 
+        return (    
         <div className="single_item"  onClick={itemClick}>
-        <img src={firstImage.url} className="item_list_image" />
-        <h1> { this.props.item.get('name') }</h1>
-        <div> { this.props.item.get('list_price') } KM </div>
+          <img src={firstImage.url} className="item_list_image" />
+          <h1> { this.props.item.get('name') }</h1>
+        </div>
+        );
+      }
+      else {
+        return (    
+        <div className="single_item"  onClick={itemClick}>
+          <img src={firstImage.url} className="item_list_image" />
+          <h1> { this.props.item.get('name') }</h1>
+          <div> { this.props.item.get('list_price') } KM </div>
         </div>  
         );
+      }
     },
 
     itemClick: function(e) {

front-ui/app/css/cart.css

@@ -18,4 +18,14 @@
     top: 0px;
     right: -10px;
     padding: 5px;
+}
+
+.add-to-cart button {
+	font-size: 20px;
+	margin: 5px;
+}
+
+.cart-items {
+	vertical-align:middle;
+	font-size: 17px;
 }

front-ui/app/globals.js

@@ -1,3 +1,7 @@
 module.exports = {
-    ApiUrl: 'http://localhost:4567'
+    ApiUrl: 'http://localhost:4567',
+    FormatCurrency: function(amount_s) {
+    	var amount = parseFloat(amount_s);
+    	return ( amount.toFixed(2) + " KM" )
+    }
 };

front-ui/app/stores/cartStore.js

@@ -102,7 +102,8 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
 
         var state = {
             count: numberOfItems,
-            items: _itemsForDisplay
+            items: _itemsForDisplay,
+            itemCounts: states
         };
         return state;
     },