|
|
@@ -6,13 +6,14 @@ 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 Modal = require('react-bootstrap').Modal;
|
|
|
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"};
|
|
|
+const priorityNames = {1: "danger", 2: "warning", 3: "info", 4: "success"};
|
|
|
|
|
|
function dateToString(date) {
|
|
|
return dateFormat(date, "yyyy-mm-dd");
|
|
|
@@ -20,13 +21,23 @@ function dateToString(date) {
|
|
|
|
|
|
var TodoForm = React.createClass({
|
|
|
getInitialState: function() {
|
|
|
- return {title: '', text: '', deadline: new Date().toISOString(), priority: 1};
|
|
|
+ return {showModal: false, title: this.props.title, text: this.props.text, deadline: this.props.deadline, priority: this.props.priority};
|
|
|
+ },
|
|
|
+ getDefaultProps: function() {
|
|
|
+ return {edit: false};
|
|
|
+ },
|
|
|
+ closeModal() {
|
|
|
+ this.setState({ showModal: false });
|
|
|
+ },
|
|
|
+ openModal() {
|
|
|
+ this.setState({ showModal: true });
|
|
|
},
|
|
|
handleTitleChange: function(e) {
|
|
|
this.setState({title: e.target.value});
|
|
|
},
|
|
|
handleDateChange: function(dateString) {
|
|
|
this.setState({deadline: dateString});
|
|
|
+ console.log(dateToString(dateString));
|
|
|
},
|
|
|
handlePriorityChange: function(e) {
|
|
|
this.setState({priority: e.target.value});
|
|
|
@@ -44,36 +55,53 @@ var TodoForm = React.createClass({
|
|
|
if (!title || !text || !deadline) {
|
|
|
return;
|
|
|
}
|
|
|
- this.props.onCommentSubmit({a: 'add', title: title, text: text, deadline: deadline, priority: priority});
|
|
|
- this.setState(this.getInitialState());
|
|
|
+ this.props.onCommentSubmit({a: (this.props.edit ? 'edit' : 'add'), id: -1, title: title, text: text, deadline: deadline, priority: priority});
|
|
|
+ this.closeModal();
|
|
|
+ if (!this.props.edit)
|
|
|
+ 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>
|
|
|
+ <div>
|
|
|
+ <Button bsStyle="primary" onClick={this.openModal}>{this.props.edit ? "Edit" : "Add"}</Button>
|
|
|
+
|
|
|
+ <Modal show={this.state.showModal} onHide={this.closeModal}>
|
|
|
+ <form name="todoForm" onSubmit={this.handleSubmit}>
|
|
|
+ <Modal.Header closeButton>
|
|
|
+ <Modal.Title>TODO-Form</Modal.Title>
|
|
|
+ </Modal.Header>
|
|
|
+ <Modal.Body>
|
|
|
+ <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} />
|
|
|
+ </Modal.Body>
|
|
|
+ <Modal.Footer>
|
|
|
+ <ButtonToolbar>
|
|
|
+ <Button bsStyle="primary" type="submit">Save</Button>
|
|
|
+ <Button onClick={this.closeModal}>Cancel</Button>
|
|
|
+ </ButtonToolbar>
|
|
|
+ </Modal.Footer>
|
|
|
+ </form>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
@@ -84,35 +112,51 @@ var Item = React.createClass({
|
|
|
var rawMarkup = md.render(this.props.children.toString());
|
|
|
return { __html: rawMarkup };
|
|
|
},
|
|
|
- handleEditClick: function() {
|
|
|
- console.log("I wanna edit.");
|
|
|
+ handleEditSubmit: function(data) {
|
|
|
+ data.a = 'edit';
|
|
|
+ data.id = this.props.id;
|
|
|
+ this.props.handleEditSubmit(data);
|
|
|
},
|
|
|
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) {
|
|
|
+ if (isNaN(daysLeft)) {
|
|
|
+ daysLeft = "No deadline.";
|
|
|
+ } else if (daysLeft > 1) {
|
|
|
daysLeft += " days left.";
|
|
|
} else if (daysLeft == 1) {
|
|
|
daysLeft = "One day left.";
|
|
|
} else if (daysLeft == 0) {
|
|
|
- daysLeft = "Today!";
|
|
|
+ daysLeft = "Deadline today!";
|
|
|
} else {
|
|
|
daysLeft = "Should have been done " + Math.abs(daysLeft) + " day(s) ago."
|
|
|
}
|
|
|
|
|
|
+ var deadline = new Date(this.props.deadline);
|
|
|
+ if (isNaN(deadline))
|
|
|
+ deadline = new Date();
|
|
|
+
|
|
|
+ var todoForm = <TodoForm
|
|
|
+ title={this.props.title}
|
|
|
+ text={this.props.children.toString()}
|
|
|
+ deadline={deadline.toISOString()}
|
|
|
+ priority={this.props.priority}
|
|
|
+ onCommentSubmit={this.handleEditSubmit}
|
|
|
+ edit={true}
|
|
|
+ />;
|
|
|
+
|
|
|
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>
|
|
|
+ {todoForm}
|
|
|
<Button bsStyle="danger" onClick={this.handleDeleteClick}>Delete</Button>
|
|
|
</ButtonToolbar>
|
|
|
}
|
|
|
@@ -128,9 +172,10 @@ var TodoList = React.createClass({
|
|
|
render: function() {
|
|
|
console.log(this.props.list);
|
|
|
var onDeleteClick = this.props.onDeleteClick;
|
|
|
+ var handleEditSubmit = this.props.handleEditSubmit;
|
|
|
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 handleDeleteClick={onDeleteClick} handleEditSubmit={handleEditSubmit} priority={item.priority} title={item.title} id={item.id} key={item.id} deadline={item.deadline}>
|
|
|
{item.description}
|
|
|
</Item>
|
|
|
);
|
|
|
@@ -153,6 +198,11 @@ var App = React.createClass({
|
|
|
dataType: 'json',
|
|
|
type: 'GET',
|
|
|
success: function(data) {
|
|
|
+ // Not logged in
|
|
|
+ if (data.result == 1) {
|
|
|
+ document.location.href = "https://tankernn.eu/login/";
|
|
|
+ }
|
|
|
+ // Success
|
|
|
this.setState({list: data.list, result: data.result});
|
|
|
}.bind(this),
|
|
|
error: function(xhr, status, err) {
|
|
|
@@ -204,8 +254,8 @@ var App = React.createClass({
|
|
|
return (
|
|
|
<main>
|
|
|
<h1>Tankernn TODO list</h1>
|
|
|
- <TodoForm onCommentSubmit={this.handleCommentSubmit} />
|
|
|
- <TodoList onDeleteClick={this.handleDelete} list={this.state.list} />
|
|
|
+ <TodoForm title={""} text={""} deadline={new Date().toISOString()} priority={1} onCommentSubmit={this.handleCommentSubmit} />
|
|
|
+ <TodoList onDeleteClick={this.handleDelete} handleEditSubmit={this.handleCommentSubmit} list={this.state.list} />
|
|
|
</main>
|
|
|
);
|
|
|
}
|
