wip right panel

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;