diff options
-rw-r--r-- | src/web/js/actions/RightPanelActions.js | 19 | ||||
-rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 12 | ||||
-rw-r--r-- | src/web/js/components/RightPanel.react.js | 64 | ||||
-rw-r--r-- | src/web/js/constants/JarrConstants.js | 2 | ||||
-rw-r--r-- | src/web/js/stores/RightPanelStore.js | 10 | ||||
-rw-r--r-- | src/web/models/article.py | 4 | ||||
-rw-r--r-- | src/web/views/views.py | 11 |
7 files changed, 87 insertions, 35 deletions
diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js index 7a7b935a..6831f9b8 100644 --- a/src/web/js/actions/RightPanelActions.js +++ b/src/web/js/actions/RightPanelActions.js @@ -5,15 +5,16 @@ var RightPanelStore = require('../stores/RightPanelStore'); var RightPanelActions = { - load: function(obj_type, obj_id) { - filters = MiddlePanelStore.getRequestFilter(); - jquery.getJSON('api/v2.0/' + obj_type + '/' + obj_id, function(payload) { - _last_fetched_with = filters; - JarrDispatcher.dispatch({ - type: ActionTypes.LOAD_RIGHT_PANEL, - articles: payload.articles, - }); - }); + loadArticle: function(article_id) { + jquery.getJSON('/getart/' + article_id, + function(payload) { + JarrDispatcher.dispatch({ + type: ActionTypes.LOAD_ARTICLE, + article: payload, + }); + } + ); + }, }; diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index a46d7346..199316e6 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -6,6 +6,7 @@ var Glyphicon = require('react-bootstrap/Glyphicon'); var MiddlePanelStore = require('../stores/MiddlePanelStore'); var MiddlePanelActions = require('../actions/MiddlePanelActions'); +var RightPanelActions = require('../actions/RightPanelActions'); var TableLine = React.createClass({ propTypes: {article_id: React.PropTypes.number.isRequired, @@ -34,23 +35,28 @@ var TableLine = React.createClass({ onClick={this.toogleRead} />); var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"} onClick={this.toogleLike} />); - return (<div className="list-group-item"> + return (<div className="list-group-item" onClick={this.loadArticle}> <h5><strong>{title}</strong></h5><div /> <div>{read} {liked} {this.props.title}</div> </div> ); }, - toogleRead: function() { + toogleRead: function(evnt) { this.setState({read: !this.state.read}, function() { MiddlePanelActions.changeRead(this.props.category_id, this.props.feed_id, this.props.article_id, this.state.read); }.bind(this)); + evnt.stopPropagation(); }, - toogleLike: function() { + toogleLike: function(evnt) { this.setState({liked: !this.state.liked}, function() { MiddlePanelActions.changeLike(this.props.category_id, this.props.feed_id, this.props.article_id, this.state.liked); }.bind(this)); + evnt.stopPropagation(); + }, + loadArticle: function() { + RightPanelActions.loadArticle(this.props.article_id); }, }); diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js index 00e2dd54..328bc6b1 100644 --- a/src/web/js/components/RightPanel.react.js +++ b/src/web/js/components/RightPanel.react.js @@ -7,7 +7,17 @@ var RightPanelActions = require('../actions/RightPanelActions'); var Article = React.createClass({ propTypes: {article: React.PropTypes.object.isRequired}, render: function() { - return (<div />); + var icon = null; + if(this.props.article.icon_url){ + icon = (<img width="16px" src={this.props.article.icon_url} />); + } + var header = (<h4> + {icon}<strong>Title:</strong> {this.props.article.title} + </h4>); + return (<Panel header={header}> + <div dangerouslySetInnerHTML={{__html: this.props.article.content}} /> + </Panel> + ); }, }); @@ -61,7 +71,7 @@ var Category = React.createClass({ var RightPanel = React.createClass({ getInitialState: function() { - return {category: null, feed: null, article: null}; + return {category: null, feed: null, article: null, current: null}; }, getCategoryCrum: function() { return (<li><a onClick={this.selectCategory} href="#"> @@ -74,28 +84,39 @@ var RightPanel = React.createClass({ </a></li>); }, getArticleCrum: function() { - return <li>Article</li>; + return <li>{this.state.article.title}</li>; }, render: function() { var content = null; + var brd_category = null; + var brd_feed = null; + var brd_article = null; var breadcrum = null; + if(this.state.category) { + brd_category = (<li><a onClick={this.selectCategory} href="#"> + {this.state.category.name} + </a></li>); + } + if(this.state.feed) { + brd_feed = (<li><a onClick={this.selectFeed} href="#"> + {this.state.feed.title} + </a></li>); + } 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>); + brd_article = <li>{this.state.article.title}</li>; + } + if(brd_category || brd_feed || brd_article) { + breadcrum = (<ol className="breadcrumb"> + {brd_category} + {brd_feed} + {brd_article} + </ol>); + } + if(this.state.current == 'article') { + var content = <Article article={this.state.article} />; + } else if(this.state.current == 'feed') { var content = <Feed feed={this.state.feed} />; - } else if(this.state.category) { - var breadcrum = (<ol className="breadcrumb"> - {this.getCategoryCrum()} - </ol>); + } else if(this.state.current == 'category') { var content = <Category category={this.state.category} />; } @@ -108,10 +129,13 @@ var RightPanel = React.createClass({ ); }, selectCategory: function() { - this.setState({feed: null, article: null}); + this.setState({current: 'category'}); }, selectFeed: function() { - this.setState({article: null}); + this.setState({current: 'feed'}); + }, + selectArticle: function() { + this.setState({current: 'article'}); }, componentDidMount: function() { RightPanelStore.addChangeListener(this._onChange); diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js index ca5eacc7..4a673cf8 100644 --- a/src/web/js/constants/JarrConstants.js +++ b/src/web/js/constants/JarrConstants.js @@ -18,5 +18,5 @@ module.exports = keyMirror({ CHANGE_ATTR: null, RELOAD_MIDDLE_PANEL: null, MIDDLE_PANEL_FILTER: null, - LOAD_RIGHT_PANEL: null, + LOAD_ARTICLE: null, }); diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js index f08be009..68d3b7e9 100644 --- a/src/web/js/stores/RightPanelStore.js +++ b/src/web/js/stores/RightPanelStore.js @@ -26,19 +26,29 @@ var RightPanelStore = assign({}, EventEmitter.prototype, { RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) { switch(action.type) { case ActionTypes.PARENT_FILTER: + RightPanelStore._datas.article = null; 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; + RightPanelStore._datas.current = 'category'; } else { RightPanelStore._datas.feed = MenuStore._datas.feeds[action.filter_id]; RightPanelStore._datas.category = MenuStore._datas.categories[RightPanelStore._datas.feed.category_id]; + RightPanelStore._datas.current = 'feed'; } RightPanelStore.emitChange(); break; + case ActionTypes.LOAD_ARTICLE: + RightPanelStore._datas.feed = MenuStore._datas.feeds[action.article.feed_id]; + RightPanelStore._datas.category = MenuStore._datas.categories[action.article.category_id]; + RightPanelStore._datas.article = action.article; + RightPanelStore._datas.current = 'article'; + RightPanelStore.emitChange(); + break; default: // pass } diff --git a/src/web/models/article.py b/src/web/models/article.py index 91be9846..94fedf16 100644 --- a/src/web/models/article.py +++ b/src/web/models/article.py @@ -79,5 +79,5 @@ class Article(db.Model): "like": self.like, "date": self.date, "retrieved_date": self.retrieved_date, - "feed_id": getattr(self.source, 'id', None), - "feed_name": getattr(self.source, 'title', None)} + "feed_id": self.feed_id, + "category_id": self.category_id} diff --git a/src/web/views/views.py b/src/web/views/views.py index 84d1eacb..3e7bf80a 100644 --- a/src/web/views/views.py +++ b/src/web/views/views.py @@ -306,6 +306,17 @@ def get_middle_panel(): return _articles_to_json(articles, fd_hash) +@app.route('/getart/<int:article_id>') +@login_required +def get_article(article_id): + article = ArticleController(g.user.id).get(id=article_id).dump() + article['category_id'] = article['category_id'] or 0 + feed = FeedController(g.user.id).get(id=article['feed_id']) + article['icon_url'] = url_for('icon.icon', url=feed.icon_url) \ + if feed.icon_url else None + return jsonify(**article) + + @app.route('/mark_all_as_read', methods=['PUT']) @login_required def mark_all_as_read(): |