From 6afe8a1ffd954a67e7757f0147770d6a71b97952 Mon Sep 17 00:00:00 2001 From: aj Date: Tue, 28 Jan 2020 00:11:24 +0000 Subject: [PATCH] fixed splitting, initial material design of edit screen --- src/js/Admin/{Admin.js => AdminRouter.js} | 0 src/js/Maths/{Maths.js => MathsRouter.js} | 0 src/js/MusicTools.js | 17 +- .../{Playlists.js => AllPlaylistsRouter.js} | 4 +- src/js/Playlist/{NewPlaylist.js => New.js} | 0 .../{PlaylistsView.js => PlaylistsList.js} | 6 +- src/js/Playlist/View/Count.js | 6 +- src/js/Playlist/View/Edit.js | 297 ++++++++---------- src/js/Playlist/View/PlaylistRouter.js | 55 ++++ src/js/Playlist/View/View.js | 35 --- .../{Settings.js => SettingsRouter.js} | 0 src/js/Theme.js | 15 +- 12 files changed, 217 insertions(+), 218 deletions(-) rename src/js/Admin/{Admin.js => AdminRouter.js} (100%) rename src/js/Maths/{Maths.js => MathsRouter.js} (100%) rename src/js/Playlist/{Playlists.js => AllPlaylistsRouter.js} (90%) rename src/js/Playlist/{NewPlaylist.js => New.js} (100%) rename src/js/Playlist/{PlaylistsView.js => PlaylistsList.js} (94%) create mode 100644 src/js/Playlist/View/PlaylistRouter.js delete mode 100644 src/js/Playlist/View/View.js rename src/js/Settings/{Settings.js => SettingsRouter.js} (100%) diff --git a/src/js/Admin/Admin.js b/src/js/Admin/AdminRouter.js similarity index 100% rename from src/js/Admin/Admin.js rename to src/js/Admin/AdminRouter.js diff --git a/src/js/Maths/Maths.js b/src/js/Maths/MathsRouter.js similarity index 100% rename from src/js/Maths/Maths.js rename to src/js/Maths/MathsRouter.js diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js index b155da2..c3f3133 100644 --- a/src/js/MusicTools.js +++ b/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 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)} >
this.setOpen(false)}> @@ -103,6 +104,11 @@ class MusicTools extends Component {
+
this.setOpen(false)} + onKeyDown={(e) => this.setOpen(false)} + > @@ -135,6 +141,7 @@ class MusicTools extends Component { +
diff --git a/src/js/Playlist/Playlists.js b/src/js/Playlist/AllPlaylistsRouter.js similarity index 90% rename from src/js/Playlist/Playlists.js rename to src/js/Playlist/AllPlaylistsRouter.js index 822a01e..cbb2cf1 100644 --- a/src/js/Playlist/Playlists.js +++ b/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 NewPlaylist from "./NewPlaylist.js"; +import PlaylistsView from "./PlaylistsList.js" +import NewPlaylist from "./New.js"; import ScratchView from "./ScratchView.js"; class Playlists extends Component { diff --git a/src/js/Playlist/NewPlaylist.js b/src/js/Playlist/New.js similarity index 100% rename from src/js/Playlist/NewPlaylist.js rename to src/js/Playlist/New.js diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsList.js similarity index 94% rename from src/js/Playlist/PlaylistsView.js rename to src/js/Playlist/PlaylistsList.js index f7d40c2..8855fea 100644 --- a/src/js/Playlist/PlaylistsView.js +++ b/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 = Loading...; - - return this.state.isLoading ? loadingMessage : grid; + return this.state.isLoading ? : grid; } } diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js index 1aa2eb3..f6c87bf 100644 --- a/src/js/Playlist/View/Count.js +++ b/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); @@ -130,6 +130,4 @@ class Count extends Component { function LoadingMessage(props) { return Loading...; -} - -export default Count; \ No newline at end of file +} \ No newline at end of file diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js index 60d886e..3b973e5 100644 --- a/src/js/Playlist/View/Edit.js +++ b/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 = ( - + + { this.state.playlist_references.length > 0 && Managed } { this.state.playlist_references.length > 0 && } @@ -404,185 +410,146 @@ class Edit extends Component{

Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive + + Spotify Playlist + + + + + + } + /> + - + Managed Playlist + + inputProps={{ + name: "newReferenceName", + id: "newReferenceName", + }} + > { this.state.playlists .filter((entry) => entry.name != this.state.name) .map((entry) => ) } - + + - - - - - - Shuffle Output - - - - - - - - Include Recommendations - - - - - - - - Include Library Tracks - - - - - - - - Recommendation Size - - - + + + } + labelPlacement="bottom" + label="Shuffle"/> + + } + labelPlacement="bottom" + label="Recommendations"/> + + } + labelPlacement="bottom" + label="Library Tracks"/> + { this.state.type == 'fmchart' && - - - Chart Size - - - - - + } { this.state.type == 'fmchart' && - - - Chart Range - - - - - - } - - { this.state.type == 'recents' && - - - Added Since (days) - - - - - + + Chart Range + + } { this.state.type == 'recents' && - - - Include {thisMonth[date.getMonth()]} Playlist - - - - - + } { this.state.type == 'recents' && - - - Include {lastMonth[date.getMonth()]} Playlist - - - - - + + } + label="This Month" + /> } - - - - - Type - - - - - - - - - - - + { this.state.type == 'recents' && + + } + label="Last Month" + /> + } + + Type + + + + + ); - const loadingMessage = - - - -

Loading...

- - - ; - - return this.state.isLoading ? loadingMessage : table; + return this.state.isLoading ? : table; } } @@ -599,9 +566,11 @@ function Row (props) { return ( { props.part } - + + props.handler(props.part, e)}> + + + ); -} - -export default Edit; \ No newline at end of file +} \ No newline at end of file diff --git a/src/js/Playlist/View/PlaylistRouter.js b/src/js/Playlist/View/PlaylistRouter.js new file mode 100644 index 0000000..1ddf19c --- /dev/null +++ b/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 ( +
+ + + + + + + + + + } /> + } /> + +
+ ); + } + +} + +export default View; \ No newline at end of file diff --git a/src/js/Playlist/View/View.js b/src/js/Playlist/View/View.js deleted file mode 100644 index d816995..0000000 --- a/src/js/Playlist/View/View.js +++ /dev/null @@ -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 ( - - - - - - - - - - } /> - } /> -

{ this.props.match.params.name }

-
-
    -
  • Edit
    • -
  • Count
    • -
-
-
- ); - } - -} - -export default View; \ No newline at end of file diff --git a/src/js/Settings/Settings.js b/src/js/Settings/SettingsRouter.js similarity index 100% rename from src/js/Settings/Settings.js rename to src/js/Settings/SettingsRouter.js diff --git a/src/js/Theme.js b/src/js/Theme.js index 2e3c72a..ec60631 100644 --- a/src/js/Theme.js +++ b/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);