From 56ab5f6df51ff301a4dccc458eb83917bba49afc Mon Sep 17 00:00:00 2001 From: François Schmidts Date: Fri, 29 Jan 2016 00:27:47 +0100 Subject: wip right panel --- src/web/js/components/MainApp.react.js | 16 ++-- src/web/js/components/Menu.react.js | 9 ++- src/web/js/components/RightPanel.react.js | 121 ++++++++++++++++++++++-------- src/web/js/stores/MenuStore.js | 3 +- src/web/js/stores/RightPanelStore.js | 17 ++++- src/web/models/feed.py | 1 + src/web/static/css/one-page-app.css | 11 ++- 7 files changed, 128 insertions(+), 50 deletions(-) (limited to 'src/web') 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 ( + return ( - + - - - - - + + ); }, }); 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 ( + return ( + feed_in_error={feed_in_error} /> {rmPrntFilt} {categories} 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 (
); }, }); - var Feed = React.createClass({ + propTypes: {feed: React.PropTypes.object.isRequired}, render: function() { - return (
); + var icon = null; + if(this.props.feed.icon_url){ + icon = (); + } + var header = (

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

); + return ( +
+
Description
+
{this.props.feed.description}
+
Created on
+
{this.props.feed.created_date}
+
Feed adress
+
+ + {this.props.feed.link} + +
+
Site link
+
+ + {this.props.feed.site_link} + +
+
Last fetched
+
{this.props.feed.last_retrieved}
+
Enabled
+
{this.props.feed.enabled}
+
+ + ); }, }); - var Category = React.createClass({ + propTypes: {category: React.PropTypes.object.isRequired}, render: function() { - return (
); + return ( + test + + ); }, }); - -var RightPanelMenu = React.createClass({ +var RightPanel = React.createClass({ getInitialState: function() { - return {}; - }, - render: function() { - return (
); + return {category: null, feed: null, article: null}; }, - componentDidMount: function() { - RightPanelStore.addChangeListener(this._onChange); + getCategoryCrum: function() { + return (
  • + {this.state.category.name} +
    • ); }, - componentWillUnmount: function() { - RightPanelStore.removeChangeListener(this._onChange); + getFeedCrum: function() { + return (
  • + {this.state.feed.title} +
    • ); }, - _onChange: function() { - }, -}); - -var RightPanel = React.createClass({ - getInitialState: function() { - return {obj_type: null, obj_id: null}; + getArticleCrum: function() { + return
  • Article
    • ; }, render: function() { - if (this.state.obj_type == 'article') { - return
    ; - } else if (this.state.obj_type == 'feed') { - return ; - } else if (this.state.obj_type == 'category') { - return ; + var content = null; + var breadcrum = null; + 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()} +
    ); + var content = ; + } else if(this.state.category) { + var breadcrum = (
      + {this.getCategoryCrum()} +
    ); + var content = ; } - return
    ; + + return ( + {breadcrum} + {content} + + ); + }, + 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; +} -- cgit