diff --git a/client/app/components/admin/AdminRequestInfo.jsx b/client/app/components/admin/AdminRequestInfo.jsx index 2f51113..c483fc3 100644 --- a/client/app/components/admin/AdminRequestInfo.jsx +++ b/client/app/components/admin/AdminRequestInfo.jsx @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import { fetchJSON } from '../http.jsx'; import PirateSearch from './PirateSearch.jsx' +import InfoButton from '../buttons/InfoButton.jsx'; // Stylesheets import requestInfoCSS from '../styles/adminRequestInfo.jsx' @@ -11,6 +12,12 @@ import buttonsCSS from '../styles/buttons.jsx'; // Interactive button import Interactive from 'react-interactive'; + +String.prototype.capitalize = function() { + return this.charAt(0).toUpperCase() + this.slice(1); +} + + class AdminRequestInfo extends Component { constructor() { @@ -18,6 +25,8 @@ class AdminRequestInfo extends Component { this.state = { statusValue: '', + movieInfo: undefined, + expandedSummary: false, } this.requestInfo = ''; @@ -26,12 +35,14 @@ class AdminRequestInfo extends Component { componentWillReceiveProps(props) { this.requestInfo = props.selectedRequest; this.state.statusValue = this.requestInfo.status; + this.state.expandedSummary = false; + this.fetchIteminfo() } userAgent(agent) { if (agent) { try { - return agent.split(" ")[1].replace(/[\(\;]/g, ''); + return agent.split(" ")[1].replace(/[\(\;]/g, ''); } catch(e) { return agent; @@ -62,60 +73,140 @@ class AdminRequestInfo extends Component { fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/request/' + itemID, 'PUT', apiData) .then((response) => { console.log('Response, updateRequestStatus: ', response) - }) - - this.setState({ - statusValue: eventValue + this.props.updateHandler() }) } + generateStatusIndicator(status) { + switch (status) { + case 'requested': + // Yellow + return 'linear-gradient(to right, rgb(63, 195, 243) 0, rgb(63, 195, 243) 10px, #fff 4px, #fff 100%) no-repeat' + case 'downloading': + // Blue + return 'linear-gradient(to right, rgb(255, 225, 77) 0, rgb(255, 225, 77) 10px, #fff 4px, #fff 100%) no-repeat' + case 'downloaded': + // Green + return 'linear-gradient(to right, #39aa56 0, #39aa56 10px, #fff 4px, #fff 100%) no-repeat' + default: + return 'linear-gradient(to right, grey 0, grey 10px, #fff 4px, #fff 100%) no-repeat' + } + } + + generateTypeIcon(type) { + if (type === 'show') + return ( + + ) + else if (type === 'movie') + return ( + + ) + else + return ( + + ) + } + + toggleSummmaryLength() { + this.setState({ + expandedSummary: !this.state.expandedSummary + }) + } + + generateSummary() { + // { this.state.movieInfo != undefined ? this.state.movieInfo.summary : 'Loading...' } + const info = this.state.movieInfo; + if (info !== undefined) { + const summary = this.state.movieInfo.summary + const summary_short = summary.slice(0, 180); + + return ( +
+ Matched: {String(info.matchedInPlex)}
+ Rating: {info.rating}
+ Popularity: {info.popularity}
+ { + (summary.length > 180 && this.state.expandedSummary === false) ? + Summary: { summary_short } this.toggleSummmaryLength()}>... Show more + : + Summary: { summary } this.toggleSummmaryLength()}> Show less + + } +
+ ) + } else { + return Loading... + } + } + requested_by_user(request_user) { if (request_user === 'NULL') return undefined return ( - Requested by: {request_user} + Requested by: {request_user} ) } + fetchIteminfo() { + const itemID = this.requestInfo.id; + const type = this.requestInfo.type; + + fetchJSON('https://apollo.kevinmidboe.com/api/v1/tmdb/' + itemID +'&type='+type, 'GET') + .then((response) => { + console.log('Response, getInfo:', response) + this.setState({ + movieInfo: response + }); + console.log(this.state.movieInfo) + }) + } + displayInfo() { const request = this.props.selectedRequest; if (request) { - return ( -
-
- {request.name} - {request.year} -
+ requestInfoCSS.info.background = this.generateStatusIndicator(request.status); -
- type: {request.type}
+ return ( +
- {this.generateStatusDropdown()}
- - status: {request.status}
- ip: {request.ip}
- user_agent: {this.userAgent(request.user_agent)}
- request_date: {request.requested_date}
- { this.requested_by_user(request.requested_by) } +
+ {request.name} {request.year} + + {this.generateTypeIcon(request.type)} + {/*{request.type.capitalize()}
*/} +
+
+ +
+
+ Movie poster image +
+ +
+

Request info

+ + status:{ request.status }
+ ip:{ request.ip }
+ user_agent:{ this.userAgent(request.user_agent) }
+ request_date:{ request.requested_date}
+ { this.requested_by_user(request.requested_by) }
+ { this.generateStatusDropdown() }
+
+ +
+

Movie info

+ + { this.generateSummary() } +
+
+ + +
- -
- {}} - style={buttonsCSS.edit} - focus={buttonsCSS.edit_hover} - hover={buttonsCSS.edit_hover}> - - Show info - - - -
-
- ) + ) } }