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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import React, { Component } from 'react';
import Gantt from './Gantt';
import './App.css';
var 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(e) {
this.setState({
currentZoom: e.target.value
});
}
render() {
let zoomRadios = ['Hours', 'Days', 'Months'].map((value) => {
let isActive = this.state.currentZoom === value;
return (
<label key={value} className={`radio-label ${isActive ? 'radio-label-active': ''}`}>
<input type='radio'
checked={isActive}
onChange={this.handleZoomChange}
value={value}/>
{value}
</label>
);
});
let messages = this.state.messages.map(({key, message}) => {
return <li key={key}>{message}</li>
});
return (
<div>
<div className="zoom-bar">
<b>Zooming: </b>
{zoomRadios}
</div>
<div className="gantt-container">
<Gantt
tasks={data}
zoom={this.state.currentZoom}
onTaskUpdated={this.logTaskUpdate}
onLinkUpdated={this.logLinkUpdate}
/>
</div>
<div className="message-area">
<ul>
{messages}
</ul>
</div>
</div>
);
}
}
export default App;
|
