sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

changing ui case, finishing changing name to music tools

Browse Source
This commit is contained in:
aj 2020-01-24 15:59:52 +00:00
parent e1935d4b23
commit 56da9fcc77
19 changed files with 170 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
music/templates/app.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>sarsoo/spotify</title> <title>sarsoo/music</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Pirata+One|Lato" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pirata+One|Lato" rel="stylesheet">

6
src/js/Admin/Admin.js
View File

@ -11,9 +11,9 @@ class Admin extends Component {
return ( return (
<div> <div>
<ul className="navbar" style={{width: "100%"}}> <ul className="navbar" style={{width: "100%"}}>
<li><Link to={`${this.props.match.url}/lock`}>lock accounts</Link></li> <li><Link to={`${this.props.match.url}/lock`}>Lock Accounts</Link></li>
<li><Link to={`${this.props.match.url}/functions`}>functions</Link></li> <li><Link to={`${this.props.match.url}/functions`}>Functions</Link></li>
<li><Link to={`${this.props.match.url}/tasks`}>tasks</Link></li> <li><Link to={`${this.props.match.url}/tasks`}>Tasks</Link></li>
</ul> </ul>
<Route path={`${this.props.match.url}/lock`} component={Lock} /> <Route path={`${this.props.match.url}/lock`} component={Lock} />

14
src/js/Admin/Functions.js
View File

@ -15,20 +15,20 @@ class Functions extends Component {
runAllUsers(event){ runAllUsers(event){
axios.get('/api/playlist/run/users') axios.get('/api/playlist/run/users')
.then((response) => { .then((response) => {
showMessage('users run'); showMessage('Users Run');
}) })
.catch((error) => { .catch((error) => {
showMessage(`error running all users (${error.response.status})`); showMessage(`Error Running All Users (${error.response.status})`);
}); });
} }
runStats(event){ runStats(event){
axios.get('/api/spotfm/playlist/refresh/users') axios.get('/api/spotfm/playlist/refresh/users')
.then((response) => { .then((response) => {
showMessage('stats run'); showMessage('Stats Run');
}) })
.catch((error) => { .catch((error) => {
showMessage(`error running all users (${error.response.status})`); showMessage(`Error Running All Users (${error.response.status})`);
}); });
} }
@ -38,19 +38,19 @@ class Functions extends Component {
<thead> <thead>
<tr> <tr>
<th> <th>
<h1 className="text-no-select full-width center-text ui-text">admin functions</h1> <h1 className="text-no-select full-width center-text ui-text">Admin Functions</h1>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<button className="full-width button" onClick={this.runAllUsers}>run all users</button> <button className="full-width button" onClick={this.runAllUsers}>Run All Users</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<button className="full-width button" onClick={this.runStats}>run stats</button> <button className="full-width button" onClick={this.runStats}>Run Stats</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
src/js/Admin/Lock.js
View File

@ -26,7 +26,7 @@ class Lock extends Component {
}) })
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting users info (${error.response.status})`); showMessage(`Error Getting User Info (${error.response.status})`);
}); });
} }
@ -36,7 +36,7 @@ class Lock extends Component {
locked: to_state locked: to_state
}).catch((error) => { }).catch((error) => {
var lockMessage = to_state ? 'locking' : 'unlocking'; var lockMessage = to_state ? 'locking' : 'unlocking';
showMessage(`error ${lockMessage} ${username} (${error.response.status})`); showMessage(`Error ${lockMessage} ${username} (${error.response.status})`);
}).finally(() => { }).finally(() => {
this.getUserInfo(); this.getUserInfo();
}); });
@ -53,7 +53,7 @@ class Lock extends Component {
<tr> <tr>
<th colSpan='3'> <th colSpan='3'>
<h1 className="text-no-select"> <h1 className="text-no-select">
account locks Account Locks
</h1> </h1>
</th> </th>
</tr> </tr>
@ -78,7 +78,7 @@ function Row(props){
<td style={{width: "30%"}}> <td style={{width: "30%"}}>
<button className="button full-width" <button className="button full-width"
onClick={(e) => props.handler(e, props.account.username, !props.account.locked)}> onClick={(e) => props.handler(e, props.account.username, !props.account.locked)}>
{props.account.locked ? "unlock" : "lock"} {props.account.locked ? "Unlock" : "Lock"}
</button> </button>
</td> </td>
</tr> </tr>

6
src/js/Admin/Tasks.js
View File

@ -25,7 +25,7 @@ class Tasks extends Component {
}); });
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting tasks (${error.response.status})`); showMessage(`Error Getting Tasks (${error.response.status})`);
}); });
} }
@ -35,7 +35,7 @@ class Tasks extends Component {
<thead> <thead>
<tr> <tr>
<th> <th>
<h1 className="text-no-select full-width center-text ui-text">running tasks</h1> <h1 className="text-no-select full-width center-text ui-text">Running Tasks</h1>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -43,7 +43,7 @@ class Tasks extends Component {
<tbody> <tbody>
<tr> <tr>
<td className="text-no-select full-width center-text ui-text" colSpan='2'> <td className="text-no-select full-width center-text ui-text" colSpan='2'>
<b>{this.state.total_tasks}</b> running tasks <b>{this.state.total_tasks}</b> Currently Running
</td> </td>
</tr> </tr>
</tbody> </tbody>

10
src/js/Index/Index.js
View File

@ -14,29 +14,29 @@ class Index extends Component{
<thead> <thead>
<tr> <tr>
<th> <th>
<h1 className="center-text text-no-select">music tools</h1> <h1 className="center-text text-no-select">Music Tools</h1>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}> <td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}>
construct spotify playlists from selections of other playlists Construct spotify playlists from selections of other playlists
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="center-text text-no-select ui-text"> <td className="center-text text-no-select ui-text">
group sub-genre playlists Group sub-genre playlists
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="center-text text-no-select ui-text"> <td className="center-text text-no-select ui-text">
optionally append auto-generated recommendations Optionally append auto-generated recommendations
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="center-text text-no-select ui-text"> <td className="center-text text-no-select ui-text">
<br></br>playlists are run multiple times a day <br></br>Playlists are run multiple times a day
</td> </td>
</tr> </tr>
</tbody> </tbody>

16
src/js/PlaylistManager.js → src/js/MusicTools.js
View File

@ -14,7 +14,7 @@ import showMessage from "./Toast.js"
const axios = require('axios'); const axios = require('axios');
class PlaylistManager extends Component { class MusicTools extends Component {
constructor(props){ constructor(props){
super(props); super(props);
@ -56,12 +56,12 @@ class PlaylistManager extends Component {
<div className="card pad-12"> <div className="card pad-12">
<table className="sidebar pad-3"> <table className="sidebar pad-3">
<tbody> <tbody>
<tr><td><span><Link to="/app">home</Link></span></td></tr> <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/playlists">Playlists</Link></td></tr>
<tr><td><Link to="/app/maths/count">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> <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> } { 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> <tr><td><a href="/auth/logout">Logout</a></td></tr>
<tr><td><a href="https://sarsoo.xyz">sarsoo.xyz</a></td></tr> <tr><td><a href="https://sarsoo.xyz">sarsoo.xyz</a></td></tr>
</tbody> </tbody>
</table> </table>
@ -87,4 +87,4 @@ class PlaylistManager extends Component {
} }
export default PlaylistManager; export default MusicTools;

24
src/js/Playlist/NewPlaylist.js
View File

@ -25,12 +25,12 @@ class NewPlaylist extends Component {
switch(value){ switch(value){
case 'default': case 'default':
this.setState({ this.setState({
description: 'merge playlists as-is with deduplication by spotify id' description: 'Merge playlists as-is with deduplication by spotify id'
}) })
break; break;
case 'recents': case 'recents':
this.setState({ this.setState({
description: "select songs from playlists which have been added since a variable number of days" description: "Select songs from playlists which have been added since a variable number of days"
}) })
break; break;
} }
@ -64,19 +64,19 @@ class NewPlaylist extends Component {
shuffle: false, shuffle: false,
type: this.state.type, type: this.state.type,
}).then((response) => { }).then((response) => {
showMessage(`${this.state.name} created`); showMessage(`${this.state.name} Created`);
}).catch((error) => { }).catch((error) => {
showMessage(`error creating playlist (${error.response.status})`); showMessage(`Error Creating Playlist (${error.response.status})`);
}); });
}else{ }else{
showMessage('named playlist already exists'); showMessage('Named Playlist Already Exists');
} }
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting playlists (${error.response.status})`); showMessage(`Error Getting Playlists (${error.response.status})`);
}); });
}else{ }else{
showMessage('enter name'); showMessage('Enter Name');
} }
} }
@ -86,7 +86,7 @@ class NewPlaylist extends Component {
<thead> <thead>
<tr> <tr>
<th colSpan="2"> <th colSpan="2">
<h1 className="ui-text center-text text-no-select">new playlist</h1> <h1 className="ui-text center-text text-no-select">New Playlist</h1>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -94,8 +94,8 @@ class NewPlaylist extends Component {
<tr> <tr>
<td> <td>
<select className="full-width" name="type" onChange={this.handleInputChange}> <select className="full-width" name="type" onChange={this.handleInputChange}>
<option value="default">default</option> <option value="default">Default</option>
<option value="recents">recents</option> <option value="recents">Recents</option>
</select> </select>
</td> </td>
<td> <td>
@ -105,12 +105,12 @@ class NewPlaylist extends Component {
type="text" type="text"
value={this.state.name} value={this.state.name}
onChange={this.handleInputChange} onChange={this.handleInputChange}
placeholder="name"/> placeholder="Name"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colSpan="2"> <td colSpan="2">
<input type="submit" className="button full-width" onClick={this.handleSubmit} value="create" /> <input type="submit" className="button full-width" onClick={this.handleSubmit} value="Create" />
</td> </td>
</tr> </tr>
<tr> <tr>

4
src/js/Playlist/Playlists.js
View File

@ -11,8 +11,8 @@ class Playlists extends Component {
return ( return (
<div> <div>
<ul className="navbar" style={{width: "100%"}}> <ul className="navbar" style={{width: "100%"}}>
<li><Link to={`${this.props.match.url}/new`}>new</Link></li> <li><Link to={`${this.props.match.url}/new`}>New</Link></li>
<li><Link to={`${this.props.match.url}/play`}>play</Link></li> <li><Link to={`${this.props.match.url}/play`}>Play</Link></li>
</ul> </ul>
<Switch> <Switch>

28
src/js/Playlist/PlaylistsView.js
View File

@ -36,7 +36,7 @@ class PlaylistsView extends Component {
}); });
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting playlists (${error.response.status})`); showMessage(`Error Getting Playlists (${error.response.status})`);
}); });
} }
@ -49,23 +49,23 @@ class PlaylistsView extends Component {
showMessage(`${name} ran`); showMessage(`${name} ran`);
}) })
.catch((error) => { .catch((error) => {
showMessage(`error running ${name} (${error.response.status})`); showMessage(`Error Running ${name} (${error.response.status})`);
}); });
}else{ }else{
showMessage(`link spotify before running`); showMessage(`Link Spotify Before Running`);
} }
}).catch((error) => { }).catch((error) => {
showMessage(`error running ${this.state.name} (${error.response.status})`); showMessage(`Error Running ${this.state.name} (${error.response.status})`);
}); });
} }
handleDeletePlaylist(name, event){ handleDeletePlaylist(name, event){
axios.delete('/api/playlist', { params: { name: name } }) axios.delete('/api/playlist', { params: { name: name } })
.then((response) => { .then((response) => {
showMessage(`${name} deleted`); showMessage(`${name} Deleted`);
this.getPlaylists(); this.getPlaylists();
}).catch((error) => { }).catch((error) => {
showMessage(`error deleting ${name} (${error.response.status})`); showMessage(`Error Deleting ${name} (${error.response.status})`);
}); });
} }
@ -75,16 +75,16 @@ class PlaylistsView extends Component {
if(response.data.spotify_linked == true){ if(response.data.spotify_linked == true){
axios.get('/api/playlist/run/user') axios.get('/api/playlist/run/user')
.then((response) => { .then((response) => {
showMessage("all playlists ran"); showMessage("All Playlists Ran");
}) })
.catch((error) => { .catch((error) => {
showMessage(`error running all (${error.response.status})`); showMessage(`Error Running All (${error.response.status})`);
}); });
}else{ }else{
showMessage(`link spotify before running`); showMessage(`Link Spotify Before Running`);
} }
}).catch((error) => { }).catch((error) => {
showMessage(`error running ${this.state.name} (${error.response.status})`); showMessage(`Error Running ${this.state.name} (${error.response.status})`);
}); });
} }
@ -108,7 +108,7 @@ function Table(props){
<tbody> <tbody>
<tr> <tr>
<td className="ui-text text-no-select center-text"> <td className="ui-text text-no-select center-text">
no playlists No Playlists
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -119,7 +119,7 @@ function Table(props){
handleDeletePlaylist={props.handleDeletePlaylist} handleDeletePlaylist={props.handleDeletePlaylist}
key={ playlist.name }/>) } key={ playlist.name }/>) }
<tr> <tr>
<td colSpan="3"><button className="full-width button" onClick={props.handleRunAll}>run all</button></td> <td colSpan="3"><button className="full-width button" onClick={props.handleRunAll}>Run All</button></td>
</tr> </tr>
</tbody> </tbody>
)} )}
@ -131,8 +131,8 @@ function Row(props){
return ( return (
<tr> <tr>
<PlaylistLink playlist={props.playlist}/> <PlaylistLink playlist={props.playlist}/>
<td style={{width: "100px"}}><button className="button" style={{width: "100px"}} onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>run</button></td> <td style={{width: "100px"}}><button className="button" style={{width: "100px"}} onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</button></td>
<td style={{width: "100px"}}><button className="button" style={{width: "100px"}} onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>delete</button></td> <td style={{width: "100px"}}><button className="button" style={{width: "100px"}} onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</button></td>
</tr> </tr>
); );
} }

48
src/js/Playlist/ScratchView.js
View File

@ -86,7 +86,7 @@ class ScratchView extends Component{
}); });
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting playlists (${error.response.status})`); showMessage(`Error Getting Playlists (${error.response.status})`);
}); });
} }
@ -141,11 +141,11 @@ class ScratchView extends Component{
newPlaylistName: '' newPlaylistName: ''
}); });
}else{ }else{
showMessage('playlist already added'); showMessage('Playlist Already Added');
} }
}else{ }else{
showMessage('enter playlist name'); showMessage('Enter Playlist Name');
} }
} }
@ -173,11 +173,11 @@ class ScratchView extends Component{
}); });
}else{ }else{
showMessage('playlist already added'); showMessage('Playlist Already Added');
} }
}else{ }else{
showMessage('no other playlists to add'); showMessage('No Other Playlists To Add');
} }
} }
@ -218,19 +218,19 @@ class ScratchView extends Component{
add_last_month: this.state.add_last_month add_last_month: this.state.add_last_month
}) })
.then((reponse) => { .then((reponse) => {
showMessage(`played`); showMessage(`Played`);
}) })
.catch((error) => { .catch((error) => {
showMessage(`error playing (${error.response.status})`); showMessage(`Error Playing (${error.response.status})`);
}); });
}else{ }else{
showMessage(`link spotify before running`); showMessage(`Link Spotify Before Running`);
} }
}).catch((error) => { }).catch((error) => {
showMessage(`error playing (${error.response.status})`); showMessage(`Error Playing (${error.response.status})`);
}); });
}else{ }else{
showMessage(`add either playlists or parts`); showMessage(`Add Either Playlists Or Parts`);
} }
} }
@ -250,7 +250,7 @@ class ScratchView extends Component{
<tbody> <tbody>
<tr> <tr>
<td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}> <td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}>
<br></br>spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive <br></br>Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
</td> </td>
</tr> </tr>
<tr> <tr>
@ -260,10 +260,10 @@ class ScratchView extends Component{
className="full-width" className="full-width"
value={this.state.newPlaylistName} value={this.state.newPlaylistName}
onChange={this.handleInputChange} onChange={this.handleInputChange}
placeholder="spotify playlist name"></input> placeholder="Spotify Playlist Name"></input>
</td> </td>
<td> <td>
<button className="button full-width" onClick={this.handleAddPart}>add</button> <button className="button full-width" onClick={this.handleAddPart}>Add</button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -278,12 +278,12 @@ class ScratchView extends Component{
</select> </select>
</td> </td>
<td> <td>
<button className="button full-width" onClick={this.handleAddReference}>add</button> <button className="button full-width" onClick={this.handleAddReference}>Add</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
shuffle output? Shuffle Output
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -294,7 +294,7 @@ class ScratchView extends Component{
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include recommendations? Include Recommendations
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -305,7 +305,7 @@ class ScratchView extends Component{
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
number of recommendations Recommendation Size
</td> </td>
<td> <td>
<input type="number" <input type="number"
@ -318,7 +318,7 @@ class ScratchView extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
added since (days) Added Since (Days)
</td> </td>
<td> <td>
<input type="number" <input type="number"
@ -332,7 +332,7 @@ class ScratchView extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include {thisMonth[date.getMonth()]} playlist Include {thisMonth[date.getMonth()]} Playlist
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -344,7 +344,7 @@ class ScratchView extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include {lastMonth[date.getMonth()]} playlist Include {lastMonth[date.getMonth()]} Playlist
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -355,15 +355,15 @@ class ScratchView extends Component{
} }
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
playlist type Type
</td> </td>
<td> <td>
<select className="full-width" <select className="full-width"
name="type" name="type"
onChange={this.handleInputChange} onChange={this.handleInputChange}
value={this.state.type}> value={this.state.type}>
<option value="default">default</option> <option value="default">Default</option>
<option value="recents">recents</option> <option value="recents">Recents</option>
</select> </select>
</td> </td>
</tr> </tr>
@ -402,7 +402,7 @@ function Row (props) {
return ( return (
<tr> <tr>
<td className="ui-text center-text text-no-select">{ props.part }</td> <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><button className="ui-text center-text button full-width" onClick={(e) => props.handler(props.part, e)}>Remove</button></td>
</tr> </tr>
); );
} }

32
src/js/Playlist/View/Count.js
View File

@ -40,24 +40,24 @@ class Count extends Component {
isLoading: false isLoading: false
}) })
}else{ }else{
showMessage('no stats for this playlist'); showMessage('No Stats For This Playlist');
} }
}) })
.catch((error) => { .catch((error) => {
showMessage(`error getting playlist info (${error.response.status})`); showMessage(`Error Getting Playlist Info (${error.response.status})`);
}); });
} }
updateStats(){ updateStats(){
axios.get(`/api/spotfm/playlist/refresh?name=${ this.state.name }`) axios.get(`/api/spotfm/playlist/refresh?name=${ this.state.name }`)
.then((response) => { .then((response) => {
showMessage('stats refresh queued'); showMessage('Stats Refresh Queued');
}) })
.catch((error) => { .catch((error) => {
if(error.response.status == 401){ if(error.response.status == 401){
showMessage('missing either spotify or last.fm link'); showMessage('Missing Either Spotify or Last.fm link');
}else{ }else{
showMessage(`error refreshing (${error.response.status})`); showMessage(`Error Refreshing (${error.response.status})`);
} }
}); });
} }
@ -66,24 +66,24 @@ class Count extends Component {
return ( return (
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select">scrobble count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td> <td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
</tr> </tr>
<tr> <tr>
<td className="ui-text center-text text-no-select">album count: <b>{this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%</b></td> <td className="ui-text center-text text-no-select">Album Count: <b>{this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%</b></td>
</tr> </tr>
<tr> <tr>
<td className="ui-text center-text text-no-select">artist count: <b>{this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%</b></td> <td className="ui-text center-text text-no-select">Artist Count: <b>{this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%</b></td>
</tr> </tr>
<tr> <tr>
<td className="ui-text center-text text-no-select">last updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td> <td className="ui-text center-text text-no-select">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<PieChart data={[{ <PieChart data={[{
"label": `${this.state.playlist.name} tracks`, "label": `${this.state.playlist.name} Tracks`,
"value": this.state.playlist.lastfm_stat_percent "value": this.state.playlist.lastfm_stat_percent
},{ },{
"label": 'other', "label": 'Other',
"value": 100 - this.state.playlist.lastfm_stat_percent "value": 100 - this.state.playlist.lastfm_stat_percent
}]} }]}
title={this.state.playlist.name}/> title={this.state.playlist.name}/>
@ -92,10 +92,10 @@ class Count extends Component {
<tr> <tr>
<td> <td>
<PieChart data={[{ <PieChart data={[{
"label": `${this.state.playlist.name} albums`, "label": `${this.state.playlist.name} Albums`,
"value": this.state.playlist.lastfm_stat_album_percent "value": this.state.playlist.lastfm_stat_album_percent
},{ },{
"label": 'other', "label": 'Other',
"value": 100 - this.state.playlist.lastfm_stat_album_percent "value": 100 - this.state.playlist.lastfm_stat_album_percent
}]} }]}
title={this.state.playlist.name}/> title={this.state.playlist.name}/>
@ -104,10 +104,10 @@ class Count extends Component {
<tr> <tr>
<td> <td>
<PieChart data={[{ <PieChart data={[{
"label": `${this.state.playlist.name} artists`, "label": `${this.state.playlist.name} Artists`,
"value": this.state.playlist.lastfm_stat_artist_percent "value": this.state.playlist.lastfm_stat_artist_percent
},{ },{
"label": 'other', "label": 'Other',
"value": 100 - this.state.playlist.lastfm_stat_artist_percent "value": 100 - this.state.playlist.lastfm_stat_artist_percent
}]} }]}
title={this.state.playlist.name}/> title={this.state.playlist.name}/>
@ -115,7 +115,7 @@ class Count extends Component {
</tr> </tr>
<tr> <tr>
<td colSpan="2"> <td colSpan="2">
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>update</button> <button style={{width: "100%"}} className="button" onClick={this.updateStats}>Update</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

102
src/js/Playlist/View/Edit.js
View File

@ -106,7 +106,7 @@ class Edit extends Component{
}); });
})) }))
.catch((error) => { .catch((error) => {
showMessage(`error getting playlist info (${error.response.status})`); showMessage(`Error Getting Playlist Info (${error.response.status})`);
}); });
} }
@ -152,7 +152,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
day_boundary: parseInt(boundary) day_boundary: parseInt(boundary)
}).catch((error) => { }).catch((error) => {
showMessage(`error updating boundary value (${error.response.status})`); showMessage(`Error Updating Boundary Value (${error.response.status})`);
}); });
} }
@ -167,7 +167,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
recommendation_sample: parseInt(sample) recommendation_sample: parseInt(sample)
}).catch((error) => { }).catch((error) => {
showMessage(`error updating rec. sample value (${error.response.status})`); showMessage(`Error Updating Rec. Sample Value (${error.response.status})`);
}); });
} }
@ -176,7 +176,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
type: sample type: sample
}).catch((error) => { }).catch((error) => {
showMessage(`error updating type (${error.response.status})`); showMessage(`Error Updating Type (${error.response.status})`);
}); });
} }
@ -188,7 +188,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
shuffle: event.target.checked shuffle: event.target.checked
}).catch((error) => { }).catch((error) => {
showMessage(`error updating shuffle value (${error.response.status})`); showMessage(`Error Updating Shuffle Value (${error.response.status})`);
}); });
} }
@ -200,7 +200,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
add_this_month: event.target.checked add_this_month: event.target.checked
}).catch((error) => { }).catch((error) => {
showMessage(`error updating add this month (${error.response.status})`); showMessage(`Error Updating Add This Month (${error.response.status})`);
}); });
} }
@ -212,7 +212,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
add_last_month: event.target.checked add_last_month: event.target.checked
}).catch((error) => { }).catch((error) => {
showMessage(`error updating add last month (${error.response.status})`); showMessage(`Error Updating Add Last Month (${error.response.status})`);
}); });
} }
@ -224,7 +224,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
include_recommendations: event.target.checked include_recommendations: event.target.checked
}).catch((error) => { }).catch((error) => {
showMessage(`error updating rec. value (${error.response.status})`); showMessage(`Error Updating Rec. Value (${error.response.status})`);
}); });
} }
@ -236,7 +236,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
include_library_tracks: event.target.checked include_library_tracks: event.target.checked
}).catch((error) => { }).catch((error) => {
showMessage(`error updating library tracks (${error.response.status})`); showMessage(`Error Updating Library Tracks (${error.response.status})`);
}); });
} }
@ -245,7 +245,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
chart_range: value chart_range: value
}).catch((error) => { }).catch((error) => {
showMessage(`error updating chart range (${error.response.status})`); showMessage(`Error Updating Chart Range (${error.response.status})`);
}); });
} }
@ -254,7 +254,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
chart_limit: parseInt(value) chart_limit: parseInt(value)
}).catch((error) => { }).catch((error) => {
showMessage(`error updating limit (${error.response.status})`); showMessage(`Error Updating Limit (${error.response.status})`);
}); });
} }
@ -282,14 +282,14 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
parts: parts parts: parts
}).catch((error) => { }).catch((error) => {
showMessage(`error adding part (${error.response.status})`); showMessage(`Error Adding Part (${error.response.status})`);
}); });
}else{ }else{
showMessage('playlist already added'); showMessage('Playlist Already Added');
} }
}else{ }else{
showMessage('enter playlist name'); showMessage('Enter Playlist Name');
} }
} }
@ -319,15 +319,15 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
playlist_references: playlist_references playlist_references: playlist_references
}).catch((error) => { }).catch((error) => {
showMessage(`error adding reference (${error.response.status})`); showMessage(`Error Adding Reference (${error.response.status})`);
}); });
}else{ }else{
showMessage('playlist already added'); showMessage('Playlist Already Added');
} }
}else{ }else{
showMessage('no other playlists to add'); showMessage('No Other Playlists to Add');
} }
} }
@ -346,7 +346,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
parts: parts parts: parts
}).catch((error) => { }).catch((error) => {
showMessage(`error removing part (${error.response.status})`); showMessage(`Error Removing Part (${error.response.status})`);
}); });
} }
@ -365,7 +365,7 @@ class Edit extends Component{
name: this.state.name, name: this.state.name,
playlist_references: playlist_references playlist_references: playlist_references
}).catch((error) => { }).catch((error) => {
showMessage(`error removing reference (${error.response.status})`); showMessage(`Error Removing Reference (${error.response.status})`);
}); });
} }
@ -375,16 +375,16 @@ class Edit extends Component{
if(response.data.spotify_linked == true){ if(response.data.spotify_linked == true){
axios.get('/api/playlist/run', {params: {name: this.state.name}}) axios.get('/api/playlist/run', {params: {name: this.state.name}})
.then((reponse) => { .then((reponse) => {
showMessage(`${this.state.name} ran`); showMessage(`${this.state.name} Run`);
}) })
.catch((error) => { .catch((error) => {
showMessage(`error running ${this.state.name} (${error.response.status})`); showMessage(`Error Running ${this.state.name} (${error.response.status})`);
}); });
}else{ }else{
showMessage(`link spotify before running`); showMessage(`Link Spotify Before Running`);
} }
}).catch((error) => { }).catch((error) => {
showMessage(`error running ${this.state.name} (${error.response.status})`); showMessage(`Error Running ${this.state.name} (${error.response.status})`);
}); });
} }
@ -394,14 +394,14 @@ class Edit extends Component{
const table = ( const table = (
<tbody> <tbody>
{ 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 && <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}/> } { this.state.playlist_references.length > 0 && <ListBlock handler={this.handleRemoveReference} list={this.state.playlist_references}/> }
{ this.state.parts.length > 0 && <tr><td colSpan="2" className="ui-text center-text text-no-select" style={{fontStyle: 'italic'}}>spotify</td></tr> } { this.state.parts.length > 0 && <tr><td colSpan="2" className="ui-text center-text text-no-select" style={{fontStyle: 'italic'}}>Spotify</td></tr> }
{ this.state.parts.length > 0 && <ListBlock handler={this.handleRemovePart} list={this.state.parts}/> } { this.state.parts.length > 0 && <ListBlock handler={this.handleRemovePart} list={this.state.parts}/> }
<tr> <tr>
<td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}> <td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}>
<br></br>spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive <br></br>Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
</td> </td>
</tr> </tr>
<tr> <tr>
@ -411,10 +411,10 @@ class Edit extends Component{
className="full-width" className="full-width"
value={this.state.newPlaylistName} value={this.state.newPlaylistName}
onChange={this.handleInputChange} onChange={this.handleInputChange}
placeholder="spotify playlist name"></input> placeholder="Spotify Playlist Name"></input>
</td> </td>
<td> <td>
<button className="button full-width" onClick={this.handleAddPart}>add</button> <button className="button full-width" onClick={this.handleAddPart}>Add</button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -429,12 +429,12 @@ class Edit extends Component{
</select> </select>
</td> </td>
<td> <td>
<button className="button full-width" onClick={this.handleAddReference}>add</button> <button className="button full-width" onClick={this.handleAddReference}>Add</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
shuffle output? Shuffle Output
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -444,7 +444,7 @@ class Edit extends Component{
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include recommendations? Include Recommendations
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -454,7 +454,7 @@ class Edit extends Component{
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include library tracks? Include Library Tracks
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -464,7 +464,7 @@ class Edit extends Component{
</tr> </tr>
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
number of recommendations Recommendation Size
</td> </td>
<td> <td>
<input type="number" <input type="number"
@ -478,7 +478,7 @@ class Edit extends Component{
{ this.state.type == 'fmchart' && { this.state.type == 'fmchart' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
limit Chart Size
</td> </td>
<td> <td>
<input type="number" <input type="number"
@ -492,19 +492,19 @@ class Edit extends Component{
{ this.state.type == 'fmchart' && { this.state.type == 'fmchart' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
chart range Chart Range
</td> </td>
<td> <td>
<select className="full-width" <select className="full-width"
name="chart_range" name="chart_range"
onChange={this.handleInputChange} onChange={this.handleInputChange}
value={this.state.chart_range}> value={this.state.chart_range}>
<option value="WEEK">7 day</option> <option value="WEEK">7 Day</option>
<option value="MONTH">30 day</option> <option value="MONTH">30 Day</option>
<option value="QUARTER">90 day</option> <option value="QUARTER">90 Day</option>
<option value="HALFYEAR">180 day</option> <option value="HALFYEAR">180 Day</option>
<option value="YEAR">365 day</option> <option value="YEAR">365 Day</option>
<option value="OVERALL">overall</option> <option value="OVERALL">Overall</option>
</select> </select>
</td> </td>
</tr> </tr>
@ -513,7 +513,7 @@ class Edit extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
added since (days) Added Since (days)
</td> </td>
<td> <td>
<input type="number" <input type="number"
@ -527,7 +527,7 @@ class Edit extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include {thisMonth[date.getMonth()]} playlist Include {thisMonth[date.getMonth()]} Playlist
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -539,7 +539,7 @@ class Edit extends Component{
{ this.state.type == 'recents' && { this.state.type == 'recents' &&
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
include {lastMonth[date.getMonth()]} playlist Include {lastMonth[date.getMonth()]} Playlist
</td> </td>
<td> <td>
<input type="checkbox" <input type="checkbox"
@ -552,22 +552,22 @@ class Edit extends Component{
<tr> <tr>
<td className="center-text ui-text text-no-select"> <td className="center-text ui-text text-no-select">
playlist type Type
</td> </td>
<td> <td>
<select className="full-width" <select className="full-width"
name="type" name="type"
onChange={this.handleInputChange} onChange={this.handleInputChange}
value={this.state.type}> value={this.state.type}>
<option value="default">default</option> <option value="default">Default</option>
<option value="recents">recents</option> <option value="recents">Recents</option>
<option value="fmchart">last.fm chart</option> <option value="fmchart">Last.fm Chart</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colSpan="2"> <td colSpan="2">
<button className="button full-width" onClick={this.handleRun}>run</button> <button className="button full-width" onClick={this.handleRun}>Run</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -577,7 +577,7 @@ class Edit extends Component{
<tbody> <tbody>
<tr> <tr>
<td> <td>
<p className="center-text">loading...</p> <p className="center-text">Loading...</p>
</td> </td>
</tr> </tr>
</tbody>; </tbody>;
@ -599,7 +599,7 @@ function Row (props) {
return ( return (
<tr> <tr>
<td className="ui-text center-text text-no-select">{ props.part }</td> <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><button className="ui-text center-text button full-width" onClick={(e) => props.handler(props.part, e)}>Remove</button></td>
</tr> </tr>
); );
} }

4
src/js/Playlist/View/View.js
View File

@ -18,8 +18,8 @@ class View extends Component{
<th colSpan="2"> <th colSpan="2">
<div> <div>
<ul className="navbar" style={{width: "100%"}}> <ul className="navbar" style={{width: "100%"}}>
<li><Link to={`${this.props.match.url}/edit`}>edit</Link></li> <li><Link to={`${this.props.match.url}/edit`}>Edit</Link></li>
<li><Link to={`${this.props.match.url}/count`}>count</Link></li> <li><Link to={`${this.props.match.url}/count`}>Count</Link></li>
</ul> </ul>
</div> </div>
</th> </th>

10
src/js/Settings/ChangePassword.js
View File

@ -68,12 +68,12 @@ class ChangePassword extends Component {
<table className="app-table max-width"> <table className="app-table max-width">
<thead> <thead>
<tr> <tr>
<th colSpan="2"><h1 className="text-no-select">change password</h1></th> <th colSpan="2"><h1 className="text-no-select">Change Password</h1></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select">current:</td> <td className="ui-text center-text text-no-select">Current:</td>
<td><input <td><input
type="password" type="password"
name="current" name="current"
@ -82,7 +82,7 @@ class ChangePassword extends Component {
className="full-width" /></td> className="full-width" /></td>
</tr> </tr>
<tr> <tr>
<td className="ui-text center-text text-no-select">new:</td> <td className="ui-text center-text text-no-select">New:</td>
<td><input <td><input
type="password" type="password"
name="new1" name="new1"
@ -91,7 +91,7 @@ class ChangePassword extends Component {
className="full-width" /></td> className="full-width" /></td>
</tr> </tr>
<tr> <tr>
<td className="ui-text center-text text-no-select">new again:</td> <td className="ui-text center-text text-no-select">New Again:</td>
<td><input <td><input
type="password" type="password"
name="new2" name="new2"
@ -100,7 +100,7 @@ class ChangePassword extends Component {
className="full-width" /></td> className="full-width" /></td>
</tr> </tr>
<tr> <tr>
<td colSpan="2"><input type="submit" style={{width: "100%"}} className="button" value="change" /></td> <td colSpan="2"><input type="submit" style={{width: "100%"}} className="button" value="Change" /></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

6
src/js/Settings/LastFM.js
View File

@ -69,12 +69,12 @@ class LastFM extends Component {
<table className="app-table max-width"> <table className="app-table max-width">
<thead> <thead>
<tr> <tr>
<th colSpan="2"><h1 className="ui-text center-text text-no-select">last.fm username</h1></th> <th colSpan="2"><h1 className="ui-text center-text text-no-select">Last.fm Username</h1></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select">username:</td> <td className="ui-text center-text text-no-select">Username:</td>
<td><input <td><input
type="text" type="text"
name="current" name="current"
@ -89,7 +89,7 @@ class LastFM extends Component {
</table> </table>
</form>; </form>;
const loadingMessage = <p className="center-text text-no-select">loading...</p>; const loadingMessage = <p className="center-text text-no-select">Loading...</p>;
return this.state.isLoading ? loadingMessage : table; return this.state.isLoading ? loadingMessage : table;
} }

6
src/js/Settings/Settings.js
View File

@ -11,9 +11,9 @@ class Settings extends Component {
return ( return (
<div> <div>
<ul className="navbar" style={{width: "100%"}}> <ul className="navbar" style={{width: "100%"}}>
<li><Link to={`${this.props.match.url}/password`}>password</Link></li> <li><Link to={`${this.props.match.url}/password`}>Password</Link></li>
<li><Link to={`${this.props.match.url}/spotify`}>spotify</Link></li> <li><Link to={`${this.props.match.url}/spotify`}>Spotify</Link></li>
<li><Link to={`${this.props.match.url}/lastfm`}>last.fm</Link></li> <li><Link to={`${this.props.match.url}/lastfm`}>Last.fm</Link></li>
</ul> </ul>
<Route path={`${this.props.match.url}/password`} component={ChangePassword} /> <Route path={`${this.props.match.url}/password`} component={ChangePassword} />

10
src/js/Settings/SpotifyLink.js
View File

@ -32,13 +32,13 @@ class SpotifyLink extends Component {
<table className="app-table max-width"> <table className="app-table max-width">
<thead> <thead>
<tr> <tr>
<th><h1 className="ui-text center-text text-no-select">spotify link status</h1></th> <th><h1 className="ui-text center-text text-no-select">Spotify Link</h1></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select"> <td className="ui-text center-text text-no-select">
status: { this.state.spotify_linked ? "linked" : "unlinked" } Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }
</td> </td>
</tr> </tr>
<tr> <tr>
@ -49,18 +49,18 @@ class SpotifyLink extends Component {
</tbody> </tbody>
</table>; </table>;
const loadingMessage = <p className="center-text text-no-select">loading...</p>; const loadingMessage = <p className="center-text text-no-select">Loading...</p>;
return this.state.isLoading ? loadingMessage : table; return this.state.isLoading ? loadingMessage : table;
} }
} }
function AuthButton(props) { function AuthButton(props) {
return <a className="button full-width" href="/auth/spotify">auth</a>; return <a className="button full-width" href="/auth/spotify">Auth</a>;
} }
function DeAuthButton(props) { function DeAuthButton(props) {
return <a className="button full-width" href="/auth/spotify/deauth">de-auth</a>; return <a className="button full-width" href="/auth/spotify/deauth">De-Auth</a>;
} }
export default SpotifyLink; export default SpotifyLink;

4
src/js/app.js
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import PlaylistManager from "./PlaylistManager.js"; import MusicTools from "./MusicTools";
ReactDOM.render(<PlaylistManager />, document.getElementById('react')); ReactDOM.render(<MusicTools />, document.getElementById('react'));