viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 0ad3ed4de81376279db1fcfe6b744a60c4821197

Authored by Digvijay Singh
1 parent 97338adf3d
Exists in admin

adin panel changes

Showing 8 changed files with 865 additions and 554 deletions   Show diff stats
config/dev.env.js
Diff comments   View file @0ad3ed4
... ... @@ -7,7 +7,7 @@ module.exports = merge(prodEnv, {
7 7 // APIurl: '"https://cors-anywhere.herokuapp.com/https://www.gigsfor.me/_functions"',
8 8 // APIurl: '"https://stg-api.gigsfor.me/api"',
9 9 APIurl: '"https://stg-api.gigsfor.me/api"',
10   - siteUrl: '"http://localhost:8080"',
  10 + siteUrl: '"http://localhost:8081"',
11 11 imageUrl: '"https://stg-api.gigsfor.me/"',
12 12 fileUploadKey: '"AYqgvDoo4RyBC0STV6og2z"',
13 13 landbotUrl: '"https://landbot.io/u/H-347617-SIJESECF8DSSQ06L/index.html"',
... ...
... ... @@ -14,7 +14,7 @@ module.exports = {
14 14  
15 15 // Various Dev Server settings
16 16 host: 'localhost', // can be overwritten by process.env.HOST
17   - port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  17 + port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 18 autoOpenBrowser: false,
19 19 errorOverlay: true,
20 20 notifyOnErrors: true,
... ...
No preview for this file type
src/assets/css/custom.css
Diff comments   View file @0ad3ed4
... ... @@ -1187,7 +1187,24 @@ color: #514DA7;opacity:1;
1187 1187 .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; }
1188 1188 .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block;
1189 1189 float: right;}
1190   - .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; right: 0; top: 0px; z-index: 50;}
  1190 + .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50;
  1191 + transition-property: right;
  1192 + -webkit-transition-property: right;
  1193 + -moz-transition-property: right;
  1194 + -o-transition-property: right;
  1195 +
  1196 + transition-duration: 0.3s;
  1197 + -webkit-transition-duration: 0.3s;
  1198 + -moz-transition-duration: 0.3s;
  1199 + -o-transition-duration: 0.3s;
  1200 +
  1201 + transition-timing-function: linear;
  1202 + -webkit-transition-timing-function: linear;
  1203 + -moz-transition-timing-function: linear;
  1204 + -o-transition-timing-function: linear;
  1205 + right: -500px;
  1206 +
  1207 +}
1191 1208 .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;}
1192 1209 .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;}
1193 1210 .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;}
... ... @@ -1290,4 +1307,27 @@ box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22);
1290 1307 button:focus{ border:0px; outline: none;}
1291 1308 .short_by{left: -100px !important;}
1292 1309 input:focus{ outline: none;}
1293   -.comments-footer textarea:focus{ outline: none;}
1294 1310 \ No newline at end of file
  1311 +.comments-footer textarea:focus{ outline: none;}
  1312 +.close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;}
  1313 +.close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;}
  1314 +.close_chat_bx:hover{ background-color: #ccc;}
  1315 +/* chat box close */
  1316 +.cht_close{
  1317 + transition-property: right;
  1318 + -webkit-transition-property: right;
  1319 + -moz-transition-property: right;
  1320 + -o-transition-property: right;
  1321 +
  1322 + transition-duration: 0.3s;
  1323 + -webkit-transition-duration: 0.3s;
  1324 + -moz-transition-duration: 0.3s;
  1325 + -o-transition-duration: 0.3s;
  1326 +
  1327 + transition-timing-function: linear;
  1328 + -webkit-transition-timing-function: linear;
  1329 + -moz-transition-timing-function: linear;
  1330 + -o-transition-timing-function: linear;
  1331 + right: 0px;
  1332 +}
  1333 +
  1334 +
1295 1335 \ No newline at end of file
... ...
src/assets/images/close.png
Diff comments   View file @0ad3ed4

195 Bytes
src/components/LandingPage.vue
Diff comments   View file @0ad3ed4
... ... @@ -56,21 +56,7 @@
56 56 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
57 57 <div class="form-layout signup-frm-spc">
58 58 <form>
59   - <h5>LogIn using</h5>
60   - <div class="social-login">
61   - <ul>
62   - <li>
63   - <a @click="login"><img src="../assets/images/google.svg" /></a>
64   - </li>
65   - <li>
66   - <a @click="login"><img src="../assets/images/linkdin.svg" /></a>
67   - </li>
68   - <li>
69   - <a @click="login"><img src="../assets/images/twitter.svg" /></a>
70   - </li>
71   - </ul>
72   - </div>
73   - <h5>or LogIn with email</h5>
  59 + <h5> LogIn with email</h5>
74 60 <div class="fill-form">
75 61 <label for="inputEmail" class="sr-only">Email address</label>
76 62 <input
... ... @@ -92,10 +78,6 @@
92 78 <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="loginWIthEmail">
93 79 <img src="../assets/images/key.svg" /> Log In to your account
94 80 </a>
95   - <p class="forget-pass light-font-weight">
96   - Forgot Password? <a @click="goToReset">Reset</a>
97   - </p>
98   - <h3 class="ft-normal">Don’t have an account? <a @click="goToSignUp">SignUp</a></h3>
99 81 </div>
100 82 </form>
101 83 </div>
... ... @@ -124,23 +106,13 @@ export default {
124 106 };
125 107 },
126 108 mounted() {
127   - this.$auth.logout();
128 109 localStorage.removeItem("spotlight_usertoken");
129 110 localStorage.removeItem("spotlight_email");
130 111 },
131 112 methods: {
132   - login() {
133   - this.$auth.loginWithRedirect();
134   - },
135   - goToSignUp(){
136   - this.$router.push("/signup");
137   - },
138   - goToReset() {
139   - this.$router.push("/reset");
140   - },
141 113 loginWIthEmail(){
142 114 axios
143   - .post("/login", this.userData)
  115 + .post("/superAdmin/login", this.userData)
144 116 .then((response) => {
145 117 console.log("login- response",response)
146 118 this.$toaster.success(response.data.message)
... ...
src/components/Profile.vue
Diff comments   View file @0ad3ed4
1 1 <template>
2 2 <main class="landing-page">
3 3 <!-- profile -->
4   - <div class="popup-wrp" style="display: none">
5   - <div class="overlay" @click="hideDialog"></div>
6   - <div class="popup-set" id="add-profile" style="display: none">
7   - <div class="popup-header">
8   - <div class="user-photo common_color">
9   - <img src="../assets/images/m-user.svg" />
10   - </div>
11   - <!-- header user -->
12   -
13   - <ul>
14   - <li>
15   - <a href="#"
16   - ><img src="../assets/images/replace.svg" /><span
17   - >Replace Avatar</span
18   - ></a
19   - >
20   - </li>
21   - <li>
22   - <a href="#"
23   - ><img src="../assets/images/randomise.svg" /><span
24   - >Randomise Avatar</span
25   - ></a
26   - >
27   - </li>
28   - </ul>
29   - </div>
30   - <!-- header -->
31   - <div class="popup-body">
32   - <form class="popup-forms">
33   - <div class="row">
34   - <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
35   - <div class="form-group floating-label">
36   - <input
37   - type="text"
38   - class="form-control"
39   - v-model="userData.firstName"
40   - placeholder=" "
41   - id="fname"
42   - />
43   - <label for="fname">First Name</label>
44   - </div>
45   - </div>
46   - <!-- input -->
47   - <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
48   - <div class="form-group floating-label">
49   - <input
50   - type="text"
51   - class="form-control"
52   - value=""
53   - placeholder=" "
54   - id="lname"
55   - v-model="userData.lastName"
56   - />
57   - <label for="lname" class="lname">Last Name</label>
58   - </div>
59   - </div>
60   - <!-- input -->
61   - <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
62   - <div class="form-group floating-label">
63   - <input
64   - type="text"
65   - class="form-control"
66   - value=""
67   - v-model="userData.designation"
68   - placeholder=" "
69   - id="designation"
70   - />
71   - <label for="designation">Designation</label>
72   - </div>
73   - </div>
74   - <!-- input -->
75   - <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
76   - <div class="form-group floating-label">
77   - <input
78   - type="text"
79   - class="form-control"
80   - v-model="userData.organisation"
81   - id="company"
82   - placeholder=" "
83   - />
84   - <label for="company">Company</label>
85   - </div>
86   - </div>
87   - <!-- input -->
88   - <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
89   - <div class="form-group floating-label">
90   - <textarea
91   - type="text"
92   - class="form-control"
93   - value=""
94   - v-model="userData.bio"
95   - id="yourself"
96   - placeholder=" "
97   - ></textarea>
98   - <label for="yourself"
99   - >Tell others a little about yourself</label
100   - >
101   - </div>
102   - </div>
103   - <!-- input -->
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>
106   -
107   - <ul class="interests">
108   - <li v-for="(interest, i) in userData.interests" :key="i">
109   - <span>{{ interest }}</span>
110   - <a
111   - href="javascript:void(0);"
112   - @click="removeInterest(i)"
113   - class="cat-minus"
114   - ><img src="../assets/images/minus.svg"
115   - /></a>
116   - </li>
117   - <li>
118   - <input
119   - class=""
120   - placeholder="Add interest"
121   - v-model="interestName"
122   - />
123   - <a href="javascript:void(0);" @click="addInterest()"
124   - ><img src="../assets/images/plus-circle.svg"
125   - /></a>
126   - </li>
127   - </ul>
128   - </div>
129   - <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
130   - <p class="things">Choose Background color</p>
131   -
132   - <ul class="colors">
133   - <li>
134   - <a
135   - href="javascript:void(0);"
136   - id="#C4C4C4"
137   - class="silver"
138   - @click="changeColor('#C4C4C4')"
139   - ></a>
140   - </li>
141   - <li>
142   - <a
143   - href="javascript:void(0);"
144   - id="#FFF6D7"
145   - class="milk-punch"
146   - @click="changeColor('#FFF6D7')"
147   - ></a>
148   - </li>
149   - <li>
150   - <a
151   - href="javascript:void(0);"
152   - id="#BDDBFF"
153   - class="french-pass"
154   - @click="changeColor('#BDDBFF')"
155   - ></a>
156   - </li>
157   - <li>
158   - <a
159   - href="javascript:void(0);"
160   - id="#C0FAFE"
161   - class="cyan-french-pass"
162   - @click="changeColor('#C0FAFE')"
163   - ></a>
164   - </li>
165   - <li>
166   - <a
167   - href="javascript:void(0);"
168   - id="#FFDBDC"
169   - class="cosmos"
170   - @click="changeColor('#FFDBDC')"
171   - ></a>
172   - </li>
173   - <li>
174   - <a
175   - href="javascript:void(0);"
176   - id="#FEE6AC"
177   - class="cape-Honey"
178   - @click="changeColor('#FEE6AC')"
179   - ></a>
180   - </li>
181   - <li>
182   - <a
183   - href="javascript:void(0);"
184   - id="#E5DFF0"
185   - class="snuff"
186   - @click="changeColor('#E5DFF0')"
187   - ></a>
188   - </li>
189   - <li>
190   - <a
191   - href="javascript:void(0);"
192   - id="#DFE7EF"
193   - class="catskillWhite"
194   - @click="changeColor('#DFE7EF')"
195   - ></a>
196   - </li>
197   - <li>
198   - <a
199   - href="javascript:void(0);"
200   - id="#FFF"
201   - class="white"
202   - @click="changeColor('#FFF')"
203   - ></a>
204   - </li>
205   - </ul>
206   - </div>
207   - <div class="col-lg-12 mt-50">
208   - <p class="notifications">
209   - Recieve notifications when you recieve a comment/ Upvote
210   - </p>
211   - <div class="switch-bt-wrp">
212   - <label class="switch-btn">
213   - <input type="checkbox" class="toggle-btn" />
214   - <span class="rounded-toggle"></span>
215   - </label>
216   - <span class="onoff">on/off</span>
217   - </div>
218   - </div>
219   - <div class="col-lg-12">
220   - <p class="add-socail-ch">
221   - Add your social Channels <span></span>
222   - </p>
223   - </div>
224   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
225   - <div class="form-group floating-label">
226   - <select class="form-group" >
227   - <option value="Facebook">Facebook</option>
228   - </select>
229   - <span class="select-arrow"
230   - ><img src="../assets/images/chevron-down.svg"
231   - /></span>
232   - </div>
233   - </div>
234   - <!-- input -->
235   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
236   - <div class="form-group floating-label">
237   - <input
238   - type="text"
239   - class="form-control"
240   - value=""
241   - placeholder="Paste your profile URL here"
242   - id=""
243   - v-model="userData.socialMediaProfiles.facebook"
244   - />
245   - </div>
246   - </div>
247   - <!-- input -->
248   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
249   - <div class="form-group floating-label">
250   - <select class="form-group" >
251   - <option value="Linkedin">Linkedin</option>
252   - </select>
253   - <span class="select-arrow"
254   - ><img src="../assets/images/chevron-down.svg"
255   - /></span>
256   - </div>
257   - </div>
258   - <!-- input -->
259   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
260   - <div class="form-group floating-label">
261   - <input
262   - type="text"
263   - class="form-control"
264   - value=""
265   - placeholder="Paste your profile URL here"
266   - id=""
267   - v-model="userData.socialMediaProfiles.linkedin"
268   - />
269   - </div>
270   - </div>
271   - <!-- input -->
272   -
273   - <!-- input -->
274   - <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
275   - <div class="form-group floating-label">
276   - <select class="form-group">
277   - <option @click="addSocialLink">Add another</option>
278   - </select>
279   - <span class="select-arrow"
280   - ><img src="../assets/images/chevron-down.svg"
281   - /></span>
282   - </div>
283   - </div> -->
284   - <!-- input -->
285   - </div>
286   - <a href="javascript:void(0);" @click="closeDialog" class="next-bt"
287   - >Save</a
288   - >
289   - </form>
290   - </div>
291   - <div class="clearfix"></div>
292   - </div>
293   - <!-- add profile -->
294   - </div>
295   - <!-- profile -->
296   - <div class="container-fluid inner-wrp">
  4 + <div class="container-fluid inner-wrp" style="background: transparent">
297 5 <nav class="navbar navbar-expand-sm spotLight-nav">
298 6 <a class="navbar-brand" href="#"
299 7 ><img src="../assets/images/logo.png"
... ... @@ -315,158 +23,378 @@
315 23 <div class="collapse navbar-collapse" id="navbarsExample03">
316 24 <ul class="navbar-nav mr-auto">
317 25 <li class="nav-item active">
318   - <a class="nav-link" href="#">About</a>
319   - </li>
320   - <li class="nav-item">
321   - <a class="nav-link" href="#">Masterclass</a>
322   - </li>
323   - <li class="nav-item">
324   - <a class="nav-link" href="#">Stories</a>
325   - </li>
326   - <li class="nav-item">
327   - <a class="nav-link" href="#">Library</a>
  26 + <a class="nav-link">Create Case Study</a>
328 27 </li>
329 28 </ul>
330 29 </div>
331   - <div class="user-profile-photo common_color">
332   - <a href="javascript:void(0);" @click="userprofileshowDialog"
333   - ><img src="../assets/images/m-user.svg"
334   - /></a>
335   - <div class="sub-menu-user" id="userprofileshow" style="display: none">
336   - <ul>
337   - <li><a href="javascript:void(0);" @click="addProfileDialog">Edit Profile</a></li>
338   - <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
339   - </ul>
340   - </div>
  30 + <div class="">
  31 + <a href="javascript:void(0);" @click="logout">Log Out </a>
341 32 </div>
342 33 </nav>
343 34 <!-- menu wrapper -->
344 35 <div class="row profile-tab-spc-top">
345   - <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
346   - <div class="inner-profile-ps common_color">
347   - <img src="../assets/images/m-user.svg" class="" />
  36 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  37 + <div class="user-profile">
  38 + <div class="form-group floating-label">
  39 + <select
  40 + class="form-control"
  41 + v-model="userData"
  42 + v-on:change="selectUser(userData)"
  43 + >
  44 + <option value="null">Select User</option>
  45 + <option v-for="(user, i) in userList" :key="i" :value="i">
  46 + {{ user.name }} ({{ user.email }})
  47 + </option>
  48 + </select>
  49 + </div>
348 50 </div>
349   - <!-- user profile -->
  51 + </div>
  52 + </div>
350 53  
351   - <div class="user-profile">
352   - <h1>
353   - {{ userData.firstName }} {{ userData.lastName }}
354   - <a href="#" class="tags">{{ userData.role }}</a>
355   - </h1>
356   - <ul class="joined-info">
357   - <li>
358   - <a href="javascript:void(0);" @click="addProfileDialog">Add your work</a>
359   - <img src="../assets/images/u-info-icon.png" /> <span></span>
360   - </li>
  54 + <div class="row">
  55 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  56 + <ul class="navbar-nav mr-auto">
  57 + <li class="nav-item active">
  58 + <h5 class="nav-link">Intro Screen Record</h5>
  59 + </li>
  60 + </ul>
  61 + </div>
  62 + </div>
  63 + <!-- 1st row -->
  64 + <div class="row">
  65 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  66 + <div class="form-group floating-label">
  67 + <label for="lname" class="lname">Case Study Name</label>
  68 + <input
  69 + type="text"
  70 + class="form-control"
  71 + value=""
  72 + placeholder=" "
  73 + v-model="caseStudy.caseStudyDetails.intro.name"
  74 + />
  75 + </div>
  76 + </div>
  77 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  78 + <div class="form-group floating-label">
  79 + <label for="lname" class="lname">App Name</label>
  80 + <input
  81 + type="text"
  82 + class="form-control"
  83 + value=""
  84 + placeholder=" "
  85 + v-model="caseStudy.caseStudyDetails.intro.app"
  86 + />
  87 + </div>
  88 + </div>
  89 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  90 + <div class="form-group floating-label">
  91 + <label for="lname" class="lname">Focus</label>
  92 + <input
  93 + type="text"
  94 + class="form-control"
  95 + value=""
  96 + placeholder=" "
  97 + v-model="caseStudy.caseStudyDetails.intro.focus"
  98 + />
  99 + </div>
  100 + </div>
  101 + </div>
  102 + <!-- 1st row end -->
  103 +
  104 + <!-- 2nd row -->
  105 + <div class="row">
  106 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  107 + <div class="form-group floating-label">
  108 + <label for="lname" class="lname">Case Study Type</label>
  109 + <select
  110 + class="form-control"
  111 + v-model="caseStudy.caseStudyDetails.intro.type"
  112 + >
  113 + <option value="null">Select Case Type</option>
  114 + <option value="Retake">Retake</option>
  115 + <option value="Behind-the-scenes">Behind-the-scenes</option>
  116 + <option value="Critique">Critique</option>
  117 + <option value="Juxtapose">Juxtapose</option>
  118 + </select>
  119 + </div>
  120 + </div>
  121 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  122 + <div class="form-group floating-label">
  123 + <label for="lname" class="lname">Platform</label>
  124 + <input
  125 + type="text"
  126 + class="form-control"
  127 + value=""
  128 + placeholder=" "
  129 + v-model="caseStudy.caseStudyDetails.intro.platForm"
  130 + />
  131 + </div>
  132 + </div>
  133 +
  134 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  135 + <div class="form-group floating-label">
  136 + <label for="lname" class="lname"> Insight Logo</label>
  137 + <input
  138 + @change="createImage('logo')"
  139 + type="file"
  140 + name="photso"
  141 + id="logo"
  142 + accept="image/*"
  143 + />
  144 + </div>
  145 + </div>
  146 + </div>
  147 + <!-- 2nd row -->
  148 + <!-- 3rd row -->
  149 + <div class="row">
  150 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  151 + <div class="form-group floating-label">
  152 + <label for="lname" class="lname"></label>
  153 + <ul class="interests">
361 154 <li>
362   - <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span>
  155 + <input
  156 + class=""
  157 + placeholder="Add Focus Areas"
  158 + v-model="focusName"
  159 + />
  160 + <a href="javascript:void(0);" @click="addInsight('focus')"
  161 + ><img src="../assets/images/plus-circle.svg"
  162 + /></a>
363 163 </li>
364   - <li>
365   - <a href="#"
366   - >Joined on
367   - {{ moment(userData.createdAt).format("MMM YYYY") }}</a
368   - >
  164 +
  165 + <li
  166 + v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas"
  167 + :key="i"
  168 + >
  169 + <span>{{ interest }}</span>
  170 + <a
  171 + href="javascript:void(0);"
  172 + @click="removeInsight(i, 'focus')"
  173 + class="cat-minus"
  174 + ><img src="../assets/images/minus.svg"
  175 + /></a>
369 176 </li>
370 177 </ul>
371   - <p>{{ userData.bio }}</p>
372 178 </div>
373 179 </div>
374   - <!-- user profile -->
375   - <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
376   - <div class="list-style-group" v-if="userData.awards">
377   - <p>Awards</p>
378   - <ul class="list-style">
  180 +
  181 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  182 + <div class="form-group floating-label">
  183 + <label for="lname" class="lname"></label>
  184 + <ul class="interests">
379 185 <li>
380   - <a href="javascript:void(0);"><img src="../assets/images/icon-1.png" /></a>
  186 + <input
  187 + class=""
  188 + placeholder="Add Insight Tags"
  189 + v-model="insightName"
  190 + />
  191 + <a href="javascript:void(0);" @click="addInsight('insight')"
  192 + ><img src="../assets/images/plus-circle.svg"
  193 + /></a>
  194 + </li>
  195 +
  196 + <li
  197 + v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags"
  198 + :key="i"
  199 + >
  200 + <span>{{ interest }}</span>
  201 + <a
  202 + href="javascript:void(0);"
  203 + @click="removeInsight(i, 'insight')"
  204 + class="cat-minus"
  205 + ><img src="../assets/images/minus.svg"
  206 + /></a>
381 207 </li>
382 208 </ul>
383 209 </div>
384   - <!-- list style -->
385 210 </div>
386 211 </div>
387   - <div class="clearfix"></div>
388   - <div class="row top-brd profile-tab-spc-top">
389   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
390   - <ul class="profile-tab">
391   - <li class="active c-0">
392   - <a href="javascript:void(0);" @click="caseDialog"
393   - >Case-studies(0)</a
394   - >
395   - </li>
396   - <li class="rp-all">
397   - <a href="javascript:void(0);" @click="repliesDialog"
398   - >Comments/Replies(1)</a
399   - >
  212 + <!-- 3rd row end -->
  213 +
  214 + <!-- outdor -->
  215 + <div class="row profile-tab-spc-top">
  216 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  217 + <ul class="navbar-nav mr-auto">
  218 + <li class="nav-item active">
  219 + <h5 class="nav-link">Outro Screen Record</h5>
400 220 </li>
401 221 </ul>
402 222 </div>
  223 + </div>
  224 +
  225 + <!-- 1st row -->
  226 + <div class="row">
403 227 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
404   - <ul class="social-connects">
405   - <li><span>Follow</span></li>
406   - <li>
407   - <a href="javascript:void(0);" @click="addProfileDialog" class="active"
408   - ><img src="../assets/images/plus.png"
409   - /></a>
410   - <span class="connect-social-channel"
411   - >Connect your social channels</span
412   - >
  228 + <div class="form-group floating-label">
  229 + <label for="lname" class="lname">Designer Name</label>
  230 + <input
  231 + type="text"
  232 + class="form-control"
  233 + value=""
  234 + placeholder=" "
  235 + v-model="caseStudy.caseStudyDetails.outro.designer"
  236 + />
  237 + </div>
  238 + </div>
  239 +
  240 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  241 + <div class="form-group floating-label">
  242 + <label for="lname" class="lname">Illustrations Name</label>
  243 + <input
  244 + type="text"
  245 + class="form-control"
  246 + value=""
  247 + placeholder=" "
  248 + v-model="caseStudy.caseStudyDetails.outro.illustrations"
  249 + />
  250 + </div>
  251 + </div>
  252 +
  253 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  254 + <div class="form-group floating-label">
  255 + <label for="lname" class="lname"> Author Image</label>
  256 + <input
  257 + @change="createImage('outdor')"
  258 + type="file"
  259 + name="photos"
  260 + id="outdor"
  261 + accept="image/*"
  262 + />
  263 + </div>
  264 + </div>
  265 + </div>
  266 + <!-- 1st row -->
  267 + <!-- outdoor ends -->
  268 +
  269 + <!-- outdor -->
  270 + <div class="row profile-tab-spc-top">
  271 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  272 + <ul class="navbar-nav mr-auto">
  273 + <li class="nav-item active">
  274 + <h5 class="nav-link">Add SLides</h5>
413 275 </li>
414 276 </ul>
415 277 </div>
416 278 </div>
417   - <!-- tab style -->
418   - <div class="profile-data-wrp">
419   - <div class="container-fluid data-wrp" id="case-study-0">
420   - <div class="row">
421   - <div class="col-lg-12">
422   - <div class="profile-buttons">
  279 +
  280 + <!-- 1st row -->
  281 + <div class="row">
  282 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  283 + <div class="form-group floating-label">
  284 + <label for="lname" class="lname">Slides Name</label>
  285 + <select
  286 + class="form-control"
  287 + v-model="slideId"
  288 + v-on:change="slideSelected(slideId)"
  289 + >
  290 + <option value="null">Select Slide</option>
  291 + <option v-for="(template, i) in templateList" :key="i" :value="i">
  292 + {{ template._id }}
  293 + </option>
  294 + </select>
  295 + </div>
  296 + </div>
  297 + </div>
  298 + <!-- 1st row -->
  299 +
  300 + <!-- case study slides-->
  301 + <div
  302 + class="row profile-tab-spc-top"
  303 + v-for="(slide, i) in caseStudy.slides"
  304 + :key="i"
  305 + >
  306 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  307 + <ul class="navbar-nav mr-auto">
  308 + <li class="nav-item active">
  309 + <p class="nav-link">
  310 + <b>Screen {{ i + 1 }}</b>
423 311 <a
424   - href="javascript:void(0);"
425   - class="profile-sm-bt center-and-spc bt-active"
426   - @click="addProfileDialog"
427   - >Update Profile</a
  312 + style="cursor: pointer; color: red; font-size: 0.8rem"
  313 + @click="removeSlide(i)"
428 314 >
429   - <a href="#" class="profile-md-bt center-and-spc"
430   - >Explore Case-studies</a
  315 + Remove</a
431 316 >
432   - <a href="#" class="profile-lg-bt">Publish Your Case Study</a>
433   - </div>
  317 + </p>
  318 + </li>
  319 + </ul>
  320 + </div>
  321 +
  322 + <div class="row">
  323 + <div
  324 + class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
  325 + v-for="(field, j) in slide.metaData.fields"
  326 + :key="j"
  327 + >
  328 + <div
  329 + class="form-group floating-label"
  330 + v-if="field.fieldType == 'text'"
  331 + >
  332 + <label for="lname" class="lname">{{ field.displayName }}</label>
  333 + <input
  334 + type="text"
  335 + class="form-control"
  336 + value=""
  337 + placeholder=" "
  338 + v-model="field.fieldValue"
  339 + />
  340 + </div>
  341 +
  342 + <div
  343 + class="form-group floating-label"
  344 + v-if="field.fieldType == 'image'"
  345 + >
  346 + <label for="lname" class="lname"> {{ field.displayName }}</label>
  347 + <input
  348 + @change="fieldcreateImage(i, j)"
  349 + type="file"
  350 + name="photo"
  351 + :id="i + '' + j"
  352 + accept="image/*"
  353 + />
434 354 </div>
435 355 </div>
436 356 </div>
437   - <!-- case study 0 -->
438   - <div
439   - class="container-fluid data-wrp"
440   - id="all-replies"
441   - style="display: none"
442   - >
443   - <div class="row">
444   - <div class="replies col-md-12">
445   - <div class="replies-wrp">
446   - <h1>PhonePe vs GooglePay <span>Critique</span></h1>
447   - <ul class="joined-info">
448   - <li><a href="#">37D</a> <span></span></li>
449   - <li><img src="../assets/images/heart.png" /></li>
450   - <li><a href="#"> 4</a></li>
451   - <li class="comment-spc">
452   - <img src="../assets/images/comment.svg" />
453   - </li>
454   - <li><a href="#"> 6</a></li>
455   - </ul>
456   - <p>
457   - I wonder what the difference between “<strong>
458   - Assistant</strong
459   - >” and “<strong>Pickup and Drop</strong>” are. If they are the
460   - same, there are two “call to actions” for the same workflow
461   - </p>
462   - </div>
463   - <!-- replies wrapper -->
  357 +
  358 + <div class="row">
  359 + <div
  360 + class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
  361 + v-for="(cum, j) in slide.metaData.comments"
  362 + :key="j"
  363 + >
  364 + <div class="form-group floating-label">
  365 + <label for="lname" class="lname">Comment Box {{ j + 1 }}</label>
  366 + <input
  367 + type="text"
  368 + class="form-control"
  369 + value=""
  370 + placeholder=" "
  371 + v-model="cum.comment"
  372 + />
464 373 </div>
465   - <!-- all card wrpper -->
466 374 </div>
467 375 </div>
468   - <!-- all Relpies -->
469 376 </div>
  377 +
  378 + <!-- 1st row end -->
  379 + <!-- case study ends -->
  380 + <div class="clearfix"></div>
  381 +
  382 + <!-- users land image -->
  383 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  384 + <div class="form-layout signup-frm-spc">
  385 + <form>
  386 + <a
  387 + href="javascript:void(0);"
  388 + class="btn btn-lg sb-button"
  389 + type="submit"
  390 + @click="submit"
  391 + >
  392 + <img src="../assets/images/key.svg" /> submit
  393 + </a>
  394 + </form>
  395 + </div>
  396 + </div>
  397 +
470 398 <!-- data wrp -->
471 399 <!-- body wrapper -->
472 400 </div>
... ... @@ -485,126 +413,175 @@ export default {
485 413 data() {
486 414 return {
487 415 loggedinFlag: false,
  416 + userData: null,
488 417 usertoken: null,
489   - userData: {},
490   - interestName: null,
491   - oldId: null,
492   - socialLink:null,
493   - currentSocialLinkName:null,
  418 + insightName: null,
  419 + focusName: null,
  420 + slideId: null,
  421 + userList: [],
  422 + templateList: [],
  423 + caseStudy: {
  424 + caseStudyDetails: {
  425 + userId: [],
  426 + intro: {
  427 + name: null,
  428 + logoURL: null,
  429 + app: null,
  430 + type: null,
  431 + focus: null,
  432 + readTime: null,
  433 + platForm: null,
  434 + authors: [],
  435 + },
  436 + outro: {
  437 + authorImage: [],
  438 + authors: [],
  439 + designer: null,
  440 + illustrations: null,
  441 + },
  442 + insightTags: [],
  443 + focusAreas: [],
  444 + },
  445 + slides: [],
  446 + },
494 447 };
495 448 },
496 449 mounted() {
497   - this.userData = {};
498   - this.socialLink = [];
499   - this.userData.interests = [];
500   - this.userData.socialMediaProfiles = {};
501   - this.userData.socialMediaProfiles.facebook = null;
502   - this.userData.socialMediaProfiles.linkedin = null;
503 450 var userdata = localStorage.getItem("spotlight_usertoken");
504 451 if (userdata) {
505 452 userdata = JSON.parse(userdata);
506 453 this.usertoken = userdata.token;
507   - this.getProfile();
  454 + this.getUserList();
  455 + this.getTemplateList();
508 456 }
509 457 },
510 458 methods: {
511   - goToSignUp() {
512   - this.$router.push("/signup");
513   - },
514   - goToReset() {
515   - this.$router.push("/reset");
  459 + selectUser(i) {
  460 + this.userList[i];
  461 + this.caseStudy.caseStudyDetails.intro.authors.push(this.userList[i].name);
  462 + this.caseStudy.caseStudyDetails.outro.authors.push(this.userList[i].name);
  463 + this.caseStudy.caseStudyDetails.userId.push(this.userList[i]._id);
  464 + console.log("-", this.caseStudy);
516 465 },
  466 +
517 467 logout() {
518 468 this.$router.push("/");
519 469 },
520   - addSocialLink(obj){
521   - this.socialLink.push()
522   -
  470 + addInsight(type) {
  471 + if (type == "focus") {
  472 + this.caseStudy.caseStudyDetails.focusAreas.push(this.focusName);
  473 + this.focusName = null;
  474 + } else if (type == "insight") {
  475 + this.caseStudy.caseStudyDetails.insightTags.push(this.insightName);
  476 + this.insightName = null;
  477 + }
523 478 },
524   - addInterest() {
525   - console.log(this.userData.interests.length, "called", this.interestName);
526   - if (this.userData.interests.length <= 2) {
527   - this.userData.interests.push(this.interestName);
528   - this.interestName = null;
529   - } else {
530   - this.$toaster.info("Only 3 interest are allowed");
  479 + removeInsight(i, type) {
  480 + if (type == "focus") {
  481 + this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1);
  482 + } else if (type == "insight") {
  483 + this.caseStudy.caseStudyDetails.insightTags.splice(i, 1);
531 484 }
532 485 },
533   - removeInterest(i) {
534   - this.userData.interests.splice(i, 1);
  486 +
  487 + async slideSelected(i) {
  488 + console.log("id is", this.templateList[i]);
  489 + var slideMetadata = {};
  490 + // slideMetadata = await this.getMeatda(this.templateList[i]._id);
  491 + this.slideId = null;
  492 + // this.templateList[i].metaData = slideMetadata.metaData;
  493 + this.caseStudy.slides.push(this.templateList[i]);
  494 + console.log("this.caseStudy.slides", this.caseStudy.slides);
535 495 },
536   - assignClass() {
537   - var element = document.getElementById(this.userData.bgColor);
538   - element.classList.add("active");
539   - var cols = document.getElementsByClassName("common_color");
540   - for (var i = 0; i < cols.length; i++) {
541   - cols[i].style.backgroundColor = this.userData.bgColor;
542   - }
543   -
  496 +
  497 + removeSlide(i) {
  498 + this.caseStudy.slides.splice(i, 1);
544 499 },
545   - changeColor(clr) {
546   - console.log(this.oldId,"clr",clr);
547   - var element = document.getElementById(clr);
548   - element.classList.add("active");
549   - var removeelement = document.getElementById(this.oldId);
550   - removeelement.classList.remove("active");
551   - this.oldId = clr;
552   - var cols = document.getElementsByClassName("common_color");
553   - for (var i = 0; i < cols.length; i++) {
554   - cols[i].style.backgroundColor = clr;
555   - }
556   - this.userData.bgColor = clr;
557 500  
  501 + createImage(type) {
  502 + var that = this;
  503 + console.log(document.getElementById(type));
  504 + var file = document.getElementById(type).files[0];
  505 + console.log("file", file);
  506 + var reader = new FileReader();
  507 + reader.onload = function (e) {
  508 + console.log("e.target.result ", e.target.result);
  509 + that.uploadImage(type, e.target.result);
  510 + };
  511 + reader.onerror = function (error) {
  512 + alert(error);
  513 + };
  514 + if (file) {
  515 + reader.readAsDataURL(file);
  516 + }
558 517 },
559   - getProfile() {
  518 + uploadImage(type, base64) {
  519 + console.log("type", type);
  520 + var obj = {
  521 + image: base64,
  522 + };
560 523 axios
561   - .get("/profile", {
  524 + .post("/superAdmin/uploadImage", obj, {
562 525 headers: {
563 526 Authorization: "Bearer " + this.usertoken,
564 527 },
565 528 })
566 529 .then((response) => {
567   - this.userData = response.data.data;
568   - if(!this.userData.socialMediaProfiles){
569   - this.userData.socialMediaProfiles = {};
  530 + if (type == "logo") {
  531 + this.caseStudy.caseStudyDetails.intro.logoURL = response.data.data;
  532 + } else if (type == "outdor") {
  533 + this.caseStudy.caseStudyDetails.outro.authorImage = [];
  534 + this.caseStudy.caseStudyDetails.outro.authorImage.push(
  535 + response.data.data
  536 + );
570 537 }
571   - this.oldId = this.userData.bgColor;
572   - console.log(this.oldId,"this.userData.",this.userData.bgColor);
573 538  
574   - this.assignClass();
575 539 console.log(response.data.data);
  540 + console.log(this.caseStudy);
576 541 })
577   - .catch((error) => console.log(error));
  542 + .catch((error) => {
  543 + if (error.response) {
  544 + this.$toaster.error(error.response.data.message);
  545 + }
  546 + });
578 547 },
579   - saveProfile() {
580   - var obj = {};
581   - this.userData.name =
582   - this.userData.firstName + " " + this.userData.lastName;
583   - obj = Object.assign(obj, this.userData);
584   - // if(!obj.socialMediaProfiles){
585   - // obj.socialMediaProfiles = {};
586   - // }
587   - delete obj.createdAt;
588   - delete obj.email;
589   - delete obj.role;
590   - delete obj.verified;
591   - delete obj.updatedAt;
592   - delete obj.__v;
593   - delete obj._id;
594   - delete obj.karmaPoints;
595   - delete obj.awards;
596   - delete obj.socialLogin;
  548 +
  549 + fieldcreateImage(i, j) {
  550 + console.log("i", i);
  551 + console.log("j", j);
  552 + var that = this;
  553 + var id = i + "" + j;
  554 + console.log(document.getElementById(id));
  555 + var file = document.getElementById(id).files[0];
  556 + // var file = document.querySelector("input[type=file]").files[0];
  557 + console.log("file", file);
  558 + var reader = new FileReader();
  559 + reader.onload = function (e) {
  560 + // console.log("e.target.result ",e.target.result )
  561 + that.fielduploadImage(i, j, e.target.result);
  562 + };
  563 + reader.onerror = function (error) {
  564 + alert(error);
  565 + };
  566 + if (file) {
  567 + reader.readAsDataURL(file);
  568 + }
  569 + },
  570 + fielduploadImage(i, j, base64) {
  571 + var obj = {
  572 + image: base64,
  573 + };
597 574 axios
598   - .put("/profile", obj, {
  575 + .post("/superAdmin/uploadImage", obj, {
599 576 headers: {
600 577 Authorization: "Bearer " + this.usertoken,
601 578 },
602 579 })
603 580 .then((response) => {
604   - // this.userData = response.data.data;
605   - this.$toaster.success('Profile Updated');
606   -
  581 + this.caseStudy.slides[i].metaData.fields[j].fieldValue =
  582 + response.data.data;
607 583 console.log(response.data.data);
  584 + console.log(this.caseStudy);
608 585 })
609 586 .catch((error) => {
610 587 if (error.response) {
... ... @@ -612,41 +589,180 @@ export default {
612 589 }
613 590 });
614 591 },
615   - addProfileDialog() {
616   - $(".inner-wrp").addClass("body-blur");
617   - $("#add-social-links").hide();
618   - $(".popup-wrp, #add-profile").show();
619   - },
620   - nextProfileDialog() {
621   - $("#add-profile").hide();
622   - $("#add-social-links").show();
623   - this.saveProfile();
624   - },
625   - closeDialog() {
626   - $(".popup-wrp").hide();
627   - $(".inner-wrp").removeClass("body-blur");
628   - this.saveProfile();
  592 +
  593 + getUserList() {
  594 + axios
  595 + .get("/superAdmin/users", {
  596 + headers: {
  597 + Authorization: "Bearer " + this.usertoken,
  598 + },
  599 + })
  600 + .then((response) => {
  601 + response.data.data.forEach((element) => {
  602 + if (element.name) {
  603 + this.userList.push(element);
  604 + }
  605 + });
  606 + console.log("response", this.userList);
  607 + })
  608 + .catch((error) => console.log(error));
629 609 },
630   - hideDialog() {
631   - $(".popup-wrp").hide();
632   - $(".inner-wrp").removeClass("body-blur");
  610 +
  611 + getTemplateList() {
  612 + axios
  613 + .get("/superAdmin/templates", {
  614 + headers: {
  615 + Authorization: "Bearer " + this.usertoken,
  616 + },
  617 + })
  618 + .then((response) => {
  619 + response.data.data.forEach((temp) => {
  620 + if (
  621 + temp._id != "INTRO_oqkdMOVDrwRptsdWJ6Ye" &&
  622 + temp._id != "OUTRO_oqkdMOVDrwRptsdWJ6Ye"
  623 + ) {
  624 + if (temp.bounceBoard) {
  625 + for (var i = 0; i < temp.commentBox; i++) {
  626 + temp.metaData.comments.push({
  627 + userId: null,
  628 + slideId: null,
  629 + caseStudyId: null,
  630 + comment: null,
  631 + });
  632 + }
  633 + }
  634 + this.templateList.push(temp);
  635 + }
  636 + });
  637 + console.log("templates", this.templateList);
  638 + })
  639 + .catch((error) => console.log(error));
633 640 },
634   - ///
635   - caseDialog() {
636   - $(".rp-all").removeClass("active");
637   - $(".c-0").addClass("active");
638   - $("#all-replies").hide();
639   - $("#case-study-0").show();
  641 +
  642 + submit() {
  643 + const latest = Object.create(this.caseStudy);
  644 +
  645 + var slidArray = [];
  646 + latest.slides.forEach((slides) => {
  647 + console.log("slides",slides)
  648 + var slideData = {};
  649 + slideData.templateId = slides._id;
  650 + slideData.bounceBoard = slides.bounceBoard;
  651 + slideData.insight = slides.insight;
  652 + // var comments = [];
  653 + // if (slides.bounceBoard) {
  654 + // slides.metaData.comments.forEach((element) => {
  655 + // comments.push(element.comment);
  656 + // });
  657 + // slideData.comments = comments;
  658 + // }
  659 +
  660 + slides.metaData.fields.forEach((fields_) => {
  661 + slideData[fields_.fieldName] = fields_.fieldValue;
  662 + });
  663 + slidArray.push(slideData);
  664 + // delete slides.metaData.fields;
  665 + });
  666 +
  667 + console.log("slideData", slidArray);
  668 + this.saveProfile(slidArray);
640 669 },
641   - repliesDialog() {
642   - $(".c-0").removeClass("active");
643   - $(".rp-all").addClass("active");
644   - $("#case-study-0").hide();
645   - $("#all-replies").show();
  670 +
  671 + saveProfile(slides) {
  672 + var obj = {};
  673 + obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
  674 + obj.caseStudyDetails.intro.readTime = Math.round(
  675 + slides.length / 3
  676 + ).toString();
  677 + obj.slides = slides;
  678 + axios
  679 + .post("/superAdmin/caseStudy", obj, {
  680 + headers: {
  681 + Authorization: "Bearer " + this.usertoken,
  682 + },
  683 + })
  684 + .then((response) => {
  685 + // this.userData = response.data.data;
  686 + this.$toaster.success("Case Study Created");
  687 +
  688 + console.log(response);
  689 + })
  690 + .catch((error) => {
  691 + if (error.response) {
  692 + this.$toaster.error(error.response.data.message);
  693 + }
  694 + });
646 695 },
647 696  
648   - userprofileshowDialog() {
649   - $("#userprofileshow").toggle();
  697 + async getMeatda(tempId) {
  698 + var obj = [
  699 + {
  700 + tempId: "T1_RoeMG8130Xko1DvhC3Ou",
  701 + metaData: {
  702 + fields: [
  703 + {
  704 + fieldName: "authorImage",
  705 + displayName: "Author Image",
  706 + fieldValue: null,
  707 + fieldType: "image",
  708 + },
  709 + {
  710 + fieldName: "mobileImage",
  711 + displayName: "Mobile Image",
  712 + fieldValue: null,
  713 + fieldType: "image",
  714 + },
  715 + {
  716 + fieldName: "textBox",
  717 + displayName: "Text Box",
  718 + fieldValue: null,
  719 + fieldType: "text",
  720 + },
  721 + ],
  722 + },
  723 + },
  724 + {
  725 + tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
  726 + metaData: {
  727 + fields: [
  728 + {
  729 + fieldName: "authorImage",
  730 + displayName: "Author Image",
  731 + fieldValue: null,
  732 + fieldType: "image",
  733 + },
  734 + ],
  735 + comments: [{ comment: null }, { comment: null }, { comment: null }],
  736 + },
  737 + },
  738 + {
  739 + tempId: "T3_cqNIf7tuqL4jyON63dA7",
  740 + metaData: {
  741 + fields: [
  742 + {
  743 + fieldName: "authorImage",
  744 + displayName: "Author Image",
  745 + fieldValue: null,
  746 + fieldType: "image",
  747 + },
  748 + {
  749 + fieldName: "mobileImage",
  750 + displayName: "Mobile Image",
  751 + fieldValue: null,
  752 + fieldType: "image",
  753 + },
  754 + ],
  755 + comments: [
  756 + { comment: null },
  757 + { comment: null },
  758 + { comment: null },
  759 + { comment: null },
  760 + ],
  761 + },
  762 + },
  763 + ];
  764 + var i = obj.findIndex((obj_) => obj_.tempId == tempId);
  765 + return obj[i];
650 766 },
651 767 },
652 768 };
... ...
src/components/SingleMobileScreenInsightOne.vue
Diff comments   View file @0ad3ed4
... ... @@ -15,6 +15,180 @@
15 15 </nav>
16 16 <!-- menu wrapper -->
17 17 <div class="intro-startup">
  18 + <!-- chat box -->
  19 + <div class="bounce-board-wrp" id="cht_box_close">
  20 + <div class="inner-wrp-bc">
  21 +<div class="bc-top-head">
  22 + <span class="bc-head">
  23 + <img src="../assets/images/bounce-icon.svg" /> Bounce Board
  24 + </span>
  25 + <div class="action-sort">
  26 + <span class="sort-by">SORT BY</span> <div class="btn-group">
  27 + <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  28 + BEST
  29 + </button>
  30 + <div class="dropdown-menu short_by">
  31 + <a class="dropdown-item" href="#">BEST 1</a>
  32 + <a class="dropdown-item" href="#">BEST 2</a>
  33 + <a class="dropdown-item" href="#">BEST 3</a>
  34 + </div>
  35 +</div>
  36 +<a href="javasript:void(0);" @click="chtbox_close" class="close_chat_bx"><img src="../assets/images/close.png" alt="close" /></a><!-- close -->
  37 + </div><!-- action sort -->
  38 + </div><!-- top head -->
  39 +<div class="bounce-board-body">
  40 + <ul class="bounced-user-comments">
  41 +<li class="bc_border">
  42 + <div class="lbord"></div><!-- border -->
  43 + <div class="parent-full-width parent_bg">
  44 + <div class="full-width">
  45 + <div class="b-user-head"><img src="../assets/images/b-user1.png" />
  46 + <span class="head-content">wanderingirl </span>
  47 +<ul>
  48 + <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
  49 + <li> <span></span>3days ago</li>
  50 + <li> <span class="au">Author</span></li>
  51 +</ul>
  52 +
  53 +
  54 + </div><!-- header -->
  55 + <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
  56 + <div class="joined_wrapper">
  57 + <ul class="joined-info info_bc_spc">
  58 + <li> <img src="../assets/images/purple-heart.png"> </li>
  59 + <li> <a href="#"> 4</a> </li>
  60 + <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
  61 + <li> <a href="#"> 6</a> </li>
  62 + </ul>
  63 + <div class="add_rply">
  64 + <input type="text" placeholder="Add your reply" />
  65 + </div><!-- rly form -->
  66 + </div><!-- joined wrapper -->
  67 + </div><!-- full width -->
  68 + </div><!-- parent -->
  69 + <div class="child-full-width">
  70 + <div class="full-width">
  71 + <div class="b-user-head"><img src="../assets/images/b-user1.png" />
  72 + <span class="head-content">Onenoisyboi </span>
  73 +<ul>
  74 + <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
  75 + <li> <span></span>3days ago</li>
  76 + <li> <span class="red">Mod</span></li>
  77 +</ul>
  78 +
  79 +
  80 + </div><!-- header -->
  81 + <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  82 + <div class="joined_wrapper">
  83 + <ul class="joined-info info_bc_spc">
  84 + <li> <img src="../assets/images/purple-heart.png"> </li>
  85 + <li> <a href="#"> 4</a> </li>
  86 + <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
  87 + <li> <a href="#"> 6</a> </li>
  88 + </ul>
  89 + <div class="add_rply">
  90 + <input type="text" placeholder="Add your reply" />
  91 + </div><!-- rly form -->
  92 + </div><!-- joined wrapper -->
  93 + </div><!-- full width -->
  94 + </div><!-- child wrapper -->
  95 +</li>
  96 +
  97 + </ul><!-- all user comments -->
  98 + <ul class="bounced-user-comments">
  99 +<li class="bc_border">
  100 + <div class="bc_brd_l"></div><!-- border -->
  101 + <div class="parent-full-width ">
  102 + <div class="full-width">
  103 + <div class="b-user-head"><img src="../assets/images/b-user1.png" />
  104 + <span class="head-content">wanderingirl </span>
  105 +<ul>
  106 + <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
  107 + <li> <span></span>3days ago</li>
  108 +
  109 +</ul>
  110 +
  111 +
  112 + </div><!-- header -->
  113 + <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
  114 + <div class="joined_wrapper">
  115 + <ul class="joined-info info_bc_spc">
  116 + <li> <img src="../assets/images/purple-heart.png"> </li>
  117 + <li> <a href="#"> 4</a> </li>
  118 + <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
  119 + <li> <a href="#"> 6</a> </li>
  120 + </ul>
  121 + <div class="add_rply">
  122 + <input type="text" placeholder="Add your reply" />
  123 + </div><!-- rly form -->
  124 + </div><!-- joined wrapper -->
  125 + </div><!-- full width -->
  126 + </div><!-- parent -->
  127 + <div class="child-full-width">
  128 + <div class="full-width">
  129 + <div class="b-user-head"><img src="../assets/images/b-user1.png" />
  130 + <span class="head-content">Onenoisyboi </span>
  131 +<ul>
  132 + <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
  133 + <li> <span></span>3days ago</li>
  134 +
  135 +</ul>
  136 +
  137 +
  138 + </div><!-- header -->
  139 + <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  140 + <div class="joined_wrapper">
  141 + <ul class="joined-info info_bc_spc">
  142 + <li> <img src="../assets/images/purple-heart.png"> </li>
  143 + <li> <a href="#"> 4</a> </li>
  144 + <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
  145 + <li> <a href="#"> 6</a> </li>
  146 + </ul>
  147 + <div class="add_rply">
  148 + <input type="text" placeholder="Add your reply" />
  149 + </div><!-- rly form -->
  150 + </div><!-- joined wrapper -->
  151 + </div><!-- full width -->
  152 + </div><!-- child wrapper -->
  153 + <div class="child-full-width">
  154 + <div class="full-width">
  155 + <div class="b-user-head"><img src="../assets/images/b-user1.png" />
  156 + <span class="head-content">Onenoisyboi </span>
  157 +<ul>
  158 + <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
  159 + <li> <span></span>3days ago</li>
  160 +
  161 +</ul>
  162 +
  163 +
  164 + </div><!-- header -->
  165 + <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  166 + <div class="joined_wrapper">
  167 + <ul class="joined-info info_bc_spc">
  168 + <li> <img src="../assets/images/purple-heart.png"> </li>
  169 + <li> <a href="#"> 4</a> </li>
  170 + <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
  171 + <li> <a href="#"> 6</a> </li>
  172 + </ul>
  173 + <div class="add_rply">
  174 + <input type="text" placeholder="Add your reply" />
  175 + </div><!-- rly form -->
  176 + </div><!-- joined wrapper -->
  177 + </div><!-- full width -->
  178 + </div><!-- child wrapper -->
  179 +</li>
  180 +
  181 + </ul><!-- all user comments -->
  182 + </div><!-- bounce board body -->
  183 + <div class="comments-footer">
  184 + <textarea></textarea>
  185 + <div class="comments-footer-wrp">
  186 + <a href="#" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a>
  187 + </div>
  188 + </div><!-- comments footer -->
  189 + </div>
  190 + </div><!-- bounceboard wrp -->
  191 + <!-- chat box -->
18 192 <div class="single-mobileInsight">
19 193 <img src="../assets/images/slide.png" class="slide-img" />
20 194 <div class="single-left-Insight-comments">
... ... @@ -71,8 +245,8 @@ When the user is already onboarded and is in the &lt;strong&gt; engage stage &lt;/strong&gt;
71 245 <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
72 246 </ul>
73 247 </div>
74   - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
75   - <div class="ft-comments-group no-comment-count">
  248 + <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r c_hide">
  249 + <div class="ft-comments-group no-comment-count ">
76 250 <div class="row">
77 251  
78 252 <div class="col-12">
... ... @@ -91,7 +265,7 @@ When the user is already onboarded and is in the &lt;strong&gt; engage stage &lt;/strong&gt;
91 265 <div class="row">
92 266 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
93 267 <div class="form-group frm-wdth">
94   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  268 + <input type="text" class="form-control" @click="open_ct_box" placeholder="Kathy, Something on your mind?" id="open_ct_box">
95 269 </div></div>
96 270 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
97 271 <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ... @@ -132,7 +306,16 @@ export default {
132 306 goToSignUp() {
133 307 this.$router.push("/signup");
134 308 },
135   -
  309 + chtbox_close(){
  310 +$("#cht_box_close").removeClass("cht_close");
  311 +$("#open_ct_box, .c_hide").show();
  312 +$(".footer-top").addClass("white-bg");
  313 + },
  314 + open_ct_box(){
  315 +$("#cht_box_close").addClass("cht_close");
  316 +$("#open_ct_box, .c_hide").hide();
  317 +$(".footer-top").removeClass("white-bg");
  318 + },
136 319 },
137 320 };
138 321 </script>
... ...