We re-wrote most off the look and feel of this page. No we get a header that is generated with all the info for a requested element. This has a indicator generated by generateStatusIndicator, showing if the element is requested, downloading or downloaded. Then we have a function for generating the type icon, that is movie/show that is displayed in the header. The summary for a movie might be long so if it is over 180 chars than it is cut and a show more button is displayed. After the info on the item we import PirateSearch that takes a name input and displays a search result for that query in a table view.

2018-01-09 16:19:43 +01:00
parent 33cb6f5f09
commit 279b004aad
1 changed files with 128 additions and 37 deletions
--- 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 (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
+         )
+      else if (type === 'movie')
+         return (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
+         )
+      else
+         return (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
+         )
+   }
+
+   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 (
+            <div>
+               <span><b>Matched: </b> {String(info.matchedInPlex)}</span> <br/>
+               <span><b>Rating: </b> {info.rating}</span> <br/>
+               <span><b>Popularity: </b> {info.popularity}</span> <br/>
+               {
+                  (summary.length > 180 && this.state.expandedSummary === false) ?
+                     <span><b>Summary: </b> { summary_short }<span onClick = {() => this.toggleSummmaryLength()}>... <span style={{color: 'blue', cursor: 'pointer'}}>Show more</span></span></span>
+                  :
+                     <span><b>Summary: </b> { summary }<span onClick = {() => this.toggleSummmaryLength()}><span style={{color: 'blue', cursor: 'pointer'}}> Show less</span></span></span>
+
+               }
+            </div>
+         )
+      } else {
+         return <span>Loading...</span>
+      }
+   }
+
 	requested_by_user(request_user) {
 		if (request_user === 'NULL')
 			return undefined

 		return (
-			<span>Requested by: {request_user}</span>
+			<span><b>Requested by:</b> {request_user}</span>
 		)
 	}

+   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 (
-         <div style={requestInfoCSS.wrapper}>
-            <div style={requestInfoCSS.headerWrapper}>
-               <span>{request.name} </span>
-               <span>{request.year}</span>
-            </div>
+         requestInfoCSS.info.background = this.generateStatusIndicator(request.status);

-            <div style={requestInfoCSS.info}>
-               <span>type: {request.type}</span><br />
+         return (
+            <div style={requestInfoCSS.wrapper}>
               
-               {this.generateStatusDropdown()}<br />
-               
-               <span>status: {request.status}</span><br />
-               <span>ip: {request.ip}</span><br />
-               <span>user_agent: {this.userAgent(request.user_agent)}</span><br />
-               <span>request_date: {request.requested_date}</span><br />
-               { this.requested_by_user(request.requested_by) }
+               <div style={requestInfoCSS.stick}>
+                  <span style={requestInfoCSS.title}> {request.name}  {request.year}</span>
+                  <span style={{marginLeft: '2em'}}>
+                     <span style={style.type_icon}>{this.generateTypeIcon(request.type)}</span>
+                     {/*<span style={style.type_text}>{request.type.capitalize()}</span> <br />*/}
+                  </span>
+               </div>
+              
+               <div style={requestInfoCSS.info}>
+                  <div style={requestInfoCSS.info_poster}>
+                     <img src={'https://image.tmdb.org/t/p/w185' + request.poster_path} style={requestInfoCSS.image} alt='Movie poster image'></img>
+                  </div>
+
+                  <div style={requestInfoCSS.info_request}>
+                     <h3 style={requestInfoCSS.info_request_header}>Request info</h3>
+                     
+                     <span><b>status:</b>{ request.status }</span><br />
+                     <span><b>ip:</b>{ request.ip }</span><br />
+                     <span><b>user_agent:</b>{ this.userAgent(request.user_agent) }</span><br />
+                     <span><b>request_date:</b>{ request.requested_date}</span><br />
+                     { this.requested_by_user(request.requested_by) }<br />
+                     { this.generateStatusDropdown() }<br />
+                  </div>
+
+                  <div style={requestInfoCSS.info_movie}>
+                     <h3 style={requestInfoCSS.info_movie}>Movie info</h3>
+                     
+                     { this.generateSummary() }
+                  </div>
+               </div>
+
+              <PirateSearch style={requestInfoCSS.search} name={request.name} />
+
            </div>
-
-            <div>
-               <Interactive 
-                  as='button'
-                  onClick={() => {}}
-                  style={buttonsCSS.edit}
-                  focus={buttonsCSS.edit_hover}
-                  hover={buttonsCSS.edit_hover}>
-
-                 <span>Show info</span>
-               </Interactive>
-
-               <PirateSearch name={request.name} />
-            </div>
-         </div>
-      	)
+         )
      }
   }