TechSuite/code.js at master · R-Ligier/TechSuite · GitHub

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component } from 'react';
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
// import logo from './logo.svg';
// import './App.css';
import tasks from './tasks.json';

class App extends Component {
  render() {

    return(
      <VerticalTimeline>
        {
          tasks.map((task, index) => {
            if (index % 2 == 0) {
              return (
                <VerticalTimelineElement
                  position="right"
                >
                  <h3 className="vertical-timeline-element-title">{index}</h3>
                  <h4 className="vertical-timeline-element-subtitle">{task.taskDescription}</h4>
                </VerticalTimelineElement>
              );

            } else {
                          return (
                <VerticalTimelineElement
                  position="left"
                >
                  <h3 className="vertical-timeline-element-title">{index}</h3>
                  <h4 className="vertical-timeline-element-subtitle">{task.taskDescription}</h4>
                </VerticalTimelineElement>
              );

            }
          })
        }
      </VerticalTimeline>
      );
    }

}

export default App;


const completedStyle = {
  background: '#ffd72f',
};

const incompletedStyle = {
  background: '#26ee99',
}

class App extends Component {
  render() {

    return(
      <VerticalTimeline>
      {

        // let style = this.getStyleFromTask(task);

        tasks.map((task, index) => {
            let style;
            if (task.taskProgress === "Completed") {
              style = completedStyle;
            } else if (task.taskProgress === "Incomplete") {
              style = incompletedStyle;
            } else if (task.taskProgress === "In Progress") {
              // set style to whatever
            }


          if (index % 2 === 0) {
            return (
              <VerticalTimelineElement
              position="right"
              iconStyle={style}
              >
              <h3 className="vertical-timeline-element-title">{index}</h3>
              <h4 className="vertical-timeline-element-subtitle">{task.taskDescription}</h4>
              <Button onClick={this.handleClick(task)}/>
              <SimpleDialogWrapped
                selectedValue={task}
                open={this.state.open}
                onClose={this.handleClose}
              />
              </VerticalTimelineElement>
              );

          } else {
            return (
              <VerticalTimelineElement
              position="left"
              iconStyle={style}
              >
              <h3 className="vertical-timeline-element-title">{index}</h3>
              <h4 className="vertical-timeline-element-subtitle">{task.taskDescription}</h4>
              </VerticalTimelineElement>
              );

          }
        })
      }
      </VerticalTimeline>
      );
  }

}

export default App;


 <SimpleDialogWrapped
                selectedValue={task}
                open={this.state.open}
                onClose={this.handleClose}
              />