Material Redesign #1
@ -1,25 +1,49 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||
const axios = require('axios');
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
|
||||
|
||||
import Lock from "./Lock.js";
|
||||
import Functions from "./Functions.js";
|
||||
import Tasks from "./Tasks.js";
|
||||
|
||||
class Admin extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
tab: 0
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e, newValue){
|
||||
this.setState({
|
||||
tab: newValue
|
||||
});
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<li><Link to={`${this.props.match.url}/lock`}>Lock Accounts</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/functions`}>Functions</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/tasks`}>Tasks</Link></li>
|
||||
</ul>
|
||||
|
||||
<Paper>
|
||||
<Tabs
|
||||
value={this.state.tab}
|
||||
onChange={this.handleChange}
|
||||
indicatorColor="primary"
|
||||
centered
|
||||
width="50%"
|
||||
>
|
||||
<Tab label="Lock Accounts" component={Link} to={`${this.props.match.url}/lock`} />
|
||||
<Tab label="Functions" component={Link} to={`${this.props.match.url}/functions`} />
|
||||
<Tab label="Tasks" component={Link} to={`${this.props.match.url}/tasks`} />
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Switch>
|
||||
<Route path={`${this.props.match.url}/lock`} component={Lock} />
|
||||
<Route path={`${this.props.match.url}/functions`} component={Functions} />
|
||||
<Route path={`${this.props.match.url}/tasks`} component={Tasks} />
|
||||
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
|
||||
class Functions extends Component {
|
||||
|
||||
@ -34,27 +35,20 @@ class Functions extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<h1 className="text-no-select full-width center-text ui-text">Admin Functions</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<button className="full-width button" onClick={this.runAllUsers}>Run All Users</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button className="full-width button" onClick={this.runStats}>Run Stats</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>);
|
||||
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Typography variant="h4" color="textPrimary">Admin Functions</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<ButtonGroup variant="contained" color="primary" className="full-width">
|
||||
<Button className="full-width button" onClick={this.runAllUsers}>Run All Users</Button>
|
||||
<Button className="full-width button" onClick={this.runStats}>Run Stats</Button>
|
||||
</ButtonGroup>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
background: '#9e9e9e',
|
||||
color: '#212121'
|
||||
},
|
||||
});
|
||||
|
||||
class Lock extends Component {
|
||||
|
||||
constructor(props){
|
||||
@ -47,41 +57,37 @@ class Lock extends Component {
|
||||
const loadingMessage = <p className="center-text text-no-select">loading...</p>;
|
||||
|
||||
return this.state.isLoading ? loadingMessage :
|
||||
<div>
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan='3'>
|
||||
<h1 className="text-no-select">
|
||||
Account Locks
|
||||
</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ this.state.accounts.map((account) => <Row account={account} handler={this.handleLock}
|
||||
key= {account.username}/>) }
|
||||
</tbody>
|
||||
</table>
|
||||
</div>;
|
||||
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Typography variant="h4" color="textPrimary">Account Locks</Typography>
|
||||
<Grid container spacing={3}>
|
||||
{ this.state.accounts.map((account) => <Row account={account} handler={this.handleLock}
|
||||
key= {account.username}/>) }
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function Row(props){
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select" style={{width: "40%"}}>{ props.account.username }</td>
|
||||
<td className="ui-text center-text text-no-select" style={{width: "30%"}}>
|
||||
{ props.account.last_login }
|
||||
</td>
|
||||
<td style={{width: "30%"}}>
|
||||
<button className="button full-width"
|
||||
onClick={(e) => props.handler(e, props.account.username, !props.account.locked)}>
|
||||
{props.account.locked ? "Unlock" : "Lock"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<Grid item xs={12} sm={3} md={2}>
|
||||
<Card variant="outlined" className={classes.root}>
|
||||
<CardContent>
|
||||
<Typography variant="h5" color="textSecondary" className={classes.root}>{ props.account.username }</Typography>
|
||||
<Typography variant="body2" color="textSecondary" className={classes.root}>{ props.account.last_login }</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button className="full-width" color="secondary" variant="contained" aria-label="delete" onClick={(e) => props.handler(e, props.account.username, !props.account.locked)}>
|
||||
{props.account.locked ? "Unlock" : "Lock"}
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
class Tasks extends Component {
|
||||
@ -31,40 +33,25 @@ class Tasks extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<h1 className="text-no-select full-width center-text ui-text">Running Tasks</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{ this.state.tasks.map((entry) => <TaskType url={entry.url} count={entry.count} times={entry.scheduled_times} key={entry.url}/>)}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-no-select full-width center-text ui-text" colSpan='2'>
|
||||
<b>{this.state.total_tasks}</b> Currently Running
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>);
|
||||
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Grid container spacing={4}>
|
||||
{ this.state.tasks.map((entry) => <TaskType url={entry.url} count={entry.count} times={entry.scheduled_times} key={entry.url}/>)}
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function TaskType(props) {
|
||||
return (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-no-select full-width center-text ui-text" colSpan='2'>
|
||||
{props.url}: {props.count}
|
||||
</td>
|
||||
</tr>
|
||||
{props.times.map((entry) => <tr key={entry}>
|
||||
<td colSpan='2' className="text-no-select full-width center-text ui-text">
|
||||
{entry}
|
||||
</td>
|
||||
</tr>)}
|
||||
</tbody>
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="textSecondary">{props.url}: {props.count}</Typography>
|
||||
{props.times.map((entry) => <Typography variant="body2" color="textSecondary">{entry}</Typography>)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,12 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Route, Link} from "react-router-dom";
|
||||
import { BrowserRouter as Route} from "react-router-dom";
|
||||
|
||||
import Count from "./Count.js";
|
||||
|
||||
class Maths extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<li><Link to={`${this.props.match.url}/count`}>count</Link></li>
|
||||
</ul>
|
||||
|
||||
<Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
|
||||
</div>
|
||||
);
|
||||
return <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,10 @@ class PieChart extends Component {
|
||||
},
|
||||
options: {
|
||||
legend : {
|
||||
display : true
|
||||
display : true,
|
||||
labels: {
|
||||
fontColor: 'white'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
arc : {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
|
||||
import NotFound from "./Error/NotFound.js";
|
||||
|
||||
@ -80,7 +80,6 @@ class MusicTools extends Component {
|
||||
render(){
|
||||
return (
|
||||
<Router>
|
||||
<div className="card pad-12">
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
@ -143,7 +142,6 @@ class MusicTools extends Component {
|
||||
</List>
|
||||
</div>
|
||||
</Drawer>
|
||||
</ThemeProvider>
|
||||
<div className="full-width">
|
||||
<Switch>
|
||||
<React.Suspense fallback={<LoadingMessage/>}>
|
||||
@ -157,7 +155,7 @@ class MusicTools extends Component {
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
import { Route, Switch } from "react-router-dom";
|
||||
|
||||
import PlaylistsView from "./PlaylistsList.js"
|
||||
import NewPlaylist from "./New.js";
|
||||
@ -9,11 +9,6 @@ class Playlists extends Component {
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<li><Link to={`${this.props.match.url}/new`}>New</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/play`}>Play</Link></li>
|
||||
</ul>
|
||||
|
||||
<Switch>
|
||||
<Route exact path={`${this.props.match.url}/`} component={PlaylistsView} />
|
||||
<Route path={`${this.props.match.url}/new`} component={NewPlaylist} />
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
class NewPlaylist extends Component {
|
||||
@ -81,44 +83,46 @@ class NewPlaylist extends Component {
|
||||
|
||||
render(){
|
||||
return (
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2">
|
||||
<h1 className="ui-text center-text text-no-select">New Playlist</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<select className="full-width" name="type" onChange={this.handleInputChange}>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
className="full-width"
|
||||
name="name"
|
||||
type="text"
|
||||
value={this.state.name}
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h3">New</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="type-select">Type</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.type}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="Name"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2">
|
||||
<input type="submit" className="button full-width" onClick={this.handleSubmit} value="Create" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2" className="ui-text text-no-select center-text">
|
||||
<br></br>{this.state.description}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
inputProps={{
|
||||
name: 'type',
|
||||
id: 'type-select',
|
||||
}}
|
||||
>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
onChange={this.handleInputChange}
|
||||
name="name"
|
||||
value={this.state.name} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2" color="textSecondary">{ this.state.description }</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button variant="contained" color="primary" className="full-width" onClick={this.handleSubmit}>Create</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,11 +3,9 @@ import { Link } from "react-router-dom";
|
||||
import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import { ThemeProvider } from '@material-ui/core/styles';
|
||||
const axios = require('axios');
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
import GlobalTheme from "../Theme.js"
|
||||
|
||||
class PlaylistsView extends Component {
|
||||
|
||||
@ -106,15 +104,23 @@ class PlaylistsView extends Component {
|
||||
|
||||
function PlaylistGrid(props){
|
||||
return (
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
<Grid container
|
||||
spacing={3}
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
style={{padding: '24px'}}>
|
||||
<Grid item xs>
|
||||
<ButtonGroup
|
||||
color="primary"
|
||||
orientation="vertical"
|
||||
className="full-width">
|
||||
<Button component={Link} to='playlists/new' >New</Button>
|
||||
<Button onClick={props.handleRunAll}>Run All</Button>
|
||||
</ButtonGroup>
|
||||
</Grid>
|
||||
{ props.playlists.length == 0 ? (
|
||||
<Grid item item xs={12} sm={6} md={3}>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Typography variant="h5" component="h2">No Playlists</Typography>
|
||||
</Grid>
|
||||
) : (
|
||||
@ -123,9 +129,7 @@ function PlaylistGrid(props){
|
||||
handleDeletePlaylist={props.handleDeletePlaylist}
|
||||
key={ playlist.name }/>)
|
||||
)}
|
||||
<Grid item xs><Button variant="contained" color="secondary" className="full-width" onClick={props.handleRunAll}>Run All</Button></Grid>
|
||||
</Grid>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -139,10 +143,12 @@ function PlaylistCard(props){
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<ButtonGroup color="primary">
|
||||
<Button variant="contained" component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button>
|
||||
<Button variant="contained" onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button>
|
||||
<Button variant="contained" onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button>
|
||||
<ButtonGroup
|
||||
color="primary"
|
||||
variant="contained">
|
||||
<Button component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button>
|
||||
<Button onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button>
|
||||
<Button onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button>
|
||||
</ButtonGroup>
|
||||
</CardActions>
|
||||
</Card>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { Component } from "react";
|
||||
import { ThemeProvider, Typography } from "@material-ui/core";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
|
||||
import showMessage from "../../Toast.js"
|
||||
import GlobalTheme from "../../Theme";
|
||||
|
||||
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
|
||||
|
||||
@ -67,35 +67,35 @@ export class Count extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Album Count: <b>{this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Artist Count: <b>{this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td>
|
||||
</tr>
|
||||
<React.Suspense fallback={<LoadingMessage/>}>
|
||||
<tr>
|
||||
<td>
|
||||
<LazyPieChart data={[{
|
||||
"label": `${this.state.playlist.name} Tracks`,
|
||||
"value": this.state.playlist.lastfm_stat_percent
|
||||
},{
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<LazyPieChart data={[{
|
||||
<div style={{margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2">Album Count: <b>{this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%</b></Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2">Artist Count: <b>{this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%</b></Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></Typography>
|
||||
</Grid>
|
||||
<React.Suspense fallback={<LoadingMessage/>}>
|
||||
<Grid item xs={12} sm={12} md={4}>
|
||||
<LazyPieChart data={[{
|
||||
"label": `${this.state.playlist.name} Tracks`,
|
||||
"value": this.state.playlist.lastfm_stat_percent
|
||||
},{
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={4}>
|
||||
<LazyPieChart data={[{
|
||||
"label": `${this.state.playlist.name} Albums`,
|
||||
"value": this.state.playlist.lastfm_stat_album_percent
|
||||
},{
|
||||
@ -103,31 +103,29 @@ export class Count extends Component {
|
||||
"value": 100 - this.state.playlist.lastfm_stat_album_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<LazyPieChart data={[{
|
||||
"label": `${this.state.playlist.name} Artists`,
|
||||
"value": this.state.playlist.lastfm_stat_artist_percent
|
||||
},{
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_artist_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2">
|
||||
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>Update</button>
|
||||
</td>
|
||||
</tr>
|
||||
</React.Suspense>
|
||||
</tbody>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={4}>
|
||||
<LazyPieChart data={[{
|
||||
"label": `${this.state.playlist.name} Artists`,
|
||||
"value": this.state.playlist.lastfm_stat_artist_percent
|
||||
},{
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_artist_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
</Grid>
|
||||
</React.Suspense>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button variant="contained" color="primary" className="full-width" onClick={this.updateStats}>Update</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function LoadingMessage(props) {
|
||||
return <tr><td><ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider></td></tr>;
|
||||
return <Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography>;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Paper, Button, CircularProgress, FormControl, TextField, Input, InputLabel, Select, Checkbox, FormControlLabel, IconButton, InputAdornment } from '@material-ui/core';
|
||||
import { ThemeProvider } from '@material-ui/core/styles';
|
||||
import { Add, Delete } from '@material-ui/icons';
|
||||
import GlobalTheme from "../../Theme.js"
|
||||
import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, Checkbox, FormControlLabel,
|
||||
CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Delete } from '@material-ui/icons';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
import showMessage from "../../Toast.js";
|
||||
|
||||
@ -38,6 +38,14 @@ var lastMonth = [
|
||||
'november'
|
||||
];
|
||||
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
background: '#9e9e9e',
|
||||
color: '#212121'
|
||||
},
|
||||
});
|
||||
|
||||
export class Edit extends Component{
|
||||
|
||||
constructor(props){
|
||||
@ -398,155 +406,164 @@ export class Edit extends Component{
|
||||
var date = new Date();
|
||||
|
||||
const table = (
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
<Card>
|
||||
{ this.state.playlist_references.length > 0 && <tr><td colSpan="2" className="ui-text center-text text-no-select" style={{fontStyle: 'italic'}}>Managed</td></tr> }
|
||||
{ this.state.playlist_references.length > 0 && <ListBlock handler={this.handleRemoveReference} list={this.state.playlist_references}/> }
|
||||
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
|
||||
<Card align="center">
|
||||
<CardContent>
|
||||
<Typography variant="h2" color="textPrimary">{this.state.name}</Typography>
|
||||
<Grid container spacing={5}>
|
||||
|
||||
{ this.state.parts.length > 0 && <tr><td colSpan="2" className="ui-text center-text text-no-select" style={{fontStyle: 'italic'}}>Spotify</td></tr> }
|
||||
{ this.state.parts.length > 0 && <ListBlock handler={this.handleRemovePart} list={this.state.parts}/> }
|
||||
<tr>
|
||||
<td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}>
|
||||
<br></br>Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
|
||||
</td>
|
||||
</tr>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="newPlaylistName">Spotify Playlist</InputLabel>
|
||||
<Input
|
||||
id="newPlaylistName"
|
||||
name="newPlaylistName"
|
||||
type="text"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleInputChange}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={this.handleAddPart} >
|
||||
<Add/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
{ this.state.playlist_references.length > 0 && <Grid item xs={12} ><Typography color="textSecondary" variant="h4">Managed</Typography></Grid> }
|
||||
{ this.state.playlist_references.length > 0 && <ListBlock handler={this.handleRemoveReference} list={this.state.playlist_references}/> }
|
||||
|
||||
{ this.state.parts.length > 0 && <Grid item xs={12} ><Typography color="textSecondary" variant="h4">Spotify</Typography></Grid> }
|
||||
{ this.state.parts.length > 0 && <ListBlock handler={this.handleRemovePart} list={this.state.parts}/> }
|
||||
<Grid item xs={12} ><Typography variant="body2" color="textSecondary">Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive</Typography></Grid>
|
||||
<Grid item xs={8} sm={8} md={3}>
|
||||
<TextField
|
||||
name="newPlaylistName"
|
||||
label="Spotify Playlist"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleInputChange}
|
||||
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} sm={4} md={3}>
|
||||
<Button variant="contained" className="full-width" onClick={this.handleAddPart} style={{verticalAlign: 'middle'}}>Add</Button>
|
||||
</Grid>
|
||||
<Grid item xs={8} sm={8} md={3}>
|
||||
<FormControl variant="filled" style={{verticalAlign: 'middle'}}>
|
||||
<InputLabel htmlFor="chart_range">Managed Playlist</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.newReferenceName}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: "newReferenceName",
|
||||
id: "newReferenceName",
|
||||
}}
|
||||
>
|
||||
{ this.state.playlists
|
||||
.filter((entry) => entry.name != this.state.name)
|
||||
.map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={4} sm={4} md={3}>
|
||||
<Button variant="contained" className="full-width" onClick={this.handleAddReference} style={{verticalAlign: 'middle'}}>Add</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox color="primary" checked={this.state.shuffle} onChange={this.handleShuffleChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Shuffle"/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox color="primary" checked={this.state.include_recommendations} onChange={this.handleIncludeRecommendationsChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Recommendations"/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox color="primary" checked={this.state.include_library_tracks} onChange={this.handleIncludeLibraryTracksChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Library Tracks"/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField type="number"
|
||||
name="recommendation_sample"
|
||||
label="Recommendation Size"
|
||||
value={this.state.recommendation_sample}
|
||||
onChange={this.handleInputChange}></TextField>
|
||||
</Grid>
|
||||
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<Grid item xs={12}>
|
||||
<TextField type="number"
|
||||
name="chart_limit"
|
||||
label="Chart Size"
|
||||
value={this.state.chart_limit}
|
||||
onChange={this.handleInputChange}></TextField>
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<tr>
|
||||
<td>
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="chart_range">Managed Playlist</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.newReferenceName}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: "newReferenceName",
|
||||
id: "newReferenceName",
|
||||
}}
|
||||
>
|
||||
{ this.state.playlists
|
||||
.filter((entry) => entry.name != this.state.name)
|
||||
.map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
|
||||
</Select>
|
||||
</FormControl>
|
||||
</td>
|
||||
<td>
|
||||
<Button className="full-width" onClick={this.handleAddReference}>Add</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.shuffle} onChange={this.handleShuffleChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Shuffle"/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.include_recommendations} onChange={this.handleIncludeRecommendationsChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Recommendations"/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.include_library_tracks} onChange={this.handleIncludeLibraryTracksChange} />
|
||||
}
|
||||
labelPlacement="bottom"
|
||||
label="Library Tracks"/>
|
||||
<TextField type="number"
|
||||
name="recommendation_sample"
|
||||
// className="full-width"
|
||||
label="Recommendation Size"
|
||||
value={this.state.recommendation_sample}
|
||||
onChange={this.handleInputChange}></TextField>
|
||||
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<TextField type="number"
|
||||
name="chart_limit"
|
||||
// className="full-width"
|
||||
label="Chart Size"
|
||||
value={this.state.chart_limit}
|
||||
onChange={this.handleInputChange}></TextField>
|
||||
}
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="chart_range">Chart Range</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.chart_range}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: "chart_range",
|
||||
id: "chart_range",
|
||||
}}
|
||||
>
|
||||
<option value="WEEK">7 Day</option>
|
||||
<option value="MONTH">30 Day</option>
|
||||
<option value="QUARTER">90 Day</option>
|
||||
<option value="HALFYEAR">180 Day</option>
|
||||
<option value="YEAR">365 Day</option>
|
||||
<option value="OVERALL">Overall</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
}
|
||||
{ this.state.type == 'recents' &&
|
||||
<TextField type="number"
|
||||
name="day_boundary"
|
||||
// className="full-width"
|
||||
label="Added Since (days)"
|
||||
value={this.state.day_boundary}
|
||||
onChange={this.handleInputChange}></TextField>
|
||||
}
|
||||
{ this.state.type == 'recents' &&
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.add_this_month} onChange={this.handleThisMonthChange} />
|
||||
}
|
||||
label="This Month"
|
||||
/>
|
||||
}
|
||||
{ this.state.type == 'recents' &&
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.add_last_month} onChange={this.handleLastMonthChange} />
|
||||
}
|
||||
label="Last Month"
|
||||
/>
|
||||
}
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="type-select">Type</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.type}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: 'type',
|
||||
id: 'type-select',
|
||||
}}
|
||||
>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
<option value="fmchart">Last.fm Chart</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Button onClick={this.handleRun} variant="contained" color="primary">Run</Button>
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="chart_range">Chart Range</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.chart_range}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: "chart_range",
|
||||
id: "chart_range",
|
||||
}}
|
||||
>
|
||||
<option value="WEEK">7 Day</option>
|
||||
<option value="MONTH">30 Day</option>
|
||||
<option value="QUARTER">90 Day</option>
|
||||
<option value="HALFYEAR">180 Day</option>
|
||||
<option value="YEAR">365 Day</option>
|
||||
<option value="OVERALL">Overall</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
}
|
||||
{ this.state.type == 'recents' &&
|
||||
<Grid item xs={12}>
|
||||
<TextField type="number"
|
||||
name="day_boundary"
|
||||
// className="full-width"
|
||||
label="Added Since (days)"
|
||||
value={this.state.day_boundary}
|
||||
onChange={this.handleInputChange} />
|
||||
</Grid>
|
||||
}
|
||||
{ this.state.type == 'recents' &&
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox color="primary" checked={this.state.add_this_month} onChange={this.handleThisMonthChange} />
|
||||
}
|
||||
label="This Month"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox color="primary" checked={this.state.add_last_month} onChange={this.handleLastMonthChange} />
|
||||
}
|
||||
label="Last Month"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
</Grid>
|
||||
}
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="type-select">Type</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.type}
|
||||
onChange={this.handleInputChange}
|
||||
inputProps={{
|
||||
name: 'type',
|
||||
id: 'type-select',
|
||||
}}
|
||||
>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
<option value="fmchart">Last.fm Chart</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button onClick={this.handleRun} variant="contained" color="primary" className="full-width" >Run</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
);
|
||||
|
||||
return this.state.isLoading ? <CircularProgress /> : table;
|
||||
@ -559,18 +576,30 @@ function ReferenceEntry(props) {
|
||||
}
|
||||
|
||||
function ListBlock(props) {
|
||||
return props.list.map((part) => <Row part={ part } key={ part } handler={props.handler}/>);
|
||||
return <Grid container
|
||||
spacing={3}
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
style={{padding: '24px'}}>
|
||||
{props.list.map((part) => <BlockGridItem part={ part } key={ part } handler={props.handler}/>)}
|
||||
</Grid>
|
||||
}
|
||||
|
||||
function Row (props) {
|
||||
function BlockGridItem (props) {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">{ props.part }</td>
|
||||
<td>
|
||||
<IconButton aria-label="delete" onClick={(e) => props.handler(props.part, e)}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
<Grid item xs={12} sm={3} md={2}>
|
||||
<Card variant="outlined" className={classes.root}>
|
||||
<CardContent>
|
||||
<Typography variant="h5" color="textSecondary" className={classes.root}>{ props.part }</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button className="full-width" color="secondary" variant="contained" aria-label="delete" onClick={(e) => props.handler(props.part, e)} startIcon={<Delete />}>
|
||||
Delete
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@ -1,10 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { ThemeProvider } from '@material-ui/core/styles';
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
|
||||
import { Paper, Tabs, Tab } from '@material-ui/core';
|
||||
|
||||
import GlobalTheme from "../../Theme.js"
|
||||
|
||||
import {Edit} from "./Edit.js";
|
||||
import {Count} from "./Count.js";
|
||||
@ -28,20 +25,18 @@ class View extends Component{
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
<Paper>
|
||||
<Tabs
|
||||
value={this.state.tab}
|
||||
onChange={this.handleChange}
|
||||
indicatorColor="primary"
|
||||
textColor="secondary"
|
||||
centered
|
||||
>
|
||||
<Tab label="Edit" component={Link} to={`${this.props.match.url}/edit`} />
|
||||
<Tab label="Count" component={Link} to={`${this.props.match.url}/count`} />
|
||||
</Tabs>
|
||||
</Paper>
|
||||
</ThemeProvider>
|
||||
<Paper>
|
||||
<Tabs
|
||||
value={this.state.tab}
|
||||
onChange={this.handleChange}
|
||||
indicatorColor="primary"
|
||||
centered
|
||||
width="50%"
|
||||
>
|
||||
<Tab label="Edit" component={Link} to={`${this.props.match.url}/edit`} />
|
||||
<Tab label="Count" component={Link} to={`${this.props.match.url}/count`} />
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Switch>
|
||||
<Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
|
||||
<Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
|
||||
import { BrowserRouter as Route, Link } from "react-router-dom";
|
||||
|
||||
import ChangePassword from "./ChangePassword.js";
|
||||
import SpotifyLink from "./SpotifyLink.js";
|
||||
|
||||
@ -5,8 +5,8 @@ let GlobalTheme = createMuiTheme({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
spacing: 20
|
||||
},
|
||||
spacing: 4,
|
||||
typography: {
|
||||
button: {
|
||||
fontSize: '1rem',
|
||||
@ -17,16 +17,20 @@ let GlobalTheme = createMuiTheme({
|
||||
spacing: 5
|
||||
},
|
||||
card: {
|
||||
marginTop: 24,
|
||||
display: 'flex',
|
||||
spacing: 5
|
||||
},
|
||||
palette: {
|
||||
type: 'dark',
|
||||
primary: {
|
||||
main: '#1a237e',
|
||||
main: '#1976d2',
|
||||
},
|
||||
secondary: {
|
||||
main: '#2196f3',
|
||||
main: '#dc004e',
|
||||
},
|
||||
error: {
|
||||
main: '#f44336'
|
||||
}
|
||||
},
|
||||
status: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user