added scrobble count in maths

src/js/Maths/Count.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+const axios = require('axios');
+
+import showMessage from "../Toast.js";
+
+class Count extends Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+            playlists: [],
+            isLoading: true
+        }
+        this.getPlaylists();
+    }
+
+    getPlaylists(){
+        axios.get('/api/playlists')
+        .then((response) => {
+
+            var playlists = [];
+
+            var playlist_in;
+            for(playlist_in of response.data.playlists) {
+                if(playlist_in['lastfm_stat_last_refresh'] != undefined){
+                    playlists.push(playlist_in);
+                }
+            }
+
+            playlists.sort(function(a, b){
+                return b['lastfm_stat_count'] - a['lastfm_stat_count'];
+            });
+
+            this.setState({
+                playlists: playlists,
+                isLoading: false
+            });
+        })
+        .catch((error) => {
+            console.log(error);
+            showMessage(`error getting playlists (${error.response.status})`);
+        });
+    }
+
+    render() {
+
+        var table = <table className="app-table max-width">
+                <thead>
+                    <tr>
+                        <th colSpan='2'>
+                            <h1 className="ui-text center-text text-no-select">scrobble counts</h1>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {this.state.playlists.map((entry) => <Row name={entry.name} count={entry.lastfm_stat_count} percent={entry.lastfm_stat_percent} key={entry.name}/>)}
+                </tbody>
+            </table>;
+
+        const loadingMessage = <p className="center-text">loading...</p>;
+
+        return this.state.isLoading ? loadingMessage : table;
+    }
+}
+
+function Row(props){
+    return <tr>
+        <td className="ui-text center-text text-no-select" style={{width: '50%'}}>{props.name}</td>
+        <td className="ui-text center-text text-no-select"><b>{props.count.toLocaleString()} / {props.percent}%</b></td>
+    </tr>;
+}
+
+export default Count;

src/js/Maths/Maths.js

@@ -1,13 +1,19 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 
+import Count from "./Count.js";
+
 class Maths extends Component {
 
     render() {
         return (
+            
             <div>
-                
+                <ul className="navbar" style={{width: "100%"}}>
+                    <li><Link to={`${this.props.match.url}/count`}>count</Link></li>
+                </ul>
 
+                <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
             </div>
         );
     }

src/js/Playlist/View/Edit.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 const axios = require('axios');
 
-import showMessage from "../../Toast.js"
+import showMessage from "../../Toast.js";
 
 var thisMonth = [
     'january',

src/js/PlaylistManager.js

@@ -58,7 +58,7 @@ class PlaylistManager extends Component {
                         <tbody>
                         <tr><td><span><Link to="/app">home</Link></span></td></tr>
                         <tr><td><Link to="/app/playlists">playlists</Link></td></tr>
-                        {/* <tr><td><Link to="/app/maths">maths</Link></td></tr> */}
+                        <tr><td><Link to="/app/maths/count">maths</Link></td></tr>
                         <tr><td><Link to="/app/settings/password">settings</Link></td></tr>
                         { this.state.type == 'admin' && <tr><td><Link to="/app/admin/lock">admin</Link></td></tr> }
                         <tr><td><a href="/auth/logout">logout</a></td></tr>