wip right panel

1 files changed, 89 insertions, 32 deletions

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;