viithiisys / spotlight-frontend

Download as
Browse Code »

Commit d06044c201a8ec3e284bae7bb7d8e148a8b31bf8

Authored by Digvijay Singh
1 parent 13fc2e78df
Exists in master

insight upper logo

Showing 2 changed files with 3 additions and 3 deletions   Show diff stats
src/components/SingleMobileScreenInsightOne.vue
Diff comments   View file @d06044c
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 8
9 <!-- chat box --> 9 <!-- chat box -->
10 <div class="bounce-board-wrp" id="cht_box_close"> 10 <div class="bounce-board-wrp" id="cht_box_close">
11 <div class="inner-wrp-bc"> 11 <div class="inner-wrp-bc">
12 <div class="bc-top-head"> 12 <div class="bc-top-head">
13 <span class="bc-head"> 13 <span class="bc-head">
14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
15 </span> 15 </span>
16 <div class="action-sort"> 16 <div class="action-sort">
17 <!-- <span class="sort-by">SORT BY</span> 17 <!-- <span class="sort-by">SORT BY</span>
18 <div class="btn-group"> 18 <div class="btn-group">
19 <button 19 <button
20 type="button" 20 type="button"
21 class="bc-sort-list dropdown-toggle" 21 class="bc-sort-list dropdown-toggle"
22 data-toggle="dropdown" 22 data-toggle="dropdown"
23 aria-haspopup="true" 23 aria-haspopup="true"
24 aria-expanded="false" 24 aria-expanded="false"
25 > 25 >
26 BEST 26 BEST
27 </button> 27 </button>
28 <div class="dropdown-menu short_by"> 28 <div class="dropdown-menu short_by">
29 <a class="dropdown-item" href="javasript:void(0);" 29 <a class="dropdown-item" href="javasript:void(0);"
30 >BEST 1</a 30 >BEST 1</a
31 > 31 >
32 <a class="dropdown-item" href="javasript:void(0);" 32 <a class="dropdown-item" href="javasript:void(0);"
33 >BEST 2</a 33 >BEST 2</a
34 > 34 >
35 <a class="dropdown-item" href="javasript:void(0);" 35 <a class="dropdown-item" href="javasript:void(0);"
36 >BEST 3</a 36 >BEST 3</a
37 > 37 >
38 </div> 38 </div>
39 </div> --> 39 </div> -->
40 <a 40 <a
41 href="javasript:void(0);" 41 href="javasript:void(0);"
42 @click="chtbox_close" 42 @click="chtbox_close"
43 class="close_chat_bx" 43 class="close_chat_bx"
44 ><img src="../assets/images/close.png" alt="close" /></a 44 ><img src="../assets/images/close.png" alt="close" /></a
45 ><!-- close --> 45 ><!-- close -->
46 </div> 46 </div>
47 <!-- action sort --> 47 <!-- action sort -->
48 </div> 48 </div>
49 <!-- top head --> 49 <!-- top head -->
50 <div class="bounce-board-body"> 50 <div class="bounce-board-body">
51 <!-- all user comments --> 51 <!-- all user comments -->
52 <ul class="bounced-user-comments"> 52 <ul class="bounced-user-comments">
53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
54 <div class="bc_brd_l"></div> 54 <div class="bc_brd_l"></div>
55 <!-- border --> 55 <!-- border -->
56 <div class="parent-full-width" v-if="cmnt.comment"> 56 <div class="parent-full-width" v-if="cmnt.comment">
57 <div class="full-width"> 57 <div class="full-width">
58 <div class="b-user-head"> 58 <div class="b-user-head">
59 <img :src="cmnt.user.profilePic" /> 59 <img :src="cmnt.user.profilePic" />
60 <span class="head-content">{{ cmnt.user.name }} </span> 60 <span class="head-content">{{ cmnt.user.name }} </span>
61 <ul> 61 <ul>
62 <li> 62 <li>
63 <span></span 63 <span></span
64 ><img src="../assets/images/u-info-icon.png" />{{ 64 ><img src="../assets/images/u-info-icon.png" />{{
65 cmnt.user.karmaPoints 65 cmnt.user.karmaPoints
66 }}pts 66 }}pts
67 </li> 67 </li>
68 <li> 68 <li>
69 <span></span>{{ dateGenerator(cmnt.createdAt) }} 69 <span></span>{{ dateGenerator(cmnt.createdAt) }}
70 </li> 70 </li>
71 </ul> 71 </ul>
72 </div> 72 </div>
73 <!-- header --> 73 <!-- header -->
74 <p> 74 <p>
75 {{ cmnt.comment }} 75 {{ cmnt.comment }}
76 </p> 76 </p>
77 <div class="joined_wrapper"> 77 <div class="joined_wrapper">
78 <ul class="joined-info info_bc_spc"> 78 <ul class="joined-info info_bc_spc">
79 <li> 79 <li>
80 <img 80 <img
81 src="../assets/images/heart.svg" 81 src="../assets/images/heart.svg"
82 v-if="cmnt.like == false" 82 v-if="cmnt.like == false"
83 @click="likeComment(true, cmnt._id)" 83 @click="likeComment(true, cmnt._id)"
84 class="cursor-pointer" 84 class="cursor-pointer"
85 /> 85 />
86 <img 86 <img
87 src="../assets/images/purple-heart.png" 87 src="../assets/images/purple-heart.png"
88 v-if="cmnt.like == true" 88 v-if="cmnt.like == true"
89 @click="likeComment(false, cmnt._id)" 89 @click="likeComment(false, cmnt._id)"
90 class="cursor-pointer" 90 class="cursor-pointer"
91 /> 91 />
92 </li> 92 </li>
93 <li> 93 <li>
94 <a href="javasript:void(0);"> 94 <a href="javasript:void(0);">
95 {{ cmnt.likes.length }}</a 95 {{ cmnt.likes.length }}</a
96 > 96 >
97 </li> 97 </li>
98 <li class="comment-spc"> 98 <li class="comment-spc">
99 <img src="../assets/images/purple-comment.png" /> 99 <img src="../assets/images/purple-comment.png" />
100 </li> 100 </li>
101 <li> 101 <li>
102 <a href="javasript:void(0);"> 102 <a href="javasript:void(0);">
103 {{ cmnt.children.length }}</a 103 {{ cmnt.children.length }}</a
104 > 104 >
105 </li> 105 </li>
106 </ul> 106 </ul>
107 <div class="add_rply" v-if="!cmnt.childInput"> 107 <div class="add_rply" v-if="!cmnt.childInput">
108 <input 108 <input
109 type="text" 109 type="text"
110 @click="eachRply(cmnt)" 110 @click="eachRply(cmnt)"
111 class="add_Rply_C" 111 class="add_Rply_C"
112 placeholder="Add your reply" 112 placeholder="Add your reply"
113 /> 113 />
114 </div> 114 </div>
115 <!-- rly form --> 115 <!-- rly form -->
116 </div> 116 </div>
117 <!-- joined wrapper --> 117 <!-- joined wrapper -->
118 </div> 118 </div>
119 <!-- full width --> 119 <!-- full width -->
120 </div> 120 </div>
121 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 121 <div class="comments-footer each-ft" v-if="cmnt.childInput">
122 <textarea v-model="comment" id="childInput"></textarea> 122 <textarea v-model="comment" id="childInput"></textarea>
123 <div class="comments-footer-wrp"> 123 <div class="comments-footer-wrp">
124 <a 124 <a
125 @click="createChildComment(cmnt)" 125 @click="createChildComment(cmnt)"
126 href="javasript:void(0);" 126 href="javasript:void(0);"
127 class="add_comments_chat reply-Wdth" 127 class="add_comments_chat reply-Wdth"
128 >Reply</a 128 >Reply</a
129 > 129 >
130 <a 130 <a
131 href="javasript:void(0);" 131 href="javasript:void(0);"
132 class="discard_bt" 132 class="discard_bt"
133 @click="discardRply(cmnt)" 133 @click="discardRply(cmnt)"
134 ><img src="../assets/images/discard.svg" 134 ><img src="../assets/images/discard.svg"
135 /></a> 135 /></a>
136 </div> 136 </div>
137 </div> 137 </div>
138 <!-- parent --> 138 <!-- parent -->
139 <div 139 <div
140 class="child-full-width" 140 class="child-full-width"
141 v-for="(childCmnt, i) in cmnt.children" 141 v-for="(childCmnt, i) in cmnt.children"
142 :key="i" 142 :key="i"
143 > 143 >
144 <div class="full-width"> 144 <div class="full-width">
145 <div class="b-user-head"> 145 <div class="b-user-head">
146 <img :src="childCmnt.user.profilePic" /> 146 <img :src="childCmnt.user.profilePic" />
147 <span class="head-content" 147 <span class="head-content"
148 >{{ childCmnt.user.name }} 148 >{{ childCmnt.user.name }}
149 </span> 149 </span>
150 <ul> 150 <ul>
151 <li> 151 <li>
152 <span></span 152 <span></span
153 ><img src="../assets/images/u-info-icon.png" />{{ 153 ><img src="../assets/images/u-info-icon.png" />{{
154 childCmnt.user.karmaPoints 154 childCmnt.user.karmaPoints
155 }}pts 155 }}pts
156 </li> 156 </li>
157 <li> 157 <li>
158 <span></span 158 <span></span
159 >{{ dateGenerator(childCmnt.createdAt) }} 159 >{{ dateGenerator(childCmnt.createdAt) }}
160 </li> 160 </li>
161 </ul> 161 </ul>
162 </div> 162 </div>
163 <p> 163 <p>
164 {{ childCmnt.comment }} 164 {{ childCmnt.comment }}
165 </p> 165 </p>
166 <div class="joined_wrapper"> 166 <div class="joined_wrapper">
167 <ul class="joined-info info_bc_spc"> 167 <ul class="joined-info info_bc_spc">
168 <li> 168 <li>
169 <img 169 <img
170 src="../assets/images/heart.svg" 170 src="../assets/images/heart.svg"
171 v-if="childCmnt.like == false" 171 v-if="childCmnt.like == false"
172 @click="likeComment(true, childCmnt._id)" 172 @click="likeComment(true, childCmnt._id)"
173 class="cursor-pointer" 173 class="cursor-pointer"
174 /> 174 />
175 <img 175 <img
176 src="../assets/images/purple-heart.png" 176 src="../assets/images/purple-heart.png"
177 v-if="childCmnt.like == true" 177 v-if="childCmnt.like == true"
178 @click="likeComment(false, childCmnt._id)" 178 @click="likeComment(false, childCmnt._id)"
179 class="cursor-pointer" 179 class="cursor-pointer"
180 /> 180 />
181 </li> 181 </li>
182 <li> 182 <li>
183 <a href="javasript:void(0);"> 183 <a href="javasript:void(0);">
184 {{ childCmnt.likes.length }}</a 184 {{ childCmnt.likes.length }}</a
185 > 185 >
186 </li> 186 </li>
187 </ul> 187 </ul>
188 </div> 188 </div>
189 </div> 189 </div>
190 </div> 190 </div>
191 <!-- eree --> 191 <!-- eree -->
192 192
193 <!-- comments footer --> 193 <!-- comments footer -->
194 </li> 194 </li>
195 </ul> 195 </ul>
196 </div> 196 </div>
197 <!-- bounce board body --> 197 <!-- bounce board body -->
198 <div class="comments-footer" v-if="parentInput"> 198 <div class="comments-footer" v-if="parentInput">
199 <textarea v-model="comment"></textarea> 199 <textarea v-model="comment"></textarea>
200 <div class="comments-footer-wrp"> 200 <div class="comments-footer-wrp">
201 <a 201 <a
202 href="javasript:void(0);" 202 href="javasript:void(0);"
203 class="add_comments_chat" 203 class="add_comments_chat"
204 @click="createComment" 204 @click="createComment"
205 ><img src="../assets/images/add-comment.svg" /> Comment</a 205 ><img src="../assets/images/add-comment.svg" /> Comment</a
206 > 206 >
207 </div> 207 </div>
208 </div> 208 </div>
209 <!-- comments footer --> 209 <!-- comments footer -->
210 </div> 210 </div>
211 </div> 211 </div>
212 <!-- bounceboard wrp --> 212 <!-- bounceboard wrp -->
213 <!-- chat box --> 213 <!-- chat box -->
214 214
215 <div class="single-mobileInsight"> 215 <div class="single-mobileInsight">
216 <div class="m-screen-hidden"> 216 <div class="m-screen-hidden">
217 <div class="top-area-blank"></div> 217 <div class="top-area-blank"></div>
218 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" /> 218 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" />
219 </div> 219 </div>
220 <div class="single-left-Insight-comments"> 220 <div class="single-left-Insight-comments">
221 <div class="author-thoughts"> 221 <div class="author-thoughts">
222 222 <!--
223 <img 223 <img
224 src="../assets/images/thoughts-upper.svg" 224 src="../assets/images/thoughts-upper.svg"
225 class="upper-th" 225 class="upper-th"
226 /> 226 /> -->
227 <img 227 <img
228 :src="currentSlideData.payload.metaData.authorImage" 228 :src="currentSlideData.payload.metaData.authorImage"
229 class="dynamic-thoughts" 229 class="dynamic-thoughts"
230 /> 230 />
231 </div><!-- user thoughts --> 231 </div><!-- user thoughts -->
232 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 232 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
233 <div class="a-intro-comments custom-c-style"> 233 <div class="a-intro-comments custom-c-style">
234 <p> 234 <p>
235 {{commentList[0].comment}} 235 {{commentList[0].comment}}
236 </p> 236 </p>
237 <ul class="rly-comment-set"> 237 <ul class="rly-comment-set">
238 <!-- like/dislike --> 238 <!-- like/dislike -->
239 <li> 239 <li>
240 <img 240 <img
241 src="../assets/images/heart.svg" 241 src="../assets/images/heart.svg"
242 v-if="commentList[0].like == false" 242 v-if="commentList[0].like == false"
243 @click="likeComment(true, commentList[0]._id)" 243 @click="likeComment(true, commentList[0]._id)"
244 class="cursor-pointer" 244 class="cursor-pointer"
245 /> 245 />
246 <img 246 <img
247 src="../assets/images/purple-heart.png" 247 src="../assets/images/purple-heart.png"
248 v-if="commentList[0].like == true" 248 v-if="commentList[0].like == true"
249 @click="likeComment(false, commentList[0]._id)" 249 @click="likeComment(false, commentList[0]._id)"
250 class="cursor-pointer" 250 class="cursor-pointer"
251 /> 251 />
252 <a href="javascript:void(0);">{{ 252 <a href="javascript:void(0);">{{
253 commentList[0].likes.length 253 commentList[0].likes.length
254 }}</a> 254 }}</a>
255 </li> 255 </li>
256 <!-- like/dislike ends --> 256 <!-- like/dislike ends -->
257 <li> 257 <li>
258 <img src="../assets/images/rply.svg" /> 258 <img src="../assets/images/rply.svg" />
259 <a href="javascript:void(0);" @click="reply_cht_box(0)" 259 <a href="javascript:void(0);" @click="reply_cht_box(0)"
260 >Reply</a 260 >Reply</a
261 > 261 >
262 </li> 262 </li>
263 </ul> 263 </ul>
264 </div> 264 </div>
265 <!-- comments box --> 265 <!-- comments box -->
266 </div> 266 </div>
267 <!-- single author comments --> 267 <!-- single author comments -->
268 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 268 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
269 <div class="a-intro-comments custom-c-style"> 269 <div class="a-intro-comments custom-c-style">
270 <p> 270 <p>
271 {{commentList[1].comment}} 271 {{commentList[1].comment}}
272 </p> 272 </p>
273 <ul class="rly-comment-set"> 273 <ul class="rly-comment-set">
274 <!-- like/dislike --> 274 <!-- like/dislike -->
275 <li> 275 <li>
276 <img 276 <img
277 src="../assets/images/heart.svg" 277 src="../assets/images/heart.svg"
278 v-if="commentList[1].like == false" 278 v-if="commentList[1].like == false"
279 @click="likeComment(true, commentList[1]._id)" 279 @click="likeComment(true, commentList[1]._id)"
280 class="cursor-pointer" 280 class="cursor-pointer"
281 /> 281 />
282 <img 282 <img
283 src="../assets/images/purple-heart.png" 283 src="../assets/images/purple-heart.png"
284 v-if="commentList[1].like == true" 284 v-if="commentList[1].like == true"
285 @click="likeComment(false, commentList[1]._id)" 285 @click="likeComment(false, commentList[1]._id)"
286 class="cursor-pointer" 286 class="cursor-pointer"
287 /> 287 />
288 <a href="javascript:void(0);">{{ 288 <a href="javascript:void(0);">{{
289 commentList[1].likes.length 289 commentList[1].likes.length
290 }}</a> 290 }}</a>
291 </li> 291 </li>
292 <!-- like/dislike ends --> 292 <!-- like/dislike ends -->
293 <li> 293 <li>
294 <img src="../assets/images/rply.svg" /> 294 <img src="../assets/images/rply.svg" />
295 <a href="javascript:void(0);" @click="reply_cht_box(1)" 295 <a href="javascript:void(0);" @click="reply_cht_box(1)"
296 >Reply</a 296 >Reply</a
297 > 297 >
298 </li> 298 </li>
299 </ul> 299 </ul>
300 </div> 300 </div>
301 <!-- comments box --> 301 <!-- comments box -->
302 </div> 302 </div>
303 <!-- single author comments --> 303 <!-- single author comments -->
304 </div> 304 </div>
305 <!-- single mobile Left insight --> 305 <!-- single mobile Left insight -->
306 <div class="c-product-insight-wrp"> 306 <div class="c-product-insight-wrp">
307 <div class="single-author-li-comments"> 307 <div class="single-author-li-comments">
308 <div class="a-intro-comments custom-selected-style"> 308 <div class="a-intro-comments custom-selected-style">
309 <img src="../assets/images/rect.svg" class="rect" /> 309 <img src="../assets/images/rect.svg" class="rect" />
310 <div class="top-wrp"> 310 <div class="top-wrp">
311 {{currentSlideData.payload.insight.tag}} Insight 311 {{currentSlideData.payload.insight.tag}} Insight
312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
313 </div> 313 </div>
314 <!-- <div class="top-head"> 314 <!-- <div class="top-head">
315 Decide on using multiple call to action vs single call to 315 Decide on using multiple call to action vs single call to
316 action depending on the stage of the user journey 316 action depending on the stage of the user journey
317 </div> 317 </div>
318 <p> 318 <p>
319 Marketing 101 teaches us to use one single, call to action 319 Marketing 101 teaches us to use one single, call to action
320 (CTA) at the top of the funnel before the uer has shown 320 (CTA) at the top of the funnel before the uer has shown
321 interest in the product. <br /><br /> 321 interest in the product. <br /><br />
322 When the user is already onboarded and is in the 322 When the user is already onboarded and is in the
323 <strong> engage stage </strong>, it may be better to use a 323 <strong> engage stage </strong>, it may be better to use a
324 single CTA for each use case in order to 324 single CTA for each use case in order to
325 <strong> avoid ambiguity.</strong> 325 <strong> avoid ambiguity.</strong>
326 </p> --> 326 </p> -->
327 <div class="top-head">{{currentSlideData.payload.insight.title}}</div> 327 <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
328 <p>{{currentSlideData.payload.insight.description}} 328 <p>{{currentSlideData.payload.insight.description}}
329 <div class="footer"> 329 <div class="footer">
330 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> 330 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
331 <!-- <a href="javascript:void(0);" class="ft-share" 331 <!-- <a href="javascript:void(0);" class="ft-share"
332 ><img src="../assets/images/reply-red.svg" /> Share from 332 ><img src="../assets/images/reply-red.svg" /> Share from
333 library</a 333 library</a
334 > --> 334 > -->
335 </div> 335 </div>
336 <!-- footer --> 336 <!-- footer -->
337 </div> 337 </div>
338 <!-- comments box --> 338 <!-- comments box -->
339 </div> 339 </div>
340 <!-- single author comments --> 340 <!-- single author comments -->
341 </div> 341 </div>
342 <!-- single mobile Right insight --> 342 <!-- single mobile Right insight -->
343 </div> 343 </div>
344 <!-- Single Mobile Insight --> 344 <!-- Single Mobile Insight -->
345 <!-- single author comments --> 345 <!-- single author comments -->
346 <div class="footer-nav"> 346 <div class="footer-nav">
347 <div class="footer-top white-bg"> 347 <div class="footer-top white-bg">
348 <div class="row"> 348 <div class="row">
349 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 349 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
350 <div class="row h-100p"> 350 <div class="row h-100p">
351 <div 351 <div
352 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 352 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
353 > 353 >
354 <div class="ft-comments-group testi-photos-ct"> 354 <div class="ft-comments-group testi-photos-ct">
355 <div class="c-with-photos"> 355 <div class="c-with-photos">
356 <span class="count-comments" 356 <span class="count-comments"
357 >{{ getLastcomment("count", commentList) }}+ 357 >{{ getLastcomment("count", commentList) }}+
358 Comments</span 358 Comments</span
359 ><!-- count commets --> 359 ><!-- count commets -->
360 <ul class="comments-photos"> 360 <ul class="comments-photos">
361 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 361 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
362 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 362 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
363 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 363 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
364 </ul> 364 </ul>
365 <!-- comment photos --> 365 <!-- comment photos -->
366 </div> 366 </div>
367 <div class="comments-detail all-c-space"> 367 <div class="comments-detail all-c-space">
368 <span 368 <span
369 >{{ getLastcomment("name", commentList) }} 369 >{{ getLastcomment("name", commentList) }}
370 <a href="javascript:void(0);" @click="open_ct_box" 370 <a href="javascript:void(0);" @click="open_ct_box"
371 >View All</a 371 >View All</a
372 ></span 372 ></span
373 > 373 >
374 <p> 374 <p>
375 <!-- I wonder what the difference between “Dunzo Assistant” 375 <!-- I wonder what the difference between “Dunzo Assistant”
376 and “Pickup and Drop... --> 376 and “Pickup and Drop... -->
377 {{ getLastcomment("msg", commentList) }} 377 {{ getLastcomment("msg", commentList) }}
378 </p> 378 </p>
379 </div> 379 </div>
380 <!-- comments detail --> 380 <!-- comments detail -->
381 </div> 381 </div>
382 <!-- comments Group --> 382 <!-- comments Group -->
383 </div> 383 </div>
384 </div> 384 </div>
385 </div> 385 </div>
386 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 386 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
387 <div class="comment-frm no-c-frm"> 387 <div class="comment-frm no-c-frm">
388 <div class="row"> 388 <div class="row">
389 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 389 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
390 <div class="form-group frm-wdth addfrm-spc"> 390 <div class="form-group frm-wdth addfrm-spc">
391 <input 391 <input
392 type="text" 392 type="text"
393 class="form-control" 393 class="form-control"
394 placeholder="Something on your mind?" 394 placeholder="Something on your mind?"
395 id="open_ct_box" 395 id="open_ct_box"
396 v-model="comment" 396 v-model="comment"
397 /> 397 />
398 </div> 398 </div>
399 </div> 399 </div>
400 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 400 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
401 <a 401 <a
402 href="javascript:void(0);" 402 href="javascript:void(0);"
403 @click="createComment" 403 @click="createComment"
404 class="add-comment" 404 class="add-comment"
405 ><img src="../assets/images/add-comment.svg" /> 405 ><img src="../assets/images/add-comment.svg" />
406 Comment</a 406 Comment</a
407 > 407 >
408 </div> 408 </div>
409 </div> 409 </div>
410 <!-- comment from --> 410 <!-- comment from -->
411 </div> 411 </div>
412 </div> 412 </div>
413 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 413 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
414 <ul class="top-intro-bt"> 414 <ul class="top-intro-bt">
415 <li> 415 <li>
416 <a href="javascript:void(0);" @click="goBack" 416 <a href="javascript:void(0);" @click="goBack"
417 ><img src="../assets/images/skip-prev.svg" /> Prev</a 417 ><img src="../assets/images/skip-prev.svg" /> Prev</a
418 > 418 >
419 </li> 419 </li>
420 <li> 420 <li>
421 <a href="javascript:void(0);" @click="goNext" 421 <a href="javascript:void(0);" @click="goNext"
422 ><img src="../assets/images/skip-next.svg" /> Skip to next 422 ><img src="../assets/images/skip-next.svg" /> Skip to next
423 slide</a 423 slide</a
424 > 424 >
425 </li> 425 </li>
426 </ul> 426 </ul>
427 </div> 427 </div>
428 <!-- buttons list --> 428 <!-- buttons list -->
429 </div> 429 </div>
430 </div> 430 </div>
431 <!-- footer top --> 431 <!-- footer top -->
432 <div class="footer-bottom"> 432 <div class="footer-bottom">
433 <ul> 433 <ul>
434 <li class="active"></li> 434 <li class="active"></li>
435 <li></li> 435 <li></li>
436 </ul> 436 </ul>
437 </div> 437 </div>
438 <!-- footer top --> 438 <!-- footer top -->
439 </div> 439 </div>
440 <!-- footer --> 440 <!-- footer -->
441 </div> 441 </div>
442 <!-- body wrapper --> 442 <!-- body wrapper -->
443 </div> 443 </div>
444 <!-- main wrapper --> 444 <!-- main wrapper -->
445 </main> 445 </main>
446 </template> 446 </template>
447 447
448 <script> 448 <script>
449 import Vue from "vue"; 449 import Vue from "vue";
450 import router from "../router"; 450 import router from "../router";
451 import axios from "axios"; 451 import axios from "axios";
452 import moment from 'moment'; 452 import moment from 'moment';
453 import Header from "./Header"; 453 import Header from "./Header";
454 454
455 export default { 455 export default {
456 components: { 456 components: {
457 Header: Header, 457 Header: Header,
458 }, 458 },
459 name: "SingleMobileScreenInsightOne", 459 name: "SingleMobileScreenInsightOne",
460 460
461 data() { 461 data() {
462 return { 462 return {
463 allSlide: [], 463 allSlide: [],
464 currentSlideIndex: null, 464 currentSlideIndex: null,
465 currentSlideData: null, 465 currentSlideData: null,
466 // 466 //
467 usertoken: null, 467 usertoken: null,
468 commentList: [], 468 commentList: [],
469 comment: null, 469 comment: null,
470 parentInput: true, 470 parentInput: true,
471 }; 471 };
472 }, 472 },
473 mounted() { 473 mounted() {
474 var allSlideData = localStorage.getItem( 474 var allSlideData = localStorage.getItem(
475 "spotlight_slide" + this.$route.params.caseStudyId 475 "spotlight_slide" + this.$route.params.caseStudyId
476 ); 476 );
477 if (allSlideData) { 477 if (allSlideData) {
478 this.allSlide = JSON.parse(allSlideData); 478 this.allSlide = JSON.parse(allSlideData);
479 this.getCurrentSlideData(); 479 this.getCurrentSlideData();
480 }else{ 480 }else{
481 this.getCurrentSlideData(); 481 this.getCurrentSlideData();
482 482
483 } 483 }
484 var userdata = localStorage.getItem("spotlight_usertoken"); 484 var userdata = localStorage.getItem("spotlight_usertoken");
485 if (userdata) { 485 if (userdata) {
486 userdata = JSON.parse(userdata); 486 userdata = JSON.parse(userdata);
487 this.usertoken = userdata.token; 487 this.usertoken = userdata.token;
488 this.getComment(); 488 this.getComment();
489 }else{ 489 }else{
490 this.getComment(); 490 this.getComment();
491 } 491 }
492 }, 492 },
493 methods: { 493 methods: {
494 494
495 generatecaseStudies(){ 495 generatecaseStudies(){
496 axios 496 axios
497 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { 497 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
498 headers: { 498 headers: {
499 Authorization: "Bearer " + this.usertoken, 499 Authorization: "Bearer " + this.usertoken,
500 }, 500 },
501 }) 501 })
502 .then((response) => { 502 .then((response) => {
503 503
504 console.log('response',response.data.data); 504 console.log('response',response.data.data);
505 this.openStudy(response.data.data); 505 this.openStudy(response.data.data);
506 }) 506 })
507 .catch((error) => console.log(error)); 507 .catch((error) => console.log(error));
508 }, 508 },
509 509
510 510
511 511
512 openStudy(payload) { 512 openStudy(payload) {
513 console.log("payload-", payload); 513 console.log("payload-", payload);
514 payload.intro.date = payload.createdAt; 514 payload.intro.date = payload.createdAt;
515 payload.intro.focusPoint = payload.focusAreas; 515 payload.intro.focusPoint = payload.focusAreas;
516 axios 516 axios
517 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 517 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
518 headers: { 518 headers: {
519 Authorization: "Bearer " + this.usertoken, 519 Authorization: "Bearer " + this.usertoken,
520 }, 520 },
521 }) 521 })
522 .then((response) => { 522 .then((response) => {
523 this.createSlide(payload, response.data.data); 523 this.createSlide(payload, response.data.data);
524 }) 524 })
525 .catch((error) => console.log(error)); 525 .catch((error) => console.log(error));
526 }, 526 },
527 527
528 createSlide(payload, slides) { 528 createSlide(payload, slides) {
529 var finalSlides = []; 529 var finalSlides = [];
530 slides.forEach((slides_) => { 530 slides.forEach((slides_) => {
531 var url = this.assignRoutes(slides_.templateId); 531 var url = this.assignRoutes(slides_.templateId);
532 var obj = { 532 var obj = {
533 forward: true, 533 forward: true,
534 backward: true, 534 backward: true,
535 ur: url, 535 ur: url,
536 slideId: slides_._id, 536 slideId: slides_._id,
537 caseStudyId: slides_.caseStudyId, 537 caseStudyId: slides_.caseStudyId,
538 payload: { 538 payload: {
539 metaData: slides_.metaData, 539 metaData: slides_.metaData,
540 comments: slides_.comments, 540 comments: slides_.comments,
541 insight: slides_.insight ? slides_.insight : null, 541 insight: slides_.insight ? slides_.insight : null,
542 }, 542 },
543 }; 543 };
544 // slides_ 544 // slides_
545 finalSlides.push(obj); 545 finalSlides.push(obj);
546 }); 546 });
547 console.log("payload", payload); 547 console.log("payload", payload);
548 // add first slide at begining 548 // add first slide at begining
549 finalSlides.unshift({ 549 finalSlides.unshift({
550 forward: true, 550 forward: true,
551 backward: false, 551 backward: false,
552 ur: "EpisodeIntro", 552 ur: "EpisodeIntro",
553 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 553 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
554 caseStudyId: payload._id, 554 caseStudyId: payload._id,
555 payload: { 555 payload: {
556 metaData: payload.intro, 556 metaData: payload.intro,
557 comments: [], 557 comments: [],
558 }, 558 },
559 }); 559 });
560 finalSlides.push({ 560 finalSlides.push({
561 forward: true, 561 forward: true,
562 backward: false, 562 backward: false,
563 ur: "Outro", 563 ur: "Outro",
564 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 564 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
565 caseStudyId: payload._id, 565 caseStudyId: payload._id,
566 payload: { 566 payload: {
567 metaData: payload.outro, 567 metaData: payload.outro,
568 comments: [], 568 comments: [],
569 }, 569 },
570 }); 570 });
571 571
572 console.log(finalSlides); 572 console.log(finalSlides);
573 console.log("payload", payload); 573 console.log("payload", payload);
574 localStorage.setItem( 574 localStorage.setItem(
575 "spotlight_slide" + payload._id, 575 "spotlight_slide" + payload._id,
576 JSON.stringify(finalSlides) 576 JSON.stringify(finalSlides)
577 ); 577 );
578 this.allSlide = finalSlides; 578 this.allSlide = finalSlides;
579 this.getCurrentSlideData(); 579 this.getCurrentSlideData();
580 }, 580 },
581 assignRoutes(tempId) { 581 assignRoutes(tempId) {
582 // /episode-intro 582 // /episode-intro
583 // /outro 583 // /outro
584 var routes = [ 584 var routes = [
585 { 585 {
586 url: "AuthorIntro", 586 url: "AuthorIntro",
587 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 587 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
588 }, 588 },
589 { 589 {
590 url: "NoScreenshotSingleAuthor", 590 url: "NoScreenshotSingleAuthor",
591 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 591 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
592 }, 592 },
593 { 593 {
594 url: "SingleMobileScreenInsightTwo", 594 url: "SingleMobileScreenInsightTwo",
595 tempId: "T3_cqNIf7tuqL4jyON63dA7", 595 tempId: "T3_cqNIf7tuqL4jyON63dA7",
596 }, 596 },
597 { 597 {
598 url: "TwoScreenWithoutInsight", 598 url: "TwoScreenWithoutInsight",
599 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 599 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
600 }, 600 },
601 { 601 {
602 url: "noscreenshotSingleautho", 602 url: "noscreenshotSingleautho",
603 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 603 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
604 }, 604 },
605 { 605 {
606 url: "SingleMobileScreenInsightOne", 606 url: "SingleMobileScreenInsightOne",
607 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 607 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
608 }, 608 },
609 { 609 {
610 url: "TwoScreenWithInsight", 610 url: "TwoScreenWithInsight",
611 tempId: "T7_za3c3sYgx7bVvtKzasdf", 611 tempId: "T7_za3c3sYgx7bVvtKzasdf",
612 }, 612 },
613 { 613 {
614 url: "AuthorReadingNow", 614 url: "AuthorReadingNow",
615 tempId: "T8_zb4d4fYgx7bVvtKzasdf", 615 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
616 }, 616 },
617 { 617 {
618 url: "AuthorReadingBreak", 618 url: "AuthorReadingBreak",
619 tempId: "T9_zb3e4fYgy7dVvfKdasdf", 619 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
620 }, 620 },
621 ]; 621 ];
622 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 622 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
623 return routes[i].url; 623 return routes[i].url;
624 }, 624 },
625 625
626 getCurrentSlideData() { 626 getCurrentSlideData() {
627 var i = this.allSlide.findIndex( 627 var i = this.allSlide.findIndex(
628 (slide_) => slide_.slideId == this.$route.params.slideId 628 (slide_) => slide_.slideId == this.$route.params.slideId
629 ); 629 );
630 this.currentSlideIndex = i; 630 this.currentSlideIndex = i;
631 this.currentSlideData = this.allSlide[i]; 631 this.currentSlideData = this.allSlide[i];
632 console.log("currentSlideData", this.currentSlideData); 632 console.log("currentSlideData", this.currentSlideData);
633 }, 633 },
634 goNext() { 634 goNext() {
635 this.currentSlideIndex++; 635 this.currentSlideIndex++;
636 this.$router.push({ 636 this.$router.push({
637 name: this.allSlide[this.currentSlideIndex].ur, 637 name: this.allSlide[this.currentSlideIndex].ur,
638 params: { 638 params: {
639 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 639 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
640 slideId: this.allSlide[this.currentSlideIndex].slideId, 640 slideId: this.allSlide[this.currentSlideIndex].slideId,
641 }, 641 },
642 }); 642 });
643 }, 643 },
644 goBack() { 644 goBack() {
645 this.currentSlideIndex--; 645 this.currentSlideIndex--;
646 this.$router.push({ 646 this.$router.push({
647 name: this.allSlide[this.currentSlideIndex].ur, 647 name: this.allSlide[this.currentSlideIndex].ur,
648 params: { 648 params: {
649 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 649 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
650 slideId: this.allSlide[this.currentSlideIndex].slideId, 650 slideId: this.allSlide[this.currentSlideIndex].slideId,
651 }, 651 },
652 }); 652 });
653 }, 653 },
654 createComment() { 654 createComment() {
655 console.log("===", this.comment); 655 console.log("===", this.comment);
656 if(!this.usertoken){ 656 if(!this.usertoken){
657 this.goToLogin(); 657 this.goToLogin();
658 } 658 }
659 var obj = { 659 var obj = {
660 caseStudyId: this.currentSlideData.caseStudyId, 660 caseStudyId: this.currentSlideData.caseStudyId,
661 slideId: this.currentSlideData.slideId, 661 slideId: this.currentSlideData.slideId,
662 comment: this.comment, 662 comment: this.comment,
663 663
664 }; 664 };
665 axios 665 axios
666 .post("/bounceBoard/comment", obj, { 666 .post("/bounceBoard/comment", obj, {
667 headers: { 667 headers: {
668 Authorization: "Bearer " + this.usertoken, 668 Authorization: "Bearer " + this.usertoken,
669 }, 669 },
670 }) 670 })
671 .then((response) => { 671 .then((response) => {
672 this.comment = null; 672 this.comment = null;
673 this.getComment(); 673 this.getComment();
674 console.log(response); 674 console.log(response);
675 }) 675 })
676 .catch((error) => { 676 .catch((error) => {
677 if (error.response) { 677 if (error.response) {
678 this.$toaster.error(error.response.data.message); 678 this.$toaster.error(error.response.data.message);
679 } 679 }
680 }); 680 });
681 }, 681 },
682 createChildComment(cmnt) { 682 createChildComment(cmnt) {
683 if(!this.usertoken){ 683 if(!this.usertoken){
684 this.goToLogin(); 684 this.goToLogin();
685 } console.log(cmnt,"===", this.comment); 685 } console.log(cmnt,"===", this.comment);
686 var obj = { 686 var obj = {
687 caseStudyId: this.currentSlideData.caseStudyId, 687 caseStudyId: this.currentSlideData.caseStudyId,
688 slideId: this.currentSlideData.slideId, 688 slideId: this.currentSlideData.slideId,
689 comment: this.comment, 689 comment: this.comment,
690 parentId: cmnt._id, 690 parentId: cmnt._id,
691 691
692 }; 692 };
693 axios 693 axios
694 .post("/bounceBoard/comment", obj, { 694 .post("/bounceBoard/comment", obj, {
695 headers: { 695 headers: {
696 Authorization: "Bearer " + this.usertoken, 696 Authorization: "Bearer " + this.usertoken,
697 }, 697 },
698 }) 698 })
699 .then((response) => { 699 .then((response) => {
700 this.comment = null; 700 this.comment = null;
701 this.discardRply(cmnt); 701 this.discardRply(cmnt);
702 this.getComment(); 702 this.getComment();
703 console.log(response); 703 console.log(response);
704 }) 704 })
705 .catch((error) => { 705 .catch((error) => {
706 if (error.response) { 706 if (error.response) {
707 this.$toaster.error(error.response.data.message); 707 this.$toaster.error(error.response.data.message);
708 } 708 }
709 }); 709 });
710 }, 710 },
711 getComment() { 711 getComment() {
712 axios 712 axios
713 .get( 713 .get(
714 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 714 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
715 { 715 {
716 headers: { 716 headers: {
717 Authorization: "Bearer " + this.usertoken, 717 Authorization: "Bearer " + this.usertoken,
718 }, 718 },
719 } 719 }
720 ) 720 )
721 .then((response) => { 721 .then((response) => {
722 console.log(response.data); 722 console.log(response.data);
723 var comments = []; 723 var comments = [];
724 var keys = Object.keys(response.data.data) 724 var keys = Object.keys(response.data.data)
725 response.data.data 725 response.data.data
726 keys.forEach((key_) => { 726 keys.forEach((key_) => {
727 comments.push(response.data.data[key_]) 727 comments.push(response.data.data[key_])
728 }); 728 });
729 comments.forEach((coment_)=>{ 729 comments.forEach((coment_)=>{
730 coment_.childInput = false; 730 coment_.childInput = false;
731 }); 731 });
732 console.log("comments",comments) 732 console.log("comments",comments)
733 this.commentList = comments; 733 this.commentList = comments;
734 }) 734 })
735 .catch((error) => console.log(error)); 735 .catch((error) => console.log(error));
736 }, 736 },
737 dateGenerator(curreDate){ 737 dateGenerator(curreDate){
738 var todayDate = moment(new Date(), "DD.MM.YYYY"); 738 var todayDate = moment(new Date(), "DD.MM.YYYY");
739 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 739 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
740 var result = todayDate.diff(endDate, 'days'); 740 var result = todayDate.diff(endDate, 'days');
741 return result; 741 return result;
742 }, 742 },
743 goToLogin() { 743 goToLogin() {
744 this.$router.push("/login"); 744 this.$router.push("/login");
745 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); 745 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
746 746
747 }, 747 },
748 goToSignUp() { 748 goToSignUp() {
749 this.$router.push("/"); 749 this.$router.push("/");
750 }, 750 },
751 open(url){ 751 open(url){
752 window.open(url); 752 window.open(url);
753 }, 753 },
754 chtbox_close() { 754 chtbox_close() {
755 $("#cht_box_close").removeClass("cht_close"); 755 $("#cht_box_close").removeClass("cht_close");
756 $("#open_ct_box, .c_hide").show(); 756 $("#open_ct_box, .c_hide").show();
757 $(".footer-top").addClass("white-bg"); 757 $(".footer-top").addClass("white-bg");
758 }, 758 },
759 open_ct_box() { 759 open_ct_box() {
760 760
761 $("#cht_box_close").addClass("cht_close"); 761 $("#cht_box_close").addClass("cht_close");
762 $("#open_ct_box, .c_hide").hide(); 762 $("#open_ct_box, .c_hide").hide();
763 $(".footer-top").removeClass("white-bg"); 763 $(".footer-top").removeClass("white-bg");
764 }, 764 },
765 eachRply(cmnt) { 765 eachRply(cmnt) {
766 cmnt.childInput = true; 766 cmnt.childInput = true;
767 this.parentInput = false; 767 this.parentInput = false;
768 this.comment = null; 768 this.comment = null;
769 setTimeout(() => { 769 setTimeout(() => {
770 document.getElementById("childInput").focus(); 770 document.getElementById("childInput").focus();
771 }, 100); 771 }, 100);
772 }, 772 },
773 discardRply(cmnt) { 773 discardRply(cmnt) {
774 cmnt.childInput = false; 774 cmnt.childInput = false;
775 this.parentInput = true; 775 this.parentInput = true;
776 this.comment = null; 776 this.comment = null;
777 }, 777 },
778 reply_cht_box(i) { 778 reply_cht_box(i) {
779 if(!this.usertoken){ 779 if(!this.usertoken){
780 this.goToLogin(); 780 this.goToLogin();
781 } 781 }
782 console.log(this.commentList, "cmnt"); 782 console.log(this.commentList, "cmnt");
783 $("#cht_box_close").addClass("cht_close"); 783 $("#cht_box_close").addClass("cht_close");
784 $("#open_ct_box, .c_hide").hide(); 784 $("#open_ct_box, .c_hide").hide();
785 $(".footer-top").removeClass("white-bg"); 785 $(".footer-top").removeClass("white-bg");
786 this.commentList[i].childInput = true; 786 this.commentList[i].childInput = true;
787 this.parentInput = false; 787 this.parentInput = false;
788 this.comment = null; 788 this.comment = null;
789 setTimeout(() => { 789 setTimeout(() => {
790 document.getElementById("childInput").focus(); 790 document.getElementById("childInput").focus();
791 }, 100); 791 }, 100);
792 }, 792 },
793 likeComment(status, id) { 793 likeComment(status, id) {
794 if(!this.usertoken){ 794 if(!this.usertoken){
795 this.goToLogin(); 795 this.goToLogin();
796 } 796 }
797 console.log("===", this.comment); 797 console.log("===", this.comment);
798 var obj = { 798 var obj = {
799 commentId: id, 799 commentId: id,
800 like: status, 800 like: status,
801 }; 801 };
802 axios 802 axios
803 .post("/bounceBoard/like", obj, { 803 .post("/bounceBoard/like", obj, {
804 headers: { 804 headers: {
805 Authorization: "Bearer " + this.usertoken, 805 Authorization: "Bearer " + this.usertoken,
806 }, 806 },
807 }) 807 })
808 .then((response) => { 808 .then((response) => {
809 this.getComment(); 809 this.getComment();
810 console.log(response); 810 console.log(response);
811 }) 811 })
812 .catch((error) => { 812 .catch((error) => {
813 if (error.response) { 813 if (error.response) {
814 this.$toaster.error(error.response.data.message); 814 this.$toaster.error(error.response.data.message);
815 } 815 }
816 }); 816 });
817 }, 817 },
818 getLastcomment(flag, commentArray) { 818 getLastcomment(flag, commentArray) {
819 var finalComment = null; 819 var finalComment = null;
820 var totalMessage = 0; 820 var totalMessage = 0;
821 var name = null; 821 var name = null;
822 commentArray.forEach((comment_) => { 822 commentArray.forEach((comment_) => {
823 if (comment_.comment != null) { 823 if (comment_.comment != null) {
824 name = comment_.user.name; 824 name = comment_.user.name;
825 finalComment = comment_.comment; 825 finalComment = comment_.comment;
826 totalMessage++; 826 totalMessage++;
827 } 827 }
828 }); 828 });
829 if (flag == "count") { 829 if (flag == "count") {
830 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 830 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
831 } else if (flag =="name") { 831 } else if (flag =="name") {
832 return (name = name); 832 return (name = name);
833 } else { 833 } else {
834 return finalComment; 834 return finalComment;
835 } 835 }
836 }, 836 },
837 commentExistCheck(i) { 837 commentExistCheck(i) {
838 console.log(this.commentList[i].comment); 838 console.log(this.commentList[i].comment);
839 var returnValue = false; 839 var returnValue = false;
840 if (this.commentList[i].comment) { 840 if (this.commentList[i].comment) {
841 returnValue = true; 841 returnValue = true;
842 } 842 }
843 return returnValue; 843 return returnValue;
844 }, 844 },
845 }, 845 },
846 }; 846 };
847 // 847 //
848 </script> 848 </script>
849 849
src/components/SingleMobileScreenInsightTwo.vue
Diff comments   View file @d06044c
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> --> 4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> -->
5 <!-- <a class="navbar-brand" href="javascript:void(0);" 5 <!-- <a class="navbar-brand" href="javascript:void(0);"
6 ><img src="../assets/images/logo.png" 6 ><img src="../assets/images/logo.png"
7 /></a> 7 /></a>
8 <button 8 <button
9 class="navbar-toggler" 9 class="navbar-toggler"
10 type="button" 10 type="button"
11 data-toggle="collapse" 11 data-toggle="collapse"
12 data-target="#navbarsExample03" 12 data-target="#navbarsExample03"
13 aria-controls="navbarsExample03" 13 aria-controls="navbarsExample03"
14 aria-expanded="false" 14 aria-expanded="false"
15 aria-label="Toggle navigation" 15 aria-label="Toggle navigation"
16 > 16 >
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 </button> 20 </button>
21 <div class="user-profile-photo insights-profile"> 21 <div class="user-profile-photo insights-profile">
22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> 22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23 </div> --> 23 </div> -->
24 <Header></Header> 24 <Header></Header>
25 25
26 <!-- </nav> --> 26 <!-- </nav> -->
27 <!-- menu wrapper --> 27 <!-- menu wrapper -->
28 <div class="intro-startup"> 28 <div class="intro-startup">
29 <!-- chat box --> 29 <!-- chat box -->
30 <div class="bounce-board-wrp" id="cht_box_close"> 30 <div class="bounce-board-wrp" id="cht_box_close">
31 <div class="inner-wrp-bc"> 31 <div class="inner-wrp-bc">
32 <div class="bc-top-head"> 32 <div class="bc-top-head">
33 <span class="bc-head"> 33 <span class="bc-head">
34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
35 </span> 35 </span>
36 <div class="action-sort"> 36 <div class="action-sort">
37 <!-- <span class="sort-by">SORT BY</span> 37 <!-- <span class="sort-by">SORT BY</span>
38 <div class="btn-group"> 38 <div class="btn-group">
39 <button 39 <button
40 type="button" 40 type="button"
41 class="bc-sort-list dropdown-toggle" 41 class="bc-sort-list dropdown-toggle"
42 data-toggle="dropdown" 42 data-toggle="dropdown"
43 aria-haspopup="true" 43 aria-haspopup="true"
44 aria-expanded="false" 44 aria-expanded="false"
45 > 45 >
46 BEST 46 BEST
47 </button> 47 </button>
48 <div class="dropdown-menu short_by"> 48 <div class="dropdown-menu short_by">
49 <a class="dropdown-item" href="javasript:void(0);" 49 <a class="dropdown-item" href="javasript:void(0);"
50 >BEST 1</a 50 >BEST 1</a
51 > 51 >
52 <a class="dropdown-item" href="javasript:void(0);" 52 <a class="dropdown-item" href="javasript:void(0);"
53 >BEST 2</a 53 >BEST 2</a
54 > 54 >
55 <a class="dropdown-item" href="javasript:void(0);" 55 <a class="dropdown-item" href="javasript:void(0);"
56 >BEST 3</a 56 >BEST 3</a
57 > 57 >
58 </div> 58 </div>
59 </div> --> 59 </div> -->
60 <a 60 <a
61 href="javasript:void(0);" 61 href="javasript:void(0);"
62 @click="chtbox_close" 62 @click="chtbox_close"
63 class="close_chat_bx" 63 class="close_chat_bx"
64 ><img src="../assets/images/close.png" alt="close" /></a 64 ><img src="../assets/images/close.png" alt="close" /></a
65 ><!-- close --> 65 ><!-- close -->
66 </div> 66 </div>
67 <!-- action sort --> 67 <!-- action sort -->
68 </div> 68 </div>
69 <!-- top head --> 69 <!-- top head -->
70 <div class="bounce-board-body"> 70 <div class="bounce-board-body">
71 <!-- all user comments --> 71 <!-- all user comments -->
72 <ul class="bounced-user-comments"> 72 <ul class="bounced-user-comments">
73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
74 <div class="bc_brd_l"></div> 74 <div class="bc_brd_l"></div>
75 <!-- border --> 75 <!-- border -->
76 <div class="parent-full-width" v-if="cmnt.comment"> 76 <div class="parent-full-width" v-if="cmnt.comment">
77 <div class="full-width"> 77 <div class="full-width">
78 <div class="b-user-head"> 78 <div class="b-user-head">
79 <img :src="cmnt.user.profilePic" /> 79 <img :src="cmnt.user.profilePic" />
80 <span class="head-content">{{ cmnt.user.name }} </span> 80 <span class="head-content">{{ cmnt.user.name }} </span>
81 <ul> 81 <ul>
82 <li> 82 <li>
83 <span></span 83 <span></span
84 ><img src="../assets/images/u-info-icon.png" />{{ 84 ><img src="../assets/images/u-info-icon.png" />{{
85 cmnt.user.karmaPoints 85 cmnt.user.karmaPoints
86 }}pts 86 }}pts
87 </li> 87 </li>
88 <li> 88 <li>
89 <span></span>{{ dateGenerator(cmnt.createdAt) }} 89 <span></span>{{ dateGenerator(cmnt.createdAt) }}
90 </li> 90 </li>
91 </ul> 91 </ul>
92 </div> 92 </div>
93 <!-- header --> 93 <!-- header -->
94 <p> 94 <p>
95 {{ cmnt.comment }} 95 {{ cmnt.comment }}
96 </p> 96 </p>
97 <div class="joined_wrapper"> 97 <div class="joined_wrapper">
98 <ul class="joined-info info_bc_spc"> 98 <ul class="joined-info info_bc_spc">
99 <li> 99 <li>
100 <img 100 <img
101 src="../assets/images/heart.svg" 101 src="../assets/images/heart.svg"
102 v-if="cmnt.like == false" 102 v-if="cmnt.like == false"
103 @click="likeComment(true, cmnt._id)" 103 @click="likeComment(true, cmnt._id)"
104 class="cursor-pointer" 104 class="cursor-pointer"
105 /> 105 />
106 <img 106 <img
107 src="../assets/images/purple-heart.png" 107 src="../assets/images/purple-heart.png"
108 v-if="cmnt.like == true" 108 v-if="cmnt.like == true"
109 @click="likeComment(false, cmnt._id)" 109 @click="likeComment(false, cmnt._id)"
110 class="cursor-pointer" 110 class="cursor-pointer"
111 /> 111 />
112 </li> 112 </li>
113 <li> 113 <li>
114 <a href="javasript:void(0);"> 114 <a href="javasript:void(0);">
115 {{ cmnt.likes.length }}</a 115 {{ cmnt.likes.length }}</a
116 > 116 >
117 </li> 117 </li>
118 <li class="comment-spc"> 118 <li class="comment-spc">
119 <img src="../assets/images/purple-comment.png" /> 119 <img src="../assets/images/purple-comment.png" />
120 </li> 120 </li>
121 <li> 121 <li>
122 <a href="javasript:void(0);"> 122 <a href="javasript:void(0);">
123 {{ cmnt.children.length }}</a 123 {{ cmnt.children.length }}</a
124 > 124 >
125 </li> 125 </li>
126 </ul> 126 </ul>
127 <div class="add_rply" v-if="!cmnt.childInput"> 127 <div class="add_rply" v-if="!cmnt.childInput">
128 <input 128 <input
129 type="text" 129 type="text"
130 @click="eachRply(cmnt)" 130 @click="eachRply(cmnt)"
131 class="add_Rply_C" 131 class="add_Rply_C"
132 placeholder="Add your reply" 132 placeholder="Add your reply"
133 /> 133 />
134 </div> 134 </div>
135 <!-- rly form --> 135 <!-- rly form -->
136 </div> 136 </div>
137 <!-- joined wrapper --> 137 <!-- joined wrapper -->
138 </div> 138 </div>
139 <!-- full width --> 139 <!-- full width -->
140 </div> 140 </div>
141 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 141 <div class="comments-footer each-ft" v-if="cmnt.childInput">
142 <textarea v-model="comment" id="childInput"></textarea> 142 <textarea v-model="comment" id="childInput"></textarea>
143 <div class="comments-footer-wrp"> 143 <div class="comments-footer-wrp">
144 <a 144 <a
145 @click="createChildComment(cmnt)" 145 @click="createChildComment(cmnt)"
146 href="javasript:void(0);" 146 href="javasript:void(0);"
147 class="add_comments_chat reply-Wdth" 147 class="add_comments_chat reply-Wdth"
148 >Reply</a 148 >Reply</a
149 > 149 >
150 <a 150 <a
151 href="javasript:void(0);" 151 href="javasript:void(0);"
152 class="discard_bt" 152 class="discard_bt"
153 @click="discardRply(cmnt)" 153 @click="discardRply(cmnt)"
154 ><img src="../assets/images/discard.svg" 154 ><img src="../assets/images/discard.svg"
155 /></a> 155 /></a>
156 </div> 156 </div>
157 </div> 157 </div>
158 <!-- parent --> 158 <!-- parent -->
159 <div 159 <div
160 class="child-full-width" 160 class="child-full-width"
161 v-for="(childCmnt, i) in cmnt.children" 161 v-for="(childCmnt, i) in cmnt.children"
162 :key="i" 162 :key="i"
163 > 163 >
164 <div class="full-width"> 164 <div class="full-width">
165 <div class="b-user-head"> 165 <div class="b-user-head">
166 <img :src="childCmnt.user.profilePic" /> 166 <img :src="childCmnt.user.profilePic" />
167 <span class="head-content" 167 <span class="head-content"
168 >{{ childCmnt.user.name }} 168 >{{ childCmnt.user.name }}
169 </span> 169 </span>
170 <ul> 170 <ul>
171 <li> 171 <li>
172 <span></span 172 <span></span
173 ><img src="../assets/images/u-info-icon.png" />{{ 173 ><img src="../assets/images/u-info-icon.png" />{{
174 childCmnt.user.karmaPoints 174 childCmnt.user.karmaPoints
175 }}pts 175 }}pts
176 </li> 176 </li>
177 <li> 177 <li>
178 <span></span 178 <span></span
179 >{{ dateGenerator(childCmnt.createdAt) }} 179 >{{ dateGenerator(childCmnt.createdAt) }}
180 </li> 180 </li>
181 </ul> 181 </ul>
182 </div> 182 </div>
183 <p> 183 <p>
184 {{ childCmnt.comment }} 184 {{ childCmnt.comment }}
185 </p> 185 </p>
186 <div class="joined_wrapper"> 186 <div class="joined_wrapper">
187 <ul class="joined-info info_bc_spc"> 187 <ul class="joined-info info_bc_spc">
188 <li> 188 <li>
189 <img 189 <img
190 src="../assets/images/heart.svg" 190 src="../assets/images/heart.svg"
191 v-if="childCmnt.like == false" 191 v-if="childCmnt.like == false"
192 @click="likeComment(true, childCmnt._id)" 192 @click="likeComment(true, childCmnt._id)"
193 class="cursor-pointer" 193 class="cursor-pointer"
194 /> 194 />
195 <img 195 <img
196 src="../assets/images/purple-heart.png" 196 src="../assets/images/purple-heart.png"
197 v-if="childCmnt.like == true" 197 v-if="childCmnt.like == true"
198 @click="likeComment(false, childCmnt._id)" 198 @click="likeComment(false, childCmnt._id)"
199 class="cursor-pointer" 199 class="cursor-pointer"
200 /> 200 />
201 </li> 201 </li>
202 <li> 202 <li>
203 <a href="javasript:void(0);"> 203 <a href="javasript:void(0);">
204 {{ childCmnt.likes.length }}</a 204 {{ childCmnt.likes.length }}</a
205 > 205 >
206 </li> 206 </li>
207 </ul> 207 </ul>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- eree --> 211 <!-- eree -->
212 212
213 <!-- comments footer --> 213 <!-- comments footer -->
214 </li> 214 </li>
215 </ul> 215 </ul>
216 </div> 216 </div>
217 <!-- bounce board body --> 217 <!-- bounce board body -->
218 <div class="comments-footer" v-if="parentInput"> 218 <div class="comments-footer" v-if="parentInput">
219 <textarea v-model="comment"></textarea> 219 <textarea v-model="comment"></textarea>
220 <div class="comments-footer-wrp"> 220 <div class="comments-footer-wrp">
221 <a 221 <a
222 href="javasript:void(0);" 222 href="javasript:void(0);"
223 class="add_comments_chat" 223 class="add_comments_chat"
224 @click="createComment" 224 @click="createComment"
225 ><img src="../assets/images/add-comment.svg" /> Comment</a 225 ><img src="../assets/images/add-comment.svg" /> Comment</a
226 > 226 >
227 </div> 227 </div>
228 </div> 228 </div>
229 <!-- comments footer --> 229 <!-- comments footer -->
230 </div> 230 </div>
231 </div> 231 </div>
232 <!-- bounceboard wrp --> 232 <!-- bounceboard wrp -->
233 <!-- chat box --> 233 <!-- chat box -->
234 234
235 <div class="single-mobileInsight"> 235 <div class="single-mobileInsight">
236 <div class="m-screen-hidden"> 236 <div class="m-screen-hidden">
237 <div class="top-area-blank"></div> 237 <div class="top-area-blank"></div>
238 <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> 238 <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
239 <img 239 <img
240 :src="currentSlideData.payload.metaData.mobileImage" 240 :src="currentSlideData.payload.metaData.mobileImage"
241 class="m-screen insight-two-img" 241 class="m-screen insight-two-img"
242 /> 242 />
243 </div> 243 </div>
244 <div class="single-left-Insight-comments"> 244 <div class="single-left-Insight-comments">
245 <div class="author-thoughts"> 245 <div class="author-thoughts">
246 <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> 246 <!-- <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> -->
247 <img 247 <img
248 :src="currentSlideData.payload.metaData.authorImage" 248 :src="currentSlideData.payload.metaData.authorImage"
249 class="dynamic-thoughts" 249 class="dynamic-thoughts"
250 /> 250 />
251 </div> 251 </div>
252 <!-- user thoughts --> 252 <!-- user thoughts -->
253 253
254 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 254 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
255 <div class="a-intro-comments custom-c-style"> 255 <div class="a-intro-comments custom-c-style">
256 <!-- <p> 256 <!-- <p>
257 I wonder what the difference between “ 257 I wonder what the difference between “
258 <strong>Dunzo Assistant </strong>” and “<strong 258 <strong>Dunzo Assistant </strong>” and “<strong
259 >Pickup and Drop </strong 259 >Pickup and Drop </strong
260 >” are. If they are the same, there are two “call to actions” 260 >” are. If they are the same, there are two “call to actions”
261 for the same workflow 261 for the same workflow
262 </p> --> 262 </p> -->
263 <p>{{ commentList[0].comment }}</p> 263 <p>{{ commentList[0].comment }}</p>
264 <ul class="rly-comment-set"> 264 <ul class="rly-comment-set">
265 <!-- like/dislike --> 265 <!-- like/dislike -->
266 <li> 266 <li>
267 <img 267 <img
268 src="../assets/images/heart.svg" 268 src="../assets/images/heart.svg"
269 v-if="commentList[0].like == false" 269 v-if="commentList[0].like == false"
270 @click="likeComment(true, commentList[0]._id)" 270 @click="likeComment(true, commentList[0]._id)"
271 class="cursor-pointer" 271 class="cursor-pointer"
272 /> 272 />
273 <img 273 <img
274 src="../assets/images/purple-heart.png" 274 src="../assets/images/purple-heart.png"
275 v-if="commentList[0].like == true" 275 v-if="commentList[0].like == true"
276 @click="likeComment(false, commentList[0]._id)" 276 @click="likeComment(false, commentList[0]._id)"
277 class="cursor-pointer" 277 class="cursor-pointer"
278 /> 278 />
279 <a href="javascript:void(0);">{{ 279 <a href="javascript:void(0);">{{
280 commentList[0].likes.length 280 commentList[0].likes.length
281 }}</a> 281 }}</a>
282 </li> 282 </li>
283 <!-- like/dislike ends --> 283 <!-- like/dislike ends -->
284 <li> 284 <li>
285 <img src="../assets/images/rply.svg" /> 285 <img src="../assets/images/rply.svg" />
286 <a href="javascript:void(0);" @click="reply_cht_box(0)" 286 <a href="javascript:void(0);" @click="reply_cht_box(0)"
287 >Reply</a 287 >Reply</a
288 > 288 >
289 </li> 289 </li>
290 </ul> 290 </ul>
291 </div> 291 </div>
292 <!-- comments box --> 292 <!-- comments box -->
293 </div> 293 </div>
294 <!-- single author comments --> 294 <!-- single author comments -->
295 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 295 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
296 <div class="a-intro-comments custom-c-style"> 296 <div class="a-intro-comments custom-c-style">
297 <p> 297 <p>
298 {{ commentList[1].comment }} 298 {{ commentList[1].comment }}
299 </p> 299 </p>
300 <ul class="rly-comment-set"> 300 <ul class="rly-comment-set">
301 <!-- like/dislike --> 301 <!-- like/dislike -->
302 <li> 302 <li>
303 <img 303 <img
304 src="../assets/images/heart.svg" 304 src="../assets/images/heart.svg"
305 v-if="commentList[1].like == false" 305 v-if="commentList[1].like == false"
306 @click="likeComment(true, commentList[1]._id)" 306 @click="likeComment(true, commentList[1]._id)"
307 class="cursor-pointer" 307 class="cursor-pointer"
308 /> 308 />
309 <img 309 <img
310 src="../assets/images/purple-heart.png" 310 src="../assets/images/purple-heart.png"
311 v-if="commentList[1].like == true" 311 v-if="commentList[1].like == true"
312 @click="likeComment(false, commentList[1]._id)" 312 @click="likeComment(false, commentList[1]._id)"
313 class="cursor-pointer" 313 class="cursor-pointer"
314 /> 314 />
315 <a href="javascript:void(0);">{{ 315 <a href="javascript:void(0);">{{
316 commentList[1].likes.length 316 commentList[1].likes.length
317 }}</a> 317 }}</a>
318 </li> 318 </li>
319 <!-- like/dislike ends --> 319 <!-- like/dislike ends -->
320 <li> 320 <li>
321 <img src="../assets/images/rply.svg" /> 321 <img src="../assets/images/rply.svg" />
322 <a href="javascript:void(0);" @click="reply_cht_box(1)" 322 <a href="javascript:void(0);" @click="reply_cht_box(1)"
323 >Reply</a 323 >Reply</a
324 > 324 >
325 </li> 325 </li>
326 </ul> 326 </ul>
327 </div> 327 </div>
328 <!-- comments box --> 328 <!-- comments box -->
329 </div> 329 </div>
330 <!-- single author comments --> 330 <!-- single author comments -->
331 </div> 331 </div>
332 <!-- single mobile Left insight --> 332 <!-- single mobile Left insight -->
333 <div 333 <div
334 class="c-product-insight-wrp two-screen-spc-top" 334 class="c-product-insight-wrp two-screen-spc-top"
335 v-if="commentExistCheck(2)" 335 v-if="commentExistCheck(2)"
336 > 336 >
337 <div class="single-author-li-comments"> 337 <div class="single-author-li-comments">
338 <div class="a-intro-comments"> 338 <div class="a-intro-comments">
339 <p> 339 <p>
340 {{ commentList[2].comment }} 340 {{ commentList[2].comment }}
341 </p> 341 </p>
342 <ul class="rly-comment-set"> 342 <ul class="rly-comment-set">
343 <!-- like/dislike --> 343 <!-- like/dislike -->
344 <li> 344 <li>
345 <img 345 <img
346 src="../assets/images/heart.svg" 346 src="../assets/images/heart.svg"
347 v-if="commentList[2].like == false" 347 v-if="commentList[2].like == false"
348 @click="likeComment(true, commentList[2]._id)" 348 @click="likeComment(true, commentList[2]._id)"
349 class="cursor-pointer" 349 class="cursor-pointer"
350 /> 350 />
351 <img 351 <img
352 src="../assets/images/purple-heart.png" 352 src="../assets/images/purple-heart.png"
353 v-if="commentList[2].like == true" 353 v-if="commentList[2].like == true"
354 @click="likeComment(false, commentList[2]._id)" 354 @click="likeComment(false, commentList[2]._id)"
355 class="cursor-pointer" 355 class="cursor-pointer"
356 /> 356 />
357 <a href="javascript:void(0);">{{ 357 <a href="javascript:void(0);">{{
358 commentList[2].likes.length 358 commentList[2].likes.length
359 }}</a> 359 }}</a>
360 </li> 360 </li>
361 <!-- like/dislike ends --> 361 <!-- like/dislike ends -->
362 <li> 362 <li>
363 <img src="../assets/images/rply.svg" /> 363 <img src="../assets/images/rply.svg" />
364 <a href="javascript:void(0);" @click="reply_cht_box(2)" 364 <a href="javascript:void(0);" @click="reply_cht_box(2)"
365 >Reply</a 365 >Reply</a
366 > 366 >
367 </li> 367 </li>
368 </ul> 368 </ul>
369 </div> 369 </div>
370 <!-- comments box --> 370 <!-- comments box -->
371 </div> 371 </div>
372 <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 372 <div class="single-author-li-comments" v-if="commentExistCheck(3)">
373 <div class="a-intro-comments"> 373 <div class="a-intro-comments">
374 <p> 374 <p>
375 {{ commentList[3].comment }} 375 {{ commentList[3].comment }}
376 </p> 376 </p>
377 <ul class="rly-comment-set"> 377 <ul class="rly-comment-set">
378 <!-- like/dislike --> 378 <!-- like/dislike -->
379 <li> 379 <li>
380 <img 380 <img
381 src="../assets/images/heart.svg" 381 src="../assets/images/heart.svg"
382 v-if="commentList[3].like == false" 382 v-if="commentList[3].like == false"
383 @click="likeComment(true, commentList[3]._id)" 383 @click="likeComment(true, commentList[3]._id)"
384 class="cursor-pointer" 384 class="cursor-pointer"
385 /> 385 />
386 <img 386 <img
387 src="../assets/images/purple-heart.png" 387 src="../assets/images/purple-heart.png"
388 v-if="commentList[3].like == true" 388 v-if="commentList[3].like == true"
389 @click="likeComment(false, commentList[3]._id)" 389 @click="likeComment(false, commentList[3]._id)"
390 class="cursor-pointer" 390 class="cursor-pointer"
391 /> 391 />
392 <a href="javascript:void(0);">{{ 392 <a href="javascript:void(0);">{{
393 commentList[3].likes.length 393 commentList[3].likes.length
394 }}</a> 394 }}</a>
395 </li> 395 </li>
396 <!-- like/dislike ends --> 396 <!-- like/dislike ends -->
397 <li> 397 <li>
398 <img src="../assets/images/rply.svg" /> 398 <img src="../assets/images/rply.svg" />
399 <a href="javascript:void(0);" @click="reply_cht_box(3)" 399 <a href="javascript:void(0);" @click="reply_cht_box(3)"
400 >Reply</a 400 >Reply</a
401 > 401 >
402 </li> 402 </li>
403 </ul> 403 </ul>
404 </div> 404 </div>
405 <!-- comments box --> 405 <!-- comments box -->
406 </div> 406 </div>
407 <!-- single author comments --> 407 <!-- single author comments -->
408 </div> 408 </div>
409 <!-- single mobile Right insight --> 409 <!-- single mobile Right insight -->
410 </div> 410 </div>
411 <!-- single author comments --> 411 <!-- single author comments -->
412 <div class="footer-nav"> 412 <div class="footer-nav">
413 <div class="footer-top white-bg"> 413 <div class="footer-top white-bg">
414 <div class="row"> 414 <div class="row">
415 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 415 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
416 <div class="row h-100p"> 416 <div class="row h-100p">
417 <div 417 <div
418 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 418 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
419 > 419 >
420 <div class="ft-comments-group testi-photos-ct"> 420 <div class="ft-comments-group testi-photos-ct">
421 <div class="c-with-photos"> 421 <div class="c-with-photos">
422 <span class="count-comments" 422 <span class="count-comments"
423 >{{ getLastcomment("count", commentList) }}+ 423 >{{ getLastcomment("count", commentList) }}+
424 Comments</span 424 Comments</span
425 ><!-- count commets --> 425 ><!-- count commets -->
426 <ul class="comments-photos"> 426 <ul class="comments-photos">
427 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> 427 <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
428 <li><img src="../assets/images/c-photo-2.png" /></li> 428 <li><img src="../assets/images/c-photo-2.png" /></li>
429 <li><img src="../assets/images/c-photo-3.png" /></li> --> 429 <li><img src="../assets/images/c-photo-3.png" /></li> -->
430 </ul> 430 </ul>
431 <!-- comment photos --> 431 <!-- comment photos -->
432 </div> 432 </div>
433 <div class="comments-detail all-c-space"> 433 <div class="comments-detail all-c-space">
434 <span 434 <span
435 >{{ getLastcomment("name", commentList) }} 435 >{{ getLastcomment("name", commentList) }}
436 <a href="javascript:void(0);" @click="open_ct_box" 436 <a href="javascript:void(0);" @click="open_ct_box"
437 >View All</a 437 >View All</a
438 ></span 438 ></span
439 > 439 >
440 <p> 440 <p>
441 <!-- I wonder what the difference between “Dunzo Assistant” 441 <!-- I wonder what the difference between “Dunzo Assistant”
442 and “Pickup and Drop... --> 442 and “Pickup and Drop... -->
443 {{ getLastcomment("msg", commentList) }} 443 {{ getLastcomment("msg", commentList) }}
444 </p> 444 </p>
445 </div> 445 </div>
446 <!-- comments detail --> 446 <!-- comments detail -->
447 </div> 447 </div>
448 <!-- comments Group --> 448 <!-- comments Group -->
449 </div> 449 </div>
450 </div> 450 </div>
451 </div> 451 </div>
452 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 452 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
453 <div class="comment-frm no-c-frm"> 453 <div class="comment-frm no-c-frm">
454 <div class="row"> 454 <div class="row">
455 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 455 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
456 <div class="form-group frm-wdth addfrm-spc"> 456 <div class="form-group frm-wdth addfrm-spc">
457 <input 457 <input
458 type="text" 458 type="text"
459 class="form-control" 459 class="form-control"
460 placeholder="Something on your mind?" 460 placeholder="Something on your mind?"
461 id="open_ct_box" 461 id="open_ct_box"
462 v-model="comment" 462 v-model="comment"
463 /> 463 />
464 </div> 464 </div>
465 </div> 465 </div>
466 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 466 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
467 <a 467 <a
468 href="javascript:void(0);" 468 href="javascript:void(0);"
469 @click="createComment" 469 @click="createComment"
470 class="add-comment" 470 class="add-comment"
471 ><img src="../assets/images/add-comment.svg" /> 471 ><img src="../assets/images/add-comment.svg" />
472 Comment</a 472 Comment</a
473 > 473 >
474 </div> 474 </div>
475 </div> 475 </div>
476 <!-- comment from --> 476 <!-- comment from -->
477 </div> 477 </div>
478 </div> 478 </div>
479 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 479 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
480 <ul class="top-intro-bt"> 480 <ul class="top-intro-bt">
481 <li> 481 <li>
482 <a href="javascript:void(0);" @click="goBack" 482 <a href="javascript:void(0);" @click="goBack"
483 ><img src="../assets/images/skip-prev.svg" /> Prev</a 483 ><img src="../assets/images/skip-prev.svg" /> Prev</a
484 > 484 >
485 </li> 485 </li>
486 <li> 486 <li>
487 <a href="javascript:void(0);" @click="goNext" 487 <a href="javascript:void(0);" @click="goNext"
488 ><img src="../assets/images/skip-next.svg" /> Skip to next 488 ><img src="../assets/images/skip-next.svg" /> Skip to next
489 slide</a 489 slide</a
490 > 490 >
491 </li> 491 </li>
492 </ul> 492 </ul>
493 </div> 493 </div>
494 <!-- buttons list --> 494 <!-- buttons list -->
495 </div> 495 </div>
496 </div> 496 </div>
497 <!-- footer top --> 497 <!-- footer top -->
498 <div class="footer-bottom"> 498 <div class="footer-bottom">
499 <ul> 499 <ul>
500 <li class="active"></li> 500 <li class="active"></li>
501 <li></li> 501 <li></li>
502 </ul> 502 </ul>
503 </div> 503 </div>
504 <!-- footer top --> 504 <!-- footer top -->
505 </div> 505 </div>
506 <!-- footer --> 506 <!-- footer -->
507 </div> 507 </div>
508 <!-- body wrapper --> 508 <!-- body wrapper -->
509 </div> 509 </div>
510 <!-- main wrapper --> 510 <!-- main wrapper -->
511 </main> 511 </main>
512 </template> 512 </template>
513 513
514 <script> 514 <script>
515 import Vue from "vue"; 515 import Vue from "vue";
516 import router from "../router"; 516 import router from "../router";
517 import axios from "axios"; 517 import axios from "axios";
518 import moment from "moment"; 518 import moment from "moment";
519 import Header from "./Header"; 519 import Header from "./Header";
520 520
521 export default { 521 export default {
522 components: { 522 components: {
523 Header: Header, 523 Header: Header,
524 }, 524 },
525 name: "SingleMobileScreenInsightTwo", 525 name: "SingleMobileScreenInsightTwo",
526 data() { 526 data() {
527 return { 527 return {
528 allSlide: [], 528 allSlide: [],
529 currentSlideIndex: null, 529 currentSlideIndex: null,
530 currentSlideData: null, 530 currentSlideData: null,
531 // 531 //
532 usertoken: null, 532 usertoken: null,
533 commentList: [], 533 commentList: [],
534 comment: null, 534 comment: null,
535 parentInput: true, 535 parentInput: true,
536 }; 536 };
537 }, 537 },
538 mounted() { 538 mounted() {
539 var allSlideData = localStorage.getItem( 539 var allSlideData = localStorage.getItem(
540 "spotlight_slide" + this.$route.params.caseStudyId 540 "spotlight_slide" + this.$route.params.caseStudyId
541 ); 541 );
542 var userdata = localStorage.getItem("spotlight_usertoken"); 542 var userdata = localStorage.getItem("spotlight_usertoken");
543 if (allSlideData) { 543 if (allSlideData) {
544 this.allSlide = JSON.parse(allSlideData); 544 this.allSlide = JSON.parse(allSlideData);
545 this.getCurrentSlideData(); 545 this.getCurrentSlideData();
546 }else{ 546 }else{
547 this.getCurrentSlideData(); 547 this.getCurrentSlideData();
548 548
549 } 549 }
550 var userdata = localStorage.getItem("spotlight_usertoken"); 550 var userdata = localStorage.getItem("spotlight_usertoken");
551 if (userdata) { 551 if (userdata) {
552 userdata = JSON.parse(userdata); 552 userdata = JSON.parse(userdata);
553 this.usertoken = userdata.token; 553 this.usertoken = userdata.token;
554 this.getComment(); 554 this.getComment();
555 }else{ 555 }else{
556 this.getComment(); 556 this.getComment();
557 } 557 }
558 }, 558 },
559 methods: { 559 methods: {
560 560
561 generatecaseStudies(){ 561 generatecaseStudies(){
562 axios 562 axios
563 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { 563 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
564 headers: { 564 headers: {
565 Authorization: "Bearer " + this.usertoken, 565 Authorization: "Bearer " + this.usertoken,
566 }, 566 },
567 }) 567 })
568 .then((response) => { 568 .then((response) => {
569 569
570 console.log('response',response.data.data); 570 console.log('response',response.data.data);
571 this.openStudy(response.data.data); 571 this.openStudy(response.data.data);
572 }) 572 })
573 .catch((error) => console.log(error)); 573 .catch((error) => console.log(error));
574 }, 574 },
575 575
576 576
577 577
578 openStudy(payload) { 578 openStudy(payload) {
579 console.log("payload-", payload); 579 console.log("payload-", payload);
580 payload.intro.date = payload.createdAt; 580 payload.intro.date = payload.createdAt;
581 payload.intro.focusPoint = payload.focusAreas; 581 payload.intro.focusPoint = payload.focusAreas;
582 axios 582 axios
583 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 583 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
584 headers: { 584 headers: {
585 Authorization: "Bearer " + this.usertoken, 585 Authorization: "Bearer " + this.usertoken,
586 }, 586 },
587 }) 587 })
588 .then((response) => { 588 .then((response) => {
589 this.createSlide(payload, response.data.data); 589 this.createSlide(payload, response.data.data);
590 }) 590 })
591 .catch((error) => console.log(error)); 591 .catch((error) => console.log(error));
592 }, 592 },
593 593
594 createSlide(payload, slides) { 594 createSlide(payload, slides) {
595 var finalSlides = []; 595 var finalSlides = [];
596 slides.forEach((slides_) => { 596 slides.forEach((slides_) => {
597 var url = this.assignRoutes(slides_.templateId); 597 var url = this.assignRoutes(slides_.templateId);
598 var obj = { 598 var obj = {
599 forward: true, 599 forward: true,
600 backward: true, 600 backward: true,
601 ur: url, 601 ur: url,
602 slideId: slides_._id, 602 slideId: slides_._id,
603 caseStudyId: slides_.caseStudyId, 603 caseStudyId: slides_.caseStudyId,
604 payload: { 604 payload: {
605 metaData: slides_.metaData, 605 metaData: slides_.metaData,
606 comments: slides_.comments, 606 comments: slides_.comments,
607 insight: slides_.insight ? slides_.insight : null, 607 insight: slides_.insight ? slides_.insight : null,
608 }, 608 },
609 }; 609 };
610 // slides_ 610 // slides_
611 finalSlides.push(obj); 611 finalSlides.push(obj);
612 }); 612 });
613 console.log("payload", payload); 613 console.log("payload", payload);
614 // add first slide at begining 614 // add first slide at begining
615 finalSlides.unshift({ 615 finalSlides.unshift({
616 forward: true, 616 forward: true,
617 backward: false, 617 backward: false,
618 ur: "EpisodeIntro", 618 ur: "EpisodeIntro",
619 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 619 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
620 caseStudyId: payload._id, 620 caseStudyId: payload._id,
621 payload: { 621 payload: {
622 metaData: payload.intro, 622 metaData: payload.intro,
623 comments: [], 623 comments: [],
624 }, 624 },
625 }); 625 });
626 finalSlides.push({ 626 finalSlides.push({
627 forward: true, 627 forward: true,
628 backward: false, 628 backward: false,
629 ur: "Outro", 629 ur: "Outro",
630 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 630 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
631 caseStudyId: payload._id, 631 caseStudyId: payload._id,
632 payload: { 632 payload: {
633 metaData: payload.outro, 633 metaData: payload.outro,
634 comments: [], 634 comments: [],
635 }, 635 },
636 }); 636 });
637 637
638 console.log(finalSlides); 638 console.log(finalSlides);
639 console.log("payload", payload); 639 console.log("payload", payload);
640 localStorage.setItem( 640 localStorage.setItem(
641 "spotlight_slide" + payload._id, 641 "spotlight_slide" + payload._id,
642 JSON.stringify(finalSlides) 642 JSON.stringify(finalSlides)
643 ); 643 );
644 this.allSlide = finalSlides; 644 this.allSlide = finalSlides;
645 this.getCurrentSlideData(); 645 this.getCurrentSlideData();
646 }, 646 },
647 assignRoutes(tempId) { 647 assignRoutes(tempId) {
648 // /episode-intro 648 // /episode-intro
649 // /outro 649 // /outro
650 var routes = [ 650 var routes = [
651 { 651 {
652 url: "AuthorIntro", 652 url: "AuthorIntro",
653 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 653 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
654 }, 654 },
655 { 655 {
656 url: "NoScreenshotSingleAuthor", 656 url: "NoScreenshotSingleAuthor",
657 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 657 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
658 }, 658 },
659 { 659 {
660 url: "SingleMobileScreenInsightTwo", 660 url: "SingleMobileScreenInsightTwo",
661 tempId: "T3_cqNIf7tuqL4jyON63dA7", 661 tempId: "T3_cqNIf7tuqL4jyON63dA7",
662 }, 662 },
663 { 663 {
664 url: "TwoScreenWithoutInsight", 664 url: "TwoScreenWithoutInsight",
665 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 665 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
666 }, 666 },
667 { 667 {
668 url: "noscreenshotSingleautho", 668 url: "noscreenshotSingleautho",
669 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 669 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
670 }, 670 },
671 { 671 {
672 url: "SingleMobileScreenInsightOne", 672 url: "SingleMobileScreenInsightOne",
673 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 673 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
674 }, 674 },
675 { 675 {
676 url: "TwoScreenWithInsight", 676 url: "TwoScreenWithInsight",
677 tempId: "T7_za3c3sYgx7bVvtKzasdf", 677 tempId: "T7_za3c3sYgx7bVvtKzasdf",
678 }, 678 },
679 { 679 {
680 url: "AuthorReadingNow", 680 url: "AuthorReadingNow",
681 tempId: "T8_zb4d4fYgx7bVvtKzasdf", 681 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
682 }, 682 },
683 { 683 {
684 url: "AuthorReadingBreak", 684 url: "AuthorReadingBreak",
685 tempId: "T9_zb3e4fYgy7dVvfKdasdf", 685 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
686 }, 686 },
687 ]; 687 ];
688 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 688 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
689 return routes[i].url; 689 return routes[i].url;
690 }, 690 },
691 691
692 getCurrentSlideData() { 692 getCurrentSlideData() {
693 var i = this.allSlide.findIndex( 693 var i = this.allSlide.findIndex(
694 (slide_) => slide_.slideId == this.$route.params.slideId 694 (slide_) => slide_.slideId == this.$route.params.slideId
695 ); 695 );
696 this.currentSlideIndex = i; 696 this.currentSlideIndex = i;
697 this.currentSlideData = this.allSlide[i]; 697 this.currentSlideData = this.allSlide[i];
698 console.log("currentSlideData", this.currentSlideData); 698 console.log("currentSlideData", this.currentSlideData);
699 }, 699 },
700 goNext() { 700 goNext() {
701 this.currentSlideIndex++; 701 this.currentSlideIndex++;
702 this.$router.push({ 702 this.$router.push({
703 name: this.allSlide[this.currentSlideIndex].ur, 703 name: this.allSlide[this.currentSlideIndex].ur,
704 params: { 704 params: {
705 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 705 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
706 slideId: this.allSlide[this.currentSlideIndex].slideId, 706 slideId: this.allSlide[this.currentSlideIndex].slideId,
707 }, 707 },
708 }); 708 });
709 }, 709 },
710 goBack() { 710 goBack() {
711 this.currentSlideIndex--; 711 this.currentSlideIndex--;
712 this.$router.push({ 712 this.$router.push({
713 name: this.allSlide[this.currentSlideIndex].ur, 713 name: this.allSlide[this.currentSlideIndex].ur,
714 params: { 714 params: {
715 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 715 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
716 slideId: this.allSlide[this.currentSlideIndex].slideId, 716 slideId: this.allSlide[this.currentSlideIndex].slideId,
717 }, 717 },
718 }); 718 });
719 }, 719 },
720 createComment() { 720 createComment() {
721 console.log("===", this.comment); 721 console.log("===", this.comment);
722 if(!this.usertoken){ 722 if(!this.usertoken){
723 this.goToLogin(); 723 this.goToLogin();
724 } 724 }
725 var obj = { 725 var obj = {
726 caseStudyId: this.currentSlideData.caseStudyId, 726 caseStudyId: this.currentSlideData.caseStudyId,
727 slideId: this.currentSlideData.slideId, 727 slideId: this.currentSlideData.slideId,
728 comment: this.comment, 728 comment: this.comment,
729 }; 729 };
730 axios 730 axios
731 .post("/bounceBoard/comment", obj, { 731 .post("/bounceBoard/comment", obj, {
732 headers: { 732 headers: {
733 Authorization: "Bearer " + this.usertoken, 733 Authorization: "Bearer " + this.usertoken,
734 }, 734 },
735 }) 735 })
736 .then((response) => { 736 .then((response) => {
737 this.comment = null; 737 this.comment = null;
738 this.getComment(); 738 this.getComment();
739 console.log(response); 739 console.log(response);
740 }) 740 })
741 .catch((error) => { 741 .catch((error) => {
742 if (error.response) { 742 if (error.response) {
743 this.$toaster.error(error.response.data.message); 743 this.$toaster.error(error.response.data.message);
744 } 744 }
745 }); 745 });
746 }, 746 },
747 747
748 createChildComment(cmnt) { 748 createChildComment(cmnt) {
749 if(!this.usertoken){ 749 if(!this.usertoken){
750 this.goToLogin(); 750 this.goToLogin();
751 } console.log(cmnt, "===", this.comment); 751 } console.log(cmnt, "===", this.comment);
752 var obj = { 752 var obj = {
753 caseStudyId: this.currentSlideData.caseStudyId, 753 caseStudyId: this.currentSlideData.caseStudyId,
754 slideId: this.currentSlideData.slideId, 754 slideId: this.currentSlideData.slideId,
755 comment: this.comment, 755 comment: this.comment,
756 parentId: cmnt._id, 756 parentId: cmnt._id,
757 }; 757 };
758 axios 758 axios
759 .post("/bounceBoard/comment", obj, { 759 .post("/bounceBoard/comment", obj, {
760 headers: { 760 headers: {
761 Authorization: "Bearer " + this.usertoken, 761 Authorization: "Bearer " + this.usertoken,
762 }, 762 },
763 }) 763 })
764 .then((response) => { 764 .then((response) => {
765 this.comment = null; 765 this.comment = null;
766 this.discardRply(cmnt); 766 this.discardRply(cmnt);
767 this.getComment(); 767 this.getComment();
768 console.log(response); 768 console.log(response);
769 }) 769 })
770 .catch((error) => { 770 .catch((error) => {
771 if (error.response) { 771 if (error.response) {
772 this.$toaster.error(error.response.data.message); 772 this.$toaster.error(error.response.data.message);
773 } 773 }
774 }); 774 });
775 }, 775 },
776 getComment() { 776 getComment() {
777 axios 777 axios
778 .get( 778 .get(
779 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 779 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
780 { 780 {
781 headers: { 781 headers: {
782 Authorization: "Bearer " + this.usertoken, 782 Authorization: "Bearer " + this.usertoken,
783 }, 783 },
784 } 784 }
785 ) 785 )
786 .then((response) => { 786 .then((response) => {
787 console.log(response.data); 787 console.log(response.data);
788 var comments = []; 788 var comments = [];
789 var keys = Object.keys(response.data.data); 789 var keys = Object.keys(response.data.data);
790 response.data.data; 790 response.data.data;
791 keys.forEach((key_) => { 791 keys.forEach((key_) => {
792 comments.push(response.data.data[key_]); 792 comments.push(response.data.data[key_]);
793 }); 793 });
794 comments.forEach((coment_) => { 794 comments.forEach((coment_) => {
795 coment_.childInput = false; 795 coment_.childInput = false;
796 }); 796 });
797 console.log("comments", comments); 797 console.log("comments", comments);
798 this.commentList = comments; 798 this.commentList = comments;
799 }) 799 })
800 .catch((error) => console.log(error)); 800 .catch((error) => console.log(error));
801 }, 801 },
802 dateGenerator(curreDate) { 802 dateGenerator(curreDate) {
803 var todayDate = moment(new Date(), "DD.MM.YYYY"); 803 var todayDate = moment(new Date(), "DD.MM.YYYY");
804 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 804 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
805 var result = todayDate.diff(endDate, "days"); 805 var result = todayDate.diff(endDate, "days");
806 var date = null; 806 var date = null;
807 if (result == 0) { 807 if (result == 0) {
808 date = "Today"; 808 date = "Today";
809 } else { 809 } else {
810 date = result + " days ago"; 810 date = result + " days ago";
811 } 811 }
812 return date; 812 return date;
813 }, 813 },
814 goToLogin() { 814 goToLogin() {
815 this.$router.push("/login"); 815 this.$router.push("/login");
816 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); 816 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
817 817
818 }, 818 },
819 goToSignUp() { 819 goToSignUp() {
820 this.$router.push("/"); 820 this.$router.push("/");
821 }, 821 },
822 chtbox_close() { 822 chtbox_close() {
823 $("#cht_box_close").removeClass("cht_close"); 823 $("#cht_box_close").removeClass("cht_close");
824 $("#open_ct_box, .c_hide").show(); 824 $("#open_ct_box, .c_hide").show();
825 $(".footer-top").addClass("white-bg"); 825 $(".footer-top").addClass("white-bg");
826 }, 826 },
827 open_ct_box() { 827 open_ct_box() {
828 828
829 $("#cht_box_close").addClass("cht_close"); 829 $("#cht_box_close").addClass("cht_close");
830 $("#open_ct_box, .c_hide").hide(); 830 $("#open_ct_box, .c_hide").hide();
831 $(".footer-top").removeClass("white-bg"); 831 $(".footer-top").removeClass("white-bg");
832 }, 832 },
833 eachRply(cmnt) { 833 eachRply(cmnt) {
834 cmnt.childInput = true; 834 cmnt.childInput = true;
835 this.parentInput = false; 835 this.parentInput = false;
836 this.comment = null; 836 this.comment = null;
837 setTimeout(() => { 837 setTimeout(() => {
838 document.getElementById("childInput").focus(); 838 document.getElementById("childInput").focus();
839 }, 100); 839 }, 100);
840 }, 840 },
841 discardRply(cmnt) { 841 discardRply(cmnt) {
842 cmnt.childInput = false; 842 cmnt.childInput = false;
843 this.parentInput = true; 843 this.parentInput = true;
844 this.comment = null; 844 this.comment = null;
845 }, 845 },
846 reply_cht_box(i) { 846 reply_cht_box(i) {
847 if(!this.usertoken){ 847 if(!this.usertoken){
848 this.goToLogin(); 848 this.goToLogin();
849 } 849 }
850 if(!this.usertoken){ 850 if(!this.usertoken){
851 this.goToLogin(); 851 this.goToLogin();
852 } 852 }
853 console.log(this.commentList, "cmnt"); 853 console.log(this.commentList, "cmnt");
854 $("#cht_box_close").addClass("cht_close"); 854 $("#cht_box_close").addClass("cht_close");
855 $("#open_ct_box, .c_hide").hide(); 855 $("#open_ct_box, .c_hide").hide();
856 $(".footer-top").removeClass("white-bg"); 856 $(".footer-top").removeClass("white-bg");
857 this.commentList[i].childInput = true; 857 this.commentList[i].childInput = true;
858 this.parentInput = false; 858 this.parentInput = false;
859 this.comment = null; 859 this.comment = null;
860 setTimeout(() => { 860 setTimeout(() => {
861 document.getElementById("childInput").focus(); 861 document.getElementById("childInput").focus();
862 }, 100); 862 }, 100);
863 }, 863 },
864 likeComment(status, id) { 864 likeComment(status, id) {
865 if(!this.usertoken){ 865 if(!this.usertoken){
866 this.goToLogin(); 866 this.goToLogin();
867 } 867 }
868 console.log("===", this.comment); 868 console.log("===", this.comment);
869 var obj = { 869 var obj = {
870 commentId: id, 870 commentId: id,
871 like: status, 871 like: status,
872 }; 872 };
873 axios 873 axios
874 .post("/bounceBoard/like", obj, { 874 .post("/bounceBoard/like", obj, {
875 headers: { 875 headers: {
876 Authorization: "Bearer " + this.usertoken, 876 Authorization: "Bearer " + this.usertoken,
877 }, 877 },
878 }) 878 })
879 .then((response) => { 879 .then((response) => {
880 this.getComment(); 880 this.getComment();
881 console.log(response); 881 console.log(response);
882 }) 882 })
883 .catch((error) => { 883 .catch((error) => {
884 if (error.response) { 884 if (error.response) {
885 this.$toaster.error(error.response.data.message); 885 this.$toaster.error(error.response.data.message);
886 } 886 }
887 }); 887 });
888 }, 888 },
889 getLastcomment(flag, commentArray) { 889 getLastcomment(flag, commentArray) {
890 var finalComment = null; 890 var finalComment = null;
891 var totalMessage = 0; 891 var totalMessage = 0;
892 var name = null; 892 var name = null;
893 commentArray.forEach((comment_) => { 893 commentArray.forEach((comment_) => {
894 if (comment_.comment != null) { 894 if (comment_.comment != null) {
895 name = comment_.user.name; 895 name = comment_.user.name;
896 finalComment = comment_.comment; 896 finalComment = comment_.comment;
897 totalMessage++; 897 totalMessage++;
898 } 898 }
899 }); 899 });
900 if (flag == "count") { 900 if (flag == "count") {
901 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 901 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
902 } else if (flag == "name") { 902 } else if (flag == "name") {
903 return (name = name); 903 return (name = name);
904 } else { 904 } else {
905 return finalComment; 905 return finalComment;
906 } 906 }
907 }, 907 },
908 commentExistCheck(i) { 908 commentExistCheck(i) {
909 console.log(this.commentList[i].comment); 909 console.log(this.commentList[i].comment);
910 var returnValue = false; 910 var returnValue = false;
911 if (this.commentList[i].comment) { 911 if (this.commentList[i].comment) {
912 returnValue = true; 912 returnValue = true;
913 } 913 }
914 return returnValue; 914 return returnValue;
915 }, 915 },
916 }, 916 },
917 }; 917 };
918 // 918 //
919 </script> 919 </script>
920 920