var React = require('react');
var Col = require('react-bootstrap/lib/Col');
var Glyphicon = require('react-bootstrap/lib/Glyphicon');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Modal = require('react-bootstrap/lib/Modal');
var RightPanelActions = require('../actions/RightPanelActions');
var RightPanelStore = require('../stores/RightPanelStore');
var MenuStore = require('../stores/MenuStore');
var JarrTime = require('./time.react');
var PanelMixin = {
propTypes: {obj: React.PropTypes.object.isRequired},
getInitialState: function() {
return {edit_mode: false, obj: this.props.obj, showModal: false};
},
getHeader: function() {
var icon = null;
if(this.props.obj.icon_url){
icon = ( );
}
var btn_grp = null;
if(this.isEditable() || this.isRemovable()) {
var edit_button = null;
if(this.isEditable()) {
edit_button = (
);
}
var rem_button = null;
if(this.isRemovable()) {
rem_button = (
);
}
btn_grp = (
{edit_button}
{rem_button}
);
}
return (
Are you sure ?
Confirm
{icon}{this.getTitle()}
{btn_grp}
);
},
getKey: function(prefix, suffix) {
return ((this.state.edit_mode?'edit':'fix') + prefix
+ '-' + this.props.obj.id + '-' + suffix);
},
getCore: function() {
var items = [];
var key;
if(!this.state.edit_mode) {
this.fields.filter(function(field) {
return field.type != 'ignore';
}).map(function(field) {
key = this.getKey('dt', field.key);
items.push({field.title} );
key = this.getKey('dd', field.key);
if(field.type == 'string') {
items.push({this.props.obj[field.key]} );
} else if(field.type == 'bool') {
if(this.props.obj[field.key]) {
items.push( );
} else {
items.push( );
}
} else if (field.type == 'list') {
this.props.obj[field.key].map(function(tag) {items.push({tag} )});
} else if (field.type == 'link') {
items.push(
{this.props.obj[field.key]}
);
}
}.bind(this));
} else {
this.fields.filter(function(field) {
return field.type != 'ignore';
}).map(function(field) {
key = this.getKey('dd', field.key);
items.push({field.title} );
key = this.getKey('dt', field.key);
var input = null;
if(field.type == 'string' || field.type == 'link') {
input = ( );
} else if (field.type == 'bool') {
input = ( );
}
items.push({input} );
}.bind(this));
}
return ({items} );
},
getSubmit: function() {
return (
Submit
);
},
render: function() {
return (
{this.getHeader()}
{this.getBody()}
);
},
onClickEdit: function() {
this.setState({edit_mode: !this.state.edit_mode});
},
onClickRemove: function() {
this.setState({showModal: true});
},
closeModal: function() {
this.setState({showModal: false});
},
confirmDelete: function() {
this.setState({showModal: false}, function() {
RightPanelActions.delObj(this.props.obj.id, this.obj_type);
}.bind(this));
},
saveField: function(evnt) {
var obj = this.state.obj;
for(var i in this.fields) {
if(evnt.target.name == this.fields[i].key) {
if(this.fields[i].type == 'bool') {
obj[evnt.target.name] = evnt.target.checked;
} else {
obj[evnt.target.name] = evnt.target.value;
}
break;
}
}
this.setState({obj: obj});
},
saveObj: function() {
var to_push = {};
this.fields.map(function(field) {
to_push[field.key] = this.state.obj[field.key];
}.bind(this));
this.setState({edit_mode: false}, function() {
RightPanelActions.putObj(this.props.obj.id, this.obj_type, to_push);
}.bind(this));
},
};
var Article = React.createClass({
mixins: [PanelMixin],
isEditable: function() {return false;},
isRemovable: function() {return true;},
fields: [{'title': 'Date', 'type': 'string', 'key': 'date'},
{'title': 'Original link', 'type': 'link', 'key': 'link'},
{'title': 'Tags', 'type': 'list', 'key': 'tags'}
],
obj_type: 'article',
getTitle: function() {return this.props.obj.title;},
getBody: function() {
return ();
}
});
var Feed = React.createClass({
mixins: [PanelMixin],
isEditable: function() {return true;},
isRemovable: function() {return true;},
obj_type: 'feed',
fields: [{'title': 'Feed title', 'type': 'string', 'key': 'title'},
{'title': 'Description', 'type': 'string', 'key': 'description'},
{'title': 'Feed link', 'type': 'link', 'key': 'link'},
{'title': 'Site link', 'type': 'link', 'key': 'site_link'},
{'title': 'Enabled', 'type': 'bool', 'key': 'enabled'},
{'title': 'Private', 'type': 'bool', 'key': 'private'},
{'title': 'Filters', 'type': 'ignore', 'key': 'filters'},
{'title': 'Category', 'type': 'ignore', 'key': 'category_id'},
],
getTitle: function() {return this.props.obj.title;},
getFilterRow: function(i, filter) {
return (
match
no match
simple match
regex
mark as read
mark as favorite
);
},
getFilterRows: function() {
var rows = [];
if(this.state.edit_mode) {
for(var i in this.state.obj.filters) {
rows.push(this.getFilterRow(i, this.state.obj.filters[i]));
}
return (
Filters
{rows}
);
}
rows = [];
rows.push(Filters );
for(var i in this.state.obj.filters) {
rows.push(
When {this.state.obj.filters[i]['action on']}
on "{this.state.obj.filters[i].pattern}"
({this.state.obj.filters[i].type})
"=" {this.state.obj.filters[i].action}
);
}
return {rows} ;
},
getCategorySelect: function() {
var content = null;
if(this.state.edit_mode) {
var categ_options = [];
for(var index in MenuStore._datas.categories_order) {
var cat_id = MenuStore._datas.categories_order[index];
categ_options.push(
{MenuStore._datas.categories[cat_id].name}
);
}
content = (
{categ_options}
);
} else {
content = MenuStore._datas.categories[this.props.obj.category_id].name;
}
return (
Category {content}
);
},
getErrorFields: function() {
if(this.props.obj.error_count < MenuStore._datas.error_threshold) {
return;
}
if(this.props.obj.error_count < MenuStore._datas.max_error) {
return (
State
The download of this feed has encountered some problems. However its error counter will be reinitialized at the next successful retrieving.
Last error
{this.props.obj.last_error}
);
}
return (
State
That feed has encountered too much consecutive errors and won't be retrieved anymore.
Last error
{this.props.obj.last_error}
Reset error count
);
},
resetErrors: function() {
var obj = this.state.obj;
obj.error_count = 0;
this.setState({obj: obj}, function() {
RightPanelActions.resetErrors(this.props.obj.id);
}.bind(this));
},
getBody: function() {
return (
Created on
Last fetched
{this.getErrorFields()}
{this.getCategorySelect()}
{this.getCore()}
{this.getFilterRows()}
{this.state.edit_mode?this.getSubmit():null}
);
},
addFilterRow: function() {
var obj = this.state.obj;
obj.filters.push({action: "mark as read", 'action on': "match",
type: "simple match", pattern: ""});
this.setState({obj: obj});
},
removeFilterRow: function(evnt) {
var obj = this.state.obj;
delete obj.filters[evnt.target.getAttribute('data-index')];
this.setState({obj: obj});
},
saveFilterChange: function(evnt) {
var index = evnt.target.getAttribute('data-index');
var obj = this.state.obj;
obj.filters[index][evnt.target.name] = evnt.target.value;
this.setState({obj: obj});
},
});
var Category = React.createClass({
mixins: [PanelMixin],
isEditable: function() {
if(this.props.obj.id != 0) {return true;}
else {return false;}
},
isRemovable: function() {return this.isEditable();},
obj_type: 'category',
fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}],
getTitle: function() {return this.props.obj.name;},
getBody: function() {
return (
{this.getCore()}
{this.state.edit_mode?this.getSubmit():null}
);
},
});
var RightPanel = React.createClass({
getInitialState: function() {
return {category: null, feed: null, article: null, current: null};
},
getCategoryCrum: function() {
return (
{this.state.category.name}
);
},
getFeedCrum: function() {
return (
{this.state.feed.title}
);
},
getArticleCrum: function() {
return {this.state.article.title} ;
},
render: function() {
window.scrollTo(0, 0);
var brd_category = null;
var brd_feed = null;
var brd_article = null;
var breadcrum = null;
if(this.state.category) {
brd_category = (
{this.state.category.name}
);
}
if(this.state.feed) {
brd_feed = (
{this.state.feed.title}
);
}
if(this.state.article) {
brd_article = {this.state.article.title} ;
}
if(brd_category || brd_feed || brd_article) {
breadcrum = (
{brd_category}
{brd_feed}
{brd_article}
);
}
if(this.state.current == 'article') {
var cntnt = ( );
} else if(this.state.current == 'feed') {
var cntnt = ( );
} else if(this.state.current == 'category') {
var cntnt = ( );
}
return (
{breadcrum}
{cntnt}
);
},
selectCategory: function() {
this.setState({current: 'category'});
},
selectFeed: function() {
this.setState({current: 'feed'});
},
selectArticle: function() {
this.setState({current: 'article'});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
RightPanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState(RightPanelStore.getAll());
},
});
module.exports = RightPanel;