added image url for categories

front-api/db/migrate/20150131134330_add_image_to_categories.rb

@@ -0,0 +1,5 @@
+class AddImageToCategories < ActiveRecord::Migration
+  def change
+    add_column :categories, :image_url, :string
+  end
+end

front-api/db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20150130041842) do
+ActiveRecord::Schema.define(version: 20150131134330) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -19,6 +19,7 @@ ActiveRecord::Schema.define(version: 20150130041842) do
   create_table "categories", force: :cascade do |t|
     t.string  "name"
     t.integer "section_id"
+    t.string  "image_url"
   end
 
   create_table "items", force: :cascade do |t|
@@ -54,10 +55,8 @@ ActiveRecord::Schema.define(version: 20150130041842) do
   end
 
   create_table "sub_categories", force: :cascade do |t|
-    t.string   "name"
+    t.string  "name"
-    t.integer  "category_id"
+    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/browsing/bySection.js

@@ -7,6 +7,7 @@ var React = require('react'),
     ItemCollection = require('../../models/itemCollection'),
     SectionStore = require('../../stores/sectionStore'),
     SectionActions = require('../../actions/sectionActions.js'),
+    NavigationActions = require('../../actions/navigationActions'),
     Section = require('../../models/section');
 
 var BySection = React.createClass({
@@ -19,6 +20,7 @@ var BySection = React.createClass({
     },
     render : function() {
       var s ={ float: 'left'};
+      var self = this;
       return ( <div>
 
         <div className='col-md-2'> 
@@ -35,8 +37,13 @@ var BySection = React.createClass({
                                                                       return (
                                                                         <div style={s}>
                                                                         
-                                                                        <img src='http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'/>
+                                                                        <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
-                                                                     <div>   {category.name}</div>
+                                                                     <div onClick={self.onCategoryClick.bind(self, category, self.state.section)}>   {category.name}</div>
+                                                                     <ul>
+                                                                     {category.sub_categories.map(function(sc) {
+                                                                                                                 return (<li>{sc.name}</li>)
+                                                                                                               })}
+                                                                     </ul>
                                                                         
                                                                         </div>
                                                                         )
@@ -46,6 +53,10 @@ var BySection = React.createClass({
         </div>
         </div> )
     },
+    onCategoryClick: function(category, section) {
+      NavigationActions.goToCategory(category, section);
+       
+    },
     componentWillReceiveProps: function(nextProps) {
       var sectionId = this.getParams().id;
       ItemActions.loadBestSellingItemsForSection(sectionId);