Commit 2b91d45ce43d13b31ceabb85246d92c6c4a2547c
1 parent
145dd9bdec
Exists in
master
new ui fixes
Showing
11 changed files
with
1459 additions
and
547 deletions
Show diff stats
src/components/AuthorIntro.vue
| 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 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 5 | <Header></Header> |
| 6 | <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> | 6 | |
| 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> | ||
| 9 | <span class="navbar-toggler-icon"></span> | ||
| 10 | <span class="navbar-toggler-icon"></span> | ||
| 11 | </button> | ||
| 12 | <div class="user-profile-photo insights-profile"> | ||
| 13 | <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a> | ||
| 14 | </div> | ||
| 15 | </nav> | ||
| 16 | <!-- menu wrapper --> | 7 | <!-- menu wrapper --> |
| 17 | <div class="intro-startup"> | 8 | <div class="intro-startup"> |
| 18 | <div class="smasung-g-10wrp"> | 9 | <div class="smasung-g-10wrp"> |
| 19 | <div class="samsung-compare-c"> | 10 | <div class="samsung-compare-c"> |
| 20 | <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div> | 11 | <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div> |
| 21 | 12 | ||
| 22 | </div> | 13 | </div> |
| 23 | <!-- <div class="samsung-compare-c"> | 14 | <!-- <div class="samsung-compare-c"> |
| 24 | <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> | 15 | <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> |
| 25 | <div class="vs">vs</div> | 16 | <div class="vs">vs</div> |
| 26 | <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> | 17 | <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> |
| 27 | </div> --> | 18 | </div> --> |
| 28 | <div class="comment-box"> | 19 | <div class="comment-box"> |
| 29 | <div class="comment-box-s-1"> | 20 | <div class="comment-box-s-1"> |
| 30 | <!-- <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> --> | 21 | <!-- <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> --> |
| 31 | <p>{{currentSlideData.payload.metaData.textBox}}</p> | 22 | <p>{{currentSlideData.payload.metaData.textBox}}</p> |
| 32 | <div class="footer"> | 23 | <div class="footer"> |
| 33 | <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a> | 24 | <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a> |
| 34 | </div><!-- footer --> | 25 | </div><!-- footer --> |
| 35 | </div><!-- comment box 1 --> | 26 | </div><!-- comment box 1 --> |
| 36 | <!-- <div class="comment-box-s-1 comment-w-397"> | 27 | <!-- <div class="comment-box-s-1 comment-w-397"> |
| 37 | <p> | 28 | <p> |
| 38 | Use arrow keys to navigate <br/> | 29 | Use arrow keys to navigate <br/> |
| 39 | <img src="../assets/images/key-arrow.jpg" class="key-arrow" /> | 30 | <img src="../assets/images/key-arrow.jpg" class="key-arrow" /> |
| 40 | </p> | 31 | </p> |
| 41 | </div> --> | 32 | </div> --> |
| 42 | <!-- comment box 1 --> | 33 | <!-- comment box 1 --> |
| 43 | <div class="user-photo"> | 34 | <div class="user-photo"> |
| 44 | <!-- <img src="../assets/images/comment-photo.png" /> --> | 35 | <!-- <img src="../assets/images/comment-photo.png" /> --> |
| 45 | <img :src="currentSlideData.payload.metaData.authorImage" /> | 36 | <img :src="currentSlideData.payload.metaData.authorImage" /> |
| 46 | </div> | 37 | </div> |
| 47 | </div><!-- comment box --> | 38 | </div><!-- comment box --> |
| 48 | </div><!-- samsung g 10 --> | 39 | </div><!-- samsung g 10 --> |
| 49 | <div class="footer-nav"> | 40 | <div class="footer-nav"> |
| 50 | <div class="footer-top"> | 41 | <div class="footer-top"> |
| 51 | <ul class="top-intro-bt ps_right"> | 42 | <ul class="top-intro-bt ps_right"> |
| 52 | <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> | 43 | <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> |
| 53 | <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> | 44 | <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> |
| 54 | </ul> | 45 | </ul> |
| 55 | </div><!-- footer top --> | 46 | </div><!-- footer top --> |
| 56 | <div class="footer-bottom"> | 47 | <div class="footer-bottom"> |
| 57 | <ul> | 48 | <ul> |
| 58 | <li></li> | 49 | <li></li> |
| 59 | <li></li> | 50 | <li></li> |
| 60 | </ul> | 51 | </ul> |
| 61 | </div><!-- footer top --> | 52 | </div><!-- footer top --> |
| 62 | </div><!-- footer --> | 53 | </div><!-- footer --> |
| 63 | 54 | ||
| 64 | </div> | 55 | </div> |
| 65 | <!-- body wrapper --> | 56 | <!-- body wrapper --> |
| 66 | </div> | 57 | </div> |
| 67 | <!-- main wrapper --> | 58 | <!-- main wrapper --> |
| 68 | </main> | 59 | </main> |
| 69 | </template> | 60 | </template> |
| 70 | 61 | ||
| 71 | <script> | 62 | <script> |
| 72 | import Vue from "vue"; | 63 | import Vue from "vue"; |
| 73 | import router from "../router"; | 64 | import router from "../router"; |
| 65 | import Header from "./Header"; | ||
| 74 | 66 | ||
| 75 | export default { | 67 | export default { |
| 68 | components: { | ||
| 69 | Header: Header, | ||
| 70 | }, | ||
| 76 | name: "AuthorIntro", | 71 | name: "AuthorIntro", |
| 77 | 72 | ||
| 78 | data() { | 73 | data() { |
| 79 | 74 | ||
| 80 | return { | 75 | return { |
| 81 | allSlide:[], | 76 | allSlide:[], |
| 82 | currentSlideIndex:null, | 77 | currentSlideIndex:null, |
| 83 | currentSlideData:null, | 78 | currentSlideData:null, |
| 84 | }; | 79 | }; |
| 85 | }, | 80 | }, |
| 86 | mounted() { | 81 | mounted() { |
| 87 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); | 82 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); |
| 88 | if (allSlideData) { | 83 | if (allSlideData) { |
| 89 | this.allSlide = JSON.parse(allSlideData); | 84 | this.allSlide = JSON.parse(allSlideData); |
| 90 | this.getCurrentSlideData(); | 85 | this.getCurrentSlideData(); |
| 91 | } | 86 | } |
| 92 | 87 | ||
| 93 | }, | 88 | }, |
| 94 | methods: { | 89 | methods: { |
| 95 | getCurrentSlideData(){ | 90 | getCurrentSlideData(){ |
| 96 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); | 91 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); |
| 97 | this.currentSlideIndex = i; | 92 | this.currentSlideIndex = i; |
| 98 | this.currentSlideData = this.allSlide[i] | 93 | this.currentSlideData = this.allSlide[i] |
| 99 | console.log("currentSlideData",this.currentSlideData) | 94 | console.log("currentSlideData",this.currentSlideData) |
| 100 | 95 | ||
| 101 | }, | 96 | }, |
| 102 | goNext(){ | 97 | goNext(){ |
| 103 | this.currentSlideIndex++ | 98 | this.currentSlideIndex++ |
| 104 | this.$router.push({ | 99 | this.$router.push({ |
| 105 | name: this.allSlide[this.currentSlideIndex].ur, | 100 | name: this.allSlide[this.currentSlideIndex].ur, |
| 106 | params: { | 101 | params: { |
| 107 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 102 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 108 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 103 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 109 | }, | 104 | }, |
| 110 | }); | 105 | }); |
| 111 | 106 | ||
| 112 | }, | 107 | }, |
| 113 | goBack(){ | 108 | goBack(){ |
| 114 | this.currentSlideIndex-- | 109 | this.currentSlideIndex-- |
| 115 | this.$router.push({ | 110 | this.$router.push({ |
| 116 | name: this.allSlide[this.currentSlideIndex].ur, | 111 | name: this.allSlide[this.currentSlideIndex].ur, |
| 117 | params: { | 112 | params: { |
| 118 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 113 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 119 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 114 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 120 | }, | 115 | }, |
| 121 | }); | 116 | }); |
| 122 | 117 | ||
| 123 | }, | 118 | }, |
| 124 | goToLogin() { | 119 | goToLogin() { |
| 125 | this.$router.push("/login"); | 120 | this.$router.push("/login"); |
| 126 | }, | 121 | }, |
| 127 | goToSignUp() { | 122 | goToSignUp() { |
| 128 | this.$router.push("/"); | 123 | this.$router.push("/"); |
| 129 | }, | 124 | }, |
| 130 | goToProfile() { | 125 | goToProfile() { |
| 131 | this.$router.push("/profile"); | 126 | this.$router.push("/profile"); |
| 132 | }, | 127 | }, |
| 133 | 128 |
src/components/EpisodeIntro.vue
| 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 | <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> | ||
| 17 | |||
| 16 | <!-- menu wrapper --> | 18 | <!-- menu wrapper --> |
| 17 | <div class="startup-wrp"> | 19 | <div class="startup-wrp"> |
| 18 | 20 | ||
| 19 | <!-- <div class="compare-c"> | 21 | <!-- <div class="compare-c"> |
| 20 | <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> |
| 21 | <div class="vs">vs</div> | 23 | <div class="vs">vs</div> |
| 22 | <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> |
| 23 | </div> --> | 25 | </div> --> |
| 24 | <div class="compare-c"> | 26 | <div class="compare-c"> |
| 25 | <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div> | 27 | <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div> |
| 26 | </div> | 28 | </div> |
| 27 | <!-- compare --> | 29 | <!-- compare --> |
| 28 | <img src="../assets/images/spot-light.svg" class="epi-bg" /> | 30 | <img src="../assets/images/spot-light.svg" class="epi-bg" /> |
| 29 | <div class="bottom-startup"> | 31 | <div class="bottom-startup"> |
| 30 | <div class="logo-wrp"> | 32 | <div class="logo-wrp"> |
| 31 | <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" /> |
| 32 | <span>Product Growth</span> | 34 | <span>Product Growth</span> |
| 33 | </a> | 35 | </a> |
| 34 | </div><!-- logo wrp --> | 36 | </div><!-- logo wrp --> |
| 35 | <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title --> | 37 | <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title --> |
| 36 | <div class="author-sec"> | 38 | <div class="author-sec"> |
| 37 | <div class="top"> | 39 | <div class="top"> |
| 38 | <span>Author</span> | 40 | <span>Author</span> |
| 39 | <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span> | 41 | <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span> |
| 40 | </div><!-- top section --> | 42 | </div><!-- top section --> |
| 41 | <div class="bottom"> | 43 | <div class="bottom"> |
| 42 | 44 | ||
| 43 | <div class="right p-left-0"> | 45 | <div class="right p-left-0"> |
| 44 | <span>Last updated</span> | 46 | <span>Last updated</span> |
| 45 | <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> |
| 46 | </div><!-- right --> | 48 | </div><!-- right --> |
| 47 | </div><!-- bottom --> | 49 | </div><!-- bottom --> |
| 48 | </div><!-- author section--> | 50 | </div><!-- author section--> |
| 49 | <div class="author-sec"> | 51 | <div class="author-sec"> |
| 50 | <div class="top"> | 52 | <div class="top"> |
| 51 | <span>App</span> | 53 | <span>App</span> |
| 52 | <span class="name">{{currentSlideData.payload.metaData.app}}</span> | 54 | <span class="name">{{currentSlideData.payload.metaData.app}}</span> |
| 53 | </div><!-- top section --> | 55 | </div><!-- top section --> |
| 54 | <div class="top"> | 56 | <div class="top"> |
| 55 | <span>Focus</span> | 57 | <span>Focus</span> |
| 56 | <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span> | 58 | <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span> |
| 57 | </div><!-- top section --> | 59 | </div><!-- top section --> |
| 58 | </div><!-- app section--> | 60 | </div><!-- app section--> |
| 59 | <div class="author-sec info"> | 61 | <div class="author-sec info"> |
| 60 | <div class="top"> | 62 | <div class="top"> |
| 61 | <span>Read</span> | 63 | <span>Read</span> |
| 62 | <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span> | 64 | <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span> |
| 63 | </div><!-- top section --> | 65 | </div><!-- top section --> |
| 64 | <div class="top bt-brd"> | 66 | <div class="top bt-brd"> |
| 65 | <span>Platform</span> | 67 | <span>Platform</span> |
| 66 | <span class="name">{{currentSlideData.payload.metaData.platForm}}</span> | 68 | <span class="name">{{currentSlideData.payload.metaData.platForm}}</span> |
| 67 | </div><!-- top section --> | 69 | </div><!-- top section --> |
| 68 | </div><!-- info section--> | 70 | </div><!-- info section--> |
| 69 | <div class="u-img-info"> | 71 | <div class="u-img-info"> |
| 70 | <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'"/> |
| 71 | <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'"/> |
| 72 | <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'"/> |
| 73 | <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'"/> |
| 74 | </div><!-- image info --> | 76 | </div><!-- image info --> |
| 75 | <div class="start"> | 77 | <div class="start"> |
| 76 | <a href="javascript:void(0);" @click="goNext"> | 78 | <a href="javascript:void(0);" @click="goNext"> |
| 77 | <img src="../assets/images/arrow-right.svg" /> | 79 | <img src="../assets/images/arrow-right.svg" /> |
| 78 | <span>Start</span> | 80 | <span>Start</span> |
| 79 | </a> | 81 | </a> |
| 80 | </div><!-- start --> | 82 | </div><!-- start --> |
| 81 | </div><!-- bottom startup --> | 83 | </div><!-- bottom startup --> |
| 82 | 84 | ||
| 83 | </div> | 85 | </div> |
| 84 | <!-- body wrapper --> | 86 | <!-- body wrapper --> |
| 85 | </div> | 87 | </div> |
| 86 | <!-- main wrapper --> | 88 | <!-- main wrapper --> |
| 87 | </main> | 89 | </main> |
| 88 | </template> | 90 | </template> |
| 89 | 91 | ||
| 90 | <script> | 92 | <script> |
| 91 | import Vue from "vue"; | 93 | import Vue from "vue"; |
| 92 | import router from "../router"; | 94 | import router from "../router"; |
| 95 | import Header from "./Header"; | ||
| 93 | 96 | ||
| 94 | export default { | 97 | export default { |
| 95 | name: "EpisodeIntro", | 98 | name: "EpisodeIntro", |
| 96 | 99 | components: { | |
| 100 | Header: Header, | ||
| 101 | }, | ||
| 97 | data() { | 102 | data() { |
| 98 | return { | 103 | return { |
| 99 | allSlide:[], | 104 | allSlide:[], |
| 100 | currentSlideIndex:null, | 105 | currentSlideIndex:null, |
| 101 | currentSlideData:null, | 106 | currentSlideData:null, |
| 102 | }; | 107 | }; |
| 103 | }, | 108 | }, |
| 104 | mounted() { | 109 | mounted() { |
| 105 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); | 110 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); |
| 106 | if (allSlideData) { | 111 | if (allSlideData) { |
| 107 | this.allSlide = JSON.parse(allSlideData); | 112 | this.allSlide = JSON.parse(allSlideData); |
| 108 | this.getCurrentSlideData(); | 113 | this.getCurrentSlideData(); |
| 109 | } | 114 | } |
| 110 | 115 | ||
| 111 | }, | 116 | }, |
| 112 | methods: { | 117 | methods: { |
| 113 | getCurrentSlideData(){ | 118 | getCurrentSlideData(){ |
| 114 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); | 119 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); |
| 115 | this.currentSlideIndex = i; | 120 | this.currentSlideIndex = i; |
| 116 | this.currentSlideData = this.allSlide[i] | 121 | this.currentSlideData = this.allSlide[i] |
| 117 | console.log("currentSlideData",this.currentSlideData) | 122 | console.log("currentSlideData",this.currentSlideData) |
| 118 | 123 | ||
| 119 | }, | 124 | }, |
| 120 | goNext(){ | 125 | goNext(){ |
| 121 | this.currentSlideIndex++ | 126 | this.currentSlideIndex++ |
| 122 | this.$router.push({ | 127 | this.$router.push({ |
| 123 | name: this.allSlide[this.currentSlideIndex].ur, | 128 | name: this.allSlide[this.currentSlideIndex].ur, |
| 124 | params: { | 129 | params: { |
| 125 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 130 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 126 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 131 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 127 | }, | 132 | }, |
| 128 | }); | 133 | }); |
| 129 | 134 | ||
| 130 | }, | 135 | }, |
| 131 | goBack(){ | 136 | goBack(){ |
| 132 | 137 | ||
| 133 | }, | 138 | }, |
| 134 | goToLogin() { | 139 | goToLogin() { |
| 135 | this.$router.push("/login"); | 140 | this.$router.push("/login"); |
| 136 | }, | 141 | }, |
| 137 | goToSignUp() { | 142 | goToSignUp() { |
| 138 | this.$router.push("/"); | 143 | this.$router.push("/"); |
| 139 | }, | 144 | }, |
| 140 | 145 | ||
| 141 | createString(list){ | 146 | createString(list){ |
| 142 | var name = ""; | 147 | var name = ""; |
| 143 | list.forEach(element => { | 148 | list.forEach(element => { |
| 144 | name = name+','+element; | 149 | name = name+','+element; |
| 145 | }); | 150 | }); |
| 146 | 151 | ||
| 147 | console.log("name is",name); | 152 | console.log("name is",name); |
| 148 | return name.substring(1);; | 153 | return name.substring(1);; |
| 149 | } | 154 | } |
| 150 | 155 | ||
| 151 | }, | 156 | }, |
| 152 | }; | 157 | }; |
| 153 | </script> | 158 | </script> |
| 154 | <style > | 159 | <style > |
| 155 | .ellipsis { | 160 | .ellipsis { |
| 156 | text-overflow: ellipsis; | 161 | text-overflow: ellipsis; |
| 157 | white-space: nowrap; | 162 | white-space: nowrap; |
| 158 | overflow: hidden; | 163 | overflow: hidden; |
| 159 | } | 164 | } |
| 160 | </style> | 165 | </style> |
src/components/Header.vue
| File was created | 1 | <template> | |
| 2 | <nav class="navbar navbar-expand-sm spotLight-nav"> | ||
| 3 | <a class="navbar-brand" href="javasript:void(0);" @click="goTo" | ||
| 4 | ><img src="../assets/images/logo.png" | ||
| 5 | /></a> | ||
| 6 | <button | ||
| 7 | class="navbar-toggler" | ||
| 8 | type="button" | ||
| 9 | data-toggle="collapse" | ||
| 10 | data-target="#navbarsExample03" | ||
| 11 | aria-controls="navbarsExample03" | ||
| 12 | aria-expanded="false" | ||
| 13 | aria-label="Toggle navigation" | ||
| 14 | > | ||
| 15 | <span class="navbar-toggler-icon"></span> | ||
| 16 | <span class="navbar-toggler-icon"></span> | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | </button> | ||
| 19 | |||
| 20 | <div class="collapse navbar-collapse" id="navbarsExample03"> | ||
| 21 | <!-- <ul class="navbar-nav mr-auto"> | ||
| 22 | <li class="nav-item active"> | ||
| 23 | <a class="nav-link" href="javasript:void(0);">About</a> | ||
| 24 | </li> | ||
| 25 | <li class="nav-item"> | ||
| 26 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> | ||
| 27 | </li> | ||
| 28 | <li class="nav-item"> | ||
| 29 | <a class="nav-link" href="javasript:void(0);">Stories</a> | ||
| 30 | </li> | ||
| 31 | <li class="nav-item"> | ||
| 32 | <a class="nav-link" href="javasript:void(0);">Library</a> | ||
| 33 | </li> | ||
| 34 | </ul> --> | ||
| 35 | </div> | ||
| 36 | <div class=""> | ||
| 37 | <a @click="goTo" href="javascript:void(0);" class="user-profile-photo common_color" | ||
| 38 | ><img :src="profilePictue" | ||
| 39 | /></a> | ||
| 40 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | ||
| 41 | <!-- <ul> | ||
| 42 | <li> | ||
| 43 | <a href="javascript:void(0);" | ||
| 44 | >Edit Profile</a | ||
| 45 | > | ||
| 46 | </li> | ||
| 47 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | ||
| 48 | </ul> --> | ||
| 49 | </div> | ||
| 50 | </div> | ||
| 51 | </nav> | ||
| 52 | </template> | ||
| 53 | |||
| 54 | <script> | ||
| 55 | import $ from "jquery"; | ||
| 56 | import axios from "axios"; | ||
| 57 | export default { | ||
| 58 | name: "Header", | ||
| 59 | data() { | ||
| 60 | return { | ||
| 61 | usertoken:null, | ||
| 62 | profilePictue:null, | ||
| 63 | }; | ||
| 64 | }, | ||
| 65 | mounted() { | ||
| 66 | var userdata = localStorage.getItem("spotlight_usertoken"); | ||
| 67 | if (userdata) { | ||
| 68 | userdata = JSON.parse(userdata); | ||
| 69 | this.usertoken = userdata.token; | ||
| 70 | this.getProfile(); | ||
| 71 | } | ||
| 72 | }, | ||
| 73 | methods: { | ||
| 74 | goTo() { | ||
| 75 | this.$router.push("/profile"); | ||
| 76 | }, | ||
| 77 | getProfile() { | ||
| 78 | axios | ||
| 79 | .get("/profile", { | ||
| 80 | headers: { | ||
| 81 | Authorization: "Bearer " + this.usertoken, | ||
| 82 | }, | ||
| 83 | }) | ||
| 84 | .then((response) => { | ||
| 85 | this.assignClass(response.data.data.bgColor); | ||
| 86 | this.profilePictue = response.data.data.profilePic; | ||
| 87 | console.log(response.data.data); | ||
| 88 | }) | ||
| 89 | .catch((error) => console.log(error)); | ||
| 90 | }, | ||
| 91 | assignClass(bgClr) { | ||
| 92 | var cols = document.getElementsByClassName("common_color"); | ||
| 93 | for (var i = 0; i < cols.length; i++) { | ||
| 94 | cols[i].style.backgroundColor = bgClr; | ||
| 95 | } | ||
| 96 | }, | ||
| 97 | } | ||
| 98 | , | ||
| 99 | |||
| 100 | }; | ||
| 101 | </script> | ||
| 102 |
src/components/NoScreenshotSingleAuthor.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);" | 5 | |
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a> | ||
| 23 | </div> | ||
| 24 | </nav> | ||
| 25 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 27 | 8 | <!-- chat box --> | |
| 28 | <!-- chat box --> | ||
| 29 | <div class="bounce-board-wrp" id="cht_box_close"> | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 30 | <div class="inner-wrp-bc"> | 10 | <div class="inner-wrp-bc"> |
| 31 | <div class="bc-top-head"> | 11 | <div class="bc-top-head"> |
| 32 | <span class="bc-head"> | 12 | <span class="bc-head"> |
| 33 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 13 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 34 | </span> | 14 | </span> |
| 35 | <div class="action-sort"> | 15 | <div class="action-sort"> |
| 36 | <span class="sort-by">SORT BY</span> | 16 | <span class="sort-by">SORT BY</span> |
| 37 | <div class="btn-group"> | 17 | <div class="btn-group"> |
| 38 | <button | 18 | <button |
| 39 | type="button" | 19 | type="button" |
| 40 | class="bc-sort-list dropdown-toggle" | 20 | class="bc-sort-list dropdown-toggle" |
| 41 | data-toggle="dropdown" | 21 | data-toggle="dropdown" |
| 42 | aria-haspopup="true" | 22 | aria-haspopup="true" |
| 43 | aria-expanded="false" | 23 | aria-expanded="false" |
| 44 | > | 24 | > |
| 45 | BEST | 25 | BEST |
| 46 | </button> | 26 | </button> |
| 47 | <div class="dropdown-menu short_by"> | 27 | <div class="dropdown-menu short_by"> |
| 48 | <a class="dropdown-item" href="javasript:void(0);" | 28 | <a class="dropdown-item" href="javasript:void(0);" |
| 49 | >BEST 1</a | 29 | >BEST 1</a |
| 50 | > | 30 | > |
| 51 | <a class="dropdown-item" href="javasript:void(0);" | 31 | <a class="dropdown-item" href="javasript:void(0);" |
| 52 | >BEST 2</a | 32 | >BEST 2</a |
| 53 | > | 33 | > |
| 54 | <a class="dropdown-item" href="javasript:void(0);" | 34 | <a class="dropdown-item" href="javasript:void(0);" |
| 55 | >BEST 3</a | 35 | >BEST 3</a |
| 56 | > | 36 | > |
| 57 | </div> | 37 | </div> |
| 58 | </div> | 38 | </div> |
| 59 | <a | 39 | <a |
| 60 | href="javasript:void(0);" | 40 | href="javasript:void(0);" |
| 61 | @click="chtbox_close" | 41 | @click="chtbox_close" |
| 62 | class="close_chat_bx" | 42 | class="close_chat_bx" |
| 63 | ><img src="../assets/images/close.png" alt="close" /></a | 43 | ><img src="../assets/images/close.png" alt="close" /></a |
| 64 | ><!-- close --> | 44 | ><!-- close --> |
| 65 | </div> | 45 | </div> |
| 66 | <!-- action sort --> | 46 | <!-- action sort --> |
| 67 | </div> | 47 | </div> |
| 68 | <!-- top head --> | 48 | <!-- top head --> |
| 69 | <div class="bounce-board-body"> | 49 | <div class="bounce-board-body"> |
| 70 | |||
| 71 | <!-- all user comments --> | 50 | <!-- all user comments --> |
| 72 | <ul class="bounced-user-comments"> | 51 | <ul class="bounced-user-comments"> |
| 73 | <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"> |
| 74 | <div class="bc_brd_l"></div> | 53 | <div class="bc_brd_l"></div> |
| 75 | <!-- border --> | 54 | <!-- border --> |
| 76 | <div class="parent-full-width"> | 55 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 77 | <div class="full-width"> | 56 | <div class="full-width"> |
| 78 | <div class="b-user-head"> | 57 | <div class="b-user-head"> |
| 79 | <img :src="cmnt.user.profilePic" /> | 58 | <img :src="cmnt.user.profilePic" /> |
| 80 | <span class="head-content">{{ cmnt.user.name }} </span> | 59 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 81 | <ul> | 60 | <ul> |
| 82 | <li> | 61 | <li> |
| 83 | <span></span | 62 | <span></span |
| 84 | ><img src="../assets/images/u-info-icon.png" />{{ | 63 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 85 | cmnt.user.karmaPoints | 64 | cmnt.user.karmaPoints |
| 86 | }}pts | 65 | }}pts |
| 87 | </li> | 66 | </li> |
| 88 | <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | 67 | <li> |
| 68 | <span></span>{{ dateGenerator(cmnt.createdAt) }} | ||
| 69 | </li> | ||
| 89 | </ul> | 70 | </ul> |
| 90 | </div> | 71 | </div> |
| 91 | <!-- header --> | 72 | <!-- header --> |
| 92 | <p> | 73 | <p> |
| 93 | {{ cmnt.comment }} | 74 | {{ cmnt.comment }} |
| 94 | </p> | 75 | </p> |
| 95 | <div class="joined_wrapper"> | 76 | <div class="joined_wrapper"> |
| 96 | <ul class="joined-info info_bc_spc"> | 77 | <ul class="joined-info info_bc_spc"> |
| 97 | <li> | 78 | <li> |
| 98 | <img src="../assets/images/purple-heart.png" /> | 79 | <img |
| 80 | src="../assets/images/heart.svg" | ||
| 81 | v-if="cmnt.like == false" | ||
| 82 | @click="likeComment(true, cmnt._id)" | ||
| 83 | class="cursor-pointer" | ||
| 84 | /> | ||
| 85 | <img | ||
| 86 | src="../assets/images/purple-heart.png" | ||
| 87 | v-if="cmnt.like == true" | ||
| 88 | @click="likeComment(false, cmnt._id)" | ||
| 89 | class="cursor-pointer" | ||
| 90 | /> | ||
| 91 | </li> | ||
| 92 | <li> | ||
| 93 | <a href="javasript:void(0);"> | ||
| 94 | {{ cmnt.likes.length }}</a | ||
| 95 | > | ||
| 99 | </li> | 96 | </li> |
| 100 | <li><a href="javasript:void(0);"> 0</a></li> | ||
| 101 | <li class="comment-spc"> | 97 | <li class="comment-spc"> |
| 102 | <img src="../assets/images/purple-comment.png" /> | 98 | <img src="../assets/images/purple-comment.png" /> |
| 103 | </li> | 99 | </li> |
| 104 | <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | 100 | <li> |
| 101 | <a href="javasript:void(0);"> | ||
| 102 | {{ cmnt.children.length }}</a | ||
| 103 | > | ||
| 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"></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 href="javasript:void(0);" class="discard_bt" | 129 | <a |
| 130 | @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | 130 | href="javasript:void(0);" |
| 131 | class="discard_bt" | ||
| 132 | @click="discardRply(cmnt)" | ||
| 133 | ><img src="../assets/images/discard.svg" | ||
| 131 | /></a> | 134 | /></a> |
| 132 | </div> | 135 | </div> |
| 133 | </div> | 136 | </div> |
| 134 | <!-- parent --> | 137 | <!-- parent --> |
| 135 | <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | 138 | <div |
| 139 | class="child-full-width" | ||
| 140 | v-for="(childCmnt, i) in cmnt.children" | ||
| 141 | :key="i" | ||
| 142 | > | ||
| 136 | <div class="full-width"> | 143 | <div class="full-width"> |
| 137 | <div class="b-user-head"> | 144 | <div class="b-user-head"> |
| 138 | <img :src="childCmnt.user.profilePic" /> | 145 | <img :src="childCmnt.user.profilePic" /> |
| 139 | <span class="head-content">{{childCmnt.user.name }} </span> | 146 | <span class="head-content" |
| 147 | >{{ childCmnt.user.name }} | ||
| 148 | </span> | ||
| 140 | <ul> | 149 | <ul> |
| 141 | <li> | 150 | <li> |
| 142 | <span></span | 151 | <span></span |
| 143 | ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | 152 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 153 | childCmnt.user.karmaPoints | ||
| 154 | }}pts | ||
| 155 | </li> | ||
| 156 | <li> | ||
| 157 | <span></span | ||
| 158 | >{{ dateGenerator(childCmnt.createdAt) }} | ||
| 144 | </li> | 159 | </li> |
| 145 | <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | ||
| 146 | </ul> | 160 | </ul> |
| 147 | </div> | 161 | </div> |
| 148 | <p> | 162 | <p> |
| 149 | {{childCmnt.comment}} | 163 | {{ childCmnt.comment }} |
| 150 | </p> | 164 | </p> |
| 151 | <div class="joined_wrapper"> | 165 | <div class="joined_wrapper"> |
| 152 | <ul class="joined-info info_bc_spc"> | 166 | <ul class="joined-info info_bc_spc"> |
| 153 | <li> | 167 | <li> |
| 154 | <img src="../assets/images/purple-heart.png" /> | 168 | <img |
| 169 | src="../assets/images/heart.svg" | ||
| 170 | v-if="childCmnt.like == false" | ||
| 171 | @click="likeComment(true, childCmnt._id)" | ||
| 172 | class="cursor-pointer" | ||
| 173 | /> | ||
| 174 | <img | ||
| 175 | src="../assets/images/purple-heart.png" | ||
| 176 | v-if="childCmnt.like == true" | ||
| 177 | @click="likeComment(false, childCmnt._id)" | ||
| 178 | class="cursor-pointer" | ||
| 179 | /> | ||
| 180 | </li> | ||
| 181 | <li> | ||
| 182 | <a href="javasript:void(0);"> | ||
| 183 | {{ childCmnt.likes.length }}</a | ||
| 184 | > | ||
| 155 | </li> | 185 | </li> |
| 156 | <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | ||
| 157 | |||
| 158 | </ul> | 186 | </ul> |
| 159 | |||
| 160 | </div> | 187 | </div> |
| 161 | </div> | 188 | </div> |
| 162 | </div> | 189 | </div> |
| 163 | <!-- eree --> | 190 | <!-- eree --> |
| 164 | 191 | ||
| 165 | <!-- comments footer --> | 192 | <!-- comments footer --> |
| 166 | </li> | 193 | </li> |
| 167 | </ul> | 194 | </ul> |
| 168 | </div> | 195 | </div> |
| 169 | <!-- bounce board body --> | 196 | <!-- bounce board body --> |
| 170 | <div class="comments-footer" v-if="parentInput"> | 197 | <div class="comments-footer" v-if="parentInput"> |
| 171 | <textarea v-model="comment"></textarea> | 198 | <textarea v-model="comment"></textarea> |
| 172 | <div class="comments-footer-wrp"> | 199 | <div class="comments-footer-wrp"> |
| 173 | <a | 200 | <a |
| 174 | href="javasript:void(0);" | 201 | href="javasript:void(0);" |
| 175 | class="add_comments_chat" | 202 | class="add_comments_chat" |
| 176 | @click="createComment" | 203 | @click="createComment" |
| 177 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 204 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 178 | > | 205 | > |
| 179 | </div> | 206 | </div> |
| 180 | </div> | 207 | </div> |
| 181 | <!-- comments footer --> | 208 | <!-- comments footer --> |
| 182 | </div> | 209 | </div> |
| 183 | </div> | 210 | </div> |
| 184 | <!-- bounceboard wrp --> | 211 | <!-- bounceboard wrp --> |
| 185 | <!-- chat box --> | 212 | <!-- chat box --> |
| 186 | 213 | ||
| 187 | 214 | ||
| 188 | <div class="single-author-comments"> | 215 | <div class="single-author-comments"> |
| 189 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> | 216 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> |
| 190 | <div class="ct-l-400"> | 217 | <div class="ct-l-400"> |
| 191 | <div class="single-author-li-comments"> | 218 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 192 | <div class="a-intro-comments right-corner"> | 219 | <div class="a-intro-comments right-corner"> |
| 193 | <p> | 220 | <p> |
| 194 | {{currentSlideData.payload.comments[0].comment}} | 221 | {{commentList[0].comment}} |
| 195 | </p> | 222 | </p> |
| 196 | <ul class="rly-comment-set"> | 223 | <ul class="rly-comment-set"> |
| 224 | <!-- like/dislike --> | ||
| 197 | <li> | 225 | <li> |
| 198 | <img src="../assets/images/color-heart.svg" /> | 226 | <img |
| 199 | <a href="javascript:void(0);">0</a> | 227 | src="../assets/images/heart.svg" |
| 228 | v-if="commentList[0].like == false" | ||
| 229 | @click="likeComment(true, commentList[0]._id)" | ||
| 230 | class="cursor-pointer" | ||
| 231 | /> | ||
| 232 | <img | ||
| 233 | src="../assets/images/purple-heart.png" | ||
| 234 | v-if="commentList[0].like == true" | ||
| 235 | @click="likeComment(false, commentList[0]._id)" | ||
| 236 | class="cursor-pointer" | ||
| 237 | /> | ||
| 238 | <a href="javascript:void(0);">{{ | ||
| 239 | commentList[0].likes.length | ||
| 240 | }}</a> | ||
| 200 | </li> | 241 | </li> |
| 242 | <!-- like/dislike ends --> | ||
| 201 | <li> | 243 | <li> |
| 202 | <img src="../assets/images/rply.svg" /> | 244 | <img src="../assets/images/rply.svg" /> |
| 203 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 245 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 246 | >Reply</a | ||
| 247 | > | ||
| 204 | </li> | 248 | </li> |
| 205 | </ul> | 249 | </ul> |
| 206 | </div> | 250 | </div> |
| 207 | <!-- comments box --> | 251 | <!-- comments box --> |
| 208 | </div> | 252 | </div> |
| 209 | </div> | 253 | </div> |
| 210 | <img | 254 | <img |
| 211 | class="s-user-comments m-0" | 255 | class="s-user-comments m-0" |
| 212 | :src="currentSlideData.payload.metaData.authorImage" | 256 | :src="currentSlideData.payload.metaData.authorImage" |
| 213 | /> | 257 | /> |
| 214 | <div class="comments-a-wrp ct-width"> | 258 | <div class="comments-a-wrp ct-width"> |
| 215 | <div class="single-author-li-comments"> | 259 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 216 | <div class="a-intro-comments"> | 260 | <div class="a-intro-comments"> |
| 217 | <p> | 261 | <p> |
| 218 | {{currentSlideData.payload.comments[0].comment}} | 262 | {{commentList[1].comment}} |
| 219 | </p> | 263 | </p> |
| 220 | <ul class="rly-comment-set"> | 264 | <ul class="rly-comment-set"> |
| 265 | <!-- like/dislike --> | ||
| 221 | <li> | 266 | <li> |
| 222 | <img src="../assets/images/color-heart.svg" /> | 267 | <img |
| 223 | <a href="javascript:void(0);">0</a> | 268 | src="../assets/images/heart.svg" |
| 269 | v-if="commentList[1].like == false" | ||
| 270 | @click="likeComment(true, commentList[1]._id)" | ||
| 271 | class="cursor-pointer" | ||
| 272 | /> | ||
| 273 | <img | ||
| 274 | src="../assets/images/purple-heart.png" | ||
| 275 | v-if="commentList[1].like == true" | ||
| 276 | @click="likeComment(false, commentList[1]._id)" | ||
| 277 | class="cursor-pointer" | ||
| 278 | /> | ||
| 279 | <a href="javascript:void(0);">{{ | ||
| 280 | commentList[1].likes.length | ||
| 281 | }}</a> | ||
| 224 | </li> | 282 | </li> |
| 283 | <!-- like/dislike ends --> | ||
| 225 | <li> | 284 | <li> |
| 226 | <img src="../assets/images/rply.svg" /> | 285 | <img src="../assets/images/rply.svg" /> |
| 227 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 286 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 287 | >Reply</a | ||
| 288 | > | ||
| 228 | </li> | 289 | </li> |
| 229 | </ul> | 290 | </ul> |
| 230 | </div> | 291 | </div> |
| 231 | <!-- comments box --> | 292 | <!-- comments box --> |
| 232 | </div> | 293 | </div> |
| 233 | <!-- single author comments --> | 294 | <!-- single author comments --> |
| 234 | <div class="single-author-li-comments"> | 295 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> |
| 235 | <div class="a-intro-comments"> | 296 | <div class="a-intro-comments"> |
| 236 | <p> | 297 | <p> |
| 237 | {{currentSlideData.payload.comments[1].comment}} | 298 | {{commentList[2].comment}} |
| 238 | </p> | 299 | </p> |
| 239 | <ul class="rly-comment-set"> | 300 | <ul class="rly-comment-set"> |
| 301 | <!-- like/dislike --> | ||
| 240 | <li> | 302 | <li> |
| 241 | <img src="../assets/images/color-heart.svg" /> | 303 | <img |
| 242 | <a href="javascript:void(0);">0</a> | 304 | src="../assets/images/heart.svg" |
| 305 | v-if="commentList[2].like == false" | ||
| 306 | @click="likeComment(true, commentList[2]._id)" | ||
| 307 | class="cursor-pointer" | ||
| 308 | /> | ||
| 309 | <img | ||
| 310 | src="../assets/images/purple-heart.png" | ||
| 311 | v-if="commentList[2].like == true" | ||
| 312 | @click="likeComment(false, commentList[2]._id)" | ||
| 313 | class="cursor-pointer" | ||
| 314 | /> | ||
| 315 | <a href="javascript:void(0);">{{ | ||
| 316 | commentList[2].likes.length | ||
| 317 | }}</a> | ||
| 243 | </li> | 318 | </li> |
| 319 | <!-- like/dislike ends --> | ||
| 244 | <li> | 320 | <li> |
| 245 | <img src="../assets/images/rply.svg" /> | 321 | <img src="../assets/images/rply.svg" /> |
| 246 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 322 | <a href="javascript:void(0);" @click="reply_cht_box(2)" |
| 323 | >Reply</a | ||
| 324 | > | ||
| 247 | </li> | 325 | </li> |
| 248 | </ul> | 326 | </ul> |
| 249 | </div> | 327 | </div> |
| 250 | <!-- comments box --> | 328 | <!-- comments box --> |
| 251 | </div> | 329 | </div> |
| 252 | <div class="single-author-li-comments"> | 330 | <!-- coment box 3 --> |
| 331 | <!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | ||
| 253 | <div class="a-intro-comments"> | 332 | <div class="a-intro-comments"> |
| 254 | <p> | 333 | <p> |
| 255 | {{currentSlideData.payload.comments[2].comment}} | 334 | {{commentList[3].comment}} |
| 256 | </p> | 335 | </p> |
| 257 | <!-- <p> | 336 | <ul class="rly-comment-set"> |
| 258 | Before I dive in to showcase my observations and userflows | ||
| 259 | that stood out to me in the app, I want to call out that the | ||
| 260 | situation or time-frame in which I was using the app is | ||
| 261 | extremely important for what I am about to show as well. | ||
| 262 | </p> --> | ||
| 263 | <ul class="rly-comment-set"> | ||
| 264 | <li> | 337 | <li> |
| 265 | <img src="../assets/images/color-heart.svg" /> | 338 | <img |
| 266 | <a href="javascript:void(0);">0</a> | 339 | src="../assets/images/heart.svg" |
| 340 | v-if="commentList[3].like == false" | ||
| 341 | @click="likeComment(true, commentList[2]._id)" | ||
| 342 | class="cursor-pointer" | ||
| 343 | /> | ||
| 344 | <img | ||
| 345 | src="../assets/images/purple-heart.png" | ||
| 346 | v-if="commentList[3].like == true" | ||
| 347 | @click="likeComment(false, commentList[3]._id)" | ||
| 348 | class="cursor-pointer" | ||
| 349 | /> | ||
| 350 | <a href="javascript:void(0);">{{ | ||
| 351 | commentList[3].likes.length | ||
| 352 | }}</a> | ||
| 267 | </li> | 353 | </li> |
| 268 | <li> | 354 | <li> |
| 269 | <img src="../assets/images/rply.svg" /> | 355 | <img src="../assets/images/rply.svg" /> |
| 270 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 356 | <a href="javascript:void(0);" @click="reply_cht_box(3)" |
| 357 | >Reply</a | ||
| 358 | > | ||
| 271 | </li> | 359 | </li> |
| 272 | </ul> | 360 | </ul> |
| 273 | </div> | 361 | </div> |
| 274 | <!-- comments box --> | 362 | </div> --> |
| 275 | </div> | 363 | <!-- coment box 3 --> |
| 364 | |||
| 365 | |||
| 276 | <!-- single author comments --> | 366 | <!-- single author comments --> |
| 277 | <!-- <div class="a-intro-comments custom-selected-author-style"> | 367 | <!-- <div class="a-intro-comments custom-selected-author-style"> |
| 278 | <img src="../assets/images/org-rect.svg" class="rect" /> | 368 | <img src="../assets/images/org-rect.svg" class="rect" /> |
| 279 | <div class="top-wrp"> | 369 | <div class="top-wrp"> |
| 280 | 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> |
| 281 | </div> | 371 | </div> |
| 282 | <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> |
| 283 | <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> |
| 284 | 374 | ||
| 285 | 375 | ||
| 286 | </div> --> | 376 | </div> --> |
| 287 | <!-- comments box --> | 377 | <!-- comments box --> |
| 288 | </div> | 378 | </div> |
| 289 | </div> | 379 | </div> |
| 290 | <!-- single author comments --> | 380 | <!-- single author comments --> |
| 291 | <div class="footer-nav"> | 381 | <div class="footer-nav"> |
| 292 | <div class="footer-top white-bg"> | 382 | <div class="footer-top white-bg"> |
| 293 | <div class="row"> | 383 | <div class="row"> |
| 294 | <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"> |
| 295 | <div class="row h-100p"> | 385 | <div class="row h-100p"> |
| 296 | <div | 386 | <div |
| 297 | 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" |
| 298 | > | 388 | > |
| 299 | <div class="ft-comments-group testi-photos-ct"> | 389 | <div class="ft-comments-group testi-photos-ct"> |
| 300 | <div class="c-with-photos"> | 390 | <div class="c-with-photos"> |
| 301 | <span class="count-comments" | 391 | <span class="count-comments" |
| 302 | >{{ commentList.length - 1 }}+ Comments</span | 392 | >{{ getLastcomment("count", commentList) }}+ |
| 393 | Comments</span | ||
| 303 | ><!-- count commets --> | 394 | ><!-- count commets --> |
| 304 | <ul class="comments-photos"> | 395 | <ul class="comments-photos"> |
| 305 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | 396 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 306 | <li><img src="../assets/images/c-photo-2.png" /></li> --> | 397 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 307 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | 398 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 308 | <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> --> | ||
| 309 | </ul> | 399 | </ul> |
| 310 | <!-- comment photos --> | 400 | <!-- comment photos --> |
| 311 | </div> | 401 | </div> |
| 312 | <div class="comments-detail all-c-space"> | 402 | <div class="comments-detail all-c-space"> |
| 313 | <span | 403 | <span |
| 314 | >{{ commentList[commentList.length - 1].user.name }} | 404 | >{{ getLastcomment("name", commentList) }} |
| 315 | <a href="javascript:void(0);" @click="open_ct_box" | 405 | <a href="javascript:void(0);" @click="open_ct_box" |
| 316 | >View All</a | 406 | >View All</a |
| 317 | ></span | 407 | ></span |
| 318 | > | 408 | > |
| 319 | <p> | 409 | <p> |
| 320 | <!-- I wonder what the difference between “Dunzo Assistant” | 410 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 321 | and “Pickup and Drop... --> | 411 | and “Pickup and Drop... --> |
| 322 | {{ commentList[commentList.length - 1].comment }} | 412 | {{ getLastcomment("msg", commentList) }} |
| 323 | </p> | 413 | </p> |
| 324 | </div> | 414 | </div> |
| 325 | <!-- comments detail --> | 415 | <!-- comments detail --> |
| 326 | </div> | 416 | </div> |
| 327 | <!-- comments Group --> | 417 | <!-- comments Group --> |
| 328 | </div> | 418 | </div> |
| 329 | </div> | 419 | </div> |
| 330 | </div> | 420 | </div> |
| 331 | <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"> |
| 332 | <div class="comment-frm no-c-frm"> | 422 | <div class="comment-frm no-c-frm"> |
| 333 | <div class="row"> | 423 | <div class="row"> |
| 334 | <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"> |
| 335 | <div class="form-group frm-wdth addfrm-spc"> | 425 | <div class="form-group frm-wdth addfrm-spc"> |
| 336 | <input | 426 | <input |
| 337 | type="text" | 427 | type="text" |
| 338 | class="form-control" | 428 | class="form-control" |
| 339 | placeholder="Something on your mind?" | 429 | placeholder="Something on your mind?" |
| 340 | id="open_ct_box" | 430 | id="open_ct_box" |
| 341 | v-model="comment" | 431 | v-model="comment" |
| 342 | /> | 432 | /> |
| 343 | </div> | 433 | </div> |
| 344 | </div> | 434 | </div> |
| 345 | <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"> |
| 346 | <a | 436 | <a |
| 347 | href="javascript:void(0);" | 437 | href="javascript:void(0);" |
| 348 | @click="createComment" | 438 | @click="createComment" |
| 349 | class="add-comment" | 439 | class="add-comment" |
| 350 | ><img src="../assets/images/add-comment.svg" /> | 440 | ><img src="../assets/images/add-comment.svg" /> |
| 351 | Comment</a | 441 | Comment</a |
| 352 | > | 442 | > |
| 353 | </div> | 443 | </div> |
| 354 | </div> | 444 | </div> |
| 355 | <!-- comment from --> | 445 | <!-- comment from --> |
| 356 | </div> | 446 | </div> |
| 357 | </div> | 447 | </div> |
| 358 | <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"> |
| 359 | <ul class="top-intro-bt"> | 449 | <ul class="top-intro-bt"> |
| 360 | <li> | 450 | <li> |
| 361 | <a href="javascript:void(0);" @click="goBack" | 451 | <a href="javascript:void(0);" @click="goBack" |
| 362 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 452 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 363 | > | 453 | > |
| 364 | </li> | 454 | </li> |
| 365 | <li> | 455 | <li> |
| 366 | <a href="javascript:void(0);" @click="goNext" | 456 | <a href="javascript:void(0);" @click="goNext" |
| 367 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 457 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 368 | slide</a | 458 | slide</a |
| 369 | > | 459 | > |
| 370 | </li> | 460 | </li> |
| 371 | </ul> | 461 | </ul> |
| 372 | </div> | 462 | </div> |
| 373 | <!-- buttons list --> | 463 | <!-- buttons list --> |
| 374 | </div> | 464 | </div> |
| 375 | </div> | 465 | </div> |
| 376 | <!-- footer top --> | 466 | <!-- footer top --> |
| 377 | <div class="footer-bottom"> | 467 | <div class="footer-bottom"> |
| 378 | <ul> | 468 | <ul> |
| 379 | <li class="active"></li> | 469 | <li class="active"></li> |
| 380 | <li></li> | 470 | <li></li> |
| 381 | </ul> | 471 | </ul> |
| 382 | </div> | 472 | </div> |
| 383 | <!-- footer top --> | 473 | <!-- footer top --> |
| 384 | </div> | 474 | </div> |
| 385 | <!-- footer --> | 475 | <!-- footer --> |
| 386 | </div> | 476 | </div> |
| 387 | <!-- body wrapper --> | 477 | <!-- body wrapper --> |
| 388 | </div> | 478 | </div> |
| 389 | <!-- main wrapper --> | 479 | <!-- main wrapper --> |
| 390 | </main> | 480 | </main> |
| 391 | </template> | 481 | </template> |
| 392 | 482 | ||
| 393 | <script> | 483 | <script> |
| 394 | import Vue from "vue"; | 484 | import Vue from "vue"; |
| 395 | import router from "../router"; | 485 | import router from "../router"; |
| 396 | import axios from "axios"; | 486 | import axios from "axios"; |
| 397 | import moment from 'moment'; | 487 | import moment from 'moment'; |
| 488 | import Header from "./Header"; | ||
| 398 | 489 | ||
| 399 | export default { | 490 | export default { |
| 491 | components: { | ||
| 492 | Header: Header, | ||
| 493 | }, | ||
| 400 | name: "noscreenshotSingleautho", | 494 | name: "noscreenshotSingleautho", |
| 401 | 495 | ||
| 402 | data() { | 496 | data() { |
| 403 | return { | 497 | return { |
| 404 | allSlide: [], | 498 | allSlide: [], |
| 405 | currentSlideIndex: null, | 499 | currentSlideIndex: null, |
| 406 | currentSlideData: null, | 500 | currentSlideData: null, |
| 407 | // | 501 | // |
| 408 | usertoken: null, | 502 | usertoken: null, |
| 409 | commentList: [], | 503 | commentList: [], |
| 410 | comment: null, | 504 | comment: null, |
| 411 | parentInput:true, | 505 | parentInput:true, |
| 412 | }; | 506 | }; |
| 413 | }, | 507 | }, |
| 414 | mounted() { | 508 | mounted() { |
| 415 | var allSlideData = localStorage.getItem( | 509 | var allSlideData = localStorage.getItem( |
| 416 | "spotlight_slide" + this.$route.params.caseStudyId | 510 | "spotlight_slide" + this.$route.params.caseStudyId |
| 417 | ); | 511 | ); |
| 418 | if (allSlideData) { | 512 | if (allSlideData) { |
| 419 | this.allSlide = JSON.parse(allSlideData); | 513 | this.allSlide = JSON.parse(allSlideData); |
| 420 | this.getCurrentSlideData(); | 514 | this.getCurrentSlideData(); |
| 421 | } | 515 | } |
| 422 | var userdata = localStorage.getItem("spotlight_usertoken"); | 516 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 423 | if (userdata) { | 517 | if (userdata) { |
| 424 | userdata = JSON.parse(userdata); | 518 | userdata = JSON.parse(userdata); |
| 425 | this.usertoken = userdata.token; | 519 | this.usertoken = userdata.token; |
| 426 | this.getComment(); | 520 | this.getComment(); |
| 427 | } | 521 | } |
| 428 | }, | 522 | }, |
| 429 | methods: { | 523 | methods: { |
| 430 | getCurrentSlideData() { | 524 | getCurrentSlideData() { |
| 431 | var i = this.allSlide.findIndex( | 525 | var i = this.allSlide.findIndex( |
| 432 | (slide_) => slide_.slideId == this.$route.params.slideId | 526 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 433 | ); | 527 | ); |
| 434 | this.currentSlideIndex = i; | 528 | this.currentSlideIndex = i; |
| 435 | this.currentSlideData = this.allSlide[i]; | 529 | this.currentSlideData = this.allSlide[i]; |
| 436 | console.log("currentSlideData", this.currentSlideData); | 530 | console.log("currentSlideData", this.currentSlideData); |
| 437 | }, | 531 | }, |
| 438 | goNext() { | 532 | goNext() { |
| 439 | this.currentSlideIndex++; | 533 | this.currentSlideIndex++; |
| 440 | this.$router.push({ | 534 | this.$router.push({ |
| 441 | name: this.allSlide[this.currentSlideIndex].ur, | 535 | name: this.allSlide[this.currentSlideIndex].ur, |
| 442 | params: { | 536 | params: { |
| 443 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 537 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 444 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 538 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 445 | }, | 539 | }, |
| 446 | }); | 540 | }); |
| 447 | }, | 541 | }, |
| 448 | goBack() { | 542 | goBack() { |
| 449 | this.currentSlideIndex--; | 543 | this.currentSlideIndex--; |
| 450 | this.$router.push({ | 544 | this.$router.push({ |
| 451 | name: this.allSlide[this.currentSlideIndex].ur, | 545 | name: this.allSlide[this.currentSlideIndex].ur, |
| 452 | params: { | 546 | params: { |
| 453 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 547 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 454 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 548 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 455 | }, | 549 | }, |
| 456 | }); | 550 | }); |
| 457 | }, | 551 | }, |
| 458 | createComment() { | 552 | createComment() { |
| 459 | console.log("===", this.comment); | 553 | console.log("===", this.comment); |
| 460 | var obj = { | 554 | var obj = { |
| 461 | caseStudyId: this.currentSlideData.caseStudyId, | 555 | caseStudyId: this.currentSlideData.caseStudyId, |
| 462 | slideId: this.currentSlideData.slideId, | 556 | slideId: this.currentSlideData.slideId, |
| 463 | comment: this.comment, | 557 | comment: this.comment, |
| 464 | 558 | ||
| 465 | }; | 559 | }; |
| 466 | axios | 560 | axios |
| 467 | .post("/bounceBoard/comment", obj, { | 561 | .post("/bounceBoard/comment", obj, { |
| 468 | headers: { | 562 | headers: { |
| 469 | Authorization: "Bearer " + this.usertoken, | 563 | Authorization: "Bearer " + this.usertoken, |
| 470 | }, | 564 | }, |
| 471 | }) | 565 | }) |
| 472 | .then((response) => { | 566 | .then((response) => { |
| 473 | this.comment = null; | 567 | this.comment = null; |
| 474 | this.getComment(); | 568 | this.getComment(); |
| 475 | console.log(response); | 569 | console.log(response); |
| 476 | }) | 570 | }) |
| 477 | .catch((error) => { | 571 | .catch((error) => { |
| 478 | if (error.response) { | 572 | if (error.response) { |
| 479 | this.$toaster.error(error.response.data.message); | 573 | this.$toaster.error(error.response.data.message); |
| 480 | } | 574 | } |
| 481 | }); | 575 | }); |
| 482 | }, | 576 | }, |
| 483 | createChildComment(cmnt) { | 577 | createChildComment(cmnt) { |
| 484 | console.log(cmnt,"===", this.comment); | 578 | console.log(cmnt,"===", this.comment); |
| 485 | var obj = { | 579 | var obj = { |
| 486 | caseStudyId: this.currentSlideData.caseStudyId, | 580 | caseStudyId: this.currentSlideData.caseStudyId, |
| 487 | slideId: this.currentSlideData.slideId, | 581 | slideId: this.currentSlideData.slideId, |
| 488 | comment: this.comment, | 582 | comment: this.comment, |
| 489 | parentId: cmnt._id, | 583 | parentId: cmnt._id, |
| 490 | 584 | ||
| 491 | }; | 585 | }; |
| 492 | axios | 586 | axios |
| 493 | .post("/bounceBoard/comment", obj, { | 587 | .post("/bounceBoard/comment", obj, { |
| 494 | headers: { | 588 | headers: { |
| 495 | Authorization: "Bearer " + this.usertoken, | 589 | Authorization: "Bearer " + this.usertoken, |
| 496 | }, | 590 | }, |
| 497 | }) | 591 | }) |
| 498 | .then((response) => { | 592 | .then((response) => { |
| 499 | this.comment = null; | 593 | this.comment = null; |
| 500 | this.discardRply(cmnt); | 594 | this.discardRply(cmnt); |
| 501 | this.getComment(); | 595 | this.getComment(); |
| 502 | console.log(response); | 596 | console.log(response); |
| 503 | }) | 597 | }) |
| 504 | .catch((error) => { | 598 | .catch((error) => { |
| 505 | if (error.response) { | 599 | if (error.response) { |
| 506 | this.$toaster.error(error.response.data.message); | 600 | this.$toaster.error(error.response.data.message); |
| 507 | } | 601 | } |
| 508 | }); | 602 | }); |
| 509 | }, | 603 | }, |
| 510 | getComment() { | 604 | getComment() { |
| 511 | axios | 605 | axios |
| 512 | .get( | 606 | .get( |
| 513 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 607 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 514 | { | 608 | { |
| 515 | headers: { | 609 | headers: { |
| 516 | Authorization: "Bearer " + this.usertoken, | 610 | Authorization: "Bearer " + this.usertoken, |
| 517 | }, | 611 | }, |
| 518 | } | 612 | } |
| 519 | ) | 613 | ) |
| 520 | .then((response) => { | 614 | .then((response) => { |
| 521 | console.log(response.data); | 615 | console.log(response.data); |
| 522 | var comments = []; | 616 | var comments = []; |
| 523 | var keys = Object.keys(response.data.data) | 617 | var keys = Object.keys(response.data.data) |
| 524 | response.data.data | 618 | response.data.data |
| 525 | keys.forEach((key_) => { | 619 | keys.forEach((key_) => { |
| 526 | comments.push(response.data.data[key_]) | 620 | comments.push(response.data.data[key_]) |
| 527 | }); | 621 | }); |
| 528 | comments.forEach((coment_)=>{ | 622 | comments.forEach((coment_)=>{ |
| 529 | coment_.childInput = false; | 623 | coment_.childInput = false; |
| 530 | }); | 624 | }); |
| 531 | console.log("comments",comments) | 625 | console.log("comments",comments) |
| 532 | this.commentList = comments; | 626 | this.commentList = comments; |
| 533 | }) | 627 | }) |
| 534 | .catch((error) => console.log(error)); | 628 | .catch((error) => console.log(error)); |
| 535 | }, | 629 | }, |
| 536 | dateGenerator(curreDate){ | 630 | dateGenerator(curreDate){ |
| 537 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 631 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 538 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 632 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 539 | var result = todayDate.diff(endDate, 'days'); | 633 | var result = todayDate.diff(endDate, 'days'); |
| 540 | return result; | 634 | return result; |
| 541 | }, | 635 | }, |
| 542 | goToLogin() { | 636 | goToLogin() { |
| 543 | this.$router.push("/login"); | 637 | this.$router.push("/login"); |
| 544 | }, | 638 | }, |
| 545 | goToSignUp() { | 639 | goToSignUp() { |
| 546 | this.$router.push("/"); | 640 | this.$router.push("/"); |
| 547 | }, | 641 | }, |
| 548 | chtbox_close() { | 642 | chtbox_close() { |
| 549 | $("#cht_box_close").removeClass("cht_close"); | 643 | $("#cht_box_close").removeClass("cht_close"); |
| 550 | $("#open_ct_box, .c_hide").show(); | 644 | $("#open_ct_box, .c_hide").show(); |
| 551 | $(".footer-top").addClass("white-bg"); | 645 | $(".footer-top").addClass("white-bg"); |
| 552 | }, | 646 | }, |
| 553 | open_ct_box() { | 647 | open_ct_box() { |
| 554 | $("#cht_box_close").addClass("cht_close"); | 648 | $("#cht_box_close").addClass("cht_close"); |
| 555 | $("#open_ct_box, .c_hide").hide(); | 649 | $("#open_ct_box, .c_hide").hide(); |
| 556 | $(".footer-top").removeClass("white-bg"); | 650 | $(".footer-top").removeClass("white-bg"); |
| 557 | }, | 651 | }, |
| 558 | eachRply(cmnt) { | 652 | eachRply(cmnt) { |
| 559 | cmnt.childInput = true; | 653 | cmnt.childInput = true; |
| 560 | this.parentInput = false; | 654 | this.parentInput = false; |
| 655 | this.comment = null; | ||
| 656 | setTimeout(() => { | ||
| 657 | document.getElementById("childInput").focus(); | ||
| 658 | }, 100); | ||
| 561 | }, | 659 | }, |
| 562 | discardRply(cmnt) { | 660 | discardRply(cmnt) { |
| 563 | cmnt.childInput = false; | 661 | cmnt.childInput = false; |
| 564 | this.parentInput = true; | 662 | this.parentInput = true; |
| 565 | 663 | this.comment = null; | |
| 664 | }, | ||
| 665 | reply_cht_box(i) { | ||
| 666 | console.log(this.commentList, "cmnt"); | ||
| 667 | $("#cht_box_close").addClass("cht_close"); | ||
| 668 | $("#open_ct_box, .c_hide").hide(); | ||
| 669 | $(".footer-top").removeClass("white-bg"); | ||
| 670 | this.commentList[i].childInput = true; | ||
| 671 | this.parentInput = false; | ||
| 672 | this.comment = null; | ||
| 673 | setTimeout(() => { | ||
| 674 | document.getElementById("childInput").focus(); | ||
| 675 | }, 100); | ||
| 676 | }, | ||
| 677 | likeComment(status, id) { | ||
| 678 | console.log("===", this.comment); | ||
| 679 | var obj = { | ||
| 680 | commentId: id, | ||
| 681 | like: status, | ||
| 682 | }; | ||
| 683 | axios | ||
| 684 | .post("/bounceBoard/like", obj, { | ||
| 685 | headers: { | ||
| 686 | Authorization: "Bearer " + this.usertoken, | ||
| 687 | }, | ||
| 688 | }) | ||
| 689 | .then((response) => { | ||
| 690 | this.getComment(); | ||
| 691 | console.log(response); | ||
| 692 | }) | ||
| 693 | .catch((error) => { | ||
| 694 | if (error.response) { | ||
| 695 | this.$toaster.error(error.response.data.message); | ||
| 696 | } | ||
| 697 | }); | ||
| 698 | }, |
src/components/Profile.vue
| 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/replace.svg" /><span | 16 | ><img src="../assets/images/replace.svg" /><span |
| 17 | >Replace Avatar</span | 17 | >Replace Avatar</span |
| 18 | ></a | 18 | ></a |
| 19 | > | 19 | > |
| 20 | </li> | 20 | </li> |
| 21 | <li> | 21 | <li> |
| 22 | <a href="javasript:void(0);" @click="getRandomAvatar()" | 22 | <a href="javasript:void(0);" @click="getRandomAvatar()" |
| 23 | ><img src="../assets/images/randomise.svg" /><span | 23 | ><img src="../assets/images/randomise.svg" /><span |
| 24 | >Randomise Avatar</span | 24 | >Randomise Avatar</span |
| 25 | ></a | 25 | ></a |
| 26 | > | 26 | > |
| 27 | </li> | 27 | </li> |
| 28 | </ul> | 28 | </ul> |
| 29 | </div> | 29 | </div> |
| 30 | <!-- header --> | 30 | <!-- header --> |
| 31 | <div class="popup-body"> | 31 | <div class="popup-body"> |
| 32 | <form class="popup-forms"> | 32 | <form class="popup-forms"> |
| 33 | <div class="row"> | 33 | <div class="row"> |
| 34 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 34 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 35 | <div class="form-group floating-label"> | 35 | <div class="form-group floating-label"> |
| 36 | <input | 36 | <input |
| 37 | type="text" | 37 | type="text" |
| 38 | class="form-control" | 38 | class="form-control" |
| 39 | v-model="userData.firstName" | 39 | v-model="userData.firstName" |
| 40 | placeholder=" " | 40 | placeholder=" " |
| 41 | id="fname" | 41 | id="fname" |
| 42 | /> | 42 | /> |
| 43 | <label for="fname">First Name</label> | 43 | <label for="fname">First Name</label> |
| 44 | </div> | 44 | </div> |
| 45 | </div> | 45 | </div> |
| 46 | <!-- input --> | 46 | <!-- input --> |
| 47 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 47 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 48 | <div class="form-group floating-label"> | 48 | <div class="form-group floating-label"> |
| 49 | <input | 49 | <input |
| 50 | type="text" | 50 | type="text" |
| 51 | class="form-control" | 51 | class="form-control" |
| 52 | value="" | 52 | value="" |
| 53 | placeholder=" " | 53 | placeholder=" " |
| 54 | id="lname" | 54 | id="lname" |
| 55 | v-model="userData.lastName" | 55 | v-model="userData.lastName" |
| 56 | /> | 56 | /> |
| 57 | <label for="lname" class="lname">Last Name</label> | 57 | <label for="lname" class="lname">Last Name</label> |
| 58 | </div> | 58 | </div> |
| 59 | </div> | 59 | </div> |
| 60 | <!-- input --> | 60 | <!-- input --> |
| 61 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | 61 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> |
| 62 | <div class="form-group floating-label"> | 62 | <div class="form-group floating-label"> |
| 63 | <input | 63 | <input |
| 64 | type="text" | 64 | type="text" |
| 65 | class="form-control" | 65 | class="form-control" |
| 66 | value="" | 66 | value="" |
| 67 | v-model="userData.designation" | 67 | v-model="userData.designation" |
| 68 | placeholder=" " | 68 | placeholder=" " |
| 69 | id="designation" | 69 | id="designation" |
| 70 | /> | 70 | /> |
| 71 | <label for="designation">Designation</label> | 71 | <label for="designation">Designation</label> |
| 72 | </div> | 72 | </div> |
| 73 | </div> | 73 | </div> |
| 74 | <!-- input --> | 74 | <!-- input --> |
| 75 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 75 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 76 | <div class="form-group floating-label"> | 76 | <div class="form-group floating-label"> |
| 77 | <input | 77 | <input |
| 78 | type="text" | 78 | type="text" |
| 79 | class="form-control" | 79 | class="form-control" |
| 80 | v-model="userData.organisation" | 80 | v-model="userData.organisation" |
| 81 | id="company" | 81 | id="company" |
| 82 | placeholder=" " | 82 | placeholder=" " |
| 83 | /> | 83 | /> |
| 84 | <label for="company">Company</label> | 84 | <label for="company">Company</label> |
| 85 | </div> | 85 | </div> |
| 86 | </div> | 86 | </div> |
| 87 | <!-- input --> | 87 | <!-- input --> |
| 88 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 88 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 89 | <div class="form-group floating-label"> | 89 | <div class="form-group floating-label"> |
| 90 | <textarea | 90 | <textarea |
| 91 | type="text" | 91 | type="text" |
| 92 | class="form-control" | 92 | class="form-control" |
| 93 | value="" | 93 | value="" |
| 94 | v-model="userData.bio" | 94 | v-model="userData.bio" |
| 95 | id="yourself" | 95 | id="yourself" |
| 96 | placeholder=" " | 96 | placeholder=" " |
| 97 | ></textarea> | 97 | ></textarea> |
| 98 | <label for="yourself" | 98 | <label for="yourself" |
| 99 | >Tell others a little about yourself</label | 99 | >Tell others a little about yourself</label |
| 100 | > | 100 | > |
| 101 | </div> | 101 | </div> |
| 102 | </div> | 102 | </div> |
| 103 | <!-- input --> | 103 | <!-- input --> |
| 104 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 104 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 105 | <p class="things">Three things that you talk more about</p> | 105 | <p class="things">Three things that you talk more about</p> |
| 106 | 106 | ||
| 107 | <ul class="interests"> | 107 | <ul class="interests"> |
| 108 | <li v-for="(interest, i) in userData.interests" :key="i"> | 108 | <li v-for="(interest, i) in userData.interests" :key="i"> |
| 109 | <span>{{ interest }}</span> | 109 | <span>{{ interest }}</span> |
| 110 | <a | 110 | <a |
| 111 | href="javascript:void(0);" | 111 | href="javascript:void(0);" |
| 112 | @click="removeInterest(i)" | 112 | @click="removeInterest(i)" |
| 113 | class="cat-minus" | 113 | class="cat-minus" |
| 114 | ><img src="../assets/images/minus.svg" | 114 | ><img src="../assets/images/minus.svg" |
| 115 | /></a> | 115 | /></a> |
| 116 | </li> | 116 | </li> |
| 117 | <li> | 117 | <li> |
| 118 | <input | 118 | <input |
| 119 | class="" | 119 | class="" |
| 120 | placeholder="Add interest" | 120 | placeholder="Add interest" |
| 121 | v-on:keyup.enter="addInterest" | 121 | v-on:keyup.enter="addInterest" |
| 122 | v-model="interestName" | 122 | v-model="interestName" |
| 123 | /> | 123 | /> |
| 124 | <a href="javascript:void(0);" @click="addInterest()" | 124 | <a href="javascript:void(0);" @click="addInterest()" |
| 125 | ><img src="../assets/images/plus-circle.svg" | 125 | ><img src="../assets/images/plus-circle.svg" |
| 126 | /></a> | 126 | /></a> |
| 127 | </li> | 127 | </li> |
| 128 | </ul> | 128 | </ul> |
| 129 | </div> | 129 | </div> |
| 130 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 130 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 131 | <p class="things">Choose Background color</p> | 131 | <p class="things">Choose Background color</p> |
| 132 | 132 | ||
| 133 | <ul class="colors"> | 133 | <ul class="colors"> |
| 134 | <li> | 134 | <li> |
| 135 | <a | 135 | <a |
| 136 | href="javascript:void(0);" | 136 | href="javascript:void(0);" |
| 137 | id="#C4C4C4" | 137 | id="#C4C4C4" |
| 138 | class="silver" | 138 | class="silver" |
| 139 | @click="changeColor('#C4C4C4')" | 139 | @click="changeColor('#C4C4C4')" |
| 140 | ></a> | 140 | ></a> |
| 141 | </li> | 141 | </li> |
| 142 | <li> | 142 | <li> |
| 143 | <a | 143 | <a |
| 144 | href="javascript:void(0);" | 144 | href="javascript:void(0);" |
| 145 | id="#FFF6D7" | 145 | id="#FFF6D7" |
| 146 | class="milk-punch" | 146 | class="milk-punch" |
| 147 | @click="changeColor('#FFF6D7')" | 147 | @click="changeColor('#FFF6D7')" |
| 148 | ></a> | 148 | ></a> |
| 149 | </li> | 149 | </li> |
| 150 | <li> | 150 | <li> |
| 151 | <a | 151 | <a |
| 152 | href="javascript:void(0);" | 152 | href="javascript:void(0);" |
| 153 | id="#BDDBFF" | 153 | id="#BDDBFF" |
| 154 | class="french-pass" | 154 | class="french-pass" |
| 155 | @click="changeColor('#BDDBFF')" | 155 | @click="changeColor('#BDDBFF')" |
| 156 | ></a> | 156 | ></a> |
| 157 | </li> | 157 | </li> |
| 158 | <li> | 158 | <li> |
| 159 | <a | 159 | <a |
| 160 | href="javascript:void(0);" | 160 | href="javascript:void(0);" |
| 161 | id="#C0FAFE" | 161 | id="#C0FAFE" |
| 162 | class="cyan-french-pass" | 162 | class="cyan-french-pass" |
| 163 | @click="changeColor('#C0FAFE')" | 163 | @click="changeColor('#C0FAFE')" |
| 164 | ></a> | 164 | ></a> |
| 165 | </li> | 165 | </li> |
| 166 | <li> | 166 | <li> |
| 167 | <a | 167 | <a |
| 168 | href="javascript:void(0);" | 168 | href="javascript:void(0);" |
| 169 | id="#FFDBDC" | 169 | id="#FFDBDC" |
| 170 | class="cosmos" | 170 | class="cosmos" |
| 171 | @click="changeColor('#FFDBDC')" | 171 | @click="changeColor('#FFDBDC')" |
| 172 | ></a> | 172 | ></a> |
| 173 | </li> | 173 | </li> |
| 174 | <li> | 174 | <li> |
| 175 | <a | 175 | <a |
| 176 | href="javascript:void(0);" | 176 | href="javascript:void(0);" |
| 177 | id="#FEE6AC" | 177 | id="#FEE6AC" |
| 178 | class="cape-Honey" | 178 | class="cape-Honey" |
| 179 | @click="changeColor('#FEE6AC')" | 179 | @click="changeColor('#FEE6AC')" |
| 180 | ></a> | 180 | ></a> |
| 181 | </li> | 181 | </li> |
| 182 | <li> | 182 | <li> |
| 183 | <a | 183 | <a |
| 184 | href="javascript:void(0);" | 184 | href="javascript:void(0);" |
| 185 | id="#E5DFF0" | 185 | id="#E5DFF0" |
| 186 | class="snuff" | 186 | class="snuff" |
| 187 | @click="changeColor('#E5DFF0')" | 187 | @click="changeColor('#E5DFF0')" |
| 188 | ></a> | 188 | ></a> |
| 189 | </li> | 189 | </li> |
| 190 | <li> | 190 | <li> |
| 191 | <a | 191 | <a |
| 192 | href="javascript:void(0);" | 192 | href="javascript:void(0);" |
| 193 | id="#DFE7EF" | 193 | id="#DFE7EF" |
| 194 | class="catskillWhite" | 194 | class="catskillWhite" |
| 195 | @click="changeColor('#DFE7EF')" | 195 | @click="changeColor('#DFE7EF')" |
| 196 | ></a> | 196 | ></a> |
| 197 | </li> | 197 | </li> |
| 198 | <li> | 198 | <li> |
| 199 | <a | 199 | <a |
| 200 | href="javascript:void(0);" | 200 | href="javascript:void(0);" |
| 201 | id="#FFF" | 201 | id="#FFF" |
| 202 | class="white" | 202 | class="white" |
| 203 | @click="changeColor('#FFF')" | 203 | @click="changeColor('#FFF')" |
| 204 | ></a> | 204 | ></a> |
| 205 | </li> | 205 | </li> |
| 206 | </ul> | 206 | </ul> |
| 207 | </div> | 207 | </div> |
| 208 | <div class="col-lg-12 mt-50"> | 208 | <div class="col-lg-12 mt-50"> |
| 209 | <p class="notifications"> | 209 | <p class="notifications"> |
| 210 | Recieve notifications when you recieve a comment/ Upvote | 210 | Recieve notifications when you recieve a comment/ Upvote |
| 211 | </p> | 211 | </p> |
| 212 | <div class="switch-bt-wrp"> | 212 | <div class="switch-bt-wrp"> |
| 213 | <label class="switch-btn"> | 213 | <label class="switch-btn"> |
| 214 | <input type="checkbox" class="toggle-btn" /> | 214 | <input type="checkbox" class="toggle-btn" /> |
| 215 | <span class="rounded-toggle"></span> | 215 | <span class="rounded-toggle"></span> |
| 216 | </label> | 216 | </label> |
| 217 | <span class="onoff">on/off</span> | 217 | <span class="onoff">on/off</span> |
| 218 | </div> | 218 | </div> |
| 219 | </div> | 219 | </div> |
| 220 | <div class="col-lg-12"> | 220 | <div class="col-lg-12"> |
| 221 | <p class="add-socail-ch"> | 221 | <p class="add-socail-ch"> |
| 222 | Add your social Channels <span></span> | 222 | Add your social Channels <span></span> |
| 223 | </p> | 223 | </p> |
| 224 | </div> | 224 | </div> |
| 225 | 225 | ||
| 226 | <div | 226 | <div |
| 227 | class="row" | 227 | class="row" |
| 228 | style="width: 100%" | 228 | style="width: 100%" |
| 229 | v-for="(social, i) in selectedSocialLink" | 229 | v-for="(social, i) in selectedSocialLink" |
| 230 | :key="i" | 230 | :key="i" |
| 231 | > | 231 | > |
| 232 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 232 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 233 | <div class="form-group floating-label"> | 233 | <div class="form-group floating-label"> |
| 234 | <select class="form-group"> | 234 | <select class="form-group"> |
| 235 | <option value="Linkedin">{{ social.displayName }}</option> | 235 | <option value="Linkedin">{{ social.displayName }}</option> |
| 236 | </select> | 236 | </select> |
| 237 | <span class="select-arrow" | 237 | <span class="select-arrow" |
| 238 | ><img src="../assets/images/chevron-down.svg" | 238 | ><img src="../assets/images/chevron-down.svg" |
| 239 | /></span> | 239 | /></span> |
| 240 | </div> | 240 | </div> |
| 241 | </div> | 241 | </div> |
| 242 | <!-- input --> | 242 | <!-- input --> |
| 243 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 243 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 244 | <div class="form-group floating-label"> | 244 | <div class="form-group floating-label"> |
| 245 | <input | 245 | <input |
| 246 | type="text" | 246 | type="text" |
| 247 | class="form-control" | 247 | class="form-control" |
| 248 | value="" | 248 | value="" |
| 249 | placeholder="Paste your profile URL here" | 249 | placeholder="Paste your profile URL here" |
| 250 | id="" | 250 | id="" |
| 251 | v-model="social.fieldValue" | 251 | v-model="social.fieldValue" |
| 252 | /> | 252 | /> |
| 253 | </div> | 253 | </div> |
| 254 | </div> | 254 | </div> |
| 255 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> | 255 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> |
| 256 | <ul class="interests"> | 256 | <ul class="interests"> |
| 257 | <li> | 257 | <li> |
| 258 | <a | 258 | <a |
| 259 | @click="removeSocialLink(i)" | 259 | @click="removeSocialLink(i)" |
| 260 | href="javascript:void(0);" | 260 | href="javascript:void(0);" |
| 261 | class="cat-minus" | 261 | class="cat-minus" |
| 262 | ><img src="../assets/images/minus.svg" | 262 | ><img src="../assets/images/minus.svg" |
| 263 | /></a> | 263 | /></a> |
| 264 | </li> | 264 | </li> |
| 265 | </ul> | 265 | </ul> |
| 266 | </div> | 266 | </div> |
| 267 | </div> | 267 | </div> |
| 268 | <!-- input --> | 268 | <!-- input --> |
| 269 | 269 | ||
| 270 | <!-- input --> | 270 | <!-- input --> |
| 271 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 271 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 272 | <div class="form-group floating-label"> | 272 | <div class="form-group floating-label"> |
| 273 | <select | 273 | <select |
| 274 | class="form-group" | 274 | class="form-group" |
| 275 | v-model="currentLink" | 275 | v-model="currentLink" |
| 276 | v-on:change="addSocialLink(currentLink)" | 276 | v-on:change="addSocialLink(currentLink)" |
| 277 | > | 277 | > |
| 278 | <option value="null">Add another</option> | 278 | <option value="null">Add another</option> |
| 279 | <option | 279 | <option |
| 280 | v-for="(social, i) in socialLink" | 280 | v-for="(social, i) in socialLink" |
| 281 | :key="i" | 281 | :key="i" |
| 282 | :value="social.fieldName" | 282 | :value="social.fieldName" |
| 283 | > | 283 | > |
| 284 | {{ social.displayName }} | 284 | {{ social.displayName }} |
| 285 | </option> | 285 | </option> |
| 286 | </select> | 286 | </select> |
| 287 | <span class="select-arrow" | 287 | <span class="select-arrow" |
| 288 | ><img src="../assets/images/chevron-down.svg" | 288 | ><img src="../assets/images/chevron-down.svg" |
| 289 | /></span> | 289 | /></span> |
| 290 | </div> | 290 | </div> |
| 291 | </div> | 291 | </div> |
| 292 | <!-- input --> | 292 | <!-- input --> |
| 293 | </div> | 293 | </div> |
| 294 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" | 294 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" |
| 295 | >Save</a | 295 | >Save</a |
| 296 | > | 296 | > |
| 297 | </form> | 297 | </form> |
| 298 | </div> | 298 | </div> |
| 299 | <div class="clearfix"></div> | 299 | <div class="clearfix"></div> |
| 300 | </div> | 300 | </div> |
| 301 | <!-- add profile --> | 301 | <!-- add profile --> |
| 302 | </div> | 302 | </div> |
| 303 | <!-- profile --> | 303 | <!-- profile --> |
| 304 | <div class="container-fluid inner-wrp"> | 304 | <div class="container-fluid inner-wrp"> |
| 305 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 305 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 306 | <a class="navbar-brand" href="javasript:void(0);" | 306 | <a class="navbar-brand" href="javasript:void(0);" |
| 307 | ><img src="../assets/images/logo.png" | 307 | ><img src="../assets/images/logo.png" |
| 308 | /></a> | 308 | /></a> |
| 309 | <button | 309 | <button |
| 310 | class="navbar-toggler" | 310 | class="navbar-toggler" |
| 311 | type="button" | 311 | type="button" |
| 312 | data-toggle="collapse" | 312 | data-toggle="collapse" |
| 313 | data-target="#navbarsExample03" | 313 | data-target="#navbarsExample03" |
| 314 | aria-controls="navbarsExample03" | 314 | aria-controls="navbarsExample03" |
| 315 | aria-expanded="false" | 315 | aria-expanded="false" |
| 316 | aria-label="Toggle navigation" | 316 | aria-label="Toggle navigation" |
| 317 | > | 317 | > |
| 318 | <span class="navbar-toggler-icon"></span> | 318 | <span class="navbar-toggler-icon"></span> |
| 319 | <span class="navbar-toggler-icon"></span> | 319 | <span class="navbar-toggler-icon"></span> |
| 320 | <span class="navbar-toggler-icon"></span> | 320 | <span class="navbar-toggler-icon"></span> |
| 321 | </button> | 321 | </button> |
| 322 | 322 | ||
| 323 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 323 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 324 | <ul class="navbar-nav mr-auto"> | 324 | <ul class="navbar-nav mr-auto"> |
| 325 | <li class="nav-item active"> | 325 | <li class="nav-item active"> |
| 326 | <a class="nav-link" href="javasript:void(0);">About</a> | 326 | <a class="nav-link" href="javasript:void(0);">About</a> |
| 327 | </li> | 327 | </li> |
| 328 | <li class="nav-item"> | 328 | <li class="nav-item"> |
| 329 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> | 329 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> |
| 330 | </li> | 330 | </li> |
| 331 | <li class="nav-item"> | 331 | <li class="nav-item"> |
| 332 | <a class="nav-link" href="javasript:void(0);">Stories</a> | 332 | <a class="nav-link" href="javasript:void(0);">Stories</a> |
| 333 | </li> | 333 | </li> |
| 334 | <li class="nav-item"> | 334 | <li class="nav-item"> |
| 335 | <a class="nav-link" href="javasript:void(0);">Library</a> | 335 | <a class="nav-link" href="javasript:void(0);">Library</a> |
| 336 | </li> | 336 | </li> |
| 337 | </ul> | 337 | </ul> |
| 338 | </div> | 338 | </div> |
| 339 | <a | 339 | <a |
| 340 | v-if="this.userData.firstLogin" | 340 | v-if="this.userData.firstLogin" |
| 341 | href="javasript:void(0);" | 341 | href="javasript:void(0);" |
| 342 | @click="addProfileDialog" | 342 | @click="addProfileDialog" |
| 343 | class="update_profile" | 343 | class="update_profile" |
| 344 | ><span></span> Update Profile</a | 344 | ><span></span> Update Profile</a |
| 345 | > | 345 | > |
| 346 | <div class=""> | 346 | <div class=""> |
| 347 | <a | 347 | <a |
| 348 | href="javascript:void(0);" | 348 | href="javascript:void(0);" |
| 349 | class="user-profile-photo common_color" | 349 | class="user-profile-photo common_color" |
| 350 | @click="userprofileshowDialog" | 350 | @click="userprofileshowDialog" |
| 351 | ><img :src="userData.profilePic" | 351 | ><img :src="userData.profilePic" |
| 352 | /></a> | 352 | /></a> |
| 353 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | 353 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> |
| 354 | <ul> | 354 | <ul> |
| 355 | <li> | 355 | <li> |
| 356 | <a href="javascript:void(0);" @click="addProfileDialog" | 356 | <a href="javascript:void(0);" @click="addProfileDialog" |
| 357 | >Edit Profile</a | 357 | >Edit Profile</a |
| 358 | > | 358 | > |
| 359 | </li> | 359 | </li> |
| 360 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | 360 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> |
| 361 | </ul> | 361 | </ul> |
| 362 | </div> | 362 | </div> |
| 363 | </div> | 363 | </div> |
| 364 | </nav> | 364 | </nav> |
| 365 | |||
| 366 | <!-- <Header></Header> --> | ||
| 365 | <!-- menu wrapper --> | 367 | <!-- menu wrapper --> |
| 366 | <div class="row profile-tab-spc-top"> | 368 | <div class="row profile-tab-spc-top"> |
| 367 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | 369 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> |
| 368 | <div class="inner-profile-ps common_color"> | 370 | <div class="inner-profile-ps common_color"> |
| 369 | <img :src="userData.profilePic" class="" /> | 371 | <img :src="userData.profilePic" class="" /> |
| 370 | </div> | 372 | </div> |
| 371 | <!-- user profile --> | 373 | <!-- user profile --> |
| 372 | 374 | ||
| 373 | <div class="user-profile"> | 375 | <div class="user-profile"> |
| 374 | <h1> | 376 | <h1> |
| 375 | {{ userData.firstName }} {{ userData.lastName }} | 377 | {{ userData.firstName }} {{ userData.lastName }} |
| 376 | <span | 378 | <span |
| 377 | href="javasript:void(0);" | 379 | href="javasript:void(0);" |
| 378 | class="tags no-cursor no-underline" | 380 | class="tags no-cursor no-underline" |
| 379 | >{{ userData.role }}</span | 381 | >{{ userData.role }}</span |
| 380 | > | 382 | > |
| 381 | </h1> | 383 | </h1> |
| 382 | <ul class="joined-info"> | 384 | <ul class="joined-info"> |
| 383 | <li> | 385 | <li> |
| 384 | <a | 386 | <a |
| 385 | href="javascript:void(0);" | 387 | href="javascript:void(0);" |
| 386 | v-if="!userData.designation && !userData.organisation" | 388 | v-if="!userData.designation && !userData.organisation" |
| 387 | @click="addProfileDialog" | 389 | @click="addProfileDialog" |
| 388 | >Add your work</a | 390 | >Add your work</a |
| 389 | > | 391 | > |
| 390 | <a | 392 | <a |
| 391 | class="no-cursor no-underline" | 393 | class="no-cursor no-underline" |
| 392 | href="javascript:void(0);" | 394 | href="javascript:void(0);" |
| 393 | v-if="userData.designation" | 395 | v-if="userData.designation" |
| 394 | >{{ userData.designation }}</a | 396 | >{{ userData.designation }}</a |
| 395 | > | 397 | > |
| 396 | <a | 398 | <a |
| 397 | class="no-cursor no-underline" | 399 | class="no-cursor no-underline" |
| 398 | href="javascript:void(0);" | 400 | href="javascript:void(0);" |
| 399 | v-if="userData.designation && userData.organisation" | 401 | v-if="userData.designation && userData.organisation" |
| 400 | >at</a | 402 | >at</a |
| 401 | > | 403 | > |
| 402 | <a | 404 | <a |
| 403 | class="no-cursor no-underline" | 405 | class="no-cursor no-underline" |
| 404 | href="javascript:void(0);" | 406 | href="javascript:void(0);" |
| 405 | v-if="userData.organisation" | 407 | v-if="userData.organisation" |
| 406 | >{{ userData.organisation }}</a | 408 | >{{ userData.organisation }}</a |
| 407 | > | 409 | > |
| 408 | <img src="../assets/images/u-info-icon.png" /> <span></span> | 410 | <img src="../assets/images/u-info-icon.png" /> <span></span> |
| 409 | </li> | 411 | </li> |
| 410 | <li> | 412 | <li> |
| 411 | <a href="javasript:void(0);" content="Karma Points" v-tippy> | 413 | <a href="javasript:void(0);" content="Karma Points" v-tippy> |
| 412 | {{ userData.karmaPoints }} Karma</a | 414 | {{ userData.karmaPoints }} Karma</a |
| 413 | > | 415 | > |
| 414 | <span></span> | 416 | <span></span> |
| 415 | </li> | 417 | </li> |
| 416 | <li> | 418 | <li> |
| 417 | <a href="javasript:void(0);" class="no-cursor no-underline" | 419 | <a href="javasript:void(0);" class="no-cursor no-underline" |
| 418 | >Joined on | 420 | >Joined on |
| 419 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a | 421 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a |
| 420 | > | 422 | > |
| 421 | </li> | 423 | </li> |
| 422 | </ul> | 424 | </ul> |
| 423 | <p>{{ userData.bio }}</p> | 425 | <p>{{ userData.bio }}</p> |
| 424 | </div> | 426 | </div> |
| 425 | </div> | 427 | </div> |
| 426 | <!-- user profile --> | 428 | <!-- user profile --> |
| 427 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | 429 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> |
| 428 | <div class="list-style-group" v-if="userData.awards.views != null"> | 430 | <div class="list-style-group" v-if="userData.awards.views != null"> |
| 429 | <p>Awards</p> | 431 | <p>Awards</p> |
| 430 | <ul class="list-style"> | 432 | <ul class="list-style"> |
| 431 | <li> | 433 | <li> |
| 432 | <a href="javascript:void(0);" | 434 | <a href="javascript:void(0);" |
| 433 | ><img src="../assets/images/icon-1.png" | 435 | ><img src="../assets/images/icon-1.png" |
| 434 | /></a> | 436 | /></a> |
| 435 | </li> | 437 | </li> |
| 436 | </ul> | 438 | </ul> |
| 437 | </div> | 439 | </div> |
| 438 | <!-- list style --> | 440 | <!-- list style --> |
| 439 | </div> | 441 | </div> |
| 440 | </div> | 442 | </div> |
| 441 | <div class="clearfix"></div> | 443 | <div class="clearfix"></div> |
| 442 | <div class="row top-brd profile-tab-spc-top"> | 444 | <div class="row top-brd profile-tab-spc-top"> |
| 443 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 445 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 444 | <ul class="profile-tab"> | 446 | <ul class="profile-tab"> |
| 445 | <li class="active c-0"> | 447 | <li class="active c-0"> |
| 446 | <a href="javascript:void(0);" @click="caseDialog" | 448 | <a href="javascript:void(0);" @click="caseDialog" |
| 447 | >Case-studies({{ caseStudies.length }})</a | 449 | >Case-studies({{ caseStudies.length }})</a |
| 448 | > | 450 | > |
| 449 | </li> | 451 | </li> |
| 450 | <li class="rp-all"> | 452 | <li class="rp-all"> |
| 451 | <a href="javascript:void(0);" @click="repliesDialog" | 453 | <a href="javascript:void(0);" @click="repliesDialog" |
| 452 | >Comments/Replies(0)</a | 454 | >Comments/Replies(0)</a |
| 453 | > | 455 | > |
| 454 | </li> | 456 | </li> |
| 455 | </ul> | 457 | </ul> |
| 456 | </div> | 458 | </div> |
| 457 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | 459 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> |
| 458 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> | 460 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> |
| 459 | <li><span>Follow</span></li> | 461 | <li><span>Follow</span></li> |
| 460 | <li v-for="(social, i) in selectedSocialLink" :key="i"> | 462 | <li v-for="(social, i) in selectedSocialLink" :key="i"> |
| 461 | |||
| 462 | <a | 463 | <a |
| 463 | href="javascript:void(0);" | 464 | href="javascript:void(0);" |
| 464 | @click="openUrl(social.fieldValue)" | 465 | @click="openUrl(social.fieldValue)" |
| 465 | class="cursor-pointer" | 466 | class="cursor-pointer" |
| 466 | ><img :src="social.image" | 467 | ><img :src="social.image" |
| 467 | /></a> | 468 | /></a> |
| 468 | </li> | 469 | </li> |
| 469 | </ul> | 470 | </ul> |
| 470 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> | 471 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> |
| 471 | <li> | 472 | <li> |
| 472 | <a | 473 | <a |
| 473 | href="javascript:void(0);" | 474 | href="javascript:void(0);" |
| 474 | @click="addProfileDialog" | 475 | @click="addProfileDialog" |
| 475 | class="active cursor-pointer" | 476 | class="active cursor-pointer" |
| 476 | ><img src="../assets/images/plus.png" | 477 | ><img src="../assets/images/plus.png" |
| 477 | /></a> | 478 | /></a> |
| 478 | <span class="connect-social-channel" | 479 | <span class="connect-social-channel" |
| 479 | >Connect your social channels</span | 480 | >Connect your social channels</span |
| 480 | > | 481 | > |
| 481 | </li> | 482 | </li> |
| 482 | </ul> | 483 | </ul> |
| 483 | </div> | 484 | </div> |
| 484 | </div> | 485 | </div> |
| 485 | <!-- tab style --> | 486 | <!-- tab style --> |
| 486 | <div class="profile-data-wrp"> | 487 | <div class="profile-data-wrp"> |
| 487 | <div class="container-fluid data-wrp" id="case-study-0"> | 488 | <div class="container-fluid data-wrp" id="case-study-0"> |
| 488 | <div class="row" v-if="caseStudies.length == 0"> | 489 | <div class="row" v-if="caseStudies.length == 0"> |
| 489 | <div class="col-6 col-lg-6"> | 490 | <div class="col-6 col-lg-6"> |
| 490 | <div class="full-w-height-profile ex-light seats_bg"> | 491 | <div class="full-w-height-profile ex-light seats_bg"> |
| 491 | <a | 492 | <a |
| 492 | href="javasript:void(0);" | 493 | href="javasript:void(0);" |
| 493 | class="profile-md-bt center-and-spc bt-spc-top" | 494 | class="profile-md-bt center-and-spc bt-spc-top" |
| 494 | @click="openUrl('https://www.productgrowth.org/spotlight')" | 495 | @click="openUrl('https://www.productgrowth.org/spotlight')" |
| 495 | >Explore Spotlights</a | 496 | >Explore Spotlights</a |
| 496 | > | 497 | > |
| 497 | <p>Explore the spotlights others has put together</p> | 498 | <p>Explore the spotlights others has put together</p> |
| 498 | </div> | 499 | </div> |
| 499 | <!-- full width --> | 500 | <!-- full width --> |
| 500 | </div> | 501 | </div> |
| 501 | <!-- col 6 --> | 502 | <!-- col 6 --> |
| 502 | <div class="col-6 col-lg-6"> | 503 | <div class="col-6 col-lg-6"> |
| 503 | <div class="full-w-height-profile ex-light spotlight_bg"> | 504 | <div class="full-w-height-profile ex-light spotlight_bg"> |
| 504 | <img src="../assets/images/add-role.svg" class="add-role" /> | 505 | <img src="../assets/images/add-role.svg" class="add-role" /> |
| 505 | <div class="clearfix"></div> | 506 | <div class="clearfix"></div> |
| 506 | <!-- clearfix --> | 507 | <!-- clearfix --> |
| 507 | <a | 508 | <a |
| 508 | href="javasript:void(0);" | 509 | href="javasript:void(0);" |
| 509 | class="profile-md-bt center-and-spc" | 510 | class="profile-md-bt center-and-spc" |
| 510 | @click=" | 511 | @click=" |
| 511 | openUrl( | 512 | openUrl( |
| 512 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' | 513 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' |
| 513 | ) | 514 | ) |
| 514 | " | 515 | " |
| 515 | >Publish Spotlight</a | 516 | >Publish Spotlight</a |
| 516 | > | 517 | > |
| 517 | <p>Share your own insights through Spotlight</p> | 518 | <p>Share your own insights through Spotlight</p> |
| 518 | </div> | 519 | </div> |
| 519 | <!-- full width --> | 520 | <!-- full width --> |
| 520 | </div> | 521 | </div> |
| 521 | <!-- col 6 --> | 522 | <!-- col 6 --> |
| 522 | </div> | 523 | </div> |
| 523 | 524 | ||
| 524 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> | 525 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> |
| 525 | <div class="container-fluid data-wrp"> | 526 | <div class="container-fluid data-wrp"> |
| 526 | <div class="row"> | 527 | <div class="row"> |
| 527 | <div class="" v-for="(study, i) in caseStudies" :key="i"> | 528 | <div class="" v-for="(study, i) in caseStudies" :key="i"> |
| 528 | <div class="card-warpper" @click="openStudy(study)"> | 529 | <div class="card-warpper" @click="openStudy(study)"> |
| 529 | <div class="company-detail"> | 530 | <div class="company-detail"> |
| 530 | <div class="c-logo"> | 531 | <div class="c-logo"> |
| 531 | <!-- <img src="../assets/images/image 46.png" /> --> | 532 | <!-- <img src="../assets/images/image 46.png" /> --> |
| 532 | <img :src="study.intro.logoURL" /> | 533 | <img :src="study.intro.logoURL" /> |
| 533 | </div> | 534 | </div> |
| 534 | <div class="c-tag"> | 535 | <div class="c-tag"> |
| 535 | <img | 536 | <img |
| 536 | src="../assets/images/retake-blue.svg" | 537 | src="../assets/images/retake-blue.svg" |
| 537 | v-if="study.intro.type == 'Retake'" | 538 | v-if="study.intro.type == 'Retake'" |
| 538 | /> | 539 | /> |
| 539 | <img | 540 | <img |
| 540 | src="../assets/images/behind-blue.svg" | 541 | src="../assets/images/behind-blue.svg" |
| 541 | v-if="study.intro.type == 'Behind-the-scenes'" | 542 | v-if="study.intro.type == 'Behind-the-scenes'" |
| 542 | /> | 543 | /> |
| 543 | <img | 544 | <img |
| 544 | src="../assets/images/critique-blue.svg" | 545 | src="../assets/images/critique-blue.svg" |
| 545 | v-if="study.intro.type == 'Critique'" | 546 | v-if="study.intro.type == 'Critique'" |
| 546 | /> | 547 | /> |
| 547 | <img | 548 | <img |
| 548 | src="../assets/images/juxtapose-blue.svg" | 549 | src="../assets/images/juxtapose-blue.svg" |
| 549 | v-if="study.intro.type == 'Juxtapose'" | 550 | v-if="study.intro.type == 'Juxtapose'" |
| 550 | /> | 551 | /> |
| 551 | </div> | 552 | </div> |
| 552 | </div> | 553 | </div> |
| 553 | <!-- company detail--> | 554 | <!-- company detail--> |
| 554 | <h1>{{ study.intro.name }}</h1> | 555 | <h1>{{ study.intro.name }}</h1> |
| 555 | <div class="u-detail"> | 556 | <div class="u-detail"> |
| 556 | <img src="../assets/images/user-2.png" /> | 557 | <img src="../assets/images/user-2.png" /> |
| 557 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> | 558 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> |
| 558 | {{ name }} | 559 | {{ name }} |
| 559 | </h2> | 560 | </h2> |
| 560 | </div> | 561 | </div> |
| 561 | <!-- user detail --> | 562 | <!-- user detail --> |
| 562 | <p> | 563 | <p> |
| 563 | <span v-for="(area, j) in study.focusAreas" :key="j"> | 564 | <span v-for="(area, j) in study.focusAreas" :key="j"> |
| 564 | {{ area }} | 565 | {{ area }} |
| 565 | </span> | 566 | </span> |
| 566 | </p> | 567 | </p> |
| 567 | <ul class="tags-list"> | 568 | <ul class="tags-list"> |
| 568 | <li v-for="(tags, j) in study.insightTags" :key="j"> | 569 | <li v-for="(tags, j) in study.insightTags" :key="j"> |
| 569 | <a | 570 | <a |
| 570 | href="javasript:void(0);" | 571 | href="javasript:void(0);" |
| 571 | class="insight-design" | 572 | class="insight-design" |
| 572 | v-if="tags == 'Design'" | 573 | v-if="tags == 'Design'" |
| 573 | >Design</a | 574 | >Design</a |
| 574 | > | 575 | > |
| 575 | <a | 576 | <a |
| 576 | href="javasript:void(0);" | 577 | href="javasript:void(0);" |
| 577 | class="insight-product" | 578 | class="insight-product" |
| 578 | v-if="tags == 'Product'" | 579 | v-if="tags == 'Product'" |
| 579 | >Product</a | 580 | >Product</a |
| 580 | > | 581 | > |
| 581 | <a | 582 | <a |
| 582 | href="javasript:void(0);" | 583 | href="javasript:void(0);" |
| 583 | class="insight-marketing" | 584 | class="insight-marketing" |
| 584 | v-if="tags == 'Marketing'" | 585 | v-if="tags == 'Marketing'" |
| 585 | >Marketing</a | 586 | >Marketing</a |
| 586 | > | 587 | > |
| 587 | <a | 588 | <a |
| 588 | href="javasript:void(0);" | 589 | href="javasript:void(0);" |
| 589 | class="insight-pricing" | 590 | class="insight-pricing" |
| 590 | v-if="tags == 'Pricing'" | 591 | v-if="tags == 'Pricing'" |
| 591 | >Pricing</a | 592 | >Pricing</a |
| 592 | > | 593 | > |
| 593 | <a | 594 | <a |
| 594 | href="javasript:void(0);" | 595 | href="javasript:void(0);" |
| 595 | class="insight-psychology" | 596 | class="insight-psychology" |
| 596 | v-if="tags == 'Psychology'" | 597 | v-if="tags == 'Psychology'" |
| 597 | >Psychology</a | 598 | >Psychology</a |
| 598 | > | 599 | > |
| 599 | </li> | 600 | </li> |
| 600 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> | 601 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> |
| 601 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> | 602 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> |
| 602 | </ul> | 603 | </ul> |
| 603 | <div class="clearfix"></div> | 604 | <div class="clearfix"></div> |
| 604 | </div> | 605 | </div> |
| 605 | <!-- card wrpper --> | 606 | <!-- card wrpper --> |
| 606 | <!-- card wrpper --> | 607 | <!-- card wrpper --> |
| 607 | </div> | 608 | </div> |
| 608 | <!-- all card wrpper --> | 609 | <!-- all card wrpper --> |
| 609 | </div> | 610 | </div> |
| 610 | </div> | 611 | </div> |
| 611 | </div> | 612 | </div> |
| 612 | <!-- data wrp --> | 613 | <!-- data wrp --> |
| 613 | </div> | 614 | </div> |
| 614 | <!-- case study 0 --> | 615 | <!-- case study 0 --> |
| 615 | <div | 616 | <div |
| 616 | class="container-fluid data-wrp" | 617 | class="container-fluid data-wrp" |
| 617 | id="all-replies" | 618 | id="all-replies" |
| 618 | style="display: none" | 619 | style="display: none" |
| 619 | > | 620 | > |
| 620 | <div class="row"> | 621 | <div class="row"> |
| 621 | <div class="replies col-md-12"> | 622 | <div class="replies col-md-12"> |
| 622 | <div class="replies-wrp"> | 623 | <div class="replies-wrp"> |
| 623 | <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> | 624 | <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> |
| 624 | <ul class="joined-info"> | 625 | <ul class="joined-info"> |
| 625 | <li><a href="javasript:void(0);">37D</a> <span></span></li> | 626 | <li><a href="javasript:void(0);">37D</a> <span></span></li> |
| 626 | <li><img src="../assets/images/heart.png" /></li> | 627 | <li><img src="../assets/images/heart.png" /></li> |
| 627 | <li><a href="javasript:void(0);"> 4</a></li> | 628 | <li><a href="javasript:void(0);"> 4</a></li> |
| 628 | <li class="comment-spc"> | 629 | <li class="comment-spc"> |
| 629 | <img src="../assets/images/comment.svg" /> | 630 | <img src="../assets/images/comment.svg" /> |
| 630 | </li> | 631 | </li> |
| 631 | <li><a href="javasript:void(0);"> 6</a></li> | 632 | <li><a href="javasript:void(0);"> 6</a></li> |
| 632 | </ul> | 633 | </ul> |
| 633 | <p> | 634 | <p> |
| 634 | I wonder what the difference between “<strong> | 635 | I wonder what the difference between “<strong> |
| 635 | Assistant</strong | 636 | Assistant</strong |
| 636 | >” and “<strong>Pickup and Drop</strong>” are. If they are the | 637 | >” and “<strong>Pickup and Drop</strong>” are. If they are the |
| 637 | same, there are two “call to actions” for the same workflow | 638 | same, there are two “call to actions” for the same workflow |
| 638 | </p> --> | 639 | </p> --> |
| 639 | </div> | 640 | </div> |
| 640 | <!-- replies wrapper --> | 641 | <!-- replies wrapper --> |
| 641 | </div> | 642 | </div> |
| 642 | <!-- all card wrpper --> | 643 | <!-- all card wrpper --> |
| 643 | </div> | 644 | </div> |
| 644 | </div> | 645 | </div> |
| 645 | <!-- all Relpies --> | 646 | <!-- all Relpies --> |
| 646 | </div> | 647 | </div> |
| 647 | <!-- data wrp --> | 648 | <!-- data wrp --> |
| 648 | <!-- body wrapper --> | 649 | <!-- body wrapper --> |
| 649 | </div> | 650 | </div> |
| 650 | </main> | 651 | </main> |
| 651 | </template> | 652 | </template> |
| 652 | 653 | ||
| 653 | <script> | 654 | <script> |
| 654 | import Vue from "vue"; | 655 | import Vue from "vue"; |
| 655 | import router from "../router"; | 656 | import router from "../router"; |
| 656 | import $ from "jquery"; | 657 | import $ from "jquery"; |
| 657 | import axios from "axios"; | 658 | import axios from "axios"; |
| 658 | 659 | import Header from "./Header"; | |
| 659 | export default { | 660 | export default { |
| 660 | name: "Profile", | 661 | name: "Profile", |
| 662 | components: { | ||
| 663 | Header: Header, | ||
| 664 | }, | ||
| 661 | data: () => ({ | 665 | data: () => ({ |
| 662 | loggedinFlag: false, | 666 | loggedinFlag: false, |
| 663 | usertoken: null, | 667 | usertoken: null, |
| 664 | currentLink: null, | 668 | currentLink: null, |
| 665 | userData: { | 669 | userData: { |
| 666 | socialMediaProfiles: { | 670 | socialMediaProfiles: { |
| 667 | facebook: null, | 671 | facebook: null, |
| 668 | linkedin: null, | 672 | linkedin: null, |
| 669 | medium: null, | 673 | medium: null, |
| 670 | twitter: null, | 674 | twitter: null, |
| 671 | behance: null, | 675 | behance: null, |
| 672 | dribble: null, | 676 | dribble: null, |
| 673 | github: null, | 677 | github: null, |
| 674 | stackoverflow: null, | 678 | stackoverflow: null, |
| 675 | instagram: null, | 679 | instagram: null, |
| 676 | }, | 680 | }, |
| 677 | awards: { | 681 | awards: { |
| 678 | views: null, | 682 | views: null, |
| 679 | likes: null, | 683 | likes: null, |
| 680 | comments: null, | 684 | comments: null, |
| 681 | }, | 685 | }, |
| 682 | verified: true, | 686 | verified: true, |
| 683 | phoneNo: null, | 687 | phoneNo: null, |
| 684 | bio: null, | 688 | bio: null, |
| 685 | designation: null, | 689 | designation: null, |
| 686 | organisation: null, | 690 | organisation: null, |
| 687 | bgColor: null, | 691 | bgColor: null, |
| 688 | interests: [], | 692 | interests: [], |
| 689 | karmaPoints: null, | 693 | karmaPoints: null, |
| 690 | socialLogin: null, | 694 | socialLogin: null, |
| 691 | firstLogin: null, | 695 | firstLogin: null, |
| 692 | notification: null, | 696 | notification: null, |
| 693 | profilePic: null, | 697 | profilePic: null, |
| 694 | role: null, | 698 | role: null, |
| 695 | name: null, | 699 | name: null, |
| 696 | email: null, | 700 | email: null, |
| 697 | firstName: null, | 701 | firstName: null, |
| 698 | lastName: null, | 702 | lastName: null, |
| 699 | }, | 703 | }, |
| 700 | caseStudies: [], | 704 | caseStudies: [], |
| 701 | interestName: null, | 705 | interestName: null, |
| 702 | oldId: null, | 706 | oldId: null, |
| 703 | currentSocialLinkName: null, | 707 | currentSocialLinkName: null, |
| 704 | showCompany: false, | 708 | showCompany: false, |
| 705 | showDesignation: false, | 709 | showDesignation: false, |
| 706 | socialLink: [ | 710 | socialLink: [ |
| 707 | { | 711 | { |
| 708 | displayName: "Facebook", | 712 | displayName: "Facebook", |
| 709 | fieldName: "facebook", | 713 | fieldName: "facebook", |
| 710 | fieldValue: null, | 714 | fieldValue: null, |
| 711 | image: require(`../assets/images/facebook.png`), | 715 | image: require(`../assets/images/facebook.png`), |
| 712 | }, | 716 | }, |
| 713 | { | 717 | { |
| 714 | displayName: "Linkedin", | 718 | displayName: "Linkedin", |
| 715 | fieldName: "linkedin", | 719 | fieldName: "linkedin", |
| 716 | fieldValue: null, | 720 | fieldValue: null, |
| 717 | image: require(`../assets/images/linkedin.png`), | 721 | image: require(`../assets/images/linkedin.png`), |
| 718 | }, | 722 | }, |
| 719 | { | 723 | { |
| 720 | displayName: "Medium", | 724 | displayName: "Medium", |
| 721 | fieldName: "medium", | 725 | fieldName: "medium", |
| 722 | fieldValue: null, | 726 | fieldValue: null, |
| 723 | image: require(`../assets/images/medium.png`), | 727 | image: require(`../assets/images/medium.png`), |
| 724 | }, | 728 | }, |
| 725 | { | 729 | { |
| 726 | displayName: "Twitter", | 730 | displayName: "Twitter", |
| 727 | fieldName: "twitter", | 731 | fieldName: "twitter", |
| 728 | fieldValue: null, | 732 | fieldValue: null, |
| 729 | image: require(`../assets/images/twitter.png`), | 733 | image: require(`../assets/images/twitter.png`), |
| 730 | }, | 734 | }, |
| 731 | { | 735 | { |
| 732 | displayName: "Behance", | 736 | displayName: "Behance", |
| 733 | fieldName: "behance", | 737 | fieldName: "behance", |
| 734 | fieldValue: null, | 738 | fieldValue: null, |
| 735 | image: require(`../assets/images/behance.png`), | 739 | image: require(`../assets/images/behance.png`), |
| 736 | }, | 740 | }, |
| 737 | { | 741 | { |
| 738 | displayName: "Dribble", | 742 | displayName: "Dribble", |
| 739 | fieldName: "dribble", | 743 | fieldName: "dribble", |
| 740 | fieldValue: null, | 744 | fieldValue: null, |
| 741 | image:require(`../assets/images/dribbble.png`), | 745 | image: require(`../assets/images/dribbble.png`), |
| 742 | }, | 746 | }, |
| 743 | { | 747 | { |
| 744 | displayName: "Github", | 748 | displayName: "Github", |
| 745 | fieldName: "github", | 749 | fieldName: "github", |
| 746 | fieldValue: null, | 750 | fieldValue: null, |
| 747 | image: require(`../assets/images/github.png`), | 751 | image: require(`../assets/images/github.png`), |
| 748 | }, | 752 | }, |
| 749 | { | 753 | { |
| 750 | displayName: "Stackoverflow", | 754 | displayName: "Stackoverflow", |
| 751 | fieldName: "stackoverflow", | 755 | fieldName: "stackoverflow", |
| 752 | fieldValue: null, | 756 | fieldValue: null, |
| 753 | image: require(`../assets/images/stack overflow.png`), | 757 | image: require(`../assets/images/stack overflow.png`), |
| 754 | }, | 758 | }, |
| 755 | { | 759 | { |
| 756 | displayName: "Instagram", | 760 | displayName: "Instagram", |
| 757 | fieldName: "instagram", | 761 | fieldName: "instagram", |
| 758 | fieldValue: null, | 762 | fieldValue: null, |
| 759 | image:require(`../assets/images/instagram.png`), | 763 | image: require(`../assets/images/instagram.png`), |
| 760 | }, | 764 | }, |
| 761 | ], | 765 | ], |
| 762 | selectedSocialLink: [], | 766 | selectedSocialLink: [], |
| 763 | }), | 767 | }), |
| 764 | 768 | ||
| 765 | mounted() { | 769 | mounted() { |
| 766 | this.userData = {}; | 770 | this.userData = {}; |
| 767 | // this.socialLink = []; | 771 | // this.socialLink = []; |
| 768 | this.userData.interests = []; | 772 | this.userData.interests = []; |
| 769 | var userdata = localStorage.getItem("spotlight_usertoken"); | 773 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 770 | if (userdata) { | 774 | if (userdata) { |
| 771 | userdata = JSON.parse(userdata); | 775 | userdata = JSON.parse(userdata); |
| 772 | this.usertoken = userdata.token; | 776 | this.usertoken = userdata.token; |
| 773 | this.getProfile(); | 777 | this.getProfile(); |
| 774 | this.getCaseStudies(); | 778 | this.getCaseStudies(); |
| 775 | } | 779 | } |
| 776 | }, | 780 | }, |
| 777 | methods: { | 781 | methods: { |
| 778 | goToSignUp() { | 782 | goToSignUp() { |
| 779 | this.$router.push("/"); | 783 | this.$router.push("/"); |
| 780 | }, | 784 | }, |
| 781 | goToReset() { | 785 | goToReset() { |
| 782 | this.$router.push("/reset"); | 786 | this.$router.push("/reset"); |
| 783 | }, | 787 | }, |
| 784 | logout() { | 788 | logout() { |
| 785 | this.$router.push("/login"); | 789 | this.$router.push("/login"); |
| 786 | }, | 790 | }, |
| 787 | prefillSocialLink(links) { | 791 | prefillSocialLink(links) { |
| 788 | var keys = []; | 792 | var keys = []; |
| 789 | keys = Object.keys(links); | 793 | keys = Object.keys(links); |
| 790 | keys.forEach((link_) => { | 794 | keys.forEach((link_) => { |
| 791 | console.log(link_, ":", links[link_]); | 795 | console.log(link_, ":", links[link_]); |
| 792 | if (links[link_] != null) { | 796 | if (links[link_] != null) { |
| 793 | var i = this.socialLink.findIndex( | 797 | var i = this.socialLink.findIndex( |
| 794 | (links_) => links_.fieldName == link_ | 798 | (links_) => links_.fieldName == link_ |
| 795 | ); | 799 | ); |
| 796 | if (i != -1) { | 800 | if (i != -1) { |
| 797 | this.selectedSocialLink.push({ | 801 | this.selectedSocialLink.push({ |
| 798 | displayName: this.socialLink[i].displayName, | 802 | displayName: this.socialLink[i].displayName, |
| 799 | fieldName: this.socialLink[i].fieldName, | 803 | fieldName: this.socialLink[i].fieldName, |
| 800 | image: this.socialLink[i].image, | 804 | image: this.socialLink[i].image, |
| 801 | fieldValue: links[link_], | 805 | fieldValue: links[link_], |
| 802 | }); | 806 | }); |
| 803 | } | 807 | } |
| 804 | } | 808 | } |
| 805 | }); | 809 | }); |
| 806 | console.log("links-- are--", links); | 810 | console.log("links-- are--", links); |
| 807 | }, | 811 | }, |
| 808 | addSocialLink(id) { | 812 | addSocialLink(id) { |
| 809 | this.currentLink = null; | 813 | this.currentLink = null; |
| 810 | var i = this.selectedSocialLink.findIndex( | 814 | var i = this.selectedSocialLink.findIndex( |
| 811 | (link_) => link_.fieldName == id | 815 | (link_) => link_.fieldName == id |
| 812 | ); | 816 | ); |
| 813 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); | 817 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); |
| 814 | if (i == -1) { | 818 | if (i == -1) { |
| 815 | this.selectedSocialLink.push({ | 819 | this.selectedSocialLink.push({ |
| 816 | displayName: this.socialLink[j].displayName, | 820 | displayName: this.socialLink[j].displayName, |
| 817 | fieldName: this.socialLink[j].fieldName, | 821 | fieldName: this.socialLink[j].fieldName, |
| 818 | image: this.socialLink[j].image, | 822 | image: this.socialLink[j].image, |
| 819 | fieldValue: null, | 823 | fieldValue: null, |
| 820 | }); | 824 | }); |
| 821 | } else { | 825 | } else { |
| 822 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); | 826 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); |
| 823 | } | 827 | } |
| 824 | }, | 828 | }, |
| 825 | removeSocialLink(i) { | 829 | removeSocialLink(i) { |
| 826 | var name = this.selectedSocialLink[i].fieldName; | 830 | var name = this.selectedSocialLink[i].fieldName; |
| 827 | this.userData.socialMediaProfiles[name] = null; | 831 | this.userData.socialMediaProfiles[name] = null; |
| 828 | this.selectedSocialLink.splice(i, 1); | 832 | this.selectedSocialLink.splice(i, 1); |
| 829 | }, | 833 | }, |
| 830 | 834 | ||
| 831 | addInterest() { | 835 | addInterest() { |
| 832 | console.log(this.userData.interests.length, "called", this.interestName); | 836 | console.log(this.userData.interests.length, "called", this.interestName); |
| 833 | if (this.userData.interests.length <= 2) { | 837 | if (this.userData.interests.length <= 2) { |
| 834 | this.userData.interests.push(this.interestName); | 838 | this.userData.interests.push(this.interestName); |
| 835 | this.interestName = null; | 839 | this.interestName = null; |
| 836 | } else { | 840 | } else { |
| 837 | this.$toaster.info("Only 3 interest are allowed"); | 841 | this.$toaster.info("Only 3 interest are allowed"); |
| 838 | } | 842 | } |
| 839 | }, | 843 | }, |
| 840 | removeInterest(i) { | 844 | removeInterest(i) { |
| 841 | console.log("i", i); | 845 | console.log("i", i); |
| 842 | this.userData.interests.splice(i, 1); | 846 | this.userData.interests.splice(i, 1); |
| 843 | console.log(" this.userData", this.userData.interests); | 847 | console.log(" this.userData", this.userData.interests); |
| 844 | }, | 848 | }, |
| 845 | assignClass() { | 849 | assignClass() { |
| 846 | var element = document.getElementById(this.userData.bgColor); | 850 | var element = document.getElementById(this.userData.bgColor); |
| 847 | element.classList.add("active"); | 851 | element.classList.add("active"); |
| 848 | var cols = document.getElementsByClassName("common_color"); | 852 | var cols = document.getElementsByClassName("common_color"); |
| 849 | for (var i = 0; i < cols.length; i++) { | 853 | for (var i = 0; i < cols.length; i++) { |
| 850 | cols[i].style.backgroundColor = this.userData.bgColor; | 854 | cols[i].style.backgroundColor = this.userData.bgColor; |
| 851 | } | 855 | } |
| 852 | }, | 856 | }, |
| 853 | changeColor(clr) { | 857 | changeColor(clr) { |
| 854 | console.log(this.oldId, "clr", clr); | 858 | console.log(this.oldId, "clr", clr); |
| 855 | var element = document.getElementById(clr); | 859 | var element = document.getElementById(clr); |
| 856 | element.classList.add("active"); | 860 | element.classList.add("active"); |
| 857 | var removeelement = document.getElementById(this.oldId); | 861 | var removeelement = document.getElementById(this.oldId); |
| 858 | removeelement.classList.remove("active"); | 862 | removeelement.classList.remove("active"); |
| 859 | this.oldId = clr; | 863 | this.oldId = clr; |
| 860 | var cols = document.getElementsByClassName("common_color"); | 864 | var cols = document.getElementsByClassName("common_color"); |
| 861 | for (var i = 0; i < cols.length; i++) { | 865 | for (var i = 0; i < cols.length; i++) { |
| 862 | cols[i].style.backgroundColor = clr; | 866 | cols[i].style.backgroundColor = clr; |
| 863 | } | 867 | } |
| 864 | this.userData.bgColor = clr; | 868 | this.userData.bgColor = clr; |
| 865 | }, | 869 | }, |
| 866 | getProfile() { | 870 | getProfile() { |
| 867 | axios | 871 | axios |
| 868 | .get("/profile", { | 872 | .get("/profile", { |
| 869 | headers: { | 873 | headers: { |
| 870 | Authorization: "Bearer " + this.usertoken, | 874 | Authorization: "Bearer " + this.usertoken, |
| 871 | }, | 875 | }, |
| 872 | }) | 876 | }) |
| 873 | .then((response) => { | 877 | .then((response) => { |
| 874 | if (!response.data.data.socialMediaProfiles) { | 878 | if (!response.data.data.socialMediaProfiles) { |
| 875 | this.userData.socialMediaProfiles = {}; | 879 | this.userData.socialMediaProfiles = {}; |
| 876 | } | 880 | } |
| 877 | this.userData = response.data.data; | 881 | this.userData = response.data.data; |
| 878 | 882 | ||
| 879 | // this.userData = response.data.data; | 883 | // this.userData = response.data.data; |
| 880 | this.oldId = this.userData.bgColor; | 884 | this.oldId = this.userData.bgColor; |
| 881 | console.log(this.oldId, "this.userData.", this.userData); | 885 | console.log(this.oldId, "this.userData.", this.userData); |
| 882 | console.log("this.userData.firstLogin ", this.userData.firstLogin); | 886 | console.log("this.userData.firstLogin ", this.userData.firstLogin); |
| 883 | this.prefillSocialLink(this.userData.socialMediaProfiles); | 887 | this.prefillSocialLink(this.userData.socialMediaProfiles); |
| 884 | if (this.userData.firstLogin == true) { | 888 | if (this.userData.firstLogin == true) { |
| 885 | this.addProfileDialog(); | 889 | this.addProfileDialog(); |
| 886 | } | 890 | } |
| 887 | this.assignClass(); | 891 | this.assignClass(); |
| 888 | console.log(response.data.data); | 892 | console.log(response.data.data); |
| 889 | }) | 893 | }) |
| 890 | .catch((error) => console.log(error)); | 894 | .catch((error) => console.log(error)); |
| 891 | }, | 895 | }, |
| 892 | getRandomAvatar() { | 896 | getRandomAvatar() { |
| 893 | axios | 897 | axios |
| 894 | .get("/randomAvatar", { | 898 | .get("/randomAvatar", { |
| 895 | headers: { | 899 | headers: { |
| 896 | Authorization: "Bearer " + this.usertoken, | 900 | Authorization: "Bearer " + this.usertoken, |
| 897 | }, | 901 | }, |
| 898 | }) | 902 | }) |
| 899 | .then((response) => { | 903 | .then((response) => { |
| 900 | this.userData.profilePic = response.data.imageURL; | 904 | this.userData.profilePic = response.data.imageURL; |
| 901 | console.log(response.data.imageURL); | 905 | console.log(response.data.imageURL); |
| 902 | }) | 906 | }) |
| 903 | .catch((error) => console.log(error)); | 907 | .catch((error) => console.log(error)); |
| 904 | }, | 908 | }, |
| 905 | getCaseStudies() { | 909 | getCaseStudies() { |
| 906 | axios | 910 | axios |
| 907 | .get("/caseStudy/all", { | 911 | .get("/caseStudy/all", { |
| 908 | headers: { | 912 | headers: { |
| 909 | Authorization: "Bearer " + this.usertoken, | 913 | Authorization: "Bearer " + this.usertoken, |
| 910 | }, | 914 | }, |
| 911 | }) | 915 | }) |
| 912 | .then((response) => { | 916 | .then((response) => { |
| 913 | console.log(response.data.data.caseStudies); | 917 | console.log(response.data.data.caseStudies); |
| 914 | this.caseStudies = response.data.data.caseStudies; | 918 | this.caseStudies = response.data.data.caseStudies; |
| 915 | }) | 919 | }) |
| 916 | .catch((error) => console.log(error)); | 920 | .catch((error) => console.log(error)); |
| 917 | }, | 921 | }, |
| 918 | openStudy(payload) { | 922 | openStudy(payload) { |
| 919 | console.log("payload-", payload); | 923 | console.log("payload-", payload); |
| 920 | payload.intro.date = payload.createdAt; | 924 | payload.intro.date = payload.createdAt; |
| 921 | payload.intro.focusPoint = payload.focusAreas; | 925 | payload.intro.focusPoint = payload.focusAreas; |
| 922 | axios | 926 | axios |
| 923 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 927 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 924 | headers: { | 928 | headers: { |
| 925 | Authorization: "Bearer " + this.usertoken, | 929 | Authorization: "Bearer " + this.usertoken, |
| 926 | }, | 930 | }, |
| 927 | }) | 931 | }) |
| 928 | .then((response) => { | 932 | .then((response) => { |
| 929 | this.createSlide(payload, response.data.data); | 933 | this.createSlide(payload, response.data.data); |
| 930 | }) | 934 | }) |
| 931 | .catch((error) => console.log(error)); | 935 | .catch((error) => console.log(error)); |
| 932 | }, | 936 | }, |
| 933 | 937 | ||
| 934 | createSlide(payload, slides) { | 938 | createSlide(payload, slides) { |
| 935 | var finalSlides = []; | 939 | var finalSlides = []; |
| 936 | slides.forEach((slides_) => { | 940 | slides.forEach((slides_) => { |
| 937 | var url = this.assignRoutes(slides_.templateId); | 941 | var url = this.assignRoutes(slides_.templateId); |
| 938 | var obj = { | 942 | var obj = { |
| 939 | forward: true, | 943 | forward: true, |
| 940 | backward: true, | 944 | backward: true, |
| 941 | ur: url, | 945 | ur: url, |
| 942 | slideId: slides_._id, | 946 | slideId: slides_._id, |
| 943 | caseStudyId: slides_.caseStudyId, | 947 | caseStudyId: slides_.caseStudyId, |
| 944 | payload: { | 948 | payload: { |
| 945 | metaData: slides_.metaData, | 949 | metaData: slides_.metaData, |
| 946 | comments: slides_.comments, | 950 | comments: slides_.comments, |
| 947 | insight: slides_.insight ? slides_.insight : null, | 951 | insight: slides_.insight ? slides_.insight : null, |
| 948 | }, | 952 | }, |
| 949 | }; | 953 | }; |
| 950 | // slides_ | 954 | // slides_ |
| 951 | finalSlides.push(obj); | 955 | finalSlides.push(obj); |
| 952 | }); | 956 | }); |
| 953 | console.log("payload", payload); | 957 | console.log("payload", payload); |
| 954 | // add first slide at begining | 958 | // add first slide at begining |
| 955 | finalSlides.unshift({ | 959 | finalSlides.unshift({ |
| 956 | forward: true, | 960 | forward: true, |
| 957 | backward: false, | 961 | backward: false, |
| 958 | ur: "EpisodeIntro", | 962 | ur: "EpisodeIntro", |
| 959 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 963 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 960 | caseStudyId: payload._id, | 964 | caseStudyId: payload._id, |
| 961 | payload: { | 965 | payload: { |
| 962 | metaData: payload.intro, | 966 | metaData: payload.intro, |
| 963 | comments: [], | 967 | comments: [], |
| 964 | }, | 968 | }, |
| 965 | }); | 969 | }); |
| 966 | finalSlides.push({ | 970 | finalSlides.push({ |
| 967 | forward: true, | 971 | forward: true, |
| 968 | backward: false, | 972 | backward: false, |
| 969 | ur: "Outro", | 973 | ur: "Outro", |
| 970 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 974 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 971 | caseStudyId: payload._id, | 975 | caseStudyId: payload._id, |
| 972 | payload: { | 976 | payload: { |
| 973 | metaData: payload.outro, | 977 | metaData: payload.outro, |
| 974 | comments: [], | 978 | comments: [], |
| 975 | }, | 979 | }, |
| 976 | }); | 980 | }); |
| 977 | 981 | ||
| 978 | console.log(finalSlides); | 982 | console.log(finalSlides); |
| 979 | console.log("payload", payload); | 983 | console.log("payload", payload); |
| 980 | localStorage.setItem( | 984 | localStorage.setItem( |
| 981 | "spotlight_slide" + payload._id, | 985 | "spotlight_slide" + payload._id, |
| 982 | JSON.stringify(finalSlides) | 986 | JSON.stringify(finalSlides) |
| 983 | ); | 987 | ); |
| 984 | this.$router.push({ | 988 | this.$router.push({ |
| 985 | name: "EpisodeIntro", | 989 | name: "EpisodeIntro", |
| 986 | params: { | 990 | params: { |
| 987 | caseStudyId: finalSlides[0].caseStudyId, | 991 | caseStudyId: finalSlides[0].caseStudyId, |
| 988 | slideId: finalSlides[0].slideId, | 992 | slideId: finalSlides[0].slideId, |
| 989 | }, | 993 | }, |
| 990 | }); | 994 | }); |
| 991 | }, | 995 | }, |
| 992 | assignRoutes(tempId) { | 996 | assignRoutes(tempId) { |
| 993 | // /episode-intro | 997 | // /episode-intro |
| 994 | // /outro | 998 | // /outro |
| 995 | var routes = [ | 999 | var routes = [ |
| 996 | { | 1000 | { |
| 997 | url: "AuthorIntro", | 1001 | url: "AuthorIntro", |
| 998 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 1002 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 999 | }, | 1003 | }, |
| 1000 | { | 1004 | { |
| 1001 | url: "NoScreenshotSingleAuthor", | 1005 | url: "NoScreenshotSingleAuthor", |
| 1002 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 1006 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 1003 | }, | 1007 | }, |
| 1004 | { | 1008 | { |
| 1005 | url: "SingleMobileScreenInsightTwo", | 1009 | url: "SingleMobileScreenInsightTwo", |
| 1006 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 1010 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 1007 | }, | 1011 | }, |
| 1008 | { | 1012 | { |
| 1009 | url: "TwoScreenWithoutInsight", | 1013 | url: "TwoScreenWithoutInsight", |
| 1010 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 1014 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 1011 | }, | 1015 | }, |
| 1012 | { | 1016 | { |
| 1013 | url: "noscreenshotSingleautho", | 1017 | url: "noscreenshotSingleautho", |
| 1014 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 1018 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 1015 | }, | 1019 | }, |
| 1016 | { | 1020 | { |
| 1017 | url: "SingleMobileScreenInsightOne", | 1021 | url: "SingleMobileScreenInsightOne", |
| 1018 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 1022 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 1019 | }, | 1023 | }, |
| 1020 | { | 1024 | { |
| 1021 | url: "TwoScreenWithInsight", | 1025 | url: "TwoScreenWithInsight", |
| 1022 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 1026 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 1023 | }, | 1027 | }, |
| 1024 | ]; | 1028 | ]; |
| 1025 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 1029 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 1026 | return routes[i].url; | 1030 | return routes[i].url; |
| 1027 | }, | 1031 | }, |
| 1028 | saveProfile() { | 1032 | saveProfile() { |
| 1029 | var obj = {}; | 1033 | var obj = {}; |
| 1030 | if (this.userData.firstLogin == true) { | 1034 | if (this.userData.firstLogin == true) { |
| 1031 | this.userData.firstLogin = false; | 1035 | this.userData.firstLogin = false; |
| 1032 | } | 1036 | } |
| 1033 | this.userData.name = | 1037 | this.userData.name = |
| 1034 | this.userData.firstName + " " + this.userData.lastName; | 1038 | this.userData.firstName + " " + this.userData.lastName; |
| 1035 | obj = Object.assign(obj, this.userData); | 1039 | obj = Object.assign(obj, this.userData); |
| 1036 | // if(!obj.socialMediaProfiles){ | 1040 | // if(!obj.socialMediaProfiles){ |
| 1037 | // obj.socialMediaProfiles = {}; | 1041 | // obj.socialMediaProfiles = {}; |
| 1038 | // } | 1042 | // } |
| 1039 | this.selectedSocialLink.forEach((element) => { | 1043 | this.selectedSocialLink.forEach((element) => { |
| 1040 | var key = element.fieldName; | 1044 | var key = element.fieldName; |
| 1041 | obj.socialMediaProfiles[key] = element.fieldValue; | 1045 | obj.socialMediaProfiles[key] = element.fieldValue; |
| 1042 | }); | 1046 | }); |
| 1043 | delete obj.createdAt; | 1047 | delete obj.createdAt; |
| 1044 | delete obj.email; | 1048 | delete obj.email; |
| 1045 | delete obj.role; | 1049 | delete obj.role; |
| 1046 | delete obj.verified; | 1050 | delete obj.verified; |
| 1047 | delete obj.updatedAt; | 1051 | delete obj.updatedAt; |
| 1048 | delete obj.__v; | 1052 | delete obj.__v; |
| 1049 | delete obj._id; | 1053 | delete obj._id; |
| 1050 | delete obj.karmaPoints; | 1054 | delete obj.karmaPoints; |
| 1051 | delete obj.awards; | 1055 | delete obj.awards; |
| 1052 | delete obj.socialLogin; | 1056 | delete obj.socialLogin; |
| 1053 | delete obj.phoneNo; | 1057 | delete obj.phoneNo; |
| 1054 | axios | 1058 | axios |
| 1055 | .put("/profile", obj, { | 1059 | .put("/profile", obj, { |
| 1056 | headers: { | 1060 | headers: { |
| 1057 | Authorization: "Bearer " + this.usertoken, | 1061 | Authorization: "Bearer " + this.usertoken, |
| 1058 | }, | 1062 | }, |
| 1059 | }) | 1063 | }) |
| 1060 | .then((response) => { | 1064 | .then((response) => { |
| 1061 | // this.userData = response.data.data; | 1065 | // this.userData = response.data.data; |
| 1062 | this.$toaster.success("Profile Updated"); | 1066 | this.$toaster.success("Profile Updated"); |
| 1063 | this.closeDialog(); | 1067 | this.closeDialog(); |
| 1064 | console.log(response.data.data); | 1068 | console.log(response.data.data); |
| 1065 | }) | 1069 | }) |
| 1066 | .catch((error) => { | 1070 | .catch((error) => { |
| 1067 | if (error.response) { | 1071 | if (error.response) { |
| 1068 | this.$toaster.error(error.response.data.message); | 1072 | this.$toaster.error(error.response.data.message); |
| 1069 | } | 1073 | } |
| 1070 | }); | 1074 | }); |
| 1071 | }, | 1075 | }, |
| 1072 | addProfileDialog() { | 1076 | addProfileDialog() { |
| 1073 | $(".inner-wrp").addClass("body-blur"); | 1077 | $(".inner-wrp").addClass("body-blur"); |
| 1074 | $("#add-social-links").hide(); | 1078 | $("#add-social-links").hide(); |
| 1075 | $(".popup-wrp, #add-profile").show(); | 1079 | $(".popup-wrp, #add-profile").show(); |
| 1076 | }, | 1080 | }, |
| 1077 | nextProfileDialog() { | 1081 | nextProfileDialog() { |
| 1078 | $("#add-profile").hide(); | 1082 | $("#add-profile").hide(); |
| 1079 | $("#add-social-links").show(); | 1083 | $("#add-social-links").show(); |
| 1080 | this.saveProfile(); | 1084 | this.saveProfile(); |
| 1081 | }, | 1085 | }, |
| 1082 | closeDialog() { | 1086 | closeDialog() { |
| 1083 | $(".popup-wrp").hide(); | 1087 | $(".popup-wrp").hide(); |
| 1084 | $(".inner-wrp").removeClass("body-blur"); | 1088 | $(".inner-wrp").removeClass("body-blur"); |
| 1085 | // this.saveProfile(); | 1089 | // this.saveProfile(); |
| 1086 | }, | 1090 | }, |
| 1087 | hideDialog() { | 1091 | hideDialog() { |
| 1088 | $(".popup-wrp").hide(); | 1092 | $(".popup-wrp").hide(); |
| 1089 | $(".inner-wrp").removeClass("body-blur"); | 1093 | $(".inner-wrp").removeClass("body-blur"); |
| 1090 | }, | 1094 | }, |
| 1091 | /// | 1095 | /// |
| 1092 | caseDialog() { | 1096 | caseDialog() { |
| 1093 | $(".rp-all").removeClass("active"); | 1097 | $(".rp-all").removeClass("active"); |
| 1094 | $(".c-0").addClass("active"); | 1098 | $(".c-0").addClass("active"); |
| 1095 | $("#all-replies").hide(); | 1099 | $("#all-replies").hide(); |
| 1096 | $("#case-study-0").show(); | 1100 | $("#case-study-0").show(); |
| 1097 | }, | 1101 | }, |
| 1098 | repliesDialog() { | 1102 | repliesDialog() { |
| 1099 | $(".c-0").removeClass("active"); | 1103 | $(".c-0").removeClass("active"); |
| 1100 | $(".rp-all").addClass("active"); | 1104 | $(".rp-all").addClass("active"); |
| 1101 | $("#case-study-0").hide(); | 1105 | $("#case-study-0").hide(); |
| 1102 | $("#all-replies").show(); | 1106 | $("#all-replies").show(); |
| 1103 | }, | 1107 | }, |
| 1104 | 1108 | ||
| 1105 | userprofileshowDialog() { | 1109 | userprofileshowDialog() { |
| 1106 | $("#userprofileshow").toggle(); | 1110 | $("#userprofileshow").toggle(); |
| 1107 | }, | 1111 | }, |
| 1108 | openUrl(url) { | 1112 | openUrl(url) { |
| 1109 | window.open(url); | 1113 | window.open(url); |
| 1110 | }, | 1114 | }, |
| 1111 | }, | 1115 | }, |
| 1112 | }; | 1116 | }; |
| 1113 | </script> | 1117 | </script> |
| 1114 | <style> | 1118 | <style> |
| 1115 | .no-cursor { | 1119 | .no-cursor { |
| 1116 | cursor: default !important; | 1120 | cursor: default !important; |
| 1117 | } | 1121 | } |
| 1118 | .no-underline { | 1122 | .no-underline { |
| 1119 | text-decoration: none !important; | 1123 | text-decoration: none !important; |
| 1120 | } | 1124 | } |
| 1121 | .position-left { | 1125 | .position-left { |
| 1122 | left: 15px !important; | 1126 | left: 15px !important; |
| 1123 | } | 1127 | } |
| 1124 | .padding-right { | 1128 | .padding-right { |
| 1125 | padding-right: 0px !important; | 1129 | padding-right: 0px !important; |
| 1126 | } | 1130 | } |
| 1131 | |||
| 1132 | .social-link-right { | ||
| 1133 | display: flex; | ||
| 1134 | flex-flow: column wrap; | ||
| 1135 | align-content: flex-end; | ||
| 1136 | } | ||
| 1127 | </style> | 1137 | </style> |
src/components/SingleMobileScreenInsightOne.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);" | 5 | |
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | ||
| 23 | </div> | ||
| 24 | </nav> | ||
| 25 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 27 | 8 | ||
| 28 | |||
| 29 | <!-- chat box --> | 9 | <!-- chat box --> |
| 30 | <div class="bounce-board-wrp" id="cht_box_close"> | 10 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 31 | <div class="inner-wrp-bc"> | 11 | <div class="inner-wrp-bc"> |
| 32 | <div class="bc-top-head"> | 12 | <div class="bc-top-head"> |
| 33 | <span class="bc-head"> | 13 | <span class="bc-head"> |
| 34 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 14 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 35 | </span> | 15 | </span> |
| 36 | <div class="action-sort"> | 16 | <div class="action-sort"> |
| 37 | <span class="sort-by">SORT BY</span> | 17 | <span class="sort-by">SORT BY</span> |
| 38 | <div class="btn-group"> | 18 | <div class="btn-group"> |
| 39 | <button | 19 | <button |
| 40 | type="button" | 20 | type="button" |
| 41 | class="bc-sort-list dropdown-toggle" | 21 | class="bc-sort-list dropdown-toggle" |
| 42 | data-toggle="dropdown" | 22 | data-toggle="dropdown" |
| 43 | aria-haspopup="true" | 23 | aria-haspopup="true" |
| 44 | aria-expanded="false" | 24 | aria-expanded="false" |
| 45 | > | 25 | > |
| 46 | BEST | 26 | BEST |
| 47 | </button> | 27 | </button> |
| 48 | <div class="dropdown-menu short_by"> | 28 | <div class="dropdown-menu short_by"> |
| 49 | <a class="dropdown-item" href="javasript:void(0);" | 29 | <a class="dropdown-item" href="javasript:void(0);" |
| 50 | >BEST 1</a | 30 | >BEST 1</a |
| 51 | > | 31 | > |
| 52 | <a class="dropdown-item" href="javasript:void(0);" | 32 | <a class="dropdown-item" href="javasript:void(0);" |
| 53 | >BEST 2</a | 33 | >BEST 2</a |
| 54 | > | 34 | > |
| 55 | <a class="dropdown-item" href="javasript:void(0);" | 35 | <a class="dropdown-item" href="javasript:void(0);" |
| 56 | >BEST 3</a | 36 | >BEST 3</a |
| 57 | > | 37 | > |
| 58 | </div> | 38 | </div> |
| 59 | </div> | 39 | </div> |
| 60 | <a | 40 | <a |
| 61 | href="javasript:void(0);" | 41 | href="javasript:void(0);" |
| 62 | @click="chtbox_close" | 42 | @click="chtbox_close" |
| 63 | class="close_chat_bx" | 43 | class="close_chat_bx" |
| 64 | ><img src="../assets/images/close.png" alt="close" /></a | 44 | ><img src="../assets/images/close.png" alt="close" /></a |
| 65 | ><!-- close --> | 45 | ><!-- close --> |
| 66 | </div> | 46 | </div> |
| 67 | <!-- action sort --> | 47 | <!-- action sort --> |
| 68 | </div> | 48 | </div> |
| 69 | <!-- top head --> | 49 | <!-- top head --> |
| 70 | <div class="bounce-board-body"> | 50 | <div class="bounce-board-body"> |
| 71 | |||
| 72 | <!-- all user comments --> | 51 | <!-- all user comments --> |
| 73 | <ul class="bounced-user-comments"> | 52 | <ul class="bounced-user-comments"> |
| 74 | <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"> |
| 75 | <div class="bc_brd_l"></div> | 54 | <div class="bc_brd_l"></div> |
| 76 | <!-- border --> | 55 | <!-- border --> |
| 77 | <div class="parent-full-width"> | 56 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 78 | <div class="full-width"> | 57 | <div class="full-width"> |
| 79 | <div class="b-user-head"> | 58 | <div class="b-user-head"> |
| 80 | <img :src="cmnt.user.profilePic" /> | 59 | <img :src="cmnt.user.profilePic" /> |
| 81 | <span class="head-content">{{ cmnt.user.name }} </span> | 60 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 82 | <ul> | 61 | <ul> |
| 83 | <li> | 62 | <li> |
| 84 | <span></span | 63 | <span></span |
| 85 | ><img src="../assets/images/u-info-icon.png" />{{ | 64 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 86 | cmnt.user.karmaPoints | 65 | cmnt.user.karmaPoints |
| 87 | }}pts | 66 | }}pts |
| 88 | </li> | 67 | </li> |
| 89 | <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | 68 | <li> |
| 69 | <span></span>{{ dateGenerator(cmnt.createdAt) }} | ||
| 70 | </li> | ||
| 90 | </ul> | 71 | </ul> |
| 91 | </div> | 72 | </div> |
| 92 | <!-- header --> | 73 | <!-- header --> |
| 93 | <p> | 74 | <p> |
| 94 | {{ cmnt.comment }} | 75 | {{ cmnt.comment }} |
| 95 | </p> | 76 | </p> |
| 96 | <div class="joined_wrapper"> | 77 | <div class="joined_wrapper"> |
| 97 | <ul class="joined-info info_bc_spc"> | 78 | <ul class="joined-info info_bc_spc"> |
| 98 | <li> | 79 | <li> |
| 99 | <img src="../assets/images/purple-heart.png" /> | 80 | <img |
| 81 | src="../assets/images/heart.svg" | ||
| 82 | v-if="cmnt.like == false" | ||
| 83 | @click="likeComment(true, cmnt._id)" | ||
| 84 | class="cursor-pointer" | ||
| 85 | /> | ||
| 86 | <img | ||
| 87 | src="../assets/images/purple-heart.png" | ||
| 88 | v-if="cmnt.like == true" | ||
| 89 | @click="likeComment(false, cmnt._id)" | ||
| 90 | class="cursor-pointer" | ||
| 91 | /> | ||
| 92 | </li> | ||
| 93 | <li> | ||
| 94 | <a href="javasript:void(0);"> | ||
| 95 | {{ cmnt.likes.length }}</a | ||
| 96 | > | ||
| 100 | </li> | 97 | </li> |
| 101 | <li><a href="javasript:void(0);"> 0</a></li> | ||
| 102 | <li class="comment-spc"> | 98 | <li class="comment-spc"> |
| 103 | <img src="../assets/images/purple-comment.png" /> | 99 | <img src="../assets/images/purple-comment.png" /> |
| 104 | </li> | 100 | </li> |
| 105 | <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | 101 | <li> |
| 102 | <a href="javasript:void(0);"> | ||
| 103 | {{ cmnt.children.length }}</a | ||
| 104 | > | ||
| 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"></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 href="javasript:void(0);" class="discard_bt" | 130 | <a |
| 131 | @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | 131 | href="javasript:void(0);" |
| 132 | class="discard_bt" | ||
| 133 | @click="discardRply(cmnt)" | ||
| 134 | ><img src="../assets/images/discard.svg" | ||
| 132 | /></a> | 135 | /></a> |
| 133 | </div> | 136 | </div> |
| 134 | </div> | 137 | </div> |
| 135 | <!-- parent --> | 138 | <!-- parent --> |
| 136 | <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | 139 | <div |
| 140 | class="child-full-width" | ||
| 141 | v-for="(childCmnt, i) in cmnt.children" | ||
| 142 | :key="i" | ||
| 143 | > | ||
| 137 | <div class="full-width"> | 144 | <div class="full-width"> |
| 138 | <div class="b-user-head"> | 145 | <div class="b-user-head"> |
| 139 | <img :src="childCmnt.user.profilePic" /> | 146 | <img :src="childCmnt.user.profilePic" /> |
| 140 | <span class="head-content">{{childCmnt.user.name }} </span> | 147 | <span class="head-content" |
| 148 | >{{ childCmnt.user.name }} | ||
| 149 | </span> | ||
| 141 | <ul> | 150 | <ul> |
| 142 | <li> | 151 | <li> |
| 143 | <span></span | 152 | <span></span |
| 144 | ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | 153 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 154 | childCmnt.user.karmaPoints | ||
| 155 | }}pts | ||
| 156 | </li> | ||
| 157 | <li> | ||
| 158 | <span></span | ||
| 159 | >{{ dateGenerator(childCmnt.createdAt) }} | ||
| 145 | </li> | 160 | </li> |
| 146 | <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | ||
| 147 | </ul> | 161 | </ul> |
| 148 | </div> | 162 | </div> |
| 149 | <p> | 163 | <p> |
| 150 | {{childCmnt.comment}} | 164 | {{ childCmnt.comment }} |
| 151 | </p> | 165 | </p> |
| 152 | <div class="joined_wrapper"> | 166 | <div class="joined_wrapper"> |
| 153 | <ul class="joined-info info_bc_spc"> | 167 | <ul class="joined-info info_bc_spc"> |
| 154 | <li> | 168 | <li> |
| 155 | <img src="../assets/images/purple-heart.png" /> | 169 | <img |
| 170 | src="../assets/images/heart.svg" | ||
| 171 | v-if="childCmnt.like == false" | ||
| 172 | @click="likeComment(true, childCmnt._id)" | ||
| 173 | class="cursor-pointer" | ||
| 174 | /> | ||
| 175 | <img | ||
| 176 | src="../assets/images/purple-heart.png" | ||
| 177 | v-if="childCmnt.like == true" | ||
| 178 | @click="likeComment(false, childCmnt._id)" | ||
| 179 | class="cursor-pointer" | ||
| 180 | /> | ||
| 181 | </li> | ||
| 182 | <li> | ||
| 183 | <a href="javasript:void(0);"> | ||
| 184 | {{ childCmnt.likes.length }}</a | ||
| 185 | > | ||
| 156 | </li> | 186 | </li> |
| 157 | <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | ||
| 158 | |||
| 159 | </ul> | 187 | </ul> |
| 160 | |||
| 161 | </div> | 188 | </div> |
| 162 | </div> | 189 | </div> |
| 163 | </div> | 190 | </div> |
| 164 | <!-- eree --> | 191 | <!-- eree --> |
| 165 | 192 | ||
| 166 | <!-- comments footer --> | 193 | <!-- comments footer --> |
| 167 | </li> | 194 | </li> |
| 168 | </ul> | 195 | </ul> |
| 169 | </div> | 196 | </div> |
| 170 | <!-- bounce board body --> | 197 | <!-- bounce board body --> |
| 171 | <div class="comments-footer" v-if="parentInput"> | 198 | <div class="comments-footer" v-if="parentInput"> |
| 172 | <textarea v-model="comment"></textarea> | 199 | <textarea v-model="comment"></textarea> |
| 173 | <div class="comments-footer-wrp"> | 200 | <div class="comments-footer-wrp"> |
| 174 | <a | 201 | <a |
| 175 | href="javasript:void(0);" | 202 | href="javasript:void(0);" |
| 176 | class="add_comments_chat" | 203 | class="add_comments_chat" |
| 177 | @click="createComment" | 204 | @click="createComment" |
| 178 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 205 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 179 | > | 206 | > |
| 180 | </div> | 207 | </div> |
| 181 | </div> | 208 | </div> |
| 182 | <!-- comments footer --> | 209 | <!-- comments footer --> |
| 183 | </div> | 210 | </div> |
| 184 | </div> | 211 | </div> |
| 185 | <!-- bounceboard wrp --> | 212 | <!-- bounceboard wrp --> |
| 186 | <!-- chat box --> | 213 | <!-- chat box --> |
| 187 | 214 | ||
| 188 | |||
| 189 | <div class="single-mobileInsight"> | 215 | <div class="single-mobileInsight"> |
| 190 | <div class="top-area-blank"></div> | 216 | <div class="top-area-blank"></div> |
| 191 | <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" /> | 217 | <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" /> |
| 192 | <div class="single-left-Insight-comments"> | 218 | <div class="single-left-Insight-comments"> |
| 193 | <div class="author-thoughts"> | 219 | <div class="author-thoughts"> |
| 194 | 220 | ||
| 195 | <img | 221 | <img |
| 196 | src="../assets/images/thoughts-upper.svg" | 222 | src="../assets/images/thoughts-upper.svg" |
| 197 | class="upper-th" | 223 | class="upper-th" |
| 198 | /> | 224 | /> |
| 199 | <img | 225 | <img |
| 200 | :src="currentSlideData.payload.metaData.authorImage" | 226 | :src="currentSlideData.payload.metaData.authorImage" |
| 201 | class="dynamic-thoughts" | 227 | class="dynamic-thoughts" |
| 202 | /> | 228 | /> |
| 203 | </div><!-- user thoughts --> | 229 | </div><!-- user thoughts --> |
| 204 | <div class="single-author-li-comments"> | 230 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 205 | <div class="a-intro-comments custom-c-style"> | 231 | <div class="a-intro-comments custom-c-style"> |
| 206 | <p> | 232 | <p> |
| 207 | {{currentSlideData.payload.comments[0].comment}} | 233 | {{commentList[0].comment}} |
| 208 | </p> | 234 | </p> |
| 209 | <ul class="rly-comment-set"> | 235 | <ul class="rly-comment-set"> |
| 236 | <!-- like/dislike --> | ||
| 210 | <li> | 237 | <li> |
| 211 | <img src="../assets/images/color-heart.svg" /> | 238 | <img |
| 212 | <a href="javascript:void(0);">0</a> | 239 | src="../assets/images/heart.svg" |
| 240 | v-if="commentList[0].like == false" | ||
| 241 | @click="likeComment(true, commentList[0]._id)" | ||
| 242 | class="cursor-pointer" | ||
| 243 | /> | ||
| 244 | <img | ||
| 245 | src="../assets/images/purple-heart.png" | ||
| 246 | v-if="commentList[0].like == true" | ||
| 247 | @click="likeComment(false, commentList[0]._id)" | ||
| 248 | class="cursor-pointer" | ||
| 249 | /> | ||
| 250 | <a href="javascript:void(0);">{{ | ||
| 251 | commentList[0].likes.length | ||
| 252 | }}</a> | ||
| 213 | </li> | 253 | </li> |
| 254 | <!-- like/dislike ends --> | ||
| 214 | <li> | 255 | <li> |
| 215 | <img src="../assets/images/rply.svg" /> | 256 | <img src="../assets/images/rply.svg" /> |
| 216 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 257 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 258 | >Reply</a | ||
| 259 | > | ||
| 217 | </li> | 260 | </li> |
| 218 | </ul> | 261 | </ul> |
| 219 | </div> | 262 | </div> |
| 220 | <!-- comments box --> | 263 | <!-- comments box --> |
| 221 | </div> | 264 | </div> |
| 222 | <!-- single author comments --> | 265 | <!-- single author comments --> |
| 223 | <div class="single-author-li-comments"> | 266 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 224 | <div class="a-intro-comments custom-c-style"> | 267 | <div class="a-intro-comments custom-c-style"> |
| 225 | <p> | 268 | <p> |
| 226 | {{currentSlideData.payload.comments[1].comment}} | 269 | {{commentList[1].comment}} |
| 227 | </p> | 270 | </p> |
| 228 | <ul class="rly-comment-set"> | 271 | <ul class="rly-comment-set"> |
| 272 | <!-- like/dislike --> | ||
| 229 | <li> | 273 | <li> |
| 230 | <img src="../assets/images/color-heart.svg" /> | 274 | <img |
| 231 | <a href="javascript:void(0);">0</a> | 275 | src="../assets/images/heart.svg" |
| 276 | v-if="commentList[1].like == false" | ||
| 277 | @click="likeComment(true, commentList[1]._id)" | ||
| 278 | class="cursor-pointer" | ||
| 279 | /> | ||
| 280 | <img | ||
| 281 | src="../assets/images/purple-heart.png" | ||
| 282 | v-if="commentList[1].like == true" | ||
| 283 | @click="likeComment(false, commentList[1]._id)" | ||
| 284 | class="cursor-pointer" | ||
| 285 | /> | ||
| 286 | <a href="javascript:void(0);">{{ | ||
| 287 | commentList[1].likes.length | ||
| 288 | }}</a> | ||
| 232 | </li> | 289 | </li> |
| 290 | <!-- like/dislike ends --> | ||
| 233 | <li> | 291 | <li> |
| 234 | <img src="../assets/images/rply.svg" /> | 292 | <img src="../assets/images/rply.svg" /> |
| 235 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 293 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 294 | >Reply</a | ||
| 295 | > | ||
| 236 | </li> | 296 | </li> |
| 237 | </ul> | 297 | </ul> |
| 238 | </div> | 298 | </div> |
| 239 | <!-- comments box --> | 299 | <!-- comments box --> |
| 240 | </div> | 300 | </div> |
| 241 | <!-- single author comments --> | 301 | <!-- single author comments --> |
| 242 | </div> | 302 | </div> |
| 243 | <!-- single mobile Left insight --> | 303 | <!-- single mobile Left insight --> |
| 244 | <div class="c-product-insight-wrp"> | 304 | <div class="c-product-insight-wrp"> |
| 245 | <div class="single-author-li-comments"> | 305 | <div class="single-author-li-comments"> |
| 246 | <div class="a-intro-comments custom-selected-style"> | 306 | <div class="a-intro-comments custom-selected-style"> |
| 247 | <img src="../assets/images/rect.svg" class="rect" /> | 307 | <img src="../assets/images/rect.svg" class="rect" /> |
| 248 | <div class="top-wrp"> | 308 | <div class="top-wrp"> |
| 249 | {{currentSlideData.payload.insight.tag}} Insight | 309 | {{currentSlideData.payload.insight.tag}} Insight |
| 250 | <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | 310 | <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> |
| 251 | </div> | 311 | </div> |
| 252 | <!-- <div class="top-head"> | 312 | <!-- <div class="top-head"> |
| 253 | Decide on using multiple call to action vs single call to | 313 | Decide on using multiple call to action vs single call to |
| 254 | action depending on the stage of the user journey | 314 | action depending on the stage of the user journey |
| 255 | </div> | 315 | </div> |
| 256 | <p> | 316 | <p> |
| 257 | Marketing 101 teaches us to use one single, call to action | 317 | Marketing 101 teaches us to use one single, call to action |
| 258 | (CTA) at the top of the funnel before the uer has shown | 318 | (CTA) at the top of the funnel before the uer has shown |
| 259 | interest in the product. <br /><br /> | 319 | interest in the product. <br /><br /> |
| 260 | When the user is already onboarded and is in the | 320 | When the user is already onboarded and is in the |
| 261 | <strong> engage stage </strong>, it may be better to use a | 321 | <strong> engage stage </strong>, it may be better to use a |
| 262 | single CTA for each use case in order to | 322 | single CTA for each use case in order to |
| 263 | <strong> avoid ambiguity.</strong> | 323 | <strong> avoid ambiguity.</strong> |
| 264 | </p> --> | 324 | </p> --> |
| 265 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> | 325 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> |
| 266 | <p>{{currentSlideData.payload.insight.description}} | 326 | <p>{{currentSlideData.payload.insight.description}} |
| 267 | <div class="footer"> | 327 | <div class="footer"> |
| 268 | <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> | 328 | <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> |
| 269 | <a href="javascript:void(0);" class="ft-share" | 329 | <a href="javascript:void(0);" class="ft-share" |
| 270 | ><img src="../assets/images/reply-red.svg" /> Share from | 330 | ><img src="../assets/images/reply-red.svg" /> Share from |
| 271 | library</a | 331 | library</a |
| 272 | > | 332 | > |
| 273 | </div> | 333 | </div> |
| 274 | <!-- footer --> | 334 | <!-- footer --> |
| 275 | </div> | 335 | </div> |
| 276 | <!-- comments box --> | 336 | <!-- comments box --> |
| 277 | </div> | 337 | </div> |
| 278 | <!-- single author comments --> | 338 | <!-- single author comments --> |
| 279 | </div> | 339 | </div> |
| 280 | <!-- single mobile Right insight --> | 340 | <!-- single mobile Right insight --> |
| 281 | </div> | 341 | </div> |
| 282 | <!-- Single Mobile Insight --> | 342 | <!-- Single Mobile Insight --> |
| 283 | <!-- single author comments --> | 343 | <!-- single author comments --> |
| 284 | <div class="footer-nav"> | 344 | <div class="footer-nav"> |
| 285 | <div class="footer-top white-bg"> | 345 | <div class="footer-top white-bg"> |
| 286 | <div class="row"> | 346 | <div class="row"> |
| 287 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 347 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 288 | <div class="row h-100p"> | 348 | <div class="row h-100p"> |
| 289 | <div | 349 | <div |
| 290 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 350 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 291 | > | 351 | > |
| 292 | <div class="ft-comments-group testi-photos-ct"> | 352 | <div class="ft-comments-group testi-photos-ct"> |
| 293 | <div class="c-with-photos"> | 353 | <div class="c-with-photos"> |
| 294 | <span class="count-comments" | 354 | <span class="count-comments" |
| 295 | >{{ commentList.length - 1 }}+ Comments</span | 355 | >{{ getLastcomment("count", commentList) }}+ |
| 356 | Comments</span | ||
| 296 | ><!-- count commets --> | 357 | ><!-- count commets --> |
| 297 | <ul class="comments-photos"> | 358 | <ul class="comments-photos"> |
| 298 | <li><img src="../assets/images/c-photo-1.png" /></li> | 359 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 299 | <li><img src="../assets/images/c-photo-2.png" /></li> | 360 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 300 | <li><img src="../assets/images/c-photo-3.png" /></li> | 361 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 301 | </ul> | 362 | </ul> |
| 302 | <!-- comment photos --> | 363 | <!-- comment photos --> |
| 303 | </div> | 364 | </div> |
| 304 | <div class="comments-detail all-c-space"> | 365 | <div class="comments-detail all-c-space"> |
| 305 | <span | 366 | <span |
| 306 | >{{ commentList[commentList.length - 1].user.name }} | 367 | >{{ getLastcomment("name", commentList) }} |
| 307 | <a href="javascript:void(0);" @click="open_ct_box" | 368 | <a href="javascript:void(0);" @click="open_ct_box" |
| 308 | >View All</a | 369 | >View All</a |
| 309 | ></span | 370 | ></span |
| 310 | > | 371 | > |
| 311 | <p> | 372 | <p> |
| 312 | <!-- I wonder what the difference between “Dunzo Assistant” | 373 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 313 | and “Pickup and Drop... --> | 374 | and “Pickup and Drop... --> |
| 314 | {{ commentList[commentList.length - 1].comment }} | 375 | {{ getLastcomment("msg", commentList) }} |
| 315 | </p> | 376 | </p> |
| 316 | </div> | 377 | </div> |
| 317 | <!-- comments detail --> | 378 | <!-- comments detail --> |
| 318 | </div> | 379 | </div> |
| 319 | <!-- comments Group --> | 380 | <!-- comments Group --> |
| 320 | </div> | 381 | </div> |
| 321 | </div> | 382 | </div> |
| 322 | </div> | 383 | </div> |
| 323 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 384 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 324 | <div class="comment-frm no-c-frm"> | 385 | <div class="comment-frm no-c-frm"> |
| 325 | <div class="row"> | 386 | <div class="row"> |
| 326 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 387 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 327 | <div class="form-group frm-wdth addfrm-spc"> | 388 | <div class="form-group frm-wdth addfrm-spc"> |
| 328 | <input | 389 | <input |
| 329 | type="text" | 390 | type="text" |
| 330 | class="form-control" | 391 | class="form-control" |
| 331 | placeholder="Something on your mind?" | 392 | placeholder="Something on your mind?" |
| 332 | id="open_ct_box" | 393 | id="open_ct_box" |
| 333 | v-model="comment" | 394 | v-model="comment" |
| 334 | /> | 395 | /> |
| 335 | </div> | 396 | </div> |
| 336 | </div> | 397 | </div> |
| 337 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 398 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 338 | <a | 399 | <a |
| 339 | href="javascript:void(0);" | 400 | href="javascript:void(0);" |
| 340 | @click="createComment" | 401 | @click="createComment" |
| 341 | class="add-comment" | 402 | class="add-comment" |
| 342 | ><img src="../assets/images/add-comment.svg" /> | 403 | ><img src="../assets/images/add-comment.svg" /> |
| 343 | Comment</a | 404 | Comment</a |
| 344 | > | 405 | > |
| 345 | </div> | 406 | </div> |
| 346 | </div> | 407 | </div> |
| 347 | <!-- comment from --> | 408 | <!-- comment from --> |
| 348 | </div> | 409 | </div> |
| 349 | </div> | 410 | </div> |
| 350 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 411 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 351 | <ul class="top-intro-bt"> | 412 | <ul class="top-intro-bt"> |
| 352 | <li> | 413 | <li> |
| 353 | <a href="javascript:void(0);" @click="goBack" | 414 | <a href="javascript:void(0);" @click="goBack" |
| 354 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 415 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 355 | > | 416 | > |
| 356 | </li> | 417 | </li> |
| 357 | <li> | 418 | <li> |
| 358 | <a href="javascript:void(0);" @click="goNext" | 419 | <a href="javascript:void(0);" @click="goNext" |
| 359 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 420 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 360 | slide</a | 421 | slide</a |
| 361 | > | 422 | > |
| 362 | </li> | 423 | </li> |
| 363 | </ul> | 424 | </ul> |
| 364 | </div> | 425 | </div> |
| 365 | <!-- buttons list --> | 426 | <!-- buttons list --> |
| 366 | </div> | 427 | </div> |
| 367 | </div> | 428 | </div> |
| 368 | <!-- footer top --> | 429 | <!-- footer top --> |
| 369 | <div class="footer-bottom"> | 430 | <div class="footer-bottom"> |
| 370 | <ul> | 431 | <ul> |
| 371 | <li class="active"></li> | 432 | <li class="active"></li> |
| 372 | <li></li> | 433 | <li></li> |
| 373 | </ul> | 434 | </ul> |
| 374 | </div> | 435 | </div> |
| 375 | <!-- footer top --> | 436 | <!-- footer top --> |
| 376 | </div> | 437 | </div> |
| 377 | <!-- footer --> | 438 | <!-- footer --> |
| 378 | </div> | 439 | </div> |
| 379 | <!-- body wrapper --> | 440 | <!-- body wrapper --> |
| 380 | </div> | 441 | </div> |
| 381 | <!-- main wrapper --> | 442 | <!-- main wrapper --> |
| 382 | </main> | 443 | </main> |
| 383 | </template> | 444 | </template> |
| 384 | 445 | ||
| 385 | <script> | 446 | <script> |
| 386 | import Vue from "vue"; | 447 | import Vue from "vue"; |
| 387 | import router from "../router"; | 448 | import router from "../router"; |
| 388 | import axios from "axios"; | 449 | import axios from "axios"; |
| 389 | import moment from 'moment'; | 450 | import moment from 'moment'; |
| 451 | import Header from "./Header"; | ||
| 452 | |||
| 390 | export default { | 453 | export default { |
| 454 | components: { | ||
| 455 | Header: Header, | ||
| 456 | }, | ||
| 391 | name: "SingleMobileScreenInsightOne", | 457 | name: "SingleMobileScreenInsightOne", |
| 392 | 458 | ||
| 393 | data() { | 459 | data() { |
| 394 | return { | 460 | return { |
| 395 | allSlide: [], | 461 | allSlide: [], |
| 396 | currentSlideIndex: null, | 462 | currentSlideIndex: null, |
| 397 | currentSlideData: null, | 463 | currentSlideData: null, |
| 398 | // | 464 | // |
| 399 | usertoken: null, | 465 | usertoken: null, |
| 400 | commentList: [], | 466 | commentList: [], |
| 401 | comment: null, | 467 | comment: null, |
| 402 | parentInput: true, | 468 | parentInput: true, |
| 403 | }; | 469 | }; |
| 404 | }, | 470 | }, |
| 405 | mounted() { | 471 | mounted() { |
| 406 | var allSlideData = localStorage.getItem( | 472 | var allSlideData = localStorage.getItem( |
| 407 | "spotlight_slide" + this.$route.params.caseStudyId | 473 | "spotlight_slide" + this.$route.params.caseStudyId |
| 408 | ); | 474 | ); |
| 409 | if (allSlideData) { | 475 | if (allSlideData) { |
| 410 | this.allSlide = JSON.parse(allSlideData); | 476 | this.allSlide = JSON.parse(allSlideData); |
| 411 | this.getCurrentSlideData(); | 477 | this.getCurrentSlideData(); |
| 412 | } | 478 | } |
| 413 | var userdata = localStorage.getItem("spotlight_usertoken"); | 479 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 414 | if (userdata) { | 480 | if (userdata) { |
| 415 | userdata = JSON.parse(userdata); | 481 | userdata = JSON.parse(userdata); |
| 416 | this.usertoken = userdata.token; | 482 | this.usertoken = userdata.token; |
| 417 | this.getComment(); | 483 | this.getComment(); |
| 418 | } | 484 | } |
| 419 | }, | 485 | }, |
| 420 | methods: { | 486 | methods: { |
| 421 | getCurrentSlideData() { | 487 | getCurrentSlideData() { |
| 422 | var i = this.allSlide.findIndex( | 488 | var i = this.allSlide.findIndex( |
| 423 | (slide_) => slide_.slideId == this.$route.params.slideId | 489 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 424 | ); | 490 | ); |
| 425 | this.currentSlideIndex = i; | 491 | this.currentSlideIndex = i; |
| 426 | this.currentSlideData = this.allSlide[i]; | 492 | this.currentSlideData = this.allSlide[i]; |
| 427 | console.log("currentSlideData", this.currentSlideData); | 493 | console.log("currentSlideData", this.currentSlideData); |
| 428 | }, | 494 | }, |
| 429 | goNext() { | 495 | goNext() { |
| 430 | this.currentSlideIndex++; | 496 | this.currentSlideIndex++; |
| 431 | this.$router.push({ | 497 | this.$router.push({ |
| 432 | name: this.allSlide[this.currentSlideIndex].ur, | 498 | name: this.allSlide[this.currentSlideIndex].ur, |
| 433 | params: { | 499 | params: { |
| 434 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 500 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 435 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 501 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 436 | }, | 502 | }, |
| 437 | }); | 503 | }); |
| 438 | }, | 504 | }, |
| 439 | goBack() { | 505 | goBack() { |
| 440 | this.currentSlideIndex--; | 506 | this.currentSlideIndex--; |
| 441 | this.$router.push({ | 507 | this.$router.push({ |
| 442 | name: this.allSlide[this.currentSlideIndex].ur, | 508 | name: this.allSlide[this.currentSlideIndex].ur, |
| 443 | params: { | 509 | params: { |
| 444 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 510 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 445 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 511 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 446 | }, | 512 | }, |
| 447 | }); | 513 | }); |
| 448 | }, | 514 | }, |
| 449 | createComment() { | 515 | createComment() { |
| 450 | console.log("===", this.comment); | 516 | console.log("===", this.comment); |
| 451 | var obj = { | 517 | var obj = { |
| 452 | caseStudyId: this.currentSlideData.caseStudyId, | 518 | caseStudyId: this.currentSlideData.caseStudyId, |
| 453 | slideId: this.currentSlideData.slideId, | 519 | slideId: this.currentSlideData.slideId, |
| 454 | comment: this.comment, | 520 | comment: this.comment, |
| 455 | 521 | ||
| 456 | }; | 522 | }; |
| 457 | axios | 523 | axios |
| 458 | .post("/bounceBoard/comment", obj, { | 524 | .post("/bounceBoard/comment", obj, { |
| 459 | headers: { | 525 | headers: { |
| 460 | Authorization: "Bearer " + this.usertoken, | 526 | Authorization: "Bearer " + this.usertoken, |
| 461 | }, | 527 | }, |
| 462 | }) | 528 | }) |
| 463 | .then((response) => { | 529 | .then((response) => { |
| 464 | this.comment = null; | 530 | this.comment = null; |
| 465 | this.getComment(); | 531 | this.getComment(); |
| 466 | console.log(response); | 532 | console.log(response); |
| 467 | }) | 533 | }) |
| 468 | .catch((error) => { | 534 | .catch((error) => { |
| 469 | if (error.response) { | 535 | if (error.response) { |
| 470 | this.$toaster.error(error.response.data.message); | 536 | this.$toaster.error(error.response.data.message); |
| 471 | } | 537 | } |
| 472 | }); | 538 | }); |
| 473 | }, | 539 | }, |
| 474 | createChildComment(cmnt) { | 540 | createChildComment(cmnt) { |
| 475 | console.log(cmnt,"===", this.comment); | 541 | console.log(cmnt,"===", this.comment); |
| 476 | var obj = { | 542 | var obj = { |
| 477 | caseStudyId: this.currentSlideData.caseStudyId, | 543 | caseStudyId: this.currentSlideData.caseStudyId, |
| 478 | slideId: this.currentSlideData.slideId, | 544 | slideId: this.currentSlideData.slideId, |
| 479 | comment: this.comment, | 545 | comment: this.comment, |
| 480 | parentId: cmnt._id, | 546 | parentId: cmnt._id, |
| 481 | 547 | ||
| 482 | }; | 548 | }; |
| 483 | axios | 549 | axios |
| 484 | .post("/bounceBoard/comment", obj, { | 550 | .post("/bounceBoard/comment", obj, { |
| 485 | headers: { | 551 | headers: { |
| 486 | Authorization: "Bearer " + this.usertoken, | 552 | Authorization: "Bearer " + this.usertoken, |
| 487 | }, | 553 | }, |
| 488 | }) | 554 | }) |
| 489 | .then((response) => { | 555 | .then((response) => { |
| 490 | this.comment = null; | 556 | this.comment = null; |
| 491 | this.discardRply(cmnt); | 557 | this.discardRply(cmnt); |
| 492 | this.getComment(); | 558 | this.getComment(); |
| 493 | console.log(response); | 559 | console.log(response); |
| 494 | }) | 560 | }) |
| 495 | .catch((error) => { | 561 | .catch((error) => { |
| 496 | if (error.response) { | 562 | if (error.response) { |
| 497 | this.$toaster.error(error.response.data.message); | 563 | this.$toaster.error(error.response.data.message); |
| 498 | } | 564 | } |
| 499 | }); | 565 | }); |
| 500 | }, | 566 | }, |
| 501 | getComment() { | 567 | getComment() { |
| 502 | axios | 568 | axios |
| 503 | .get( | 569 | .get( |
| 504 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 570 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 505 | { | 571 | { |
| 506 | headers: { | 572 | headers: { |
| 507 | Authorization: "Bearer " + this.usertoken, | 573 | Authorization: "Bearer " + this.usertoken, |
| 508 | }, | 574 | }, |
| 509 | } | 575 | } |
| 510 | ) | 576 | ) |
| 511 | .then((response) => { | 577 | .then((response) => { |
| 512 | console.log(response.data); | 578 | console.log(response.data); |
| 513 | var comments = []; | 579 | var comments = []; |
| 514 | var keys = Object.keys(response.data.data) | 580 | var keys = Object.keys(response.data.data) |
| 515 | response.data.data | 581 | response.data.data |
| 516 | keys.forEach((key_) => { | 582 | keys.forEach((key_) => { |
| 517 | comments.push(response.data.data[key_]) | 583 | comments.push(response.data.data[key_]) |
| 518 | }); | 584 | }); |
| 519 | comments.forEach((coment_)=>{ | 585 | comments.forEach((coment_)=>{ |
| 520 | coment_.childInput = false; | 586 | coment_.childInput = false; |
| 521 | }); | 587 | }); |
| 522 | console.log("comments",comments) | 588 | console.log("comments",comments) |
| 523 | this.commentList = comments; | 589 | this.commentList = comments; |
| 524 | }) | 590 | }) |
| 525 | .catch((error) => console.log(error)); | 591 | .catch((error) => console.log(error)); |
| 526 | }, | 592 | }, |
| 527 | dateGenerator(curreDate){ | 593 | dateGenerator(curreDate){ |
| 528 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 594 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 529 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 595 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 530 | var result = todayDate.diff(endDate, 'days'); | 596 | var result = todayDate.diff(endDate, 'days'); |
| 531 | return result; | 597 | return result; |
| 532 | }, | 598 | }, |
| 533 | goToLogin() { | 599 | goToLogin() { |
| 534 | this.$router.push("/login"); | 600 | this.$router.push("/login"); |
| 535 | }, | 601 | }, |
| 536 | goToSignUp() { | 602 | goToSignUp() { |
| 537 | this.$router.push("/"); | 603 | this.$router.push("/"); |
| 538 | }, | 604 | }, |
| 605 | open(url){ | ||
| 606 | window.open(url); | ||
| 607 | }, | ||
| 539 | chtbox_close() { | 608 | chtbox_close() { |
| 540 | $("#cht_box_close").removeClass("cht_close"); | 609 | $("#cht_box_close").removeClass("cht_close"); |
| 541 | $("#open_ct_box, .c_hide").show(); | 610 | $("#open_ct_box, .c_hide").show(); |
| 542 | $(".footer-top").addClass("white-bg"); | 611 | $(".footer-top").addClass("white-bg"); |
| 543 | }, | 612 | }, |
| 544 | open_ct_box() { | 613 | open_ct_box() { |
| 545 | $("#cht_box_close").addClass("cht_close"); | 614 | $("#cht_box_close").addClass("cht_close"); |
| 546 | $("#open_ct_box, .c_hide").hide(); | 615 | $("#open_ct_box, .c_hide").hide(); |
| 547 | $(".footer-top").removeClass("white-bg"); | 616 | $(".footer-top").removeClass("white-bg"); |
| 548 | }, | 617 | }, |
| 549 | eachRply(cmnt) { | 618 | eachRply(cmnt) { |
| 550 | cmnt.childInput = true; | 619 | cmnt.childInput = true; |
| 551 | this.parentInput = false; | 620 | this.parentInput = false; |
| 621 | this.comment = null; | ||
| 622 | setTimeout(() => { | ||
| 623 | document.getElementById("childInput").focus(); | ||
| 624 | }, 100); | ||
| 552 | }, | 625 | }, |
| 553 | discardRply(cmnt) { | 626 | discardRply(cmnt) { |
| 554 | cmnt.childInput = false; | 627 | cmnt.childInput = false; |
| 555 | this.parentInput = true; | 628 | this.parentInput = true; |
| 556 | 629 | this.comment = null; | |
| 630 | }, | ||
| 631 | reply_cht_box(i) { | ||
| 632 | console.log(this.commentList, "cmnt"); | ||
| 633 | $("#cht_box_close").addClass("cht_close"); | ||
| 634 | $("#open_ct_box, .c_hide").hide(); | ||
| 635 | $(".footer-top").removeClass("white-bg"); | ||
| 636 | this.commentList[i].childInput = true; | ||
| 637 | this.parentInput = false; | ||
| 638 | this.comment = null; | ||
| 639 | setTimeout(() => { | ||
| 640 | document.getElementById("childInput").focus(); | ||
| 641 | }, 100); | ||
| 642 | }, | ||
| 643 | likeComment(status, id) { | ||
| 644 | console.log("===", this.comment); | ||
| 645 | var obj = { | ||
| 646 | commentId: id, | ||
| 647 | like: status, | ||
| 648 | }; | ||
| 649 | axios | ||
| 650 | .post("/bounceBoard/like", obj, { | ||
| 651 | headers: { | ||
| 652 | Authorization: "Bearer " + this.usertoken, | ||
| 653 | }, | ||
| 654 | }) | ||
| 655 | .then((response) => { | ||
| 656 | this.getComment(); | ||
| 657 | console.log(response); | ||
| 658 | }) | ||
| 659 | .catch((error) => { | ||
| 660 | if (error.response) { | ||
| 661 | this.$toaster.error(error.response.data.message); | ||
| 662 | } | ||
| 663 | }); | ||
| 664 | }, | ||
| 665 | getLastcomment(flag, commentArray) { | ||
| 666 | var finalComment = null; | ||
| 667 | var totalMessage = 0; | ||
| 668 | var name = null; | ||
| 669 | commentArray.forEach((comment_) => { |
src/components/SingleMobileScreenInsightTwo.vue
| 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 | </nav> | 24 | <Header></Header> |
| 25 | |||
| 26 | <!-- </nav> --> | ||
| 25 | <!-- menu wrapper --> | 27 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 28 | <div class="intro-startup"> |
| 27 | <!-- chat box --> | 29 | <!-- chat box --> |
| 28 | <div class="bounce-board-wrp" id="cht_box_close"> | 30 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 29 | <div class="inner-wrp-bc"> | 31 | <div class="inner-wrp-bc"> |
| 30 | <div class="bc-top-head"> | 32 | <div class="bc-top-head"> |
| 31 | <span class="bc-head"> | 33 | <span class="bc-head"> |
| 32 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 34 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 33 | </span> | 35 | </span> |
| 34 | <div class="action-sort"> | 36 | <div class="action-sort"> |
| 35 | <span class="sort-by">SORT BY</span> | 37 | <span class="sort-by">SORT BY</span> |
| 36 | <div class="btn-group"> | 38 | <div class="btn-group"> |
| 37 | <button | 39 | <button |
| 38 | type="button" | 40 | type="button" |
| 39 | class="bc-sort-list dropdown-toggle" | 41 | class="bc-sort-list dropdown-toggle" |
| 40 | data-toggle="dropdown" | 42 | data-toggle="dropdown" |
| 41 | aria-haspopup="true" | 43 | aria-haspopup="true" |
| 42 | aria-expanded="false" | 44 | aria-expanded="false" |
| 43 | > | 45 | > |
| 44 | BEST | 46 | BEST |
| 45 | </button> | 47 | </button> |
| 46 | <div class="dropdown-menu short_by"> | 48 | <div class="dropdown-menu short_by"> |
| 47 | <a class="dropdown-item" href="javasript:void(0);" | 49 | <a class="dropdown-item" href="javasript:void(0);" |
| 48 | >BEST 1</a | 50 | >BEST 1</a |
| 49 | > | 51 | > |
| 50 | <a class="dropdown-item" href="javasript:void(0);" | 52 | <a class="dropdown-item" href="javasript:void(0);" |
| 51 | >BEST 2</a | 53 | >BEST 2</a |
| 52 | > | 54 | > |
| 53 | <a class="dropdown-item" href="javasript:void(0);" | 55 | <a class="dropdown-item" href="javasript:void(0);" |
| 54 | >BEST 3</a | 56 | >BEST 3</a |
| 55 | > | 57 | > |
| 56 | </div> | 58 | </div> |
| 57 | </div> | 59 | </div> |
| 58 | <a | 60 | <a |
| 59 | href="javasript:void(0);" | 61 | href="javasript:void(0);" |
| 60 | @click="chtbox_close" | 62 | @click="chtbox_close" |
| 61 | class="close_chat_bx" | 63 | class="close_chat_bx" |
| 62 | ><img src="../assets/images/close.png" alt="close" /></a | 64 | ><img src="../assets/images/close.png" alt="close" /></a |
| 63 | ><!-- close --> | 65 | ><!-- close --> |
| 64 | </div> | 66 | </div> |
| 65 | <!-- action sort --> | 67 | <!-- action sort --> |
| 66 | </div> | 68 | </div> |
| 67 | <!-- top head --> | 69 | <!-- top head --> |
| 68 | <div class="bounce-board-body"> | 70 | <div class="bounce-board-body"> |
| 69 | |||
| 70 | <!-- all user comments --> | 71 | <!-- all user comments --> |
| 71 | <ul class="bounced-user-comments"> | 72 | <ul class="bounced-user-comments"> |
| 72 | <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"> |
| 73 | <div class="bc_brd_l"></div> | 74 | <div class="bc_brd_l"></div> |
| 74 | <!-- border --> | 75 | <!-- border --> |
| 75 | <div class="parent-full-width"> | 76 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 76 | <div class="full-width"> | 77 | <div class="full-width"> |
| 77 | <div class="b-user-head"> | 78 | <div class="b-user-head"> |
| 78 | <img :src="cmnt.user.profilePic" /> | 79 | <img :src="cmnt.user.profilePic" /> |
| 79 | <span class="head-content">{{ cmnt.user.name }} </span> | 80 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 80 | <ul> | 81 | <ul> |
| 81 | <li> | 82 | <li> |
| 82 | <span></span | 83 | <span></span |
| 83 | ><img src="../assets/images/u-info-icon.png" />{{ | 84 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 84 | cmnt.user.karmaPoints | 85 | cmnt.user.karmaPoints |
| 85 | }}pts | 86 | }}pts |
| 86 | </li> | 87 | </li> |
| 87 | <li><span></span>{{dateGenerator(cmnt.createdAt)}}</li> | 88 | <li> |
| 89 | <span></span>{{ dateGenerator(cmnt.createdAt) }} | ||
| 90 | </li> | ||
| 88 | </ul> | 91 | </ul> |
| 89 | </div> | 92 | </div> |
| 90 | <!-- header --> | 93 | <!-- header --> |
| 91 | <p> | 94 | <p> |
| 92 | {{ cmnt.comment }} | 95 | {{ cmnt.comment }} |
| 93 | </p> | 96 | </p> |
| 94 | <div class="joined_wrapper"> | 97 | <div class="joined_wrapper"> |
| 95 | <ul class="joined-info info_bc_spc"> | 98 | <ul class="joined-info info_bc_spc"> |
| 96 | |||
| 97 | <li> | 99 | <li> |
| 98 | <img src="../assets/images/heart.svg" v-if="cmnt.like == false" @click="likeComment(true,cmnt._id)" class="cursor-pointer"/> | 100 | <img |
| 99 | <img src="../assets/images/purple-heart.png" v-if="cmnt.like == true" @click="likeComment(false,cmnt._id)" class="cursor-pointer"/> | 101 | src="../assets/images/heart.svg" |
| 102 | v-if="cmnt.like == false" | ||
| 103 | @click="likeComment(true, cmnt._id)" | ||
| 104 | class="cursor-pointer" | ||
| 105 | /> | ||
| 106 | <img | ||
| 107 | src="../assets/images/purple-heart.png" | ||
| 108 | v-if="cmnt.like == true" | ||
| 109 | @click="likeComment(false, cmnt._id)" | ||
| 110 | class="cursor-pointer" | ||
| 111 | /> | ||
| 112 | </li> | ||
| 113 | <li> | ||
| 114 | <a href="javasript:void(0);"> | ||
| 115 | {{ cmnt.likes.length }}</a | ||
| 116 | > | ||
| 100 | </li> | 117 | </li> |
| 101 | <li><a href="javasript:void(0);"> {{cmnt.likes.length}}</a></li> | ||
| 102 | <li class="comment-spc"> | 118 | <li class="comment-spc"> |
| 103 | <img src="../assets/images/purple-comment.png" /> | 119 | <img src="../assets/images/purple-comment.png" /> |
| 104 | </li> | 120 | </li> |
| 105 | <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | 121 | <li> |
| 122 | <a href="javasript:void(0);"> | ||
| 123 | {{ cmnt.children.length }}</a | ||
| 124 | > | ||
| 125 | </li> | ||
| 106 | </ul> | 126 | </ul> |
| 107 | <div class="add_rply" v-if="!cmnt.childInput"> | 127 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 108 | <input | 128 | <input |
| 109 | type="text" | 129 | type="text" |
| 110 | @click="eachRply(cmnt)" | 130 | @click="eachRply(cmnt)" |
| 111 | class="add_Rply_C" | 131 | class="add_Rply_C" |
| 112 | placeholder="Add your reply" | 132 | placeholder="Add your reply" |
| 113 | /> | 133 | /> |
| 114 | </div> | 134 | </div> |
| 115 | <!-- rly form --> | 135 | <!-- rly form --> |
| 116 | </div> | 136 | </div> |
| 117 | <!-- joined wrapper --> | 137 | <!-- joined wrapper --> |
| 118 | </div> | 138 | </div> |
| 119 | <!-- full width --> | 139 | <!-- full width --> |
| 120 | </div> | 140 | </div> |
| 121 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> | 141 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 122 | <textarea v-model="comment"></textarea> | 142 | <textarea v-model="comment" id="childInput"></textarea> |
| 123 | <div class="comments-footer-wrp"> | 143 | <div class="comments-footer-wrp"> |
| 124 | <a | 144 | <a |
| 125 | @click="createChildComment(cmnt)" | 145 | @click="createChildComment(cmnt)" |
| 126 | href="javasript:void(0);" | 146 | href="javasript:void(0);" |
| 127 | class="add_comments_chat reply-Wdth" | 147 | class="add_comments_chat reply-Wdth" |
| 128 | >Reply</a | 148 | >Reply</a |
| 129 | > | 149 | > |
| 130 | <a href="javasript:void(0);" class="discard_bt" | 150 | <a |
| 131 | @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | 151 | href="javasript:void(0);" |
| 152 | class="discard_bt" | ||
| 153 | @click="discardRply(cmnt)" | ||
| 154 | ><img src="../assets/images/discard.svg" | ||
| 132 | /></a> | 155 | /></a> |
| 133 | </div> | 156 | </div> |
| 134 | </div> | 157 | </div> |
| 135 | <!-- parent --> | 158 | <!-- parent --> |
| 136 | <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | 159 | <div |
| 160 | class="child-full-width" | ||
| 161 | v-for="(childCmnt, i) in cmnt.children" | ||
| 162 | :key="i" | ||
| 163 | > | ||
| 137 | <div class="full-width"> | 164 | <div class="full-width"> |
| 138 | <div class="b-user-head"> | 165 | <div class="b-user-head"> |
| 139 | <img :src="childCmnt.user.profilePic" /> | 166 | <img :src="childCmnt.user.profilePic" /> |
| 140 | <span class="head-content">{{childCmnt.user.name }} </span> | 167 | <span class="head-content" |
| 168 | >{{ childCmnt.user.name }} | ||
| 169 | </span> | ||
| 141 | <ul> | 170 | <ul> |
| 142 | <li> | 171 | <li> |
| 143 | <span></span | 172 | <span></span |
| 144 | ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | 173 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 174 | childCmnt.user.karmaPoints | ||
| 175 | }}pts | ||
| 176 | </li> | ||
| 177 | <li> | ||
| 178 | <span></span | ||
| 179 | >{{ dateGenerator(childCmnt.createdAt) }} | ||
| 145 | </li> | 180 | </li> |
| 146 | <li><span></span>{{dateGenerator(childCmnt.createdAt)}}</li> | ||
| 147 | </ul> | 181 | </ul> |
| 148 | </div> | 182 | </div> |
| 149 | <p> | 183 | <p> |
| 150 | {{childCmnt.comment}} | 184 | {{ childCmnt.comment }} |
| 151 | </p> | 185 | </p> |
| 152 | <div class="joined_wrapper"> | 186 | <div class="joined_wrapper"> |
| 153 | <ul class="joined-info info_bc_spc"> | 187 | <ul class="joined-info info_bc_spc"> |
| 154 | <li> | 188 | <li> |
| 155 | <img src="../assets/images/heart.svg" v-if="childCmnt.like == false" @click="likeComment(true,childCmnt._id)" class="cursor-pointer"/> | 189 | <img |
| 156 | <img src="../assets/images/purple-heart.png" v-if="childCmnt.like == true" @click="likeComment(false,childCmnt._id)" class="cursor-pointer"/> | 190 | src="../assets/images/heart.svg" |
| 191 | v-if="childCmnt.like == false" | ||
| 192 | @click="likeComment(true, childCmnt._id)" | ||
| 193 | class="cursor-pointer" | ||
| 194 | /> | ||
| 195 | <img | ||
| 196 | src="../assets/images/purple-heart.png" | ||
| 197 | v-if="childCmnt.like == true" | ||
| 198 | @click="likeComment(false, childCmnt._id)" | ||
| 199 | class="cursor-pointer" | ||
| 200 | /> | ||
| 201 | </li> | ||
| 202 | <li> | ||
| 203 | <a href="javasript:void(0);"> | ||
| 204 | {{ childCmnt.likes.length }}</a | ||
| 205 | > | ||
| 157 | </li> | 206 | </li> |
| 158 | <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | ||
| 159 | |||
| 160 | </ul> | 207 | </ul> |
| 161 | |||
| 162 | </div> | 208 | </div> |
| 163 | </div> | 209 | </div> |
| 164 | </div> | 210 | </div> |
| 165 | <!-- eree --> | 211 | <!-- eree --> |
| 166 | 212 | ||
| 167 | <!-- comments footer --> | 213 | <!-- comments footer --> |
| 168 | </li> | 214 | </li> |
| 169 | </ul> | 215 | </ul> |
| 170 | </div> | 216 | </div> |
| 171 | <!-- bounce board body --> | 217 | <!-- bounce board body --> |
| 172 | <div class="comments-footer" v-if="parentInput"> | 218 | <div class="comments-footer" v-if="parentInput"> |
| 173 | <textarea v-model="comment"></textarea> | 219 | <textarea v-model="comment"></textarea> |
| 174 | <div class="comments-footer-wrp"> | 220 | <div class="comments-footer-wrp"> |
| 175 | <a | 221 | <a |
| 176 | href="javasript:void(0);" | 222 | href="javasript:void(0);" |
| 177 | class="add_comments_chat" | 223 | class="add_comments_chat" |
| 178 | @click="createComment" | 224 | @click="createComment" |
| 179 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 225 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 180 | > | 226 | > |
| 181 | </div> | 227 | </div> |
| 182 | </div> | 228 | </div> |
| 183 | <!-- comments footer --> | 229 | <!-- comments footer --> |
| 184 | </div> | 230 | </div> |
| 185 | </div> | 231 | </div> |
| 186 | <!-- bounceboard wrp --> | 232 | <!-- bounceboard wrp --> |
| 187 | <!-- chat box --> | 233 | <!-- chat box --> |
| 188 | 234 | ||
| 189 | <div class="single-mobileInsight"> | 235 | <div class="single-mobileInsight"> |
| 190 | <div class="top-area-blank"></div> | 236 | <div class="top-area-blank"></div> |
| 191 | <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> | 237 | <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> |
| 192 | <img | 238 | <img |
| 193 | :src="currentSlideData.payload.metaData.mobileImage" | 239 | :src="currentSlideData.payload.metaData.mobileImage" |
| 194 | class="m-screen" | 240 | class="m-screen" |
| 195 | /> | 241 | /> |
| 196 | <div class="single-left-Insight-comments"> | 242 | <div class="single-left-Insight-comments"> |
| 197 | <div class="author-thoughts"> | 243 | <div class="author-thoughts"> |
| 198 | <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> | 244 | <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> |
| 199 | <img | 245 | <img |
| 200 | :src="currentSlideData.payload.metaData.authorImage" | 246 | :src="currentSlideData.payload.metaData.authorImage" |
| 201 | class="dynamic-thoughts" | 247 | class="dynamic-thoughts" |
| 202 | /> | 248 | /> |
| 203 | </div> | 249 | </div> |
| 204 | <!-- user thoughts --> | 250 | <!-- user thoughts --> |
| 205 | 251 | ||
| 206 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | 252 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 207 | <div class="a-intro-comments custom-c-style"> | 253 | <div class="a-intro-comments custom-c-style"> |
| 208 | <!-- <p> | 254 | <!-- <p> |
| 209 | I wonder what the difference between “ | 255 | I wonder what the difference between “ |
| 210 | <strong>Dunzo Assistant </strong>” and “<strong | 256 | <strong>Dunzo Assistant </strong>” and “<strong |
| 211 | >Pickup and Drop </strong | 257 | >Pickup and Drop </strong |
| 212 | >” are. If they are the same, there are two “call to actions” | 258 | >” are. If they are the same, there are two “call to actions” |
| 213 | for the same workflow | 259 | for the same workflow |
| 214 | </p> --> | 260 | </p> --> |
| 215 | <p >{{ commentList[0].comment }}</p> | 261 | <p>{{ commentList[0].comment }}</p> |
| 216 | <ul class="rly-comment-set"> | 262 | <ul class="rly-comment-set"> |
| 217 | <!-- like/dislike --> | 263 | <!-- like/dislike --> |
| 218 | <li > | 264 | <li> |
| 219 | <img src="../assets/images/heart.svg" v-if="commentList[0].like == false" @click="likeComment(true,commentList[0]._id)" class="cursor-pointer"/> | 265 | <img |
| 220 | <img src="../assets/images/purple-heart.png" v-if="commentList[0].like == true" @click="likeComment(false,commentList[0]._id)" class="cursor-pointer"/> | 266 | src="../assets/images/heart.svg" |
| 221 | <a href="javascript:void(0);">{{commentList[0].likes.length}}</a> | 267 | v-if="commentList[0].like == false" |
| 268 | @click="likeComment(true, commentList[0]._id)" | ||
| 269 | class="cursor-pointer" | ||
| 270 | /> | ||
| 271 | <img | ||
| 272 | src="../assets/images/purple-heart.png" | ||
| 273 | v-if="commentList[0].like == true" | ||
| 274 | @click="likeComment(false, commentList[0]._id)" | ||
| 275 | class="cursor-pointer" | ||
| 276 | /> | ||
| 277 | <a href="javascript:void(0);">{{ | ||
| 278 | commentList[0].likes.length | ||
| 279 | }}</a> | ||
| 222 | </li> | 280 | </li> |
| 223 | <!-- like/dislike ends --> | 281 | <!-- like/dislike ends --> |
| 224 | <li> | 282 | <li> |
| 225 | <img src="../assets/images/rply.svg" /> | 283 | <img src="../assets/images/rply.svg" /> |
| 226 | <a href="javascript:void(0);" @click="reply_cht_box(0)">Reply</a> | 284 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 285 | >Reply</a | ||
| 286 | > | ||
| 227 | </li> | 287 | </li> |
| 228 | </ul> | 288 | </ul> |
| 229 | </div> | 289 | </div> |
| 230 | <!-- comments box --> | 290 | <!-- comments box --> |
| 231 | </div> | 291 | </div> |
| 232 | <!-- single author comments --> | 292 | <!-- single author comments --> |
| 233 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | 293 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 234 | <div class="a-intro-comments custom-c-style"> | 294 | <div class="a-intro-comments custom-c-style"> |
| 235 | <p> | 295 | <p> |
| 236 | {{ commentList[1].comment }} | 296 | {{ commentList[1].comment }} |
| 237 | </p> | 297 | </p> |
| 238 | <ul class="rly-comment-set"> | 298 | <ul class="rly-comment-set"> |
| 239 | <!-- like/dislike --> | 299 | <!-- like/dislike --> |
| 240 | <li > | 300 | <li> |
| 241 | <img src="../assets/images/heart.svg" v-if="commentList[1].like == false" @click="likeComment(true,commentList[1]._id)" class="cursor-pointer"/> | 301 | <img |
| 242 | <img src="../assets/images/purple-heart.png" v-if="commentList[1].like == true" @click="likeComment(false,commentList[1]._id)" class="cursor-pointer"/> | 302 | src="../assets/images/heart.svg" |
| 243 | <a href="javascript:void(0);">{{commentList[1].likes.length}}</a> | 303 | v-if="commentList[1].like == false" |
| 304 | @click="likeComment(true, commentList[1]._id)" | ||
| 305 | class="cursor-pointer" | ||
| 306 | /> | ||
| 307 | <img | ||
| 308 | src="../assets/images/purple-heart.png" | ||
| 309 | v-if="commentList[1].like == true" | ||
| 310 | @click="likeComment(false, commentList[1]._id)" | ||
| 311 | class="cursor-pointer" | ||
| 312 | /> | ||
| 313 | <a href="javascript:void(0);">{{ | ||
| 314 | commentList[1].likes.length | ||
| 315 | }}</a> | ||
| 244 | </li> | 316 | </li> |
| 245 | <!-- like/dislike ends --> | 317 | <!-- like/dislike ends --> |
| 246 | <li> | 318 | <li> |
| 247 | <img src="../assets/images/rply.svg" /> | 319 | <img src="../assets/images/rply.svg" /> |
| 248 | <a href="javascript:void(0);" @click="reply_cht_box(1)">Reply</a> | 320 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 321 | >Reply</a | ||
| 322 | > | ||
| 249 | </li> | 323 | </li> |
| 250 | </ul> | 324 | </ul> |
| 251 | </div> | 325 | </div> |
| 252 | <!-- comments box --> | 326 | <!-- comments box --> |
| 253 | </div> | 327 | </div> |
| 254 | <!-- single author comments --> | 328 | <!-- single author comments --> |
| 255 | </div> | 329 | </div> |
| 256 | <!-- single mobile Left insight --> | 330 | <!-- single mobile Left insight --> |
| 257 | <div class="c-product-insight-wrp two-screen-spc-top" v-if="commentExistCheck(2)"> | 331 | <div |
| 332 | class="c-product-insight-wrp two-screen-spc-top" | ||
| 333 | v-if="commentExistCheck(2)" | ||
| 334 | > | ||
| 258 | <div class="single-author-li-comments"> | 335 | <div class="single-author-li-comments"> |
| 259 | <div class="a-intro-comments"> | 336 | <div class="a-intro-comments"> |
| 260 | <p> | 337 | <p> |
| 261 | {{ commentList[2].comment }} | 338 | {{ commentList[2].comment }} |
| 262 | </p> | 339 | </p> |
| 263 | <ul class="rly-comment-set"> | 340 | <ul class="rly-comment-set"> |
| 264 | <!-- like/dislike --> | 341 | <!-- like/dislike --> |
| 265 | <li > | 342 | <li> |
| 266 | <img src="../assets/images/heart.svg" v-if="commentList[2].like == false" @click="likeComment(true,commentList[2]._id)" class="cursor-pointer"/> | 343 | <img |
| 267 | <img src="../assets/images/purple-heart.png" v-if="commentList[2].like == true" @click="likeComment(false,commentList[2]._id)" class="cursor-pointer"/> | 344 | src="../assets/images/heart.svg" |
| 268 | <a href="javascript:void(0);">{{commentList[2].likes.length}}</a> | 345 | v-if="commentList[2].like == false" |
| 346 | @click="likeComment(true, commentList[2]._id)" | ||
| 347 | class="cursor-pointer" | ||
| 348 | /> | ||
| 349 | <img | ||
| 350 | src="../assets/images/purple-heart.png" | ||
| 351 | v-if="commentList[2].like == true" | ||
| 352 | @click="likeComment(false, commentList[2]._id)" | ||
| 353 | class="cursor-pointer" | ||
| 354 | /> | ||
| 355 | <a href="javascript:void(0);">{{ | ||
| 356 | commentList[2].likes.length | ||
| 357 | }}</a> | ||
| 269 | </li> | 358 | </li> |
| 270 | <!-- like/dislike ends --> | 359 | <!-- like/dislike ends --> |
| 271 | <li> | 360 | <li> |
| 272 | <img src="../assets/images/rply.svg" /> | 361 | <img src="../assets/images/rply.svg" /> |
| 273 | <a href="javascript:void(0);" @click="reply_cht_box(2)">Reply</a> | 362 | <a href="javascript:void(0);" @click="reply_cht_box(2)" |
| 363 | >Reply</a | ||
| 364 | > | ||
| 274 | </li> | 365 | </li> |
| 275 | </ul> | 366 | </ul> |
| 276 | </div> | 367 | </div> |
| 277 | <!-- comments box --> | 368 | <!-- comments box --> |
| 278 | </div> | 369 | </div> |
| 279 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | 370 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> |
| 280 | <div class="a-intro-comments"> | 371 | <div class="a-intro-comments"> |
| 281 | <p> | 372 | <p> |
| 282 | {{ commentList[3].comment }} | 373 | {{ commentList[3].comment }} |
| 283 | </p> | 374 | </p> |
| 284 | <ul class="rly-comment-set"> | 375 | <ul class="rly-comment-set"> |
| 285 | <!-- like/dislike --> | 376 | <!-- like/dislike --> |
| 286 | <li > | 377 | <li> |
| 287 | <img src="../assets/images/heart.svg" v-if="commentList[3].like == false" @click="likeComment(true,commentList[3]._id)" class="cursor-pointer"/> | 378 | <img |
| 288 | <img src="../assets/images/purple-heart.png" v-if="commentList[3].like == true" @click="likeComment(false,commentList[3]._id)" class="cursor-pointer"/> | 379 | src="../assets/images/heart.svg" |
| 289 | <a href="javascript:void(0);">{{commentList[3].likes.length}}</a> | 380 | v-if="commentList[3].like == false" |
| 381 | @click="likeComment(true, commentList[3]._id)" | ||
| 382 | class="cursor-pointer" | ||
| 383 | /> | ||
| 384 | <img | ||
| 385 | src="../assets/images/purple-heart.png" | ||
| 386 | v-if="commentList[3].like == true" | ||
| 387 | @click="likeComment(false, commentList[3]._id)" | ||
| 388 | class="cursor-pointer" | ||
| 389 | /> | ||
| 390 | <a href="javascript:void(0);">{{ | ||
| 391 | commentList[3].likes.length | ||
| 392 | }}</a> | ||
| 290 | </li> | 393 | </li> |
| 291 | <!-- like/dislike ends --> | 394 | <!-- like/dislike ends --> |
| 292 | <li> | 395 | <li> |
| 293 | <img src="../assets/images/rply.svg" /> | 396 | <img src="../assets/images/rply.svg" /> |
| 294 | <a href="javascript:void(0);" @click="reply_cht_box(3)">Reply</a> | 397 | <a href="javascript:void(0);" @click="reply_cht_box(3)" |
| 398 | >Reply</a | ||
| 399 | > | ||
| 295 | </li> | 400 | </li> |
| 296 | </ul> | 401 | </ul> |
| 297 | </div> | 402 | </div> |
| 298 | <!-- comments box --> | 403 | <!-- comments box --> |
| 299 | </div> | 404 | </div> |
| 300 | <!-- single author comments --> | 405 | <!-- single author comments --> |
| 301 | </div> | 406 | </div> |
| 302 | <!-- single mobile Right insight --> | 407 | <!-- single mobile Right insight --> |
| 303 | </div> | 408 | </div> |
| 304 | <!-- single author comments --> | 409 | <!-- single author comments --> |
| 305 | <div class="footer-nav"> | 410 | <div class="footer-nav"> |
| 306 | <div class="footer-top white-bg"> | 411 | <div class="footer-top white-bg"> |
| 307 | <div class="row"> | 412 | <div class="row"> |
| 308 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 413 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 309 | <div class="row h-100p"> | 414 | <div class="row h-100p"> |
| 310 | <div | 415 | <div |
| 311 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 416 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 312 | > | 417 | > |
| 313 | <div class="ft-comments-group testi-photos-ct"> | 418 | <div class="ft-comments-group testi-photos-ct"> |
| 314 | <div class="c-with-photos"> | 419 | <div class="c-with-photos"> |
| 315 | <span class="count-comments" | 420 | <span class="count-comments" |
| 316 | >{{ getLastcomment('count',commentList) }}+ Comments</span | 421 | >{{ getLastcomment("count", commentList) }}+ |
| 422 | Comments</span | ||
| 317 | ><!-- count commets --> | 423 | ><!-- count commets --> |
| 318 | <ul class="comments-photos"> | 424 | <ul class="comments-photos"> |
| 319 | <li><img src="../assets/images/c-photo-1.png" /></li> | 425 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> |
| 320 | <li><img src="../assets/images/c-photo-2.png" /></li> | 426 | <li><img src="../assets/images/c-photo-2.png" /></li> |
| 321 | <li><img src="../assets/images/c-photo-3.png" /></li> | 427 | <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 322 | </ul> | 428 | </ul> |
| 323 | <!-- comment photos --> | 429 | <!-- comment photos --> |
| 324 | </div> | 430 | </div> |
| 325 | <div class="comments-detail all-c-space"> | 431 | <div class="comments-detail all-c-space"> |
| 326 | <span | 432 | <span |
| 327 | >{{ getLastcomment('name',commentList) }} | 433 | >{{ getLastcomment("name", commentList) }} |
| 328 | <a href="javascript:void(0);" @click="open_ct_box" | 434 | <a href="javascript:void(0);" @click="open_ct_box" |
| 329 | >View All</a | 435 | >View All</a |
| 330 | ></span | 436 | ></span |
| 331 | > | 437 | > |
| 332 | <p> | 438 | <p> |
| 333 | <!-- I wonder what the difference between “Dunzo Assistant” | 439 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 334 | and “Pickup and Drop... --> | 440 | and “Pickup and Drop... --> |
| 335 | {{ getLastcomment('msg',commentList) }} | 441 | {{ getLastcomment("msg", commentList) }} |
| 336 | </p> | 442 | </p> |
| 337 | </div> | 443 | </div> |
| 338 | <!-- comments detail --> | 444 | <!-- comments detail --> |
| 339 | </div> | 445 | </div> |
| 340 | <!-- comments Group --> | 446 | <!-- comments Group --> |
| 341 | </div> | 447 | </div> |
| 342 | </div> | 448 | </div> |
| 343 | </div> | 449 | </div> |
| 344 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 450 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 345 | <div class="comment-frm no-c-frm"> | 451 | <div class="comment-frm no-c-frm"> |
| 346 | <div class="row"> | 452 | <div class="row"> |
| 347 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 453 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 348 | <div class="form-group frm-wdth addfrm-spc"> | 454 | <div class="form-group frm-wdth addfrm-spc"> |
| 349 | <input | 455 | <input |
| 350 | type="text" | 456 | type="text" |
| 351 | class="form-control" | 457 | class="form-control" |
| 352 | placeholder="Something on your mind?" | 458 | placeholder="Something on your mind?" |
| 353 | id="open_ct_box" | 459 | id="open_ct_box" |
| 354 | v-model="comment" | 460 | v-model="comment" |
| 355 | /> | 461 | /> |
| 356 | </div> | 462 | </div> |
| 357 | </div> | 463 | </div> |
| 358 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 464 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 359 | <a | 465 | <a |
| 360 | href="javascript:void(0);" | 466 | href="javascript:void(0);" |
| 361 | @click="createComment" | 467 | @click="createComment" |
| 362 | class="add-comment" | 468 | class="add-comment" |
| 363 | ><img src="../assets/images/add-comment.svg" /> | 469 | ><img src="../assets/images/add-comment.svg" /> |
| 364 | Comment</a | 470 | Comment</a |
| 365 | > | 471 | > |
| 366 | </div> | 472 | </div> |
| 367 | </div> | 473 | </div> |
| 368 | <!-- comment from --> | 474 | <!-- comment from --> |
| 369 | </div> | 475 | </div> |
| 370 | </div> | 476 | </div> |
| 371 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 477 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 372 | <ul class="top-intro-bt"> | 478 | <ul class="top-intro-bt"> |
| 373 | <li> | 479 | <li> |
| 374 | <a href="javascript:void(0);" @click="goBack" | 480 | <a href="javascript:void(0);" @click="goBack" |
| 375 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 481 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 376 | > | 482 | > |
| 377 | </li> | 483 | </li> |
| 378 | <li> | 484 | <li> |
| 379 | <a href="javascript:void(0);" @click="goNext" | 485 | <a href="javascript:void(0);" @click="goNext" |
| 380 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 486 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 381 | slide</a | 487 | slide</a |
| 382 | > | 488 | > |
| 383 | </li> | 489 | </li> |
| 384 | </ul> | 490 | </ul> |
| 385 | </div> | 491 | </div> |
| 386 | <!-- buttons list --> | 492 | <!-- buttons list --> |
| 387 | </div> | 493 | </div> |
| 388 | </div> | 494 | </div> |
| 389 | <!-- footer top --> | 495 | <!-- footer top --> |
| 390 | <div class="footer-bottom"> | 496 | <div class="footer-bottom"> |
| 391 | <ul> | 497 | <ul> |
| 392 | <li class="active"></li> | 498 | <li class="active"></li> |
| 393 | <li></li> | 499 | <li></li> |
| 394 | </ul> | 500 | </ul> |
| 395 | </div> | 501 | </div> |
| 396 | <!-- footer top --> | 502 | <!-- footer top --> |
| 397 | </div> | 503 | </div> |
| 398 | <!-- footer --> | 504 | <!-- footer --> |
| 399 | </div> | 505 | </div> |
| 400 | <!-- body wrapper --> | 506 | <!-- body wrapper --> |
| 401 | </div> | 507 | </div> |
| 402 | <!-- main wrapper --> | 508 | <!-- main wrapper --> |
| 403 | </main> | 509 | </main> |
| 404 | </template> | 510 | </template> |
| 405 | 511 | ||
| 406 | <script> | 512 | <script> |
| 407 | import Vue from "vue"; | 513 | import Vue from "vue"; |
| 408 | import router from "../router"; | 514 | import router from "../router"; |
| 409 | import axios from "axios"; | 515 | import axios from "axios"; |
| 410 | import moment from 'moment'; | 516 | import moment from "moment"; |
| 517 | import Header from "./Header"; | ||
| 411 | 518 | ||
| 412 | export default { | 519 | export default { |
| 520 | components: { | ||
| 521 | Header: Header, | ||
| 522 | }, | ||
| 413 | name: "SingleMobileScreenInsightTwo", | 523 | name: "SingleMobileScreenInsightTwo", |
| 414 | |||
| 415 | data() { | 524 | data() { |
| 416 | return { | 525 | return { |
| 417 | allSlide: [], | 526 | allSlide: [], |
| 418 | currentSlideIndex: null, | 527 | currentSlideIndex: null, |
| 419 | currentSlideData: null, | 528 | currentSlideData: null, |
| 420 | // | 529 | // |
| 421 | usertoken: null, | 530 | usertoken: null, |
| 422 | commentList: [], | 531 | commentList: [], |
| 423 | comment: null, | 532 | comment: null, |
| 424 | parentInput: true, | 533 | parentInput: true, |
| 425 | }; | 534 | }; |
| 426 | }, | 535 | }, |
| 427 | mounted() { | 536 | mounted() { |
| 428 | var allSlideData = localStorage.getItem( | 537 | var allSlideData = localStorage.getItem( |
| 429 | "spotlight_slide" + this.$route.params.caseStudyId | 538 | "spotlight_slide" + this.$route.params.caseStudyId |
| 430 | ); | 539 | ); |
| 431 | var userdata = localStorage.getItem("spotlight_usertoken"); | 540 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 432 | if (allSlideData) { | 541 | if (allSlideData) { |
| 433 | this.allSlide = JSON.parse(allSlideData); | 542 | this.allSlide = JSON.parse(allSlideData); |
| 434 | this.getCurrentSlideData(); | 543 | this.getCurrentSlideData(); |
| 435 | } | 544 | } |
| 436 | if (userdata) { | 545 | if (userdata) { |
| 437 | userdata = JSON.parse(userdata); | 546 | userdata = JSON.parse(userdata); |
| 438 | this.usertoken = userdata.token; | 547 | this.usertoken = userdata.token; |
| 439 | this.getComment(); | 548 | this.getComment(); |
| 440 | } | 549 | } |
| 441 | }, | 550 | }, |
| 442 | methods: { | 551 | methods: { |
| 443 | getCurrentSlideData() { | 552 | getCurrentSlideData() { |
| 444 | var i = this.allSlide.findIndex( | 553 | var i = this.allSlide.findIndex( |
| 445 | (slide_) => slide_.slideId == this.$route.params.slideId | 554 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 446 | ); | 555 | ); |
| 447 | this.currentSlideIndex = i; | 556 | this.currentSlideIndex = i; |
| 448 | this.currentSlideData = this.allSlide[i]; | 557 | this.currentSlideData = this.allSlide[i]; |
| 449 | console.log("currentSlideData", this.currentSlideData); | 558 | console.log("currentSlideData", this.currentSlideData); |
| 450 | }, | 559 | }, |
| 451 | goNext() { | 560 | goNext() { |
| 452 | this.currentSlideIndex++; | 561 | this.currentSlideIndex++; |
| 453 | this.$router.push({ | 562 | this.$router.push({ |
| 454 | name: this.allSlide[this.currentSlideIndex].ur, | 563 | name: this.allSlide[this.currentSlideIndex].ur, |
| 455 | params: { | 564 | params: { |
| 456 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 565 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 457 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 566 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 458 | }, | 567 | }, |
| 459 | }); | 568 | }); |
| 460 | }, | 569 | }, |
| 461 | goBack() { | 570 | goBack() { |
| 462 | this.currentSlideIndex--; | 571 | this.currentSlideIndex--; |
| 463 | this.$router.push({ | 572 | this.$router.push({ |
| 464 | name: this.allSlide[this.currentSlideIndex].ur, | 573 | name: this.allSlide[this.currentSlideIndex].ur, |
| 465 | params: { | 574 | params: { |
| 466 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 575 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 467 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 576 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 468 | }, | 577 | }, |
| 469 | }); | 578 | }); |
| 470 | }, | 579 | }, |
| 471 | createComment() { | 580 | createComment() { |
| 472 | console.log("===", this.comment); | 581 | console.log("===", this.comment); |
| 473 | var obj = { | 582 | var obj = { |
| 474 | caseStudyId: this.currentSlideData.caseStudyId, | 583 | caseStudyId: this.currentSlideData.caseStudyId, |
| 475 | slideId: this.currentSlideData.slideId, | 584 | slideId: this.currentSlideData.slideId, |
| 476 | comment: this.comment, | 585 | comment: this.comment, |
| 477 | |||
| 478 | }; | 586 | }; |
| 479 | axios | 587 | axios |
| 480 | .post("/bounceBoard/comment", obj, { | 588 | .post("/bounceBoard/comment", obj, { |
| 481 | headers: { | 589 | headers: { |
| 482 | Authorization: "Bearer " + this.usertoken, | 590 | Authorization: "Bearer " + this.usertoken, |
| 483 | }, | 591 | }, |
| 484 | }) | 592 | }) |
| 485 | .then((response) => { | 593 | .then((response) => { |
| 486 | this.comment = null; | 594 | this.comment = null; |
| 487 | this.getComment(); | 595 | this.getComment(); |
| 488 | console.log(response); | 596 | console.log(response); |
| 489 | }) | 597 | }) |
| 490 | .catch((error) => { | 598 | .catch((error) => { |
| 491 | if (error.response) { | 599 | if (error.response) { |
| 492 | this.$toaster.error(error.response.data.message); | 600 | this.$toaster.error(error.response.data.message); |
| 493 | } | 601 | } |
| 494 | }); | 602 | }); |
| 495 | }, | 603 | }, |
| 496 | likeComment(status,id) { | 604 | |
| 497 | console.log("===", this.comment); | 605 | createChildComment(cmnt) { |
| 498 | var obj = { | 606 | console.log(cmnt, "===", this.comment); |
| 499 | commentId: id, | ||
| 500 | like: status | ||
| 501 | |||
| 502 | }; | ||
| 503 | axios | ||
| 504 | .post("/bounceBoard/like", obj, { | ||
| 505 | headers: { | ||
| 506 | Authorization: "Bearer " + this.usertoken, | ||
| 507 | }, | ||
| 508 | }) | ||
| 509 | .then((response) => { | ||
| 510 | this.getComment(); | ||
| 511 | console.log(response); | ||
| 512 | }) | ||
| 513 | .catch((error) => { | ||
| 514 | if (error.response) { | ||
| 515 | this.$toaster.error(error.response.data.message); | ||
| 516 | } | ||
| 517 | }); | ||
| 518 | }, | ||
| 519 | createChildComment(cmnt) { | ||
| 520 | console.log(cmnt,"===", this.comment); | ||
| 521 | var obj = { | 607 | var obj = { |
| 522 | caseStudyId: this.currentSlideData.caseStudyId, | 608 | caseStudyId: this.currentSlideData.caseStudyId, |
| 523 | slideId: this.currentSlideData.slideId, | 609 | slideId: this.currentSlideData.slideId, |
| 524 | comment: this.comment, | 610 | comment: this.comment, |
| 525 | parentId: cmnt._id, | 611 | parentId: cmnt._id, |
| 526 | |||
| 527 | }; | 612 | }; |
| 528 | axios | 613 | axios |
| 529 | .post("/bounceBoard/comment", obj, { | 614 | .post("/bounceBoard/comment", obj, { |
| 530 | headers: { | 615 | headers: { |
| 531 | Authorization: "Bearer " + this.usertoken, | 616 | Authorization: "Bearer " + this.usertoken, |
| 532 | }, | 617 | }, |
| 533 | }) | 618 | }) |
| 534 | .then((response) => { | 619 | .then((response) => { |
| 535 | this.comment = null; | 620 | this.comment = null; |
| 536 | this.discardRply(cmnt); | 621 | this.discardRply(cmnt); |
| 537 | this.getComment(); | 622 | this.getComment(); |
| 538 | console.log(response); | 623 | console.log(response); |
| 539 | }) | 624 | }) |
| 540 | .catch((error) => { | 625 | .catch((error) => { |
| 541 | if (error.response) { | 626 | if (error.response) { |
| 542 | this.$toaster.error(error.response.data.message); | 627 | this.$toaster.error(error.response.data.message); |
| 543 | } | 628 | } |
| 544 | }); | 629 | }); |
| 545 | }, | 630 | }, |
| 546 | getComment() { | 631 | getComment() { |
| 547 | axios | 632 | axios |
| 548 | .get( | 633 | .get( |
| 549 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 634 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 550 | { | 635 | { |
| 551 | headers: { | 636 | headers: { |
| 552 | Authorization: "Bearer " + this.usertoken, | 637 | Authorization: "Bearer " + this.usertoken, |
| 553 | }, | 638 | }, |
| 554 | } | 639 | } |
| 555 | ) | 640 | ) |
| 556 | .then((response) => { | 641 | .then((response) => { |
| 557 | console.log(response.data); | 642 | console.log(response.data); |
| 558 | var comments = []; | 643 | var comments = []; |
| 559 | var keys = Object.keys(response.data.data) | 644 | var keys = Object.keys(response.data.data); |
| 560 | response.data.data | 645 | response.data.data; |
| 561 | keys.forEach((key_) => { | 646 | keys.forEach((key_) => { |
| 562 | if(response.data.data[key_].comment != null){ | 647 | comments.push(response.data.data[key_]); |
| 563 | comments.push(response.data.data[key_]) | ||
| 564 | } | ||
| 565 | }); | 648 | }); |
| 566 | comments.forEach((coment_)=>{ | 649 | comments.forEach((coment_) => { |
| 567 | coment_.childInput = false; | 650 | coment_.childInput = false; |
| 568 | }); | 651 | }); |
| 569 | console.log("comments",comments) | 652 | console.log("comments", comments); |
| 570 | this.commentList = comments; | 653 | this.commentList = comments; |
| 571 | }) | 654 | }) |
| 572 | .catch((error) => console.log(error)); | 655 | .catch((error) => console.log(error)); |
| 573 | }, | 656 | }, |
| 574 | dateGenerator(curreDate){ | 657 | dateGenerator(curreDate) { |
| 575 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 658 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 576 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 659 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 577 | var result = todayDate.diff(endDate, 'days'); | 660 | var result = todayDate.diff(endDate, "days"); |
| 578 | var date = null; | 661 | var date = null; |
| 579 | if(result == 0){ | 662 | if (result == 0) { |
| 580 | date = 'Today'; | 663 | date = "Today"; |
| 581 | }else{ | 664 | } else { |
| 582 | date = result +' days ago'; | 665 | date = result + " days ago"; |
| 583 | } | 666 | } |
| 584 | return date; | 667 | return date; |
| 585 | }, | 668 | }, |
| 586 | goToLogin() { | 669 | goToLogin() { |
| 587 | this.$router.push("/login"); | 670 | this.$router.push("/login"); |
| 588 | }, | 671 | }, |
| 589 | goToSignUp() { | 672 | goToSignUp() { |
| 590 | this.$router.push("/"); | 673 | this.$router.push("/"); |
| 591 | }, | 674 | }, |
| 592 | chtbox_close() { | 675 | chtbox_close() { |
| 593 | $("#cht_box_close").removeClass("cht_close"); | 676 | $("#cht_box_close").removeClass("cht_close"); |
| 594 | $("#open_ct_box, .c_hide").show(); | 677 | $("#open_ct_box, .c_hide").show(); |
| 595 | $(".footer-top").addClass("white-bg"); | 678 | $(".footer-top").addClass("white-bg"); |
| 596 | }, | 679 | }, |
| 597 | open_ct_box() { | 680 | open_ct_box() { |
| 598 | $("#cht_box_close").addClass("cht_close"); | 681 | $("#cht_box_close").addClass("cht_close"); |
| 599 | $("#open_ct_box, .c_hide").hide(); | 682 | $("#open_ct_box, .c_hide").hide(); |
| 600 | $(".footer-top").removeClass("white-bg"); | 683 | $(".footer-top").removeClass("white-bg"); |
| 601 | }, | 684 | }, |
| 602 | eachRply(cmnt) { | 685 | eachRply(cmnt) { |
| 603 | cmnt.childInput = true; | 686 | cmnt.childInput = true; |
| 604 | this.parentInput = false; | 687 | this.parentInput = false; |
| 688 | this.comment = null; | ||
| 689 | setTimeout(() => { | ||
| 690 | document.getElementById("childInput").focus(); | ||
| 691 | }, 100); | ||
| 605 | }, | 692 | }, |
| 606 | discardRply(cmnt) { | 693 | discardRply(cmnt) { |
| 607 | cmnt.childInput = false; | 694 | cmnt.childInput = false; |
| 608 | this.parentInput = true; | 695 | this.parentInput = true; |
| 609 | 696 | this.comment = null; | |
| 610 | }, | 697 | }, |
| 611 | reply_cht_box(i){ | 698 | reply_cht_box(i) { |
| 612 | console.log(this.commentList,"cmnt"); | 699 | console.log(this.commentList, "cmnt"); |
| 613 | $("#cht_box_close").addClass("cht_close"); | 700 | $("#cht_box_close").addClass("cht_close"); |
| 614 | $("#open_ct_box, .c_hide").hide(); | 701 | $("#open_ct_box, .c_hide").hide(); |
| 615 | $(".footer-top").removeClass("white-bg"); | 702 | $(".footer-top").removeClass("white-bg"); |
| 616 | this.commentList[i].childInput = true; | 703 | this.commentList[i].childInput = true; |
| 617 | this.parentInput = false; | 704 | this.parentInput = false; |
| 705 | this.comment = null; | ||
| 706 | setTimeout(() => { | ||
| 707 | document.getElementById("childInput").focus(); | ||
| 708 | }, 100); | ||
| 618 | }, | 709 | }, |
| 619 | getLastcomment(flag,commentArray){ | 710 | likeComment(status, id) { |
| 711 | console.log("===", this.comment); | ||
| 712 | var obj = { | ||
| 713 | commentId: id, | ||
| 714 | like: status, | ||
| 715 | }; | ||
| 716 | axios | ||
| 717 | .post("/bounceBoard/like", obj, { | ||
| 718 | headers: { | ||
| 719 | Authorization: "Bearer " + this.usertoken, | ||
| 720 | }, | ||
| 721 | }) | ||
| 722 | .then((response) => { | ||
| 723 | this.getComment(); | ||
| 724 | console.log(response); | ||
| 725 | }) | ||
| 726 | .catch((error) => { | ||
| 727 | if (error.response) { | ||
| 728 | this.$toaster.error(error.response.data.message); | ||
| 729 | } |
src/components/TwoScreenWithInsight.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);" | 5 | |
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | ||
| 23 | </div> | ||
| 24 | </nav> | ||
| 25 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 27 | <!-- chat box --> | 8 | <!-- chat box --> |
| 28 | <div class="bounce-board-wrp" id="cht_box_close"> | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 29 | <div class="inner-wrp-bc"> | 10 | <div class="inner-wrp-bc"> |
| 30 | <div class="bc-top-head"> | 11 | <div class="bc-top-head"> |
| 31 | <span class="bc-head"> | 12 | <span class="bc-head"> |
| 32 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 13 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 33 | </span> | 14 | </span> |
| 34 | <div class="action-sort"> | 15 | <div class="action-sort"> |
| 35 | <span class="sort-by">SORT BY</span> | 16 | <span class="sort-by">SORT BY</span> |
| 36 | <div class="btn-group"> | 17 | <div class="btn-group"> |
| 37 | <button | 18 | <button |
| 38 | type="button" | 19 | type="button" |
| 39 | class="bc-sort-list dropdown-toggle" | 20 | class="bc-sort-list dropdown-toggle" |
| 40 | data-toggle="dropdown" | 21 | data-toggle="dropdown" |
| 41 | aria-haspopup="true" | 22 | aria-haspopup="true" |
| 42 | aria-expanded="false" | 23 | aria-expanded="false" |
| 43 | > | 24 | > |
| 44 | BEST | 25 | BEST |
| 45 | </button> | 26 | </button> |
| 46 | <div class="dropdown-menu short_by"> | 27 | <div class="dropdown-menu short_by"> |
| 47 | <a class="dropdown-item" href="javasript:void(0);" | 28 | <a class="dropdown-item" href="javasript:void(0);" |
| 48 | >BEST 1</a | 29 | >BEST 1</a |
| 49 | > | 30 | > |
| 50 | <a class="dropdown-item" href="javasript:void(0);" | 31 | <a class="dropdown-item" href="javasript:void(0);" |
| 51 | >BEST 2</a | 32 | >BEST 2</a |
| 52 | > | 33 | > |
| 53 | <a class="dropdown-item" href="javasript:void(0);" | 34 | <a class="dropdown-item" href="javasript:void(0);" |
| 54 | >BEST 3</a | 35 | >BEST 3</a |
| 55 | > | 36 | > |
| 56 | </div> | 37 | </div> |
| 57 | </div> | 38 | </div> |
| 58 | <a | 39 | <a |
| 59 | href="javasript:void(0);" | 40 | href="javasript:void(0);" |
| 60 | @click="chtbox_close" | 41 | @click="chtbox_close" |
| 61 | class="close_chat_bx" | 42 | class="close_chat_bx" |
| 62 | ><img src="../assets/images/close.png" alt="close" /></a | 43 | ><img src="../assets/images/close.png" alt="close" /></a |
| 63 | ><!-- close --> | 44 | ><!-- close --> |
| 64 | </div> | 45 | </div> |
| 65 | <!-- action sort --> | 46 | <!-- action sort --> |
| 66 | </div> | 47 | </div> |
| 67 | <!-- top head --> | 48 | <!-- top head --> |
| 68 | <div class="bounce-board-body"> | 49 | <div class="bounce-board-body"> |
| 69 | <!-- all user comments --> | 50 | <!-- all user comments --> |
| 70 | <ul class="bounced-user-comments"> | 51 | <ul class="bounced-user-comments"> |
| 71 | <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"> |
| 72 | <div class="bc_brd_l"></div> | 53 | <div class="bc_brd_l"></div> |
| 73 | <!-- border --> | 54 | <!-- border --> |
| 74 | <div class="parent-full-width"> | 55 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 75 | <div class="full-width"> | 56 | <div class="full-width"> |
| 76 | <div class="b-user-head"> | 57 | <div class="b-user-head"> |
| 77 | <img :src="cmnt.user.profilePic" /> | 58 | <img :src="cmnt.user.profilePic" /> |
| 78 | <span class="head-content">{{ cmnt.user.name }} </span> | 59 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 79 | <ul> | 60 | <ul> |
| 80 | <li> | 61 | <li> |
| 81 | <span></span | 62 | <span></span |
| 82 | ><img src="../assets/images/u-info-icon.png" />{{ | 63 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 83 | cmnt.user.karmaPoints | 64 | cmnt.user.karmaPoints |
| 84 | }}pts | 65 | }}pts |
| 85 | </li> | 66 | </li> |
| 86 | <li> | 67 | <li> |
| 87 | <span></span>{{ dateGenerator(cmnt.createdAt) }}days | 68 | <span></span>{{ dateGenerator(cmnt.createdAt) }} |
| 88 | ago | ||
| 89 | </li> | 69 | </li> |
| 90 | </ul> | 70 | </ul> |
| 91 | </div> | 71 | </div> |
| 92 | <!-- header --> | 72 | <!-- header --> |
| 93 | <p> | 73 | <p> |
| 94 | {{ cmnt.comment }} | 74 | {{ cmnt.comment }} |
| 95 | </p> | 75 | </p> |
| 96 | <div class="joined_wrapper"> | 76 | <div class="joined_wrapper"> |
| 97 | <ul class="joined-info info_bc_spc"> | 77 | <ul class="joined-info info_bc_spc"> |
| 98 | <li> | 78 | <li> |
| 99 | <img src="../assets/images/purple-heart.png" /> | 79 | <img |
| 80 | src="../assets/images/heart.svg" | ||
| 81 | v-if="cmnt.like == false" | ||
| 82 | @click="likeComment(true, cmnt._id)" | ||
| 83 | class="cursor-pointer" | ||
| 84 | /> | ||
| 85 | <img | ||
| 86 | src="../assets/images/purple-heart.png" | ||
| 87 | v-if="cmnt.like == true" | ||
| 88 | @click="likeComment(false, cmnt._id)" | ||
| 89 | class="cursor-pointer" | ||
| 90 | /> | ||
| 91 | </li> | ||
| 92 | <li> | ||
| 93 | <a href="javasript:void(0);"> | ||
| 94 | {{ cmnt.likes.length }}</a | ||
| 95 | > | ||
| 100 | </li> | 96 | </li> |
| 101 | <li><a href="javasript:void(0);"> 0</a></li> | ||
| 102 | <li class="comment-spc"> | 97 | <li class="comment-spc"> |
| 103 | <img src="../assets/images/purple-comment.png" /> | 98 | <img src="../assets/images/purple-comment.png" /> |
| 104 | </li> | 99 | </li> |
| 105 | <li> | 100 | <li> |
| 106 | <a href="javasript:void(0);"> | 101 | <a href="javasript:void(0);"> |
| 107 | {{ cmnt.children.length }}</a | 102 | {{ cmnt.children.length }}</a |
| 108 | > | 103 | > |
| 109 | </li> | 104 | </li> |
| 110 | </ul> | 105 | </ul> |
| 111 | <div class="add_rply" v-if="!cmnt.childInput"> | 106 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 112 | <input | 107 | <input |
| 113 | type="text" | 108 | type="text" |
| 114 | @click="eachRply(cmnt)" | 109 | @click="eachRply(cmnt)" |
| 115 | class="add_Rply_C" | 110 | class="add_Rply_C" |
| 116 | placeholder="Add your reply" | 111 | placeholder="Add your reply" |
| 117 | /> | 112 | /> |
| 118 | </div> | 113 | </div> |
| 119 | <!-- rly form --> | 114 | <!-- rly form --> |
| 120 | </div> | 115 | </div> |
| 121 | <!-- joined wrapper --> | 116 | <!-- joined wrapper --> |
| 122 | </div> | 117 | </div> |
| 123 | <!-- full width --> | 118 | <!-- full width --> |
| 124 | </div> | 119 | </div> |
| 125 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 126 | <textarea v-model="comment"></textarea> | 121 | <textarea v-model="comment" id="childInput"></textarea> |
| 127 | <div class="comments-footer-wrp"> | 122 | <div class="comments-footer-wrp"> |
| 128 | <a | 123 | <a |
| 129 | @click="createChildComment(cmnt)" | 124 | @click="createChildComment(cmnt)" |
| 130 | href="javasript:void(0);" | 125 | href="javasript:void(0);" |
| 131 | class="add_comments_chat reply-Wdth" | 126 | class="add_comments_chat reply-Wdth" |
| 132 | >Reply</a | 127 | >Reply</a |
| 133 | > | 128 | > |
| 134 | <a | 129 | <a |
| 135 | href="javasript:void(0);" | 130 | href="javasript:void(0);" |
| 136 | class="discard_bt" | 131 | class="discard_bt" |
| 137 | @click="discardRply(cmnt)" | 132 | @click="discardRply(cmnt)" |
| 138 | ><img src="../assets/images/discard.svg" | 133 | ><img src="../assets/images/discard.svg" |
| 139 | /></a> | 134 | /></a> |
| 140 | </div> | 135 | </div> |
| 141 | </div> | 136 | </div> |
| 142 | <!-- parent --> | 137 | <!-- parent --> |
| 143 | <div | 138 | <div |
| 144 | class="child-full-width" | 139 | class="child-full-width" |
| 145 | v-for="(childCmnt, i) in cmnt.children" | 140 | v-for="(childCmnt, i) in cmnt.children" |
| 146 | :key="i" | 141 | :key="i" |
| 147 | > | 142 | > |
| 148 | <div class="full-width"> | 143 | <div class="full-width"> |
| 149 | <div class="b-user-head"> | 144 | <div class="b-user-head"> |
| 150 | <img :src="childCmnt.user.profilePic" /> | 145 | <img :src="childCmnt.user.profilePic" /> |
| 151 | <span class="head-content" | 146 | <span class="head-content" |
| 152 | >{{ childCmnt.user.name }} | 147 | >{{ childCmnt.user.name }} |
| 153 | </span> | 148 | </span> |
| 154 | <ul> | 149 | <ul> |
| 155 | <li> | 150 | <li> |
| 156 | <span></span | 151 | <span></span |
| 157 | ><img src="../assets/images/u-info-icon.png" />{{ | 152 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 158 | childCmnt.user.karmaPoints | 153 | childCmnt.user.karmaPoints |
| 159 | }}pts | 154 | }}pts |
| 160 | </li> | 155 | </li> |
| 161 | <li> | 156 | <li> |
| 162 | <span></span | 157 | <span></span |
| 163 | >{{ dateGenerator(childCmnt.createdAt) }}days ago | 158 | >{{ dateGenerator(childCmnt.createdAt) }} |
| 164 | </li> | 159 | </li> |
| 165 | </ul> | 160 | </ul> |
| 166 | </div> | 161 | </div> |
| 167 | <p> | 162 | <p> |
| 168 | {{ childCmnt.comment }} | 163 | {{ childCmnt.comment }} |
| 169 | </p> | 164 | </p> |
| 170 | <div class="joined_wrapper"> | 165 | <div class="joined_wrapper"> |
| 171 | <ul class="joined-info info_bc_spc"> | 166 | <ul class="joined-info info_bc_spc"> |
| 172 | <li> | 167 | <li> |
| 173 | <img src="../assets/images/purple-heart.png" /> | 168 | <img |
| 169 | src="../assets/images/heart.svg" | ||
| 170 | v-if="childCmnt.like == false" | ||
| 171 | @click="likeComment(true, childCmnt._id)" | ||
| 172 | class="cursor-pointer" | ||
| 173 | /> | ||
| 174 | <img | ||
| 175 | src="../assets/images/purple-heart.png" | ||
| 176 | v-if="childCmnt.like == true" | ||
| 177 | @click="likeComment(false, childCmnt._id)" | ||
| 178 | class="cursor-pointer" | ||
| 179 | /> | ||
| 174 | </li> | 180 | </li> |
| 175 | <li> | 181 | <li> |
| 176 | <a href="javasript:void(0);"> | 182 | <a href="javasript:void(0);"> |
| 177 | {{ childCmnt.likes.length }}</a | 183 | {{ childCmnt.likes.length }}</a |
| 178 | > | 184 | > |
| 179 | </li> | 185 | </li> |
| 180 | </ul> | 186 | </ul> |
| 181 | </div> | 187 | </div> |
| 182 | </div> | 188 | </div> |
| 183 | </div> | 189 | </div> |
| 184 | <!-- eree --> | 190 | <!-- eree --> |
| 185 | 191 | ||
| 186 | <!-- comments footer --> | 192 | <!-- comments footer --> |
| 187 | </li> | 193 | </li> |
| 188 | </ul> | 194 | </ul> |
| 189 | </div> | 195 | </div> |
| 190 | <!-- bounce board body --> | 196 | <!-- bounce board body --> |
| 191 | <div class="comments-footer" v-if="parentInput"> | 197 | <div class="comments-footer" v-if="parentInput"> |
| 192 | <textarea v-model="comment"></textarea> | 198 | <textarea v-model="comment"></textarea> |
| 193 | <div class="comments-footer-wrp"> | 199 | <div class="comments-footer-wrp"> |
| 194 | <a | 200 | <a |
| 195 | href="javasript:void(0);" | 201 | href="javasript:void(0);" |
| 196 | class="add_comments_chat" | 202 | class="add_comments_chat" |
| 197 | @click="createComment" | 203 | @click="createComment" |
| 198 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 204 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 199 | > | 205 | > |
| 200 | </div> | 206 | </div> |
| 201 | </div> | 207 | </div> |
| 202 | <!-- comments footer --> | 208 | <!-- comments footer --> |
| 203 | </div> | 209 | </div> |
| 204 | </div> | 210 | </div> |
| 205 | <!-- bounceboard wrp --> | 211 | <!-- bounceboard wrp --> |
| 206 | <!-- chat box --> | 212 | <!-- chat box --> |
| 207 | 213 | ||
| 208 | <div class="allMWrp"> | 214 | <div class="allMWrp"> |
| 209 | <div class="mobile-screen-one p-left"> | 215 | <div class="mobile-screen-one p-left"> |
| 210 | <div class="top-area-blank"></div> | 216 | <div class="top-area-blank"></div> |
| 211 | <div class="m-screen-comments"> | 217 | <div class="m-screen-comments"> |
| 212 | <div class="single-author-li-comments"> | 218 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 213 | <div class="a-intro-comments"> | 219 | <div class="a-intro-comments"> |
| 214 | <p>{{ currentSlideData.payload.comments[0].comment }}</p> | 220 | <p> |
| 215 | <ul class="rly-comment-set"> | 221 | {{commentList[0].comment}} |
| 216 | <li> | 222 | </p> |
| 217 | <img src="../assets/images/color-heart.svg" /> | 223 | <ul class="rly-comment-set"> |
| 218 | <a href="javascript:void(0);">0</a> | 224 | <!-- like/dislike --> |
| 219 | </li> | 225 | <li> |
| 220 | <li> | 226 | <img |
| 221 | <img src="../assets/images/rply.svg" /> | 227 | src="../assets/images/heart.svg" |
| 222 | <a href="javascript:void(0);" @click="open_ct_box" | 228 | v-if="commentList[0].like == false" |
| 223 | >Reply</a | 229 | @click="likeComment(true, commentList[0]._id)" |
| 224 | > | 230 | class="cursor-pointer" |
| 225 | </li> | 231 | /> |
| 226 | </ul> | 232 | <img |
| 233 | src="../assets/images/purple-heart.png" | ||
| 234 | v-if="commentList[0].like == true" | ||
| 235 | @click="likeComment(false, commentList[0]._id)" | ||
| 236 | class="cursor-pointer" | ||
| 237 | /> | ||
| 238 | <a href="javascript:void(0);">{{ | ||
| 239 | commentList[0].likes.length | ||
| 240 | }}</a> | ||
| 241 | </li> | ||
| 242 | <!-- like/dislike ends --> | ||
| 243 | <li> | ||
| 244 | <img src="../assets/images/rply.svg" /> | ||
| 245 | <a href="javascript:void(0);" @click="reply_cht_box(0)" | ||
| 246 | >Reply</a | ||
| 247 | > | ||
| 248 | </li> | ||
| 249 | </ul> | ||
| 227 | </div> | 250 | </div> |
| 228 | <!-- comments box --> | 251 | <!-- comments box --> |
| 229 | </div> | 252 | </div> |
| 230 | <!-- single author comments --> | 253 | <!-- single author comments --> |
| 231 | <div class="single-author-li-comments"> | 254 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 232 | <div class="a-intro-comments"> | 255 | <div class="a-intro-comments"> |
| 233 | <p>{{ currentSlideData.payload.comments[1].comment }}</p> | 256 | <p> |
| 234 | <ul class="rly-comment-set"> | 257 | {{commentList[1].comment}} |
| 235 | <li> | 258 | </p> |
| 236 | <img src="../assets/images/color-heart.svg" /> | 259 | <ul class="rly-comment-set"> |
| 237 | <a href="javascript:void(0);">0</a> | 260 | <!-- like/dislike --> |
| 238 | </li> | 261 | <li> |
| 239 | <li> | 262 | <img |
| 240 | <img src="../assets/images/rply.svg" /> | 263 | src="../assets/images/heart.svg" |
| 241 | <a href="javascript:void(0);" @click="open_ct_box" | 264 | v-if="commentList[1].like == false" |
| 242 | >Reply</a | 265 | @click="likeComment(true, commentList[1]._id)" |
| 243 | > | 266 | class="cursor-pointer" |
| 244 | </li> | 267 | /> |
| 245 | </ul> | 268 | <img |
| 269 | src="../assets/images/purple-heart.png" | ||
| 270 | v-if="commentList[1].like == true" | ||
| 271 | @click="likeComment(false, commentList[1]._id)" | ||
| 272 | class="cursor-pointer" | ||
| 273 | /> | ||
| 274 | <a href="javascript:void(0);">{{ | ||
| 275 | commentList[1].likes.length | ||
| 276 | }}</a> | ||
| 277 | </li> | ||
| 278 | <!-- like/dislike ends --> | ||
| 279 | <li> | ||
| 280 | <img src="../assets/images/rply.svg" /> | ||
| 281 | <a href="javascript:void(0);" @click="reply_cht_box(1)" | ||
| 282 | >Reply</a | ||
| 283 | > | ||
| 284 | </li> | ||
| 285 | </ul> | ||
| 246 | </div> | 286 | </div> |
| 247 | <!-- comments box --> | 287 | <!-- comments box --> |
| 248 | </div> | 288 | </div> |
| 249 | <!-- single author comments --> | 289 | <!-- single author comments --> |
| 250 | </div> | 290 | </div> |
| 251 | <!-- comments --> | 291 | <!-- comments --> |
| 252 | <img | 292 | <img |
| 253 | :src="currentSlideData.payload.metaData.mobileImage1" | 293 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 254 | class="m-screen" | 294 | class="m-screen" |
| 255 | /> | 295 | /> |
| 256 | <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> | 296 | <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> |
| 257 | <img | 297 | <img |
| 258 | :src="currentSlideData.payload.metaData.authorImage" | 298 | :src="currentSlideData.payload.metaData.authorImage" |
| 259 | class="user-photo-bottom" | 299 | class="user-photo-bottom" |
| 260 | /> | 300 | /> |
| 261 | </div> | 301 | </div> |
| 262 | <!-- mobile screen one --> | 302 | <!-- mobile screen one --> |
| 263 | <div class="mobile-screen-one p-right"> | 303 | <div class="mobile-screen-one p-right"> |
| 264 | <div class="top-area-blank"></div> | 304 | <div class="top-area-blank"></div> |
| 265 | <div class="view-ticket-wrp-ps"> | 305 | <div class="view-ticket-wrp-ps"> |
| 266 | <div class="single-author-li-comments"> | 306 | <div class="single-author-li-comments"> |
| 267 | <div class="a-intro-comments custom-selected-style"> | 307 | <div class="a-intro-comments custom-selected-style"> |
| 268 | <img src="../assets/images/rect.svg" class="rect" /> | 308 | <img src="../assets/images/rect.svg" class="rect" /> |
| 269 | 309 | ||
| 270 | <div class="top-wrp"> | 310 | <div class="top-wrp"> |
| 271 | {{ currentSlideData.payload.insight.tag }} Insight | 311 | {{ currentSlideData.payload.insight.tag }} Insight |
| 272 | <a 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> |
| 273 | </div> | 313 | </div> |
| 274 | <div class="top-head"> | 314 | <div class="top-head"> |
| 275 | {{ currentSlideData.payload.insight.title }} | 315 | {{ currentSlideData.payload.insight.title }} |
| 276 | </div> | 316 | </div> |
| 277 | <p>{{ currentSlideData.payload.insight.description }}</p> | 317 | <p>{{ currentSlideData.payload.insight.description }}</p> |
| 278 | <div class="footer"> | 318 | <div class="footer"> |
| 279 | <a href="javascript:void(0);" class="cit-16" | 319 | <a href="javascript:void(0);" class="cit-16" |
| 280 | >{{ | 320 | >{{ |
| 281 | currentSlideData.payload.insight.citations.length | 321 | currentSlideData.payload.insight.citations.length |
| 282 | }} | 322 | }} |
| 283 | Citations</a | 323 | Citations</a |
| 284 | > | 324 | > |
| 285 | <a href="javascript:void(0);" class="ft-share" | 325 | <a href="javascript:void(0);" class="ft-share" |
| 286 | ><img src="../assets/images/reply-red.svg" /> Share from | 326 | ><img src="../assets/images/reply-red.svg" /> Share from |
| 287 | library</a | 327 | library</a |
| 288 | > | 328 | > |
| 289 | </div> | 329 | </div> |
| 290 | <!-- footer --> | 330 | <!-- footer --> |
| 291 | </div> | 331 | </div> |
| 292 | <!-- comments box --> | 332 | <!-- comments box --> |
| 293 | </div> | 333 | </div> |
| 294 | <!-- single author comments --> | 334 | <!-- single author comments --> |
| 295 | </div> | 335 | </div> |
| 296 | <!-- comments --> | 336 | <!-- comments --> |
| 297 | <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> | 337 | <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> |
| 298 | <img | 338 | <img |
| 299 | :src="currentSlideData.payload.metaData.mobileImage2" | 339 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 300 | class="m-screen" | 340 | class="m-screen" |
| 301 | /> | 341 | /> |
| 302 | </div> | 342 | </div> |
| 303 | <!-- mobile screen Two --> | 343 | <!-- mobile screen Two --> |
| 304 | </div> | 344 | </div> |
| 305 | <div class="footer-nav"> | 345 | <div class="footer-nav"> |
| 306 | <div class="footer-top white-bg"> | 346 | <div class="footer-top white-bg"> |
| 307 | <div class="row"> | 347 | <div class="row"> |
| 308 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 348 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 309 | <div class="row h-100p"> | 349 | <div class="row h-100p"> |
| 310 | <div | 350 | <div |
| 311 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 351 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 312 | > | 352 | > |
| 313 | <div class="ft-comments-group testi-photos-ct"> | 353 | <div class="ft-comments-group testi-photos-ct"> |
| 314 | <div class="c-with-photos"> | 354 | <div class="c-with-photos"> |
| 315 | <span class="count-comments" | 355 | <span class="count-comments" |
| 316 | >{{ commentList.length - 1 }}+ Comments</span | 356 | >{{ getLastcomment("count", commentList) }}+ |
| 357 | Comments</span | ||
| 317 | ><!-- count commets --> | 358 | ><!-- count commets --> |
| 318 | <ul class="comments-photos"> | 359 | <ul class="comments-photos"> |
| 319 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | 360 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 320 | <li><img src="../assets/images/c-photo-2.png" /></li> --> | 361 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 321 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | 362 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 322 | <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> --> | ||
| 323 | </ul> | 363 | </ul> |
| 324 | <!-- comment photos --> | 364 | <!-- comment photos --> |
| 325 | </div> | 365 | </div> |
| 326 | <div class="comments-detail all-c-space"> | 366 | <div class="comments-detail all-c-space"> |
| 327 | <span | 367 | <span |
| 328 | >{{ commentList[commentList.length - 1].user.name }} | 368 | >{{ getLastcomment("name", commentList) }} |
| 329 | <a href="javascript:void(0);" @click="open_ct_box" | 369 | <a href="javascript:void(0);" @click="open_ct_box" |
| 330 | >View All</a | 370 | >View All</a |
| 331 | ></span | 371 | ></span |
| 332 | > | 372 | > |
| 333 | <p> | 373 | <p> |
| 334 | <!-- I wonder what the difference between “Dunzo Assistant” | 374 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 335 | and “Pickup and Drop... --> | 375 | and “Pickup and Drop... --> |
| 336 | {{ commentList[commentList.length - 1].comment }} | 376 | {{ getLastcomment("msg", commentList) }} |
| 337 | </p> | 377 | </p> |
| 338 | </div> | 378 | </div> |
| 339 | <!-- comments detail --> | 379 | <!-- comments detail --> |
| 340 | </div> | 380 | </div> |
| 341 | <!-- comments Group --> | 381 | <!-- comments Group --> |
| 342 | </div> | 382 | </div> |
| 343 | </div> | 383 | </div> |
| 344 | </div> | 384 | </div> |
| 345 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 385 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 346 | <div class="comment-frm no-c-frm"> | 386 | <div class="comment-frm no-c-frm"> |
| 347 | <div class="row"> | 387 | <div class="row"> |
| 348 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 388 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 349 | <div class="form-group frm-wdth addfrm-spc"> | 389 | <div class="form-group frm-wdth addfrm-spc"> |
| 350 | <input | 390 | <input |
| 351 | type="text" | 391 | type="text" |
| 352 | class="form-control" | 392 | class="form-control" |
| 353 | placeholder="Something on your mind?" | 393 | placeholder="Something on your mind?" |
| 354 | id="open_ct_box" | 394 | id="open_ct_box" |
| 355 | v-model="comment" | 395 | v-model="comment" |
| 356 | /> | 396 | /> |
| 357 | </div> | 397 | </div> |
| 358 | </div> | 398 | </div> |
| 359 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 399 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 360 | <a | 400 | <a |
| 361 | href="javascript:void(0);" | 401 | href="javascript:void(0);" |
| 362 | @click="createComment" | 402 | @click="createComment" |
| 363 | class="add-comment" | 403 | class="add-comment" |
| 364 | ><img src="../assets/images/add-comment.svg" /> | 404 | ><img src="../assets/images/add-comment.svg" /> |
| 365 | Comment</a | 405 | Comment</a |
| 366 | > | 406 | > |
| 367 | </div> | 407 | </div> |
| 368 | </div> | 408 | </div> |
| 369 | <!-- comment from --> | 409 | <!-- comment from --> |
| 370 | </div> | 410 | </div> |
| 371 | </div> | 411 | </div> |
| 372 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 412 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 373 | <ul class="top-intro-bt"> | 413 | <ul class="top-intro-bt"> |
| 374 | <li> | 414 | <li> |
| 375 | <a href="javascript:void(0);" @click="goBack" | 415 | <a href="javascript:void(0);" @click="goBack" |
| 376 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 416 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 377 | > | 417 | > |
| 378 | </li> | 418 | </li> |
| 379 | <li> | 419 | <li> |
| 380 | <a href="javascript:void(0);" @click="goNext" | 420 | <a href="javascript:void(0);" @click="goNext" |
| 381 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 421 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 382 | slide</a | 422 | slide</a |
| 383 | > | 423 | > |
| 384 | </li> | 424 | </li> |
| 385 | </ul> | 425 | </ul> |
| 386 | </div> | 426 | </div> |
| 387 | <!-- buttons list --> | 427 | <!-- buttons list --> |
| 388 | </div> | 428 | </div> |
| 389 | </div> | 429 | </div> |
| 390 | <!-- footer top --> | 430 | <!-- footer top --> |
| 391 | <div class="footer-bottom"> | 431 | <div class="footer-bottom"> |
| 392 | <ul> | 432 | <ul> |
| 393 | <li class="active"></li> | 433 | <li class="active"></li> |
| 394 | <li></li> | 434 | <li></li> |
| 395 | </ul> | 435 | </ul> |
| 396 | </div> | 436 | </div> |
| 397 | <!-- footer top --> | 437 | <!-- footer top --> |
| 398 | </div> | 438 | </div> |
| 399 | <!-- footer --> | 439 | <!-- footer --> |
| 400 | </div> | 440 | </div> |
| 401 | <!-- body wrapper --> | 441 | <!-- body wrapper --> |
| 402 | </div> | 442 | </div> |
| 403 | <!-- main wrapper --> | 443 | <!-- main wrapper --> |
| 404 | </main> | 444 | </main> |
| 405 | </template> | 445 | </template> |
| 406 | 446 | ||
| 407 | <script> | 447 | <script> |
| 408 | import Vue from "vue"; | 448 | import Vue from "vue"; |
| 409 | import router from "../router"; | 449 | import router from "../router"; |
| 410 | import axios from "axios"; | 450 | import axios from "axios"; |
| 411 | import moment from "moment"; | 451 | import moment from "moment"; |
| 452 | import Header from "./Header"; | ||
| 453 | |||
| 412 | export default { | 454 | export default { |
| 455 | components: { | ||
| 456 | Header: Header, | ||
| 457 | }, | ||
| 413 | name: "TwoScreenWithInsight", | 458 | name: "TwoScreenWithInsight", |
| 414 | data() { | 459 | data() { |
| 415 | return { | 460 | return { |
| 416 | allSlide: [], | 461 | allSlide: [], |
| 417 | currentSlideIndex: null, | 462 | currentSlideIndex: null, |
| 418 | currentSlideData: null, | 463 | currentSlideData: null, |
| 419 | // | 464 | // |
| 420 | usertoken: null, | 465 | usertoken: null, |
| 421 | commentList: [], | 466 | commentList: [], |
| 422 | comment: null, | 467 | comment: null, |
| 423 | parentInput: true, | 468 | parentInput: true, |
| 424 | }; | 469 | }; |
| 425 | }, | 470 | }, |
| 426 | mounted() { | 471 | mounted() { |
| 427 | var allSlideData = localStorage.getItem( | 472 | var allSlideData = localStorage.getItem( |
| 428 | "spotlight_slide" + this.$route.params.caseStudyId | 473 | "spotlight_slide" + this.$route.params.caseStudyId |
| 429 | ); | 474 | ); |
| 430 | if (allSlideData) { | 475 | if (allSlideData) { |
| 431 | this.allSlide = JSON.parse(allSlideData); | 476 | this.allSlide = JSON.parse(allSlideData); |
| 432 | this.getCurrentSlideData(); | 477 | this.getCurrentSlideData(); |
| 433 | } | 478 | } |
| 434 | var userdata = localStorage.getItem("spotlight_usertoken"); | 479 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 435 | if (userdata) { | 480 | if (userdata) { |
| 436 | userdata = JSON.parse(userdata); | 481 | userdata = JSON.parse(userdata); |
| 437 | this.usertoken = userdata.token; | 482 | this.usertoken = userdata.token; |
| 438 | this.getComment(); | 483 | this.getComment(); |
| 439 | } | 484 | } |
| 440 | }, | 485 | }, |
| 441 | methods: { | 486 | methods: { |
| 442 | getCurrentSlideData() { | 487 | getCurrentSlideData() { |
| 443 | var i = this.allSlide.findIndex( | 488 | var i = this.allSlide.findIndex( |
| 444 | (slide_) => slide_.slideId == this.$route.params.slideId | 489 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 445 | ); | 490 | ); |
| 446 | this.currentSlideIndex = i; | 491 | this.currentSlideIndex = i; |
| 447 | this.currentSlideData = this.allSlide[i]; | 492 | this.currentSlideData = this.allSlide[i]; |
| 448 | console.log("currentSlideData", this.currentSlideData); | 493 | console.log("currentSlideData", this.currentSlideData); |
| 449 | }, | 494 | }, |
| 450 | goNext() { | 495 | goNext() { |
| 451 | this.currentSlideIndex++; | 496 | this.currentSlideIndex++; |
| 452 | this.$router.push({ | 497 | this.$router.push({ |
| 453 | name: this.allSlide[this.currentSlideIndex].ur, | 498 | name: this.allSlide[this.currentSlideIndex].ur, |
| 454 | params: { | 499 | params: { |
| 455 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 500 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 456 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 501 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 457 | }, | 502 | }, |
| 458 | }); | 503 | }); |
| 459 | }, | 504 | }, |
| 460 | goBack() { | 505 | goBack() { |
| 461 | this.currentSlideIndex--; | 506 | this.currentSlideIndex--; |
| 462 | this.$router.push({ | 507 | this.$router.push({ |
| 463 | name: this.allSlide[this.currentSlideIndex].ur, | 508 | name: this.allSlide[this.currentSlideIndex].ur, |
| 464 | params: { | 509 | params: { |
| 465 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 510 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 466 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 511 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 467 | }, | 512 | }, |
| 468 | }); | 513 | }); |
| 469 | }, | 514 | }, |
| 470 | createComment() { | 515 | createComment() { |
| 471 | console.log("===", this.comment); | 516 | console.log("===", this.comment); |
| 472 | var obj = { | 517 | var obj = { |
| 473 | caseStudyId: this.currentSlideData.caseStudyId, | 518 | caseStudyId: this.currentSlideData.caseStudyId, |
| 474 | slideId: this.currentSlideData.slideId, | 519 | slideId: this.currentSlideData.slideId, |
| 475 | comment: this.comment, | 520 | comment: this.comment, |
| 476 | }; | 521 | }; |
| 477 | axios | 522 | axios |
| 478 | .post("/bounceBoard/comment", obj, { | 523 | .post("/bounceBoard/comment", obj, { |
| 479 | headers: { | 524 | headers: { |
| 480 | Authorization: "Bearer " + this.usertoken, | 525 | Authorization: "Bearer " + this.usertoken, |
| 481 | }, | 526 | }, |
| 482 | }) | 527 | }) |
| 483 | .then((response) => { | 528 | .then((response) => { |
| 484 | this.comment = null; | 529 | this.comment = null; |
| 485 | this.getComment(); | 530 | this.getComment(); |
| 486 | console.log(response); | 531 | console.log(response); |
| 487 | }) | 532 | }) |
| 488 | .catch((error) => { | 533 | .catch((error) => { |
| 489 | if (error.response) { | 534 | if (error.response) { |
| 490 | this.$toaster.error(error.response.data.message); | 535 | this.$toaster.error(error.response.data.message); |
| 491 | } | 536 | } |
| 492 | }); | 537 | }); |
| 493 | }, | 538 | }, |
| 494 | createChildComment(cmnt) { | 539 | createChildComment(cmnt) { |
| 495 | console.log(cmnt, "===", this.comment); | 540 | console.log(cmnt, "===", this.comment); |
| 496 | var obj = { | 541 | var obj = { |
| 497 | caseStudyId: this.currentSlideData.caseStudyId, | 542 | caseStudyId: this.currentSlideData.caseStudyId, |
| 498 | slideId: this.currentSlideData.slideId, | 543 | slideId: this.currentSlideData.slideId, |
| 499 | comment: this.comment, | 544 | comment: this.comment, |
| 500 | parentId: cmnt._id, | 545 | parentId: cmnt._id, |
| 501 | }; | 546 | }; |
| 502 | axios | 547 | axios |
| 503 | .post("/bounceBoard/comment", obj, { | 548 | .post("/bounceBoard/comment", obj, { |
| 504 | headers: { | 549 | headers: { |
| 505 | Authorization: "Bearer " + this.usertoken, | 550 | Authorization: "Bearer " + this.usertoken, |
| 506 | }, | 551 | }, |
| 507 | }) | 552 | }) |
| 508 | .then((response) => { | 553 | .then((response) => { |
| 509 | this.comment = null; | 554 | this.comment = null; |
| 510 | this.discardRply(cmnt); | 555 | this.discardRply(cmnt); |
| 511 | this.getComment(); | 556 | this.getComment(); |
| 512 | console.log(response); | 557 | console.log(response); |
| 513 | }) | 558 | }) |
| 514 | .catch((error) => { | 559 | .catch((error) => { |
| 515 | if (error.response) { | 560 | if (error.response) { |
| 516 | this.$toaster.error(error.response.data.message); | 561 | this.$toaster.error(error.response.data.message); |
| 517 | } | 562 | } |
| 518 | }); | 563 | }); |
| 519 | }, | 564 | }, |
| 520 | getComment() { | 565 | getComment() { |
| 521 | axios | 566 | axios |
| 522 | .get( | 567 | .get( |
| 523 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 568 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 524 | { | 569 | { |
| 525 | headers: { | 570 | headers: { |
| 526 | Authorization: "Bearer " + this.usertoken, | 571 | Authorization: "Bearer " + this.usertoken, |
| 527 | }, | 572 | }, |
| 528 | } | 573 | } |
| 529 | ) | 574 | ) |
| 530 | .then((response) => { | 575 | .then((response) => { |
| 531 | console.log(response.data); | 576 | console.log(response.data); |
| 532 | var comments = []; | 577 | var comments = []; |
| 533 | var keys = Object.keys(response.data.data); | 578 | var keys = Object.keys(response.data.data); |
| 534 | response.data.data; | 579 | response.data.data; |
| 535 | keys.forEach((key_) => { | 580 | keys.forEach((key_) => { |
| 536 | comments.push(response.data.data[key_]); | 581 | comments.push(response.data.data[key_]); |
| 537 | }); | 582 | }); |
| 538 | comments.forEach((coment_) => { | 583 | comments.forEach((coment_) => { |
| 539 | coment_.childInput = false; | 584 | coment_.childInput = false; |
| 540 | }); | 585 | }); |
| 541 | console.log("comments", comments); | 586 | console.log("comments", comments); |
| 542 | this.commentList = comments; | 587 | this.commentList = comments; |
| 543 | }) | 588 | }) |
| 544 | .catch((error) => console.log(error)); | 589 | .catch((error) => console.log(error)); |
| 545 | }, | 590 | }, |
| 546 | dateGenerator(curreDate) { | 591 | dateGenerator(curreDate) { |
| 547 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 592 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 548 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 593 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 549 | var result = todayDate.diff(endDate, "days"); | 594 | var result = todayDate.diff(endDate, "days"); |
| 550 | return result; | 595 | return result; |
| 551 | }, | 596 | }, |
| 552 | goToLogin() { | 597 | goToLogin() { |
| 553 | this.$router.push("/login"); | 598 | this.$router.push("/login"); |
| 554 | }, | 599 | }, |
| 555 | goToSignUp() { | 600 | goToSignUp() { |
| 556 | this.$router.push("/"); | 601 | this.$router.push("/"); |
| 557 | }, | 602 | }, |
| 603 | open(url){ | ||
| 604 | window.open(url); | ||
| 605 | }, | ||
| 558 | chtbox_close() { | 606 | chtbox_close() { |
| 559 | $("#cht_box_close").removeClass("cht_close"); | 607 | $("#cht_box_close").removeClass("cht_close"); |
| 560 | $("#open_ct_box, .c_hide").show(); | 608 | $("#open_ct_box, .c_hide").show(); |
| 561 | $(".footer-top").addClass("white-bg"); | 609 | $(".footer-top").addClass("white-bg"); |
| 562 | }, | 610 | }, |
| 563 | open_ct_box() { | 611 | open_ct_box() { |
| 564 | $("#cht_box_close").addClass("cht_close"); | 612 | $("#cht_box_close").addClass("cht_close"); |
| 565 | $("#open_ct_box, .c_hide").hide(); | 613 | $("#open_ct_box, .c_hide").hide(); |
| 566 | $(".footer-top").removeClass("white-bg"); | 614 | $(".footer-top").removeClass("white-bg"); |
| 567 | }, | 615 | }, |
| 568 | eachRply(cmnt) { | 616 | eachRply(cmnt) { |
| 569 | cmnt.childInput = true; | 617 | cmnt.childInput = true; |
| 570 | this.parentInput = false; | 618 | this.parentInput = false; |
| 619 | this.comment = null; | ||
| 620 | setTimeout(() => { | ||
| 621 | document.getElementById("childInput").focus(); | ||
| 622 | }, 100); | ||
| 571 | }, | 623 | }, |
| 572 | discardRply(cmnt) { | 624 | discardRply(cmnt) { |
| 573 | cmnt.childInput = false; | 625 | cmnt.childInput = false; |
| 574 | this.parentInput = true; | 626 | this.parentInput = true; |
| 627 | this.comment = null; | ||
| 628 | }, | ||
| 629 | reply_cht_box(i) { | ||
| 630 | console.log(this.commentList, "cmnt"); | ||
| 631 | $("#cht_box_close").addClass("cht_close"); | ||
| 632 | $("#open_ct_box, .c_hide").hide(); | ||
| 633 | $(".footer-top").removeClass("white-bg"); | ||
| 634 | this.commentList[i].childInput = true; | ||
| 635 | this.parentInput = false; | ||
| 636 | this.comment = null; | ||
| 637 | setTimeout(() => { | ||
| 638 | document.getElementById("childInput").focus(); | ||
| 639 | }, 100); | ||
| 640 | }, | ||
| 641 | likeComment(status, id) { | ||
| 642 | console.log("===", this.comment); | ||
| 643 | var obj = { | ||
| 644 | commentId: id, | ||
| 645 | like: status, | ||
| 646 | }; | ||
| 647 | axios | ||
| 648 | .post("/bounceBoard/like", obj, { | ||
| 649 | headers: { | ||
| 650 | Authorization: "Bearer " + this.usertoken, | ||
| 651 | }, | ||
| 652 | }) | ||
| 653 | .then((response) => { | ||
| 654 | this.getComment(); | ||
| 655 | console.log(response); | ||
| 656 | }) | ||
| 657 | .catch((error) => { | ||
| 658 | if (error.response) { | ||
| 659 | this.$toaster.error(error.response.data.message); | ||
| 660 | } | ||
| 661 | }); | ||
| 662 | }, | ||
| 663 | getLastcomment(flag, commentArray) { | ||
| 664 | var finalComment = null; | ||
| 665 | var totalMessage = 0; | ||
| 666 | var name = null; | ||
| 667 | commentArray.forEach((comment_) => { | ||
| 668 | if (comment_.comment != null) { | ||
| 669 | name = comment_.user.name; | ||
| 670 | finalComment = comment_.comment; | ||
| 671 | totalMessage++; | ||
| 672 | } |
src/components/TwoScreenWithoutInsight.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javasript:void(0);" | 5 | |
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javasript:void(0);" | ||
| 23 | ><img src="../assets/images/lock.svg" | ||
| 24 | /></a> | ||
| 25 | </div> | ||
| 26 | </nav> | ||
| 27 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 28 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 29 | <!-- chat box --> | 8 | <!-- chat box --> |
| 30 | <div class="bounce-board-wrp" id="cht_box_close"> | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 31 | <div class="inner-wrp-bc"> | 10 | <div class="inner-wrp-bc"> |
| 32 | <div class="bc-top-head"> | 11 | <div class="bc-top-head"> |
| 33 | <span class="bc-head"> | 12 | <span class="bc-head"> |
| 34 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 13 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 35 | </span> | 14 | </span> |
| 36 | <div class="action-sort"> | 15 | <div class="action-sort"> |
| 37 | <span class="sort-by">SORT BY</span> | 16 | <span class="sort-by">SORT BY</span> |
| 38 | <div class="btn-group"> | 17 | <div class="btn-group"> |
| 39 | <button | 18 | <button |
| 40 | type="button" | 19 | type="button" |
| 41 | class="bc-sort-list dropdown-toggle" | 20 | class="bc-sort-list dropdown-toggle" |
| 42 | data-toggle="dropdown" | 21 | data-toggle="dropdown" |
| 43 | aria-haspopup="true" | 22 | aria-haspopup="true" |
| 44 | aria-expanded="false" | 23 | aria-expanded="false" |
| 45 | > | 24 | > |
| 46 | BEST | 25 | BEST |
| 47 | </button> | 26 | </button> |
| 48 | <div class="dropdown-menu short_by"> | 27 | <div class="dropdown-menu short_by"> |
| 49 | <a class="dropdown-item" href="javasript:void(0);" | 28 | <a class="dropdown-item" href="javasript:void(0);" |
| 50 | >BEST 1</a | 29 | >BEST 1</a |
| 51 | > | 30 | > |
| 52 | <a class="dropdown-item" href="javasript:void(0);" | 31 | <a class="dropdown-item" href="javasript:void(0);" |
| 53 | >BEST 2</a | 32 | >BEST 2</a |
| 54 | > | 33 | > |
| 55 | <a class="dropdown-item" href="javasript:void(0);" | 34 | <a class="dropdown-item" href="javasript:void(0);" |
| 56 | >BEST 3</a | 35 | >BEST 3</a |
| 57 | > | 36 | > |
| 58 | </div> | 37 | </div> |
| 59 | </div> | 38 | </div> |
| 60 | <a | 39 | <a |
| 61 | href="javasript:void(0);" | 40 | href="javasript:void(0);" |
| 62 | @click="chtbox_close" | 41 | @click="chtbox_close" |
| 63 | class="close_chat_bx" | 42 | class="close_chat_bx" |
| 64 | ><img src="../assets/images/close.png" alt="close" /></a | 43 | ><img src="../assets/images/close.png" alt="close" /></a |
| 65 | ><!-- close --> | 44 | ><!-- close --> |
| 66 | </div> | 45 | </div> |
| 67 | <!-- action sort --> | 46 | <!-- action sort --> |
| 68 | </div> | 47 | </div> |
| 69 | <!-- top head --> | 48 | <!-- top head --> |
| 70 | <div class="bounce-board-body"> | 49 | <div class="bounce-board-body"> |
| 71 | |||
| 72 | <!-- all user comments --> | 50 | <!-- all user comments --> |
| 73 | <ul class="bounced-user-comments"> | 51 | <ul class="bounced-user-comments"> |
| 74 | <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"> |
| 75 | <div class="bc_brd_l"></div> | 53 | <div class="bc_brd_l"></div> |
| 76 | <!-- border --> | 54 | <!-- border --> |
| 77 | <div class="parent-full-width"> | 55 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 78 | <div class="full-width"> | 56 | <div class="full-width"> |
| 79 | <div class="b-user-head"> | 57 | <div class="b-user-head"> |
| 80 | <img :src="cmnt.user.profilePic" /> | 58 | <img :src="cmnt.user.profilePic" /> |
| 81 | <span class="head-content">{{ cmnt.user.name }} </span> | 59 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 82 | <ul> | 60 | <ul> |
| 83 | <li> | 61 | <li> |
| 84 | <span></span | 62 | <span></span |
| 85 | ><img src="../assets/images/u-info-icon.png" />{{ | 63 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 86 | cmnt.user.karmaPoints | 64 | cmnt.user.karmaPoints |
| 87 | }}pts | 65 | }}pts |
| 88 | </li> | 66 | </li> |
| 89 | <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | 67 | <li> |
| 68 | <span></span>{{ dateGenerator(cmnt.createdAt) }} | ||
| 69 | </li> | ||
| 90 | </ul> | 70 | </ul> |
| 91 | </div> | 71 | </div> |
| 92 | <!-- header --> | 72 | <!-- header --> |
| 93 | <p> | 73 | <p> |
| 94 | {{ cmnt.comment }} | 74 | {{ cmnt.comment }} |
| 95 | </p> | 75 | </p> |
| 96 | <div class="joined_wrapper"> | 76 | <div class="joined_wrapper"> |
| 97 | <ul class="joined-info info_bc_spc"> | 77 | <ul class="joined-info info_bc_spc"> |
| 98 | <li> | 78 | <li> |
| 99 | <img src="../assets/images/purple-heart.png" /> | 79 | <img |
| 80 | src="../assets/images/heart.svg" | ||
| 81 | v-if="cmnt.like == false" | ||
| 82 | @click="likeComment(true, cmnt._id)" | ||
| 83 | class="cursor-pointer" | ||
| 84 | /> | ||
| 85 | <img | ||
| 86 | src="../assets/images/purple-heart.png" | ||
| 87 | v-if="cmnt.like == true" | ||
| 88 | @click="likeComment(false, cmnt._id)" | ||
| 89 | class="cursor-pointer" | ||
| 90 | /> | ||
| 91 | </li> | ||
| 92 | <li> | ||
| 93 | <a href="javasript:void(0);"> | ||
| 94 | {{ cmnt.likes.length }}</a | ||
| 95 | > | ||
| 100 | </li> | 96 | </li> |
| 101 | <li><a href="javasript:void(0);"> 0</a></li> | ||
| 102 | <li class="comment-spc"> | 97 | <li class="comment-spc"> |
| 103 | <img src="../assets/images/purple-comment.png" /> | 98 | <img src="../assets/images/purple-comment.png" /> |
| 104 | </li> | 99 | </li> |
| 105 | <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | 100 | <li> |
| 101 | <a href="javasript:void(0);"> | ||
| 102 | {{ cmnt.children.length }}</a | ||
| 103 | > | ||
| 104 | </li> | ||
| 106 | </ul> | 105 | </ul> |
| 107 | <div class="add_rply" v-if="!cmnt.childInput"> | 106 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 108 | <input | 107 | <input |
| 109 | type="text" | 108 | type="text" |
| 110 | @click="eachRply(cmnt)" | 109 | @click="eachRply(cmnt)" |
| 111 | class="add_Rply_C" | 110 | class="add_Rply_C" |
| 112 | placeholder="Add your reply" | 111 | placeholder="Add your reply" |
| 113 | /> | 112 | /> |
| 114 | </div> | 113 | </div> |
| 115 | <!-- rly form --> | 114 | <!-- rly form --> |
| 116 | </div> | 115 | </div> |
| 117 | <!-- joined wrapper --> | 116 | <!-- joined wrapper --> |
| 118 | </div> | 117 | </div> |
| 119 | <!-- full width --> | 118 | <!-- full width --> |
| 120 | </div> | 119 | </div> |
| 121 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 122 | <textarea v-model="comment"></textarea> | 121 | <textarea v-model="comment" id="childInput"></textarea> |
| 123 | <div class="comments-footer-wrp"> | 122 | <div class="comments-footer-wrp"> |
| 124 | <a | 123 | <a |
| 125 | @click="createChildComment(cmnt)" | 124 | @click="createChildComment(cmnt)" |
| 126 | href="javasript:void(0);" | 125 | href="javasript:void(0);" |
| 127 | class="add_comments_chat reply-Wdth" | 126 | class="add_comments_chat reply-Wdth" |
| 128 | >Reply</a | 127 | >Reply</a |
| 129 | > | 128 | > |
| 130 | <a href="javasript:void(0);" class="discard_bt" | 129 | <a |
| 131 | @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | 130 | href="javasript:void(0);" |
| 131 | class="discard_bt" | ||
| 132 | @click="discardRply(cmnt)" | ||
| 133 | ><img src="../assets/images/discard.svg" | ||
| 132 | /></a> | 134 | /></a> |
| 133 | </div> | 135 | </div> |
| 134 | </div> | 136 | </div> |
| 135 | <!-- parent --> | 137 | <!-- parent --> |
| 136 | <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | 138 | <div |
| 139 | class="child-full-width" | ||
| 140 | v-for="(childCmnt, i) in cmnt.children" | ||
| 141 | :key="i" | ||
| 142 | > | ||
| 137 | <div class="full-width"> | 143 | <div class="full-width"> |
| 138 | <div class="b-user-head"> | 144 | <div class="b-user-head"> |
| 139 | <img :src="childCmnt.user.profilePic" /> | 145 | <img :src="childCmnt.user.profilePic" /> |
| 140 | <span class="head-content">{{childCmnt.user.name }} </span> | 146 | <span class="head-content" |
| 147 | >{{ childCmnt.user.name }} | ||
| 148 | </span> | ||
| 141 | <ul> | 149 | <ul> |
| 142 | <li> | 150 | <li> |
| 143 | <span></span | 151 | <span></span |
| 144 | ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | 152 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 153 | childCmnt.user.karmaPoints | ||
| 154 | }}pts | ||
| 155 | </li> | ||
| 156 | <li> | ||
| 157 | <span></span | ||
| 158 | >{{ dateGenerator(childCmnt.createdAt) }} | ||
| 145 | </li> | 159 | </li> |
| 146 | <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | ||
| 147 | </ul> | 160 | </ul> |
| 148 | </div> | 161 | </div> |
| 149 | <p> | 162 | <p> |
| 150 | {{childCmnt.comment}} | 163 | {{ childCmnt.comment }} |
| 151 | </p> | 164 | </p> |
| 152 | <div class="joined_wrapper"> | 165 | <div class="joined_wrapper"> |
| 153 | <ul class="joined-info info_bc_spc"> | 166 | <ul class="joined-info info_bc_spc"> |
| 154 | <li> | 167 | <li> |
| 155 | <img src="../assets/images/purple-heart.png" /> | 168 | <img |
| 169 | src="../assets/images/heart.svg" | ||
| 170 | v-if="childCmnt.like == false" | ||
| 171 | @click="likeComment(true, childCmnt._id)" | ||
| 172 | class="cursor-pointer" | ||
| 173 | /> | ||
| 174 | <img | ||
| 175 | src="../assets/images/purple-heart.png" | ||
| 176 | v-if="childCmnt.like == true" | ||
| 177 | @click="likeComment(false, childCmnt._id)" | ||
| 178 | class="cursor-pointer" | ||
| 179 | /> | ||
| 180 | </li> | ||
| 181 | <li> | ||
| 182 | <a href="javasript:void(0);"> | ||
| 183 | {{ childCmnt.likes.length }}</a | ||
| 184 | > | ||
| 156 | </li> | 185 | </li> |
| 157 | <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | ||
| 158 | |||
| 159 | </ul> | 186 | </ul> |
| 160 | |||
| 161 | </div> | 187 | </div> |
| 162 | </div> | 188 | </div> |
| 163 | </div> | 189 | </div> |
| 164 | <!-- eree --> | 190 | <!-- eree --> |
| 165 | 191 | ||
| 166 | <!-- comments footer --> | 192 | <!-- comments footer --> |
| 167 | </li> | 193 | </li> |
| 168 | </ul> | 194 | </ul> |
| 169 | </div> | 195 | </div> |
| 170 | <!-- bounce board body --> | 196 | <!-- bounce board body --> |
| 171 | <div class="comments-footer" v-if="parentInput"> | 197 | <div class="comments-footer" v-if="parentInput"> |
| 172 | <textarea v-model="comment"></textarea> | 198 | <textarea v-model="comment"></textarea> |
| 173 | <div class="comments-footer-wrp"> | 199 | <div class="comments-footer-wrp"> |
| 174 | <a | 200 | <a |
| 175 | href="javasript:void(0);" | 201 | href="javasript:void(0);" |
| 176 | class="add_comments_chat" | 202 | class="add_comments_chat" |
| 177 | @click="createComment" | 203 | @click="createComment" |
| 178 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 204 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 179 | > | 205 | > |
| 180 | </div> | 206 | </div> |
| 181 | </div> | 207 | </div> |
| 182 | <!-- comments footer --> | 208 | <!-- comments footer --> |
| 183 | </div> | 209 | </div> |
| 184 | </div> | 210 | </div> |
| 185 | <!-- bounceboard wrp --> | 211 | <!-- bounceboard wrp --> |
| 186 | <!-- chat box --> | 212 | <!-- chat box --> |
| 187 | 213 | ||
| 188 | <div class="allMWrp"> | 214 | <div class="allMWrp"> |
| 189 | <div class="mobile-screen-one p-left"> | 215 | <div class="mobile-screen-one p-left"> |
| 190 | <div class="top-area-blank"></div> | 216 | <div class="top-area-blank"></div> |
| 191 | <!-- fixed area --> | 217 | <!-- fixed area --> |
| 192 | <div class="m-screen-comments"> | 218 | <div class="m-screen-comments"> |
| 193 | <div class="single-author-li-comments"> | 219 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 194 | <div class="a-intro-comments"> | 220 | <div class="a-intro-comments"> |
| 195 | <p>{{ currentSlideData.payload.comments[0].comment }}</p> | 221 | <p> |
| 196 | <ul class="rly-comment-set"> | 222 | {{commentList[0].comment}} |
| 197 | <li> | 223 | </p> |
| 198 | <img src="../assets/images/color-heart.svg" /> | 224 | <ul class="rly-comment-set"> |
| 199 | <a href="javascript:void(0);">0</a> | 225 | <!-- like/dislike --> |
| 200 | </li> | 226 | <li> |
| 201 | <li> | 227 | <img |
| 202 | <img src="../assets/images/rply.svg" /> | 228 | src="../assets/images/heart.svg" |
| 203 | <a href="javascript:void(0);" @click="open_ct_box" | 229 | v-if="commentList[0].like == false" |
| 204 | >Reply</a | 230 | @click="likeComment(true, commentList[0]._id)" |
| 205 | > | 231 | class="cursor-pointer" |
| 206 | </li> | 232 | /> |
| 207 | </ul> | 233 | <img |
| 234 | src="../assets/images/purple-heart.png" | ||
| 235 | v-if="commentList[0].like == true" | ||
| 236 | @click="likeComment(false, commentList[0]._id)" | ||
| 237 | class="cursor-pointer" | ||
| 238 | /> | ||
| 239 | <a href="javascript:void(0);">{{ | ||
| 240 | commentList[0].likes.length | ||
| 241 | }}</a> | ||
| 242 | </li> | ||
| 243 | <!-- like/dislike ends --> | ||
| 244 | <li> | ||
| 245 | <img src="../assets/images/rply.svg" /> | ||
| 246 | <a href="javascript:void(0);" @click="reply_cht_box(0)" | ||
| 247 | >Reply</a | ||
| 248 | > | ||
| 249 | </li> | ||
| 250 | </ul> | ||
| 208 | </div> | 251 | </div> |
| 209 | <!-- comments box --> | 252 | <!-- comments box --> |
| 210 | </div> | 253 | </div> |
| 211 | <!-- single author comments --> | 254 | <!-- single author comments --> |
| 212 | <div class="single-author-li-comments"> | 255 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 213 | <div class="a-intro-comments"> | 256 | <div class="a-intro-comments"> |
| 214 | <p>{{ currentSlideData.payload.comments[1].comment }}</p> | 257 | <p> |
| 215 | <ul class="rly-comment-set"> | 258 | {{commentList[1].comment}} |
| 216 | <li> | 259 | </p> |
| 217 | <img src="../assets/images/color-heart.svg" /> | 260 | <ul class="rly-comment-set"> |
| 218 | <a href="javascript:void(0);">0</a> | 261 | <!-- like/dislike --> |
| 219 | </li> | 262 | <li> |
| 220 | <li> | 263 | <img |
| 221 | <img src="../assets/images/rply.svg" /> | 264 | src="../assets/images/heart.svg" |
| 222 | <a href="javascript:void(0);" @click="open_ct_box" | 265 | v-if="commentList[1].like == false" |
| 223 | >Reply</a | 266 | @click="likeComment(true, commentList[1]._id)" |
| 224 | > | 267 | class="cursor-pointer" |
| 225 | </li> | 268 | /> |
| 226 | </ul> | 269 | <img |
| 270 | src="../assets/images/purple-heart.png" | ||
| 271 | v-if="commentList[1].like == true" | ||
| 272 | @click="likeComment(false, commentList[1]._id)" | ||
| 273 | class="cursor-pointer" | ||
| 274 | /> | ||
| 275 | <a href="javascript:void(0);">{{ | ||
| 276 | commentList[1].likes.length | ||
| 277 | }}</a> | ||
| 278 | </li> | ||
| 279 | <!-- like/dislike ends --> | ||
| 280 | <li> | ||
| 281 | <img src="../assets/images/rply.svg" /> | ||
| 282 | <a href="javascript:void(0);" @click="reply_cht_box(1)" | ||
| 283 | >Reply</a | ||
| 284 | > | ||
| 285 | </li> | ||
| 286 | </ul> | ||
| 227 | </div> | 287 | </div> |
| 228 | <!-- comments box --> | 288 | <!-- comments box --> |
| 229 | </div> | 289 | </div> |
| 230 | <!-- single author comments --> | 290 | <!-- single author comments --> |
| 231 | </div> | 291 | </div> |
| 232 | <!-- comments --> | 292 | <!-- comments --> |
| 233 | <img | 293 | <img |
| 234 | :src="currentSlideData.payload.metaData.mobileImage1" | 294 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 235 | class="m-screen" | 295 | class="m-screen" |
| 236 | /> | 296 | /> |
| 237 | <img | 297 | <img |
| 238 | :src="currentSlideData.payload.metaData.authorImage" | 298 | :src="currentSlideData.payload.metaData.authorImage" |
| 239 | class="user-photo-bottom" | 299 | class="user-photo-bottom" |
| 240 | /> | 300 | /> |
| 241 | </div> | 301 | </div> |
| 242 | <!-- mobile screen one --> | 302 | <!-- mobile screen one --> |
| 243 | <div class="mobile-screen-one p-right"> | 303 | <div class="mobile-screen-one p-right"> |
| 244 | <div class="top-area-blank"></div> | 304 | <div class="top-area-blank"></div> |
| 245 | <!-- fixed area --> | 305 | <!-- fixed area --> |
| 246 | <div class="m-screen-right"> | 306 | <div class="m-screen-right"> |
| 247 | <div class="single-author-li-comments"> | 307 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> |
| 248 | <div class="a-intro-comments"> | 308 | <div class="a-intro-comments"> |
| 249 | <p>{{ currentSlideData.payload.comments[2].comment }}</p> | 309 | <p> |
| 250 | <ul class="rly-comment-set"> | 310 | {{commentList[2].comment}} |
| 251 | <li> | 311 | </p> |
| 252 | <img src="../assets/images/color-heart.svg" /> | 312 | <ul class="rly-comment-set"> |
| 253 | <a href="javascript:void(0);">0</a> | 313 | <!-- like/dislike --> |
| 254 | </li> | 314 | <li> |
| 255 | <li> | 315 | <img |
| 256 | <img src="../assets/images/rply.svg" /> | 316 | src="../assets/images/heart.svg" |
| 257 | <a href="javascript:void(0);" @click="open_ct_box" | 317 | v-if="commentList[2].like == false" |
| 258 | >Reply</a | 318 | @click="likeComment(true, commentList[2]._id)" |
| 259 | > | 319 | class="cursor-pointer" |
| 260 | </li> | 320 | /> |
| 261 | </ul> | 321 | <img |
| 322 | src="../assets/images/purple-heart.png" | ||
| 323 | v-if="commentList[2].like == true" | ||
| 324 | @click="likeComment(false, commentList[2]._id)" | ||
| 325 | class="cursor-pointer" | ||
| 326 | /> | ||
| 327 | <a href="javascript:void(0);">{{ | ||
| 328 | commentList[2].likes.length | ||
| 329 | }}</a> | ||
| 330 | </li> | ||
| 331 | <!-- like/dislike ends --> | ||
| 332 | <li> | ||
| 333 | <img src="../assets/images/rply.svg" /> | ||
| 334 | <a href="javascript:void(0);" @click="reply_cht_box(2)" | ||
| 335 | >Reply</a | ||
| 336 | > | ||
| 337 | </li> | ||
| 338 | </ul> | ||
| 262 | </div> | 339 | </div> |
| 263 | <!-- comments box --> | 340 | <!-- comments box --> |
| 264 | </div> | 341 | </div> |
| 265 | <!-- single author comments --> | 342 | <!-- single author comments --> |
| 266 | <div class="single-author-li-comments"> | 343 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> |
| 267 | <div class="a-intro-comments"> | 344 | <div class="a-intro-comments"> |
| 268 | <p>{{ currentSlideData.payload.comments[3].comment }}</p> | 345 | <p> |
| 269 | <ul class="rly-comment-set"> | 346 | {{commentList[3].comment}} |
| 270 | <li> | 347 | </p> |
| 271 | <img src="../assets/images/color-heart.svg" /> | 348 | <ul class="rly-comment-set"> |
| 272 | <a href="javascript:void(0);">0</a> | 349 | <!-- like/dislike --> |
| 273 | </li> | 350 | <li> |
| 274 | <li> | 351 | <img |
| 275 | <img src="../assets/images/rply.svg" /> | 352 | src="../assets/images/heart.svg" |
| 276 | <a href="javascript:void(0);" @click="open_ct_box" | 353 | v-if="commentList[3].like == false" |
| 277 | >Reply</a | 354 | @click="likeComment(true, commentList[3]._id)" |
| 278 | > | 355 | class="cursor-pointer" |
| 279 | </li> | 356 | /> |
| 280 | </ul> | 357 | <img |
| 358 | src="../assets/images/purple-heart.png" | ||
| 359 | v-if="commentList[3].like == true" | ||
| 360 | @click="likeComment(false, commentList[3]._id)" | ||
| 361 | class="cursor-pointer" | ||
| 362 | /> | ||
| 363 | <a href="javascript:void(0);">{{ | ||
| 364 | commentList[3].likes.length | ||
| 365 | }}</a> | ||
| 366 | </li> | ||
| 367 | <!-- like/dislike ends --> | ||
| 368 | <li> | ||
| 369 | <img src="../assets/images/rply.svg" /> | ||
| 370 | <a href="javascript:void(0);" @click="reply_cht_box(3)" | ||
| 371 | >Reply</a | ||
| 372 | > | ||
| 373 | </li> | ||
| 374 | </ul> | ||
| 281 | </div> | 375 | </div> |
| 282 | <!-- comments box --> | 376 | <!-- comments box --> |
| 283 | </div> | 377 | </div> |
| 284 | <!-- single author comments --> | 378 | <!-- single author comments --> |
| 285 | </div> | 379 | </div> |
| 286 | <!-- comments --> | 380 | <!-- comments --> |
| 287 | <img | 381 | <img |
| 288 | :src="currentSlideData.payload.metaData.mobileImage2" | 382 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 289 | class="m-screen" | 383 | class="m-screen" |
| 290 | /> | 384 | /> |
| 291 | <img | 385 | <img |
| 292 | :src="currentSlideData.payload.metaData.authorImage" | 386 | :src="currentSlideData.payload.metaData.authorImage" |
| 293 | class="user-photo-bottom-r" | 387 | class="user-photo-bottom-r" |
| 294 | /> | 388 | /> |
| 295 | </div> | 389 | </div> |
| 296 | <!-- mobile screen Two --> | 390 | <!-- mobile screen Two --> |
| 297 | </div> | 391 | </div> |
| 298 | 392 | ||
| 299 | <!-- single author comments --> | 393 | <!-- single author comments --> |
| 300 | <div class="footer-nav"> | 394 | <div class="footer-nav"> |
| 301 | <div class="footer-top white-bg"> | 395 | <div class="footer-top white-bg"> |
| 302 | <div class="row"> | 396 | <div class="row"> |
| 303 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 397 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 304 | <div class="row h-100p"> | 398 | <div class="row h-100p"> |
| 305 | <div | 399 | <div |
| 306 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 400 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 307 | > | 401 | > |
| 308 | <div class="ft-comments-group testi-photos-ct"> | 402 | <div class="ft-comments-group testi-photos-ct"> |
| 309 | <div class="c-with-photos"> | 403 | <div class="c-with-photos"> |
| 310 | <span class="count-comments" | 404 | <span class="count-comments" |
| 311 | >{{ commentList.length - 1 }}+ Comments</span | 405 | >{{ getLastcomment("count", commentList) }}+ |
| 406 | Comments</span | ||
| 312 | ><!-- count commets --> | 407 | ><!-- count commets --> |
| 313 | <ul class="comments-photos"> | 408 | <ul class="comments-photos"> |
| 314 | <li><img src="../assets/images/c-photo-1.png" /></li> | 409 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 315 | <li><img src="../assets/images/c-photo-2.png" /></li> | 410 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 316 | <li><img src="../assets/images/c-photo-3.png" /></li> | 411 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 317 | </ul> | 412 | </ul> |
| 318 | <!-- comment photos --> | 413 | <!-- comment photos --> |
| 319 | </div> | 414 | </div> |
| 320 | <div class="comments-detail all-c-space"> | 415 | <div class="comments-detail all-c-space"> |
| 321 | <span | 416 | <span |
| 322 | >{{ commentList[commentList.length - 1].user.name }} | 417 | >{{ getLastcomment("name", commentList) }} |
| 323 | <a href="javascript:void(0);" @click="open_ct_box" | 418 | <a href="javascript:void(0);" @click="open_ct_box" |
| 324 | >View All</a | 419 | >View All</a |
| 325 | ></span | 420 | ></span |
| 326 | > | 421 | > |
| 327 | <p> | 422 | <p> |
| 328 | <!-- I wonder what the difference between “Dunzo Assistant” | 423 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 329 | and “Pickup and Drop... --> | 424 | and “Pickup and Drop... --> |
| 330 | {{ commentList[commentList.length - 1].comment }} | 425 | {{ getLastcomment("msg", commentList) }} |
| 331 | </p> | 426 | </p> |
| 332 | </div> | 427 | </div> |
| 333 | <!-- comments detail --> | 428 | <!-- comments detail --> |
| 334 | </div> | 429 | </div> |
| 335 | <!-- comments Group --> | 430 | <!-- comments Group --> |
| 336 | </div> | 431 | </div> |
| 337 | </div> | 432 | </div> |
| 338 | </div> | 433 | </div> |
| 339 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 434 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 340 | <div class="comment-frm no-c-frm"> | 435 | <div class="comment-frm no-c-frm"> |
| 341 | <div class="row"> | 436 | <div class="row"> |
| 342 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 437 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 343 | <div class="form-group frm-wdth addfrm-spc"> | 438 | <div class="form-group frm-wdth addfrm-spc"> |
| 344 | <input | 439 | <input |
| 345 | type="text" | 440 | type="text" |
| 346 | class="form-control" | 441 | class="form-control" |
| 347 | placeholder="Something on your mind?" | 442 | placeholder="Something on your mind?" |
| 348 | id="open_ct_box" | 443 | id="open_ct_box" |
| 349 | v-model="comment" | 444 | v-model="comment" |
| 350 | /> | 445 | /> |
| 351 | </div> | 446 | </div> |
| 352 | </div> | 447 | </div> |
| 353 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 448 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 354 | <a | 449 | <a |
| 355 | href="javascript:void(0);" | 450 | href="javascript:void(0);" |
| 356 | @click="createComment" | 451 | @click="createComment" |
| 357 | class="add-comment" | 452 | class="add-comment" |
| 358 | ><img src="../assets/images/add-comment.svg" /> | 453 | ><img src="../assets/images/add-comment.svg" /> |
| 359 | Comment</a | 454 | Comment</a |
| 360 | > | 455 | > |
| 361 | </div> | 456 | </div> |
| 362 | </div> | 457 | </div> |
| 363 | <!-- comment from --> | 458 | <!-- comment from --> |
| 364 | </div> | 459 | </div> |
| 365 | </div> | 460 | </div> |
| 366 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 461 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 367 | <ul class="top-intro-bt"> | 462 | <ul class="top-intro-bt"> |
| 368 | <li> | 463 | <li> |
| 369 | <a href="javascript:void(0);" @click="goBack" | 464 | <a href="javascript:void(0);" @click="goBack" |
| 370 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 465 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 371 | > | 466 | > |
| 372 | </li> | 467 | </li> |
| 373 | <li> | 468 | <li> |
| 374 | <a href="javascript:void(0);" @click="goNext" | 469 | <a href="javascript:void(0);" @click="goNext" |
| 375 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 470 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 376 | slide</a | 471 | slide</a |
| 377 | > | 472 | > |
| 378 | </li> | 473 | </li> |
| 379 | </ul> | 474 | </ul> |
| 380 | </div> | 475 | </div> |
| 381 | <!-- buttons list --> | 476 | <!-- buttons list --> |
| 382 | </div> | 477 | </div> |
| 383 | </div> | 478 | </div> |
| 384 | <!-- footer top --> | 479 | <!-- footer top --> |
| 385 | <div class="footer-bottom"> | 480 | <div class="footer-bottom"> |
| 386 | <ul> | 481 | <ul> |
| 387 | <li class="active"></li> | 482 | <li class="active"></li> |
| 388 | <li></li> | 483 | <li></li> |
| 389 | </ul> | 484 | </ul> |
| 390 | </div> | 485 | </div> |
| 391 | <!-- footer top --> | 486 | <!-- footer top --> |
| 392 | </div> | 487 | </div> |
| 393 | <!-- footer --> | 488 | <!-- footer --> |
| 394 | </div> | 489 | </div> |
| 395 | <!-- body wrapper --> | 490 | <!-- body wrapper --> |
| 396 | </div> | 491 | </div> |
| 397 | <!-- main wrapper --> | 492 | <!-- main wrapper --> |
| 398 | </main> | 493 | </main> |
| 399 | </template> | 494 | </template> |
| 400 | 495 | ||
| 401 | <script> | 496 | <script> |
| 402 | import Vue from "vue"; | 497 | import Vue from "vue"; |
| 403 | import router from "../router"; | 498 | import router from "../router"; |
| 404 | import axios from "axios"; | 499 | import axios from "axios"; |
| 405 | import moment from 'moment'; | 500 | import moment from 'moment'; |
| 501 | import Header from "./Header"; | ||
| 406 | 502 | ||
| 407 | export default { | 503 | export default { |
| 504 | components: { | ||
| 505 | Header: Header, | ||
| 506 | }, | ||
| 408 | name: "TwoScreenWithoutInsight", | 507 | name: "TwoScreenWithoutInsight", |
| 409 | 508 | ||
| 410 | data() { | 509 | data() { |
| 411 | return { | 510 | return { |
| 412 | allSlide: [], | 511 | allSlide: [], |
| 413 | currentSlideIndex: null, | 512 | currentSlideIndex: null, |
| 414 | currentSlideData: null, | 513 | currentSlideData: null, |
| 415 | // | 514 | // |
| 416 | usertoken: null, | 515 | usertoken: null, |
| 417 | commentList: [], | 516 | commentList: [], |
| 418 | comment: null, | 517 | comment: null, |
| 419 | parentInput: true, | 518 | parentInput: true, |
| 420 | }; | 519 | }; |
| 421 | }, | 520 | }, |
| 422 | mounted() { | 521 | mounted() { |
| 423 | var allSlideData = localStorage.getItem( | 522 | var allSlideData = localStorage.getItem( |
| 424 | "spotlight_slide" + this.$route.params.caseStudyId | 523 | "spotlight_slide" + this.$route.params.caseStudyId |
| 425 | ); | 524 | ); |
| 426 | if (allSlideData) { | 525 | if (allSlideData) { |
| 427 | this.allSlide = JSON.parse(allSlideData); | 526 | this.allSlide = JSON.parse(allSlideData); |
| 428 | this.getCurrentSlideData(); | 527 | this.getCurrentSlideData(); |
| 429 | } | 528 | } |
| 430 | var userdata = localStorage.getItem("spotlight_usertoken"); | 529 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 431 | if (userdata) { | 530 | if (userdata) { |
| 432 | userdata = JSON.parse(userdata); | 531 | userdata = JSON.parse(userdata); |
| 433 | this.usertoken = userdata.token; | 532 | this.usertoken = userdata.token; |
| 434 | this.getComment(); | 533 | this.getComment(); |
| 435 | } | 534 | } |
| 436 | }, | 535 | }, |
| 437 | methods: { | 536 | methods: { |
| 438 | getCurrentSlideData() { | 537 | getCurrentSlideData() { |
| 439 | var i = this.allSlide.findIndex( | 538 | var i = this.allSlide.findIndex( |
| 440 | (slide_) => slide_.slideId == this.$route.params.slideId | 539 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 441 | ); | 540 | ); |
| 442 | this.currentSlideIndex = i; | 541 | this.currentSlideIndex = i; |
| 443 | this.currentSlideData = this.allSlide[i]; | 542 | this.currentSlideData = this.allSlide[i]; |
| 444 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); | 543 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); |
| 445 | console.log("currentSlideData", this.currentSlideData); | 544 | console.log("currentSlideData", this.currentSlideData); |
| 446 | }, | 545 | }, |
| 447 | goNext() { | 546 | goNext() { |
| 448 | this.currentSlideIndex++; | 547 | this.currentSlideIndex++; |
| 449 | this.$router.push({ | 548 | this.$router.push({ |
| 450 | name: this.allSlide[this.currentSlideIndex].ur, | 549 | name: this.allSlide[this.currentSlideIndex].ur, |
| 451 | params: { | 550 | params: { |
| 452 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 551 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 453 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 552 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 454 | }, | 553 | }, |
| 455 | }); | 554 | }); |
| 456 | }, | 555 | }, |
| 457 | goBack() { | 556 | goBack() { |
| 458 | this.currentSlideIndex--; | 557 | this.currentSlideIndex--; |
| 459 | this.$router.push({ | 558 | this.$router.push({ |
| 460 | name: this.allSlide[this.currentSlideIndex].ur, | 559 | name: this.allSlide[this.currentSlideIndex].ur, |
| 461 | params: { | 560 | params: { |
| 462 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 561 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 463 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 562 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 464 | }, | 563 | }, |
| 465 | }); | 564 | }); |
| 466 | }, | 565 | }, |
| 467 | 566 | ||
| 468 | createComment() { | 567 | createComment() { |
| 469 | console.log("===", this.comment); | 568 | console.log("===", this.comment); |
| 470 | var obj = { | 569 | var obj = { |
| 471 | caseStudyId: this.currentSlideData.caseStudyId, | 570 | caseStudyId: this.currentSlideData.caseStudyId, |
| 472 | slideId: this.currentSlideData.slideId, | 571 | slideId: this.currentSlideData.slideId, |
| 473 | comment: this.comment, | 572 | comment: this.comment, |
| 474 | 573 | ||
| 475 | }; | 574 | }; |
| 476 | axios | 575 | axios |
| 477 | .post("/bounceBoard/comment", obj, { | 576 | .post("/bounceBoard/comment", obj, { |
| 478 | headers: { | 577 | headers: { |
| 479 | Authorization: "Bearer " + this.usertoken, | 578 | Authorization: "Bearer " + this.usertoken, |
| 480 | }, | 579 | }, |
| 481 | }) | 580 | }) |
| 482 | .then((response) => { | 581 | .then((response) => { |
| 483 | this.comment = null; | 582 | this.comment = null; |
| 484 | this.getComment(); | 583 | this.getComment(); |
| 485 | console.log(response); | 584 | console.log(response); |
| 486 | }) | 585 | }) |
| 487 | .catch((error) => { | 586 | .catch((error) => { |
| 488 | if (error.response) { | 587 | if (error.response) { |
| 489 | this.$toaster.error(error.response.data.message); | 588 | this.$toaster.error(error.response.data.message); |
| 490 | } | 589 | } |
| 491 | }); | 590 | }); |
| 492 | }, | 591 | }, |
| 493 | createChildComment(cmnt) { | 592 | createChildComment(cmnt) { |
| 494 | console.log(cmnt,"===", this.comment); | 593 | console.log(cmnt,"===", this.comment); |
| 495 | var obj = { | 594 | var obj = { |
| 496 | caseStudyId: this.currentSlideData.caseStudyId, | 595 | caseStudyId: this.currentSlideData.caseStudyId, |
| 497 | slideId: this.currentSlideData.slideId, | 596 | slideId: this.currentSlideData.slideId, |
| 498 | comment: this.comment, | 597 | comment: this.comment, |
| 499 | parentId: cmnt._id, | 598 | parentId: cmnt._id, |
| 500 | 599 | ||
| 501 | }; | 600 | }; |
| 502 | axios | 601 | axios |
| 503 | .post("/bounceBoard/comment", obj, { | 602 | .post("/bounceBoard/comment", obj, { |
| 504 | headers: { | 603 | headers: { |
| 505 | Authorization: "Bearer " + this.usertoken, | 604 | Authorization: "Bearer " + this.usertoken, |
| 506 | }, | 605 | }, |
| 507 | }) | 606 | }) |
| 508 | .then((response) => { | 607 | .then((response) => { |
| 509 | this.comment = null; | 608 | this.comment = null; |
| 510 | this.discardRply(cmnt); | 609 | this.discardRply(cmnt); |
| 511 | this.getComment(); | 610 | this.getComment(); |
| 512 | console.log(response); | 611 | console.log(response); |
| 513 | }) | 612 | }) |
| 514 | .catch((error) => { | 613 | .catch((error) => { |
| 515 | if (error.response) { | 614 | if (error.response) { |
| 516 | this.$toaster.error(error.response.data.message); | 615 | this.$toaster.error(error.response.data.message); |
| 517 | } | 616 | } |
| 518 | }); | 617 | }); |
| 519 | }, | 618 | }, |
| 520 | getComment() { | 619 | getComment() { |
| 521 | axios | 620 | axios |
| 522 | .get( | 621 | .get( |
| 523 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 622 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 524 | { | 623 | { |
| 525 | headers: { | 624 | headers: { |
| 526 | Authorization: "Bearer " + this.usertoken, | 625 | Authorization: "Bearer " + this.usertoken, |
| 527 | }, | 626 | }, |
| 528 | } | 627 | } |
| 529 | ) | 628 | ) |
| 530 | .then((response) => { | 629 | .then((response) => { |
| 531 | console.log(response.data); | 630 | console.log(response.data); |
| 532 | var comments = []; | 631 | var comments = []; |
| 533 | var keys = Object.keys(response.data.data) | 632 | var keys = Object.keys(response.data.data) |
| 534 | response.data.data | 633 | response.data.data |
| 535 | keys.forEach((key_) => { | 634 | keys.forEach((key_) => { |
| 536 | comments.push(response.data.data[key_]) | 635 | comments.push(response.data.data[key_]) |
| 537 | }); | 636 | }); |
| 538 | comments.forEach((coment_)=>{ | 637 | comments.forEach((coment_)=>{ |
| 539 | coment_.childInput = false; | 638 | coment_.childInput = false; |
| 540 | }); | 639 | }); |
| 541 | console.log("comments",comments) | 640 | console.log("comments",comments) |
| 542 | this.commentList = comments; | 641 | this.commentList = comments; |
| 543 | }) | 642 | }) |
| 544 | .catch((error) => console.log(error)); | 643 | .catch((error) => console.log(error)); |
| 545 | }, | 644 | }, |
| 546 | dateGenerator(curreDate){ | 645 | dateGenerator(curreDate){ |
| 547 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 646 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 548 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 647 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 549 | var result = todayDate.diff(endDate, 'days'); | 648 | var result = todayDate.diff(endDate, 'days'); |
| 550 | return result; | 649 | return result; |
| 551 | }, | 650 | }, |
| 552 | goToLogin() { | 651 | goToLogin() { |
| 553 | this.$router.push("/login"); | 652 | this.$router.push("/login"); |
| 554 | }, | 653 | }, |
| 555 | goToSignUp() { | 654 | goToSignUp() { |
| 556 | this.$router.push("/"); | 655 | this.$router.push("/"); |
| 557 | }, | 656 | }, |
| 558 | chtbox_close() { | 657 | chtbox_close() { |
| 559 | $("#cht_box_close").removeClass("cht_close"); | 658 | $("#cht_box_close").removeClass("cht_close"); |
| 560 | $("#open_ct_box, .c_hide").show(); | 659 | $("#open_ct_box, .c_hide").show(); |
| 561 | $(".footer-top").addClass("white-bg"); | 660 | $(".footer-top").addClass("white-bg"); |
| 562 | }, | 661 | }, |
| 563 | open_ct_box() { | 662 | open_ct_box() { |
| 564 | $("#cht_box_close").addClass("cht_close"); | 663 | $("#cht_box_close").addClass("cht_close"); |
| 565 | $("#open_ct_box, .c_hide").hide(); | 664 | $("#open_ct_box, .c_hide").hide(); |
| 566 | $(".footer-top").removeClass("white-bg"); | 665 | $(".footer-top").removeClass("white-bg"); |
| 567 | }, | 666 | }, |
| 568 | eachRply(cmnt) { | 667 | eachRply(cmnt) { |
| 569 | cmnt.childInput = true; | 668 | cmnt.childInput = true; |
| 570 | this.parentInput = false; | 669 | this.parentInput = false; |
| 670 | this.comment = null; | ||
| 671 | setTimeout(() => { | ||
| 672 | document.getElementById("childInput").focus(); | ||
| 673 | }, 100); | ||
| 571 | }, | 674 | }, |
| 572 | discardRply(cmnt) { | 675 | discardRply(cmnt) { |
| 573 | cmnt.childInput = false; | 676 | cmnt.childInput = false; |
| 574 | this.parentInput = true; | 677 | this.parentInput = true; |
| 575 | 678 | this.comment = null; | |
| 679 | }, | ||
| 680 | reply_cht_box(i) { | ||
| 681 | console.log(this.commentList, "cmnt"); | ||
| 682 | $("#cht_box_close").addClass("cht_close"); | ||
| 683 | $("#open_ct_box, .c_hide").hide(); | ||
| 684 | $(".footer-top").removeClass("white-bg"); | ||
| 685 | this.commentList[i].childInput = true; | ||
| 686 | this.parentInput = false; | ||
| 687 | this.comment = null; | ||
| 688 | setTimeout(() => { | ||
| 689 | document.getElementById("childInput").focus(); | ||
| 690 | }, 100); | ||
| 691 | }, | ||
| 692 | likeComment(status, id) { | ||
| 693 | console.log("===", this.comment); | ||
| 694 | var obj = { | ||
| 695 | commentId: id, | ||
| 696 | like: status, | ||
| 697 | }; | ||
| 698 | axios | ||
| 699 | .post("/bounceBoard/like", obj, { | ||
| 700 | headers: { | ||
| 701 | Authorization: "Bearer " + this.usertoken, | ||
| 702 | }, | ||
| 703 | }) | ||
| 704 | .then((response) => { | ||
| 705 | this.getComment(); | ||
| 706 | console.log(response); | ||
| 707 | }) | ||
| 708 | .catch((error) => { | ||
| 709 | if (error.response) { | ||
| 710 | this.$toaster.error(error.response.data.message); | ||
| 711 | } | ||
| 712 | }); | ||
| 713 | }, | ||
| 714 | getLastcomment(flag, commentArray) { | ||
| 715 | var finalComment = null; | ||
| 716 | var totalMessage = 0; | ||
| 717 | var name = null; | ||
| 718 | commentArray.forEach((comment_) => { |
src/components/noscreenshotSingleautho.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);" | ||
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a> | ||
| 23 | </div> | ||
| 24 | </nav> | ||
| 25 | <!-- menu wrapper --> | 5 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 6 | <div class="intro-startup"> |
| 27 | 7 | ||
| 28 | <!-- chat box --> | 8 | <!-- chat box --> |
| 29 | <div class="bounce-board-wrp" id="cht_box_close"> | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 30 | <div class="inner-wrp-bc"> | 10 | <div class="inner-wrp-bc"> |
| 31 | <div class="bc-top-head"> | 11 | <div class="bc-top-head"> |
| 32 | <span class="bc-head"> | 12 | <span class="bc-head"> |
| 33 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | 13 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board |
| 34 | </span> | 14 | </span> |
| 35 | <div class="action-sort"> | 15 | <div class="action-sort"> |
| 36 | <span class="sort-by">SORT BY</span> | 16 | <span class="sort-by">SORT BY</span> |
| 37 | <div class="btn-group"> | 17 | <div class="btn-group"> |
| 38 | <button | 18 | <button |
| 39 | type="button" | 19 | type="button" |
| 40 | class="bc-sort-list dropdown-toggle" | 20 | class="bc-sort-list dropdown-toggle" |
| 41 | data-toggle="dropdown" | 21 | data-toggle="dropdown" |
| 42 | aria-haspopup="true" | 22 | aria-haspopup="true" |
| 43 | aria-expanded="false" | 23 | aria-expanded="false" |
| 44 | > | 24 | > |
| 45 | BEST | 25 | BEST |
| 46 | </button> | 26 | </button> |
| 47 | <div class="dropdown-menu short_by"> | 27 | <div class="dropdown-menu short_by"> |
| 48 | <a class="dropdown-item" href="javasript:void(0);" | 28 | <a class="dropdown-item" href="javasript:void(0);" |
| 49 | >BEST 1</a | 29 | >BEST 1</a |
| 50 | > | 30 | > |
| 51 | <a class="dropdown-item" href="javasript:void(0);" | 31 | <a class="dropdown-item" href="javasript:void(0);" |
| 52 | >BEST 2</a | 32 | >BEST 2</a |
| 53 | > | 33 | > |
| 54 | <a class="dropdown-item" href="javasript:void(0);" | 34 | <a class="dropdown-item" href="javasript:void(0);" |
| 55 | >BEST 3</a | 35 | >BEST 3</a |
| 56 | > | 36 | > |
| 57 | </div> | 37 | </div> |
| 58 | </div> | 38 | </div> |
| 59 | <a | 39 | <a |
| 60 | href="javasript:void(0);" | 40 | href="javasript:void(0);" |
| 61 | @click="chtbox_close" | 41 | @click="chtbox_close" |
| 62 | class="close_chat_bx" | 42 | class="close_chat_bx" |
| 63 | ><img src="../assets/images/close.png" alt="close" /></a | 43 | ><img src="../assets/images/close.png" alt="close" /></a |
| 64 | ><!-- close --> | 44 | ><!-- close --> |
| 65 | </div> | 45 | </div> |
| 66 | <!-- action sort --> | 46 | <!-- action sort --> |
| 67 | </div> | 47 | </div> |
| 68 | <!-- top head --> | 48 | <!-- top head --> |
| 69 | <div class="bounce-board-body"> | 49 | <div class="bounce-board-body"> |
| 70 | |||
| 71 | <!-- all user comments --> | 50 | <!-- all user comments --> |
| 72 | <ul class="bounced-user-comments"> | 51 | <ul class="bounced-user-comments"> |
| 73 | <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"> |
| 74 | <div class="bc_brd_l"></div> | 53 | <div class="bc_brd_l"></div> |
| 75 | <!-- border --> | 54 | <!-- border --> |
| 76 | <div class="parent-full-width"> | 55 | <div class="parent-full-width" v-if="cmnt.comment"> |
| 77 | <div class="full-width"> | 56 | <div class="full-width"> |
| 78 | <div class="b-user-head"> | 57 | <div class="b-user-head"> |
| 79 | <img :src="cmnt.user.profilePic" /> | 58 | <img :src="cmnt.user.profilePic" /> |
| 80 | <span class="head-content">{{ cmnt.user.name }} </span> | 59 | <span class="head-content">{{ cmnt.user.name }} </span> |
| 81 | <ul> | 60 | <ul> |
| 82 | <li> | 61 | <li> |
| 83 | <span></span | 62 | <span></span |
| 84 | ><img src="../assets/images/u-info-icon.png" />{{ | 63 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 85 | cmnt.user.karmaPoints | 64 | cmnt.user.karmaPoints |
| 86 | }}pts | 65 | }}pts |
| 87 | </li> | 66 | </li> |
| 88 | <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | 67 | <li> |
| 68 | <span></span>{{ dateGenerator(cmnt.createdAt) }} | ||
| 69 | </li> | ||
| 89 | </ul> | 70 | </ul> |
| 90 | </div> | 71 | </div> |
| 91 | <!-- header --> | 72 | <!-- header --> |
| 92 | <p> | 73 | <p> |
| 93 | {{ cmnt.comment }} | 74 | {{ cmnt.comment }} |
| 94 | </p> | 75 | </p> |
| 95 | <div class="joined_wrapper"> | 76 | <div class="joined_wrapper"> |
| 96 | <ul class="joined-info info_bc_spc"> | 77 | <ul class="joined-info info_bc_spc"> |
| 97 | <li> | 78 | <li> |
| 98 | <img src="../assets/images/purple-heart.png" /> | 79 | <img |
| 80 | src="../assets/images/heart.svg" | ||
| 81 | v-if="cmnt.like == false" | ||
| 82 | @click="likeComment(true, cmnt._id)" | ||
| 83 | class="cursor-pointer" | ||
| 84 | /> | ||
| 85 | <img | ||
| 86 | src="../assets/images/purple-heart.png" | ||
| 87 | v-if="cmnt.like == true" | ||
| 88 | @click="likeComment(false, cmnt._id)" | ||
| 89 | class="cursor-pointer" | ||
| 90 | /> | ||
| 91 | </li> | ||
| 92 | <li> | ||
| 93 | <a href="javasript:void(0);"> | ||
| 94 | {{ cmnt.likes.length }}</a | ||
| 95 | > | ||
| 99 | </li> | 96 | </li> |
| 100 | <li><a href="javasript:void(0);"> 0</a></li> | ||
| 101 | <li class="comment-spc"> | 97 | <li class="comment-spc"> |
| 102 | <img src="../assets/images/purple-comment.png" /> | 98 | <img src="../assets/images/purple-comment.png" /> |
| 103 | </li> | 99 | </li> |
| 104 | <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | 100 | <li> |
| 101 | <a href="javasript:void(0);"> | ||
| 102 | {{ cmnt.children.length }}</a | ||
| 103 | > | ||
| 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"></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 href="javasript:void(0);" class="discard_bt" | 129 | <a |
| 130 | @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | 130 | href="javasript:void(0);" |
| 131 | class="discard_bt" | ||
| 132 | @click="discardRply(cmnt)" | ||
| 133 | ><img src="../assets/images/discard.svg" | ||
| 131 | /></a> | 134 | /></a> |
| 132 | </div> | 135 | </div> |
| 133 | </div> | 136 | </div> |
| 134 | <!-- parent --> | 137 | <!-- parent --> |
| 135 | <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | 138 | <div |
| 139 | class="child-full-width" | ||
| 140 | v-for="(childCmnt, i) in cmnt.children" | ||
| 141 | :key="i" | ||
| 142 | > | ||
| 136 | <div class="full-width"> | 143 | <div class="full-width"> |
| 137 | <div class="b-user-head"> | 144 | <div class="b-user-head"> |
| 138 | <img :src="childCmnt.user.profilePic" /> | 145 | <img :src="childCmnt.user.profilePic" /> |
| 139 | <span class="head-content">{{childCmnt.user.name }} </span> | 146 | <span class="head-content" |
| 147 | >{{ childCmnt.user.name }} | ||
| 148 | </span> | ||
| 140 | <ul> | 149 | <ul> |
| 141 | <li> | 150 | <li> |
| 142 | <span></span | 151 | <span></span |
| 143 | ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | 152 | ><img src="../assets/images/u-info-icon.png" />{{ |
| 153 | childCmnt.user.karmaPoints | ||
| 154 | }}pts | ||
| 155 | </li> | ||
| 156 | <li> | ||
| 157 | <span></span | ||
| 158 | >{{ dateGenerator(childCmnt.createdAt) }} | ||
| 144 | </li> | 159 | </li> |
| 145 | <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | ||
| 146 | </ul> | 160 | </ul> |
| 147 | </div> | 161 | </div> |
| 148 | <p> | 162 | <p> |
| 149 | {{childCmnt.comment}} | 163 | {{ childCmnt.comment }} |
| 150 | </p> | 164 | </p> |
| 151 | <div class="joined_wrapper"> | 165 | <div class="joined_wrapper"> |
| 152 | <ul class="joined-info info_bc_spc"> | 166 | <ul class="joined-info info_bc_spc"> |
| 153 | <li> | 167 | <li> |
| 154 | <img src="../assets/images/purple-heart.png" /> | 168 | <img |
| 169 | src="../assets/images/heart.svg" | ||
| 170 | v-if="childCmnt.like == false" | ||
| 171 | @click="likeComment(true, childCmnt._id)" | ||
| 172 | class="cursor-pointer" | ||
| 173 | /> | ||
| 174 | <img | ||
| 175 | src="../assets/images/purple-heart.png" | ||
| 176 | v-if="childCmnt.like == true" | ||
| 177 | @click="likeComment(false, childCmnt._id)" | ||
| 178 | class="cursor-pointer" | ||
| 179 | /> | ||
| 180 | </li> | ||
| 181 | <li> | ||
| 182 | <a href="javasript:void(0);"> | ||
| 183 | {{ childCmnt.likes.length }}</a | ||
| 184 | > | ||
| 155 | </li> | 185 | </li> |
| 156 | <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | ||
| 157 | |||
| 158 | </ul> | 186 | </ul> |
| 159 | |||
| 160 | </div> | 187 | </div> |
| 161 | </div> | 188 | </div> |
| 162 | </div> | 189 | </div> |
| 163 | <!-- eree --> | 190 | <!-- eree --> |
| 164 | 191 | ||
| 165 | <!-- comments footer --> | 192 | <!-- comments footer --> |
| 166 | </li> | 193 | </li> |
| 167 | </ul> | 194 | </ul> |
| 168 | </div> | 195 | </div> |
| 169 | <!-- bounce board body --> | 196 | <!-- bounce board body --> |
| 170 | <div class="comments-footer" v-if="parentInput"> | 197 | <div class="comments-footer" v-if="parentInput"> |
| 171 | <textarea v-model="comment"></textarea> | 198 | <textarea v-model="comment"></textarea> |
| 172 | <div class="comments-footer-wrp"> | 199 | <div class="comments-footer-wrp"> |
| 173 | <a | 200 | <a |
| 174 | href="javasript:void(0);" | 201 | href="javasript:void(0);" |
| 175 | class="add_comments_chat" | 202 | class="add_comments_chat" |
| 176 | @click="createComment" | 203 | @click="createComment" |
| 177 | ><img src="../assets/images/add-comment.svg" /> Comment</a | 204 | ><img src="../assets/images/add-comment.svg" /> Comment</a |
| 178 | > | 205 | > |
| 179 | </div> | 206 | </div> |
| 180 | </div> | 207 | </div> |
| 181 | <!-- comments footer --> | 208 | <!-- comments footer --> |
| 182 | </div> | 209 | </div> |
| 183 | </div> | 210 | </div> |
| 184 | <!-- bounceboard wrp --> | 211 | <!-- bounceboard wrp --> |
| 185 | <!-- chat box --> | 212 | <!-- chat box --> |
| 186 | 213 | ||
| 187 | <div class="single-author-comments"> | 214 | <div class="single-author-comments"> |
| 188 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> | 215 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> |
| 189 | <div class="ct-l-400"> | 216 | <div class="ct-l-400"> |
| 190 | <div class="single-author-li-comments"> | 217 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 191 | <div class="a-intro-comments right-corner"> | 218 | <div class="a-intro-comments right-corner"> |
| 192 | <p> | 219 | <p> |
| 193 | {{currentSlideData.payload.comments[0].comment}} | 220 | {{commentList[0].comment}} |
| 194 | </p> | 221 | </p> |
| 195 | <ul class="rly-comment-set"> | 222 | <ul class="rly-comment-set"> |
| 223 | <!-- like/dislike --> | ||
| 196 | <li> | 224 | <li> |
| 197 | <img src="../assets/images/color-heart.svg" /> | 225 | <img |
| 198 | <a href="javascript:void(0);">0</a> | 226 | src="../assets/images/heart.svg" |
| 227 | v-if="commentList[0].like == false" | ||
| 228 | @click="likeComment(true, commentList[0]._id)" | ||
| 229 | class="cursor-pointer" | ||
| 230 | /> | ||
| 231 | <img | ||
| 232 | src="../assets/images/purple-heart.png" | ||
| 233 | v-if="commentList[0].like == true" | ||
| 234 | @click="likeComment(false, commentList[0]._id)" | ||
| 235 | class="cursor-pointer" | ||
| 236 | /> | ||
| 237 | <a href="javascript:void(0);">{{ | ||
| 238 | commentList[0].likes.length | ||
| 239 | }}</a> | ||
| 199 | </li> | 240 | </li> |
| 241 | <!-- like/dislike ends --> | ||
| 200 | <li> | 242 | <li> |
| 201 | <img src="../assets/images/rply.svg" /> | 243 | <img src="../assets/images/rply.svg" /> |
| 202 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 244 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 245 | >Reply</a | ||
| 246 | > | ||
| 203 | </li> | 247 | </li> |
| 204 | </ul> | 248 | </ul> |
| 205 | </div> | 249 | </div> |
| 206 | 250 | ||
| 207 | </div> <!-- comments box --> | 251 | </div> <!-- comments box --> |
| 208 | <div class="single-author-li-comments"> | 252 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 209 | <div class="a-intro-comments right-corner"> | 253 | <div class="a-intro-comments right-corner"> |
| 210 | <p> | 254 | <p> |
| 211 | {{currentSlideData.payload.comments[0].comment}} | 255 | {{commentList[1].comment}} |
| 212 | </p> | 256 | </p> |
| 213 | <ul class="rly-comment-set"> | 257 | <ul class="rly-comment-set"> |
| 258 | <!-- like/dislike --> | ||
| 214 | <li> | 259 | <li> |
| 215 | <img src="../assets/images/color-heart.svg" /> | 260 | <img |
| 216 | <a href="javascript:void(0);">0</a> | 261 | src="../assets/images/heart.svg" |
| 262 | v-if="commentList[1].like == false" | ||
| 263 | @click="likeComment(true, commentList[1]._id)" | ||
| 264 | class="cursor-pointer" | ||
| 265 | /> | ||
| 266 | <img | ||
| 267 | src="../assets/images/purple-heart.png" | ||
| 268 | v-if="commentList[1].like == true" | ||
| 269 | @click="likeComment(false, commentList[1]._id)" | ||
| 270 | class="cursor-pointer" | ||
| 271 | /> | ||
| 272 | <a href="javascript:void(0);">{{ | ||
| 273 | commentList[1].likes.length | ||
| 274 | }}</a> | ||
| 217 | </li> | 275 | </li> |
| 276 | <!-- like/dislike ends --> | ||
| 218 | <li> | 277 | <li> |
| 219 | <img src="../assets/images/rply.svg" /> | 278 | <img src="../assets/images/rply.svg" /> |
| 220 | <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | 279 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 280 | >Reply</a | ||
| 281 | > | ||
| 221 | </li> | 282 | </li> |
| 222 | </ul> | 283 | </ul> |
| 223 | </div> | 284 | </div> |
| 224 | 285 | ||
| 225 | </div> <!-- comments box --> | 286 | </div> <!-- comments box --> |
| 226 | </div> | 287 | </div> |
| 227 | <img | 288 | <img |
| 228 | class="s-user-comments m-0" | 289 | class="s-user-comments m-0" |
| 229 | :src="currentSlideData.payload.metaData.authorImage" | 290 | :src="currentSlideData.payload.metaData.authorImage" |
| 230 | /> | 291 | /> |
| 231 | <div class="comments-a-wrp ct-width"> | 292 | <div class="comments-a-wrp ct-width"> |
| 232 | <div class="single-author-li-comments "> | 293 | <div class="single-author-li-comments "> |
| 233 | <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"> |
| 234 | 295 | ||
| 235 | <div class="top-wrp"> | 296 | <div class="top-wrp"> |
| 236 | {{currentSlideData.payload.insight.tag}} Insight <a 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> |
| 237 | </div> | 298 | </div> |
| 238 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> | 299 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> |
| 239 | <p>{{currentSlideData.payload.insight.description}} | 300 | <p>{{currentSlideData.payload.insight.description}} |
| 240 | </p> | 301 | </p> |
| 241 | <div class="footer"> | 302 | <div class="footer"> |
| 242 | <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> |
| 243 | <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> |
| 244 | </div><!-- footer --> | 305 | </div><!-- footer --> |
| 245 | 306 | ||
| 246 | </div><!-- comments box --> | 307 | </div><!-- comments box --> |
| 247 | </div><!-- single author comments --> | 308 | </div><!-- single author comments --> |
| 248 | <!-- single author comments --> | 309 | <!-- single author comments --> |
| 249 | 310 | ||
| 250 | </div> | 311 | </div> |
| 251 | </div> | 312 | </div> |
| 252 | <!-- single author comments --> | 313 | <!-- single author comments --> |
| 253 | <div class="footer-nav"> | 314 | <div class="footer-nav"> |
| 254 | <div class="footer-top white-bg"> | 315 | <div class="footer-top white-bg"> |
| 255 | <div class="row"> | 316 | <div class="row"> |
| 256 | <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"> |
| 257 | <div class="row h-100p"> | 318 | <div class="row h-100p"> |
| 258 | <div | 319 | <div |
| 259 | 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" |
| 260 | > | 321 | > |
| 261 | <div class="ft-comments-group testi-photos-ct"> | 322 | <div class="ft-comments-group testi-photos-ct"> |
| 262 | <div class="c-with-photos"> | 323 | <div class="c-with-photos"> |
| 263 | <span class="count-comments" | 324 | <span class="count-comments" |
| 264 | >{{ commentList.length - 1 }}+ Comments</span | 325 | >{{ getLastcomment("count", commentList) }}+ |
| 326 | Comments</span | ||
| 265 | ><!-- count commets --> | 327 | ><!-- count commets --> |
| 266 | <ul class="comments-photos"> | 328 | <ul class="comments-photos"> |
| 267 | <li><img src="../assets/images/c-photo-1.png" /></li> | 329 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 268 | <li><img src="../assets/images/c-photo-2.png" /></li> | 330 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 269 | <li><img src="../assets/images/c-photo-3.png" /></li> | 331 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 270 | </ul> | 332 | </ul> |
| 271 | <!-- comment photos --> | 333 | <!-- comment photos --> |
| 272 | </div> | 334 | </div> |
| 273 | <div class="comments-detail all-c-space"> | 335 | <div class="comments-detail all-c-space"> |
| 274 | <span | 336 | <span |
| 275 | >{{ commentList[commentList.length - 1].user.name }} | 337 | >{{ getLastcomment("name", commentList) }} |
| 276 | <a href="javascript:void(0);" @click="open_ct_box" | 338 | <a href="javascript:void(0);" @click="open_ct_box" |
| 277 | >View All</a | 339 | >View All</a |
| 278 | ></span | 340 | ></span |
| 279 | > | 341 | > |
| 280 | <p> | 342 | <p> |
| 281 | <!-- I wonder what the difference between “Dunzo Assistant” | 343 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 282 | and “Pickup and Drop... --> | 344 | and “Pickup and Drop... --> |
| 283 | {{ commentList[commentList.length - 1].comment }} | 345 | {{ getLastcomment("msg", commentList) }} |
| 284 | </p> | 346 | </p> |
| 285 | </div> | 347 | </div> |
| 286 | <!-- comments detail --> | 348 | <!-- comments detail --> |
| 287 | </div> | 349 | </div> |
| 288 | <!-- comments Group --> | 350 | <!-- comments Group --> |
| 289 | </div> | 351 | </div> |
| 290 | </div> | 352 | </div> |
| 291 | </div> | 353 | </div> |
| 292 | <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"> |
| 293 | <div class="comment-frm no-c-frm"> | 355 | <div class="comment-frm no-c-frm"> |
| 294 | <div class="row"> | 356 | <div class="row"> |
| 295 | <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"> |
| 296 | <div class="form-group frm-wdth addfrm-spc"> | 358 | <div class="form-group frm-wdth addfrm-spc"> |
| 297 | <input | 359 | <input |
| 298 | type="text" | 360 | type="text" |
| 299 | class="form-control" | 361 | class="form-control" |
| 300 | placeholder="Something on your mind?" | 362 | placeholder="Something on your mind?" |
| 301 | id="open_ct_box" | 363 | id="open_ct_box" |
| 302 | v-model="comment" | 364 | v-model="comment" |
| 303 | /> | 365 | /> |
| 304 | </div> | 366 | </div> |
| 305 | </div> | 367 | </div> |
| 306 | <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"> |
| 307 | <a | 369 | <a |
| 308 | href="javascript:void(0);" | 370 | href="javascript:void(0);" |
| 309 | @click="createComment" | 371 | @click="createComment" |
| 310 | class="add-comment" | 372 | class="add-comment" |
| 311 | ><img src="../assets/images/add-comment.svg" /> | 373 | ><img src="../assets/images/add-comment.svg" /> |
| 312 | Comment</a | 374 | Comment</a |
| 313 | > | 375 | > |
| 314 | </div> | 376 | </div> |
| 315 | </div> | 377 | </div> |
| 316 | <!-- comment from --> | 378 | <!-- comment from --> |
| 317 | </div> | 379 | </div> |
| 318 | </div> | 380 | </div> |
| 319 | <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"> |
| 320 | <ul class="top-intro-bt"> | 382 | <ul class="top-intro-bt"> |
| 321 | <li> | 383 | <li> |
| 322 | <a href="javascript:void(0);" @click="goBack" | 384 | <a href="javascript:void(0);" @click="goBack" |
| 323 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 385 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 324 | > | 386 | > |
| 325 | </li> | 387 | </li> |
| 326 | <li> | 388 | <li> |
| 327 | <a href="javascript:void(0);" @click="goNext" | 389 | <a href="javascript:void(0);" @click="goNext" |
| 328 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 390 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 329 | slide</a | 391 | slide</a |
| 330 | > | 392 | > |
| 331 | </li> | 393 | </li> |
| 332 | </ul> | 394 | </ul> |
| 333 | </div> | 395 | </div> |
| 334 | <!-- buttons list --> | 396 | <!-- buttons list --> |
| 335 | </div> | 397 | </div> |
| 336 | </div> | 398 | </div> |
| 337 | <!-- footer top --> | 399 | <!-- footer top --> |
| 338 | <div class="footer-bottom"> | 400 | <div class="footer-bottom"> |
| 339 | <ul> | 401 | <ul> |
| 340 | <li class="active"></li> | 402 | <li class="active"></li> |
| 341 | <li></li> | 403 | <li></li> |
| 342 | </ul> | 404 | </ul> |
| 343 | </div> | 405 | </div> |
| 344 | <!-- footer top --> | 406 | <!-- footer top --> |
| 345 | </div> | 407 | </div> |
| 346 | <!-- footer --> | 408 | <!-- footer --> |
| 347 | </div> | 409 | </div> |
| 348 | <!-- body wrapper --> | 410 | <!-- body wrapper --> |
| 349 | </div> | 411 | </div> |
| 350 | <!-- main wrapper --> | 412 | <!-- main wrapper --> |
| 351 | </main> | 413 | </main> |
| 352 | </template> | 414 | </template> |
| 353 | 415 | ||
| 354 | <script> | 416 | <script> |
| 355 | import Vue from "vue"; | 417 | import Vue from "vue"; |
| 356 | import router from "../router"; | 418 | import router from "../router"; |
| 357 | import axios from "axios"; | 419 | import axios from "axios"; |
| 358 | import moment from 'moment'; | 420 | import moment from 'moment'; |
| 421 | import Header from "./Header"; | ||
| 422 | |||
| 359 | export default { | 423 | export default { |
| 424 | components: { | ||
| 425 | Header: Header, | ||
| 426 | }, | ||
| 360 | name: "noscreenshotSingleautho", | 427 | name: "noscreenshotSingleautho", |
| 361 | data() { | 428 | data() { |
| 362 | return { | 429 | return { |
| 363 | allSlide: [], | 430 | allSlide: [], |
| 364 | currentSlideIndex: null, | 431 | currentSlideIndex: null, |
| 365 | currentSlideData: null, | 432 | currentSlideData: null, |
| 366 | // | 433 | // |
| 367 | usertoken: null, | 434 | usertoken: null, |
| 368 | commentList: [], | 435 | commentList: [], |
| 369 | comment: null, | 436 | comment: null, |
| 370 | parentInput: true, | 437 | parentInput: true, |
| 371 | }; | 438 | }; |
| 372 | }, | 439 | }, |
| 373 | mounted() { | 440 | mounted() { |
| 374 | var allSlideData = localStorage.getItem( | 441 | var allSlideData = localStorage.getItem( |
| 375 | "spotlight_slide" + this.$route.params.caseStudyId | 442 | "spotlight_slide" + this.$route.params.caseStudyId |
| 376 | ); | 443 | ); |
| 377 | if (allSlideData) { | 444 | if (allSlideData) { |
| 378 | this.allSlide = JSON.parse(allSlideData); | 445 | this.allSlide = JSON.parse(allSlideData); |
| 379 | this.getCurrentSlideData(); | 446 | this.getCurrentSlideData(); |
| 380 | } | 447 | } |
| 381 | var userdata = localStorage.getItem("spotlight_usertoken"); | 448 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 382 | if (userdata) { | 449 | if (userdata) { |
| 383 | userdata = JSON.parse(userdata); | 450 | userdata = JSON.parse(userdata); |
| 384 | this.usertoken = userdata.token; | 451 | this.usertoken = userdata.token; |
| 385 | this.getComment(); | 452 | this.getComment(); |
| 386 | } | 453 | } |
| 387 | }, | 454 | }, |
| 388 | methods: { | 455 | methods: { |
| 389 | getCurrentSlideData() { | 456 | getCurrentSlideData() { |
| 390 | var i = this.allSlide.findIndex( | 457 | var i = this.allSlide.findIndex( |
| 391 | (slide_) => slide_.slideId == this.$route.params.slideId | 458 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 392 | ); | 459 | ); |
| 393 | this.currentSlideIndex = i; | 460 | this.currentSlideIndex = i; |
| 394 | this.currentSlideData = this.allSlide[i]; | 461 | this.currentSlideData = this.allSlide[i]; |
| 395 | console.log("currentSlideData", this.currentSlideData); | 462 | console.log("currentSlideData", this.currentSlideData); |
| 396 | }, | 463 | }, |
| 397 | goNext() { | 464 | goNext() { |
| 398 | this.currentSlideIndex++; | 465 | this.currentSlideIndex++; |
| 399 | this.$router.push({ | 466 | this.$router.push({ |
| 400 | name: this.allSlide[this.currentSlideIndex].ur, | 467 | name: this.allSlide[this.currentSlideIndex].ur, |
| 401 | params: { | 468 | params: { |
| 402 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 469 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 403 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 470 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 404 | }, | 471 | }, |
| 405 | }); | 472 | }); |
| 406 | }, | 473 | }, |
| 407 | goBack() { | 474 | goBack() { |
| 408 | this.currentSlideIndex--; | 475 | this.currentSlideIndex--; |
| 409 | this.$router.push({ | 476 | this.$router.push({ |
| 410 | name: this.allSlide[this.currentSlideIndex].ur, | 477 | name: this.allSlide[this.currentSlideIndex].ur, |
| 411 | params: { | 478 | params: { |
| 412 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 479 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 413 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 480 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 414 | }, | 481 | }, |
| 415 | }); | 482 | }); |
| 416 | }, | 483 | }, |
| 417 | createComment() { | 484 | createComment() { |
| 418 | console.log("===", this.comment); | 485 | console.log("===", this.comment); |
| 419 | var obj = { | 486 | var obj = { |
| 420 | caseStudyId: this.currentSlideData.caseStudyId, | 487 | caseStudyId: this.currentSlideData.caseStudyId, |
| 421 | slideId: this.currentSlideData.slideId, | 488 | slideId: this.currentSlideData.slideId, |
| 422 | comment: this.comment, | 489 | comment: this.comment, |
| 423 | 490 | ||
| 424 | }; | 491 | }; |
| 425 | axios | 492 | axios |
| 426 | .post("/bounceBoard/comment", obj, { | 493 | .post("/bounceBoard/comment", obj, { |
| 427 | headers: { | 494 | headers: { |
| 428 | Authorization: "Bearer " + this.usertoken, | 495 | Authorization: "Bearer " + this.usertoken, |
| 429 | }, | 496 | }, |
| 430 | }) | 497 | }) |
| 431 | .then((response) => { | 498 | .then((response) => { |
| 432 | this.comment = null; | 499 | this.comment = null; |
| 433 | this.getComment(); | 500 | this.getComment(); |
| 434 | console.log(response); | 501 | console.log(response); |
| 435 | }) | 502 | }) |
| 436 | .catch((error) => { | 503 | .catch((error) => { |
| 437 | if (error.response) { | 504 | if (error.response) { |
| 438 | this.$toaster.error(error.response.data.message); | 505 | this.$toaster.error(error.response.data.message); |
| 439 | } | 506 | } |
| 440 | }); | 507 | }); |
| 441 | }, | 508 | }, |
| 442 | createChildComment(cmnt) { | 509 | createChildComment(cmnt) { |
| 443 | console.log(cmnt,"===", this.comment); | 510 | console.log(cmnt,"===", this.comment); |
| 444 | var obj = { | 511 | var obj = { |
| 445 | caseStudyId: this.currentSlideData.caseStudyId, | 512 | caseStudyId: this.currentSlideData.caseStudyId, |
| 446 | slideId: this.currentSlideData.slideId, | 513 | slideId: this.currentSlideData.slideId, |
| 447 | comment: this.comment, | 514 | comment: this.comment, |
| 448 | parentId: cmnt._id, | 515 | parentId: cmnt._id, |
| 449 | 516 | ||
| 450 | }; | 517 | }; |
| 451 | axios | 518 | axios |
| 452 | .post("/bounceBoard/comment", obj, { | 519 | .post("/bounceBoard/comment", obj, { |
| 453 | headers: { | 520 | headers: { |
| 454 | Authorization: "Bearer " + this.usertoken, | 521 | Authorization: "Bearer " + this.usertoken, |
| 455 | }, | 522 | }, |
| 456 | }) | 523 | }) |
| 457 | .then((response) => { | 524 | .then((response) => { |
| 458 | this.comment = null; | 525 | this.comment = null; |
| 459 | this.discardRply(cmnt); | 526 | this.discardRply(cmnt); |
| 460 | this.getComment(); | 527 | this.getComment(); |
| 461 | console.log(response); | 528 | console.log(response); |
| 462 | }) | 529 | }) |
| 463 | .catch((error) => { | 530 | .catch((error) => { |
| 464 | if (error.response) { | 531 | if (error.response) { |
| 465 | this.$toaster.error(error.response.data.message); | 532 | this.$toaster.error(error.response.data.message); |
| 466 | } | 533 | } |
| 467 | }); | 534 | }); |
| 468 | }, | 535 | }, |
| 469 | getComment() { | 536 | getComment() { |
| 470 | axios | 537 | axios |
| 471 | .get( | 538 | .get( |
| 472 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 539 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 473 | { | 540 | { |
| 474 | headers: { | 541 | headers: { |
| 475 | Authorization: "Bearer " + this.usertoken, | 542 | Authorization: "Bearer " + this.usertoken, |
| 476 | }, | 543 | }, |
| 477 | } | 544 | } |
| 478 | ) | 545 | ) |
| 479 | .then((response) => { | 546 | .then((response) => { |
| 480 | console.log(response.data); | 547 | console.log(response.data); |
| 481 | var comments = []; | 548 | var comments = []; |
| 482 | var keys = Object.keys(response.data.data) | 549 | var keys = Object.keys(response.data.data) |
| 483 | response.data.data | 550 | response.data.data |
| 484 | keys.forEach((key_) => { | 551 | keys.forEach((key_) => { |
| 485 | comments.push(response.data.data[key_]) | 552 | comments.push(response.data.data[key_]) |
| 486 | }); | 553 | }); |
| 487 | comments.forEach((coment_)=>{ | 554 | comments.forEach((coment_)=>{ |
| 488 | coment_.childInput = false; | 555 | coment_.childInput = false; |
| 489 | }); | 556 | }); |
| 490 | console.log("comments",comments) | 557 | console.log("comments",comments) |
| 491 | this.commentList = comments; | 558 | this.commentList = comments; |
| 492 | }) | 559 | }) |
| 493 | .catch((error) => console.log(error)); | 560 | .catch((error) => console.log(error)); |
| 494 | }, | 561 | }, |
| 495 | dateGenerator(curreDate){ | 562 | dateGenerator(curreDate){ |
| 496 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 563 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 497 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 564 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 498 | var result = todayDate.diff(endDate, 'days'); | 565 | var result = todayDate.diff(endDate, 'days'); |
| 499 | return result; | 566 | return result; |
| 500 | }, | 567 | }, |
| 501 | goToLogin() { | 568 | goToLogin() { |
| 502 | this.$router.push("/login"); | 569 | this.$router.push("/login"); |
| 503 | }, | 570 | }, |
| 504 | goToSignUp() { | 571 | goToSignUp() { |
| 505 | this.$router.push("/"); | 572 | this.$router.push("/"); |
| 506 | }, | 573 | }, |
| 574 | open(url){ | ||
| 575 | window.open(url); | ||
| 576 | }, | ||
| 507 | chtbox_close() { | 577 | chtbox_close() { |
| 508 | $("#cht_box_close").removeClass("cht_close"); | 578 | $("#cht_box_close").removeClass("cht_close"); |
| 509 | $("#open_ct_box, .c_hide").show(); | 579 | $("#open_ct_box, .c_hide").show(); |
| 510 | $(".footer-top").addClass("white-bg"); | 580 | $(".footer-top").addClass("white-bg"); |
| 511 | }, | 581 | }, |
| 512 | open_ct_box() { | 582 | open_ct_box() { |
| 513 | $("#cht_box_close").addClass("cht_close"); | 583 | $("#cht_box_close").addClass("cht_close"); |
| 514 | $("#open_ct_box, .c_hide").hide(); | 584 | $("#open_ct_box, .c_hide").hide(); |
| 515 | $(".footer-top").removeClass("white-bg"); | 585 | $(".footer-top").removeClass("white-bg"); |
| 516 | }, | 586 | }, |
| 517 | eachRply(cmnt) { | 587 | eachRply(cmnt) { |
| 518 | cmnt.childInput = true; | 588 | cmnt.childInput = true; |
| 519 | this.parentInput = false; | 589 | this.parentInput = false; |
| 590 | this.comment = null; | ||
| 591 | setTimeout(() => { | ||
| 592 | document.getElementById("childInput").focus(); | ||
| 593 | }, 100); | ||
| 520 | }, | 594 | }, |
| 521 | discardRply(cmnt) { | 595 | discardRply(cmnt) { |
| 522 | cmnt.childInput = false; | 596 | cmnt.childInput = false; |
| 523 | this.parentInput = true; | 597 | this.parentInput = true; |
| 524 | 598 | this.comment = null; | |
| 599 | }, | ||
| 600 | reply_cht_box(i) { | ||
| 601 | console.log(this.commentList, "cmnt"); | ||
| 602 | $("#cht_box_close").addClass("cht_close"); | ||
| 603 | $("#open_ct_box, .c_hide").hide(); | ||
| 604 | $(".footer-top").removeClass("white-bg"); | ||
| 605 | this.commentList[i].childInput = true; | ||
| 606 | this.parentInput = false; | ||
| 607 | this.comment = null; | ||
| 608 | setTimeout(() => { | ||
| 609 | document.getElementById("childInput").focus(); | ||
| 610 | }, 100); | ||
| 611 | }, | ||
| 612 | likeComment(status, id) { | ||
| 613 | console.log("===", this.comment); | ||
| 614 | var obj = { | ||
| 615 | commentId: id, | ||
| 616 | like: status, | ||
| 617 | }; | ||
| 618 | axios | ||
| 619 | .post("/bounceBoard/like", obj, { | ||
| 620 | headers: { | ||
| 621 | Authorization: "Bearer " + this.usertoken, | ||
| 622 | }, | ||
| 623 | }) | ||
| 624 | .then((response) => { | ||
| 625 | this.getComment(); | ||
| 626 | console.log(response); | ||
| 627 | }) | ||
| 628 | .catch((error) => { | ||
| 629 | if (error.response) { | ||
| 630 | this.$toaster.error(error.response.data.message); | ||
| 631 | } | ||
| 632 | }); | ||
| 633 | }, | ||
| 634 | getLastcomment(flag, commentArray) { | ||
| 635 | var finalComment = null; | ||
| 636 | var totalMessage = 0; | ||
| 637 | var name = null; | ||
| 638 | commentArray.forEach((comment_) => { | ||
| 639 | if (comment_.comment != null) { |
src/components/outro.vue
| 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 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);" | 5 | |
| 6 | ><img src="../assets/images/logo.png" | ||
| 7 | /></a> | ||
| 8 | <button | ||
| 9 | class="navbar-toggler" | ||
| 10 | type="button" | ||
| 11 | data-toggle="collapse" | ||
| 12 | data-target="#navbarsExample03" | ||
| 13 | aria-controls="navbarsExample03" | ||
| 14 | aria-expanded="false" | ||
| 15 | aria-label="Toggle navigation" | ||
| 16 | > | ||
| 17 | <span class="navbar-toggler-icon"></span> | ||
| 18 | <span class="navbar-toggler-icon"></span> | ||
| 19 | <span class="navbar-toggler-icon"></span> | ||
| 20 | </button> | ||
| 21 | <div class="user-profile-photo insights-profile"> | ||
| 22 | <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | ||
| 23 | </div> | ||
| 24 | </nav> | ||
| 25 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 26 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 27 | <div class="thanks-wrapper"> | 8 | <div class="thanks-wrapper"> |
| 28 | <div class="thanks-l-wrp"> | 9 | <div class="thanks-l-wrp"> |
| 29 | <div class="thanks-pay-wrp"> | 10 | <div class="thanks-pay-wrp"> |
| 30 | <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> | 11 | <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> |
| 31 | <img | 12 | <img |
| 32 | :src="currentSlideData.payload.metaData.authorImage[0]" | 13 | :src="currentSlideData.payload.metaData.authorImage[0]" |
| 33 | class="thanks-img" | 14 | class="thanks-img" |
| 34 | /> | 15 | /> |
| 35 | <div class="blacktext-wrp"> | 16 | <div class="blacktext-wrp"> |
| 36 | CHeck out other case studies here | 17 | CHeck out other case studies here |
| 37 | <img src="../assets/images/arrow-bottom.svg" /> | 18 | <img src="../assets/images/arrow-bottom.svg" /> |
| 38 | </div> | 19 | </div> |
| 39 | <ul class=""> | 20 | <ul class=""> |
| 40 | <li v-for="(study, i) in caseStudies" :key="i"> | 21 | <li v-for="(study, i) in caseStudies" :key="i"> |
| 41 | <a href="javascript:void(0);"> | 22 | <a href="javascript:void(0);"> |
| 42 | <img :src="study.intro.logoURL" /> | 23 | <img :src="study.intro.logoURL" /> |
| 43 | <span | 24 | <span |
| 44 | ><img src="../assets/images/p-eye.svg" /> 0 Views</span | 25 | ><img src="../assets/images/p-eye.svg" /> 0 Views</span |
| 45 | > | 26 | > |
| 46 | </a> | 27 | </a> |
| 47 | </li> | 28 | </li> |
| 48 | 29 | ||
| 49 | <!-- <li class="payments-spc-57"> | 30 | <!-- <li class="payments-spc-57"> |
| 50 | <a href="javascript:void(0);"> | 31 | <a href="javascript:void(0);"> |
| 51 | <img src="../assets/images/g-pay.svg" /> | 32 | <img src="../assets/images/g-pay.svg" /> |
| 52 | <span | 33 | <span |
| 53 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 34 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 54 | Views</span | 35 | Views</span |
| 55 | > | 36 | > |
| 56 | </a> | 37 | </a> |
| 57 | </li> | 38 | </li> |
| 58 | <li> | 39 | <li> |
| 59 | <a href="javascript:void(0);"> | 40 | <a href="javascript:void(0);"> |
| 60 | <img src="../assets/images/bb.svg" /> | 41 | <img src="../assets/images/bb.svg" /> |
| 61 | <span | 42 | <span |
| 62 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 43 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 63 | Views</span | 44 | Views</span |
| 64 | > | 45 | > |
| 65 | </a> | 46 | </a> |
| 66 | </li> --> | 47 | </li> --> |
| 67 | </ul> | 48 | </ul> |
| 68 | <!-- payments options --> | 49 | <!-- payments options --> |
| 69 | <!-- <ul class=""> | 50 | <!-- <ul class=""> |
| 70 | <li> | 51 | <li> |
| 71 | <a href="javascript:void(0);"> | 52 | <a href="javascript:void(0);"> |
| 72 | <img src="../assets/images/payment.svg" /> | 53 | <img src="../assets/images/payment.svg" /> |
| 73 | <span | 54 | <span |
| 74 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 55 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 75 | Views</span | 56 | Views</span |
| 76 | > | 57 | > |
| 77 | </a> | 58 | </a> |
| 78 | </li> | 59 | </li> |
| 79 | <li class="payments-spc-57"> | 60 | <li class="payments-spc-57"> |
| 80 | <a href="javascript:void(0);"> | 61 | <a href="javascript:void(0);"> |
| 81 | <img src="../assets/images/uc.svg" /> | 62 | <img src="../assets/images/uc.svg" /> |
| 82 | <span | 63 | <span |
| 83 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 64 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 84 | Views</span | 65 | Views</span |
| 85 | > | 66 | > |
| 86 | </a> | 67 | </a> |
| 87 | </li> | 68 | </li> |
| 88 | </ul> --> | 69 | </ul> --> |
| 89 | <!-- payments options --> | 70 | <!-- payments options --> |
| 90 | </div> | 71 | </div> |
| 91 | <!-- thanks pay wrp --> | 72 | <!-- thanks pay wrp --> |
| 92 | <img | 73 | <img |
| 93 | src="../assets/images/spot-light-bt.svg" | 74 | src="../assets/images/spot-light-bt.svg" |
| 94 | class="payment-spot-light-bt" | 75 | class="payment-spot-light-bt" |
| 95 | /> | 76 | /> |
| 96 | </div> | 77 | </div> |
| 97 | <!-- thanks left wrp --> | 78 | <!-- thanks left wrp --> |
| 98 | <div class="thanks-r-section"> | 79 | <div class="thanks-r-section"> |
| 99 | <div class="logo-common-wrp"> | 80 | <div class="logo-common-wrp"> |
| 100 | <a href="javascript:void(0);" | 81 | <a href="javascript:void(0);" |
| 101 | ><img src="../assets/images/ps-growth.svg" /> | 82 | ><img src="../assets/images/ps-growth.svg" /> |
| 102 | <span>Product Growth</span> | 83 | <span>Product Growth</span> |
| 103 | </a> | 84 | </a> |
| 104 | </div> | 85 | </div> |
| 105 | <!-- logo wrp --> | 86 | <!-- logo wrp --> |
| 106 | <div class="clearfix"></div> | 87 | <div class="clearfix"></div> |
| 107 | <p> | 88 | <p> |
| 108 | Don’t forget to <strong> join the discussion </strong> by | 89 | Don’t forget to <strong> join the discussion </strong> by |
| 109 | scrolling back and adding your comments! | 90 | scrolling back and adding your comments! |
| 110 | </p> | 91 | </p> |
| 111 | <div class="clearfix"></div> | 92 | <div class="clearfix"></div> |
| 112 | <a href="javascript:void(0);" class="back-bt" @click="goToProfile"> | 93 | <a href="javascript:void(0);" class="back-bt" @click="goToProfile"> |
| 113 | <span class="s1"></span> | 94 | <span class="s1"></span> |
| 114 | <span class="s2"></span> | 95 | <span class="s2"></span> |
| 115 | <span class="s3"></span> | 96 | <span class="s3"></span> |
| 116 | <span class="s4"></span> | 97 | <span class="s4"></span> |
| 117 | <img src="../assets/images/refresh.svg" /> Back to home | 98 | <img src="../assets/images/refresh.svg" /> Back to home |
| 118 | </a> | 99 | </a> |
| 119 | <ul class="rating-section"> | 100 | <ul class="rating-section"> |
| 120 | <li> | 101 | <li> |
| 121 | <p> | 102 | <p> |
| 122 | Excited to <strong> create case studies</strong> or help build | 103 | Excited to <strong> create case studies</strong> or help build |
| 123 | Product Growth? | 104 | Product Growth? |
| 124 | </p> | 105 | </p> |
| 125 | <a href="javascript:void(0);" class="publish">Publish</a> | 106 | <a href="javascript:void(0);" class="publish">Publish</a> |
| 126 | </li> | 107 | </li> |
| 127 | <li> | 108 | <li> |
| 128 | <p class="wdth">How would you rate this case study?</p> | 109 | <p class="wdth">How would you rate this case study?</p> |
| 129 | <span class="rating-list"> | 110 | <span class="rating-list"> |
| 130 | <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"> |
| 131 | </star-rating> | 112 | </star-rating> |
| 132 | <!-- <a href="javascript:void(0);" | 113 | <!-- <a href="javascript:void(0);" |
| 133 | ><img src="../assets/images/f-review.svg" | 114 | ><img src="../assets/images/f-review.svg" |
| 134 | /></a> | 115 | /></a> |
| 135 | <a href="javascript:void(0);" | 116 | <a href="javascript:void(0);" |
| 136 | ><img src="../assets/images/f-review.svg" | 117 | ><img src="../assets/images/f-review.svg" |
| 137 | /></a> | 118 | /></a> |
| 138 | <a href="javascript:void(0);" | 119 | <a href="javascript:void(0);" |
| 139 | ><img src="../assets/images/e-review.svg" | 120 | ><img src="../assets/images/e-review.svg" |
| 140 | /></a> --> | 121 | /></a> --> |
| 141 | </span> | 122 | </span> |
| 142 | </li> | 123 | </li> |
| 143 | </ul> | 124 | </ul> |
| 144 | <div class="follow-us-py"> | 125 | <div class="follow-us-py"> |
| 145 | <span>Follow us at</span> | 126 | <span>Follow us at</span> |
| 146 | <ul class="p-follows"> | 127 | <ul class="p-follows"> |
| 147 | <li> | 128 | <li> |
| 148 | <a href="javascript:void(0);"> | 129 | <a href="javascript:void(0);"> |
| 149 | <img src="../assets/images/p-rss.svg" /> | 130 | <img src="../assets/images/p-rss.svg" /> |
| 150 | </a> | 131 | </a> |
| 151 | </li> | 132 | </li> |
| 152 | <li> | 133 | <li> |
| 153 | <a href="javascript:void(0);"> | 134 | <a href="javascript:void(0);"> |
| 154 | <img src="../assets/images/p-linkedin.svg" /> | 135 | <img src="../assets/images/p-linkedin.svg" /> |
| 155 | </a> | 136 | </a> |
| 156 | </li> | 137 | </li> |
| 157 | <li> | 138 | <li> |
| 158 | <a href="javascript:void(0);"> | 139 | <a href="javascript:void(0);"> |
| 159 | <img src="../assets/images/p-twitter.svg" /> | 140 | <img src="../assets/images/p-twitter.svg" /> |
| 160 | </a> | 141 | </a> |
| 161 | </li> | 142 | </li> |
| 162 | </ul> | 143 | </ul> |
| 163 | </div> | 144 | </div> |
| 164 | <!-- <star-rating v-model="rating"></star-rating> --> | 145 | <!-- <star-rating v-model="rating"></star-rating> --> |
| 165 | 146 | ||
| 166 | <!-- follow us --> | 147 | <!-- follow us --> |
| 167 | <div class="p-users"> | 148 | <div class="p-users"> |
| 168 | <span>Author</span> | 149 | <span>Author</span> |
| 169 | <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> | 150 | <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> |
| 170 | <!-- <span>Author</span> | 151 | <!-- <span>Author</span> |
| 171 | <h1>Pramod</h1> | 152 | <h1>Pramod</h1> |
| 172 | <span>Author</span> | 153 | <span>Author</span> |
| 173 | <h1>Sarthak</h1> --> | 154 | <h1>Sarthak</h1> --> |
| 174 | <span v-if="currentSlideData.payload.metaData.designer" | 155 | <span v-if="currentSlideData.payload.metaData.designer" |
| 175 | >Designer</span | 156 | >Designer</span |
| 176 | > | 157 | > |
| 177 | <h1>{{ currentSlideData.payload.metaData.designer }}</h1> | 158 | <h1>{{ currentSlideData.payload.metaData.designer }}</h1> |
| 178 | <span v-if="currentSlideData.payload.metaData.illustrations" | 159 | <span v-if="currentSlideData.payload.metaData.illustrations" |
| 179 | >Illustrations</span | 160 | >Illustrations</span |
| 180 | > | 161 | > |
| 181 | <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> | 162 | <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> |
| 182 | </div> | 163 | </div> |
| 183 | <!-- users --> | 164 | <!-- users --> |
| 184 | </div> | 165 | </div> |
| 185 | <!-- thanks payment right section --> | 166 | <!-- thanks payment right section --> |
| 186 | </div> | 167 | </div> |
| 187 | <!--- thanks wrapper --> | 168 | <!--- thanks wrapper --> |
| 188 | <div class="footer-nav"> | 169 | <div class="footer-nav"> |
| 189 | <div class="footer-top"> | 170 | <div class="footer-top"> |
| 190 | <ul class="top-intro-bt ps_right"> | 171 | <ul class="top-intro-bt ps_right"> |
| 191 | <li> | 172 | <li> |
| 192 | <a href="javascript:void(0);" @click="goBack" | 173 | <a href="javascript:void(0);" @click="goBack" |
| 193 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 174 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 194 | > | 175 | > |
| 195 | </li> | 176 | </li> |
| 196 | </ul> | 177 | </ul> |
| 197 | </div> | 178 | </div> |
| 198 | <!-- footer top --> | 179 | <!-- footer top --> |
| 199 | <div class="footer-bottom"> | 180 | <div class="footer-bottom"> |
| 200 | <ul> | 181 | <ul> |
| 201 | <li class="active"></li> | 182 | <li class="active"></li> |
| 202 | <li class="active"></li> | 183 | <li class="active"></li> |
| 203 | </ul> | 184 | </ul> |
| 204 | </div> | 185 | </div> |
| 205 | <!-- footer top --> | 186 | <!-- footer top --> |
| 206 | </div> | 187 | </div> |
| 207 | <!-- footer --> | 188 | <!-- footer --> |
| 208 | </div> | 189 | </div> |
| 209 | <!-- body wrapper --> | 190 | <!-- body wrapper --> |
| 210 | </div> | 191 | </div> |
| 211 | <!-- main wrapper --> | 192 | <!-- main wrapper --> |
| 212 | </main> | 193 | </main> |
| 213 | </template> | 194 | </template> |
| 214 | 195 | ||
| 215 | <script> | 196 | <script> |
| 216 | import Vue from "vue"; | 197 | import Vue from "vue"; |
| 217 | import router from "../router"; | 198 | import router from "../router"; |
| 218 | import axios from "axios"; | 199 | import axios from "axios"; |
| 200 | import Header from "./Header"; | ||
| 219 | 201 | ||
| 220 | export default { | 202 | export default { |
| 203 | components: { | ||
| 204 | Header: Header, | ||
| 205 | }, | ||
| 221 | name: "Outro", | 206 | name: "Outro", |
| 222 | 207 | ||
| 223 | data() { | 208 | data() { |
| 224 | return { | 209 | return { |
| 225 | caseStudies: [], | 210 | caseStudies: [], |
| 226 | allSlide: [], | 211 | allSlide: [], |
| 227 | currentSlideIndex: null, | 212 | currentSlideIndex: null, |
| 228 | currentSlideData: null, | 213 | currentSlideData: null, |
| 229 | rating: 0, | 214 | rating: 0, |
| 230 | }; | 215 | }; |
| 231 | }, | 216 | }, |
| 232 | mounted() { | 217 | mounted() { |
| 233 | var allSlideData = localStorage.getItem( | 218 | var allSlideData = localStorage.getItem( |
| 234 | "spotlight_slide" + this.$route.params.caseStudyId | 219 | "spotlight_slide" + this.$route.params.caseStudyId |
| 235 | ); | 220 | ); |
| 236 | if (allSlideData) { | 221 | if (allSlideData) { |
| 237 | this.allSlide = JSON.parse(allSlideData); | 222 | this.allSlide = JSON.parse(allSlideData); |
| 238 | this.getCurrentSlideData(); | 223 | this.getCurrentSlideData(); |
| 239 | this.getCaseStudies(); | 224 | this.getCaseStudies(); |
| 240 | this.getRating(); | 225 | this.getRating(); |
| 241 | } | 226 | } |
| 242 | }, | 227 | }, |
| 243 | methods: { | 228 | methods: { |
| 244 | getCurrentSlideData() { | 229 | getCurrentSlideData() { |
| 245 | var i = this.allSlide.findIndex( | 230 | var i = this.allSlide.findIndex( |
| 246 | (slide_) => slide_.slideId == this.$route.params.slideId | 231 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 247 | ); | 232 | ); |
| 248 | this.currentSlideIndex = i; | 233 | this.currentSlideIndex = i; |
| 249 | this.currentSlideData = this.allSlide[i]; | 234 | this.currentSlideData = this.allSlide[i]; |
| 250 | console.log("currentSlideData", this.currentSlideData); | 235 | console.log("currentSlideData", this.currentSlideData); |
| 251 | }, | 236 | }, |
| 252 | goNext() { | 237 | goNext() { |
| 253 | this.currentSlideIndex++; | 238 | this.currentSlideIndex++; |
| 254 | this.$router.push({ | 239 | this.$router.push({ |
| 255 | name: this.allSlide[this.currentSlideIndex].ur, | 240 | name: this.allSlide[this.currentSlideIndex].ur, |
| 256 | params: { | 241 | params: { |
| 257 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 242 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 258 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 243 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 259 | }, | 244 | }, |
| 260 | }); | 245 | }); |
| 261 | }, | 246 | }, |
| 262 | goBack() { | 247 | goBack() { |
| 263 | this.currentSlideIndex--; | 248 | this.currentSlideIndex--; |
| 264 | this.$router.push({ | 249 | this.$router.push({ |
| 265 | name: this.allSlide[this.currentSlideIndex].ur, | 250 | name: this.allSlide[this.currentSlideIndex].ur, |
| 266 | params: { | 251 | params: { |
| 267 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 252 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 268 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 253 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 269 | }, | 254 | }, |
| 270 | }); | 255 | }); |
| 271 | }, | 256 | }, |
| 272 | 257 | ||
| 273 | getCaseStudies() { | 258 | getCaseStudies() { |
| 274 | var userdata = localStorage.getItem("spotlight_usertoken"); | 259 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 275 | if (userdata) { | 260 | if (userdata) { |
| 276 | userdata = JSON.parse(userdata); | 261 | userdata = JSON.parse(userdata); |
| 277 | axios | 262 | axios |
| 278 | .get("/caseStudy/all", { | 263 | .get("/caseStudy/all", { |
| 279 | headers: { | 264 | headers: { |
| 280 | Authorization: "Bearer " + userdata.token, | 265 | Authorization: "Bearer " + userdata.token, |
| 281 | }, | 266 | }, |
| 282 | }) | 267 | }) |
| 283 | .then((response) => { | 268 | .then((response) => { |
| 284 | console.log(response.data.data.caseStudies); | 269 | console.log(response.data.data.caseStudies); |
| 285 | this.caseStudies = response.data.data.caseStudies; | 270 | this.caseStudies = response.data.data.caseStudies; |
| 286 | }) | 271 | }) |
| 287 | .catch((error) => console.log(error)); | 272 | .catch((error) => console.log(error)); |
| 288 | } | 273 | } |
| 289 | }, | 274 | }, |
| 290 | 275 | ||
| 291 | getRating() { | 276 | getRating() { |
| 292 | var userdata = localStorage.getItem("spotlight_usertoken"); | 277 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 293 | if (userdata) { | 278 | if (userdata) { |
| 294 | userdata = JSON.parse(userdata); | 279 | userdata = JSON.parse(userdata); |
| 295 | axios | 280 | axios |
| 296 | .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { | 281 | .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { |
| 297 | headers: { | 282 | headers: { |
| 298 | Authorization: "Bearer " + userdata.token, | 283 | Authorization: "Bearer " + userdata.token, |
| 299 | }, | 284 | }, |
| 300 | }) | 285 | }) |
| 301 | .then((response) => { | 286 | .then((response) => { |
| 302 | this.rating = response.data.data.Avgrating; | 287 | this.rating = response.data.data.Avgrating; |
| 303 | }) | 288 | }) |
| 304 | .catch((error) => console.log(error)); | 289 | .catch((error) => console.log(error)); |
| 305 | } | 290 | } |
| 306 | }, | 291 | }, |
| 307 | updateRating() { | 292 | updateRating() { |
| 308 | var userdata = localStorage.getItem("spotlight_usertoken"); | 293 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 309 | if (userdata) { | 294 | if (userdata) { |
| 310 | userdata = JSON.parse(userdata); | 295 | userdata = JSON.parse(userdata); |
| 311 | var obj = { | 296 | var obj = { |
| 312 | "caseStudyId":this.$route.params.caseStudyId, | 297 | "caseStudyId":this.$route.params.caseStudyId, |
| 313 | "rating":this.rating | 298 | "rating":this.rating |
| 314 | } | 299 | } |
| 315 | axios | 300 | axios |
| 316 | .post("/caseStudy/rating",obj, { | 301 | .post("/caseStudy/rating",obj, { |
| 317 | headers: { | 302 | headers: { |
| 318 | Authorization: "Bearer " + userdata.token, | 303 | Authorization: "Bearer " + userdata.token, |
| 319 | }, | 304 | }, |
| 320 | }) | 305 | }) |
| 321 | .then((response) => { | 306 | .then((response) => { |
| 322 | console.log("response",response) | 307 | console.log("response",response) |
| 323 | // this.rating = response.data.data.Avgrating; | 308 | // this.rating = response.data.data.Avgrating; |
| 324 | }) | 309 | }) |
| 325 | .catch((error) => console.log(error)); | 310 | .catch((error) => console.log(error)); |
| 326 | } | 311 | } |
| 327 | }, | 312 | }, |
| 328 | goToLogin() { | 313 | goToLogin() { |
| 329 | this.$router.push("/login"); | 314 | this.$router.push("/login"); |
| 330 | }, | 315 | }, |
| 331 | goToSignUp() { | 316 | goToSignUp() { |
| 332 | this.$router.push("/"); | 317 | this.$router.push("/"); |
| 333 | }, | 318 | }, |
| 334 | goToProfile() { | 319 | goToProfile() { |
| 335 | this.$router.push("/profile"); | 320 | this.$router.push("/profile"); |
| 336 | }, | 321 | }, |
| 337 | }, | 322 | }, |
| 338 | }; | 323 | }; |
| 339 | </script> | 324 | </script> |
| 340 | <style> | 325 | <style> |
| 341 | .vue-star-rating-rating-text[data-v-fde73a0c] { | 326 | .vue-star-rating-rating-text[data-v-fde73a0c] { |
| 342 | margin-left: 7px; | 327 | margin-left: 7px; |