Material Redesign #1
@ -27,11 +27,11 @@ import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspac
|
||||
const axios = require('axios');
|
||||
|
||||
const LazyIndex = React.lazy(() => import("./Index/Index"))
|
||||
const LazyMaths = React.lazy(() => import("./Maths/Maths"))
|
||||
const LazyPlaylists = React.lazy(() => import("./Playlist/Playlists"))
|
||||
const LazyPlaylistView = React.lazy(() => import("./Playlist/View/View"))
|
||||
const LazySettings = React.lazy(() => import("./Settings/Settings"))
|
||||
const LazyAdmin = React.lazy(() => import("./Admin/Admin"))
|
||||
const LazyMaths = React.lazy(() => import("./Maths/MathsRouter"))
|
||||
const LazyPlaylists = React.lazy(() => import("./Playlist/AllPlaylistsRouter"))
|
||||
const LazyPlaylistView = React.lazy(() => import("./Playlist/View/PlaylistRouter"))
|
||||
const LazySettings = React.lazy(() => import("./Settings/SettingsRouter"))
|
||||
const LazyAdmin = React.lazy(() => import("./Admin/AdminRouter"))
|
||||
|
||||
class MusicTools extends Component {
|
||||
|
||||
@ -96,6 +96,7 @@ class MusicTools extends Component {
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={this.state.drawerOpen}
|
||||
onClose={(e) => this.setOpen(false)}
|
||||
>
|
||||
<div>
|
||||
<IconButton onClick={(e) => this.setOpen(false)}>
|
||||
@ -103,6 +104,11 @@ class MusicTools extends Component {
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
role="presentation"
|
||||
onClick={(e) => this.setOpen(false)}
|
||||
onKeyDown={(e) => this.setOpen(false)}
|
||||
>
|
||||
<List>
|
||||
<ListItem button key="home" component={Link} to='/app'>
|
||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||
@ -135,6 +141,7 @@ class MusicTools extends Component {
|
||||
<ListItemText primary="sarsoo.xyz" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Drawer>
|
||||
</ThemeProvider>
|
||||
<div className="full-width">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
|
||||
import PlaylistsView from "./PlaylistsView.js"
|
||||
import NewPlaylist from "./NewPlaylist.js";
|
||||
import PlaylistsView from "./PlaylistsList.js"
|
||||
import NewPlaylist from "./New.js";
|
||||
import ScratchView from "./ScratchView.js";
|
||||
|
||||
class Playlists extends Component {
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button, ButtonGroup, Typography, Card, Grid } from '@material-ui/core';
|
||||
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';
|
||||
@ -100,9 +100,7 @@ class PlaylistsView extends Component {
|
||||
handleDeletePlaylist={this.handleDeletePlaylist}
|
||||
handleRunAll={this.handleRunAll}/>;
|
||||
|
||||
const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
|
||||
|
||||
return this.state.isLoading ? loadingMessage : grid;
|
||||
return this.state.isLoading ? <CircularProgress /> : grid;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import GlobalTheme from "../../Theme";
|
||||
|
||||
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
|
||||
|
||||
class Count extends Component {
|
||||
export class Count extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
@ -131,5 +131,3 @@ class Count extends Component {
|
||||
function LoadingMessage(props) {
|
||||
return <tr><td><ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider></td></tr>;
|
||||
}
|
||||
|
||||
export default Count;
|
||||
@ -1,6 +1,11 @@
|
||||
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 showMessage from "../../Toast.js";
|
||||
|
||||
var thisMonth = [
|
||||
@ -33,7 +38,7 @@ var lastMonth = [
|
||||
'november'
|
||||
];
|
||||
|
||||
class Edit extends Component{
|
||||
export class Edit extends Component{
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
@ -393,7 +398,8 @@ class Edit extends Component{
|
||||
var date = new Date();
|
||||
|
||||
const table = (
|
||||
<tbody>
|
||||
<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}/> }
|
||||
|
||||
@ -404,185 +410,146 @@ class Edit extends Component{
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text"
|
||||
name="newPlaylistName"
|
||||
className="full-width"
|
||||
value={this.state.newPlaylistName}
|
||||
<FormControl variant="filled">
|
||||
<InputLabel htmlFor="chart_range">Managed Playlist</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={this.state.newReferenceName}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="Spotify Playlist Name"></input>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddPart}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select name="newReferenceName"
|
||||
className="full-width"
|
||||
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>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddReference}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Shuffle Output
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
checked={this.state.shuffle}
|
||||
onChange={this.handleShuffleChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Include Recommendations
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
checked={this.state.include_recommendations}
|
||||
onChange={this.handleIncludeRecommendationsChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Include Library Tracks
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
checked={this.state.include_library_tracks}
|
||||
onChange={this.handleIncludeLibraryTracksChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Recommendation Size
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
name="recommendation_sample"
|
||||
className="full-width"
|
||||
value={this.state.recommendation_sample}
|
||||
onChange={this.handleInputChange}></input>
|
||||
<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' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Chart Size
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
name="chart_limit"
|
||||
className="full-width"
|
||||
value={this.state.chart_limit}
|
||||
onChange={this.handleInputChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<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' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Chart Range
|
||||
</td>
|
||||
<td>
|
||||
<select className="full-width"
|
||||
name="chart_range"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.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>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Added Since (days)
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
name="day_boundary"
|
||||
className="full-width"
|
||||
value={this.state.day_boundary}
|
||||
onChange={this.handleInputChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<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' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Include {thisMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
checked={this.state.add_this_month}
|
||||
onChange={this.handleThisMonthChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<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' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Include {lastMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
checked={this.state.add_last_month}
|
||||
onChange={this.handleLastMonthChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox checked={this.state.add_this_month} onChange={this.handleThisMonthChange} />
|
||||
}
|
||||
label="This Month"
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
Type
|
||||
</td>
|
||||
<td>
|
||||
<select className="full-width"
|
||||
name="type"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.type}>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
<option value="fmchart">Last.fm Chart</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2">
|
||||
<button className="button full-width" onClick={this.handleRun}>Run</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{ 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>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const loadingMessage =
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p className="center-text">Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>;
|
||||
|
||||
return this.state.isLoading ? loadingMessage : table;
|
||||
return this.state.isLoading ? <CircularProgress /> : table;
|
||||
}
|
||||
|
||||
}
|
||||
@ -599,9 +566,11 @@ function Row (props) {
|
||||
return (
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">{ props.part }</td>
|
||||
<td><button className="ui-text center-text button full-width" onClick={(e) => props.handler(props.part, e)}>Remove</button></td>
|
||||
<td>
|
||||
<IconButton aria-label="delete" onClick={(e) => props.handler(props.part, e)}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default Edit;
|
||||
55
src/js/Playlist/View/PlaylistRouter.js
Normal file
55
src/js/Playlist/View/PlaylistRouter.js
Normal file
@ -0,0 +1,55 @@
|
||||
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 GlobalTheme from "../../Theme.js"
|
||||
|
||||
import {Edit} from "./Edit.js";
|
||||
import {Count} from "./Count.js";
|
||||
|
||||
class View 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>
|
||||
<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>
|
||||
<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}/>} />
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default View;
|
||||
@ -1,35 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
|
||||
|
||||
import Edit from "./Edit.js";
|
||||
import Count from "./Count.js";
|
||||
|
||||
class View extends Component{
|
||||
|
||||
render() {
|
||||
return (
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2"><h1 className="text-no-select">{ this.props.match.params.name }</h1></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colSpan="2">
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<li><Link to={`${this.props.match.url}/edit`}>Edit</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/count`}>Count</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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}/>} />
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default View;
|
||||
@ -2,13 +2,20 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
|
||||
|
||||
let GlobalTheme = createMuiTheme({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
spacing: 20
|
||||
},
|
||||
typography: {
|
||||
button: {
|
||||
fontSize: '1rem',
|
||||
},
|
||||
},
|
||||
paper: {
|
||||
display: 'flex',
|
||||
spacing: 5
|
||||
},
|
||||
card: {
|
||||
display: 'flex',
|
||||
spacing: 5
|
||||
@ -19,12 +26,12 @@ let GlobalTheme = createMuiTheme({
|
||||
main: '#1a237e',
|
||||
},
|
||||
secondary: {
|
||||
main: '#1a237e',
|
||||
main: '#2196f3',
|
||||
}
|
||||
},
|
||||
status: {
|
||||
danger: 'orange',
|
||||
},
|
||||
}
|
||||
});
|
||||
GlobalTheme = responsiveFontSizes(GlobalTheme);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user