diff --git a/docs/index.rst b/docs/index.rst index a452bac..2805352 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -2,18 +2,12 @@ Music Tools ======================================= .. toctree:: - :maxdepth: 1 + :maxdepth: 2 :caption: Contents: - Modules - src/music - src/music.api - src/music.auth - src/music.cloud - src/music.db - src/music.model - src/music.tasks - src/MusicTools + Py + Js + All Modules `Music Tools `_ ---------------------------------------------- @@ -22,7 +16,7 @@ Music Tools Music Tools is a web app for creating smart Spotify playlists. The app is based on `spotframework `_ and `fmframework `_ for interfacing with Spotify and Last.fm. The app is currently hosted on Google's Cloud Platform. -The system is composed of a Flask web server with a Fireo ORM layer and longer tasks dispatched to Cloud Tasks or Functions. +The backend is composed of a Flask web server with a Fireo ORM layer and longer tasks dispatched to Cloud Tasks or Functions. The frontend is a React app with material UI components and Axios for HTTP requests. .. image:: Playlists.png diff --git a/docs/src/MusicTools.Admin.rst b/docs/src/MusicTools.Admin.rst new file mode 100644 index 0000000..aa10ade --- /dev/null +++ b/docs/src/MusicTools.Admin.rst @@ -0,0 +1,34 @@ +Admin +================= + +Router +-------- + +.. js:autoclass:: Admin + :members: + :private-members: + +Lock +------------------ + +.. js:autoclass:: Lock + :members: + :private-members: + +.. js:autofunction:: Row + +Functions +-------------------- + +.. js:autoclass:: Functions + :members: + :private-members: + +Tasks +-------------------- + +.. js:autoclass:: Tasks + :members: + :private-members: + +.. js:autofunction:: TaskType \ No newline at end of file diff --git a/docs/src/MusicTools.Maths.rst b/docs/src/MusicTools.Maths.rst new file mode 100644 index 0000000..bc50182 --- /dev/null +++ b/docs/src/MusicTools.Maths.rst @@ -0,0 +1,17 @@ +Maths +================= + +Bar Chart +----------------- + +.. js:autoclass:: BarChart + :members: + :private-members: + +Pie Chart +------------------ + +.. js:autoclass:: PieChart + :members: + :private-members: + diff --git a/docs/src/MusicTools.MusicTools.rst b/docs/src/MusicTools.MusicTools.rst deleted file mode 100644 index 06a6bb6..0000000 --- a/docs/src/MusicTools.MusicTools.rst +++ /dev/null @@ -1,6 +0,0 @@ -MusicTools -================= - -.. js:autoclass:: MusicTools - :members: - :private-members: \ No newline at end of file diff --git a/docs/src/MusicTools.Playlist.rst b/docs/src/MusicTools.Playlist.rst index 5e3b698..4dd7a52 100644 --- a/docs/src/MusicTools.Playlist.rst +++ b/docs/src/MusicTools.Playlist.rst @@ -8,7 +8,13 @@ Router :members: :private-members: -Playlists List +For managing playlists list pages for diverting to new playlist page + +.. js:autoclass:: PlaylistRouter.View + :members: + :private-members: + +Cards List ------------------ .. js:autoclass:: PlaylistsView @@ -32,14 +38,7 @@ New Playlist Card :members: :private-members: -Playlist Router ------------------- - -.. js:autoclass:: PlaylistRouter.View - :members: - :private-members: - -Playlist View +View/Edit Card ------------------ .. js:autoclass:: Edit @@ -52,7 +51,7 @@ Playlist View .. js:autofunction:: Edit.BlockGridItem -Playlist Stats View +Stats Card ----------------------- .. js:autoclass:: Count diff --git a/docs/src/MusicTools.Settings.rst b/docs/src/MusicTools.Settings.rst new file mode 100644 index 0000000..589dbaa --- /dev/null +++ b/docs/src/MusicTools.Settings.rst @@ -0,0 +1,34 @@ +Settings +================= + +Router +-------- + +.. js:autoclass:: Settings + :members: + :private-members: + +Change Password +------------------ + +.. js:autoclass:: ChangePassword + :members: + :private-members: + +Spotify Link +------------------ + +.. js:autoclass:: SpotifyLink + :members: + :private-members: + +.. js:autofunction:: AuthButton + +.. js:autofunction:: DeAuthButton + +Last.fm Username +------------------ + +.. js:autoclass:: LastFM + :members: + :private-members: diff --git a/docs/src/MusicTools.Tag.rst b/docs/src/MusicTools.Tag.rst index 28db4c0..aa179dd 100644 --- a/docs/src/MusicTools.Tag.rst +++ b/docs/src/MusicTools.Tag.rst @@ -8,7 +8,7 @@ Router :members: :private-members: -Tags List +Cards List ------------------ .. js:autoclass:: TagList @@ -28,3 +28,10 @@ New Tag Card :members: :private-members: +View/Edit Tag +-------------------- + +.. js:autoclass:: TagView + :members: + :private-members: + diff --git a/docs/src/MusicTools.rst b/docs/src/MusicTools.rst index e5e5ec4..3f47637 100644 --- a/docs/src/MusicTools.rst +++ b/docs/src/MusicTools.rst @@ -1,13 +1,15 @@ -Music Tools React +React Frontend =================== -Subpackages ------------ - .. toctree:: :maxdepth: 4 - MusicTools.MusicTools MusicTools.Playlist MusicTools.Tag + MusicTools.Maths + MusicTools.Admin + MusicTools.Settings +.. js:autoclass:: MusicTools + :members: + :private-members: \ No newline at end of file diff --git a/docs/src/modules.rst b/docs/src/modules.rst index 0f60f80..a0cdc3e 100644 --- a/docs/src/modules.rst +++ b/docs/src/modules.rst @@ -1,5 +1,5 @@ -music -===== +Music Tools Modules +====================== .. toctree:: :maxdepth: 4 diff --git a/docs/src/music.rst b/docs/src/music.rst index cc1f5d8..d117b03 100644 --- a/docs/src/music.rst +++ b/docs/src/music.rst @@ -1,8 +1,5 @@ -music -============= - -Subpackages ------------ +Flask Backend +==================== .. toctree:: :maxdepth: 4 @@ -14,17 +11,14 @@ Subpackages music.model music.tasks -Module contents ---------------- +music Root Module +------------------ .. automodule:: music :members: :undoc-members: :show-inheritance: -music.music module ------------------- - .. automodule:: music.music :members: :undoc-members: diff --git a/src/js/Admin/Lock.js b/src/js/Admin/Lock.js index 867c919..085bea3 100644 --- a/src/js/Admin/Lock.js +++ b/src/js/Admin/Lock.js @@ -91,7 +91,7 @@ class Lock extends Component { /** * Grid of account cards with lock buttons * @param {*} props - * @returns + * @returns Card component wrapped in grid cell */ function Row(props){ const classes = useStyles(); diff --git a/src/js/Admin/Tasks.js b/src/js/Admin/Tasks.js index dbdfcdd..41f68f3 100644 --- a/src/js/Admin/Tasks.js +++ b/src/js/Admin/Tasks.js @@ -53,7 +53,7 @@ class Tasks extends Component { /** * Grid of task cards * @param {*} props - * @returns + * @returns Card compnent wrapped in grid cell */ function TaskType(props) { return ( diff --git a/src/js/Maths/BarChart.js b/src/js/Maths/BarChart.js index 035ea0a..7e0d4fa 100644 --- a/src/js/Maths/BarChart.js +++ b/src/js/Maths/BarChart.js @@ -3,6 +3,9 @@ import { Chart, BarElement, BarController, LinearScale, CategoryScale, Legend, T Chart.register(BarElement, BarController, LinearScale, CategoryScale, Legend, Title, Tooltip); +/** + * Bar chart component using Chart.js + */ class BarChart extends Component { constructor(props) { @@ -10,6 +13,9 @@ class BarChart extends Component { this.chartRef = React.createRef(); } + /** + * Load data from react properties + */ componentDidMount() { this.chart = new Chart(this.chartRef.current, { type: 'bar', @@ -43,7 +49,7 @@ class BarChart extends Component { ticks: { color: "#d8d8d8", font: { - size: 20 + size: 16 } } }, @@ -59,7 +65,10 @@ class BarChart extends Component { } }); } - + + /** + * Re-apply data to chart on update + */ componentDidUpdate() { this.chart.data.labels = this.props.data.map(d => d.label); this.chart.data.datasets[0].data = this.props.data.map(d => d.value); diff --git a/src/js/Maths/PieChart.js b/src/js/Maths/PieChart.js index 76c3bfd..685848f 100644 --- a/src/js/Maths/PieChart.js +++ b/src/js/Maths/PieChart.js @@ -11,6 +11,9 @@ var pieColours = ['rgb(55, 61, 255)', //blue 'rgb(242, 31, 235)', //pink 'rgb(242, 164, 31)']; +/** + * Pie chart component using Chart.js + */ class PieChart extends Component { constructor(props) { @@ -18,6 +21,9 @@ class PieChart extends Component { this.chartRef = React.createRef(); } + /** + * Load data from react properties + */ componentDidMount() { this.chart = new Chart(this.chartRef.current, { type: 'doughnut', @@ -52,6 +58,9 @@ class PieChart extends Component { }); } + /** + * Re-apply data to chart on update + */ componentDidUpdate() { this.chart.data.labels = this.props.data.map(d => d.label); this.chart.data.datasets[0].data = this.props.data.map(d => d.value); diff --git a/src/js/Tag/TagList.js b/src/js/Tag/TagList.js index 70f5734..947f392 100644 --- a/src/js/Tag/TagList.js +++ b/src/js/Tag/TagList.js @@ -129,7 +129,7 @@ function TagCard(props){ {/* COUNT */} {'count' in props.tag && - { props.tag.count } + { props.tag.count.toLocaleString("en-GB") } } diff --git a/src/js/Tag/View.js b/src/js/Tag/View.js index 52a5cb6..dd060dd 100644 --- a/src/js/Tag/View.js +++ b/src/js/Tag/View.js @@ -20,7 +20,7 @@ const useStyles = makeStyles({ /** * Tag View card */ -class View extends Component{ +class TagView extends Component{ constructor(props){ super(props); @@ -221,7 +221,7 @@ class View extends Component{ /** * Validate input, make tag part add request of API - * @returns + * @returns Nothing */ handleAdd(){ @@ -298,7 +298,7 @@ class View extends Component{ var all = [...this.state.tag.artists, ...this.state.tag.albums, ...this.state.tag.tracks]; - var data = all.map((entry) => { + var scrobbleData = all.map((entry) => { return { "label": entry.name, "value": entry.count @@ -309,6 +309,17 @@ class View extends Component{ return 0; }); + var timeData = all.map((entry) => { + return { + "label": entry.name, + "value": entry.time_ms / (1000 * 60 * 60) + }; + }).sort((a, b) => { + if(a.value < b.value) { return 1; } + if(a.value > b.value) { return -1; } + return 0; + }); + const table = (
@@ -394,13 +405,21 @@ class View extends Component{ {/* PIE CHART */} - + - {/* BAR CHART */} + {/* SCROBBLE BAR CHART */} - + + + {/* TIME BAR CHART */} + { this.state.tag.time_objects && + + + + } + {/* UPDATE BUTTON */} @@ -415,7 +434,7 @@ class View extends Component{ } } -export default View; +export default TagView; /** * Grid component for holding artist/album/track cards @@ -462,7 +481,7 @@ function BlockGridItem (props) { {/* SCROBBLE COUNT */} { 'count' in props.music_obj && - 📈 { props.music_obj.count } + 📈 { props.music_obj.count.toLocaleString("en-GB") } } {/* TIME */} @@ -500,7 +519,7 @@ function StatsCard (props) { {/* SCROBBLE COUNT */} - 📈 { props.count } + 📈 { props.count.toLocaleString("en-GB") } {/* PERCENT */}