From 4098a0de815013c521618b6419d91f997c986ef0 Mon Sep 17 00:00:00 2001 From: François Schmidts Date: Fri, 29 Jan 2016 14:26:02 +0100 Subject: draft displaying article --- src/web/js/actions/RightPanelActions.js | 19 ++++----- src/web/js/components/MiddlePanel.react.js | 12 ++++-- src/web/js/components/RightPanel.react.js | 64 ++++++++++++++++++++---------- src/web/js/constants/JarrConstants.js | 2 +- src/web/js/stores/RightPanelStore.js | 10 +++++ src/web/models/article.py | 4 +- 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 = (); - return (
+ return (
{title}
{read} {liked} {this.props.title}
); }, - 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 (
); + var icon = null; + if(this.props.article.icon_url){ + icon = (); + } + var header = (

+ {icon}Title: {this.props.article.title} +

); + return ( +
+ + ); }, }); @@ -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 (
  • @@ -74,28 +84,39 @@ var RightPanel = React.createClass({
    • ); }, getArticleCrum: function() { - return
  • Article
    • ; + return
  • {this.state.article.title}
    • ; }, 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 = (
  • + {this.state.category.name} +
    • ); + } + if(this.state.feed) { + brd_feed = (
  • + {this.state.feed.title} +
    • ); + } if(this.state.article) { - var breadcrum = (
      - {this.getCategoryCrum()} - {this.getFeedCrum()} - {this.getArticleCrum()} -
    ); - var content =
    ; - } else if(this.state.feed) { - var breadcrum = (
      - {this.getCategoryCrum()} - {this.getFeedCrum()} -
    ); + brd_article =
  • {this.state.article.title}
    • ; + } + if(brd_category || brd_feed || brd_article) { + breadcrum = (
      + {brd_category} + {brd_feed} + {brd_article} +
    ); + } + if(this.state.current == 'article') { + var content =
    ; + } else if(this.state.current == 'feed') { var content = ; - } else if(this.state.category) { - var breadcrum = (
      - {this.getCategoryCrum()} -
    ); + } else if(this.state.current == 'category') { var content = ; } @@ -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/') +@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(): -- cgit