viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 49055248c7df1d7032d645570cafe003d9d2674a

Authored by Digvijay Singh
1 parent 6b14d08e4c
Exists in master

offline synching

Showing 14 changed files with 1641 additions and 63 deletions   Show diff stats
src/auth/index.js
Diff comments   View file @4905524
1 import Vue from "vue"; 1 import Vue from "vue";
2 import createAuth0Client from "@auth0/auth0-spa-js"; 2 import createAuth0Client from "@auth0/auth0-spa-js";
3 import router from '../router' 3 import router from '../router'
4 import axios from 'axios' 4 import axios from 'axios'
5 /** Define a default action to perform after authentication */ 5 /** Define a default action to perform after authentication */
6 const DEFAULT_REDIRECT_CALLBACK = () => 6 const DEFAULT_REDIRECT_CALLBACK = () =>
7 window.history.replaceState({}, document.title, window.location.pathname); 7 window.history.replaceState({}, document.title, window.location.pathname);
8 8
9 let instance; 9 let instance;
10 10
11 /** Returns the current instance of the SDK */ 11 /** Returns the current instance of the SDK */
12 export const getInstance = () => instance; 12 export const getInstance = () => instance;
13 13
14 /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */ 14 /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
15 export const useAuth0 = ({ 15 export const useAuth0 = ({
16 onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, 16 onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
17 redirectUri = window.location.origin + '/intermediate', 17 redirectUri = window.location.origin + '/intermediate',
18 ...options 18 ...options
19 }) => { 19 }) => {
20 if (instance) return instance; 20 if (instance) return instance;
21 21
22 // The 'instance' is simply a Vue object 22 // The 'instance' is simply a Vue object
23 instance = new Vue({ 23 instance = new Vue({
24 data() { 24 data() {
25 return { 25 return {
26 loading: true, 26 loading: true,
27 isAuthenticated: false, 27 isAuthenticated: false,
28 user: {}, 28 user: {},
29 auth0Client: null, 29 auth0Client: null,
30 auth0Client1: null, 30 auth0Client1: null,
31 popupOpen: false, 31 popupOpen: false,
32 error: null 32 error: null
33 }; 33 };
34 }, 34 },
35 methods: { 35 methods: {
36 /** Authenticates the user using a popup window */ 36 /** Authenticates the user using a popup window */
37 async loginWithPopup(o) { 37 async loginWithPopup(o) {
38 this.popupOpen = true; 38 this.popupOpen = true;
39 39
40 try { 40 try {
41 await this.auth0Client.loginWithPopup(o); 41 await this.auth0Client.loginWithPopup(o);
42 } catch (e) { 42 } catch (e) {
43 // eslint-disable-next-line 43 // eslint-disable-next-line
44 console.error(e); 44 console.error(e);
45 } finally { 45 } finally {
46 this.popupOpen = false; 46 this.popupOpen = false;
47 } 47 }
48 48
49 this.user = await this.auth0Client.getUser(); 49 this.user = await this.auth0Client.getUser();
50 this.isAuthenticated = true; 50 this.isAuthenticated = true;
51 }, 51 },
52 /** Handles the callback when logging in using a redirect */ 52 /** Handles the callback when logging in using a redirect */
53 async handleRedirectCallback() { 53 async handleRedirectCallback() {
54 this.loading = true; 54 this.loading = true;
55 try { 55 try {
56 await this.auth0Client.handleRedirectCallback(); 56 await this.auth0Client.handleRedirectCallback();
57 this.user = await this.auth0Client.getUser(); 57 this.user = await this.auth0Client.getUser();
58 this.isAuthenticated = true; 58 this.isAuthenticated = true;
59 } catch (e) { 59 } catch (e) {
60 this.error = e; 60 this.error = e;
61 } finally { 61 } finally {
62 this.loading = false; 62 this.loading = false;
63 } 63 }
64 }, 64 },
65 /** Authenticates the user using the redirect method */ 65 /** Authenticates the user using the redirect method */
66 loginWithRedirect(o) { 66 loginWithRedirect(o) {
67 return this.auth0Client.loginWithRedirect(o); 67 return this.auth0Client.loginWithRedirect(o);
68 }, 68 },
69 /** Authenticates the user using the redirect method */ 69 /** Authenticates the user using the redirect method */
70 loginWithRedirectSignup(o) { 70 loginWithRedirectSignup(o) {
71 return this.auth0Client1.loginWithRedirect(o); 71 return this.auth0Client1.loginWithRedirect(o);
72 }, 72 },
73 /** Returns all the claims present in the ID token */ 73 /** Returns all the claims present in the ID token */
74 getIdTokenClaims(o) { 74 getIdTokenClaims(o) {
75 return this.auth0Client.getIdTokenClaims(o); 75 return this.auth0Client.getIdTokenClaims(o);
76 }, 76 },
77 /** Returns the access token. If the token is invalid or missing, a new one is retrieved */ 77 /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
78 getTokenSilently(o) { 78 getTokenSilently(o) {
79 return this.auth0Client.getTokenSilently(o); 79 return this.auth0Client.getTokenSilently(o);
80 }, 80 },
81 /** Gets the access token using a popup window */ 81 /** Gets the access token using a popup window */
82 82
83 getTokenWithPopup(o) { 83 getTokenWithPopup(o) {
84 return this.auth0Client.getTokenWithPopup(o); 84 return this.auth0Client.getTokenWithPopup(o);
85 }, 85 },
86 /** Logs the user out and removes their session on the authorization server */ 86 /** Logs the user out and removes their session on the authorization server */
87 logout(o) { 87 logout(o) {
88 return this.auth0Client.logout(o); 88 return this.auth0Client.logout(o);
89 } 89 }
90 }, 90 },
91 /** Use this lifecycle method to instantiate the SDK client */ 91 /** Use this lifecycle method to instantiate the SDK client */
92 async created() { 92 async created() {
93 // Create a new instance of the SDK client using members of the given options object 93 // Create a new instance of the SDK client using members of the given options object
94 this.auth0Client = await createAuth0Client({ 94 this.auth0Client = await createAuth0Client({
95 domain: options.domain, 95 domain: options.domain,
96 client_id: options.clientId, 96 client_id: options.clientId,
97 audience: options.audience, 97 audience: options.audience,
98 redirect_uri: redirectUri 98 redirect_uri: redirectUri
99 }); 99 });
100 100
101 this.auth0Client1 = await createAuth0Client({ 101 this.auth0Client1 = await createAuth0Client({
102 domain: options.domain, 102 domain: options.domain,
103 client_id: options.clientId, 103 client_id: options.clientId,
104 audience: options.audience, 104 audience: options.audience,
105 redirect_uri: redirectUri, 105 redirect_uri: redirectUri,
106 signup: 'yes' 106 signup: 'yes'
107 }); 107 });
108 108
109 try { 109 try {
110 // If the user is returning to the app after authentication.. 110 // If the user is returning to the app after authentication..
111 if ( 111 if (
112 window.location.search.includes("code=") && 112 window.location.search.includes("code=") &&
113 window.location.search.includes("state=") 113 window.location.search.includes("state=")
114 ) { 114 ) {
115 // handle the redirect and retrieve tokens 115 // handle the redirect and retrieve tokens
116 const { appState } = await this.auth0Client.handleRedirectCallback(); 116 const { appState } = await this.auth0Client.handleRedirectCallback();
117 const u = await this.auth0Client.getUser(); 117 const u = await this.auth0Client.getUser();
118 console.log("u",u) 118 console.log("u", u)
119 axios.post('/profile', { 119 axios.post('/profile', {
120 name: u.name, 120 name: u.name,
121 email: u.email, 121 email: u.email,
122 firstName: u.given_name, 122 firstName: u.given_name,
123 lastName: u.family_name, 123 lastName: u.family_name,
124 verified: true 124 verified: true
125 // profileImage: u.picture 125 // profileImage: u.picture
126 }).then(res => { 126 }).then(res => {
127 console.log("res",res); 127 console.log("res", res);
128 this.$toaster.success(res.data.message); 128 this.$toaster.success(res.data.message);
129 localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data)) 129 localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data))
130 console.log("onboarding", res) 130
131 router.push({ name: 'Profile' }) 131 var previousUrl = localStorage.getItem("previous_url_spotlight");
132 132 console.log("onboarding", previousUrl)
133 if (!previousUrl) {
134 router.push({ name: 'Profile' });
135 } else {
136 previousUrl = JSON.parse(previousUrl);
137 console.log("onboarding-2", previousUrl)
138 router.push({
139 name: previousUrl.ur,
140 params: {
141 caseStudyId: previousUrl.caseStudyId,
142 slideId: previousUrl.slideId,
143 },
144 });
145 localStorage.removeItem("previous_url_spotlight");
146
147 }
148
149
133 }).catch(err => { 150 }).catch(err => {
134 console.log(err) 151 console.log(err)
135 }) 152 })
136 153
137 154
138 // Notify subscribers that the redirect callback has happened, passing the appState 155 // Notify subscribers that the redirect callback has happened, passing the appState
139 // (useful for retrieving any pre-authentication state) 156 // (useful for retrieving any pre-authentication state)
140 onRedirectCallback(appState); 157 onRedirectCallback(appState);
141 } 158 }
142 } catch (e) { 159 } catch (e) {
143 this.error = e; 160 this.error = e;
144 } finally { 161 } finally {
145 // Initialize our internal authentication state 162 // Initialize our internal authentication state
146 this.isAuthenticated = await this.auth0Client.isAuthenticated(); 163 this.isAuthenticated = await this.auth0Client.isAuthenticated();
147 this.user = await this.auth0Client.getUser(); 164 this.user = await this.auth0Client.getUser();
148 this.loading = false; 165 this.loading = false;
149 } 166 }
150 } 167 }
151 }); 168 });
152 169
153 return instance; 170 return instance;
154 }; 171 };
155 172
156 // Create a simple Vue plugin to expose the wrapper object throughout the application 173 // Create a simple Vue plugin to expose the wrapper object throughout the application
157 export const Auth0Plugin = { 174 export const Auth0Plugin = {
158 install(Vue, options) { 175 install(Vue, options) {
159 Vue.prototype.$auth = useAuth0(options); 176 Vue.prototype.$auth = useAuth0(options);
160 } 177 }
161 }; 178 };
src/components/AuthorIntro.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <Header></Header> 5 <Header></Header>
6 6
7 <!-- menu wrapper --> 7 <!-- menu wrapper -->
8 <div class="intro-startup"> 8 <div class="intro-startup">
9 <div class="smasung-g-10wrp"> 9 <div class="smasung-g-10wrp">
10 <div class="top-area-blank"></div> 10 <div class="top-area-blank"></div>
11 <div class="samsung-compare-c"> 11 <div class="samsung-compare-c">
12 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div> 12 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>
13 13
14 </div> 14 </div>
15 <!-- <div class="samsung-compare-c"> 15 <!-- <div class="samsung-compare-c">
16 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> 16 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
17 <div class="vs">vs</div> 17 <div class="vs">vs</div>
18 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> 18 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
19 </div> --> 19 </div> -->
20 <div class="comment-box"> 20 <div class="comment-box">
21 <div class="comment-box-s-1"> 21 <div class="comment-box-s-1">
22 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> --> 22 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->
23 <p>{{currentSlideData.payload.metaData.textBox}}</p> 23 <p>{{currentSlideData.payload.metaData.textBox}}</p>
24 <div class="footer"> 24 <div class="footer">
25 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a> 25 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>
26 </div><!-- footer --> 26 </div><!-- footer -->
27 </div><!-- comment box 1 --> 27 </div><!-- comment box 1 -->
28 <!-- <div class="comment-box-s-1 comment-w-397"> 28 <!-- <div class="comment-box-s-1 comment-w-397">
29 <p> 29 <p>
30 Use arrow keys to navigate <br/> 30 Use arrow keys to navigate <br/>
31 <img src="../assets/images/key-arrow.jpg" class="key-arrow" /> 31 <img src="../assets/images/key-arrow.jpg" class="key-arrow" />
32 </p> 32 </p>
33 </div> --> 33 </div> -->
34 <!-- comment box 1 --> 34 <!-- comment box 1 -->
35 <div class="user-photo"> 35 <div class="user-photo">
36 <!-- <img src="../assets/images/comment-photo.png" /> --> 36 <!-- <img src="../assets/images/comment-photo.png" /> -->
37 <img :src="currentSlideData.payload.metaData.authorImage" /> 37 <img :src="currentSlideData.payload.metaData.authorImage" />
38 </div> 38 </div>
39 </div><!-- comment box --> 39 </div><!-- comment box -->
40 </div><!-- samsung g 10 --> 40 </div><!-- samsung g 10 -->
41 <div class="footer-nav"> 41 <div class="footer-nav">
42 <div class="footer-top"> 42 <div class="footer-top">
43 <ul class="top-intro-bt ps_right"> 43 <ul class="top-intro-bt ps_right">
44 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> 44 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
45 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> 45 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
46 </ul> 46 </ul>
47 </div><!-- footer top --> 47 </div><!-- footer top -->
48 <div class="footer-bottom"> 48 <div class="footer-bottom">
49 <ul> 49 <ul>
50 <li></li> 50 <li></li>
51 <li></li> 51 <li></li>
52 </ul> 52 </ul>
53 </div><!-- footer top --> 53 </div><!-- footer top -->
54 </div><!-- footer --> 54 </div><!-- footer -->
55 55
56 </div> 56 </div>
57 <!-- body wrapper --> 57 <!-- body wrapper -->
58 </div> 58 </div>
59 <!-- main wrapper --> 59 <!-- main wrapper -->
60 </main> 60 </main>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 import Vue from "vue"; 64 import Vue from "vue";
65 import router from "../router"; 65 import router from "../router";
66 import Header from "./Header"; 66 import Header from "./Header";
67 import axios from "axios";
67 68
68 export default { 69 export default {
69 components: { 70 components: {
70 Header: Header, 71 Header: Header,
71 }, 72 },
72 name: "AuthorIntro", 73 name: "AuthorIntro",
73 74
74 data() { 75 data() {
75 76
76 return { 77 return {
77 allSlide:[], 78 allSlide:[],
78 currentSlideIndex:null, 79 currentSlideIndex:null,
79 currentSlideData:null, 80 currentSlideData:null,
80 }; 81 };
81 }, 82 },
82 mounted() { 83 mounted() {
83 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); 84 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
84 if (allSlideData) { 85 if (allSlideData) {
85 this.allSlide = JSON.parse(allSlideData); 86 this.allSlide = JSON.parse(allSlideData);
86 this.getCurrentSlideData(); 87 this.getCurrentSlideData();
87 }else{ 88 }else{
88 this.$router.push("/login"); 89 this.generatecaseStudies();
89 } 90 }
90 91
91 }, 92 },
92 methods: { 93 methods: {
94 generatecaseStudies(){
95 axios
96 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
97 headers: {
98 Authorization: "Bearer " + this.usertoken,
99 },
100 })
101 .then((response) => {
102
103 console.log('response',response.data.data);
104 this.openStudy(response.data.data);
105 })
106 .catch((error) => console.log(error));
107 },
108
109
110
111 openStudy(payload) {
112 console.log("payload-", payload);
113 payload.intro.date = payload.createdAt;
114 payload.intro.focusPoint = payload.focusAreas;
115 axios
116 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
117 headers: {
118 Authorization: "Bearer " + this.usertoken,
119 },
120 })
121 .then((response) => {
122 this.createSlide(payload, response.data.data);
123 })
124 .catch((error) => console.log(error));
125 },
126
127 createSlide(payload, slides) {
128 var finalSlides = [];
129 slides.forEach((slides_) => {
130 var url = this.assignRoutes(slides_.templateId);
131 var obj = {
132 forward: true,
133 backward: true,
134 ur: url,
135 slideId: slides_._id,
136 caseStudyId: slides_.caseStudyId,
137 payload: {
138 metaData: slides_.metaData,
139 comments: slides_.comments,
140 insight: slides_.insight ? slides_.insight : null,
141 },
142 };
143 // slides_
144 finalSlides.push(obj);
145 });
146 console.log("payload", payload);
147 // add first slide at begining
148 finalSlides.unshift({
149 forward: true,
150 backward: false,
151 ur: "EpisodeIntro",
152 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
153 caseStudyId: payload._id,
154 payload: {
155 metaData: payload.intro,
156 comments: [],
157 },
158 });
159 finalSlides.push({
160 forward: true,
161 backward: false,
162 ur: "Outro",
163 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
164 caseStudyId: payload._id,
165 payload: {
166 metaData: payload.outro,
167 comments: [],
168 },
169 });
170
171 console.log(finalSlides);
172 console.log("payload", payload);
173 localStorage.setItem(
174 "spotlight_slide" + payload._id,
175 JSON.stringify(finalSlides)
176 );
177 this.allSlide = finalSlides;
178 this.getCurrentSlideData();
179 },
180 assignRoutes(tempId) {
181 // /episode-intro
182 // /outro
183 var routes = [
184 {
185 url: "AuthorIntro",
186 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
187 },
188 {
189 url: "NoScreenshotSingleAuthor",
190 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
191 },
192 {
193 url: "SingleMobileScreenInsightTwo",
194 tempId: "T3_cqNIf7tuqL4jyON63dA7",
195 },
196 {
197 url: "TwoScreenWithoutInsight",
198 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
199 },
200 {
201 url: "noscreenshotSingleautho",
202 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
203 },
204 {
205 url: "SingleMobileScreenInsightOne",
206 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
207 },
208 {
209 url: "TwoScreenWithInsight",
210 tempId: "T7_za3c3sYgx7bVvtKzasdf",
211 },
212 {
213 url: "AuthorReadingNow",
214 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
215 },
216 {
217 url: "AuthorReadingBreak",
218 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
219 },
220 ];
221 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
222 return routes[i].url;
223 },
224
225
93 getCurrentSlideData(){ 226 getCurrentSlideData(){
94 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); 227 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
95 this.currentSlideIndex = i; 228 this.currentSlideIndex = i;
96 this.currentSlideData = this.allSlide[i] 229 this.currentSlideData = this.allSlide[i]
97 console.log("currentSlideData",this.currentSlideData) 230 console.log("currentSlideData",this.currentSlideData)
98 231
99 }, 232 },
100 goNext(){ 233 goNext(){
101 this.currentSlideIndex++ 234 this.currentSlideIndex++
102 this.$router.push({ 235 this.$router.push({
103 name: this.allSlide[this.currentSlideIndex].ur, 236 name: this.allSlide[this.currentSlideIndex].ur,
104 params: { 237 params: {
105 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 238 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
106 slideId: this.allSlide[this.currentSlideIndex].slideId, 239 slideId: this.allSlide[this.currentSlideIndex].slideId,
107 }, 240 },
108 }); 241 });
109 242
110 }, 243 },
111 goBack(){ 244 goBack(){
112 this.currentSlideIndex-- 245 this.currentSlideIndex--
113 this.$router.push({ 246 this.$router.push({
114 name: this.allSlide[this.currentSlideIndex].ur, 247 name: this.allSlide[this.currentSlideIndex].ur,
115 params: { 248 params: {
116 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 249 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
117 slideId: this.allSlide[this.currentSlideIndex].slideId, 250 slideId: this.allSlide[this.currentSlideIndex].slideId,
118 }, 251 },
119 }); 252 });
120 253
121 }, 254 },
122 goToLogin() { 255 goToLogin() {
123 this.$router.push("/login"); 256 this.$router.push("/login");
124 }, 257 },
125 goToSignUp() { 258 goToSignUp() {
126 this.$router.push("/"); 259 this.$router.push("/");
127 }, 260 },
128 goToProfile() { 261 goToProfile() {
129 this.$router.push("/profile"); 262 this.$router.push("/profile");
130 }, 263 },
131 264
132 }, 265 },
133 }; 266 };
134 </script> 267 </script>
135 268
src/components/AuthorReadingBreak.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro app-discovery-bg"> 3 <div class="container-fluid episode-intro app-discovery-bg">
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 9
10 <div class="single-author-comments"> 10 <div class="single-author-comments">
11 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> 11 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
12 <div class="ct-l-400"> 12 <div class="ct-l-400">
13 <!-- <div class="single-author-li-comments" > --> 13 <!-- <div class="single-author-li-comments" > -->
14 <div class="right-corner font-style"> 14 <div class="right-corner font-style">
15 <p> 15 <p>
16 {{ currentSlideData.payload.metaData.description }} 16 {{ currentSlideData.payload.metaData.description }}
17 </p> 17 </p>
18 18
19 </div> 19 </div>
20 <!-- comments box --> 20 <!-- comments box -->
21 <!-- </div> --> 21 <!-- </div> -->
22 </div> 22 </div>
23 <img 23 <img
24 class="s-user-comments m-0" 24 class="s-user-comments m-0"
25 :src="currentSlideData.payload.metaData.authorImage" 25 :src="currentSlideData.payload.metaData.authorImage"
26 /> 26 />
27 <div class="comments-a-wrp ct-width"> 27 <div class="comments-a-wrp ct-width">
28 <div class="single-author-li-comments" > 28 <div class="single-author-li-comments" >
29 <div class="a-intro-comments"> 29 <div class="a-intro-comments">
30 <p> 30 <p>
31 {{ currentSlideData.payload.comments[0].comment }} 31 {{ currentSlideData.payload.comments[0].comment }}
32 </p> 32 </p>
33 <ul class="rly-comment-set"> 33 <ul class="rly-comment-set">
34 34
35 </ul> 35 </ul>
36 </div> 36 </div>
37 <!-- comments box --> 37 <!-- comments box -->
38 </div> 38 </div>
39 <!-- single author comments --> 39 <!-- single author comments -->
40 <div class="single-author-li-comments" > 40 <div class="single-author-li-comments" >
41 <div class="a-intro-comments"> 41 <div class="a-intro-comments">
42 <p> 42 <p>
43 {{ currentSlideData.payload.comments[1].comment }} 43 {{ currentSlideData.payload.comments[1].comment }}
44 </p> 44 </p>
45 <ul class="rly-comment-set"> 45 <ul class="rly-comment-set">
46 46
47 </ul> 47 </ul>
48 </div> 48 </div>
49 </div> 49 </div>
50 </div> 50 </div>
51 </div> 51 </div>
52 52
53 <div class="footer-nav"> 53 <div class="footer-nav">
54 <div class="footer-top"> 54 <div class="footer-top">
55 <ul class="top-intro-bt ps_right"> 55 <ul class="top-intro-bt ps_right">
56 <li> 56 <li>
57 <a href="javascript:void(0);" @click="goBack" 57 <a href="javascript:void(0);" @click="goBack"
58 ><img src="../assets/images/skip-prev.svg" /> Prev</a 58 ><img src="../assets/images/skip-prev.svg" /> Prev</a
59 > 59 >
60 </li> 60 </li>
61 <li> 61 <li>
62 <a href="javascript:void(0);" @click="goNext" 62 <a href="javascript:void(0);" @click="goNext"
63 ><img src="../assets/images/skip-next.svg" /> Skip to next 63 ><img src="../assets/images/skip-next.svg" /> Skip to next
64 slide</a 64 slide</a
65 > 65 >
66 </li> 66 </li>
67 </ul> 67 </ul>
68 </div> 68 </div>
69 <!-- footer top --> 69 <!-- footer top -->
70 <div class="footer-bottom"> 70 <div class="footer-bottom">
71 <ul> 71 <ul>
72 <li></li> 72 <li></li>
73 <li></li> 73 <li></li>
74 </ul> 74 </ul>
75 </div> 75 </div>
76 <!-- footer top --> 76 <!-- footer top -->
77 </div> 77 </div>
78 <!-- footer --> 78 <!-- footer -->
79 </div> 79 </div>
80 <!-- body wrapper --> 80 <!-- body wrapper -->
81 </div> 81 </div>
82 <!-- main wrapper --> 82 <!-- main wrapper -->
83 </main> 83 </main>
84 </template> 84 </template>
85 85
86 <script> 86 <script>
87 import Vue from "vue"; 87 import Vue from "vue";
88 import router from "../router"; 88 import router from "../router";
89 import Header from "./Header"; 89 import Header from "./Header";
90 import axios from "axios";
90 91
91 export default { 92 export default {
92 components: { 93 components: {
93 Header: Header, 94 Header: Header,
94 }, 95 },
95 name: "AuthorReadingBreak", 96 name: "AuthorReadingBreak",
96 97
97 data() { 98 data() {
98 return { 99 return {
99 allSlide: [], 100 allSlide: [],
100 currentSlideIndex: null, 101 currentSlideIndex: null,
101 currentSlideData: null, 102 currentSlideData: null,
102 }; 103 };
103 }, 104 },
104 mounted() { 105 mounted() {
105 var allSlideData = localStorage.getItem( 106 var allSlideData = localStorage.getItem(
106 "spotlight_slide" + this.$route.params.caseStudyId 107 "spotlight_slide" + this.$route.params.caseStudyId
107 ); 108 );
108 if (allSlideData) { 109 if (allSlideData) {
109 this.allSlide = JSON.parse(allSlideData); 110 this.allSlide = JSON.parse(allSlideData);
110 this.getCurrentSlideData(); 111 this.getCurrentSlideData();
111 }else{ 112 }else{
112 this.$router.push("/login"); 113 this.generatecaseStudies();
113 } 114 }
115
114 }, 116 },
115 methods: { 117 methods: {
118 generatecaseStudies(){
119 axios
120 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
121 headers: {
122 Authorization: "Bearer " + this.usertoken,
123 },
124 })
125 .then((response) => {
126
127 console.log('response',response.data.data);
128 this.openStudy(response.data.data);
129 })
130 .catch((error) => console.log(error));
131 },
132
133
134
135 openStudy(payload) {
136 console.log("payload-", payload);
137 payload.intro.date = payload.createdAt;
138 payload.intro.focusPoint = payload.focusAreas;
139 axios
140 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
141 headers: {
142 Authorization: "Bearer " + this.usertoken,
143 },
144 })
145 .then((response) => {
146 this.createSlide(payload, response.data.data);
147 })
148 .catch((error) => console.log(error));
149 },
150
151 createSlide(payload, slides) {
152 var finalSlides = [];
153 slides.forEach((slides_) => {
154 var url = this.assignRoutes(slides_.templateId);
155 var obj = {
156 forward: true,
157 backward: true,
158 ur: url,
159 slideId: slides_._id,
160 caseStudyId: slides_.caseStudyId,
161 payload: {
162 metaData: slides_.metaData,
163 comments: slides_.comments,
164 insight: slides_.insight ? slides_.insight : null,
165 },
166 };
167 // slides_
168 finalSlides.push(obj);
169 });
170 console.log("payload", payload);
171 // add first slide at begining
172 finalSlides.unshift({
173 forward: true,
174 backward: false,
175 ur: "EpisodeIntro",
176 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
177 caseStudyId: payload._id,
178 payload: {
179 metaData: payload.intro,
180 comments: [],
181 },
182 });
183 finalSlides.push({
184 forward: true,
185 backward: false,
186 ur: "Outro",
187 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
188 caseStudyId: payload._id,
189 payload: {
190 metaData: payload.outro,
191 comments: [],
192 },
193 });
194
195 console.log(finalSlides);
196 console.log("payload", payload);
197 localStorage.setItem(
198 "spotlight_slide" + payload._id,
199 JSON.stringify(finalSlides)
200 );
201 this.allSlide = finalSlides;
202 this.getCurrentSlideData();
203 },
204 assignRoutes(tempId) {
205 // /episode-intro
206 // /outro
207 var routes = [
208 {
209 url: "AuthorIntro",
210 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
211 },
212 {
213 url: "NoScreenshotSingleAuthor",
214 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
215 },
216 {
217 url: "SingleMobileScreenInsightTwo",
218 tempId: "T3_cqNIf7tuqL4jyON63dA7",
219 },
220 {
221 url: "TwoScreenWithoutInsight",
222 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
223 },
224 {
225 url: "noscreenshotSingleautho",
226 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
227 },
228 {
229 url: "SingleMobileScreenInsightOne",
230 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
231 },
232 {
233 url: "TwoScreenWithInsight",
234 tempId: "T7_za3c3sYgx7bVvtKzasdf",
235 },
236 {
237 url: "AuthorReadingNow",
238 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
239 },
240 {
241 url: "AuthorReadingBreak",
242 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
243 },
244 ];
245 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
246 return routes[i].url;
247 },
248
116 getCurrentSlideData() { 249 getCurrentSlideData() {
117 var i = this.allSlide.findIndex( 250 var i = this.allSlide.findIndex(
118 (slide_) => slide_.slideId == this.$route.params.slideId 251 (slide_) => slide_.slideId == this.$route.params.slideId
119 ); 252 );
120 this.currentSlideIndex = i; 253 this.currentSlideIndex = i;
121 this.currentSlideData = this.allSlide[i]; 254 this.currentSlideData = this.allSlide[i];
122 console.log( "currentSlideData", this.currentSlideData); 255 console.log( "currentSlideData", this.currentSlideData);
123 }, 256 },
124 goNext() { 257 goNext() {
125 this.currentSlideIndex++; 258 this.currentSlideIndex++;
126 this.$router.push({ 259 this.$router.push({
127 name: this.allSlide[this.currentSlideIndex].ur, 260 name: this.allSlide[this.currentSlideIndex].ur,
128 params: { 261 params: {
129 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 262 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
130 slideId: this.allSlide[this.currentSlideIndex].slideId, 263 slideId: this.allSlide[this.currentSlideIndex].slideId,
131 }, 264 },
132 }); 265 });
133 }, 266 },
134 goBack() { 267 goBack() {
135 this.currentSlideIndex--; 268 this.currentSlideIndex--;
136 this.$router.push({ 269 this.$router.push({
137 name: this.allSlide[this.currentSlideIndex].ur, 270 name: this.allSlide[this.currentSlideIndex].ur,
138 params: { 271 params: {
139 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 272 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
140 slideId: this.allSlide[this.currentSlideIndex].slideId, 273 slideId: this.allSlide[this.currentSlideIndex].slideId,
141 }, 274 },
142 }); 275 });
143 }, 276 },
144 goToLogin() { 277 goToLogin() {
145 this.$router.push("/login"); 278 this.$router.push("/login");
146 }, 279 },
147 goToSignUp() { 280 goToSignUp() {
148 this.$router.push("/"); 281 this.$router.push("/");
149 }, 282 },
150 goToProfile() { 283 goToProfile() {
151 this.$router.push("/profile"); 284 this.$router.push("/profile");
152 }, 285 },
153 286
154 287
155 }, 288 },
156 }; 289 };
157 </script> 290 </script>
158 <style > 291 <style >
159 .font-style{ 292 .font-style{
160 color:#35338C; 293 color:#35338C;
161 font-size:2rem; 294 font-size:2rem;
162 } 295 }
163 296
164 </style> 297 </style>
src/components/AuthorReadingNow.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro app-discovery-bg"> 3 <div class="container-fluid episode-intro app-discovery-bg">
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 <div class="spot-light-top"> 8 <div class="spot-light-top">
9 <img src="../assets/images/spot-light-top.svg" /> 9 <img src="../assets/images/spot-light-top.svg" />
10 <div class="app-discovery"> 10 <div class="app-discovery">
11 <div class="top-user"> 11 <div class="top-user">
12 <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/> 12 <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/>
13 <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/> 13 <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/>
14 <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/> 14 <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/>
15 <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/> 15 <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/>
16 <!-- <img src="../assets/images/app-photo.svg" /> --> 16 <!-- <img src="../assets/images/app-photo.svg" /> -->
17 </div><!-- top user --> 17 </div><!-- top user -->
18 <h1>{{currentSlideData.payload.metaData.title}}</h1> 18 <h1>{{currentSlideData.payload.metaData.title}}</h1>
19 <h2>{{currentSlideData.payload.metaData.count}}</h2> 19 <h2>{{currentSlideData.payload.metaData.count}}</h2>
20 <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" /> 20 <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" />
21 </div><!-- app Disovery --> 21 </div><!-- app Disovery -->
22 22
23 </div><!-- spot light top --> 23 </div><!-- spot light top -->
24 <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" /> 24 <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" />
25 <div class="footer-nav"> 25 <div class="footer-nav">
26 <div class="footer-top"> 26 <div class="footer-top">
27 <ul class="top-intro-bt ps_right"> 27 <ul class="top-intro-bt ps_right">
28 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> 28 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
29 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> 29 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
30 </ul> 30 </ul>
31 </div><!-- footer top --> 31 </div><!-- footer top -->
32 <div class="footer-bottom"> 32 <div class="footer-bottom">
33 <ul> 33 <ul>
34 <li></li> 34 <li></li>
35 <li></li> 35 <li></li>
36 </ul> 36 </ul>
37 </div><!-- footer top --> 37 </div><!-- footer top -->
38 </div><!-- footer --> 38 </div><!-- footer -->
39 39
40 </div> 40 </div>
41 <!-- body wrapper --> 41 <!-- body wrapper -->
42 </div> 42 </div>
43 <!-- main wrapper --> 43 <!-- main wrapper -->
44 </main> 44 </main>
45 </template> 45 </template>
46 46
47 <script> 47 <script>
48 import Vue from "vue"; 48 import Vue from "vue";
49 import router from "../router"; 49 import router from "../router";
50 import Header from "./Header"; 50 import Header from "./Header";
51 import axios from "axios";
51 52
52 export default { 53 export default {
53 components: { 54 components: {
54 Header: Header, 55 Header: Header,
55 }, 56 },
56 name: "AuthorReadingNow", 57 name: "AuthorReadingNow",
57 58
58 data() { 59 data() {
59 60
60 return { 61 return {
61 allSlide:[], 62 allSlide:[],
62 currentSlideIndex:null, 63 currentSlideIndex:null,
63 currentSlideData:null, 64 currentSlideData:null,
64 }; 65 };
65 }, 66 },
66 mounted() { 67 mounted() {
67 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); 68 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
68 if (allSlideData) { 69 if (allSlideData) {
69 this.allSlide = JSON.parse(allSlideData); 70 this.allSlide = JSON.parse(allSlideData);
70 this.getCurrentSlideData(); 71 this.getCurrentSlideData();
71 }else{ 72 }else{
72 this.$router.push("/login"); 73 this.generatecaseStudies();
73 } 74 }
74 75
75 }, 76 },
76 methods: { 77 methods: {
78 generatecaseStudies(){
79 axios
80 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
81 headers: {
82 Authorization: "Bearer " + this.usertoken,
83 },
84 })
85 .then((response) => {
86
87 console.log('response',response.data.data);
88 this.openStudy(response.data.data);
89 })
90 .catch((error) => console.log(error));
91 },
92
93
94
95 openStudy(payload) {
96 console.log("payload-", payload);
97 payload.intro.date = payload.createdAt;
98 payload.intro.focusPoint = payload.focusAreas;
99 axios
100 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
101 headers: {
102 Authorization: "Bearer " + this.usertoken,
103 },
104 })
105 .then((response) => {
106 this.createSlide(payload, response.data.data);
107 })
108 .catch((error) => console.log(error));
109 },
110
111 createSlide(payload, slides) {
112 var finalSlides = [];
113 slides.forEach((slides_) => {
114 var url = this.assignRoutes(slides_.templateId);
115 var obj = {
116 forward: true,
117 backward: true,
118 ur: url,
119 slideId: slides_._id,
120 caseStudyId: slides_.caseStudyId,
121 payload: {
122 metaData: slides_.metaData,
123 comments: slides_.comments,
124 insight: slides_.insight ? slides_.insight : null,
125 },
126 };
127 // slides_
128 finalSlides.push(obj);
129 });
130 console.log("payload", payload);
131 // add first slide at begining
132 finalSlides.unshift({
133 forward: true,
134 backward: false,
135 ur: "EpisodeIntro",
136 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
137 caseStudyId: payload._id,
138 payload: {
139 metaData: payload.intro,
140 comments: [],
141 },
142 });
143 finalSlides.push({
144 forward: true,
145 backward: false,
146 ur: "Outro",
147 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
148 caseStudyId: payload._id,
149 payload: {
150 metaData: payload.outro,
151 comments: [],
152 },
153 });
154
155 console.log(finalSlides);
156 console.log("payload", payload);
157 localStorage.setItem(
158 "spotlight_slide" + payload._id,
159 JSON.stringify(finalSlides)
160 );
161 this.allSlide = finalSlides;
162 this.getCurrentSlideData();
163 },
164 assignRoutes(tempId) {
165 // /episode-intro
166 // /outro
167 var routes = [
168 {
169 url: "AuthorIntro",
170 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
171 },
172 {
173 url: "NoScreenshotSingleAuthor",
174 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
175 },
176 {
177 url: "SingleMobileScreenInsightTwo",
178 tempId: "T3_cqNIf7tuqL4jyON63dA7",
179 },
180 {
181 url: "TwoScreenWithoutInsight",
182 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
183 },
184 {
185 url: "noscreenshotSingleautho",
186 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
187 },
188 {
189 url: "SingleMobileScreenInsightOne",
190 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
191 },
192 {
193 url: "TwoScreenWithInsight",
194 tempId: "T7_za3c3sYgx7bVvtKzasdf",
195 },
196 {
197 url: "AuthorReadingNow",
198 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
199 },
200 {
201 url: "AuthorReadingBreak",
202 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
203 },
204 ];
205 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
206 return routes[i].url;
207 },
208
77 getCurrentSlideData(){ 209 getCurrentSlideData(){
78 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); 210 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
79 this.currentSlideIndex = i; 211 this.currentSlideIndex = i;
80 this.currentSlideData = this.allSlide[i] 212 this.currentSlideData = this.allSlide[i]
81 console.log( this.allSlide[0],"currentSlideData",this.currentSlideData) 213 console.log( this.allSlide[0],"currentSlideData",this.currentSlideData)
82 214
83 }, 215 },
84 goNext(){ 216 goNext(){
85 this.currentSlideIndex++ 217 this.currentSlideIndex++
86 this.$router.push({ 218 this.$router.push({
87 name: this.allSlide[this.currentSlideIndex].ur, 219 name: this.allSlide[this.currentSlideIndex].ur,
88 params: { 220 params: {
89 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 221 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
90 slideId: this.allSlide[this.currentSlideIndex].slideId, 222 slideId: this.allSlide[this.currentSlideIndex].slideId,
91 }, 223 },
92 }); 224 });
93 225
94 }, 226 },
95 goBack(){ 227 goBack(){
96 this.currentSlideIndex-- 228 this.currentSlideIndex--
97 this.$router.push({ 229 this.$router.push({
98 name: this.allSlide[this.currentSlideIndex].ur, 230 name: this.allSlide[this.currentSlideIndex].ur,
99 params: { 231 params: {
100 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 232 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
101 slideId: this.allSlide[this.currentSlideIndex].slideId, 233 slideId: this.allSlide[this.currentSlideIndex].slideId,
102 }, 234 },
103 }); 235 });
104 236
105 }, 237 },
106 goToLogin() { 238 goToLogin() {
107 this.$router.push("/login"); 239 this.$router.push("/login");
108 }, 240 },
109 goToSignUp() { 241 goToSignUp() {
110 this.$router.push("/"); 242 this.$router.push("/");
111 }, 243 },
112 goToProfile() { 244 goToProfile() {
113 this.$router.push("/profile"); 245 this.$router.push("/profile");
114 }, 246 },
115 247
116 }, 248 },
117 }; 249 };
118 </script> 250 </script>
src/components/EpisodeIntro.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page" v-if="currentSlideData">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <!-- <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
14 </div> 14 </div>
15 </nav> --> 15 </nav> -->
16 <Header></Header> 16 <Header></Header>
17 17
18 <!-- menu wrapper --> 18 <!-- menu wrapper -->
19 <div class="startup-wrp"> 19 <div class="startup-wrp">
20 20
21 <!-- <div class="compare-c"> 21 <!-- <div class="compare-c">
22 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> 22 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
23 <div class="vs">vs</div> 23 <div class="vs">vs</div>
24 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> 24 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
25 </div> --> 25 </div> -->
26 <div class="compare-c"> 26 <div class="compare-c">
27 <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div> 27 <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div>
28 </div> 28 </div>
29 <!-- compare --> 29 <!-- compare -->
30 <img src="../assets/images/spot-light.svg" class="epi-bg" /> 30 <img src="../assets/images/spot-light.svg" class="epi-bg" />
31 <div class="bottom-startup"> 31 <div class="bottom-startup">
32 <div class="logo-wrp"> 32 <div class="logo-wrp">
33 <a href="javascript:void(0);"><img src="../assets/images/ps-growth.svg" /> 33 <a href="javascript:void(0);"><img src="../assets/images/ps-growth.svg" />
34 <span>Product Growth</span> 34 <span>Product Growth</span>
35 </a> 35 </a>
36 </div><!-- logo wrp --> 36 </div><!-- logo wrp -->
37 <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title --> 37 <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title -->
38 <div class="author-sec"> 38 <div class="author-sec">
39 <div class="top"> 39 <div class="top">
40 <span>Author</span> 40 <span>Author</span>
41 <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span> 41 <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span>
42 </div><!-- top section --> 42 </div><!-- top section -->
43 <div class="bottom"> 43 <div class="bottom">
44 44
45 <div class="right p-left-0"> 45 <div class="right p-left-0">
46 <span>Last updated</span> 46 <span>Last updated</span>
47 <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span> 47 <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span>
48 </div><!-- right --> 48 </div><!-- right -->
49 </div><!-- bottom --> 49 </div><!-- bottom -->
50 </div><!-- author section--> 50 </div><!-- author section-->
51 <div class="author-sec"> 51 <div class="author-sec">
52 <div class="top"> 52 <div class="top">
53 <span>App</span> 53 <span>App</span>
54 <span class="name">{{currentSlideData.payload.metaData.app}}</span> 54 <span class="name">{{currentSlideData.payload.metaData.app}}</span>
55 </div><!-- top section --> 55 </div><!-- top section -->
56 <div class="top"> 56 <div class="top">
57 <span>Focus</span> 57 <span>Focus</span>
58 <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span> 58 <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span>
59 </div><!-- top section --> 59 </div><!-- top section -->
60 </div><!-- app section--> 60 </div><!-- app section-->
61 <div class="author-sec info"> 61 <div class="author-sec info">
62 <div class="top"> 62 <div class="top">
63 <span>Read</span> 63 <span>Read</span>
64 <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span> 64 <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span>
65 </div><!-- top section --> 65 </div><!-- top section -->
66 <div class="top bt-brd"> 66 <div class="top bt-brd">
67 <span>Platform</span> 67 <span>Platform</span>
68 <span class="name">{{currentSlideData.payload.metaData.platForm}}</span> 68 <span class="name">{{currentSlideData.payload.metaData.platForm}}</span>
69 </div><!-- top section --> 69 </div><!-- top section -->
70 </div><!-- info section--> 70 </div><!-- info section-->
71 <div class="u-img-info"> 71 <div class="u-img-info">
72 <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/> 72 <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>
73 <img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/> 73 <img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>
74 <img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/> 74 <img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>
75 <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/> 75 <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>
76 </div><!-- image info --> 76 </div><!-- image info -->
77 <div class="start"> 77 <div class="start">
78 <a href="javascript:void(0);" @click="goNext"> 78 <a href="javascript:void(0);" @click="goNext">
79 <img src="../assets/images/arrow-right.svg" /> 79 <img src="../assets/images/arrow-right.svg" />
80 <span>Start</span> 80 <span>Start</span>
81 </a> 81 </a>
82 </div><!-- start --> 82 </div><!-- start -->
83 </div><!-- bottom startup --> 83 </div><!-- bottom startup -->
84 84
85 </div> 85 </div>
86 <!-- body wrapper --> 86 <!-- body wrapper -->
87 </div> 87 </div>
88 <!-- main wrapper --> 88 <!-- main wrapper -->
89 </main> 89 </main>
90 </template> 90 </template>
91 91
92 <script> 92 <script>
93 import Vue from "vue"; 93 import Vue from "vue";
94 import router from "../router"; 94 import router from "../router";
95 import Header from "./Header"; 95 import Header from "./Header";
96 import axios from "axios";
96 97
97 export default { 98 export default {
98 name: "EpisodeIntro", 99 name: "EpisodeIntro",
99 components: { 100 components: {
100 Header: Header, 101 Header: Header,
101 }, 102 },
102 data() { 103 data() {
103 return { 104 return {
104 allSlide:[], 105 allSlide:[],
105 currentSlideIndex:null, 106 currentSlideIndex:null,
106 currentSlideData:null, 107 currentSlideData:null,
107 }; 108 };
108 }, 109 },
109 mounted() { 110 mounted() {
110 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); 111 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
111 if (allSlideData) { 112 if (allSlideData) {
112 this.allSlide = JSON.parse(allSlideData); 113 this.allSlide = JSON.parse(allSlideData);
113 this.getCurrentSlideData(); 114 this.getCurrentSlideData();
114 }else{ 115 }else{
115 this.$router.push("/login"); 116 this.generatecaseStudies();
116 } 117 }
117 118
118 }, 119 },
119 methods: { 120 methods: {
121 generatecaseStudies(){
122 axios
123 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
124 headers: {
125 Authorization: "Bearer " + this.usertoken,
126 },
127 })
128 .then((response) => {
129
130 console.log('response',response.data.data);
131 this.openStudy(response.data.data);
132 })
133 .catch((error) => console.log(error));
134 },
135
136
137
138 openStudy(payload) {
139 console.log("payload-", payload);
140 payload.intro.date = payload.createdAt;
141 payload.intro.focusPoint = payload.focusAreas;
142 axios
143 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
144 headers: {
145 Authorization: "Bearer " + this.usertoken,
146 },
147 })
148 .then((response) => {
149 this.createSlide(payload, response.data.data);
150 })
151 .catch((error) => console.log(error));
152 },
153
154 createSlide(payload, slides) {
155 var finalSlides = [];
156 slides.forEach((slides_) => {
157 var url = this.assignRoutes(slides_.templateId);
158 var obj = {
159 forward: true,
160 backward: true,
161 ur: url,
162 slideId: slides_._id,
163 caseStudyId: slides_.caseStudyId,
164 payload: {
165 metaData: slides_.metaData,
166 comments: slides_.comments,
167 insight: slides_.insight ? slides_.insight : null,
168 },
169 };
170 // slides_
171 finalSlides.push(obj);
172 });
173 console.log("payload", payload);
174 // add first slide at begining
175 finalSlides.unshift({
176 forward: true,
177 backward: false,
178 ur: "EpisodeIntro",
179 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
180 caseStudyId: payload._id,
181 payload: {
182 metaData: payload.intro,
183 comments: [],
184 },
185 });
186 finalSlides.push({
187 forward: true,
188 backward: false,
189 ur: "Outro",
190 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
191 caseStudyId: payload._id,
192 payload: {
193 metaData: payload.outro,
194 comments: [],
195 },
196 });
197
198 console.log(finalSlides);
199 console.log("payload", payload);
200 localStorage.setItem(
201 "spotlight_slide" + payload._id,
202 JSON.stringify(finalSlides)
203 );
204 this.allSlide = finalSlides;
205 this.getCurrentSlideData();
206 },
207 assignRoutes(tempId) {
208 // /episode-intro
209 // /outro
210 var routes = [
211 {
212 url: "AuthorIntro",
213 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
214 },
215 {
216 url: "NoScreenshotSingleAuthor",
217 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
218 },
219 {
220 url: "SingleMobileScreenInsightTwo",
221 tempId: "T3_cqNIf7tuqL4jyON63dA7",
222 },
223 {
224 url: "TwoScreenWithoutInsight",
225 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
226 },
227 {
228 url: "noscreenshotSingleautho",
229 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
230 },
231 {
232 url: "SingleMobileScreenInsightOne",
233 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
234 },
235 {
236 url: "TwoScreenWithInsight",
237 tempId: "T7_za3c3sYgx7bVvtKzasdf",
238 },
239 {
240 url: "AuthorReadingNow",
241 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
242 },
243 {
244 url: "AuthorReadingBreak",
245 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
246 },
247 ];
248 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
249 return routes[i].url;
250 },
251
252
253
254
255
120 getCurrentSlideData(){ 256 getCurrentSlideData(){
121 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); 257 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
122 this.currentSlideIndex = i; 258 this.currentSlideIndex = i;
123 this.currentSlideData = this.allSlide[i] 259 this.currentSlideData = this.allSlide[i]
124 console.log("currentSlideData",this.currentSlideData) 260 console.log("currentSlideData",this.currentSlideData)
125 261
126 }, 262 },
127 goNext(){ 263 goNext(){
128 this.currentSlideIndex++ 264 this.currentSlideIndex++
129 this.$router.push({ 265 this.$router.push({
130 name: this.allSlide[this.currentSlideIndex].ur, 266 name: this.allSlide[this.currentSlideIndex].ur,
131 params: { 267 params: {
132 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 268 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
133 slideId: this.allSlide[this.currentSlideIndex].slideId, 269 slideId: this.allSlide[this.currentSlideIndex].slideId,
134 }, 270 },
135 }); 271 });
136 272
137 }, 273 },
138 goBack(){ 274 goBack(){
139 275
140 }, 276 },
141 goToLogin() { 277 goToLogin() {
142 this.$router.push("/login"); 278 this.$router.push("/login");
143 }, 279 },
144 goToSignUp() { 280 goToSignUp() {
145 this.$router.push("/"); 281 this.$router.push("/");
146 }, 282 },
147 283
148 createString(list){ 284 createString(list){
149 var name = ""; 285 var name = "";
150 list.forEach(element => { 286 list.forEach(element => {
151 name = name+','+element; 287 name = name+','+element;
152 }); 288 });
153 289
154 console.log("name is",name); 290 console.log("name is",name);
155 return name.substring(1);; 291 return name.substring(1);;
156 } 292 }
157 293
158 }, 294 },
159 }; 295 };
160 </script> 296 </script>
161 <style > 297 <style >
162 .ellipsis { 298 .ellipsis {
163 text-overflow: ellipsis; 299 text-overflow: ellipsis;
164 white-space: nowrap; 300 white-space: nowrap;
165 overflow: hidden; 301 overflow: hidden;
166 } 302 }
167 </style> 303 </style>
src/components/Header.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <nav class="navbar navbar-expand-sm spotLight-nav"> 2 <nav class="navbar navbar-expand-sm spotLight-nav">
3 <a @click="goTo" class="navbar-brand" href="javasript:void(0);" 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="javasript:void(0);"avasript:void(0);" 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="javasript:void(0);"avasript:void(0);" 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="javasript:void(0);"avasript:void(0);" 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="javasript:void(0);"avasript:void(0);" 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
38 ><img :src="profilePictue" 38 @click="goTo"
39 href="javascript:void(0);"
40 class="user-profile-photo common_color"
41 v-if="usertoken"
42 >
43 <img :src="profilePictue"
44 /></a>
45 <a
46 @click="goToLogin"
47 href="javascript:void(0);"
48 class="user-profile-photo insights-profile"
49 v-if="!usertoken"
50 >
51 <img src="../assets/images/lock.svg"
39 /></a> 52 /></a>
40 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 53 <div class="sub-menu-user" id="userprofileshow" style="display: none">
41 <!-- <ul> 54 <!-- <ul>
42 <li> 55 <li>
43 <a href="javascript:void(0);" 56 <a href="javascript:void(0);"
44 >Edit Profile</a 57 >Edit Profile</a
45 > 58 >
46 </li> 59 </li>
47 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 60 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
48 </ul> --> 61 </ul> -->
49 </div> 62 </div>
50 </div> 63 </div>
51 </nav> 64 </nav>
52 </template> 65 </template>
53 66
54 <script> 67 <script>
55 import $ from "jquery"; 68 import $ from "jquery";
56 import axios from "axios"; 69 import axios from "axios";
57 export default { 70 export default {
58 name: "Header", 71 name: "Header",
59 data() { 72 data() {
60 return { 73 return {
61 usertoken:null, 74 usertoken: null,
62 profilePictue:null, 75 profilePictue: null,
63 }; 76 };
64 }, 77 },
65 mounted() { 78 mounted() {
79
80
66 var userdata = localStorage.getItem("spotlight_usertoken"); 81 var userdata = localStorage.getItem("spotlight_usertoken");
67 if (userdata) { 82 if (userdata) {
68 userdata = JSON.parse(userdata); 83 userdata = JSON.parse(userdata);
69 this.usertoken = userdata.token; 84 this.usertoken = userdata.token;
70 this.getProfile(); 85 this.getProfile();
71 } 86 }
72 }, 87 },
73 methods: { 88 methods: {
74 goTo() { 89 goTo() {
75 this.$router.push("/profile"); 90 this.$router.push("/profile");
76 }, 91 },
77 getProfile() { 92 goToLogin() {
93 localStorage.removeItem("spotlight_usertoken");
94 localStorage.removeItem("spotlight_email");
95 this.$router.push("/login");
96 },
97 getProfile() {
78 axios 98 axios
79 .get("/profile", { 99 .get("/profile", {
80 headers: { 100 headers: {
81 Authorization: "Bearer " + this.usertoken, 101 Authorization: "Bearer " + this.usertoken,
82 }, 102 },
83 }) 103 })
84 .then((response) => { 104 .then((response) => {
85 this.assignClass(response.data.data.bgColor); 105 this.assignClass(response.data.data.bgColor);
86 this.profilePictue = response.data.data.profilePic; 106 this.profilePictue = response.data.data.profilePic;
87 console.log(response.data.data); 107 console.log(response.data.data);
88 }) 108 })
89 .catch((error) => console.log(error)); 109 .catch((error) => console.log(error));
90 }, 110 },
91 assignClass(bgClr) { 111 assignClass(bgClr) {
92 var cols = document.getElementsByClassName("common_color"); 112 var cols = document.getElementsByClassName("common_color");
93 for (var i = 0; i < cols.length; i++) { 113 for (var i = 0; i < cols.length; i++) {
94 cols[i].style.backgroundColor = bgClr; 114 cols[i].style.backgroundColor = bgClr;
95 } 115 }
96 }, 116 },
97 } 117 },
98 ,
99
100 }; 118 };
src/components/NoScreenshotSingleAuthor.vue
Diff comments   View file @4905524
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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);"> 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);" 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 }else{ 515 }else{
516 this.$router.push("/login"); 516 this.getCurrentSlideData();
517
518 }
519 var userdata = localStorage.getItem("spotlight_usertoken");
520 if (userdata) {
521 userdata = JSON.parse(userdata);
522 this.usertoken = userdata.token;
523 this.getComment();
524 }else{
525 this.getComment();
517 } 526 }
518 var userdata = localStorage.getItem("spotlight_usertoken");
519 if (userdata) {
520 userdata = JSON.parse(userdata);
521 this.usertoken = userdata.token;
522 this.getComment();
523 }
524 }, 527 },
525 methods: { 528 methods: {
529
530 generatecaseStudies(){
531 axios
532 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
533 headers: {
534 Authorization: "Bearer " + this.usertoken,
535 },
536 })
537 .then((response) => {
538
539 console.log('response',response.data.data);
540 this.openStudy(response.data.data);
541 })
542 .catch((error) => console.log(error));
543 },
544
545
546
547 openStudy(payload) {
548 console.log("payload-", payload);
549 payload.intro.date = payload.createdAt;
550 payload.intro.focusPoint = payload.focusAreas;
551 axios
552 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
553 headers: {
554 Authorization: "Bearer " + this.usertoken,
555 },
556 })
557 .then((response) => {
558 this.createSlide(payload, response.data.data);
559 })
560 .catch((error) => console.log(error));
561 },
562
563 createSlide(payload, slides) {
564 var finalSlides = [];
565 slides.forEach((slides_) => {
566 var url = this.assignRoutes(slides_.templateId);
567 var obj = {
568 forward: true,
569 backward: true,
570 ur: url,
571 slideId: slides_._id,
572 caseStudyId: slides_.caseStudyId,
573 payload: {
574 metaData: slides_.metaData,
575 comments: slides_.comments,
576 insight: slides_.insight ? slides_.insight : null,
577 },
578 };
579 // slides_
580 finalSlides.push(obj);
581 });
582 console.log("payload", payload);
583 // add first slide at begining
584 finalSlides.unshift({
585 forward: true,
586 backward: false,
587 ur: "EpisodeIntro",
588 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
589 caseStudyId: payload._id,
590 payload: {
591 metaData: payload.intro,
592 comments: [],
593 },
594 });
595 finalSlides.push({
596 forward: true,
597 backward: false,
598 ur: "Outro",
599 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
600 caseStudyId: payload._id,
601 payload: {
602 metaData: payload.outro,
603 comments: [],
604 },
605 });
606
607 console.log(finalSlides);
608 console.log("payload", payload);
609 localStorage.setItem(
610 "spotlight_slide" + payload._id,
611 JSON.stringify(finalSlides)
612 );
613 this.allSlide = finalSlides;
614 this.getCurrentSlideData();
615 },
616 assignRoutes(tempId) {
617 // /episode-intro
618 // /outro
619 var routes = [
620 {
621 url: "AuthorIntro",
622 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
623 },
624 {
625 url: "NoScreenshotSingleAuthor",
626 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
627 },
628 {
629 url: "SingleMobileScreenInsightTwo",
630 tempId: "T3_cqNIf7tuqL4jyON63dA7",
631 },
632 {
633 url: "TwoScreenWithoutInsight",
634 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
635 },
636 {
637 url: "noscreenshotSingleautho",
638 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
639 },
640 {
641 url: "SingleMobileScreenInsightOne",
642 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
643 },
644 {
645 url: "TwoScreenWithInsight",
646 tempId: "T7_za3c3sYgx7bVvtKzasdf",
647 },
648 {
649 url: "AuthorReadingNow",
650 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
651 },
652 {
653 url: "AuthorReadingBreak",
654 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
655 },
656 ];
657 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
658 return routes[i].url;
659 },
660
526 getCurrentSlideData() { 661 getCurrentSlideData() {
527 var i = this.allSlide.findIndex( 662 var i = this.allSlide.findIndex(
528 (slide_) => slide_.slideId == this.$route.params.slideId 663 (slide_) => slide_.slideId == this.$route.params.slideId
529 ); 664 );
530 this.currentSlideIndex = i; 665 this.currentSlideIndex = i;
531 this.currentSlideData = this.allSlide[i]; 666 this.currentSlideData = this.allSlide[i];
532 console.log("currentSlideData", this.currentSlideData); 667 console.log("currentSlideData", this.currentSlideData);
533 }, 668 },
534 goNext() { 669 goNext() {
535 this.currentSlideIndex++; 670 this.currentSlideIndex++;
536 this.$router.push({ 671 this.$router.push({
537 name: this.allSlide[this.currentSlideIndex].ur, 672 name: this.allSlide[this.currentSlideIndex].ur,
538 params: { 673 params: {
539 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 674 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
540 slideId: this.allSlide[this.currentSlideIndex].slideId, 675 slideId: this.allSlide[this.currentSlideIndex].slideId,
541 }, 676 },
542 }); 677 });
543 }, 678 },
544 goBack() { 679 goBack() {
545 this.currentSlideIndex--; 680 this.currentSlideIndex--;
546 this.$router.push({ 681 this.$router.push({
547 name: this.allSlide[this.currentSlideIndex].ur, 682 name: this.allSlide[this.currentSlideIndex].ur,
548 params: { 683 params: {
549 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 684 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
550 slideId: this.allSlide[this.currentSlideIndex].slideId, 685 slideId: this.allSlide[this.currentSlideIndex].slideId,
551 }, 686 },
552 }); 687 });
553 }, 688 },
554 createComment() { 689 createComment() {
555 console.log("===", this.comment); 690 console.log("===", this.comment);
556 var obj = { 691 var obj = {
557 caseStudyId: this.currentSlideData.caseStudyId, 692 caseStudyId: this.currentSlideData.caseStudyId,
558 slideId: this.currentSlideData.slideId, 693 slideId: this.currentSlideData.slideId,
559 comment: this.comment, 694 comment: this.comment,
560 695
561 }; 696 };
562 axios 697 axios
563 .post("/bounceBoard/comment", obj, { 698 .post("/bounceBoard/comment", obj, {
564 headers: { 699 headers: {
565 Authorization: "Bearer " + this.usertoken, 700 Authorization: "Bearer " + this.usertoken,
566 }, 701 },
567 }) 702 })
568 .then((response) => { 703 .then((response) => {
569 this.comment = null; 704 this.comment = null;
570 this.getComment(); 705 this.getComment();
571 console.log(response); 706 console.log(response);
572 }) 707 })
573 .catch((error) => { 708 .catch((error) => {
574 if (error.response) { 709 if (error.response) {
575 this.$toaster.error(error.response.data.message); 710 this.$toaster.error(error.response.data.message);
576 } 711 }
577 }); 712 });
578 }, 713 },
579 createChildComment(cmnt) { 714 createChildComment(cmnt) {
580 console.log(cmnt,"===", this.comment); 715 console.log(cmnt,"===", this.comment);
581 var obj = { 716 var obj = {
582 caseStudyId: this.currentSlideData.caseStudyId, 717 caseStudyId: this.currentSlideData.caseStudyId,
583 slideId: this.currentSlideData.slideId, 718 slideId: this.currentSlideData.slideId,
584 comment: this.comment, 719 comment: this.comment,
585 parentId: cmnt._id, 720 parentId: cmnt._id,
586 721
587 }; 722 };
588 axios 723 axios
589 .post("/bounceBoard/comment", obj, { 724 .post("/bounceBoard/comment", obj, {
590 headers: { 725 headers: {
591 Authorization: "Bearer " + this.usertoken, 726 Authorization: "Bearer " + this.usertoken,
592 }, 727 },
593 }) 728 })
594 .then((response) => { 729 .then((response) => {
595 this.comment = null; 730 this.comment = null;
596 this.discardRply(cmnt); 731 this.discardRply(cmnt);
597 this.getComment(); 732 this.getComment();
598 console.log(response); 733 console.log(response);
599 }) 734 })
600 .catch((error) => { 735 .catch((error) => {
601 if (error.response) { 736 if (error.response) {
602 this.$toaster.error(error.response.data.message); 737 this.$toaster.error(error.response.data.message);
603 } 738 }
604 }); 739 });
605 }, 740 },
606 getComment() { 741 getComment() {
607 axios 742 axios
608 .get( 743 .get(
609 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 744 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
610 { 745 {
611 headers: { 746 headers: {
612 Authorization: "Bearer " + this.usertoken, 747 Authorization: "Bearer " + this.usertoken,
613 }, 748 },
614 } 749 }
615 ) 750 )
616 .then((response) => { 751 .then((response) => {
617 console.log(response.data); 752 console.log(response.data);
618 var comments = []; 753 var comments = [];
619 var keys = Object.keys(response.data.data) 754 var keys = Object.keys(response.data.data)
620 response.data.data 755 response.data.data
621 keys.forEach((key_) => { 756 keys.forEach((key_) => {
622 comments.push(response.data.data[key_]) 757 comments.push(response.data.data[key_])
623 }); 758 });
624 comments.forEach((coment_)=>{ 759 comments.forEach((coment_)=>{
625 coment_.childInput = false; 760 coment_.childInput = false;
626 }); 761 });
627 console.log("comments",comments) 762 console.log("comments",comments)
628 this.commentList = comments; 763 this.commentList = comments;
629 }) 764 })
630 .catch((error) => console.log(error)); 765 .catch((error) => console.log(error));
631 }, 766 },
632 dateGenerator(curreDate){ 767 dateGenerator(curreDate){
633 var todayDate = moment(new Date(), "DD.MM.YYYY"); 768 var todayDate = moment(new Date(), "DD.MM.YYYY");
634 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 769 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
635 var result = todayDate.diff(endDate, 'days'); 770 var result = todayDate.diff(endDate, 'days');
636 return result; 771 return result;
637 }, 772 },
638 goToLogin() { 773 goToLogin() {
639 this.$router.push("/login"); 774 this.$router.push("/login");
775 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
776
640 }, 777 },
641 goToSignUp() { 778 goToSignUp() {
642 this.$router.push("/"); 779 this.$router.push("/");
643 }, 780 },
644 chtbox_close() { 781 chtbox_close() {
645 $("#cht_box_close").removeClass("cht_close"); 782 $("#cht_box_close").removeClass("cht_close");
646 $("#open_ct_box, .c_hide").show(); 783 $("#open_ct_box, .c_hide").show();
647 $(".footer-top").addClass("white-bg"); 784 $(".footer-top").addClass("white-bg");
648 }, 785 },
649 open_ct_box() { 786 open_ct_box() {
787 if(!this.usertoken){
788 this.goToLogin();
789 }
650 $("#cht_box_close").addClass("cht_close"); 790 $("#cht_box_close").addClass("cht_close");
651 $("#open_ct_box, .c_hide").hide(); 791 $("#open_ct_box, .c_hide").hide();
652 $(".footer-top").removeClass("white-bg"); 792 $(".footer-top").removeClass("white-bg");
653 }, 793 },
654 eachRply(cmnt) { 794 eachRply(cmnt) {
655 cmnt.childInput = true; 795 cmnt.childInput = true;
656 this.parentInput = false; 796 this.parentInput = false;
657 this.comment = null; 797 this.comment = null;
658 setTimeout(() => { 798 setTimeout(() => {
659 document.getElementById("childInput").focus(); 799 document.getElementById("childInput").focus();
660 }, 100); 800 }, 100);
661 }, 801 },
662 discardRply(cmnt) { 802 discardRply(cmnt) {
663 cmnt.childInput = false; 803 cmnt.childInput = false;
664 this.parentInput = true; 804 this.parentInput = true;
665 this.comment = null; 805 this.comment = null;
666 }, 806 },
667 reply_cht_box(i) { 807 reply_cht_box(i) {
808 if(!this.usertoken){
809 this.goToLogin();
810 }
668 console.log(this.commentList, "cmnt"); 811 console.log(this.commentList, "cmnt");
669 $("#cht_box_close").addClass("cht_close"); 812 $("#cht_box_close").addClass("cht_close");
670 $("#open_ct_box, .c_hide").hide(); 813 $("#open_ct_box, .c_hide").hide();
671 $(".footer-top").removeClass("white-bg"); 814 $(".footer-top").removeClass("white-bg");
672 this.commentList[i].childInput = true; 815 this.commentList[i].childInput = true;
673 this.parentInput = false; 816 this.parentInput = false;
674 this.comment = null; 817 this.comment = null;
675 setTimeout(() => { 818 setTimeout(() => {
676 document.getElementById("childInput").focus(); 819 document.getElementById("childInput").focus();
677 }, 100); 820 }, 100);
678 }, 821 },
679 likeComment(status, id) { 822 likeComment(status, id) {
823 if(!this.usertoken){
824 this.goToLogin();
825 }
680 console.log("===", this.comment); 826 console.log("===", this.comment);
681 var obj = { 827 var obj = {
682 commentId: id, 828 commentId: id,
683 like: status, 829 like: status,
684 }; 830 };
685 axios 831 axios
686 .post("/bounceBoard/like", obj, { 832 .post("/bounceBoard/like", obj, {
687 headers: { 833 headers: {
688 Authorization: "Bearer " + this.usertoken, 834 Authorization: "Bearer " + this.usertoken,
689 }, 835 },
690 }) 836 })
691 .then((response) => { 837 .then((response) => {
692 this.getComment(); 838 this.getComment();
693 console.log(response); 839 console.log(response);
694 }) 840 })
695 .catch((error) => { 841 .catch((error) => {
696 if (error.response) { 842 if (error.response) {
697 this.$toaster.error(error.response.data.message); 843 this.$toaster.error(error.response.data.message);
698 } 844 }
699 }); 845 });
700 }, 846 },
701 getLastcomment(flag, commentArray) { 847 getLastcomment(flag, commentArray) {
702 var finalComment = null; 848 var finalComment = null;
703 var totalMessage = 0; 849 var totalMessage = 0;
704 var name = null; 850 var name = null;
705 commentArray.forEach((comment_) => { 851 commentArray.forEach((comment_) => {
706 if (comment_.comment != null) { 852 if (comment_.comment != null) {
707 name = comment_.user.name; 853 name = comment_.user.name;
708 finalComment = comment_.comment; 854 finalComment = comment_.comment;
709 totalMessage++; 855 totalMessage++;
710 } 856 }
711 }); 857 });
712 if (flag == "count") { 858 if (flag == "count") {
713 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 859 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
714 } else if (flag =="name") { 860 } else if (flag =="name") {
715 return (name = name); 861 return (name = name);
716 } else { 862 } else {
717 return finalComment; 863 return finalComment;
718 } 864 }
719 }, 865 },
720 commentExistCheck(i) { 866 commentExistCheck(i) {
721 console.log(this.commentList[i].comment); 867 console.log(this.commentList[i].comment);
722 var returnValue = false; 868 var returnValue = false;
723 if (this.commentList[i].comment) { 869 if (this.commentList[i].comment) {
724 returnValue = true; 870 returnValue = true;
725 } 871 }
726 return returnValue; 872 return returnValue;
727 }, 873 },
src/components/Profile.vue
Diff comments   View file @4905524
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="javasript:void(0);" 15 <a href="javasript:void(0);"
16 ><img src="../assets/images/upload-cloud.svg" /><span 16 ><img src="../assets/images/upload-cloud.svg" /><span
17 >Upload Avatar</span></a> 17 >Upload Avatar</span></a>
18 </li> 18 </li>
19 <li> 19 <li>
20 <a href="javasript:void(0);" @click="getRandomAvatar()" 20 <a href="javasript:void(0);" @click="getRandomAvatar()"
21 ><img src="../assets/images/randomise.svg" /><span 21 ><img src="../assets/images/randomise.svg" /><span
22 >Randomise Avatar</span 22 >Randomise Avatar</span
23 ></a 23 ></a
24 > 24 >
25 </li> 25 </li>
26 </ul> 26 </ul>
27 </div> 27 </div>
28 <!-- header --> 28 <!-- header -->
29 <div class="popup-body"> 29 <div class="popup-body">
30 <form class="popup-forms"> 30 <form class="popup-forms">
31 <div class="row"> 31 <div class="row">
32 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 32 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
33 <div class="form-group floating-label"> 33 <div class="form-group floating-label">
34 <input 34 <input
35 type="text" 35 type="text"
36 class="form-control" 36 class="form-control"
37 v-model="userData.firstName" 37 v-model="userData.firstName"
38 placeholder=" " 38 placeholder=" "
39 id="fname" 39 id="fname"
40 /> 40 />
41 <label for="fname">First Name</label> 41 <label for="fname">First Name</label>
42 </div> 42 </div>
43 </div> 43 </div>
44 <!-- input --> 44 <!-- input -->
45 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 45 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
46 <div class="form-group floating-label"> 46 <div class="form-group floating-label">
47 <input 47 <input
48 type="text" 48 type="text"
49 class="form-control" 49 class="form-control"
50 value="" 50 value=""
51 placeholder=" " 51 placeholder=" "
52 id="lname" 52 id="lname"
53 v-model="userData.lastName" 53 v-model="userData.lastName"
54 /> 54 />
55 <label for="lname" class="lname">Last Name</label> 55 <label for="lname" class="lname">Last Name</label>
56 </div> 56 </div>
57 </div> 57 </div>
58 <!-- input --> 58 <!-- input -->
59 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> 59 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
60 <div class="form-group floating-label"> 60 <div class="form-group floating-label">
61 <input 61 <input
62 type="text" 62 type="text"
63 class="form-control" 63 class="form-control"
64 value="" 64 value=""
65 v-model="userData.designation" 65 v-model="userData.designation"
66 placeholder=" " 66 placeholder=" "
67 id="designation" 67 id="designation"
68 /> 68 />
69 <label for="designation">Designation</label> 69 <label for="designation">Designation</label>
70 </div> 70 </div>
71 </div> 71 </div>
72 <!-- input --> 72 <!-- input -->
73 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 73 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
74 <div class="form-group floating-label"> 74 <div class="form-group floating-label">
75 <input 75 <input
76 type="text" 76 type="text"
77 class="form-control" 77 class="form-control"
78 v-model="userData.organisation" 78 v-model="userData.organisation"
79 id="company" 79 id="company"
80 placeholder=" " 80 placeholder=" "
81 /> 81 />
82 <label for="company">Company</label> 82 <label for="company">Company</label>
83 </div> 83 </div>
84 </div> 84 </div>
85 <!-- input --> 85 <!-- input -->
86 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 86 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
87 <div class="form-group floating-label"> 87 <div class="form-group floating-label">
88 <textarea 88 <textarea
89 type="text" 89 type="text"
90 class="form-control" 90 class="form-control"
91 value="" 91 value=""
92 v-model="userData.bio" 92 v-model="userData.bio"
93 id="yourself" 93 id="yourself"
94 placeholder=" " 94 placeholder=" "
95 ></textarea> 95 ></textarea>
96 <label for="yourself" 96 <label for="yourself"
97 >Tell others a little about yourself</label 97 >Tell others a little about yourself</label
98 > 98 >
99 </div> 99 </div>
100 </div> 100 </div>
101 <!-- input --> 101 <!-- input -->
102 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 102 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
103 <p class="things">Three things that you talk more about</p> 103 <p class="things">Three things that you talk more about</p>
104 104
105 <ul class="interests"> 105 <ul class="interests">
106 <li v-for="(interest, i) in userData.interests" :key="i"> 106 <li v-for="(interest, i) in userData.interests" :key="i">
107 <span>{{ interest }}</span> 107 <span>{{ interest }}</span>
108 <a 108 <a
109 href="javascript:void(0);" 109 href="javascript:void(0);"
110 @click="removeInterest(i)" 110 @click="removeInterest(i)"
111 class="cat-minus" 111 class="cat-minus"
112 ><img src="../assets/images/minus.svg" 112 ><img src="../assets/images/minus.svg"
113 /></a> 113 /></a>
114 </li> 114 </li>
115 <li> 115 <li>
116 <input 116 <input
117 class="" 117 class=""
118 placeholder="Add interest" 118 placeholder="Add interest"
119 v-on:keyup.enter="addInterest" 119 v-on:keyup.enter="addInterest"
120 v-model="interestName" 120 v-model="interestName"
121 /> 121 />
122 <a href="javascript:void(0);" @click="addInterest()" 122 <a href="javascript:void(0);" @click="addInterest()"
123 ><img src="../assets/images/plus-circle.svg" 123 ><img src="../assets/images/plus-circle.svg"
124 /></a> 124 /></a>
125 </li> 125 </li>
126 </ul> 126 </ul>
127 </div> 127 </div>
128 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 128 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
129 <p class="things">Choose Background color</p> 129 <p class="things">Choose Background color</p>
130 130
131 <ul class="colors"> 131 <ul class="colors">
132 <li> 132 <li>
133 <a 133 <a
134 href="javascript:void(0);" 134 href="javascript:void(0);"
135 id="#C4C4C4" 135 id="#C4C4C4"
136 class="silver" 136 class="silver"
137 @click="changeColor('#C4C4C4')" 137 @click="changeColor('#C4C4C4')"
138 ></a> 138 ></a>
139 </li> 139 </li>
140 <li> 140 <li>
141 <a 141 <a
142 href="javascript:void(0);" 142 href="javascript:void(0);"
143 id="#FFF6D7" 143 id="#FFF6D7"
144 class="milk-punch" 144 class="milk-punch"
145 @click="changeColor('#FFF6D7')" 145 @click="changeColor('#FFF6D7')"
146 ></a> 146 ></a>
147 </li> 147 </li>
148 <li> 148 <li>
149 <a 149 <a
150 href="javascript:void(0);" 150 href="javascript:void(0);"
151 id="#BDDBFF" 151 id="#BDDBFF"
152 class="french-pass" 152 class="french-pass"
153 @click="changeColor('#BDDBFF')" 153 @click="changeColor('#BDDBFF')"
154 ></a> 154 ></a>
155 </li> 155 </li>
156 <li> 156 <li>
157 <a 157 <a
158 href="javascript:void(0);" 158 href="javascript:void(0);"
159 id="#C0FAFE" 159 id="#C0FAFE"
160 class="cyan-french-pass" 160 class="cyan-french-pass"
161 @click="changeColor('#C0FAFE')" 161 @click="changeColor('#C0FAFE')"
162 ></a> 162 ></a>
163 </li> 163 </li>
164 <li> 164 <li>
165 <a 165 <a
166 href="javascript:void(0);" 166 href="javascript:void(0);"
167 id="#FFDBDC" 167 id="#FFDBDC"
168 class="cosmos" 168 class="cosmos"
169 @click="changeColor('#FFDBDC')" 169 @click="changeColor('#FFDBDC')"
170 ></a> 170 ></a>
171 </li> 171 </li>
172 <li> 172 <li>
173 <a 173 <a
174 href="javascript:void(0);" 174 href="javascript:void(0);"
175 id="#FEE6AC" 175 id="#FEE6AC"
176 class="cape-Honey" 176 class="cape-Honey"
177 @click="changeColor('#FEE6AC')" 177 @click="changeColor('#FEE6AC')"
178 ></a> 178 ></a>
179 </li> 179 </li>
180 <li> 180 <li>
181 <a 181 <a
182 href="javascript:void(0);" 182 href="javascript:void(0);"
183 id="#E5DFF0" 183 id="#E5DFF0"
184 class="snuff" 184 class="snuff"
185 @click="changeColor('#E5DFF0')" 185 @click="changeColor('#E5DFF0')"
186 ></a> 186 ></a>
187 </li> 187 </li>
188 <li> 188 <li>
189 <a 189 <a
190 href="javascript:void(0);" 190 href="javascript:void(0);"
191 id="#DFE7EF" 191 id="#DFE7EF"
192 class="catskillWhite" 192 class="catskillWhite"
193 @click="changeColor('#DFE7EF')" 193 @click="changeColor('#DFE7EF')"
194 ></a> 194 ></a>
195 </li> 195 </li>
196 <li> 196 <li>
197 <a 197 <a
198 href="javascript:void(0);" 198 href="javascript:void(0);"
199 id="#FFF" 199 id="#FFF"
200 class="white" 200 class="white"
201 @click="changeColor('#FFF')" 201 @click="changeColor('#FFF')"
202 ></a> 202 ></a>
203 </li> 203 </li>
204 </ul> 204 </ul>
205 </div> 205 </div>
206 <div class="col-lg-12 mt-50"> 206 <div class="col-lg-12 mt-50">
207 <p class="notifications"> 207 <p class="notifications">
208 Recieve notifications when you recieve a comment/ Upvote 208 Recieve notifications when you recieve a comment/ Upvote
209 </p> 209 </p>
210 <div class="switch-bt-wrp"> 210 <div class="switch-bt-wrp">
211 <label class="switch-btn"> 211 <label class="switch-btn">
212 <input type="checkbox" class="toggle-btn" /> 212 <input type="checkbox" class="toggle-btn" />
213 <span class="rounded-toggle"></span> 213 <span class="rounded-toggle"></span>
214 </label> 214 </label>
215 <span class="onoff">on/off</span> 215 <span class="onoff">on/off</span>
216 </div> 216 </div>
217 </div> 217 </div>
218 <div class="col-lg-12"> 218 <div class="col-lg-12">
219 <p class="add-socail-ch"> 219 <p class="add-socail-ch">
220 Add your social Channels <span></span> 220 Add your social Channels <span></span>
221 </p> 221 </p>
222 </div> 222 </div>
223 223
224 <div 224 <div
225 class="row" 225 class="row"
226 style="width: 100%" 226 style="width: 100%"
227 v-for="(social, i) in selectedSocialLink" 227 v-for="(social, i) in selectedSocialLink"
228 :key="i" 228 :key="i"
229 > 229 >
230 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> 230 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
231 <div class="form-group floating-label"> 231 <div class="form-group floating-label">
232 <select class="form-group"> 232 <select class="form-group">
233 <option value="Linkedin">{{ social.displayName }}</option> 233 <option value="Linkedin">{{ social.displayName }}</option>
234 </select> 234 </select>
235 <span class="select-arrow" 235 <span class="select-arrow"
236 ><img src="../assets/images/chevron-down.svg" 236 ><img src="../assets/images/chevron-down.svg"
237 /></span> 237 /></span>
238 </div> 238 </div>
239 </div> 239 </div>
240 <!-- input --> 240 <!-- input -->
241 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> 241 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
242 <div class="form-group floating-label"> 242 <div class="form-group floating-label">
243 <input 243 <input
244 type="text" 244 type="text"
245 class="form-control" 245 class="form-control"
246 value="" 246 value=""
247 placeholder="Paste your profile URL here" 247 placeholder="Paste your profile URL here"
248 id="" 248 id=""
249 v-model="social.fieldValue" 249 v-model="social.fieldValue"
250 /> 250 />
251 </div> 251 </div>
252 </div> 252 </div>
253 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> 253 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
254 <ul class="interests"> 254 <ul class="interests">
255 <li> 255 <li>
256 <a 256 <a
257 @click="removeSocialLink(i)" 257 @click="removeSocialLink(i)"
258 href="javascript:void(0);" 258 href="javascript:void(0);"
259 class="cat-minus" 259 class="cat-minus"
260 ><img src="../assets/images/minus.svg" 260 ><img src="../assets/images/minus.svg"
261 /></a> 261 /></a>
262 </li> 262 </li>
263 </ul> 263 </ul>
264 </div> 264 </div>
265 </div> 265 </div>
266 <!-- input --> 266 <!-- input -->
267 267
268 <!-- input --> 268 <!-- input -->
269 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 269 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
270 <div class="form-group floating-label"> 270 <div class="form-group floating-label">
271 <select 271 <select
272 class="form-group" 272 class="form-group"
273 v-model="currentLink" 273 v-model="currentLink"
274 v-on:change="addSocialLink(currentLink)" 274 v-on:change="addSocialLink(currentLink)"
275 > 275 >
276 <option value="null">Add another</option> 276 <option value="null">Add another</option>
277 <option 277 <option
278 v-for="(social, i) in socialLink" 278 v-for="(social, i) in socialLink"
279 :key="i" 279 :key="i"
280 :value="social.fieldName" 280 :value="social.fieldName"
281 > 281 >
282 {{ social.displayName }} 282 {{ social.displayName }}
283 </option> 283 </option>
284 </select> 284 </select>
285 <span class="select-arrow" 285 <span class="select-arrow"
286 ><img src="../assets/images/chevron-down.svg" 286 ><img src="../assets/images/chevron-down.svg"
287 /></span> 287 /></span>
288 </div> 288 </div>
289 </div> 289 </div>
290 <!-- input --> 290 <!-- input -->
291 </div> 291 </div>
292 <a href="javascript:void(0);" @click="saveProfile" class="next-bt" 292 <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
293 >Save</a 293 >Save</a
294 > 294 >
295 </form> 295 </form>
296 </div> 296 </div>
297 <div class="clearfix"></div> 297 <div class="clearfix"></div>
298 </div> 298 </div>
299 <!-- add profile --> 299 <!-- add profile -->
300 </div> 300 </div>
301 <!-- profile --> 301 <!-- profile -->
302 <div class="container-fluid inner-wrp"> 302 <div class="container-fluid inner-wrp">
303 <nav class="navbar navbar-expand-sm spotLight-nav"> 303 <nav class="navbar navbar-expand-sm spotLight-nav">
304 <a class="navbar-brand" href="javasript:void(0);" 304 <a class="navbar-brand" href="javasript:void(0);"
305 ><img src="../assets/images/logo.png" 305 ><img src="../assets/images/logo.png"
306 /></a> 306 /></a>
307 <button 307 <button
308 class="navbar-toggler" 308 class="navbar-toggler"
309 type="button" 309 type="button"
310 data-toggle="collapse" 310 data-toggle="collapse"
311 data-target="#navbarsExample03" 311 data-target="#navbarsExample03"
312 aria-controls="navbarsExample03" 312 aria-controls="navbarsExample03"
313 aria-expanded="false" 313 aria-expanded="false"
314 aria-label="Toggle navigation" 314 aria-label="Toggle navigation"
315 > 315 >
316 <span class="navbar-toggler-icon"></span> 316 <span class="navbar-toggler-icon"></span>
317 <span class="navbar-toggler-icon"></span> 317 <span class="navbar-toggler-icon"></span>
318 <span class="navbar-toggler-icon"></span> 318 <span class="navbar-toggler-icon"></span>
319 </button> 319 </button>
320 320
321 <div class="collapse navbar-collapse" id="navbarsExample03"> 321 <div class="collapse navbar-collapse" id="navbarsExample03">
322 <ul class="navbar-nav mr-auto"> 322 <ul class="navbar-nav mr-auto">
323 <li class="nav-item active"> 323 <li class="nav-item active">
324 <a class="nav-link" href="javasript:void(0);">About</a> 324 <a class="nav-link" href="javasript:void(0);">About</a>
325 </li> 325 </li>
326 <li class="nav-item"> 326 <li class="nav-item">
327 <a class="nav-link" href="javasript:void(0);">Masterclass</a> 327 <a class="nav-link" href="javasript:void(0);">Masterclass</a>
328 </li> 328 </li>
329 <li class="nav-item"> 329 <li class="nav-item">
330 <a class="nav-link" href="javasript:void(0);">Stories</a> 330 <a class="nav-link" href="javasript:void(0);">Stories</a>
331 </li> 331 </li>
332 <li class="nav-item"> 332 <li class="nav-item">
333 <a class="nav-link" href="javasript:void(0);">Library</a> 333 <a class="nav-link" href="javasript:void(0);">Library</a>
334 </li> 334 </li>
335 </ul> 335 </ul>
336 </div> 336 </div>
337 <a 337 <a
338 v-if="this.userData.firstLogin" 338 v-if="this.userData.firstLogin"
339 href="javasript:void(0);" 339 href="javasript:void(0);"
340 @click="addProfileDialog" 340 @click="addProfileDialog"
341 class="update_profile" 341 class="update_profile"
342 ><span></span> Update Profile</a 342 ><span></span> Update Profile</a
343 > 343 >
344 <div class=""> 344 <div class="">
345 <a 345 <a
346 href="javascript:void(0);" 346 href="javascript:void(0);"
347 class="user-profile-photo common_color" 347 class="user-profile-photo common_color"
348 @click="userprofileshowDialog" 348 @click="userprofileshowDialog"
349 ><img :src="userData.profilePic" 349 ><img :src="userData.profilePic"
350 /></a> 350 /></a>
351 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 351 <div class="sub-menu-user" id="userprofileshow" style="display: none">
352 <ul> 352 <ul>
353 <li> 353 <li>
354 <a href="javascript:void(0);" @click="addProfileDialog" 354 <a href="javascript:void(0);" @click="addProfileDialog"
355 >Edit Profile</a 355 >Edit Profile</a
356 > 356 >
357 </li> 357 </li>
358 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 358 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
359 </ul> 359 </ul>
360 </div> 360 </div>
361 </div> 361 </div>
362 </nav> 362 </nav>
363 363
364 <!-- <Header></Header> --> 364 <!-- <Header></Header> -->
365 <!-- menu wrapper --> 365 <!-- menu wrapper -->
366 <div class="row profile-tab-spc-top"> 366 <div class="row profile-tab-spc-top">
367 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> 367 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
368 <div class="inner-profile-ps common_color"> 368 <div class="inner-profile-ps common_color">
369 <img :src="userData.profilePic" class="" /> 369 <img :src="userData.profilePic" class="" />
370 </div> 370 </div>
371 <!-- user profile --> 371 <!-- user profile -->
372 372
373 <div class="user-profile"> 373 <div class="user-profile">
374 <h1> 374 <h1>
375 {{ userData.firstName }} {{ userData.lastName }} 375 {{ userData.firstName }} {{ userData.lastName }}
376 <span 376 <span
377 href="javasript:void(0);" 377 href="javasript:void(0);"
378 class="tags no-cursor no-underline" 378 class="tags no-cursor no-underline"
379 >{{ userData.role }}</span 379 >{{ userData.role }}</span
380 > 380 >
381 </h1> 381 </h1>
382 <ul class="joined-info"> 382 <ul class="joined-info">
383 <li> 383 <li>
384 <a 384 <a
385 href="javascript:void(0);" 385 href="javascript:void(0);"
386 v-if="!userData.designation && !userData.organisation" 386 v-if="!userData.designation && !userData.organisation"
387 @click="addProfileDialog" 387 @click="addProfileDialog"
388 >Add your work</a 388 >Add your work</a
389 > 389 >
390 <a 390 <a
391 class="no-cursor no-underline" 391 class="no-cursor no-underline"
392 href="javascript:void(0);" 392 href="javascript:void(0);"
393 v-if="userData.designation" 393 v-if="userData.designation"
394 >{{ userData.designation }}</a 394 >{{ userData.designation }}</a
395 > 395 >
396 <a 396 <a
397 class="no-cursor no-underline" 397 class="no-cursor no-underline"
398 href="javascript:void(0);" 398 href="javascript:void(0);"
399 v-if="userData.designation && userData.organisation" 399 v-if="userData.designation && userData.organisation"
400 >at</a 400 >at</a
401 > 401 >
402 <a 402 <a
403 class="no-cursor no-underline" 403 class="no-cursor no-underline"
404 href="javascript:void(0);" 404 href="javascript:void(0);"
405 v-if="userData.organisation" 405 v-if="userData.organisation"
406 >{{ userData.organisation }}</a 406 >{{ userData.organisation }}</a
407 > 407 >
408 <img src="../assets/images/u-info-icon.png" /> <span></span> 408 <img src="../assets/images/u-info-icon.png" /> <span></span>
409 </li> 409 </li>
410 <li> 410 <li>
411 <a href="javasript:void(0);" content="Karma Points" v-tippy> 411 <a href="javasript:void(0);" content="Karma Points" v-tippy>
412 {{ userData.karmaPoints }} Karma</a 412 {{ userData.karmaPoints }} Karma</a
413 > 413 >
414 <span></span> 414 <span></span>
415 </li> 415 </li>
416 <li> 416 <li>
417 <a href="javasript:void(0);" class="no-cursor no-underline" 417 <a href="javasript:void(0);" class="no-cursor no-underline"
418 >Joined on 418 >Joined on
419 {{ moment(userData.createdAt).format("MMM YYYY") }}</a 419 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
420 > 420 >
421 </li> 421 </li>
422 </ul> 422 </ul>
423 <p>{{ userData.bio }}</p> 423 <p>{{ userData.bio }}</p>
424 <div class="talk-to-me-about" v-if="userData.interests.length != 0"> 424 <div class="talk-to-me-about" v-if="userData.interests.length != 0">
425 <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> 425 <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>
426 </div><!-- talk to me about --> 426 </div><!-- talk to me about -->
427 </div> 427 </div>
428 428
429 </div> 429 </div>
430 <!-- user profile --> 430 <!-- user profile -->
431 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> 431 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
432 <div class="list-style-group" v-if="userData.awards.views != null"> 432 <div class="list-style-group" v-if="userData.awards.views != null">
433 <p>Awards</p> 433 <p>Awards</p>
434 <ul class="list-style"> 434 <ul class="list-style">
435 <li> 435 <li>
436 <a href="javascript:void(0);" 436 <a href="javascript:void(0);"
437 ><img src="../assets/images/icon-1.png" 437 ><img src="../assets/images/icon-1.png"
438 /></a> 438 /></a>
439 </li> 439 </li>
440 </ul> 440 </ul>
441 </div> 441 </div>
442 <!-- list style --> 442 <!-- list style -->
443 </div> 443 </div>
444 </div> 444 </div>
445 <div class="clearfix"></div> 445 <div class="clearfix"></div>
446 <div class="row top-brd profile-tab-spc-top"> 446 <div class="row top-brd profile-tab-spc-top">
447 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 447 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
448 <ul class="profile-tab"> 448 <ul class="profile-tab">
449 <li class="active c-0"> 449 <li class="active c-0">
450 <a href="javascript:void(0);" @click="caseDialog" 450 <a href="javascript:void(0);" @click="caseDialog"
451 >Case-studies({{ caseStudies.length }})</a 451 >Case-studies({{ caseStudies.length }})</a
452 > 452 >
453 </li> 453 </li>
454 <li class="rp-all"> 454 <li class="rp-all">
455 <a href="javascript:void(0);" @click="repliesDialog" 455 <a href="javascript:void(0);" @click="repliesDialog"
456 >Comments/Replies({{this.userComments.length}})</a 456 >Comments/Replies({{this.userComments.length}})</a
457 > 457 >
458 </li> 458 </li>
459 </ul> 459 </ul>
460 </div> 460 </div>
461 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> 461 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">
462 <ul class="social-connects" v-if="selectedSocialLink.length > 0"> 462 <ul class="social-connects" v-if="selectedSocialLink.length > 0">
463 <li><span>Follow</span></li> 463 <li><span>Follow</span></li>
464 <li v-for="(social, i) in selectedSocialLink" :key="i"> 464 <li v-for="(social, i) in selectedSocialLink" :key="i">
465 <a 465 <a
466 href="javascript:void(0);" 466 href="javascript:void(0);"
467 @click="openUrl(social.fieldValue)" 467 @click="openUrl(social.fieldValue)"
468 class="cursor-pointer" 468 class="cursor-pointer"
469 ><img :src="social.image" 469 ><img :src="social.image"
470 /></a> 470 /></a>
471 </li> 471 </li>
472 </ul> 472 </ul>
473 <ul class="social-connects" v-if="selectedSocialLink.length == 0"> 473 <ul class="social-connects" v-if="selectedSocialLink.length == 0">
474 <li> 474 <li>
475 <a 475 <a
476 href="javascript:void(0);" 476 href="javascript:void(0);"
477 @click="addProfileDialog" 477 @click="addProfileDialog"
478 class="active cursor-pointer" 478 class="active cursor-pointer"
479 ><img src="../assets/images/plus.png" 479 ><img src="../assets/images/plus.png"
480 /></a> 480 /></a>
481 <span class="connect-social-channel" 481 <span class="connect-social-channel"
482 >Connect your social channels</span 482 >Connect your social channels</span
483 > 483 >
484 </li> 484 </li>
485 </ul> 485 </ul>
486 </div> 486 </div>
487 </div> 487 </div>
488 <!-- tab style --> 488 <!-- tab style -->
489 <div class="profile-data-wrp"> 489 <div class="profile-data-wrp">
490 <div class="container-fluid data-wrp" id="case-study-0"> 490 <div class="container-fluid data-wrp" id="case-study-0">
491 <div class="row" v-if="caseStudies.length == 0"> 491 <div class="row" v-if="caseStudies.length == 0">
492 <div class="col-6 col-lg-6"> 492 <div class="col-6 col-lg-6">
493 <div class="full-w-height-profile ex-light seats_bg"> 493 <div class="full-w-height-profile ex-light seats_bg">
494 <a 494 <a
495 href="javasript:void(0);" 495 href="javasript:void(0);"
496 class="profile-md-bt center-and-spc bt-spc-top" 496 class="profile-md-bt center-and-spc bt-spc-top"
497 @click="openUrl('https://www.productgrowth.org/spotlight')" 497 @click="openUrl('https://www.productgrowth.org/spotlight')"
498 >Explore Spotlights</a 498 >Explore Spotlights</a
499 > 499 >
500 <p>Explore the spotlights others has put together</p> 500 <p>Explore the spotlights others has put together</p>
501 </div> 501 </div>
502 <!-- full width --> 502 <!-- full width -->
503 </div> 503 </div>
504 <!-- col 6 --> 504 <!-- col 6 -->
505 <div class="col-6 col-lg-6"> 505 <div class="col-6 col-lg-6">
506 <div class="full-w-height-profile ex-light spotlight_bg"> 506 <div class="full-w-height-profile ex-light spotlight_bg">
507 <img src="../assets/images/add-role.svg" class="add-role" /> 507 <img src="../assets/images/add-role.svg" class="add-role" />
508 <div class="clearfix"></div> 508 <div class="clearfix"></div>
509 <!-- clearfix --> 509 <!-- clearfix -->
510 <a 510 <a
511 href="javasript:void(0);" 511 href="javasript:void(0);"
512 class="profile-md-bt center-and-spc" 512 class="profile-md-bt center-and-spc"
513 @click=" 513 @click="
514 openUrl( 514 openUrl(
515 'https://www.productgrowth.org/spotlight#typeform-spotlight' 515 'https://www.productgrowth.org/spotlight#typeform-spotlight'
516 ) 516 )
517 " 517 "
518 >Publish Spotlight</a 518 >Publish Spotlight</a
519 > 519 >
520 <p>Share your own insights through Spotlight</p> 520 <p>Share your own insights through Spotlight</p>
521 </div> 521 </div>
522 <!-- full width --> 522 <!-- full width -->
523 </div> 523 </div>
524 <!-- col 6 --> 524 <!-- col 6 -->
525 </div> 525 </div>
526 526
527 <div class="profile-data-wrp" v-if="caseStudies.length != 0"> 527 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
528 <div class="container-fluid data-wrp"> 528 <div class="container-fluid data-wrp">
529 <div class="row"> 529 <div class="row">
530 <div class="" v-for="(study, i) in caseStudies" :key="i"> 530 <div class="" v-for="(study, i) in caseStudies" :key="i">
531 <div class="card-warpper" @click="openStudy(study)"> 531 <div class="card-warpper" @click="openStudy(study)">
532 <div class="company-detail"> 532 <div class="company-detail">
533 <div class="c-logo"> 533 <div class="c-logo">
534 <!-- <img src="../assets/images/image 46.png" /> --> 534 <!-- <img src="../assets/images/image 46.png" /> -->
535 <img :src="study.intro.logoURL" /> 535 <img :src="study.intro.logoURL" />
536 </div> 536 </div>
537 <div class="c-tag"> 537 <div class="c-tag">
538 <img 538 <img
539 src="../assets/images/retake-blue.svg" 539 src="../assets/images/retake-blue.svg"
540 v-if="study.intro.type == 'Retake'" 540 v-if="study.intro.type == 'Retake'"
541 /> 541 />
542 <img 542 <img
543 src="../assets/images/behind-blue.svg" 543 src="../assets/images/behind-blue.svg"
544 v-if="study.intro.type == 'Behind-the-scenes'" 544 v-if="study.intro.type == 'Behind-the-scenes'"
545 /> 545 />
546 <img 546 <img
547 src="../assets/images/critique-blue.svg" 547 src="../assets/images/critique-blue.svg"
548 v-if="study.intro.type == 'Critique'" 548 v-if="study.intro.type == 'Critique'"
549 /> 549 />
550 <img 550 <img
551 src="../assets/images/juxtapose-blue.svg" 551 src="../assets/images/juxtapose-blue.svg"
552 v-if="study.intro.type == 'Juxtapose'" 552 v-if="study.intro.type == 'Juxtapose'"
553 /> 553 />
554 </div> 554 </div>
555 </div> 555 </div>
556 556
557 <!-- company detail--> 557 <!-- company detail-->
558 <h1>{{ study.intro.name }}</h1> 558 <h1>{{ study.intro.name }}</h1>
559 <div class="user-views"> 559 <div class="user-views">
560 <ul> 560 <ul>
561 <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li> 561 <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li>
562 <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> 562 <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
563 <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> 563 <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
564 </ul> 564 </ul>
565 565
566 </div><!-- user views --> 566 </div><!-- user views -->
567 <div class="u-detail"> 567 <div class="u-detail">
568 <img src="../assets/images/user-2.png" /> 568 <img src="../assets/images/user-2.png" />
569 <h2 v-for="(name, j) in study.intro.authors" :key="j"> 569 <h2 v-for="(name, j) in study.intro.authors" :key="j">
570 {{ name }} 570 {{ name }}
571 </h2> 571 </h2>
572 572
573 </div> 573 </div>
574 <!-- user detail --> 574 <!-- user detail -->
575 <p> 575 <p>
576 <span v-for="(area, j) in study.focusAreas" :key="j"> 576 <span v-for="(area, j) in study.focusAreas" :key="j">
577 {{ area }} 577 {{ area }}
578 </span> 578 </span>
579 </p> 579 </p>
580 <ul class="tags-list"> 580 <ul class="tags-list">
581 <li v-for="(tags, j) in study.insightTags" :key="j"> 581 <li v-for="(tags, j) in study.insightTags" :key="j">
582 <a 582 <a
583 href="javasript:void(0);" 583 href="javasript:void(0);"
584 class="insight-design" 584 class="insight-design"
585 v-if="tags == 'Design'" 585 v-if="tags == 'Design'"
586 >Design</a 586 >Design</a
587 > 587 >
588 <a 588 <a
589 href="javasript:void(0);" 589 href="javasript:void(0);"
590 class="insight-product" 590 class="insight-product"
591 v-if="tags == 'Product'" 591 v-if="tags == 'Product'"
592 >Product</a 592 >Product</a
593 > 593 >
594 <a 594 <a
595 href="javasript:void(0);" 595 href="javasript:void(0);"
596 class="insight-marketing" 596 class="insight-marketing"
597 v-if="tags == 'Marketing'" 597 v-if="tags == 'Marketing'"
598 >Marketing</a 598 >Marketing</a
599 > 599 >
600 <a 600 <a
601 href="javasript:void(0);" 601 href="javasript:void(0);"
602 class="insight-pricing" 602 class="insight-pricing"
603 v-if="tags == 'Pricing'" 603 v-if="tags == 'Pricing'"
604 >Pricing</a 604 >Pricing</a
605 > 605 >
606 <a 606 <a
607 href="javasript:void(0);" 607 href="javasript:void(0);"
608 class="insight-psychology" 608 class="insight-psychology"
609 v-if="tags == 'Psychology'" 609 v-if="tags == 'Psychology'"
610 >Psychology</a 610 >Psychology</a
611 > 611 >
612 </li> 612 </li>
613 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> 613 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
614 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> 614 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
615 </ul> 615 </ul>
616 <div class="clearfix"></div> 616 <div class="clearfix"></div>
617 <a href="#" class="action-set"> 617 <a href="#" class="action-set">
618 <img src="../assets/images/arrow-right-action.svg" /> 618 <img src="../assets/images/arrow-right-action.svg" />
619 </a> 619 </a>
620 <div class="read-time"> 620 <div class="read-time">
621 <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> 621 <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>
622 </div><!-- read time --> 622 </div><!-- read time -->
623 </div> 623 </div>
624 <!-- card wrpper --> 624 <!-- card wrpper -->
625 <!-- card wrpper --> 625 <!-- card wrpper -->
626 </div> 626 </div>
627 <!-- all card wrpper --> 627 <!-- all card wrpper -->
628 </div> 628 </div>
629 </div> 629 </div>
630 </div> 630 </div>
631 <!-- data wrp --> 631 <!-- data wrp -->
632 </div> 632 </div>
633 <!-- case study 0 --> 633 <!-- case study 0 -->
634 <div 634 <div
635 class="container-fluid data-wrp" 635 class="container-fluid data-wrp"
636 id="all-replies" 636 id="all-replies"
637 style="display: none" 637 style="display: none"
638 > 638 >
639 <div class="row"> 639 <div class="row">
640 <div class="replies col-md-12" > 640 <div class="replies col-md-12" >
641 <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" > 641 <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" >
642 <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1> 642 <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1>
643 <ul class="joined-info"> 643 <ul class="joined-info">
644 <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li> 644 <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li>
645 <li><img src="../assets/images/heart.png" /></li> 645 <li><img src="../assets/images/heart.png" /></li>
646 <li><a href="javasript:void(0);"> {{comments.likes}}</a></li> 646 <li><a href="javasript:void(0);"> {{comments.likes}}</a></li>
647 <li class="comment-spc"> 647 <li class="comment-spc">
648 <img src="../assets/images/comment.svg" /> 648 <img src="../assets/images/comment.svg" />
649 </li> 649 </li>
650 <li><a href="javasript:void(0);"> {{comments.replies}}</a></li> 650 <li><a href="javasript:void(0);"> {{comments.replies}}</a></li>
651 </ul> 651 </ul>
652 <p> 652 <p>
653 {{comments.comment}} 653 {{comments.comment}}
654 <!-- I wonder what the difference between “<strong> 654 <!-- I wonder what the difference between “<strong>
655 Assistant</strong 655 Assistant</strong
656 >” and “<strong>Pickup and Drop</strong>” are. If they are the 656 >” and “<strong>Pickup and Drop</strong>” are. If they are the
657 same, there are two “call to actions” for the same workflow --> 657 same, there are two “call to actions” for the same workflow -->
658 </p> 658 </p>
659 </div> 659 </div>
660 <!-- replies wrapper --> 660 <!-- replies wrapper -->
661 </div> 661 </div>
662 <!-- all card wrpper --> 662 <!-- all card wrpper -->
663 </div> 663 </div>
664 </div> 664 </div>
665 <!-- all Relpies --> 665 <!-- all Relpies -->
666 </div> 666 </div>
667 <!-- data wrp --> 667 <!-- data wrp -->
668 <!-- body wrapper --> 668 <!-- body wrapper -->
669 </div> 669 </div>
670 </main> 670 </main>
671 </template> 671 </template>
672 672
673 <script> 673 <script>
674 import Vue from "vue"; 674 import Vue from "vue";
675 import router from "../router"; 675 import router from "../router";
676 import $ from "jquery"; 676 import $ from "jquery";
677 import axios from "axios"; 677 import axios from "axios";
678 import Header from "./Header"; 678 import Header from "./Header";
679 import moment from 'moment'; 679 import moment from 'moment';
680 680
681 export default { 681 export default {
682 name: "Profile", 682 name: "Profile",
683 components: { 683 components: {
684 Header: Header, 684 Header: Header,
685 }, 685 },
686 data: () => ({ 686 data: () => ({
687 loggedinFlag: false, 687 loggedinFlag: false,
688 usertoken: null, 688 usertoken: null,
689 currentLink: null, 689 currentLink: null,
690 userData: { 690 userData: {
691 socialMediaProfiles: { 691 socialMediaProfiles: {
692 facebook: null, 692 facebook: null,
693 linkedin: null, 693 linkedin: null,
694 medium: null, 694 medium: null,
695 twitter: null, 695 twitter: null,
696 behance: null, 696 behance: null,
697 dribble: null, 697 dribble: null,
698 github: null, 698 github: null,
699 stackoverflow: null, 699 stackoverflow: null,
700 instagram: null, 700 instagram: null,
701 }, 701 },
702 awards: { 702 awards: {
703 views: null, 703 views: null,
704 likes: null, 704 likes: null,
705 comments: null, 705 comments: null,
706 }, 706 },
707 verified: true, 707 verified: true,
708 phoneNo: null, 708 phoneNo: null,
709 bio: null, 709 bio: null,
710 designation: null, 710 designation: null,
711 organisation: null, 711 organisation: null,
712 bgColor: null, 712 bgColor: null,
713 interests: [], 713 interests: [],
714 karmaPoints: null, 714 karmaPoints: null,
715 socialLogin: null, 715 socialLogin: null,
716 firstLogin: null, 716 firstLogin: null,
717 notification: null, 717 notification: null,
718 profilePic: null, 718 profilePic: null,
719 role: null, 719 role: null,
720 name: null, 720 name: null,
721 email: null, 721 email: null,
722 firstName: null, 722 firstName: null,
723 lastName: null, 723 lastName: null,
724 }, 724 },
725 caseStudies: [], 725 caseStudies: [],
726 interestName: null, 726 interestName: null,
727 oldId: null, 727 oldId: null,
728 currentSocialLinkName: null, 728 currentSocialLinkName: null,
729 showCompany: false, 729 showCompany: false,
730 showDesignation: false, 730 showDesignation: false,
731 socialLink: [ 731 socialLink: [
732 { 732 {
733 displayName: "Facebook", 733 displayName: "Facebook",
734 fieldName: "facebook", 734 fieldName: "facebook",
735 fieldValue: null, 735 fieldValue: null,
736 image: require(`../assets/images/facebook.png`), 736 image: require(`../assets/images/facebook.png`),
737 }, 737 },
738 { 738 {
739 displayName: "Linkedin", 739 displayName: "Linkedin",
740 fieldName: "linkedin", 740 fieldName: "linkedin",
741 fieldValue: null, 741 fieldValue: null,
742 image: require(`../assets/images/linkedin.png`), 742 image: require(`../assets/images/linkedin.png`),
743 }, 743 },
744 { 744 {
745 displayName: "Medium", 745 displayName: "Medium",
746 fieldName: "medium", 746 fieldName: "medium",
747 fieldValue: null, 747 fieldValue: null,
748 image: require(`../assets/images/medium.png`), 748 image: require(`../assets/images/medium.png`),
749 }, 749 },
750 { 750 {
751 displayName: "Twitter", 751 displayName: "Twitter",
752 fieldName: "twitter", 752 fieldName: "twitter",
753 fieldValue: null, 753 fieldValue: null,
754 image: require(`../assets/images/twitter.png`), 754 image: require(`../assets/images/twitter.png`),
755 }, 755 },
756 { 756 {
757 displayName: "Behance", 757 displayName: "Behance",
758 fieldName: "behance", 758 fieldName: "behance",
759 fieldValue: null, 759 fieldValue: null,
760 image: require(`../assets/images/behance.png`), 760 image: require(`../assets/images/behance.png`),
761 }, 761 },
762 { 762 {
763 displayName: "Dribble", 763 displayName: "Dribble",
764 fieldName: "dribble", 764 fieldName: "dribble",
765 fieldValue: null, 765 fieldValue: null,
766 image: require(`../assets/images/dribbble.png`), 766 image: require(`../assets/images/dribbble.png`),
767 }, 767 },
768 { 768 {
769 displayName: "Github", 769 displayName: "Github",
770 fieldName: "github", 770 fieldName: "github",
771 fieldValue: null, 771 fieldValue: null,
772 image: require(`../assets/images/github.png`), 772 image: require(`../assets/images/github.png`),
773 }, 773 },
774 { 774 {
775 displayName: "Stackoverflow", 775 displayName: "Stackoverflow",
776 fieldName: "stackoverflow", 776 fieldName: "stackoverflow",
777 fieldValue: null, 777 fieldValue: null,
778 image: require(`../assets/images/stack overflow.png`), 778 image: require(`../assets/images/stack overflow.png`),
779 }, 779 },
780 { 780 {
781 displayName: "Instagram", 781 displayName: "Instagram",
782 fieldName: "instagram", 782 fieldName: "instagram",
783 fieldValue: null, 783 fieldValue: null,
784 image: require(`../assets/images/instagram.png`), 784 image: require(`../assets/images/instagram.png`),
785 }, 785 },
786 ], 786 ],
787 selectedSocialLink: [], 787 selectedSocialLink: [],
788 userComments:[], 788 userComments:[],
789 }), 789 }),
790 790
791 mounted() { 791 mounted() {
792 this.userData = {}; 792 this.userData = {};
793 // this.socialLink = []; 793 // this.socialLink = [];
794 this.userData.interests = []; 794 this.userData.interests = [];
795 var userdata = localStorage.getItem("spotlight_usertoken"); 795 var userdata = localStorage.getItem("spotlight_usertoken");
796 if (userdata) { 796 if (userdata) {
797 userdata = JSON.parse(userdata); 797 userdata = JSON.parse(userdata);
798 this.usertoken = userdata.token; 798 this.usertoken = userdata.token;
799 this.getProfile(); 799 this.getProfile();
800 this.getCaseStudies(); 800 this.getCaseStudies();
801 this.getUserComments(); 801 this.getUserComments();
802 }else{ 802 }else{
803 this.logout(); 803 this.logout();
804 } 804 }
805 }, 805 },
806 methods: { 806 methods: {
807 goToSignUp() { 807 goToSignUp() {
808 this.$router.push("/"); 808 this.$router.push("/");
809 }, 809 },
810 goToReset() { 810 goToReset() {
811 this.$router.push("/reset"); 811 this.$router.push("/reset");
812 }, 812 },
813 logout() { 813 logout() {
814 localStorage.removeItem("spotlight_usertoken"); 814 localStorage.removeItem("spotlight_usertoken");
815 localStorage.removeItem("spotlight_email"); 815 localStorage.removeItem("spotlight_email");
816 this.$router.push("/login"); 816 this.$router.push("/login");
817 }, 817 },
818 dateGenerator(curreDate){ 818 dateGenerator(curreDate){
819 var todayDate = moment(new Date(), "DD.MM.YYYY"); 819 var todayDate = moment(new Date(), "DD.MM.YYYY");
820 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 820 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
821 var result = todayDate.diff(endDate, 'days'); 821 var result = todayDate.diff(endDate, 'days');
822 return result; 822 return result;
823 }, 823 },
824 prefillSocialLink(links) { 824 prefillSocialLink(links) {
825 var keys = []; 825 var keys = [];
826 keys = Object.keys(links); 826 keys = Object.keys(links);
827 keys.forEach((link_) => { 827 keys.forEach((link_) => {
828 console.log(link_, ":", links[link_]); 828 console.log(link_, ":", links[link_]);
829 if (links[link_] != null) { 829 if (links[link_] != null) {
830 var i = this.socialLink.findIndex( 830 var i = this.socialLink.findIndex(
831 (links_) => links_.fieldName == link_ 831 (links_) => links_.fieldName == link_
832 ); 832 );
833 if (i != -1) { 833 if (i != -1) {
834 this.selectedSocialLink.push({ 834 this.selectedSocialLink.push({
835 displayName: this.socialLink[i].displayName, 835 displayName: this.socialLink[i].displayName,
836 fieldName: this.socialLink[i].fieldName, 836 fieldName: this.socialLink[i].fieldName,
837 image: this.socialLink[i].image, 837 image: this.socialLink[i].image,
838 fieldValue: links[link_], 838 fieldValue: links[link_],
839 }); 839 });
840 } 840 }
841 } 841 }
842 }); 842 });
843 console.log("links-- are--", links); 843 console.log("links-- are--", links);
844 }, 844 },
845 addSocialLink(id) { 845 addSocialLink(id) {
846 this.currentLink = null; 846 this.currentLink = null;
847 var i = this.selectedSocialLink.findIndex( 847 var i = this.selectedSocialLink.findIndex(
848 (link_) => link_.fieldName == id 848 (link_) => link_.fieldName == id
849 ); 849 );
850 var j = this.socialLink.findIndex((links_) => links_.fieldName == id); 850 var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
851 if (i == -1) { 851 if (i == -1) {
852 this.selectedSocialLink.push({ 852 this.selectedSocialLink.push({
853 displayName: this.socialLink[j].displayName, 853 displayName: this.socialLink[j].displayName,
854 fieldName: this.socialLink[j].fieldName, 854 fieldName: this.socialLink[j].fieldName,
855 image: this.socialLink[j].image, 855 image: this.socialLink[j].image,
856 fieldValue: null, 856 fieldValue: null,
857 }); 857 });
858 } else { 858 } else {
859 this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); 859 this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
860 } 860 }
861 }, 861 },
862 removeSocialLink(i) { 862 removeSocialLink(i) {
863 var name = this.selectedSocialLink[i].fieldName; 863 var name = this.selectedSocialLink[i].fieldName;
864 this.userData.socialMediaProfiles[name] = null; 864 this.userData.socialMediaProfiles[name] = null;
865 this.selectedSocialLink.splice(i, 1); 865 this.selectedSocialLink.splice(i, 1);
866 }, 866 },
867 867
868 addInterest() { 868 addInterest() {
869 console.log(this.userData.interests.length, "called", this.interestName); 869 console.log(this.userData.interests.length, "called", this.interestName);
870 if (this.userData.interests.length <= 2) { 870 if (this.userData.interests.length <= 2) {
871 this.userData.interests.push(this.interestName); 871 this.userData.interests.push(this.interestName);
872 this.interestName = null; 872 this.interestName = null;
873 } else { 873 } else {
874 this.$toaster.info("Only 3 interest are allowed"); 874 this.$toaster.info("Only 3 interest are allowed");
875 } 875 }
876 }, 876 },
877 removeInterest(i) { 877 removeInterest(i) {
878 console.log("i", i); 878 console.log("i", i);
879 this.userData.interests.splice(i, 1); 879 this.userData.interests.splice(i, 1);
880 console.log(" this.userData", this.userData.interests); 880 console.log(" this.userData", this.userData.interests);
881 }, 881 },
882 assignClass() { 882 assignClass() {
883 var element = document.getElementById(this.userData.bgColor); 883 var element = document.getElementById(this.userData.bgColor);
884 element.classList.add("active"); 884 element.classList.add("active");
885 var cols = document.getElementsByClassName("common_color"); 885 var cols = document.getElementsByClassName("common_color");
886 for (var i = 0; i < cols.length; i++) { 886 for (var i = 0; i < cols.length; i++) {
887 cols[i].style.backgroundColor = this.userData.bgColor; 887 cols[i].style.backgroundColor = this.userData.bgColor;
888 } 888 }
889 }, 889 },
890 createString(list){ 890 createString(list){
891 var name = ""; 891 var name = "";
892 list.forEach(element => { 892 list.forEach(element => {
893 name = name+','+element; 893 name = name+','+element;
894 }); 894 });
895 895
896 console.log("name is",name); 896 console.log("name is",name);
897 return name.substring(1);; 897 return name.substring(1);;
898 }, 898 },
899 changeColor(clr) { 899 changeColor(clr) {
900 console.log(this.oldId, "clr", clr); 900 console.log(this.oldId, "clr", clr);
901 var element = document.getElementById(clr); 901 var element = document.getElementById(clr);
902 element.classList.add("active"); 902 element.classList.add("active");
903 var removeelement = document.getElementById(this.oldId); 903 var removeelement = document.getElementById(this.oldId);
904 removeelement.classList.remove("active"); 904 removeelement.classList.remove("active");
905 this.oldId = clr; 905 this.oldId = clr;
906 var cols = document.getElementsByClassName("common_color"); 906 var cols = document.getElementsByClassName("common_color");
907 for (var i = 0; i < cols.length; i++) { 907 for (var i = 0; i < cols.length; i++) {
908 cols[i].style.backgroundColor = clr; 908 cols[i].style.backgroundColor = clr;
909 } 909 }
910 this.userData.bgColor = clr; 910 this.userData.bgColor = clr;
911 }, 911 },
912 getProfile() { 912 getProfile() {
913 axios 913 axios
914 .get("/profile", { 914 .get("/profile", {
915 headers: { 915 headers: {
916 Authorization: "Bearer " + this.usertoken, 916 Authorization: "Bearer " + this.usertoken,
917 }, 917 },
918 }) 918 })
919 .then((response) => { 919 .then((response) => {
920 if (!response.data.data.socialMediaProfiles) { 920 if (!response.data.data.socialMediaProfiles) {
921 this.userData.socialMediaProfiles = {}; 921 this.userData.socialMediaProfiles = {};
922 } 922 }
923 this.userData = response.data.data; 923 this.userData = response.data.data;
924 924
925 // this.userData = response.data.data; 925 // this.userData = response.data.data;
926 this.oldId = this.userData.bgColor; 926 this.oldId = this.userData.bgColor;
927 console.log(this.oldId, "this.userData.", this.userData); 927 console.log(this.oldId, "this.userData.", this.userData);
928 console.log("this.userData.firstLogin ", this.userData.firstLogin); 928 console.log("this.userData.firstLogin ", this.userData.firstLogin);
929 this.prefillSocialLink(this.userData.socialMediaProfiles); 929 this.prefillSocialLink(this.userData.socialMediaProfiles);
930 if (this.userData.firstLogin == true) { 930 if (this.userData.firstLogin == true) {
931 this.addProfileDialog(); 931 this.addProfileDialog();
932 } 932 }
933 this.assignClass(); 933 this.assignClass();
934 console.log(response.data.data); 934 console.log(response.data.data);
935 }) 935 })
936 .catch((error) => console.log(error)); 936 .catch((error) => console.log(error));
937 }, 937 },
938 getRandomAvatar() { 938 getRandomAvatar() {
939 axios 939 axios
940 .get("/randomAvatar", { 940 .get("/randomAvatar", {
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 this.userData.profilePic = response.data.imageURL; 946 this.userData.profilePic = response.data.imageURL;
947 console.log(response.data.imageURL); 947 console.log(response.data.imageURL);
948 }) 948 })
949 .catch((error) => console.log(error)); 949 .catch((error) => console.log(error));
950 }, 950 },
951 getUserComments() { 951 getUserComments() {
952 axios 952 axios
953 .get("/profile/comments", { 953 .get("/profile/comments", {
954 headers: { 954 headers: {
955 Authorization: "Bearer " + this.usertoken, 955 Authorization: "Bearer " + this.usertoken,
956 }, 956 },
957 }) 957 })
958 .then((response) => { 958 .then((response) => {
959 this.userComments = response.data.data; 959 this.userComments = response.data.data;
960 console.log(response.data); 960 console.log(response.data);
961 }) 961 })
962 .catch((error) => console.log(error)); 962 .catch((error) => console.log(error));
963 }, 963 },
964 getCaseStudies() { 964 getCaseStudies() {
965 axios 965 axios
966 .get("/caseStudy/all", { 966 .get("/caseStudy/all", {
967 headers: { 967 headers: {
968 Authorization: "Bearer " + this.usertoken, 968 Authorization: "Bearer " + this.usertoken,
969 }, 969 },
970 }) 970 })
971 .then((response) => { 971 .then((response) => {
972 console.log(response.data.data.caseStudies); 972 console.log("----",response.data.data.caseStudies);
973 this.caseStudies = response.data.data.caseStudies; 973 this.caseStudies = response.data.data.caseStudies;
974 }) 974 })
975 .catch((error) => console.log(error)); 975 .catch((error) => console.log(error));
976 }, 976 },
977 openStudy(payload) { 977 openStudy(payload) {
978 console.log("payload-", payload); 978 console.log("payload-", payload);
979 payload.intro.date = payload.createdAt; 979 payload.intro.date = payload.createdAt;
980 payload.intro.focusPoint = payload.focusAreas; 980 payload.intro.focusPoint = payload.focusAreas;
981 axios 981 axios
982 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 982 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
983 headers: { 983 headers: {
984 Authorization: "Bearer " + this.usertoken, 984 Authorization: "Bearer " + this.usertoken,
985 }, 985 },
986 }) 986 })
987 .then((response) => { 987 .then((response) => {
988 this.createSlide(payload, response.data.data); 988 this.createSlide(payload, response.data.data);
989 }) 989 })
990 .catch((error) => console.log(error)); 990 .catch((error) => console.log(error));
991 }, 991 },
992 992
993 createSlide(payload, slides) { 993 createSlide(payload, slides) {
994 var finalSlides = []; 994 var finalSlides = [];
995 slides.forEach((slides_) => { 995 slides.forEach((slides_) => {
996 var url = this.assignRoutes(slides_.templateId); 996 var url = this.assignRoutes(slides_.templateId);
997 var obj = { 997 var obj = {
998 forward: true, 998 forward: true,
999 backward: true, 999 backward: true,
1000 ur: url, 1000 ur: url,
1001 slideId: slides_._id, 1001 slideId: slides_._id,
1002 caseStudyId: slides_.caseStudyId, 1002 caseStudyId: slides_.caseStudyId,
1003 payload: { 1003 payload: {
1004 metaData: slides_.metaData, 1004 metaData: slides_.metaData,
1005 comments: slides_.comments, 1005 comments: slides_.comments,
1006 insight: slides_.insight ? slides_.insight : null, 1006 insight: slides_.insight ? slides_.insight : null,
1007 }, 1007 },
1008 }; 1008 };
1009 // slides_ 1009 // slides_
1010 finalSlides.push(obj); 1010 finalSlides.push(obj);
1011 }); 1011 });
1012 console.log("payload", payload); 1012 console.log("payload", payload);
1013 // add first slide at begining 1013 // add first slide at begining
1014 finalSlides.unshift({ 1014 finalSlides.unshift({
1015 forward: true, 1015 forward: true,
1016 backward: false, 1016 backward: false,
1017 ur: "EpisodeIntro", 1017 ur: "EpisodeIntro",
1018 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 1018 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
1019 caseStudyId: payload._id, 1019 caseStudyId: payload._id,
1020 payload: { 1020 payload: {
1021 metaData: payload.intro, 1021 metaData: payload.intro,
1022 comments: [], 1022 comments: [],
1023 }, 1023 },
1024 }); 1024 });
1025 finalSlides.push({ 1025 finalSlides.push({
1026 forward: true, 1026 forward: true,
1027 backward: false, 1027 backward: false,
1028 ur: "Outro", 1028 ur: "Outro",
1029 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 1029 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
1030 caseStudyId: payload._id, 1030 caseStudyId: payload._id,
1031 payload: { 1031 payload: {
1032 metaData: payload.outro, 1032 metaData: payload.outro,
1033 comments: [], 1033 comments: [],
1034 }, 1034 },
1035 }); 1035 });
1036 1036
1037 console.log(finalSlides); 1037 console.log(finalSlides);
1038 console.log("payload", payload); 1038 console.log("payload", payload);
1039 localStorage.setItem( 1039 localStorage.setItem(
1040 "spotlight_slide" + payload._id, 1040 "spotlight_slide" + payload._id,
1041 JSON.stringify(finalSlides) 1041 JSON.stringify(finalSlides)
1042 ); 1042 );
1043 this.$router.push({ 1043 this.$router.push({
1044 name: "EpisodeIntro", 1044 name: "EpisodeIntro",
1045 params: { 1045 params: {
1046 caseStudyId: finalSlides[0].caseStudyId, 1046 caseStudyId: finalSlides[0].caseStudyId,
1047 slideId: finalSlides[0].slideId, 1047 slideId: finalSlides[0].slideId,
1048 }, 1048 },
1049 }); 1049 });
1050 }, 1050 },
1051 assignRoutes(tempId) { 1051 assignRoutes(tempId) {
1052 // /episode-intro 1052 // /episode-intro
1053 // /outro 1053 // /outro
1054 var routes = [ 1054 var routes = [
1055 { 1055 {
1056 url: "AuthorIntro", 1056 url: "AuthorIntro",
1057 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 1057 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
1058 }, 1058 },
1059 { 1059 {
1060 url: "NoScreenshotSingleAuthor", 1060 url: "NoScreenshotSingleAuthor",
1061 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 1061 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
1062 }, 1062 },
1063 { 1063 {
1064 url: "SingleMobileScreenInsightTwo", 1064 url: "SingleMobileScreenInsightTwo",
1065 tempId: "T3_cqNIf7tuqL4jyON63dA7", 1065 tempId: "T3_cqNIf7tuqL4jyON63dA7",
1066 }, 1066 },
1067 { 1067 {
1068 url: "TwoScreenWithoutInsight", 1068 url: "TwoScreenWithoutInsight",
1069 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 1069 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
1070 }, 1070 },
1071 { 1071 {
1072 url: "noscreenshotSingleautho", 1072 url: "noscreenshotSingleautho",
1073 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 1073 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
1074 }, 1074 },
1075 { 1075 {
1076 url: "SingleMobileScreenInsightOne", 1076 url: "SingleMobileScreenInsightOne",
1077 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 1077 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
1078 }, 1078 },
1079 { 1079 {
1080 url: "TwoScreenWithInsight", 1080 url: "TwoScreenWithInsight",
1081 tempId: "T7_za3c3sYgx7bVvtKzasdf", 1081 tempId: "T7_za3c3sYgx7bVvtKzasdf",
1082 }, 1082 },
1083 { 1083 {
1084 url: "AuthorReadingNow", 1084 url: "AuthorReadingNow",
1085 tempId: "T8_zb4d4fYgx7bVvtKzasdf", 1085 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
1086 }, 1086 },
1087 { 1087 {
1088 url: "AuthorReadingBreak", 1088 url: "AuthorReadingBreak",
1089 tempId: "T9_zb3e4fYgy7dVvfKdasdf", 1089 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
1090 }, 1090 },
1091 ]; 1091 ];
1092 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 1092 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
1093 return routes[i].url; 1093 return routes[i].url;
1094 }, 1094 },
1095 saveProfile() { 1095 saveProfile() {
1096 var obj = {}; 1096 var obj = {};
1097 if (this.userData.firstLogin == true) { 1097 if (this.userData.firstLogin == true) {
1098 this.userData.firstLogin = false; 1098 this.userData.firstLogin = false;
1099 } 1099 }
1100 this.userData.name = 1100 this.userData.name =
1101 this.userData.firstName + " " + this.userData.lastName; 1101 this.userData.firstName + " " + this.userData.lastName;
1102 obj = Object.assign(obj, this.userData); 1102 obj = Object.assign(obj, this.userData);
1103 // if(!obj.socialMediaProfiles){ 1103 // if(!obj.socialMediaProfiles){
1104 // obj.socialMediaProfiles = {}; 1104 // obj.socialMediaProfiles = {};
1105 // } 1105 // }
1106 this.selectedSocialLink.forEach((element) => { 1106 this.selectedSocialLink.forEach((element) => {
1107 var key = element.fieldName; 1107 var key = element.fieldName;
1108 obj.socialMediaProfiles[key] = element.fieldValue; 1108 obj.socialMediaProfiles[key] = element.fieldValue;
1109 }); 1109 });
1110 delete obj.createdAt; 1110 delete obj.createdAt;
1111 delete obj.email; 1111 delete obj.email;
1112 delete obj.role; 1112 delete obj.role;
1113 delete obj.verified; 1113 delete obj.verified;
1114 delete obj.updatedAt; 1114 delete obj.updatedAt;
1115 delete obj.__v; 1115 delete obj.__v;
1116 delete obj._id; 1116 delete obj._id;
1117 delete obj.karmaPoints; 1117 delete obj.karmaPoints;
1118 delete obj.awards; 1118 delete obj.awards;
1119 delete obj.socialLogin; 1119 delete obj.socialLogin;
1120 delete obj.phoneNo; 1120 delete obj.phoneNo;
1121 axios 1121 axios
1122 .put("/profile", obj, { 1122 .put("/profile", obj, {
1123 headers: { 1123 headers: {
1124 Authorization: "Bearer " + this.usertoken, 1124 Authorization: "Bearer " + this.usertoken,
1125 }, 1125 },
1126 }) 1126 })
1127 .then((response) => { 1127 .then((response) => {
1128 // this.userData = response.data.data; 1128 // this.userData = response.data.data;
1129 this.$toaster.success("Profile Updated"); 1129 this.$toaster.success("Profile Updated");
1130 this.closeDialog(); 1130 this.closeDialog();
1131 console.log(response.data.data); 1131 console.log(response.data.data);
1132 }) 1132 })
1133 .catch((error) => { 1133 .catch((error) => {
1134 if (error.response) { 1134 if (error.response) {
1135 this.$toaster.error(error.response.data.message); 1135 this.$toaster.error(error.response.data.message);
1136 } 1136 }
1137 }); 1137 });
1138 }, 1138 },
1139 addProfileDialog() { 1139 addProfileDialog() {
1140 $(".inner-wrp").addClass("body-blur"); 1140 $(".inner-wrp").addClass("body-blur");
1141 $("#add-social-links").hide(); 1141 $("#add-social-links").hide();
1142 $(".popup-wrp, #add-profile").show(); 1142 $(".popup-wrp, #add-profile").show();
1143 }, 1143 },
1144 nextProfileDialog() { 1144 nextProfileDialog() {
1145 $("#add-profile").hide(); 1145 $("#add-profile").hide();
1146 $("#add-social-links").show(); 1146 $("#add-social-links").show();
1147 this.saveProfile(); 1147 this.saveProfile();
1148 }, 1148 },
1149 closeDialog() { 1149 closeDialog() {
1150 $(".popup-wrp").hide(); 1150 $(".popup-wrp").hide();
1151 $(".inner-wrp").removeClass("body-blur"); 1151 $(".inner-wrp").removeClass("body-blur");
1152 // this.saveProfile(); 1152 // this.saveProfile();
1153 }, 1153 },
1154 hideDialog() { 1154 hideDialog() {
1155 $(".popup-wrp").hide(); 1155 $(".popup-wrp").hide();
1156 $(".inner-wrp").removeClass("body-blur"); 1156 $(".inner-wrp").removeClass("body-blur");
1157 }, 1157 },
1158 /// 1158 ///
1159 caseDialog() { 1159 caseDialog() {
1160 $(".rp-all").removeClass("active"); 1160 $(".rp-all").removeClass("active");
1161 $(".c-0").addClass("active"); 1161 $(".c-0").addClass("active");
1162 $("#all-replies").hide(); 1162 $("#all-replies").hide();
1163 $("#case-study-0").show(); 1163 $("#case-study-0").show();
1164 }, 1164 },
1165 repliesDialog() { 1165 repliesDialog() {
1166 $(".c-0").removeClass("active"); 1166 $(".c-0").removeClass("active");
1167 $(".rp-all").addClass("active"); 1167 $(".rp-all").addClass("active");
1168 $("#case-study-0").hide(); 1168 $("#case-study-0").hide();
1169 $("#all-replies").show(); 1169 $("#all-replies").show();
1170 }, 1170 },
1171 1171
1172 userprofileshowDialog() { 1172 userprofileshowDialog() {
1173 $("#userprofileshow").toggle(); 1173 $("#userprofileshow").toggle();
1174 }, 1174 },
1175 openUrl(url) { 1175 openUrl(url) {
1176 window.open(url); 1176 window.open(url);
1177 }, 1177 },
1178 }, 1178 },
1179 }; 1179 };
1180 </script> 1180 </script>
1181 <style> 1181 <style>
1182 .no-cursor { 1182 .no-cursor {
1183 cursor: default !important; 1183 cursor: default !important;
1184 } 1184 }
1185 .no-underline { 1185 .no-underline {
1186 text-decoration: none !important; 1186 text-decoration: none !important;
1187 } 1187 }
1188 .position-left { 1188 .position-left {
1189 left: 15px !important; 1189 left: 15px !important;
1190 } 1190 }
1191 .padding-right { 1191 .padding-right {
1192 padding-right: 0px !important; 1192 padding-right: 0px !important;
1193 } 1193 }
1194 1194
1195 .social-link-right { 1195 .social-link-right {
1196 display: flex; 1196 display: flex;
1197 flex-flow: column wrap; 1197 flex-flow: column wrap;
1198 align-content: flex-end; 1198 align-content: flex-end;
1199 } 1199 }
1200 </style> 1200 </style>
1201 1201
src/components/SingleMobileScreenInsightOne.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 8
9 <!-- chat box --> 9 <!-- chat box -->
10 <div class="bounce-board-wrp" id="cht_box_close"> 10 <div class="bounce-board-wrp" id="cht_box_close">
11 <div class="inner-wrp-bc"> 11 <div class="inner-wrp-bc">
12 <div class="bc-top-head"> 12 <div class="bc-top-head">
13 <span class="bc-head"> 13 <span class="bc-head">
14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
15 </span> 15 </span>
16 <div class="action-sort"> 16 <div class="action-sort">
17 <!-- <span class="sort-by">SORT BY</span> 17 <!-- <span class="sort-by">SORT BY</span>
18 <div class="btn-group"> 18 <div class="btn-group">
19 <button 19 <button
20 type="button" 20 type="button"
21 class="bc-sort-list dropdown-toggle" 21 class="bc-sort-list dropdown-toggle"
22 data-toggle="dropdown" 22 data-toggle="dropdown"
23 aria-haspopup="true" 23 aria-haspopup="true"
24 aria-expanded="false" 24 aria-expanded="false"
25 > 25 >
26 BEST 26 BEST
27 </button> 27 </button>
28 <div class="dropdown-menu short_by"> 28 <div class="dropdown-menu short_by">
29 <a class="dropdown-item" href="javasript:void(0);" 29 <a class="dropdown-item" href="javasript:void(0);"
30 >BEST 1</a 30 >BEST 1</a
31 > 31 >
32 <a class="dropdown-item" href="javasript:void(0);" 32 <a class="dropdown-item" href="javasript:void(0);"
33 >BEST 2</a 33 >BEST 2</a
34 > 34 >
35 <a class="dropdown-item" href="javasript:void(0);" 35 <a class="dropdown-item" href="javasript:void(0);"
36 >BEST 3</a 36 >BEST 3</a
37 > 37 >
38 </div> 38 </div>
39 </div> --> 39 </div> -->
40 <a 40 <a
41 href="javasript:void(0);" 41 href="javasript:void(0);"
42 @click="chtbox_close" 42 @click="chtbox_close"
43 class="close_chat_bx" 43 class="close_chat_bx"
44 ><img src="../assets/images/close.png" alt="close" /></a 44 ><img src="../assets/images/close.png" alt="close" /></a
45 ><!-- close --> 45 ><!-- close -->
46 </div> 46 </div>
47 <!-- action sort --> 47 <!-- action sort -->
48 </div> 48 </div>
49 <!-- top head --> 49 <!-- top head -->
50 <div class="bounce-board-body"> 50 <div class="bounce-board-body">
51 <!-- all user comments --> 51 <!-- all user comments -->
52 <ul class="bounced-user-comments"> 52 <ul class="bounced-user-comments">
53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
54 <div class="bc_brd_l"></div> 54 <div class="bc_brd_l"></div>
55 <!-- border --> 55 <!-- border -->
56 <div class="parent-full-width" v-if="cmnt.comment"> 56 <div class="parent-full-width" v-if="cmnt.comment">
57 <div class="full-width"> 57 <div class="full-width">
58 <div class="b-user-head"> 58 <div class="b-user-head">
59 <img :src="cmnt.user.profilePic" /> 59 <img :src="cmnt.user.profilePic" />
60 <span class="head-content">{{ cmnt.user.name }} </span> 60 <span class="head-content">{{ cmnt.user.name }} </span>
61 <ul> 61 <ul>
62 <li> 62 <li>
63 <span></span 63 <span></span
64 ><img src="../assets/images/u-info-icon.png" />{{ 64 ><img src="../assets/images/u-info-icon.png" />{{
65 cmnt.user.karmaPoints 65 cmnt.user.karmaPoints
66 }}pts 66 }}pts
67 </li> 67 </li>
68 <li> 68 <li>
69 <span></span>{{ dateGenerator(cmnt.createdAt) }} 69 <span></span>{{ dateGenerator(cmnt.createdAt) }}
70 </li> 70 </li>
71 </ul> 71 </ul>
72 </div> 72 </div>
73 <!-- header --> 73 <!-- header -->
74 <p> 74 <p>
75 {{ cmnt.comment }} 75 {{ cmnt.comment }}
76 </p> 76 </p>
77 <div class="joined_wrapper"> 77 <div class="joined_wrapper">
78 <ul class="joined-info info_bc_spc"> 78 <ul class="joined-info info_bc_spc">
79 <li> 79 <li>
80 <img 80 <img
81 src="../assets/images/heart.svg" 81 src="../assets/images/heart.svg"
82 v-if="cmnt.like == false" 82 v-if="cmnt.like == false"
83 @click="likeComment(true, cmnt._id)" 83 @click="likeComment(true, cmnt._id)"
84 class="cursor-pointer" 84 class="cursor-pointer"
85 /> 85 />
86 <img 86 <img
87 src="../assets/images/purple-heart.png" 87 src="../assets/images/purple-heart.png"
88 v-if="cmnt.like == true" 88 v-if="cmnt.like == true"
89 @click="likeComment(false, cmnt._id)" 89 @click="likeComment(false, cmnt._id)"
90 class="cursor-pointer" 90 class="cursor-pointer"
91 /> 91 />
92 </li> 92 </li>
93 <li> 93 <li>
94 <a href="javasript:void(0);"> 94 <a href="javasript:void(0);">
95 {{ cmnt.likes.length }}</a 95 {{ cmnt.likes.length }}</a
96 > 96 >
97 </li> 97 </li>
98 <li class="comment-spc"> 98 <li class="comment-spc">
99 <img src="../assets/images/purple-comment.png" /> 99 <img src="../assets/images/purple-comment.png" />
100 </li> 100 </li>
101 <li> 101 <li>
102 <a href="javasript:void(0);"> 102 <a href="javasript:void(0);">
103 {{ cmnt.children.length }}</a 103 {{ cmnt.children.length }}</a
104 > 104 >
105 </li> 105 </li>
106 </ul> 106 </ul>
107 <div class="add_rply" v-if="!cmnt.childInput"> 107 <div class="add_rply" v-if="!cmnt.childInput">
108 <input 108 <input
109 type="text" 109 type="text"
110 @click="eachRply(cmnt)" 110 @click="eachRply(cmnt)"
111 class="add_Rply_C" 111 class="add_Rply_C"
112 placeholder="Add your reply" 112 placeholder="Add your reply"
113 /> 113 />
114 </div> 114 </div>
115 <!-- rly form --> 115 <!-- rly form -->
116 </div> 116 </div>
117 <!-- joined wrapper --> 117 <!-- joined wrapper -->
118 </div> 118 </div>
119 <!-- full width --> 119 <!-- full width -->
120 </div> 120 </div>
121 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 121 <div class="comments-footer each-ft" v-if="cmnt.childInput">
122 <textarea v-model="comment" id="childInput"></textarea> 122 <textarea v-model="comment" id="childInput"></textarea>
123 <div class="comments-footer-wrp"> 123 <div class="comments-footer-wrp">
124 <a 124 <a
125 @click="createChildComment(cmnt)" 125 @click="createChildComment(cmnt)"
126 href="javasript:void(0);" 126 href="javasript:void(0);"
127 class="add_comments_chat reply-Wdth" 127 class="add_comments_chat reply-Wdth"
128 >Reply</a 128 >Reply</a
129 > 129 >
130 <a 130 <a
131 href="javasript:void(0);" 131 href="javasript:void(0);"
132 class="discard_bt" 132 class="discard_bt"
133 @click="discardRply(cmnt)" 133 @click="discardRply(cmnt)"
134 ><img src="../assets/images/discard.svg" 134 ><img src="../assets/images/discard.svg"
135 /></a> 135 /></a>
136 </div> 136 </div>
137 </div> 137 </div>
138 <!-- parent --> 138 <!-- parent -->
139 <div 139 <div
140 class="child-full-width" 140 class="child-full-width"
141 v-for="(childCmnt, i) in cmnt.children" 141 v-for="(childCmnt, i) in cmnt.children"
142 :key="i" 142 :key="i"
143 > 143 >
144 <div class="full-width"> 144 <div class="full-width">
145 <div class="b-user-head"> 145 <div class="b-user-head">
146 <img :src="childCmnt.user.profilePic" /> 146 <img :src="childCmnt.user.profilePic" />
147 <span class="head-content" 147 <span class="head-content"
148 >{{ childCmnt.user.name }} 148 >{{ childCmnt.user.name }}
149 </span> 149 </span>
150 <ul> 150 <ul>
151 <li> 151 <li>
152 <span></span 152 <span></span
153 ><img src="../assets/images/u-info-icon.png" />{{ 153 ><img src="../assets/images/u-info-icon.png" />{{
154 childCmnt.user.karmaPoints 154 childCmnt.user.karmaPoints
155 }}pts 155 }}pts
156 </li> 156 </li>
157 <li> 157 <li>
158 <span></span 158 <span></span
159 >{{ dateGenerator(childCmnt.createdAt) }} 159 >{{ dateGenerator(childCmnt.createdAt) }}
160 </li> 160 </li>
161 </ul> 161 </ul>
162 </div> 162 </div>
163 <p> 163 <p>
164 {{ childCmnt.comment }} 164 {{ childCmnt.comment }}
165 </p> 165 </p>
166 <div class="joined_wrapper"> 166 <div class="joined_wrapper">
167 <ul class="joined-info info_bc_spc"> 167 <ul class="joined-info info_bc_spc">
168 <li> 168 <li>
169 <img 169 <img
170 src="../assets/images/heart.svg" 170 src="../assets/images/heart.svg"
171 v-if="childCmnt.like == false" 171 v-if="childCmnt.like == false"
172 @click="likeComment(true, childCmnt._id)" 172 @click="likeComment(true, childCmnt._id)"
173 class="cursor-pointer" 173 class="cursor-pointer"
174 /> 174 />
175 <img 175 <img
176 src="../assets/images/purple-heart.png" 176 src="../assets/images/purple-heart.png"
177 v-if="childCmnt.like == true" 177 v-if="childCmnt.like == true"
178 @click="likeComment(false, childCmnt._id)" 178 @click="likeComment(false, childCmnt._id)"
179 class="cursor-pointer" 179 class="cursor-pointer"
180 /> 180 />
181 </li> 181 </li>
182 <li> 182 <li>
183 <a href="javasript:void(0);"> 183 <a href="javasript:void(0);">
184 {{ childCmnt.likes.length }}</a 184 {{ childCmnt.likes.length }}</a
185 > 185 >
186 </li> 186 </li>
187 </ul> 187 </ul>
188 </div> 188 </div>
189 </div> 189 </div>
190 </div> 190 </div>
191 <!-- eree --> 191 <!-- eree -->
192 192
193 <!-- comments footer --> 193 <!-- comments footer -->
194 </li> 194 </li>
195 </ul> 195 </ul>
196 </div> 196 </div>
197 <!-- bounce board body --> 197 <!-- bounce board body -->
198 <div class="comments-footer" v-if="parentInput"> 198 <div class="comments-footer" v-if="parentInput">
199 <textarea v-model="comment"></textarea> 199 <textarea v-model="comment"></textarea>
200 <div class="comments-footer-wrp"> 200 <div class="comments-footer-wrp">
201 <a 201 <a
202 href="javasript:void(0);" 202 href="javasript:void(0);"
203 class="add_comments_chat" 203 class="add_comments_chat"
204 @click="createComment" 204 @click="createComment"
205 ><img src="../assets/images/add-comment.svg" /> Comment</a 205 ><img src="../assets/images/add-comment.svg" /> Comment</a
206 > 206 >
207 </div> 207 </div>
208 </div> 208 </div>
209 <!-- comments footer --> 209 <!-- comments footer -->
210 </div> 210 </div>
211 </div> 211 </div>
212 <!-- bounceboard wrp --> 212 <!-- bounceboard wrp -->
213 <!-- chat box --> 213 <!-- chat box -->
214 214
215 <div class="single-mobileInsight"> 215 <div class="single-mobileInsight">
216 <div class="m-screen-hidden"> 216 <div class="m-screen-hidden">
217 <div class="top-area-blank"></div> 217 <div class="top-area-blank"></div>
218 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" /> 218 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" />
219 </div> 219 </div>
220 <div class="single-left-Insight-comments"> 220 <div class="single-left-Insight-comments">
221 <div class="author-thoughts"> 221 <div class="author-thoughts">
222 222
223 <img 223 <img
224 src="../assets/images/thoughts-upper.svg" 224 src="../assets/images/thoughts-upper.svg"
225 class="upper-th" 225 class="upper-th"
226 /> 226 />
227 <img 227 <img
228 :src="currentSlideData.payload.metaData.authorImage" 228 :src="currentSlideData.payload.metaData.authorImage"
229 class="dynamic-thoughts" 229 class="dynamic-thoughts"
230 /> 230 />
231 </div><!-- user thoughts --> 231 </div><!-- user thoughts -->
232 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 232 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
233 <div class="a-intro-comments custom-c-style"> 233 <div class="a-intro-comments custom-c-style">
234 <p> 234 <p>
235 {{commentList[0].comment}} 235 {{commentList[0].comment}}
236 </p> 236 </p>
237 <ul class="rly-comment-set"> 237 <ul class="rly-comment-set">
238 <!-- like/dislike --> 238 <!-- like/dislike -->
239 <li> 239 <li>
240 <img 240 <img
241 src="../assets/images/heart.svg" 241 src="../assets/images/heart.svg"
242 v-if="commentList[0].like == false" 242 v-if="commentList[0].like == false"
243 @click="likeComment(true, commentList[0]._id)" 243 @click="likeComment(true, commentList[0]._id)"
244 class="cursor-pointer" 244 class="cursor-pointer"
245 /> 245 />
246 <img 246 <img
247 src="../assets/images/purple-heart.png" 247 src="../assets/images/purple-heart.png"
248 v-if="commentList[0].like == true" 248 v-if="commentList[0].like == true"
249 @click="likeComment(false, commentList[0]._id)" 249 @click="likeComment(false, commentList[0]._id)"
250 class="cursor-pointer" 250 class="cursor-pointer"
251 /> 251 />
252 <a href="javascript:void(0);">{{ 252 <a href="javascript:void(0);">{{
253 commentList[0].likes.length 253 commentList[0].likes.length
254 }}</a> 254 }}</a>
255 </li> 255 </li>
256 <!-- like/dislike ends --> 256 <!-- like/dislike ends -->
257 <li> 257 <li>
258 <img src="../assets/images/rply.svg" /> 258 <img src="../assets/images/rply.svg" />
259 <a href="javascript:void(0);" @click="reply_cht_box(0)" 259 <a href="javascript:void(0);" @click="reply_cht_box(0)"
260 >Reply</a 260 >Reply</a
261 > 261 >
262 </li> 262 </li>
263 </ul> 263 </ul>
264 </div> 264 </div>
265 <!-- comments box --> 265 <!-- comments box -->
266 </div> 266 </div>
267 <!-- single author comments --> 267 <!-- single author comments -->
268 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 268 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
269 <div class="a-intro-comments custom-c-style"> 269 <div class="a-intro-comments custom-c-style">
270 <p> 270 <p>
271 {{commentList[1].comment}} 271 {{commentList[1].comment}}
272 </p> 272 </p>
273 <ul class="rly-comment-set"> 273 <ul class="rly-comment-set">
274 <!-- like/dislike --> 274 <!-- like/dislike -->
275 <li> 275 <li>
276 <img 276 <img
277 src="../assets/images/heart.svg" 277 src="../assets/images/heart.svg"
278 v-if="commentList[1].like == false" 278 v-if="commentList[1].like == false"
279 @click="likeComment(true, commentList[1]._id)" 279 @click="likeComment(true, commentList[1]._id)"
280 class="cursor-pointer" 280 class="cursor-pointer"
281 /> 281 />
282 <img 282 <img
283 src="../assets/images/purple-heart.png" 283 src="../assets/images/purple-heart.png"
284 v-if="commentList[1].like == true" 284 v-if="commentList[1].like == true"
285 @click="likeComment(false, commentList[1]._id)" 285 @click="likeComment(false, commentList[1]._id)"
286 class="cursor-pointer" 286 class="cursor-pointer"
287 /> 287 />
288 <a href="javascript:void(0);">{{ 288 <a href="javascript:void(0);">{{
289 commentList[1].likes.length 289 commentList[1].likes.length
290 }}</a> 290 }}</a>
291 </li> 291 </li>
292 <!-- like/dislike ends --> 292 <!-- like/dislike ends -->
293 <li> 293 <li>
294 <img src="../assets/images/rply.svg" /> 294 <img src="../assets/images/rply.svg" />
295 <a href="javascript:void(0);" @click="reply_cht_box(1)" 295 <a href="javascript:void(0);" @click="reply_cht_box(1)"
296 >Reply</a 296 >Reply</a
297 > 297 >
298 </li> 298 </li>
299 </ul> 299 </ul>
300 </div> 300 </div>
301 <!-- comments box --> 301 <!-- comments box -->
302 </div> 302 </div>
303 <!-- single author comments --> 303 <!-- single author comments -->
304 </div> 304 </div>
305 <!-- single mobile Left insight --> 305 <!-- single mobile Left insight -->
306 <div class="c-product-insight-wrp"> 306 <div class="c-product-insight-wrp">
307 <div class="single-author-li-comments"> 307 <div class="single-author-li-comments">
308 <div class="a-intro-comments custom-selected-style"> 308 <div class="a-intro-comments custom-selected-style">
309 <img src="../assets/images/rect.svg" class="rect" /> 309 <img src="../assets/images/rect.svg" class="rect" />
310 <div class="top-wrp"> 310 <div class="top-wrp">
311 {{currentSlideData.payload.insight.tag}} Insight 311 {{currentSlideData.payload.insight.tag}} Insight
312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
313 </div> 313 </div>
314 <!-- <div class="top-head"> 314 <!-- <div class="top-head">
315 Decide on using multiple call to action vs single call to 315 Decide on using multiple call to action vs single call to
316 action depending on the stage of the user journey 316 action depending on the stage of the user journey
317 </div> 317 </div>
318 <p> 318 <p>
319 Marketing 101 teaches us to use one single, call to action 319 Marketing 101 teaches us to use one single, call to action
320 (CTA) at the top of the funnel before the uer has shown 320 (CTA) at the top of the funnel before the uer has shown
321 interest in the product. <br /><br /> 321 interest in the product. <br /><br />
322 When the user is already onboarded and is in the 322 When the user is already onboarded and is in the
323 <strong> engage stage </strong>, it may be better to use a 323 <strong> engage stage </strong>, it may be better to use a
324 single CTA for each use case in order to 324 single CTA for each use case in order to
325 <strong> avoid ambiguity.</strong> 325 <strong> avoid ambiguity.</strong>
326 </p> --> 326 </p> -->
327 <div class="top-head">{{currentSlideData.payload.insight.title}}</div> 327 <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
328 <p>{{currentSlideData.payload.insight.description}} 328 <p>{{currentSlideData.payload.insight.description}}
329 <div class="footer"> 329 <div class="footer">
330 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> 330 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
331 <!-- <a href="javascript:void(0);" class="ft-share" 331 <!-- <a href="javascript:void(0);" class="ft-share"
332 ><img src="../assets/images/reply-red.svg" /> Share from 332 ><img src="../assets/images/reply-red.svg" /> Share from
333 library</a 333 library</a
334 > --> 334 > -->
335 </div> 335 </div>
336 <!-- footer --> 336 <!-- footer -->
337 </div> 337 </div>
338 <!-- comments box --> 338 <!-- comments box -->
339 </div> 339 </div>
340 <!-- single author comments --> 340 <!-- single author comments -->
341 </div> 341 </div>
342 <!-- single mobile Right insight --> 342 <!-- single mobile Right insight -->
343 </div> 343 </div>
344 <!-- Single Mobile Insight --> 344 <!-- Single Mobile Insight -->
345 <!-- single author comments --> 345 <!-- single author comments -->
346 <div class="footer-nav"> 346 <div class="footer-nav">
347 <div class="footer-top white-bg"> 347 <div class="footer-top white-bg">
348 <div class="row"> 348 <div class="row">
349 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 349 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
350 <div class="row h-100p"> 350 <div class="row h-100p">
351 <div 351 <div
352 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 352 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
353 > 353 >
354 <div class="ft-comments-group testi-photos-ct"> 354 <div class="ft-comments-group testi-photos-ct">
355 <div class="c-with-photos"> 355 <div class="c-with-photos">
356 <span class="count-comments" 356 <span class="count-comments"
357 >{{ getLastcomment("count", commentList) }}+ 357 >{{ getLastcomment("count", commentList) }}+
358 Comments</span 358 Comments</span
359 ><!-- count commets --> 359 ><!-- count commets -->
360 <ul class="comments-photos"> 360 <ul class="comments-photos">
361 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 361 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
362 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 362 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
363 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 363 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
364 </ul> 364 </ul>
365 <!-- comment photos --> 365 <!-- comment photos -->
366 </div> 366 </div>
367 <div class="comments-detail all-c-space"> 367 <div class="comments-detail all-c-space">
368 <span 368 <span
369 >{{ getLastcomment("name", commentList) }} 369 >{{ getLastcomment("name", commentList) }}
370 <a href="javascript:void(0);" @click="open_ct_box" 370 <a href="javascript:void(0);" @click="open_ct_box"
371 >View All</a 371 >View All</a
372 ></span 372 ></span
373 > 373 >
374 <p> 374 <p>
375 <!-- I wonder what the difference between “Dunzo Assistant” 375 <!-- I wonder what the difference between “Dunzo Assistant”
376 and “Pickup and Drop... --> 376 and “Pickup and Drop... -->
377 {{ getLastcomment("msg", commentList) }} 377 {{ getLastcomment("msg", commentList) }}
378 </p> 378 </p>
379 </div> 379 </div>
380 <!-- comments detail --> 380 <!-- comments detail -->
381 </div> 381 </div>
382 <!-- comments Group --> 382 <!-- comments Group -->
383 </div> 383 </div>
384 </div> 384 </div>
385 </div> 385 </div>
386 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 386 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
387 <div class="comment-frm no-c-frm"> 387 <div class="comment-frm no-c-frm">
388 <div class="row"> 388 <div class="row">
389 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 389 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
390 <div class="form-group frm-wdth addfrm-spc"> 390 <div class="form-group frm-wdth addfrm-spc">
391 <input 391 <input
392 type="text" 392 type="text"
393 class="form-control" 393 class="form-control"
394 placeholder="Something on your mind?" 394 placeholder="Something on your mind?"
395 id="open_ct_box" 395 id="open_ct_box"
396 v-model="comment" 396 v-model="comment"
397 /> 397 />
398 </div> 398 </div>
399 </div> 399 </div>
400 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 400 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
401 <a 401 <a
402 href="javascript:void(0);" 402 href="javascript:void(0);"
403 @click="createComment" 403 @click="createComment"
404 class="add-comment" 404 class="add-comment"
405 ><img src="../assets/images/add-comment.svg" /> 405 ><img src="../assets/images/add-comment.svg" />
406 Comment</a 406 Comment</a
407 > 407 >
408 </div> 408 </div>
409 </div> 409 </div>
410 <!-- comment from --> 410 <!-- comment from -->
411 </div> 411 </div>
412 </div> 412 </div>
413 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 413 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
414 <ul class="top-intro-bt"> 414 <ul class="top-intro-bt">
415 <li> 415 <li>
416 <a href="javascript:void(0);" @click="goBack" 416 <a href="javascript:void(0);" @click="goBack"
417 ><img src="../assets/images/skip-prev.svg" /> Prev</a 417 ><img src="../assets/images/skip-prev.svg" /> Prev</a
418 > 418 >
419 </li> 419 </li>
420 <li> 420 <li>
421 <a href="javascript:void(0);" @click="goNext" 421 <a href="javascript:void(0);" @click="goNext"
422 ><img src="../assets/images/skip-next.svg" /> Skip to next 422 ><img src="../assets/images/skip-next.svg" /> Skip to next
423 slide</a 423 slide</a
424 > 424 >
425 </li> 425 </li>
426 </ul> 426 </ul>
427 </div> 427 </div>
428 <!-- buttons list --> 428 <!-- buttons list -->
429 </div> 429 </div>
430 </div> 430 </div>
431 <!-- footer top --> 431 <!-- footer top -->
432 <div class="footer-bottom"> 432 <div class="footer-bottom">
433 <ul> 433 <ul>
434 <li class="active"></li> 434 <li class="active"></li>
435 <li></li> 435 <li></li>
436 </ul> 436 </ul>
437 </div> 437 </div>
438 <!-- footer top --> 438 <!-- footer top -->
439 </div> 439 </div>
440 <!-- footer --> 440 <!-- footer -->
441 </div> 441 </div>
442 <!-- body wrapper --> 442 <!-- body wrapper -->
443 </div> 443 </div>
444 <!-- main wrapper --> 444 <!-- main wrapper -->
445 </main> 445 </main>
446 </template> 446 </template>
447 447
448 <script> 448 <script>
449 import Vue from "vue"; 449 import Vue from "vue";
450 import router from "../router"; 450 import router from "../router";
451 import axios from "axios"; 451 import axios from "axios";
452 import moment from 'moment'; 452 import moment from 'moment';
453 import Header from "./Header"; 453 import Header from "./Header";
454 454
455 export default { 455 export default {
456 components: { 456 components: {
457 Header: Header, 457 Header: Header,
458 }, 458 },
459 name: "SingleMobileScreenInsightOne", 459 name: "SingleMobileScreenInsightOne",
460 460
461 data() { 461 data() {
462 return { 462 return {
463 allSlide: [], 463 allSlide: [],
464 currentSlideIndex: null, 464 currentSlideIndex: null,
465 currentSlideData: null, 465 currentSlideData: null,
466 // 466 //
467 usertoken: null, 467 usertoken: null,
468 commentList: [], 468 commentList: [],
469 comment: null, 469 comment: null,
470 parentInput: true, 470 parentInput: true,
471 }; 471 };
472 }, 472 },
473 mounted() { 473 mounted() {
474 var allSlideData = localStorage.getItem( 474 var allSlideData = localStorage.getItem(
475 "spotlight_slide" + this.$route.params.caseStudyId 475 "spotlight_slide" + this.$route.params.caseStudyId
476 ); 476 );
477 if (allSlideData) { 477 if (allSlideData) {
478 this.allSlide = JSON.parse(allSlideData); 478 this.allSlide = JSON.parse(allSlideData);
479 this.getCurrentSlideData(); 479 this.getCurrentSlideData();
480 }else{ 480 }else{
481 this.$router.push("/login"); 481 this.getCurrentSlideData();
482
482 } 483 }
483 var userdata = localStorage.getItem("spotlight_usertoken"); 484 var userdata = localStorage.getItem("spotlight_usertoken");
484 if (userdata) { 485 if (userdata) {
485 userdata = JSON.parse(userdata); 486 userdata = JSON.parse(userdata);
486 this.usertoken = userdata.token; 487 this.usertoken = userdata.token;
487 this.getComment(); 488 this.getComment();
489 }else{
490 this.getComment();
488 } 491 }
489 }, 492 },
490 methods: { 493 methods: {
494
495 generatecaseStudies(){
496 axios
497 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
498 headers: {
499 Authorization: "Bearer " + this.usertoken,
500 },
501 })
502 .then((response) => {
503
504 console.log('response',response.data.data);
505 this.openStudy(response.data.data);
506 })
507 .catch((error) => console.log(error));
508 },
509
510
511
512 openStudy(payload) {
513 console.log("payload-", payload);
514 payload.intro.date = payload.createdAt;
515 payload.intro.focusPoint = payload.focusAreas;
516 axios
517 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
518 headers: {
519 Authorization: "Bearer " + this.usertoken,
520 },
521 })
522 .then((response) => {
523 this.createSlide(payload, response.data.data);
524 })
525 .catch((error) => console.log(error));
526 },
527
528 createSlide(payload, slides) {
529 var finalSlides = [];
530 slides.forEach((slides_) => {
531 var url = this.assignRoutes(slides_.templateId);
532 var obj = {
533 forward: true,
534 backward: true,
535 ur: url,
536 slideId: slides_._id,
537 caseStudyId: slides_.caseStudyId,
538 payload: {
539 metaData: slides_.metaData,
540 comments: slides_.comments,
541 insight: slides_.insight ? slides_.insight : null,
542 },
543 };
544 // slides_
545 finalSlides.push(obj);
546 });
547 console.log("payload", payload);
548 // add first slide at begining
549 finalSlides.unshift({
550 forward: true,
551 backward: false,
552 ur: "EpisodeIntro",
553 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
554 caseStudyId: payload._id,
555 payload: {
556 metaData: payload.intro,
557 comments: [],
558 },
559 });
560 finalSlides.push({
561 forward: true,
562 backward: false,
563 ur: "Outro",
564 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
565 caseStudyId: payload._id,
566 payload: {
567 metaData: payload.outro,
568 comments: [],
569 },
570 });
571
572 console.log(finalSlides);
573 console.log("payload", payload);
574 localStorage.setItem(
575 "spotlight_slide" + payload._id,
576 JSON.stringify(finalSlides)
577 );
578 this.allSlide = finalSlides;
579 this.getCurrentSlideData();
580 },
581 assignRoutes(tempId) {
582 // /episode-intro
583 // /outro
584 var routes = [
585 {
586 url: "AuthorIntro",
587 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
588 },
589 {
590 url: "NoScreenshotSingleAuthor",
591 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
592 },
593 {
594 url: "SingleMobileScreenInsightTwo",
595 tempId: "T3_cqNIf7tuqL4jyON63dA7",
596 },
597 {
598 url: "TwoScreenWithoutInsight",
599 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
600 },
601 {
602 url: "noscreenshotSingleautho",
603 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
604 },
605 {
606 url: "SingleMobileScreenInsightOne",
607 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
608 },
609 {
610 url: "TwoScreenWithInsight",
611 tempId: "T7_za3c3sYgx7bVvtKzasdf",
612 },
613 {
614 url: "AuthorReadingNow",
615 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
616 },
617 {
618 url: "AuthorReadingBreak",
619 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
620 },
621 ];
622 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
623 return routes[i].url;
624 },
625
491 getCurrentSlideData() { 626 getCurrentSlideData() {
492 var i = this.allSlide.findIndex( 627 var i = this.allSlide.findIndex(
493 (slide_) => slide_.slideId == this.$route.params.slideId 628 (slide_) => slide_.slideId == this.$route.params.slideId
494 ); 629 );
495 this.currentSlideIndex = i; 630 this.currentSlideIndex = i;
496 this.currentSlideData = this.allSlide[i]; 631 this.currentSlideData = this.allSlide[i];
497 console.log("currentSlideData", this.currentSlideData); 632 console.log("currentSlideData", this.currentSlideData);
498 }, 633 },
499 goNext() { 634 goNext() {
500 this.currentSlideIndex++; 635 this.currentSlideIndex++;
501 this.$router.push({ 636 this.$router.push({
502 name: this.allSlide[this.currentSlideIndex].ur, 637 name: this.allSlide[this.currentSlideIndex].ur,
503 params: { 638 params: {
504 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 639 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
505 slideId: this.allSlide[this.currentSlideIndex].slideId, 640 slideId: this.allSlide[this.currentSlideIndex].slideId,
506 }, 641 },
507 }); 642 });
508 }, 643 },
509 goBack() { 644 goBack() {
510 this.currentSlideIndex--; 645 this.currentSlideIndex--;
511 this.$router.push({ 646 this.$router.push({
512 name: this.allSlide[this.currentSlideIndex].ur, 647 name: this.allSlide[this.currentSlideIndex].ur,
513 params: { 648 params: {
514 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 649 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
515 slideId: this.allSlide[this.currentSlideIndex].slideId, 650 slideId: this.allSlide[this.currentSlideIndex].slideId,
516 }, 651 },
517 }); 652 });
518 }, 653 },
519 createComment() { 654 createComment() {
520 console.log("===", this.comment); 655 console.log("===", this.comment);
521 var obj = { 656 var obj = {
522 caseStudyId: this.currentSlideData.caseStudyId, 657 caseStudyId: this.currentSlideData.caseStudyId,
523 slideId: this.currentSlideData.slideId, 658 slideId: this.currentSlideData.slideId,
524 comment: this.comment, 659 comment: this.comment,
525 660
526 }; 661 };
527 axios 662 axios
528 .post("/bounceBoard/comment", obj, { 663 .post("/bounceBoard/comment", obj, {
529 headers: { 664 headers: {
530 Authorization: "Bearer " + this.usertoken, 665 Authorization: "Bearer " + this.usertoken,
531 }, 666 },
532 }) 667 })
533 .then((response) => { 668 .then((response) => {
534 this.comment = null; 669 this.comment = null;
535 this.getComment(); 670 this.getComment();
536 console.log(response); 671 console.log(response);
537 }) 672 })
538 .catch((error) => { 673 .catch((error) => {
539 if (error.response) { 674 if (error.response) {
540 this.$toaster.error(error.response.data.message); 675 this.$toaster.error(error.response.data.message);
541 } 676 }
542 }); 677 });
543 }, 678 },
544 createChildComment(cmnt) { 679 createChildComment(cmnt) {
545 console.log(cmnt,"===", this.comment); 680 console.log(cmnt,"===", this.comment);
546 var obj = { 681 var obj = {
547 caseStudyId: this.currentSlideData.caseStudyId, 682 caseStudyId: this.currentSlideData.caseStudyId,
548 slideId: this.currentSlideData.slideId, 683 slideId: this.currentSlideData.slideId,
549 comment: this.comment, 684 comment: this.comment,
550 parentId: cmnt._id, 685 parentId: cmnt._id,
551 686
552 }; 687 };
553 axios 688 axios
554 .post("/bounceBoard/comment", obj, { 689 .post("/bounceBoard/comment", obj, {
555 headers: { 690 headers: {
556 Authorization: "Bearer " + this.usertoken, 691 Authorization: "Bearer " + this.usertoken,
557 }, 692 },
558 }) 693 })
559 .then((response) => { 694 .then((response) => {
560 this.comment = null; 695 this.comment = null;
561 this.discardRply(cmnt); 696 this.discardRply(cmnt);
562 this.getComment(); 697 this.getComment();
563 console.log(response); 698 console.log(response);
564 }) 699 })
565 .catch((error) => { 700 .catch((error) => {
566 if (error.response) { 701 if (error.response) {
567 this.$toaster.error(error.response.data.message); 702 this.$toaster.error(error.response.data.message);
568 } 703 }
569 }); 704 });
570 }, 705 },
571 getComment() { 706 getComment() {
572 axios 707 axios
573 .get( 708 .get(
574 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 709 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
575 { 710 {
576 headers: { 711 headers: {
577 Authorization: "Bearer " + this.usertoken, 712 Authorization: "Bearer " + this.usertoken,
578 }, 713 },
579 } 714 }
580 ) 715 )
581 .then((response) => { 716 .then((response) => {
582 console.log(response.data); 717 console.log(response.data);
583 var comments = []; 718 var comments = [];
584 var keys = Object.keys(response.data.data) 719 var keys = Object.keys(response.data.data)
585 response.data.data 720 response.data.data
586 keys.forEach((key_) => { 721 keys.forEach((key_) => {
587 comments.push(response.data.data[key_]) 722 comments.push(response.data.data[key_])
588 }); 723 });
589 comments.forEach((coment_)=>{ 724 comments.forEach((coment_)=>{
590 coment_.childInput = false; 725 coment_.childInput = false;
591 }); 726 });
592 console.log("comments",comments) 727 console.log("comments",comments)
593 this.commentList = comments; 728 this.commentList = comments;
594 }) 729 })
595 .catch((error) => console.log(error)); 730 .catch((error) => console.log(error));
596 }, 731 },
597 dateGenerator(curreDate){ 732 dateGenerator(curreDate){
598 var todayDate = moment(new Date(), "DD.MM.YYYY"); 733 var todayDate = moment(new Date(), "DD.MM.YYYY");
599 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 734 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
600 var result = todayDate.diff(endDate, 'days'); 735 var result = todayDate.diff(endDate, 'days');
601 return result; 736 return result;
602 }, 737 },
603 goToLogin() { 738 goToLogin() {
604 this.$router.push("/login"); 739 this.$router.push("/login");
740 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
741
605 }, 742 },
606 goToSignUp() { 743 goToSignUp() {
607 this.$router.push("/"); 744 this.$router.push("/");
608 }, 745 },
609 open(url){ 746 open(url){
610 window.open(url); 747 window.open(url);
611 }, 748 },
612 chtbox_close() { 749 chtbox_close() {
613 $("#cht_box_close").removeClass("cht_close"); 750 $("#cht_box_close").removeClass("cht_close");
614 $("#open_ct_box, .c_hide").show(); 751 $("#open_ct_box, .c_hide").show();
615 $(".footer-top").addClass("white-bg"); 752 $(".footer-top").addClass("white-bg");
616 }, 753 },
617 open_ct_box() { 754 open_ct_box() {
755 if(!this.usertoken){
756 this.goToLogin();
757 }
618 $("#cht_box_close").addClass("cht_close"); 758 $("#cht_box_close").addClass("cht_close");
619 $("#open_ct_box, .c_hide").hide(); 759 $("#open_ct_box, .c_hide").hide();
620 $(".footer-top").removeClass("white-bg"); 760 $(".footer-top").removeClass("white-bg");
621 }, 761 },
622 eachRply(cmnt) { 762 eachRply(cmnt) {
623 cmnt.childInput = true; 763 cmnt.childInput = true;
624 this.parentInput = false; 764 this.parentInput = false;
625 this.comment = null; 765 this.comment = null;
626 setTimeout(() => { 766 setTimeout(() => {
627 document.getElementById("childInput").focus(); 767 document.getElementById("childInput").focus();
628 }, 100); 768 }, 100);
629 }, 769 },
630 discardRply(cmnt) { 770 discardRply(cmnt) {
631 cmnt.childInput = false; 771 cmnt.childInput = false;
632 this.parentInput = true; 772 this.parentInput = true;
633 this.comment = null; 773 this.comment = null;
634 }, 774 },
635 reply_cht_box(i) { 775 reply_cht_box(i) {
776 if(!this.usertoken){
777 this.goToLogin();
778 }
636 console.log(this.commentList, "cmnt"); 779 console.log(this.commentList, "cmnt");
637 $("#cht_box_close").addClass("cht_close"); 780 $("#cht_box_close").addClass("cht_close");
638 $("#open_ct_box, .c_hide").hide(); 781 $("#open_ct_box, .c_hide").hide();
639 $(".footer-top").removeClass("white-bg"); 782 $(".footer-top").removeClass("white-bg");
640 this.commentList[i].childInput = true; 783 this.commentList[i].childInput = true;
641 this.parentInput = false; 784 this.parentInput = false;
642 this.comment = null; 785 this.comment = null;
643 setTimeout(() => { 786 setTimeout(() => {
644 document.getElementById("childInput").focus(); 787 document.getElementById("childInput").focus();
645 }, 100); 788 }, 100);
646 }, 789 },
647 likeComment(status, id) { 790 likeComment(status, id) {
791 if(!this.usertoken){
792 this.goToLogin();
793 }
648 console.log("===", this.comment); 794 console.log("===", this.comment);
649 var obj = { 795 var obj = {
650 commentId: id, 796 commentId: id,
651 like: status, 797 like: status,
652 }; 798 };
653 axios 799 axios
654 .post("/bounceBoard/like", obj, { 800 .post("/bounceBoard/like", obj, {
655 headers: { 801 headers: {
656 Authorization: "Bearer " + this.usertoken, 802 Authorization: "Bearer " + this.usertoken,
657 }, 803 },
658 }) 804 })
659 .then((response) => { 805 .then((response) => {
660 this.getComment(); 806 this.getComment();
661 console.log(response); 807 console.log(response);
662 }) 808 })
663 .catch((error) => { 809 .catch((error) => {
664 if (error.response) { 810 if (error.response) {
665 this.$toaster.error(error.response.data.message); 811 this.$toaster.error(error.response.data.message);
666 } 812 }
667 }); 813 });
668 }, 814 },
669 getLastcomment(flag, commentArray) { 815 getLastcomment(flag, commentArray) {
670 var finalComment = null; 816 var finalComment = null;
671 var totalMessage = 0; 817 var totalMessage = 0;
672 var name = null; 818 var name = null;
673 commentArray.forEach((comment_) => { 819 commentArray.forEach((comment_) => {
674 if (comment_.comment != null) { 820 if (comment_.comment != null) {
675 name = comment_.user.name; 821 name = comment_.user.name;
676 finalComment = comment_.comment; 822 finalComment = comment_.comment;
677 totalMessage++; 823 totalMessage++;
678 } 824 }
679 }); 825 });
680 if (flag == "count") { 826 if (flag == "count") {
681 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 827 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
682 } else if (flag =="name") { 828 } else if (flag =="name") {
683 return (name = name); 829 return (name = name);
684 } else { 830 } else {
685 return finalComment; 831 return finalComment;
686 } 832 }
687 }, 833 },
688 commentExistCheck(i) { 834 commentExistCheck(i) {
689 console.log(this.commentList[i].comment); 835 console.log(this.commentList[i].comment);
690 var returnValue = false; 836 var returnValue = false;
691 if (this.commentList[i].comment) { 837 if (this.commentList[i].comment) {
692 returnValue = true; 838 returnValue = true;
693 } 839 }
694 return returnValue; 840 return returnValue;
695 }, 841 },
696 }, 842 },
697 }; 843 };
698 // 844 //
699 </script> 845 </script>
700 846
src/components/SingleMobileScreenInsightTwo.vue
Diff comments   View file @4905524
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> --> 4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> -->
5 <!-- <a class="navbar-brand" href="javascript:void(0);" 5 <!-- <a class="navbar-brand" href="javascript:void(0);"
6 ><img src="../assets/images/logo.png" 6 ><img src="../assets/images/logo.png"
7 /></a> 7 /></a>
8 <button 8 <button
9 class="navbar-toggler" 9 class="navbar-toggler"
10 type="button" 10 type="button"
11 data-toggle="collapse" 11 data-toggle="collapse"
12 data-target="#navbarsExample03" 12 data-target="#navbarsExample03"
13 aria-controls="navbarsExample03" 13 aria-controls="navbarsExample03"
14 aria-expanded="false" 14 aria-expanded="false"
15 aria-label="Toggle navigation" 15 aria-label="Toggle navigation"
16 > 16 >
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 </button> 20 </button>
21 <div class="user-profile-photo insights-profile"> 21 <div class="user-profile-photo insights-profile">
22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> 22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23 </div> --> 23 </div> -->
24 <Header></Header> 24 <Header></Header>
25 25
26 <!-- </nav> --> 26 <!-- </nav> -->
27 <!-- menu wrapper --> 27 <!-- menu wrapper -->
28 <div class="intro-startup"> 28 <div class="intro-startup">
29 <!-- chat box --> 29 <!-- chat box -->
30 <div class="bounce-board-wrp" id="cht_box_close"> 30 <div class="bounce-board-wrp" id="cht_box_close">
31 <div class="inner-wrp-bc"> 31 <div class="inner-wrp-bc">
32 <div class="bc-top-head"> 32 <div class="bc-top-head">
33 <span class="bc-head"> 33 <span class="bc-head">
34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
35 </span> 35 </span>
36 <div class="action-sort"> 36 <div class="action-sort">
37 <!-- <span class="sort-by">SORT BY</span> 37 <!-- <span class="sort-by">SORT BY</span>
38 <div class="btn-group"> 38 <div class="btn-group">
39 <button 39 <button
40 type="button" 40 type="button"
41 class="bc-sort-list dropdown-toggle" 41 class="bc-sort-list dropdown-toggle"
42 data-toggle="dropdown" 42 data-toggle="dropdown"
43 aria-haspopup="true" 43 aria-haspopup="true"
44 aria-expanded="false" 44 aria-expanded="false"
45 > 45 >
46 BEST 46 BEST
47 </button> 47 </button>
48 <div class="dropdown-menu short_by"> 48 <div class="dropdown-menu short_by">
49 <a class="dropdown-item" href="javasript:void(0);" 49 <a class="dropdown-item" href="javasript:void(0);"
50 >BEST 1</a 50 >BEST 1</a
51 > 51 >
52 <a class="dropdown-item" href="javasript:void(0);" 52 <a class="dropdown-item" href="javasript:void(0);"
53 >BEST 2</a 53 >BEST 2</a
54 > 54 >
55 <a class="dropdown-item" href="javasript:void(0);" 55 <a class="dropdown-item" href="javasript:void(0);"
56 >BEST 3</a 56 >BEST 3</a
57 > 57 >
58 </div> 58 </div>
59 </div> --> 59 </div> -->
60 <a 60 <a
61 href="javasript:void(0);" 61 href="javasript:void(0);"
62 @click="chtbox_close" 62 @click="chtbox_close"
63 class="close_chat_bx" 63 class="close_chat_bx"
64 ><img src="../assets/images/close.png" alt="close" /></a 64 ><img src="../assets/images/close.png" alt="close" /></a
65 ><!-- close --> 65 ><!-- close -->
66 </div> 66 </div>
67 <!-- action sort --> 67 <!-- action sort -->
68 </div> 68 </div>
69 <!-- top head --> 69 <!-- top head -->
70 <div class="bounce-board-body"> 70 <div class="bounce-board-body">
71 <!-- all user comments --> 71 <!-- all user comments -->
72 <ul class="bounced-user-comments"> 72 <ul class="bounced-user-comments">
73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
74 <div class="bc_brd_l"></div> 74 <div class="bc_brd_l"></div>
75 <!-- border --> 75 <!-- border -->
76 <div class="parent-full-width" v-if="cmnt.comment"> 76 <div class="parent-full-width" v-if="cmnt.comment">
77 <div class="full-width"> 77 <div class="full-width">
78 <div class="b-user-head"> 78 <div class="b-user-head">
79 <img :src="cmnt.user.profilePic" /> 79 <img :src="cmnt.user.profilePic" />
80 <span class="head-content">{{ cmnt.user.name }} </span> 80 <span class="head-content">{{ cmnt.user.name }} </span>
81 <ul> 81 <ul>
82 <li> 82 <li>
83 <span></span 83 <span></span
84 ><img src="../assets/images/u-info-icon.png" />{{ 84 ><img src="../assets/images/u-info-icon.png" />{{
85 cmnt.user.karmaPoints 85 cmnt.user.karmaPoints
86 }}pts 86 }}pts
87 </li> 87 </li>
88 <li> 88 <li>
89 <span></span>{{ dateGenerator(cmnt.createdAt) }} 89 <span></span>{{ dateGenerator(cmnt.createdAt) }}
90 </li> 90 </li>
91 </ul> 91 </ul>
92 </div> 92 </div>
93 <!-- header --> 93 <!-- header -->
94 <p> 94 <p>
95 {{ cmnt.comment }} 95 {{ cmnt.comment }}
96 </p> 96 </p>
97 <div class="joined_wrapper"> 97 <div class="joined_wrapper">
98 <ul class="joined-info info_bc_spc"> 98 <ul class="joined-info info_bc_spc">
99 <li> 99 <li>
100 <img 100 <img
101 src="../assets/images/heart.svg" 101 src="../assets/images/heart.svg"
102 v-if="cmnt.like == false" 102 v-if="cmnt.like == false"
103 @click="likeComment(true, cmnt._id)" 103 @click="likeComment(true, cmnt._id)"
104 class="cursor-pointer" 104 class="cursor-pointer"
105 /> 105 />
106 <img 106 <img
107 src="../assets/images/purple-heart.png" 107 src="../assets/images/purple-heart.png"
108 v-if="cmnt.like == true" 108 v-if="cmnt.like == true"
109 @click="likeComment(false, cmnt._id)" 109 @click="likeComment(false, cmnt._id)"
110 class="cursor-pointer" 110 class="cursor-pointer"
111 /> 111 />
112 </li> 112 </li>
113 <li> 113 <li>
114 <a href="javasript:void(0);"> 114 <a href="javasript:void(0);">
115 {{ cmnt.likes.length }}</a 115 {{ cmnt.likes.length }}</a
116 > 116 >
117 </li> 117 </li>
118 <li class="comment-spc"> 118 <li class="comment-spc">
119 <img src="../assets/images/purple-comment.png" /> 119 <img src="../assets/images/purple-comment.png" />
120 </li> 120 </li>
121 <li> 121 <li>
122 <a href="javasript:void(0);"> 122 <a href="javasript:void(0);">
123 {{ cmnt.children.length }}</a 123 {{ cmnt.children.length }}</a
124 > 124 >
125 </li> 125 </li>
126 </ul> 126 </ul>
127 <div class="add_rply" v-if="!cmnt.childInput"> 127 <div class="add_rply" v-if="!cmnt.childInput">
128 <input 128 <input
129 type="text" 129 type="text"
130 @click="eachRply(cmnt)" 130 @click="eachRply(cmnt)"
131 class="add_Rply_C" 131 class="add_Rply_C"
132 placeholder="Add your reply" 132 placeholder="Add your reply"
133 /> 133 />
134 </div> 134 </div>
135 <!-- rly form --> 135 <!-- rly form -->
136 </div> 136 </div>
137 <!-- joined wrapper --> 137 <!-- joined wrapper -->
138 </div> 138 </div>
139 <!-- full width --> 139 <!-- full width -->
140 </div> 140 </div>
141 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 141 <div class="comments-footer each-ft" v-if="cmnt.childInput">
142 <textarea v-model="comment" id="childInput"></textarea> 142 <textarea v-model="comment" id="childInput"></textarea>
143 <div class="comments-footer-wrp"> 143 <div class="comments-footer-wrp">
144 <a 144 <a
145 @click="createChildComment(cmnt)" 145 @click="createChildComment(cmnt)"
146 href="javasript:void(0);" 146 href="javasript:void(0);"
147 class="add_comments_chat reply-Wdth" 147 class="add_comments_chat reply-Wdth"
148 >Reply</a 148 >Reply</a
149 > 149 >
150 <a 150 <a
151 href="javasript:void(0);" 151 href="javasript:void(0);"
152 class="discard_bt" 152 class="discard_bt"
153 @click="discardRply(cmnt)" 153 @click="discardRply(cmnt)"
154 ><img src="../assets/images/discard.svg" 154 ><img src="../assets/images/discard.svg"
155 /></a> 155 /></a>
156 </div> 156 </div>
157 </div> 157 </div>
158 <!-- parent --> 158 <!-- parent -->
159 <div 159 <div
160 class="child-full-width" 160 class="child-full-width"
161 v-for="(childCmnt, i) in cmnt.children" 161 v-for="(childCmnt, i) in cmnt.children"
162 :key="i" 162 :key="i"
163 > 163 >
164 <div class="full-width"> 164 <div class="full-width">
165 <div class="b-user-head"> 165 <div class="b-user-head">
166 <img :src="childCmnt.user.profilePic" /> 166 <img :src="childCmnt.user.profilePic" />
167 <span class="head-content" 167 <span class="head-content"
168 >{{ childCmnt.user.name }} 168 >{{ childCmnt.user.name }}
169 </span> 169 </span>
170 <ul> 170 <ul>
171 <li> 171 <li>
172 <span></span 172 <span></span
173 ><img src="../assets/images/u-info-icon.png" />{{ 173 ><img src="../assets/images/u-info-icon.png" />{{
174 childCmnt.user.karmaPoints 174 childCmnt.user.karmaPoints
175 }}pts 175 }}pts
176 </li> 176 </li>
177 <li> 177 <li>
178 <span></span 178 <span></span
179 >{{ dateGenerator(childCmnt.createdAt) }} 179 >{{ dateGenerator(childCmnt.createdAt) }}
180 </li> 180 </li>
181 </ul> 181 </ul>
182 </div> 182 </div>
183 <p> 183 <p>
184 {{ childCmnt.comment }} 184 {{ childCmnt.comment }}
185 </p> 185 </p>
186 <div class="joined_wrapper"> 186 <div class="joined_wrapper">
187 <ul class="joined-info info_bc_spc"> 187 <ul class="joined-info info_bc_spc">
188 <li> 188 <li>
189 <img 189 <img
190 src="../assets/images/heart.svg" 190 src="../assets/images/heart.svg"
191 v-if="childCmnt.like == false" 191 v-if="childCmnt.like == false"
192 @click="likeComment(true, childCmnt._id)" 192 @click="likeComment(true, childCmnt._id)"
193 class="cursor-pointer" 193 class="cursor-pointer"
194 /> 194 />
195 <img 195 <img
196 src="../assets/images/purple-heart.png" 196 src="../assets/images/purple-heart.png"
197 v-if="childCmnt.like == true" 197 v-if="childCmnt.like == true"
198 @click="likeComment(false, childCmnt._id)" 198 @click="likeComment(false, childCmnt._id)"
199 class="cursor-pointer" 199 class="cursor-pointer"
200 /> 200 />
201 </li> 201 </li>
202 <li> 202 <li>
203 <a href="javasript:void(0);"> 203 <a href="javasript:void(0);">
204 {{ childCmnt.likes.length }}</a 204 {{ childCmnt.likes.length }}</a
205 > 205 >
206 </li> 206 </li>
207 </ul> 207 </ul>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- eree --> 211 <!-- eree -->
212 212
213 <!-- comments footer --> 213 <!-- comments footer -->
214 </li> 214 </li>
215 </ul> 215 </ul>
216 </div> 216 </div>
217 <!-- bounce board body --> 217 <!-- bounce board body -->
218 <div class="comments-footer" v-if="parentInput"> 218 <div class="comments-footer" v-if="parentInput">
219 <textarea v-model="comment"></textarea> 219 <textarea v-model="comment"></textarea>
220 <div class="comments-footer-wrp"> 220 <div class="comments-footer-wrp">
221 <a 221 <a
222 href="javasript:void(0);" 222 href="javasript:void(0);"
223 class="add_comments_chat" 223 class="add_comments_chat"
224 @click="createComment" 224 @click="createComment"
225 ><img src="../assets/images/add-comment.svg" /> Comment</a 225 ><img src="../assets/images/add-comment.svg" /> Comment</a
226 > 226 >
227 </div> 227 </div>
228 </div> 228 </div>
229 <!-- comments footer --> 229 <!-- comments footer -->
230 </div> 230 </div>
231 </div> 231 </div>
232 <!-- bounceboard wrp --> 232 <!-- bounceboard wrp -->
233 <!-- chat box --> 233 <!-- chat box -->
234 234
235 <div class="single-mobileInsight"> 235 <div class="single-mobileInsight">
236 <div class="m-screen-hidden"> 236 <div class="m-screen-hidden">
237 <div class="top-area-blank"></div> 237 <div class="top-area-blank"></div>
238 <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> 238 <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
239 <img 239 <img
240 :src="currentSlideData.payload.metaData.mobileImage" 240 :src="currentSlideData.payload.metaData.mobileImage"
241 class="m-screen insight-two-img" 241 class="m-screen insight-two-img"
242 /> 242 />
243 </div> 243 </div>
244 <div class="single-left-Insight-comments"> 244 <div class="single-left-Insight-comments">
245 <div class="author-thoughts"> 245 <div class="author-thoughts">
246 <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> 246 <img src="../assets/images/thoughts-upper.svg" class="upper-th" />
247 <img 247 <img
248 :src="currentSlideData.payload.metaData.authorImage" 248 :src="currentSlideData.payload.metaData.authorImage"
249 class="dynamic-thoughts" 249 class="dynamic-thoughts"
250 /> 250 />
251 </div> 251 </div>
252 <!-- user thoughts --> 252 <!-- user thoughts -->
253 253
254 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 254 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
255 <div class="a-intro-comments custom-c-style"> 255 <div class="a-intro-comments custom-c-style">
256 <!-- <p> 256 <!-- <p>
257 I wonder what the difference between “ 257 I wonder what the difference between “
258 <strong>Dunzo Assistant </strong>” and “<strong 258 <strong>Dunzo Assistant </strong>” and “<strong
259 >Pickup and Drop </strong 259 >Pickup and Drop </strong
260 >” are. If they are the same, there are two “call to actions” 260 >” are. If they are the same, there are two “call to actions”
261 for the same workflow 261 for the same workflow
262 </p> --> 262 </p> -->
263 <p>{{ commentList[0].comment }}</p> 263 <p>{{ commentList[0].comment }}</p>
264 <ul class="rly-comment-set"> 264 <ul class="rly-comment-set">
265 <!-- like/dislike --> 265 <!-- like/dislike -->
266 <li> 266 <li>
267 <img 267 <img
268 src="../assets/images/heart.svg" 268 src="../assets/images/heart.svg"
269 v-if="commentList[0].like == false" 269 v-if="commentList[0].like == false"
270 @click="likeComment(true, commentList[0]._id)" 270 @click="likeComment(true, commentList[0]._id)"
271 class="cursor-pointer" 271 class="cursor-pointer"
272 /> 272 />
273 <img 273 <img
274 src="../assets/images/purple-heart.png" 274 src="../assets/images/purple-heart.png"
275 v-if="commentList[0].like == true" 275 v-if="commentList[0].like == true"
276 @click="likeComment(false, commentList[0]._id)" 276 @click="likeComment(false, commentList[0]._id)"
277 class="cursor-pointer" 277 class="cursor-pointer"
278 /> 278 />
279 <a href="javascript:void(0);">{{ 279 <a href="javascript:void(0);">{{
280 commentList[0].likes.length 280 commentList[0].likes.length
281 }}</a> 281 }}</a>
282 </li> 282 </li>
283 <!-- like/dislike ends --> 283 <!-- like/dislike ends -->
284 <li> 284 <li>
285 <img src="../assets/images/rply.svg" /> 285 <img src="../assets/images/rply.svg" />
286 <a href="javascript:void(0);" @click="reply_cht_box(0)" 286 <a href="javascript:void(0);" @click="reply_cht_box(0)"
287 >Reply</a 287 >Reply</a
288 > 288 >
289 </li> 289 </li>
290 </ul> 290 </ul>
291 </div> 291 </div>
292 <!-- comments box --> 292 <!-- comments box -->
293 </div> 293 </div>
294 <!-- single author comments --> 294 <!-- single author comments -->
295 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 295 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
296 <div class="a-intro-comments custom-c-style"> 296 <div class="a-intro-comments custom-c-style">
297 <p> 297 <p>
298 {{ commentList[1].comment }} 298 {{ commentList[1].comment }}
299 </p> 299 </p>
300 <ul class="rly-comment-set"> 300 <ul class="rly-comment-set">
301 <!-- like/dislike --> 301 <!-- like/dislike -->
302 <li> 302 <li>
303 <img 303 <img
304 src="../assets/images/heart.svg" 304 src="../assets/images/heart.svg"
305 v-if="commentList[1].like == false" 305 v-if="commentList[1].like == false"
306 @click="likeComment(true, commentList[1]._id)" 306 @click="likeComment(true, commentList[1]._id)"
307 class="cursor-pointer" 307 class="cursor-pointer"
308 /> 308 />
309 <img 309 <img
310 src="../assets/images/purple-heart.png" 310 src="../assets/images/purple-heart.png"
311 v-if="commentList[1].like == true" 311 v-if="commentList[1].like == true"
312 @click="likeComment(false, commentList[1]._id)" 312 @click="likeComment(false, commentList[1]._id)"
313 class="cursor-pointer" 313 class="cursor-pointer"
314 /> 314 />
315 <a href="javascript:void(0);">{{ 315 <a href="javascript:void(0);">{{
316 commentList[1].likes.length 316 commentList[1].likes.length
317 }}</a> 317 }}</a>
318 </li> 318 </li>
319 <!-- like/dislike ends --> 319 <!-- like/dislike ends -->
320 <li> 320 <li>
321 <img src="../assets/images/rply.svg" /> 321 <img src="../assets/images/rply.svg" />
322 <a href="javascript:void(0);" @click="reply_cht_box(1)" 322 <a href="javascript:void(0);" @click="reply_cht_box(1)"
323 >Reply</a 323 >Reply</a
324 > 324 >
325 </li> 325 </li>
326 </ul> 326 </ul>
327 </div> 327 </div>
328 <!-- comments box --> 328 <!-- comments box -->
329 </div> 329 </div>
330 <!-- single author comments --> 330 <!-- single author comments -->
331 </div> 331 </div>
332 <!-- single mobile Left insight --> 332 <!-- single mobile Left insight -->
333 <div 333 <div
334 class="c-product-insight-wrp two-screen-spc-top" 334 class="c-product-insight-wrp two-screen-spc-top"
335 v-if="commentExistCheck(2)" 335 v-if="commentExistCheck(2)"
336 > 336 >
337 <div class="single-author-li-comments"> 337 <div class="single-author-li-comments">
338 <div class="a-intro-comments"> 338 <div class="a-intro-comments">
339 <p> 339 <p>
340 {{ commentList[2].comment }} 340 {{ commentList[2].comment }}
341 </p> 341 </p>
342 <ul class="rly-comment-set"> 342 <ul class="rly-comment-set">
343 <!-- like/dislike --> 343 <!-- like/dislike -->
344 <li> 344 <li>
345 <img 345 <img
346 src="../assets/images/heart.svg" 346 src="../assets/images/heart.svg"
347 v-if="commentList[2].like == false" 347 v-if="commentList[2].like == false"
348 @click="likeComment(true, commentList[2]._id)" 348 @click="likeComment(true, commentList[2]._id)"
349 class="cursor-pointer" 349 class="cursor-pointer"
350 /> 350 />
351 <img 351 <img
352 src="../assets/images/purple-heart.png" 352 src="../assets/images/purple-heart.png"
353 v-if="commentList[2].like == true" 353 v-if="commentList[2].like == true"
354 @click="likeComment(false, commentList[2]._id)" 354 @click="likeComment(false, commentList[2]._id)"
355 class="cursor-pointer" 355 class="cursor-pointer"
356 /> 356 />
357 <a href="javascript:void(0);">{{ 357 <a href="javascript:void(0);">{{
358 commentList[2].likes.length 358 commentList[2].likes.length
359 }}</a> 359 }}</a>
360 </li> 360 </li>
361 <!-- like/dislike ends --> 361 <!-- like/dislike ends -->
362 <li> 362 <li>
363 <img src="../assets/images/rply.svg" /> 363 <img src="../assets/images/rply.svg" />
364 <a href="javascript:void(0);" @click="reply_cht_box(2)" 364 <a href="javascript:void(0);" @click="reply_cht_box(2)"
365 >Reply</a 365 >Reply</a
366 > 366 >
367 </li> 367 </li>
368 </ul> 368 </ul>
369 </div> 369 </div>
370 <!-- comments box --> 370 <!-- comments box -->
371 </div> 371 </div>
372 <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 372 <div class="single-author-li-comments" v-if="commentExistCheck(3)">
373 <div class="a-intro-comments"> 373 <div class="a-intro-comments">
374 <p> 374 <p>
375 {{ commentList[3].comment }} 375 {{ commentList[3].comment }}
376 </p> 376 </p>
377 <ul class="rly-comment-set"> 377 <ul class="rly-comment-set">
378 <!-- like/dislike --> 378 <!-- like/dislike -->
379 <li> 379 <li>
380 <img 380 <img
381 src="../assets/images/heart.svg" 381 src="../assets/images/heart.svg"
382 v-if="commentList[3].like == false" 382 v-if="commentList[3].like == false"
383 @click="likeComment(true, commentList[3]._id)" 383 @click="likeComment(true, commentList[3]._id)"
384 class="cursor-pointer" 384 class="cursor-pointer"
385 /> 385 />
386 <img 386 <img
387 src="../assets/images/purple-heart.png" 387 src="../assets/images/purple-heart.png"
388 v-if="commentList[3].like == true" 388 v-if="commentList[3].like == true"
389 @click="likeComment(false, commentList[3]._id)" 389 @click="likeComment(false, commentList[3]._id)"
390 class="cursor-pointer" 390 class="cursor-pointer"
391 /> 391 />
392 <a href="javascript:void(0);">{{ 392 <a href="javascript:void(0);">{{
393 commentList[3].likes.length 393 commentList[3].likes.length
394 }}</a> 394 }}</a>
395 </li> 395 </li>
396 <!-- like/dislike ends --> 396 <!-- like/dislike ends -->
397 <li> 397 <li>
398 <img src="../assets/images/rply.svg" /> 398 <img src="../assets/images/rply.svg" />
399 <a href="javascript:void(0);" @click="reply_cht_box(3)" 399 <a href="javascript:void(0);" @click="reply_cht_box(3)"
400 >Reply</a 400 >Reply</a
401 > 401 >
402 </li> 402 </li>
403 </ul> 403 </ul>
404 </div> 404 </div>
405 <!-- comments box --> 405 <!-- comments box -->
406 </div> 406 </div>
407 <!-- single author comments --> 407 <!-- single author comments -->
408 </div> 408 </div>
409 <!-- single mobile Right insight --> 409 <!-- single mobile Right insight -->
410 </div> 410 </div>
411 <!-- single author comments --> 411 <!-- single author comments -->
412 <div class="footer-nav"> 412 <div class="footer-nav">
413 <div class="footer-top white-bg"> 413 <div class="footer-top white-bg">
414 <div class="row"> 414 <div class="row">
415 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 415 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
416 <div class="row h-100p"> 416 <div class="row h-100p">
417 <div 417 <div
418 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 418 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
419 > 419 >
420 <div class="ft-comments-group testi-photos-ct"> 420 <div class="ft-comments-group testi-photos-ct">
421 <div class="c-with-photos"> 421 <div class="c-with-photos">
422 <span class="count-comments" 422 <span class="count-comments"
423 >{{ getLastcomment("count", commentList) }}+ 423 >{{ getLastcomment("count", commentList) }}+
424 Comments</span 424 Comments</span
425 ><!-- count commets --> 425 ><!-- count commets -->
426 <ul class="comments-photos"> 426 <ul class="comments-photos">
427 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> 427 <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
428 <li><img src="../assets/images/c-photo-2.png" /></li> 428 <li><img src="../assets/images/c-photo-2.png" /></li>
429 <li><img src="../assets/images/c-photo-3.png" /></li> --> 429 <li><img src="../assets/images/c-photo-3.png" /></li> -->
430 </ul> 430 </ul>
431 <!-- comment photos --> 431 <!-- comment photos -->
432 </div> 432 </div>
433 <div class="comments-detail all-c-space"> 433 <div class="comments-detail all-c-space">
434 <span 434 <span
435 >{{ getLastcomment("name", commentList) }} 435 >{{ getLastcomment("name", commentList) }}
436 <a href="javascript:void(0);" @click="open_ct_box" 436 <a href="javascript:void(0);" @click="open_ct_box"
437 >View All</a 437 >View All</a
438 ></span 438 ></span
439 > 439 >
440 <p> 440 <p>
441 <!-- I wonder what the difference between “Dunzo Assistant” 441 <!-- I wonder what the difference between “Dunzo Assistant”
442 and “Pickup and Drop... --> 442 and “Pickup and Drop... -->
443 {{ getLastcomment("msg", commentList) }} 443 {{ getLastcomment("msg", commentList) }}
444 </p> 444 </p>
445 </div> 445 </div>
446 <!-- comments detail --> 446 <!-- comments detail -->
447 </div> 447 </div>
448 <!-- comments Group --> 448 <!-- comments Group -->
449 </div> 449 </div>
450 </div> 450 </div>
451 </div> 451 </div>
452 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 452 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
453 <div class="comment-frm no-c-frm"> 453 <div class="comment-frm no-c-frm">
454 <div class="row"> 454 <div class="row">
455 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 455 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
456 <div class="form-group frm-wdth addfrm-spc"> 456 <div class="form-group frm-wdth addfrm-spc">
457 <input 457 <input
458 type="text" 458 type="text"
459 class="form-control" 459 class="form-control"
460 placeholder="Something on your mind?" 460 placeholder="Something on your mind?"
461 id="open_ct_box" 461 id="open_ct_box"
462 v-model="comment" 462 v-model="comment"
463 /> 463 />
464 </div> 464 </div>
465 </div> 465 </div>
466 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 466 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
467 <a 467 <a
468 href="javascript:void(0);" 468 href="javascript:void(0);"
469 @click="createComment" 469 @click="createComment"
470 class="add-comment" 470 class="add-comment"
471 ><img src="../assets/images/add-comment.svg" /> 471 ><img src="../assets/images/add-comment.svg" />
472 Comment</a 472 Comment</a
473 > 473 >
474 </div> 474 </div>
475 </div> 475 </div>
476 <!-- comment from --> 476 <!-- comment from -->
477 </div> 477 </div>
478 </div> 478 </div>
479 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 479 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
480 <ul class="top-intro-bt"> 480 <ul class="top-intro-bt">
481 <li> 481 <li>
482 <a href="javascript:void(0);" @click="goBack" 482 <a href="javascript:void(0);" @click="goBack"
483 ><img src="../assets/images/skip-prev.svg" /> Prev</a 483 ><img src="../assets/images/skip-prev.svg" /> Prev</a
484 > 484 >
485 </li> 485 </li>
486 <li> 486 <li>
487 <a href="javascript:void(0);" @click="goNext" 487 <a href="javascript:void(0);" @click="goNext"
488 ><img src="../assets/images/skip-next.svg" /> Skip to next 488 ><img src="../assets/images/skip-next.svg" /> Skip to next
489 slide</a 489 slide</a
490 > 490 >
491 </li> 491 </li>
492 </ul> 492 </ul>
493 </div> 493 </div>
494 <!-- buttons list --> 494 <!-- buttons list -->
495 </div> 495 </div>
496 </div> 496 </div>
497 <!-- footer top --> 497 <!-- footer top -->
498 <div class="footer-bottom"> 498 <div class="footer-bottom">
499 <ul> 499 <ul>
500 <li class="active"></li> 500 <li class="active"></li>
501 <li></li> 501 <li></li>
502 </ul> 502 </ul>
503 </div> 503 </div>
504 <!-- footer top --> 504 <!-- footer top -->
505 </div> 505 </div>
506 <!-- footer --> 506 <!-- footer -->
507 </div> 507 </div>
508 <!-- body wrapper --> 508 <!-- body wrapper -->
509 </div> 509 </div>
510 <!-- main wrapper --> 510 <!-- main wrapper -->
511 </main> 511 </main>
512 </template> 512 </template>
513 513
514 <script> 514 <script>
515 import Vue from "vue"; 515 import Vue from "vue";
516 import router from "../router"; 516 import router from "../router";
517 import axios from "axios"; 517 import axios from "axios";
518 import moment from "moment"; 518 import moment from "moment";
519 import Header from "./Header"; 519 import Header from "./Header";
520 520
521 export default { 521 export default {
522 components: { 522 components: {
523 Header: Header, 523 Header: Header,
524 }, 524 },
525 name: "SingleMobileScreenInsightTwo", 525 name: "SingleMobileScreenInsightTwo",
526 data() { 526 data() {
527 return { 527 return {
528 allSlide: [], 528 allSlide: [],
529 currentSlideIndex: null, 529 currentSlideIndex: null,
530 currentSlideData: null, 530 currentSlideData: null,
531 // 531 //
532 usertoken: null, 532 usertoken: null,
533 commentList: [], 533 commentList: [],
534 comment: null, 534 comment: null,
535 parentInput: true, 535 parentInput: true,
536 }; 536 };
537 }, 537 },
538 mounted() { 538 mounted() {
539 var allSlideData = localStorage.getItem( 539 var allSlideData = localStorage.getItem(
540 "spotlight_slide" + this.$route.params.caseStudyId 540 "spotlight_slide" + this.$route.params.caseStudyId
541 ); 541 );
542 var userdata = localStorage.getItem("spotlight_usertoken"); 542 var userdata = localStorage.getItem("spotlight_usertoken");
543 if (allSlideData) { 543 if (allSlideData) {
544 this.allSlide = JSON.parse(allSlideData); 544 this.allSlide = JSON.parse(allSlideData);
545 this.getCurrentSlideData(); 545 this.getCurrentSlideData();
546 }else{ 546 }else{
547 this.$router.push("/login"); 547 this.getCurrentSlideData();
548
548 } 549 }
550 var userdata = localStorage.getItem("spotlight_usertoken");
549 if (userdata) { 551 if (userdata) {
550 userdata = JSON.parse(userdata); 552 userdata = JSON.parse(userdata);
551 this.usertoken = userdata.token; 553 this.usertoken = userdata.token;
552 this.getComment(); 554 this.getComment();
555 }else{
556 this.getComment();
553 } 557 }
554 }, 558 },
555 methods: { 559 methods: {
560
561 generatecaseStudies(){
562 axios
563 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
564 headers: {
565 Authorization: "Bearer " + this.usertoken,
566 },
567 })
568 .then((response) => {
569
570 console.log('response',response.data.data);
571 this.openStudy(response.data.data);
572 })
573 .catch((error) => console.log(error));
574 },
575
576
577
578 openStudy(payload) {
579 console.log("payload-", payload);
580 payload.intro.date = payload.createdAt;
581 payload.intro.focusPoint = payload.focusAreas;
582 axios
583 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
584 headers: {
585 Authorization: "Bearer " + this.usertoken,
586 },
587 })
588 .then((response) => {
589 this.createSlide(payload, response.data.data);
590 })
591 .catch((error) => console.log(error));
592 },
593
594 createSlide(payload, slides) {
595 var finalSlides = [];
596 slides.forEach((slides_) => {
597 var url = this.assignRoutes(slides_.templateId);
598 var obj = {
599 forward: true,
600 backward: true,
601 ur: url,
602 slideId: slides_._id,
603 caseStudyId: slides_.caseStudyId,
604 payload: {
605 metaData: slides_.metaData,
606 comments: slides_.comments,
607 insight: slides_.insight ? slides_.insight : null,
608 },
609 };
610 // slides_
611 finalSlides.push(obj);
612 });
613 console.log("payload", payload);
614 // add first slide at begining
615 finalSlides.unshift({
616 forward: true,
617 backward: false,
618 ur: "EpisodeIntro",
619 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
620 caseStudyId: payload._id,
621 payload: {
622 metaData: payload.intro,
623 comments: [],
624 },
625 });
626 finalSlides.push({
627 forward: true,
628 backward: false,
629 ur: "Outro",
630 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
631 caseStudyId: payload._id,
632 payload: {
633 metaData: payload.outro,
634 comments: [],
635 },
636 });
637
638 console.log(finalSlides);
639 console.log("payload", payload);
640 localStorage.setItem(
641 "spotlight_slide" + payload._id,
642 JSON.stringify(finalSlides)
643 );
644 this.allSlide = finalSlides;
645 this.getCurrentSlideData();
646 },
647 assignRoutes(tempId) {
648 // /episode-intro
649 // /outro
650 var routes = [
651 {
652 url: "AuthorIntro",
653 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
654 },
655 {
656 url: "NoScreenshotSingleAuthor",
657 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
658 },
659 {
660 url: "SingleMobileScreenInsightTwo",
661 tempId: "T3_cqNIf7tuqL4jyON63dA7",
662 },
663 {
664 url: "TwoScreenWithoutInsight",
665 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
666 },
667 {
668 url: "noscreenshotSingleautho",
669 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
670 },
671 {
672 url: "SingleMobileScreenInsightOne",
673 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
674 },
675 {
676 url: "TwoScreenWithInsight",
677 tempId: "T7_za3c3sYgx7bVvtKzasdf",
678 },
679 {
680 url: "AuthorReadingNow",
681 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
682 },
683 {
684 url: "AuthorReadingBreak",
685 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
686 },
687 ];
688 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
689 return routes[i].url;
690 },
691
556 getCurrentSlideData() { 692 getCurrentSlideData() {
557 var i = this.allSlide.findIndex( 693 var i = this.allSlide.findIndex(
558 (slide_) => slide_.slideId == this.$route.params.slideId 694 (slide_) => slide_.slideId == this.$route.params.slideId
559 ); 695 );
560 this.currentSlideIndex = i; 696 this.currentSlideIndex = i;
561 this.currentSlideData = this.allSlide[i]; 697 this.currentSlideData = this.allSlide[i];
562 console.log("currentSlideData", this.currentSlideData); 698 console.log("currentSlideData", this.currentSlideData);
563 }, 699 },
564 goNext() { 700 goNext() {
565 this.currentSlideIndex++; 701 this.currentSlideIndex++;
566 this.$router.push({ 702 this.$router.push({
567 name: this.allSlide[this.currentSlideIndex].ur, 703 name: this.allSlide[this.currentSlideIndex].ur,
568 params: { 704 params: {
569 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 705 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
570 slideId: this.allSlide[this.currentSlideIndex].slideId, 706 slideId: this.allSlide[this.currentSlideIndex].slideId,
571 }, 707 },
572 }); 708 });
573 }, 709 },
574 goBack() { 710 goBack() {
575 this.currentSlideIndex--; 711 this.currentSlideIndex--;
576 this.$router.push({ 712 this.$router.push({
577 name: this.allSlide[this.currentSlideIndex].ur, 713 name: this.allSlide[this.currentSlideIndex].ur,
578 params: { 714 params: {
579 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 715 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
580 slideId: this.allSlide[this.currentSlideIndex].slideId, 716 slideId: this.allSlide[this.currentSlideIndex].slideId,
581 }, 717 },
582 }); 718 });
583 }, 719 },
584 createComment() { 720 createComment() {
585 console.log("===", this.comment); 721 console.log("===", this.comment);
586 var obj = { 722 var obj = {
587 caseStudyId: this.currentSlideData.caseStudyId, 723 caseStudyId: this.currentSlideData.caseStudyId,
588 slideId: this.currentSlideData.slideId, 724 slideId: this.currentSlideData.slideId,
589 comment: this.comment, 725 comment: this.comment,
590 }; 726 };
591 axios 727 axios
592 .post("/bounceBoard/comment", obj, { 728 .post("/bounceBoard/comment", obj, {
593 headers: { 729 headers: {
594 Authorization: "Bearer " + this.usertoken, 730 Authorization: "Bearer " + this.usertoken,
595 }, 731 },
596 }) 732 })
597 .then((response) => { 733 .then((response) => {
598 this.comment = null; 734 this.comment = null;
599 this.getComment(); 735 this.getComment();
600 console.log(response); 736 console.log(response);
601 }) 737 })
602 .catch((error) => { 738 .catch((error) => {
603 if (error.response) { 739 if (error.response) {
604 this.$toaster.error(error.response.data.message); 740 this.$toaster.error(error.response.data.message);
605 } 741 }
606 }); 742 });
607 }, 743 },
608 744
609 createChildComment(cmnt) { 745 createChildComment(cmnt) {
610 console.log(cmnt, "===", this.comment); 746 console.log(cmnt, "===", this.comment);
611 var obj = { 747 var obj = {
612 caseStudyId: this.currentSlideData.caseStudyId, 748 caseStudyId: this.currentSlideData.caseStudyId,
613 slideId: this.currentSlideData.slideId, 749 slideId: this.currentSlideData.slideId,
614 comment: this.comment, 750 comment: this.comment,
615 parentId: cmnt._id, 751 parentId: cmnt._id,
616 }; 752 };
617 axios 753 axios
618 .post("/bounceBoard/comment", obj, { 754 .post("/bounceBoard/comment", obj, {
619 headers: { 755 headers: {
620 Authorization: "Bearer " + this.usertoken, 756 Authorization: "Bearer " + this.usertoken,
621 }, 757 },
622 }) 758 })
623 .then((response) => { 759 .then((response) => {
624 this.comment = null; 760 this.comment = null;
625 this.discardRply(cmnt); 761 this.discardRply(cmnt);
626 this.getComment(); 762 this.getComment();
627 console.log(response); 763 console.log(response);
628 }) 764 })
629 .catch((error) => { 765 .catch((error) => {
630 if (error.response) { 766 if (error.response) {
631 this.$toaster.error(error.response.data.message); 767 this.$toaster.error(error.response.data.message);
632 } 768 }
633 }); 769 });
634 }, 770 },
635 getComment() { 771 getComment() {
636 axios 772 axios
637 .get( 773 .get(
638 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 774 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
639 { 775 {
640 headers: { 776 headers: {
641 Authorization: "Bearer " + this.usertoken, 777 Authorization: "Bearer " + this.usertoken,
642 }, 778 },
643 } 779 }
644 ) 780 )
645 .then((response) => { 781 .then((response) => {
646 console.log(response.data); 782 console.log(response.data);
647 var comments = []; 783 var comments = [];
648 var keys = Object.keys(response.data.data); 784 var keys = Object.keys(response.data.data);
649 response.data.data; 785 response.data.data;
650 keys.forEach((key_) => { 786 keys.forEach((key_) => {
651 comments.push(response.data.data[key_]); 787 comments.push(response.data.data[key_]);
652 }); 788 });
653 comments.forEach((coment_) => { 789 comments.forEach((coment_) => {
654 coment_.childInput = false; 790 coment_.childInput = false;
655 }); 791 });
656 console.log("comments", comments); 792 console.log("comments", comments);
657 this.commentList = comments; 793 this.commentList = comments;
658 }) 794 })
659 .catch((error) => console.log(error)); 795 .catch((error) => console.log(error));
660 }, 796 },
661 dateGenerator(curreDate) { 797 dateGenerator(curreDate) {
662 var todayDate = moment(new Date(), "DD.MM.YYYY"); 798 var todayDate = moment(new Date(), "DD.MM.YYYY");
663 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 799 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
664 var result = todayDate.diff(endDate, "days"); 800 var result = todayDate.diff(endDate, "days");
665 var date = null; 801 var date = null;
666 if (result == 0) { 802 if (result == 0) {
667 date = "Today"; 803 date = "Today";
668 } else { 804 } else {
669 date = result + " days ago"; 805 date = result + " days ago";
670 } 806 }
671 return date; 807 return date;
672 }, 808 },
673 goToLogin() { 809 goToLogin() {
674 this.$router.push("/login"); 810 this.$router.push("/login");
811 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
812
675 }, 813 },
676 goToSignUp() { 814 goToSignUp() {
677 this.$router.push("/"); 815 this.$router.push("/");
678 }, 816 },
679 chtbox_close() { 817 chtbox_close() {
680 $("#cht_box_close").removeClass("cht_close"); 818 $("#cht_box_close").removeClass("cht_close");
681 $("#open_ct_box, .c_hide").show(); 819 $("#open_ct_box, .c_hide").show();
682 $(".footer-top").addClass("white-bg"); 820 $(".footer-top").addClass("white-bg");
683 }, 821 },
684 open_ct_box() { 822 open_ct_box() {
823 if(!this.usertoken){
824 this.goToLogin();
825 }
685 $("#cht_box_close").addClass("cht_close"); 826 $("#cht_box_close").addClass("cht_close");
686 $("#open_ct_box, .c_hide").hide(); 827 $("#open_ct_box, .c_hide").hide();
687 $(".footer-top").removeClass("white-bg"); 828 $(".footer-top").removeClass("white-bg");
688 }, 829 },
689 eachRply(cmnt) { 830 eachRply(cmnt) {
690 cmnt.childInput = true; 831 cmnt.childInput = true;
691 this.parentInput = false; 832 this.parentInput = false;
692 this.comment = null; 833 this.comment = null;
693 setTimeout(() => { 834 setTimeout(() => {
694 document.getElementById("childInput").focus(); 835 document.getElementById("childInput").focus();
695 }, 100); 836 }, 100);
696 }, 837 },
697 discardRply(cmnt) { 838 discardRply(cmnt) {
698 cmnt.childInput = false; 839 cmnt.childInput = false;
699 this.parentInput = true; 840 this.parentInput = true;
700 this.comment = null; 841 this.comment = null;
701 }, 842 },
702 reply_cht_box(i) { 843 reply_cht_box(i) {
844 if(!this.usertoken){
845 this.goToLogin();
846 }
847 if(!this.usertoken){
848 this.goToLogin();
849 }
703 console.log(this.commentList, "cmnt"); 850 console.log(this.commentList, "cmnt");
704 $("#cht_box_close").addClass("cht_close"); 851 $("#cht_box_close").addClass("cht_close");
705 $("#open_ct_box, .c_hide").hide(); 852 $("#open_ct_box, .c_hide").hide();
706 $(".footer-top").removeClass("white-bg"); 853 $(".footer-top").removeClass("white-bg");
707 this.commentList[i].childInput = true; 854 this.commentList[i].childInput = true;
708 this.parentInput = false; 855 this.parentInput = false;
709 this.comment = null; 856 this.comment = null;
710 setTimeout(() => { 857 setTimeout(() => {
711 document.getElementById("childInput").focus(); 858 document.getElementById("childInput").focus();
712 }, 100); 859 }, 100);
713 }, 860 },
714 likeComment(status, id) { 861 likeComment(status, id) {
862 if(!this.usertoken){
863 this.goToLogin();
864 }
715 console.log("===", this.comment); 865 console.log("===", this.comment);
716 var obj = { 866 var obj = {
717 commentId: id, 867 commentId: id,
718 like: status, 868 like: status,
719 }; 869 };
720 axios 870 axios
721 .post("/bounceBoard/like", obj, { 871 .post("/bounceBoard/like", obj, {
722 headers: { 872 headers: {
723 Authorization: "Bearer " + this.usertoken, 873 Authorization: "Bearer " + this.usertoken,
724 }, 874 },
725 }) 875 })
726 .then((response) => { 876 .then((response) => {
727 this.getComment(); 877 this.getComment();
728 console.log(response); 878 console.log(response);
729 }) 879 })
730 .catch((error) => { 880 .catch((error) => {
731 if (error.response) { 881 if (error.response) {
732 this.$toaster.error(error.response.data.message); 882 this.$toaster.error(error.response.data.message);
733 } 883 }
734 }); 884 });
735 }, 885 },
736 getLastcomment(flag, commentArray) { 886 getLastcomment(flag, commentArray) {
737 var finalComment = null; 887 var finalComment = null;
738 var totalMessage = 0; 888 var totalMessage = 0;
739 var name = null; 889 var name = null;
740 commentArray.forEach((comment_) => { 890 commentArray.forEach((comment_) => {
741 if (comment_.comment != null) { 891 if (comment_.comment != null) {
742 name = comment_.user.name; 892 name = comment_.user.name;
743 finalComment = comment_.comment; 893 finalComment = comment_.comment;
744 totalMessage++; 894 totalMessage++;
745 } 895 }
746 }); 896 });
747 if (flag == "count") { 897 if (flag == "count") {
748 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 898 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
749 } else if (flag == "name") { 899 } else if (flag == "name") {
750 return (name = name); 900 return (name = name);
751 } else { 901 } else {
752 return finalComment; 902 return finalComment;
753 } 903 }
754 }, 904 },
755 commentExistCheck(i) { 905 commentExistCheck(i) {
756 console.log(this.commentList[i].comment); 906 console.log(this.commentList[i].comment);
757 var returnValue = false; 907 var returnValue = false;
758 if (this.commentList[i].comment) { 908 if (this.commentList[i].comment) {
759 returnValue = true; 909 returnValue = true;
760 } 910 }
761 return returnValue; 911 return returnValue;
762 }, 912 },
763 }, 913 },
764 }; 914 };
765 // 915 //
766 </script> 916 </script>
767 917
src/components/TwoScreenWithInsight.vue
Diff comments   View file @4905524
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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);"> 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);" 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 216
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 <div class="m-screen-hidden"> 292 <div class="m-screen-hidden">
293 <div class="top-area-blank"></div> 293 <div class="top-area-blank"></div>
294 <img 294 <img
295 :src="currentSlideData.payload.metaData.mobileImage1" 295 :src="currentSlideData.payload.metaData.mobileImage1"
296 class="m-screen insight-two-img" 296 class="m-screen insight-two-img"
297 /> 297 />
298 </div> 298 </div>
299 <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> 299 <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->
300 <img 300 <img
301 :src="currentSlideData.payload.metaData.authorImage" 301 :src="currentSlideData.payload.metaData.authorImage"
302 class="user-photo-bottom" 302 class="user-photo-bottom"
303 /> 303 />
304 </div> 304 </div>
305 <!-- mobile screen one --> 305 <!-- mobile screen one -->
306 <div class="mobile-screen-one p-right"> 306 <div class="mobile-screen-one p-right">
307 <div class="view-ticket-wrp-ps"> 307 <div class="view-ticket-wrp-ps">
308 <div class="single-author-li-comments"> 308 <div class="single-author-li-comments">
309 <div class="a-intro-comments custom-selected-style"> 309 <div class="a-intro-comments custom-selected-style">
310 <img src="../assets/images/rect.svg" class="rect" /> 310 <img src="../assets/images/rect.svg" class="rect" />
311 311
312 <div class="top-wrp"> 312 <div class="top-wrp">
313 {{ currentSlideData.payload.insight.tag }} Insight 313 {{ currentSlideData.payload.insight.tag }} Insight
314 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 314 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
315 </div> 315 </div>
316 <div class="top-head"> 316 <div class="top-head">
317 {{ currentSlideData.payload.insight.title }} 317 {{ currentSlideData.payload.insight.title }}
318 </div> 318 </div>
319 <p>{{ currentSlideData.payload.insight.description }}</p> 319 <p>{{ currentSlideData.payload.insight.description }}</p>
320 <div class="footer"> 320 <div class="footer">
321 <a href="javascript:void(0);" class="cit-16" 321 <a href="javascript:void(0);" class="cit-16"
322 >{{ 322 >{{
323 currentSlideData.payload.insight.citations.length 323 currentSlideData.payload.insight.citations.length
324 }} 324 }}
325 Citations</a 325 Citations</a
326 > 326 >
327 <!-- <a href="javascript:void(0);" class="ft-share" 327 <!-- <a href="javascript:void(0);" class="ft-share"
328 ><img src="../assets/images/reply-red.svg" /> Share from 328 ><img src="../assets/images/reply-red.svg" /> Share from
329 library</a 329 library</a
330 > --> 330 > -->
331 </div> 331 </div>
332 <!-- footer --> 332 <!-- footer -->
333 </div> 333 </div>
334 <!-- comments box --> 334 <!-- comments box -->
335 </div> 335 </div>
336 <!-- single author comments --> 336 <!-- single author comments -->
337 </div> 337 </div>
338 <!-- comments --> 338 <!-- comments -->
339 <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> 339 <!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->
340 <div class="m-screen-hidden"> 340 <div class="m-screen-hidden">
341 <div class="top-area-blank"></div> 341 <div class="top-area-blank"></div>
342 <img 342 <img
343 :src="currentSlideData.payload.metaData.mobileImage2" 343 :src="currentSlideData.payload.metaData.mobileImage2"
344 class="m-screen insight-two-img" 344 class="m-screen insight-two-img"
345 /> 345 />
346 </div> 346 </div>
347 </div> 347 </div>
348 <!-- mobile screen Two --> 348 <!-- mobile screen Two -->
349 </div> 349 </div>
350 <div class="footer-nav"> 350 <div class="footer-nav">
351 <div class="footer-top white-bg"> 351 <div class="footer-top white-bg">
352 <div class="row"> 352 <div class="row">
353 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 353 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
354 <div class="row h-100p"> 354 <div class="row h-100p">
355 <div 355 <div
356 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 356 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
357 > 357 >
358 <div class="ft-comments-group testi-photos-ct"> 358 <div class="ft-comments-group testi-photos-ct">
359 <div class="c-with-photos"> 359 <div class="c-with-photos">
360 <span class="count-comments" 360 <span class="count-comments"
361 >{{ getLastcomment("count", commentList) }}+ 361 >{{ getLastcomment("count", commentList) }}+
362 Comments</span 362 Comments</span
363 ><!-- count commets --> 363 ><!-- count commets -->
364 <ul class="comments-photos"> 364 <ul class="comments-photos">
365 <li><img src="../assets/images/c-photo-1.png" /></li> 365 <li><img src="../assets/images/c-photo-1.png" /></li>
366 <li><img src="../assets/images/c-photo-2.png" /></li> 366 <li><img src="../assets/images/c-photo-2.png" /></li>
367 <li><img src="../assets/images/c-photo-3.png" /></li> 367 <li><img src="../assets/images/c-photo-3.png" /></li>
368 </ul> 368 </ul>
369 <!-- comment photos --> 369 <!-- comment photos -->
370 </div> 370 </div>
371 <div class="comments-detail all-c-space"> 371 <div class="comments-detail all-c-space">
372 <span 372 <span
373 >{{ getLastcomment("name", commentList) }} 373 >{{ getLastcomment("name", commentList) }}
374 <a href="javascript:void(0);" @click="open_ct_box" 374 <a href="javascript:void(0);" @click="open_ct_box"
375 >View All</a 375 >View All</a
376 ></span 376 ></span
377 > 377 >
378 <p> 378 <p>
379 <!-- I wonder what the difference between “Dunzo Assistant” 379 <!-- I wonder what the difference between “Dunzo Assistant”
380 and “Pickup and Drop... --> 380 and “Pickup and Drop... -->
381 {{ getLastcomment("msg", commentList) }} 381 {{ getLastcomment("msg", commentList) }}
382 </p> 382 </p>
383 </div> 383 </div>
384 <!-- comments detail --> 384 <!-- comments detail -->
385 </div> 385 </div>
386 <!-- comments Group --> 386 <!-- comments Group -->
387 </div> 387 </div>
388 </div> 388 </div>
389 </div> 389 </div>
390 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 390 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
391 <div class="comment-frm no-c-frm"> 391 <div class="comment-frm no-c-frm">
392 <div class="row"> 392 <div class="row">
393 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 393 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
394 <div class="form-group frm-wdth addfrm-spc"> 394 <div class="form-group frm-wdth addfrm-spc">
395 <input 395 <input
396 type="text" 396 type="text"
397 class="form-control" 397 class="form-control"
398 placeholder="Something on your mind?" 398 placeholder="Something on your mind?"
399 id="open_ct_box" 399 id="open_ct_box"
400 v-model="comment" 400 v-model="comment"
401 /> 401 />
402 </div> 402 </div>
403 </div> 403 </div>
404 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 404 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
405 <a 405 <a
406 href="javascript:void(0);" 406 href="javascript:void(0);"
407 @click="createComment" 407 @click="createComment"
408 class="add-comment" 408 class="add-comment"
409 ><img src="../assets/images/add-comment.svg" /> 409 ><img src="../assets/images/add-comment.svg" />
410 Comment</a 410 Comment</a
411 > 411 >
412 </div> 412 </div>
413 </div> 413 </div>
414 <!-- comment from --> 414 <!-- comment from -->
415 </div> 415 </div>
416 </div> 416 </div>
417 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 417 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
418 <ul class="top-intro-bt"> 418 <ul class="top-intro-bt">
419 <li> 419 <li>
420 <a href="javascript:void(0);" @click="goBack" 420 <a href="javascript:void(0);" @click="goBack"
421 ><img src="../assets/images/skip-prev.svg" /> Prev</a 421 ><img src="../assets/images/skip-prev.svg" /> Prev</a
422 > 422 >
423 </li> 423 </li>
424 <li> 424 <li>
425 <a href="javascript:void(0);" @click="goNext" 425 <a href="javascript:void(0);" @click="goNext"
426 ><img src="../assets/images/skip-next.svg" /> Skip to next 426 ><img src="../assets/images/skip-next.svg" /> Skip to next
427 slide</a 427 slide</a
428 > 428 >
429 </li> 429 </li>
430 </ul> 430 </ul>
431 </div> 431 </div>
432 <!-- buttons list --> 432 <!-- buttons list -->
433 </div> 433 </div>
434 </div> 434 </div>
435 <!-- footer top --> 435 <!-- footer top -->
436 <div class="footer-bottom"> 436 <div class="footer-bottom">
437 <ul> 437 <ul>
438 <li class="active"></li> 438 <li class="active"></li>
439 <li></li> 439 <li></li>
440 </ul> 440 </ul>
441 </div> 441 </div>
442 <!-- footer top --> 442 <!-- footer top -->
443 </div> 443 </div>
444 <!-- footer --> 444 <!-- footer -->
445 </div> 445 </div>
446 <!-- body wrapper --> 446 <!-- body wrapper -->
447 </div> 447 </div>
448 <!-- main wrapper --> 448 <!-- main wrapper -->
449 </main> 449 </main>
450 </template> 450 </template>
451 451
452 <script> 452 <script>
453 import Vue from "vue"; 453 import Vue from "vue";
454 import router from "../router"; 454 import router from "../router";
455 import axios from "axios"; 455 import axios from "axios";
456 import moment from "moment"; 456 import moment from "moment";
457 import Header from "./Header"; 457 import Header from "./Header";
458 458
459 export default { 459 export default {
460 components: { 460 components: {
461 Header: Header, 461 Header: Header,
462 }, 462 },
463 name: "TwoScreenWithInsight", 463 name: "TwoScreenWithInsight",
464 data() { 464 data() {
465 return { 465 return {
466 allSlide: [], 466 allSlide: [],
467 currentSlideIndex: null, 467 currentSlideIndex: null,
468 currentSlideData: null, 468 currentSlideData: null,
469 // 469 //
470 usertoken: null, 470 usertoken: null,
471 commentList: [], 471 commentList: [],
472 comment: null, 472 comment: null,
473 parentInput: true, 473 parentInput: true,
474 }; 474 };
475 }, 475 },
476 mounted() { 476 mounted() {
477 var allSlideData = localStorage.getItem( 477 var allSlideData = localStorage.getItem(
478 "spotlight_slide" + this.$route.params.caseStudyId 478 "spotlight_slide" + this.$route.params.caseStudyId
479 ); 479 );
480 if (allSlideData) { 480 if (allSlideData) {
481 this.allSlide = JSON.parse(allSlideData); 481 this.allSlide = JSON.parse(allSlideData);
482 this.getCurrentSlideData(); 482 this.getCurrentSlideData();
483 }else{ 483 }else{
484 this.$router.push("/login"); 484 this.getCurrentSlideData();
485
485 } 486 }
486 var userdata = localStorage.getItem("spotlight_usertoken"); 487 var userdata = localStorage.getItem("spotlight_usertoken");
487 if (userdata) { 488 if (userdata) {
488 userdata = JSON.parse(userdata); 489 userdata = JSON.parse(userdata);
489 this.usertoken = userdata.token; 490 this.usertoken = userdata.token;
490 this.getComment(); 491 this.getComment();
492 }else{
493 this.getComment();
491 } 494 }
492 }, 495 },
493 methods: { 496 methods: {
497
498 generatecaseStudies(){
499 axios
500 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
501 headers: {
502 Authorization: "Bearer " + this.usertoken,
503 },
504 })
505 .then((response) => {
506
507 console.log('response',response.data.data);
508 this.openStudy(response.data.data);
509 })
510 .catch((error) => console.log(error));
511 },
512
513
514
515 openStudy(payload) {
516 console.log("payload-", payload);
517 payload.intro.date = payload.createdAt;
518 payload.intro.focusPoint = payload.focusAreas;
519 axios
520 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
521 headers: {
522 Authorization: "Bearer " + this.usertoken,
523 },
524 })
525 .then((response) => {
526 this.createSlide(payload, response.data.data);
527 })
528 .catch((error) => console.log(error));
529 },
530
531 createSlide(payload, slides) {
532 var finalSlides = [];
533 slides.forEach((slides_) => {
534 var url = this.assignRoutes(slides_.templateId);
535 var obj = {
536 forward: true,
537 backward: true,
538 ur: url,
539 slideId: slides_._id,
540 caseStudyId: slides_.caseStudyId,
541 payload: {
542 metaData: slides_.metaData,
543 comments: slides_.comments,
544 insight: slides_.insight ? slides_.insight : null,
545 },
546 };
547 // slides_
548 finalSlides.push(obj);
549 });
550 console.log("payload", payload);
551 // add first slide at begining
552 finalSlides.unshift({
553 forward: true,
554 backward: false,
555 ur: "EpisodeIntro",
556 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
557 caseStudyId: payload._id,
558 payload: {
559 metaData: payload.intro,
560 comments: [],
561 },
562 });
563 finalSlides.push({
564 forward: true,
565 backward: false,
566 ur: "Outro",
567 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
568 caseStudyId: payload._id,
569 payload: {
570 metaData: payload.outro,
571 comments: [],
572 },
573 });
574
575 console.log(finalSlides);
576 console.log("payload", payload);
577 localStorage.setItem(
578 "spotlight_slide" + payload._id,
579 JSON.stringify(finalSlides)
580 );
581 this.allSlide = finalSlides;
582 this.getCurrentSlideData();
583 },
584 assignRoutes(tempId) {
585 // /episode-intro
586 // /outro
587 var routes = [
588 {
589 url: "AuthorIntro",
590 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
591 },
592 {
593 url: "NoScreenshotSingleAuthor",
594 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
595 },
596 {
597 url: "SingleMobileScreenInsightTwo",
598 tempId: "T3_cqNIf7tuqL4jyON63dA7",
599 },
600 {
601 url: "TwoScreenWithoutInsight",
602 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
603 },
604 {
605 url: "noscreenshotSingleautho",
606 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
607 },
608 {
609 url: "SingleMobileScreenInsightOne",
610 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
611 },
612 {
613 url: "TwoScreenWithInsight",
614 tempId: "T7_za3c3sYgx7bVvtKzasdf",
615 },
616 {
617 url: "AuthorReadingNow",
618 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
619 },
620 {
621 url: "AuthorReadingBreak",
622 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
623 },
624 ];
625 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
626 return routes[i].url;
627 },
628
494 getCurrentSlideData() { 629 getCurrentSlideData() {
495 var i = this.allSlide.findIndex( 630 var i = this.allSlide.findIndex(
496 (slide_) => slide_.slideId == this.$route.params.slideId 631 (slide_) => slide_.slideId == this.$route.params.slideId
497 ); 632 );
498 this.currentSlideIndex = i; 633 this.currentSlideIndex = i;
499 this.currentSlideData = this.allSlide[i]; 634 this.currentSlideData = this.allSlide[i];
500 console.log("currentSlideData", this.currentSlideData); 635 console.log("currentSlideData", this.currentSlideData);
501 }, 636 },
502 goNext() { 637 goNext() {
503 this.currentSlideIndex++; 638 this.currentSlideIndex++;
504 this.$router.push({ 639 this.$router.push({
505 name: this.allSlide[this.currentSlideIndex].ur, 640 name: this.allSlide[this.currentSlideIndex].ur,
506 params: { 641 params: {
507 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 642 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
508 slideId: this.allSlide[this.currentSlideIndex].slideId, 643 slideId: this.allSlide[this.currentSlideIndex].slideId,
509 }, 644 },
510 }); 645 });
511 }, 646 },
512 goBack() { 647 goBack() {
513 this.currentSlideIndex--; 648 this.currentSlideIndex--;
514 this.$router.push({ 649 this.$router.push({
515 name: this.allSlide[this.currentSlideIndex].ur, 650 name: this.allSlide[this.currentSlideIndex].ur,
516 params: { 651 params: {
517 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 652 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
518 slideId: this.allSlide[this.currentSlideIndex].slideId, 653 slideId: this.allSlide[this.currentSlideIndex].slideId,
519 }, 654 },
520 }); 655 });
521 }, 656 },
522 createComment() { 657 createComment() {
523 console.log("===", this.comment); 658 console.log("===", this.comment);
524 var obj = { 659 var obj = {
525 caseStudyId: this.currentSlideData.caseStudyId, 660 caseStudyId: this.currentSlideData.caseStudyId,
526 slideId: this.currentSlideData.slideId, 661 slideId: this.currentSlideData.slideId,
527 comment: this.comment, 662 comment: this.comment,
528 }; 663 };
529 axios 664 axios
530 .post("/bounceBoard/comment", obj, { 665 .post("/bounceBoard/comment", obj, {
531 headers: { 666 headers: {
532 Authorization: "Bearer " + this.usertoken, 667 Authorization: "Bearer " + this.usertoken,
533 }, 668 },
534 }) 669 })
535 .then((response) => { 670 .then((response) => {
536 this.comment = null; 671 this.comment = null;
537 this.getComment(); 672 this.getComment();
538 console.log(response); 673 console.log(response);
539 }) 674 })
540 .catch((error) => { 675 .catch((error) => {
541 if (error.response) { 676 if (error.response) {
542 this.$toaster.error(error.response.data.message); 677 this.$toaster.error(error.response.data.message);
543 } 678 }
544 }); 679 });
545 }, 680 },
546 createChildComment(cmnt) { 681 createChildComment(cmnt) {
547 console.log(cmnt, "===", this.comment); 682 console.log(cmnt, "===", this.comment);
548 var obj = { 683 var obj = {
549 caseStudyId: this.currentSlideData.caseStudyId, 684 caseStudyId: this.currentSlideData.caseStudyId,
550 slideId: this.currentSlideData.slideId, 685 slideId: this.currentSlideData.slideId,
551 comment: this.comment, 686 comment: this.comment,
552 parentId: cmnt._id, 687 parentId: cmnt._id,
553 }; 688 };
554 axios 689 axios
555 .post("/bounceBoard/comment", obj, { 690 .post("/bounceBoard/comment", obj, {
556 headers: { 691 headers: {
557 Authorization: "Bearer " + this.usertoken, 692 Authorization: "Bearer " + this.usertoken,
558 }, 693 },
559 }) 694 })
560 .then((response) => { 695 .then((response) => {
561 this.comment = null; 696 this.comment = null;
562 this.discardRply(cmnt); 697 this.discardRply(cmnt);
563 this.getComment(); 698 this.getComment();
564 console.log(response); 699 console.log(response);
565 }) 700 })
566 .catch((error) => { 701 .catch((error) => {
567 if (error.response) { 702 if (error.response) {
568 this.$toaster.error(error.response.data.message); 703 this.$toaster.error(error.response.data.message);
569 } 704 }
570 }); 705 });
571 }, 706 },
572 getComment() { 707 getComment() {
573 axios 708 axios
574 .get( 709 .get(
575 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 710 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
576 { 711 {
577 headers: { 712 headers: {
578 Authorization: "Bearer " + this.usertoken, 713 Authorization: "Bearer " + this.usertoken,
579 }, 714 },
580 } 715 }
581 ) 716 )
582 .then((response) => { 717 .then((response) => {
583 console.log(response.data); 718 console.log(response.data);
584 var comments = []; 719 var comments = [];
585 var keys = Object.keys(response.data.data); 720 var keys = Object.keys(response.data.data);
586 response.data.data; 721 response.data.data;
587 keys.forEach((key_) => { 722 keys.forEach((key_) => {
588 comments.push(response.data.data[key_]); 723 comments.push(response.data.data[key_]);
589 }); 724 });
590 comments.forEach((coment_) => { 725 comments.forEach((coment_) => {
591 coment_.childInput = false; 726 coment_.childInput = false;
592 }); 727 });
593 console.log("comments", comments); 728 console.log("comments", comments);
594 this.commentList = comments; 729 this.commentList = comments;
595 }) 730 })
596 .catch((error) => console.log(error)); 731 .catch((error) => console.log(error));
597 }, 732 },
598 dateGenerator(curreDate) { 733 dateGenerator(curreDate) {
599 var todayDate = moment(new Date(), "DD.MM.YYYY"); 734 var todayDate = moment(new Date(), "DD.MM.YYYY");
600 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 735 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
601 var result = todayDate.diff(endDate, "days"); 736 var result = todayDate.diff(endDate, "days");
602 return result; 737 return result;
603 }, 738 },
604 goToLogin() { 739 goToLogin() {
605 this.$router.push("/login"); 740 this.$router.push("/login");
741 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
606 }, 742 },
607 goToSignUp() { 743 goToSignUp() {
608 this.$router.push("/"); 744 this.$router.push("/");
609 }, 745 },
610 open(url){ 746 open(url){
611 window.open(url); 747 window.open(url);
612 }, 748 },
613 chtbox_close() { 749 chtbox_close() {
614 $("#cht_box_close").removeClass("cht_close"); 750 $("#cht_box_close").removeClass("cht_close");
615 $("#open_ct_box, .c_hide").show(); 751 $("#open_ct_box, .c_hide").show();
616 $(".footer-top").addClass("white-bg"); 752 $(".footer-top").addClass("white-bg");
617 }, 753 },
618 open_ct_box() { 754 open_ct_box() {
755 if(!this.usertoken){
756 this.goToLogin();
757 }
619 $("#cht_box_close").addClass("cht_close"); 758 $("#cht_box_close").addClass("cht_close");
620 $("#open_ct_box, .c_hide").hide(); 759 $("#open_ct_box, .c_hide").hide();
621 $(".footer-top").removeClass("white-bg"); 760 $(".footer-top").removeClass("white-bg");
622 }, 761 },
623 eachRply(cmnt) { 762 eachRply(cmnt) {
624 cmnt.childInput = true; 763 cmnt.childInput = true;
625 this.parentInput = false; 764 this.parentInput = false;
626 this.comment = null; 765 this.comment = null;
627 setTimeout(() => { 766 setTimeout(() => {
628 document.getElementById("childInput").focus(); 767 document.getElementById("childInput").focus();
629 }, 100); 768 }, 100);
630 }, 769 },
631 discardRply(cmnt) { 770 discardRply(cmnt) {
632 cmnt.childInput = false; 771 cmnt.childInput = false;
633 this.parentInput = true; 772 this.parentInput = true;
634 this.comment = null; 773 this.comment = null;
635 }, 774 },
636 reply_cht_box(i) { 775 reply_cht_box(i) {
776 if(!this.usertoken){
777 this.goToLogin();
778 }
637 console.log(this.commentList, "cmnt"); 779 console.log(this.commentList, "cmnt");
638 $("#cht_box_close").addClass("cht_close"); 780 $("#cht_box_close").addClass("cht_close");
639 $("#open_ct_box, .c_hide").hide(); 781 $("#open_ct_box, .c_hide").hide();
640 $(".footer-top").removeClass("white-bg"); 782 $(".footer-top").removeClass("white-bg");
641 this.commentList[i].childInput = true; 783 this.commentList[i].childInput = true;
642 this.parentInput = false; 784 this.parentInput = false;
643 this.comment = null; 785 this.comment = null;
644 setTimeout(() => { 786 setTimeout(() => {
645 document.getElementById("childInput").focus(); 787 document.getElementById("childInput").focus();
646 }, 100); 788 }, 100);
647 }, 789 },
648 likeComment(status, id) { 790 likeComment(status, id) {
791 if(!this.usertoken){
792 this.goToLogin();
793 }
649 console.log("===", this.comment); 794 console.log("===", this.comment);
650 var obj = { 795 var obj = {
651 commentId: id, 796 commentId: id,
652 like: status, 797 like: status,
653 }; 798 };
654 axios 799 axios
655 .post("/bounceBoard/like", obj, { 800 .post("/bounceBoard/like", obj, {
656 headers: { 801 headers: {
657 Authorization: "Bearer " + this.usertoken, 802 Authorization: "Bearer " + this.usertoken,
658 }, 803 },
659 }) 804 })
660 .then((response) => { 805 .then((response) => {
661 this.getComment(); 806 this.getComment();
662 console.log(response); 807 console.log(response);
663 }) 808 })
664 .catch((error) => { 809 .catch((error) => {
665 if (error.response) { 810 if (error.response) {
666 this.$toaster.error(error.response.data.message); 811 this.$toaster.error(error.response.data.message);
667 } 812 }
668 }); 813 });
669 }, 814 },
670 getLastcomment(flag, commentArray) { 815 getLastcomment(flag, commentArray) {
671 var finalComment = null; 816 var finalComment = null;
672 var totalMessage = 0; 817 var totalMessage = 0;
673 var name = null; 818 var name = null;
674 commentArray.forEach((comment_) => { 819 commentArray.forEach((comment_) => {
675 if (comment_.comment != null) { 820 if (comment_.comment != null) {
676 name = comment_.user.name; 821 name = comment_.user.name;
677 finalComment = comment_.comment; 822 finalComment = comment_.comment;
678 totalMessage++; 823 totalMessage++;
679 } 824 }
680 }); 825 });
681 if (flag == "count") { 826 if (flag == "count") {
682 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 827 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
683 } else if (flag =="name") { 828 } else if (flag =="name") {
684 return (name = name); 829 return (name = name);
685 } else { 830 } else {
686 return finalComment; 831 return finalComment;
687 } 832 }
688 }, 833 },
689 commentExistCheck(i) { 834 commentExistCheck(i) {
690 console.log(this.commentList[i].comment); 835 console.log(this.commentList[i].comment);
691 var returnValue = false; 836 var returnValue = false;
692 if (this.commentList[i].comment) { 837 if (this.commentList[i].comment) {
693 returnValue = true; 838 returnValue = true;
694 } 839 }
695 return returnValue; 840 return returnValue;
696 }, 841 },
697 }, 842 },
698 }; 843 };
699 // 844 //
700 </script> 845 </script>
701 846
src/components/TwoScreenWithoutInsight.vue
Diff comments   View file @4905524
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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);"> 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);" 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 216
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 <div class="m-screen-hidden"> 293 <div class="m-screen-hidden">
294 <div class="top-area-blank"></div> 294 <div class="top-area-blank"></div>
295 <img 295 <img
296 :src="currentSlideData.payload.metaData.mobileImage1" 296 :src="currentSlideData.payload.metaData.mobileImage1"
297 class="m-screen insight-two-img" 297 class="m-screen insight-two-img"
298 /> 298 />
299 </div> 299 </div>
300 <img 300 <img
301 :src="currentSlideData.payload.metaData.authorImage" 301 :src="currentSlideData.payload.metaData.authorImage"
302 class="user-photo-bottom" 302 class="user-photo-bottom"
303 /> 303 />
304 </div> 304 </div>
305 <!-- mobile screen one --> 305 <!-- mobile screen one -->
306 <div class="mobile-screen-one p-right"> 306 <div class="mobile-screen-one p-right">
307 307
308 <!-- fixed area --> 308 <!-- fixed area -->
309 <div class="m-screen-right"> 309 <div class="m-screen-right">
310 <div class="single-author-li-comments" v-if="commentExistCheck(2)"> 310 <div class="single-author-li-comments" v-if="commentExistCheck(2)">
311 <div class="a-intro-comments"> 311 <div class="a-intro-comments">
312 <p> 312 <p>
313 {{commentList[2].comment}} 313 {{commentList[2].comment}}
314 </p> 314 </p>
315 <ul class="rly-comment-set"> 315 <ul class="rly-comment-set">
316 <!-- like/dislike --> 316 <!-- like/dislike -->
317 <li> 317 <li>
318 <img 318 <img
319 src="../assets/images/heart.svg" 319 src="../assets/images/heart.svg"
320 v-if="commentList[2].like == false" 320 v-if="commentList[2].like == false"
321 @click="likeComment(true, commentList[2]._id)" 321 @click="likeComment(true, commentList[2]._id)"
322 class="cursor-pointer" 322 class="cursor-pointer"
323 /> 323 />
324 <img 324 <img
325 src="../assets/images/purple-heart.png" 325 src="../assets/images/purple-heart.png"
326 v-if="commentList[2].like == true" 326 v-if="commentList[2].like == true"
327 @click="likeComment(false, commentList[2]._id)" 327 @click="likeComment(false, commentList[2]._id)"
328 class="cursor-pointer" 328 class="cursor-pointer"
329 /> 329 />
330 <a href="javascript:void(0);">{{ 330 <a href="javascript:void(0);">{{
331 commentList[2].likes.length 331 commentList[2].likes.length
332 }}</a> 332 }}</a>
333 </li> 333 </li>
334 <!-- like/dislike ends --> 334 <!-- like/dislike ends -->
335 <li> 335 <li>
336 <img src="../assets/images/rply.svg" /> 336 <img src="../assets/images/rply.svg" />
337 <a href="javascript:void(0);" @click="reply_cht_box(2)" 337 <a href="javascript:void(0);" @click="reply_cht_box(2)"
338 >Reply</a 338 >Reply</a
339 > 339 >
340 </li> 340 </li>
341 </ul> 341 </ul>
342 </div> 342 </div>
343 <!-- comments box --> 343 <!-- comments box -->
344 </div> 344 </div>
345 <!-- single author comments --> 345 <!-- single author comments -->
346 <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 346 <div class="single-author-li-comments" v-if="commentExistCheck(3)">
347 <div class="a-intro-comments"> 347 <div class="a-intro-comments">
348 <p> 348 <p>
349 {{commentList[3].comment}} 349 {{commentList[3].comment}}
350 </p> 350 </p>
351 <ul class="rly-comment-set"> 351 <ul class="rly-comment-set">
352 <!-- like/dislike --> 352 <!-- like/dislike -->
353 <li> 353 <li>
354 <img 354 <img
355 src="../assets/images/heart.svg" 355 src="../assets/images/heart.svg"
356 v-if="commentList[3].like == false" 356 v-if="commentList[3].like == false"
357 @click="likeComment(true, commentList[3]._id)" 357 @click="likeComment(true, commentList[3]._id)"
358 class="cursor-pointer" 358 class="cursor-pointer"
359 /> 359 />
360 <img 360 <img
361 src="../assets/images/purple-heart.png" 361 src="../assets/images/purple-heart.png"
362 v-if="commentList[3].like == true" 362 v-if="commentList[3].like == true"
363 @click="likeComment(false, commentList[3]._id)" 363 @click="likeComment(false, commentList[3]._id)"
364 class="cursor-pointer" 364 class="cursor-pointer"
365 /> 365 />
366 <a href="javascript:void(0);">{{ 366 <a href="javascript:void(0);">{{
367 commentList[3].likes.length 367 commentList[3].likes.length
368 }}</a> 368 }}</a>
369 </li> 369 </li>
370 <!-- like/dislike ends --> 370 <!-- like/dislike ends -->
371 <li> 371 <li>
372 <img src="../assets/images/rply.svg" /> 372 <img src="../assets/images/rply.svg" />
373 <a href="javascript:void(0);" @click="reply_cht_box(3)" 373 <a href="javascript:void(0);" @click="reply_cht_box(3)"
374 >Reply</a 374 >Reply</a
375 > 375 >
376 </li> 376 </li>
377 </ul> 377 </ul>
378 </div> 378 </div>
379 <!-- comments box --> 379 <!-- comments box -->
380 </div> 380 </div>
381 <!-- single author comments --> 381 <!-- single author comments -->
382 </div> 382 </div>
383 <!-- comments --> 383 <!-- comments -->
384 <div class="m-screen-hidden"> 384 <div class="m-screen-hidden">
385 <div class="top-area-blank"></div> 385 <div class="top-area-blank"></div>
386 <img 386 <img
387 :src="currentSlideData.payload.metaData.mobileImage2" 387 :src="currentSlideData.payload.metaData.mobileImage2"
388 class="m-screen insight-two-img" 388 class="m-screen insight-two-img"
389 /> 389 />
390 </div> 390 </div>
391 <img 391 <img
392 :src="currentSlideData.payload.metaData.authorImage" 392 :src="currentSlideData.payload.metaData.authorImage"
393 class="user-photo-bottom-r" 393 class="user-photo-bottom-r"
394 /> 394 />
395 </div> 395 </div>
396 <!-- mobile screen Two --> 396 <!-- mobile screen Two -->
397 </div> 397 </div>
398 398
399 <!-- single author comments --> 399 <!-- single author comments -->
400 <div class="footer-nav"> 400 <div class="footer-nav">
401 <div class="footer-top white-bg"> 401 <div class="footer-top white-bg">
402 <div class="row"> 402 <div class="row">
403 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 403 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
404 <div class="row h-100p"> 404 <div class="row h-100p">
405 <div 405 <div
406 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 406 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
407 > 407 >
408 <div class="ft-comments-group testi-photos-ct"> 408 <div class="ft-comments-group testi-photos-ct">
409 <div class="c-with-photos"> 409 <div class="c-with-photos">
410 <span class="count-comments" 410 <span class="count-comments"
411 >{{ getLastcomment("count", commentList) }}+ 411 >{{ getLastcomment("count", commentList) }}+
412 Comments</span 412 Comments</span
413 ><!-- count commets --> 413 ><!-- count commets -->
414 <ul class="comments-photos"> 414 <ul class="comments-photos">
415 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 415 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
416 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 416 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
417 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 417 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
418 </ul> 418 </ul>
419 <!-- comment photos --> 419 <!-- comment photos -->
420 </div> 420 </div>
421 <div class="comments-detail all-c-space"> 421 <div class="comments-detail all-c-space">
422 <span 422 <span
423 >{{ getLastcomment("name", commentList) }} 423 >{{ getLastcomment("name", commentList) }}
424 <a href="javascript:void(0);" @click="open_ct_box" 424 <a href="javascript:void(0);" @click="open_ct_box"
425 >View All</a 425 >View All</a
426 ></span 426 ></span
427 > 427 >
428 <p> 428 <p>
429 <!-- I wonder what the difference between “Dunzo Assistant” 429 <!-- I wonder what the difference between “Dunzo Assistant”
430 and “Pickup and Drop... --> 430 and “Pickup and Drop... -->
431 {{ getLastcomment("msg", commentList) }} 431 {{ getLastcomment("msg", commentList) }}
432 </p> 432 </p>
433 </div> 433 </div>
434 <!-- comments detail --> 434 <!-- comments detail -->
435 </div> 435 </div>
436 <!-- comments Group --> 436 <!-- comments Group -->
437 </div> 437 </div>
438 </div> 438 </div>
439 </div> 439 </div>
440 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 440 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
441 <div class="comment-frm no-c-frm"> 441 <div class="comment-frm no-c-frm">
442 <div class="row"> 442 <div class="row">
443 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 443 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
444 <div class="form-group frm-wdth addfrm-spc"> 444 <div class="form-group frm-wdth addfrm-spc">
445 <input 445 <input
446 type="text" 446 type="text"
447 class="form-control" 447 class="form-control"
448 placeholder="Something on your mind?" 448 placeholder="Something on your mind?"
449 id="open_ct_box" 449 id="open_ct_box"
450 v-model="comment" 450 v-model="comment"
451 /> 451 />
452 </div> 452 </div>
453 </div> 453 </div>
454 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 454 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
455 <a 455 <a
456 href="javascript:void(0);" 456 href="javascript:void(0);"
457 @click="createComment" 457 @click="createComment"
458 class="add-comment" 458 class="add-comment"
459 ><img src="../assets/images/add-comment.svg" /> 459 ><img src="../assets/images/add-comment.svg" />
460 Comment</a 460 Comment</a
461 > 461 >
462 </div> 462 </div>
463 </div> 463 </div>
464 <!-- comment from --> 464 <!-- comment from -->
465 </div> 465 </div>
466 </div> 466 </div>
467 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 467 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
468 <ul class="top-intro-bt"> 468 <ul class="top-intro-bt">
469 <li> 469 <li>
470 <a href="javascript:void(0);" @click="goBack" 470 <a href="javascript:void(0);" @click="goBack"
471 ><img src="../assets/images/skip-prev.svg" /> Prev</a 471 ><img src="../assets/images/skip-prev.svg" /> Prev</a
472 > 472 >
473 </li> 473 </li>
474 <li> 474 <li>
475 <a href="javascript:void(0);" @click="goNext" 475 <a href="javascript:void(0);" @click="goNext"
476 ><img src="../assets/images/skip-next.svg" /> Skip to next 476 ><img src="../assets/images/skip-next.svg" /> Skip to next
477 slide</a 477 slide</a
478 > 478 >
479 </li> 479 </li>
480 </ul> 480 </ul>
481 </div> 481 </div>
482 <!-- buttons list --> 482 <!-- buttons list -->
483 </div> 483 </div>
484 </div> 484 </div>
485 <!-- footer top --> 485 <!-- footer top -->
486 <div class="footer-bottom"> 486 <div class="footer-bottom">
487 <ul> 487 <ul>
488 <li class="active"></li> 488 <li class="active"></li>
489 <li></li> 489 <li></li>
490 </ul> 490 </ul>
491 </div> 491 </div>
492 <!-- footer top --> 492 <!-- footer top -->
493 </div> 493 </div>
494 <!-- footer --> 494 <!-- footer -->
495 </div> 495 </div>
496 <!-- body wrapper --> 496 <!-- body wrapper -->
497 </div> 497 </div>
498 <!-- main wrapper --> 498 <!-- main wrapper -->
499 </main> 499 </main>
500 </template> 500 </template>
501 501
502 <script> 502 <script>
503 import Vue from "vue"; 503 import Vue from "vue";
504 import router from "../router"; 504 import router from "../router";
505 import axios from "axios"; 505 import axios from "axios";
506 import moment from 'moment'; 506 import moment from 'moment';
507 import Header from "./Header"; 507 import Header from "./Header";
508 508
509 export default { 509 export default {
510 components: { 510 components: {
511 Header: Header, 511 Header: Header,
512 }, 512 },
513 name: "TwoScreenWithoutInsight", 513 name: "TwoScreenWithoutInsight",
514 514
515 data() { 515 data() {
516 return { 516 return {
517 allSlide: [], 517 allSlide: [],
518 currentSlideIndex: null, 518 currentSlideIndex: null,
519 currentSlideData: null, 519 currentSlideData: null,
520 // 520 //
521 usertoken: null, 521 usertoken: null,
522 commentList: [], 522 commentList: [],
523 comment: null, 523 comment: null,
524 parentInput: true, 524 parentInput: true,
525 }; 525 };
526 }, 526 },
527 mounted() { 527 mounted() {
528 var allSlideData = localStorage.getItem( 528 var allSlideData = localStorage.getItem(
529 "spotlight_slide" + this.$route.params.caseStudyId 529 "spotlight_slide" + this.$route.params.caseStudyId
530 ); 530 );
531 if (allSlideData) { 531 if (allSlideData) {
532 this.allSlide = JSON.parse(allSlideData); 532 this.allSlide = JSON.parse(allSlideData);
533 this.getCurrentSlideData(); 533 this.getCurrentSlideData();
534 }else{ 534 }else{
535 this.$router.push("/login"); 535 this.getCurrentSlideData();
536
536 } 537 }
537 var userdata = localStorage.getItem("spotlight_usertoken"); 538 var userdata = localStorage.getItem("spotlight_usertoken");
538 if (userdata) { 539 if (userdata) {
539 userdata = JSON.parse(userdata); 540 userdata = JSON.parse(userdata);
540 this.usertoken = userdata.token; 541 this.usertoken = userdata.token;
541 this.getComment(); 542 this.getComment();
543 }else{
544 this.getComment();
542 } 545 }
543 }, 546 },
544 methods: { 547 methods: {
548
549 generatecaseStudies(){
550 axios
551 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
552 headers: {
553 Authorization: "Bearer " + this.usertoken,
554 },
555 })
556 .then((response) => {
557
558 console.log('response',response.data.data);
559 this.openStudy(response.data.data);
560 })
561 .catch((error) => console.log(error));
562 },
563
564
565
566 openStudy(payload) {
567 console.log("payload-", payload);
568 payload.intro.date = payload.createdAt;
569 payload.intro.focusPoint = payload.focusAreas;
570 axios
571 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
572 headers: {
573 Authorization: "Bearer " + this.usertoken,
574 },
575 })
576 .then((response) => {
577 this.createSlide(payload, response.data.data);
578 })
579 .catch((error) => console.log(error));
580 },
581
582 createSlide(payload, slides) {
583 var finalSlides = [];
584 slides.forEach((slides_) => {
585 var url = this.assignRoutes(slides_.templateId);
586 var obj = {
587 forward: true,
588 backward: true,
589 ur: url,
590 slideId: slides_._id,
591 caseStudyId: slides_.caseStudyId,
592 payload: {
593 metaData: slides_.metaData,
594 comments: slides_.comments,
595 insight: slides_.insight ? slides_.insight : null,
596 },
597 };
598 // slides_
599 finalSlides.push(obj);
600 });
601 console.log("payload", payload);
602 // add first slide at begining
603 finalSlides.unshift({
604 forward: true,
605 backward: false,
606 ur: "EpisodeIntro",
607 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
608 caseStudyId: payload._id,
609 payload: {
610 metaData: payload.intro,
611 comments: [],
612 },
613 });
614 finalSlides.push({
615 forward: true,
616 backward: false,
617 ur: "Outro",
618 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
619 caseStudyId: payload._id,
620 payload: {
621 metaData: payload.outro,
622 comments: [],
623 },
624 });
625
626 console.log(finalSlides);
627 console.log("payload", payload);
628 localStorage.setItem(
629 "spotlight_slide" + payload._id,
630 JSON.stringify(finalSlides)
631 );
632 this.allSlide = finalSlides;
633 this.getCurrentSlideData();
634 },
635 assignRoutes(tempId) {
636 // /episode-intro
637 // /outro
638 var routes = [
639 {
640 url: "AuthorIntro",
641 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
642 },
643 {
644 url: "NoScreenshotSingleAuthor",
645 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
646 },
647 {
648 url: "SingleMobileScreenInsightTwo",
649 tempId: "T3_cqNIf7tuqL4jyON63dA7",
650 },
651 {
652 url: "TwoScreenWithoutInsight",
653 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
654 },
655 {
656 url: "noscreenshotSingleautho",
657 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
658 },
659 {
660 url: "SingleMobileScreenInsightOne",
661 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
662 },
663 {
664 url: "TwoScreenWithInsight",
665 tempId: "T7_za3c3sYgx7bVvtKzasdf",
666 },
667 {
668 url: "AuthorReadingNow",
669 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
670 },
671 {
672 url: "AuthorReadingBreak",
673 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
674 },
675 ];
676 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
677 return routes[i].url;
678 },
679
545 getCurrentSlideData() { 680 getCurrentSlideData() {
546 var i = this.allSlide.findIndex( 681 var i = this.allSlide.findIndex(
547 (slide_) => slide_.slideId == this.$route.params.slideId 682 (slide_) => slide_.slideId == this.$route.params.slideId
548 ); 683 );
549 this.currentSlideIndex = i; 684 this.currentSlideIndex = i;
550 this.currentSlideData = this.allSlide[i]; 685 this.currentSlideData = this.allSlide[i];
551 console.log(this.currentSlideData, "this.usertoken", this.usertoken); 686 console.log(this.currentSlideData, "this.usertoken", this.usertoken);
552 console.log("currentSlideData", this.currentSlideData); 687 console.log("currentSlideData", this.currentSlideData);
553 }, 688 },
554 goNext() { 689 goNext() {
555 this.currentSlideIndex++; 690 this.currentSlideIndex++;
556 this.$router.push({ 691 this.$router.push({
557 name: this.allSlide[this.currentSlideIndex].ur, 692 name: this.allSlide[this.currentSlideIndex].ur,
558 params: { 693 params: {
559 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 694 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
560 slideId: this.allSlide[this.currentSlideIndex].slideId, 695 slideId: this.allSlide[this.currentSlideIndex].slideId,
561 }, 696 },
562 }); 697 });
563 }, 698 },
564 goBack() { 699 goBack() {
565 this.currentSlideIndex--; 700 this.currentSlideIndex--;
566 this.$router.push({ 701 this.$router.push({
567 name: this.allSlide[this.currentSlideIndex].ur, 702 name: this.allSlide[this.currentSlideIndex].ur,
568 params: { 703 params: {
569 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 704 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
570 slideId: this.allSlide[this.currentSlideIndex].slideId, 705 slideId: this.allSlide[this.currentSlideIndex].slideId,
571 }, 706 },
572 }); 707 });
573 }, 708 },
574 709
575 createComment() { 710 createComment() {
576 console.log("===", this.comment); 711 console.log("===", this.comment);
577 var obj = { 712 var obj = {
578 caseStudyId: this.currentSlideData.caseStudyId, 713 caseStudyId: this.currentSlideData.caseStudyId,
579 slideId: this.currentSlideData.slideId, 714 slideId: this.currentSlideData.slideId,
580 comment: this.comment, 715 comment: this.comment,
581 716
582 }; 717 };
583 axios 718 axios
584 .post("/bounceBoard/comment", obj, { 719 .post("/bounceBoard/comment", obj, {
585 headers: { 720 headers: {
586 Authorization: "Bearer " + this.usertoken, 721 Authorization: "Bearer " + this.usertoken,
587 }, 722 },
588 }) 723 })
589 .then((response) => { 724 .then((response) => {
590 this.comment = null; 725 this.comment = null;
591 this.getComment(); 726 this.getComment();
592 console.log(response); 727 console.log(response);
593 }) 728 })
594 .catch((error) => { 729 .catch((error) => {
595 if (error.response) { 730 if (error.response) {
596 this.$toaster.error(error.response.data.message); 731 this.$toaster.error(error.response.data.message);
597 } 732 }
598 }); 733 });
599 }, 734 },
600 createChildComment(cmnt) { 735 createChildComment(cmnt) {
601 console.log(cmnt,"===", this.comment); 736 console.log(cmnt,"===", this.comment);
602 var obj = { 737 var obj = {
603 caseStudyId: this.currentSlideData.caseStudyId, 738 caseStudyId: this.currentSlideData.caseStudyId,
604 slideId: this.currentSlideData.slideId, 739 slideId: this.currentSlideData.slideId,
605 comment: this.comment, 740 comment: this.comment,
606 parentId: cmnt._id, 741 parentId: cmnt._id,
607 742
608 }; 743 };
609 axios 744 axios
610 .post("/bounceBoard/comment", obj, { 745 .post("/bounceBoard/comment", obj, {
611 headers: { 746 headers: {
612 Authorization: "Bearer " + this.usertoken, 747 Authorization: "Bearer " + this.usertoken,
613 }, 748 },
614 }) 749 })
615 .then((response) => { 750 .then((response) => {
616 this.comment = null; 751 this.comment = null;
617 this.discardRply(cmnt); 752 this.discardRply(cmnt);
618 this.getComment(); 753 this.getComment();
619 console.log(response); 754 console.log(response);
620 }) 755 })
621 .catch((error) => { 756 .catch((error) => {
622 if (error.response) { 757 if (error.response) {
623 this.$toaster.error(error.response.data.message); 758 this.$toaster.error(error.response.data.message);
624 } 759 }
625 }); 760 });
626 }, 761 },
627 getComment() { 762 getComment() {
628 axios 763 axios
629 .get( 764 .get(
630 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 765 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
631 { 766 {
632 headers: { 767 headers: {
633 Authorization: "Bearer " + this.usertoken, 768 Authorization: "Bearer " + this.usertoken,
634 }, 769 },
635 } 770 }
636 ) 771 )
637 .then((response) => { 772 .then((response) => {
638 console.log(response.data); 773 console.log(response.data);
639 var comments = []; 774 var comments = [];
640 var keys = Object.keys(response.data.data) 775 var keys = Object.keys(response.data.data)
641 response.data.data 776 response.data.data
642 keys.forEach((key_) => { 777 keys.forEach((key_) => {
643 comments.push(response.data.data[key_]) 778 comments.push(response.data.data[key_])
644 }); 779 });
645 comments.forEach((coment_)=>{ 780 comments.forEach((coment_)=>{
646 coment_.childInput = false; 781 coment_.childInput = false;
647 }); 782 });
648 console.log("comments",comments) 783 console.log("comments",comments)
649 this.commentList = comments; 784 this.commentList = comments;
650 }) 785 })
651 .catch((error) => console.log(error)); 786 .catch((error) => console.log(error));
652 }, 787 },
653 dateGenerator(curreDate){ 788 dateGenerator(curreDate){
654 var todayDate = moment(new Date(), "DD.MM.YYYY"); 789 var todayDate = moment(new Date(), "DD.MM.YYYY");
655 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 790 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
656 var result = todayDate.diff(endDate, 'days'); 791 var result = todayDate.diff(endDate, 'days');
657 return result; 792 return result;
658 }, 793 },
659 goToLogin() { 794 goToLogin() {
660 this.$router.push("/login"); 795 this.$router.push("/login");
796 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
661 }, 797 },
662 goToSignUp() { 798 goToSignUp() {
663 this.$router.push("/"); 799 this.$router.push("/");
664 }, 800 },
665 chtbox_close() { 801 chtbox_close() {
666 $("#cht_box_close").removeClass("cht_close"); 802 $("#cht_box_close").removeClass("cht_close");
667 $("#open_ct_box, .c_hide").show(); 803 $("#open_ct_box, .c_hide").show();
668 $(".footer-top").addClass("white-bg"); 804 $(".footer-top").addClass("white-bg");
669 }, 805 },
670 open_ct_box() { 806 open_ct_box() {
807 if(!this.usertoken){
808 this.goToLogin();
809 }
671 $("#cht_box_close").addClass("cht_close"); 810 $("#cht_box_close").addClass("cht_close");
672 $("#open_ct_box, .c_hide").hide(); 811 $("#open_ct_box, .c_hide").hide();
673 $(".footer-top").removeClass("white-bg"); 812 $(".footer-top").removeClass("white-bg");
674 }, 813 },
675 eachRply(cmnt) { 814 eachRply(cmnt) {
676 cmnt.childInput = true; 815 cmnt.childInput = true;
677 this.parentInput = false; 816 this.parentInput = false;
678 this.comment = null; 817 this.comment = null;
679 setTimeout(() => { 818 setTimeout(() => {
680 document.getElementById("childInput").focus(); 819 document.getElementById("childInput").focus();
681 }, 100); 820 }, 100);
682 }, 821 },
683 discardRply(cmnt) { 822 discardRply(cmnt) {
684 cmnt.childInput = false; 823 cmnt.childInput = false;
685 this.parentInput = true; 824 this.parentInput = true;
686 this.comment = null; 825 this.comment = null;
687 }, 826 },
688 reply_cht_box(i) { 827 reply_cht_box(i) {
828 if(!this.usertoken){
829 this.goToLogin();
830 }
689 console.log(this.commentList, "cmnt"); 831 console.log(this.commentList, "cmnt");
690 $("#cht_box_close").addClass("cht_close"); 832 $("#cht_box_close").addClass("cht_close");
691 $("#open_ct_box, .c_hide").hide(); 833 $("#open_ct_box, .c_hide").hide();
692 $(".footer-top").removeClass("white-bg"); 834 $(".footer-top").removeClass("white-bg");
693 this.commentList[i].childInput = true; 835 this.commentList[i].childInput = true;
694 this.parentInput = false; 836 this.parentInput = false;
695 this.comment = null; 837 this.comment = null;
696 setTimeout(() => { 838 setTimeout(() => {
697 document.getElementById("childInput").focus(); 839 document.getElementById("childInput").focus();
698 }, 100); 840 }, 100);
699 }, 841 },
700 likeComment(status, id) { 842 likeComment(status, id) {
843 if(!this.usertoken){
844 this.goToLogin();
845 }
701 console.log("===", this.comment); 846 console.log("===", this.comment);
702 var obj = { 847 var obj = {
703 commentId: id, 848 commentId: id,
704 like: status, 849 like: status,
705 }; 850 };
706 axios 851 axios
707 .post("/bounceBoard/like", obj, { 852 .post("/bounceBoard/like", obj, {
708 headers: { 853 headers: {
709 Authorization: "Bearer " + this.usertoken, 854 Authorization: "Bearer " + this.usertoken,
710 }, 855 },
711 }) 856 })
712 .then((response) => { 857 .then((response) => {
713 this.getComment(); 858 this.getComment();
714 console.log(response); 859 console.log(response);
715 }) 860 })
716 .catch((error) => { 861 .catch((error) => {
717 if (error.response) { 862 if (error.response) {
718 this.$toaster.error(error.response.data.message); 863 this.$toaster.error(error.response.data.message);
719 } 864 }
720 }); 865 });
721 }, 866 },
722 getLastcomment(flag, commentArray) { 867 getLastcomment(flag, commentArray) {
723 var finalComment = null; 868 var finalComment = null;
724 var totalMessage = 0; 869 var totalMessage = 0;
725 var name = null; 870 var name = null;
726 commentArray.forEach((comment_) => { 871 commentArray.forEach((comment_) => {
727 if (comment_.comment != null) { 872 if (comment_.comment != null) {
728 name = comment_.user.name; 873 name = comment_.user.name;
729 finalComment = comment_.comment; 874 finalComment = comment_.comment;
730 totalMessage++; 875 totalMessage++;
731 } 876 }
732 }); 877 });
733 if (flag == "count") { 878 if (flag == "count") {
734 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 879 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
735 } else if (flag =="name") { 880 } else if (flag =="name") {
736 return (name = name); 881 return (name = name);
737 } else { 882 } else {
738 return finalComment; 883 return finalComment;
739 } 884 }
740 }, 885 },
741 commentExistCheck(i) { 886 commentExistCheck(i) {
742 console.log(this.commentList[i].comment); 887 console.log(this.commentList[i].comment);
743 var returnValue = false; 888 var returnValue = false;
744 if (this.commentList[i].comment) { 889 if (this.commentList[i].comment) {
745 returnValue = true; 890 returnValue = true;
746 } 891 }
747 return returnValue; 892 return returnValue;
748 }, 893 },
749 }, 894 },
750 }; 895 };
751 // 896 //
752 </script> 897 </script>
753 898
src/components/noscreenshotSingleautho.vue
Diff comments   View file @4905524
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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);"> 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="javasript:void(0);" 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="javasript:void(0);" 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="javasript:void(0);"> 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="javasript:void(0);" 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 }else{ 447 }else{
448 this.$router.push("/login"); 448 this.getCurrentSlideData();
449
449 } 450 }
450 var userdata = localStorage.getItem("spotlight_usertoken"); 451 var userdata = localStorage.getItem("spotlight_usertoken");
451 if (userdata) { 452 if (userdata) {
452 userdata = JSON.parse(userdata); 453 userdata = JSON.parse(userdata);
453 this.usertoken = userdata.token; 454 this.usertoken = userdata.token;
454 this.getComment(); 455 this.getComment();
456 }else{
457 this.getComment();
455 } 458 }
456 }, 459 },
457 methods: { 460 methods: {
461
462 generatecaseStudies(){
463 axios
464 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
465 headers: {
466 Authorization: "Bearer " + this.usertoken,
467 },
468 })
469 .then((response) => {
470
471 console.log('response',response.data.data);
472 this.openStudy(response.data.data);
473 })
474 .catch((error) => console.log(error));
475 },
476
477
478
479 openStudy(payload) {
480 console.log("payload-", payload);
481 payload.intro.date = payload.createdAt;
482 payload.intro.focusPoint = payload.focusAreas;
483 axios
484 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
485 headers: {
486 Authorization: "Bearer " + this.usertoken,
487 },
488 })
489 .then((response) => {
490 this.createSlide(payload, response.data.data);
491 })
492 .catch((error) => console.log(error));
493 },
494
495 createSlide(payload, slides) {
496 var finalSlides = [];
497 slides.forEach((slides_) => {
498 var url = this.assignRoutes(slides_.templateId);
499 var obj = {
500 forward: true,
501 backward: true,
502 ur: url,
503 slideId: slides_._id,
504 caseStudyId: slides_.caseStudyId,
505 payload: {
506 metaData: slides_.metaData,
507 comments: slides_.comments,
508 insight: slides_.insight ? slides_.insight : null,
509 },
510 };
511 // slides_
512 finalSlides.push(obj);
513 });
514 console.log("payload", payload);
515 // add first slide at begining
516 finalSlides.unshift({
517 forward: true,
518 backward: false,
519 ur: "EpisodeIntro",
520 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
521 caseStudyId: payload._id,
522 payload: {
523 metaData: payload.intro,
524 comments: [],
525 },
526 });
527 finalSlides.push({
528 forward: true,
529 backward: false,
530 ur: "Outro",
531 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
532 caseStudyId: payload._id,
533 payload: {
534 metaData: payload.outro,
535 comments: [],
536 },
537 });
538
539 console.log(finalSlides);
540 console.log("payload", payload);
541 localStorage.setItem(
542 "spotlight_slide" + payload._id,
543 JSON.stringify(finalSlides)
544 );
545 this.allSlide = finalSlides;
546 this.getCurrentSlideData();
547 },
548 assignRoutes(tempId) {
549 // /episode-intro
550 // /outro
551 var routes = [
552 {
553 url: "AuthorIntro",
554 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
555 },
556 {
557 url: "NoScreenshotSingleAuthor",
558 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
559 },
560 {
561 url: "SingleMobileScreenInsightTwo",
562 tempId: "T3_cqNIf7tuqL4jyON63dA7",
563 },
564 {
565 url: "TwoScreenWithoutInsight",
566 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
567 },
568 {
569 url: "noscreenshotSingleautho",
570 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
571 },
572 {
573 url: "SingleMobileScreenInsightOne",
574 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
575 },
576 {
577 url: "TwoScreenWithInsight",
578 tempId: "T7_za3c3sYgx7bVvtKzasdf",
579 },
580 {
581 url: "AuthorReadingNow",
582 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
583 },
584 {
585 url: "AuthorReadingBreak",
586 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
587 },
588 ];
589 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
590 return routes[i].url;
591 },
592
458 getCurrentSlideData() { 593 getCurrentSlideData() {
459 var i = this.allSlide.findIndex( 594 var i = this.allSlide.findIndex(
460 (slide_) => slide_.slideId == this.$route.params.slideId 595 (slide_) => slide_.slideId == this.$route.params.slideId
461 ); 596 );
462 this.currentSlideIndex = i; 597 this.currentSlideIndex = i;
463 this.currentSlideData = this.allSlide[i]; 598 this.currentSlideData = this.allSlide[i];
464 console.log("currentSlideData", this.currentSlideData); 599 console.log("currentSlideData", this.currentSlideData);
465 }, 600 },
466 goNext() { 601 goNext() {
467 this.currentSlideIndex++; 602 this.currentSlideIndex++;
468 this.$router.push({ 603 this.$router.push({
469 name: this.allSlide[this.currentSlideIndex].ur, 604 name: this.allSlide[this.currentSlideIndex].ur,
470 params: { 605 params: {
471 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 606 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
472 slideId: this.allSlide[this.currentSlideIndex].slideId, 607 slideId: this.allSlide[this.currentSlideIndex].slideId,
473 }, 608 },
474 }); 609 });
475 }, 610 },
476 goBack() { 611 goBack() {
477 this.currentSlideIndex--; 612 this.currentSlideIndex--;
478 this.$router.push({ 613 this.$router.push({
479 name: this.allSlide[this.currentSlideIndex].ur, 614 name: this.allSlide[this.currentSlideIndex].ur,
480 params: { 615 params: {
481 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 616 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
482 slideId: this.allSlide[this.currentSlideIndex].slideId, 617 slideId: this.allSlide[this.currentSlideIndex].slideId,
483 }, 618 },
484 }); 619 });
485 }, 620 },
486 createComment() { 621 createComment() {
487 console.log("===", this.comment); 622 console.log("===", this.comment);
488 var obj = { 623 var obj = {
489 caseStudyId: this.currentSlideData.caseStudyId, 624 caseStudyId: this.currentSlideData.caseStudyId,
490 slideId: this.currentSlideData.slideId, 625 slideId: this.currentSlideData.slideId,
491 comment: this.comment, 626 comment: this.comment,
492 627
493 }; 628 };
494 axios 629 axios
495 .post("/bounceBoard/comment", obj, { 630 .post("/bounceBoard/comment", obj, {
496 headers: { 631 headers: {
497 Authorization: "Bearer " + this.usertoken, 632 Authorization: "Bearer " + this.usertoken,
498 }, 633 },
499 }) 634 })
500 .then((response) => { 635 .then((response) => {
501 this.comment = null; 636 this.comment = null;
502 this.getComment(); 637 this.getComment();
503 console.log(response); 638 console.log(response);
504 }) 639 })
505 .catch((error) => { 640 .catch((error) => {
506 if (error.response) { 641 if (error.response) {
507 this.$toaster.error(error.response.data.message); 642 this.$toaster.error(error.response.data.message);
508 } 643 }
509 }); 644 });
510 }, 645 },
511 createChildComment(cmnt) { 646 createChildComment(cmnt) {
512 console.log(cmnt,"===", this.comment); 647 console.log(cmnt,"===", this.comment);
513 var obj = { 648 var obj = {
514 caseStudyId: this.currentSlideData.caseStudyId, 649 caseStudyId: this.currentSlideData.caseStudyId,
515 slideId: this.currentSlideData.slideId, 650 slideId: this.currentSlideData.slideId,
516 comment: this.comment, 651 comment: this.comment,
517 parentId: cmnt._id, 652 parentId: cmnt._id,
518 653
519 }; 654 };
520 axios 655 axios
521 .post("/bounceBoard/comment", obj, { 656 .post("/bounceBoard/comment", obj, {
522 headers: { 657 headers: {
523 Authorization: "Bearer " + this.usertoken, 658 Authorization: "Bearer " + this.usertoken,
524 }, 659 },
525 }) 660 })
526 .then((response) => { 661 .then((response) => {
527 this.comment = null; 662 this.comment = null;
528 this.discardRply(cmnt); 663 this.discardRply(cmnt);
529 this.getComment(); 664 this.getComment();
530 console.log(response); 665 console.log(response);
531 }) 666 })
532 .catch((error) => { 667 .catch((error) => {
533 if (error.response) { 668 if (error.response) {
534 this.$toaster.error(error.response.data.message); 669 this.$toaster.error(error.response.data.message);
535 } 670 }
536 }); 671 });
537 }, 672 },
538 getComment() { 673 getComment() {
539 axios 674 axios
540 .get( 675 .get(
541 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 676 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
542 { 677 {
543 headers: { 678 headers: {
544 Authorization: "Bearer " + this.usertoken, 679 Authorization: "Bearer " + this.usertoken,
545 }, 680 },
546 } 681 }
547 ) 682 )
548 .then((response) => { 683 .then((response) => {
549 console.log(response.data); 684 console.log(response.data);
550 var comments = []; 685 var comments = [];
551 var keys = Object.keys(response.data.data) 686 var keys = Object.keys(response.data.data)
552 response.data.data 687 response.data.data
553 keys.forEach((key_) => { 688 keys.forEach((key_) => {
554 comments.push(response.data.data[key_]) 689 comments.push(response.data.data[key_])
555 }); 690 });
556 comments.forEach((coment_)=>{ 691 comments.forEach((coment_)=>{
557 coment_.childInput = false; 692 coment_.childInput = false;
558 }); 693 });
559 console.log("comments",comments) 694 console.log("comments",comments)
560 this.commentList = comments; 695 this.commentList = comments;
561 }) 696 })
562 .catch((error) => console.log(error)); 697 .catch((error) => console.log(error));
563 }, 698 },
564 dateGenerator(curreDate){ 699 dateGenerator(curreDate){
565 var todayDate = moment(new Date(), "DD.MM.YYYY"); 700 var todayDate = moment(new Date(), "DD.MM.YYYY");
566 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 701 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
567 var result = todayDate.diff(endDate, 'days'); 702 var result = todayDate.diff(endDate, 'days');
568 return result; 703 return result;
569 }, 704 },
570 goToLogin() { 705 goToLogin() {
571 this.$router.push("/login"); 706 this.$router.push("/login");
707 localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));
572 }, 708 },
573 goToSignUp() { 709 goToSignUp() {
574 this.$router.push("/"); 710 this.$router.push("/");
575 }, 711 },
576 open(url){ 712 open(url){
577 window.open(url); 713 window.open(url);
578 }, 714 },
579 chtbox_close() { 715 chtbox_close() {
580 $("#cht_box_close").removeClass("cht_close"); 716 $("#cht_box_close").removeClass("cht_close");
581 $("#open_ct_box, .c_hide").show(); 717 $("#open_ct_box, .c_hide").show();
582 $(".footer-top").addClass("white-bg"); 718 $(".footer-top").addClass("white-bg");
583 }, 719 },
584 open_ct_box() { 720 open_ct_box() {
721 if(!this.usertoken){
722 this.goToLogin();
723 }
585 $("#cht_box_close").addClass("cht_close"); 724 $("#cht_box_close").addClass("cht_close");
586 $("#open_ct_box, .c_hide").hide(); 725 $("#open_ct_box, .c_hide").hide();
587 $(".footer-top").removeClass("white-bg"); 726 $(".footer-top").removeClass("white-bg");
588 }, 727 },
589 eachRply(cmnt) { 728 eachRply(cmnt) {
590 cmnt.childInput = true; 729 cmnt.childInput = true;
591 this.parentInput = false; 730 this.parentInput = false;
592 this.comment = null; 731 this.comment = null;
593 setTimeout(() => { 732 setTimeout(() => {
594 document.getElementById("childInput").focus(); 733 document.getElementById("childInput").focus();
595 }, 100); 734 }, 100);
596 }, 735 },
597 discardRply(cmnt) { 736 discardRply(cmnt) {
598 cmnt.childInput = false; 737 cmnt.childInput = false;
599 this.parentInput = true; 738 this.parentInput = true;
600 this.comment = null; 739 this.comment = null;
601 }, 740 },
602 reply_cht_box(i) { 741 reply_cht_box(i) {
742 if(!this.usertoken){
743 this.goToLogin();
744 }
603 console.log(this.commentList, "cmnt"); 745 console.log(this.commentList, "cmnt");
604 $("#cht_box_close").addClass("cht_close"); 746 $("#cht_box_close").addClass("cht_close");
605 $("#open_ct_box, .c_hide").hide(); 747 $("#open_ct_box, .c_hide").hide();
606 $(".footer-top").removeClass("white-bg"); 748 $(".footer-top").removeClass("white-bg");
607 this.commentList[i].childInput = true; 749 this.commentList[i].childInput = true;
608 this.parentInput = false; 750 this.parentInput = false;
609 this.comment = null; 751 this.comment = null;
610 setTimeout(() => { 752 setTimeout(() => {
611 document.getElementById("childInput").focus(); 753 document.getElementById("childInput").focus();
612 }, 100); 754 }, 100);
613 }, 755 },
614 likeComment(status, id) { 756 likeComment(status, id) {
757
758 if(!this.usertoken){
759 this.goToLogin();
760 }
615 console.log("===", this.comment); 761 console.log("===", this.comment);
616 var obj = { 762 var obj = {
617 commentId: id, 763 commentId: id,
618 like: status, 764 like: status,
619 }; 765 };
620 axios 766 axios
621 .post("/bounceBoard/like", obj, { 767 .post("/bounceBoard/like", obj, {
622 headers: { 768 headers: {
623 Authorization: "Bearer " + this.usertoken, 769 Authorization: "Bearer " + this.usertoken,
624 }, 770 },
625 }) 771 })
626 .then((response) => { 772 .then((response) => {
627 this.getComment(); 773 this.getComment();
628 console.log(response); 774 console.log(response);
629 }) 775 })
630 .catch((error) => { 776 .catch((error) => {
631 if (error.response) { 777 if (error.response) {
632 this.$toaster.error(error.response.data.message); 778 this.$toaster.error(error.response.data.message);
633 } 779 }
634 }); 780 });
635 }, 781 },
636 getLastcomment(flag, commentArray) { 782 getLastcomment(flag, commentArray) {
637 var finalComment = null; 783 var finalComment = null;
638 var totalMessage = 0; 784 var totalMessage = 0;
639 var name = null; 785 var name = null;
640 commentArray.forEach((comment_) => { 786 commentArray.forEach((comment_) => {
641 if (comment_.comment != null) { 787 if (comment_.comment != null) {
642 name = comment_.user.name; 788 name = comment_.user.name;
643 finalComment = comment_.comment; 789 finalComment = comment_.comment;
644 totalMessage++; 790 totalMessage++;
645 } 791 }
646 }); 792 });
647 if (flag == "count") { 793 if (flag == "count") {
648 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 794 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
649 } else if (flag =="name") { 795 } else if (flag =="name") {
650 return (name = name); 796 return (name = name);
651 } else { 797 } else {
652 return finalComment; 798 return finalComment;
653 } 799 }
654 }, 800 },
655 commentExistCheck(i) { 801 commentExistCheck(i) {
656 console.log(this.commentList[i].comment); 802 console.log(this.commentList[i].comment);
657 var returnValue = false; 803 var returnValue = false;
658 if (this.commentList[i].comment) { 804 if (this.commentList[i].comment) {
659 returnValue = true; 805 returnValue = true;
660 } 806 }
661 return returnValue; 807 return returnValue;
662 }, 808 },
663 }, 809 },
664 }; 810 };
665 // 811 //
666 </script> 812 </script>
667 813
src/components/outro.vue
Diff comments   View file @4905524
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 <div class="thanks-wrapper"> 8 <div class="thanks-wrapper">
9 <div class="thanks-l-wrp"> 9 <div class="thanks-l-wrp">
10 <div class="thanks-pay-wrp"> 10 <div class="thanks-pay-wrp">
11 <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> 11 <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->
12 <img 12 <img
13 :src="currentSlideData.payload.metaData.authorImage[0]" 13 :src="currentSlideData.payload.metaData.authorImage[0]"
14 class="thanks-img" 14 class="thanks-img"
15 /> 15 />
16 <div class="blacktext-wrp"> 16 <div class="blacktext-wrp">
17 CHeck out other case studies here 17 CHeck out other case studies here
18 <img src="../assets/images/arrow-bottom.svg" /> 18 <img src="../assets/images/arrow-bottom.svg" />
19 </div> 19 </div>
20 <ul class=""> 20 <ul class="">
21 <!-- <li v-for="(study, i) in caseStudies" :key="i"> 21 <!-- <li v-for="(study, i) in caseStudies" :key="i">
22 <a href=""> 22 <a href="">
23 <img :src="study.intro.logoURL" /> 23 <img :src="study.intro.logoURL" />
24 <span 24 <span
25 ><img src="../assets/images/p-eye.svg" /> 0 Views</span 25 ><img src="../assets/images/p-eye.svg" /> 0 Views</span
26 > 26 >
27 </a> 27 </a>
28 </li> --> 28 </li> -->
29 29
30 <!-- <li class="payments-spc-57"> 30 <!-- <li class="payments-spc-57">
31 <a href=""> 31 <a href="">
32 <img src="../assets/images/g-pay.svg" /> 32 <img src="../assets/images/g-pay.svg" />
33 <span 33 <span
34 ><img src="../assets/images/p-eye.svg" /> 19.4k 34 ><img src="../assets/images/p-eye.svg" /> 19.4k
35 Views</span 35 Views</span
36 > 36 >
37 </a> 37 </a>
38 </li> 38 </li>
39 <li> 39 <li>
40 <a href=""> 40 <a href="">
41 <img src="../assets/images/bb.svg" /> 41 <img src="../assets/images/bb.svg" />
42 <span 42 <span
43 ><img src="../assets/images/p-eye.svg" /> 19.4k 43 ><img src="../assets/images/p-eye.svg" /> 19.4k
44 Views</span 44 Views</span
45 > 45 >
46 </a> 46 </a>
47 </li> --> 47 </li> -->
48 </ul> 48 </ul>
49 <!-- payments options --> 49 <!-- payments options -->
50 <!-- <ul class=""> 50 <!-- <ul class="">
51 <li> 51 <li>
52 <a href=""> 52 <a href="">
53 <img src="../assets/images/payment.svg" /> 53 <img src="../assets/images/payment.svg" />
54 <span 54 <span
55 ><img src="../assets/images/p-eye.svg" /> 19.4k 55 ><img src="../assets/images/p-eye.svg" /> 19.4k
56 Views</span 56 Views</span
57 > 57 >
58 </a> 58 </a>
59 </li> 59 </li>
60 <li class="payments-spc-57"> 60 <li class="payments-spc-57">
61 <a href=""> 61 <a href="">
62 <img src="../assets/images/uc.svg" /> 62 <img src="../assets/images/uc.svg" />
63 <span 63 <span
64 ><img src="../assets/images/p-eye.svg" /> 19.4k 64 ><img src="../assets/images/p-eye.svg" /> 19.4k
65 Views</span 65 Views</span
66 > 66 >
67 </a> 67 </a>
68 </li> 68 </li>
69 </ul> --> 69 </ul> -->
70 <!-- payments options --> 70 <!-- payments options -->
71 </div> 71 </div>
72 <!-- thanks pay wrp --> 72 <!-- thanks pay wrp -->
73 <img 73 <img
74 src="../assets/images/spot-light-bt.svg" 74 src="../assets/images/spot-light-bt.svg"
75 class="payment-spot-light-bt" 75 class="payment-spot-light-bt"
76 /> 76 />
77 </div> 77 </div>
78 <!-- thanks left wrp --> 78 <!-- thanks left wrp -->
79 <div class="thanks-r-section"> 79 <div class="thanks-r-section">
80 <div class="logo-common-wrp"> 80 <div class="logo-common-wrp">
81 <a href="" 81 <a href=""
82 ><img src="../assets/images/ps-growth.svg" /> 82 ><img src="../assets/images/ps-growth.svg" />
83 <span>Product Growth</span> 83 <span>Product Growth</span>
84 </a> 84 </a>
85 </div> 85 </div>
86 <!-- logo wrp --> 86 <!-- logo wrp -->
87 <div class="clearfix"></div> 87 <div class="clearfix"></div>
88 <p> 88 <p>
89 Don’t forget to <strong> join the discussion </strong> by 89 Don’t forget to <strong> join the discussion </strong> by
90 scrolling back and adding your comments! 90 scrolling back and adding your comments!
91 </p> 91 </p>
92 <div class="clearfix"></div> 92 <div class="clearfix"></div>
93 <a href="" class="back-bt" @click="goHome"> 93 <a href="" class="back-bt" @click="goHome">
94 <span class="s1"></span> 94 <span class="s1"></span>
95 <span class="s2"></span> 95 <span class="s2"></span>
96 <span class="s3"></span> 96 <span class="s3"></span>
97 <span class="s4"></span> 97 <span class="s4"></span>
98 <img src="../assets/images/refresh.svg" /> Back to home 98 <img src="../assets/images/refresh.svg" /> Back to home
99 </a> 99 </a>
100 <ul class="rating-section"> 100 <ul class="rating-section">
101 <li> 101 <li>
102 <p> 102 <p>
103 Excited to <strong> create case studies</strong> or help build 103 Excited to <strong> create case studies</strong> or help build
104 Product Growth? 104 Product Growth?
105 </p> 105 </p>
106 <a href="" class="publish" @click="open()">Publish</a> 106 <a href="" class="publish" @click="open()">Publish</a>
107 </li> 107 </li>
108 <li> 108 <li>
109 <p class="wdth">How would you rate this case study?</p> 109 <p class="wdth">How would you rate this case study?</p>
110 <span class="rating-list"> 110 <span class="rating-list">
111 <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6"> 111 <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
112 </star-rating> 112 </star-rating>
113 <!-- <a href="" 113 <!-- <a href=""
114 ><img src="../assets/images/f-review.svg" 114 ><img src="../assets/images/f-review.svg"
115 /></a> 115 /></a>
116 <a href="" 116 <a href=""
117 ><img src="../assets/images/f-review.svg" 117 ><img src="../assets/images/f-review.svg"
118 /></a> 118 /></a>
119 <a href="" 119 <a href=""
120 ><img src="../assets/images/e-review.svg" 120 ><img src="../assets/images/e-review.svg"
121 /></a> --> 121 /></a> -->
122 </span> 122 </span>
123 </li> 123 </li>
124 </ul> 124 </ul>
125 <div class="follow-us-py"> 125 <div class="follow-us-py">
126 <span>Follow us at</span> 126 <span>Follow us at</span>
127 <ul class="p-follows"> 127 <ul class="p-follows">
128 <li> 128 <li>
129 <a href=""> 129 <a href="">
130 <img src="../assets/images/p-rss.svg" /> 130 <img src="../assets/images/p-rss.svg" />
131 </a> 131 </a>
132 </li> 132 </li>
133 <li> 133 <li>
134 <a href=""> 134 <a href="">
135 <img src="../assets/images/p-linkedin.svg" /> 135 <img src="../assets/images/p-linkedin.svg" />
136 </a> 136 </a>
137 </li> 137 </li>
138 <li> 138 <li>
139 <a href=""> 139 <a href="">
140 <img src="../assets/images/p-twitter.svg" /> 140 <img src="../assets/images/p-twitter.svg" />
141 </a> 141 </a>
142 </li> 142 </li>
143 </ul> 143 </ul>
144 </div> 144 </div>
145 <!-- <star-rating v-model="rating"></star-rating> --> 145 <!-- <star-rating v-model="rating"></star-rating> -->
146 146
147 <!-- follow us --> 147 <!-- follow us -->
148 <div class="p-users"> 148 <div class="p-users">
149 <span>Author</span> 149 <span>Author</span>
150 <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> 150 <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>
151 <!-- <span>Author</span> 151 <!-- <span>Author</span>
152 <h1>Pramod</h1> 152 <h1>Pramod</h1>
153 <span>Author</span> 153 <span>Author</span>
154 <h1>Sarthak</h1> --> 154 <h1>Sarthak</h1> -->
155 <span v-if="currentSlideData.payload.metaData.designer" 155 <span v-if="currentSlideData.payload.metaData.designer"
156 >Designer</span 156 >Designer</span
157 > 157 >
158 <h1>{{ currentSlideData.payload.metaData.designer }}</h1> 158 <h1>{{ currentSlideData.payload.metaData.designer }}</h1>
159 <span v-if="currentSlideData.payload.metaData.illustrations" 159 <span v-if="currentSlideData.payload.metaData.illustrations"
160 >Illustrations</span 160 >Illustrations</span
161 > 161 >
162 <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> 162 <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>
163 </div> 163 </div>
164 <!-- users --> 164 <!-- users -->
165 </div> 165 </div>
166 <!-- thanks payment right section --> 166 <!-- thanks payment right section -->
167 </div> 167 </div>
168 <!--- thanks wrapper --> 168 <!--- thanks wrapper -->
169 <div class="footer-nav"> 169 <div class="footer-nav">
170 <div class="footer-top"> 170 <div class="footer-top">
171 <ul class="top-intro-bt ps_right"> 171 <ul class="top-intro-bt ps_right">
172 <li> 172 <li>
173 <a href="" @click="goBack" 173 <a href="" @click="goBack"
174 ><img src="../assets/images/skip-prev.svg" /> Prev</a 174 ><img src="../assets/images/skip-prev.svg" /> Prev</a
175 > 175 >
176 </li> 176 </li>
177 </ul> 177 </ul>
178 </div> 178 </div>
179 <!-- footer top --> 179 <!-- footer top -->
180 <div class="footer-bottom"> 180 <div class="footer-bottom">
181 <ul> 181 <ul>
182 <li class="active"></li> 182 <li class="active"></li>
183 <li class="active"></li> 183 <li class="active"></li>
184 </ul> 184 </ul>
185 </div> 185 </div>
186 <!-- footer top --> 186 <!-- footer top -->
187 </div> 187 </div>
188 <!-- footer --> 188 <!-- footer -->
189 </div> 189 </div>
190 <!-- body wrapper --> 190 <!-- body wrapper -->
191 </div> 191 </div>
192 <!-- main wrapper --> 192 <!-- main wrapper -->
193 </main> 193 </main>
194 </template> 194 </template>
195 195
196 <script> 196 <script>
197 import Vue from "vue"; 197 import Vue from "vue";
198 import router from "../router"; 198 import router from "../router";
199 import axios from "axios"; 199 import axios from "axios";
200 import Header from "./Header"; 200 import Header from "./Header";
201 201
202 export default { 202 export default {
203 components: { 203 components: {
204 Header: Header, 204 Header: Header,
205 }, 205 },
206 name: "Outro", 206 name: "Outro",
207 207
208 data() { 208 data() {
209 return { 209 return {
210 caseStudies: [], 210 caseStudies: [],
211 allSlide: [], 211 allSlide: [],
212 currentSlideIndex: null, 212 currentSlideIndex: null,
213 currentSlideData: null, 213 currentSlideData: null,
214 rating: 0, 214 rating: 0,
215 }; 215 };
216 }, 216 },
217 mounted() { 217 mounted() {
218 var allSlideData = localStorage.getItem( 218 var allSlideData = localStorage.getItem(
219 "spotlight_slide" + this.$route.params.caseStudyId 219 "spotlight_slide" + this.$route.params.caseStudyId
220 ); 220 );
221 if (allSlideData) { 221 if (allSlideData) {
222 this.allSlide = JSON.parse(allSlideData); 222 this.allSlide = JSON.parse(allSlideData);
223 this.getCurrentSlideData(); 223 this.getCurrentSlideData();
224 this.getCaseStudies(); 224 this.getCaseStudies();
225 this.getRating();
226 }else{ 225 }else{
227 226 this.generatecaseStudies();
228 this.$router.push("/login");
229 } 227 }
228
230 }, 229 },
231 methods: { 230 methods: {
231 generatecaseStudies(){
232 axios
233 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
234 headers: {
235 Authorization: "Bearer " + this.usertoken,
236 },
237 })
238 .then((response) => {
239
240 console.log('response',response.data.data);
241 this.openStudy(response.data.data);
242 })
243 .catch((error) => console.log(error));
244 },
245
246
247
248 openStudy(payload) {
249 console.log("payload-", payload);
250 payload.intro.date = payload.createdAt;
251 payload.intro.focusPoint = payload.focusAreas;
252 axios
253 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
254 headers: {
255 Authorization: "Bearer " + this.usertoken,
256 },
257 })
258 .then((response) => {
259 this.createSlide(payload, response.data.data);
260 })
261 .catch((error) => console.log(error));
262 },
263
264 createSlide(payload, slides) {
265 var finalSlides = [];
266 slides.forEach((slides_) => {
267 var url = this.assignRoutes(slides_.templateId);
268 var obj = {
269 forward: true,
270 backward: true,
271 ur: url,
272 slideId: slides_._id,
273 caseStudyId: slides_.caseStudyId,
274 payload: {
275 metaData: slides_.metaData,
276 comments: slides_.comments,
277 insight: slides_.insight ? slides_.insight : null,
278 },
279 };
280 // slides_
281 finalSlides.push(obj);
282 });
283 console.log("payload", payload);
284 // add first slide at begining
285 finalSlides.unshift({
286 forward: true,
287 backward: false,
288 ur: "EpisodeIntro",
289 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
290 caseStudyId: payload._id,
291 payload: {
292 metaData: payload.intro,
293 comments: [],
294 },
295 });
296 finalSlides.push({
297 forward: true,
298 backward: false,
299 ur: "Outro",
300 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
301 caseStudyId: payload._id,
302 payload: {
303 metaData: payload.outro,
304 comments: [],
305 },
306 });
307
308 console.log(finalSlides);
309 console.log("payload", payload);
310 localStorage.setItem(
311 "spotlight_slide" + payload._id,
312 JSON.stringify(finalSlides)
313 );
314 this.allSlide = finalSlides;
315 this.getCurrentSlideData();
316 },
317 assignRoutes(tempId) {
318 // /episode-intro
319 // /outro
320 var routes = [
321 {
322 url: "AuthorIntro",
323 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
324 },
325 {
326 url: "NoScreenshotSingleAuthor",
327 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
328 },
329 {
330 url: "SingleMobileScreenInsightTwo",
331 tempId: "T3_cqNIf7tuqL4jyON63dA7",
332 },
333 {
334 url: "TwoScreenWithoutInsight",
335 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
336 },
337 {
338 url: "noscreenshotSingleautho",
339 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
340 },
341 {
342 url: "SingleMobileScreenInsightOne",
343 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
344 },
345 {
346 url: "TwoScreenWithInsight",
347 tempId: "T7_za3c3sYgx7bVvtKzasdf",
348 },
349 {
350 url: "AuthorReadingNow",
351 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
352 },
353 {
354 url: "AuthorReadingBreak",
355 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
356 },
357 ];
358 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
359 return routes[i].url;
360 },
361
362
232 getCurrentSlideData() { 363 getCurrentSlideData() {
233 var i = this.allSlide.findIndex( 364 var i = this.allSlide.findIndex(
234 (slide_) => slide_.slideId == this.$route.params.slideId 365 (slide_) => slide_.slideId == this.$route.params.slideId
235 ); 366 );
236 this.currentSlideIndex = i; 367 this.currentSlideIndex = i;
237 this.currentSlideData = this.allSlide[i]; 368 this.currentSlideData = this.allSlide[i];
238 console.log("currentSlideData", this.currentSlideData); 369 console.log("currentSlideData", this.currentSlideData);
239 }, 370 },
240 goNext() { 371 goNext() {
241 this.currentSlideIndex++; 372 this.currentSlideIndex++;
242 this.$router.push({ 373 this.$router.push({
243 name: this.allSlide[this.currentSlideIndex].ur, 374 name: this.allSlide[this.currentSlideIndex].ur,
244 params: { 375 params: {
245 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 376 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
246 slideId: this.allSlide[this.currentSlideIndex].slideId, 377 slideId: this.allSlide[this.currentSlideIndex].slideId,
247 }, 378 },
248 }); 379 });
249 }, 380 },
250 goBack() { 381 goBack() {
251 this.currentSlideIndex--; 382 this.currentSlideIndex--;
252 this.$router.push({ 383 this.$router.push({
253 name: this.allSlide[this.currentSlideIndex].ur, 384 name: this.allSlide[this.currentSlideIndex].ur,
254 params: { 385 params: {
255 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 386 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
256 slideId: this.allSlide[this.currentSlideIndex].slideId, 387 slideId: this.allSlide[this.currentSlideIndex].slideId,
257 }, 388 },
258 }); 389 });
259 }, 390 },
260 goHome() { 391 goHome() {
261 this.currentSlideIndex--; 392 this.currentSlideIndex--;
262 this.$router.push({ 393 this.$router.push({
263 name: this.allSlide[0].ur, 394 name: this.allSlide[0].ur,
264 params: { 395 params: {
265 caseStudyId: this.allSlide[0].caseStudyId, 396 caseStudyId: this.allSlide[0].caseStudyId,
266 slideId: this.allSlide[0].slideId, 397 slideId: this.allSlide[0].slideId,
267 }, 398 },
268 }); 399 });
269 }, 400 },
270 401
271 getCaseStudies() { 402 getCaseStudies() {
272 var userdata = localStorage.getItem("spotlight_usertoken"); 403 var userdata = localStorage.getItem("spotlight_usertoken");
273 if (userdata) { 404 if (userdata) {
274 userdata = JSON.parse(userdata); 405 userdata = JSON.parse(userdata);
275 axios 406 axios
276 .get("/caseStudy/all", { 407 .get("/caseStudy/all", {
277 headers: { 408 headers: {
278 Authorization: "Bearer " + userdata.token, 409 Authorization: "Bearer " + userdata.token,
279 }, 410 },
280 }) 411 })
281 .then((response) => { 412 .then((response) => {
282 console.log(response.data.data.caseStudies); 413 console.log(response.data.data.caseStudies);
283 this.caseStudies = response.data.data.caseStudies; 414 this.caseStudies = response.data.data.caseStudies;
284 }) 415 })
285 .catch((error) => console.log(error)); 416 .catch((error) => console.log(error));
286 } 417 }
287 }, 418 },
288 419
289 getRating() { 420 getRating() {
290 var userdata = localStorage.getItem("spotlight_usertoken"); 421 var userdata = localStorage.getItem("spotlight_usertoken");
291 if (userdata) { 422 if (userdata) {
292 userdata = JSON.parse(userdata); 423 userdata = JSON.parse(userdata);
293 axios 424 axios
294 .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { 425 .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
295 headers: { 426 headers: {
296 Authorization: "Bearer " + userdata.token, 427 Authorization: "Bearer " + userdata.token,
297 }, 428 },
298 }) 429 })
299 .then((response) => { 430 .then((response) => {
300 this.rating = response.data.data.Avgrating; 431 this.rating = response.data.data.Avgrating;
301 }) 432 })
302 .catch((error) => console.log(error)); 433 .catch((error) => console.log(error));
303 } 434 }
304 }, 435 },
305 open(){ 436 open(){
306 window.open('https://www.productgrowth.org/spotlight#typeform-spotlight'); 437 window.open('https://www.productgrowth.org/spotlight#typeform-spotlight');
307 }, 438 },
308 updateRating() { 439 updateRating() {
309 var userdata = localStorage.getItem("spotlight_usertoken"); 440 var userdata = localStorage.getItem("spotlight_usertoken");
310 if (userdata) { 441 if (userdata) {
311 userdata = JSON.parse(userdata); 442 userdata = JSON.parse(userdata);
312 var obj = { 443 var obj = {
313 "caseStudyId":this.$route.params.caseStudyId, 444 "caseStudyId":this.$route.params.caseStudyId,
314 "rating":this.rating 445 "rating":this.rating
315 } 446 }
316 axios 447 axios
317 .post("/caseStudy/rating",obj, { 448 .post("/caseStudy/rating",obj, {
318 headers: { 449 headers: {
319 Authorization: "Bearer " + userdata.token, 450 Authorization: "Bearer " + userdata.token,
320 }, 451 },
321 }) 452 })
322 .then((response) => { 453 .then((response) => {
323 console.log("response",response) 454 console.log("response",response)
324 // this.rating = response.data.data.Avgrating; 455 // this.rating = response.data.data.Avgrating;
325 }) 456 })
326 .catch((error) => console.log(error)); 457 .catch((error) => console.log(error));
327 } 458 }
328 }, 459 },
329 goToLogin() { 460 goToLogin() {
330 this.$router.push("/login"); 461 this.$router.push("/login");
331 }, 462 },
332 goToSignUp() { 463 goToSignUp() {
333 this.$router.push("/"); 464 this.$router.push("/");
334 }, 465 },
335 goToProfile() { 466 goToProfile() {
336 this.$router.push("/profile"); 467 this.$router.push("/profile");
337 }, 468 },
338 }, 469 },
339 }; 470 };
340 </script> 471 </script>
341 <style> 472 <style>
342 .vue-star-rating-rating-text[data-v-fde73a0c] { 473 .vue-star-rating-rating-text[data-v-fde73a0c] {
343 margin-left: 7px; 474 margin-left: 7px;
344 display: none; 475 display: none;
345 } 476 }