KevinMidboe/seasonedShows
1
0
Fork 0
Code Issues 20 Pull Requests 2 Packages Projects Releases 8 Wiki Activity

Merge pull request #43 from KevinMidboe/client/admin_page

Browse Source 
Client/admin page
This commit is contained in:
Kevin
2017-10-21 00:16:01 +02:00
committed by GitHub
parent 5bd1041deb 5aaf0ddf84
commit 4cdf368d2c
11 changed files with 234 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/app/Root.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { Component } from 'react';
import { HashRouter as Router, Route, Switch, IndexRoute } from 'react-router-dom';
import SearchRequest from './components/SearchRequest.jsx';
import AdminComponent from './components/admin/Admin.jsx';
class Root extends Component {
// We need to provide a list of routes
// for our app, and in this case we are
// doing so from a Root component
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={SearchRequest} />
<Route path='/admin/:search' component={AdminComponent} />
<Route path='/admin' component={AdminComponent} />
</Switch>
</Router>
);
}
}
export default Root;

35
client/app/components/Admin.jsx
View File

@@ -1,35 +0,0 @@
/*
./app/components/App.jsx
<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
*/
import React from 'react';
import { Link } from 'react-router-dom'
import FetchData from './FetchData.js';
import ListStrays from './ListStrays.jsx';
import FetchRequested from './FetchRequested.jsx';
import LoginForm from './LoginForm/LoginForm.jsx';
import { Provider } from 'react-redux';
import store from './redux/store.jsx';
import { getCookie } from './Cookie.jsx';
function getLoginStatus() {
const logged_in = getCookie('logged_in');
if (logged_in) {
return <FetchRequested />
}
return <LoginForm />
}
const Admin = () => (
<Provider store={store}>
{ getLoginStatus() }
</Provider>
)
export default Admin

12
client/app/components/App.jsx
View File

@@ -1,12 +0,0 @@
import React, { Component } from "react";
import Header from './Header.jsx';
import Main from './Main.jsx';
const App = () => (
<div>
<Header />
<Main />
</div>
)
export default App

21
client/app/components/Main.jsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { HashRouter as Router, Route, Switch} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import SearchRequest from './SearchRequest.jsx';
import Admin from './Admin.jsx';
import NotFound from './NotFound.js';
export const history = createBrowserHistory();
const Main = () => (
<Router>
<Switch>
<Route exact path='/' component={SearchRequest} />
<Route path='/admin' component={Admin} />
<Route component={NotFound} />
</Switch>
</Router>
)
export default Main

2
client/app/components/SearchRequest.jsx
View File

@@ -49,7 +49,7 @@ class SearchRequest extends React.Component {
}
componentDidMount(){
componentWillMount(){
var that = this;
// this.setState({responseMovieList: null})
this.resetPageNumber();

79
client/app/components/admin/Admin.jsx Normal file
View File

@@ -0,0 +1,79 @@
/*
./app/components/App.jsx
<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
*/
import React from 'react';
import { HashRouter as Router, Route, Switch, IndexRoute } from 'react-router-dom';
import LoginForm from './LoginForm/LoginForm.jsx';
import { Provider } from 'react-redux';
import store from '../redux/store.jsx';
import { getCookie } from '../Cookie.jsx';
import { fetchJSON } from '../http.jsx';
import Sidebar from './Sidebar.jsx';
import AdminRequestInfo from './AdminRequestInfo.jsx';
class AdminComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
requested_objects: '',
}
}
componentWillMount() {
fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/requests/all', 'GET')
.then(result => {
this.setState({
requested_objects: result.requestedItems
})
})
}
verifyLoggedIn() {
let adminComponentStyle = {
sidebar: {
float: 'left',
},
selectedObjectPanel: {
float: 'left',
}
}
const logged_in = getCookie('logged_in');
if (!logged_in) {
return <LoginForm />
}
let display = undefined
if (this.props.match.params.search && this.state.requested_objects !== '') {
display = this.state.requested_objects[this.props.match.params.search]
}
return (
<div>
<div style={adminComponentStyle.sidebar}>
<Sidebar requested_objects={this.state.requested_objects} style={adminComponentStyle.sidebar}/>
</div>
<div style={adminComponentStyle.selectedObjectPanel}>
<AdminRequestInfo display={display} />
</div>
</div>
)
}
render() {
return (
<Provider store={store}>
{ this.verifyLoggedIn() }
</Provider>
)
}
}
export default AdminComponent;

69
client/app/components/admin/AdminRequestInfo.jsx Normal file
View File

@@ -0,0 +1,69 @@
import React, { Component } from 'react';
class AdminRequestInfo extends Component {
constructor() {
super();
}
userAgent(agent) {
if (agent) {
try {
return agent.split(" ")[1].replace(/[\(\;]/g, '');
}
catch(e) {
return agent;
}
}
return '';
}
displayInfo() {
let adminIndexStyle = {
wrapper: {
width: '100%',
},
headerWrapper: {
width: '100%',
},
poster: {
float: 'left',
minHeight: '450px',
},
info: {
float: 'left',
minHeight: '450px',
}
}
const request = this.props.display;
if (request) {
return (
<div style={adminIndexStyle.wrapper}>
<div style={adminIndexStyle.headerWrapper}>
<span>{request.name} </span>
<span>{request.year}</span>
</div>
<div style={adminIndexStyle.poster}>
<img src={'https://image.tmdb.org/t/p/w300/' + request.image_path} />
</div>
<div style={adminIndexStyle.info}>
<span>type: {request.type}</span><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 />
</div>
</div>
)
}
}
render() {
return (
<div>{this.displayInfo()}</div>
);
}
}
export default AdminRequestInfo;

2
client/app/components/LoginForm/LoginForm.jsx → client/app/components/admin/LoginForm/LoginForm.jsx
View File

@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../redux/reducer.jsx';
import { login } from '../../redux/reducer.jsx';
class LoginForm extends Component {

46
client/app/components/admin/Sidebar.jsx Normal file
View File

@@ -0,0 +1,46 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class SidebarComponent extends Component {
displayRequestedElementsInfo() {
if (this.props.requested_objects) {
let element = this.props.requested_objects.map((item, index) => {
return (
<tr key={index}>
<td><Link to={{ pathname: '/admin/'+String(index)}}>{item.name}</Link></td>
<td>{item.status}</td>
<td>{item.requested_date}</td>
</tr>
)
})
return (
<table key='requestedTable'>
<thead>
<tr>
<th><b>Name</b></th>
<th><b>Status</b></th>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
{element}
</tbody>
</table>
)
}
}
render() {
console.log('sidebar: ', this.props.requested_objects)
return (
<div>
<h1>Hello from the sidebar: </h1>
<span>{ this.displayRequestedElementsInfo() }</span>
</div>
);
}
}
export default SidebarComponent;

20
client/app/components/http.jsx
View File

@@ -15,7 +15,7 @@ import { getCookie } from './Cookie.jsx';
return response;
}
function parseJSON(response) { response.json(); }
function parseJSON(response) { return response.json(); }
@@ -41,12 +41,12 @@ import { getCookie } from './Cookie.jsx';
// export default http;
export function fetchJSON(url, method, data) {
return fetch(url, {
method: method,
headers: new Headers({
'Content-Type': 'application/json',
'authorization': getCookie('token'),
}),
body: JSON.stringify(data)
}).then(checkStatus).then(parseJSON);
}
return fetch(url, {
method: method,
headers: new Headers({
'Content-Type': 'application/json',
'authorization': getCookie('token'),
}),
body: JSON.stringify(data)
}).then(checkStatus).then(parseJSON);
}

6
client/app/index.js
View File

@@ -2,7 +2,7 @@
* @Author: KevinMidboe
* @Date: 2017-06-01 21:08:55
* @Last Modified by: KevinMidboe
* @Last Modified time: 2017-10-05 13:47:37
* @Last Modified time: 2017-10-20 19:24:52
./client/index.js
which is the webpack entry file
@@ -11,10 +11,10 @@
import React from 'react';
import { render } from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './components/App.jsx';
import Root from './Root.jsx';
render((
<HashRouter>
<App />
<Root />
</HashRouter>
), document.getElementById('root'));