diff options
author | François Schmidts <francois.schmidts@gmail.com> | 2016-01-30 23:17:03 +0100 |
---|---|---|
committer | François Schmidts <francois.schmidts@gmail.com> | 2016-01-30 23:20:27 +0100 |
commit | 678af2747d6414379e81ee6856c7ec2f3cd5a890 (patch) | |
tree | c5d92a631e1d4d3a7f2880512a7555ccdd39b71a /src/web/js/components | |
parent | wip redoing feed panel (diff) | |
download | newspipe-678af2747d6414379e81ee6856c7ec2f3cd5a890.tar.gz newspipe-678af2747d6414379e81ee6856c7ec2f3cd5a890.tar.bz2 newspipe-678af2747d6414379e81ee6856c7ec2f3cd5a890.zip |
registering modifications on feeds / categories
Diffstat (limited to 'src/web/js/components')
-rw-r--r-- | src/web/js/components/RightPanel.react.js | 156 |
1 files changed, 105 insertions, 51 deletions
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js index 2e2aac3e..fda7c976 100644 --- a/src/web/js/components/RightPanel.react.js +++ b/src/web/js/components/RightPanel.react.js @@ -4,11 +4,15 @@ var Glyphicon = require('react-bootstrap/Glyphicon'); var Button = require('react-bootstrap/Button'); var ButtonGroup = require('react-bootstrap/ButtonGroup'); +var RightPanelActions = require('../actions/RightPanelActions'); var RightPanelStore = require('../stores/RightPanelStore'); var JarrTime = require('./time.react'); var PanelMixin = { propTypes: {obj: React.PropTypes.object.isRequired}, + getInitialState: function() { + return {edit_mode: false, obj: this.props.obj}; + }, getHeader: function() { var icon = null; if(this.props.obj.icon_url){ @@ -46,7 +50,9 @@ var PanelMixin = { var items = []; var key; if(!this.state.edit_mode) { - this.fields.map(function(field) { + this.fields.filter(function(field) { + return field.type != 'ignore'; + }).map(function(field) { key = this.getKey('dt', field.key); items.push(<dt key={key}>{field.title}</dt>); key = this.getKey('dd', field.key); @@ -67,24 +73,30 @@ var PanelMixin = { } }.bind(this)); } else { - this.fields.map(function(field) { + items.push(<dd key={this.getKey('dd', 'submit')}> + <button className="btn btn-default" + onClick={this.saveObj}> + Submit + </button> + </dd>); + this.fields.filter(function(field) { + return field.type != 'ignore'; + }).map(function(field) { key = this.getKey('dd', field.key); items.push(<dt key={key}>{field.title}</dt>); key = this.getKey('dt', field.key); + var input = null; if(field.type == 'string' || field.type == 'link') { - items.push(<dd key={key}><input type="text" - defaultValue={this.props.obj[field.key]} /> - </dd>); + input = (<input type="text" name={field.key} + onChange={this.saveField} + defaultValue={this.props.obj[field.key]} />); } else if (field.type == 'bool') { - items.push(<dd key={key}><input type="checkbox" - defaultChecked={this.props.obj[field.key]} /></dd>); + input = (<input type="checkbox" name={field.key} + onChange={this.saveField} + defaultChecked={this.props.obj[field.key]} />); } + items.push(<dd key={key}>{input}</dd>); }.bind(this)); - items.push(<dd key={this.getKey('dd', 'submit')}> - <button className="btn btn-default"> - Submit - </button> - </dd>); } return (<dl className="dl-horizontal">{items}</dl>); }, @@ -99,15 +111,39 @@ var PanelMixin = { this.setState({edit_mode: !this.state.edit_mode}); }, onClickRemove: function() { + RightPanelActions.delObj(this.props.obj.id, this.obj_type); + }, + saveField: function(evnt) { + var obj = this.state.obj; + for(var i in this.fields) { + if(evnt.target.name == this.fields[i].key) { + if(this.fields[i].type == 'bool') { + obj[evnt.target.name] = evnt.target.checked; + } else { + obj[evnt.target.name] = evnt.target.value; + } + break; + } + } + this.setState({obj: obj}); + }, + saveObj: function() { + var to_push = {}; + this.fields.map(function(field) { + to_push[field.key] = this.state.obj[field.key]; + }.bind(this)); + this.setState({edit_mode: false}, function() { + RightPanelActions.putObj(this.props.obj.id, this.obj_type, to_push); + }.bind(this)); }, }; var Article = React.createClass({ mixins: [PanelMixin], - getInitialState: function() {return {edit_mode: false};}, - fields: [], isEditable: function() {return false;}, isRemovable: function() {return true;}, + fields: [], + obj_type: 'article', getTitle: function() {return this.props.obj.title;}, getBody: function() { return (<div className="panel-body" dangerouslySetInnerHTML={ @@ -117,16 +153,15 @@ var Article = React.createClass({ var Feed = React.createClass({ mixins: [PanelMixin], - getInitialState: function() { - return {edit_mode: false, filters: this.props.obj.filters}; - }, isEditable: function() {return true;}, isRemovable: function() {return true;}, + obj_type: 'feed', fields: [{'title': 'Feed title', 'type': 'string', 'key': 'title'}, {'title': 'Description', 'type': 'string', 'key': 'description'}, {'title': 'Feed link', 'type': 'link', 'key': 'link'}, {'title': 'Site link', 'type': 'link', 'key': 'site_link'}, {'title': 'Enabled', 'type': 'bool', 'key': 'enabled'}, + {'title': 'Filters', 'type': 'ignore', 'key': 'filters'}, ], getTitle: function() {return this.props.obj.title;}, getFilterRow: function(i, filter) { @@ -138,30 +173,56 @@ var Feed = React.createClass({ <Glyphicon glyph='minus' /> </button> </span> + <select name="action on" className="form-control" + data-index={i} onChange={this.saveFilterChange} + defaultValue={filter['action on']}> + <option value="match">match</option> + <option value="no match">no match</option> + </select> + <input name="pattern" type="text" className="form-control" + data-index={i} onChange={this.saveFilterChange} + defaultValue={filter.pattern} /> <select name="type" className="form-control" + data-index={i} onChange={this.saveFilterChange} defaultValue={filter.type}> <option value='simple match'>simple match</option> <option value='regex'>regex</option> </select> - <input type="text" className="form-control" - name="pattern" defaultValue={filter.pattern} /> - <select name="action_on" className="form-control" - defaultValue={filter.action_on}> - <option value="match">match</option> - <option value="no match">no match</option> - </select> <select name="action" className="form-control" + data-index={i} onChange={this.saveFilterChange} defaultValue={filter.action}> <option value="mark as read">mark as read</option> <option value="mark as favorite">mark as favorite</option> </select> </dd>); }, - getBody: function() { - var filter_rows = []; - for(var i in this.state.filters) { - filter_rows.push(this.getFilterRow(i, this.state.filters[i])); + getFilterRows: function() { + var rows = []; + if(this.state.edit_mode) { + for(var i in this.state.obj.filters) { + rows.push(this.getFilterRow(i, this.state.obj.filters[i])); + } + return (<dl className="dl-horizontal"> + <dt>Filters</dt> + <dd> + <button className="btn btn-default" + type="button" onClick={this.addFilterRow}> + <Glyphicon glyph='plus' /> + </button> + </dd> + {rows} + </dl>); } + rows = []; + rows.push(<dt key={'d-title'}>Filters</dt>); + for(var i in this.state.obj.filters) { + rows.push(<dd key={'d' + i}> + When {this.state.obj.filters[i]['action on']} on "{this.state.obj.filters[i].pattern}" ({this.state.obj.filters[i].type}) => {this.state.obj.filters[i].action} + </dd>); + } + return <dl className="dl-horizontal">{rows}</dl>; + }, + getBody: function() { return (<div className="panel-body"> <dl className="dl-horizontal"> <dt>Created on</dt> @@ -174,44 +235,37 @@ var Feed = React.createClass({ </dd> </dl> {this.getCore()} - <dl className="dl-horizontal"> - <form> - <dt>Filters</dt> - <dd> - <button className="btn btn-default" - type="button" onClick={this.addFilterRow}> - <Glyphicon glyph='plus' /> - </button> - <button className="btn btn-default">Submit - </button> - </dd> - {filter_rows} - </form> - </dl> + {this.getFilterRows()} </div> ); }, addFilterRow: function() { - var filters = this.state.filters; - filters.push({action: null, action_on: null, - type: null, pattern: null}); - this.setState({filters: filters}); + var obj = this.state.obj; + obj.filters.push({action: "mark as read", 'action on': "match", + type: "simple match", pattern: ""}); + this.setState({obj: obj}); }, removeFilterRow: function(evnt) { - var filters = this.state.filters; - delete filters[evnt.target.getAttribute('data-index')]; - this.setState({filters: filters}); + var obj = this.state.obj; + delete obj.filters[evnt.target.getAttribute('data-index')]; + this.setState({obj: obj}); + }, + saveFilterChange: function(evnt) { + var index = evnt.target.getAttribute('data-index'); + var obj = this.state.obj; + obj.filters[index][evnt.target.name] = evnt.target.value; + this.setState({obj: obj}); }, }); var Category = React.createClass({ mixins: [PanelMixin], - getInitialState: function() {return {edit_mode: false};}, isEditable: function() { if(this.props.obj.id != 0) {return true;} else {return false;} }, isRemovable: function() {return this.isEditable();}, + obj_type: 'category', fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}], getTitle: function() {return this.props.obj.name;}, getBody: function() { @@ -299,7 +353,7 @@ var RightPanel = React.createClass({ RightPanelStore.removeChangeListener(this._onChange); }, _onChange: function() { - this.setState(RightPanelStore._datas); + this.setState(RightPanelStore.getAll()); }, }); |