├── pages
    ├── workshop
    │   ├── done.vue
    │   └── index.vue
    ├── reward
    │   ├── done.vue
    │   └── index.vue
    ├── README.md
    ├── inspire.vue
    ├── survey
    │   ├── done.vue
    │   ├── step2.vue
    │   ├── index.vue
    │   └── step3.vue
    ├── register
    │   ├── done.vue
    │   ├── index.vue
    │   └── step2.vue
    ├── index.vue
    └── agenda
    │   └── index.vue
├── .vscode
    └── settings.json
├── assets
    ├── qr.png
    ├── gift.png
    ├── profile.png
    ├── reward.png
    ├── survey.png
    ├── welcome.png
    ├── richmenu.png
    ├── workshop.png
    ├── plus.svg
    ├── README.md
    └── variables.scss
├── static
    ├── v.png
    ├── favicon.ico
    ├── README.md
    └── vuetify-logo.svg
├── components
    ├── README.md
    ├── VuetifyLogo.vue
    ├── Dialog.vue
    ├── Logo.vue
    └── Card.vue
├── jsconfig.json
├── .editorconfig
├── layouts
    ├── README.md
    ├── error.vue
    └── default.vue
├── plugins
    └── README.md
├── middleware
    └── README.md
├── store
    ├── README.md
    └── index.js
├── README.md
├── package.json
├── .gitignore
└── nuxt.config.js


/pages/workshop/done.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "deno.enable": false
3 | }


--------------------------------------------------------------------------------
/pages/reward/done.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Done</div>
3 | </template>


--------------------------------------------------------------------------------
/assets/qr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/qr.png


--------------------------------------------------------------------------------
/static/v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/static/v.png


--------------------------------------------------------------------------------
/assets/gift.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/gift.png


--------------------------------------------------------------------------------
/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/profile.png


--------------------------------------------------------------------------------
/assets/reward.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/reward.png


--------------------------------------------------------------------------------
/assets/survey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/survey.png


--------------------------------------------------------------------------------
/assets/welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/welcome.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/assets/richmenu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/richmenu.png


--------------------------------------------------------------------------------
/assets/workshop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/nuxt-tutor/HEAD/assets/workshop.png


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/assets/plus.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="11.5" height="11.5" viewBox="0 0 11.5 11.5"><defs><style>.a{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.5 0.5)"><path class="a" d="M5.66,4.84V0H4.84V4.84H0v.82H4.84V10.5h.82V5.66H10.5V4.84Z"/></g></svg>


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/components/VuetifyLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img
 3 |     class="VuetifyLogo"
 4 |     alt="Vuetify Logo"
 5 |     src="/vuetify-logo.svg"
 6 |   >
 7 | </template>
 8 | 
 9 | <style>
10 | .VuetifyLogo {
11 |   height:180px;
12 |   width: 180px;
13 |   transform: rotateY(560deg);
14 |   animation: turn 3.5s ease-out forwards 1s;
15 | }
16 | 
17 | @keyframes turn {
18 |   100% {
19 |     transform: rotateY(0deg);
20 |   }
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/assets/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
 2 | //
 3 | // The variables you want to modify
 4 | // $font-size-root: 20px;
 5 | // .v-application{
 6 | //   .headline, .title, .caption, .overline{
 7 | //     font-family: 'Quicksand', sans-serif !important;  
 8 | //   }  
 9 | //   [class*="display-"],[class*="subtitle-"],[class*="body-"]{
10 | //     font-family: 'Quicksand', sans-serif !important;  
11 | //   }
12 | // }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tutor-nuxt
 2 | 
 3 | > My praiseworthy Nuxt.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ```bash
 8 | # install dependencies
 9 | $ yarn install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ yarn dev
13 | 
14 | # build for production and launch server
15 | $ yarn build
16 | $ yarn start
17 | 
18 | # generate static project
19 | $ yarn generate
20 | ```
21 | 
22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
23 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/pages/inspire.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-layout>
 3 |     <v-flex class="text-center">
 4 |       <img
 5 |         src="/v.png"
 6 |         alt="Vuetify.js"
 7 |         class="mb-5"
 8 |       >
 9 |       <blockquote class="blockquote">
10 |         &#8220;First, solve the problem. Then, write the code.&#8221;
11 |         <footer>
12 |           <small>
13 |             <em>&mdash;John Johnson</em>
14 |           </small>
15 |         </footer>
16 |       </blockquote>
17 |     </v-flex>
18 |   </v-layout>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tutor-nuxt",
 3 |   "version": "1.0.0",
 4 |   "description": "My praiseworthy Nuxt.js project",
 5 |   "author": "Songklod Saengvoratip",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "nuxt": "^2.0.0",
15 |     "@nuxtjs/axios": "^5.3.6",
16 |     "@nuxtjs/dotenv": "^1.4.0"
17 |   },
18 |   "devDependencies": {
19 |     "@nuxtjs/vuetify": "^1.0.0"
20 |   }
21 | }


--------------------------------------------------------------------------------
/static/vuetify-logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app dark>
 3 |     <h1 v-if="error.statusCode === 404">
 4 |       {{ pageNotFound }}
 5 |     </h1>
 6 |     <h1 v-else>
 7 |       {{ otherError }}
 8 |     </h1>
 9 |     <NuxtLink to="/">
10 |       Home page
11 |     </NuxtLink>
12 |   </v-app>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   layout: 'empty',
18 |   props: {
19 |     error: {
20 |       type: Object,
21 |       default: null
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       pageNotFound: '404 Not Found',
27 |       otherError: 'An error occurred'
28 |     }
29 |   },
30 |   head () {
31 |     const title =
32 |       this.error.statusCode === 404 ? this.pageNotFound : this.otherError
33 |     return {
34 |       title
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style scoped>
41 | h1 {
42 |   font-size: 20px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/components/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog
 3 |     v-model="getDialog.isShow"
 4 |     max-width="290"
 5 |     persistent
 6 |   >
 7 |     <v-card>
 8 |       <v-card-title>{{ getDialog.title }}</v-card-title>
 9 |       <v-card-text v-html="getDialog.message"></v-card-text>
10 |       <v-card-actions>
11 |           <v-spacer></v-spacer>
12 |           <v-btn
13 |             color="green darken-1"
14 |             text
15 |             @click="hideDialog"
16 |           >
17 |             Close
18 |           </v-btn>
19 |         </v-card-actions>
20 |     </v-card>
21 |   </v-dialog>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   computed: {
27 |     getDialog(){
28 |       return this.$store.getters.getDialog
29 |     }
30 |   },
31 |   methods: {
32 |     hideDialog(){
33 |       this.$store.dispatch('setDialog', {
34 |         isShow: false,
35 |         title: '',
36 |         message: ''
37 |       })
38 |     }
39 |   } 
40 | }
41 | </script>


--------------------------------------------------------------------------------
/pages/survey/done.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-app-bar
 4 |       color="primary"
 5 |       dense
 6 |       flat
 7 |       dark
 8 |     >
 9 |       <v-toolbar-title>Survey</v-toolbar-title>
10 |     </v-app-bar>
11 |     <v-container class="pt-0 pb-0">
12 |       <v-row>
13 |         <v-col cols="12">
14 |           <div class="set-padding">
15 |             <div class="text-center mt-10">
16 |               <img src="~/assets/survey.png" alt="" width="236px">
17 |               <h1 class="text-title mt-4">Thank you</h1>
18 |               <p class="mt-7">
19 |                 Thanks for completing this survey,<br/> your feedback will help us improve the<br/> next event.
20 |               </p>
21 |             </div>            
22 |             <div class="w-100 text-center my-btn outlined text-primary mt-100" @click="close">Close</div>                    
23 |           </div>
24 |         </v-col>
25 |       </v-row>
26 |     </v-container>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   methods:{
33 |     close(){
34 | 
35 |     }
36 |   }
37 | }
38 | </script>


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <nuxt></nuxt>
 4 |     <Dialog/>
 5 |   </v-app>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Dialog from '~/components/Dialog'
10 | 
11 | export default {
12 |   components: {
13 |     Dialog
14 |   }
15 | }
16 | </script>
17 | 
18 | <style lang="scss">
19 |   .v-application{
20 |     font-family: 'Quicksand', sans-serif;
21 |   }
22 |   .v-toolbar__title{
23 |     text-align: center;
24 |     width: 100%;
25 |     font-weight: bold;
26 |   }
27 |   .v-application .primary{
28 |     background-color: #1A56BE !important;
29 |     border-color: #1A56BE !important;
30 |   }
31 |   .text-primary{
32 |     color: #1A56BE !important;
33 |   }
34 |   .bold{
35 |     font-weight: bold;
36 |   }
37 |   .text-main{
38 |     font-size: 20px;
39 |   }
40 |   .text-title{
41 |     font-size: 20px;
42 |     font-weight: bold;
43 |   }
44 |   .w-100{
45 |     width: 100%;
46 |   }
47 |   .my-btn{
48 |     font-size: 20px !important;
49 |     text-transform: none !important;
50 |     height: auto !important;
51 |     padding: 10px 0 !important;
52 |     font-weight: bold;
53 |     min-height: 50px;
54 |     &.outlined{
55 |       border: 1px solid #1A56BE;
56 |       border-radius: 28px;
57 |       line-height: normal;
58 |     }
59 |   }
60 |   .mt-100{
61 |     margin-top: 100px;
62 |   }
63 |   .set-padding{
64 |     padding: 0 10px;
65 |   }
66 | </style>


--------------------------------------------------------------------------------
/pages/register/done.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-app-bar
 4 |       color="primary"
 5 |       dense
 6 |       flat
 7 |       dark
 8 |     >
 9 |       <v-toolbar-title>Register</v-toolbar-title>
10 |     </v-app-bar>
11 |     <v-container class="pt-0 pb-0">
12 |       <v-row>
13 |         <v-col cols="12">
14 |           <div class="set-padding">
15 |             <div class="text-center mt-10">
16 |               <img src="~/assets/welcome.png" alt="" width="236px">
17 |               <h1 class="text-title">Welcome, {{ name }}</h1>
18 |               <p class="mt-7">
19 |                 Welcome to the event,<br/>Tons of workshop are waiting for you.<br/> We hope you have a good time here.
20 |               </p>
21 |             </div>
22 |             <v-btn rounded color="primary" dark class="w-100 mt-10 my-btn" @click="workshop">Register Workshop</v-btn>
23 |             <div class="w-100 text-center my-btn outlined text-primary mt-5" @click="close">Close</div>                    
24 |           </div>
25 |         </v-col>
26 |       </v-row>
27 |     </v-container>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {  
33 |   data(){
34 |     return {
35 |       name: this.$store.getters.getRegister.firstname
36 |     }
37 |   },
38 |   methods: {
39 |     workshop(){
40 |       this.$router.push('workshop')
41 |     },
42 |     close(){
43 |       liff.closeWindow();
44 |     }
45 |   }
46 | }
47 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two" />
 4 |     <div class="Triangle Triangle--one" />
 5 |     <div class="Triangle Triangle--three" />
 6 |     <div class="Triangle Triangle--four" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41b883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3b8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495e;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/pages/survey/step2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-app-bar
 4 |       color="primary"
 5 |       dense
 6 |       flat
 7 |       dark
 8 |     >
 9 |       <v-toolbar-title>Survey</v-toolbar-title>
10 |     </v-app-bar>
11 |     <v-container class="pt-0 pb-0">
12 |       <v-row>
13 |         <v-col cols="12">          
14 |           <div class="mt-8 text-primary text-title text-center">
15 |             Step 2 of 3
16 |           </div>
17 |         </v-col>
18 |       </v-row>
19 |       <v-row justify="center">
20 |         <v-col cols="10">
21 |           <h2 class="text-center mt-1 question">Which parts of the event did you enjoy?</h2>
22 |         </v-col>
23 |         <v-col cols="10">  
24 |           <v-textarea
25 |             clearable
26 |             clear-icon="cancel"
27 |             label="Comments"
28 |             v-model="form.survey2"
29 |             :value="form.survey2"
30 |           ></v-textarea>         
31 |           <v-btn rounded color="primary" dark class="w-100 my-btn mt-100" @click="next">Next</v-btn>
32 |           <div class="w-100 text-center my-btn text-primary" @click="back">Back</div>
33 |         </v-col>        
34 |       </v-row>
35 |     </v-container>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |   data(){
42 |     return{
43 |       form: {
44 |         survey2: this.$store.getters.getSurvey.survey2
45 |       }
46 |     }    
47 |   },
48 |   methods: {
49 |     next(){
50 |       this.$store.dispatch("setSurvey", this.form)
51 |       this.$axios.patch(`https://nuxt-tutor.firebaseio.com/survey/line:0001.json`, this.form).then((res) => {
52 |         this.$router.push('/survey/step3')
53 |       }).catch(e => console.log(e))
54 |     },
55 |     back(){
56 |       this.$router.push('/survey')
57 |     }
58 |   }
59 | }
60 | </script>
61 | 
62 | <style lang="scss" scoped>
63 |   .question{
64 |     font-size: 20px;
65 |   }
66 | </style>


--------------------------------------------------------------------------------
/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card class="mx-auto" :class="active == true ? 'active': ''" max-width="400">
 3 |     <v-img
 4 |       class="white--text align-end"
 5 |       height="200px"
 6 |       src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
 7 |     >
 8 |       <div class="more-detail" @click="$emit('moreDetail')">More Detail</div>
 9 |     </v-img>
10 |     <div class="card-content">
11 |       <div>
12 |         <v-card-text class="text--primary">
13 |           <h1>{{ session.title }}</h1>
14 |         </v-card-text>
15 |         <v-card-subtitle class="pt-0">{{ session.spaker }}</v-card-subtitle>
16 |       </div>
17 |       <v-btn class="circle" @click="$emit('chooseWorkshop')">
18 |         <v-icon>check</v-icon>
19 |       </v-btn>
20 |     </div>
21 |   </v-card>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: ['active', 'session']
27 | }
28 | </script>
29 | 
30 | <style lang="scss" scoped>
31 | .circle {
32 |   height: 32px !important;
33 |   width: 32px !important;
34 |   min-width: auto !important;
35 |   border-radius: 50%;
36 |   color: #fff;
37 |   background: rgba($color: #1a56be, $alpha: 0.3) !important;
38 |   align-self: center;
39 | }
40 | .card-content {
41 |   display: flex;
42 |   justify-content: space-between;
43 |   padding: 15px;
44 | }
45 | .more-detail {
46 |   font-size: 12px;
47 |   color: #1a56be;
48 |   border-radius: 25px;
49 |   padding: 10px 20px;
50 |   background: #fff;
51 |   font-weight: bold;
52 |   display: inline;
53 |   position: absolute;
54 |   bottom: 11px;
55 |   right: 11px;
56 | }
57 | .v-card__subtitle {
58 |   padding: 0;
59 | }
60 | .v-card__text {
61 |   padding: 0;
62 |   padding-bottom: 5px;
63 |   h1 {
64 |     font-size: 24px;
65 |   }
66 | }
67 | .v-card + .v-card {
68 |   margin-top: 30px;
69 | }
70 | .v-card.active {
71 |   .circle {
72 |     background: rgba($color: #1a56be, $alpha: 1) !important;
73 |   }
74 |   .v-image {
75 |     &::before {
76 |       content: "Selected";
77 |       font-weight: bold;
78 |       font-size: 24px;
79 |       height: 100%;
80 |       width: 100%;
81 |       display: flex;
82 |       align-items: center;
83 |       justify-content: center;
84 |       background: rgba($color: #1a56be, $alpha: 1) !important;
85 |     }
86 |   }
87 | }
88 | </style>


--------------------------------------------------------------------------------
/pages/survey/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-app-bar
 4 |       color="primary"
 5 |       dense
 6 |       flat
 7 |       dark
 8 |     >
 9 |       <v-toolbar-title>Survey</v-toolbar-title>
10 |     </v-app-bar>
11 |     <v-container class="pt-0 pb-0">
12 |       <v-row>
13 |         <v-col cols="12">          
14 |           <div class="mt-8 text-primary text-title text-center">
15 |             Step 1 of 3
16 |           </div>
17 |         </v-col>
18 |       </v-row>
19 |       <v-row justify="center">
20 |         <v-col cols="10">
21 |           <h2 class="text-center mt-1 question">How would you rate<br/>the event overall?</h2>
22 |         </v-col>
23 |         <v-col cols="10">
24 |            <v-slider
25 |             class="slider"
26 |             v-model="form.survey1"
27 |             :max="10"
28 |             :min="0"
29 |             thumb-label="always"
30 |           ></v-slider>
31 |           <v-btn rounded color="primary" dark class="w-100 my-btn mt-100" @click="next">Next</v-btn>
32 |         </v-col>        
33 |       </v-row>
34 |     </v-container>
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | export default {
40 |   data(){
41 |     return {
42 |       form: {
43 |         survey1: this.$store.getters.getSurvey.survey1
44 |       }
45 |     }
46 |   },
47 |   methods: {
48 |     next() {
49 |       this.$store.dispatch("setSurvey", this.form)     
50 |       this.$axios.patch(`https://nuxt-tutor.firebaseio.com/survey/line:0001.json`, this.form).then((res) => {
51 |         this.$router.push('/survey/step2')
52 |       }).catch(e => console.log(e))   
53 |     }
54 |   }
55 | }
56 | </script>
57 | 
58 | <style lang="scss" scoped>
59 |   .question{
60 |     font-size: 20px;
61 |   }
62 |   .slider{
63 |     margin-top: 90px;
64 |     ::v-deep{
65 |       .v-slider__thumb{
66 |         height: 15px !important;
67 |         width: 15px !important;
68 |       }
69 |       .v-slider__thumb-label{
70 |         font-size: 20px;
71 |         width: 45px !important;
72 |         height: 45px !important;
73 |       }
74 |       .v-slider__track-background{
75 |         background: rgba($color: #000, $alpha: 0.3) !important;
76 |       }
77 |       .v-slider--horizontal .v-slider__track-container{
78 |         height: 4px;
79 |       }
80 |     }    
81 |   }  
82 | </style>


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import colors from 'vuetify/es5/util/colors'
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 |   /*
 6 |   ** Headers of the page
 7 |   */
 8 |   head: {
 9 |     titleTemplate: '%s - ' + process.env.npm_package_name,
10 |     title: process.env.npm_package_name || '',
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
15 |     ],
16 |     link: [
17 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
18 |       { rel: 'stylesheet', href:'https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap'},
19 |       { rel: 'stylesheet', href:'https://fonts.googleapis.com/icon?family=Material+Icons'}
20 |     ],
21 |     script: [
22 |       { src: 'https://static.line-scdn.net/liff/edge/2.1/sdk.js' }
23 |     ]
24 |   },
25 |   /*
26 |   ** Customize the progress-bar color
27 |   */
28 |   loading: { color: '#fff' },
29 |   /*
30 |   ** Global CSS
31 |   */
32 |   css: [
33 |   ],
34 |   /*
35 |   ** Plugins to load before mounting the App
36 |   */
37 |   plugins: [
38 |   ],
39 |   /*
40 |   ** Nuxt.js dev-modules
41 |   */
42 |   buildModules: [
43 |     '@nuxtjs/vuetify',
44 |   ],
45 |   /*
46 |   ** Nuxt.js modules
47 |   */
48 |   modules: [
49 |     // Doc: https://axios.nuxtjs.org/usage
50 |     '@nuxtjs/axios',
51 |     // Doc: https://github.com/nuxt-community/dotenv-module
52 |     '@nuxtjs/dotenv',
53 |   ],
54 |   /*
55 |   ** Axios module configuration
56 |   ** See https://axios.nuxtjs.org/options
57 |   */
58 |   axios: {
59 |   },
60 |   /*
61 |   ** vuetify module configuration
62 |   ** https://github.com/nuxt-community/vuetify-module
63 |   */
64 |   vuetify: {
65 |     customVariables: ['~/assets/variables.scss'],
66 |     // treeShake: true,    
67 |     theme: {
68 |       dark: false,
69 |       themes: {
70 |         dark: {
71 |           primary: colors.blue.darken2,
72 |           accent: colors.grey.darken3,
73 |           secondary: colors.amber.darken3,
74 |           info: colors.teal.lighten1,
75 |           warning: colors.amber.base,
76 |           error: colors.deepOrange.accent4,
77 |           success: colors.green.accent3
78 |         }
79 |       }
80 |     }
81 |   },
82 |   /*
83 |   ** Build configuration
84 |   */
85 |   build: {
86 |     /*
87 |     ** You can extend webpack config here
88 |     */
89 |     extend (config, ctx) {
90 |     }
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-layout
 3 |     column
 4 |     justify-center
 5 |     align-center
 6 |   >
 7 |     <v-flex
 8 |       xs12
 9 |       sm8
10 |       md6
11 |     >
12 |       <div class="text-center">
13 |         <logo />
14 |         <vuetify-logo />
15 |       </div>
16 |       <v-card>
17 |         <v-card-title class="headline">
18 |           Welcome to the Vuetify + Nuxt.js template
19 |         </v-card-title>
20 |         <v-card-text>
21 |           <p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications.</p>
22 |           <p>
23 |             For more information on Vuetify, check out the <a
24 |               href="https://vuetifyjs.com"
25 |               target="_blank"
26 |             >
27 |               documentation
28 |             </a>.
29 |           </p>
30 |           <p>
31 |             If you have questions, please join the official <a
32 |               href="https://chat.vuetifyjs.com/"
33 |               target="_blank"
34 |               title="chat"
35 |             >
36 |               discord
37 |             </a>.
38 |           </p>
39 |           <p>
40 |             Find a bug? Report it on the github <a
41 |               href="https://github.com/vuetifyjs/vuetify/issues"
42 |               target="_blank"
43 |               title="contribute"
44 |             >
45 |               issue board
46 |             </a>.
47 |           </p>
48 |           <p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
49 |           <div class="text-xs-right">
50 |             <em><small>&mdash; John Leider</small></em>
51 |           </div>
52 |           <hr class="my-3">
53 |           <a
54 |             href="https://nuxtjs.org/"
55 |             target="_blank"
56 |           >
57 |             Nuxt Documentation
58 |           </a>
59 |           <br>
60 |           <a
61 |             href="https://github.com/nuxt/nuxt.js"
62 |             target="_blank"
63 |           >
64 |             Nuxt GitHub
65 |           </a>
66 |         </v-card-text>
67 |         <v-card-actions>
68 |           <v-spacer />
69 |           <v-btn
70 |             color="primary"
71 |             nuxt
72 |             to="/inspire"
73 |           >
74 |             Continue
75 |           </v-btn>
76 |         </v-card-actions>
77 |       </v-card>
78 |     </v-flex>
79 |   </v-layout>
80 | </template>
81 | 
82 | <script>
83 | import Logo from '~/components/Logo.vue'
84 | import VuetifyLogo from '~/components/VuetifyLogo.vue'
85 | 
86 | export default {
87 |   components: {
88 |     Logo,
89 |     VuetifyLogo
90 |   }
91 | }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/pages/survey/step3.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar
  4 |       color="primary"
  5 |       dense
  6 |       flat
  7 |       dark
  8 |     >
  9 |       <v-toolbar-title>Survey</v-toolbar-title>
 10 |     </v-app-bar>
 11 |     <v-container class="pt-0 pb-0">
 12 |       <v-row>
 13 |         <v-col cols="12">          
 14 |           <div class="mt-8 text-primary text-title text-center">
 15 |             Step 3 of 3
 16 |           </div>
 17 |         </v-col>
 18 |       </v-row>
 19 |       <v-row justify="center">
 20 |         <v-col cols="10">
 21 |           <h2 class="text-center mt-1 question">
 22 |             Finally, would you recommend our event to a friend?
 23 |           </h2>
 24 |         </v-col>        
 25 |         <v-col cols="11">
 26 |           <div class="select" :class="form.survey3 == 1 ? 'active' : ''" @click="form.survey3 = 1">
 27 |             <h1>Of course!</h1>
 28 |             <p>Definitely i’ll join next event.</p>
 29 |             <v-icon>check</v-icon>
 30 |           </div>
 31 |           <div class="select" :class="form.survey3 == 2 ? 'active' : ''"  @click="form.survey3 = 2">
 32 |             <h1>Not sure</h1>
 33 |             <p>Let me think again next time.</p>
 34 |             <v-icon>check</v-icon>
 35 |           </div>
 36 |           <div class="select" :class="form.survey3 == 3 ? 'active' : ''"  @click="form.survey3 = 3">
 37 |             <h1>No, thanks</h1>
 38 |             <p>It’s not my type.</p>
 39 |             <v-icon>check</v-icon>
 40 |           </div>
 41 |         </v-col>
 42 |         <v-col cols="10">                            
 43 |           <v-btn rounded color="primary" dark class="w-100 my-btn mt-50" @click="submit">Submit</v-btn>
 44 |           <div class="w-100 text-center my-btn text-primary" @click="back">Back</div>
 45 |         </v-col>        
 46 |       </v-row>
 47 |     </v-container>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | export default {
 53 |   data(){
 54 |     return {
 55 |       form: {
 56 |         survey3: 1
 57 |       }
 58 |     }
 59 |   },
 60 |   methods: {
 61 |     submit(){
 62 |       this.$store.dispatch("setSurvey", this.form)
 63 |       this.$axios.patch(`https://nuxt-tutor.firebaseio.com/survey/line:0001.json`, this.form).then((res) => {
 64 |         this.$router.push('/survey/done')
 65 |       }).catch(e => console.log(e))
 66 |     },
 67 |     back(){
 68 |       this.$router.push('/survey/step2')
 69 |     }
 70 |   }
 71 | }
 72 | </script>
 73 | 
 74 | <style lang="scss" scoped>
 75 |   .question{
 76 |     font-size: 20px;
 77 |   }
 78 |   .select{
 79 |     border-bottom: 1px solid #E6E6E6;
 80 |     padding-bottom: 25px;
 81 |     color: #707070;
 82 |     position: relative;
 83 |     &.select{
 84 |       margin-top: 25px;
 85 |     }
 86 |     &.active{
 87 |       color: #1A56BE;
 88 |       .v-icon{
 89 |         color: #1A56BE;
 90 |         display: block;
 91 |       }
 92 |     }
 93 |     h1{
 94 |       font-size: 20px;
 95 |     }
 96 |     p{
 97 |       font-size: 18px;
 98 |       margin-bottom: 0;
 99 |     }
100 |     .v-icon{
101 |       position: absolute;
102 |       right: 0;
103 |       bottom: 25px;
104 |       display: none;
105 |     }
106 |   }
107 |   .mt-50{
108 |     margin-top: 50px;
109 |   }
110 | </style>


--------------------------------------------------------------------------------
/pages/agenda/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar color="primary" dense flat dark>
  4 |       <v-toolbar-title>AGENDA</v-toolbar-title>
  5 |     </v-app-bar> 
  6 |     <v-sheet elevation="6">
  7 |       <v-tabs
  8 |         grow
  9 |         v-model="tab"      
 10 |       >
 11 |         <v-tab
 12 |           v-for="item in agenda"
 13 |           :key="item.date"
 14 |         >
 15 |           {{ item.date }}
 16 |         </v-tab>
 17 |       </v-tabs>
 18 |     </v-sheet>
 19 | 
 20 |     <v-tabs-items v-model="tab">
 21 |       <v-tab-item
 22 |         v-for="item in agenda"
 23 |         :key="item.date"
 24 |       >
 25 |         <v-container class="pt-0">
 26 |           <v-row>
 27 |             <v-col cols="12" v-for="session in item.sessions" :key="session.title">
 28 |               <v-card class="agenda-card" :class="session.type == 'set' ? 'card-set': ''"> 
 29 |                 <v-card-text v-if="session.type != 'set'">
 30 |                   <p class="time mb-0">{{ session.time }}</p>
 31 |                   <v-row>
 32 |                     <v-col cols="4" class="text-center pt-2 pb-0">
 33 |                       <img :src="session.image" alt="" class="agenda-image">
 34 |                     </v-col>
 35 |                     <v-col cols="8" class="pt-2 pb-0">
 36 |                       <v-card-title class="pl-0 pt-0 pb-3 text-primary text-title">{{ session.title }}</v-card-title>
 37 |                       <v-card-subtitle class="pl-0 pt-0 pb-0">{{ session.spaker }}</v-card-subtitle>
 38 |                     </v-col>
 39 |                   </v-row>                  
 40 |                 </v-card-text>
 41 |                 <div v-else>
 42 |                   <v-card-text v-for="sessionSet in session.sessionSet" :key="sessionSet.title">
 43 |                     <p class="time mb-0">{{ session.time }}</p>
 44 |                     <v-row>
 45 |                       <v-col cols="4" class="text-center pt-2 pb-0">
 46 |                         <img :src="sessionSet.image" alt="" class="agenda-image">
 47 |                       </v-col>
 48 |                       <v-col cols="8" class="pt-2 pb-0">
 49 |                         <v-card-title class="pl-0 pt-0 pb-3 text-primary text-title">{{ sessionSet.title }}</v-card-title>
 50 |                         <v-card-subtitle class="pl-0 pt-0 pb-0">{{ sessionSet.spaker }}</v-card-subtitle>
 51 |                         <p class="mb-0">{{ sessionSet.duringTime }}</p>
 52 |                       </v-col>
 53 |                     </v-row>    
 54 |                     <hr v-if="sessionSet != session.sessionSet[session.sessionSet.length-1]"/>                                
 55 |                   </v-card-text>
 56 |                 </div>
 57 |               </v-card>
 58 |             </v-col>              
 59 |           </v-row>
 60 |         </v-container>        
 61 |       </v-tab-item>
 62 |     </v-tabs-items>   
 63 |   </div>
 64 | </template>
 65 | 
 66 | 
 67 | <script>
 68 |   export default {
 69 |     data () {
 70 |       return {
 71 |         tab: null,        
 72 |       }
 73 |     },
 74 |     asyncData({ store }){
 75 |       // apis
 76 |       return {
 77 |         agenda: store.getters.getAgenda
 78 |       }
 79 |     }
 80 |   }
 81 | </script>
 82 | 
 83 | <style lang="scss" scoped>
 84 |   .v-tabs{
 85 |     margin-bottom: 15px;
 86 |   }
 87 |   .v-tab{    
 88 |     color: #4D4D4D;
 89 |     font-weight: bold;
 90 |     background: #EFEFEF;
 91 |     &.v-tab--active{
 92 |       color: #1A56BE !important;      
 93 |     }    
 94 |     &+.v-tab{
 95 |       border-left: #BDBDBD solid 1px;
 96 |     }
 97 |   }
 98 |   .agenda-card{
 99 |     color: #4D4D4D;
100 |     .time{
101 |       color: #1A56BE;
102 |       font-weight: bold;
103 |     }
104 |     .agenda-image{
105 |       width: 50px;
106 |       height: 50px;
107 |       object-fit: cover;
108 |       border-radius: 50%;
109 |     }
110 |     &+.agenda-card{
111 |       margin-top: 15px;
112 |     }
113 |     &.card-set{
114 |       border-left: 3px solid #1A56BE; 
115 |       .v-card__text+.v-card__text{
116 |         padding-top: 0 !important;
117 |       }
118 |     }
119 |     hr{
120 |       width: 100%;
121 |       margin: 15px auto 0;
122 |       height: 1px;
123 |       background: #BDBDBD;
124 |       border: 0;
125 |     }
126 |   }
127 | </style>


--------------------------------------------------------------------------------
/pages/workshop/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar color="primary" dense flat dark>
  4 |       <v-toolbar-title>Register Workshop</v-toolbar-title>
  5 |     </v-app-bar>
  6 |     <v-container class="pt-0 pb-0">
  7 |       <v-row>
  8 |         <v-col cols="12">
  9 |           <div class="mt-3 text-primary text-title text-center">
 10 |             {{ list.date }}
 11 |           </div>
 12 |         </v-col>
 13 |         <v-col cols="12">
 14 |           <Card
 15 |             v-for="item in list.sessions"
 16 |             :session="item"
 17 |             :key="item.id"
 18 |             :active="selectedWorkshop.includes(item.id)"
 19 |             v-on:moreDetail="moreDetail(item)"
 20 |             v-on:chooseWorkshop="chooseWorkshop(item)" />          
 21 |         </v-col>
 22 |         <v-col cols="12">
 23 |           <div class="set-padding">
 24 |             <v-btn
 25 |               rounded
 26 |               color="primary"
 27 |               dark
 28 |               class="w-100 mt-3 my-btn"
 29 |               @click="next"
 30 |               >Next</v-btn
 31 |             >
 32 |           </div>
 33 |           <div v-if="index > 0" class="w-100 mt-3 text-center my-btn text-primary" @click="back">Back</div>
 34 |         </v-col>
 35 |       </v-row>
 36 |       <v-dialog v-model="isShowDialog" max-width="290">
 37 |         <v-card class="dialog-card"> 
 38 |           <v-img
 39 |             class="white--text align-end"
 40 |             height="200px"
 41 |             :src="dialog.image"
 42 |           >
 43 |           </v-img>
 44 |           <v-card-title class="headline">{{ dialog.title }}</v-card-title>
 45 |           <v-card-text>
 46 |             <p>Time: {{ dialog.time }}</p>
 47 |             <p>Place: {{ dialog.place }}</p>
 48 |             <p class="detail">
 49 |               {{ dialog.detail }}
 50 |             </p>
 51 |             <p>
 52 |               Speaker: <br/>
 53 |               <span v-html="dialog.spakers"></span>              
 54 |             </p>
 55 |           </v-card-text>
 56 |           <v-card-actions>
 57 |             <v-spacer></v-spacer>            
 58 |             <v-btn class="text-primary" text @click="isShowDialog = false">
 59 |               OK
 60 |             </v-btn>
 61 |           </v-card-actions>
 62 |         </v-card>
 63 |       </v-dialog>
 64 |     </v-container>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import Card from '~/components/Card'
 70 | export default {
 71 |   components: {
 72 |     Card
 73 |   },
 74 |   data(){
 75 |     return {
 76 |       isShowDialog: false,
 77 |       index: 0,
 78 |       dialog: {
 79 |         title: '',
 80 |         time: '',
 81 |         place: '',
 82 |         image: '',
 83 |         detail: '',
 84 |         spakers: ''
 85 |       },
 86 |       selectedWorkshop: [],
 87 |       list: [],
 88 |       workshops: this.$store.getters.getWorkshop    
 89 |     }
 90 |   },
 91 |   mounted(){
 92 |     // api 
 93 |     this.list = this.workshops[this.index]
 94 |   },
 95 |   methods: {
 96 |     back() {
 97 |       this.index = this.index-1
 98 |       this.list = this.workshops[this.index]
 99 |     },
100 |     next() {
101 |       if(this.index == this.workshops.length -1){
102 |         // api save register workshop 
103 |         this.$axios.patch(`https://nuxt-tutor.firebaseio.com/workshops/line:0001.json`, { ...this.selectedWorkshop }).then((res) => {
104 |           this.$router.push('/workshop/done')
105 |         }).catch(e => console.log(e)) 
106 |       }else{
107 |         this.index = this.index+1
108 |         this.list = this.workshops[this.index]
109 |       }      
110 |     },
111 |     moreDetail(item){
112 |       this.isShowDialog = true
113 |       this.dialog = item
114 |     },
115 |     chooseWorkshop(item){
116 |       const listId = this.list.sessions.map(session => session.id)
117 |       this.selectedWorkshop = this.selectedWorkshop.filter(session => !listId.includes(session))
118 |       this.selectedWorkshop.push(item.id)
119 |     }
120 |   }
121 | }
122 | </script>
123 | 
124 | <style lang="scss" scoped>
125 | .dialog-card{
126 |   p{
127 |     margin-bottom: 0;
128 |   }
129 |   .v-card__title.headline{
130 |     font-size: 20px !important;
131 |   }
132 |   .v-card__text{
133 |     padding-bottom: 0;
134 |   }
135 |   .detail{
136 |     margin: 10px 0;
137 |   }
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/pages/register/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar
  4 |       color="primary"
  5 |       dense
  6 |       flat
  7 |       dark
  8 |     >
  9 |       <v-toolbar-title>Register</v-toolbar-title>
 10 |     </v-app-bar>
 11 |     <v-container class="pt-0 pb-0">
 12 |       <v-row>
 13 |         <v-col cols="12">          
 14 |           <div class="mt-8 text-primary text-title text-center">
 15 |             Step 1 of 2
 16 |           </div>
 17 |         </v-col>
 18 |         <v-col cols="12" class="text-center pb-0 profile-img">
 19 |           <img v-if="getLine.pictureUrl == ''" src="~/assets/profile.png" alt="" width="155">
 20 |           <img v-else :src="getLine.pictureUrl" alt="" width="155">
 21 |         </v-col>
 22 |         <v-col cols="12" class="text-center pt-2 pb-0">
 23 |           {{ getLine.displayName }}
 24 |         </v-col>
 25 |         <v-col cols="12">
 26 |           <v-form>
 27 |             <v-text-field
 28 |               v-model="form.firstname"
 29 |               dense          
 30 |               label="Firstname"
 31 |             ></v-text-field>
 32 |             <v-text-field
 33 |               v-model="form.lastname"
 34 |               dense         
 35 |               label="Lastname"
 36 |             ></v-text-field>
 37 |             <div class="gender-group d-flex mt-3">
 38 |               <p>Gender</p>
 39 |               <div class="circle" :class="form.gender == 1 ? 'active' : ''" @click="chooseGender(1)">
 40 |                 <svg xmlns="http://www.w3.org/2000/svg" width="21.172" height="31.883" viewBox="0 0 21.172 31.883"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-799 -426.117)"><g transform="translate(799 426.117)"><path class="a" d="M104.075,18.069a10.6,10.6,0,1,0-8.735,3.023v3.545H92.848a1.246,1.246,0,1,0,0,2.491H95.34v3.509a1.246,1.246,0,0,0,2.492,0V27.128h2.492a1.246,1.246,0,1,0,0-2.491H97.832V21.092A10.541,10.541,0,0,0,104.075,18.069ZM90.859,16.307a8.1,8.1,0,1,1,11.454,0A8.1,8.1,0,0,1,90.859,16.307Z" transform="translate(-85.999 0)"/></g></g></svg>
 41 |               </div>
 42 |               <p>Female</p>
 43 |               <div class="circle" :class="form.gender == 2 ? 'active' : ''" @click="chooseGender(2)">
 44 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24.313" height="24.313" viewBox="0 0 24.313 24.313"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M24.3.882a1,1,0,0,0-.062-.25.03.03,0,0,1,0-.007h0A1.031,1.031,0,0,0,24.1.395c-.013-.017-.026-.033-.041-.048a1.034,1.034,0,0,0-.194-.175l-.006,0a1,1,0,0,0-.23-.109L23.567.04A1.01,1.01,0,0,0,23.3,0H16.209a1.013,1.013,0,0,0,0,2.026h4.645L14.808,8.073A9.123,9.123,0,1,0,16.24,9.506l6.047-6.047V8.1a1.013,1.013,0,1,0,2.026,0V1.013c0-.021,0-.042-.006-.062S24.3.905,24.3.882ZM9.118,22.287A7.1,7.1,0,1,1,16.209,15.2,7.1,7.1,0,0,1,9.118,22.287Zm0,0"/></svg>
 45 |               </div>              
 46 |               <p>Male</p>
 47 |             </div>
 48 |             <v-btn rounded color="primary" dark class="w-100 mt-10 my-btn" @click="next">Next</v-btn>
 49 |           </v-form>
 50 |         </v-col>
 51 |       </v-row>
 52 |     </v-container>        
 53 |   </div>
 54 | </template>
 55 | <script>
 56 | export default { 
 57 |   mounted(){
 58 |     liff.init({
 59 |       liffId: '1654259572-2LkW0XJR'
 60 |     }).then(() => {
 61 |       if(liff.isLoggedIn()){
 62 |         liff.getProfile().then(profile => {                    
 63 |           this.$store.dispatch('setLine', profile);
 64 |           this.isDone();
 65 |         })
 66 |       }else{
 67 |         liff.login();
 68 |       }
 69 |     })
 70 |   },  
 71 |   computed: {
 72 |     getLine(){
 73 |       return this.$store.getters.getLine;      
 74 |     }
 75 |   },
 76 |   data(){    
 77 |     return {      
 78 |       form: {
 79 |         firstname: this.$store.getters.getRegister.firstname,
 80 |         lastname: this.$store.getters.getRegister.lastname,
 81 |         gender: this.$store.getters.getRegister.gender       
 82 |       },      
 83 |     }
 84 |   },  
 85 |   methods: {    
 86 |     isDone(){
 87 |       this.$axios.get(`https://nuxt-tutor.firebaseio.com/members/${this.$store.getters.getLine.userId}/profile.json`).then((res) => {
 88 |         if(res.data != null){
 89 |           this.$router.push('register/done');
 90 |         }
 91 |       });
 92 |     },
 93 |     chooseGender(gender){
 94 |       this.form.gender = gender
 95 |     },
 96 |     validate(){
 97 |       let validated = true
 98 |       const errors = []
 99 |       const validatorField = [
100 |         'firstname',
101 |         'lastname'
102 |       ]
103 |       validatorField.forEach((field) => {
104 |         if(this.form[field] == ''){
105 |           validated = false
106 |           errors.push(`${field} can not be null`)
107 |         }
108 |       })
109 |       if(!validated){
110 |         this.$store.dispatch('setDialog', {
111 |           isShow: true,
112 |           title: 'Form is error',
113 |           message: errors.map((error) => error+'<br/>').join('')
114 |         })        
115 |       }
116 |       return validated
117 |     },
118 |     next(){      
119 |       if(this.validate()){
120 |         this.$store.dispatch('setRegister', this.form)
121 |         this.$router.push('/register/step2')
122 |       }      
123 |     }
124 |   }
125 | }
126 | </script>
127 | <style lang="scss" scoped>
128 |   .v-form{
129 |     padding: 0 10px;
130 |   }
131 |   .profile-img{
132 |     img{
133 |       border-radius: 50%;
134 |     }
135 |   }
136 |   .gender-group{
137 |     p{
138 |       margin-bottom: 0;
139 |       align-self: center;
140 |       margin-right: 20px;
141 |     }
142 |     .circle{
143 |       width: 45px;
144 |       height: 45px;      
145 |       color: #FFF;
146 |       border-radius: 50%;
147 |       position: relative;
148 |       background: rgba($color: #000000, $alpha: 0.3);
149 |       margin-right: 7px;
150 |       &.active{
151 |         background: #1A56BE;
152 |       }
153 |       svg{
154 |         position: absolute;
155 |         top: 50%;
156 |         left: 50%;
157 |         transform: translate(-50%, -50%);
158 |       }
159 |     }
160 |   }
161 | </style>


--------------------------------------------------------------------------------
/pages/register/step2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar
  4 |       color="primary"
  5 |       dense
  6 |       flat
  7 |       dark
  8 |     >
  9 |       <v-toolbar-title>Register</v-toolbar-title>
 10 |     </v-app-bar>
 11 |     <v-container class="pt-0 pb-0">
 12 |       <v-row>
 13 |         <v-col cols="12">
 14 |           <div class="mt-8 text-primary text-title text-center">
 15 |             Step 2 of 2
 16 |           </div>
 17 |         </v-col>
 18 |         <v-col cols="12">
 19 |           <v-form>
 20 |             <p class="text-center text-main mb-0 mt-4">Tell us more a bit</p>
 21 |             <v-text-field
 22 |               v-model="form.email"
 23 |               type="email"
 24 |               dense      
 25 |               :rules="emailRules"
 26 |               label="Email"
 27 |             ></v-text-field>            
 28 |             <v-text-field
 29 |               v-model="form.phone"
 30 |               dense          
 31 |               :rules="phoneRules"
 32 |               @keypress="onlyNumber($event, 10)"
 33 |               label="Phone"
 34 |             ></v-text-field>
 35 |             <v-dialog
 36 |               ref="dialog"
 37 |               v-model="modal"
 38 |               persistent
 39 |               width="290px"
 40 |             >
 41 |               <template v-slot:activator="{ on }">
 42 |                 <v-text-field
 43 |                   v-model="form.birthday"
 44 |                   label="Birthday"
 45 |                   prepend-icon="event"
 46 |                   readonly
 47 |                   v-on="on"
 48 |                   class="set-birthday"
 49 |                 ></v-text-field>
 50 |               </template>
 51 |               <v-date-picker :max="new Date().toISOString().substr(0, 10)" v-model="form.birthday" scrollable>
 52 |                 <v-spacer></v-spacer>
 53 |                 <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
 54 |                 <v-btn text color="primary" @click="$refs.dialog.save(form.birthday)">OK</v-btn>
 55 |               </v-date-picker>
 56 |             </v-dialog>            
 57 |             <p class="text-center text-main mb-0 mt-4">Work Profile</p>
 58 |             <v-text-field
 59 |               v-model="form.company"
 60 |               dense          
 61 |               label="Company"
 62 |             ></v-text-field>
 63 |             <v-text-field
 64 |               v-model="form.position"
 65 |               dense          
 66 |               label="Position"
 67 |             ></v-text-field>
 68 |             <v-btn rounded color="primary" dark class="w-100 mt-10 my-btn" @click="register">Register</v-btn>
 69 |             <div class="w-100 text-center my-btn text-primary" @click="back">Back</div>
 70 |           </v-form>
 71 |         </v-col>
 72 |       </v-row>
 73 |     </v-container>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | const REGEX_EMAIL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 79 | const REGEX_PHONE = /^[0]([0-9]{9})*$/
 80 | const REGEX_NUMBER = /^[0-9]*$/
 81 | export default {
 82 |   data(){
 83 |     return {
 84 |       form: {
 85 |         email: this.$store.getters.getRegister.email,
 86 |         phone: this.$store.getters.getRegister.phone,
 87 |         birthday: this.$store.getters.getRegister.birthday,
 88 |         company: this.$store.getters.getRegister.company,
 89 |         position: this.$store.getters.getRegister.position
 90 |       },
 91 |       modal: false,
 92 |       emailValidated: false,
 93 |       phoneValidated: false,
 94 |       emailRules: [ value => this.emailValidator(value)],
 95 |       phoneRules: [ value => this.phoneValidator(value)]
 96 |     }
 97 |   },
 98 |   methods: {
 99 |     phoneValidator(value){    
100 |       this.phoneValidated = false  
101 |       if(value == ''){
102 |         return 'required'
103 |       }
104 |       if(REGEX_PHONE.test(value) && value.length == 10){ 
105 |         this.phoneValidated = true
106 |         return true
107 |       }
108 |       return "please input phone number"
109 |     },
110 |     emailValidator(value){
111 |       this.emailValidated = false
112 |       if(value == ''){
113 |         return 'required'
114 |       }
115 |       if(REGEX_EMAIL.test(value)){
116 |         this.emailValidated = true
117 |         return true
118 |       }
119 |       return "email is Invalid"
120 |     },
121 |     onlyNumber(event, max){  
122 |       if(event.target.value.length == 0){
123 |         if(event.key != 0){
124 |           return event.preventDefault()
125 |         }
126 |       }else{
127 |         if(!REGEX_NUMBER.test(event.key) || event.target.value.length == max){
128 |           return event.preventDefault()
129 |         }
130 |       }      
131 |     }, 
132 |     validate(){
133 |       let validated = true
134 |       const errors = []
135 |       const validatorField = [
136 |         'email',
137 |         'phone',
138 |         'company',
139 |         'position'
140 |       ]
141 |       validatorField.forEach((field) => {
142 |         if(this.form[field] == ''){
143 |           validated = false
144 |           errors.push(`${field} can not be null`)
145 |         }
146 |       })    
147 |       if(!this.emailValidated){
148 |         validated = false
149 |         errors.push(`email is Invalid`)
150 |       }
151 |       if(!this.phoneValidated){
152 |         validated = false
153 |         errors.push(`please input phone number`)
154 |       }
155 |       if(!validated){
156 |         this.$store.dispatch('setDialog', {
157 |           isShow: true,
158 |           title: 'Form is error',
159 |           message: errors.map((error) => error+'<br/>').join('')
160 |         })        
161 |       }      
162 |       return validated
163 |     },  
164 |     back() {      
165 |       this.$router.push('/register')
166 |     },
167 |     register() {
168 |       if(this.validate()){
169 |         this.$store.dispatch('setRegister', this.form)
170 |         this.$axios.patch(`https://nuxt-tutor.firebaseio.com/members/${this.$store.getters.getLine.userId}/profile.json`, this.$store.getters.getRegister).then((res) => {
171 |           this.$router.push('/register/done')
172 |         }).catch(e => console.log(e))         
173 |       }      
174 |     }
175 |   }
176 | }
177 | </script>
178 | 
179 | <style lang="scss" scoped>
180 |   .v-form{
181 |     padding: 0 10px;
182 |   }
183 |   .set-birthday{
184 |     position: relative;
185 |     ::v-deep .v-input__prepend-outer{
186 |       position: absolute;
187 |       right: 0
188 |     }
189 |   }
190 | </style>


--------------------------------------------------------------------------------
/pages/reward/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-app-bar
  4 |       color="primary"
  5 |       dense
  6 |       flat
  7 |       dark
  8 |     >
  9 |     <v-toolbar-title>Reward Card</v-toolbar-title>
 10 |     </v-app-bar>
 11 |     <v-container class="pt-0 pb-0">
 12 |       <v-row>
 13 |         <v-col>
 14 |           <v-card class="mt-8">
 15 |             <v-card-text>
 16 |               <div class="d-flex">
 17 |                 <div>
 18 |                   <img :src="getLine.pictureUrl" alt="" width="40" style="border-radius: 50%;">
 19 |                 </div>
 20 |                 <div class="align-self-center">
 21 |                   <h2 class="name text-primary m-0">{{ getUser.firstname }}</h2>
 22 |                 </div>
 23 |               </div>
 24 |             </v-card-text>
 25 |             <div class="stamp-zone">
 26 |               <div class="stamp" v-for="(obj, index) in stamps" :key="index">
 27 |                 <div class="circle" :class="obj.value == true ? 'active' : ''" v-if="index != Object.keys(stamps).length - 1">
 28 |                   <span>{{ index+1 }}</span>
 29 |                   <v-icon>check</v-icon>
 30 |                 </div>
 31 |                 <div class="circle end" :class="obj.value == true ? 'active' : ''" v-else>
 32 |                   <span>GOAL</span>
 33 |                   <v-icon>check</v-icon>
 34 |                 </div>
 35 |               </div>              
 36 |             </div>
 37 |           </v-card>
 38 |         </v-col>
 39 |       </v-row>
 40 |       <v-row>
 41 |         <v-col>
 42 |           <v-btn v-if="isDone == false" rounded color="primary" dark class="w-100 mt-10 my-btn scan" @click="scan">
 43 |             <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M1.641,1.641H6.563V0H0V6.563H1.641Zm0,0"/><path class="a" d="M392,0V1.641h4.922V6.563h1.641V0Zm0,0" transform="translate(-370.563)"/><path class="a" d="M396.922,396.922H392v1.641h6.563V392h-1.641Zm0,0" transform="translate(-370.563 -370.563)"/><path class="a" d="M1.641,392H0v6.563H6.563v-1.641H1.641Zm0,0" transform="translate(0 -370.563)"/><path class="a" d="M61,60v8.2h8.2V63.281h1.641V61.641H69.2V60Zm6.563,6.563H62.641V61.641h4.922Zm0,0" transform="translate(-57.664 -56.719)"/><path class="a" d="M280.844,279.844v-8.2h-3.281V270h-1.641v1.641H271v1.641h1.641v1.641H271v1.641h1.641v3.281Zm-6.563-6.563H279.2V278.2h-4.922Zm0,0" transform="translate(-256.18 -255.234)"/><path class="a" d="M65.922,241.641H69.2V240H61v1.641h3.281v1.641H62.641v1.641h1.641V248.2H62.641v1.641h1.641v1.641h8.2v-1.641H70.844V248.2H69.2v1.641H65.922V248.2h1.641v-1.641H65.922Zm0,0" transform="translate(-57.664 -226.875)"/><path class="a" d="M121,120h1.641v1.641H121Zm0,0" transform="translate(-114.383 -113.438)"/><path class="a" d="M361,120h1.641v1.641H361Zm0,0" transform="translate(-341.258 -113.438)"/><path class="a" d="M305.922,68.2H309.2V60H301v8.2h3.281v1.641h1.641Zm-3.281-1.641V61.641h4.922v4.922Zm0,0" transform="translate(-284.539 -56.719)"/><path class="a" d="M394.281,241.641V240H391v1.641Zm0,0" transform="translate(-369.617 -226.875)"/><path class="a" d="M361,360h1.641v1.641H361Zm0,0" transform="translate(-341.258 -340.313)"/><path class="a" d="M241,330h1.641v1.641H241Zm0,0" transform="translate(-227.82 -311.953)"/><path class="a" d="M181,303.281h1.641V300H181Zm0,0" transform="translate(-171.102 -283.594)"/><path class="a" d="M211,270h1.641v1.641H211Zm0,0" transform="translate(-199.461 -255.234)"/><path class="a" d="M62.641,330H61v3.281h1.641Zm0,0" transform="translate(-57.664 -311.953)"/><path class="a" d="M61,420h1.641v1.641H61Zm0,0" transform="translate(-57.664 -397.031)"/><path class="a" d="M241,60h1.641v1.641H241Zm0,0" transform="translate(-227.82 -56.719)"/><path class="a" d="M241,123.281h1.641V120H241Zm0,0" transform="translate(-227.82 -113.438)"/><path class="a" d="M242.641,211.641V210H241v3.281h6.563v-1.641Zm0,0" transform="translate(-227.82 -198.516)"/></svg>
 44 |             Scan to collect
 45 |           </v-btn>
 46 |           <v-btn v-if="isDone == true" rounded color="primary" dark class="w-100 mt-10 my-btn" @click="next">Redeem Reward</v-btn>
 47 |         </v-col>
 48 |       </v-row>
 49 |     </v-container>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | export default {
 55 |   mounted(){
 56 |     liff.init({
 57 |       liffId: '1654259572-eY7zEd2M'
 58 |     }).then(() => {
 59 |       if(liff.isLoggedIn()){
 60 |         liff.getProfile().then(profile => {
 61 |           this.$store.dispatch('setLine', profile);
 62 |           this.$axios.get(`https://nuxt-tutor.firebaseio.com/members/${this.$store.getters.getLine.userId}/profile.json`).then((res) => {            
 63 |             if(res.data != null){
 64 |               this.$store.dispatch('setUser', res.data);
 65 |             }
 66 |           });
 67 |           this.$axios.get(`https://nuxt-tutor.firebaseio.com/rewards/${this.$store.getters.getLine.userId}.json`).then((res) => {            
 68 |             if(res.data != null){
 69 |               this.stamps = res.data
 70 |             }
 71 |           });
 72 |         })
 73 |       }else{
 74 |         liff.login();
 75 |       }
 76 |     })
 77 |   },
 78 |   computed: {
 79 |     getLine(){
 80 |       return this.$store.getters.getLine;
 81 |     },
 82 |     getUser(){
 83 |       return this.$store.getters.getUser;
 84 |     },
 85 |     isDone(){
 86 |       let isDone = true;
 87 |       this.stamps.forEach(ele => {
 88 |         if(ele.value === false){
 89 |           isDone = false;
 90 |           return isDone;
 91 |         }
 92 |       })
 93 |       return isDone;
 94 |     }
 95 |   },
 96 |   methods: {
 97 |     scan(){
 98 |       liff.scanCode().then(result => {
 99 |         this.stamps = this.stamps.map((obj) => {
100 |           if(obj.name == result.value){
101 |             obj.value = true;
102 |           }
103 |           return obj;
104 |         })
105 |         this.$axios.patch(`https://nuxt-tutor.firebaseio.com/rewards/${this.$store.getters.getLine.userId}.json`, {...this.stamps}).then((res) => {            
106 | 
107 |         }).catch(e => alert(e))
108 |       }).catch(e => alert(e))
109 |     },
110 |     next(){
111 |       this.$router.push('reward/done');
112 |     }
113 |   },
114 |   data(){
115 |     return {
116 |       stamps: [
117 |         {
118 |           name: 'stamp1',
119 |           value: false
120 |         },
121 |         {
122 |           name: 'stamp2',
123 |           value: false
124 |         },
125 |         {
126 |           name: 'stamp3',
127 |           value: false
128 |         },
129 |         {
130 |           name: 'stamp4',
131 |           value: false
132 |         },
133 |         {
134 |           name: 'stamp5',
135 |           value: false
136 |         },
137 |         {
138 |           name: 'stamp6',
139 |           value: false
140 |         },
141 |         {
142 |           name: 'stamp7',
143 |           value: false
144 |         },
145 |         {
146 |           name: 'stamp8',
147 |           value: false
148 |         }     
149 |       ]
150 |     }
151 |   }
152 | }
153 | </script>
154 | 
155 | <style lang="scss" scoped>
156 |   .name{
157 |     margin-left: 20px;
158 |     font-size: 20px;
159 |   }
160 |   .v-card__text{
161 |     padding: 10px 15px;
162 |   }
163 |   .stamp-zone{
164 |     background: #BDBDBD;
165 |     padding: 25px 25px 0;
166 |     display: flex;
167 |     flex-wrap: wrap;
168 |     justify-content: space-between;
169 |   }
170 |   .stamp{
171 |     flex-basis: 25%;
172 |   }
173 |   .circle{
174 |     background: #FFF;
175 |     border-radius: 50%;
176 |     border: 2px #1A56BE solid;
177 |     height: 55px;
178 |     width: 55px;    
179 |     justify-content: center;
180 |     display: inline-flex;
181 |     margin-bottom: 25px;    
182 |     .v-icon{
183 |       display: none;
184 |     }
185 |     &.active{
186 |       background: #1A56BE;
187 |       span{
188 |         display: none;
189 |       }
190 |       .v-icon{
191 |         display: flex;
192 |         color: #FFF;
193 |       }
194 |     }
195 |     &.end{
196 |       background: #1A56BE;
197 |       span{
198 |         font-size: 16px;        
199 |         color: #FFF;
200 |       }
201 |     }
202 |     span{
203 |       align-self: center;
204 |       font-size: 20px;
205 |       color: #1A56BE;
206 |       font-weight: bold;
207 |     }
208 |   }
209 |   .scan{
210 |     svg{
211 |       margin-right: 5px;
212 |     }
213 |   }
214 | </style>


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
  1 | export const state = () => ({
  2 |   dialog: {
  3 |     isShow: false,
  4 |     title: '',
  5 |     message: ''
  6 |   },
  7 |   line: {
  8 |     pictureUrl: null,
  9 |     displayName: null,
 10 |     userId: null
 11 |   },
 12 |   survey: {
 13 |     survey1: 5,
 14 |     survey2: '',
 15 |     survey3: '',
 16 |   },
 17 |   user: {
 18 |     firstname: '',
 19 |     lastname: '',
 20 |     gender: 1,
 21 |     email: '',
 22 |     phone: '',
 23 |     birthday: '',
 24 |     company: '',
 25 |     position: ''
 26 |   },
 27 |   register: {
 28 |     firstname: '',
 29 |     lastname: '',
 30 |     gender: 1,
 31 |     email: '',
 32 |     phone: '',
 33 |     birthday: new Date().toISOString().substr(0, 10),
 34 |     company: '',
 35 |     position: ''
 36 |   },
 37 |   data: {  
 38 |     agenda: [
 39 |       {
 40 |         date: "20 March 2020",
 41 |         sessions: [
 42 |           {
 43 |             time: "10:00 AM",
 44 |             title: "INTRODUCTIONS-1",
 45 |             spaker: "Marvelous Team",
 46 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 47 |             duringTime: "100 min"
 48 |           },
 49 |           {
 50 |             type: "set",
 51 |             time: "12:00 AM",
 52 |             sessionSet: [
 53 |               {
 54 |                 title: "INTRODUCTIONS-2",
 55 |                 spaker: "Marvelous Team",
 56 |                 image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 57 |                 duringTime: "100 min"
 58 |               },
 59 |               {
 60 |                 title: "INTRODUCTIONS-3",
 61 |                 spaker: "Marvelous Team",
 62 |                 image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 63 |                 duringTime: "100 min"
 64 |               }
 65 |             ]
 66 |           }
 67 |         ]
 68 |       },
 69 |       {
 70 |         date: "21 March 2020",
 71 |         sessions: [
 72 |           {
 73 |             time: "10:00 AM",
 74 |             title: "INTRODUCTIONS-4",
 75 |             spaker: "Marvelous Team",
 76 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 77 |             duringTime: "100 min"
 78 |           },
 79 |           {
 80 |             time: "10:00 AM",
 81 |             title: "INTRODUCTIONS-5",
 82 |             spaker: "Marvelous Team",
 83 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 84 |             duringTime: "100 min"
 85 |           }
 86 |         ]
 87 |       }
 88 |     ],
 89 |     workshops: [
 90 |       {
 91 |         date: "20 March 2020",
 92 |         sessions: [
 93 |           {
 94 |             id: 1,
 95 |             title: "My journey with Vue1",
 96 |             topic: "Design Thinking",
 97 |             spaker: "Mr. John David and Team",
 98 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
 99 |             detail:
100 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
101 |             time: "Time : 13: 30 - 16: 30",
102 |             spakers: "- Mr. John David<br>- Mr. David Round",
103 |             place: "Room 101"
104 |           },
105 |           {
106 |             id: 2,
107 |             title: "My journey with Vue2",
108 |             topic: "Design Thinking",
109 |             spaker: "Mr. John David and Team",
110 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
111 |             detail:
112 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
113 |             time: "Time : 13: 30 - 16: 30",
114 |             spakers: "- Mr. John David<br>- Mr. David Round",
115 |             place: "Room 102"
116 |           },
117 |           {
118 |             id: 3,
119 |             title: "My journey with Vue3",
120 |             topic: "Design Thinking",
121 |             spaker: "Mr. John David and Team",
122 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
123 |             detail:
124 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
125 |             time: "Time : 13: 30 - 16: 30",
126 |             spakers: "- Mr. John David<br>- Mr. David Round",
127 |             place: "Room 103"
128 |           }
129 |         ]
130 |       },
131 |       {
132 |         date: "21 March 2020",
133 |         sessions: [
134 |           {
135 |             id: 4,
136 |             title: "My journey with Vue4",
137 |             topic: "Design Thinking",
138 |             spaker: "Mr. John David and Team",
139 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
140 |             detail:
141 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
142 |             time: "Time : 1: 30 PM - 4: 30 PM",
143 |             spakers: "- Mr. John David<br>- Mr. David Round",
144 |             place: "Room 101"
145 |           },
146 |           {
147 |             id: 5,
148 |             title: "My journey with Vue5",
149 |             topic: "Design Thinking",
150 |             spaker: "Mr. John David and Team",
151 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
152 |             detail:
153 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
154 |             time: "Time : 1: 30 PM - 4: 30 PM",
155 |             spakers: "- Mr. John David<br>- Mr. David Round",
156 |             place: "Room 102"
157 |           },
158 |           {
159 |             id: 6,
160 |             title: "My journey with Vue6",
161 |             topic: "Design Thinking",
162 |             spaker: "Mr. John David and Team",
163 |             image: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
164 |             detail:
165 |               "Design Thinking is a design methodology that provides a solution-based approach to solving problems. We will focus on the five-stage Design Thinking model. Empathise, Define (the problem), Ideate, Prototype, and Test.",
166 |             time: "Time : 1: 30 PM - 4: 30 PM",
167 |             spakers: "- Mr. John David<br>- Mr. David Round",
168 |             place: "Room 103"
169 |           }
170 |         ]
171 |       }
172 |     ]
173 |   }
174 | })
175 | 
176 | export const getters = {
177 |   getUser(state){
178 |     return state.user  
179 |   },
180 |   getRegister(state){
181 |     return state.register
182 |   },
183 |   getDialog(state){
184 |     return state.dialog
185 |   },
186 |   getWorkshop(state){
187 |     return state.data.workshops
188 |   },
189 |   getAgenda(state){
190 |     return state.data.agenda
191 |   },
192 |   getSurvey(state){
193 |     return state.survey
194 |   },
195 |   getLine(state){
196 |     return state.line
197 |   }
198 | }
199 | 
200 | export const mutations = {
201 |   SET_REGISTER(state, data){
202 |     state.register = {
203 |       ...state.register,
204 |       ...data
205 |     }
206 |   },
207 |   SET_USER(state, data){
208 |     state.user = {
209 |       ...state.user,
210 |       ...data
211 |     }
212 |   },
213 |   SET_DIALOG(state, data){
214 |     state.dialog = {
215 |       ...state.dialog,
216 |       ...data
217 |     }
218 |   },
219 |   SET_SURVEY(state, data){
220 |     state.survey = {
221 |       ...state.survey,
222 |       ...data
223 |     }
224 |   },
225 |   SET_LINE(state, data){
226 |     state.line = {
227 |       ...state.line,
228 |       ...data
229 |     }
230 |   }
231 | }
232 | 
233 | export const actions = {
234 |   setUser({ commit }, data){
235 |     commit('SET_USER', data)
236 |   },
237 |   setRegister({ commit }, data){
238 |     commit('SET_REGISTER', data)
239 |   },
240 |   setDialog({ commit }, data){
241 |     commit('SET_DIALOG', data)
242 |   },
243 |   setSurvey({ commit }, data){
244 |     commit('SET_SURVEY', data)
245 |   },
246 |   setLine({ commit }, data){
247 |     commit('SET_LINE', data)
248 |   }
249 | }


--------------------------------------------------------------------------------