senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring working, will need to reorganize stuff a little bit

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-01-25 12:52:31 +01:00
parent 2ad4e4a766
commit 769230eda1
12 changed files with 83 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front-ui/app/app.js
View File

@@ -1,11 +1,9 @@
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();
//this.router = new Router();
//Backbone.history.start();
};
};

7
front-ui/app/components/allItems.js
View File

@@ -4,7 +4,6 @@ var ItemStore = require('../stores/itemStore.js');
var ItemActions = require('../actions/itemActions.js');
var ItemCollection = require('../models/itemCollection');
var AllItems = React.createClass({
render: function() {
@@ -20,10 +19,10 @@ var AllItems = React.createClass({
}
},
// Add change listeners to stores
componentDidMount: function() {
ItemActions.loadFrontPageItems();
ItemStore.addChangeListener(this._onChange);
},
@@ -34,10 +33,6 @@ var AllItems = React.createClass({
});
}
},
});
module.exports = AllItems;

14
front-ui/app/components/itemMultiMediaDescriptions.js
View File

@@ -7,13 +7,17 @@ var ItemMultimediaDescriptions = React.createClass({
var self = this;
return (
<div>Multimedia Description!</div>
<div>Multimedia Description!
{(this.props.descriptions || []).map(function(des) {
return (<img src={des.url} />)
})}
</div>
);
},
}
getInitialState: function () {
return { descriptions: this.props.descriptions };
}
//getInitialState: function () {
//return { descriptions: [] };
//}
});

44
front-ui/app/components/itemWithDetailsPage.js
View File

@@ -3,30 +3,57 @@ var React = require('react'),
ItemActions = require('../actions/itemActions'),
ItemStore = require('../stores/itemStore');
var Item = require('../models/item');
var Router = require('react-router');
var Navigation = Router.Navigation;
var ItemWithDetailsPage = React.createClass({
mixins : [Router.State],
render: function() {
return (
<div className="item-with-details row-fluid center">
<div className="item-with-details row-fluid center">
<div className="span3">
<ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
</div>
<h3> {this.state.item.get('name')} </h3>
<div>
<div className='h4'> {this.state.item.get('list_price')} KM</div>
<div> {this.state.item.get('description')}</div>
</div>
<ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
</div>
<div className="span4">
quantitative descriptions
</div>
</div>
) ;
},
// Add change listeners to stores
componentDidMount: function() {
ItemStore.addChangeListener(this._onChange);
ItemActions.loadFrontPageItems();
//ItemStore.addChangeListener(this._onChange);
//ItemActions.loadFrontPageItems();
var self = this;
var item = new Item({ id: self.getParams().id });
item.fetch({success: function() {
if (self.isMounted()) {
console.log('article loaded', item);
self.setState({
item : item
});
}
}});
},
_onChange: function () {
@@ -36,7 +63,10 @@ var ItemWithDetailsPage = React.createClass({
},
getInitialState: function () {
return { item: ItemStore.getSelectedItem() };
return {
//item: ItemStore.getSelectedItem()
item : (new Item())
};
}
});

10
front-ui/app/components/singleItem.js
View File

@@ -1,12 +1,12 @@
var React = require('react');
var ItemActions = require('../actions/itemActions');
var Router = require('react-router');
var Navigation = Router.Navigation;
var SingleItem = React.createClass({
mixins: [Navigation],
render: function() {
var self = this;
var itemClick = this.itemClick;
@@ -22,7 +22,9 @@ var SingleItem = React.createClass({
},
itemClick: function(e) {
ItemActions.selectItem(this.props.item);
// no need for this to go through ItemActions
//ItemActions.selectItem(this.props.item);
this.transitionTo('/artikal/' + this.props.item.get('id') +'/' + this.props.item.get('name'));
}
});

13
front-ui/app/controllers/homeController.js
View File

@@ -1,13 +0,0 @@
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;

25
front-ui/app/rapp.js
View File

@@ -3,12 +3,16 @@ var ItemList = require('./components/itemList');
var Router = require('react-router'),
Route = Router.Route, DefaultRoute = Router.DefaultRoute;
var ItemWithDetailsPage = require('./components/itemWithDetailsPage');
var RouteHandler = Router.RouteHandler;
var Navigation = Router.Navigation;
var SectionsListComponent = require('./components/sectionsListComponent');
var AllItems = require('./components/allItems');
var RApp = React.createClass({
render: function() {
@@ -18,7 +22,7 @@ var RApp = React.createClass({
<div className="container">
<div className='page-header'>
<h1>Ribica.ba</h1>
<h1><a href="#">Ribica.ba</a></h1>
</div>
<div className='row'>
<div className='col-md-12' id='header'>
@@ -47,6 +51,7 @@ var StartPage = React.createClass({
</div>
<div className='col-md-10'>
<h2>Ribica Start Page</h2>
<AllItems />
<RouteHandler />
</div>
</div>
@@ -69,7 +74,7 @@ var BySection = React.createClass({
return ( <div>
<div className='col-md-2'>
left content
Here goes section for refining search, by section
</div>
<div className='col-md-10'>
<h2> Welcome to section {this.getParams().id} </h2>
@@ -78,13 +83,27 @@ var BySection = React.createClass({
}
});
var Artikal = React.createClass({
render: function() {
return (
<div>
<ItemWithDetailsPage />
</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='artikal' path="artikal/:id/*" handler={Artikal} />
<Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCat} />
<DefaultRoute handler={StartPage}/>

16
front-ui/app/router.js
View File

@@ -1,16 +0,0 @@
var Backbone = require('backbone'),
HomeController = require('./controllers/homeController');
ItemDetailsController = require('./controllers/itemDetailsController');
var Router = Backbone.Router.extend({
/* routes : {*/
//"home" : HomeController,
//"artikal/:id/:slug": ItemDetailsController,
//"*default": HomeController
/*}*/
});
//Backbone.history.start();
module.exports = Router;

12
front-ui/app/stores/itemStore.js
View File

@@ -71,12 +71,12 @@ AppDispatcher.register(function(payload) {
switch(action.actionType) {
// Respond to SELECT_ITEM action
case ItemConstants.SELECT_ITEM:
setSelected(action.item.id);
// TODO: this does not belong here - update when react router becommes available
RIBICA.App.router.navigate(action.item.getFrontEndUrl(), {'trigger': true});
/* case ItemConstants.SELECT_ITEM:*/
//setSelected(action.item.id);
//// TODO: this does not belong here - update when react router becommes available
//RIBICA.App.router.navigate(action.item.getFrontEndUrl(), {'trigger': true});
break;
/*break;*/
case ItemConstants.LOAD_FOR_FRONTPAGE:
loadItemsForFrontpage();
@@ -92,4 +92,4 @@ AppDispatcher.register(function(payload) {
});
module.exports = ItemStore;
module.exports = ItemStore;

22
front-ui/app/views/itemDetailsView.js
View File

@@ -1,22 +0,0 @@
var Backbone = require('backbone'),
React = require('react'),
ItemWithDetailsPage = require('../components/itemWithDetailsPage');
var ItemDetailsView = Backbone.View.extend({
el: '#content',
template: '<div class="item-details-container"></div>',
initialize: function(id) {
this.itemId = id;
},
render: function() {
var self = this;
this.$el.html(this.template);
React.render(<ItemWithDetailsPage />, self.$('.item-details-container').get(0));
return this;
}
});
module.exports = ItemDetailsView;

21
front-ui/app/views/startPageItemsView.js
View File

@@ -1,21 +0,0 @@
var Backbone = require('backbone'),
React = require('react'),
AllItems = require('../components/allItems'),
ItemActions = require('../actions/itemActions');
var StartPageItemsView = Backbone.View.extend({
el: '#content',
template: '<div class="item-list-container"></div>',
initialize: function() {
//alert('StartPageItemsView init');
},
render: function() {
this.$el.html(this.template);
ItemActions.loadFrontPageItems();
React.render(<AllItems />, self.$('.item-list-container').get(0));
return this;
}
});
module.exports = StartPageItemsView;

35
front-ui/app/views/startPageSectionsView.js
View File

@@ -1,35 +0,0 @@
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: '#header',
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;