index.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  3. var Remarkable = require('remarkable');
  4. var Button = require('react-bootstrap').Button;
  5. var FormControl = require('react-bootstrap').FormControl;
  6. var DatePicker = require('react-bootstrap-date-picker');
  7. var $ = require('jquery');
  8. var TodoForm = React.createClass({
  9. getInitialState: function() {
  10. return {title: '', text: '', deadline: new Date().toISOString(), priority: '1'};
  11. },
  12. handleTitleChange: function(e) {
  13. this.setState({title: e.target.value});
  14. },
  15. handleDateChange: function(dateString) {
  16. this.setState({deadline: dateString});
  17. },
  18. handlePriorityChange: function(e) {
  19. this.setState({priority: e.target.value});
  20. },
  21. handleTextChange: function(e) {
  22. this.setState({text: e.target.value});
  23. },
  24. handleSubmit: function(e) {
  25. e.preventDefault();
  26. var title = this.state.title.trim();
  27. var text = this.state.text.trim();
  28. var priority = this.state.priority;
  29. var deadline = this.state.deadline;
  30. console.log(deadline);
  31. if (!title || !text || !deadline) {
  32. return;
  33. }
  34. this.props.onCommentSubmit({a: 'add', title: title, text: text, deadline: deadline, priority: priority});
  35. this.setState(this.getInitialState());
  36. },
  37. render: function() {
  38. return (
  39. <form className="form-inline" name="todoForm" onSubmit={this.handleSubmit}>
  40. <FormControl
  41. type="text"
  42. placeholder="Title"
  43. value={this.state.title}
  44. onChange={this.handleTitleChange}
  45. />
  46. <FormControl componentClass="select" value={this.state.priority} onChange={this.handlePriorityChange}>
  47. <option value="1">First priority</option>
  48. <option value="2">Second priority</option>
  49. <option value="3">Not very important</option>
  50. <option value="4">Only if you are bored</option>
  51. </FormControl>
  52. <DatePicker
  53. value={this.state.deadline}
  54. onChange={this.handleDateChange}
  55. />
  56. <br />
  57. <FormControl
  58. componentClass="textarea"
  59. value={this.state.text}
  60. onChange={this.handleTextChange} />
  61. <br />
  62. <Button bsStyle="primary" type="submit">Add</Button>
  63. </form>
  64. );
  65. }
  66. });
  67. var LoginForm = React.createClass({
  68. getInitialState: function() {
  69. return {user: '', pass: ''};
  70. },
  71. handleUserChange: function(e) {
  72. this.setState({user: e.target.value});
  73. },
  74. handlePassChange: function(e) {
  75. this.setState({pass: e.target.value});
  76. },
  77. handleSubmit: function(e) {
  78. e.preventDefault();
  79. var user = this.state.user;
  80. var pass = this.state.pass;
  81. if (!user || !pass) {
  82. return;
  83. }
  84. $.post(
  85. "https://tankernn.eu/login/check_login.php",
  86. {user: user, pass: pass},
  87. function(result) {
  88. console.log(result);
  89. }
  90. );
  91. this.setState(this.getInitialState());
  92. },
  93. render: function() {
  94. return (
  95. <form id="loginForm" name="loginForm" onSubmit={this.handleSubmit}>
  96. <FormControl type="text" value={this.state.user} onChange={this.handleUserChange} />
  97. <FormControl type="password" value={this.state.pass} onChange={this.handlePassChange} />
  98. <Button bsStyle="primary" type="submit">Log in</Button>
  99. </form>
  100. );
  101. }
  102. });
  103. var Item = React.createClass({
  104. rawMarkup: function() {
  105. var md = new Remarkable();
  106. var rawMarkup = md.render(this.props.children.toString());
  107. return { __html: rawMarkup };
  108. },
  109. render: function() {
  110. var md = new Remarkable();
  111. return (
  112. <div className="item">
  113. <h2>{this.props.title}</h2>
  114. <span dangerouslySetInnerHTML={this.rawMarkup()} />
  115. </div>
  116. );
  117. }
  118. });
  119. var TodoList = React.createClass({
  120. render: function() {
  121. console.log(this.props.list);
  122. var itemList = this.props.list.map(function(item) {
  123. return (
  124. <Item priority={item.priority} title={item.title} key={item.id}>
  125. {item.description}
  126. </Item>
  127. );
  128. });
  129. return (
  130. <div className="list">
  131. {itemList}
  132. </div>
  133. );
  134. }
  135. });
  136. var App = React.createClass({
  137. getInitialState: function() {
  138. return {list: []};
  139. },
  140. componentDidMount: function() {
  141. $.ajax({
  142. url: this.props.url,
  143. dataType: 'json',
  144. type: 'GET',
  145. success: function(data) {
  146. this.setState({list: data.list});
  147. }.bind(this),
  148. error: function(xhr, status, err) {
  149. console.error(this.props.url, status, err.toString());
  150. }.bind(this)
  151. });
  152. },
  153. handleCommentSubmit: function(comment) {
  154. $.ajax({
  155. url: this.props.url,
  156. dataType: 'json',
  157. cache: false,
  158. type: 'POST',
  159. data: comment,
  160. success: function(data) {
  161. if (data.result != 0) {
  162. console.log("Error in API: " + data.result);
  163. }
  164. this.setState({list: data.list, result: data.result});
  165. }.bind(this),
  166. error: function(xhr, status, err) {
  167. console.error(this.props.url, status, err.toString());
  168. this.setState({result: 1});
  169. }.bind(this)
  170. });
  171. },
  172. render: function() {
  173. if (this.state.result == 0)
  174. return (
  175. <main>
  176. <h1>Tankernn TODO list</h1>
  177. <TodoForm onCommentSubmit={this.handleCommentSubmit} />
  178. <TodoList list={this.state.list} />
  179. </main>
  180. );
  181. else
  182. return (
  183. <main>
  184. <h1>Tankernn TODO list</h1>
  185. <LoginForm />
  186. </main>
  187. );
  188. }
  189. });
  190. ReactDOM.render(<App url="https://todo.tankernn.eu/php/api.php" />, document.getElementById('content'));