aboutsummaryrefslogtreecommitdiff
path: root/src/web
diff options
context:
space:
mode:
authorFrançois Schmidts <francois.schmidts@gmail.com>2016-01-29 14:26:02 +0100
committerFrançois Schmidts <francois.schmidts@gmail.com>2016-01-29 14:26:02 +0100
commit4098a0de815013c521618b6419d91f997c986ef0 (patch)
treed8df5e60904924c65dccfd51333b67597b0b30fa /src/web
parentcorrecting awful middle panel action handling (diff)
downloadnewspipe-4098a0de815013c521618b6419d91f997c986ef0.tar.gz
newspipe-4098a0de815013c521618b6419d91f997c986ef0.tar.bz2
newspipe-4098a0de815013c521618b6419d91f997c986ef0.zip
draft displaying article
Diffstat (limited to 'src/web')
-rw-r--r--src/web/js/actions/RightPanelActions.js19
-rw-r--r--src/web/js/components/MiddlePanel.react.js12
-rw-r--r--src/web/js/components/RightPanel.react.js64
-rw-r--r--src/web/js/constants/JarrConstants.js2
-rw-r--r--src/web/js/stores/RightPanelStore.js10
-rw-r--r--src/web/models/article.py4
-rw-r--r--src/web/views/views.py11
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():
bgstack15