From a9a93204794f4334d66872351593be8a9b3a97a7 Mon Sep 17 00:00:00 2001
From: Senad Uka <senad.uka@gmail.com>
Date: Thu, 19 Feb 2015 07:17:31 +0100
Subject: [PATCH 1/2] created nonfunctional checkout page

---
 front-ui/app/actions/navigationActions.js    |   7 +
 front-ui/app/components/cart/cartPage.js     |   4 +-
 front-ui/app/components/cart/checkoutPage.js | 132 +++++++++++++++++++
 front-ui/app/router.js                       |   2 +
 4 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 front-ui/app/components/cart/checkoutPage.js

diff --git a/front-ui/app/actions/navigationActions.js b/front-ui/app/actions/navigationActions.js
index 6a92e3c..9f2e839 100644
--- a/front-ui/app/actions/navigationActions.js
+++ b/front-ui/app/actions/navigationActions.js
@@ -65,6 +65,13 @@ var NavigationActions = {
       actionType: NavigationConstants.CHANGE_URL,
       url: '/korpa'
     });
+  },
+
+  goToCheckout: function() {
+     AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/dostava'
+    });
   }
 
 
diff --git a/front-ui/app/components/cart/cartPage.js b/front-ui/app/components/cart/cartPage.js
index b33455e..afa5563 100644
--- a/front-ui/app/components/cart/cartPage.js
+++ b/front-ui/app/components/cart/cartPage.js
@@ -39,7 +39,7 @@ var CartPage = React.createClass({
         <div className="row cart-total">
            <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /> 
            <div className="col-md-1 span1">
-              <button className="btn btn-warning" onClick={this._onOrderClick}>Naruči</button>
+              <button className="btn btn-warning" onClick={this._onOrderClick}>Izgleda OK</button>
            </div>
         </div>
       );
@@ -72,7 +72,7 @@ var CartPage = React.createClass({
 
     },
     _onOrderClick: function () {
-      //NavigationActions.goToCheckout();
+      NavigationActions.goToCheckout();
     },
 
     getInitialState: function () {
diff --git a/front-ui/app/components/cart/checkoutPage.js b/front-ui/app/components/cart/checkoutPage.js
new file mode 100644
index 0000000..e089052
--- /dev/null
+++ b/front-ui/app/components/cart/checkoutPage.js
@@ -0,0 +1,132 @@
+var React = require('react'),
+    CartStore = require('../../stores/cartStore'),
+    AddToCart = require('../cart/addToCart'),
+    CartActions = require('../../actions/cartActions'),
+    NavigationActions = require('../../actions/navigationActions'),
+    SingleItem = require('../items/singleItem'),
+    Globals = require('../../globals'),
+    CartTotal = require('./cartTotal');
+    
+
+var Router = require('react-router');
+
+
+var CheckoutPage = React.createClass({
+
+    render: function() {
+ 
+      return (
+     
+        <div className="checkout-page center">
+         <form className="form-horizontal">
+<fieldset>
+
+
+<legend>Dostava</legend>
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="name">Prezime i Ime</label>  
+  <div className="col-md-4">
+  <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" />
+  <span className="help-block">ime osobe koja prima pošiljku</span>  
+  </div>
+</div>
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="address">Adresa</label>  
+  <div className="col-md-4">
+  <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" />
+  <span className="help-block">adresa na koju će roba biti isporučena</span>  
+  </div>
+</div>
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="place">Mjesto</label>
+  <div className="col-md-4">
+    <select id="place" name="place" className="form-control">
+      <option value="1">Sarajevo</option>
+      <option value="2">Zenica</option>
+      <option value="3">Tuzla</option>
+      <option value="4">Mostar</option>
+      <option value="5">Banja Luka</option>
+      <option value="6">Bihać</option>
+    </select>
+  </div>
+</div>
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="phone">Telefon</label>
+  <div className="col-md-4">
+    <div className="input-group">
+      <span className="input-group-addon">06</span>
+      <input id="phone" name="phone" className="form-control" placeholder="1 222 333" type="text" required="" />
+    </div>
+    <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
+  </div>
+</div>
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="email">E - mail</label>  
+  <div className="col-md-4">
+  <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" />
+  <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>  
+  </div>
+</div> 
+
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="note">Napomena</label>
+  <div className="col-md-4">                     
+    <textarea className="form-control" id="note" name="note"></textarea>
+  </div>
+</div>
+
+<div className="form-group">
+  <label className="col-md-4 control-label" for="order"></label>
+  <div className="col-md-8">
+    <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success">Naruči</button>
+  </div>
+</div>
+
+</fieldset>
+</form>
+
+
+        </div>
+        );       
+
+    },
+
+    // Add change listeners to stores
+    componentDidMount: function() {
+      CartStore.addChangeListener(this._onChange);
+      CartActions.load();
+    },
+
+    componentWillUnmount: function () {
+      CartStore.removeChangeListener(this._onChange);
+    },
+
+    _onChange: function () {
+         if (this.isMounted()) {
+             this.setState(CartStore.getWholeCartState());
+        }
+
+    },
+    _onOrderClick: function () {
+      //NavigationActions.goToCheckout();
+    },
+
+    getInitialState: function () {
+      return CartStore.getWholeCartState();
+    }
+
+});
+
+
+module.exports = CheckoutPage; 
diff --git a/front-ui/app/router.js b/front-ui/app/router.js
index edee0fd..3a5d55f 100644
--- a/front-ui/app/router.js
+++ b/front-ui/app/router.js
@@ -9,6 +9,7 @@ var ItemList = require('./components/items/itemList');
 var SectionsListComponent = require('./components/shared/sectionsListComponent');
 var AllItems = require('./components/items/allItems');
 var CartPage = require('./components/cart/cartPage');
+var CheckoutPage = require('./components/cart/checkoutPage');
 var RootApp = require('./components/rootApp');
 var StartPage = require('./components/startPage/startPage');
 var ByCategory = require('./components/browsing/byCategory');
@@ -23,6 +24,7 @@ var routes = (
       <Route name='sekcija' path='sekcija/:id/:name' handler={BySection} />
       <Route name='artikal' path="artikal/:id/*" handler={ItemWithDetailsPage} />
       <Route name='korpa' path="/korpa" handler={CartPage} />
+      <Route name='dostava' path="/dostava" handler={CheckoutPage} />
       <Route name='registracija' path="/registracija" handler={Register} />
       <Route name='login' path="/login" handler={Login} />
       <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCategory} />

From 0eb6bd9f57730ba519fa4a1ffe8c2fd845baf722 Mon Sep 17 00:00:00 2001
From: Senad Uka <senad.uka@gmail.com>
Date: Thu, 19 Feb 2015 07:31:09 +0100
Subject: [PATCH 2/2] quick fix react uses htmlFor instead of for attribute

---
 front-ui/app/components/cart/checkoutPage.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/front-ui/app/components/cart/checkoutPage.js b/front-ui/app/components/cart/checkoutPage.js
index e089052..ededa18 100644
--- a/front-ui/app/components/cart/checkoutPage.js
+++ b/front-ui/app/components/cart/checkoutPage.js
@@ -26,7 +26,7 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="name">Prezime i Ime</label>  
+  <label className="col-md-4 control-label" htmlFor="name">Prezime i Ime</label>  
   <div className="col-md-4">
   <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" />
   <span className="help-block">ime osobe koja prima pošiljku</span>  
@@ -35,7 +35,7 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="address">Adresa</label>  
+  <label className="col-md-4 control-label" htmlFor="address">Adresa</label>  
   <div className="col-md-4">
   <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" />
   <span className="help-block">adresa na koju će roba biti isporučena</span>  
@@ -44,7 +44,7 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="place">Mjesto</label>
+  <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
   <div className="col-md-4">
     <select id="place" name="place" className="form-control">
       <option value="1">Sarajevo</option>
@@ -59,7 +59,7 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="phone">Telefon</label>
+  <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
   <div className="col-md-4">
     <div className="input-group">
       <span className="input-group-addon">06</span>
@@ -71,7 +71,7 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="email">E - mail</label>  
+  <label className="col-md-4 control-label" htmlFor="email">E - mail</label>  
   <div className="col-md-4">
   <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" />
   <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>  
@@ -80,14 +80,14 @@ var CheckoutPage = React.createClass({
 
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="note">Napomena</label>
+  <label className="col-md-4 control-label" htmlFor="note">Napomena</label>
   <div className="col-md-4">                     
     <textarea className="form-control" id="note" name="note"></textarea>
   </div>
 </div>
 
 <div className="form-group">
-  <label className="col-md-4 control-label" for="order"></label>
+  <label className="col-md-4 control-label" htmlFor="order"></label>
   <div className="col-md-8">
     <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success">Naruči</button>
   </div>