1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import React, { Component } from 'react';
import Gantt from './Gantt';
import Toolbar from './Toolbar';
import MessageArea from './MessageArea';
import './App.css';
let data = {
data: [
{id: 1, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6},
{id: 2, text: 'Task #2', start_date: '18-04-2017', duration: 3, progress: 0.4}
],
links: [
{id: 1, source: 1, target: 2, type: '0'}
]
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentZoom: 'Days',
messages: []
};
this.handleZoomChange = this.handleZoomChange.bind(this);
this.logTaskUpdate = this.logTaskUpdate.bind(this);
this.logLinkUpdate = this.logLinkUpdate.bind(this);
}
addMessage(message) {
var messages = this.state.messages.slice();
var prevKey = messages.length ? messages[0].key: 0;
messages.unshift({key: prevKey + 1, message});
if(messages.length > 40){
messages.pop();
}
this.setState({messages});
}
logTaskUpdate(id, mode, task) {
let text = task && task.text ? ` (${task.text})`: '';
let message = `Task ${mode}: ${id} ${text}`;
this.addMessage(message);
}
logLinkUpdate(id, mode, link) {
let message = `Link ${mode}: ${id}`;
if (link) {
message += ` ( source: ${link.source}, target: ${link.target} )`;
}
this.addMessage(message)
}
handleZoomChange(zoom) {
this.setState({
currentZoom: zoom
});
}
render() {
return (
<div>
<Toolbar
zoom={this.state.currentZoom}
onZoomChange={this.handleZoomChange}
/>
<div className="gantt-container">
<Gantt
tasks={data}
zoom={this.state.currentZoom}
onTaskUpdated={this.logTaskUpdate}
onLinkUpdated={this.logLinkUpdate}
/>
</div>
<MessageArea
messages={this.state.messages}
/>
</div>
);
}
}
export default App;
|
