removed redundant ribica name from subfolders

front-ui/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+build/*.js
+build/*.css
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript

front-ui/Gruntfile.js

@@ -0,0 +1,62 @@
+module.exports = function(grunt) {
+    grunt.initConfig({
+        browserify: {
+            basic: {
+                src: ['app/ribica.js'],
+                dest: 'build/ribica.bundle.js',
+                options: {
+                    browserifyOptions: {
+                        standalone: 'RIBICA',
+                        debug: true,
+                    },
+                    transform: ['reactify'],
+                    watch: true
+                }
+
+            }
+        },
+         watch: {
+             files: ['build/ribica.bundle.js', 'app/css/*.css'], 
+             tasks: ['concat:css', 'concat:js']
+        },
+        connect: {
+            server: {
+                options: {
+                    port: 3001,
+                    base: 'build'
+                }
+            }
+        },
+        uglify: {
+            my_target: {
+                files: {
+                    'build/ribica.min.js': ['build/ribica.js']
+                }
+            }
+        },
+        concat: {
+            css: {
+                src: [
+                'node_modules/bootstrap/dist/css/bootstrap.min.css',
+                'app/css/*.css'
+
+                ],
+                dest: 'build/ribica.css'
+            },
+            js: {
+                src: ['node_modules/jquery/dist/jquery.min.js', 'node_modules/bootstrap/dist/css/bootstrap.min.js', 'build/ribica.bundle.js'],
+                dest: 'build/ribica.js'
+            }
+        }
+
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-browserify');
+    grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+
+    grunt.registerTask('default', []);
+    grunt.registerTask('dev', ['browserify', 'concat:css', 'concat:js', 'connect:server:keepalive']);
+};

front-ui/README.md

@@ -0,0 +1,14 @@
+# Ribica front office
+
+Front end shop-a (javascript) 
+
+All the code is in the ``app`` folder. This structure will evolve over time. 
+
+## Getting started
+
+``npm install``
+
+``grunt dev`` (starts dev server and watches for changes apparently)
+
+Visit ``http://localhost:3001/index.html``
+

front-ui/app/app.js

@@ -0,0 +1,14 @@
+var Router = require('./router'),
+    Backbone = require('backbone');
+
+var App = function() {
+    this.bootstrap = function() {
+        // here goes all app initialization and bootstraping logic
+        this.router = new Router();
+        Backbone.history.start();
+    };
+};
+
+
+var app = new App();
+module.exports = app; 

front-ui/app/components/itemList.js

@@ -0,0 +1,30 @@
+var React = require('react');
+var SingleItem = require('./singleItem');
+var ItemCollection = require('../models/itemCollection.js');
+
+var ItemList = React.createClass({
+
+    
+
+    render: function() {
+        var items = this.props.items.models.map( function(item) {
+            return  (
+                 <SingleItem item={item} />
+                 );
+        });
+
+        return (
+            <div className="row-fluid">
+            <div className="span10">
+            <ul className="item_list">
+               {items}
+            </ul>
+            </div> 
+            </div>
+        );
+    },
+
+});
+
+
+module.exports = ItemList; 

front-ui/app/components/sectionsListComponent.js

@@ -0,0 +1,61 @@
+var React = require('react'),
+    SectionCollection = require('../models/sectionCollection'),
+    Section = require('../models/section');
+
+var SectionItem = React.createClass({
+    subCatClicked: function() {
+        alert('you clicked on subcategory');
+    },
+    render: function() {
+        var catStyle = {
+            paddingLeft: '20px'
+        };
+        var subStyle = {
+            paddingLeft: '20px'
+        };
+
+        var style = {
+            paddingLeft: '30px'
+        };
+        var self = this;
+
+        return (
+            <li className="active" role='presentation'>
+
+            <a href="#">{this.props.data.get('name')}</a>
+            <div>
+            {
+                this.props.data.get('categories').map(function(cat) {
+                    return (<div style={style}> {cat.name}
+                        
+                        
+                { cat.sub_categories.map(function(sc) {
+                                                          return <div style={subStyle} onClick={self.subCatClicked}> {sc.name} </div>
+                                                      }) }
+                        </div>)
+                })
+            }
+            </div>
+            </li>
+            );
+    }
+});
+
+var SectionsListComponent = React.createClass({
+    render: function() {
+        return (
+            <div className= "sections-list-component">
+
+            <ul className="nav nav-pills">
+            {this.props.sections.models.map(function(s){
+                                                           return <SectionItem data={s}></SectionItem>
+                                                       })}
+            
+          
+            </ul>
+            </div> 
+        );
+    }
+});
+
+module.exports = SectionsListComponent;

front-ui/app/components/singleItem.js

@@ -0,0 +1,23 @@
+var React = require('react');
+
+var SingleItem = React.createClass({
+    render: function() {
+
+        var firstImage = this.state.item.get('multi_media_descriptions')[0];
+        firstImage = firstImage || { url:  "http://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 (
+            <div className="single_item">
+             <img src={firstImage.url} />
+             <h1> { this.state.item.get('name') }</h1>
+             <div> { this.state.item.get('list_price') } KM </div>
+            </div>  
+        );
+    },
+
+    getInitialState: function () {
+			return { item: this.props.item };
+	},
+});
+
+
+module.exports = SingleItem; 

front-ui/app/controllers/homeController.js

@@ -0,0 +1,13 @@
+var StartPageSectionsView = require('../views/startPageSectionsView'),
+    StartPageItemsView = require('../views/startPageItemsView');
+
+function HomeController() {
+    console.log('HomeController');
+    var sectionsView = new StartPageSectionsView();
+    sectionsView.render();
+
+    var itemsView = new StartPageItemsView();
+    itemsView.render();
+}
+
+module.exports = HomeController;

front-ui/app/css/items.css

@@ -0,0 +1,22 @@
+.single_item {
+   
+   text-align: center;
+   vertical-align: center;
+   display: inline-block;
+
+}
+
+.single_item img { 
+	padding: 5px;
+
+}
+
+.single_item div {
+	width: 315px;
+}
+
+.single_item h1 {
+	font-size: 15px;
+	text-decoration: bold;
+
+}

front-ui/app/globals.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ApiUrl: 'http://localhost:4567'
+};

front-ui/app/models/item.js

@@ -0,0 +1,9 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var Item = Backbone.Model.extend({
+	 urlRoot : Globals.ApiUrl + '/item'
+});
+
+module.exports = Item;
+

front-ui/app/models/itemCollection.js

@@ -0,0 +1,38 @@
+var Backbone = require('backbone'),
+    Item = require('./item'),
+    Globals = require('../globals');
+
+var ItemCollection = Backbone.Collection.extend({
+
+	setLimit: function(limit) {
+        this.queryLimit = limit;        
+    },
+
+    setOffset: function(offset) {
+    	this.offset = offset;
+    },
+
+    classificationTypeUrlParts: ['','section','category','sub_category'],
+
+    setClassificationType: function(type) {
+    	this.classificationType = type;
+    } , 
+
+    setClassificatonId: function(id) {
+    	this.classificationId = id;
+    }, 
+
+    model: Item,
+    url: function() {  
+        var path = '/item'
+        if(this.classificationType > 0) {
+            // eg. http://localhost:4567/item/section/1/offset/0/limit/10
+            var urlPart = this.classificationTypeUrlParts[this.classificationType];
+            path += "/" + urlPart + "/" + this.classificationId  
+        } // else eg. http://localhost:4567/item/offset/0/limit/10
+        path += "/offset/" + this.offset + "/limit/" + this.queryLimit;
+        return Globals.ApiUrl + path;
+    }
+});
+
+module.exports = ItemCollection;

front-ui/app/models/section.js

@@ -0,0 +1,12 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var Section = Backbone.Model.extend({
+    urlRoot : Globals.ApiUrl + '/section',
+    defaults : {
+        name: ''
+    }
+});
+
+
+module.exports = Section;

front-ui/app/models/sectionCollection.js

@@ -0,0 +1,10 @@
+var Backbone = require('backbone'),
+    Section = require('./section'),
+    Globals = require('../globals');
+
+var SectionCollection = Backbone.Collection.extend({
+    model: Section,
+    url: Globals.ApiUrl + '/section'
+});
+
+module.exports = SectionCollection;

front-ui/app/ribica.js

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

front-ui/app/router.js

@@ -0,0 +1,11 @@
+var Backbone = require('backbone'),
+    HomeController = require('./controllers/homeController');
+
+var Router = Backbone.Router.extend({
+    routes : {
+        "home" : HomeController,
+        "*default": HomeController
+    }
+});
+
+module.exports = Router;

front-ui/app/views/startPageItemsView.js

@@ -0,0 +1,34 @@
+var Backbone = require('backbone'),
+    React = require('react'),
+    ItemList = require('../components/itemList'),
+    ItemCollection = require('../models/itemCollection'),
+    Item = require('../models/item');
+
+var StartPageItemsView = Backbone.View.extend({
+    el: '#content',
+    template: '<div class="item-list-container"></div>',
+    initialize: function() {
+        //alert('StartPageItemsView init');
+    },
+    render: function() {
+        this.$el.append(this.template);
+
+        var items = new ItemCollection();
+        items.setClassificationType(0);
+        items.setLimit(30);
+        items.setOffset(0);
+        var self = this;
+        items.fetch({success: function() {
+
+           // var resultItems = items.map(function (a) { return a.attributes });
+            React.render(new ItemList({            
+                items: items
+            }),
+                self.$('.item-list-container').get(0));
+            
+        }});
+        return this;
+    }
+});
+
+module.exports = StartPageItemsView;

front-ui/app/views/startPageSectionsView.js

@@ -0,0 +1,35 @@
+var Backbone = require('backbone'),
+    React = require('react'),
+    SectionsViewComponent = require('../components/sectionsListComponent'),
+    SectionCollection = require('../models/sectionCollection'),
+    Section = require('../models/section');
+
+var StartPageSectionsView = Backbone.View.extend({
+    el: '#content',
+    template: '<div class="section-list-container"></div>',
+    initialize: function() {
+        //alert('StartPageSectionsView init');
+    },
+    render: function() {
+        this.$el.append(this.template);
+
+        var sections = new SectionCollection();
+        var self = this;
+        sections.fetch({success: function() {
+
+            console.log(sections);
+            React.render(new SectionsViewComponent({
+                handleClick: self.clickHandler.bind(self),
+                sections: sections
+            }),
+                self.$('.section-list-container').get(0));
+            
+        }});
+        return this;
+    },
+    clickHandler : function() {
+       alert('the item was clicked!'); 
+    }
+});
+
+module.exports = StartPageSectionsView;

front-ui/build/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel='stylesheet' type='text/css' href='ribica.css'>
+</head>
+<body>
+
+<div id='content'>
+</div>
+<script src='ribica.js' type='text/javascript'></script>
+<script>
+RIBICA.App.bootstrap();
+</script>
+</body>
+</html>

front-ui/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ribica-ui-stack",
+  "version": "0.0.0",
+  "description": "Ribica UI app",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "BSD-2-Clause",
+  "devDependencies": {
+    "grunt-cli": "~0.1.13",
+    "grunt": "~0.4.5",
+    "grunt-contrib-watch": "~0.6.1",
+    "grunt-contrib-concat": "~0.5.0",
+    "grunt-browserify": "~3.2.1",
+    "grunt-contrib-connect": "~0.9.0",
+    "browserify": "~8.1.0",
+    "reactify": "~0.17.1",
+    "grunt-contrib-uglify": "~0.7.0"
+  },
+  "dependencies": {
+    "react": "~0.12.2",
+    "backbone": "~1.1.2",
+    "bootstrap": "~3.3.1",
+    "jquery": "~2.1.3"
+  }
+}