more reorganization

2015-01-25 14:04:10 +01:00
parent 301e40f976
commit e3997a1a48
25 changed files with 205 additions and 270 deletions
--- a/front-ui/app/components/shared/sectionsListComponent.js
+++ b/front-ui/app/components/shared/sectionsListComponent.js
@@ -0,0 +1,115 @@
+var React = require('react'),
+    SectionCollection = require('../../models/sectionCollection'),
+    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>
+        );
+    }
+});
+
+module.exports = SectionsListComponent;