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 ?

{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') { items.push(
{this.props.obj[field.key].reduce(function(tag, concatenatedTag) { return tag.concat(", ", concatenatedTag) })}
) } 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 (
); }, 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 (
{this.getCore()}
); } }); 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 (
); }, 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( ); } content = (); } 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}
); }, 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;