viithiisys / spotlight-frontend

Browse Code »

Commit 1f12ffc5582b29f6718ff83f9c8867dc52f7fee2

Authored by Digvijay Singh 2021-01-17 23:53:03 -0500

1 parent feb56e1504

Exists in master

issues fixation

Showing 9 changed files with 96 additions and 96 deletions Show diff stats

src/components/Header.vue

Diff comments View file @1f12ffc

1	<template>	1	<template>
2	<nav class="navbar navbar-expand-sm spotLight-nav">	2	<nav class="navbar navbar-expand-sm spotLight-nav">
3	<a class="navbar-brand" href=""	3	<a @click="goTo" class="navbar-brand" href="javasript:void(0);"
4	><img src="../assets/images/logo.png"	4	><img src="../assets/images/logo.png"
5	/></a>	5	/></a>
6	<button	6	<button
7	class="navbar-toggler"	7	class="navbar-toggler"
8	type="button"	8	type="button"
9	data-toggle="collapse"	9	data-toggle="collapse"
10	data-target="#navbarsExample03"	10	data-target="#navbarsExample03"
11	aria-controls="navbarsExample03"	11	aria-controls="navbarsExample03"
12	aria-expanded="false"	12	aria-expanded="false"
13	aria-label="Toggle navigation"	13	aria-label="Toggle navigation"
14	>	14	>
15	<span class="navbar-toggler-icon"></span>	15	<span class="navbar-toggler-icon"></span>
16	<span class="navbar-toggler-icon"></span>	16	<span class="navbar-toggler-icon"></span>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	</button>	18	</button>
19		19
20	<div class="collapse navbar-collapse" id="navbarsExample03">	20	<div class="collapse navbar-collapse" id="navbarsExample03">
21	<!-- <ul class="navbar-nav mr-auto">	21	<!-- <ul class="navbar-nav mr-auto">
22	<li class="nav-item active">	22	<li class="nav-item active">
23	<a class="nav-link" href=""	23	<a class="nav-link" href="javasript:void(0);"avasript:void(0);"
24	</li>	24	</li>
25	<li class="nav-item">	25	<li class="nav-item">
26	<a class="nav-link" href=""	26	<a class="nav-link" href="javasript:void(0);"avasript:void(0);"
27	</li>	27	</li>
28	<li class="nav-item">	28	<li class="nav-item">
29	<a class="nav-link" href=""	29	<a class="nav-link" href="javasript:void(0);"avasript:void(0);"
30	</li>	30	</li>
31	<li class="nav-item">	31	<li class="nav-item">
32	<a class="nav-link" href=""	32	<a class="nav-link" href="javasript:void(0);"avasript:void(0);"
33	</li>	33	</li>
34	</ul> -->	34	</ul> -->
35	</div>	35	</div>
36	<div class="">	36	<div class="">
37	<a @click="goTo" href="javascript:void(0);" class="user-profile-photo common_color"	37	<a @click="goTo" href="javascript:void(0);" class="user-profile-photo common_color"
38	><img :src="profilePictue"	38	><img :src="profilePictue"
39	/></a>	39	/></a>
40	<div class="sub-menu-user" id="userprofileshow" style="display: none">	40	<div class="sub-menu-user" id="userprofileshow" style="display: none">
41	<!-- <ul>	41	<!-- <ul>
42	<li>	42	<li>
43	<a href="javascript:void(0);"	43	<a href="javascript:void(0);"
44	>Edit Profile</a	44	>Edit Profile</a
45	>	45	>
46	</li>	46	</li>
47	<li><a href="javascript:void(0);" @click="logout">Log Out</a></li>	47	<li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
48	</ul> -->	48	</ul> -->
49	</div>	49	</div>
50	</div>	50	</div>
51	</nav>	51	</nav>
52	</template>	52	</template>
53		53
54	<script>	54	<script>
55	import $ from "jquery";	55	import $ from "jquery";
56	import axios from "axios";	56	import axios from "axios";
57	export default {	57	export default {
58	name: "Header",	58	name: "Header",
59	data() {	59	data() {
60	return {	60	return {
61	usertoken:null,	61	usertoken:null,
62	profilePictue:null,	62	profilePictue:null,
63	};	63	};
64	},	64	},
65	mounted() {	65	mounted() {
66	var userdata = localStorage.getItem("spotlight_usertoken");	66	var userdata = localStorage.getItem("spotlight_usertoken");
67	if (userdata) {	67	if (userdata) {
68	userdata = JSON.parse(userdata);	68	userdata = JSON.parse(userdata);
69	this.usertoken = userdata.token;	69	this.usertoken = userdata.token;
70	this.getProfile();	70	this.getProfile();
71	}	71	}
72	},	72	},
73	methods: {	73	methods: {
74	goTo() {	74	goTo() {
75	this.$router.push("/profile");	75	this.$router.push("/profile");
76	},	76	},
77	getProfile() {	77	getProfile() {
78	axios	78	axios
79	.get("/profile", {	79	.get("/profile", {
80	headers: {	80	headers: {
81	Authorization: "Bearer " + this.usertoken,	81	Authorization: "Bearer " + this.usertoken,
82	},	82	},
83	})	83	})
84	.then((response) => {	84	.then((response) => {
85	this.assignClass(response.data.data.bgColor);	85	this.assignClass(response.data.data.bgColor);
86	this.profilePictue = response.data.data.profilePic;	86	this.profilePictue = response.data.data.profilePic;
87	console.log(response.data.data);	87	console.log(response.data.data);
88	})	88	})
89	.catch((error) => console.log(error));	89	.catch((error) => console.log(error));
90	},	90	},
91	assignClass(bgClr) {	91	assignClass(bgClr) {
92	var cols = document.getElementsByClassName("common_color");	92	var cols = document.getElementsByClassName("common_color");
93	for (var i = 0; i < cols.length; i++) {	93	for (var i = 0; i < cols.length; i++) {
94	cols[i].style.backgroundColor = bgClr;	94	cols[i].style.backgroundColor = bgClr;
95	}	95	}
96	},	96	},
97	}	97	}
98	,	98	,
99		99
100	};	100	};
101	</script>	101	</script>
102		102

src/components/Insight.vue

Diff comments View file @1f12ffc

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid insights-wrp">	3	<div class="container-fluid insights-wrp">
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);"><img src="../assets/images/logo.png" /></a>	5	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png" /></a>
6	<div class="user-profile-photo insights-profile">	6	<div class="user-profile-photo insights-profile">
7	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>	7	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
8	</div>	8	</div>
9	</nav><!-- menu wrapper -->	9	</nav><!-- menu wrapper -->
10	<div class="clearfix"></div>	10	<div class="clearfix"></div>
11	<div class="row">	11	<div class="row">
12	<div class="col-lg-12">	12	<div class="col-lg-12">
13	<form class="insights-searh">	13	<form class="insights-searh">
14	<div class="form-group">	14	<div class="form-group">
15	<input type="text" class="form-control" value="" placeholder="Search Insights Library" id="fname">	15	<input type="text" class="form-control" value="" placeholder="Search Insights Library" id="fname">
16	<a href="javascript:void(0);"><img src="../assets/images//search-icon.svg" /></a>	16	<a href="javascript:void(0);"><img src="../assets/images//search-icon.svg" /></a>
17	</div>	17	</div>
18	</form>	18	</form>
19	</div>	19	</div>
20	</div><!-- tab style -->	20	</div><!-- tab style -->
21	<div class="row">	21	<div class="row">
22	<div class="col-lg-7 mr-auto ml-auto">	22	<div class="col-lg-7 mr-auto ml-auto">
23	<div class="insights-border"><span>or Filter by</span></div>	23	<div class="insights-border"><span>or Filter by</span></div>
24	<div class="insights-list-filter">	24	<div class="insights-list-filter">
25	<ul>	25	<ul>
26	<li><a href="" class="lavender-blue-bg">Pricing</a></li>	26	<li><a href="javasript:void(0);" class="lavender-blue-bg">Pricing</a></li>
27	<li><a href="" class="golden-tainoi-bg">Design</a></li>	27	<li><a href="javasript:void(0);" class="golden-tainoi-bg">Design</a></li>
28	<li><a href="" class="red-orange-bg">Marketing</a></li>	28	<li><a href="javasript:void(0);" class="red-orange-bg">Marketing</a></li>
29	<li><a href="" class="morning-glory-bg">Product</a></li>	29	<li><a href="javasript:void(0);" class="morning-glory-bg">Product</a></li>
30	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>	30	<li><a href="javasript:void(0);" class="dark-green-copper-bg">Psychology</a></li>
31	<li><a href="" class="red-orange-bg">Marketing</a></li>	31	<li><a href="javasript:void(0);" class="red-orange-bg">Marketing</a></li>
32	<li><a href="" class="morning-glory-bg">Product</a></li>	32	<li><a href="javasript:void(0);" class="morning-glory-bg">Product</a></li>
33	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>	33	<li><a href="javasript:void(0);" class="dark-green-copper-bg">Psychology</a></li>
34	</ul>	34	</ul>
35	</div>	35	</div>
36	</div>	36	</div>
37	</div>	37	</div>
38	<div class="row">	38	<div class="row">
39	<div class="col-lg-4 insight-mb-spc">	39	<div class="col-lg-4 insight-mb-spc">
40	<div class="insights-products radical-red-border">	40	<div class="insights-products radical-red-border">
41	<h3 class="radical-red-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/radical-red-icon.svg"></a></h3>	41	<h3 class="radical-red-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/radical-red-icon.svg"></a></h3>
42	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	42	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
43	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	43	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
44	</div>	44	</div>
45	</div>	45	</div>
46	<div class="col-lg-4 insight-mb-spc">	46	<div class="col-lg-4 insight-mb-spc">
47	<div class="insights-products selective-yellow-border">	47	<div class="insights-products selective-yellow-border">
48	<h3 class="selective-yellow-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/selective-yellow-icon.svg"></a></h3>	48	<h3 class="selective-yellow-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/selective-yellow-icon.svg"></a></h3>
49	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	49	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
50	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	50	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
51	</div>	51	</div>
52	</div>	52	</div>
53	<div class="col-lg-4 insight-mb-spc">	53	<div class="col-lg-4 insight-mb-spc">
54	<div class="insights-products lavender-blue-border">	54	<div class="insights-products lavender-blue-border">
55	<h3 class="lavender-blue-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/lavender-blue-icon.svg"></a></h3>	55	<h3 class="lavender-blue-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/lavender-blue-icon.svg"></a></h3>
56	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	56	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
57	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	57	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
58	</div>	58	</div>
59	</div>	59	</div>
60	<div class="col-lg-4 insight-mb-spc">	60	<div class="col-lg-4 insight-mb-spc">
61	<div class="insights-products dark-green-copper-border">	61	<div class="insights-products dark-green-copper-border">
62	<h3 class="dark-green-copper-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/dark-green-copper-icon.svg"></a></h3>	62	<h3 class="dark-green-copper-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/dark-green-copper-icon.svg"></a></h3>
63	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	63	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
64	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	64	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
65	</div>	65	</div>
66	</div>	66	</div>
67	<div class="col-lg-4 insight-mb-spc">	67	<div class="col-lg-4 insight-mb-spc">
68	<div class="insights-products purple-heart-border">	68	<div class="insights-products purple-heart-border">
69	<h3 class="purple-heart-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/purple-heart-icon.svg"></a></h3>	69	<h3 class="purple-heart-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/purple-heart-icon.svg"></a></h3>
70	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	70	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
71	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	71	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
72	</div>	72	</div>
73	</div>	73	</div>
74	<div class="col-lg-4 insight-mb-spc">	74	<div class="col-lg-4 insight-mb-spc">
75	<div class="insights-products silver-border">	75	<div class="insights-products silver-border">
76	<h3 class="silver-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/silver-icon.svg"></a></h3>	76	<h3 class="silver-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/silver-icon.svg"></a></h3>
77	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	77	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
78	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	78	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
79	</div>	79	</div>
80	</div>	80	</div>
81	</div>	81	</div>
82	<!-- body wrapper -->	82	<!-- body wrapper -->
83	</div><!-- main wrapper -->	83	</div><!-- main wrapper -->
84	<!-- main wrapper -->	84	<!-- main wrapper -->
85	</main>	85	</main>
86	</template>	86	</template>
87		87
88	<script>	88	<script>
89	import Vue from "vue";	89	import Vue from "vue";
90	import router from "../router";	90	import router from "../router";
91		91
92	export default {	92	export default {
93	name: "Insight",	93	name: "Insight",
94		94
95	data() {	95	data() {
96	return {};	96	return {};
97	},	97	},
98	mounted() {},	98	mounted() {},
99	methods: {	99	methods: {
100	goToLogin() {	100	goToLogin() {
101	this.$router.push("/login");	101	this.$router.push("/login");
102	},	102	},
103	goToSignUp() {	103	goToSignUp() {
104	this.$router.push("/");	104	this.$router.push("/");
105	},	105	},
106		106
107	},	107	},
108	};	108	};
109	</script>	109	</script>
110		110

src/components/NoScreenshotSingleAuthor.vue

Diff comments View file @1f12ffc

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	<!-- chat box -->	8	<!-- chat box -->
9	<div class="bounce-board-wrp" id="cht_box_close">	9	<div class="bounce-board-wrp" id="cht_box_close">
10	<div class="inner-wrp-bc">	10	<div class="inner-wrp-bc">
11	<div class="bc-top-head">	11	<div class="bc-top-head">
12	<span class="bc-head">	12	<span class="bc-head">
13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
14	</span>	14	</span>
15	<div class="action-sort">	15	<div class="action-sort">
16	<!-- <span class="sort-by">SORT BY</span>	16	<!-- <span class="sort-by">SORT BY</span>
17	<div class="btn-group">	17	<div class="btn-group">
18	<button	18	<button
19	type="button"	19	type="button"
20	class="bc-sort-list dropdown-toggle"	20	class="bc-sort-list dropdown-toggle"
21	data-toggle="dropdown"	21	data-toggle="dropdown"
22	aria-haspopup="true"	22	aria-haspopup="true"
23	aria-expanded="false"	23	aria-expanded="false"
24	>	24	>
25	BEST	25	BEST
26	</button>	26	</button>
27	<div class="dropdown-menu short_by">	27	<div class="dropdown-menu short_by">
28	<a class="dropdown-item" href=""	28	<a class="dropdown-item" href="javasript:void(0);"
29	>BEST 1</a	29	>BEST 1</a
30	>	30	>
31	<a class="dropdown-item" href=""	31	<a class="dropdown-item" href="javasript:void(0);"
32	>BEST 2</a	32	>BEST 2</a
33	>	33	>
34	<a class="dropdown-item" href=""	34	<a class="dropdown-item" href="javasript:void(0);"
35	>BEST 3</a	35	>BEST 3</a
36	>	36	>
37	</div>	37	</div>
38	</div> -->	38	</div> -->
39	<a	39	<a
40	href=""	40	href="javasript:void(0);"
41	@click="chtbox_close"	41	@click="chtbox_close"
42	class="close_chat_bx"	42	class="close_chat_bx"
43	><img src="../assets/images/close.png" alt="close" /></a	43	><img src="../assets/images/close.png" alt="close" /></a
44	><!-- close -->	44	><!-- close -->
45	</div>	45	</div>
46	<!-- action sort -->	46	<!-- action sort -->
47	</div>	47	</div>
48	<!-- top head -->	48	<!-- top head -->
49	<div class="bounce-board-body">	49	<div class="bounce-board-body">
50	<!-- all user comments -->	50	<!-- all user comments -->
51	<ul class="bounced-user-comments">	51	<ul class="bounced-user-comments">
52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53	<div class="bc_brd_l"></div>	53	<div class="bc_brd_l"></div>
54	<!-- border -->	54	<!-- border -->
55	<div class="parent-full-width" v-if="cmnt.comment">	55	<div class="parent-full-width" v-if="cmnt.comment">
56	<div class="full-width">	56	<div class="full-width">
57	<div class="b-user-head">	57	<div class="b-user-head">
58	<img :src="cmnt.user.profilePic" />	58	<img :src="cmnt.user.profilePic" />
59	<span class="head-content">{{ cmnt.user.name }} </span>	59	<span class="head-content">{{ cmnt.user.name }} </span>
60	<ul>	60	<ul>
61	<li>	61	<li>
62	<span></span	62	<span></span
63	><img src="../assets/images/u-info-icon.png" />{{	63	><img src="../assets/images/u-info-icon.png" />{{
64	cmnt.user.karmaPoints	64	cmnt.user.karmaPoints
65	}}pts	65	}}pts
66	</li>	66	</li>
67	<li>	67	<li>
68	<span></span>{{ dateGenerator(cmnt.createdAt) }}	68	<span></span>{{ dateGenerator(cmnt.createdAt) }}
69	</li>	69	</li>
70	</ul>	70	</ul>
71	</div>	71	</div>
72	<!-- header -->	72	<!-- header -->
73	<p>	73	<p>
74	{{ cmnt.comment }}	74	{{ cmnt.comment }}
75	</p>	75	</p>
76	<div class="joined_wrapper">	76	<div class="joined_wrapper">
77	<ul class="joined-info info_bc_spc">	77	<ul class="joined-info info_bc_spc">
78	<li>	78	<li>
79	<img	79	<img
80	src="../assets/images/heart.svg"	80	src="../assets/images/heart.svg"
81	v-if="cmnt.like == false"	81	v-if="cmnt.like == false"
82	@click="likeComment(true, cmnt._id)"	82	@click="likeComment(true, cmnt._id)"
83	class="cursor-pointer"	83	class="cursor-pointer"
84	/>	84	/>
85	<img	85	<img
86	src="../assets/images/purple-heart.png"	86	src="../assets/images/purple-heart.png"
87	v-if="cmnt.like == true"	87	v-if="cmnt.like == true"
88	@click="likeComment(false, cmnt._id)"	88	@click="likeComment(false, cmnt._id)"
89	class="cursor-pointer"	89	class="cursor-pointer"
90	/>	90	/>
91	</li>	91	</li>
92	<li>	92	<li>
93	<a href="">	93	<a href="javasript:void(0);">
94	{{ cmnt.likes.length }}</a	94	{{ cmnt.likes.length }}</a
95	>	95	>
96	</li>	96	</li>
97	<li class="comment-spc">	97	<li class="comment-spc">
98	<img src="../assets/images/purple-comment.png" />	98	<img src="../assets/images/purple-comment.png" />
99	</li>	99	</li>
100	<li>	100	<li>
101	<a href="">	101	<a href="javasript:void(0);">
102	{{ cmnt.children.length }}</a	102	{{ cmnt.children.length }}</a
103	>	103	>
104	</li>	104	</li>
105	</ul>	105	</ul>
106	<div class="add_rply" v-if="!cmnt.childInput">	106	<div class="add_rply" v-if="!cmnt.childInput">
107	<input	107	<input
108	type="text"	108	type="text"
109	@click="eachRply(cmnt)"	109	@click="eachRply(cmnt)"
110	class="add_Rply_C"	110	class="add_Rply_C"
111	placeholder="Add your reply"	111	placeholder="Add your reply"
112	/>	112	/>
113	</div>	113	</div>
114	<!-- rly form -->	114	<!-- rly form -->
115	</div>	115	</div>
116	<!-- joined wrapper -->	116	<!-- joined wrapper -->
117	</div>	117	</div>
118	<!-- full width -->	118	<!-- full width -->
119	</div>	119	</div>
120	<div class="comments-footer each-ft" v-if="cmnt.childInput">	120	<div class="comments-footer each-ft" v-if="cmnt.childInput">
121	<textarea v-model="comment" id="childInput"></textarea>	121	<textarea v-model="comment" id="childInput"></textarea>
122	<div class="comments-footer-wrp">	122	<div class="comments-footer-wrp">
123	<a	123	<a
124	@click="createChildComment(cmnt)"	124	@click="createChildComment(cmnt)"
125	href=""	125	href="javasript:void(0);"
126	class="add_comments_chat reply-Wdth"	126	class="add_comments_chat reply-Wdth"
127	>Reply</a	127	>Reply</a
128	>	128	>
129	<a	129	<a
130	href=""	130	href="javasript:void(0);"
131	class="discard_bt"	131	class="discard_bt"
132	@click="discardRply(cmnt)"	132	@click="discardRply(cmnt)"
133	><img src="../assets/images/discard.svg"	133	><img src="../assets/images/discard.svg"
134	/></a>	134	/></a>
135	</div>	135	</div>
136	</div>	136	</div>
137	<!-- parent -->	137	<!-- parent -->
138	<div	138	<div
139	class="child-full-width"	139	class="child-full-width"
140	v-for="(childCmnt, i) in cmnt.children"	140	v-for="(childCmnt, i) in cmnt.children"
141	:key="i"	141	:key="i"
142	>	142	>
143	<div class="full-width">	143	<div class="full-width">
144	<div class="b-user-head">	144	<div class="b-user-head">
145	<img :src="childCmnt.user.profilePic" />	145	<img :src="childCmnt.user.profilePic" />
146	<span class="head-content"	146	<span class="head-content"
147	>{{ childCmnt.user.name }}	147	>{{ childCmnt.user.name }}
148	</span>	148	</span>
149	<ul>	149	<ul>
150	<li>	150	<li>
151	<span></span	151	<span></span
152	><img src="../assets/images/u-info-icon.png" />{{	152	><img src="../assets/images/u-info-icon.png" />{{
153	childCmnt.user.karmaPoints	153	childCmnt.user.karmaPoints
154	}}pts	154	}}pts
155	</li>	155	</li>
156	<li>	156	<li>
157	<span></span	157	<span></span
158	>{{ dateGenerator(childCmnt.createdAt) }}	158	>{{ dateGenerator(childCmnt.createdAt) }}
159	</li>	159	</li>
160	</ul>	160	</ul>
161	</div>	161	</div>
162	<p>	162	<p>
163	{{ childCmnt.comment }}	163	{{ childCmnt.comment }}
164	</p>	164	</p>
165	<div class="joined_wrapper">	165	<div class="joined_wrapper">
166	<ul class="joined-info info_bc_spc">	166	<ul class="joined-info info_bc_spc">
167	<li>	167	<li>
168	<img	168	<img
169	src="../assets/images/heart.svg"	169	src="../assets/images/heart.svg"
170	v-if="childCmnt.like == false"	170	v-if="childCmnt.like == false"
171	@click="likeComment(true, childCmnt._id)"	171	@click="likeComment(true, childCmnt._id)"
172	class="cursor-pointer"	172	class="cursor-pointer"
173	/>	173	/>
174	<img	174	<img
175	src="../assets/images/purple-heart.png"	175	src="../assets/images/purple-heart.png"
176	v-if="childCmnt.like == true"	176	v-if="childCmnt.like == true"
177	@click="likeComment(false, childCmnt._id)"	177	@click="likeComment(false, childCmnt._id)"
178	class="cursor-pointer"	178	class="cursor-pointer"
179	/>	179	/>
180	</li>	180	</li>
181	<li>	181	<li>
182	<a href="">	182	<a href="javasript:void(0);">
183	{{ childCmnt.likes.length }}</a	183	{{ childCmnt.likes.length }}</a
184	>	184	>
185	</li>	185	</li>
186	</ul>	186	</ul>
187	</div>	187	</div>
188	</div>	188	</div>
189	</div>	189	</div>
190	<!-- eree -->	190	<!-- eree -->
191		191
192	<!-- comments footer -->	192	<!-- comments footer -->
193	</li>	193	</li>
194	</ul>	194	</ul>
195	</div>	195	</div>
196	<!-- bounce board body -->	196	<!-- bounce board body -->
197	<div class="comments-footer" v-if="parentInput">	197	<div class="comments-footer" v-if="parentInput">
198	<textarea v-model="comment"></textarea>	198	<textarea v-model="comment"></textarea>
199	<div class="comments-footer-wrp">	199	<div class="comments-footer-wrp">
200	<a	200	<a
201	href=""	201	href="javasript:void(0);"
202	class="add_comments_chat"	202	class="add_comments_chat"
203	@click="createComment"	203	@click="createComment"
204	><img src="../assets/images/add-comment.svg" /> Comment</a	204	><img src="../assets/images/add-comment.svg" /> Comment</a
205	>	205	>
206	</div>	206	</div>
207	</div>	207	</div>
208	<!-- comments footer -->	208	<!-- comments footer -->
209	</div>	209	</div>
210	</div>	210	</div>
211	<!-- bounceboard wrp -->	211	<!-- bounceboard wrp -->
212	<!-- chat box -->	212	<!-- chat box -->
213		213
214		214
215	<div class="single-author-comments">	215	<div class="single-author-comments">
216	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->	216	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
217	<div class="ct-l-400">	217	<div class="ct-l-400">
218	<div class="single-author-li-comments" v-if="commentExistCheck(0)">	218	<div class="single-author-li-comments" v-if="commentExistCheck(0)">
219	<div class="a-intro-comments right-corner">	219	<div class="a-intro-comments right-corner">
220	<p>	220	<p>
221	{{commentList[0].comment}}	221	{{commentList[0].comment}}
222	</p>	222	</p>
223	<ul class="rly-comment-set">	223	<ul class="rly-comment-set">
224	<!-- like/dislike -->	224	<!-- like/dislike -->
225	<li>	225	<li>
226	<img	226	<img
227	src="../assets/images/heart.svg"	227	src="../assets/images/heart.svg"
228	v-if="commentList[0].like == false"	228	v-if="commentList[0].like == false"
229	@click="likeComment(true, commentList[0]._id)"	229	@click="likeComment(true, commentList[0]._id)"
230	class="cursor-pointer"	230	class="cursor-pointer"
231	/>	231	/>
232	<img	232	<img
233	src="../assets/images/purple-heart.png"	233	src="../assets/images/purple-heart.png"
234	v-if="commentList[0].like == true"	234	v-if="commentList[0].like == true"
235	@click="likeComment(false, commentList[0]._id)"	235	@click="likeComment(false, commentList[0]._id)"
236	class="cursor-pointer"	236	class="cursor-pointer"
237	/>	237	/>
238	<a href="javascript:void(0);">{{	238	<a href="javascript:void(0);">{{
239	commentList[0].likes.length	239	commentList[0].likes.length
240	}}</a>	240	}}</a>
241	</li>	241	</li>
242	<!-- like/dislike ends -->	242	<!-- like/dislike ends -->
243	<li>	243	<li>
244	<img src="../assets/images/rply.svg" />	244	<img src="../assets/images/rply.svg" />
245	<a href="javascript:void(0);" @click="reply_cht_box(0)"	245	<a href="javascript:void(0);" @click="reply_cht_box(0)"
246	>Reply</a	246	>Reply</a
247	>	247	>
248	</li>	248	</li>
249	</ul>	249	</ul>
250	</div>	250	</div>
251	<!-- comments box -->	251	<!-- comments box -->
252	</div>	252	</div>
253	</div>	253	</div>
254	<img	254	<img
255	class="s-user-comments m-0"	255	class="s-user-comments m-0"
256	:src="currentSlideData.payload.metaData.authorImage"	256	:src="currentSlideData.payload.metaData.authorImage"
257	/>	257	/>
258	<div class="comments-a-wrp ct-width">	258	<div class="comments-a-wrp ct-width">
259	<div class="single-author-li-comments" v-if="commentExistCheck(1)">	259	<div class="single-author-li-comments" v-if="commentExistCheck(1)">
260	<div class="a-intro-comments">	260	<div class="a-intro-comments">
261	<p>	261	<p>
262	{{commentList[1].comment}}	262	{{commentList[1].comment}}
263	</p>	263	</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[1].like == false"	269	v-if="commentList[1].like == false"
270	@click="likeComment(true, commentList[1]._id)"	270	@click="likeComment(true, commentList[1]._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[1].like == true"	275	v-if="commentList[1].like == true"
276	@click="likeComment(false, commentList[1]._id)"	276	@click="likeComment(false, commentList[1]._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[1].likes.length	280	commentList[1].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(1)"	286	<a href="javascript:void(0);" @click="reply_cht_box(1)"
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(2)">	295	<div class="single-author-li-comments" v-if="commentExistCheck(2)">
296	<div class="a-intro-comments">	296	<div class="a-intro-comments">
297	<p>	297	<p>
298	{{commentList[2].comment}}	298	{{commentList[2].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[2].like == false"	305	v-if="commentList[2].like == false"
306	@click="likeComment(true, commentList[2]._id)"	306	@click="likeComment(true, commentList[2]._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[2].like == true"	311	v-if="commentList[2].like == true"
312	@click="likeComment(false, commentList[2]._id)"	312	@click="likeComment(false, commentList[2]._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[2].likes.length	316	commentList[2].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(2)"	322	<a href="javascript:void(0);" @click="reply_cht_box(2)"
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	<!-- coment box 3 -->	330	<!-- coment box 3 -->
331	<!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)">	331	<!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)">
332	<div class="a-intro-comments">	332	<div class="a-intro-comments">
333	<p>	333	<p>
334	{{commentList[3].comment}}	334	{{commentList[3].comment}}
335	</p>	335	</p>
336	<ul class="rly-comment-set">	336	<ul class="rly-comment-set">
337	<li>	337	<li>
338	<img	338	<img
339	src="../assets/images/heart.svg"	339	src="../assets/images/heart.svg"
340	v-if="commentList[3].like == false"	340	v-if="commentList[3].like == false"
341	@click="likeComment(true, commentList[2]._id)"	341	@click="likeComment(true, commentList[2]._id)"
342	class="cursor-pointer"	342	class="cursor-pointer"
343	/>	343	/>
344	<img	344	<img
345	src="../assets/images/purple-heart.png"	345	src="../assets/images/purple-heart.png"
346	v-if="commentList[3].like == true"	346	v-if="commentList[3].like == true"
347	@click="likeComment(false, commentList[3]._id)"	347	@click="likeComment(false, commentList[3]._id)"
348	class="cursor-pointer"	348	class="cursor-pointer"
349	/>	349	/>
350	<a href="javascript:void(0);">{{	350	<a href="javascript:void(0);">{{
351	commentList[3].likes.length	351	commentList[3].likes.length
352	}}</a>	352	}}</a>
353	</li>	353	</li>
354	<li>	354	<li>
355	<img src="../assets/images/rply.svg" />	355	<img src="../assets/images/rply.svg" />
356	<a href="javascript:void(0);" @click="reply_cht_box(3)"	356	<a href="javascript:void(0);" @click="reply_cht_box(3)"
357	>Reply</a	357	>Reply</a
358	>	358	>
359	</li>	359	</li>
360	</ul>	360	</ul>
361	</div>	361	</div>
362	</div> -->	362	</div> -->
363	<!-- coment box 3 -->	363	<!-- coment box 3 -->
364		364
365		365
366	<!-- single author comments -->	366	<!-- single author comments -->
367	<!-- <div class="a-intro-comments custom-selected-author-style">	367	<!-- <div class="a-intro-comments custom-selected-author-style">
368	<img src="../assets/images/org-rect.svg" class="rect" />	368	<img src="../assets/images/org-rect.svg" class="rect" />
369	<div class="top-wrp">	369	<div class="top-wrp">
370	Product Insight <a href="javascript:void(0);"><img src="../assets/images/org-link.svg" /></a>	370	Product Insight <a href="javascript:void(0);"><img src="../assets/images/org-link.svg" /></a>
371	</div>	371	</div>
372	<div class="top-head">Automate your customer support for better engagement</div>	372	<div class="top-head">Automate your customer support for better engagement</div>
373	<p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p>	373	<p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p>
374		374
375		375
376	</div> -->	376	</div> -->
377	<!-- comments box -->	377	<!-- comments box -->
378	</div>	378	</div>
379	</div>	379	</div>
380	<!-- single author comments -->	380	<!-- single author comments -->
381	<div class="footer-nav">	381	<div class="footer-nav">
382	<div class="footer-top white-bg">	382	<div class="footer-top white-bg">
383	<div class="row">	383	<div class="row">
384	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	384	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
385	<div class="row h-100p">	385	<div class="row h-100p">
386	<div	386	<div
387	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	387	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
388	>	388	>
389	<div class="ft-comments-group testi-photos-ct">	389	<div class="ft-comments-group testi-photos-ct">
390	<div class="c-with-photos">	390	<div class="c-with-photos">
391	<span class="count-comments"	391	<span class="count-comments"
392	>{{ getLastcomment("count", commentList) }}+	392	>{{ getLastcomment("count", commentList) }}+
393	Comments</span	393	Comments</span
394	><!-- count commets -->	394	><!-- count commets -->
395	<ul class="comments-photos">	395	<ul class="comments-photos">
396	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>	396	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>
397	<li><img src="../assets/images/c-photo-2.png" /></li>	397	<li><img src="../assets/images/c-photo-2.png" /></li>
398	<li><img src="../assets/images/c-photo-3.png" /></li> -->	398	<li><img src="../assets/images/c-photo-3.png" /></li> -->
399	</ul>	399	</ul>
400	<!-- comment photos -->	400	<!-- comment photos -->
401	</div>	401	</div>
402	<div class="comments-detail all-c-space">	402	<div class="comments-detail all-c-space">
403	<span	403	<span
404	>{{ getLastcomment("name", commentList) }}	404	>{{ getLastcomment("name", commentList) }}
405	<a href="javascript:void(0);" @click="open_ct_box"	405	<a href="javascript:void(0);" @click="open_ct_box"
406	>View All</a	406	>View All</a
407	></span	407	></span
408	>	408	>
409	<p>	409	<p>
410	<!-- I wonder what the difference between “Dunzo Assistant”	410	<!-- I wonder what the difference between “Dunzo Assistant”
411	and “Pickup and Drop... -->	411	and “Pickup and Drop... -->
412	{{ getLastcomment("msg", commentList) }}	412	{{ getLastcomment("msg", commentList) }}
413	</p>	413	</p>
414	</div>	414	</div>
415	<!-- comments detail -->	415	<!-- comments detail -->
416	</div>	416	</div>
417	<!-- comments Group -->	417	<!-- comments Group -->
418	</div>	418	</div>
419	</div>	419	</div>
420	</div>	420	</div>
421	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	421	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
422	<div class="comment-frm no-c-frm">	422	<div class="comment-frm no-c-frm">
423	<div class="row">	423	<div class="row">
424	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	424	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
425	<div class="form-group frm-wdth addfrm-spc">	425	<div class="form-group frm-wdth addfrm-spc">
426	<input	426	<input
427	type="text"	427	type="text"
428	class="form-control"	428	class="form-control"
429	placeholder="Something on your mind?"	429	placeholder="Something on your mind?"
430	id="open_ct_box"	430	id="open_ct_box"
431	v-model="comment"	431	v-model="comment"
432	/>	432	/>
433	</div>	433	</div>
434	</div>	434	</div>
435	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	435	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
436	<a	436	<a
437	href="javascript:void(0);"	437	href="javascript:void(0);"
438	@click="createComment"	438	@click="createComment"
439	class="add-comment"	439	class="add-comment"
440	><img src="../assets/images/add-comment.svg" />	440	><img src="../assets/images/add-comment.svg" />
441	Comment</a	441	Comment</a
442	>	442	>
443	</div>	443	</div>
444	</div>	444	</div>
445	<!-- comment from -->	445	<!-- comment from -->
446	</div>	446	</div>
447	</div>	447	</div>
448	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	448	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
449	<ul class="top-intro-bt">	449	<ul class="top-intro-bt">
450	<li>	450	<li>
451	<a href="javascript:void(0);" @click="goBack"	451	<a href="javascript:void(0);" @click="goBack"
452	><img src="../assets/images/skip-prev.svg" /> Prev</a	452	><img src="../assets/images/skip-prev.svg" /> Prev</a
453	>	453	>
454	</li>	454	</li>
455	<li>	455	<li>
456	<a href="javascript:void(0);" @click="goNext"	456	<a href="javascript:void(0);" @click="goNext"
457	><img src="../assets/images/skip-next.svg" /> Skip to next	457	><img src="../assets/images/skip-next.svg" /> Skip to next
458	slide</a	458	slide</a
459	>	459	>
460	</li>	460	</li>
461	</ul>	461	</ul>
462	</div>	462	</div>
463	<!-- buttons list -->	463	<!-- buttons list -->
464	</div>	464	</div>
465	</div>	465	</div>
466	<!-- footer top -->	466	<!-- footer top -->
467	<div class="footer-bottom">	467	<div class="footer-bottom">
468	<ul>	468	<ul>
469	<li class="active"></li>	469	<li class="active"></li>
470	<li></li>	470	<li></li>
471	</ul>	471	</ul>
472	</div>	472	</div>
473	<!-- footer top -->	473	<!-- footer top -->
474	</div>	474	</div>
475	<!-- footer -->	475	<!-- footer -->
476	</div>	476	</div>
477	<!-- body wrapper -->	477	<!-- body wrapper -->
478	</div>	478	</div>
479	<!-- main wrapper -->	479	<!-- main wrapper -->
480	</main>	480	</main>
481	</template>	481	</template>
482		482
483	<script>	483	<script>
484	import Vue from "vue";	484	import Vue from "vue";
485	import router from "../router";	485	import router from "../router";
486	import axios from "axios";	486	import axios from "axios";
487	import moment from 'moment';	487	import moment from 'moment';
488	import Header from "./Header";	488	import Header from "./Header";
489		489
490	export default {	490	export default {
491	components: {	491	components: {
492	Header: Header,	492	Header: Header,
493	},	493	},
494	name: "noscreenshotSingleautho",	494	name: "noscreenshotSingleautho",
495		495
496	data() {	496	data() {
497	return {	497	return {
498	allSlide: [],	498	allSlide: [],
499	currentSlideIndex: null,	499	currentSlideIndex: null,
500	currentSlideData: null,	500	currentSlideData: null,
501	//	501	//
502	usertoken: null,	502	usertoken: null,
503	commentList: [],	503	commentList: [],
504	comment: null,	504	comment: null,
505	parentInput:true,	505	parentInput:true,
506	};	506	};
507	},	507	},
508	mounted() {	508	mounted() {
509	var allSlideData = localStorage.getItem(	509	var allSlideData = localStorage.getItem(
510	"spotlight_slide" + this.$route.params.caseStudyId	510	"spotlight_slide" + this.$route.params.caseStudyId
511	);	511	);
512	if (allSlideData) {	512	if (allSlideData) {
513	this.allSlide = JSON.parse(allSlideData);	513	this.allSlide = JSON.parse(allSlideData);
514	this.getCurrentSlideData();	514	this.getCurrentSlideData();
515	}	515	}
516	var userdata = localStorage.getItem("spotlight_usertoken");	516	var userdata = localStorage.getItem("spotlight_usertoken");
517	if (userdata) {	517	if (userdata) {
518	userdata = JSON.parse(userdata);	518	userdata = JSON.parse(userdata);
519	this.usertoken = userdata.token;	519	this.usertoken = userdata.token;
520	this.getComment();	520	this.getComment();
521	}	521	}
522	},	522	},
523	methods: {	523	methods: {
524	getCurrentSlideData() {	524	getCurrentSlideData() {
525	var i = this.allSlide.findIndex(	525	var i = this.allSlide.findIndex(
526	(slide_) => slide_.slideId == this.$route.params.slideId	526	(slide_) => slide_.slideId == this.$route.params.slideId
527	);	527	);
528	this.currentSlideIndex = i;	528	this.currentSlideIndex = i;
529	this.currentSlideData = this.allSlide[i];	529	this.currentSlideData = this.allSlide[i];
530	console.log("currentSlideData", this.currentSlideData);	530	console.log("currentSlideData", this.currentSlideData);
531	},	531	},
532	goNext() {	532	goNext() {
533	this.currentSlideIndex++;	533	this.currentSlideIndex++;
534	this.$router.push({	534	this.$router.push({
535	name: this.allSlide[this.currentSlideIndex].ur,	535	name: this.allSlide[this.currentSlideIndex].ur,
536	params: {	536	params: {
537	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	537	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
538	slideId: this.allSlide[this.currentSlideIndex].slideId,	538	slideId: this.allSlide[this.currentSlideIndex].slideId,
539	},	539	},
540	});	540	});
541	},	541	},
542	goBack() {	542	goBack() {
543	this.currentSlideIndex--;	543	this.currentSlideIndex--;
544	this.$router.push({	544	this.$router.push({
545	name: this.allSlide[this.currentSlideIndex].ur,	545	name: this.allSlide[this.currentSlideIndex].ur,
546	params: {	546	params: {
547	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	547	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
548	slideId: this.allSlide[this.currentSlideIndex].slideId,	548	slideId: this.allSlide[this.currentSlideIndex].slideId,
549	},	549	},
550	});	550	});
551	},	551	},
552	createComment() {	552	createComment() {
553	console.log("===", this.comment);	553	console.log("===", this.comment);
554	var obj = {	554	var obj = {
555	caseStudyId: this.currentSlideData.caseStudyId,	555	caseStudyId: this.currentSlideData.caseStudyId,
556	slideId: this.currentSlideData.slideId,	556	slideId: this.currentSlideData.slideId,
557	comment: this.comment,	557	comment: this.comment,
558		558
559	};	559	};
560	axios	560	axios
561	.post("/bounceBoard/comment", obj, {	561	.post("/bounceBoard/comment", obj, {
562	headers: {	562	headers: {
563	Authorization: "Bearer " + this.usertoken,	563	Authorization: "Bearer " + this.usertoken,
564	},	564	},
565	})	565	})
566	.then((response) => {	566	.then((response) => {
567	this.comment = null;	567	this.comment = null;
568	this.getComment();	568	this.getComment();
569	console.log(response);	569	console.log(response);
570	})	570	})
571	.catch((error) => {	571	.catch((error) => {
572	if (error.response) {	572	if (error.response) {
573	this.$toaster.error(error.response.data.message);	573	this.$toaster.error(error.response.data.message);
574	}	574	}
575	});	575	});
576	},	576	},
577	createChildComment(cmnt) {	577	createChildComment(cmnt) {
578	console.log(cmnt,"===", this.comment);	578	console.log(cmnt,"===", this.comment);
579	var obj = {	579	var obj = {
580	caseStudyId: this.currentSlideData.caseStudyId,	580	caseStudyId: this.currentSlideData.caseStudyId,
581	slideId: this.currentSlideData.slideId,	581	slideId: this.currentSlideData.slideId,
582	comment: this.comment,	582	comment: this.comment,
583	parentId: cmnt._id,	583	parentId: cmnt._id,
584		584
585	};	585	};
586	axios	586	axios
587	.post("/bounceBoard/comment", obj, {	587	.post("/bounceBoard/comment", obj, {
588	headers: {	588	headers: {
589	Authorization: "Bearer " + this.usertoken,	589	Authorization: "Bearer " + this.usertoken,
590	},	590	},
591	})	591	})
592	.then((response) => {	592	.then((response) => {
593	this.comment = null;	593	this.comment = null;
594	this.discardRply(cmnt);	594	this.discardRply(cmnt);
595	this.getComment();	595	this.getComment();
596	console.log(response);	596	console.log(response);
597	})	597	})
598	.catch((error) => {	598	.catch((error) => {
599	if (error.response) {	599	if (error.response) {
600	this.$toaster.error(error.response.data.message);	600	this.$toaster.error(error.response.data.message);
601	}	601	}
602	});	602	});
603	},	603	},
604	getComment() {	604	getComment() {
605	axios	605	axios
606	.get(	606	.get(
607	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	607	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
608	{	608	{
609	headers: {	609	headers: {
610	Authorization: "Bearer " + this.usertoken,	610	Authorization: "Bearer " + this.usertoken,
611	},	611	},
612	}	612	}
613	)	613	)
614	.then((response) => {	614	.then((response) => {
615	console.log(response.data);	615	console.log(response.data);
616	var comments = [];	616	var comments = [];
617	var keys = Object.keys(response.data.data)	617	var keys = Object.keys(response.data.data)
618	response.data.data	618	response.data.data
619	keys.forEach((key_) => {	619	keys.forEach((key_) => {
620	comments.push(response.data.data[key_])	620	comments.push(response.data.data[key_])
621	});	621	});
622	comments.forEach((coment_)=>{	622	comments.forEach((coment_)=>{
623	coment_.childInput = false;	623	coment_.childInput = false;
624	});	624	});
625	console.log("comments",comments)	625	console.log("comments",comments)
626	this.commentList = comments;	626	this.commentList = comments;
627	})	627	})
628	.catch((error) => console.log(error));	628	.catch((error) => console.log(error));
629	},	629	},
630	dateGenerator(curreDate){	630	dateGenerator(curreDate){
631	var todayDate = moment(new Date(), "DD.MM.YYYY");	631	var todayDate = moment(new Date(), "DD.MM.YYYY");
632	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	632	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
633	var result = todayDate.diff(endDate, 'days');	633	var result = todayDate.diff(endDate, 'days');
634	return result;	634	return result;
635	},	635	},
636	goToLogin() {	636	goToLogin() {
637	this.$router.push("/login");	637	this.$router.push("/login");
638	},	638	},
639	goToSignUp() {	639	goToSignUp() {
640	this.$router.push("/");	640	this.$router.push("/");
641	},	641	},
642	chtbox_close() {	642	chtbox_close() {
643	$("#cht_box_close").removeClass("cht_close");	643	$("#cht_box_close").removeClass("cht_close");
644	$("#open_ct_box, .c_hide").show();	644	$("#open_ct_box, .c_hide").show();
645	$(".footer-top").addClass("white-bg");	645	$(".footer-top").addClass("white-bg");
646	},	646	},
647	open_ct_box() {	647	open_ct_box() {
648	$("#cht_box_close").addClass("cht_close");	648	$("#cht_box_close").addClass("cht_close");
649	$("#open_ct_box, .c_hide").hide();	649	$("#open_ct_box, .c_hide").hide();
650	$(".footer-top").removeClass("white-bg");	650	$(".footer-top").removeClass("white-bg");
651	},	651	},
652	eachRply(cmnt) {	652	eachRply(cmnt) {
653	cmnt.childInput = true;	653	cmnt.childInput = true;
654	this.parentInput = false;	654	this.parentInput = false;
655	this.comment = null;	655	this.comment = null;
656	setTimeout(() => {	656	setTimeout(() => {
657	document.getElementById("childInput").focus();	657	document.getElementById("childInput").focus();
658	}, 100);	658	}, 100);
659	},	659	},
660	discardRply(cmnt) {	660	discardRply(cmnt) {
661	cmnt.childInput = false;	661	cmnt.childInput = false;
662	this.parentInput = true;	662	this.parentInput = true;
663	this.comment = null;	663	this.comment = null;
664	},	664	},
665	reply_cht_box(i) {	665	reply_cht_box(i) {
666	console.log(this.commentList, "cmnt");	666	console.log(this.commentList, "cmnt");
667	$("#cht_box_close").addClass("cht_close");	667	$("#cht_box_close").addClass("cht_close");
668	$("#open_ct_box, .c_hide").hide();	668	$("#open_ct_box, .c_hide").hide();
669	$(".footer-top").removeClass("white-bg");	669	$(".footer-top").removeClass("white-bg");
670	this.commentList[i].childInput = true;	670	this.commentList[i].childInput = true;
671	this.parentInput = false;	671	this.parentInput = false;
672	this.comment = null;	672	this.comment = null;
673	setTimeout(() => {	673	setTimeout(() => {
674	document.getElementById("childInput").focus();	674	document.getElementById("childInput").focus();
675	}, 100);	675	}, 100);
676	},	676	},
677	likeComment(status, id) {	677	likeComment(status, id) {
678	console.log("===", this.comment);	678	console.log("===", this.comment);
679	var obj = {	679	var obj = {
680	commentId: id,	680	commentId: id,
681	like: status,	681	like: status,
682	};	682	};
683	axios	683	axios
684	.post("/bounceBoard/like", obj, {	684	.post("/bounceBoard/like", obj, {
685	headers: {	685	headers: {
686	Authorization: "Bearer " + this.usertoken,	686	Authorization: "Bearer " + this.usertoken,
687	},	687	},
688	})	688	})
689	.then((response) => {	689	.then((response) => {
690	this.getComment();	690	this.getComment();
691	console.log(response);	691	console.log(response);
692	})	692	})
693	.catch((error) => {	693	.catch((error) => {
694	if (error.response) {	694	if (error.response) {
695	this.$toaster.error(error.response.data.message);	695	this.$toaster.error(error.response.data.message);
696	}	696	}
697	});	697	});
698	},	698	},
699	getLastcomment(flag, commentArray) {	699	getLastcomment(flag, commentArray) {
700	var finalComment = null;	700	var finalComment = null;
701	var totalMessage = 0;	701	var totalMessage = 0;
702	var name = null;	702	var name = null;
703	commentArray.forEach((comment_) => {	703	commentArray.forEach((comment_) => {
704	if (comment_.comment != null) {	704	if (comment_.comment != null) {
705	name = comment_.user.name;	705	name = comment_.user.name;
706	finalComment = comment_.comment;	706	finalComment = comment_.comment;
707	totalMessage++;	707	totalMessage++;
708	}	708	}
709	});	709	});
710	if (flag == "count") {	710	if (flag == "count") {
711	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	711	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
712	} else if (flag =="name") {	712	} else if (flag =="name") {
713	return (name = name);	713	return (name = name);
714	} else {	714	} else {
715	return finalComment;	715	return finalComment;
716	}	716	}
717	},	717	},
718	commentExistCheck(i) {	718	commentExistCheck(i) {
719	console.log(this.commentList[i].comment);	719	console.log(this.commentList[i].comment);
720	var returnValue = false;	720	var returnValue = false;
721	if (this.commentList[i].comment) {	721	if (this.commentList[i].comment) {
722	returnValue = true;	722	returnValue = true;
723	}	723	}
724	return returnValue;	724	return returnValue;
725	},	725	},
726	},	726	},
727	};	727	};
728	//	728	//
729		729
730	</script>	730	</script>
731		731

src/components/Profile.vue

Diff comments View file @1f12ffc

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<!-- profile -->	3	<!-- profile -->
4	<div class="popup-wrp" style="display: none">	4	<div class="popup-wrp" style="display: none">
5	<div class="overlay" @click="hideDialog"></div>	5	<div class="overlay" @click="hideDialog"></div>
6	<div class="popup-set" id="add-profile" style="display: none">	6	<div class="popup-set" id="add-profile" style="display: none">
7	<div class="popup-header">	7	<div class="popup-header">
8	<div class="user-photo common_color">	8	<div class="user-photo common_color">
9	<img :src="userData.profilePic" />	9	<img :src="userData.profilePic" />
10	</div>	10	</div>
11	<!-- header user -->	11	<!-- header user -->
12		12
13	<ul>	13	<ul>
14	<li>	14	<li>
15	<a href=""	15	<a href="javasript:void(0);"
16	><img src="../assets/images/replace.svg" /><span	16	><img src="../assets/images/replace.svg" /><span
17	>Replace Avatar</span	17	>Replace Avatar</span
18	></a	18	></a
19	>	19	>
20	</li>	20	</li>
21	<li>	21	<li>
22	<a href="" @click="getRandomAvatar()"	22	<a href="javasript:void(0);" @click="getRandomAvatar()"
23	><img src="../assets/images/randomise.svg" /><span	23	><img src="../assets/images/randomise.svg" /><span
24	>Randomise Avatar</span	24	>Randomise Avatar</span
25	></a	25	></a
26	>	26	>
27	</li>	27	</li>
28	</ul>	28	</ul>
29	</div>	29	</div>
30	<!-- header -->	30	<!-- header -->
31	<div class="popup-body">	31	<div class="popup-body">
32	<form class="popup-forms">	32	<form class="popup-forms">
33	<div class="row">	33	<div class="row">
34	<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">	34	<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
35	<div class="form-group floating-label">	35	<div class="form-group floating-label">
36	<input	36	<input
37	type="text"	37	type="text"
38	class="form-control"	38	class="form-control"
39	v-model="userData.firstName"	39	v-model="userData.firstName"
40	placeholder=" "	40	placeholder=" "
41	id="fname"	41	id="fname"
42	/>	42	/>
43	<label for="fname">First Name</label>	43	<label for="fname">First Name</label>
44	</div>	44	</div>
45	</div>	45	</div>
46	<!-- input -->	46	<!-- input -->
47	<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">	47	<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
48	<div class="form-group floating-label">	48	<div class="form-group floating-label">
49	<input	49	<input
50	type="text"	50	type="text"
51	class="form-control"	51	class="form-control"
52	value=""	52	value=""
53	placeholder=" "	53	placeholder=" "
54	id="lname"	54	id="lname"
55	v-model="userData.lastName"	55	v-model="userData.lastName"
56	/>	56	/>
57	<label for="lname" class="lname">Last Name</label>	57	<label for="lname" class="lname">Last Name</label>
58	</div>	58	</div>
59	</div>	59	</div>
60	<!-- input -->	60	<!-- input -->
61	<div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">	61	<div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
62	<div class="form-group floating-label">	62	<div class="form-group floating-label">
63	<input	63	<input
64	type="text"	64	type="text"
65	class="form-control"	65	class="form-control"
66	value=""	66	value=""
67	v-model="userData.designation"	67	v-model="userData.designation"
68	placeholder=" "	68	placeholder=" "
69	id="designation"	69	id="designation"
70	/>	70	/>
71	<label for="designation">Designation</label>	71	<label for="designation">Designation</label>
72	</div>	72	</div>
73	</div>	73	</div>
74	<!-- input -->	74	<!-- input -->
75	<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">	75	<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
76	<div class="form-group floating-label">	76	<div class="form-group floating-label">
77	<input	77	<input
78	type="text"	78	type="text"
79	class="form-control"	79	class="form-control"
80	v-model="userData.organisation"	80	v-model="userData.organisation"
81	id="company"	81	id="company"
82	placeholder=" "	82	placeholder=" "
83	/>	83	/>
84	<label for="company">Company</label>	84	<label for="company">Company</label>
85	</div>	85	</div>
86	</div>	86	</div>
87	<!-- input -->	87	<!-- input -->
88	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">	88	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
89	<div class="form-group floating-label">	89	<div class="form-group floating-label">
90	<textarea	90	<textarea
91	type="text"	91	type="text"
92	class="form-control"	92	class="form-control"
93	value=""	93	value=""
94	v-model="userData.bio"	94	v-model="userData.bio"
95	id="yourself"	95	id="yourself"
96	placeholder=" "	96	placeholder=" "
97	></textarea>	97	></textarea>
98	<label for="yourself"	98	<label for="yourself"
99	>Tell others a little about yourself</label	99	>Tell others a little about yourself</label
100	>	100	>
101	</div>	101	</div>
102	</div>	102	</div>
103	<!-- input -->	103	<!-- input -->
104	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">	104	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
105	<p class="things">Three things that you talk more about</p>	105	<p class="things">Three things that you talk more about</p>
106		106
107	<ul class="interests">	107	<ul class="interests">
108	<li v-for="(interest, i) in userData.interests" :key="i">	108	<li v-for="(interest, i) in userData.interests" :key="i">
109	<span>{{ interest }}</span>	109	<span>{{ interest }}</span>
110	<a	110	<a
111	href="javascript:void(0);"	111	href="javascript:void(0);"
112	@click="removeInterest(i)"	112	@click="removeInterest(i)"
113	class="cat-minus"	113	class="cat-minus"
114	><img src="../assets/images/minus.svg"	114	><img src="../assets/images/minus.svg"
115	/></a>	115	/></a>
116	</li>	116	</li>
117	<li>	117	<li>
118	<input	118	<input
119	class=""	119	class=""
120	placeholder="Add interest"	120	placeholder="Add interest"
121	v-on:keyup.enter="addInterest"	121	v-on:keyup.enter="addInterest"
122	v-model="interestName"	122	v-model="interestName"
123	/>	123	/>
124	<a href="javascript:void(0);" @click="addInterest()"	124	<a href="javascript:void(0);" @click="addInterest()"
125	><img src="../assets/images/plus-circle.svg"	125	><img src="../assets/images/plus-circle.svg"
126	/></a>	126	/></a>
127	</li>	127	</li>
128	</ul>	128	</ul>
129	</div>	129	</div>
130	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">	130	<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
131	<p class="things">Choose Background color</p>	131	<p class="things">Choose Background color</p>
132		132
133	<ul class="colors">	133	<ul class="colors">
134	<li>	134	<li>
135	<a	135	<a
136	href="javascript:void(0);"	136	href="javascript:void(0);"
137	id="#C4C4C4"	137	id="#C4C4C4"
138	class="silver"	138	class="silver"
139	@click="changeColor('#C4C4C4')"	139	@click="changeColor('#C4C4C4')"
140	></a>	140	></a>
141	</li>	141	</li>
142	<li>	142	<li>
143	<a	143	<a
144	href="javascript:void(0);"	144	href="javascript:void(0);"
145	id="#FFF6D7"	145	id="#FFF6D7"
146	class="milk-punch"	146	class="milk-punch"
147	@click="changeColor('#FFF6D7')"	147	@click="changeColor('#FFF6D7')"
148	></a>	148	></a>
149	</li>	149	</li>
150	<li>	150	<li>
151	<a	151	<a
152	href="javascript:void(0);"	152	href="javascript:void(0);"
153	id="#BDDBFF"	153	id="#BDDBFF"
154	class="french-pass"	154	class="french-pass"
155	@click="changeColor('#BDDBFF')"	155	@click="changeColor('#BDDBFF')"
156	></a>	156	></a>
157	</li>	157	</li>
158	<li>	158	<li>
159	<a	159	<a
160	href="javascript:void(0);"	160	href="javascript:void(0);"
161	id="#C0FAFE"	161	id="#C0FAFE"
162	class="cyan-french-pass"	162	class="cyan-french-pass"
163	@click="changeColor('#C0FAFE')"	163	@click="changeColor('#C0FAFE')"
164	></a>	164	></a>
165	</li>	165	</li>
166	<li>	166	<li>
167	<a	167	<a
168	href="javascript:void(0);"	168	href="javascript:void(0);"
169	id="#FFDBDC"	169	id="#FFDBDC"
170	class="cosmos"	170	class="cosmos"
171	@click="changeColor('#FFDBDC')"	171	@click="changeColor('#FFDBDC')"
172	></a>	172	></a>
173	</li>	173	</li>
174	<li>	174	<li>
175	<a	175	<a
176	href="javascript:void(0);"	176	href="javascript:void(0);"
177	id="#FEE6AC"	177	id="#FEE6AC"
178	class="cape-Honey"	178	class="cape-Honey"
179	@click="changeColor('#FEE6AC')"	179	@click="changeColor('#FEE6AC')"
180	></a>	180	></a>
181	</li>	181	</li>
182	<li>	182	<li>
183	<a	183	<a
184	href="javascript:void(0);"	184	href="javascript:void(0);"
185	id="#E5DFF0"	185	id="#E5DFF0"
186	class="snuff"	186	class="snuff"
187	@click="changeColor('#E5DFF0')"	187	@click="changeColor('#E5DFF0')"
188	></a>	188	></a>
189	</li>	189	</li>
190	<li>	190	<li>
191	<a	191	<a
192	href="javascript:void(0);"	192	href="javascript:void(0);"
193	id="#DFE7EF"	193	id="#DFE7EF"
194	class="catskillWhite"	194	class="catskillWhite"
195	@click="changeColor('#DFE7EF')"	195	@click="changeColor('#DFE7EF')"
196	></a>	196	></a>
197	</li>	197	</li>
198	<li>	198	<li>
199	<a	199	<a
200	href="javascript:void(0);"	200	href="javascript:void(0);"
201	id="#FFF"	201	id="#FFF"
202	class="white"	202	class="white"
203	@click="changeColor('#FFF')"	203	@click="changeColor('#FFF')"
204	></a>	204	></a>
205	</li>	205	</li>
206	</ul>	206	</ul>
207	</div>	207	</div>
208	<div class="col-lg-12 mt-50">	208	<div class="col-lg-12 mt-50">
209	<p class="notifications">	209	<p class="notifications">
210	Recieve notifications when you recieve a comment/ Upvote	210	Recieve notifications when you recieve a comment/ Upvote
211	</p>	211	</p>
212	<div class="switch-bt-wrp">	212	<div class="switch-bt-wrp">
213	<label class="switch-btn">	213	<label class="switch-btn">
214	<input type="checkbox" class="toggle-btn" />	214	<input type="checkbox" class="toggle-btn" />
215	<span class="rounded-toggle"></span>	215	<span class="rounded-toggle"></span>
216	</label>	216	</label>
217	<span class="onoff">on/off</span>	217	<span class="onoff">on/off</span>
218	</div>	218	</div>
219	</div>	219	</div>
220	<div class="col-lg-12">	220	<div class="col-lg-12">
221	<p class="add-socail-ch">	221	<p class="add-socail-ch">
222	Add your social Channels <span></span>	222	Add your social Channels <span></span>
223	</p>	223	</p>
224	</div>	224	</div>
225		225
226	<div	226	<div
227	class="row"	227	class="row"
228	style="width: 100%"	228	style="width: 100%"
229	v-for="(social, i) in selectedSocialLink"	229	v-for="(social, i) in selectedSocialLink"
230	:key="i"	230	:key="i"
231	>	231	>
232	<div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">	232	<div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
233	<div class="form-group floating-label">	233	<div class="form-group floating-label">
234	<select class="form-group">	234	<select class="form-group">
235	<option value="Linkedin">{{ social.displayName }}</option>	235	<option value="Linkedin">{{ social.displayName }}</option>
236	</select>	236	</select>
237	<span class="select-arrow"	237	<span class="select-arrow"
238	><img src="../assets/images/chevron-down.svg"	238	><img src="../assets/images/chevron-down.svg"
239	/></span>	239	/></span>
240	</div>	240	</div>
241	</div>	241	</div>
242	<!-- input -->	242	<!-- input -->
243	<div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">	243	<div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
244	<div class="form-group floating-label">	244	<div class="form-group floating-label">
245	<input	245	<input
246	type="text"	246	type="text"
247	class="form-control"	247	class="form-control"
248	value=""	248	value=""
249	placeholder="Paste your profile URL here"	249	placeholder="Paste your profile URL here"
250	id=""	250	id=""
251	v-model="social.fieldValue"	251	v-model="social.fieldValue"
252	/>	252	/>
253	</div>	253	</div>
254	</div>	254	</div>
255	<div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">	255	<div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
256	<ul class="interests">	256	<ul class="interests">
257	<li>	257	<li>
258	<a	258	<a
259	@click="removeSocialLink(i)"	259	@click="removeSocialLink(i)"
260	href="javascript:void(0);"	260	href="javascript:void(0);"
261	class="cat-minus"	261	class="cat-minus"
262	><img src="../assets/images/minus.svg"	262	><img src="../assets/images/minus.svg"
263	/></a>	263	/></a>
264	</li>	264	</li>
265	</ul>	265	</ul>
266	</div>	266	</div>
267	</div>	267	</div>
268	<!-- input -->	268	<!-- input -->
269		269
270	<!-- input -->	270	<!-- input -->
271	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">	271	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
272	<div class="form-group floating-label">	272	<div class="form-group floating-label">
273	<select	273	<select
274	class="form-group"	274	class="form-group"
275	v-model="currentLink"	275	v-model="currentLink"
276	v-on:change="addSocialLink(currentLink)"	276	v-on:change="addSocialLink(currentLink)"
277	>	277	>
278	<option value="null">Add another</option>	278	<option value="null">Add another</option>
279	<option	279	<option
280	v-for="(social, i) in socialLink"	280	v-for="(social, i) in socialLink"
281	:key="i"	281	:key="i"
282	:value="social.fieldName"	282	:value="social.fieldName"
283	>	283	>
284	{{ social.displayName }}	284	{{ social.displayName }}
285	</option>	285	</option>
286	</select>	286	</select>
287	<span class="select-arrow"	287	<span class="select-arrow"
288	><img src="../assets/images/chevron-down.svg"	288	><img src="../assets/images/chevron-down.svg"
289	/></span>	289	/></span>
290	</div>	290	</div>
291	</div>	291	</div>
292	<!-- input -->	292	<!-- input -->
293	</div>	293	</div>
294	<a href="javascript:void(0);" @click="saveProfile" class="next-bt"	294	<a href="javascript:void(0);" @click="saveProfile" class="next-bt"
295	>Save</a	295	>Save</a
296	>	296	>
297	</form>	297	</form>
298	</div>	298	</div>
299	<div class="clearfix"></div>	299	<div class="clearfix"></div>
300	</div>	300	</div>
301	<!-- add profile -->	301	<!-- add profile -->
302	</div>	302	</div>
303	<!-- profile -->	303	<!-- profile -->
304	<div class="container-fluid inner-wrp">	304	<div class="container-fluid inner-wrp">
305	<nav class="navbar navbar-expand-sm spotLight-nav">	305	<nav class="navbar navbar-expand-sm spotLight-nav">
306	<a class="navbar-brand" href=""	306	<a class="navbar-brand" href="javasript:void(0);"
307	><img src="../assets/images/logo.png"	307	><img src="../assets/images/logo.png"
308	/></a>	308	/></a>
309	<button	309	<button
310	class="navbar-toggler"	310	class="navbar-toggler"
311	type="button"	311	type="button"
312	data-toggle="collapse"	312	data-toggle="collapse"
313	data-target="#navbarsExample03"	313	data-target="#navbarsExample03"
314	aria-controls="navbarsExample03"	314	aria-controls="navbarsExample03"
315	aria-expanded="false"	315	aria-expanded="false"
316	aria-label="Toggle navigation"	316	aria-label="Toggle navigation"
317	>	317	>
318	<span class="navbar-toggler-icon"></span>	318	<span class="navbar-toggler-icon"></span>
319	<span class="navbar-toggler-icon"></span>	319	<span class="navbar-toggler-icon"></span>
320	<span class="navbar-toggler-icon"></span>	320	<span class="navbar-toggler-icon"></span>
321	</button>	321	</button>
322		322
323	<div class="collapse navbar-collapse" id="navbarsExample03">	323	<div class="collapse navbar-collapse" id="navbarsExample03">
324	<ul class="navbar-nav mr-auto">	324	<ul class="navbar-nav mr-auto">
325	<li class="nav-item active">	325	<li class="nav-item active">
326	<a class="nav-link" href="">About</a>	326	<a class="nav-link" href="javasript:void(0);">About</a>
327	</li>	327	</li>
328	<li class="nav-item">	328	<li class="nav-item">
329	<a class="nav-link" href="">Masterclass</a>	329	<a class="nav-link" href="javasript:void(0);">Masterclass</a>
330	</li>	330	</li>
331	<li class="nav-item">	331	<li class="nav-item">
332	<a class="nav-link" href="">Stories</a>	332	<a class="nav-link" href="javasript:void(0);">Stories</a>
333	</li>	333	</li>
334	<li class="nav-item">	334	<li class="nav-item">
335	<a class="nav-link" href="">Library</a>	335	<a class="nav-link" href="javasript:void(0);">Library</a>
336	</li>	336	</li>
337	</ul>	337	</ul>
338	</div>	338	</div>
339	<a	339	<a
340	v-if="this.userData.firstLogin"	340	v-if="this.userData.firstLogin"
341	href=""	341	href="javasript:void(0);"
342	@click="addProfileDialog"	342	@click="addProfileDialog"
343	class="update_profile"	343	class="update_profile"
344	><span></span> Update Profile</a	344	><span></span> Update Profile</a
345	>	345	>
346	<div class="">	346	<div class="">
347	<a	347	<a
348	href="javascript:void(0);"	348	href="javascript:void(0);"
349	class="user-profile-photo common_color"	349	class="user-profile-photo common_color"
350	@click="userprofileshowDialog"	350	@click="userprofileshowDialog"
351	><img :src="userData.profilePic"	351	><img :src="userData.profilePic"
352	/></a>	352	/></a>
353	<div class="sub-menu-user" id="userprofileshow" style="display: none">	353	<div class="sub-menu-user" id="userprofileshow" style="display: none">
354	<ul>	354	<ul>
355	<li>	355	<li>
356	<a href="javascript:void(0);" @click="addProfileDialog"	356	<a href="javascript:void(0);" @click="addProfileDialog"
357	>Edit Profile</a	357	>Edit Profile</a
358	>	358	>
359	</li>	359	</li>
360	<li><a href="javascript:void(0);" @click="logout">Log Out</a></li>	360	<li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
361	</ul>	361	</ul>
362	</div>	362	</div>
363	</div>	363	</div>
364	</nav>	364	</nav>
365		365
366	<!-- <Header></Header> -->	366	<!-- <Header></Header> -->
367	<!-- menu wrapper -->	367	<!-- menu wrapper -->
368	<div class="row profile-tab-spc-top">	368	<div class="row profile-tab-spc-top">
369	<div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">	369	<div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
370	<div class="inner-profile-ps common_color">	370	<div class="inner-profile-ps common_color">
371	<img :src="userData.profilePic" class="" />	371	<img :src="userData.profilePic" class="" />
372	</div>	372	</div>
373	<!-- user profile -->	373	<!-- user profile -->
374		374
375	<div class="user-profile">	375	<div class="user-profile">
376	<h1>	376	<h1>
377	{{ userData.firstName }} {{ userData.lastName }}	377	{{ userData.firstName }} {{ userData.lastName }}
378	<span	378	<span
379	href=""	379	href="javasript:void(0);"
380	class="tags no-cursor no-underline"	380	class="tags no-cursor no-underline"
381	>{{ userData.role }}</span	381	>{{ userData.role }}</span
382	>	382	>
383	</h1>	383	</h1>
384	<ul class="joined-info">	384	<ul class="joined-info">
385	<li>	385	<li>
386	<a	386	<a
387	href="javascript:void(0);"	387	href="javascript:void(0);"
388	v-if="!userData.designation && !userData.organisation"	388	v-if="!userData.designation && !userData.organisation"
389	@click="addProfileDialog"	389	@click="addProfileDialog"
390	>Add your work</a	390	>Add your work</a
391	>	391	>
392	<a	392	<a
393	class="no-cursor no-underline"	393	class="no-cursor no-underline"
394	href="javascript:void(0);"	394	href="javascript:void(0);"
395	v-if="userData.designation"	395	v-if="userData.designation"
396	>{{ userData.designation }}</a	396	>{{ userData.designation }}</a
397	>	397	>
398	<a	398	<a
399	class="no-cursor no-underline"	399	class="no-cursor no-underline"
400	href="javascript:void(0);"	400	href="javascript:void(0);"
401	v-if="userData.designation && userData.organisation"	401	v-if="userData.designation && userData.organisation"
402	>at</a	402	>at</a
403	>	403	>
404	<a	404	<a
405	class="no-cursor no-underline"	405	class="no-cursor no-underline"
406	href="javascript:void(0);"	406	href="javascript:void(0);"
407	v-if="userData.organisation"	407	v-if="userData.organisation"
408	>{{ userData.organisation }}</a	408	>{{ userData.organisation }}</a
409	>	409	>
410	<img src="../assets/images/u-info-icon.png" /> <span></span>	410	<img src="../assets/images/u-info-icon.png" /> <span></span>
411	</li>	411	</li>
412	<li>	412	<li>
413	<a href="" content="Karma Points" v-tippy>	413	<a href="javasript:void(0);" content="Karma Points" v-tippy>
414	{{ userData.karmaPoints }} Karma</a	414	{{ userData.karmaPoints }} Karma</a
415	>	415	>
416	<span></span>	416	<span></span>
417	</li>	417	</li>
418	<li>	418	<li>
419	<a href="" class="no-cursor no-underline"	419	<a href="javasript:void(0);" class="no-cursor no-underline"
420	>Joined on	420	>Joined on
421	{{ moment(userData.createdAt).format("MMM YYYY") }}</a	421	{{ moment(userData.createdAt).format("MMM YYYY") }}</a
422	>	422	>
423	</li>	423	</li>
424	</ul>	424	</ul>
425	<p>{{ userData.bio }}</p>	425	<p>{{ userData.bio }}</p>
426	<div class="talk-to-me-about" v-if="userData.interests.length != 0">	426	<div class="talk-to-me-about" v-if="userData.interests.length != 0">
427	<span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>	427	<span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>
428	</div><!-- talk to me about -->	428	</div><!-- talk to me about -->
429	</div>	429	</div>
430		430
431	</div>	431	</div>
432	<!-- user profile -->	432	<!-- user profile -->
433	<div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">	433	<div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
434	<div class="list-style-group" v-if="userData.awards.views != null">	434	<div class="list-style-group" v-if="userData.awards.views != null">
435	<p>Awards</p>	435	<p>Awards</p>
436	<ul class="list-style">	436	<ul class="list-style">
437	<li>	437	<li>
438	<a href="javascript:void(0);"	438	<a href="javascript:void(0);"
439	><img src="../assets/images/icon-1.png"	439	><img src="../assets/images/icon-1.png"
440	/></a>	440	/></a>
441	</li>	441	</li>
442	</ul>	442	</ul>
443	</div>	443	</div>
444	<!-- list style -->	444	<!-- list style -->
445	</div>	445	</div>
446	</div>	446	</div>
447	<div class="clearfix"></div>	447	<div class="clearfix"></div>
448	<div class="row top-brd profile-tab-spc-top">	448	<div class="row top-brd profile-tab-spc-top">
449	<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">	449	<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
450	<ul class="profile-tab">	450	<ul class="profile-tab">
451	<li class="active c-0">	451	<li class="active c-0">
452	<a href="javascript:void(0);" @click="caseDialog"	452	<a href="javascript:void(0);" @click="caseDialog"
453	>Case-studies({{ caseStudies.length }})</a	453	>Case-studies({{ caseStudies.length }})</a
454	>	454	>
455	</li>	455	</li>
456	<li class="rp-all">	456	<li class="rp-all">
457	<a href="javascript:void(0);" @click="repliesDialog"	457	<a href="javascript:void(0);" @click="repliesDialog"
458	>Comments/Replies(0)</a	458	>Comments/Replies(0)</a
459	>	459	>
460	</li>	460	</li>
461	</ul>	461	</ul>
462	</div>	462	</div>
463	<div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">	463	<div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">
464	<ul class="social-connects" v-if="selectedSocialLink.length > 0">	464	<ul class="social-connects" v-if="selectedSocialLink.length > 0">
465	<li><span>Follow</span></li>	465	<li><span>Follow</span></li>
466	<li v-for="(social, i) in selectedSocialLink" :key="i">	466	<li v-for="(social, i) in selectedSocialLink" :key="i">
467	<a	467	<a
468	href="javascript:void(0);"	468	href="javascript:void(0);"
469	@click="openUrl(social.fieldValue)"	469	@click="openUrl(social.fieldValue)"
470	class="cursor-pointer"	470	class="cursor-pointer"
471	><img :src="social.image"	471	><img :src="social.image"
472	/></a>	472	/></a>
473	</li>	473	</li>
474	</ul>	474	</ul>
475	<ul class="social-connects" v-if="selectedSocialLink.length == 0">	475	<ul class="social-connects" v-if="selectedSocialLink.length == 0">
476	<li>	476	<li>
477	<a	477	<a
478	href="javascript:void(0);"	478	href="javascript:void(0);"
479	@click="addProfileDialog"	479	@click="addProfileDialog"
480	class="active cursor-pointer"	480	class="active cursor-pointer"
481	><img src="../assets/images/plus.png"	481	><img src="../assets/images/plus.png"
482	/></a>	482	/></a>
483	<span class="connect-social-channel"	483	<span class="connect-social-channel"
484	>Connect your social channels</span	484	>Connect your social channels</span
485	>	485	>
486	</li>	486	</li>
487	</ul>	487	</ul>
488	</div>	488	</div>
489	</div>	489	</div>
490	<!-- tab style -->	490	<!-- tab style -->
491	<div class="profile-data-wrp">	491	<div class="profile-data-wrp">
492	<div class="container-fluid data-wrp" id="case-study-0">	492	<div class="container-fluid data-wrp" id="case-study-0">
493	<div class="row" v-if="caseStudies.length == 0">	493	<div class="row" v-if="caseStudies.length == 0">
494	<div class="col-6 col-lg-6">	494	<div class="col-6 col-lg-6">
495	<div class="full-w-height-profile ex-light seats_bg">	495	<div class="full-w-height-profile ex-light seats_bg">
496	<a	496	<a
497	href=""	497	href="javasript:void(0);"
498	class="profile-md-bt center-and-spc bt-spc-top"	498	class="profile-md-bt center-and-spc bt-spc-top"
499	@click="openUrl('https://www.productgrowth.org/spotlight')"	499	@click="openUrl('https://www.productgrowth.org/spotlight')"
500	>Explore Spotlights</a	500	>Explore Spotlights</a
501	>	501	>
502	<p>Explore the spotlights others has put together</p>	502	<p>Explore the spotlights others has put together</p>
503	</div>	503	</div>
504	<!-- full width -->	504	<!-- full width -->
505	</div>	505	</div>
506	<!-- col 6 -->	506	<!-- col 6 -->
507	<div class="col-6 col-lg-6">	507	<div class="col-6 col-lg-6">
508	<div class="full-w-height-profile ex-light spotlight_bg">	508	<div class="full-w-height-profile ex-light spotlight_bg">
509	<img src="../assets/images/add-role.svg" class="add-role" />	509	<img src="../assets/images/add-role.svg" class="add-role" />
510	<div class="clearfix"></div>	510	<div class="clearfix"></div>
511	<!-- clearfix -->	511	<!-- clearfix -->
512	<a	512	<a
513	href=""	513	href="javasript:void(0);"
514	class="profile-md-bt center-and-spc"	514	class="profile-md-bt center-and-spc"
515	@click="	515	@click="
516	openUrl(	516	openUrl(
517	'https://www.productgrowth.org/spotlight#typeform-spotlight'	517	'https://www.productgrowth.org/spotlight#typeform-spotlight'
518	)	518	)
519	"	519	"
520	>Publish Spotlight</a	520	>Publish Spotlight</a
521	>	521	>
522	<p>Share your own insights through Spotlight</p>	522	<p>Share your own insights through Spotlight</p>
523	</div>	523	</div>
524	<!-- full width -->	524	<!-- full width -->
525	</div>	525	</div>
526	<!-- col 6 -->	526	<!-- col 6 -->
527	</div>	527	</div>
528		528
529	<div class="profile-data-wrp" v-if="caseStudies.length != 0">	529	<div class="profile-data-wrp" v-if="caseStudies.length != 0">
530	<div class="container-fluid data-wrp">	530	<div class="container-fluid data-wrp">
531	<div class="row">	531	<div class="row">
532	<div class="" v-for="(study, i) in caseStudies" :key="i">	532	<div class="" v-for="(study, i) in caseStudies" :key="i">
533	<div class="card-warpper" @click="openStudy(study)">	533	<div class="card-warpper" @click="openStudy(study)">
534	<div class="company-detail">	534	<div class="company-detail">
535	<div class="c-logo">	535	<div class="c-logo">
536	<!-- <img src="../assets/images/image 46.png" /> -->	536	<!-- <img src="../assets/images/image 46.png" /> -->
537	<img :src="study.intro.logoURL" />	537	<img :src="study.intro.logoURL" />
538	</div>	538	</div>
539	<div class="c-tag">	539	<div class="c-tag">
540	<img	540	<img
541	src="../assets/images/retake-blue.svg"	541	src="../assets/images/retake-blue.svg"
542	v-if="study.intro.type == 'Retake'"	542	v-if="study.intro.type == 'Retake'"
543	/>	543	/>
544	<img	544	<img
545	src="../assets/images/behind-blue.svg"	545	src="../assets/images/behind-blue.svg"
546	v-if="study.intro.type == 'Behind-the-scenes'"	546	v-if="study.intro.type == 'Behind-the-scenes'"
547	/>	547	/>
548	<img	548	<img
549	src="../assets/images/critique-blue.svg"	549	src="../assets/images/critique-blue.svg"
550	v-if="study.intro.type == 'Critique'"	550	v-if="study.intro.type == 'Critique'"
551	/>	551	/>
552	<img	552	<img
553	src="../assets/images/juxtapose-blue.svg"	553	src="../assets/images/juxtapose-blue.svg"
554	v-if="study.intro.type == 'Juxtapose'"	554	v-if="study.intro.type == 'Juxtapose'"
555	/>	555	/>
556	</div>	556	</div>
557	</div>	557	</div>
558		558
559	<!-- company detail-->	559	<!-- company detail-->
560	<h1>{{ study.intro.name }}</h1>	560	<h1>{{ study.intro.name }}</h1>
561	<div class="user-views">	561	<div class="user-views">
562	<ul>	562	<ul>
563	<li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li>	563	<li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li>
564	<li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>	564	<li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
565	<li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>	565	<li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
566	</ul>	566	</ul>
567		567
568	</div><!-- user views -->	568	</div><!-- user views -->
569	<div class="u-detail">	569	<div class="u-detail">
570	<img src="../assets/images/user-2.png" />	570	<img src="../assets/images/user-2.png" />
571	<h2 v-for="(name, j) in study.intro.authors" :key="j">	571	<h2 v-for="(name, j) in study.intro.authors" :key="j">
572	{{ name }}	572	{{ name }}
573	</h2>	573	</h2>
574		574
575	</div>	575	</div>
576	<!-- user detail -->	576	<!-- user detail -->
577	<p>	577	<p>
578	<span v-for="(area, j) in study.focusAreas" :key="j">	578	<span v-for="(area, j) in study.focusAreas" :key="j">
579	{{ area }}	579	{{ area }}
580	</span>	580	</span>
581	</p>	581	</p>
582	<ul class="tags-list">	582	<ul class="tags-list">
583	<li v-for="(tags, j) in study.insightTags" :key="j">	583	<li v-for="(tags, j) in study.insightTags" :key="j">
584	<a	584	<a
585	href=""	585	href="javasript:void(0);"
586	class="insight-design"	586	class="insight-design"
587	v-if="tags == 'Design'"	587	v-if="tags == 'Design'"
588	>Design</a	588	>Design</a
589	>	589	>
590	<a	590	<a
591	href=""	591	href="javasript:void(0);"
592	class="insight-product"	592	class="insight-product"
593	v-if="tags == 'Product'"	593	v-if="tags == 'Product'"
594	>Product</a	594	>Product</a
595	>	595	>
596	<a	596	<a
597	href=""	597	href="javasript:void(0);"
598	class="insight-marketing"	598	class="insight-marketing"
599	v-if="tags == 'Marketing'"	599	v-if="tags == 'Marketing'"
600	>Marketing</a	600	>Marketing</a
601	>	601	>
602	<a	602	<a
603	href=""	603	href="javasript:void(0);"
604	class="insight-pricing"	604	class="insight-pricing"
605	v-if="tags == 'Pricing'"	605	v-if="tags == 'Pricing'"
606	>Pricing</a	606	>Pricing</a
607	>	607	>
608	<a	608	<a
609	href=""	609	href="javasript:void(0);"
610	class="insight-psychology"	610	class="insight-psychology"
611	v-if="tags == 'Psychology'"	611	v-if="tags == 'Psychology'"
612	>Psychology</a	612	>Psychology</a
613	>	613	>
614	</li>	614	</li>
615	<!-- <li><a href="" class="rose-bud">Marketing</a></li>	615	<!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
616	<li><a href="" class="pattens-blue">Product</a></li> -->	616	<li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
617	</ul>	617	</ul>
618	<div class="clearfix"></div>	618	<div class="clearfix"></div>
619	<a href="#" class="action-set">	619	<a href="#" class="action-set">
620	<img src="../assets/images/arrow-right-action.svg" />	620	<img src="../assets/images/arrow-right-action.svg" />
621	</a>	621	</a>
622	<div class="read-time">	622	<div class="read-time">
623	<a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>	623	<a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>
624	</div><!-- read time -->	624	</div><!-- read time -->
625	</div>	625	</div>
626	<!-- card wrpper -->	626	<!-- card wrpper -->
627	<!-- card wrpper -->	627	<!-- card wrpper -->
628	</div>	628	</div>
629	<!-- all card wrpper -->	629	<!-- all card wrpper -->
630	</div>	630	</div>
631	</div>	631	</div>
632	</div>	632	</div>
633	<!-- data wrp -->	633	<!-- data wrp -->
634	</div>	634	</div>
635	<!-- case study 0 -->	635	<!-- case study 0 -->
636	<div	636	<div
637	class="container-fluid data-wrp"	637	class="container-fluid data-wrp"
638	id="all-replies"	638	id="all-replies"
639	style="display: none"	639	style="display: none"
640	>	640	>
641	<div class="row">	641	<div class="row">
642	<div class="replies col-md-12">	642	<div class="replies col-md-12">
643	<div class="replies-wrp">	643	<div class="replies-wrp">
644	<!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>	644	<!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
645	<ul class="joined-info">	645	<ul class="joined-info">
646	<li><a href="">37D</a> <span></span></li>	646	<li><a href="javasript:void(0);">37D</a> <span></span></li>
647	<li><img src="../assets/images/heart.png" /></li>	647	<li><img src="../assets/images/heart.png" /></li>
648	<li><a href=""> 4</a></li>	648	<li><a href="javasript:void(0);"> 4</a></li>
649	<li class="comment-spc">	649	<li class="comment-spc">
650	<img src="../assets/images/comment.svg" />	650	<img src="../assets/images/comment.svg" />
651	</li>	651	</li>
652	<li><a href=""> 6</a></li>	652	<li><a href="javasript:void(0);"> 6</a></li>
653	</ul>	653	</ul>
654	<p>	654	<p>
655	I wonder what the difference between “<strong>	655	I wonder what the difference between “<strong>
656	Assistant</strong	656	Assistant</strong
657	>” and “<strong>Pickup and Drop</strong>” are. If they are the	657	>” and “<strong>Pickup and Drop</strong>” are. If they are the
658	same, there are two “call to actions” for the same workflow	658	same, there are two “call to actions” for the same workflow
659	</p> -->	659	</p> -->
660	</div>	660	</div>
661	<!-- replies wrapper -->	661	<!-- replies wrapper -->
662	</div>	662	</div>
663	<!-- all card wrpper -->	663	<!-- all card wrpper -->
664	</div>	664	</div>
665	</div>	665	</div>
666	<!-- all Relpies -->	666	<!-- all Relpies -->
667	</div>	667	</div>
668	<!-- data wrp -->	668	<!-- data wrp -->
669	<!-- body wrapper -->	669	<!-- body wrapper -->
670	</div>	670	</div>
671	</main>	671	</main>
672	</template>	672	</template>
673		673
674	<script>	674	<script>
675	import Vue from "vue";	675	import Vue from "vue";
676	import router from "../router";	676	import router from "../router";
677	import $ from "jquery";	677	import $ from "jquery";
678	import axios from "axios";	678	import axios from "axios";
679	import Header from "./Header";	679	import Header from "./Header";
680	export default {	680	export default {
681	name: "Profile",	681	name: "Profile",
682	components: {	682	components: {
683	Header: Header,	683	Header: Header,
684	},	684	},
685	data: () => ({	685	data: () => ({
686	loggedinFlag: false,	686	loggedinFlag: false,
687	usertoken: null,	687	usertoken: null,
688	currentLink: null,	688	currentLink: null,
689	userData: {	689	userData: {
690	socialMediaProfiles: {	690	socialMediaProfiles: {
691	facebook: null,	691	facebook: null,
692	linkedin: null,	692	linkedin: null,
693	medium: null,	693	medium: null,
694	twitter: null,	694	twitter: null,
695	behance: null,	695	behance: null,
696	dribble: null,	696	dribble: null,
697	github: null,	697	github: null,
698	stackoverflow: null,	698	stackoverflow: null,
699	instagram: null,	699	instagram: null,
700	},	700	},
701	awards: {	701	awards: {
702	views: null,	702	views: null,
703	likes: null,	703	likes: null,
704	comments: null,	704	comments: null,
705	},	705	},
706	verified: true,	706	verified: true,
707	phoneNo: null,	707	phoneNo: null,
708	bio: null,	708	bio: null,
709	designation: null,	709	designation: null,
710	organisation: null,	710	organisation: null,
711	bgColor: null,	711	bgColor: null,
712	interests: [],	712	interests: [],
713	karmaPoints: null,	713	karmaPoints: null,
714	socialLogin: null,	714	socialLogin: null,
715	firstLogin: null,	715	firstLogin: null,
716	notification: null,	716	notification: null,
717	profilePic: null,	717	profilePic: null,
718	role: null,	718	role: null,
719	name: null,	719	name: null,
720	email: null,	720	email: null,
721	firstName: null,	721	firstName: null,
722	lastName: null,	722	lastName: null,
723	},	723	},
724	caseStudies: [],	724	caseStudies: [],
725	interestName: null,	725	interestName: null,
726	oldId: null,	726	oldId: null,
727	currentSocialLinkName: null,	727	currentSocialLinkName: null,
728	showCompany: false,	728	showCompany: false,
729	showDesignation: false,	729	showDesignation: false,
730	socialLink: [	730	socialLink: [
731	{	731	{
732	displayName: "Facebook",	732	displayName: "Facebook",
733	fieldName: "facebook",	733	fieldName: "facebook",
734	fieldValue: null,	734	fieldValue: null,
735	image: require(`../assets/images/facebook.png`),	735	image: require(`../assets/images/facebook.png`),
736	},	736	},
737	{	737	{
738	displayName: "Linkedin",	738	displayName: "Linkedin",
739	fieldName: "linkedin",	739	fieldName: "linkedin",
740	fieldValue: null,	740	fieldValue: null,
741	image: require(`../assets/images/linkedin.png`),	741	image: require(`../assets/images/linkedin.png`),
742	},	742	},
743	{	743	{
744	displayName: "Medium",	744	displayName: "Medium",
745	fieldName: "medium",	745	fieldName: "medium",
746	fieldValue: null,	746	fieldValue: null,
747	image: require(`../assets/images/medium.png`),	747	image: require(`../assets/images/medium.png`),
748	},	748	},
749	{	749	{
750	displayName: "Twitter",	750	displayName: "Twitter",
751	fieldName: "twitter",	751	fieldName: "twitter",
752	fieldValue: null,	752	fieldValue: null,
753	image: require(`../assets/images/twitter.png`),	753	image: require(`../assets/images/twitter.png`),
754	},	754	},
755	{	755	{
756	displayName: "Behance",	756	displayName: "Behance",
757	fieldName: "behance",	757	fieldName: "behance",
758	fieldValue: null,	758	fieldValue: null,
759	image: require(`../assets/images/behance.png`),	759	image: require(`../assets/images/behance.png`),
760	},	760	},
761	{	761	{
762	displayName: "Dribble",	762	displayName: "Dribble",
763	fieldName: "dribble",	763	fieldName: "dribble",
764	fieldValue: null,	764	fieldValue: null,
765	image: require(`../assets/images/dribbble.png`),	765	image: require(`../assets/images/dribbble.png`),
766	},	766	},
767	{	767	{
768	displayName: "Github",	768	displayName: "Github",
769	fieldName: "github",	769	fieldName: "github",
770	fieldValue: null,	770	fieldValue: null,
771	image: require(`../assets/images/github.png`),	771	image: require(`../assets/images/github.png`),
772	},	772	},
773	{	773	{
774	displayName: "Stackoverflow",	774	displayName: "Stackoverflow",
775	fieldName: "stackoverflow",	775	fieldName: "stackoverflow",
776	fieldValue: null,	776	fieldValue: null,
777	image: require(`../assets/images/stack overflow.png`),	777	image: require(`../assets/images/stack overflow.png`),
778	},	778	},
779	{	779	{
780	displayName: "Instagram",	780	displayName: "Instagram",
781	fieldName: "instagram",	781	fieldName: "instagram",
782	fieldValue: null,	782	fieldValue: null,
783	image: require(`../assets/images/instagram.png`),	783	image: require(`../assets/images/instagram.png`),
784	},	784	},
785	],	785	],
786	selectedSocialLink: [],	786	selectedSocialLink: [],
787	}),	787	}),
788		788
789	mounted() {	789	mounted() {
790	this.userData = {};	790	this.userData = {};
791	// this.socialLink = [];	791	// this.socialLink = [];
792	this.userData.interests = [];	792	this.userData.interests = [];
793	var userdata = localStorage.getItem("spotlight_usertoken");	793	var userdata = localStorage.getItem("spotlight_usertoken");
794	if (userdata) {	794	if (userdata) {
795	userdata = JSON.parse(userdata);	795	userdata = JSON.parse(userdata);
796	this.usertoken = userdata.token;	796	this.usertoken = userdata.token;
797	this.getProfile();	797	this.getProfile();
798	this.getCaseStudies();	798	this.getCaseStudies();
799	}	799	}
800	},	800	},
801	methods: {	801	methods: {
802	goToSignUp() {	802	goToSignUp() {
803	this.$router.push("/");	803	this.$router.push("/");
804	},	804	},
805	goToReset() {	805	goToReset() {
806	this.$router.push("/reset");	806	this.$router.push("/reset");
807	},	807	},
808	logout() {	808	logout() {
809	this.$router.push("/login");	809	this.$router.push("/login");
810	},	810	},
811	prefillSocialLink(links) {	811	prefillSocialLink(links) {
812	var keys = [];	812	var keys = [];
813	keys = Object.keys(links);	813	keys = Object.keys(links);
814	keys.forEach((link_) => {	814	keys.forEach((link_) => {
815	console.log(link_, ":", links[link_]);	815	console.log(link_, ":", links[link_]);
816	if (links[link_] != null) {	816	if (links[link_] != null) {
817	var i = this.socialLink.findIndex(	817	var i = this.socialLink.findIndex(
818	(links_) => links_.fieldName == link_	818	(links_) => links_.fieldName == link_
819	);	819	);
820	if (i != -1) {	820	if (i != -1) {
821	this.selectedSocialLink.push({	821	this.selectedSocialLink.push({
822	displayName: this.socialLink[i].displayName,	822	displayName: this.socialLink[i].displayName,
823	fieldName: this.socialLink[i].fieldName,	823	fieldName: this.socialLink[i].fieldName,
824	image: this.socialLink[i].image,	824	image: this.socialLink[i].image,
825	fieldValue: links[link_],	825	fieldValue: links[link_],
826	});	826	});
827	}	827	}
828	}	828	}
829	});	829	});
830	console.log("links-- are--", links);	830	console.log("links-- are--", links);
831	},	831	},
832	addSocialLink(id) {	832	addSocialLink(id) {
833	this.currentLink = null;	833	this.currentLink = null;
834	var i = this.selectedSocialLink.findIndex(	834	var i = this.selectedSocialLink.findIndex(
835	(link_) => link_.fieldName == id	835	(link_) => link_.fieldName == id
836	);	836	);
837	var j = this.socialLink.findIndex((links_) => links_.fieldName == id);	837	var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
838	if (i == -1) {	838	if (i == -1) {
839	this.selectedSocialLink.push({	839	this.selectedSocialLink.push({
840	displayName: this.socialLink[j].displayName,	840	displayName: this.socialLink[j].displayName,
841	fieldName: this.socialLink[j].fieldName,	841	fieldName: this.socialLink[j].fieldName,
842	image: this.socialLink[j].image,	842	image: this.socialLink[j].image,
843	fieldValue: null,	843	fieldValue: null,
844	});	844	});
845	} else {	845	} else {
846	this.$toaster.info(this.socialLink[j].displayName + " Already Exist");	846	this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
847	}	847	}
848	},	848	},
849	removeSocialLink(i) {	849	removeSocialLink(i) {
850	var name = this.selectedSocialLink[i].fieldName;	850	var name = this.selectedSocialLink[i].fieldName;
851	this.userData.socialMediaProfiles[name] = null;	851	this.userData.socialMediaProfiles[name] = null;
852	this.selectedSocialLink.splice(i, 1);	852	this.selectedSocialLink.splice(i, 1);
853	},	853	},
854		854
855	addInterest() {	855	addInterest() {
856	console.log(this.userData.interests.length, "called", this.interestName);	856	console.log(this.userData.interests.length, "called", this.interestName);
857	if (this.userData.interests.length <= 2) {	857	if (this.userData.interests.length <= 2) {
858	this.userData.interests.push(this.interestName);	858	this.userData.interests.push(this.interestName);
859	this.interestName = null;	859	this.interestName = null;
860	} else {	860	} else {
861	this.$toaster.info("Only 3 interest are allowed");	861	this.$toaster.info("Only 3 interest are allowed");
862	}	862	}
863	},	863	},
864	removeInterest(i) {	864	removeInterest(i) {
865	console.log("i", i);	865	console.log("i", i);
866	this.userData.interests.splice(i, 1);	866	this.userData.interests.splice(i, 1);
867	console.log(" this.userData", this.userData.interests);	867	console.log(" this.userData", this.userData.interests);
868	},	868	},
869	assignClass() {	869	assignClass() {
870	var element = document.getElementById(this.userData.bgColor);	870	var element = document.getElementById(this.userData.bgColor);
871	element.classList.add("active");	871	element.classList.add("active");
872	var cols = document.getElementsByClassName("common_color");	872	var cols = document.getElementsByClassName("common_color");
873	for (var i = 0; i < cols.length; i++) {	873	for (var i = 0; i < cols.length; i++) {
874	cols[i].style.backgroundColor = this.userData.bgColor;	874	cols[i].style.backgroundColor = this.userData.bgColor;
875	}	875	}
876	},	876	},
877	createString(list){	877	createString(list){
878	var name = "";	878	var name = "";
879	list.forEach(element => {	879	list.forEach(element => {
880	name = name+','+element;	880	name = name+','+element;
881	});	881	});
882		882
883	console.log("name is",name);	883	console.log("name is",name);
884	return name.substring(1);;	884	return name.substring(1);;
885	},	885	},
886	changeColor(clr) {	886	changeColor(clr) {
887	console.log(this.oldId, "clr", clr);	887	console.log(this.oldId, "clr", clr);
888	var element = document.getElementById(clr);	888	var element = document.getElementById(clr);
889	element.classList.add("active");	889	element.classList.add("active");
890	var removeelement = document.getElementById(this.oldId);	890	var removeelement = document.getElementById(this.oldId);
891	removeelement.classList.remove("active");	891	removeelement.classList.remove("active");
892	this.oldId = clr;	892	this.oldId = clr;
893	var cols = document.getElementsByClassName("common_color");	893	var cols = document.getElementsByClassName("common_color");
894	for (var i = 0; i < cols.length; i++) {	894	for (var i = 0; i < cols.length; i++) {
895	cols[i].style.backgroundColor = clr;	895	cols[i].style.backgroundColor = clr;
896	}	896	}
897	this.userData.bgColor = clr;	897	this.userData.bgColor = clr;
898	},	898	},
899	getProfile() {	899	getProfile() {
900	axios	900	axios
901	.get("/profile", {	901	.get("/profile", {
902	headers: {	902	headers: {
903	Authorization: "Bearer " + this.usertoken,	903	Authorization: "Bearer " + this.usertoken,
904	},	904	},
905	})	905	})
906	.then((response) => {	906	.then((response) => {
907	if (!response.data.data.socialMediaProfiles) {	907	if (!response.data.data.socialMediaProfiles) {
908	this.userData.socialMediaProfiles = {};	908	this.userData.socialMediaProfiles = {};
909	}	909	}
910	this.userData = response.data.data;	910	this.userData = response.data.data;
911		911
912	// this.userData = response.data.data;	912	// this.userData = response.data.data;
913	this.oldId = this.userData.bgColor;	913	this.oldId = this.userData.bgColor;
914	console.log(this.oldId, "this.userData.", this.userData);	914	console.log(this.oldId, "this.userData.", this.userData);
915	console.log("this.userData.firstLogin ", this.userData.firstLogin);	915	console.log("this.userData.firstLogin ", this.userData.firstLogin);
916	this.prefillSocialLink(this.userData.socialMediaProfiles);	916	this.prefillSocialLink(this.userData.socialMediaProfiles);
917	if (this.userData.firstLogin == true) {	917	if (this.userData.firstLogin == true) {
918	this.addProfileDialog();	918	this.addProfileDialog();
919	}	919	}
920	this.assignClass();	920	this.assignClass();
921	console.log(response.data.data);	921	console.log(response.data.data);
922	})	922	})
923	.catch((error) => console.log(error));	923	.catch((error) => console.log(error));
924	},	924	},
925	getRandomAvatar() {	925	getRandomAvatar() {
926	axios	926	axios
927	.get("/randomAvatar", {	927	.get("/randomAvatar", {
928	headers: {	928	headers: {
929	Authorization: "Bearer " + this.usertoken,	929	Authorization: "Bearer " + this.usertoken,
930	},	930	},
931	})	931	})
932	.then((response) => {	932	.then((response) => {
933	this.userData.profilePic = response.data.imageURL;	933	this.userData.profilePic = response.data.imageURL;
934	console.log(response.data.imageURL);	934	console.log(response.data.imageURL);
935	})	935	})
936	.catch((error) => console.log(error));	936	.catch((error) => console.log(error));
937	},	937	},
938	getCaseStudies() {	938	getCaseStudies() {
939	axios	939	axios
940	.get("/caseStudy/all", {	940	.get("/caseStudy/all", {
941	headers: {	941	headers: {
942	Authorization: "Bearer " + this.usertoken,	942	Authorization: "Bearer " + this.usertoken,
943	},	943	},
944	})	944	})
945	.then((response) => {	945	.then((response) => {
946	console.log(response.data.data.caseStudies);	946	console.log(response.data.data.caseStudies);
947	this.caseStudies = response.data.data.caseStudies;	947	this.caseStudies = response.data.data.caseStudies;
948	})	948	})
949	.catch((error) => console.log(error));	949	.catch((error) => console.log(error));
950	},	950	},
951	openStudy(payload) {	951	openStudy(payload) {
952	console.log("payload-", payload);	952	console.log("payload-", payload);
953	payload.intro.date = payload.createdAt;	953	payload.intro.date = payload.createdAt;
954	payload.intro.focusPoint = payload.focusAreas;	954	payload.intro.focusPoint = payload.focusAreas;
955	axios	955	axios
956	.get("/caseStudy/slides?caseStudyId=" + payload._id, {	956	.get("/caseStudy/slides?caseStudyId=" + payload._id, {
957	headers: {	957	headers: {
958	Authorization: "Bearer " + this.usertoken,	958	Authorization: "Bearer " + this.usertoken,
959	},	959	},
960	})	960	})
961	.then((response) => {	961	.then((response) => {
962	this.createSlide(payload, response.data.data);	962	this.createSlide(payload, response.data.data);
963	})	963	})
964	.catch((error) => console.log(error));	964	.catch((error) => console.log(error));
965	},	965	},
966		966
967	createSlide(payload, slides) {	967	createSlide(payload, slides) {
968	var finalSlides = [];	968	var finalSlides = [];
969	slides.forEach((slides_) => {	969	slides.forEach((slides_) => {
970	var url = this.assignRoutes(slides_.templateId);	970	var url = this.assignRoutes(slides_.templateId);
971	var obj = {	971	var obj = {
972	forward: true,	972	forward: true,
973	backward: true,	973	backward: true,
974	ur: url,	974	ur: url,
975	slideId: slides_._id,	975	slideId: slides_._id,
976	caseStudyId: slides_.caseStudyId,	976	caseStudyId: slides_.caseStudyId,
977	payload: {	977	payload: {
978	metaData: slides_.metaData,	978	metaData: slides_.metaData,
979	comments: slides_.comments,	979	comments: slides_.comments,
980	insight: slides_.insight ? slides_.insight : null,	980	insight: slides_.insight ? slides_.insight : null,
981	},	981	},
982	};	982	};
983	// slides_	983	// slides_
984	finalSlides.push(obj);	984	finalSlides.push(obj);
985	});	985	});
986	console.log("payload", payload);	986	console.log("payload", payload);
987	// add first slide at begining	987	// add first slide at begining
988	finalSlides.unshift({	988	finalSlides.unshift({
989	forward: true,	989	forward: true,
990	backward: false,	990	backward: false,
991	ur: "EpisodeIntro",	991	ur: "EpisodeIntro",
992	slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",	992	slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
993	caseStudyId: payload._id,	993	caseStudyId: payload._id,
994	payload: {	994	payload: {
995	metaData: payload.intro,	995	metaData: payload.intro,
996	comments: [],	996	comments: [],
997	},	997	},
998	});	998	});
999	finalSlides.push({	999	finalSlides.push({
1000	forward: true,	1000	forward: true,
1001	backward: false,	1001	backward: false,
1002	ur: "Outro",	1002	ur: "Outro",
1003	slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",	1003	slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
1004	caseStudyId: payload._id,	1004	caseStudyId: payload._id,
1005	payload: {	1005	payload: {
1006	metaData: payload.outro,	1006	metaData: payload.outro,
1007	comments: [],	1007	comments: [],
1008	},	1008	},
1009	});	1009	});
1010		1010
1011	console.log(finalSlides);	1011	console.log(finalSlides);
1012	console.log("payload", payload);	1012	console.log("payload", payload);
1013	localStorage.setItem(	1013	localStorage.setItem(
1014	"spotlight_slide" + payload._id,	1014	"spotlight_slide" + payload._id,
1015	JSON.stringify(finalSlides)	1015	JSON.stringify(finalSlides)
1016	);	1016	);
1017	this.$router.push({	1017	this.$router.push({
1018	name: "EpisodeIntro",	1018	name: "EpisodeIntro",
1019	params: {	1019	params: {
1020	caseStudyId: finalSlides[0].caseStudyId,	1020	caseStudyId: finalSlides[0].caseStudyId,
1021	slideId: finalSlides[0].slideId,	1021	slideId: finalSlides[0].slideId,
1022	},	1022	},
1023	});	1023	});
1024	},	1024	},
1025	assignRoutes(tempId) {	1025	assignRoutes(tempId) {
1026	// /episode-intro	1026	// /episode-intro
1027	// /outro	1027	// /outro
1028	var routes = [	1028	var routes = [
1029	{	1029	{
1030	url: "AuthorIntro",	1030	url: "AuthorIntro",
1031	tempId: "T1_RoeMG8130Xko1DvhC3Ou",	1031	tempId: "T1_RoeMG8130Xko1DvhC3Ou",
1032	},	1032	},
1033	{	1033	{
1034	url: "NoScreenshotSingleAuthor",	1034	url: "NoScreenshotSingleAuthor",
1035	tempId: "T2_ROsUOEy3vxsRAiQ72XdI",	1035	tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
1036	},	1036	},
1037	{	1037	{
1038	url: "SingleMobileScreenInsightTwo",	1038	url: "SingleMobileScreenInsightTwo",
1039	tempId: "T3_cqNIf7tuqL4jyON63dA7",	1039	tempId: "T3_cqNIf7tuqL4jyON63dA7",
1040	},	1040	},
1041	{	1041	{
1042	url: "TwoScreenWithoutInsight",	1042	url: "TwoScreenWithoutInsight",
1043	tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",	1043	tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
1044	},	1044	},
1045	{	1045	{
1046	url: "noscreenshotSingleautho",	1046	url: "noscreenshotSingleautho",
1047	tempId: "T5_za3c3sYgx7bVvtKz5r0e",	1047	tempId: "T5_za3c3sYgx7bVvtKz5r0e",
1048	},	1048	},
1049	{	1049	{
1050	url: "SingleMobileScreenInsightOne",	1050	url: "SingleMobileScreenInsightOne",
1051	tempId: "T6_za3c3sYgx7bVvtKz5sgf",	1051	tempId: "T6_za3c3sYgx7bVvtKz5sgf",
1052	},	1052	},
1053	{	1053	{
1054	url: "TwoScreenWithInsight",	1054	url: "TwoScreenWithInsight",
1055	tempId: "T7_za3c3sYgx7bVvtKzasdf",	1055	tempId: "T7_za3c3sYgx7bVvtKzasdf",
1056	},	1056	},
1057	];	1057	];
1058	var i = routes.findIndex((routes_) => routes_.tempId == tempId);	1058	var i = routes.findIndex((routes_) => routes_.tempId == tempId);
1059	return routes[i].url;	1059	return routes[i].url;
1060	},	1060	},
1061	saveProfile() {	1061	saveProfile() {
1062	var obj = {};	1062	var obj = {};
1063	if (this.userData.firstLogin == true) {	1063	if (this.userData.firstLogin == true) {
1064	this.userData.firstLogin = false;	1064	this.userData.firstLogin = false;
1065	}	1065	}
1066	this.userData.name =	1066	this.userData.name =
1067	this.userData.firstName + " " + this.userData.lastName;	1067	this.userData.firstName + " " + this.userData.lastName;
1068	obj = Object.assign(obj, this.userData);	1068	obj = Object.assign(obj, this.userData);
1069	// if(!obj.socialMediaProfiles){	1069	// if(!obj.socialMediaProfiles){
1070	// obj.socialMediaProfiles = {};	1070	// obj.socialMediaProfiles = {};
1071	// }	1071	// }
1072	this.selectedSocialLink.forEach((element) => {	1072	this.selectedSocialLink.forEach((element) => {
1073	var key = element.fieldName;	1073	var key = element.fieldName;
1074	obj.socialMediaProfiles[key] = element.fieldValue;	1074	obj.socialMediaProfiles[key] = element.fieldValue;
1075	});	1075	});
1076	delete obj.createdAt;	1076	delete obj.createdAt;
1077	delete obj.email;	1077	delete obj.email;
1078	delete obj.role;	1078	delete obj.role;
1079	delete obj.verified;	1079	delete obj.verified;
1080	delete obj.updatedAt;	1080	delete obj.updatedAt;
1081	delete obj.__v;	1081	delete obj.__v;
1082	delete obj._id;	1082	delete obj._id;
1083	delete obj.karmaPoints;	1083	delete obj.karmaPoints;
1084	delete obj.awards;	1084	delete obj.awards;
1085	delete obj.socialLogin;	1085	delete obj.socialLogin;
1086	delete obj.phoneNo;	1086	delete obj.phoneNo;
1087	axios	1087	axios
1088	.put("/profile", obj, {	1088	.put("/profile", obj, {
1089	headers: {	1089	headers: {
1090	Authorization: "Bearer " + this.usertoken,	1090	Authorization: "Bearer " + this.usertoken,
1091	},	1091	},
1092	})	1092	})
1093	.then((response) => {	1093	.then((response) => {
1094	// this.userData = response.data.data;	1094	// this.userData = response.data.data;
1095	this.$toaster.success("Profile Updated");	1095	this.$toaster.success("Profile Updated");
1096	this.closeDialog();	1096	this.closeDialog();
1097	console.log(response.data.data);	1097	console.log(response.data.data);
1098	})	1098	})
1099	.catch((error) => {	1099	.catch((error) => {
1100	if (error.response) {	1100	if (error.response) {
1101	this.$toaster.error(error.response.data.message);	1101	this.$toaster.error(error.response.data.message);
1102	}	1102	}
1103	});	1103	});
1104	},	1104	},
1105	addProfileDialog() {	1105	addProfileDialog() {
1106	$(".inner-wrp").addClass("body-blur");	1106	$(".inner-wrp").addClass("body-blur");
1107	$("#add-social-links").hide();	1107	$("#add-social-links").hide();
1108	$(".popup-wrp, #add-profile").show();	1108	$(".popup-wrp, #add-profile").show();
1109	},	1109	},
1110	nextProfileDialog() {	1110	nextProfileDialog() {
1111	$("#add-profile").hide();	1111	$("#add-profile").hide();
1112	$("#add-social-links").show();	1112	$("#add-social-links").show();
1113	this.saveProfile();	1113	this.saveProfile();
1114	},	1114	},
1115	closeDialog() {	1115	closeDialog() {
1116	$(".popup-wrp").hide();	1116	$(".popup-wrp").hide();
1117	$(".inner-wrp").removeClass("body-blur");	1117	$(".inner-wrp").removeClass("body-blur");
1118	// this.saveProfile();	1118	// this.saveProfile();
1119	},	1119	},
1120	hideDialog() {	1120	hideDialog() {
1121	$(".popup-wrp").hide();	1121	$(".popup-wrp").hide();
1122	$(".inner-wrp").removeClass("body-blur");	1122	$(".inner-wrp").removeClass("body-blur");
1123	},	1123	},
1124	///	1124	///
1125	caseDialog() {	1125	caseDialog() {
1126	$(".rp-all").removeClass("active");	1126	$(".rp-all").removeClass("active");
1127	$(".c-0").addClass("active");	1127	$(".c-0").addClass("active");
1128	$("#all-replies").hide();	1128	$("#all-replies").hide();
1129	$("#case-study-0").show();	1129	$("#case-study-0").show();
1130	},	1130	},
1131	repliesDialog() {	1131	repliesDialog() {
1132	$(".c-0").removeClass("active");	1132	$(".c-0").removeClass("active");
1133	$(".rp-all").addClass("active");	1133	$(".rp-all").addClass("active");
1134	$("#case-study-0").hide();	1134	$("#case-study-0").hide();
1135	$("#all-replies").show();	1135	$("#all-replies").show();
1136	},	1136	},
1137		1137
1138	userprofileshowDialog() {	1138	userprofileshowDialog() {
1139	$("#userprofileshow").toggle();	1139	$("#userprofileshow").toggle();
1140	},	1140	},
1141	openUrl(url) {	1141	openUrl(url) {
1142	window.open(url);	1142	window.open(url);
1143	},	1143	},
1144	},	1144	},
1145	};	1145	};
1146	</script>	1146	</script>
1147	<style>	1147	<style>
1148	.no-cursor {	1148	.no-cursor {
1149	cursor: default !important;	1149	cursor: default !important;
1150	}	1150	}
1151	.no-underline {	1151	.no-underline {
1152	text-decoration: none !important;	1152	text-decoration: none !important;
1153	}	1153	}
1154	.position-left {	1154	.position-left {
1155	left: 15px !important;	1155	left: 15px !important;
1156	}	1156	}
1157	.padding-right {	1157	.padding-right {
1158	padding-right: 0px !important;	1158	padding-right: 0px !important;
1159	}	1159	}
1160		1160
1161	.social-link-right {	1161	.social-link-right {
1162	display: flex;	1162	display: flex;
1163	flex-flow: column wrap;	1163	flex-flow: column wrap;
1164	align-content: flex-end;	1164	align-content: flex-end;
1165	}	1165	}
1166	</style>	1166	</style>
1167		1167

src/components/SingleMobileScreenInsightOne.vue

Diff comments View file @1f12ffc

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=""	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=""	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=""	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=""	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="">	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="">	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=""	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=""	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="">	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=""	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	}	480	}
481	var userdata = localStorage.getItem("spotlight_usertoken");	481	var userdata = localStorage.getItem("spotlight_usertoken");
482	if (userdata) {	482	if (userdata) {
483	userdata = JSON.parse(userdata);	483	userdata = JSON.parse(userdata);
484	this.usertoken = userdata.token;	484	this.usertoken = userdata.token;
485	this.getComment();	485	this.getComment();
486	}	486	}
487	},	487	},
488	methods: {	488	methods: {
489	getCurrentSlideData() {	489	getCurrentSlideData() {
490	var i = this.allSlide.findIndex(	490	var i = this.allSlide.findIndex(
491	(slide_) => slide_.slideId == this.$route.params.slideId	491	(slide_) => slide_.slideId == this.$route.params.slideId
492	);	492	);
493	this.currentSlideIndex = i;	493	this.currentSlideIndex = i;
494	this.currentSlideData = this.allSlide[i];	494	this.currentSlideData = this.allSlide[i];
495	console.log("currentSlideData", this.currentSlideData);	495	console.log("currentSlideData", this.currentSlideData);
496	},	496	},
497	goNext() {	497	goNext() {
498	this.currentSlideIndex++;	498	this.currentSlideIndex++;
499	this.$router.push({	499	this.$router.push({
500	name: this.allSlide[this.currentSlideIndex].ur,	500	name: this.allSlide[this.currentSlideIndex].ur,
501	params: {	501	params: {
502	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	502	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
503	slideId: this.allSlide[this.currentSlideIndex].slideId,	503	slideId: this.allSlide[this.currentSlideIndex].slideId,
504	},	504	},
505	});	505	});
506	},	506	},
507	goBack() {	507	goBack() {
508	this.currentSlideIndex--;	508	this.currentSlideIndex--;
509	this.$router.push({	509	this.$router.push({
510	name: this.allSlide[this.currentSlideIndex].ur,	510	name: this.allSlide[this.currentSlideIndex].ur,
511	params: {	511	params: {
512	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	512	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
513	slideId: this.allSlide[this.currentSlideIndex].slideId,	513	slideId: this.allSlide[this.currentSlideIndex].slideId,
514	},	514	},
515	});	515	});
516	},	516	},
517	createComment() {	517	createComment() {
518	console.log("===", this.comment);	518	console.log("===", this.comment);
519	var obj = {	519	var obj = {
520	caseStudyId: this.currentSlideData.caseStudyId,	520	caseStudyId: this.currentSlideData.caseStudyId,
521	slideId: this.currentSlideData.slideId,	521	slideId: this.currentSlideData.slideId,
522	comment: this.comment,	522	comment: this.comment,
523		523
524	};	524	};
525	axios	525	axios
526	.post("/bounceBoard/comment", obj, {	526	.post("/bounceBoard/comment", obj, {
527	headers: {	527	headers: {
528	Authorization: "Bearer " + this.usertoken,	528	Authorization: "Bearer " + this.usertoken,
529	},	529	},
530	})	530	})
531	.then((response) => {	531	.then((response) => {
532	this.comment = null;	532	this.comment = null;
533	this.getComment();	533	this.getComment();
534	console.log(response);	534	console.log(response);
535	})	535	})
536	.catch((error) => {	536	.catch((error) => {
537	if (error.response) {	537	if (error.response) {
538	this.$toaster.error(error.response.data.message);	538	this.$toaster.error(error.response.data.message);
539	}	539	}
540	});	540	});
541	},	541	},
542	createChildComment(cmnt) {	542	createChildComment(cmnt) {
543	console.log(cmnt,"===", this.comment);	543	console.log(cmnt,"===", this.comment);
544	var obj = {	544	var obj = {
545	caseStudyId: this.currentSlideData.caseStudyId,	545	caseStudyId: this.currentSlideData.caseStudyId,
546	slideId: this.currentSlideData.slideId,	546	slideId: this.currentSlideData.slideId,
547	comment: this.comment,	547	comment: this.comment,
548	parentId: cmnt._id,	548	parentId: cmnt._id,
549		549
550	};	550	};
551	axios	551	axios
552	.post("/bounceBoard/comment", obj, {	552	.post("/bounceBoard/comment", obj, {
553	headers: {	553	headers: {
554	Authorization: "Bearer " + this.usertoken,	554	Authorization: "Bearer " + this.usertoken,
555	},	555	},
556	})	556	})
557	.then((response) => {	557	.then((response) => {
558	this.comment = null;	558	this.comment = null;
559	this.discardRply(cmnt);	559	this.discardRply(cmnt);
560	this.getComment();	560	this.getComment();
561	console.log(response);	561	console.log(response);
562	})	562	})
563	.catch((error) => {	563	.catch((error) => {
564	if (error.response) {	564	if (error.response) {
565	this.$toaster.error(error.response.data.message);	565	this.$toaster.error(error.response.data.message);
566	}	566	}
567	});	567	});
568	},	568	},
569	getComment() {	569	getComment() {
570	axios	570	axios
571	.get(	571	.get(
572	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	572	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
573	{	573	{
574	headers: {	574	headers: {
575	Authorization: "Bearer " + this.usertoken,	575	Authorization: "Bearer " + this.usertoken,
576	},	576	},
577	}	577	}
578	)	578	)
579	.then((response) => {	579	.then((response) => {
580	console.log(response.data);	580	console.log(response.data);
581	var comments = [];	581	var comments = [];
582	var keys = Object.keys(response.data.data)	582	var keys = Object.keys(response.data.data)
583	response.data.data	583	response.data.data
584	keys.forEach((key_) => {	584	keys.forEach((key_) => {
585	comments.push(response.data.data[key_])	585	comments.push(response.data.data[key_])
586	});	586	});
587	comments.forEach((coment_)=>{	587	comments.forEach((coment_)=>{
588	coment_.childInput = false;	588	coment_.childInput = false;
589	});	589	});
590	console.log("comments",comments)	590	console.log("comments",comments)
591	this.commentList = comments;	591	this.commentList = comments;
592	})	592	})
593	.catch((error) => console.log(error));	593	.catch((error) => console.log(error));
594	},	594	},
595	dateGenerator(curreDate){	595	dateGenerator(curreDate){
596	var todayDate = moment(new Date(), "DD.MM.YYYY");	596	var todayDate = moment(new Date(), "DD.MM.YYYY");
597	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	597	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
598	var result = todayDate.diff(endDate, 'days');	598	var result = todayDate.diff(endDate, 'days');
599	return result;	599	return result;
600	},	600	},
601	goToLogin() {	601	goToLogin() {
602	this.$router.push("/login");	602	this.$router.push("/login");
603	},	603	},
604	goToSignUp() {	604	goToSignUp() {
605	this.$router.push("/");	605	this.$router.push("/");
606	},	606	},
607	open(url){	607	open(url){
608	window.open(url);	608	window.open(url);
609	},	609	},
610	chtbox_close() {	610	chtbox_close() {
611	$("#cht_box_close").removeClass("cht_close");	611	$("#cht_box_close").removeClass("cht_close");
612	$("#open_ct_box, .c_hide").show();	612	$("#open_ct_box, .c_hide").show();
613	$(".footer-top").addClass("white-bg");	613	$(".footer-top").addClass("white-bg");
614	},	614	},
615	open_ct_box() {	615	open_ct_box() {
616	$("#cht_box_close").addClass("cht_close");	616	$("#cht_box_close").addClass("cht_close");
617	$("#open_ct_box, .c_hide").hide();	617	$("#open_ct_box, .c_hide").hide();
618	$(".footer-top").removeClass("white-bg");	618	$(".footer-top").removeClass("white-bg");
619	},	619	},
620	eachRply(cmnt) {	620	eachRply(cmnt) {
621	cmnt.childInput = true;	621	cmnt.childInput = true;
622	this.parentInput = false;	622	this.parentInput = false;
623	this.comment = null;	623	this.comment = null;
624	setTimeout(() => {	624	setTimeout(() => {
625	document.getElementById("childInput").focus();	625	document.getElementById("childInput").focus();
626	}, 100);	626	}, 100);
627	},	627	},
628	discardRply(cmnt) {	628	discardRply(cmnt) {
629	cmnt.childInput = false;	629	cmnt.childInput = false;
630	this.parentInput = true;	630	this.parentInput = true;
631	this.comment = null;	631	this.comment = null;
632	},	632	},
633	reply_cht_box(i) {	633	reply_cht_box(i) {
634	console.log(this.commentList, "cmnt");	634	console.log(this.commentList, "cmnt");
635	$("#cht_box_close").addClass("cht_close");	635	$("#cht_box_close").addClass("cht_close");
636	$("#open_ct_box, .c_hide").hide();	636	$("#open_ct_box, .c_hide").hide();
637	$(".footer-top").removeClass("white-bg");	637	$(".footer-top").removeClass("white-bg");
638	this.commentList[i].childInput = true;	638	this.commentList[i].childInput = true;
639	this.parentInput = false;	639	this.parentInput = false;
640	this.comment = null;	640	this.comment = null;
641	setTimeout(() => {	641	setTimeout(() => {
642	document.getElementById("childInput").focus();	642	document.getElementById("childInput").focus();
643	}, 100);	643	}, 100);
644	},	644	},
645	likeComment(status, id) {	645	likeComment(status, id) {
646	console.log("===", this.comment);	646	console.log("===", this.comment);
647	var obj = {	647	var obj = {
648	commentId: id,	648	commentId: id,
649	like: status,	649	like: status,
650	};	650	};
651	axios	651	axios
652	.post("/bounceBoard/like", obj, {	652	.post("/bounceBoard/like", obj, {
653	headers: {	653	headers: {
654	Authorization: "Bearer " + this.usertoken,	654	Authorization: "Bearer " + this.usertoken,
655	},	655	},
656	})	656	})
657	.then((response) => {	657	.then((response) => {
658	this.getComment();	658	this.getComment();
659	console.log(response);	659	console.log(response);
660	})	660	})
661	.catch((error) => {	661	.catch((error) => {
662	if (error.response) {	662	if (error.response) {
663	this.$toaster.error(error.response.data.message);	663	this.$toaster.error(error.response.data.message);
664	}	664	}
665	});	665	});
666	},	666	},
667	getLastcomment(flag, commentArray) {	667	getLastcomment(flag, commentArray) {
668	var finalComment = null;	668	var finalComment = null;
669	var totalMessage = 0;	669	var totalMessage = 0;
670	var name = null;	670	var name = null;
671	commentArray.forEach((comment_) => {	671	commentArray.forEach((comment_) => {
672	if (comment_.comment != null) {	672	if (comment_.comment != null) {
673	name = comment_.user.name;	673	name = comment_.user.name;
674	finalComment = comment_.comment;	674	finalComment = comment_.comment;
675	totalMessage++;	675	totalMessage++;
676	}	676	}
677	});	677	});
678	if (flag == "count") {	678	if (flag == "count") {
679	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	679	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
680	} else if (flag =="name") {	680	} else if (flag =="name") {
681	return (name = name);	681	return (name = name);
682	} else {	682	} else {
683	return finalComment;	683	return finalComment;
684	}	684	}
685	},	685	},
686	commentExistCheck(i) {	686	commentExistCheck(i) {
687	console.log(this.commentList[i].comment);	687	console.log(this.commentList[i].comment);
688	var returnValue = false;	688	var returnValue = false;
689	if (this.commentList[i].comment) {	689	if (this.commentList[i].comment) {
690	returnValue = true;	690	returnValue = true;
691	}	691	}
692	return returnValue;	692	return returnValue;
693	},	693	},
694	},	694	},
695	};	695	};
696	//	696	//
697	</script>	697	</script>
698		698

src/components/SingleMobileScreenInsightTwo.vue

Diff comments View file @1f12ffc

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=""	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=""	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=""	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=""	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="">	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="">	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=""	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=""	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="">	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=""	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	}	546	}
547	if (userdata) {	547	if (userdata) {
548	userdata = JSON.parse(userdata);	548	userdata = JSON.parse(userdata);
549	this.usertoken = userdata.token;	549	this.usertoken = userdata.token;
550	this.getComment();	550	this.getComment();
551	}	551	}
552	},	552	},
553	methods: {	553	methods: {
554	getCurrentSlideData() {	554	getCurrentSlideData() {
555	var i = this.allSlide.findIndex(	555	var i = this.allSlide.findIndex(
556	(slide_) => slide_.slideId == this.$route.params.slideId	556	(slide_) => slide_.slideId == this.$route.params.slideId
557	);	557	);
558	this.currentSlideIndex = i;	558	this.currentSlideIndex = i;
559	this.currentSlideData = this.allSlide[i];	559	this.currentSlideData = this.allSlide[i];
560	console.log("currentSlideData", this.currentSlideData);	560	console.log("currentSlideData", this.currentSlideData);
561	},	561	},
562	goNext() {	562	goNext() {
563	this.currentSlideIndex++;	563	this.currentSlideIndex++;
564	this.$router.push({	564	this.$router.push({
565	name: this.allSlide[this.currentSlideIndex].ur,	565	name: this.allSlide[this.currentSlideIndex].ur,
566	params: {	566	params: {
567	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	567	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
568	slideId: this.allSlide[this.currentSlideIndex].slideId,	568	slideId: this.allSlide[this.currentSlideIndex].slideId,
569	},	569	},
570	});	570	});
571	},	571	},
572	goBack() {	572	goBack() {
573	this.currentSlideIndex--;	573	this.currentSlideIndex--;
574	this.$router.push({	574	this.$router.push({
575	name: this.allSlide[this.currentSlideIndex].ur,	575	name: this.allSlide[this.currentSlideIndex].ur,
576	params: {	576	params: {
577	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	577	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
578	slideId: this.allSlide[this.currentSlideIndex].slideId,	578	slideId: this.allSlide[this.currentSlideIndex].slideId,
579	},	579	},
580	});	580	});
581	},	581	},
582	createComment() {	582	createComment() {
583	console.log("===", this.comment);	583	console.log("===", this.comment);
584	var obj = {	584	var obj = {
585	caseStudyId: this.currentSlideData.caseStudyId,	585	caseStudyId: this.currentSlideData.caseStudyId,
586	slideId: this.currentSlideData.slideId,	586	slideId: this.currentSlideData.slideId,
587	comment: this.comment,	587	comment: this.comment,
588	};	588	};
589	axios	589	axios
590	.post("/bounceBoard/comment", obj, {	590	.post("/bounceBoard/comment", obj, {
591	headers: {	591	headers: {
592	Authorization: "Bearer " + this.usertoken,	592	Authorization: "Bearer " + this.usertoken,
593	},	593	},
594	})	594	})
595	.then((response) => {	595	.then((response) => {
596	this.comment = null;	596	this.comment = null;
597	this.getComment();	597	this.getComment();
598	console.log(response);	598	console.log(response);
599	})	599	})
600	.catch((error) => {	600	.catch((error) => {
601	if (error.response) {	601	if (error.response) {
602	this.$toaster.error(error.response.data.message);	602	this.$toaster.error(error.response.data.message);
603	}	603	}
604	});	604	});
605	},	605	},
606		606
607	createChildComment(cmnt) {	607	createChildComment(cmnt) {
608	console.log(cmnt, "===", this.comment);	608	console.log(cmnt, "===", this.comment);
609	var obj = {	609	var obj = {
610	caseStudyId: this.currentSlideData.caseStudyId,	610	caseStudyId: this.currentSlideData.caseStudyId,
611	slideId: this.currentSlideData.slideId,	611	slideId: this.currentSlideData.slideId,
612	comment: this.comment,	612	comment: this.comment,
613	parentId: cmnt._id,	613	parentId: cmnt._id,
614	};	614	};
615	axios	615	axios
616	.post("/bounceBoard/comment", obj, {	616	.post("/bounceBoard/comment", obj, {
617	headers: {	617	headers: {
618	Authorization: "Bearer " + this.usertoken,	618	Authorization: "Bearer " + this.usertoken,
619	},	619	},
620	})	620	})
621	.then((response) => {	621	.then((response) => {
622	this.comment = null;	622	this.comment = null;
623	this.discardRply(cmnt);	623	this.discardRply(cmnt);
624	this.getComment();	624	this.getComment();
625	console.log(response);	625	console.log(response);
626	})	626	})
627	.catch((error) => {	627	.catch((error) => {
628	if (error.response) {	628	if (error.response) {
629	this.$toaster.error(error.response.data.message);	629	this.$toaster.error(error.response.data.message);
630	}	630	}
631	});	631	});
632	},	632	},
633	getComment() {	633	getComment() {
634	axios	634	axios
635	.get(	635	.get(
636	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	636	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
637	{	637	{
638	headers: {	638	headers: {
639	Authorization: "Bearer " + this.usertoken,	639	Authorization: "Bearer " + this.usertoken,
640	},	640	},
641	}	641	}
642	)	642	)
643	.then((response) => {	643	.then((response) => {
644	console.log(response.data);	644	console.log(response.data);
645	var comments = [];	645	var comments = [];
646	var keys = Object.keys(response.data.data);	646	var keys = Object.keys(response.data.data);
647	response.data.data;	647	response.data.data;
648	keys.forEach((key_) => {	648	keys.forEach((key_) => {
649	comments.push(response.data.data[key_]);	649	comments.push(response.data.data[key_]);
650	});	650	});
651	comments.forEach((coment_) => {	651	comments.forEach((coment_) => {
652	coment_.childInput = false;	652	coment_.childInput = false;
653	});	653	});
654	console.log("comments", comments);	654	console.log("comments", comments);
655	this.commentList = comments;	655	this.commentList = comments;
656	})	656	})
657	.catch((error) => console.log(error));	657	.catch((error) => console.log(error));
658	},	658	},
659	dateGenerator(curreDate) {	659	dateGenerator(curreDate) {
660	var todayDate = moment(new Date(), "DD.MM.YYYY");	660	var todayDate = moment(new Date(), "DD.MM.YYYY");
661	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	661	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
662	var result = todayDate.diff(endDate, "days");	662	var result = todayDate.diff(endDate, "days");
663	var date = null;	663	var date = null;
664	if (result == 0) {	664	if (result == 0) {
665	date = "Today";	665	date = "Today";
666	} else {	666	} else {
667	date = result + " days ago";	667	date = result + " days ago";
668	}	668	}
669	return date;	669	return date;
670	},	670	},
671	goToLogin() {	671	goToLogin() {
672	this.$router.push("/login");	672	this.$router.push("/login");
673	},	673	},
674	goToSignUp() {	674	goToSignUp() {
675	this.$router.push("/");	675	this.$router.push("/");
676	},	676	},
677	chtbox_close() {	677	chtbox_close() {
678	$("#cht_box_close").removeClass("cht_close");	678	$("#cht_box_close").removeClass("cht_close");
679	$("#open_ct_box, .c_hide").show();	679	$("#open_ct_box, .c_hide").show();
680	$(".footer-top").addClass("white-bg");	680	$(".footer-top").addClass("white-bg");
681	},	681	},
682	open_ct_box() {	682	open_ct_box() {
683	$("#cht_box_close").addClass("cht_close");	683	$("#cht_box_close").addClass("cht_close");
684	$("#open_ct_box, .c_hide").hide();	684	$("#open_ct_box, .c_hide").hide();
685	$(".footer-top").removeClass("white-bg");	685	$(".footer-top").removeClass("white-bg");
686	},	686	},
687	eachRply(cmnt) {	687	eachRply(cmnt) {
688	cmnt.childInput = true;	688	cmnt.childInput = true;
689	this.parentInput = false;	689	this.parentInput = false;
690	this.comment = null;	690	this.comment = null;
691	setTimeout(() => {	691	setTimeout(() => {
692	document.getElementById("childInput").focus();	692	document.getElementById("childInput").focus();
693	}, 100);	693	}, 100);
694	},	694	},
695	discardRply(cmnt) {	695	discardRply(cmnt) {
696	cmnt.childInput = false;	696	cmnt.childInput = false;
697	this.parentInput = true;	697	this.parentInput = true;
698	this.comment = null;	698	this.comment = null;
699	},	699	},
700	reply_cht_box(i) {	700	reply_cht_box(i) {
701	console.log(this.commentList, "cmnt");	701	console.log(this.commentList, "cmnt");
702	$("#cht_box_close").addClass("cht_close");	702	$("#cht_box_close").addClass("cht_close");
703	$("#open_ct_box, .c_hide").hide();	703	$("#open_ct_box, .c_hide").hide();
704	$(".footer-top").removeClass("white-bg");	704	$(".footer-top").removeClass("white-bg");
705	this.commentList[i].childInput = true;	705	this.commentList[i].childInput = true;
706	this.parentInput = false;	706	this.parentInput = false;
707	this.comment = null;	707	this.comment = null;
708	setTimeout(() => {	708	setTimeout(() => {
709	document.getElementById("childInput").focus();	709	document.getElementById("childInput").focus();
710	}, 100);	710	}, 100);
711	},	711	},
712	likeComment(status, id) {	712	likeComment(status, id) {
713	console.log("===", this.comment);	713	console.log("===", this.comment);
714	var obj = {	714	var obj = {
715	commentId: id,	715	commentId: id,
716	like: status,	716	like: status,
717	};	717	};
718	axios	718	axios
719	.post("/bounceBoard/like", obj, {	719	.post("/bounceBoard/like", obj, {
720	headers: {	720	headers: {
721	Authorization: "Bearer " + this.usertoken,	721	Authorization: "Bearer " + this.usertoken,
722	},	722	},
723	})	723	})
724	.then((response) => {	724	.then((response) => {
725	this.getComment();	725	this.getComment();
726	console.log(response);	726	console.log(response);
727	})	727	})
728	.catch((error) => {	728	.catch((error) => {
729	if (error.response) {	729	if (error.response) {
730	this.$toaster.error(error.response.data.message);	730	this.$toaster.error(error.response.data.message);
731	}	731	}
732	});	732	});
733	},	733	},
734	getLastcomment(flag, commentArray) {	734	getLastcomment(flag, commentArray) {
735	var finalComment = null;	735	var finalComment = null;
736	var totalMessage = 0;	736	var totalMessage = 0;
737	var name = null;	737	var name = null;
738	commentArray.forEach((comment_) => {	738	commentArray.forEach((comment_) => {
739	if (comment_.comment != null) {	739	if (comment_.comment != null) {
740	name = comment_.user.name;	740	name = comment_.user.name;
741	finalComment = comment_.comment;	741	finalComment = comment_.comment;
742	totalMessage++;	742	totalMessage++;
743	}	743	}
744	});	744	});
745	if (flag == "count") {	745	if (flag == "count") {
746	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	746	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
747	} else if (flag == "name") {	747	} else if (flag == "name") {
748	return (name = name);	748	return (name = name);
749	} else {	749	} else {
750	return finalComment;	750	return finalComment;
751	}	751	}
752	},	752	},
753	commentExistCheck(i) {	753	commentExistCheck(i) {
754	console.log(this.commentList[i].comment);	754	console.log(this.commentList[i].comment);
755	var returnValue = false;	755	var returnValue = false;
756	if (this.commentList[i].comment) {	756	if (this.commentList[i].comment) {
757	returnValue = true;	757	returnValue = true;
758	}	758	}
759	return returnValue;	759	return returnValue;
760	},	760	},
761	},	761	},
762	};	762	};
763	//	763	//
764	</script>	764	</script>
765		765

src/components/TwoScreenWithInsight.vue

Diff comments View file @1f12ffc

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	<!-- chat box -->	8	<!-- chat box -->
9	<div class="bounce-board-wrp" id="cht_box_close">	9	<div class="bounce-board-wrp" id="cht_box_close">
10	<div class="inner-wrp-bc">	10	<div class="inner-wrp-bc">
11	<div class="bc-top-head">	11	<div class="bc-top-head">
12	<span class="bc-head">	12	<span class="bc-head">
13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
14	</span>	14	</span>
15	<div class="action-sort">	15	<div class="action-sort">
16	<!-- <span class="sort-by">SORT BY</span>	16	<!-- <span class="sort-by">SORT BY</span>
17	<div class="btn-group">	17	<div class="btn-group">
18	<button	18	<button
19	type="button"	19	type="button"
20	class="bc-sort-list dropdown-toggle"	20	class="bc-sort-list dropdown-toggle"
21	data-toggle="dropdown"	21	data-toggle="dropdown"
22	aria-haspopup="true"	22	aria-haspopup="true"
23	aria-expanded="false"	23	aria-expanded="false"
24	>	24	>
25	BEST	25	BEST
26	</button>	26	</button>
27	<div class="dropdown-menu short_by">	27	<div class="dropdown-menu short_by">
28	<a class="dropdown-item" href=""	28	<a class="dropdown-item" href="javasript:void(0);"
29	>BEST 1</a	29	>BEST 1</a
30	>	30	>
31	<a class="dropdown-item" href=""	31	<a class="dropdown-item" href="javasript:void(0);"
32	>BEST 2</a	32	>BEST 2</a
33	>	33	>
34	<a class="dropdown-item" href=""	34	<a class="dropdown-item" href="javasript:void(0);"
35	>BEST 3</a	35	>BEST 3</a
36	>	36	>
37	</div>	37	</div>
38	</div> -->	38	</div> -->
39	<a	39	<a
40	href=""	40	href="javasript:void(0);"
41	@click="chtbox_close"	41	@click="chtbox_close"
42	class="close_chat_bx"	42	class="close_chat_bx"
43	><img src="../assets/images/close.png" alt="close" /></a	43	><img src="../assets/images/close.png" alt="close" /></a
44	><!-- close -->	44	><!-- close -->
45	</div>	45	</div>
46	<!-- action sort -->	46	<!-- action sort -->
47	</div>	47	</div>
48	<!-- top head -->	48	<!-- top head -->
49	<div class="bounce-board-body">	49	<div class="bounce-board-body">
50	<!-- all user comments -->	50	<!-- all user comments -->
51	<ul class="bounced-user-comments">	51	<ul class="bounced-user-comments">
52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53	<div class="bc_brd_l"></div>	53	<div class="bc_brd_l"></div>
54	<!-- border -->	54	<!-- border -->
55	<div class="parent-full-width" v-if="cmnt.comment">	55	<div class="parent-full-width" v-if="cmnt.comment">
56	<div class="full-width">	56	<div class="full-width">
57	<div class="b-user-head">	57	<div class="b-user-head">
58	<img :src="cmnt.user.profilePic" />	58	<img :src="cmnt.user.profilePic" />
59	<span class="head-content">{{ cmnt.user.name }} </span>	59	<span class="head-content">{{ cmnt.user.name }} </span>
60	<ul>	60	<ul>
61	<li>	61	<li>
62	<span></span	62	<span></span
63	><img src="../assets/images/u-info-icon.png" />{{	63	><img src="../assets/images/u-info-icon.png" />{{
64	cmnt.user.karmaPoints	64	cmnt.user.karmaPoints
65	}}pts	65	}}pts
66	</li>	66	</li>
67	<li>	67	<li>
68	<span></span>{{ dateGenerator(cmnt.createdAt) }}	68	<span></span>{{ dateGenerator(cmnt.createdAt) }}
69	</li>	69	</li>
70	</ul>	70	</ul>
71	</div>	71	</div>
72	<!-- header -->	72	<!-- header -->
73	<p>	73	<p>
74	{{ cmnt.comment }}	74	{{ cmnt.comment }}
75	</p>	75	</p>
76	<div class="joined_wrapper">	76	<div class="joined_wrapper">
77	<ul class="joined-info info_bc_spc">	77	<ul class="joined-info info_bc_spc">
78	<li>	78	<li>
79	<img	79	<img
80	src="../assets/images/heart.svg"	80	src="../assets/images/heart.svg"
81	v-if="cmnt.like == false"	81	v-if="cmnt.like == false"
82	@click="likeComment(true, cmnt._id)"	82	@click="likeComment(true, cmnt._id)"
83	class="cursor-pointer"	83	class="cursor-pointer"
84	/>	84	/>
85	<img	85	<img
86	src="../assets/images/purple-heart.png"	86	src="../assets/images/purple-heart.png"
87	v-if="cmnt.like == true"	87	v-if="cmnt.like == true"
88	@click="likeComment(false, cmnt._id)"	88	@click="likeComment(false, cmnt._id)"
89	class="cursor-pointer"	89	class="cursor-pointer"
90	/>	90	/>
91	</li>	91	</li>
92	<li>	92	<li>
93	<a href="">	93	<a href="javasript:void(0);">
94	{{ cmnt.likes.length }}</a	94	{{ cmnt.likes.length }}</a
95	>	95	>
96	</li>	96	</li>
97	<li class="comment-spc">	97	<li class="comment-spc">
98	<img src="../assets/images/purple-comment.png" />	98	<img src="../assets/images/purple-comment.png" />
99	</li>	99	</li>
100	<li>	100	<li>
101	<a href="">	101	<a href="javasript:void(0);">
102	{{ cmnt.children.length }}</a	102	{{ cmnt.children.length }}</a
103	>	103	>
104	</li>	104	</li>
105	</ul>	105	</ul>
106	<div class="add_rply" v-if="!cmnt.childInput">	106	<div class="add_rply" v-if="!cmnt.childInput">
107	<input	107	<input
108	type="text"	108	type="text"
109	@click="eachRply(cmnt)"	109	@click="eachRply(cmnt)"
110	class="add_Rply_C"	110	class="add_Rply_C"
111	placeholder="Add your reply"	111	placeholder="Add your reply"
112	/>	112	/>
113	</div>	113	</div>
114	<!-- rly form -->	114	<!-- rly form -->
115	</div>	115	</div>
116	<!-- joined wrapper -->	116	<!-- joined wrapper -->
117	</div>	117	</div>
118	<!-- full width -->	118	<!-- full width -->
119	</div>	119	</div>
120	<div class="comments-footer each-ft" v-if="cmnt.childInput">	120	<div class="comments-footer each-ft" v-if="cmnt.childInput">
121	<textarea v-model="comment" id="childInput"></textarea>	121	<textarea v-model="comment" id="childInput"></textarea>
122	<div class="comments-footer-wrp">	122	<div class="comments-footer-wrp">
123	<a	123	<a
124	@click="createChildComment(cmnt)"	124	@click="createChildComment(cmnt)"
125	href=""	125	href="javasript:void(0);"
126	class="add_comments_chat reply-Wdth"	126	class="add_comments_chat reply-Wdth"
127	>Reply</a	127	>Reply</a
128	>	128	>
129	<a	129	<a
130	href=""	130	href="javasript:void(0);"
131	class="discard_bt"	131	class="discard_bt"
132	@click="discardRply(cmnt)"	132	@click="discardRply(cmnt)"
133	><img src="../assets/images/discard.svg"	133	><img src="../assets/images/discard.svg"
134	/></a>	134	/></a>
135	</div>	135	</div>
136	</div>	136	</div>
137	<!-- parent -->	137	<!-- parent -->
138	<div	138	<div
139	class="child-full-width"	139	class="child-full-width"
140	v-for="(childCmnt, i) in cmnt.children"	140	v-for="(childCmnt, i) in cmnt.children"
141	:key="i"	141	:key="i"
142	>	142	>
143	<div class="full-width">	143	<div class="full-width">
144	<div class="b-user-head">	144	<div class="b-user-head">
145	<img :src="childCmnt.user.profilePic" />	145	<img :src="childCmnt.user.profilePic" />
146	<span class="head-content"	146	<span class="head-content"
147	>{{ childCmnt.user.name }}	147	>{{ childCmnt.user.name }}
148	</span>	148	</span>
149	<ul>	149	<ul>
150	<li>	150	<li>
151	<span></span	151	<span></span
152	><img src="../assets/images/u-info-icon.png" />{{	152	><img src="../assets/images/u-info-icon.png" />{{
153	childCmnt.user.karmaPoints	153	childCmnt.user.karmaPoints
154	}}pts	154	}}pts
155	</li>	155	</li>
156	<li>	156	<li>
157	<span></span	157	<span></span
158	>{{ dateGenerator(childCmnt.createdAt) }}	158	>{{ dateGenerator(childCmnt.createdAt) }}
159	</li>	159	</li>
160	</ul>	160	</ul>
161	</div>	161	</div>
162	<p>	162	<p>
163	{{ childCmnt.comment }}	163	{{ childCmnt.comment }}
164	</p>	164	</p>
165	<div class="joined_wrapper">	165	<div class="joined_wrapper">
166	<ul class="joined-info info_bc_spc">	166	<ul class="joined-info info_bc_spc">
167	<li>	167	<li>
168	<img	168	<img
169	src="../assets/images/heart.svg"	169	src="../assets/images/heart.svg"
170	v-if="childCmnt.like == false"	170	v-if="childCmnt.like == false"
171	@click="likeComment(true, childCmnt._id)"	171	@click="likeComment(true, childCmnt._id)"
172	class="cursor-pointer"	172	class="cursor-pointer"
173	/>	173	/>
174	<img	174	<img
175	src="../assets/images/purple-heart.png"	175	src="../assets/images/purple-heart.png"
176	v-if="childCmnt.like == true"	176	v-if="childCmnt.like == true"
177	@click="likeComment(false, childCmnt._id)"	177	@click="likeComment(false, childCmnt._id)"
178	class="cursor-pointer"	178	class="cursor-pointer"
179	/>	179	/>
180	</li>	180	</li>
181	<li>	181	<li>
182	<a href="">	182	<a href="javasript:void(0);">
183	{{ childCmnt.likes.length }}</a	183	{{ childCmnt.likes.length }}</a
184	>	184	>
185	</li>	185	</li>
186	</ul>	186	</ul>
187	</div>	187	</div>
188	</div>	188	</div>
189	</div>	189	</div>
190	<!-- eree -->	190	<!-- eree -->
191		191
192	<!-- comments footer -->	192	<!-- comments footer -->
193	</li>	193	</li>
194	</ul>	194	</ul>
195	</div>	195	</div>
196	<!-- bounce board body -->	196	<!-- bounce board body -->
197	<div class="comments-footer" v-if="parentInput">	197	<div class="comments-footer" v-if="parentInput">
198	<textarea v-model="comment"></textarea>	198	<textarea v-model="comment"></textarea>
199	<div class="comments-footer-wrp">	199	<div class="comments-footer-wrp">
200	<a	200	<a
201	href=""	201	href="javasript:void(0);"
202	class="add_comments_chat"	202	class="add_comments_chat"
203	@click="createComment"	203	@click="createComment"
204	><img src="../assets/images/add-comment.svg" /> Comment</a	204	><img src="../assets/images/add-comment.svg" /> Comment</a
205	>	205	>
206	</div>	206	</div>
207	</div>	207	</div>
208	<!-- comments footer -->	208	<!-- comments footer -->
209	</div>	209	</div>
210	</div>	210	</div>
211	<!-- bounceboard wrp -->	211	<!-- bounceboard wrp -->
212	<!-- chat box -->	212	<!-- chat box -->
213		213
214	<div class="allMWrp">	214	<div class="allMWrp">
215	<div class="mobile-screen-one p-left">	215	<div class="mobile-screen-one p-left">
216	<div class="top-area-blank"></div>	216	<div class="top-area-blank"></div>
217	<div class="m-screen-comments">	217	<div class="m-screen-comments">
218	<div class="single-author-li-comments" v-if="commentExistCheck(0)">	218	<div class="single-author-li-comments" v-if="commentExistCheck(0)">
219	<div class="a-intro-comments">	219	<div class="a-intro-comments">
220	<p>	220	<p>
221	{{commentList[0].comment}}	221	{{commentList[0].comment}}
222	</p>	222	</p>
223	<ul class="rly-comment-set">	223	<ul class="rly-comment-set">
224	<!-- like/dislike -->	224	<!-- like/dislike -->
225	<li>	225	<li>
226	<img	226	<img
227	src="../assets/images/heart.svg"	227	src="../assets/images/heart.svg"
228	v-if="commentList[0].like == false"	228	v-if="commentList[0].like == false"
229	@click="likeComment(true, commentList[0]._id)"	229	@click="likeComment(true, commentList[0]._id)"
230	class="cursor-pointer"	230	class="cursor-pointer"
231	/>	231	/>
232	<img	232	<img
233	src="../assets/images/purple-heart.png"	233	src="../assets/images/purple-heart.png"
234	v-if="commentList[0].like == true"	234	v-if="commentList[0].like == true"
235	@click="likeComment(false, commentList[0]._id)"	235	@click="likeComment(false, commentList[0]._id)"
236	class="cursor-pointer"	236	class="cursor-pointer"
237	/>	237	/>
238	<a href="javascript:void(0);">{{	238	<a href="javascript:void(0);">{{
239	commentList[0].likes.length	239	commentList[0].likes.length
240	}}</a>	240	}}</a>
241	</li>	241	</li>
242	<!-- like/dislike ends -->	242	<!-- like/dislike ends -->
243	<li>	243	<li>
244	<img src="../assets/images/rply.svg" />	244	<img src="../assets/images/rply.svg" />
245	<a href="javascript:void(0);" @click="reply_cht_box(0)"	245	<a href="javascript:void(0);" @click="reply_cht_box(0)"
246	>Reply</a	246	>Reply</a
247	>	247	>
248	</li>	248	</li>
249	</ul>	249	</ul>
250	</div>	250	</div>
251	<!-- comments box -->	251	<!-- comments box -->
252	</div>	252	</div>
253	<!-- single author comments -->	253	<!-- single author comments -->
254	<div class="single-author-li-comments" v-if="commentExistCheck(1)">	254	<div class="single-author-li-comments" v-if="commentExistCheck(1)">
255	<div class="a-intro-comments">	255	<div class="a-intro-comments">
256	<p>	256	<p>
257	{{commentList[1].comment}}	257	{{commentList[1].comment}}
258	</p>	258	</p>
259	<ul class="rly-comment-set">	259	<ul class="rly-comment-set">
260	<!-- like/dislike -->	260	<!-- like/dislike -->
261	<li>	261	<li>
262	<img	262	<img
263	src="../assets/images/heart.svg"	263	src="../assets/images/heart.svg"
264	v-if="commentList[1].like == false"	264	v-if="commentList[1].like == false"
265	@click="likeComment(true, commentList[1]._id)"	265	@click="likeComment(true, commentList[1]._id)"
266	class="cursor-pointer"	266	class="cursor-pointer"
267	/>	267	/>
268	<img	268	<img
269	src="../assets/images/purple-heart.png"	269	src="../assets/images/purple-heart.png"
270	v-if="commentList[1].like == true"	270	v-if="commentList[1].like == true"
271	@click="likeComment(false, commentList[1]._id)"	271	@click="likeComment(false, commentList[1]._id)"
272	class="cursor-pointer"	272	class="cursor-pointer"
273	/>	273	/>
274	<a href="javascript:void(0);">{{	274	<a href="javascript:void(0);">{{
275	commentList[1].likes.length	275	commentList[1].likes.length
276	}}</a>	276	}}</a>
277	</li>	277	</li>
278	<!-- like/dislike ends -->	278	<!-- like/dislike ends -->
279	<li>	279	<li>
280	<img src="../assets/images/rply.svg" />	280	<img src="../assets/images/rply.svg" />
281	<a href="javascript:void(0);" @click="reply_cht_box(1)"	281	<a href="javascript:void(0);" @click="reply_cht_box(1)"
282	>Reply</a	282	>Reply</a
283	>	283	>
284	</li>	284	</li>
285	</ul>	285	</ul>
286	</div>	286	</div>
287	<!-- comments box -->	287	<!-- comments box -->
288	</div>	288	</div>
289	<!-- single author comments -->	289	<!-- single author comments -->
290	</div>	290	</div>
291	<!-- comments -->	291	<!-- comments -->
292	<img	292	<img
293	:src="currentSlideData.payload.metaData.mobileImage1"	293	:src="currentSlideData.payload.metaData.mobileImage1"
294	class="m-screen"	294	class="m-screen"
295	/>	295	/>
296	<!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->	296	<!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->
297	<img	297	<img
298	:src="currentSlideData.payload.metaData.authorImage"	298	:src="currentSlideData.payload.metaData.authorImage"
299	class="user-photo-bottom"	299	class="user-photo-bottom"
300	/>	300	/>
301	</div>	301	</div>
302	<!-- mobile screen one -->	302	<!-- mobile screen one -->
303	<div class="mobile-screen-one p-right">	303	<div class="mobile-screen-one p-right">
304	<div class="top-area-blank"></div>	304	<div class="top-area-blank"></div>
305	<div class="view-ticket-wrp-ps">	305	<div class="view-ticket-wrp-ps">
306	<div class="single-author-li-comments">	306	<div class="single-author-li-comments">
307	<div class="a-intro-comments custom-selected-style">	307	<div class="a-intro-comments custom-selected-style">
308	<img src="../assets/images/rect.svg" class="rect" />	308	<img src="../assets/images/rect.svg" class="rect" />
309		309
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	{{ currentSlideData.payload.insight.title }}	315	{{ currentSlideData.payload.insight.title }}
316	</div>	316	</div>
317	<p>{{ currentSlideData.payload.insight.description }}</p>	317	<p>{{ currentSlideData.payload.insight.description }}</p>
318	<div class="footer">	318	<div class="footer">
319	<a href="javascript:void(0);" class="cit-16"	319	<a href="javascript:void(0);" class="cit-16"
320	>{{	320	>{{
321	currentSlideData.payload.insight.citations.length	321	currentSlideData.payload.insight.citations.length
322	}}	322	}}
323	Citations</a	323	Citations</a
324	>	324	>
325	<!-- <a href="javascript:void(0);" class="ft-share"	325	<!-- <a href="javascript:void(0);" class="ft-share"
326	><img src="../assets/images/reply-red.svg" /> Share from	326	><img src="../assets/images/reply-red.svg" /> Share from
327	library</a	327	library</a
328	> -->	328	> -->
329	</div>	329	</div>
330	<!-- footer -->	330	<!-- footer -->
331	</div>	331	</div>
332	<!-- comments box -->	332	<!-- comments box -->
333	</div>	333	</div>
334	<!-- single author comments -->	334	<!-- single author comments -->
335	</div>	335	</div>
336	<!-- comments -->	336	<!-- comments -->
337	<!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->	337	<!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->
338	<img	338	<img
339	:src="currentSlideData.payload.metaData.mobileImage2"	339	:src="currentSlideData.payload.metaData.mobileImage2"
340	class="m-screen"	340	class="m-screen"
341	/>	341	/>
342	</div>	342	</div>
343	<!-- mobile screen Two -->	343	<!-- mobile screen Two -->
344	</div>	344	</div>
345	<div class="footer-nav">	345	<div class="footer-nav">
346	<div class="footer-top white-bg">	346	<div class="footer-top white-bg">
347	<div class="row">	347	<div class="row">
348	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	348	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
349	<div class="row h-100p">	349	<div class="row h-100p">
350	<div	350	<div
351	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	351	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
352	>	352	>
353	<div class="ft-comments-group testi-photos-ct">	353	<div class="ft-comments-group testi-photos-ct">
354	<div class="c-with-photos">	354	<div class="c-with-photos">
355	<span class="count-comments"	355	<span class="count-comments"
356	>{{ getLastcomment("count", commentList) }}+	356	>{{ getLastcomment("count", commentList) }}+
357	Comments</span	357	Comments</span
358	><!-- count commets -->	358	><!-- count commets -->
359	<ul class="comments-photos">	359	<ul class="comments-photos">
360	<li><img src="../assets/images/c-photo-1.png" /></li>	360	<li><img src="../assets/images/c-photo-1.png" /></li>
361	<li><img src="../assets/images/c-photo-2.png" /></li>	361	<li><img src="../assets/images/c-photo-2.png" /></li>
362	<li><img src="../assets/images/c-photo-3.png" /></li>	362	<li><img src="../assets/images/c-photo-3.png" /></li>
363	</ul>	363	</ul>
364	<!-- comment photos -->	364	<!-- comment photos -->
365	</div>	365	</div>
366	<div class="comments-detail all-c-space">	366	<div class="comments-detail all-c-space">
367	<span	367	<span
368	>{{ getLastcomment("name", commentList) }}	368	>{{ getLastcomment("name", commentList) }}
369	<a href="javascript:void(0);" @click="open_ct_box"	369	<a href="javascript:void(0);" @click="open_ct_box"
370	>View All</a	370	>View All</a
371	></span	371	></span
372	>	372	>
373	<p>	373	<p>
374	<!-- I wonder what the difference between “Dunzo Assistant”	374	<!-- I wonder what the difference between “Dunzo Assistant”
375	and “Pickup and Drop... -->	375	and “Pickup and Drop... -->
376	{{ getLastcomment("msg", commentList) }}	376	{{ getLastcomment("msg", commentList) }}
377	</p>	377	</p>
378	</div>	378	</div>
379	<!-- comments detail -->	379	<!-- comments detail -->
380	</div>	380	</div>
381	<!-- comments Group -->	381	<!-- comments Group -->
382	</div>	382	</div>
383	</div>	383	</div>
384	</div>	384	</div>
385	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	385	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
386	<div class="comment-frm no-c-frm">	386	<div class="comment-frm no-c-frm">
387	<div class="row">	387	<div class="row">
388	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	388	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
389	<div class="form-group frm-wdth addfrm-spc">	389	<div class="form-group frm-wdth addfrm-spc">
390	<input	390	<input
391	type="text"	391	type="text"
392	class="form-control"	392	class="form-control"
393	placeholder="Something on your mind?"	393	placeholder="Something on your mind?"
394	id="open_ct_box"	394	id="open_ct_box"
395	v-model="comment"	395	v-model="comment"
396	/>	396	/>
397	</div>	397	</div>
398	</div>	398	</div>
399	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	399	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
400	<a	400	<a
401	href="javascript:void(0);"	401	href="javascript:void(0);"
402	@click="createComment"	402	@click="createComment"
403	class="add-comment"	403	class="add-comment"
404	><img src="../assets/images/add-comment.svg" />	404	><img src="../assets/images/add-comment.svg" />
405	Comment</a	405	Comment</a
406	>	406	>
407	</div>	407	</div>
408	</div>	408	</div>
409	<!-- comment from -->	409	<!-- comment from -->
410	</div>	410	</div>
411	</div>	411	</div>
412	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	412	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
413	<ul class="top-intro-bt">	413	<ul class="top-intro-bt">
414	<li>	414	<li>
415	<a href="javascript:void(0);" @click="goBack"	415	<a href="javascript:void(0);" @click="goBack"
416	><img src="../assets/images/skip-prev.svg" /> Prev</a	416	><img src="../assets/images/skip-prev.svg" /> Prev</a
417	>	417	>
418	</li>	418	</li>
419	<li>	419	<li>
420	<a href="javascript:void(0);" @click="goNext"	420	<a href="javascript:void(0);" @click="goNext"
421	><img src="../assets/images/skip-next.svg" /> Skip to next	421	><img src="../assets/images/skip-next.svg" /> Skip to next
422	slide</a	422	slide</a
423	>	423	>
424	</li>	424	</li>
425	</ul>	425	</ul>
426	</div>	426	</div>
427	<!-- buttons list -->	427	<!-- buttons list -->
428	</div>	428	</div>
429	</div>	429	</div>
430	<!-- footer top -->	430	<!-- footer top -->
431	<div class="footer-bottom">	431	<div class="footer-bottom">
432	<ul>	432	<ul>
433	<li class="active"></li>	433	<li class="active"></li>
434	<li></li>	434	<li></li>
435	</ul>	435	</ul>
436	</div>	436	</div>
437	<!-- footer top -->	437	<!-- footer top -->
438	</div>	438	</div>
439	<!-- footer -->	439	<!-- footer -->
440	</div>	440	</div>
441	<!-- body wrapper -->	441	<!-- body wrapper -->
442	</div>	442	</div>
443	<!-- main wrapper -->	443	<!-- main wrapper -->
444	</main>	444	</main>
445	</template>	445	</template>
446		446
447	<script>	447	<script>
448	import Vue from "vue";	448	import Vue from "vue";
449	import router from "../router";	449	import router from "../router";
450	import axios from "axios";	450	import axios from "axios";
451	import moment from "moment";	451	import moment from "moment";
452	import Header from "./Header";	452	import Header from "./Header";
453		453
454	export default {	454	export default {
455	components: {	455	components: {
456	Header: Header,	456	Header: Header,
457	},	457	},
458	name: "TwoScreenWithInsight",	458	name: "TwoScreenWithInsight",
459	data() {	459	data() {
460	return {	460	return {
461	allSlide: [],	461	allSlide: [],
462	currentSlideIndex: null,	462	currentSlideIndex: null,
463	currentSlideData: null,	463	currentSlideData: null,
464	//	464	//
465	usertoken: null,	465	usertoken: null,
466	commentList: [],	466	commentList: [],
467	comment: null,	467	comment: null,
468	parentInput: true,	468	parentInput: true,
469	};	469	};
470	},	470	},
471	mounted() {	471	mounted() {
472	var allSlideData = localStorage.getItem(	472	var allSlideData = localStorage.getItem(
473	"spotlight_slide" + this.$route.params.caseStudyId	473	"spotlight_slide" + this.$route.params.caseStudyId
474	);	474	);
475	if (allSlideData) {	475	if (allSlideData) {
476	this.allSlide = JSON.parse(allSlideData);	476	this.allSlide = JSON.parse(allSlideData);
477	this.getCurrentSlideData();	477	this.getCurrentSlideData();
478	}	478	}
479	var userdata = localStorage.getItem("spotlight_usertoken");	479	var userdata = localStorage.getItem("spotlight_usertoken");
480	if (userdata) {	480	if (userdata) {
481	userdata = JSON.parse(userdata);	481	userdata = JSON.parse(userdata);
482	this.usertoken = userdata.token;	482	this.usertoken = userdata.token;
483	this.getComment();	483	this.getComment();
484	}	484	}
485	},	485	},
486	methods: {	486	methods: {
487	getCurrentSlideData() {	487	getCurrentSlideData() {
488	var i = this.allSlide.findIndex(	488	var i = this.allSlide.findIndex(
489	(slide_) => slide_.slideId == this.$route.params.slideId	489	(slide_) => slide_.slideId == this.$route.params.slideId
490	);	490	);
491	this.currentSlideIndex = i;	491	this.currentSlideIndex = i;
492	this.currentSlideData = this.allSlide[i];	492	this.currentSlideData = this.allSlide[i];
493	console.log("currentSlideData", this.currentSlideData);	493	console.log("currentSlideData", this.currentSlideData);
494	},	494	},
495	goNext() {	495	goNext() {
496	this.currentSlideIndex++;	496	this.currentSlideIndex++;
497	this.$router.push({	497	this.$router.push({
498	name: this.allSlide[this.currentSlideIndex].ur,	498	name: this.allSlide[this.currentSlideIndex].ur,
499	params: {	499	params: {
500	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	500	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
501	slideId: this.allSlide[this.currentSlideIndex].slideId,	501	slideId: this.allSlide[this.currentSlideIndex].slideId,
502	},	502	},
503	});	503	});
504	},	504	},
505	goBack() {	505	goBack() {
506	this.currentSlideIndex--;	506	this.currentSlideIndex--;
507	this.$router.push({	507	this.$router.push({
508	name: this.allSlide[this.currentSlideIndex].ur,	508	name: this.allSlide[this.currentSlideIndex].ur,
509	params: {	509	params: {
510	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	510	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
511	slideId: this.allSlide[this.currentSlideIndex].slideId,	511	slideId: this.allSlide[this.currentSlideIndex].slideId,
512	},	512	},
513	});	513	});
514	},	514	},
515	createComment() {	515	createComment() {
516	console.log("===", this.comment);	516	console.log("===", this.comment);
517	var obj = {	517	var obj = {
518	caseStudyId: this.currentSlideData.caseStudyId,	518	caseStudyId: this.currentSlideData.caseStudyId,
519	slideId: this.currentSlideData.slideId,	519	slideId: this.currentSlideData.slideId,
520	comment: this.comment,	520	comment: this.comment,
521	};	521	};
522	axios	522	axios
523	.post("/bounceBoard/comment", obj, {	523	.post("/bounceBoard/comment", obj, {
524	headers: {	524	headers: {
525	Authorization: "Bearer " + this.usertoken,	525	Authorization: "Bearer " + this.usertoken,
526	},	526	},
527	})	527	})
528	.then((response) => {	528	.then((response) => {
529	this.comment = null;	529	this.comment = null;
530	this.getComment();	530	this.getComment();
531	console.log(response);	531	console.log(response);
532	})	532	})
533	.catch((error) => {	533	.catch((error) => {
534	if (error.response) {	534	if (error.response) {
535	this.$toaster.error(error.response.data.message);	535	this.$toaster.error(error.response.data.message);
536	}	536	}
537	});	537	});
538	},	538	},
539	createChildComment(cmnt) {	539	createChildComment(cmnt) {
540	console.log(cmnt, "===", this.comment);	540	console.log(cmnt, "===", this.comment);
541	var obj = {	541	var obj = {
542	caseStudyId: this.currentSlideData.caseStudyId,	542	caseStudyId: this.currentSlideData.caseStudyId,
543	slideId: this.currentSlideData.slideId,	543	slideId: this.currentSlideData.slideId,
544	comment: this.comment,	544	comment: this.comment,
545	parentId: cmnt._id,	545	parentId: cmnt._id,
546	};	546	};
547	axios	547	axios
548	.post("/bounceBoard/comment", obj, {	548	.post("/bounceBoard/comment", obj, {
549	headers: {	549	headers: {
550	Authorization: "Bearer " + this.usertoken,	550	Authorization: "Bearer " + this.usertoken,
551	},	551	},
552	})	552	})
553	.then((response) => {	553	.then((response) => {
554	this.comment = null;	554	this.comment = null;
555	this.discardRply(cmnt);	555	this.discardRply(cmnt);
556	this.getComment();	556	this.getComment();
557	console.log(response);	557	console.log(response);
558	})	558	})
559	.catch((error) => {	559	.catch((error) => {
560	if (error.response) {	560	if (error.response) {
561	this.$toaster.error(error.response.data.message);	561	this.$toaster.error(error.response.data.message);
562	}	562	}
563	});	563	});
564	},	564	},
565	getComment() {	565	getComment() {
566	axios	566	axios
567	.get(	567	.get(
568	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	568	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
569	{	569	{
570	headers: {	570	headers: {
571	Authorization: "Bearer " + this.usertoken,	571	Authorization: "Bearer " + this.usertoken,
572	},	572	},
573	}	573	}
574	)	574	)
575	.then((response) => {	575	.then((response) => {
576	console.log(response.data);	576	console.log(response.data);
577	var comments = [];	577	var comments = [];
578	var keys = Object.keys(response.data.data);	578	var keys = Object.keys(response.data.data);
579	response.data.data;	579	response.data.data;
580	keys.forEach((key_) => {	580	keys.forEach((key_) => {
581	comments.push(response.data.data[key_]);	581	comments.push(response.data.data[key_]);
582	});	582	});
583	comments.forEach((coment_) => {	583	comments.forEach((coment_) => {
584	coment_.childInput = false;	584	coment_.childInput = false;
585	});	585	});
586	console.log("comments", comments);	586	console.log("comments", comments);
587	this.commentList = comments;	587	this.commentList = comments;
588	})	588	})
589	.catch((error) => console.log(error));	589	.catch((error) => console.log(error));
590	},	590	},
591	dateGenerator(curreDate) {	591	dateGenerator(curreDate) {
592	var todayDate = moment(new Date(), "DD.MM.YYYY");	592	var todayDate = moment(new Date(), "DD.MM.YYYY");
593	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	593	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
594	var result = todayDate.diff(endDate, "days");	594	var result = todayDate.diff(endDate, "days");
595	return result;	595	return result;
596	},	596	},
597	goToLogin() {	597	goToLogin() {
598	this.$router.push("/login");	598	this.$router.push("/login");
599	},	599	},
600	goToSignUp() {	600	goToSignUp() {
601	this.$router.push("/");	601	this.$router.push("/");
602	},	602	},
603	open(url){	603	open(url){
604	window.open(url);	604	window.open(url);
605	},	605	},
606	chtbox_close() {	606	chtbox_close() {
607	$("#cht_box_close").removeClass("cht_close");	607	$("#cht_box_close").removeClass("cht_close");
608	$("#open_ct_box, .c_hide").show();	608	$("#open_ct_box, .c_hide").show();
609	$(".footer-top").addClass("white-bg");	609	$(".footer-top").addClass("white-bg");
610	},	610	},
611	open_ct_box() {	611	open_ct_box() {
612	$("#cht_box_close").addClass("cht_close");	612	$("#cht_box_close").addClass("cht_close");
613	$("#open_ct_box, .c_hide").hide();	613	$("#open_ct_box, .c_hide").hide();
614	$(".footer-top").removeClass("white-bg");	614	$(".footer-top").removeClass("white-bg");
615	},	615	},
616	eachRply(cmnt) {	616	eachRply(cmnt) {
617	cmnt.childInput = true;	617	cmnt.childInput = true;
618	this.parentInput = false;	618	this.parentInput = false;
619	this.comment = null;	619	this.comment = null;
620	setTimeout(() => {	620	setTimeout(() => {
621	document.getElementById("childInput").focus();	621	document.getElementById("childInput").focus();
622	}, 100);	622	}, 100);
623	},	623	},
624	discardRply(cmnt) {	624	discardRply(cmnt) {
625	cmnt.childInput = false;	625	cmnt.childInput = false;
626	this.parentInput = true;	626	this.parentInput = true;
627	this.comment = null;	627	this.comment = null;
628	},	628	},
629	reply_cht_box(i) {	629	reply_cht_box(i) {
630	console.log(this.commentList, "cmnt");	630	console.log(this.commentList, "cmnt");
631	$("#cht_box_close").addClass("cht_close");	631	$("#cht_box_close").addClass("cht_close");
632	$("#open_ct_box, .c_hide").hide();	632	$("#open_ct_box, .c_hide").hide();
633	$(".footer-top").removeClass("white-bg");	633	$(".footer-top").removeClass("white-bg");
634	this.commentList[i].childInput = true;	634	this.commentList[i].childInput = true;
635	this.parentInput = false;	635	this.parentInput = false;
636	this.comment = null;	636	this.comment = null;
637	setTimeout(() => {	637	setTimeout(() => {
638	document.getElementById("childInput").focus();	638	document.getElementById("childInput").focus();
639	}, 100);	639	}, 100);
640	},	640	},
641	likeComment(status, id) {	641	likeComment(status, id) {
642	console.log("===", this.comment);	642	console.log("===", this.comment);
643	var obj = {	643	var obj = {
644	commentId: id,	644	commentId: id,
645	like: status,	645	like: status,
646	};	646	};
647	axios	647	axios
648	.post("/bounceBoard/like", obj, {	648	.post("/bounceBoard/like", obj, {
649	headers: {	649	headers: {
650	Authorization: "Bearer " + this.usertoken,	650	Authorization: "Bearer " + this.usertoken,
651	},	651	},
652	})	652	})
653	.then((response) => {	653	.then((response) => {
654	this.getComment();	654	this.getComment();
655	console.log(response);	655	console.log(response);
656	})	656	})
657	.catch((error) => {	657	.catch((error) => {
658	if (error.response) {	658	if (error.response) {
659	this.$toaster.error(error.response.data.message);	659	this.$toaster.error(error.response.data.message);
660	}	660	}
661	});	661	});
662	},	662	},
663	getLastcomment(flag, commentArray) {	663	getLastcomment(flag, commentArray) {
664	var finalComment = null;	664	var finalComment = null;
665	var totalMessage = 0;	665	var totalMessage = 0;
666	var name = null;	666	var name = null;
667	commentArray.forEach((comment_) => {	667	commentArray.forEach((comment_) => {
668	if (comment_.comment != null) {	668	if (comment_.comment != null) {
669	name = comment_.user.name;	669	name = comment_.user.name;
670	finalComment = comment_.comment;	670	finalComment = comment_.comment;
671	totalMessage++;	671	totalMessage++;
672	}	672	}
673	});	673	});
674	if (flag == "count") {	674	if (flag == "count") {
675	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	675	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
676	} else if (flag =="name") {	676	} else if (flag =="name") {
677	return (name = name);	677	return (name = name);
678	} else {	678	} else {
679	return finalComment;	679	return finalComment;
680	}	680	}
681	},	681	},
682	commentExistCheck(i) {	682	commentExistCheck(i) {
683	console.log(this.commentList[i].comment);	683	console.log(this.commentList[i].comment);
684	var returnValue = false;	684	var returnValue = false;
685	if (this.commentList[i].comment) {	685	if (this.commentList[i].comment) {
686	returnValue = true;	686	returnValue = true;
687	}	687	}
688	return returnValue;	688	return returnValue;
689	},	689	},
690	},	690	},
691	};	691	};
692	//	692	//
693	</script>	693	</script>
694		694

src/components/TwoScreenWithoutInsight.vue

Diff comments View file @1f12ffc

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	<!-- chat box -->	8	<!-- chat box -->
9	<div class="bounce-board-wrp" id="cht_box_close">	9	<div class="bounce-board-wrp" id="cht_box_close">
10	<div class="inner-wrp-bc">	10	<div class="inner-wrp-bc">
11	<div class="bc-top-head">	11	<div class="bc-top-head">
12	<span class="bc-head">	12	<span class="bc-head">
13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
14	</span>	14	</span>
15	<div class="action-sort">	15	<div class="action-sort">
16	<!-- <span class="sort-by">SORT BY</span>	16	<!-- <span class="sort-by">SORT BY</span>
17	<div class="btn-group">	17	<div class="btn-group">
18	<button	18	<button
19	type="button"	19	type="button"
20	class="bc-sort-list dropdown-toggle"	20	class="bc-sort-list dropdown-toggle"
21	data-toggle="dropdown"	21	data-toggle="dropdown"
22	aria-haspopup="true"	22	aria-haspopup="true"
23	aria-expanded="false"	23	aria-expanded="false"
24	>	24	>
25	BEST	25	BEST
26	</button>	26	</button>
27	<div class="dropdown-menu short_by">	27	<div class="dropdown-menu short_by">
28	<a class="dropdown-item" href=""	28	<a class="dropdown-item" href="javasript:void(0);"
29	>BEST 1</a	29	>BEST 1</a
30	>	30	>
31	<a class="dropdown-item" href=""	31	<a class="dropdown-item" href="javasript:void(0);"
32	>BEST 2</a	32	>BEST 2</a
33	>	33	>
34	<a class="dropdown-item" href=""	34	<a class="dropdown-item" href="javasript:void(0);"
35	>BEST 3</a	35	>BEST 3</a
36	>	36	>
37	</div>	37	</div>
38	</div> -->	38	</div> -->
39	<a	39	<a
40	href=""	40	href="javasript:void(0);"
41	@click="chtbox_close"	41	@click="chtbox_close"
42	class="close_chat_bx"	42	class="close_chat_bx"
43	><img src="../assets/images/close.png" alt="close" /></a	43	><img src="../assets/images/close.png" alt="close" /></a
44	><!-- close -->	44	><!-- close -->
45	</div>	45	</div>
46	<!-- action sort -->	46	<!-- action sort -->
47	</div>	47	</div>
48	<!-- top head -->	48	<!-- top head -->
49	<div class="bounce-board-body">	49	<div class="bounce-board-body">
50	<!-- all user comments -->	50	<!-- all user comments -->
51	<ul class="bounced-user-comments">	51	<ul class="bounced-user-comments">
52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53	<div class="bc_brd_l"></div>	53	<div class="bc_brd_l"></div>
54	<!-- border -->	54	<!-- border -->
55	<div class="parent-full-width" v-if="cmnt.comment">	55	<div class="parent-full-width" v-if="cmnt.comment">
56	<div class="full-width">	56	<div class="full-width">
57	<div class="b-user-head">	57	<div class="b-user-head">
58	<img :src="cmnt.user.profilePic" />	58	<img :src="cmnt.user.profilePic" />
59	<span class="head-content">{{ cmnt.user.name }} </span>	59	<span class="head-content">{{ cmnt.user.name }} </span>
60	<ul>	60	<ul>
61	<li>	61	<li>
62	<span></span	62	<span></span
63	><img src="../assets/images/u-info-icon.png" />{{	63	><img src="../assets/images/u-info-icon.png" />{{
64	cmnt.user.karmaPoints	64	cmnt.user.karmaPoints
65	}}pts	65	}}pts
66	</li>	66	</li>
67	<li>	67	<li>
68	<span></span>{{ dateGenerator(cmnt.createdAt) }}	68	<span></span>{{ dateGenerator(cmnt.createdAt) }}
69	</li>	69	</li>
70	</ul>	70	</ul>
71	</div>	71	</div>
72	<!-- header -->	72	<!-- header -->
73	<p>	73	<p>
74	{{ cmnt.comment }}	74	{{ cmnt.comment }}
75	</p>	75	</p>
76	<div class="joined_wrapper">	76	<div class="joined_wrapper">
77	<ul class="joined-info info_bc_spc">	77	<ul class="joined-info info_bc_spc">
78	<li>	78	<li>
79	<img	79	<img
80	src="../assets/images/heart.svg"	80	src="../assets/images/heart.svg"
81	v-if="cmnt.like == false"	81	v-if="cmnt.like == false"
82	@click="likeComment(true, cmnt._id)"	82	@click="likeComment(true, cmnt._id)"
83	class="cursor-pointer"	83	class="cursor-pointer"
84	/>	84	/>
85	<img	85	<img
86	src="../assets/images/purple-heart.png"	86	src="../assets/images/purple-heart.png"
87	v-if="cmnt.like == true"	87	v-if="cmnt.like == true"
88	@click="likeComment(false, cmnt._id)"	88	@click="likeComment(false, cmnt._id)"
89	class="cursor-pointer"	89	class="cursor-pointer"
90	/>	90	/>
91	</li>	91	</li>
92	<li>	92	<li>
93	<a href="">	93	<a href="javasript:void(0);">
94	{{ cmnt.likes.length }}</a	94	{{ cmnt.likes.length }}</a
95	>	95	>
96	</li>	96	</li>
97	<li class="comment-spc">	97	<li class="comment-spc">
98	<img src="../assets/images/purple-comment.png" />	98	<img src="../assets/images/purple-comment.png" />
99	</li>	99	</li>
100	<li>	100	<li>
101	<a href="">	101	<a href="javasript:void(0);">
102	{{ cmnt.children.length }}</a	102	{{ cmnt.children.length }}</a
103	>	103	>
104	</li>	104	</li>
105	</ul>	105	</ul>
106	<div class="add_rply" v-if="!cmnt.childInput">	106	<div class="add_rply" v-if="!cmnt.childInput">
107	<input	107	<input
108	type="text"	108	type="text"
109	@click="eachRply(cmnt)"	109	@click="eachRply(cmnt)"
110	class="add_Rply_C"	110	class="add_Rply_C"
111	placeholder="Add your reply"	111	placeholder="Add your reply"
112	/>	112	/>
113	</div>	113	</div>
114	<!-- rly form -->	114	<!-- rly form -->
115	</div>	115	</div>
116	<!-- joined wrapper -->	116	<!-- joined wrapper -->
117	</div>	117	</div>
118	<!-- full width -->	118	<!-- full width -->
119	</div>	119	</div>
120	<div class="comments-footer each-ft" v-if="cmnt.childInput">	120	<div class="comments-footer each-ft" v-if="cmnt.childInput">
121	<textarea v-model="comment" id="childInput"></textarea>	121	<textarea v-model="comment" id="childInput"></textarea>
122	<div class="comments-footer-wrp">	122	<div class="comments-footer-wrp">
123	<a	123	<a
124	@click="createChildComment(cmnt)"	124	@click="createChildComment(cmnt)"
125	href=""	125	href="javasript:void(0);"
126	class="add_comments_chat reply-Wdth"	126	class="add_comments_chat reply-Wdth"
127	>Reply</a	127	>Reply</a
128	>	128	>
129	<a	129	<a
130	href=""	130	href="javasript:void(0);"
131	class="discard_bt"	131	class="discard_bt"
132	@click="discardRply(cmnt)"	132	@click="discardRply(cmnt)"
133	><img src="../assets/images/discard.svg"	133	><img src="../assets/images/discard.svg"
134	/></a>	134	/></a>
135	</div>	135	</div>
136	</div>	136	</div>
137	<!-- parent -->	137	<!-- parent -->
138	<div	138	<div
139	class="child-full-width"	139	class="child-full-width"
140	v-for="(childCmnt, i) in cmnt.children"	140	v-for="(childCmnt, i) in cmnt.children"
141	:key="i"	141	:key="i"
142	>	142	>
143	<div class="full-width">	143	<div class="full-width">
144	<div class="b-user-head">	144	<div class="b-user-head">
145	<img :src="childCmnt.user.profilePic" />	145	<img :src="childCmnt.user.profilePic" />
146	<span class="head-content"	146	<span class="head-content"
147	>{{ childCmnt.user.name }}	147	>{{ childCmnt.user.name }}
148	</span>	148	</span>
149	<ul>	149	<ul>
150	<li>	150	<li>
151	<span></span	151	<span></span
152	><img src="../assets/images/u-info-icon.png" />{{	152	><img src="../assets/images/u-info-icon.png" />{{
153	childCmnt.user.karmaPoints	153	childCmnt.user.karmaPoints
154	}}pts	154	}}pts
155	</li>	155	</li>
156	<li>	156	<li>
157	<span></span	157	<span></span
158	>{{ dateGenerator(childCmnt.createdAt) }}	158	>{{ dateGenerator(childCmnt.createdAt) }}
159	</li>	159	</li>
160	</ul>	160	</ul>
161	</div>	161	</div>
162	<p>	162	<p>
163	{{ childCmnt.comment }}	163	{{ childCmnt.comment }}
164	</p>	164	</p>
165	<div class="joined_wrapper">	165	<div class="joined_wrapper">
166	<ul class="joined-info info_bc_spc">	166	<ul class="joined-info info_bc_spc">
167	<li>	167	<li>
168	<img	168	<img
169	src="../assets/images/heart.svg"	169	src="../assets/images/heart.svg"
170	v-if="childCmnt.like == false"	170	v-if="childCmnt.like == false"
171	@click="likeComment(true, childCmnt._id)"	171	@click="likeComment(true, childCmnt._id)"
172	class="cursor-pointer"	172	class="cursor-pointer"
173	/>	173	/>
174	<img	174	<img
175	src="../assets/images/purple-heart.png"	175	src="../assets/images/purple-heart.png"
176	v-if="childCmnt.like == true"	176	v-if="childCmnt.like == true"
177	@click="likeComment(false, childCmnt._id)"	177	@click="likeComment(false, childCmnt._id)"
178	class="cursor-pointer"	178	class="cursor-pointer"
179	/>	179	/>
180	</li>	180	</li>
181	<li>	181	<li>
182	<a href="">	182	<a href="javasript:void(0);">
183	{{ childCmnt.likes.length }}</a	183	{{ childCmnt.likes.length }}</a
184	>	184	>
185	</li>	185	</li>
186	</ul>	186	</ul>
187	</div>	187	</div>
188	</div>	188	</div>
189	</div>	189	</div>
190	<!-- eree -->	190	<!-- eree -->
191		191
192	<!-- comments footer -->	192	<!-- comments footer -->
193	</li>	193	</li>
194	</ul>	194	</ul>
195	</div>	195	</div>
196	<!-- bounce board body -->	196	<!-- bounce board body -->
197	<div class="comments-footer" v-if="parentInput">	197	<div class="comments-footer" v-if="parentInput">
198	<textarea v-model="comment"></textarea>	198	<textarea v-model="comment"></textarea>
199	<div class="comments-footer-wrp">	199	<div class="comments-footer-wrp">
200	<a	200	<a
201	href=""	201	href="javasript:void(0);"
202	class="add_comments_chat"	202	class="add_comments_chat"
203	@click="createComment"	203	@click="createComment"
204	><img src="../assets/images/add-comment.svg" /> Comment</a	204	><img src="../assets/images/add-comment.svg" /> Comment</a
205	>	205	>
206	</div>	206	</div>
207	</div>	207	</div>
208	<!-- comments footer -->	208	<!-- comments footer -->
209	</div>	209	</div>
210	</div>	210	</div>
211	<!-- bounceboard wrp -->	211	<!-- bounceboard wrp -->
212	<!-- chat box -->	212	<!-- chat box -->
213		213
214	<div class="allMWrp">	214	<div class="allMWrp">
215	<div class="mobile-screen-one p-left">	215	<div class="mobile-screen-one p-left">
216	<div class="top-area-blank"></div>	216	<div class="top-area-blank"></div>
217	<!-- fixed area -->	217	<!-- fixed area -->
218	<div class="m-screen-comments">	218	<div class="m-screen-comments">
219	<div class="single-author-li-comments" v-if="commentExistCheck(0)">	219	<div class="single-author-li-comments" v-if="commentExistCheck(0)">
220	<div class="a-intro-comments">	220	<div class="a-intro-comments">
221	<p>	221	<p>
222	{{commentList[0].comment}}	222	{{commentList[0].comment}}
223	</p>	223	</p>
224	<ul class="rly-comment-set">	224	<ul class="rly-comment-set">
225	<!-- like/dislike -->	225	<!-- like/dislike -->
226	<li>	226	<li>
227	<img	227	<img
228	src="../assets/images/heart.svg"	228	src="../assets/images/heart.svg"
229	v-if="commentList[0].like == false"	229	v-if="commentList[0].like == false"
230	@click="likeComment(true, commentList[0]._id)"	230	@click="likeComment(true, commentList[0]._id)"
231	class="cursor-pointer"	231	class="cursor-pointer"
232	/>	232	/>
233	<img	233	<img
234	src="../assets/images/purple-heart.png"	234	src="../assets/images/purple-heart.png"
235	v-if="commentList[0].like == true"	235	v-if="commentList[0].like == true"
236	@click="likeComment(false, commentList[0]._id)"	236	@click="likeComment(false, commentList[0]._id)"
237	class="cursor-pointer"	237	class="cursor-pointer"
238	/>	238	/>
239	<a href="javascript:void(0);">{{	239	<a href="javascript:void(0);">{{
240	commentList[0].likes.length	240	commentList[0].likes.length
241	}}</a>	241	}}</a>
242	</li>	242	</li>
243	<!-- like/dislike ends -->	243	<!-- like/dislike ends -->
244	<li>	244	<li>
245	<img src="../assets/images/rply.svg" />	245	<img src="../assets/images/rply.svg" />
246	<a href="javascript:void(0);" @click="reply_cht_box(0)"	246	<a href="javascript:void(0);" @click="reply_cht_box(0)"
247	>Reply</a	247	>Reply</a
248	>	248	>
249	</li>	249	</li>
250	</ul>	250	</ul>
251	</div>	251	</div>
252	<!-- comments box -->	252	<!-- comments box -->
253	</div>	253	</div>
254	<!-- single author comments -->	254	<!-- single author comments -->
255	<div class="single-author-li-comments" v-if="commentExistCheck(1)">	255	<div class="single-author-li-comments" v-if="commentExistCheck(1)">
256	<div class="a-intro-comments">	256	<div class="a-intro-comments">
257	<p>	257	<p>
258	{{commentList[1].comment}}	258	{{commentList[1].comment}}
259	</p>	259	</p>
260	<ul class="rly-comment-set">	260	<ul class="rly-comment-set">
261	<!-- like/dislike -->	261	<!-- like/dislike -->
262	<li>	262	<li>
263	<img	263	<img
264	src="../assets/images/heart.svg"	264	src="../assets/images/heart.svg"
265	v-if="commentList[1].like == false"	265	v-if="commentList[1].like == false"
266	@click="likeComment(true, commentList[1]._id)"	266	@click="likeComment(true, commentList[1]._id)"
267	class="cursor-pointer"	267	class="cursor-pointer"
268	/>	268	/>
269	<img	269	<img
270	src="../assets/images/purple-heart.png"	270	src="../assets/images/purple-heart.png"
271	v-if="commentList[1].like == true"	271	v-if="commentList[1].like == true"
272	@click="likeComment(false, commentList[1]._id)"	272	@click="likeComment(false, commentList[1]._id)"
273	class="cursor-pointer"	273	class="cursor-pointer"
274	/>	274	/>
275	<a href="javascript:void(0);">{{	275	<a href="javascript:void(0);">{{
276	commentList[1].likes.length	276	commentList[1].likes.length
277	}}</a>	277	}}</a>
278	</li>	278	</li>
279	<!-- like/dislike ends -->	279	<!-- like/dislike ends -->
280	<li>	280	<li>
281	<img src="../assets/images/rply.svg" />	281	<img src="../assets/images/rply.svg" />
282	<a href="javascript:void(0);" @click="reply_cht_box(1)"	282	<a href="javascript:void(0);" @click="reply_cht_box(1)"
283	>Reply</a	283	>Reply</a
284	>	284	>
285	</li>	285	</li>
286	</ul>	286	</ul>
287	</div>	287	</div>
288	<!-- comments box -->	288	<!-- comments box -->
289	</div>	289	</div>
290	<!-- single author comments -->	290	<!-- single author comments -->
291	</div>	291	</div>
292	<!-- comments -->	292	<!-- comments -->
293	<img	293	<img
294	:src="currentSlideData.payload.metaData.mobileImage1"	294	:src="currentSlideData.payload.metaData.mobileImage1"
295	class="m-screen"	295	class="m-screen"
296	/>	296	/>
297	<img	297	<img
298	:src="currentSlideData.payload.metaData.authorImage"	298	:src="currentSlideData.payload.metaData.authorImage"
299	class="user-photo-bottom"	299	class="user-photo-bottom"
300	/>	300	/>
301	</div>	301	</div>
302	<!-- mobile screen one -->	302	<!-- mobile screen one -->
303	<div class="mobile-screen-one p-right">	303	<div class="mobile-screen-one p-right">
304	<div class="top-area-blank"></div>	304	<div class="top-area-blank"></div>
305	<!-- fixed area -->	305	<!-- fixed area -->
306	<div class="m-screen-right">	306	<div class="m-screen-right">
307	<div class="single-author-li-comments" v-if="commentExistCheck(2)">	307	<div class="single-author-li-comments" v-if="commentExistCheck(2)">
308	<div class="a-intro-comments">	308	<div class="a-intro-comments">
309	<p>	309	<p>
310	{{commentList[2].comment}}	310	{{commentList[2].comment}}
311	</p>	311	</p>
312	<ul class="rly-comment-set">	312	<ul class="rly-comment-set">
313	<!-- like/dislike -->	313	<!-- like/dislike -->
314	<li>	314	<li>
315	<img	315	<img
316	src="../assets/images/heart.svg"	316	src="../assets/images/heart.svg"
317	v-if="commentList[2].like == false"	317	v-if="commentList[2].like == false"
318	@click="likeComment(true, commentList[2]._id)"	318	@click="likeComment(true, commentList[2]._id)"
319	class="cursor-pointer"	319	class="cursor-pointer"
320	/>	320	/>
321	<img	321	<img
322	src="../assets/images/purple-heart.png"	322	src="../assets/images/purple-heart.png"
323	v-if="commentList[2].like == true"	323	v-if="commentList[2].like == true"
324	@click="likeComment(false, commentList[2]._id)"	324	@click="likeComment(false, commentList[2]._id)"
325	class="cursor-pointer"	325	class="cursor-pointer"
326	/>	326	/>
327	<a href="javascript:void(0);">{{	327	<a href="javascript:void(0);">{{
328	commentList[2].likes.length	328	commentList[2].likes.length
329	}}</a>	329	}}</a>
330	</li>	330	</li>
331	<!-- like/dislike ends -->	331	<!-- like/dislike ends -->
332	<li>	332	<li>
333	<img src="../assets/images/rply.svg" />	333	<img src="../assets/images/rply.svg" />
334	<a href="javascript:void(0);" @click="reply_cht_box(2)"	334	<a href="javascript:void(0);" @click="reply_cht_box(2)"
335	>Reply</a	335	>Reply</a
336	>	336	>
337	</li>	337	</li>
338	</ul>	338	</ul>
339	</div>	339	</div>
340	<!-- comments box -->	340	<!-- comments box -->
341	</div>	341	</div>
342	<!-- single author comments -->	342	<!-- single author comments -->
343	<div class="single-author-li-comments" v-if="commentExistCheck(3)">	343	<div class="single-author-li-comments" v-if="commentExistCheck(3)">
344	<div class="a-intro-comments">	344	<div class="a-intro-comments">
345	<p>	345	<p>
346	{{commentList[3].comment}}	346	{{commentList[3].comment}}
347	</p>	347	</p>
348	<ul class="rly-comment-set">	348	<ul class="rly-comment-set">
349	<!-- like/dislike -->	349	<!-- like/dislike -->
350	<li>	350	<li>
351	<img	351	<img
352	src="../assets/images/heart.svg"	352	src="../assets/images/heart.svg"
353	v-if="commentList[3].like == false"	353	v-if="commentList[3].like == false"
354	@click="likeComment(true, commentList[3]._id)"	354	@click="likeComment(true, commentList[3]._id)"
355	class="cursor-pointer"	355	class="cursor-pointer"
356	/>	356	/>
357	<img	357	<img
358	src="../assets/images/purple-heart.png"	358	src="../assets/images/purple-heart.png"
359	v-if="commentList[3].like == true"	359	v-if="commentList[3].like == true"
360	@click="likeComment(false, commentList[3]._id)"	360	@click="likeComment(false, commentList[3]._id)"
361	class="cursor-pointer"	361	class="cursor-pointer"
362	/>	362	/>
363	<a href="javascript:void(0);">{{	363	<a href="javascript:void(0);">{{
364	commentList[3].likes.length	364	commentList[3].likes.length
365	}}</a>	365	}}</a>
366	</li>	366	</li>
367	<!-- like/dislike ends -->	367	<!-- like/dislike ends -->
368	<li>	368	<li>
369	<img src="../assets/images/rply.svg" />	369	<img src="../assets/images/rply.svg" />
370	<a href="javascript:void(0);" @click="reply_cht_box(3)"	370	<a href="javascript:void(0);" @click="reply_cht_box(3)"
371	>Reply</a	371	>Reply</a
372	>	372	>
373	</li>	373	</li>
374	</ul>	374	</ul>
375	</div>	375	</div>
376	<!-- comments box -->	376	<!-- comments box -->
377	</div>	377	</div>
378	<!-- single author comments -->	378	<!-- single author comments -->
379	</div>	379	</div>
380	<!-- comments -->	380	<!-- comments -->
381	<img	381	<img
382	:src="currentSlideData.payload.metaData.mobileImage2"	382	:src="currentSlideData.payload.metaData.mobileImage2"
383	class="m-screen"	383	class="m-screen"
384	/>	384	/>
385	<img	385	<img
386	:src="currentSlideData.payload.metaData.authorImage"	386	:src="currentSlideData.payload.metaData.authorImage"
387	class="user-photo-bottom-r"	387	class="user-photo-bottom-r"
388	/>	388	/>
389	</div>	389	</div>
390	<!-- mobile screen Two -->	390	<!-- mobile screen Two -->
391	</div>	391	</div>
392		392
393	<!-- single author comments -->	393	<!-- single author comments -->
394	<div class="footer-nav">	394	<div class="footer-nav">
395	<div class="footer-top white-bg">	395	<div class="footer-top white-bg">
396	<div class="row">	396	<div class="row">
397	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	397	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
398	<div class="row h-100p">	398	<div class="row h-100p">
399	<div	399	<div
400	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	400	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
401	>	401	>
402	<div class="ft-comments-group testi-photos-ct">	402	<div class="ft-comments-group testi-photos-ct">
403	<div class="c-with-photos">	403	<div class="c-with-photos">
404	<span class="count-comments"	404	<span class="count-comments"
405	>{{ getLastcomment("count", commentList) }}+	405	>{{ getLastcomment("count", commentList) }}+
406	Comments</span	406	Comments</span
407	><!-- count commets -->	407	><!-- count commets -->
408	<ul class="comments-photos">	408	<ul class="comments-photos">
409	<!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->	409	<!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
410	<!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->	410	<!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
411	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->	411	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
412	</ul>	412	</ul>
413	<!-- comment photos -->	413	<!-- comment photos -->
414	</div>	414	</div>
415	<div class="comments-detail all-c-space">	415	<div class="comments-detail all-c-space">
416	<span	416	<span
417	>{{ getLastcomment("name", commentList) }}	417	>{{ getLastcomment("name", commentList) }}
418	<a href="javascript:void(0);" @click="open_ct_box"	418	<a href="javascript:void(0);" @click="open_ct_box"
419	>View All</a	419	>View All</a
420	></span	420	></span
421	>	421	>
422	<p>	422	<p>
423	<!-- I wonder what the difference between “Dunzo Assistant”	423	<!-- I wonder what the difference between “Dunzo Assistant”
424	and “Pickup and Drop... -->	424	and “Pickup and Drop... -->
425	{{ getLastcomment("msg", commentList) }}	425	{{ getLastcomment("msg", commentList) }}
426	</p>	426	</p>
427	</div>	427	</div>
428	<!-- comments detail -->	428	<!-- comments detail -->
429	</div>	429	</div>
430	<!-- comments Group -->	430	<!-- comments Group -->
431	</div>	431	</div>
432	</div>	432	</div>
433	</div>	433	</div>
434	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	434	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
435	<div class="comment-frm no-c-frm">	435	<div class="comment-frm no-c-frm">
436	<div class="row">	436	<div class="row">
437	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	437	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
438	<div class="form-group frm-wdth addfrm-spc">	438	<div class="form-group frm-wdth addfrm-spc">
439	<input	439	<input
440	type="text"	440	type="text"
441	class="form-control"	441	class="form-control"
442	placeholder="Something on your mind?"	442	placeholder="Something on your mind?"
443	id="open_ct_box"	443	id="open_ct_box"
444	v-model="comment"	444	v-model="comment"
445	/>	445	/>
446	</div>	446	</div>
447	</div>	447	</div>
448	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	448	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
449	<a	449	<a
450	href="javascript:void(0);"	450	href="javascript:void(0);"
451	@click="createComment"	451	@click="createComment"
452	class="add-comment"	452	class="add-comment"
453	><img src="../assets/images/add-comment.svg" />	453	><img src="../assets/images/add-comment.svg" />
454	Comment</a	454	Comment</a
455	>	455	>
456	</div>	456	</div>
457	</div>	457	</div>
458	<!-- comment from -->	458	<!-- comment from -->
459	</div>	459	</div>
460	</div>	460	</div>
461	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	461	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
462	<ul class="top-intro-bt">	462	<ul class="top-intro-bt">
463	<li>	463	<li>
464	<a href="javascript:void(0);" @click="goBack"	464	<a href="javascript:void(0);" @click="goBack"
465	><img src="../assets/images/skip-prev.svg" /> Prev</a	465	><img src="../assets/images/skip-prev.svg" /> Prev</a
466	>	466	>
467	</li>	467	</li>
468	<li>	468	<li>
469	<a href="javascript:void(0);" @click="goNext"	469	<a href="javascript:void(0);" @click="goNext"
470	><img src="../assets/images/skip-next.svg" /> Skip to next	470	><img src="../assets/images/skip-next.svg" /> Skip to next
471	slide</a	471	slide</a
472	>	472	>
473	</li>	473	</li>
474	</ul>	474	</ul>
475	</div>	475	</div>
476	<!-- buttons list -->	476	<!-- buttons list -->
477	</div>	477	</div>
478	</div>	478	</div>
479	<!-- footer top -->	479	<!-- footer top -->
480	<div class="footer-bottom">	480	<div class="footer-bottom">
481	<ul>	481	<ul>
482	<li class="active"></li>	482	<li class="active"></li>
483	<li></li>	483	<li></li>
484	</ul>	484	</ul>
485	</div>	485	</div>
486	<!-- footer top -->	486	<!-- footer top -->
487	</div>	487	</div>
488	<!-- footer -->	488	<!-- footer -->
489	</div>	489	</div>
490	<!-- body wrapper -->	490	<!-- body wrapper -->
491	</div>	491	</div>
492	<!-- main wrapper -->	492	<!-- main wrapper -->
493	</main>	493	</main>
494	</template>	494	</template>
495		495
496	<script>	496	<script>
497	import Vue from "vue";	497	import Vue from "vue";
498	import router from "../router";	498	import router from "../router";
499	import axios from "axios";	499	import axios from "axios";
500	import moment from 'moment';	500	import moment from 'moment';
501	import Header from "./Header";	501	import Header from "./Header";
502		502
503	export default {	503	export default {
504	components: {	504	components: {
505	Header: Header,	505	Header: Header,
506	},	506	},
507	name: "TwoScreenWithoutInsight",	507	name: "TwoScreenWithoutInsight",
508		508
509	data() {	509	data() {
510	return {	510	return {
511	allSlide: [],	511	allSlide: [],
512	currentSlideIndex: null,	512	currentSlideIndex: null,
513	currentSlideData: null,	513	currentSlideData: null,
514	//	514	//
515	usertoken: null,	515	usertoken: null,
516	commentList: [],	516	commentList: [],
517	comment: null,	517	comment: null,
518	parentInput: true,	518	parentInput: true,
519	};	519	};
520	},	520	},
521	mounted() {	521	mounted() {
522	var allSlideData = localStorage.getItem(	522	var allSlideData = localStorage.getItem(
523	"spotlight_slide" + this.$route.params.caseStudyId	523	"spotlight_slide" + this.$route.params.caseStudyId
524	);	524	);
525	if (allSlideData) {	525	if (allSlideData) {
526	this.allSlide = JSON.parse(allSlideData);	526	this.allSlide = JSON.parse(allSlideData);
527	this.getCurrentSlideData();	527	this.getCurrentSlideData();
528	}	528	}
529	var userdata = localStorage.getItem("spotlight_usertoken");	529	var userdata = localStorage.getItem("spotlight_usertoken");
530	if (userdata) {	530	if (userdata) {
531	userdata = JSON.parse(userdata);	531	userdata = JSON.parse(userdata);
532	this.usertoken = userdata.token;	532	this.usertoken = userdata.token;
533	this.getComment();	533	this.getComment();
534	}	534	}
535	},	535	},
536	methods: {	536	methods: {
537	getCurrentSlideData() {	537	getCurrentSlideData() {
538	var i = this.allSlide.findIndex(	538	var i = this.allSlide.findIndex(
539	(slide_) => slide_.slideId == this.$route.params.slideId	539	(slide_) => slide_.slideId == this.$route.params.slideId
540	);	540	);
541	this.currentSlideIndex = i;	541	this.currentSlideIndex = i;
542	this.currentSlideData = this.allSlide[i];	542	this.currentSlideData = this.allSlide[i];
543	console.log(this.currentSlideData, "this.usertoken", this.usertoken);	543	console.log(this.currentSlideData, "this.usertoken", this.usertoken);
544	console.log("currentSlideData", this.currentSlideData);	544	console.log("currentSlideData", this.currentSlideData);
545	},	545	},
546	goNext() {	546	goNext() {
547	this.currentSlideIndex++;	547	this.currentSlideIndex++;
548	this.$router.push({	548	this.$router.push({
549	name: this.allSlide[this.currentSlideIndex].ur,	549	name: this.allSlide[this.currentSlideIndex].ur,
550	params: {	550	params: {
551	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	551	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
552	slideId: this.allSlide[this.currentSlideIndex].slideId,	552	slideId: this.allSlide[this.currentSlideIndex].slideId,
553	},	553	},
554	});	554	});
555	},	555	},
556	goBack() {	556	goBack() {
557	this.currentSlideIndex--;	557	this.currentSlideIndex--;
558	this.$router.push({	558	this.$router.push({
559	name: this.allSlide[this.currentSlideIndex].ur,	559	name: this.allSlide[this.currentSlideIndex].ur,
560	params: {	560	params: {
561	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	561	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
562	slideId: this.allSlide[this.currentSlideIndex].slideId,	562	slideId: this.allSlide[this.currentSlideIndex].slideId,
563	},	563	},
564	});	564	});
565	},	565	},
566		566
567	createComment() {	567	createComment() {
568	console.log("===", this.comment);	568	console.log("===", this.comment);
569	var obj = {	569	var obj = {
570	caseStudyId: this.currentSlideData.caseStudyId,	570	caseStudyId: this.currentSlideData.caseStudyId,
571	slideId: this.currentSlideData.slideId,	571	slideId: this.currentSlideData.slideId,
572	comment: this.comment,	572	comment: this.comment,
573		573
574	};	574	};
575	axios	575	axios
576	.post("/bounceBoard/comment", obj, {	576	.post("/bounceBoard/comment", obj, {
577	headers: {	577	headers: {
578	Authorization: "Bearer " + this.usertoken,	578	Authorization: "Bearer " + this.usertoken,
579	},	579	},
580	})	580	})
581	.then((response) => {	581	.then((response) => {
582	this.comment = null;	582	this.comment = null;
583	this.getComment();	583	this.getComment();
584	console.log(response);	584	console.log(response);
585	})	585	})
586	.catch((error) => {	586	.catch((error) => {
587	if (error.response) {	587	if (error.response) {
588	this.$toaster.error(error.response.data.message);	588	this.$toaster.error(error.response.data.message);
589	}	589	}
590	});	590	});
591	},	591	},
592	createChildComment(cmnt) {	592	createChildComment(cmnt) {
593	console.log(cmnt,"===", this.comment);	593	console.log(cmnt,"===", this.comment);
594	var obj = {	594	var obj = {
595	caseStudyId: this.currentSlideData.caseStudyId,	595	caseStudyId: this.currentSlideData.caseStudyId,
596	slideId: this.currentSlideData.slideId,	596	slideId: this.currentSlideData.slideId,
597	comment: this.comment,	597	comment: this.comment,
598	parentId: cmnt._id,	598	parentId: cmnt._id,
599		599
600	};	600	};
601	axios	601	axios
602	.post("/bounceBoard/comment", obj, {	602	.post("/bounceBoard/comment", obj, {
603	headers: {	603	headers: {
604	Authorization: "Bearer " + this.usertoken,	604	Authorization: "Bearer " + this.usertoken,
605	},	605	},
606	})	606	})
607	.then((response) => {	607	.then((response) => {
608	this.comment = null;	608	this.comment = null;
609	this.discardRply(cmnt);	609	this.discardRply(cmnt);
610	this.getComment();	610	this.getComment();
611	console.log(response);	611	console.log(response);
612	})	612	})
613	.catch((error) => {	613	.catch((error) => {
614	if (error.response) {	614	if (error.response) {
615	this.$toaster.error(error.response.data.message);	615	this.$toaster.error(error.response.data.message);
616	}	616	}
617	});	617	});
618	},	618	},
619	getComment() {	619	getComment() {
620	axios	620	axios
621	.get(	621	.get(
622	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	622	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
623	{	623	{
624	headers: {	624	headers: {
625	Authorization: "Bearer " + this.usertoken,	625	Authorization: "Bearer " + this.usertoken,
626	},	626	},
627	}	627	}
628	)	628	)
629	.then((response) => {	629	.then((response) => {
630	console.log(response.data);	630	console.log(response.data);
631	var comments = [];	631	var comments = [];
632	var keys = Object.keys(response.data.data)	632	var keys = Object.keys(response.data.data)
633	response.data.data	633	response.data.data
634	keys.forEach((key_) => {	634	keys.forEach((key_) => {
635	comments.push(response.data.data[key_])	635	comments.push(response.data.data[key_])
636	});	636	});
637	comments.forEach((coment_)=>{	637	comments.forEach((coment_)=>{
638	coment_.childInput = false;	638	coment_.childInput = false;
639	});	639	});
640	console.log("comments",comments)	640	console.log("comments",comments)
641	this.commentList = comments;	641	this.commentList = comments;
642	})	642	})
643	.catch((error) => console.log(error));	643	.catch((error) => console.log(error));
644	},	644	},
645	dateGenerator(curreDate){	645	dateGenerator(curreDate){
646	var todayDate = moment(new Date(), "DD.MM.YYYY");	646	var todayDate = moment(new Date(), "DD.MM.YYYY");
647	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	647	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
648	var result = todayDate.diff(endDate, 'days');	648	var result = todayDate.diff(endDate, 'days');
649	return result;	649	return result;
650	},	650	},
651	goToLogin() {	651	goToLogin() {
652	this.$router.push("/login");	652	this.$router.push("/login");
653	},	653	},
654	goToSignUp() {	654	goToSignUp() {
655	this.$router.push("/");	655	this.$router.push("/");
656	},	656	},
657	chtbox_close() {	657	chtbox_close() {
658	$("#cht_box_close").removeClass("cht_close");	658	$("#cht_box_close").removeClass("cht_close");
659	$("#open_ct_box, .c_hide").show();	659	$("#open_ct_box, .c_hide").show();
660	$(".footer-top").addClass("white-bg");	660	$(".footer-top").addClass("white-bg");
661	},	661	},
662	open_ct_box() {	662	open_ct_box() {
663	$("#cht_box_close").addClass("cht_close");	663	$("#cht_box_close").addClass("cht_close");
664	$("#open_ct_box, .c_hide").hide();	664	$("#open_ct_box, .c_hide").hide();
665	$(".footer-top").removeClass("white-bg");	665	$(".footer-top").removeClass("white-bg");
666	},	666	},
667	eachRply(cmnt) {	667	eachRply(cmnt) {
668	cmnt.childInput = true;	668	cmnt.childInput = true;
669	this.parentInput = false;	669	this.parentInput = false;
670	this.comment = null;	670	this.comment = null;
671	setTimeout(() => {	671	setTimeout(() => {
672	document.getElementById("childInput").focus();	672	document.getElementById("childInput").focus();
673	}, 100);	673	}, 100);
674	},	674	},
675	discardRply(cmnt) {	675	discardRply(cmnt) {
676	cmnt.childInput = false;	676	cmnt.childInput = false;
677	this.parentInput = true;	677	this.parentInput = true;
678	this.comment = null;	678	this.comment = null;
679	},	679	},
680	reply_cht_box(i) {	680	reply_cht_box(i) {
681	console.log(this.commentList, "cmnt");	681	console.log(this.commentList, "cmnt");
682	$("#cht_box_close").addClass("cht_close");	682	$("#cht_box_close").addClass("cht_close");
683	$("#open_ct_box, .c_hide").hide();	683	$("#open_ct_box, .c_hide").hide();
684	$(".footer-top").removeClass("white-bg");	684	$(".footer-top").removeClass("white-bg");
685	this.commentList[i].childInput = true;	685	this.commentList[i].childInput = true;
686	this.parentInput = false;	686	this.parentInput = false;
687	this.comment = null;	687	this.comment = null;
688	setTimeout(() => {	688	setTimeout(() => {
689	document.getElementById("childInput").focus();	689	document.getElementById("childInput").focus();
690	}, 100);	690	}, 100);
691	},	691	},
692	likeComment(status, id) {	692	likeComment(status, id) {
693	console.log("===", this.comment);	693	console.log("===", this.comment);
694	var obj = {	694	var obj = {
695	commentId: id,	695	commentId: id,
696	like: status,	696	like: status,
697	};	697	};
698	axios	698	axios
699	.post("/bounceBoard/like", obj, {	699	.post("/bounceBoard/like", obj, {
700	headers: {	700	headers: {
701	Authorization: "Bearer " + this.usertoken,	701	Authorization: "Bearer " + this.usertoken,
702	},	702	},
703	})	703	})
704	.then((response) => {	704	.then((response) => {
705	this.getComment();	705	this.getComment();
706	console.log(response);	706	console.log(response);
707	})	707	})
708	.catch((error) => {	708	.catch((error) => {
709	if (error.response) {	709	if (error.response) {
710	this.$toaster.error(error.response.data.message);	710	this.$toaster.error(error.response.data.message);
711	}	711	}
712	});	712	});
713	},	713	},
714	getLastcomment(flag, commentArray) {	714	getLastcomment(flag, commentArray) {
715	var finalComment = null;	715	var finalComment = null;
716	var totalMessage = 0;	716	var totalMessage = 0;
717	var name = null;	717	var name = null;
718	commentArray.forEach((comment_) => {	718	commentArray.forEach((comment_) => {
719	if (comment_.comment != null) {	719	if (comment_.comment != null) {
720	name = comment_.user.name;	720	name = comment_.user.name;
721	finalComment = comment_.comment;	721	finalComment = comment_.comment;
722	totalMessage++;	722	totalMessage++;
723	}	723	}
724	});	724	});
725	if (flag == "count") {	725	if (flag == "count") {
726	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	726	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
727	} else if (flag =="name") {	727	} else if (flag =="name") {
728	return (name = name);	728	return (name = name);
729	} else {	729	} else {
730	return finalComment;	730	return finalComment;
731	}	731	}
732	},	732	},
733	commentExistCheck(i) {	733	commentExistCheck(i) {
734	console.log(this.commentList[i].comment);	734	console.log(this.commentList[i].comment);
735	var returnValue = false;	735	var returnValue = false;
736	if (this.commentList[i].comment) {	736	if (this.commentList[i].comment) {
737	returnValue = true;	737	returnValue = true;
738	}	738	}
739	return returnValue;	739	return returnValue;
740	},	740	},
741	},	741	},
742	};	742	};
743	//	743	//
744	</script>	744	</script>
745		745

src/components/noscreenshotSingleautho.vue

Diff comments View file @1f12ffc

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	<!-- menu wrapper -->	5	<!-- menu wrapper -->
6	<div class="intro-startup">	6	<div class="intro-startup">
7		7
8	<!-- chat box -->	8	<!-- chat box -->
9	<div class="bounce-board-wrp" id="cht_box_close">	9	<div class="bounce-board-wrp" id="cht_box_close">
10	<div class="inner-wrp-bc">	10	<div class="inner-wrp-bc">
11	<div class="bc-top-head">	11	<div class="bc-top-head">
12	<span class="bc-head">	12	<span class="bc-head">
13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	13	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
14	</span>	14	</span>
15	<div class="action-sort">	15	<div class="action-sort">
16	<!-- <span class="sort-by">SORT BY</span>	16	<!-- <span class="sort-by">SORT BY</span>
17	<div class="btn-group">	17	<div class="btn-group">
18	<button	18	<button
19	type="button"	19	type="button"
20	class="bc-sort-list dropdown-toggle"	20	class="bc-sort-list dropdown-toggle"
21	data-toggle="dropdown"	21	data-toggle="dropdown"
22	aria-haspopup="true"	22	aria-haspopup="true"
23	aria-expanded="false"	23	aria-expanded="false"
24	>	24	>
25	BEST	25	BEST
26	</button>	26	</button>
27	<div class="dropdown-menu short_by">	27	<div class="dropdown-menu short_by">
28	<a class="dropdown-item" href=""	28	<a class="dropdown-item" href="javasript:void(0);"
29	>BEST 1</a	29	>BEST 1</a
30	>	30	>
31	<a class="dropdown-item" href=""	31	<a class="dropdown-item" href="javasript:void(0);"
32	>BEST 2</a	32	>BEST 2</a
33	>	33	>
34	<a class="dropdown-item" href=""	34	<a class="dropdown-item" href="javasript:void(0);"
35	>BEST 3</a	35	>BEST 3</a
36	>	36	>
37	</div>	37	</div>
38	</div> -->	38	</div> -->
39	<a	39	<a
40	href=""	40	href="javasript:void(0);"
41	@click="chtbox_close"	41	@click="chtbox_close"
42	class="close_chat_bx"	42	class="close_chat_bx"
43	><img src="../assets/images/close.png" alt="close" /></a	43	><img src="../assets/images/close.png" alt="close" /></a
44	><!-- close -->	44	><!-- close -->
45	</div>	45	</div>
46	<!-- action sort -->	46	<!-- action sort -->
47	</div>	47	</div>
48	<!-- top head -->	48	<!-- top head -->
49	<div class="bounce-board-body">	49	<div class="bounce-board-body">
50	<!-- all user comments -->	50	<!-- all user comments -->
51	<ul class="bounced-user-comments">	51	<ul class="bounced-user-comments">
52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	52	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53	<div class="bc_brd_l"></div>	53	<div class="bc_brd_l"></div>
54	<!-- border -->	54	<!-- border -->
55	<div class="parent-full-width" v-if="cmnt.comment">	55	<div class="parent-full-width" v-if="cmnt.comment">
56	<div class="full-width">	56	<div class="full-width">
57	<div class="b-user-head">	57	<div class="b-user-head">
58	<img :src="cmnt.user.profilePic" />	58	<img :src="cmnt.user.profilePic" />
59	<span class="head-content">{{ cmnt.user.name }} </span>	59	<span class="head-content">{{ cmnt.user.name }} </span>
60	<ul>	60	<ul>
61	<li>	61	<li>
62	<span></span	62	<span></span
63	><img src="../assets/images/u-info-icon.png" />{{	63	><img src="../assets/images/u-info-icon.png" />{{
64	cmnt.user.karmaPoints	64	cmnt.user.karmaPoints
65	}}pts	65	}}pts
66	</li>	66	</li>
67	<li>	67	<li>
68	<span></span>{{ dateGenerator(cmnt.createdAt) }}	68	<span></span>{{ dateGenerator(cmnt.createdAt) }}
69	</li>	69	</li>
70	</ul>	70	</ul>
71	</div>	71	</div>
72	<!-- header -->	72	<!-- header -->
73	<p>	73	<p>
74	{{ cmnt.comment }}	74	{{ cmnt.comment }}
75	</p>	75	</p>
76	<div class="joined_wrapper">	76	<div class="joined_wrapper">
77	<ul class="joined-info info_bc_spc">	77	<ul class="joined-info info_bc_spc">
78	<li>	78	<li>
79	<img	79	<img
80	src="../assets/images/heart.svg"	80	src="../assets/images/heart.svg"
81	v-if="cmnt.like == false"	81	v-if="cmnt.like == false"
82	@click="likeComment(true, cmnt._id)"	82	@click="likeComment(true, cmnt._id)"
83	class="cursor-pointer"	83	class="cursor-pointer"
84	/>	84	/>
85	<img	85	<img
86	src="../assets/images/purple-heart.png"	86	src="../assets/images/purple-heart.png"
87	v-if="cmnt.like == true"	87	v-if="cmnt.like == true"
88	@click="likeComment(false, cmnt._id)"	88	@click="likeComment(false, cmnt._id)"
89	class="cursor-pointer"	89	class="cursor-pointer"
90	/>	90	/>
91	</li>	91	</li>
92	<li>	92	<li>
93	<a href="">	93	<a href="javasript:void(0);">
94	{{ cmnt.likes.length }}</a	94	{{ cmnt.likes.length }}</a
95	>	95	>
96	</li>	96	</li>
97	<li class="comment-spc">	97	<li class="comment-spc">
98	<img src="../assets/images/purple-comment.png" />	98	<img src="../assets/images/purple-comment.png" />
99	</li>	99	</li>
100	<li>	100	<li>
101	<a href="">	101	<a href="javasript:void(0);">
102	{{ cmnt.children.length }}</a	102	{{ cmnt.children.length }}</a
103	>	103	>
104	</li>	104	</li>
105	</ul>	105	</ul>
106	<div class="add_rply" v-if="!cmnt.childInput">	106	<div class="add_rply" v-if="!cmnt.childInput">
107	<input	107	<input
108	type="text"	108	type="text"
109	@click="eachRply(cmnt)"	109	@click="eachRply(cmnt)"
110	class="add_Rply_C"	110	class="add_Rply_C"
111	placeholder="Add your reply"	111	placeholder="Add your reply"
112	/>	112	/>
113	</div>	113	</div>
114	<!-- rly form -->	114	<!-- rly form -->
115	</div>	115	</div>
116	<!-- joined wrapper -->	116	<!-- joined wrapper -->
117	</div>	117	</div>
118	<!-- full width -->	118	<!-- full width -->
119	</div>	119	</div>
120	<div class="comments-footer each-ft" v-if="cmnt.childInput">	120	<div class="comments-footer each-ft" v-if="cmnt.childInput">
121	<textarea v-model="comment" id="childInput"></textarea>	121	<textarea v-model="comment" id="childInput"></textarea>
122	<div class="comments-footer-wrp">	122	<div class="comments-footer-wrp">
123	<a	123	<a
124	@click="createChildComment(cmnt)"	124	@click="createChildComment(cmnt)"
125	href=""	125	href="javasript:void(0);"
126	class="add_comments_chat reply-Wdth"	126	class="add_comments_chat reply-Wdth"
127	>Reply</a	127	>Reply</a
128	>	128	>
129	<a	129	<a
130	href=""	130	href="javasript:void(0);"
131	class="discard_bt"	131	class="discard_bt"
132	@click="discardRply(cmnt)"	132	@click="discardRply(cmnt)"
133	><img src="../assets/images/discard.svg"	133	><img src="../assets/images/discard.svg"
134	/></a>	134	/></a>
135	</div>	135	</div>
136	</div>	136	</div>
137	<!-- parent -->	137	<!-- parent -->
138	<div	138	<div
139	class="child-full-width"	139	class="child-full-width"
140	v-for="(childCmnt, i) in cmnt.children"	140	v-for="(childCmnt, i) in cmnt.children"
141	:key="i"	141	:key="i"
142	>	142	>
143	<div class="full-width">	143	<div class="full-width">
144	<div class="b-user-head">	144	<div class="b-user-head">
145	<img :src="childCmnt.user.profilePic" />	145	<img :src="childCmnt.user.profilePic" />
146	<span class="head-content"	146	<span class="head-content"
147	>{{ childCmnt.user.name }}	147	>{{ childCmnt.user.name }}
148	</span>	148	</span>
149	<ul>	149	<ul>
150	<li>	150	<li>
151	<span></span	151	<span></span
152	><img src="../assets/images/u-info-icon.png" />{{	152	><img src="../assets/images/u-info-icon.png" />{{
153	childCmnt.user.karmaPoints	153	childCmnt.user.karmaPoints
154	}}pts	154	}}pts
155	</li>	155	</li>
156	<li>	156	<li>
157	<span></span	157	<span></span
158	>{{ dateGenerator(childCmnt.createdAt) }}	158	>{{ dateGenerator(childCmnt.createdAt) }}
159	</li>	159	</li>
160	</ul>	160	</ul>
161	</div>	161	</div>
162	<p>	162	<p>
163	{{ childCmnt.comment }}	163	{{ childCmnt.comment }}
164	</p>	164	</p>
165	<div class="joined_wrapper">	165	<div class="joined_wrapper">
166	<ul class="joined-info info_bc_spc">	166	<ul class="joined-info info_bc_spc">
167	<li>	167	<li>
168	<img	168	<img
169	src="../assets/images/heart.svg"	169	src="../assets/images/heart.svg"
170	v-if="childCmnt.like == false"	170	v-if="childCmnt.like == false"
171	@click="likeComment(true, childCmnt._id)"	171	@click="likeComment(true, childCmnt._id)"
172	class="cursor-pointer"	172	class="cursor-pointer"
173	/>	173	/>
174	<img	174	<img
175	src="../assets/images/purple-heart.png"	175	src="../assets/images/purple-heart.png"
176	v-if="childCmnt.like == true"	176	v-if="childCmnt.like == true"
177	@click="likeComment(false, childCmnt._id)"	177	@click="likeComment(false, childCmnt._id)"
178	class="cursor-pointer"	178	class="cursor-pointer"
179	/>	179	/>
180	</li>	180	</li>
181	<li>	181	<li>
182	<a href="">	182	<a href="javasript:void(0);">
183	{{ childCmnt.likes.length }}</a	183	{{ childCmnt.likes.length }}</a
184	>	184	>
185	</li>	185	</li>
186	</ul>	186	</ul>
187	</div>	187	</div>
188	</div>	188	</div>
189	</div>	189	</div>
190	<!-- eree -->	190	<!-- eree -->
191		191
192	<!-- comments footer -->	192	<!-- comments footer -->
193	</li>	193	</li>
194	</ul>	194	</ul>
195	</div>	195	</div>
196	<!-- bounce board body -->	196	<!-- bounce board body -->
197	<div class="comments-footer" v-if="parentInput">	197	<div class="comments-footer" v-if="parentInput">
198	<textarea v-model="comment"></textarea>	198	<textarea v-model="comment"></textarea>
199	<div class="comments-footer-wrp">	199	<div class="comments-footer-wrp">
200	<a	200	<a
201	href=""	201	href="javasript:void(0);"
202	class="add_comments_chat"	202	class="add_comments_chat"
203	@click="createComment"	203	@click="createComment"
204	><img src="../assets/images/add-comment.svg" /> Comment</a	204	><img src="../assets/images/add-comment.svg" /> Comment</a
205	>	205	>
206	</div>	206	</div>
207	</div>	207	</div>
208	<!-- comments footer -->	208	<!-- comments footer -->
209	</div>	209	</div>
210	</div>	210	</div>
211	<!-- bounceboard wrp -->	211	<!-- bounceboard wrp -->
212	<!-- chat box -->	212	<!-- chat box -->
213		213
214	<div class="single-author-comments">	214	<div class="single-author-comments">
215	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->	215	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
216	<div class="ct-l-400">	216	<div class="ct-l-400">
217	<div class="single-author-li-comments" v-if="commentExistCheck(0)">	217	<div class="single-author-li-comments" v-if="commentExistCheck(0)">
218	<div class="a-intro-comments right-corner">	218	<div class="a-intro-comments right-corner">
219	<p>	219	<p>
220	{{commentList[0].comment}}	220	{{commentList[0].comment}}
221	</p>	221	</p>
222	<ul class="rly-comment-set">	222	<ul class="rly-comment-set">
223	<!-- like/dislike -->	223	<!-- like/dislike -->
224	<li>	224	<li>
225	<img	225	<img
226	src="../assets/images/heart.svg"	226	src="../assets/images/heart.svg"
227	v-if="commentList[0].like == false"	227	v-if="commentList[0].like == false"
228	@click="likeComment(true, commentList[0]._id)"	228	@click="likeComment(true, commentList[0]._id)"
229	class="cursor-pointer"	229	class="cursor-pointer"
230	/>	230	/>
231	<img	231	<img
232	src="../assets/images/purple-heart.png"	232	src="../assets/images/purple-heart.png"
233	v-if="commentList[0].like == true"	233	v-if="commentList[0].like == true"
234	@click="likeComment(false, commentList[0]._id)"	234	@click="likeComment(false, commentList[0]._id)"
235	class="cursor-pointer"	235	class="cursor-pointer"
236	/>	236	/>
237	<a href="javascript:void(0);">{{	237	<a href="javascript:void(0);">{{
238	commentList[0].likes.length	238	commentList[0].likes.length
239	}}</a>	239	}}</a>
240	</li>	240	</li>
241	<!-- like/dislike ends -->	241	<!-- like/dislike ends -->
242	<li>	242	<li>
243	<img src="../assets/images/rply.svg" />	243	<img src="../assets/images/rply.svg" />
244	<a href="javascript:void(0);" @click="reply_cht_box(0)"	244	<a href="javascript:void(0);" @click="reply_cht_box(0)"
245	>Reply</a	245	>Reply</a
246	>	246	>
247	</li>	247	</li>
248	</ul>	248	</ul>
249	</div>	249	</div>
250		250
251	</div> <!-- comments box -->	251	</div> <!-- comments box -->
252	<div class="single-author-li-comments" v-if="commentExistCheck(1)">	252	<div class="single-author-li-comments" v-if="commentExistCheck(1)">
253	<div class="a-intro-comments right-corner">	253	<div class="a-intro-comments right-corner">
254	<p>	254	<p>
255	{{commentList[1].comment}}	255	{{commentList[1].comment}}
256	</p>	256	</p>
257	<ul class="rly-comment-set">	257	<ul class="rly-comment-set">
258	<!-- like/dislike -->	258	<!-- like/dislike -->
259	<li>	259	<li>
260	<img	260	<img
261	src="../assets/images/heart.svg"	261	src="../assets/images/heart.svg"
262	v-if="commentList[1].like == false"	262	v-if="commentList[1].like == false"
263	@click="likeComment(true, commentList[1]._id)"	263	@click="likeComment(true, commentList[1]._id)"
264	class="cursor-pointer"	264	class="cursor-pointer"
265	/>	265	/>
266	<img	266	<img
267	src="../assets/images/purple-heart.png"	267	src="../assets/images/purple-heart.png"
268	v-if="commentList[1].like == true"	268	v-if="commentList[1].like == true"
269	@click="likeComment(false, commentList[1]._id)"	269	@click="likeComment(false, commentList[1]._id)"
270	class="cursor-pointer"	270	class="cursor-pointer"
271	/>	271	/>
272	<a href="javascript:void(0);">{{	272	<a href="javascript:void(0);">{{
273	commentList[1].likes.length	273	commentList[1].likes.length
274	}}</a>	274	}}</a>
275	</li>	275	</li>
276	<!-- like/dislike ends -->	276	<!-- like/dislike ends -->
277	<li>	277	<li>
278	<img src="../assets/images/rply.svg" />	278	<img src="../assets/images/rply.svg" />
279	<a href="javascript:void(0);" @click="reply_cht_box(1)"	279	<a href="javascript:void(0);" @click="reply_cht_box(1)"
280	>Reply</a	280	>Reply</a
281	>	281	>
282	</li>	282	</li>
283	</ul>	283	</ul>
284	</div>	284	</div>
285		285
286	</div> <!-- comments box -->	286	</div> <!-- comments box -->
287	</div>	287	</div>
288	<img	288	<img
289	class="s-user-comments m-0"	289	class="s-user-comments m-0"
290	:src="currentSlideData.payload.metaData.authorImage"	290	:src="currentSlideData.payload.metaData.authorImage"
291	/>	291	/>
292	<div class="comments-a-wrp ct-width">	292	<div class="comments-a-wrp ct-width">
293	<div class="single-author-li-comments ">	293	<div class="single-author-li-comments ">
294	<div class="a-intro-comments custom-selected-style custom-selected-style-2">	294	<div class="a-intro-comments custom-selected-style custom-selected-style-2">
295		295
296	<div class="top-wrp">	296	<div class="top-wrp">
297	{{currentSlideData.payload.insight.tag}} Insight <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>	297	{{currentSlideData.payload.insight.tag}} Insight <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
298	</div>	298	</div>
299	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>	299	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>
300	<p>{{currentSlideData.payload.insight.description}}	300	<p>{{currentSlideData.payload.insight.description}}
301	</p>	301	</p>
302	<div class="footer">	302	<div class="footer">
303	<a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>	303	<a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
304	<!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->	304	<!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
305	</div><!-- footer -->	305	</div><!-- footer -->
306		306
307	</div><!-- comments box -->	307	</div><!-- comments box -->
308	</div><!-- single author comments -->	308	</div><!-- single author comments -->
309	<!-- single author comments -->	309	<!-- single author comments -->
310		310
311	</div>	311	</div>
312	</div>	312	</div>
313	<!-- single author comments -->	313	<!-- single author comments -->
314	<div class="footer-nav">	314	<div class="footer-nav">
315	<div class="footer-top white-bg">	315	<div class="footer-top white-bg">
316	<div class="row">	316	<div class="row">
317	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	317	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
318	<div class="row h-100p">	318	<div class="row h-100p">
319	<div	319	<div
320	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	320	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
321	>	321	>
322	<div class="ft-comments-group testi-photos-ct">	322	<div class="ft-comments-group testi-photos-ct">
323	<div class="c-with-photos">	323	<div class="c-with-photos">
324	<span class="count-comments"	324	<span class="count-comments"
325	>{{ getLastcomment("count", commentList) }}+	325	>{{ getLastcomment("count", commentList) }}+
326	Comments</span	326	Comments</span
327	><!-- count commets -->	327	><!-- count commets -->
328	<ul class="comments-photos">	328	<ul class="comments-photos">
329	<!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->	329	<!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
330	<!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->	330	<!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
331	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->	331	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
332	</ul>	332	</ul>
333	<!-- comment photos -->	333	<!-- comment photos -->
334	</div>	334	</div>
335	<div class="comments-detail all-c-space">	335	<div class="comments-detail all-c-space">
336	<span	336	<span
337	>{{ getLastcomment("name", commentList) }}	337	>{{ getLastcomment("name", commentList) }}
338	<a href="javascript:void(0);" @click="open_ct_box"	338	<a href="javascript:void(0);" @click="open_ct_box"
339	>View All</a	339	>View All</a
340	></span	340	></span
341	>	341	>
342	<p>	342	<p>
343	<!-- I wonder what the difference between “Dunzo Assistant”	343	<!-- I wonder what the difference between “Dunzo Assistant”
344	and “Pickup and Drop... -->	344	and “Pickup and Drop... -->
345	{{ getLastcomment("msg", commentList) }}	345	{{ getLastcomment("msg", commentList) }}
346	</p>	346	</p>
347	</div>	347	</div>
348	<!-- comments detail -->	348	<!-- comments detail -->
349	</div>	349	</div>
350	<!-- comments Group -->	350	<!-- comments Group -->
351	</div>	351	</div>
352	</div>	352	</div>
353	</div>	353	</div>
354	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	354	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
355	<div class="comment-frm no-c-frm">	355	<div class="comment-frm no-c-frm">
356	<div class="row">	356	<div class="row">
357	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	357	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
358	<div class="form-group frm-wdth addfrm-spc">	358	<div class="form-group frm-wdth addfrm-spc">
359	<input	359	<input
360	type="text"	360	type="text"
361	class="form-control"	361	class="form-control"
362	placeholder="Something on your mind?"	362	placeholder="Something on your mind?"
363	id="open_ct_box"	363	id="open_ct_box"
364	v-model="comment"	364	v-model="comment"
365	/>	365	/>
366	</div>	366	</div>
367	</div>	367	</div>
368	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	368	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
369	<a	369	<a
370	href="javascript:void(0);"	370	href="javascript:void(0);"
371	@click="createComment"	371	@click="createComment"
372	class="add-comment"	372	class="add-comment"
373	><img src="../assets/images/add-comment.svg" />	373	><img src="../assets/images/add-comment.svg" />
374	Comment</a	374	Comment</a
375	>	375	>
376	</div>	376	</div>
377	</div>	377	</div>
378	<!-- comment from -->	378	<!-- comment from -->
379	</div>	379	</div>
380	</div>	380	</div>
381	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	381	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
382	<ul class="top-intro-bt">	382	<ul class="top-intro-bt">
383	<li>	383	<li>
384	<a href="javascript:void(0);" @click="goBack"	384	<a href="javascript:void(0);" @click="goBack"
385	><img src="../assets/images/skip-prev.svg" /> Prev</a	385	><img src="../assets/images/skip-prev.svg" /> Prev</a
386	>	386	>
387	</li>	387	</li>
388	<li>	388	<li>
389	<a href="javascript:void(0);" @click="goNext"	389	<a href="javascript:void(0);" @click="goNext"
390	><img src="../assets/images/skip-next.svg" /> Skip to next	390	><img src="../assets/images/skip-next.svg" /> Skip to next
391	slide</a	391	slide</a
392	>	392	>
393	</li>	393	</li>
394	</ul>	394	</ul>
395	</div>	395	</div>
396	<!-- buttons list -->	396	<!-- buttons list -->
397	</div>	397	</div>
398	</div>	398	</div>
399	<!-- footer top -->	399	<!-- footer top -->
400	<div class="footer-bottom">	400	<div class="footer-bottom">
401	<ul>	401	<ul>
402	<li class="active"></li>	402	<li class="active"></li>
403	<li></li>	403	<li></li>
404	</ul>	404	</ul>
405	</div>	405	</div>
406	<!-- footer top -->	406	<!-- footer top -->
407	</div>	407	</div>
408	<!-- footer -->	408	<!-- footer -->
409	</div>	409	</div>
410	<!-- body wrapper -->	410	<!-- body wrapper -->
411	</div>	411	</div>
412	<!-- main wrapper -->	412	<!-- main wrapper -->
413	</main>	413	</main>
414	</template>	414	</template>
415		415
416	<script>	416	<script>
417	import Vue from "vue";	417	import Vue from "vue";
418	import router from "../router";	418	import router from "../router";
419	import axios from "axios";	419	import axios from "axios";
420	import moment from 'moment';	420	import moment from 'moment';
421	import Header from "./Header";	421	import Header from "./Header";
422		422
423	export default {	423	export default {
424	components: {	424	components: {
425	Header: Header,	425	Header: Header,
426	},	426	},
427	name: "noscreenshotSingleautho",	427	name: "noscreenshotSingleautho",
428	data() {	428	data() {
429	return {	429	return {
430	allSlide: [],	430	allSlide: [],
431	currentSlideIndex: null,	431	currentSlideIndex: null,
432	currentSlideData: null,	432	currentSlideData: null,
433	//	433	//
434	usertoken: null,	434	usertoken: null,
435	commentList: [],	435	commentList: [],
436	comment: null,	436	comment: null,
437	parentInput: true,	437	parentInput: true,
438	};	438	};
439	},	439	},
440	mounted() {	440	mounted() {
441	var allSlideData = localStorage.getItem(	441	var allSlideData = localStorage.getItem(
442	"spotlight_slide" + this.$route.params.caseStudyId	442	"spotlight_slide" + this.$route.params.caseStudyId
443	);	443	);
444	if (allSlideData) {	444	if (allSlideData) {
445	this.allSlide = JSON.parse(allSlideData);	445	this.allSlide = JSON.parse(allSlideData);
446	this.getCurrentSlideData();	446	this.getCurrentSlideData();
447	}	447	}
448	var userdata = localStorage.getItem("spotlight_usertoken");	448	var userdata = localStorage.getItem("spotlight_usertoken");
449	if (userdata) {	449	if (userdata) {
450	userdata = JSON.parse(userdata);	450	userdata = JSON.parse(userdata);
451	this.usertoken = userdata.token;	451	this.usertoken = userdata.token;
452	this.getComment();	452	this.getComment();
453	}	453	}
454	},	454	},
455	methods: {	455	methods: {
456	getCurrentSlideData() {	456	getCurrentSlideData() {
457	var i = this.allSlide.findIndex(	457	var i = this.allSlide.findIndex(
458	(slide_) => slide_.slideId == this.$route.params.slideId	458	(slide_) => slide_.slideId == this.$route.params.slideId
459	);	459	);
460	this.currentSlideIndex = i;	460	this.currentSlideIndex = i;
461	this.currentSlideData = this.allSlide[i];	461	this.currentSlideData = this.allSlide[i];
462	console.log("currentSlideData", this.currentSlideData);	462	console.log("currentSlideData", this.currentSlideData);
463	},	463	},
464	goNext() {	464	goNext() {
465	this.currentSlideIndex++;	465	this.currentSlideIndex++;
466	this.$router.push({	466	this.$router.push({
467	name: this.allSlide[this.currentSlideIndex].ur,	467	name: this.allSlide[this.currentSlideIndex].ur,
468	params: {	468	params: {
469	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	469	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
470	slideId: this.allSlide[this.currentSlideIndex].slideId,	470	slideId: this.allSlide[this.currentSlideIndex].slideId,
471	},	471	},
472	});	472	});
473	},	473	},
474	goBack() {	474	goBack() {
475	this.currentSlideIndex--;	475	this.currentSlideIndex--;
476	this.$router.push({	476	this.$router.push({
477	name: this.allSlide[this.currentSlideIndex].ur,	477	name: this.allSlide[this.currentSlideIndex].ur,
478	params: {	478	params: {
479	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	479	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
480	slideId: this.allSlide[this.currentSlideIndex].slideId,	480	slideId: this.allSlide[this.currentSlideIndex].slideId,
481	},	481	},
482	});	482	});
483	},	483	},
484	createComment() {	484	createComment() {
485	console.log("===", this.comment);	485	console.log("===", this.comment);
486	var obj = {	486	var obj = {
487	caseStudyId: this.currentSlideData.caseStudyId,	487	caseStudyId: this.currentSlideData.caseStudyId,
488	slideId: this.currentSlideData.slideId,	488	slideId: this.currentSlideData.slideId,
489	comment: this.comment,	489	comment: this.comment,
490		490
491	};	491	};
492	axios	492	axios
493	.post("/bounceBoard/comment", obj, {	493	.post("/bounceBoard/comment", obj, {
494	headers: {	494	headers: {
495	Authorization: "Bearer " + this.usertoken,	495	Authorization: "Bearer " + this.usertoken,
496	},	496	},
497	})	497	})
498	.then((response) => {	498	.then((response) => {
499	this.comment = null;	499	this.comment = null;
500	this.getComment();	500	this.getComment();
501	console.log(response);	501	console.log(response);
502	})	502	})
503	.catch((error) => {	503	.catch((error) => {
504	if (error.response) {	504	if (error.response) {
505	this.$toaster.error(error.response.data.message);	505	this.$toaster.error(error.response.data.message);
506	}	506	}
507	});	507	});
508	},	508	},
509	createChildComment(cmnt) {	509	createChildComment(cmnt) {
510	console.log(cmnt,"===", this.comment);	510	console.log(cmnt,"===", this.comment);
511	var obj = {	511	var obj = {
512	caseStudyId: this.currentSlideData.caseStudyId,	512	caseStudyId: this.currentSlideData.caseStudyId,
513	slideId: this.currentSlideData.slideId,	513	slideId: this.currentSlideData.slideId,
514	comment: this.comment,	514	comment: this.comment,
515	parentId: cmnt._id,	515	parentId: cmnt._id,
516		516
517	};	517	};
518	axios	518	axios
519	.post("/bounceBoard/comment", obj, {	519	.post("/bounceBoard/comment", obj, {
520	headers: {	520	headers: {
521	Authorization: "Bearer " + this.usertoken,	521	Authorization: "Bearer " + this.usertoken,
522	},	522	},
523	})	523	})
524	.then((response) => {	524	.then((response) => {
525	this.comment = null;	525	this.comment = null;
526	this.discardRply(cmnt);	526	this.discardRply(cmnt);
527	this.getComment();	527	this.getComment();
528	console.log(response);	528	console.log(response);
529	})	529	})
530	.catch((error) => {	530	.catch((error) => {
531	if (error.response) {	531	if (error.response) {
532	this.$toaster.error(error.response.data.message);	532	this.$toaster.error(error.response.data.message);
533	}	533	}
534	});	534	});
535	},	535	},
536	getComment() {	536	getComment() {
537	axios	537	axios
538	.get(	538	.get(
539	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	539	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
540	{	540	{
541	headers: {	541	headers: {
542	Authorization: "Bearer " + this.usertoken,	542	Authorization: "Bearer " + this.usertoken,
543	},	543	},
544	}	544	}
545	)	545	)
546	.then((response) => {	546	.then((response) => {
547	console.log(response.data);	547	console.log(response.data);
548	var comments = [];	548	var comments = [];
549	var keys = Object.keys(response.data.data)	549	var keys = Object.keys(response.data.data)
550	response.data.data	550	response.data.data
551	keys.forEach((key_) => {	551	keys.forEach((key_) => {
552	comments.push(response.data.data[key_])	552	comments.push(response.data.data[key_])
553	});	553	});
554	comments.forEach((coment_)=>{	554	comments.forEach((coment_)=>{
555	coment_.childInput = false;	555	coment_.childInput = false;
556	});	556	});
557	console.log("comments",comments)	557	console.log("comments",comments)
558	this.commentList = comments;	558	this.commentList = comments;
559	})	559	})
560	.catch((error) => console.log(error));	560	.catch((error) => console.log(error));
561	},	561	},
562	dateGenerator(curreDate){	562	dateGenerator(curreDate){
563	var todayDate = moment(new Date(), "DD.MM.YYYY");	563	var todayDate = moment(new Date(), "DD.MM.YYYY");
564	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	564	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
565	var result = todayDate.diff(endDate, 'days');	565	var result = todayDate.diff(endDate, 'days');
566	return result;	566	return result;
567	},	567	},
568	goToLogin() {	568	goToLogin() {
569	this.$router.push("/login");	569	this.$router.push("/login");
570	},	570	},
571	goToSignUp() {	571	goToSignUp() {
572	this.$router.push("/");	572	this.$router.push("/");
573	},	573	},
574	open(url){	574	open(url){
575	window.open(url);	575	window.open(url);
576	},	576	},
577	chtbox_close() {	577	chtbox_close() {
578	$("#cht_box_close").removeClass("cht_close");	578	$("#cht_box_close").removeClass("cht_close");
579	$("#open_ct_box, .c_hide").show();	579	$("#open_ct_box, .c_hide").show();
580	$(".footer-top").addClass("white-bg");	580	$(".footer-top").addClass("white-bg");
581	},	581	},
582	open_ct_box() {	582	open_ct_box() {
583	$("#cht_box_close").addClass("cht_close");	583	$("#cht_box_close").addClass("cht_close");
584	$("#open_ct_box, .c_hide").hide();	584	$("#open_ct_box, .c_hide").hide();
585	$(".footer-top").removeClass("white-bg");	585	$(".footer-top").removeClass("white-bg");
586	},	586	},
587	eachRply(cmnt) {	587	eachRply(cmnt) {
588	cmnt.childInput = true;	588	cmnt.childInput = true;
589	this.parentInput = false;	589	this.parentInput = false;
590	this.comment = null;	590	this.comment = null;
591	setTimeout(() => {	591	setTimeout(() => {
592	document.getElementById("childInput").focus();	592	document.getElementById("childInput").focus();
593	}, 100);	593	}, 100);
594	},	594	},
595	discardRply(cmnt) {	595	discardRply(cmnt) {
596	cmnt.childInput = false;	596	cmnt.childInput = false;
597	this.parentInput = true;	597	this.parentInput = true;
598	this.comment = null;	598	this.comment = null;
599	},	599	},
600	reply_cht_box(i) {	600	reply_cht_box(i) {
601	console.log(this.commentList, "cmnt");	601	console.log(this.commentList, "cmnt");
602	$("#cht_box_close").addClass("cht_close");	602	$("#cht_box_close").addClass("cht_close");
603	$("#open_ct_box, .c_hide").hide();	603	$("#open_ct_box, .c_hide").hide();
604	$(".footer-top").removeClass("white-bg");	604	$(".footer-top").removeClass("white-bg");
605	this.commentList[i].childInput = true;	605	this.commentList[i].childInput = true;
606	this.parentInput = false;	606	this.parentInput = false;
607	this.comment = null;	607	this.comment = null;
608	setTimeout(() => {	608	setTimeout(() => {
609	document.getElementById("childInput").focus();	609	document.getElementById("childInput").focus();
610	}, 100);	610	}, 100);
611	},	611	},
612	likeComment(status, id) {	612	likeComment(status, id) {
613	console.log("===", this.comment);	613	console.log("===", this.comment);
614	var obj = {	614	var obj = {
615	commentId: id,	615	commentId: id,
616	like: status,	616	like: status,
617	};	617	};
618	axios	618	axios
619	.post("/bounceBoard/like", obj, {	619	.post("/bounceBoard/like", obj, {
620	headers: {	620	headers: {
621	Authorization: "Bearer " + this.usertoken,	621	Authorization: "Bearer " + this.usertoken,
622	},	622	},
623	})	623	})
624	.then((response) => {	624	.then((response) => {
625	this.getComment();	625	this.getComment();
626	console.log(response);	626	console.log(response);
627	})	627	})
628	.catch((error) => {	628	.catch((error) => {
629	if (error.response) {	629	if (error.response) {
630	this.$toaster.error(error.response.data.message);	630	this.$toaster.error(error.response.data.message);
631	}	631	}
632	});	632	});
633	},	633	},
634	getLastcomment(flag, commentArray) {	634	getLastcomment(flag, commentArray) {
635	var finalComment = null;	635	var finalComment = null;
636	var totalMessage = 0;	636	var totalMessage = 0;
637	var name = null;	637	var name = null;
638	commentArray.forEach((comment_) => {	638	commentArray.forEach((comment_) => {
639	if (comment_.comment != null) {	639	if (comment_.comment != null) {
640	name = comment_.user.name;	640	name = comment_.user.name;
641	finalComment = comment_.comment;	641	finalComment = comment_.comment;
642	totalMessage++;	642	totalMessage++;
643	}	643	}
644	});	644	});
645	if (flag == "count") {	645	if (flag == "count") {
646	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);	646	return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
647	} else if (flag =="name") {	647	} else if (flag =="name") {
648	return (name = name);	648	return (name = name);
649	} else {	649	} else {
650	return finalComment;	650	return finalComment;
651	}	651	}
652	},	652	},
653	commentExistCheck(i) {	653	commentExistCheck(i) {
654	console.log(this.commentList[i].comment);	654	console.log(this.commentList[i].comment);
655	var returnValue = false;	655	var returnValue = false;
656	if (this.commentList[i].comment) {	656	if (this.commentList[i].comment) {
657	returnValue = true;	657	returnValue = true;
658	}	658	}
659	return returnValue;	659	return returnValue;
660	},	660	},
661	},	661	},
662	};	662	};
663	//	663	//
664	</script>	664	</script>
665		665