From fbd7c10ae979e2dd8827376280a1e9ecf21cbb13 Mon Sep 17 00:00:00 2001 From: aj Date: Sun, 26 Jan 2020 17:37:40 +0000 Subject: [PATCH 1/6] added app bar and card layout for playlists --- music/templates/base.html | 1 + package-lock.json | 245 +++++++++++++++++++++++++++++++ package.json | 2 + src/js/MusicTools.js | 99 +++++++++++-- src/js/Playlist/PlaylistsView.js | 68 +++++---- src/js/Theme.js | 31 ++++ 6 files changed, 402 insertions(+), 44 deletions(-) create mode 100644 src/js/Theme.js diff --git a/music/templates/base.html b/music/templates/base.html index b09bef7..7163c18 100644 --- a/music/templates/base.html +++ b/music/templates/base.html @@ -5,6 +5,7 @@ + diff --git a/package-lock.json b/package-lock.json index 9647401..a2b1793 100644 --- a/package-lock.json +++ b/package-lock.json @@ -997,6 +997,88 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/hash": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", + "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" + }, + "@material-ui/core": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz", + "integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.9.0", + "@material-ui/system": "^4.7.1", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.2", + "convert-css-length": "^2.0.1", + "hoist-non-react-statics": "^3.2.1", + "normalize-scroll-left": "^0.2.0", + "popper.js": "^1.14.1", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.3.0" + } + }, + "@material-ui/icons": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz", + "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/styles": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz", + "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.7.4", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.7.1.tgz", + "integrity": "sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.7.1", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz", + "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==" + }, + "@material-ui/utils": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz", + "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", @@ -1032,6 +1114,28 @@ "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==", "dev": true }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + }, + "@types/react": { + "version": "16.9.19", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.19.tgz", + "integrity": "sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, + "@types/react-transition-group": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz", + "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==", + "requires": { + "@types/react": "*" + } + }, "@types/tapable": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.4.tgz", @@ -1895,6 +1999,11 @@ "wrap-ansi": "^5.1.0" } }, + "clsx": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz", + "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==" + }, "collection-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", @@ -1966,6 +2075,11 @@ "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=", "dev": true }, + "convert-css-length": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz", + "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==" + }, "convert-source-map": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", @@ -2108,12 +2222,26 @@ "schema-utils": "^2.6.0" } }, + "css-vendor": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", + "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", + "requires": { + "@babel/runtime": "^7.6.2", + "is-in-browser": "^1.0.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csstype": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz", + "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==" + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -2233,6 +2361,15 @@ "randombytes": "^2.0.0" } }, + "dom-helpers": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz", + "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==", + "requires": { + "@babel/runtime": "^7.6.3", + "csstype": "^2.6.7" + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -3490,6 +3627,11 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "icss-utils": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz", @@ -3683,6 +3825,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -3812,6 +3959,83 @@ } } }, + "jss": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.3.tgz", + "integrity": "sha512-AcDvFdOk16If9qvC9KN3oFXsrkHWM9+TaPMpVB9orm3z+nq1Xw3ofHyflRe/mkSucRZnaQtlhZs1hdP3DR9uRw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.3.tgz", + "integrity": "sha512-rild/oFKFkmRP7AoiX9D6bdDAUfmJv8c7sEBvFoi+JP31dn2W8nw4txMKGnV1LJKlFkYprdZt1X99Uvztl1hug==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "^10.0.3" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.3.tgz", + "integrity": "sha512-n+XfVLPF9Qh7IOTdQ8M4oRpjpg6egjr/r0NNytubbCafMgCILJYIVrMTGgOTydH+uvak8onQY3f/F9hasPUx6g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.0.3" + } + }, + "jss-plugin-global": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.3.tgz", + "integrity": "sha512-kNotkAciJIXpIGYnmueaIifBne9rdq31O8Xq1nF7KMfKlskNRANTcEX5rVnsGKl2yubTMYfjKBFCeDgcQn6+gA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.0.3" + } + }, + "jss-plugin-nested": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.3.tgz", + "integrity": "sha512-OMucRs9YLvWlZ3Ew+VhdgNVMwSS2zZy/2vy+s/etvopnPUzDHgCnJwdY2Wx/SlhLGERJeKKufyih2seH+ui0iw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.0.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.3.tgz", + "integrity": "sha512-ufhvdCMnRcDa0tNHoZ12OcVNQQyE10yLMohxo/UIMarLV245rM6n9D19A12epjldRgyiS13SoSyLFCJEobprYg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.0.3" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.3.tgz", + "integrity": "sha512-RWwIT2UBAIwf3f6DQtt5gyjxHMRJoeO9TQku+ueR8dBMakqSSe8vFwQNfjXEoe0W+Tez5HZCTkZKNMulv3Z+9A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.0.3" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.3.tgz", + "integrity": "sha512-zVs6e5z4tFRK/fJ5kuTLzXlTFQbLeFTVwk7lTZiYNufmZwKT0kSmnOJDUukcSe7JLGSRztjWhnHB/6voP174gw==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.7", + "jss": "^10.0.3" + } + }, "kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", @@ -4227,6 +4451,11 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "normalize-scroll-left": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz", + "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -4525,6 +4754,11 @@ "find-up": "^3.0.0" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -4798,6 +5032,17 @@ "tiny-warning": "^1.0.0" } }, + "react-transition-group": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "readable-stream": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", diff --git a/package.json b/package.json index 6b0362d..2f9ac62 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ }, "homepage": "https://github.com/Sarsoo/spotify-web#readme", "dependencies": { + "@material-ui/core": "^4.9.0", + "@material-ui/icons": "^4.5.1", "axios": "^0.19.2", "chart.js": "^2.9.3", "react": "^16.12.0", diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js index c2c081d..f1d19f4 100644 --- a/src/js/MusicTools.js +++ b/src/js/MusicTools.js @@ -12,6 +12,25 @@ import NotFound from "./Error/NotFound.js"; import showMessage from "./Toast.js" +import GlobalTheme from './Theme.js'; + +import { Typography } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +import Drawer from '@material-ui/core/Drawer'; +import List from '@material-ui/core/List'; +import Divider from '@material-ui/core/Divider'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import HomeIcon from '@material-ui/icons/Home'; +import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace } from '@material-ui/icons' + const axios = require('axios'); class MusicTools extends Component { @@ -20,8 +39,10 @@ class MusicTools extends Component { super(props); this.state = { type: null, - spotify_linked: null + spotify_linked: null, + drawerOpen: false } + this.setOpen = this.setOpen.bind(this); } componentDidMount() { @@ -50,23 +71,73 @@ class MusicTools extends Component { }); } + setOpen(bool){ + this.setState({ + drawerOpen: bool + }) + } + render(){ return (
- - - - - - - { this.state.type == 'admin' && } - - - -
Home
Playlists
Maths
Settings
Admin
Logout
sarsoo.xyz
- -
+ + + + this.setOpen(true)}> + + + + Music Tools + + + + +
+ this.setOpen(false)}> + + +
+ + + + + + + + + + + + + + + + + + + { this.state.type == 'admin' && + + + + + } + + + + + + + + + + + +
diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js index b0035c9..a6367bb 100644 --- a/src/js/Playlist/PlaylistsView.js +++ b/src/js/Playlist/PlaylistsView.js @@ -1,8 +1,13 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import { Link } from "react-router-dom"; +import { Button, ButtonGroup, Typography, Card, Grid } 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'; const axios = require('axios'); import showMessage from "../Toast.js" +import GlobalTheme from "../Theme.js" class PlaylistsView extends Component { @@ -103,45 +108,48 @@ class PlaylistsView extends Component { function Table(props){ return ( - + + { props.playlists.length == 0 ? ( - - - - - + + No Playlists + ) : ( - - { props.playlists.map((playlist) => ) } - - - - + key={ playlist.name }/>) )} -
- No Playlists -
+ + + ); } function Row(props){ return ( - - - - - - ); -} - -function PlaylistLink(props){ - return ( - - { props.playlist.name } - + + + + + { props.playlist.name } + + + {/* */} + + + + + + + + + ); } diff --git a/src/js/Theme.js b/src/js/Theme.js new file mode 100644 index 0000000..2e3c72a --- /dev/null +++ b/src/js/Theme.js @@ -0,0 +1,31 @@ +import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'; + +let GlobalTheme = createMuiTheme({ + root: { + flexGrow: 1, + }, + typography: { + button: { + fontSize: '1rem', + }, + }, + card: { + display: 'flex', + spacing: 5 + }, + palette: { + type: 'dark', + primary: { + main: '#1a237e', + }, + secondary: { + main: '#1a237e', + } + }, + status: { + danger: 'orange', + }, +}); +GlobalTheme = responsiveFontSizes(GlobalTheme); + +export default GlobalTheme; \ No newline at end of file From 47f758bd9037eca1fc637b6a9a3b086eadb49cff Mon Sep 17 00:00:00 2001 From: aj Date: Sun, 26 Jan 2020 20:33:09 +0000 Subject: [PATCH 2/6] initial code splitting --- package.json | 2 +- src/js/Index/Index.js | 8 ------- src/js/Maths/Maths.js | 2 +- src/js/MusicTools.js | 39 ++++++++++++++++-------------- src/js/Playlist/NewPlaylist.js | 1 - src/js/Playlist/Playlists.js | 1 - src/js/Playlist/PlaylistsView.js | 41 ++++++++++++++++---------------- src/js/Playlist/View/Count.js | 12 ++++++---- src/js/Playlist/View/View.js | 21 +++++++++++----- webpack.common.js | 6 +++-- 10 files changed, 70 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 2f9ac62..a04c0a0 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "webpack --config webpack.prod.js", + "build": "webpack --config webpack.prod.js --env production", "devbuild": "webpack --config webpack.dev.js" }, "repository": { diff --git a/src/js/Index/Index.js b/src/js/Index/Index.js index 0f3d267..dc7c701 100644 --- a/src/js/Index/Index.js +++ b/src/js/Index/Index.js @@ -1,5 +1,4 @@ import React, { Component } from "react"; -const axios = require('axios'); class Index extends Component{ @@ -11,13 +10,6 @@ class Index extends Component{ render(){ return ( - - - - - @@ -80,6 +80,7 @@ class Count extends Component { + }> + - ); } } +function LoadingMessage(props) { + return ; +} + export default Count; \ No newline at end of file diff --git a/src/js/Playlist/View/View.js b/src/js/Playlist/View/View.js index f92c7ab..d816995 100644 --- a/src/js/Playlist/View/View.js +++ b/src/js/Playlist/View/View.js @@ -1,12 +1,8 @@ import React, { Component } from "react"; -import { ThemeProvider, Typography } from "@material-ui/core"; -import { BrowserRouter as Route, Link} from "react-router-dom"; - -import GlobalTheme from "../../Theme"; - -const LazyEdit = React.lazy(() => import("./Edit")) -const LazyCount = React.lazy(() => import("./Count")) +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{ @@ -28,18 +24,12 @@ class View extends Component{ - }> - } /> - } /> - + } /> + } />
-

Music Tools

-
diff --git a/src/js/Maths/Maths.js b/src/js/Maths/Maths.js index f8f9c42..ba03ad2 100644 --- a/src/js/Maths/Maths.js +++ b/src/js/Maths/Maths.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; +import { BrowserRouter as Route, Link} from "react-router-dom"; import Count from "./Count.js"; diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js index f1d19f4..b155da2 100644 --- a/src/js/MusicTools.js +++ b/src/js/MusicTools.js @@ -1,13 +1,6 @@ import React, { Component } from "react"; import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; -import Index from "./Index/Index.js"; -import Maths from "./Maths/Maths.js"; -import Playlists from "./Playlist/Playlists.js"; -import PlaylistView from "./Playlist/View/View.js"; -import Settings from "./Settings/Settings.js"; -import Admin from "./Admin/Admin.js"; - import NotFound from "./Error/NotFound.js"; import showMessage from "./Toast.js" @@ -33,6 +26,13 @@ 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")) + class MusicTools extends Component { constructor(props){ @@ -88,7 +88,7 @@ class MusicTools extends Component { - Music Tools + Music Tools @@ -137,25 +137,28 @@ class MusicTools extends Component { -
+
- - - - - { this.state.type == 'admin' && } - + }> + + + + + { this.state.type == 'admin' && } + +
- ); } } +function LoadingMessage(props) { + return Loading...; +} + export default MusicTools; \ No newline at end of file diff --git a/src/js/Playlist/NewPlaylist.js b/src/js/Playlist/NewPlaylist.js index c98088e..ca53a22 100644 --- a/src/js/Playlist/NewPlaylist.js +++ b/src/js/Playlist/NewPlaylist.js @@ -1,5 +1,4 @@ import React, { Component } from "react"; -import { BrowserRouter as Redirect } from "react-router-dom"; const axios = require('axios'); import showMessage from "../Toast.js" diff --git a/src/js/Playlist/Playlists.js b/src/js/Playlist/Playlists.js index 03299dc..822a01e 100644 --- a/src/js/Playlist/Playlists.js +++ b/src/js/Playlist/Playlists.js @@ -1,6 +1,5 @@ import React, { Component } from "react"; import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; -const axios = require('axios'); import PlaylistsView from "./PlaylistsView.js" import NewPlaylist from "./NewPlaylist.js"; diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js index a6367bb..f7d40c2 100644 --- a/src/js/Playlist/PlaylistsView.js +++ b/src/js/Playlist/PlaylistsView.js @@ -95,18 +95,18 @@ class PlaylistsView extends Component { render() { - const table = ; - const loadingMessage =

loading...

; + const loadingMessage = Loading...; - return this.state.isLoading ? loadingMessage : table; + return this.state.isLoading ? loadingMessage : grid; } } -function Table(props){ +function PlaylistGrid(props){ return ( No Playlists ) : ( - props.playlists.map((playlist) => ) @@ -131,24 +131,23 @@ function Table(props){ ); } -function Row(props){ +function PlaylistCard(props){ return ( - - - - { props.playlist.name } - - - {/* */} - - - - - - - - + + + + { props.playlist.name } + + + + + + + + + + ); } diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js index 40070a5..11bcffa 100644 --- a/src/js/Playlist/View/Count.js +++ b/src/js/Playlist/View/Count.js @@ -2,7 +2,8 @@ import React, { Component } from "react"; const axios = require('axios'); import showMessage from "../../Toast.js" -import PieChart from "../../Maths/PieChart.js"; + +const LazyPieChart = React.lazy(() => import("../../Maths/PieChart")) class Count extends Component { @@ -63,7 +64,9 @@ class Count extends Component { } render() { + const loadingMessage = Loading...; return ( + }> @@ -79,7 +82,7 @@ class Count extends Component { + ); } } diff --git a/src/js/Playlist/View/View.js b/src/js/Playlist/View/View.js index 1c3ed74..f92c7ab 100644 --- a/src/js/Playlist/View/View.js +++ b/src/js/Playlist/View/View.js @@ -1,9 +1,12 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; -const axios = require('axios'); +import { ThemeProvider, Typography } from "@material-ui/core"; +import { BrowserRouter as Route, Link} from "react-router-dom"; + +import GlobalTheme from "../../Theme"; + +const LazyEdit = React.lazy(() => import("./Edit")) +const LazyCount = React.lazy(() => import("./Count")) -import Edit from "./Edit.js"; -import Count from "./Count.js"; class View extends Component{ @@ -25,12 +28,18 @@ class View extends Component{ - } /> - } /> + }> + } /> + } /> +
Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%
-
-
-
); } } +function LoadingMessage(props) { + return Loading...; +} + export default View; \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index 1a357b5..0a3ea8c 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -27,7 +27,9 @@ module.exports = { ], resolve: { extensions: ["*", ".js", ".jsx"] }, output: { - filename: '[name].bundle.js', - path: path.resolve(__dirname, 'build/js') + filename: '[name].bundle.js', + chunkFilename: '[name].bundle.js', + path: path.resolve(__dirname, 'build/js'), + publicPath: '/build/js/' } }; From e2b2c4a16bfe4af77c306116a0d2ada955779a68 Mon Sep 17 00:00:00 2001 From: aj Date: Mon, 27 Jan 2020 21:40:23 +0000 Subject: [PATCH 3/6] fixed playlist component loading --- src/js/Playlist/View/Count.js | 11 ++++++++--- src/js/Playlist/View/View.js | 20 +++++--------------- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js index 11bcffa..1aa2eb3 100644 --- a/src/js/Playlist/View/Count.js +++ b/src/js/Playlist/View/Count.js @@ -1,7 +1,9 @@ import React, { Component } from "react"; +import { ThemeProvider, Typography } from "@material-ui/core"; const axios = require('axios'); import showMessage from "../../Toast.js" +import GlobalTheme from "../../Theme"; const LazyPieChart = React.lazy(() => import("../../Maths/PieChart")) @@ -64,9 +66,7 @@ class Count extends Component { } render() { - const loadingMessage = Loading...; return ( - }>
Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%
Last Updated {this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}
Update
Loading...
); } } -function LoadingMessage(props) { - return Loading...; -} - export default View; \ No newline at end of file From 6afe8a1ffd954a67e7757f0147770d6a71b97952 Mon Sep 17 00:00:00 2001 From: aj Date: Tue, 28 Jan 2020 00:11:24 +0000 Subject: [PATCH 4/6] 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); From 3de07affa405cada91b687ebcf3f94dc0bdcf85e Mon Sep 17 00:00:00 2001 From: aj Date: Wed, 29 Jan 2020 00:12:41 +0000 Subject: [PATCH 5/6] completed initial material redesign --- src/js/Admin/AdminRouter.js | 42 ++- src/js/Admin/Functions.js | 36 ++- src/js/Admin/Lock.js | 66 ++--- src/js/Admin/Tasks.js | 47 ++-- src/js/Maths/MathsRouter.js | 13 +- src/js/Maths/PieChart.js | 5 +- src/js/MusicTools.js | 6 +- src/js/Playlist/AllPlaylistsRouter.js | 9 +- src/js/Playlist/New.js | 78 +++--- src/js/Playlist/PlaylistsList.js | 28 +- src/js/Playlist/View/Count.js | 104 ++++---- src/js/Playlist/View/Edit.js | 349 +++++++++++++------------ src/js/Playlist/View/PlaylistRouter.js | 31 +-- src/js/Settings/SettingsRouter.js | 2 +- src/js/Theme.js | 10 +- 15 files changed, 430 insertions(+), 396 deletions(-) diff --git a/src/js/Admin/AdminRouter.js b/src/js/Admin/AdminRouter.js index d3c565b..f00417b 100644 --- a/src/js/Admin/AdminRouter.js +++ b/src/js/Admin/AdminRouter.js @@ -1,25 +1,49 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -const axios = require('axios'); +import { Route, Link, Switch } from "react-router-dom"; +import { Paper, Tabs, Tab} from '@material-ui/core'; + import Lock from "./Lock.js"; import Functions from "./Functions.js"; import Tasks from "./Tasks.js"; class Admin 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 (
-
    -
  • Lock Accounts
    • -
  • Functions
    • -
  • Tasks
    • -
- + + + + + + + + - +
); } diff --git a/src/js/Admin/Functions.js b/src/js/Admin/Functions.js index 3871c51..be600fd 100644 --- a/src/js/Admin/Functions.js +++ b/src/js/Admin/Functions.js @@ -2,6 +2,7 @@ import React, { Component } from "react"; const axios = require('axios'); import showMessage from "../Toast.js" +import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@material-ui/core"; class Functions extends Component { @@ -34,27 +35,20 @@ class Functions extends Component { render () { return ( - - - - - - - - - - - - - - -
-

Admin Functions

-
- -
- -
); +
+ + + Admin Functions + + + + + + + + +
+ ); } } diff --git a/src/js/Admin/Lock.js b/src/js/Admin/Lock.js index d04099a..56d9ad9 100644 --- a/src/js/Admin/Lock.js +++ b/src/js/Admin/Lock.js @@ -1,8 +1,18 @@ import React, { Component } from "react"; const axios = require('axios'); +import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + import showMessage from "../Toast.js" +const useStyles = makeStyles({ + root: { + background: '#9e9e9e', + color: '#212121' + }, + }); + class Lock extends Component { constructor(props){ @@ -46,42 +56,38 @@ class Lock extends Component { const loadingMessage =

loading...

; - return this.state.isLoading ? loadingMessage : -
- - - - - - - - { this.state.accounts.map((account) => ) } - -
-

- Account Locks -

-
-
; + return this.state.isLoading ? loadingMessage : +
+ + + Account Locks + + { this.state.accounts.map((account) => ) } + + + +
} } function Row(props){ + const classes = useStyles(); return ( - - { props.account.username } - - { props.account.last_login } - - - - - + + + + { props.account.username } + { props.account.last_login } + + + + + + ); } diff --git a/src/js/Admin/Tasks.js b/src/js/Admin/Tasks.js index c9742cd..0d0f5b2 100644 --- a/src/js/Admin/Tasks.js +++ b/src/js/Admin/Tasks.js @@ -1,6 +1,8 @@ import React, { Component } from "react"; const axios = require('axios'); +import { Card, CardContent, Typography, Grid } from '@material-ui/core'; + import showMessage from "../Toast.js" class Tasks extends Component { @@ -30,41 +32,26 @@ class Tasks extends Component { } render () { - return ( - - - - - - - { this.state.tasks.map((entry) => )} - - - - - -
-

Running Tasks

-
- {this.state.total_tasks} Currently Running -
); + return ( +
+ + { this.state.tasks.map((entry) => )} + +
+ ); } } function TaskType(props) { return ( - - - - {props.url}: {props.count} - - - {props.times.map((entry) => - - {entry} - - )} - + + + + {props.url}: {props.count} + {props.times.map((entry) => {entry})} + + + ); } diff --git a/src/js/Maths/MathsRouter.js b/src/js/Maths/MathsRouter.js index ba03ad2..52fedcd 100644 --- a/src/js/Maths/MathsRouter.js +++ b/src/js/Maths/MathsRouter.js @@ -1,21 +1,12 @@ import React, { Component } from "react"; -import { BrowserRouter as Route, Link} from "react-router-dom"; +import { BrowserRouter as Route} from "react-router-dom"; import Count from "./Count.js"; class Maths extends Component { render() { - return ( - -
-
    -
  • count
    • -
- - } /> -
- ); + return } />; } } diff --git a/src/js/Maths/PieChart.js b/src/js/Maths/PieChart.js index 2cf18b1..b576449 100644 --- a/src/js/Maths/PieChart.js +++ b/src/js/Maths/PieChart.js @@ -21,7 +21,10 @@ class PieChart extends Component { }, options: { legend : { - display : true + display : true, + labels: { + fontColor: 'white' + } }, elements: { arc : { diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js index c3f3133..3f2bc6c 100644 --- a/src/js/MusicTools.js +++ b/src/js/MusicTools.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; +import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import NotFound from "./Error/NotFound.js"; @@ -80,7 +80,6 @@ class MusicTools extends Component { render(){ return ( -
@@ -143,7 +142,6 @@ class MusicTools extends Component {
-
}> @@ -157,7 +155,7 @@ class MusicTools extends Component {
-
+ ); } diff --git a/src/js/Playlist/AllPlaylistsRouter.js b/src/js/Playlist/AllPlaylistsRouter.js index cbb2cf1..6f95c59 100644 --- a/src/js/Playlist/AllPlaylistsRouter.js +++ b/src/js/Playlist/AllPlaylistsRouter.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; +import { Route, Switch } from "react-router-dom"; import PlaylistsView from "./PlaylistsList.js" import NewPlaylist from "./New.js"; @@ -8,12 +8,7 @@ import ScratchView from "./ScratchView.js"; class Playlists extends Component { render(){ return ( -
-
    -
  • New
    • -
  • Play
    • -
- +
diff --git a/src/js/Playlist/New.js b/src/js/Playlist/New.js index ca53a22..e8eaf8b 100644 --- a/src/js/Playlist/New.js +++ b/src/js/Playlist/New.js @@ -1,6 +1,8 @@ import React, { Component } from "react"; const axios = require('axios'); +import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@material-ui/core'; + import showMessage from "../Toast.js" class NewPlaylist extends Component { @@ -81,44 +83,46 @@ class NewPlaylist extends Component { render(){ return ( - - - - - - - - - - - - - - - - - - -
-

New Playlist

-
- - - + + + + New + + + + Type +
- -
-

{this.state.description} -
+ inputProps={{ + name: 'type', + id: 'type-select', + }} + > + + + + + + + + + + { this.state.description } + + + + + + + ); } diff --git a/src/js/Playlist/PlaylistsList.js b/src/js/Playlist/PlaylistsList.js index 8855fea..5dc37a1 100644 --- a/src/js/Playlist/PlaylistsList.js +++ b/src/js/Playlist/PlaylistsList.js @@ -3,11 +3,9 @@ import { Link } from "react-router-dom"; 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'; const axios = require('axios'); import showMessage from "../Toast.js" -import GlobalTheme from "../Theme.js" class PlaylistsView extends Component { @@ -106,26 +104,32 @@ class PlaylistsView extends Component { function PlaylistGrid(props){ return ( - + + + + + + { props.playlists.length == 0 ? ( - + No Playlists ) : ( props.playlists.map((playlist) => ) + key={ playlist.name }/>) )} - - ); } @@ -139,10 +143,12 @@ function PlaylistCard(props){ - - - - + + + + diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js index f6c87bf..9910df8 100644 --- a/src/js/Playlist/View/Count.js +++ b/src/js/Playlist/View/Count.js @@ -1,9 +1,9 @@ import React, { Component } from "react"; -import { ThemeProvider, Typography } from "@material-ui/core"; const axios = require('axios'); +import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core'; + import showMessage from "../../Toast.js" -import GlobalTheme from "../../Theme"; const LazyPieChart = React.lazy(() => import("../../Maths/PieChart")) @@ -67,35 +67,35 @@ export class Count extends Component { render() { return ( - - - Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}% - - - Album Count: {this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}% - - - Artist Count: {this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}% - - - Last Updated {this.state.playlist.lastfm_stat_last_refresh.toLocaleString()} - - }> - - - - - - - - + + + + + Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}% + + + Album Count: {this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}% + + + Artist Count: {this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}% + + + Last Updated {this.state.playlist.lastfm_stat_last_refresh.toLocaleString()} + + }> + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + +
); } } function LoadingMessage(props) { - return Loading...; + return Loading...; } \ No newline at end of file diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js index 3b973e5..6100ead 100644 --- a/src/js/Playlist/View/Edit.js +++ b/src/js/Playlist/View/Edit.js @@ -1,10 +1,10 @@ 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 { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, Checkbox, FormControlLabel, + CardActions, CardContent, Typography, Grid } from '@material-ui/core'; +import { Delete } from '@material-ui/icons'; +import { makeStyles } from '@material-ui/core/styles'; import showMessage from "../../Toast.js"; @@ -38,6 +38,14 @@ var lastMonth = [ 'november' ]; + +const useStyles = makeStyles({ + root: { + background: '#9e9e9e', + color: '#212121' + }, + }); + export class Edit extends Component{ constructor(props){ @@ -398,155 +406,164 @@ export class Edit extends Component{ var date = new Date(); const table = ( - - - { this.state.playlist_references.length > 0 && Managed } - { this.state.playlist_references.length > 0 && } +
+ + + {this.state.name} + + + { this.state.playlist_references.length > 0 && Managed } + { this.state.playlist_references.length > 0 && } - { this.state.parts.length > 0 && Spotify } - { this.state.parts.length > 0 && } - - -

Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive - - - - Spotify Playlist - - - - - + { this.state.parts.length > 0 && Spotify } + { this.state.parts.length > 0 && } + Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive + + + + + + + + + Managed Playlist + + + + + + + + + } + labelPlacement="bottom" + label="Shuffle"/> + + } + labelPlacement="bottom" + label="Recommendations"/> + + } + labelPlacement="bottom" + label="Library Tracks"/> + + + + + + { this.state.type == 'fmchart' && + + + } - /> - - - - - Managed Playlist - - - - - - - - - } - labelPlacement="bottom" - label="Shuffle"/> - - } - labelPlacement="bottom" - label="Recommendations"/> - - } - labelPlacement="bottom" - label="Library Tracks"/> - - - { this.state.type == 'fmchart' && - - } - { this.state.type == 'fmchart' && - - Chart Range - - - } - { this.state.type == 'recents' && - - } - { this.state.type == 'recents' && - - } - label="This Month" - /> - } - { this.state.type == 'recents' && - - } - label="Last Month" - /> - } - - Type - - - + { this.state.type == 'fmchart' && + + + Chart Range + + + + } + { this.state.type == 'recents' && + + + + } + { this.state.type == 'recents' && + + + } + label="This Month" + labelPlacement="bottom" + /> + + } + label="Last Month" + labelPlacement="bottom" + /> + + } + + + Type + + + + + + + + - +
); return this.state.isLoading ? : table; @@ -559,18 +576,30 @@ function ReferenceEntry(props) { } function ListBlock(props) { - return props.list.map((part) => ); + return + {props.list.map((part) => )} + } -function Row (props) { +function BlockGridItem (props) { + const classes = useStyles(); return ( - - { props.part } - - props.handler(props.part, e)}> - - - - + + + + { props.part } + + + + + + ); } \ No newline at end of file diff --git a/src/js/Playlist/View/PlaylistRouter.js b/src/js/Playlist/View/PlaylistRouter.js index 1ddf19c..3bd5c5e 100644 --- a/src/js/Playlist/View/PlaylistRouter.js +++ b/src/js/Playlist/View/PlaylistRouter.js @@ -1,10 +1,7 @@ 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 { Paper, Tabs, Tab } from '@material-ui/core'; - -import GlobalTheme from "../../Theme.js" import {Edit} from "./Edit.js"; import {Count} from "./Count.js"; @@ -28,20 +25,18 @@ class View extends Component{ render() { return (
- - - - - - - - + + + + + + } /> } /> diff --git a/src/js/Settings/SettingsRouter.js b/src/js/Settings/SettingsRouter.js index a664e49..d3c3955 100644 --- a/src/js/Settings/SettingsRouter.js +++ b/src/js/Settings/SettingsRouter.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom"; +import { BrowserRouter as Route, Link } from "react-router-dom"; import ChangePassword from "./ChangePassword.js"; import SpotifyLink from "./SpotifyLink.js"; diff --git a/src/js/Theme.js b/src/js/Theme.js index ec60631..c8780f7 100644 --- a/src/js/Theme.js +++ b/src/js/Theme.js @@ -5,8 +5,8 @@ let GlobalTheme = createMuiTheme({ display: 'flex', flexDirection: 'column', alignItems: 'center', - spacing: 20 }, + spacing: 4, typography: { button: { fontSize: '1rem', @@ -17,16 +17,20 @@ let GlobalTheme = createMuiTheme({ spacing: 5 }, card: { + marginTop: 24, display: 'flex', spacing: 5 }, palette: { type: 'dark', primary: { - main: '#1a237e', + main: '#1976d2', }, secondary: { - main: '#2196f3', + main: '#dc004e', + }, + error: { + main: '#f44336' } }, status: { From 6ad049efeba084acc239fdce0f42dea24f3fb193 Mon Sep 17 00:00:00 2001 From: aj Date: Wed, 29 Jan 2020 12:31:19 +0000 Subject: [PATCH 6/6] fixed auth process, material settings --- music/auth/auth.py | 4 +- src/js/Index/Index.js | 46 +++++++++--------- src/js/Playlist/New.js | 13 +++-- src/js/Playlist/View/Edit.js | 5 +- src/js/Settings/ChangePassword.js | 79 ++++++++++++++++--------------- src/js/Settings/LastFM.js | 52 ++++++++++---------- src/js/Settings/SettingsRouter.js | 45 +++++++++++++----- src/js/Settings/SpotifyLink.js | 36 ++++++-------- 8 files changed, 155 insertions(+), 125 deletions(-) diff --git a/music/auth/auth.py b/music/auth/auth.py index 5e10df5..520afe3 100644 --- a/music/auth/auth.py +++ b/music/auth/auth.py @@ -114,7 +114,7 @@ def auth(): 'client_id': client_id, 'response_type': 'code', 'scope': 'playlist-modify-public playlist-modify-private playlist-read-private user-read-playback-state user-modify-playback-state user-library-read', - 'redirect_uri': 'https://spotify.sarsoo.xyz/auth/spotify/token' + 'redirect_uri': 'https://music.sarsoo.xyz/auth/spotify/token' } ) @@ -141,7 +141,7 @@ def token(): data = { 'grant_type': 'authorization_code', 'code': code, - 'redirect_uri': 'https://spotify.sarsoo.xyz/auth/spotify/token' + 'redirect_uri': 'https://music.sarsoo.xyz/auth/spotify/token' } req = requests.post('https://accounts.spotify.com/api/token', data=data, headers=headers) diff --git a/src/js/Index/Index.js b/src/js/Index/Index.js index dc7c701..1d14848 100644 --- a/src/js/Index/Index.js +++ b/src/js/Index/Index.js @@ -1,5 +1,7 @@ import React, { Component } from "react"; +import { Card, CardContent, Typography, Grid } from '@material-ui/core'; + class Index extends Component{ constructor(props){ @@ -9,30 +11,26 @@ class Index extends Component{ render(){ return ( - - - - - - - - - - - - - - - -
- Construct spotify playlists from selections of other playlists -
- Group sub-genre playlists -
- Optionally append auto-generated recommendations -
-

Playlists are run multiple times a day -
+
+ + + + + Construct spotify playlists from selections of other playlists + + + Group sub-genre playlists + + + Optionally append auto-generated recommendations + + + Playlists are run multiple times a day + + + + +
); } } diff --git a/src/js/Playlist/New.js b/src/js/Playlist/New.js index e8eaf8b..34cf4a4 100644 --- a/src/js/Playlist/New.js +++ b/src/js/Playlist/New.js @@ -83,13 +83,14 @@ class NewPlaylist extends Component { render(){ return ( +
- + New - + Type - + + value={this.state.name} + className="full-width" /> { this.state.description } @@ -123,6 +127,7 @@ class NewPlaylist extends Component { +
); } diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js index 6100ead..4745855 100644 --- a/src/js/Playlist/View/Edit.js +++ b/src/js/Playlist/View/Edit.js @@ -125,7 +125,7 @@ export class Edit extends Component{ getPlaylistInfo(){ return axios.get(`/api/playlist?name=${ this.state.name }`); - } + } getPlaylists(){ return axios.get(`/api/playlists`); @@ -168,7 +168,7 @@ export class Edit extends Component{ showMessage(`Error Updating Boundary Value (${error.response.status})`); }); } - + handleRecommendationsSampleChange(sample){ if(sample == ''){ sample = 0; @@ -421,6 +421,7 @@ export class Edit extends Component{ -
- - - - - - - - - - - - - - - - - - - - - - - -

Change Password

Current: + + + + + + Change Password + + +
New: + + +
New Again: + + +
-
- { this.state.error &&

{this.state.errorValue}

} + name="new2" + value={this.state.new2} + className="full-width" /> + + { this.state.error && {this.state.errorValue}} + + + + + + +
); } diff --git a/src/js/Settings/LastFM.js b/src/js/Settings/LastFM.js index 88174d1..3f673bd 100644 --- a/src/js/Settings/LastFM.js +++ b/src/js/Settings/LastFM.js @@ -1,6 +1,8 @@ import React, { Component } from "react"; const axios = require('axios'); +import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@material-ui/core"; + import showMessage from "../Toast.js" class LastFM extends Component { @@ -64,30 +66,32 @@ class LastFM extends Component { } render(){ - const table = -
- - - - - - - - - - - - - - - -

Last.fm Username

Username:
-
; + const table = +
+ +
+ + + + Last.fm Username + + + + + + + + + +
+ +
; const loadingMessage =

Loading...

; diff --git a/src/js/Settings/SettingsRouter.js b/src/js/Settings/SettingsRouter.js index d3c3955..ae7fef7 100644 --- a/src/js/Settings/SettingsRouter.js +++ b/src/js/Settings/SettingsRouter.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; -import { BrowserRouter as Route, Link } from "react-router-dom"; +import { Route, Link, Switch } from "react-router-dom"; +import { Paper, Tabs, Tab} from '@material-ui/core'; import ChangePassword from "./ChangePassword.js"; import SpotifyLink from "./SpotifyLink.js"; @@ -7,19 +8,41 @@ import LastFM from "./LastFM.js"; class Settings 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 (
-
    -
  • Password
    • -
  • Spotify
    • -
  • Last.fm
    • -
- - - - - + + + + + + + + + + + +
); } diff --git a/src/js/Settings/SpotifyLink.js b/src/js/Settings/SpotifyLink.js index 41efe8c..7d82a7f 100644 --- a/src/js/Settings/SpotifyLink.js +++ b/src/js/Settings/SpotifyLink.js @@ -1,6 +1,8 @@ import React, { Component } from "react"; const axios = require('axios'); +import { Card, Button, CardContent, CardActions, Typography } from "@material-ui/core"; + import showMessage from "../Toast.js" class SpotifyLink extends Component { @@ -29,25 +31,17 @@ class SpotifyLink extends Component { render(){ const table = - - - - - - - - - - - - - - -

Spotify Link

- Status: { this.state.spotify_linked ? "Linked" : "Unlinked" } -
- { this.state.spotify_linked ? : } -
; +
+ + + Admin Functions + Status: { this.state.spotify_linked ? "Linked" : "Unlinked" } + + + { this.state.spotify_linked ? : } + + +
; const loadingMessage =

Loading...

; @@ -56,11 +50,11 @@ class SpotifyLink extends Component { } function AuthButton(props) { - return Auth; + return ; } function DeAuthButton(props) { - return De-Auth; + return ; } export default SpotifyLink; \ No newline at end of file