123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- var React = require('react');
- var ReactDOM = require('react-dom');
- var Remarkable = require('remarkable');
- var Button = require('react-bootstrap').Button;
- var ButtonToolbar = require('react-bootstrap').ButtonToolbar;
- var FormControl = require('react-bootstrap').FormControl;
- var FormGroup = require('react-bootstrap').FormGroup;
- var Panel = require('react-bootstrap').Panel;
- var DatePicker = require('react-bootstrap-date-picker');
- var dateFormat = require('dateformat');
- var $ = require('jquery');
- const API_URL = "https://todo.tankernn.eu/php/api.php";
- const priorityNames = {1: "danger", 2: "warning", 3: "primary", 4: "success"};
- function dateToString(date) {
- return dateFormat(date, "yyyy-mm-dd");
- }
- var TodoForm = React.createClass({
- getInitialState: function() {
- return {title: '', text: '', deadline: new Date().toISOString(), priority: 1};
- },
- handleTitleChange: function(e) {
- this.setState({title: e.target.value});
- },
- handleDateChange: function(dateString) {
- this.setState({deadline: dateString});
- },
- handlePriorityChange: function(e) {
- this.setState({priority: e.target.value});
- },
- handleTextChange: function(e) {
- this.setState({text: e.target.value});
- },
- handleSubmit: function(e) {
- e.preventDefault();
- var title = this.state.title.trim();
- var text = this.state.text.trim();
- var priority = this.state.priority;
- var deadline = dateToString(this.state.deadline);
- console.log(deadline);
- if (!title || !text || !deadline) {
- return;
- }
- this.props.onCommentSubmit({a: 'add', title: title, text: text, deadline: deadline, priority: priority});
- this.setState(this.getInitialState());
- },
- render: function() {
- return (
- <form className="form-inline" name="todoForm" onSubmit={this.handleSubmit}>
- <FormControl
- type="text"
- placeholder="Title"
- value={this.state.title}
- onChange={this.handleTitleChange}
- />
- <FormControl componentClass="select" value={this.state.priority} onChange={this.handlePriorityChange}>
- <option value="1">First priority</option>
- <option value="2">Second priority</option>
- <option value="3">Not very important</option>
- <option value="4">Only if you are bored</option>
- </FormControl>
- <DatePicker
- value={this.state.deadline}
- onChange={this.handleDateChange}
- />
- <br />
- <FormControl
- componentClass="textarea"
- value={this.state.text}
- onChange={this.handleTextChange} />
- <br />
- <Button bsStyle="primary" type="submit">Add</Button>
- </form>
- );
- }
- });
- var Item = React.createClass({
- rawMarkup: function() {
- var md = new Remarkable();
- var rawMarkup = md.render(this.props.children.toString());
- return { __html: rawMarkup };
- },
- handleEditClick: function() {
- console.log("I wanna edit.");
- },
- handleDeleteClick: function() {
- console.log("Deleting " + this.props.id);
- this.props.handleDeleteClick(this.props.id);
- },
- render: function() {
- var md = new Remarkable();
- var daysLeft = Math.ceil((new Date(this.props.deadline) - new Date()) / (1000 * 60 * 60 * 24));
- if (daysLeft > 1) {
- daysLeft += " days left.";
- } else if (daysLeft == 1) {
- daysLeft = "One day left.";
- } else if (daysLeft == 0) {
- daysLeft = "Today!";
- } else {
- daysLeft = "Should have been done " + Math.abs(daysLeft) + " day(s) ago."
- }
- return (
- <Panel
- header={<header><span className="deadline">{daysLeft}</span><h3>{this.props.title}</h3></header>}
- footer={
- <ButtonToolbar>
- <Button bsStyle="primary" onClick={this.handleEditClick}>Edit</Button>
- <Button bsStyle="danger" onClick={this.handleDeleteClick}>Delete</Button>
- </ButtonToolbar>
- }
- bsStyle={priorityNames[this.props.priority]}
- >
- <span dangerouslySetInnerHTML={this.rawMarkup()} />
- </Panel>
- );
- }
- });
- var TodoList = React.createClass({
- render: function() {
- console.log(this.props.list);
- var onDeleteClick = this.props.onDeleteClick;
- var itemList = this.props.list.map(function(item) {
- return (
- <Item handleDeleteClick={onDeleteClick} priority={item.priority} title={item.title} id={item.id} key={item.id} deadline={item.deadline}>
- {item.description}
- </Item>
- );
- });
- return (
- <div className="list">
- {itemList}
- </div>
- );
- }
- });
- var App = React.createClass({
- getInitialState: function() {
- return {list: [], result: 0};
- },
- updateList: function() {
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- type: 'GET',
- success: function(data) {
- this.setState({list: data.list, result: data.result});
- }.bind(this),
- error: function(xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
- },
- componentDidMount: function() {
- this.updateList();
- },
- handleCommentSubmit: function(comment) {
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- cache: false,
- type: 'POST',
- data: comment,
- success: function(data) {
- if (data.result != 0) {
- console.log("Error in API: " + data.result);
- }
- if (data.hasOwnProperty("message")) {
- console.log("API message: " + data.message);
- }
- this.setState({list: data.list, result: data.result});
- }.bind(this),
- error: function(xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- this.setState({result: 1});
- }.bind(this)
- });
- },
- handleDelete: function(id) {
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- cache: false,
- type: 'POST',
- data: {a: 'rm', id: id},
- success: function(data) {
- this.setState({list: data.list, result: data.result});
- }.bind(this),
- error: function(xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
- },
- render: function() {
- return (
- <main>
- <h1>Tankernn TODO list</h1>
- <TodoForm onCommentSubmit={this.handleCommentSubmit} />
- <TodoList onDeleteClick={this.handleDelete} list={this.state.list} />
- </main>
- );
- }
- });
- ReactDOM.render(<App url={API_URL} />, document.getElementById('content'));
|