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

fixed splitting, initial material design of edit screen

Browse Source
This commit is contained in:
aj 2020-01-28 00:11:24 +00:00
parent e2b2c4a16b
commit 6afe8a1ffd
12 changed files with 217 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 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">

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

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

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 { 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;
}
}

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

@ -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);
@ -130,6 +130,4 @@ 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;
}

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

@ -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
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({
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);