1
0
mirror of synced 2024-12-15 15:51:15 +01:00
bemaniutils/bemani/frontend/static/controllers/admin/cards.react.js

188 lines
6.5 KiB
JavaScript

/*** @jsx React.DOM */
var card_management = createReactClass({
getInitialState: function(props) {
return {
cards: window.cards,
usernames: window.usernames,
new_card: {
number: '',
owner: null,
},
};
},
addNewCard: function(event) {
if (!this.state.new_card.owner) {
Messages.error('You must select an owner for new cards!');
} else {
AJAX.post(
Link.get('addcard'),
{card: this.state.new_card},
function(response) {
this.setState({
cards: response.cards,
new_card: {
number: '',
owner: null,
},
});
}.bind(this)
);
}
event.preventDefault();
},
deleteExistingCard: function(card) {
$.confirm({
escapeKey: 'Cancel',
animation: 'none',
closeAnimation: 'none',
title: 'Delete Card',
content: 'Are you sure you want to delete this card?',
buttons: {
Delete: {
btnClass: 'delete',
action: function() {
AJAX.post(
Link.get('removecard'),
{card: card},
function(response) {
this.setState({
cards: response.cards,
});
}.bind(this)
);
}.bind(this),
},
Cancel: function() {
},
}
});
},
renderNumber: function(card) {
return <Card number={card.number} />;
},
sortNumber: function(a, b) {
return a.number.localeCompare(b.number);
},
renderOwner: function(card) {
if (card.owner) {
return (
<span>{ card.owner }</span>
);
} else {
return (
<span className="placeholder">
anonymous account
</span>
);
}
},
sortOwner: function(a, b) {
var aown = a.owner ? a.owner : '';
var bown = b.owner ? b.owner : '';
return aown.localeCompare(bown);
},
renderEditButton: function(card) {
return (
<>
<Edit
title="view/edit"
onClick={function(event) {
window.location=Link.get('viewuser', card.id);
}.bind(this)}
/>
<Delete onClick={this.deleteExistingCard.bind(this, card.number)} />
</>
);
},
render: function() {
return (
<div>
<div className="section">
<h3>All cards</h3>
<Table
className="list cards"
columns={[
{
name: 'Card Number',
render: this.renderNumber,
sort: this.sortNumber,
},
{
name: 'Owner',
render: this.renderOwner,
sort: this.sortOwner,
},
{
name: '',
action: true,
render: this.renderEditButton,
},
]}
rows={this.state.cards}
emptymessage="There are no cards in use on this network."
/>
</div>
<div className="section">
<h3>Add Card</h3>
<form onSubmit={this.addNewCard}>
<table className="add cards">
<thead>
<th>Card Number</th>
<th>Owner</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<input
type="text"
value={this.state.new_card.number}
onChange={function(event) {
var card = this.state.new_card;
card.number = event.target.value;
this.setState({new_card: card});
}.bind(this)}
name="card_number"
/>
</td>
<td>
<SelectUser
name="owner"
value={ this.state.new_card.owner }
usernames={ this.state.usernames }
onChange={function(owner) {
var card = this.state.new_card;
card.owner = owner;
this.setState({
new_card: card,
});
}.bind(this)}
/>
</td>
<td>
<input type="submit" value="add card" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
);
},
});
ReactDOM.render(
React.createElement(card_management, null),
document.getElementById('content')
);