changing ui case, finishing changing name to music tools
This commit is contained in:
aj
parent
e1935d4b23
commit
56da9fcc77
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sarsoo/spotify</title>
|
||||
<title>sarsoo/music</title>
|
||||
<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 href="https://fonts.googleapis.com/css?family=Pirata+One|Lato" rel="stylesheet">
|
||||
|
||||
@ -11,9 +11,9 @@ class Admin extends Component {
|
||||
return (
|
||||
<div>
|
||||
<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}/functions`}>functions</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/tasks`}>tasks</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}/tasks`}>Tasks</Link></li>
|
||||
</ul>
|
||||
|
||||
<Route path={`${this.props.match.url}/lock`} component={Lock} />
|
||||
|
||||
@ -15,20 +15,20 @@ class Functions extends Component {
|
||||
runAllUsers(event){
|
||||
axios.get('/api/playlist/run/users')
|
||||
.then((response) => {
|
||||
showMessage('users run');
|
||||
showMessage('Users Run');
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error running all users (${error.response.status})`);
|
||||
showMessage(`Error Running All Users (${error.response.status})`);
|
||||
});
|
||||
}
|
||||
|
||||
runStats(event){
|
||||
axios.get('/api/spotfm/playlist/refresh/users')
|
||||
.then((response) => {
|
||||
showMessage('stats run');
|
||||
showMessage('Stats Run');
|
||||
})
|
||||
.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>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button className="full-width button" onClick={this.runStats}>run stats</button>
|
||||
<button className="full-width button" onClick={this.runStats}>Run Stats</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -26,7 +26,7 @@ class Lock extends Component {
|
||||
})
|
||||
})
|
||||
.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
|
||||
}).catch((error) => {
|
||||
var lockMessage = to_state ? 'locking' : 'unlocking';
|
||||
showMessage(`error ${lockMessage} ${username} (${error.response.status})`);
|
||||
showMessage(`Error ${lockMessage} ${username} (${error.response.status})`);
|
||||
}).finally(() => {
|
||||
this.getUserInfo();
|
||||
});
|
||||
@ -53,7 +53,7 @@ class Lock extends Component {
|
||||
<tr>
|
||||
<th colSpan='3'>
|
||||
<h1 className="text-no-select">
|
||||
account locks
|
||||
Account Locks
|
||||
</h1>
|
||||
</th>
|
||||
</tr>
|
||||
@ -78,7 +78,7 @@ function Row(props){
|
||||
<td style={{width: "30%"}}>
|
||||
<button className="button full-width"
|
||||
onClick={(e) => props.handler(e, props.account.username, !props.account.locked)}>
|
||||
{props.account.locked ? "unlock" : "lock"}
|
||||
{props.account.locked ? "Unlock" : "Lock"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -25,7 +25,7 @@ class Tasks extends Component {
|
||||
});
|
||||
})
|
||||
.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>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -43,7 +43,7 @@ class Tasks extends Component {
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -14,29 +14,29 @@ class Index extends Component{
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<h1 className="center-text text-no-select">music tools</h1>
|
||||
<h1 className="center-text text-no-select">Music Tools</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text">
|
||||
group sub-genre playlists
|
||||
Group sub-genre playlists
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text text-no-select ui-text">
|
||||
optionally append auto-generated recommendations
|
||||
Optionally append auto-generated recommendations
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -14,7 +14,7 @@ import showMessage from "./Toast.js"
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
class PlaylistManager extends Component {
|
||||
class MusicTools extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
@ -56,12 +56,12 @@ class PlaylistManager extends Component {
|
||||
<div className="card pad-12">
|
||||
<table className="sidebar pad-3">
|
||||
<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/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>
|
||||
<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/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>
|
||||
<tr><td><a href="https://sarsoo.xyz">sarsoo.xyz</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -87,4 +87,4 @@ class PlaylistManager extends Component {
|
||||
|
||||
}
|
||||
|
||||
export default PlaylistManager;
|
||||
export default MusicTools;
|
||||
@ -25,12 +25,12 @@ class NewPlaylist extends Component {
|
||||
switch(value){
|
||||
case 'default':
|
||||
this.setState({
|
||||
description: 'merge playlists as-is with deduplication by spotify id'
|
||||
description: 'Merge playlists as-is with deduplication by spotify id'
|
||||
})
|
||||
break;
|
||||
case 'recents':
|
||||
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;
|
||||
}
|
||||
@ -64,19 +64,19 @@ class NewPlaylist extends Component {
|
||||
shuffle: false,
|
||||
type: this.state.type,
|
||||
}).then((response) => {
|
||||
showMessage(`${this.state.name} created`);
|
||||
showMessage(`${this.state.name} Created`);
|
||||
}).catch((error) => {
|
||||
showMessage(`error creating playlist (${error.response.status})`);
|
||||
showMessage(`Error Creating Playlist (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage('named playlist already exists');
|
||||
showMessage('Named Playlist Already Exists');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error getting playlists (${error.response.status})`);
|
||||
showMessage(`Error Getting Playlists (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage('enter name');
|
||||
showMessage('Enter Name');
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@ class NewPlaylist extends Component {
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -94,8 +94,8 @@ class NewPlaylist extends Component {
|
||||
<tr>
|
||||
<td>
|
||||
<select className="full-width" name="type" onChange={this.handleInputChange}>
|
||||
<option value="default">default</option>
|
||||
<option value="recents">recents</option>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
@ -105,12 +105,12 @@ class NewPlaylist extends Component {
|
||||
type="text"
|
||||
value={this.state.name}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="name"/>
|
||||
placeholder="Name"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -11,8 +11,8 @@ class Playlists extends Component {
|
||||
return (
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<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}/new`}>New</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/play`}>Play</Link></li>
|
||||
</ul>
|
||||
|
||||
<Switch>
|
||||
|
||||
@ -36,7 +36,7 @@ class PlaylistsView extends Component {
|
||||
});
|
||||
})
|
||||
.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`);
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error running ${name} (${error.response.status})`);
|
||||
showMessage(`Error Running ${name} (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage(`link spotify before running`);
|
||||
showMessage(`Link Spotify Before Running`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
showMessage(`error running ${this.state.name} (${error.response.status})`);
|
||||
showMessage(`Error Running ${this.state.name} (${error.response.status})`);
|
||||
});
|
||||
}
|
||||
|
||||
handleDeletePlaylist(name, event){
|
||||
axios.delete('/api/playlist', { params: { name: name } })
|
||||
.then((response) => {
|
||||
showMessage(`${name} deleted`);
|
||||
showMessage(`${name} Deleted`);
|
||||
this.getPlaylists();
|
||||
}).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){
|
||||
axios.get('/api/playlist/run/user')
|
||||
.then((response) => {
|
||||
showMessage("all playlists ran");
|
||||
showMessage("All Playlists Ran");
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error running all (${error.response.status})`);
|
||||
showMessage(`Error Running All (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage(`link spotify before running`);
|
||||
showMessage(`Link Spotify Before Running`);
|
||||
}
|
||||
}).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>
|
||||
<tr>
|
||||
<td className="ui-text text-no-select center-text">
|
||||
no playlists
|
||||
No Playlists
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -119,7 +119,7 @@ function Table(props){
|
||||
handleDeletePlaylist={props.handleDeletePlaylist}
|
||||
key={ playlist.name }/>) }
|
||||
<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>
|
||||
</tbody>
|
||||
)}
|
||||
@ -131,8 +131,8 @@ function Row(props){
|
||||
return (
|
||||
<tr>
|
||||
<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.handleDeletePlaylist(props.playlist.name, e)}>delete</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>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@ class ScratchView extends Component{
|
||||
});
|
||||
})
|
||||
.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: ''
|
||||
});
|
||||
}else{
|
||||
showMessage('playlist already added');
|
||||
showMessage('Playlist Already Added');
|
||||
}
|
||||
|
||||
}else{
|
||||
showMessage('enter playlist name');
|
||||
showMessage('Enter Playlist Name');
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,11 +173,11 @@ class ScratchView extends Component{
|
||||
});
|
||||
|
||||
}else{
|
||||
showMessage('playlist already added');
|
||||
showMessage('Playlist Already Added');
|
||||
}
|
||||
|
||||
}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
|
||||
})
|
||||
.then((reponse) => {
|
||||
showMessage(`played`);
|
||||
showMessage(`Played`);
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error playing (${error.response.status})`);
|
||||
showMessage(`Error Playing (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage(`link spotify before running`);
|
||||
showMessage(`Link Spotify Before Running`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
showMessage(`error playing (${error.response.status})`);
|
||||
showMessage(`Error Playing (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage(`add either playlists or parts`);
|
||||
showMessage(`Add Either Playlists Or Parts`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,7 +250,7 @@ class ScratchView extends Component{
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -260,10 +260,10 @@ class ScratchView extends Component{
|
||||
className="full-width"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="spotify playlist name"></input>
|
||||
placeholder="Spotify Playlist Name"></input>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddPart}>add</button>
|
||||
<button className="button full-width" onClick={this.handleAddPart}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -278,12 +278,12 @@ class ScratchView extends Component{
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddReference}>add</button>
|
||||
<button className="button full-width" onClick={this.handleAddReference}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
shuffle output?
|
||||
Shuffle Output
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -294,7 +294,7 @@ class ScratchView extends Component{
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include recommendations?
|
||||
Include Recommendations
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -305,7 +305,7 @@ class ScratchView extends Component{
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
number of recommendations
|
||||
Recommendation Size
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
@ -318,7 +318,7 @@ class ScratchView extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
added since (days)
|
||||
Added Since (Days)
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
@ -332,7 +332,7 @@ class ScratchView extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include {thisMonth[date.getMonth()]} playlist
|
||||
Include {thisMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -344,7 +344,7 @@ class ScratchView extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include {lastMonth[date.getMonth()]} playlist
|
||||
Include {lastMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -355,15 +355,15 @@ class ScratchView extends Component{
|
||||
}
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
playlist type
|
||||
Type
|
||||
</td>
|
||||
<td>
|
||||
<select className="full-width"
|
||||
name="type"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.type}>
|
||||
<option value="default">default</option>
|
||||
<option value="recents">recents</option>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
@ -402,7 +402,7 @@ function Row (props) {
|
||||
return (
|
||||
<tr>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -40,24 +40,24 @@ class Count extends Component {
|
||||
isLoading: false
|
||||
})
|
||||
}else{
|
||||
showMessage('no stats for this playlist');
|
||||
showMessage('No Stats For This Playlist');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error getting playlist info (${error.response.status})`);
|
||||
showMessage(`Error Getting Playlist Info (${error.response.status})`);
|
||||
});
|
||||
}
|
||||
|
||||
updateStats(){
|
||||
axios.get(`/api/spotfm/playlist/refresh?name=${ this.state.name }`)
|
||||
.then((response) => {
|
||||
showMessage('stats refresh queued');
|
||||
showMessage('Stats Refresh Queued');
|
||||
})
|
||||
.catch((error) => {
|
||||
if(error.response.status == 401){
|
||||
showMessage('missing either spotify or last.fm link');
|
||||
showMessage('Missing Either Spotify or Last.fm link');
|
||||
}else{
|
||||
showMessage(`error refreshing (${error.response.status})`);
|
||||
showMessage(`Error Refreshing (${error.response.status})`);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -66,24 +66,24 @@ class Count extends Component {
|
||||
return (
|
||||
<tbody>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<td>
|
||||
<PieChart data={[{
|
||||
"label": `${this.state.playlist.name} tracks`,
|
||||
"label": `${this.state.playlist.name} Tracks`,
|
||||
"value": this.state.playlist.lastfm_stat_percent
|
||||
},{
|
||||
"label": 'other',
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
@ -92,10 +92,10 @@ class Count extends Component {
|
||||
<tr>
|
||||
<td>
|
||||
<PieChart data={[{
|
||||
"label": `${this.state.playlist.name} albums`,
|
||||
"label": `${this.state.playlist.name} Albums`,
|
||||
"value": this.state.playlist.lastfm_stat_album_percent
|
||||
},{
|
||||
"label": 'other',
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_album_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
@ -104,10 +104,10 @@ class Count extends Component {
|
||||
<tr>
|
||||
<td>
|
||||
<PieChart data={[{
|
||||
"label": `${this.state.playlist.name} artists`,
|
||||
"label": `${this.state.playlist.name} Artists`,
|
||||
"value": this.state.playlist.lastfm_stat_artist_percent
|
||||
},{
|
||||
"label": 'other',
|
||||
"label": 'Other',
|
||||
"value": 100 - this.state.playlist.lastfm_stat_artist_percent
|
||||
}]}
|
||||
title={this.state.playlist.name}/>
|
||||
@ -115,7 +115,7 @@ class Count extends Component {
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -106,7 +106,7 @@ class Edit extends Component{
|
||||
});
|
||||
}))
|
||||
.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,
|
||||
day_boundary: parseInt(boundary)
|
||||
}).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,
|
||||
recommendation_sample: parseInt(sample)
|
||||
}).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,
|
||||
type: sample
|
||||
}).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,
|
||||
shuffle: event.target.checked
|
||||
}).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,
|
||||
add_this_month: event.target.checked
|
||||
}).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,
|
||||
add_last_month: event.target.checked
|
||||
}).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,
|
||||
include_recommendations: event.target.checked
|
||||
}).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,
|
||||
include_library_tracks: event.target.checked
|
||||
}).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,
|
||||
chart_range: value
|
||||
}).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,
|
||||
chart_limit: parseInt(value)
|
||||
}).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,
|
||||
parts: parts
|
||||
}).catch((error) => {
|
||||
showMessage(`error adding part (${error.response.status})`);
|
||||
showMessage(`Error Adding Part (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage('playlist already added');
|
||||
showMessage('Playlist Already Added');
|
||||
}
|
||||
|
||||
}else{
|
||||
showMessage('enter playlist name');
|
||||
showMessage('Enter Playlist Name');
|
||||
}
|
||||
}
|
||||
|
||||
@ -319,15 +319,15 @@ class Edit extends Component{
|
||||
name: this.state.name,
|
||||
playlist_references: playlist_references
|
||||
}).catch((error) => {
|
||||
showMessage(`error adding reference (${error.response.status})`);
|
||||
showMessage(`Error Adding Reference (${error.response.status})`);
|
||||
});
|
||||
|
||||
}else{
|
||||
showMessage('playlist already added');
|
||||
showMessage('Playlist Already Added');
|
||||
}
|
||||
|
||||
}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,
|
||||
parts: parts
|
||||
}).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,
|
||||
playlist_references: playlist_references
|
||||
}).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){
|
||||
axios.get('/api/playlist/run', {params: {name: this.state.name}})
|
||||
.then((reponse) => {
|
||||
showMessage(`${this.state.name} ran`);
|
||||
showMessage(`${this.state.name} Run`);
|
||||
})
|
||||
.catch((error) => {
|
||||
showMessage(`error running ${this.state.name} (${error.response.status})`);
|
||||
showMessage(`Error Running ${this.state.name} (${error.response.status})`);
|
||||
});
|
||||
}else{
|
||||
showMessage(`link spotify before running`);
|
||||
showMessage(`Link Spotify Before Running`);
|
||||
}
|
||||
}).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 = (
|
||||
<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.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}/> }
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -411,10 +411,10 @@ class Edit extends Component{
|
||||
className="full-width"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="spotify playlist name"></input>
|
||||
placeholder="Spotify Playlist Name"></input>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddPart}>add</button>
|
||||
<button className="button full-width" onClick={this.handleAddPart}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -429,12 +429,12 @@ class Edit extends Component{
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button className="button full-width" onClick={this.handleAddReference}>add</button>
|
||||
<button className="button full-width" onClick={this.handleAddReference}>Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
shuffle output?
|
||||
Shuffle Output
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -444,7 +444,7 @@ class Edit extends Component{
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include recommendations?
|
||||
Include Recommendations
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -454,7 +454,7 @@ class Edit extends Component{
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include library tracks?
|
||||
Include Library Tracks
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -464,7 +464,7 @@ class Edit extends Component{
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
number of recommendations
|
||||
Recommendation Size
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
@ -478,7 +478,7 @@ class Edit extends Component{
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
limit
|
||||
Chart Size
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
@ -492,19 +492,19 @@ class Edit extends Component{
|
||||
{ this.state.type == 'fmchart' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
chart range
|
||||
Chart Range
|
||||
</td>
|
||||
<td>
|
||||
<select className="full-width"
|
||||
name="chart_range"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.chart_range}>
|
||||
<option value="WEEK">7 day</option>
|
||||
<option value="MONTH">30 day</option>
|
||||
<option value="QUARTER">90 day</option>
|
||||
<option value="HALFYEAR">180 day</option>
|
||||
<option value="YEAR">365 day</option>
|
||||
<option value="OVERALL">overall</option>
|
||||
<option value="WEEK">7 Day</option>
|
||||
<option value="MONTH">30 Day</option>
|
||||
<option value="QUARTER">90 Day</option>
|
||||
<option value="HALFYEAR">180 Day</option>
|
||||
<option value="YEAR">365 Day</option>
|
||||
<option value="OVERALL">Overall</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
@ -513,7 +513,7 @@ class Edit extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
added since (days)
|
||||
Added Since (days)
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
@ -527,7 +527,7 @@ class Edit extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include {thisMonth[date.getMonth()]} playlist
|
||||
Include {thisMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -539,7 +539,7 @@ class Edit extends Component{
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
include {lastMonth[date.getMonth()]} playlist
|
||||
Include {lastMonth[date.getMonth()]} Playlist
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
@ -552,22 +552,22 @@ class Edit extends Component{
|
||||
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
playlist type
|
||||
Type
|
||||
</td>
|
||||
<td>
|
||||
<select className="full-width"
|
||||
name="type"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.type}>
|
||||
<option value="default">default</option>
|
||||
<option value="recents">recents</option>
|
||||
<option value="fmchart">last.fm chart</option>
|
||||
<option value="default">Default</option>
|
||||
<option value="recents">Recents</option>
|
||||
<option value="fmchart">Last.fm Chart</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan="2">
|
||||
<button className="button full-width" onClick={this.handleRun}>run</button>
|
||||
<button className="button full-width" onClick={this.handleRun}>Run</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -577,7 +577,7 @@ class Edit extends Component{
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p className="center-text">loading...</p>
|
||||
<p className="center-text">Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>;
|
||||
@ -599,7 +599,7 @@ function Row (props) {
|
||||
return (
|
||||
<tr>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,8 @@ class View extends Component{
|
||||
<th colSpan="2">
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<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}/edit`}>Edit</Link></li>
|
||||
<li><Link to={`${this.props.match.url}/count`}>Count</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
@ -68,12 +68,12 @@ class ChangePassword extends Component {
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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
|
||||
type="password"
|
||||
name="current"
|
||||
@ -82,7 +82,7 @@ class ChangePassword extends Component {
|
||||
className="full-width" /></td>
|
||||
</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
|
||||
type="password"
|
||||
name="new1"
|
||||
@ -91,7 +91,7 @@ class ChangePassword extends Component {
|
||||
className="full-width" /></td>
|
||||
</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
|
||||
type="password"
|
||||
name="new2"
|
||||
@ -100,7 +100,7 @@ class ChangePassword extends Component {
|
||||
className="full-width" /></td>
|
||||
</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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -69,12 +69,12 @@ class LastFM extends Component {
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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
|
||||
type="text"
|
||||
name="current"
|
||||
@ -89,7 +89,7 @@ class LastFM extends Component {
|
||||
</table>
|
||||
</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;
|
||||
}
|
||||
|
||||
@ -11,9 +11,9 @@ class Settings extends Component {
|
||||
return (
|
||||
<div>
|
||||
<ul className="navbar" style={{width: "100%"}}>
|
||||
<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}/lastfm`}>last.fm</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}/lastfm`}>Last.fm</Link></li>
|
||||
</ul>
|
||||
|
||||
<Route path={`${this.props.match.url}/password`} component={ChangePassword} />
|
||||
|
||||
@ -32,13 +32,13 @@ class SpotifyLink extends Component {
|
||||
<table className="app-table max-width">
|
||||
<thead>
|
||||
<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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="ui-text center-text text-no-select">
|
||||
status: { this.state.spotify_linked ? "linked" : "unlinked" }
|
||||
Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -49,18 +49,18 @@ class SpotifyLink extends Component {
|
||||
</tbody>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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;
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
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'));
|
||||
Loading…
Reference in New Issue
Block a user