@@ -46,8 +58,20 @@ class PirateSearch extends Component {
render() {
return (
-
{this.props.name}
-
{this.searchTheBay(this)}}>Load shit
+
+ {this.searchTheBay()}}
+ style={btnStylesheet.submit}
+ focus={btnStylesheet.submit_hover}
+ hover={btnStylesheet.submit_hover}>
+
+ Search for torrents
+
+
+
+ { this.state.loading }
+
{this.state.response}
)
diff --git a/client/app/components/admin/Sidebar.jsx b/client/app/components/admin/Sidebar.jsx
index 5d001b0..7d48397 100644
--- a/client/app/components/admin/Sidebar.jsx
+++ b/client/app/components/admin/Sidebar.jsx
@@ -1,57 +1,213 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
+import Interactive from 'react-interactive';
+
+import sidebarCSS from '../styles/adminSidebar.jsx'
+
class SidebarComponent extends Component {
- generateListElements(index, item) {
- if (index == this.props.listItemSelected)
- return (
-
{item.name}
- )
- else
- return (
-
- )
- }
-
- displayRequestedElementsInfo() {
- if (this.props.requested_objects) {
- let requestedElement = this.props.requested_objects.map((item, index) => {
- return (
-
- { this.generateListElements(index, item) }
- {item.status}
- {item.requested_date}
-
- )
- })
-
- return (
-
-
-
- Name Status Date
-
-
- {requestedElement}
-
-
- )
+ constructor(props){
+ super(props)
+ // Constructor with states holding the search query and the element of reponse.
+ this.state = {
+ filterValue: '',
+ filterQuery: '',
+ requestItemsToBeDisplayed: [],
+ listItemSelected: '',
}
}
- render() {
- console.log('sidebar: ', this.props.requested_objects)
- return (
-
-
Hello from the sidebar:
- { this.displayRequestedElementsInfo() }
-
- );
- }
+ // Where we wait for api response to be delivered from parent through props
+ componentWillReceiveProps(props) {
+ this.state.listItemSelected = props.listItemSelected;
+ this.displayRequestedElementsInfo(props.requested_objects);
+ }
+
+ // Inputs a date and returns a text string that matches how long it was since
+ convertDateToDaysSince(date) {
+ var oneDay = 24*60*60*1000;
+ var firstDate = new Date(date);
+ var secondDate = new Date();
+
+ var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay));
+
+ switch (diffDays) {
+ case 0:
+ return 'Today';
+ case 1:
+ return '1 day ago'
+ default:
+ return diffDays + ' days ago'
+ }
+ }
+
+ // Called from our dropdown, receives a filter string and checks it with status field
+ // of our request objects.
+ filterItems(filterValue) {
+ let filteredRequestElements = this.props.requested_objects.map((item, index) => {
+ if (item.status === filterValue || filterValue === 'all')
+ return this.generateListElements(index, item);
+ })
+
+ this.setState({
+ requestItemsToBeDisplayed: filteredRequestElements,
+ filterValue: filterValue,
+ })
+ }
+
+
+ // Updates the internal state of the query filter and updates the list to only
+ // display names matching the query. This is real-time filtering.
+ updateFilterQuery(event) {
+ const query = event.target.value;
+
+ let filteredByQuery = this.props.requested_objects.map((item, index) => {
+ if (item.name.toLowerCase().indexOf(query.toLowerCase()) != -1)
+ return this.generateListElements(index, item);
+ })
+
+ this.setState({
+ requestItemsToBeDisplayed: filteredByQuery,
+ filterQuery: query,
+ });
+ }
+
+
+ generateFilterDropdown() {
+ return (
+
this.filterItems(event.target.value) } value={this.state.filterValue}>
+ All
+ Requested
+ Downloading
+ Downloaded
+
+ )
+ }
+
+ generateFilterSearchbar() {
+ return (
+
this.updateFilterQuery(event)}
+ value={this.state.filterQuery}/>
+ )
+ }
+
+ // A colored bar indicating the status of a item by color.
+ generateRequestIndicator(status) {
+ let statusColor;
+
+ switch (status) {
+ case 'requested':
+ // Yellow
+ statusColor = '#ffe14d';
+ break;
+ case 'downloading':
+ // Blue
+ statusColor = '#3fc3f3';
+ break;
+ case 'downloaded':
+ // Green
+ statusColor = '#6be682';
+ break;
+ default:
+ statusColor = 'grey';
+ }
+
+ const indicatorCSS = {
+ width: '100%',
+ height: '4px',
+ marginTop: '3px',
+ backgroundColor: statusColor,
+ }
+
+ return (
+
+ )
+ }
+
+
+ generateListElements(index, item) {
+ if (index == this.state.listItemSelected) {
+ return (
+
+
+
{item.name }
+
+ { this.convertDateToDaysSince(item.requested_date) }
+
+
+
Status: { item.status }
+
+
Matches found: 0
+ { this.generateRequestIndicator(item.status) }
+
+ )
+ }
+ else
+ return (
+
+
+
+ {item.name }
+
+ { this.convertDateToDaysSince(item.requested_date) }
+
+
+
+ )
+ }
+
+ // This is our main loader that gets called when we receive api response through props from parent
+ displayRequestedElementsInfo(requested_objects) {
+ let requestedElement = requested_objects.map((item, index) => {
+ if (['requested', 'downloading', 'downloaded'].indexOf(this.state.filterValue) != -1) {
+ if (item.status === this.state.filterValue){
+ return this.generateListElements(index, item);
+ }
+ }
+
+ else if (this.state.filterQuery !== '') {
+ if (item.name.toLowerCase().indexOf(this.state.filterQuery.toLowerCase()) != -1)
+ return this.generateListElements(index, item);
+ }
+
+ else
+ return this.generateListElements(index, item);
+ })
+
+ this.setState({
+ requestItemsToBeDisplayed: requestedElement,
+ })
+ }
+
+ render() {
+ let bodyCSS = sidebarCSS.body;
+ if (typeof InstallTrigger !== 'undefined')
+ bodyCSS.width = '-moz-min-content';
+
+ return (
+
+
Hello from the sidebar:
+ { this.generateFilterDropdown() }
+ { this.generateFilterSearchbar() }
+
+ { this.state.requestItemsToBeDisplayed }
+
+
+ );
+ }
}
export default SidebarComponent;
\ No newline at end of file
diff --git a/client/app/components/images/loading.jsx b/client/app/components/images/loading.jsx
new file mode 100644
index 0000000..455e39c
--- /dev/null
+++ b/client/app/components/images/loading.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function Loading() {
+ return (
+
+
+ )
+}
+
+export default Loading;
\ No newline at end of file
diff --git a/client/app/components/styles/adminComponent.jsx b/client/app/components/styles/adminComponent.jsx
new file mode 100644
index 0000000..9e131aa
--- /dev/null
+++ b/client/app/components/styles/adminComponent.jsx
@@ -0,0 +1,8 @@
+export default {
+ sidebar: {
+ float: 'left',
+ },
+ selectedObjectPanel: {
+ float: 'left',
+ }
+}
\ No newline at end of file
diff --git a/client/app/components/styles/adminRequestInfo.jsx b/client/app/components/styles/adminRequestInfo.jsx
new file mode 100644
index 0000000..0d13af2
--- /dev/null
+++ b/client/app/components/styles/adminRequestInfo.jsx
@@ -0,0 +1,11 @@
+export default {
+ wrapper: {
+ width: '100%',
+ },
+ headerWrapper: {
+ width: '100%',
+ },
+ poster: {
+ minHeight: '450px',
+ },
+}
\ No newline at end of file
diff --git a/client/app/components/styles/adminSidebar.jsx b/client/app/components/styles/adminSidebar.jsx
new file mode 100644
index 0000000..c10fe49
--- /dev/null
+++ b/client/app/components/styles/adminSidebar.jsx
@@ -0,0 +1,50 @@
+export default {
+ body: {
+ backgroundColor: 'white',
+ width: 'min-content',
+ },
+
+ parentElement: {
+ display: 'inline-block',
+ width: '300px',
+ border: '1px solid black',
+ borderRadius: '2px',
+ padding: '4px',
+ margin: '4px',
+ marginLeft: '4px',
+ backgroundColor: 'white',
+ },
+
+ parentElement_hover: {
+ marginLeft: '10px',
+ },
+
+ parentElement_active: {
+ textDecoration: 'none',
+ },
+
+ parentElement_selected: {
+ display: 'inline-block',
+ width: '300px',
+ border: '1px solid black',
+ borderRadius: '2px',
+ padding: '4px',
+ margin: '4px 0px 4px 4px',
+ marginLeft: '10px',
+ backgroundColor: 'white',
+ },
+
+ title: {
+ maxWidth: '70%',
+ display: 'inline-flex',
+ },
+
+ link: {
+ color: 'black',
+ textDecoration: 'none',
+ },
+
+ rightContainer: {
+ float: 'right',
+ },
+}
\ No newline at end of file
diff --git a/client/app/components/styles/buttons.jsx b/client/app/components/styles/buttons.jsx
new file mode 100644
index 0000000..a27fdba
--- /dev/null
+++ b/client/app/components/styles/buttons.jsx
@@ -0,0 +1,80 @@
+
+export default {
+
+ submit: {
+ color: '#e9a131',
+ marginRight: '10px',
+ backgroundColor: 'white',
+ border: '#e9a131 2px solid',
+ borderColor: '#e9a131',
+ borderRadius: '4px',
+ textAlign: 'center',
+ padding: '10px',
+ minWidth: '100px',
+ float: 'left',
+ fontSize: '13px',
+ fontWeight: '800',
+ cursor: 'pointer',
+ },
+
+ submit_hover: {
+ backgroundColor: '#e9a131',
+ color: 'white',
+ },
+
+ info: {
+ color: '#00d17c',
+ marginRight: '10px',
+ backgroundColor: 'white',
+ border: '#00d17c 2px solid',
+ borderRadius: '4px',
+ textAlign: 'center',
+ padding: '10px',
+ minWidth: '100px',
+ float: 'left',
+ fontSize: '13px',
+ fontWeight: '800',
+ cursor: 'pointer',
+ },
+
+ info_hover: {
+ backgroundColor: '#00d17c',
+ color: 'white',
+ },
+
+ edit: {
+ color: '#4a95da',
+ marginRight: '10px',
+ backgroundColor: 'white',
+ border: '#4a95da 2px solid',
+ borderRadius: '4px',
+ textAlign: 'center',
+ padding: '10px',
+ minWidth: '100px',
+ float: 'left',
+ fontSize: '13px',
+ fontWeight: '800',
+ cursor: 'pointer',
+ },
+
+ edit_small: {
+ color: '#4a95da',
+ marginRight: '10px',
+ backgroundColor: 'white',
+ border: '#4a95da 2px solid',
+ borderRadius: '4px',
+ textAlign: 'center',
+ padding: '4px',
+ minWidth: '50px',
+ float: 'left',
+ fontSize: '13px',
+ fontWeight: '800',
+ cursor: 'pointer',
+ },
+
+ edit_hover: {
+ backgroundColor: '#4a95da',
+ color: 'white',
+ },
+
+}
\ No newline at end of file
diff --git a/client/app/components/styles/movieObjectStyle.jsx b/client/app/components/styles/movieObjectStyle.jsx
deleted file mode 100644
index 627d7dd..0000000
--- a/client/app/components/styles/movieObjectStyle.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-
-export default {
- resultItem: {
- maxWidth: '95%',
- margin: '0 auto',
- minHeight: '230px'
- },
-
- movie_content: {
- marginLeft: '15px'
- },
-
- resultTitleLarge: {
- color: 'black',
- fontSize: '2em',
- },
-
- resultTitleSmall: {
- color: 'black',
- fontSize: '22px',
- },
-
- yearRatingLarge: {
- fontSize: '0.8em'
- },
-
- resultPoster: {
- float: 'left',
- zIndex: '3',
- position: 'relative',
- marginRight: '30px'
- },
-
- background: {
- width: '100%'
- },
-
- yearRatingSmall: {
- marginTop: '5px',
- fontSize: '0.8em'
- },
-
- resultPosterImg: {
- border: '2px none',
- borderRadius: '2px',
- width: '150px'
- },
-
- cornerRibbon: {
- position: 'absolute',
- width: '450px',
- },
-
- summary: {
- fontSize: '15px',
- },
-
- buttons: {
- paddingTop: '20px'
- },
-
- requestButton: {
- color: '#e9a131',
- marginRight: '10px',
- background: 'white',
- border: '#e9a131 2px solid',
- borderRadius: '4px',
- textAlign: 'center',
- padding: '10px',
- minWidth: '100px',
- float: 'left',
- fontSize: '13px',
- fontWeight: '800',
- cursor: 'pointer'
- },
-
- tmdbButton: {
- color: '#00d17c',
- marginRight: '10px',
- background: 'white',
- border: '#00d17c 2px solid',
- borderRadius: '4px',
- textAlign: 'center',
- padding: '10px',
- minWidth: '100px',
- float: 'left',
- fontSize: '13px',
- fontWeight: '800',
- cursor: 'pointer'
- },
-
- row: {
- width: '100%'
- },
-
- itemDivider: {
- width: '90%',
- borderBottom: '1px solid grey',
- margin: '2rem auto'
- }
-}
\ No newline at end of file
diff --git a/client/app/components/styles/searchObject.jsx b/client/app/components/styles/searchObject.jsx
new file mode 100644
index 0000000..4d4ed72
--- /dev/null
+++ b/client/app/components/styles/searchObject.jsx
@@ -0,0 +1,58 @@
+
+export default {
+ container: {
+ maxWidth: '95%',
+ margin: '0 auto',
+ minHeight: '230px'
+ },
+
+ title_large: {
+ color: 'black',
+ fontSize: '2em',
+ },
+
+ title_small: {
+ color: 'black',
+ fontSize: '22px',
+ },
+
+ stats_large: {
+ fontSize: '0.8em'
+ },
+
+ stats_small: {
+ marginTop: '5px',
+ fontSize: '0.8em'
+ },
+
+ posterContainer: {
+ float: 'left',
+ zIndex: '3',
+ position: 'relative',
+ marginRight: '30px'
+ },
+
+ posterImage: {
+ border: '2px none',
+ borderRadius: '2px',
+ width: '150px'
+ },
+
+ backgroundImage: {
+ width: '100%'
+ },
+
+ summary: {
+ fontSize: '15px',
+ },
+
+ dividerRow: {
+ width: '100%'
+ },
+
+ itemDivider: {
+ width: '90%',
+ borderBottom: '1px solid grey',
+ margin: '2rem auto'
+ }
+}
\ No newline at end of file
diff --git a/client/app/components/styles/searchRequestStyle.jsx b/client/app/components/styles/searchRequestStyle.jsx
index 45d5cff..17b5b11 100644
--- a/client/app/components/styles/searchRequestStyle.jsx
+++ b/client/app/components/styles/searchRequestStyle.jsx
@@ -11,12 +11,13 @@ export default {
backgroundLargeHeader: {
width: '100%',
minHeight: '400px',
- backgroundColor: '#011c23',
+ backgroundColor: 'rgb(1, 28, 35)',
+ // backgroundImage: 'radial-gradient(circle, #004c67 0, #005771 120%)',
zIndex: 1,
marginBottom: '-100px'
},
- backgroundSmallHeader: {
+ backgroundSmallHeader: {
width: '100%',
minHeight: '300px',
backgroundColor: '#011c23',
@@ -31,7 +32,7 @@ export default {
backgroundColor: 'white',
position: 'relative',
zIndex: '10',
- boxShadow: '0 4px 2px black'
+ boxShadow: '0 1px 2px grey',
},
pageTitle: {
@@ -43,7 +44,7 @@ export default {
pageTitleLargeSpan: {
color: 'white',
- fontSize: '3em',
+ fontSize: '4em',
marginTop: '4vh',
marginBottom: '6vh'
},
@@ -133,70 +134,4 @@ export default {
color: 'black',
fontSize: '1.4em',
},
-
- row: {
- width: '100%'
- },
-
- itemDivider: {
- width: '90%',
- borderBottom: '1px solid grey',
- margin: '1rem auto'
- },
-
-
- pageNavigationBar: {
- width: '100%',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
- },
-
- pageNavigationButton: {
- margin: '0 auto',
- },
-
- hvrUnderlineFromCenter: {
- color: 'white',
- fontSize: '1em',
- paddingTop: '12px',
- marginBottom: '12px',
- marginLeft: '10px',
- cursor: 'pointer',
- display: 'inline-block',
- verticalAlign: 'middle',
- WebkitTransform: 'perspective(1px) translateZ(0)',
- transform: 'perspective(1px) translateZ(0)',
- boxShadow: '0 0 1px transparent',
- position: 'relative',
- overflow: 'hidden',
- ':before': {
- content: "",
- position: 'absolute',
- zIndex: '-1',
- left: '50%',
- right: '50%',
- bottom: '0',
- background: '#00d17c',
- height: '2px',
- WebkitTransitionProperty: 'left, right',
- transitionProperty: 'left, right',
- WebkitTransitionDuration: '0.3s',
- transitionDuration: '0.3s',
- WebkitTransitionTimingFunction: 'ease-out',
- transitionTimingFunction: 'ease-out'
- },
- ':hover:before': {
- left: 0,
- right: 0
- },
- 'focus:before': {
- left: 0,
- right: 0
- },
- 'active:before': {
- left: 0,
- right: 0
- }
- }
}
\ No newline at end of file
diff --git a/client/app/index.html b/client/app/index.html
index 3ab7f3f..3ec9c02 100644
--- a/client/app/index.html
+++ b/client/app/index.html
@@ -4,7 +4,7 @@
-
+
seasoned Shows
diff --git a/client/package.json b/client/package.json
index 7d36795..f166ff8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
"react-burger-menu": "^2.1.6",
"react-dom": "^15.5.4",
"react-infinite-scroller": "^1.0.15",
+ "react-interactive": "^0.8.1",
"react-notify-toast": "^0.3.2",
"react-redux": "^5.0.6",
"react-responsive": "^1.3.4",
diff --git a/client/webpack.common.js b/client/webpack.common.js
index 114c775..0fd9a5f 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -21,8 +21,7 @@ module.exports = {
],
module: {
loaders: [
- { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
- { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
+ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ },
]
},
- 
- {this.title}
- 
-