aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/js/components')
-rw-r--r--src/web/js/components/MainApp.react.js16
-rw-r--r--src/web/js/components/Menu.react.js9
-rw-r--r--src/web/js/components/RightPanel.react.js121
3 files changed, 101 insertions, 45 deletions
diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 72504d89..b448f808 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,6 +1,6 @@
var React = require('react');
var Col = require('react-bootstrap/Col');
-var Row = require('react-bootstrap/Row');
+var Grid = require('react-bootstrap/Grid');
var Menu = require('./Menu.react');
var MiddlePanel = require('./MiddlePanel.react');
@@ -9,19 +9,15 @@ var RightPanel = require('./RightPanel.react');
var MainApp = React.createClass({
render: function() {
- return (<Row>
+ return (<Grid fluid id="jarr-container">
<Menu />
- <Col id="middle-panel"
- mdOffset={3} lgOffset={2} xs={2} sm={2} md={4} lg={4}>
+ <Col id="middle-panel" mdOffset={3} lgOffset={2}
+ xs={2} sm={2} md={4} lg={4}>
<MiddlePanel.MiddlePanelFilter />
<MiddlePanel.MiddlePanel />
</Col>
- <Col id="right-panel"
- xs={10} sm={10} md={8} lg={8}>
- <RightPanel.RightPanelMenu />
- <RightPanel.RightPanel />
- </Col>
- </Row>
+ <RightPanel />
+ </Grid>
);
},
});
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index d0bd719d..0d739e4e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -201,6 +201,9 @@ var Menu = React.createClass({
var feeds = [];
var unread = 0;
this.state.categories[cat_id].feeds.map(function(feed_id) {
+ if(this.state.feeds[feed_id].error_count > 3) {
+ feed_in_error = true;
+ }
unread += this.state.feeds[feed_id].unread;
feeds.push(this.state.feeds[feed_id]);
}.bind(this));
@@ -213,10 +216,10 @@ var Menu = React.createClass({
unread={unread} />);
}
- return (<Col xsHidden smHidden md={3} lg={2} data-spy="affix"
- id="menu" className="show-grid sidebar">
+ return (<Col xsHidden smHidden md={3} lg={2}
+ id="menu" className="sidebar">
<MenuFilter filter={this.state.filter}
- feed_in_error={this.state.feed_in_error} />
+ feed_in_error={feed_in_error} />
{rmPrntFilt}
{categories}
</Col>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index d195dc08..a1e15e94 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,61 +1,117 @@
var React = require('react');
-
+var Col = require('react-bootstrap/Col');
+var Panel = require('react-bootstrap/Panel');
var RightPanelStore = require('../stores/RightPanelStore');
var RightPanelActions = require('../actions/RightPanelActions');
-
var Article = React.createClass({
-
+ propTypes: {article: React.PropTypes.object.isRequired},
render: function() {
return (<div />);
},
});
-
var Feed = React.createClass({
+ propTypes: {feed: React.PropTypes.object.isRequired},
render: function() {
- return (<div />);
+ var icon = null;
+ if(this.props.feed.icon_url){
+ icon = (<img width="16px" src={this.props.feed.icon_url} />);
+ }
+ var header = (<h4>
+ {icon}<strong>Title:</strong> {this.props.feed.title}
+ </h4>);
+ return (<Panel header={header}>
+ <dl className="dl-horizontal">
+ <dt>Description</dt>
+ <dd>{this.props.feed.description}</dd>
+ <dt>Created on</dt>
+ <dd>{this.props.feed.created_date}</dd>
+ <dt>Feed adress</dt>
+ <dd>
+ <a href={this.props.feed.link}>
+ {this.props.feed.link}
+ </a>
+ </dd>
+ <dt>Site link</dt>
+ <dd>
+ <a href={this.props.feed.site_link}>
+ {this.props.feed.site_link}
+ </a>
+ </dd>
+ <dt>Last fetched</dt>
+ <dd>{this.props.feed.last_retrieved}</dd>
+ <dt>Enabled</dt>
+ <dd>{this.props.feed.enabled}</dd>
+ </dl>
+ </Panel>
+ );
},
});
-
var Category = React.createClass({
+ propTypes: {category: React.PropTypes.object.isRequired},
render: function() {
- return (<div />);
+ return (<Panel header={this.props.category.name}>
+ test
+ </Panel>
+ );
},
});
-
-var RightPanelMenu = React.createClass({
+var RightPanel = React.createClass({
getInitialState: function() {
- return {};
- },
- render: function() {
- return (<div />);
+ return {category: null, feed: null, article: null};
},
- componentDidMount: function() {
- RightPanelStore.addChangeListener(this._onChange);
+ getCategoryCrum: function() {
+ return (<li><a onClick={this.selectCategory} href="#">
+ {this.state.category.name}
+ </a></li>);
},
- componentWillUnmount: function() {
- RightPanelStore.removeChangeListener(this._onChange);
+ getFeedCrum: function() {
+ return (<li><a onClick={this.selectFeed} href="#">
+ {this.state.feed.title}
+ </a></li>);
},
- _onChange: function() {
- },
-});
-
-var RightPanel = React.createClass({
- getInitialState: function() {
- return {obj_type: null, obj_id: null};
+ getArticleCrum: function() {
+ return <li>Article</li>;
},
render: function() {
- if (this.state.obj_type == 'article') {
- return <Article />;
- } else if (this.state.obj_type == 'feed') {
- return <Feed />;
- } else if (this.state.obj_type == 'category') {
- return <Category />;
+ var content = null;
+ var breadcrum = null;
+ if(this.state.article) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ {this.getFeedCrum()}
+ {this.getArticleCrum()}
+ </ol>);
+ var content = <Article />;
+ } else if(this.state.feed) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ {this.getFeedCrum()}
+ </ol>);
+ var content = <Feed feed={this.state.feed} />;
+ } else if(this.state.category) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ </ol>);
+ var content = <Category category={this.state.category} />;
}
- return <div />;
+
+ return (<Col id="right-panel" xsOffset={2} smOffset={2}
+ mdOffset={7} lgOffset={6}
+ xs={10} sm={10} md={5} lg={6}>
+ {breadcrum}
+ {content}
+ </Col>
+ );
+ },
+ selectCategory: function() {
+ this.setState({feed: null, article: null});
+ },
+ selectFeed: function() {
+ this.setState({article: null});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
@@ -64,7 +120,8 @@ var RightPanel = React.createClass({
RightPanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
+ this.setState(RightPanelStore._datas);
},
});
-module.exports = {RightPanelMenu: RightPanelMenu, RightPanel: RightPanel};
+module.exports = RightPanel;
bgstack15