Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react'
2 
 
3 
const TimelineItem = ({addedOn, activity, imageName, isTitle}) => {
4 
    return(
5 
        <div
6 
            className="timeline-item text-center"
7 
        >
8 
            <div
9 
                className="container"
10 
            >
11 
                <div
12 
                    className="row p-2"
13 
                    style={{
14 
                        borderBottom: '1px solid rgb(237 237 237)'
15 
                    }}
16 
                >
17 
                    <div
18 
                        className="col-12 col-sm-12 col-md-4"
19 
                    >
20 
                        <p
21 
                            className={isTitle ? 'font-weight-bold' : ''}
22 
                        >
23 
                            <strong>
24 
                                {addedOn}
25 
                            </strong>
26 
                        </p>
27 
                    </div>
28 
                    <div
29 
                        className="col-12 col-sm-12 col-md-8"
30 
                    >
31 
                        <p
32 
                            style={{
33 
                                display: 'flex',
34 
                                justifyContent: 'center',
35 
                                alignItems: 'center',
36 
                            }}
37 
                            className={isTitle ? 'font-weight-bold' : ''}
38 
                        >
39 
                            {
40 
                                imageName && (
41 
                                    <img
42 
                                        src={'/images/microlearning/'+imageName}
43 
                                        style={{
44 
                                            width: '6%'
45 
                                        }}
46 
                                    />
47 
                                )
48 
                            }
49 
                            {activity}
50 
                        </p>
51 
                    </div>
52 
                </div>
53 
            </div>
54 
        </div>
55 
    )
56 
}
57 
 
58 
export default props => {
59 
    const handleScroll = (event) => {
60 
        const node = event.target;
61 
        if(node.clientHeight >= (node.scrollHeight * .65)){
62 
            props.getMoreItems()
63 
        }
64 
    }
65 
    const paneDidMount = (node) => {
66 
        if(node) {
67 
            node.addEventListener("scroll", handleScroll.bind(this));
68 
        }
69 
    }
70 
    const getActivity = (activity) => {
71 
        switch (activity) {
72 
            case props.activities.ACTIVITY_APPROVED_TEST:
73 
                return{
74 
                    activity: "Aprobo un quiz",
75 
                    imageName: "approved-test.svg"
76 
                }
77 
                break;
78 
            case props.activities.ACTIVITY_COMPLETED_CAPSULE:
79 
                return{
80 
                    activity: "Completo una capsula",
81 
                    imageName: "completed-capsule.svg"
82 
                }
83 
                break;
84 
            case props.activities.ACTIVITY_COMPLETED_TOPIC:
85 
                return{
86 
                    activity: "Completo un topico",
87 
                    imageName: "completed-topic.svg"
88 
                }
89 
                break;
90 
            case props.activities.ACTIVITY_RETAKE_A_TEST:
91 
                return{
92 
                    activity: "Repitió un quiz",
93 
                    imageName: 'retake-a-test.svg'
94 
                }
95 
                break;
96 
            case props.activities.ACTIVITY_SIGNIN:
97 
                return{
98 
                    activity: "Inicio sesión",
99 
                    imageName: "sign-in.svg"
100 
                }
101 
                break;
102 
            case props.activities.ACTIVITY_SIGNOUT:
103 
                return{
104 
                    activity: "Cerro sesión",
105 
                    imageName: "sign-out.svg"
106 
                }
107 
                break;
108 
            case props.activities.ACTIVITY_START_CAPSULE:
109 
                return{
110 
                    activity: "Inicio una capsula",
111 
                    imageName: "start-capsule.svg"
112 
                }
113 
                break;
114 
            case props.activities.ACTIVITY_START_TOPIC:
115 
                return{
116 
                    activity: "Inicio un topico",
117 
                    imageName: "start-topic.svg"
118 
                }
119 
                break;
120 
            case props.activities.ACTIVITY_TAKE_A_TEST:
121 
                return{
122 
                    activity: "Hizo un quiz",
123 
                    imageName: "take-a-test.svg"
124 
                }
125 
                break;
126 
            case props.activities.ACTIVITY_VIEW_SLIDE:
127 
                return{
128 
                    activity: "Vió una diapositiva",
129 
                    imageName: "view-slide.svg"
130 
                }
131 
                break;
132 
            default:
133 
                return{
134 
                    activity: 'Actividad'
135 
                }
136 
                break;
137 
        }
138 
    }
139 
 
140 
    return(
141 
        <div
142 
            className="acc-setting"
143 
            style={{ position: "relative", maxHeight: '50vh', overflow: 'auto'}}
144 
            ref={paneDidMount}
145 
        >
146 
            {
147 
                props.timeline ?
148 
                    <React.Fragment>
149 
 
150 
                        <TimelineItem
151 
                            addedOn="Fecha"
152 
                            activity="Actividad"
153 
                            isTitle
154 
                        />
155 
                        {
156 
                            props.timeline.map((element, i) => {
157 
                                return(
158 
                                    <TimelineItem
159 
                                        addedOn={element.added_on}
160 
                                        {... getActivity(element.activity)}
161 
                                        key={i}
162 
                                    />
163 
                                )
164 
                            })
165 
                        }
166 
                    </React.Fragment>
167 
                :
168 
                <div
169 
                    className="text-center"
170 
                >
171 
                    <h3> No hay elementos para visualizar </h3>
172 
                </div>
173 
            }
174 
        </div>
175 
    )
176 
}