Add ability to filter by status and regex

This commit is contained in:
John F
2015-04-27 23:19:10 -04:00
parent 2d7bdda7d1
commit d8c471b03a
8 changed files with 104 additions and 16 deletions

1
.gitignore vendored
View File

@@ -1,5 +1,6 @@
.DS_Store
node_modules
npm-debug.log
bower_components
public/stylesheets
public/scripts

View File

@@ -31602,11 +31602,6 @@ var React = require('react');
var SearchBox = React.createClass({displayName: "SearchBox",
getInitialState: function() {
return null;
},
render: function() {
return (
@@ -31625,17 +31620,34 @@ module.exports = SearchBox;
},{"react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/filter-bar/StatusFilter.js":[function(require,module,exports){
var React = require('react');
var UIActions = require('../../actions/UIActions');
var TorrentStore = require('../../stores/TorrentStore');
var classnames = require('classnames');
var StatusFilter = React.createClass({displayName: "StatusFilter",
getInitialState: function() {
return {
activeFilter: TorrentStore.getFilterCriteria()
}
},
componentDidMount: function() {
TorrentStore.addFilterChangeListener(this._onFilterChange);
},
componentWillUnmount: function() {
TorrentStore.removeFilterChangeListener(this._onFilterChange);
},
render: function() {
var uniqueClass = 'status-filter__item--' + this.props.slug;
var itemClass = 'status-filter__item--' + this.props.slug;
var classNames = classnames({
'status-filter__item': true,
uniqueClass: true
itemClass: true,
'is-active': this.state.activeFilter === this.props.slug
});
return (
@@ -31645,6 +31657,12 @@ var StatusFilter = React.createClass({displayName: "StatusFilter",
_onClick: function(action) {
UIActions.filterTorrentList(this.props.slug);
},
_onFilterChange: function() {
this.setState({
activeFilter: TorrentStore.getFilterCriteria()
})
}
});
@@ -31679,7 +31697,7 @@ var StatusFilterList = React.createClass({displayName: "StatusFilterList",
module.exports = StatusFilterList;
},{"../../actions/UIActions":"/Users/John/Development/Flood/flood/source/scripts/actions/UIActions.js","classnames":"/Users/John/Development/Flood/flood/node_modules/classnames/index.js","react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/icons/Icon.js":[function(require,module,exports){
},{"../../actions/UIActions":"/Users/John/Development/Flood/flood/source/scripts/actions/UIActions.js","../../stores/TorrentStore":"/Users/John/Development/Flood/flood/source/scripts/stores/TorrentStore.js","classnames":"/Users/John/Development/Flood/flood/node_modules/classnames/index.js","react":"/Users/John/Development/Flood/flood/node_modules/react/react.js"}],"/Users/John/Development/Flood/flood/source/scripts/components/icons/Icon.js":[function(require,module,exports){
var React = require('react');
var Icon = React.createClass({displayName: "Icon",
@@ -32339,6 +32357,11 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
}
},
getFilterCriteria: function() {
return _filterStatus;
},
emitChange: function() {
this.emit(TorrentConstants.TORRENT_LIST_CHANGE);
},
@@ -32347,6 +32370,10 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
this.emit(UIConstants.FILTER_SORT_CHANGE);
},
emitFilterChange: function() {
this.emit(UIConstants.FILTER_STATUS_CHANGE);
},
addChangeListener: function(callback) {
this.on(TorrentConstants.TORRENT_LIST_CHANGE, callback);
},
@@ -32355,12 +32382,20 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
this.on(UIConstants.FILTER_SORT_CHANGE, callback);
},
addFilterChangeListener: function(callback) {
this.on(UIConstants.FILTER_STATUS_CHANGE, callback);
},
removeChangeListener: function(callback) {
this.removeListener(TorrentConstants.TORRENT_LIST_CHANGE, callback);
},
removeSortChangeListener: function(callback) {
this.removeListener(UIConstants.FILTER_SORT_CHANGE, callback);
},
removeFilterChangeListener: function(callback) {
this.removeListener(UIConstants.FILTER_STATUS_CHANGE, callback);
}
});
@@ -32395,6 +32430,7 @@ var dispatcherIndex = AppDispatcher.register(function(action) {
_filterStatus = action.status;
console.log(_filterStatus);
TorrentStore.emitChange();
TorrentStore.emitFilterChange();
break;
}

View File

@@ -721,7 +721,13 @@ body {
padding: 30px 0; }
.status-filter__item {
cursor: pointer;
padding: 3px 20px; }
padding: 3px 20px;
-webkit-transition: color 0.25s;
-o-transition: color 0.25s;
transition: color 0.25s; }
.status-filter__item.is-active {
color: #fff;
font-weight: 700; }
.progress-bar {
background: #28242a;

View File

@@ -5,6 +5,13 @@
&__item {
cursor: pointer;
padding: 3px 20px;
transition: color 0.25s;
&.is-active {
color: $status-filter--active--foreground;
font-weight: 700;
}
}
}

View File

@@ -23,6 +23,8 @@ $search-torrents--background: #161316;
$search-torrents--foreground: #625e66;
$search-torrents--placeholder: #252327;
$status-filter--active--foreground: #fff;
// torrents list
$torrent--primary--foreground: #aaa8ab;

View File

@@ -2,11 +2,6 @@ var React = require('react');
var SearchBox = React.createClass({
getInitialState: function() {
return null;
},
render: function() {
return (

View File

@@ -1,16 +1,33 @@
var React = require('react');
var UIActions = require('../../actions/UIActions');
var TorrentStore = require('../../stores/TorrentStore');
var classnames = require('classnames');
var StatusFilter = React.createClass({
getInitialState: function() {
return {
activeFilter: TorrentStore.getFilterCriteria()
}
},
componentDidMount: function() {
TorrentStore.addFilterChangeListener(this._onFilterChange);
},
componentWillUnmount: function() {
TorrentStore.removeFilterChangeListener(this._onFilterChange);
},
render: function() {
var uniqueClass = 'status-filter__item--' + this.props.slug;
var itemClass = 'status-filter__item--' + this.props.slug;
var classNames = classnames({
'status-filter__item': true,
uniqueClass: true
itemClass: true,
'is-active': this.state.activeFilter === this.props.slug
});
return (
@@ -20,6 +37,12 @@ var StatusFilter = React.createClass({
_onClick: function(action) {
UIActions.filterTorrentList(this.props.slug);
},
_onFilterChange: function() {
this.setState({
activeFilter: TorrentStore.getFilterCriteria()
})
}
});

View File

@@ -46,6 +46,11 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
}
},
getFilterCriteria: function() {
return _filterStatus;
},
emitChange: function() {
this.emit(TorrentConstants.TORRENT_LIST_CHANGE);
},
@@ -54,6 +59,10 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
this.emit(UIConstants.FILTER_SORT_CHANGE);
},
emitFilterChange: function() {
this.emit(UIConstants.FILTER_STATUS_CHANGE);
},
addChangeListener: function(callback) {
this.on(TorrentConstants.TORRENT_LIST_CHANGE, callback);
},
@@ -62,12 +71,20 @@ var TorrentStore = assign({}, EventEmitter.prototype, {
this.on(UIConstants.FILTER_SORT_CHANGE, callback);
},
addFilterChangeListener: function(callback) {
this.on(UIConstants.FILTER_STATUS_CHANGE, callback);
},
removeChangeListener: function(callback) {
this.removeListener(TorrentConstants.TORRENT_LIST_CHANGE, callback);
},
removeSortChangeListener: function(callback) {
this.removeListener(UIConstants.FILTER_SORT_CHANGE, callback);
},
removeFilterChangeListener: function(callback) {
this.removeListener(UIConstants.FILTER_STATUS_CHANGE, callback);
}
});
@@ -102,6 +119,7 @@ var dispatcherIndex = AppDispatcher.register(function(action) {
_filterStatus = action.status;
console.log(_filterStatus);
TorrentStore.emitChange();
TorrentStore.emitFilterChange();
break;
}