fixed splitting, initial material design of edit screen

src/js/MusicTools.js

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

src/js/Playlist/AllPlaylistsRouter.js

@@ -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 PlaylistsView from "./PlaylistsList.js"
-import NewPlaylist from "./NewPlaylist.js";
+import NewPlaylist from "./New.js";
 import ScratchView from  "./ScratchView.js";
 
 class Playlists extends Component {

src/js/Playlist/PlaylistsList.js

@@ -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 ? <CircularProgress /> : grid;
-
-        return this.state.isLoading ? loadingMessage : grid;
     }
 }
 

src/js/Playlist/View/Count.js

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

src/js/Playlist/View/Edit.js

@@ -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>
-                <tr>
+                <FormControl>
-                    <td>
+                    <InputLabel htmlFor="newPlaylistName">Spotify Playlist</InputLabel>
-                        <input type="text"
+                    <Input
+                        id="newPlaylistName"
                         name="newPlaylistName"
-                            className="full-width" 
+                        type="text"
                         value={this.state.newPlaylistName}
                         onChange={this.handleInputChange}
-                            placeholder="Spotify Playlist Name"></input>
+                        endAdornment={
-                    </td>
+                        <InputAdornment position="end">
-                    <td>
+                            <IconButton onClick={this.handleAddPart} >
-                        <button className="button full-width" onClick={this.handleAddPart}>Add</button>
+                                <Add/>
-                    </td>
+                            </IconButton>
-                </tr>
+                        </InputAdornment>
+                        }
+                    />
+                </FormControl>
                 <tr>
                     <td>
-                        <select name="newReferenceName" 
+                        <FormControl variant="filled">
-                                className="full-width"
+                            <InputLabel htmlFor="chart_range">Managed Playlist</InputLabel>
+                            <Select
+                            native
                             value={this.state.newReferenceName}
-                                onChange={this.handleInputChange}>
+                            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>
+                        <Button className="full-width" onClick={this.handleAddReference}>Add</Button>
                     </td>
                 </tr>
-                <tr>
+                <FormControlLabel
-                    <td className="center-text ui-text text-no-select">
+                    control={
-                        Shuffle Output
+                    <Checkbox checked={this.state.shuffle} onChange={this.handleShuffleChange} />
-                    </td>
+                    }
-                    <td>
+                    labelPlacement="bottom"
-                        <input type="checkbox" 
+                    label="Shuffle"/>
-                            checked={this.state.shuffle}
+                <FormControlLabel
-                            onChange={this.handleShuffleChange}></input>
+                    control={
-                    </td>
+                    <Checkbox checked={this.state.include_recommendations} onChange={this.handleIncludeRecommendationsChange} />
-                </tr>
+                    }
-                <tr>
+                    labelPlacement="bottom"
-                    <td className="center-text ui-text text-no-select">
+                    label="Recommendations"/>
-                        Include Recommendations
+                <FormControlLabel
-                    </td>
+                    control={
-                    <td>
+                    <Checkbox checked={this.state.include_library_tracks} onChange={this.handleIncludeLibraryTracksChange} />
-                        <input type="checkbox" 
+                    }
-                            checked={this.state.include_recommendations}
+                    labelPlacement="bottom"
-                            onChange={this.handleIncludeRecommendationsChange}></input>
+                    label="Library Tracks"/>
-                    </td>
+                <TextField type="number" 
-                </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"
+                        // className="full-width"
+                        label="Recommendation Size"
                         value={this.state.recommendation_sample}
-                            onChange={this.handleInputChange}></input>
+                        onChange={this.handleInputChange}></TextField>
-                    </td>
-                </tr>
 
                 { this.state.type == 'fmchart' &&
-                <tr>
+                    <TextField type="number" 
-                    <td className="center-text ui-text text-no-select">
-                        Chart Size
-                    </td>
-                    <td>
-                        <input type="number" 
                         name="chart_limit"
-                            className="full-width"
+                        // className="full-width"
+                        label="Chart Size"
                         value={this.state.chart_limit}
-                            onChange={this.handleInputChange}></input>
+                        onChange={this.handleInputChange}></TextField>
-                    </td>
-                </tr>
                 }
                 { 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" 
-                                    name="chart_range" 
                         onChange={this.handleInputChange}
-                                    value={this.state.chart_range}>
+                        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>
+                            </Select>
-                    </td>
+                    </FormControl>
-                </tr>
                 }
-
                 { this.state.type == 'recents' &&
-                <tr>
+                <TextField type="number" 
-                    <td className="center-text ui-text text-no-select">
-                        Added Since (days)
-                    </td>
-                    <td>
-                        <input type="number" 
                     name="day_boundary"
-                            className="full-width"
+                    // className="full-width"
+                    label="Added Since (days)"
                     value={this.state.day_boundary}
-                            onChange={this.handleInputChange}></input>
+                    onChange={this.handleInputChange}></TextField>
-                    </td>
-                </tr>
                 }
                 { this.state.type == 'recents' &&
-                <tr>
+                <FormControlLabel
-                    <td className="center-text ui-text text-no-select">
+                    control={
-                        Include {thisMonth[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_this_month}
-                            onChange={this.handleThisMonthChange}></input>
-                    </td>
-                </tr>
                 }
                 { 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_last_month} onChange={this.handleLastMonthChange} />
-                    </td>
-                    <td>
-                        <input type="checkbox" 
-                            checked={this.state.add_last_month}
-                            onChange={this.handleLastMonthChange}></input>
-                    </td>
-                </tr>
                     }
-
+                    label="Last Month"
-
+                />
-                <tr>
+                }
-                    <td className="center-text ui-text text-no-select">
+                <FormControl variant="filled">
-                        Type
+                    <InputLabel htmlFor="type-select">Type</InputLabel>
-                    </td>
+                    <Select
-                    <td>
+                    native
-                        <select className="full-width" 
+                    value={this.state.type}
-                                name="type" 
                     onChange={this.handleInputChange}
-                                value={this.state.type}>
+                    inputProps={{
+                        name: 'type',
+                        id: 'type-select',
+                    }}
+                    >
                         <option value="default">Default</option>
                         <option value="recents">Recents</option>
                         <option value="fmchart">Last.fm Chart</option>
-                        </select>
+                    </Select>
-                    </td>
+                </FormControl>
-                </tr>
+                <Button onClick={this.handleRun} variant="contained" color="primary">Run</Button>
-                <tr>
+            </Card>
-                    <td colSpan="2">
+            </ThemeProvider>
-                        <button className="button full-width" onClick={this.handleRun}>Run</button>
-                    </td>
-                </tr>
-            </tbody>
         );
 
-        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 (
         <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;

src/js/Playlist/View/PlaylistRouter.js

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

src/js/Playlist/View/View.js

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

src/js/Theme.js

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