diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/web/js/components/MainApp.react.js | 16 | ||||
-rw-r--r-- | src/web/js/components/Menu.react.js | 9 | ||||
-rw-r--r-- | src/web/js/components/RightPanel.react.js | 121 | ||||
-rw-r--r-- | src/web/js/stores/MenuStore.js | 3 | ||||
-rw-r--r-- | src/web/js/stores/RightPanelStore.js | 17 | ||||
-rw-r--r-- | src/web/models/feed.py | 1 | ||||
-rw-r--r-- | src/web/static/css/one-page-app.css | 11 |
7 files changed, 128 insertions, 50 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; diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js index 6921ae1c..3a87384f 100644 --- a/src/web/js/stores/MenuStore.js +++ b/src/web/js/stores/MenuStore.js @@ -8,7 +8,7 @@ var assign = require('object-assign'); var MenuStore = assign({}, EventEmitter.prototype, { _datas: {filter: 'all', feeds: {}, categories: {}, active_type: null, active_id: null, - all_unread_count: 0, feed_in_error: false}, + all_unread_count: 0}, getAll: function() { return this._datas; }, @@ -45,7 +45,6 @@ MenuStore.dispatchToken = JarrDispatcher.register(function(action) { case ActionTypes.RELOAD_MENU: MenuStore._datas['feeds'] = action.feeds; MenuStore._datas['categories'] = action.categories; - MenuStore._datas['feed_in_error'] = action.feed_in_error; MenuStore._datas['all_unread_count'] = action.all_unread_count; MenuStore.emitChange(); break; diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js index 54df1c95..f08be009 100644 --- a/src/web/js/stores/RightPanelStore.js +++ b/src/web/js/stores/RightPanelStore.js @@ -3,10 +3,11 @@ var ActionTypes = require('../constants/JarrConstants'); var EventEmitter = require('events').EventEmitter; var CHANGE_EVENT = 'change_middle_panel'; var assign = require('object-assign'); +var MenuStore = require('../stores/MenuStore'); var RightPanelStore = assign({}, EventEmitter.prototype, { - _datas: {}, + _datas: {category: null, feed: null, article: null}, getAll: function() { return this._datas; }, @@ -24,6 +25,20 @@ var RightPanelStore = assign({}, EventEmitter.prototype, { RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) { switch(action.type) { + case ActionTypes.PARENT_FILTER: + if(action.filter_id == null) { + RightPanelStore._datas.category = null; + RightPanelStore._datas.feed = null; + } else if(action.filter_type == 'category_id') { + RightPanelStore._datas.category = MenuStore._datas.categories[action.filter_id]; + RightPanelStore._datas.feed = null; + } else { + + RightPanelStore._datas.feed = MenuStore._datas.feeds[action.filter_id]; + RightPanelStore._datas.category = MenuStore._datas.categories[RightPanelStore._datas.feed.category_id]; + } + RightPanelStore.emitChange(); + break; default: // pass } diff --git a/src/web/models/feed.py b/src/web/models/feed.py index 29d5bc4c..a9c49282 100644 --- a/src/web/models/feed.py +++ b/src/web/models/feed.py @@ -75,5 +75,6 @@ class Feed(db.Model): "etag": self.etag, "icon_url": self.icon_url, "error_count": self.error_count, + "created_date": self.created_date, "last_modified": self.last_modified, "last_retrieved": self.last_retrieved} diff --git a/src/web/static/css/one-page-app.css b/src/web/static/css/one-page-app.css index 02aa405a..8da915b3 100644 --- a/src/web/static/css/one-page-app.css +++ b/src/web/static/css/one-page-app.css @@ -1,6 +1,10 @@ +#jarr-container { + padding-left: 0px; + padding-right: 0px; +} #menu { position: fixed; - top: 51px; + top: 50px; bottom: 0px; left: 0px; z-index: 1000; @@ -66,7 +70,7 @@ padding-top: 10px; padding-right: 20px; position: fixed; - top: 51px; + top: 50px; bottom: 0px; left: 0px; z-index: 1000; @@ -102,3 +106,6 @@ max-height: 22px; overflow: hidden; } +#right-panel>ol{ + margin-top: 10px; +} |