aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components/Navbar.react.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/js/components/Navbar.react.js')
-rw-r--r--src/web/js/components/Navbar.react.js69
1 files changed, 54 insertions, 15 deletions
diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index 56de178e..295b4bb6 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -5,6 +5,7 @@ var NavItem = require('react-bootstrap/lib/NavItem');
var Navbar = require('react-bootstrap/lib/Navbar');
var NavDropdown = require('react-bootstrap/lib/NavDropdown');
var MenuItem = require('react-bootstrap/lib/MenuItem');
+var Modal = require('react-bootstrap/lib/Modal');
var Button = require('react-bootstrap/lib/Button');
var Input = require('react-bootstrap/lib/Input');
@@ -13,11 +14,14 @@ var MenuStore = require('../stores/MenuStore');
JarrNavBar = React.createClass({
getInitialState: function() {
return {is_admin: MenuStore._datas.is_admin,
- crawling_method: MenuStore._datas.crawling_method};
+ crawling_method: MenuStore._datas.crawling_method,
+ showModal: false, modalType: null};
},
buttonFetch: function() {
if(this.state.is_admin && this.state.crawling_method != 'http') {
- return <NavItem eventKey={2} href="/fetch"><Glyphicon glyph="import" />Fetch</NavItem>;
+ return (<NavItem eventKey={2} href="/fetch">
+ <Glyphicon glyph="import" />Fetch
+ </NavItem>);
}
},
buttonAdmin: function() {
@@ -30,11 +34,50 @@ JarrNavBar = React.createClass({
</NavDropdown>);
}
},
+ getModel: function() {
+ var heading = null;
+ var action = null;
+ var body = null;
+ if(this.state.modalType == 'addFeed') {
+ heading = 'Add a new feed';
+ action = '/feed/bookmarklet';
+ placeholder = "Site or feed url, we'll sort it out later ;)";
+ body = <Input name="url" type="text" placeholder={placeholder} />;
+ } else {
+ heading = 'Add a new category';
+ action = '/category/create';
+ body = <Input name="name" type="text"
+ placeholder="Name, there isn't much more to it" />;
+ }
+ return (<Modal show={this.state.showModal} onHide={this.close}>
+ <form action={action} method="POST">
+ <Modal.Header closeButton>
+ <Modal.Title>{heading}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {body}
+ </Modal.Body>
+ <Modal.Footer>
+ <Button type="submit">Add</Button>
+ </Modal.Footer>
+ </form>
+ </Modal>);
+ },
+ close: function() {
+ this.setState({showModal: false, modalType: null});
+ },
+ openAddFeed: function() {
+ this.setState({showModal: true, modalType: 'addFeed'});
+ },
+ openAddCategory: function() {
+ this.setState({showModal: true, modalType: 'addCategory'});
+ },
render: function() {
var gl_title = (<span>
<Glyphicon glyph="plus-sign" />Add a new feed
</span>);
- return (<Navbar fixedTop inverse className="navbar-custom">
+ return (<Navbar fixedTop inverse id="jarrnav">
+ {this.getModel()}
<Navbar.Header>
<Navbar.Brand>
<a href="/">JARR</a>
@@ -42,19 +85,15 @@ JarrNavBar = React.createClass({
<Navbar.Toggle />
</Navbar.Header>
<Nav pullRight>
- <Navbar.Form pullLeft>
- <form action="/feed/bookmarklet" method="GET">
- <Input name="url" type="text"
- placeholder="Add a new feed" />
- <Button type="submit">Submit</Button>
- </form>
- </Navbar.Form>
{this.buttonFetch()}
- <NavDropdown title="Feed" id="feed-mgmt-dropdown">
- <MenuItem href="/feeds/inactives">Inactive</MenuItem>
- <MenuItem href="/articles/history">History</MenuItem>
- <MenuItem href="/feeds/">All</MenuItem>
- </NavDropdown>
+ <NavItem className="jarrnavitem"
+ onClick={this.openAddFeed} href="#">
+ <Glyphicon glyph="plus-sign" />Add a new feed
+ </NavItem>
+ <NavItem className="jarrnavitem"
+ onClick={this.openAddCategory} href="#">
+ <Glyphicon glyph="plus-sign" />Add a new category
+ </NavItem>
{this.buttonAdmin()}
<NavDropdown title={<Glyphicon glyph='user' />}
id="user-dropdown">
bgstack15