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

Merge branch 'master' of github.com:senaduka/ribica

Browse Source
This commit is contained in:
Senad Uka
2015-03-29 12:47:08 +02:00
parent 7acf1a8d6c 71fbde93de
commit b3fc46633c
20 changed files with 294 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
front-ui/app/actions/menuItemActions.js Normal file
View File

@@ -0,0 +1,24 @@
var AppDispatcher = require('../dispatcher/appDispatcher');
var MenuItemConstants = require('../constants/menuItemConstants');
// Define action methods
var MenuItemActions = {
loadMenuItems: function() {
AppDispatcher.handleAction({
actionType: MenuItemConstants.LOAD_MENU_ITEMS,
})
},
setMenuItemHover: function(menuItem) {
AppDispatcher.handleAction({
actionType: MenuItemConstants.SET_MENU_ITEM_HOVER,
menuItem: menuItem
});
},
unsetMenuItemHover: function() {
AppDispatcher.handleAction({
actionType: MenuItemConstants.UNSET_MENU_ITEM_HOVER
});
}
};
module.exports = MenuItemActions;

13
front-ui/app/actions/navigationActions.js
View File

@@ -91,6 +91,19 @@ var NavigationActions = {
actionType: NavigationConstants.CHANGE_URL,
url: '/pretraga?q=' + q
});
},
goToMenuItem: function(menuItem) {
var url = '';
if (menuItem.get) {
url = menuItem.get('url');
} else {
url = menuItem.url;
}
AppDispatcher.handleAction({
actionType: NavigationConstants.CHANGE_URL,
url: url
});
}
};

23
front-ui/app/components/account/login.js
View File

@@ -52,8 +52,11 @@ var Login = React.createClass({
renderErrorMessage: function(message){
return (<div className='error-message'>{message}</div>)
},
doLogin: function(e) {
onLoginClick: function(e) {
this.doLogin();
e.preventDefault();
},
doLogin: function() {
if(this.validate()) {
var loginInfo = new LoginModel({
email: this.state.email,
@@ -61,10 +64,8 @@ var Login = React.createClass({
});
UserActions.userLogin(loginInfo);
}
e.preventDefault();
}
},
renderLoginFailure: function() {
@@ -75,6 +76,12 @@ var Login = React.createClass({
return (<div></div>)
},
onKeyPress: function(e) {
var enterKeyCode = 13;
if(e.which == enterKeyCode) {
this.doLogin();
}
},
render : function() {
return (<div>
<div className="col-md-6">
@@ -86,18 +93,18 @@ var Login = React.createClass({
<div className="form-group">
<label for="email">Email adresa</label>
<input type="email" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
<input type="email" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
{this.getValidationMessages('email').map(this.renderErrorMessage)}
</div>
<div className="form-group">
<label for="password">Šifra</label>
<input type="password" onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>
<input type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>
{this.getValidationMessages('password').map(this.renderErrorMessage)}
</div>
<div className="form-group">
<button type="button" onClick={this.doLogin} className="btn btn-success">Prijava</button>
<button type="button" onClick={this.onLoginClick} className="btn btn-success">Prijava</button>
</div>
</form>
</div>

26
front-ui/app/components/account/register.js
View File

@@ -32,6 +32,12 @@ var Register = React.createClass({
myBabyOnTheWay: (e.currentTarget.value === "1" ? true: false)
});
},
onKeyPress: function(e) {
var enterKeyCode = 13;
if(e.which == enterKeyCode) {
this.doRegister();
}
},
renderMonthSelector: function() {
var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];
@@ -194,7 +200,11 @@ var Register = React.createClass({
loginState : UserStore.getLoginState()
});
},
register: function(e) {
onRegisterClick: function(e) {
this.doRegister();
e.preventDefault();
},
doRegister: function() {
if(this.validate()) {
var children = [];
if (this.state.myBabyDetailsVisible) {
@@ -231,8 +241,6 @@ var Register = React.createClass({
UserActions.registerUser(user);
}
e.preventDefault();
},
successContinue: function(e) {
NavigationActions.goToHome();
@@ -284,7 +292,7 @@ var Register = React.createClass({
<div className="form-group">
<label for="firstName" className="col-md-4 control-label">Ime</label>
<div className="col-md-4">
<input type="text" onChange={this.handleChange('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
<input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
{this.getValidationMessages('firstName').map(this.renderErrorMessage)}
</div>
</div>
@@ -292,28 +300,28 @@ var Register = React.createClass({
<div className="form-group">
<label for="lastName" className="col-md-4 control-label">Prezime</label>
<div className="col-md-4">
<input type="text" onChange={this.handleChange('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
<input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
{this.getValidationMessages('lastName').map(this.renderErrorMessage)}
</div>
</div>
<div className="form-group">
<label for="email" className="col-md-4 control-label">Email</label>
<div className="col-md-4">
<input type="text" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Email Adresa"/>
<input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Email Adresa"/>
{this.getValidationMessages('email').map(this.renderErrorMessage)}
</div>
</div>
<div className="form-group">
<label for="password" className="col-md-4 control-label">Šifra</label>
<div className="col-md-4">
<input type="password" onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"/>
<input type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"/>
{this.getValidationMessages('password').map(this.renderErrorMessage)}
</div>
</div>
<div className="form-group">
<label for="password_confirmation" className="col-md-4 control-label">Potvrda šifre</label>
<div className="col-md-4">
<input type="password" onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
<input type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
{this.getValidationMessages('passwordConfirmation').map(this.renderErrorMessage)}
@@ -335,7 +343,7 @@ var Register = React.createClass({
</div>
<div className="col-md-4">
<button onClick={this.register} type="button" className="btn btn-success btn-lg">
<button onClick={this.onRegisterClick} type="button" className="btn btn-success btn-lg">
Registruj me
</button>
</div>

1
front-ui/app/components/items/itemWithDetailsPage.js
View File

@@ -29,6 +29,7 @@ var ItemWithDetailsPage = React.createClass({
<div className="col-md-7">
<h3> {this.state.item.get('name')}</h3>
<div>
<div className='h4'> {this.state.item.get('brand').name}</div>
<div className='h4'> {this.state.item.get('list_price')} KM</div>
<div className='h5'>{this.state.item.get('pricePerUnit')}</div>
<div> {this.state.item.get('description')}</div>

1
front-ui/app/components/items/singleItem.js
View File

@@ -25,6 +25,7 @@ var SingleItem = React.createClass({
<div className="single_item" onClick={itemClick}>
<img src={firstImage.url} className="item_list_image" />
<h1> { this.props.item.get('name') }</h1>
<div>{ this.props.item.get('brand')? this.props.item.get('brand').name : '' } </div>
<div> { this.props.item.get('list_price') } KM </div>
</div>
);

4
front-ui/app/components/rootApp.js
View File

@@ -1,5 +1,5 @@
var React = require('react'),
SectionsListComponent = require('./shared/sectionsListComponent'),
MenuItemListComponent = require('./shared/menuItemListComponent'),
Router = require('react-router'),
Link = Router.Link,
RouteHandler = Router.RouteHandler,
@@ -57,7 +57,7 @@ var RootApp = React.createClass({
</div>
<div className='row'>
<div className='col-md-8' id='header'>
<SectionsListComponent />
<MenuItemListComponent />
</div>
<div className="col-md-4">

93
front-ui/app/components/shared/menuItemListComponent.js Normal file
View File

@@ -0,0 +1,93 @@
var React = require('react'),
MenuItemCollection = require('../../models/menuItemCollection'),
MenuItem = require('../../models/menuItem'),
Backbone = require('backbone'),
NavigationStore = require('../../stores/navigationStore'),
MenuItemStore = require('../../stores/menuItemStore'),
MenuItemActions = require('../../actions/menuItemActions'),
NavigationActions = require('../../actions/navigationActions');
Backbone.$ = $;
var MenuItemListComponent = React.createClass({
_onChange: function () {
if (this.isMounted()) {
this.setState(MenuItemStore.getState());
}
},
getInitialState: function() {
return MenuItemStore.getState();
},
componentDidMount: function() {
MenuItemStore.addChangeListener(this._onChange);
MenuItemActions.loadMenuItems();
},
onMouseOver: function(menuItem) {
MenuItemActions.setMenuItemHover(menuItem);
},
onMouseOut: function() {
MenuItemActions.unsetMenuItemHover();
},
onMouseLeave: function() {
MenuItemActions.unsetMenuItemHover();
},
onMenuItemClick: function(menuItem) {
MenuItemActions.unsetMenuItemHover();
NavigationActions.goToMenuItem(menuItem);
event.preventDefault();
},
//onCategoryClick: function(category, section) {
//MenuItemActions.unsetSectionHover();
//NavigationActions.goToCategory(new Category(category), section);
//event.preventDefault();
//},
//onSubcategoryClick: function(subcategory) {
//// implement in navigation actions
//// and call
//// when ready
//return false;
//},
render: function() {
var self = this;
var style = {
position: 'relative'
};
var abStyle = {
position: 'absolute'
};
return (
<div>
<ul className='nav nav-pills'>
{this.state.menuItems.map(function(menuItem) {
return (
<li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}>
<a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >
{ menuItem.get('title') }
</a>
<div style={abStyle} className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hide section-cat-list": "section-cat-list"} >
<ul >
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
return (
<li key={menuSubItem.id}>
<a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
</li>
)
})}
</ul>
</div>
</li>
)
})}
</ul>
</div>
);
}
});
module.exports = MenuItemListComponent;

8
front-ui/app/constants/menuItemConstants.js Normal file
View File

@@ -0,0 +1,8 @@
var keyMirror = require('react/lib/keyMirror');
// Define action constants
module.exports = keyMirror({
LOAD_MENU_ITEMS: null,
SET_MENU_ITEM_HOVER: null,
UNSET_MENU_ITEM_HOVER: null
});

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

@@ -2,8 +2,10 @@ var Backbone = require('backbone');
var Globals = require('../globals');
var Item = Backbone.Model.extend({
urlRoot : Globals.ApiUrl + '/item',
urlRoot : Globals.ApiUrl + '/item',
defaults : {
brand: {}
}

3
front-ui/app/models/itemWithDetails.js
View File

@@ -15,6 +15,9 @@ var ItemWithDetails = Backbone.Model.extend({
var descriptionSuffix = this.get('unit').description_suffix;
return (+pricePerUnit).toString() + " KM " + descriptionSuffix;
}
},
defaults : {
brand: {}
}
});

2
front-ui/app/models/menuItemCollection.js
View File

@@ -4,7 +4,7 @@ var Backbone = require('backbone'),
var MenuItemCollection = Backbone.Collection.extend({
model: MenuItem,
url: Globals.ApiUrl + '/menu_item'
url: Globals.ApiUrl + '/menuitem'
});
module.exports = MenuItemCollection;

86
front-ui/app/stores/menuItemStore.js Normal file
View File

@@ -0,0 +1,86 @@
var AppDispatcher = require('../dispatcher/appDispatcher');
var EventEmitter = require('events').EventEmitter;
var MenuItemCollection = require('../models/menuItemCollection');
var MenuItem = require('../models/menuItem');
var MenuItemConstants = require('../constants/menuItemConstants');
var _ = require('underscore');
var menuItemState = {
menuItems : [],
hoveredMenuItem : ''
};
var loadMenuItems = function() {
var menuItems = new MenuItemCollection();
menuItems.fetch({success: function() {
menuItemState.menuItems = menuItems.models;
// change will be called automatically when
// action is run but we need to emit it again
// when the data arive
// it's a bit "unfluxy" but convenient.
// "true philosophy" would be to run another "data arrived" action
MenuItemStore.emitChange();
}});
};
var setHovered = function(id) {
menuItemState.hoveredMenuItem = id;
}
// Extend MenuItemStore with EventEmitter to add eventing capabilities
var MenuItemStore = _.extend({}, EventEmitter.prototype, {
// Return Single Item With Details
getState: function() {
return menuItemState;
},
// Emit Change event
emitChange: function() {
console.log("Emmiting MenuItemStore change!");
this.emit('change');
},
// Add change listener
addChangeListener: function(callback) {
this.on('change', callback);
},
// Remove change listener
removeChangeListener: function(callback) {
this.removeListener('change', callback);
}
});
// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
var action = payload.action;
var text;
switch(action.actionType) {
// Respond to SELECT_ITEM action
case MenuItemConstants.LOAD_MENU_ITEMS:
loadMenuItems();
break;
case MenuItemConstants.SET_MENU_ITEM_HOVER:
setHovered(action.menuItem.get('id'));
break;
case MenuItemConstants.UNSET_MENU_ITEM_HOVER:
setHovered('');
break;
default:
return true;
}
// If action was responded to, emit change event
MenuItemStore.emitChange();
return true;
});
module.exports = MenuItemStore;