var React = require('react');
var Col = require('react-bootstrap/Col');
var Glyphicon = require('react-bootstrap/Glyphicon');
var Button = require('react-bootstrap/Button');
var ButtonGroup = require('react-bootstrap/ButtonGroup');
var RightPanelStore = require('../stores/RightPanelStore');
var JarrTime = require('./time.react');
var PanelMixin = {
propTypes: {obj: React.PropTypes.object.isRequired},
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 (
{icon}Title: {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.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 == 'link') {
items.push(
{this.props.obj[field.key]}
);
}
}.bind(this));
} else {
this.fields.map(function(field) {
key = this.getKey('dd', field.key);
items.push({field.title});
key = this.getKey('dt', field.key);
if(field.type == 'string' || field.type == 'link') {
items.push(
);
} else if (field.type == 'bool') {
items.push();
}
}.bind(this));
items.push(
);
}
return ({items}
);
},
render: function() {
return (
{this.getHeader()}
{this.getBody()}
);
},
onClickEdit: function() {
this.setState({edit_mode: !this.state.edit_mode});
},
onClickRemove: function() {
},
};
var Article = React.createClass({
mixins: [PanelMixin],
getInitialState: function() {return {edit_mode: false};},
fields: [],
isEditable: function() {return false;},
isRemovable: function() {return true;},
getTitle: function() {return this.props.obj.title;},
getBody: function() {
return ();
},
});
var Feed = React.createClass({
mixins: [PanelMixin],
getInitialState: function() {
return {edit_mode: false, filters: this.props.obj.filters};
},
isEditable: function() {return true;},
isRemovable: function() {return true;},
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'},
],
getTitle: function() {return this.props.obj.title;},
getFilterRow: function(i, filter) {
return (
);
},
getBody: function() {
var filter_rows = [];
for(var i in this.state.filters) {
filter_rows.push(this.getFilterRow(i, this.state.filters[i]));
}
return (
- Created on
-
- Last fetched
-
{this.getCore()}
);
},
addFilterRow: function() {
var filters = this.state.filters;
filters.push({action: null, action_on: null,
type: null, pattern: null});
this.setState({filters: filters});
},
removeFilterRow: function(evnt) {
var filters = this.state.filters;
delete filters[evnt.target.getAttribute('data-index')];
this.setState({filters: filters});
},
});
var Category = React.createClass({
mixins: [PanelMixin],
getInitialState: function() {return {edit_mode: false};},
isEditable: function() {
if(this.props.obj.id != 0) {return true;}
else {return false;}
},
isRemovable: function() {return this.isEditable();},
fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}],
getTitle: function() {return this.props.obj.name;},
getBody: function() {
return (
{this.getCore()}
);
},
});
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() {
var content = null;
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._datas);
},
});
module.exports = RightPanel;