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

297 lines
10 KiB
JavaScript
Raw Normal View History

/*** @jsx React.DOM */
var news_management = React.createClass({
getInitialState: function(props) {
return {
news: window.news,
editing_news: null,
new_entry: {
title: '',
body: '',
},
};
},
componentDidUpdate: function() {
if (this.focus_element && this.focus_element != this.already_focused) {
this.focus_element.focus();
this.already_focused = this.focus_element;
}
},
deleteExistingNews: function(event, newsid) {
$.confirm({
escapeKey: 'Cancel',
animation: 'none',
closeAnimation: 'none',
title: 'Delete Entry',
content: 'Are you sure you want to delete this news entry?',
buttons: {
Delete: {
btnClass: 'delete',
action: function() {
AJAX.post(
Link.get('removenews'),
{newsid: newsid},
function(response) {
this.setState({
news: response.news,
});
}.bind(this)
);
}.bind(this),
},
Cancel: function() {
},
}
});
event.preventDefault();
},
addNews: function(event) {
AJAX.post(
Link.get('addnews'),
{news: this.state.new_entry},
function(response) {
this.setState({
news: response.news,
new_entry: {
title: '',
body: '',
},
});
}.bind(this)
);
event.preventDefault();
},
saveNews: function(event) {
AJAX.post(
Link.get('updatenews'),
{news: this.state.editing_news},
function(response) {
this.setState({
news: response.news,
editing_news: null,
});
}.bind(this)
);
event.preventDefault();
},
previewNews: function(event, entry) {
$.confirm({
escapeKey: 'Close',
animation: 'none',
closeAnimation: 'none',
title: entry.title.length > 0 ? entry.title : 'No Title',
content: entry.body.length > 0 ? entry.body : 'No body.',
buttons: {
Close: function() {
},
}
});
event.preventDefault();
},
renderDate: function(entry) {
return (
<Timestamp timestamp={entry.timestamp} />
);
},
renderTitle: function(entry) {
if (this.state.editing_news && entry.id == this.state.editing_news.id) {
return (
<input
name="title"
type="text"
autofocus="true"
ref={c => (this.focus_element = c)}
value={ this.state.editing_news.title }
onChange={function(event) {
var entry = this.state.editing_news;
entry.title = event.target.value;
this.setState({
editing_news: entry,
});
}.bind(this)}
/>
);
} else {
return (
<span>{ entry.title }</span>
);
}
},
renderBody: function(entry) {
if (this.state.editing_news && entry.id == this.state.editing_news.id) {
return (
<textarea
name="body"
cols="60"
rows="10"
value={ this.state.editing_news.body }
onChange={function(event) {
var entry = this.state.editing_news;
entry.body = event.target.value;
this.setState({
editing_news: entry,
});
}.bind(this)}
/>
);
} else {
return (
<span>{ entry.body }</span>
);
}
},
renderEditButton: function(entry) {
if (this.state.editing_news) {
if (this.state.editing_news.id == entry.id) {
return (
<span>
<input
type="button"
value="preview"
onClick={function(event) {
this.previewNews(event, this.state.editing_news);
}.bind(this)}
/>
<input
type="submit"
value="save"
/>
<input
type="button"
value="cancel"
onClick={function(event) {
this.setState({
editing_news: null,
});
}.bind(this)}
/>
</span>
);
} else {
return <span></span>;
}
} else {
return (
<span>
<Edit
onClick={function(event) {
var editing_news = null;
this.state.news.map(function(a) {
if (a.id == entry.id) {
editing_news = jQuery.extend(true, {}, a);
}
});
this.setState({
editing_news: editing_news,
});
}.bind(this)}
/>
<Delete
onClick={function(event) {
this.deleteExistingNews(event, entry.id);
}.bind(this)}
/>
</span>
);
}
},
render: function() {
return (
<div>
<div className="section">
{ this.state.news.length > 0 ?
<form className="inline" onSubmit={this.saveNews}>
<table className="list news">
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th>Body</th>
<th className="action"></th>
</tr>
</thead>
<tbody>
{
this.state.news.map(function(entry) {
return (
<tr>
<td>{ this.renderDate(entry) }</td>
<td>{ this.renderTitle(entry) }</td>
<td>{ this.renderBody(entry) }</td>
<td className="edit">{ this.renderEditButton(entry) }</td>
</tr>
);
}.bind(this))
}
</tbody>
</table>
</form> :
<span className="placeholder">
There are no news entries on this network.
</span>
}
</div>
<div className="section">
<h3>Add Entry</h3>
<form className="inline" onSubmit={this.addNews}>
<LabelledSection vertical={true} label="Title">
<input
name="title"
type="text"
size="50"
value={ this.state.new_entry.title }
onChange={function(event) {
var entry = this.state.new_entry;
entry.title = event.target.value;
this.setState({new_entry: entry});
}.bind(this)}
/>
</LabelledSection>
<LabelledSection vertical={true} label="Body">
<textarea
name="body"
cols="80"
rows="10"
value={ this.state.new_entry.body }
onChange={function(event) {
var entry = this.state.new_entry;
entry.body = event.target.value;
this.setState({new_entry: entry});
}.bind(this)}
/>
</LabelledSection>
<LabelledSection vertical={true}>
<input
type="button"
value="preview"
onClick={function(event) {
this.previewNews(event, this.state.new_entry);
}.bind(this)}
/>
<input
type="submit"
value="post"
/>
</LabelledSection>
</form>
</div>
</div>
);
},
});
ReactDOM.render(
React.createElement(news_management, null),
document.getElementById('content')
);