introduced react router

front-ui/app/components/sectionsListComponent.js

@@ -1,7 +1,117 @@
 var React = require('react'),
     SectionCollection = require('../models/sectionCollection'),
-    Section = require('../models/section');
+    Section = require('../models/section'),
+    Backbone = require('backbone');
 
+var Navigation = require('react-router').Navigation;
+
+Backbone.$ = $;
+
+var SectionsListComponent = React.createClass({
+    mixins : [Navigation],
+    getInitialState: function() {
+        return {
+            sections : [],
+            hoveredSection : ''
+        };
+    },
+    componentDidMount: function() {
+        var sections = new SectionCollection();
+        sections.fetch({success: function() {
+            console.log('Loaded sections:' , sections);
+            if(this.isMounted()) {
+                this.setState({
+                    sections: sections.models
+                });
+            }
+            
+
+        }.bind(this)});
+    },
+    onMouseOver: function(section) {
+        console.log('mouse over!', section);
+        
+        this.setState({
+            hoveredSection: section.get('id')
+        });
+    },
+    onMouseOut: function() {
+        this.setState({
+            hoveredSection : ''
+        });  
+    },
+    onSectionClick: function(section) {
+        //alert('clicked on section:'+ section.get('name'));
+        this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
+        this.setState({
+            hoveredSection : ''
+        });  
+
+        return false;
+    },
+    onCategoryClick: function(category, section) {
+        
+        this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
+        this.setState({
+            hoveredSection: ''
+        });
+        console.log('category', category.id);
+        return false;
+    },
+    onSubcategoryClick: function(subcategory) {
+
+        return false;
+    },
+    render: function() {
+        var self = this;
+        var style = {
+            position: 'relative'
+        };
+        var abStyle = {
+            position: 'absolute'
+        };
+        return (
+            <div>
+            <ul className='nav nav-pills'>
+            {this.state.sections.map(function(section) {
+                                                           return (
+                                                               <li key={section.get('id')}  role='presentation' style={style}>
+                                                               <a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
+                                                                    { section.get('name') }
+                                                                    </a>
+                                                                    <div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"}  >
+                                                                   
+                                                                    <ul onMouseLeave={self.onMouseOut.bind(self)}  >
+                                                                    {section.get('categories').map(function(category) {
+                          return (
+                              <li key={category.id}>
+                              <span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
+                              <ul>
+                              {category.sub_categories.map(function(subCategory) {
+
+                                                                                     return (
+                                                                                         <li key={subCategory.id}>
+                                                                                         
+                                                                                         {subCategory.name}</li>
+                                                                                         
+                                                                                         )
+                                                                                 })}
+
+                              </ul>
+                              </li>
+                              )
+                                                                                                                      })}
+                                                                    </ul>
+                                                           </div>
+                                                               </li>
+                                                               )
+                                                       })}
+            </ul>
+            </div>
+            );
+    }
+});
+/*
 var SectionItem = React.createClass({
     subCatClicked: function() {
         alert('you clicked on subcategory');
@@ -57,5 +167,6 @@ var SectionsListComponent = React.createClass({
         );
     }
 });
+*/
 
 module.exports = SectionsListComponent;

front-ui/app/css/main.css

@@ -1,3 +1,18 @@
+body {
+    background-image: url(http://diapers.q-assets.com/images/body_bg.gif?ReleaseVersion=201512217123);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+}
 .container {
+    background-color: #fff;
     border: 1px solid black;
 }
+
+.section-cat-list {
+    background-color: white;
+    padding: 10px;
+    font-size: 15px;
+    width: 200px;
+    z-index: 10000;
+    border: 1px solid silver;
+}

front-ui/app/rapp.js

@@ -0,0 +1,96 @@
+var React = require('react');
+var ItemList = require('./components/itemList');
+var Router = require('react-router'),
+    Route = Router.Route, DefaultRoute = Router.DefaultRoute;
+
+var RouteHandler = Router.RouteHandler;
+
+var Navigation = Router.Navigation;
+
+var SectionsListComponent = require('./components/sectionsListComponent');
+
+var RApp = React.createClass({
+
+    render: function() {
+
+        return (
+
+<div className="container">
+
+<div  className='page-header'>
+    <h1>Ribica.ba</h1>
+</div>
+<div className='row'>
+    <div className='col-md-12' id='header'>
+    <SectionsListComponent />
+    </div>
+</div>
+<div className='row'>
+
+<RouteHandler />
+
+</div>
+
+</div>
+            
+            );
+    }
+});
+
+var StartPage = React.createClass({
+    render : function() {
+        return (
+            <div>
+
+            <div className='col-md-2'> 
+                left content
+            </div>
+            <div className='col-md-10'>
+                <h2>Ribica Start Page</h2>
+                <RouteHandler />
+            </div>
+            </div>
+            )
+    }
+});
+
+var ByCat = React.createClass({
+    render: function() {
+        return (
+            <div>By CAtegoriy stuff</div>
+            );
+    }
+    
+});
+
+var BySection = React.createClass({
+    mixins: [Router.State],
+    render : function() {
+        return ( <div>
+
+            <div className='col-md-2'> 
+                left content
+            </div>
+            <div className='col-md-10'>
+                <h2> Welcome to section {this.getParams().id} </h2>
+            </div>
+            </div> )
+    }
+});
+
+var routes = (
+        <Route name='app' path='/' handler={RApp}>
+            
+            <Route name='artikal' handler={ItemList} />
+
+            <Route name='sekcija' path='sekcija/:id/:name' handler={BySection}>
+          </Route>
+          <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCat} />
+            <DefaultRoute handler={StartPage}/>
+            
+        </Route>
+        );
+
+Router.run(routes, function(Handler) {
+    React.render(<Handler />, document.body);
+});

front-ui/app/ribica.js

@@ -1,7 +1,9 @@
 var Backbone = require('backbone');
 var app = require('./app');
+var rapp = require('./rapp');
 Backbone.$ = $;
 
 module.exports = {
-    App : app
+    App : app,
+    RApp: rapp
 }

front-ui/app/router.js

@@ -3,11 +3,11 @@ var Backbone = require('backbone'),
     ItemDetailsController = require('./controllers/itemDetailsController');
 
 var Router = Backbone.Router.extend({
-    routes : {
+/*    routes : {*/
-        "home" : HomeController,
+        //"home" : HomeController,
-        "artikal/:id/:slug": ItemDetailsController,
+        //"artikal/:id/:slug": ItemDetailsController,
-        "*default": HomeController    
+        //"*default": HomeController    
-    }
+    /*}*/
 
 });
 

front-ui/build/index.html

@@ -5,6 +5,7 @@
  <meta name="fragment" content="!">
 </head>
 <body>
+<!-- 
 <div class="container">
 
 <div  class='page-header'>
@@ -27,6 +28,7 @@
 </div>
 
 </div>
+-->
 <script src='ribica.js' type='text/javascript'></script>
 <script>
 RIBICA.App.bootstrap();

front-ui/package.json

@@ -23,6 +23,7 @@
     "react": "~0.12.2",
     "backbone": "~1.1.2",
     "bootstrap": "~3.3.1",
-    "jquery": "~2.1.3"
+    "jquery": "~2.1.3",
+    "react-router": "~0.11.6"
   }
 }