sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

Material Redesign #1

Merged
Sarsoo merged 6 commits from material into master 2020-01-29 12:33:42 +00:00
Conversation 0 Commits 6 Files Changed 28 +217 -218
12 changed files with 217 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6afe8a1ffd - Show all commits

0
src/js/Admin/Admin.js → src/js/Admin/AdminRouter.js
View File

0
src/js/Maths/Maths.js → src/js/Maths/MathsRouter.js
View File

17
src/js/MusicTools.js
View File

@ -27,11 +27,11 @@ import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspac
const axios = require('axios'); const axios = require('axios');
const LazyIndex = React.lazy(() => import("./Index/Index")) const LazyIndex = React.lazy(() => import("./Index/Index"))
const LazyMaths = React.lazy(() => import("./Maths/Maths")) const LazyMaths = React.lazy(() => import("./Maths/MathsRouter"))
const LazyPlaylists = React.lazy(() => import("./Playlist/Playlists")) const LazyPlaylists = React.lazy(() => import("./Playlist/AllPlaylistsRouter"))
const LazyPlaylistView = React.lazy(() => import("./Playlist/View/View")) const LazyPlaylistView = React.lazy(() => import("./Playlist/View/PlaylistRouter"))
const LazySettings = React.lazy(() => import("./Settings/Settings")) const LazySettings = React.lazy(() => import("./Settings/SettingsRouter"))
const LazyAdmin = React.lazy(() => import("./Admin/Admin")) const LazyAdmin = React.lazy(() => import("./Admin/AdminRouter"))
class MusicTools extends Component { class MusicTools extends Component {
@ -96,6 +96,7 @@ class MusicTools extends Component {
variant="persistent" variant="persistent"
anchor="left" anchor="left"
open={this.state.drawerOpen} open={this.state.drawerOpen}
onClose={(e) => this.setOpen(false)}
> >
<div> <div>
<IconButton onClick={(e) => this.setOpen(false)}> <IconButton onClick={(e) => this.setOpen(false)}>
@ -103,6 +104,11 @@ class MusicTools extends Component {
</IconButton> </IconButton>
</div> </div>
<Divider /> <Divider />
<div
role="presentation"
onClick={(e) => this.setOpen(false)}
onKeyDown={(e) => this.setOpen(false)}
>
<List> <List>
<ListItem button key="home" component={Link} to='/app'> <ListItem button key="home" component={Link} to='/app'>
<ListItemIcon><HomeIcon /></ListItemIcon> <ListItemIcon><HomeIcon /></ListItemIcon>
@ -135,6 +141,7 @@ class MusicTools extends Component {
<ListItemText primary="sarsoo.xyz" /> <ListItemText primary="sarsoo.xyz" />
</ListItem> </ListItem>
</List> </List>
</div>
</Drawer> </Drawer>
</ThemeProvider> </ThemeProvider>
<div className="full-width"> <div className="full-width">

4
src/js/Playlist/Playlists.js → src/js/Playlist/AllPlaylistsRouter.js
View File

@ -1,8 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import PlaylistsView from "./PlaylistsView.js" import PlaylistsView from "./PlaylistsList.js"
import NewPlaylist from "./NewPlaylist.js"; import NewPlaylist from "./New.js";
import ScratchView from "./ScratchView.js"; import ScratchView from "./ScratchView.js";
class Playlists extends Component { class Playlists extends Component {

0
src/js/Playlist/NewPlaylist.js → src/js/Playlist/New.js
View File

6
src/js/Playlist/PlaylistsView.js → src/js/Playlist/PlaylistsList.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; 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 CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@material-ui/core/CardContent';
import { ThemeProvider } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/core/styles';
@ -100,9 +100,7 @@ class PlaylistsView extends Component {
handleDeletePlaylist={this.handleDeletePlaylist} handleDeletePlaylist={this.handleDeletePlaylist}
handleRunAll={this.handleRunAll}/>; 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 ? <CircularProgress /> : grid;
return this.state.isLoading ? loadingMessage : grid;
} }
} }

6
src/js/Playlist/View/Count.js
View File

@ -7,7 +7,7 @@ import GlobalTheme from "../../Theme";
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart")) const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
class Count extends Component { export class Count extends Component {
constructor(props){ constructor(props){
super(props); super(props);
@ -130,6 +130,4 @@ class Count extends Component {
function LoadingMessage(props) { 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 <tr><td><ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider></td></tr>;
} }
export default Count;

297
src/js/Playlist/View/Edit.js
View File

@ -1,6 +1,11 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); 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"; import showMessage from "../../Toast.js";
var thisMonth = [ var thisMonth = [
@ -33,7 +38,7 @@ var lastMonth = [
'november' 'november'
]; ];
class Edit extends Component{ export class Edit extends Component{
constructor(props){ constructor(props){
super(props); super(props);
@ -393,7 +398,8 @@ class Edit extends Component{
var date = new Date(); var date = new Date();
const table = ( 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 && <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}/> } { 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 <br></br>Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
</td> </td>
</tr> </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> <tr>
<td> <td>
<input type="text" <FormControl variant="filled">
name="newPlaylistName" <InputLabel htmlFor="chart_range">Managed Playlist</InputLabel>
className="full-width" <Select
value={this.state.newPlaylistName} native
value={this.state.newReferenceName}
onChange={this.handleInputChange} onChange={this.handleInputChange}
placeholder="Spotify Playlist Name"></input> inputProps={{
</td> name: "newReferenceName",
<td> id: "newReferenceName",
<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}>
{ this.state.playlists { this.state.playlists
.filter((entry) => entry.name != this.state.name) .filter((entry) => entry.name != this.state.name)
.map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) } .map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
</select> </Select>
</FormControl>
</td> </td>
<td> <td>
<button className="button full-width" onClick={this.handleAddReference}>Add</button> <Button className="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>
</td> </td>
</tr> </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' && { this.state.type == 'fmchart' &&
<tr> <TextField type="number"
<td className="center-text ui-text text-no-select"> name="chart_limit"
Chart Size // className="full-width"
</td> label="Chart Size"
<td> value={this.state.chart_limit}
<input type="number" onChange={this.handleInputChange}></TextField>
name="chart_limit"
className="full-width"
value={this.state.chart_limit}
onChange={this.handleInputChange}></input>
</td>
</tr>
} }
{ this.state.type == 'fmchart' && { this.state.type == 'fmchart' &&
<tr> <FormControl variant="filled">
<td className="center-text ui-text text-no-select"> <InputLabel htmlFor="chart_range">Chart Range</InputLabel>
Chart Range <Select
</td> native
<td> value={this.state.chart_range}
<select className="full-width" onChange={this.handleInputChange}
name="chart_range" inputProps={{
onChange={this.handleInputChange} name: "chart_range",
value={this.state.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="WEEK">7 Day</option>
<option value="HALFYEAR">180 Day</option> <option value="MONTH">30 Day</option>
<option value="YEAR">365 Day</option> <option value="QUARTER">90 Day</option>
<option value="OVERALL">Overall</option> <option value="HALFYEAR">180 Day</option>
</select> <option value="YEAR">365 Day</option>
</td> <option value="OVERALL">Overall</option>
</tr> </Select>
} </FormControl>
{ 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>
} }
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <TextField type="number"
<td className="center-text ui-text text-no-select"> name="day_boundary"
Include {thisMonth[date.getMonth()]} Playlist // className="full-width"
</td> label="Added Since (days)"
<td> value={this.state.day_boundary}
<input type="checkbox" onChange={this.handleInputChange}></TextField>
checked={this.state.add_this_month}
onChange={this.handleThisMonthChange}></input>
</td>
</tr>
} }
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <FormControlLabel
<td className="center-text ui-text text-no-select"> control={
Include {lastMonth[date.getMonth()]} Playlist <Checkbox checked={this.state.add_this_month} onChange={this.handleThisMonthChange} />
</td> }
<td> label="This Month"
<input type="checkbox" />
checked={this.state.add_last_month}
onChange={this.handleLastMonthChange}></input>
</td>
</tr>
} }
{ this.state.type == 'recents' &&
<FormControlLabel
<tr> control={
<td className="center-text ui-text text-no-select"> <Checkbox checked={this.state.add_last_month} onChange={this.handleLastMonthChange} />
Type }
</td> label="Last Month"
<td> />
<select className="full-width" }
name="type" <FormControl variant="filled">
onChange={this.handleInputChange} <InputLabel htmlFor="type-select">Type</InputLabel>
value={this.state.type}> <Select
<option value="default">Default</option> native
<option value="recents">Recents</option> value={this.state.type}
<option value="fmchart">Last.fm Chart</option> onChange={this.handleInputChange}
</select> inputProps={{
</td> name: 'type',
</tr> id: 'type-select',
<tr> }}
<td colSpan="2"> >
<button className="button full-width" onClick={this.handleRun}>Run</button> <option value="default">Default</option>
</td> <option value="recents">Recents</option>
</tr> <option value="fmchart">Last.fm Chart</option>
</tbody> </Select>
</FormControl>
<Button onClick={this.handleRun} variant="contained" color="primary">Run</Button>
</Card>
</ThemeProvider>
); );
const loadingMessage = return this.state.isLoading ? <CircularProgress /> : table;
<tbody>
<tr>
<td>
<p className="center-text">Loading...</p>
</td>
</tr>
</tbody>;
return this.state.isLoading ? loadingMessage : table;
} }
} }
@ -599,9 +566,11 @@ function Row (props) {
return ( return (
<tr> <tr>
<td className="ui-text center-text text-no-select">{ props.part }</td> <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> </tr>
); );
} }
export default Edit;

55
src/js/Playlist/View/PlaylistRouter.js Normal file
View 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;

35
src/js/Playlist/View/View.js
View File

@ -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;

0
src/js/Settings/Settings.js → src/js/Settings/SettingsRouter.js
View File

15
src/js/Theme.js
View File

@ -2,13 +2,20 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let GlobalTheme = createMuiTheme({ let GlobalTheme = createMuiTheme({
root: { root: {
flexGrow: 1, display: 'flex',
}, flexDirection: 'column',
alignItems: 'center',
spacing: 20
},
typography: { typography: {
button: { button: {
fontSize: '1rem', fontSize: '1rem',
}, },
}, },
paper: {
display: 'flex',
spacing: 5
},
card: { card: {
display: 'flex', display: 'flex',
spacing: 5 spacing: 5
@ -19,12 +26,12 @@ let GlobalTheme = createMuiTheme({
main: '#1a237e', main: '#1a237e',
}, },
secondary: { secondary: {
main: '#1a237e', main: '#2196f3',
} }
}, },
status: { status: {
danger: 'orange', danger: 'orange',
}, }
}); });
GlobalTheme = responsiveFontSizes(GlobalTheme); GlobalTheme = responsiveFontSizes(GlobalTheme);