1
0
mirror of synced 2024-12-05 02:57:55 +01:00
bemaniutils/bemani/frontend/static/controllers/admin/api.react.js

613 lines
23 KiB
JavaScript

/*** @jsx React.DOM */
var api_management = React.createClass({
getInitialState: function(props) {
var info = this.scheduleServerInfo(window.servers);
return {
new_client: {
name: '',
},
new_server: {
uri: 'https://',
token: '',
},
info: info,
clients: window.clients,
servers: window.servers,
editing_client: null,
editing_server: null,
};
},
componentDidUpdate: function() {
if (this.focus_element && this.focus_element != this.already_focused) {
this.focus_element.focus();
this.already_focused = this.focus_element;
}
},
scheduleServerInfo: function(servers) {
var info = {};
servers.map(function(server) {
if (this.state && this.state.info[server.id]) {
// We already got this info
info[server.id] = this.state.info[server.id];
return;
}
// We don't have this looked up yet
info[server.id] = {loading: true};
AJAX.get(
Link.get('queryserver', server.id),
function(response) {
var sinfo = this.state.info;
sinfo[server.id] = response;
sinfo[server.id].loading = false;
this.setState({info: sinfo});
}.bind(this)
);
}.bind(this));
return info;
},
addNewClient: function(event) {
AJAX.post(
Link.get('addclient'),
{client: this.state.new_client},
function(response) {
this.setState({
clients: response.clients,
new_client: {
name: '',
},
});
}.bind(this)
);
event.preventDefault();
},
saveClient: function(event) {
AJAX.post(
Link.get('updateclient'),
{client: this.state.editing_client},
function(response) {
this.setState({
clients: response.clients,
editing_client: null,
});
}.bind(this)
);
event.preventDefault();
},
deleteExistingClient: function(event, clientid) {
$.confirm({
escapeKey: 'Cancel',
animation: 'none',
closeAnimation: 'none',
title: 'Delete Client',
content: 'Are you sure you want to delete and de-auth this client from the network?',
buttons: {
Delete: {
btnClass: 'delete',
action: function() {
AJAX.post(
Link.get('removeclient'),
{clientid: clientid},
function(response) {
this.setState({
clients: response.clients,
});
}.bind(this)
);
}.bind(this),
},
Cancel: function() {
},
}
});
event.preventDefault();
},
addNewServer: function(event) {
AJAX.post(
Link.get('addserver'),
{server: this.state.new_server},
function(response) {
// Schedule probe of new server just added
var info = this.scheduleServerInfo(response.servers);
this.setState({
servers: response.servers,
info: info,
new_server: {
uri: 'https://',
token: '',
},
});
}.bind(this)
);
event.preventDefault();
},
saveServer: function(event) {
var serverid = this.state.editing_server.id;
AJAX.post(
Link.get('updateserver'),
{server: this.state.editing_server},
function(response) {
// Kill our existing info so we can refresh with changes
delete this.state.info[serverid];
var info = this.scheduleServerInfo(response.servers);
this.setState({
info: info,
servers: response.servers,
editing_server: null,
});
}.bind(this)
);
event.preventDefault();
},
deleteExistingServer: function(event, serverid) {
$.confirm({
escapeKey: 'Cancel',
animation: 'none',
closeAnimation: 'none',
title: 'Delete Server',
content: 'Are you sure you want to delete this remote server from the network?',
buttons: {
Delete: {
btnClass: 'delete',
action: function() {
AJAX.post(
Link.get('removeserver'),
{serverid: serverid},
function(response) {
// Kill the entry we no longer need
var info = this.state.info;
delete info[serverid];
this.setState({
info: info,
servers: response.servers,
});
}.bind(this)
);
}.bind(this),
},
Cancel: function() {
},
}
});
event.preventDefault();
},
renderClientEditButton: function(client) {
if(this.state.editing_client) {
if (this.state.editing_client.id == client.id) {
return (
<span>
<input
type="submit"
value="save"
/>
<input
type="button"
value="cancel"
onClick={function(event) {
this.setState({
editing_client: null,
});
}.bind(this)}
/>
</span>
);
} else {
return <span></span>;
}
} else {
return (
<span>
<Edit
onClick={function(event) {
var editing_client = null;
this.state.clients.map(function(a) {
if (a.id == client.id) {
editing_client = jQuery.extend(true, {}, a);
}
});
this.setState({
editing_client: editing_client,
});
}.bind(this)}
/>
<Delete
onClick={function(event) {
this.deleteExistingClient(event, client.id);
}.bind(this)}
/>
</span>
);
}
},
renderClientName: function(client) {
if (this.state.editing_client && client.id == this.state.editing_client.id) {
return <input
name="name"
type="text"
autofocus="true"
ref={c => (this.focus_element = c)}
value={ this.state.editing_client.name }
onChange={function(event) {
var client = this.state.editing_client;
client.name = event.target.value;
this.setState({
editing_client: client,
});
}.bind(this)}
/>;
} else {
return <span>{ client.name }</span>;
}
},
sortClientName: function(a, b) {
return a.name.localeCompare(b.name);
},
renderClientToken: function(client) {
return <span>{ client.token }</span>;
},
sortClientToken: function(a, b) {
return a.token.localeCompare(b.token);
},
renderServerEditButton: function(server) {
if(this.state.editing_server) {
if (this.state.editing_server.id == server.id) {
return (
<span>
<input
type="submit"
value="save"
/>
<input
type="button"
value="cancel"
onClick={function(event) {
this.setState({
editing_server: null,
});
}.bind(this)}
/>
</span>
);
} else {
return <span></span>;
}
} else {
return (
<span>
<Edit
onClick={function(event) {
var editing_server = null;
this.state.servers.map(function(a) {
if (a.id == server.id) {
editing_server = jQuery.extend(true, {}, a);
}
});
this.setState({
editing_server: editing_server,
});
}.bind(this)}
/>
<Delete
onClick={function(event) {
this.deleteExistingServer(event, server.id);
}.bind(this)}
/>
</span>
);
}
},
renderServerURI: function(server) {
if (this.state.editing_server && server.id == this.state.editing_server.id) {
return <input
name="uri"
type="text"
autofocus="true"
ref={c => (this.focus_element = c)}
value={ this.state.editing_server.uri }
onChange={function(event) {
var server = this.state.editing_server;
server.uri = event.target.value;
this.setState({
editing_server: server,
});
}.bind(this)}
/>;
} else {
return <span>{ server.uri }</span>;
}
},
sortServerURI: function(a, b) {
return a.uri.localeCompare(b.uri);
},
renderServerToken: function(server) {
if (this.state.editing_server && server.id == this.state.editing_server.id) {
return <input
name="token"
type="text"
value={ this.state.editing_server.token }
onChange={function(event) {
var server = this.state.editing_server;
server.token = event.target.value;
this.setState({
editing_server: server,
});
}.bind(this)}
/>;
} else {
return <span>{ server.token }</span>;
}
},
sortServerToken: function(a, b) {
return a.token.localeCompare(b.token);
},
renderServerInfo: function(server) {
if (!this.state.info[server.id]) {
return <span className='placeholder'>No info!</span>;
}
if (this.state.info[server.id].loading) {
return (
<span>
<img className="loading" src={Link.get('static', 'loading-16.gif')} />
{' querying server for info...'}
</span>
);
}
if (this.state.info[server.id].status == 'badauth') {
return (
<span>Invalid auth token provided!</span>
);
}
if (this.state.info[server.id].status == 'error') {
return (
<span>Error requesting server info!</span>
);
}
return (
<span>
<div>
<b>{this.state.info[server.id].name}</b>
{' administered by '}
<a href={'mailto:' + this.state.info[server.id].email}>{this.state.info[server.id].email}</a>
</div>
{ this.state.info[server.id].status == 'badversion' ?
<span className='placeholder'>This server supports an incompatible version of the API!</span> : null
}
</span>
);
},
renderServerAllowedData: function(server) {
if (this.state.editing_server && server.id == this.state.editing_server.id) {
return (
<span>
<div>
<input
name="stats"
id="stats"
type="checkbox"
checked={ this.state.editing_server.allow_stats }
onChange={function(event) {
var server = this.state.editing_server;
server.allow_stats = event.target.checked;
this.setState({
editing_server: server,
});
}.bind(this)}
/>
<label htmlFor="stats">play statistics</label>
</div>
<div>
<input
name="scores"
id="scores"
type="checkbox"
checked={ this.state.editing_server.allow_scores }
onChange={function(event) {
var server = this.state.editing_server;
server.allow_scores = event.target.checked;
this.setState({
editing_server: server,
});
}.bind(this)}
/>
<label htmlFor="scores">rivals and scores</label>
</div>
</span>
);
} else {
if (!server.allow_stats && !server.allow_scores) {
return <span className="placeholder">remote data fetching disabled</span>;
}
var enabled = [];
if (server.allow_stats) {
enabled.push('play statistics');
}
if (server.allow_scores) {
enabled.push('rivals');
enabled.push('scores');
}
return <span>{ enabled.join(', ') }</span>;
}
},
render: function() {
return (
<div>
<div className="section">
<h3>Authorized Clients</h3>
<form className="inline" onSubmit={this.saveClient}>
<Table
className="list client"
columns={[
{
name: 'Name',
render: this.renderClientName,
sort: this.sortClientName,
},
{
name: 'Auth Token',
render: this.renderClientToken,
sort: this.sortClientToken,
},
{
name: '',
render: this.renderClientEditButton,
action: true,
},
]}
rows={this.state.clients}
emptymessage="There are no clients authorized to talk to this network."
/>
</form>
</div>
<div className="section">
<h3>Add Client</h3>
<form className="inline" onSubmit={this.addNewClient}>
<table className="add client">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
name="name"
type="text"
value={ this.state.new_client.name }
onChange={function(event) {
var client = this.state.new_client;
client.name = event.target.value;
this.setState({new_client: client});
}.bind(this)}
/>
</td>
<td>
<input
type="submit"
value="save"
/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div className="section">
<h3>Remote Servers</h3>
<form className="inline" onSubmit={this.saveServer}>
<Table
className="list server"
columns={[
{
name: 'URI',
render: this.renderServerURI,
sort: this.sortServerURI,
},
{
name: 'Auth Token',
render: this.renderServerToken,
sort: this.sortServerToken,
},
{
name: 'Server Info',
render: this.renderServerInfo,
},
{
name: 'Allowed Data',
render: this.renderServerAllowedData,
},
{
name: '',
render: this.renderServerEditButton,
action: true,
},
]}
rows={this.state.servers}
emptymessage="There are no remote servers on this network."
/>
</form>
</div>
<div className="section">
<h3>Add Remote Server</h3>
<form className="inline" onSubmit={this.addNewServer}>
<table className="add server">
<thead>
<tr>
<th>Name</th>
<th>Token</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
name="uri"
type="text"
value={ this.state.new_server.uri }
onChange={function(event) {
var server = this.state.new_server;
server.uri = event.target.value;
this.setState({new_server: server});
}.bind(this)}
/>
</td>
<td>
<input
name="token"
type="text"
value={ this.state.new_server.token }
onChange={function(event) {
var server = this.state.new_server;
server.token = event.target.value;
this.setState({new_server: server});
}.bind(this)}
/>
</td>
<td>
<input
type="submit"
value="save"
/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
);
},
});
ReactDOM.render(
React.createElement(api_management, null),
document.getElementById('content')
);