Commit 196f4eb8f88a7236fcdb740ba67e7a356328af0d
1 parent
7832f2f48c
Exists in
master
tooltip added
Showing
5 changed files
with
52 additions
and
11 deletions
Show diff stats
index.html
| 1 | <!doctype html> | 1 | <!doctype html> |
| 2 | <html lang="en"> | 2 | <html lang="en"> |
| 3 | 3 | ||
| 4 | <head> | 4 | <head> |
| 5 | <meta charset="utf-8"> | 5 | <meta charset="utf-8"> |
| 6 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | 6 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| 7 | <!-- <link href="src/assets/css/custom.css"> --> | 7 | <!-- <link href="src/assets/css/custom.css"> --> |
| 8 | <title>Spotlight</title> | 8 | <title>Spotlight</title> |
| 9 | <meta name="Description" content="Gigsforme"> | 9 | <meta name="Description" content="Gigsforme"> |
| 10 | <link rel="shortcut icon" type="image/png" href="/static/favicon.ico" /> | 10 | <link rel="shortcut icon" type="image/png" href="/static/favicon.ico" /> |
| 11 | <!-- Global site tag (gtag.js) - Google Analytics --> | 11 | <!-- Global site tag (gtag.js) - Google Analytics --> |
| 12 | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128505834-3"></script> | 12 | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128505834-3"></script> |
| 13 | <script async src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script> | 13 | <script async src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script> |
| 14 | <!--<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,700&display=swap" rel="stylesheet">--> | 14 | <!--<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,700&display=swap" rel="stylesheet">--> |
| 15 | <!--<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,500,600,700,800,900&display=swap" rel="stylesheet">--> | 15 | <!--<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,500,600,700,800,900&display=swap" rel="stylesheet">--> |
| 16 | <script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script> | 16 | <script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script> |
| 17 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> | 17 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> |
| 18 | <script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>` | 18 | <script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>` |
| 19 | 19 | <script src="https://unpkg.com/vue-tippy/dist/vue-tippy.min.js"></script> | |
| 20 | <script src="https://cdn.jsdelivr.net/npm/vue-tippy/dist/vue-tippy.min.js"></script> | ||
| 20 | <!--<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800&display=swap" rel="stylesheet">--> | 21 | <!--<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800&display=swap" rel="stylesheet">--> |
| 21 | <!--<script src="/socket.io/socket.io.js"></script>--> | 22 | <!--<script src="/socket.io/socket.io.js"></script>--> |
| 22 | </head> | 23 | </head> |
| 23 | 24 | ||
| 24 | <body> | 25 | <body> |
| 25 | <div id="app"></div> | 26 | <div id="app"></div> |
| 26 | <!-- built files will be auto injected --> | 27 | <!-- built files will be auto injected --> |
| 27 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | 28 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
| 28 | 29 | ||
| 29 | <script> | 30 | <script> |
| 30 | 31 | ||
| 31 | 32 | ||
| 32 | </script> | 33 | </script> |
| 33 | </body> | 34 | </body> |
| 34 | 35 | ||
| 35 | </html> | 36 | </html> |
package.json
| 1 | { | 1 | { |
| 2 | "name": "spotlight", | 2 | "name": "spotlight", |
| 3 | "version": "1.0.0", | 3 | "version": "1.0.0", |
| 4 | "description": "A Vue.js project", | 4 | "description": "A Vue.js project", |
| 5 | "author": "", | 5 | "author": "", |
| 6 | "private": true, | 6 | "private": true, |
| 7 | "scripts": { | 7 | "scripts": { |
| 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", | 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", |
| 9 | "prod": "webpack-dev-server --history-api-fallback --host localhost --disable-host-check --inline --progress --config build/webpack.prod.conf.js", | 9 | "prod": "webpack-dev-server --history-api-fallback --host localhost --disable-host-check --inline --progress --config build/webpack.prod.conf.js", |
| 10 | "start": "npm run dev", | 10 | "start": "npm run dev", |
| 11 | "unit": "jest --config test/unit/jest.conf.js --coverage", | 11 | "unit": "jest --config test/unit/jest.conf.js --coverage", |
| 12 | "e2e": "node test/e2e/runner.js", | 12 | "e2e": "node test/e2e/runner.js", |
| 13 | "test": "npm run unit && npm run e2e", | 13 | "test": "npm run unit && npm run e2e", |
| 14 | "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", | 14 | "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", |
| 15 | "build": "node build/build.js" | 15 | "build": "node build/build.js" |
| 16 | }, | 16 | }, |
| 17 | "dependencies": { | 17 | "dependencies": { |
| 18 | "@auth0/auth0-spa-js": "^1.6.0", | 18 | "@auth0/auth0-spa-js": "^1.6.0", |
| 19 | "@voerro/vue-tagsinput": "^2.0.2", | 19 | "@voerro/vue-tagsinput": "^2.0.2", |
| 20 | "axios": "^0.19.0", | 20 | "axios": "^0.19.0", |
| 21 | "bootstrap": "^4.4.1", | 21 | "bootstrap": "^4.4.1", |
| 22 | "jquery": "^3.5.1", | 22 | "jquery": "^3.5.1", |
| 23 | "jquery-touch-events": "^1.0.7", | 23 | "jquery-touch-events": "^1.0.7", |
| 24 | "moment": "^2.29.1", | 24 | "moment": "^2.29.1", |
| 25 | "popper.js": "^1.16.0", | 25 | "popper.js": "^1.16.0", |
| 26 | "socket.io-client": "^2.3.0", | 26 | "socket.io-client": "^2.3.0", |
| 27 | "v-toaster": "^1.0.3", | 27 | "v-toaster": "^1.0.3", |
| 28 | "vue": "^2.5.2", | 28 | "vue": "^2.5.2", |
| 29 | "vue-axios": "^2.1.5", | 29 | "vue-axios": "^2.1.5", |
| 30 | "vue-cookie-law": "^1.11.0", | 30 | "vue-cookie-law": "^1.11.0", |
| 31 | "vue-cookies": "^1.6.1", | 31 | "vue-cookies": "^1.6.1", |
| 32 | "vue-head": "^2.2.0", | 32 | "vue-head": "^2.2.0", |
| 33 | "vue-ins-progress-bar": "^1.3.0", | 33 | "vue-ins-progress-bar": "^1.3.0", |
| 34 | "vue-meta": "^2.3.2", | 34 | "vue-meta": "^2.3.2", |
| 35 | "vue-router": "^3.0.1", | 35 | "vue-router": "^3.0.1", |
| 36 | "vue-social-sharing": "^2.4.7", | 36 | "vue-social-sharing": "^2.4.7", |
| 37 | "vue-star-rating": "^1.7.0", | 37 | "vue-star-rating": "^1.7.0", |
| 38 | "vue-stepper": "^1.4.2", | 38 | "vue-stepper": "^1.4.2", |
| 39 | "vue-tippy": "^4.7.2", | ||
| 39 | "vue-toast-notification": "0.0.3", | 40 | "vue-toast-notification": "0.0.3", |
| 40 | "vue-video-player": "^5.0.2", | 41 | "vue-video-player": "^5.0.2", |
| 41 | "vue-videobg": "^2.0.0", | 42 | "vue-videobg": "^2.0.0", |
| 42 | "vuelidate": "^0.7.5" | 43 | "vuelidate": "^0.7.5" |
| 43 | }, | 44 | }, |
| 44 | "devDependencies": { | 45 | "devDependencies": { |
| 45 | "autoprefixer": "^7.1.2", | 46 | "autoprefixer": "^7.1.2", |
| 46 | "babel-core": "^6.22.1", | 47 | "babel-core": "^6.22.1", |
| 47 | "babel-eslint": "^8.2.1", | 48 | "babel-eslint": "^8.2.1", |
| 48 | "babel-helper-vue-jsx-merge-props": "^2.0.3", | 49 | "babel-helper-vue-jsx-merge-props": "^2.0.3", |
| 49 | "babel-jest": "^21.0.2", | 50 | "babel-jest": "^21.0.2", |
| 50 | "babel-loader": "^7.1.1", | 51 | "babel-loader": "^7.1.1", |
| 51 | "babel-plugin-dynamic-import-node": "^1.2.0", | 52 | "babel-plugin-dynamic-import-node": "^1.2.0", |
| 52 | "babel-plugin-syntax-jsx": "^6.18.0", | 53 | "babel-plugin-syntax-jsx": "^6.18.0", |
| 53 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | 54 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", |
| 54 | "babel-plugin-transform-runtime": "^6.22.0", | 55 | "babel-plugin-transform-runtime": "^6.22.0", |
| 55 | "babel-plugin-transform-vue-jsx": "^3.5.0", | 56 | "babel-plugin-transform-vue-jsx": "^3.5.0", |
| 56 | "babel-preset-env": "^1.3.2", | 57 | "babel-preset-env": "^1.3.2", |
| 57 | "babel-preset-stage-2": "^6.22.0", | 58 | "babel-preset-stage-2": "^6.22.0", |
| 58 | "babel-register": "^6.22.0", | 59 | "babel-register": "^6.22.0", |
| 59 | "chalk": "^2.0.1", | 60 | "chalk": "^2.0.1", |
| 60 | "copy-webpack-plugin": "^4.0.1", | 61 | "copy-webpack-plugin": "^4.0.1", |
| 61 | "cross-spawn": "^5.0.1", | 62 | "cross-spawn": "^5.0.1", |
| 62 | "css-loader": "^0.28.0", | 63 | "css-loader": "^0.28.0", |
| 63 | "eslint": "^4.15.0", | 64 | "eslint": "^4.15.0", |
| 64 | "eslint-config-standard": "^10.2.1", | 65 | "eslint-config-standard": "^10.2.1", |
| 65 | "eslint-friendly-formatter": "^3.0.0", | 66 | "eslint-friendly-formatter": "^3.0.0", |
| 66 | "eslint-loader": "^1.7.1", | 67 | "eslint-loader": "^1.7.1", |
| 67 | "eslint-plugin-import": "^2.7.0", | 68 | "eslint-plugin-import": "^2.7.0", |
| 68 | "eslint-plugin-node": "^5.2.0", | 69 | "eslint-plugin-node": "^5.2.0", |
| 69 | "eslint-plugin-promise": "^3.4.0", | 70 | "eslint-plugin-promise": "^3.4.0", |
| 70 | "eslint-plugin-standard": "^3.0.1", | 71 | "eslint-plugin-standard": "^3.0.1", |
| 71 | "eslint-plugin-vue": "^4.0.0", | 72 | "eslint-plugin-vue": "^4.0.0", |
| 72 | "extract-text-webpack-plugin": "^3.0.0", | 73 | "extract-text-webpack-plugin": "^3.0.0", |
| 73 | "file-loader": "^1.1.4", | 74 | "file-loader": "^1.1.4", |
| 74 | "friendly-errors-webpack-plugin": "^1.6.1", | 75 | "friendly-errors-webpack-plugin": "^1.6.1", |
| 75 | "html-webpack-plugin": "^2.30.1", | 76 | "html-webpack-plugin": "^2.30.1", |
| 76 | "jest": "^22.0.4", | 77 | "jest": "^22.0.4", |
| 77 | "jest-serializer-vue": "^0.3.0", | 78 | "jest-serializer-vue": "^0.3.0", |
| 78 | "nightwatch": "^0.9.12", | 79 | "nightwatch": "^0.9.12", |
| 79 | "node-notifier": "^5.1.2", | 80 | "node-notifier": "^5.1.2", |
| 80 | "node-sass": "^4.14.1", | 81 | "node-sass": "^4.14.1", |
| 81 | "optimize-css-assets-webpack-plugin": "^3.2.0", | 82 | "optimize-css-assets-webpack-plugin": "^3.2.0", |
| 82 | "ora": "^1.2.0", | 83 | "ora": "^1.2.0", |
| 83 | "portfinder": "^1.0.13", | 84 | "portfinder": "^1.0.13", |
| 84 | "postcss-import": "^11.0.0", | 85 | "postcss-import": "^11.0.0", |
| 85 | "postcss-loader": "^2.0.8", | 86 | "postcss-loader": "^2.0.8", |
| 86 | "postcss-url": "^7.2.1", | 87 | "postcss-url": "^7.2.1", |
| 87 | "rimraf": "^2.6.0", | 88 | "rimraf": "^2.6.0", |
| 88 | "sass-loader": "^7.3.1", | 89 | "sass-loader": "^7.3.1", |
| 89 | "semver": "^5.3.0", | 90 | "semver": "^5.3.0", |
| 90 | "shelljs": "^0.7.6", | 91 | "shelljs": "^0.7.6", |
| 91 | "uglifyjs-webpack-plugin": "^1.1.1", | 92 | "uglifyjs-webpack-plugin": "^1.1.1", |
| 92 | "url-loader": "^0.5.8", | 93 | "url-loader": "^0.5.8", |
| 93 | "vue-jest": "^1.0.2", | 94 | "vue-jest": "^1.0.2", |
| 94 | "vue-loader": "^13.3.0", | 95 | "vue-loader": "^13.3.0", |
| 95 | "vue-style-loader": "^3.0.1", | 96 | "vue-style-loader": "^3.0.1", |
| 96 | "vue-template-compiler": "^2.5.2", | 97 | "vue-template-compiler": "^2.5.2", |
| 97 | "webpack": "^3.6.0", | 98 | "webpack": "^3.6.0", |
| 98 | "webpack-bundle-analyzer": "^2.9.0", | 99 | "webpack-bundle-analyzer": "^2.9.0", |
| 99 | "webpack-dev-server": "^2.11.5", | 100 | "webpack-dev-server": "^2.11.5", |
| 100 | "webpack-merge": "^4.1.0" | 101 | "webpack-merge": "^4.1.0" |
| 101 | }, | 102 | }, |
| 102 | "engines": { | 103 | "engines": { |
| 103 | "node": ">= 6.0.0", | 104 | "node": ">= 6.0.0", |
| 104 | "npm": ">= 3.0.0" | 105 | "npm": ">= 3.0.0" |
| 105 | }, | 106 | }, |
| 106 | "browserslist": [ | 107 | "browserslist": [ |
| 107 | "> 1%", | 108 | "> 1%", |
| 108 | "last 2 versions", | 109 | "last 2 versions", |
| 109 | "not ie <= 8" | 110 | "not ie <= 8" |
| 110 | ] | 111 | ] |
| 111 | } | 112 | } |
| 112 | 113 |
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="#"><img src="../assets/images/logo.png"></a> | 6 | <a class="navbar-brand" href="#"><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="#"><img src="../assets/images/lock.svg"></a> | 13 | <a href="#"><img src="../assets/images/lock.svg"></a> |
| 14 | </div> | 14 | </div> |
| 15 | </nav> | 15 | </nav> |
| 16 | <!-- menu wrapper --> | 16 | <!-- menu wrapper --> |
| 17 | <div class="startup-wrp"> | 17 | <div class="startup-wrp"> |
| 18 | 18 | ||
| 19 | <!-- <div class="compare-c"> | 19 | <!-- <div class="compare-c"> |
| 20 | <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> | 20 | <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> |
| 21 | <div class="vs">vs</div> | 21 | <div class="vs">vs</div> |
| 22 | <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> | 22 | <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> |
| 23 | </div> --> | 23 | </div> --> |
| 24 | <div class="compare-c"> | 24 | <div class="compare-c"> |
| 25 | <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div> | 25 | <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div> |
| 26 | </div> | 26 | </div> |
| 27 | <!-- compare --> | 27 | <!-- compare --> |
| 28 | <img src="../assets/images/spot-light.svg" class="epi-bg" /> | 28 | <img src="../assets/images/spot-light.svg" class="epi-bg" /> |
| 29 | <div class="bottom-startup"> | 29 | <div class="bottom-startup"> |
| 30 | <div class="logo-wrp"> | 30 | <div class="logo-wrp"> |
| 31 | <a href="#"><img src="../assets/images/ps-growth.svg" /> | 31 | <a href="#"><img src="../assets/images/ps-growth.svg" /> |
| 32 | <span>Product Growth</span> | 32 | <span>Product Growth</span> |
| 33 | </a> | 33 | </a> |
| 34 | </div><!-- logo wrp --> | 34 | </div><!-- logo wrp --> |
| 35 | <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title --> | 35 | <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title --> |
| 36 | <div class="author-sec"> | 36 | <div class="author-sec"> |
| 37 | <div class="top"> | 37 | <div class="top"> |
| 38 | <span>Author</span> | 38 | <span>Author</span> |
| 39 | <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span> | 39 | <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span> |
| 40 | </div><!-- top section --> | 40 | </div><!-- top section --> |
| 41 | <div class="bottom"> | 41 | <div class="bottom"> |
| 42 | 42 | ||
| 43 | <div class="right p-left-0"> | 43 | <div class="right p-left-0"> |
| 44 | <span>Last updated</span> | 44 | <span>Last updated</span> |
| 45 | <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span> | 45 | <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span> |
| 46 | </div><!-- right --> | 46 | </div><!-- right --> |
| 47 | </div><!-- bottom --> | 47 | </div><!-- bottom --> |
| 48 | </div><!-- author section--> | 48 | </div><!-- author section--> |
| 49 | <div class="author-sec"> | 49 | <div class="author-sec"> |
| 50 | <div class="top"> | 50 | <div class="top"> |
| 51 | <span>App</span> | 51 | <span>App</span> |
| 52 | <span class="name">{{currentSlideData.payload.metaData.app}}</span> | 52 | <span class="name">{{currentSlideData.payload.metaData.app}}</span> |
| 53 | </div><!-- top section --> | 53 | </div><!-- top section --> |
| 54 | <div class="top"> | 54 | <div class="top"> |
| 55 | <span>Focus</span> | 55 | <span>Focus</span> |
| 56 | <span class="name">{{currentSlideData.payload.metaData.focus}}</span> | 56 | <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span> |
| 57 | </div><!-- top section --> | 57 | </div><!-- top section --> |
| 58 | </div><!-- app section--> | 58 | </div><!-- app section--> |
| 59 | <div class="author-sec info"> | 59 | <div class="author-sec info"> |
| 60 | <div class="top"> | 60 | <div class="top"> |
| 61 | <span>Read</span> | 61 | <span>Read</span> |
| 62 | <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span> | 62 | <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span> |
| 63 | </div><!-- top section --> | 63 | </div><!-- top section --> |
| 64 | <div class="top bt-brd"> | 64 | <div class="top bt-brd"> |
| 65 | <span>Platform</span> | 65 | <span>Platform</span> |
| 66 | <span class="name">{{currentSlideData.payload.metaData.platForm}}</span> | 66 | <span class="name">{{currentSlideData.payload.metaData.platForm}}</span> |
| 67 | </div><!-- top section --> | 67 | </div><!-- top section --> |
| 68 | </div><!-- info section--> | 68 | </div><!-- info section--> |
| 69 | <div class="u-img-info"> | 69 | <div class="u-img-info"> |
| 70 | <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/> | 70 | <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'"/> | 71 | <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'"/> | 72 | <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'"/> | 73 | <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/> |
| 74 | </div><!-- image info --> | 74 | </div><!-- image info --> |
| 75 | <div class="start"> | 75 | <div class="start"> |
| 76 | <a href="javascript:void(0);" @click="goNext"> | 76 | <a href="javascript:void(0);" @click="goNext"> |
| 77 | <img src="../assets/images/arrow-right.svg" /> | 77 | <img src="../assets/images/arrow-right.svg" /> |
| 78 | <span>Start</span> | 78 | <span>Start</span> |
| 79 | </a> | 79 | </a> |
| 80 | </div><!-- start --> | 80 | </div><!-- start --> |
| 81 | </div><!-- bottom startup --> | 81 | </div><!-- bottom startup --> |
| 82 | 82 | ||
| 83 | </div> | 83 | </div> |
| 84 | <!-- body wrapper --> | 84 | <!-- body wrapper --> |
| 85 | </div> | 85 | </div> |
| 86 | <!-- main wrapper --> | 86 | <!-- main wrapper --> |
| 87 | </main> | 87 | </main> |
| 88 | </template> | 88 | </template> |
| 89 | 89 | ||
| 90 | <script> | 90 | <script> |
| 91 | import Vue from "vue"; | 91 | import Vue from "vue"; |
| 92 | import router from "../router"; | 92 | import router from "../router"; |
| 93 | 93 | ||
| 94 | export default { | 94 | export default { |
| 95 | name: "EpisodeIntro", | 95 | name: "EpisodeIntro", |
| 96 | 96 | ||
| 97 | data() { | 97 | data() { |
| 98 | return { | 98 | return { |
| 99 | allSlide:[], | 99 | allSlide:[], |
| 100 | currentSlideIndex:null, | 100 | currentSlideIndex:null, |
| 101 | currentSlideData:null, | 101 | currentSlideData:null, |
| 102 | }; | 102 | }; |
| 103 | }, | 103 | }, |
| 104 | mounted() { | 104 | mounted() { |
| 105 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); | 105 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); |
| 106 | if (allSlideData) { | 106 | if (allSlideData) { |
| 107 | this.allSlide = JSON.parse(allSlideData); | 107 | this.allSlide = JSON.parse(allSlideData); |
| 108 | this.getCurrentSlideData(); | 108 | this.getCurrentSlideData(); |
| 109 | } | 109 | } |
| 110 | 110 | ||
| 111 | }, | 111 | }, |
| 112 | methods: { | 112 | methods: { |
| 113 | getCurrentSlideData(){ | 113 | getCurrentSlideData(){ |
| 114 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); | 114 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); |
| 115 | this.currentSlideIndex = i; | 115 | this.currentSlideIndex = i; |
| 116 | this.currentSlideData = this.allSlide[i] | 116 | this.currentSlideData = this.allSlide[i] |
| 117 | console.log("currentSlideData",this.currentSlideData) | 117 | console.log("currentSlideData",this.currentSlideData) |
| 118 | 118 | ||
| 119 | }, | 119 | }, |
| 120 | goNext(){ | 120 | goNext(){ |
| 121 | this.currentSlideIndex++ | 121 | this.currentSlideIndex++ |
| 122 | this.$router.push({ | 122 | this.$router.push({ |
| 123 | name: this.allSlide[this.currentSlideIndex].ur, | 123 | name: this.allSlide[this.currentSlideIndex].ur, |
| 124 | params: { | 124 | params: { |
| 125 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 125 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 126 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 126 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 127 | }, | 127 | }, |
| 128 | }); | 128 | }); |
| 129 | 129 | ||
| 130 | }, | 130 | }, |
| 131 | goBack(){ | 131 | goBack(){ |
| 132 | 132 | ||
| 133 | }, | 133 | }, |
| 134 | goToLogin() { | 134 | goToLogin() { |
| 135 | this.$router.push("/"); | 135 | this.$router.push("/"); |
| 136 | }, | 136 | }, |
| 137 | goToSignUp() { | 137 | goToSignUp() { |
| 138 | this.$router.push("/signup"); | 138 | this.$router.push("/signup"); |
| 139 | }, | 139 | }, |
| 140 | |||
| 141 | createString(list){ | ||
| 142 | var name = ""; | ||
| 143 | list.forEach(element => { | ||
| 144 | name = name+','+element; | ||
| 145 | }); | ||
| 146 | |||
| 147 | console.log("name is",name); | ||
| 148 | return name.substring(1);; | ||
| 149 | } | ||
| 140 | 150 | ||
| 141 | }, | 151 | }, |
| 142 | }; | 152 | }; |
| 143 | </script> | 153 | </script> |
| 154 | <style > | ||
| 155 | .ellipsis { | ||
| 156 | text-overflow: ellipsis; | ||
| 157 | white-space: nowrap; | ||
| 158 | overflow: hidden; | ||
| 159 | } | ||
| 160 | </style> |
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);" | 22 | <a href="javasript:void(0);" |
| 23 | @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span | 23 | @click="getRandomAvatar()"><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-model="interestName" | 122 | v-model="interestName" |
| 122 | /> | 123 | /> |
| 123 | <a href="javascript:void(0);" @click="addInterest()" | 124 | <a href="javascript:void(0);" @click="addInterest()" |
| 124 | ><img src="../assets/images/plus-circle.svg" | 125 | ><img src="../assets/images/plus-circle.svg" |
| 125 | /></a> | 126 | /></a> |
| 126 | </li> | 127 | </li> |
| 127 | </ul> | 128 | </ul> |
| 128 | </div> | 129 | </div> |
| 129 | <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"> |
| 130 | <p class="things">Choose Background color</p> | 131 | <p class="things">Choose Background color</p> |
| 131 | 132 | ||
| 132 | <ul class="colors"> | 133 | <ul class="colors"> |
| 133 | <li> | 134 | <li> |
| 134 | <a | 135 | <a |
| 135 | href="javascript:void(0);" | 136 | href="javascript:void(0);" |
| 136 | id="#C4C4C4" | 137 | id="#C4C4C4" |
| 137 | class="silver" | 138 | class="silver" |
| 138 | @click="changeColor('#C4C4C4')" | 139 | @click="changeColor('#C4C4C4')" |
| 139 | ></a> | 140 | ></a> |
| 140 | </li> | 141 | </li> |
| 141 | <li> | 142 | <li> |
| 142 | <a | 143 | <a |
| 143 | href="javascript:void(0);" | 144 | href="javascript:void(0);" |
| 144 | id="#FFF6D7" | 145 | id="#FFF6D7" |
| 145 | class="milk-punch" | 146 | class="milk-punch" |
| 146 | @click="changeColor('#FFF6D7')" | 147 | @click="changeColor('#FFF6D7')" |
| 147 | ></a> | 148 | ></a> |
| 148 | </li> | 149 | </li> |
| 149 | <li> | 150 | <li> |
| 150 | <a | 151 | <a |
| 151 | href="javascript:void(0);" | 152 | href="javascript:void(0);" |
| 152 | id="#BDDBFF" | 153 | id="#BDDBFF" |
| 153 | class="french-pass" | 154 | class="french-pass" |
| 154 | @click="changeColor('#BDDBFF')" | 155 | @click="changeColor('#BDDBFF')" |
| 155 | ></a> | 156 | ></a> |
| 156 | </li> | 157 | </li> |
| 157 | <li> | 158 | <li> |
| 158 | <a | 159 | <a |
| 159 | href="javascript:void(0);" | 160 | href="javascript:void(0);" |
| 160 | id="#C0FAFE" | 161 | id="#C0FAFE" |
| 161 | class="cyan-french-pass" | 162 | class="cyan-french-pass" |
| 162 | @click="changeColor('#C0FAFE')" | 163 | @click="changeColor('#C0FAFE')" |
| 163 | ></a> | 164 | ></a> |
| 164 | </li> | 165 | </li> |
| 165 | <li> | 166 | <li> |
| 166 | <a | 167 | <a |
| 167 | href="javascript:void(0);" | 168 | href="javascript:void(0);" |
| 168 | id="#FFDBDC" | 169 | id="#FFDBDC" |
| 169 | class="cosmos" | 170 | class="cosmos" |
| 170 | @click="changeColor('#FFDBDC')" | 171 | @click="changeColor('#FFDBDC')" |
| 171 | ></a> | 172 | ></a> |
| 172 | </li> | 173 | </li> |
| 173 | <li> | 174 | <li> |
| 174 | <a | 175 | <a |
| 175 | href="javascript:void(0);" | 176 | href="javascript:void(0);" |
| 176 | id="#FEE6AC" | 177 | id="#FEE6AC" |
| 177 | class="cape-Honey" | 178 | class="cape-Honey" |
| 178 | @click="changeColor('#FEE6AC')" | 179 | @click="changeColor('#FEE6AC')" |
| 179 | ></a> | 180 | ></a> |
| 180 | </li> | 181 | </li> |
| 181 | <li> | 182 | <li> |
| 182 | <a | 183 | <a |
| 183 | href="javascript:void(0);" | 184 | href="javascript:void(0);" |
| 184 | id="#E5DFF0" | 185 | id="#E5DFF0" |
| 185 | class="snuff" | 186 | class="snuff" |
| 186 | @click="changeColor('#E5DFF0')" | 187 | @click="changeColor('#E5DFF0')" |
| 187 | ></a> | 188 | ></a> |
| 188 | </li> | 189 | </li> |
| 189 | <li> | 190 | <li> |
| 190 | <a | 191 | <a |
| 191 | href="javascript:void(0);" | 192 | href="javascript:void(0);" |
| 192 | id="#DFE7EF" | 193 | id="#DFE7EF" |
| 193 | class="catskillWhite" | 194 | class="catskillWhite" |
| 194 | @click="changeColor('#DFE7EF')" | 195 | @click="changeColor('#DFE7EF')" |
| 195 | ></a> | 196 | ></a> |
| 196 | </li> | 197 | </li> |
| 197 | <li> | 198 | <li> |
| 198 | <a | 199 | <a |
| 199 | href="javascript:void(0);" | 200 | href="javascript:void(0);" |
| 200 | id="#FFF" | 201 | id="#FFF" |
| 201 | class="white" | 202 | class="white" |
| 202 | @click="changeColor('#FFF')" | 203 | @click="changeColor('#FFF')" |
| 203 | ></a> | 204 | ></a> |
| 204 | </li> | 205 | </li> |
| 205 | </ul> | 206 | </ul> |
| 206 | </div> | 207 | </div> |
| 207 | <div class="col-lg-12 mt-50"> | 208 | <div class="col-lg-12 mt-50"> |
| 208 | <p class="notifications"> | 209 | <p class="notifications"> |
| 209 | Recieve notifications when you recieve a comment/ Upvote | 210 | Recieve notifications when you recieve a comment/ Upvote |
| 210 | </p> | 211 | </p> |
| 211 | <div class="switch-bt-wrp"> | 212 | <div class="switch-bt-wrp"> |
| 212 | <label class="switch-btn"> | 213 | <label class="switch-btn"> |
| 213 | <input type="checkbox" class="toggle-btn" /> | 214 | <input type="checkbox" class="toggle-btn" /> |
| 214 | <span class="rounded-toggle"></span> | 215 | <span class="rounded-toggle"></span> |
| 215 | </label> | 216 | </label> |
| 216 | <span class="onoff">on/off</span> | 217 | <span class="onoff">on/off</span> |
| 217 | </div> | 218 | </div> |
| 218 | </div> | 219 | </div> |
| 219 | <div class="col-lg-12"> | 220 | <div class="col-lg-12"> |
| 220 | <p class="add-socail-ch"> | 221 | <p class="add-socail-ch"> |
| 221 | Add your social Channels <span></span> | 222 | Add your social Channels <span></span> |
| 222 | </p> | 223 | </p> |
| 223 | </div> | 224 | </div> |
| 224 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 225 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 225 | <div class="form-group floating-label"> | 226 | <div class="form-group floating-label"> |
| 226 | <select class="form-group"> | 227 | <select class="form-group"> |
| 227 | <option value="Facebook">Facebook</option> | 228 | <option value="Facebook">Facebook</option> |
| 228 | </select> | 229 | </select> |
| 229 | <span class="select-arrow" | 230 | <span class="select-arrow" |
| 230 | ><img src="../assets/images/chevron-down.svg" | 231 | ><img src="../assets/images/chevron-down.svg" |
| 231 | /></span> | 232 | /></span> |
| 232 | </div> | 233 | </div> |
| 233 | </div> | 234 | </div> |
| 234 | <!-- input --> | 235 | <!-- input --> |
| 235 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | 236 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> |
| 236 | <div class="form-group floating-label"> | 237 | <div class="form-group floating-label"> |
| 237 | <input | 238 | <input |
| 238 | type="text" | 239 | type="text" |
| 239 | class="form-control" | 240 | class="form-control" |
| 240 | value="" | 241 | value="" |
| 241 | placeholder="Paste your profile URL here" | 242 | placeholder="Paste your profile URL here" |
| 242 | id="" | 243 | id="" |
| 243 | v-model="userData.socialMediaProfiles.facebook" | 244 | v-model="userData.socialMediaProfiles.facebook" |
| 244 | /> | 245 | /> |
| 245 | </div> | 246 | </div> |
| 246 | </div> | 247 | </div> |
| 247 | <!-- input --> | 248 | <!-- input --> |
| 248 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 249 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 249 | <div class="form-group floating-label"> | 250 | <div class="form-group floating-label"> |
| 250 | <select class="form-group"> | 251 | <select class="form-group"> |
| 251 | <option value="Linkedin">Linkedin</option> | 252 | <option value="Linkedin">Linkedin</option> |
| 252 | </select> | 253 | </select> |
| 253 | <span class="select-arrow" | 254 | <span class="select-arrow" |
| 254 | ><img src="../assets/images/chevron-down.svg" | 255 | ><img src="../assets/images/chevron-down.svg" |
| 255 | /></span> | 256 | /></span> |
| 256 | </div> | 257 | </div> |
| 257 | </div> | 258 | </div> |
| 258 | <!-- input --> | 259 | <!-- input --> |
| 259 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | 260 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> |
| 260 | <div class="form-group floating-label"> | 261 | <div class="form-group floating-label"> |
| 261 | <input | 262 | <input |
| 262 | type="text" | 263 | type="text" |
| 263 | class="form-control" | 264 | class="form-control" |
| 264 | value="" | 265 | value="" |
| 265 | placeholder="Paste your profile URL here" | 266 | placeholder="Paste your profile URL here" |
| 266 | id="" | 267 | id="" |
| 267 | v-model="userData.socialMediaProfiles.linkedin" | 268 | v-model="userData.socialMediaProfiles.linkedin" |
| 268 | /> | 269 | /> |
| 269 | </div> | 270 | </div> |
| 270 | </div> | 271 | </div> |
| 271 | <!-- input --> | 272 | <!-- input --> |
| 272 | 273 | ||
| 273 | <!-- input --> | 274 | <!-- input --> |
| 274 | <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 275 | <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 275 | <div class="form-group floating-label"> | 276 | <div class="form-group floating-label"> |
| 276 | <select class="form-group"> | 277 | <select class="form-group"> |
| 277 | <option @click="addSocialLink">Add another</option> | 278 | <option @click="addSocialLink">Add another</option> |
| 278 | </select> | 279 | </select> |
| 279 | <span class="select-arrow" | 280 | <span class="select-arrow" |
| 280 | ><img src="../assets/images/chevron-down.svg" | 281 | ><img src="../assets/images/chevron-down.svg" |
| 281 | /></span> | 282 | /></span> |
| 282 | </div> | 283 | </div> |
| 283 | </div> --> | 284 | </div> --> |
| 284 | <!-- input --> | 285 | <!-- input --> |
| 285 | </div> | 286 | </div> |
| 286 | <a href="javascript:void(0);" @click="closeDialog" class="next-bt" | 287 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" |
| 287 | >Save</a | 288 | >Save</a |
| 288 | > | 289 | > |
| 289 | </form> | 290 | </form> |
| 290 | </div> | 291 | </div> |
| 291 | <div class="clearfix"></div> | 292 | <div class="clearfix"></div> |
| 292 | </div> | 293 | </div> |
| 293 | <!-- add profile --> | 294 | <!-- add profile --> |
| 294 | </div> | 295 | </div> |
| 295 | <!-- profile --> | 296 | <!-- profile --> |
| 296 | <div class="container-fluid inner-wrp"> | 297 | <div class="container-fluid inner-wrp"> |
| 297 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 298 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 298 | <a class="navbar-brand" href="javasript:void(0);" | 299 | <a class="navbar-brand" href="javasript:void(0);" |
| 299 | ><img src="../assets/images/logo.png" | 300 | ><img src="../assets/images/logo.png" |
| 300 | /></a> | 301 | /></a> |
| 301 | <button | 302 | <button |
| 302 | class="navbar-toggler" | 303 | class="navbar-toggler" |
| 303 | type="button" | 304 | type="button" |
| 304 | data-toggle="collapse" | 305 | data-toggle="collapse" |
| 305 | data-target="#navbarsExample03" | 306 | data-target="#navbarsExample03" |
| 306 | aria-controls="navbarsExample03" | 307 | aria-controls="navbarsExample03" |
| 307 | aria-expanded="false" | 308 | aria-expanded="false" |
| 308 | aria-label="Toggle navigation" | 309 | aria-label="Toggle navigation" |
| 309 | > | 310 | > |
| 310 | <span class="navbar-toggler-icon"></span> | 311 | <span class="navbar-toggler-icon"></span> |
| 311 | <span class="navbar-toggler-icon"></span> | 312 | <span class="navbar-toggler-icon"></span> |
| 312 | <span class="navbar-toggler-icon"></span> | 313 | <span class="navbar-toggler-icon"></span> |
| 313 | </button> | 314 | </button> |
| 314 | 315 | ||
| 315 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 316 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 316 | <ul class="navbar-nav mr-auto"> | 317 | <ul class="navbar-nav mr-auto"> |
| 317 | <li class="nav-item active"> | 318 | <li class="nav-item active"> |
| 318 | <a class="nav-link" href="javasript:void(0);">About</a> | 319 | <a class="nav-link" href="javasript:void(0);">About</a> |
| 319 | </li> | 320 | </li> |
| 320 | <li class="nav-item"> | 321 | <li class="nav-item"> |
| 321 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> | 322 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> |
| 322 | </li> | 323 | </li> |
| 323 | <li class="nav-item"> | 324 | <li class="nav-item"> |
| 324 | <a class="nav-link" href="javasript:void(0);">Stories</a> | 325 | <a class="nav-link" href="javasript:void(0);">Stories</a> |
| 325 | </li> | 326 | </li> |
| 326 | <li class="nav-item"> | 327 | <li class="nav-item"> |
| 327 | <a class="nav-link" href="javasript:void(0);">Library</a> | 328 | <a class="nav-link" href="javasript:void(0);">Library</a> |
| 328 | </li> | 329 | </li> |
| 329 | </ul> | 330 | </ul> |
| 330 | </div> | 331 | </div> |
| 331 | <a href="javasript:void(0);" class="update_profile"><span></span> Update Profile</a> | 332 | <a href="javasript:void(0);" @click="addProfileDialog" class="update_profile"><span></span> Update Profile</a> |
| 332 | <div class=""> | 333 | <div class=""> |
| 333 | 334 | ||
| 334 | <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a> | 335 | <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a> |
| 335 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | 336 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> |
| 336 | <ul> | 337 | <ul> |
| 337 | <li> | 338 | <li> |
| 338 | <a href="javascript:void(0);" @click="addProfileDialog" | 339 | <a href="javascript:void(0);" @click="addProfileDialog" |
| 339 | >Edit Profile</a | 340 | >Edit Profile</a |
| 340 | > | 341 | > |
| 341 | </li> | 342 | </li> |
| 342 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | 343 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> |
| 343 | </ul> | 344 | </ul> |
| 344 | </div> | 345 | </div> |
| 345 | </div> | 346 | </div> |
| 346 | </nav> | 347 | </nav> |
| 347 | <!-- menu wrapper --> | 348 | <!-- menu wrapper --> |
| 348 | <div class="row profile-tab-spc-top"> | 349 | <div class="row profile-tab-spc-top"> |
| 349 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | 350 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> |
| 350 | <div class="inner-profile-ps common_color"> | 351 | <div class="inner-profile-ps common_color"> |
| 351 | <img :src="userData.profilePic" class="" /> | 352 | <img :src="userData.profilePic" class="" /> |
| 352 | </div> | 353 | </div> |
| 353 | <!-- user profile --> | 354 | <!-- user profile --> |
| 354 | 355 | ||
| 355 | <div class="user-profile"> | 356 | <div class="user-profile"> |
| 356 | <h1> | 357 | <h1> |
| 357 | {{ userData.firstName }} {{ userData.lastName }} | 358 | {{ userData.firstName }} {{ userData.lastName }} |
| 358 | <a href="javasript:void(0);" class="tags">{{ userData.role }}</a> | 359 | <a href="javasript:void(0);" class="tags no-cursor">{{ userData.role }}</a> |
| 359 | </h1> | 360 | </h1> |
| 360 | <ul class="joined-info"> | 361 | <ul class="joined-info"> |
| 361 | <li> | 362 | <li> |
| 362 | <a href="javascript:void(0);" @click="addProfileDialog" | 363 | <a href="javascript:void(0);" v-if="userData.designation.length == 0 && userData.organisation.length == 0" @click="addProfileDialog" |
| 363 | >Add your work</a | 364 | >Add your work</a |
| 364 | > | 365 | > |
| 366 | <a href="javascript:void(0);" v-if="userData.designation.length != 0" | ||
| 367 | >{{userData.designation}}</a | ||
| 368 | > | ||
| 369 | <a href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0" | ||
| 370 | >at</a | ||
| 371 | > | ||
| 372 | <a href="javascript:void(0);" v-if="userData.organisation.length != 0" | ||
| 373 | >{{userData.organisation}}</a | ||
| 374 | > | ||
| 365 | <img src="../assets/images/u-info-icon.png" /> <span></span> | 375 | <img src="../assets/images/u-info-icon.png" /> <span></span> |
| 366 | </li> | 376 | </li> |
| 367 | <li> | 377 | <li> |
| 368 | <a href="javasript:void(0);">{{ userData.karmaPoints }} Karma</a> <span></span> | 378 | <a href="javasript:void(0);" content="Karma Points" v-tippy> {{ userData.karmaPoints }} Karma</a> <span></span> |
| 369 | </li> | 379 | </li> |
| 370 | <li> | 380 | <li> |
| 371 | <a href="javasript:void(0);" | 381 | <a href="javasript:void(0);" |
| 372 | >Joined on | 382 | class="no-cursor">Joined on |
| 373 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a | 383 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a |
| 374 | > | 384 | > |
| 375 | </li> | 385 | </li> |
| 376 | </ul> | 386 | </ul> |
| 377 | <p>{{ userData.bio }}</p> | 387 | <p>{{ userData.bio }}</p> |
| 378 | </div> | 388 | </div> |
| 379 | </div> | 389 | </div> |
| 380 | <!-- user profile --> | 390 | <!-- user profile --> |
| 381 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | 391 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> |
| 382 | <div class="list-style-group" v-if="userData.awards"> | 392 | <div class="list-style-group" v-if="userData.awards"> |
| 383 | <p>Awards</p> | 393 | <p>Awards</p> |
| 384 | <ul class="list-style"> | 394 | <ul class="list-style"> |
| 385 | <li> | 395 | <li> |
| 386 | <a href="javascript:void(0);" | 396 | <a href="javascript:void(0);" |
| 387 | ><img src="../assets/images/icon-1.png" | 397 | ><img src="../assets/images/icon-1.png" |
| 388 | /></a> | 398 | /></a> |
| 389 | </li> | 399 | </li> |
| 390 | </ul> | 400 | </ul> |
| 391 | </div> | 401 | </div> |
| 392 | <!-- list style --> | 402 | <!-- list style --> |
| 393 | </div> | 403 | </div> |
| 394 | </div> | 404 | </div> |
| 395 | <div class="clearfix"></div> | 405 | <div class="clearfix"></div> |
| 396 | <div class="row top-brd profile-tab-spc-top"> | 406 | <div class="row top-brd profile-tab-spc-top"> |
| 397 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | 407 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> |
| 398 | <ul class="profile-tab"> | 408 | <ul class="profile-tab"> |
| 399 | <li class="active c-0"> | 409 | <li class="active c-0"> |
| 400 | <a href="javascript:void(0);" @click="caseDialog" | 410 | <a href="javascript:void(0);" @click="caseDialog" |
| 401 | >Case-studies({{ caseStudies.length }})</a | 411 | >Case-studies({{ caseStudies.length }})</a |
| 402 | > | 412 | > |
| 403 | </li> | 413 | </li> |
| 404 | <li class="rp-all"> | 414 | <li class="rp-all"> |
| 405 | <a href="javascript:void(0);" @click="repliesDialog" | 415 | <a href="javascript:void(0);" @click="repliesDialog" |
| 406 | >Comments/Replies(0)</a | 416 | >Comments/Replies(0)</a |
| 407 | > | 417 | > |
| 408 | </li> | 418 | </li> |
| 409 | </ul> | 419 | </ul> |
| 410 | </div> | 420 | </div> |
| 411 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 421 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 412 | <ul class="social-connects"> | 422 | <ul class="social-connects"> |
| 413 | <li><span>Follow</span></li> | 423 | <li><span>Follow</span></li> |
| 414 | <li> | 424 | <li> |
| 415 | <a | 425 | <a |
| 416 | href="javascript:void(0);" | 426 | href="javascript:void(0);" |
| 417 | @click="addProfileDialog" | 427 | @click="addProfileDialog" |
| 418 | class="active" | 428 | class="active" |
| 419 | ><img src="../assets/images/plus.png" | 429 | ><img src="../assets/images/plus.png" |
| 420 | /></a> | 430 | /></a> |
| 421 | <span class="connect-social-channel" | 431 | <span class="connect-social-channel" |
| 422 | >Connect your social channels</span | 432 | >Connect your social channels</span |
| 423 | > | 433 | > |
| 424 | </li> | 434 | </li> |
| 425 | </ul> | 435 | </ul> |
| 426 | </div> | 436 | </div> |
| 427 | </div> | 437 | </div> |
| 428 | <!-- tab style --> | 438 | <!-- tab style --> |
| 429 | <div class="profile-data-wrp"> | 439 | <div class="profile-data-wrp"> |
| 430 | <div class="container-fluid data-wrp" id="case-study-0"> | 440 | <div class="container-fluid data-wrp" id="case-study-0"> |
| 431 | <div class="row" v-if="caseStudies.length == 0"> | 441 | <div class="row" v-if="caseStudies.length == 0"> |
| 432 | <div class="col-6 col-lg-6"> | 442 | <div class="col-6 col-lg-6"> |
| 433 | <div class="full-w-height-profile ex-light seats_bg" > | 443 | <div class="full-w-height-profile ex-light seats_bg" > |
| 434 | <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a> | 444 | <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a> |
| 435 | <p>Explore the spotlights others has put together</p> | 445 | <p>Explore the spotlights others has put together</p> |
| 436 | </div><!-- full width --> | 446 | </div><!-- full width --> |
| 437 | </div><!-- col 6 --> | 447 | </div><!-- col 6 --> |
| 438 | <div class="col-6 col-lg-6"> | 448 | <div class="col-6 col-lg-6"> |
| 439 | <div class="full-w-height-profile ex-light spotlight_bg"> | 449 | <div class="full-w-height-profile ex-light spotlight_bg"> |
| 440 | <img src="../assets/images/add-role.svg" class="add-role" /> | 450 | <img src="../assets/images/add-role.svg" class="add-role" /> |
| 441 | <div class="clearfix"></div><!-- clearfix --> | 451 | <div class="clearfix"></div><!-- clearfix --> |
| 442 | <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a> | 452 | <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a> |
| 443 | <p>Share your own insights through Spotlight</p> | 453 | <p>Share your own insights through Spotlight</p> |
| 444 | </div><!-- full width --> | 454 | </div><!-- full width --> |
| 445 | </div><!-- col 6 --> | 455 | </div><!-- col 6 --> |
| 446 | 456 | ||
| 447 | </div> | 457 | </div> |
| 448 | 458 | ||
| 449 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> | 459 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> |
| 450 | <div class="container-fluid data-wrp"> | 460 | <div class="container-fluid data-wrp"> |
| 451 | <div class="row"> | 461 | <div class="row"> |
| 452 | <div class="" v-for="(study, i) in caseStudies" :key="i"> | 462 | <div class="" v-for="(study, i) in caseStudies" :key="i"> |
| 453 | <div class="card-warpper" @click="openStudy(study)"> | 463 | <div class="card-warpper" @click="openStudy(study)"> |
| 454 | <div class="company-detail"> | 464 | <div class="company-detail"> |
| 455 | <div class="c-logo"> | 465 | <div class="c-logo"> |
| 456 | <!-- <img src="../assets/images/image 46.png" /> --> | 466 | <!-- <img src="../assets/images/image 46.png" /> --> |
| 457 | <img :src="study.intro.logoURL" /> | 467 | <img :src="study.intro.logoURL" /> |
| 458 | </div> | 468 | </div> |
| 459 | <div class="c-tag"> | 469 | <div class="c-tag"> |
| 460 | <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/> | 470 | <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/> |
| 461 | <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/> | 471 | <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/> |
| 462 | <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/> | 472 | <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/> |
| 463 | <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/> | 473 | <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/> |
| 464 | </div> | 474 | </div> |
| 465 | </div> | 475 | </div> |
| 466 | <!-- company detail--> | 476 | <!-- company detail--> |
| 467 | <h1>{{ study.intro.name }}</h1> | 477 | <h1>{{ study.intro.name }}</h1> |
| 468 | <div class="u-detail"> | 478 | <div class="u-detail"> |
| 469 | <img src="../assets/images/user-2.png" /> | 479 | <img src="../assets/images/user-2.png" /> |
| 470 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> | 480 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> |
| 471 | {{ name }} | 481 | {{ name }} |
| 472 | </h2> | 482 | </h2> |
| 473 | </div> | 483 | </div> |
| 474 | <!-- user detail --> | 484 | <!-- user detail --> |
| 475 | <p> | 485 | <p> |
| 476 | <span v-for="(area, j) in study.focusAreas" :key="j"> | 486 | <span v-for="(area, j) in study.focusAreas" :key="j"> |
| 477 | {{ area }} | 487 | {{ area }} |
| 478 | </span> | 488 | </span> |
| 479 | </p> | 489 | </p> |
| 480 | <ul class="tags-list" > | 490 | <ul class="tags-list" > |
| 481 | <li v-for="(tags, j) in study.insightTags" :key="j"> | 491 | <li v-for="(tags, j) in study.insightTags" :key="j"> |
| 482 | <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a> | 492 | <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a> |
| 483 | <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a> | 493 | <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a> |
| 484 | <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a> | 494 | <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a> |
| 485 | <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a> | 495 | <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a> |
| 486 | <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a> | 496 | <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a> |
| 487 | </li> | 497 | </li> |
| 488 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> | 498 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> |
| 489 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> | 499 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> |
| 490 | </ul> | 500 | </ul> |
| 491 | <div class="clearfix"></div> | 501 | <div class="clearfix"></div> |
| 492 | </div> | 502 | </div> |
| 493 | <!-- card wrpper --> | 503 | <!-- card wrpper --> |
| 494 | <!-- card wrpper --> | 504 | <!-- card wrpper --> |
| 495 | </div> | 505 | </div> |
| 496 | <!-- all card wrpper --> | 506 | <!-- all card wrpper --> |
| 497 | </div> | 507 | </div> |
| 498 | </div> | 508 | </div> |
| 499 | </div> | 509 | </div> |
| 500 | <!-- data wrp --> | 510 | <!-- data wrp --> |
| 501 | </div> | 511 | </div> |
| 502 | <!-- case study 0 --> | 512 | <!-- case study 0 --> |
| 503 | <div | 513 | <div |
| 504 | class="container-fluid data-wrp" | 514 | class="container-fluid data-wrp" |
| 505 | id="all-replies" | 515 | id="all-replies" |
| 506 | style="display: none" | 516 | style="display: none" |
| 507 | > | 517 | > |
| 508 | <div class="row"> | 518 | <div class="row"> |
| 509 | <div class="replies col-md-12"> | 519 | <div class="replies col-md-12"> |
| 510 | <div class="replies-wrp"> | 520 | <div class="replies-wrp"> |
| 511 | <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> | 521 | <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> |
| 512 | <ul class="joined-info"> | 522 | <ul class="joined-info"> |
| 513 | <li><a href="javasript:void(0);">37D</a> <span></span></li> | 523 | <li><a href="javasript:void(0);">37D</a> <span></span></li> |
| 514 | <li><img src="../assets/images/heart.png" /></li> | 524 | <li><img src="../assets/images/heart.png" /></li> |
| 515 | <li><a href="javasript:void(0);"> 4</a></li> | 525 | <li><a href="javasript:void(0);"> 4</a></li> |
| 516 | <li class="comment-spc"> | 526 | <li class="comment-spc"> |
| 517 | <img src="../assets/images/comment.svg" /> | 527 | <img src="../assets/images/comment.svg" /> |
| 518 | </li> | 528 | </li> |
| 519 | <li><a href="javasript:void(0);"> 6</a></li> | 529 | <li><a href="javasript:void(0);"> 6</a></li> |
| 520 | </ul> | 530 | </ul> |
| 521 | <p> | 531 | <p> |
| 522 | I wonder what the difference between “<strong> | 532 | I wonder what the difference between “<strong> |
| 523 | Assistant</strong | 533 | Assistant</strong |
| 524 | >” and “<strong>Pickup and Drop</strong>” are. If they are the | 534 | >” and “<strong>Pickup and Drop</strong>” are. If they are the |
| 525 | same, there are two “call to actions” for the same workflow | 535 | same, there are two “call to actions” for the same workflow |
| 526 | </p> --> | 536 | </p> --> |
| 527 | </div> | 537 | </div> |
| 528 | <!-- replies wrapper --> | 538 | <!-- replies wrapper --> |
| 529 | </div> | 539 | </div> |
| 530 | <!-- all card wrpper --> | 540 | <!-- all card wrpper --> |
| 531 | </div> | 541 | </div> |
| 532 | </div> | 542 | </div> |
| 533 | <!-- all Relpies --> | 543 | <!-- all Relpies --> |
| 534 | </div> | 544 | </div> |
| 535 | <!-- data wrp --> | 545 | <!-- data wrp --> |
| 536 | <!-- body wrapper --> | 546 | <!-- body wrapper --> |
| 537 | </div> | 547 | </div> |
| 538 | </main> | 548 | </main> |
| 539 | </template> | 549 | </template> |
| 540 | 550 | ||
| 541 | <script> | 551 | <script> |
| 542 | import Vue from "vue"; | 552 | import Vue from "vue"; |
| 543 | import router from "../router"; | 553 | import router from "../router"; |
| 544 | import $ from "jquery"; | 554 | import $ from "jquery"; |
| 545 | import axios from "axios"; | 555 | import axios from "axios"; |
| 546 | 556 | ||
| 547 | export default { | 557 | export default { |
| 548 | name: "Profile", | 558 | name: "Profile", |
| 549 | 559 | ||
| 550 | data() { | 560 | data() { |
| 551 | return { | 561 | return { |
| 552 | loggedinFlag: false, | 562 | loggedinFlag: false, |
| 553 | usertoken: null, | 563 | usertoken: null, |
| 554 | userData: {}, | 564 | userData: {}, |
| 555 | caseStudies: [], | 565 | caseStudies: [], |
| 556 | interestName: null, | 566 | interestName: null, |
| 557 | oldId: null, | 567 | oldId: null, |
| 558 | socialLink: null, | 568 | socialLink: null, |
| 559 | currentSocialLinkName: null, | 569 | currentSocialLinkName: null, |
| 560 | }; | 570 | }; |
| 561 | }, | 571 | }, |
| 562 | mounted() { | 572 | mounted() { |
| 563 | this.userData = {}; | 573 | this.userData = {}; |
| 564 | this.socialLink = []; | 574 | this.socialLink = []; |
| 565 | this.userData.interests = []; | 575 | this.userData.interests = []; |
| 566 | this.userData.socialMediaProfiles = {}; | 576 | this.userData.socialMediaProfiles = {}; |
| 577 | this.userData.designation = ""; | ||
| 578 | this.userData.organisation = ""; | ||
| 567 | this.userData.socialMediaProfiles.facebook = null; | 579 | this.userData.socialMediaProfiles.facebook = null; |
| 568 | this.userData.socialMediaProfiles.linkedin = null; | 580 | this.userData.socialMediaProfiles.linkedin = null; |
| 569 | var userdata = localStorage.getItem("spotlight_usertoken"); | 581 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 570 | if (userdata) { | 582 | if (userdata) { |
| 571 | userdata = JSON.parse(userdata); | 583 | userdata = JSON.parse(userdata); |
| 572 | this.usertoken = userdata.token; | 584 | this.usertoken = userdata.token; |
| 573 | this.getProfile(); | 585 | this.getProfile(); |
| 574 | this.getCaseStudies(); | 586 | this.getCaseStudies(); |
| 575 | } | 587 | } |
| 576 | }, | 588 | }, |
| 577 | methods: { | 589 | methods: { |
| 578 | goToSignUp() { | 590 | goToSignUp() { |
| 579 | this.$router.push("/signup"); | 591 | this.$router.push("/signup"); |
| 580 | }, | 592 | }, |
| 581 | goToReset() { | 593 | goToReset() { |
| 582 | this.$router.push("/reset"); | 594 | this.$router.push("/reset"); |
| 583 | }, | 595 | }, |
| 584 | logout() { | 596 | logout() { |
| 585 | this.$router.push("/"); | 597 | this.$router.push("/"); |
| 586 | }, | 598 | }, |
| 587 | addSocialLink(obj) { | 599 | addSocialLink(obj) { |
| 588 | this.socialLink.push(); | 600 | this.socialLink.push(); |
| 589 | }, | 601 | }, |
| 590 | addInterest() { | 602 | addInterest() { |
| 591 | console.log(this.userData.interests.length, "called", this.interestName); | 603 | console.log(this.userData.interests.length, "called", this.interestName); |
| 592 | if (this.userData.interests.length <= 2) { | 604 | if (this.userData.interests.length <= 2) { |
| 593 | this.userData.interests.push(this.interestName); | 605 | this.userData.interests.push(this.interestName); |
| 594 | this.interestName = null; | 606 | this.interestName = null; |
| 595 | } else { | 607 | } else { |
| 596 | this.$toaster.info("Only 3 interest are allowed"); | 608 | this.$toaster.info("Only 3 interest are allowed"); |
| 597 | } | 609 | } |
| 598 | }, | 610 | }, |
| 599 | removeInterest(i) { | 611 | removeInterest(i) { |
| 600 | this.userData.interests.splice(i, 1); | 612 | this.userData.interests.splice(i, 1); |
| 601 | }, | 613 | }, |
| 602 | assignClass() { | 614 | assignClass() { |
| 603 | var element = document.getElementById(this.userData.bgColor); | 615 | var element = document.getElementById(this.userData.bgColor); |
| 604 | element.classList.add("active"); | 616 | element.classList.add("active"); |
| 605 | var cols = document.getElementsByClassName("common_color"); | 617 | var cols = document.getElementsByClassName("common_color"); |
| 606 | for (var i = 0; i < cols.length; i++) { | 618 | for (var i = 0; i < cols.length; i++) { |
| 607 | cols[i].style.backgroundColor = this.userData.bgColor; | 619 | cols[i].style.backgroundColor = this.userData.bgColor; |
| 608 | } | 620 | } |
| 609 | }, | 621 | }, |
| 610 | changeColor(clr) { | 622 | changeColor(clr) { |
| 611 | console.log(this.oldId, "clr", clr); | 623 | console.log(this.oldId, "clr", clr); |
| 612 | var element = document.getElementById(clr); | 624 | var element = document.getElementById(clr); |
| 613 | element.classList.add("active"); | 625 | element.classList.add("active"); |
| 614 | var removeelement = document.getElementById(this.oldId); | 626 | var removeelement = document.getElementById(this.oldId); |
| 615 | removeelement.classList.remove("active"); | 627 | removeelement.classList.remove("active"); |
| 616 | this.oldId = clr; | 628 | this.oldId = clr; |
| 617 | var cols = document.getElementsByClassName("common_color"); | 629 | var cols = document.getElementsByClassName("common_color"); |
| 618 | for (var i = 0; i < cols.length; i++) { | 630 | for (var i = 0; i < cols.length; i++) { |
| 619 | cols[i].style.backgroundColor = clr; | 631 | cols[i].style.backgroundColor = clr; |
| 620 | } | 632 | } |
| 621 | this.userData.bgColor = clr; | 633 | this.userData.bgColor = clr; |
| 622 | }, | 634 | }, |
| 623 | getProfile() { | 635 | getProfile() { |
| 624 | axios | 636 | axios |
| 625 | .get("/profile", { | 637 | .get("/profile", { |
| 626 | headers: { | 638 | headers: { |
| 627 | Authorization: "Bearer " + this.usertoken, | 639 | Authorization: "Bearer " + this.usertoken, |
| 628 | }, | 640 | }, |
| 629 | }) | 641 | }) |
| 630 | .then((response) => { | 642 | .then((response) => { |
| 631 | this.userData = response.data.data; | 643 | this.userData = response.data.data; |
| 632 | if (!this.userData.socialMediaProfiles) { | 644 | if (!this.userData.socialMediaProfiles) { |
| 633 | this.userData.socialMediaProfiles = {}; | 645 | this.userData.socialMediaProfiles = {}; |
| 634 | } | 646 | } |
| 635 | this.oldId = this.userData.bgColor; | 647 | this.oldId = this.userData.bgColor; |
| 636 | console.log(this.oldId, "this.userData.", this.userData.bgColor); | 648 | console.log(this.oldId, "this.userData.", this.userData.bgColor); |
| 637 | 649 | ||
| 638 | this.assignClass(); | 650 | this.assignClass(); |
| 639 | console.log(response.data.data); | 651 | console.log(response.data.data); |
| 640 | }) | 652 | }) |
| 641 | .catch((error) => console.log(error)); | 653 | .catch((error) => console.log(error)); |
| 642 | }, | 654 | }, |
| 643 | getRandomAvatar() { | 655 | getRandomAvatar() { |
| 644 | axios | 656 | axios |
| 645 | .get("/randomAvatar", { | 657 | .get("/randomAvatar", { |
| 646 | headers: { | 658 | headers: { |
| 647 | Authorization: "Bearer " + this.usertoken, | 659 | Authorization: "Bearer " + this.usertoken, |
| 648 | }, | 660 | }, |
| 649 | }) | 661 | }) |
| 650 | .then((response) => { | 662 | .then((response) => { |
| 651 | this.userData.profilePic = response.data.imageURL; | 663 | this.userData.profilePic = response.data.imageURL; |
| 652 | console.log(response.data.imageURL); | 664 | console.log(response.data.imageURL); |
| 653 | }) | 665 | }) |
| 654 | .catch((error) => console.log(error)); | 666 | .catch((error) => console.log(error)); |
| 655 | }, | 667 | }, |
| 656 | getCaseStudies() { | 668 | getCaseStudies() { |
| 657 | axios | 669 | axios |
| 658 | .get("/caseStudy/all", { | 670 | .get("/caseStudy/all", { |
| 659 | headers: { | 671 | headers: { |
| 660 | Authorization: "Bearer " + this.usertoken, | 672 | Authorization: "Bearer " + this.usertoken, |
| 661 | }, | 673 | }, |
| 662 | }) | 674 | }) |
| 663 | .then((response) => { | 675 | .then((response) => { |
| 664 | console.log(response.data.data.caseStudies); | 676 | console.log(response.data.data.caseStudies); |
| 665 | this.caseStudies = response.data.data.caseStudies; | 677 | this.caseStudies = response.data.data.caseStudies; |
| 666 | }) | 678 | }) |
| 667 | .catch((error) => console.log(error)); | 679 | .catch((error) => console.log(error)); |
| 668 | }, | 680 | }, |
| 669 | openStudy(payload) { | 681 | openStudy(payload) { |
| 670 | console.log("payload-", payload); | 682 | console.log("payload-", payload); |
| 671 | payload.intro.date = payload.createdAt; | 683 | payload.intro.date = payload.createdAt; |
| 684 | payload.intro.focusPoint = payload.createdAt; | ||
| 672 | axios | 685 | axios |
| 673 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 686 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 674 | headers: { | 687 | headers: { |
| 675 | Authorization: "Bearer " + this.usertoken, | 688 | Authorization: "Bearer " + this.usertoken, |
| 676 | }, | 689 | }, |
| 677 | }) | 690 | }) |
| 678 | .then((response) => { | 691 | .then((response) => { |
| 679 | this.createSlide(payload, response.data.data); | 692 | this.createSlide(payload, response.data.data); |
| 680 | }) | 693 | }) |
| 681 | .catch((error) => console.log(error)); | 694 | .catch((error) => console.log(error)); |
| 682 | }, | 695 | }, |
| 683 | 696 | ||
| 684 | createSlide(payload, slides) { | 697 | createSlide(payload, slides) { |
| 685 | var finalSlides = []; | 698 | var finalSlides = []; |
| 686 | slides.forEach((slides_) => { | 699 | slides.forEach((slides_) => { |
| 687 | var url = this.assignRoutes(slides_.templateId); | 700 | var url = this.assignRoutes(slides_.templateId); |
| 688 | var obj = { | 701 | var obj = { |
| 689 | forward: true, | 702 | forward: true, |
| 690 | backward: true, | 703 | backward: true, |
| 691 | ur: url, | 704 | ur: url, |
| 692 | slideId: slides_._id, | 705 | slideId: slides_._id, |
| 693 | caseStudyId: slides_.caseStudyId, | 706 | caseStudyId: slides_.caseStudyId, |
| 694 | payload: { | 707 | payload: { |
| 695 | metaData: slides_.metaData, | 708 | metaData: slides_.metaData, |
| 696 | comments: slides_.comments, | 709 | comments: slides_.comments, |
| 697 | insight: slides_.insight?slides_.insight:null, | 710 | insight: slides_.insight?slides_.insight:null, |
| 698 | }, | 711 | }, |
| 699 | }; | 712 | }; |
| 700 | // slides_ | 713 | // slides_ |
| 701 | finalSlides.push(obj); | 714 | finalSlides.push(obj); |
| 702 | }); | 715 | }); |
| 703 | console.log("payload", payload); | 716 | console.log("payload", payload); |
| 704 | // add first slide at begining | 717 | // add first slide at begining |
| 705 | finalSlides.unshift({ | 718 | finalSlides.unshift({ |
| 706 | forward: true, | 719 | forward: true, |
| 707 | backward: false, | 720 | backward: false, |
| 708 | ur: "EpisodeIntro", | 721 | ur: "EpisodeIntro", |
| 709 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 722 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 710 | caseStudyId: payload._id, | 723 | caseStudyId: payload._id, |
| 711 | payload: { | 724 | payload: { |
| 712 | metaData: payload.intro, | 725 | metaData: payload.intro, |
| 713 | comments: [], | 726 | comments: [], |
| 714 | }, | 727 | }, |
| 715 | }); | 728 | }); |
| 716 | finalSlides.push({ | 729 | finalSlides.push({ |
| 717 | forward: true, | 730 | forward: true, |
| 718 | backward: false, | 731 | backward: false, |
| 719 | ur: "Outro", | 732 | ur: "Outro", |
| 720 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 733 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 721 | caseStudyId: payload._id, | 734 | caseStudyId: payload._id, |
| 722 | payload: { | 735 | payload: { |
| 723 | metaData: payload.outro, | 736 | metaData: payload.outro, |
| 724 | comments: [], | 737 | comments: [], |
| 725 | }, | 738 | }, |
| 726 | }); | 739 | }); |
| 727 | 740 | ||
| 728 | console.log(finalSlides); | 741 | console.log(finalSlides); |
| 729 | localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides)) | 742 | localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides)) |
| 730 | this.$router.push({ | 743 | this.$router.push({ |
| 731 | name: "EpisodeIntro", | 744 | name: "EpisodeIntro", |
| 732 | params: { | 745 | params: { |
| 733 | caseStudyId: finalSlides[0].caseStudyId, | 746 | caseStudyId: finalSlides[0].caseStudyId, |
| 734 | slideId: finalSlides[0].slideId, | 747 | slideId: finalSlides[0].slideId, |
| 735 | }, | 748 | }, |
| 736 | }); | 749 | }); |
| 737 | }, | 750 | }, |
| 738 | assignRoutes(tempId) { | 751 | assignRoutes(tempId) { |
| 739 | // /episode-intro | 752 | // /episode-intro |
| 740 | // /outro | 753 | // /outro |
| 741 | var routes = [ | 754 | var routes = [ |
| 742 | { | 755 | { |
| 743 | url: "AuthorIntro", | 756 | url: "AuthorIntro", |
| 744 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 757 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 745 | }, | 758 | }, |
| 746 | { | 759 | { |
| 747 | url: "NoScreenshotSingleAuthor", | 760 | url: "NoScreenshotSingleAuthor", |
| 748 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 761 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 749 | }, | 762 | }, |
| 750 | { | 763 | { |
| 751 | url: "SingleMobileScreenInsightTwo", | 764 | url: "SingleMobileScreenInsightTwo", |
| 752 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 765 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 753 | }, | 766 | }, |
| 754 | { | 767 | { |
| 755 | url: "TwoScreenWithoutInsight", | 768 | url: "TwoScreenWithoutInsight", |
| 756 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 769 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 757 | }, | 770 | }, |
| 758 | { | 771 | { |
| 759 | url: "noscreenshotSingleautho", | 772 | url: "noscreenshotSingleautho", |
| 760 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 773 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 761 | }, | 774 | }, |
| 762 | { | 775 | { |
| 763 | url: "SingleMobileScreenInsightOne", | 776 | url: "SingleMobileScreenInsightOne", |
| 764 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 777 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 765 | }, | 778 | }, |
| 766 | { | 779 | { |
| 767 | url: "TwoScreenWithInsight", | 780 | url: "TwoScreenWithInsight", |
| 768 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 781 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 769 | }, | 782 | }, |
| 770 | ]; | 783 | ]; |
| 771 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 784 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 772 | return routes[i].url; | 785 | return routes[i].url; |
| 773 | }, | 786 | }, |
| 774 | saveProfile() { | 787 | saveProfile() { |
| 775 | var obj = {}; | 788 | var obj = {}; |
| 776 | this.userData.name = | 789 | this.userData.name = |
| 777 | this.userData.firstName + " " + this.userData.lastName; | 790 | this.userData.firstName + " " + this.userData.lastName; |
| 778 | obj = Object.assign(obj, this.userData); | 791 | obj = Object.assign(obj, this.userData); |
| 779 | // if(!obj.socialMediaProfiles){ | 792 | // if(!obj.socialMediaProfiles){ |
| 780 | // obj.socialMediaProfiles = {}; | 793 | // obj.socialMediaProfiles = {}; |
| 781 | // } | 794 | // } |
| 782 | delete obj.createdAt; | 795 | delete obj.createdAt; |
| 783 | delete obj.email; | 796 | delete obj.email; |
| 784 | delete obj.role; | 797 | delete obj.role; |
| 785 | delete obj.verified; | 798 | delete obj.verified; |
| 786 | delete obj.updatedAt; | 799 | delete obj.updatedAt; |
| 787 | delete obj.__v; | 800 | delete obj.__v; |
| 788 | delete obj._id; | 801 | delete obj._id; |
| 789 | delete obj.karmaPoints; | 802 | delete obj.karmaPoints; |
| 790 | delete obj.awards; | 803 | delete obj.awards; |
| 791 | delete obj.socialLogin; | 804 | delete obj.socialLogin; |
| 792 | axios | 805 | axios |
| 793 | .put("/profile", obj, { | 806 | .put("/profile", obj, { |
| 794 | headers: { | 807 | headers: { |
| 795 | Authorization: "Bearer " + this.usertoken, | 808 | Authorization: "Bearer " + this.usertoken, |
| 796 | }, | 809 | }, |
| 797 | }) | 810 | }) |
| 798 | .then((response) => { | 811 | .then((response) => { |
| 799 | // this.userData = response.data.data; | 812 | // this.userData = response.data.data; |
| 800 | this.$toaster.success("Profile Updated"); | 813 | this.$toaster.success("Profile Updated"); |
| 801 | 814 | this.closeDialog(); | |
| 802 | console.log(response.data.data); | 815 | console.log(response.data.data); |
| 803 | }) | 816 | }) |
| 804 | .catch((error) => { | 817 | .catch((error) => { |
| 805 | if (error.response) { | 818 | if (error.response) { |
| 806 | this.$toaster.error(error.response.data.message); | 819 | this.$toaster.error(error.response.data.message); |
| 807 | } | 820 | } |
| 808 | }); | 821 | }); |
| 809 | }, | 822 | }, |
| 810 | addProfileDialog() { | 823 | addProfileDialog() { |
| 811 | $(".inner-wrp").addClass("body-blur"); | 824 | $(".inner-wrp").addClass("body-blur"); |
| 812 | $("#add-social-links").hide(); | 825 | $("#add-social-links").hide(); |
| 813 | $(".popup-wrp, #add-profile").show(); | 826 | $(".popup-wrp, #add-profile").show(); |
| 814 | }, | 827 | }, |
| 815 | nextProfileDialog() { | 828 | nextProfileDialog() { |
| 816 | $("#add-profile").hide(); | 829 | $("#add-profile").hide(); |
| 817 | $("#add-social-links").show(); | 830 | $("#add-social-links").show(); |
| 818 | this.saveProfile(); | 831 | this.saveProfile(); |
| 819 | }, | 832 | }, |
| 820 | closeDialog() { | 833 | closeDialog() { |
| 821 | $(".popup-wrp").hide(); | 834 | $(".popup-wrp").hide(); |
| 822 | $(".inner-wrp").removeClass("body-blur"); | 835 | $(".inner-wrp").removeClass("body-blur"); |
| 823 | this.saveProfile(); | 836 | // this.saveProfile(); |
| 824 | }, | 837 | }, |
| 825 | hideDialog() { | 838 | hideDialog() { |
| 826 | $(".popup-wrp").hide(); | 839 | $(".popup-wrp").hide(); |
| 827 | $(".inner-wrp").removeClass("body-blur"); | 840 | $(".inner-wrp").removeClass("body-blur"); |
| 828 | }, | 841 | }, |
| 829 | /// | 842 | /// |
| 830 | caseDialog() { | 843 | caseDialog() { |
| 831 | $(".rp-all").removeClass("active"); | 844 | $(".rp-all").removeClass("active"); |
| 832 | $(".c-0").addClass("active"); | 845 | $(".c-0").addClass("active"); |
| 833 | $("#all-replies").hide(); | 846 | $("#all-replies").hide(); |
| 834 | $("#case-study-0").show(); | 847 | $("#case-study-0").show(); |
| 835 | }, | 848 | }, |
| 836 | repliesDialog() { | 849 | repliesDialog() { |
| 837 | $(".c-0").removeClass("active"); | 850 | $(".c-0").removeClass("active"); |
| 838 | $(".rp-all").addClass("active"); | 851 | $(".rp-all").addClass("active"); |
| 839 | $("#case-study-0").hide(); | 852 | $("#case-study-0").hide(); |
| 840 | $("#all-replies").show(); | 853 | $("#all-replies").show(); |
| 841 | }, | 854 | }, |
| 842 | 855 | ||
| 843 | userprofileshowDialog() { | 856 | userprofileshowDialog() { |
| 844 | $("#userprofileshow").toggle(); | 857 | $("#userprofileshow").toggle(); |
| 845 | }, | 858 | }, |
| 846 | openUrl(url){ | 859 | openUrl(url){ |
| 847 | window.open(url); | 860 | window.open(url); |
| 848 | }, | 861 | }, |
| 849 | }, | 862 | }, |
| 850 | }; | 863 | }; |
| 851 | </script> | 864 | </script> |
| 865 | <style> | ||
| 866 | .no-cursor{ | ||
| 867 | cursor: default !important; | ||
| 868 | } | ||
| 869 | </style> | ||
| 852 | 870 |
src/main.js
| 1 | // The Vue build version to load with the `import` command | 1 | // The Vue build version to load with the `import` command |
| 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. | 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. |
| 3 | import Vue from 'vue' | 3 | import Vue from 'vue' |
| 4 | import App from './App' | 4 | import App from './App' |
| 5 | import router from './router' | 5 | import router from './router' |
| 6 | import axios from 'axios' | 6 | import axios from 'axios' |
| 7 | 7 | ||
| 8 | // Import the Auth0 configuration | 8 | // Import the Auth0 configuration |
| 9 | import { domain, clientId } from "../auth_config.json" | 9 | import { domain, clientId } from "../auth_config.json" |
| 10 | 10 | ||
| 11 | // Import the plugin here | 11 | // Import the plugin here |
| 12 | import { Auth0Plugin } from "./auth" | 12 | import { Auth0Plugin } from "./auth" |
| 13 | import Vuelidate from 'vuelidate' | 13 | import Vuelidate from 'vuelidate' |
| 14 | import moment from 'moment' | 14 | import moment from 'moment' |
| 15 | import Toaster from 'v-toaster' | 15 | import Toaster from 'v-toaster' |
| 16 | import StarRating from 'vue-star-rating' | 16 | import StarRating from 'vue-star-rating' |
| 17 | 17 | ||
| 18 | import VueTippy, { TippyComponent } from "vue-tippy"; | ||
| 18 | 19 | ||
| 20 | Vue.use(VueTippy); | ||
| 21 | Vue.component("tippy", TippyComponent); | ||
| 19 | // You need a specific loader for CSS files like https://github.com/webpack/css-loader | 22 | // You need a specific loader for CSS files like https://github.com/webpack/css-loader |
| 20 | import 'v-toaster/dist/v-toaster.css' | 23 | import 'v-toaster/dist/v-toaster.css' |
| 21 | 24 | ||
| 22 | // optional set default imeout, the default is 10000 (10 seconds). | 25 | // optional set default imeout, the default is 10000 (10 seconds). |
| 23 | Vue.use(Toaster, {timeout: 5000}) | 26 | Vue.use(Toaster, {timeout: 5000}) |
| 24 | Vue.use(Vuelidate) | 27 | Vue.use(Vuelidate) |
| 25 | // Install the authentication plugin here | 28 | // Install the authentication plugin here |
| 26 | Vue.use(Auth0Plugin, { | 29 | Vue.use(Auth0Plugin, { |
| 27 | domain, | 30 | domain, |
| 28 | clientId, | 31 | clientId, |
| 29 | redirect: false, | 32 | redirect: false, |
| 30 | onRedirectCallback: appState => { | 33 | onRedirectCallback: appState => { |
| 31 | router.push( | 34 | router.push( |
| 32 | appState && appState.targetUrl ? | 35 | appState && appState.targetUrl ? |
| 33 | appState.targetUrl : | 36 | appState.targetUrl : |
| 34 | window.location.pathname | 37 | window.location.pathname |
| 35 | ); | 38 | ); |
| 36 | } | 39 | } |
| 37 | }); | 40 | }); |
| 38 | 41 | ||
| 39 | Vue.config.productionTip = false | 42 | Vue.config.productionTip = false |
| 40 | 43 | // https://api.productgrowth.org/pg | |
| 44 | // http://174.138.121.70:3006/pg | ||
| 41 | Vue.prototype.moment = moment | 45 | Vue.prototype.moment = moment |
| 42 | axios.defaults.baseURL = 'https://api.productgrowth.org/pg' | 46 | axios.defaults.baseURL = 'https://api.productgrowth.org/pg' |
| 43 | Vue.component('star-rating', VueStarRating.default); | 47 | Vue.component('star-rating', VueStarRating.default); |
| 44 | 48 | ||
| 45 | /* eslint-disable no-new */ | 49 | /* eslint-disable no-new */ |
| 46 | new Vue({ | 50 | new Vue({ |
| 47 | el: '#app', | 51 | el: '#app', |
| 48 | router, | 52 | router, |
| 49 | components: { App }, | 53 | components: { App }, |
| 50 | template: '<App/>' | 54 | template: '<App/>' |
| 51 | }) | 55 | }) |