110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
|
/*** @jsx React.DOM */
|
||
|
|
|
||
|
|
var card_management = React.createClass({
|
||
|
|
getInitialState: function(props) {
|
||
|
|
return {
|
||
|
|
cards: window.cards,
|
||
|
|
newCard: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidMount: function() {
|
||
|
|
this.refreshCardList();
|
||
|
|
},
|
||
|
|
|
||
|
|
addNewCard: function(event) {
|
||
|
|
AJAX.post(
|
||
|
|
Link.get('addcard'),
|
||
|
|
{card: this.state.newCard},
|
||
|
|
function(response) {
|
||
|
|
this.setState({
|
||
|
|
cards: response.cards,
|
||
|
|
newCard: '',
|
||
|
|
});
|
||
|
|
}.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 from your account?',
|
||
|
|
buttons: {
|
||
|
|
Delete: {
|
||
|
|
btnClass: 'delete',
|
||
|
|
action: function() {
|
||
|
|
AJAX.post(
|
||
|
|
Link.get('removecard'),
|
||
|
|
{card: card},
|
||
|
|
function(response) {
|
||
|
|
this.setState({
|
||
|
|
cards: response.cards,
|
||
|
|
newCard: '',
|
||
|
|
});
|
||
|
|
}.bind(this)
|
||
|
|
);
|
||
|
|
}.bind(this),
|
||
|
|
},
|
||
|
|
Cancel: function() {
|
||
|
|
},
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshCardList: function() {
|
||
|
|
AJAX.get(
|
||
|
|
Link.get('listcards'),
|
||
|
|
function(response) {
|
||
|
|
this.setState({
|
||
|
|
cards: response.cards,
|
||
|
|
});
|
||
|
|
setTimeout(this.refreshCardList, 2500);
|
||
|
|
}.bind(this)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="section">
|
||
|
|
<h3>Your Cards</h3>
|
||
|
|
{this.state.cards.map(function(card) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Card number={card} />
|
||
|
|
<Delete
|
||
|
|
onClick={this.deleteExistingCard.bind(this, card)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}.bind(this))}
|
||
|
|
</div>
|
||
|
|
<div className="section">
|
||
|
|
<h3>Add Card</h3>
|
||
|
|
<form onSubmit={this.addNewCard}>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="inline"
|
||
|
|
value={this.state.newCard}
|
||
|
|
onChange={function(event) {
|
||
|
|
this.setState({newCard: event.target.value});
|
||
|
|
}.bind(this)}
|
||
|
|
name="card_number"
|
||
|
|
/>
|
||
|
|
<input type="submit" value="add card" />
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
ReactDOM.render(
|
||
|
|
React.createElement(card_management, null),
|
||
|
|
document.getElementById('content')
|
||
|
|
);
|