Przeglądaj źródła

:construction: Rough draft of more adlibs style survey

tags/0.0.3^2
tomit4 3 lat temu
rodzic
commit
8b915ab59d

+ 34
- 4
frontend/src/components/onboarding/FormInput.vue Wyświetl plik

1
 <template lang="pug">
1
 <template lang="pug">
2
 .form-input
2
 .form-input
3
-    h3 {{ question.response_key_category }}
4
-    p {{ question.response_key_prompt }}
5
-    input(placeholder='i am a little teapot' type='text' v-model='input')
3
+    h3 Welcome to Siimee Onboarding! Let's get started!
4
+    span(v-if='question.response_key_prompt == "name"') Hi there, my {{ question.response_key_prompt }} is: 
5
+    input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
6
+    span(v-if='question.response_key_prompt == "email"') My {{ question.response_key_prompt }} is: 
7
+    input(v-if='question.response_key_prompt == "email"' placeholder='Jon_Doe@myemail.com' type='text' v-model='input')
8
+    span(v-if='question.response_key_prompt == "password"') Please input a {{ question.response_key_prompt }}: 
9
+    input(v-if='question.response_key_prompt == "password"' placeholder='mysupersecretpassword' type='text' v-model='input')
10
+    span(v-if='question.response_key_prompt == "zipcode"') What zipcode would you like to see results from?{{ question.response_key_prompt }}: 
11
+    input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
12
+    span(v-if='question.response_key_prompt == "blurb"') Please provide us with a short {{ question.response_key_prompt }} about yourself?: 
13
+    textarea(v-if='question.response_key_prompt == "blurb"' placeholder='I was born on a distant planet named Krypton, but was raised in a small town called SmallVille...' type='text' v-model='input' rows='4' cols='50')
14
+    p(v-if='question.response_key_prompt == "image"')
15
+        p Please Upload a Profile Image:
16
+        button(@click='submitImage') Upload Image
6
     w-button.ma1.grow(@click='handleSubmit') NEXT
17
     w-button.ma1.grow(@click='handleSubmit') NEXT
7
 </template>
18
 </template>
8
 <script>
19
 <script>
20
     }),
31
     }),
21
     methods: {
32
     methods: {
22
         handleSubmit() {
33
         handleSubmit() {
23
-            if(this.question.response_key_prompt === 'password') {
34
+            if (this.question.response_key_prompt === 'password') {
24
                 this.$emit('update-answers') // no password collection
35
                 this.$emit('update-answers') // no password collection
25
                 return
36
                 return
26
             }
37
             }
31
             }
42
             }
32
             this.$emit('update-answers', payload)
43
             this.$emit('update-answers', payload)
33
         },
44
         },
45
+        submitImage() {
46
+            let payload = {
47
+                question: this.question,
48
+                answer: 'placeholder for image'
49
+            }
50
+            this.$emit('update-answers', payload)
51
+        }
34
     },
52
     },
35
 }
53
 }
36
 </script>
54
 </script>
55
+
56
+<style>
57
+h3 {
58
+    text-align: center;
59
+}
60
+input {
61
+  border: 0;
62
+  outline: 0;
63
+  background: transparent;
64
+  border-bottom: 1px solid black;
65
+}
66
+</style>

+ 10
- 0
frontend/src/views/OnboardingView.vue Wyświetl plik

5
         v-if='survey'
5
         v-if='survey'
6
     )
6
     )
7
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
7
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
8
+        p(v-if='answered.name') Welcome {{ answered.name }}!
9
+        p(v-if='answered.email') It looks like your email is: {{ answered.email }}.
10
+        p(v-if='answered.zipcode') You're looking for opportunities around: {{ answered.zipcode }}.
11
+        p(v-if='answered.blurb') This is your Origin Story:
12
+            p {{ answered.blurb }}.
13
+        p(v-if='answered.image') You've uploaded the following image:
14
+            p {{ answered.image }}.
8
         .step(v-for='(step, i) in survey.steps')
15
         .step(v-for='(step, i) in survey.steps')
9
             component(
16
             component(
10
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
17
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
38
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
45
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
39
     },
46
     },
40
     methods: {
47
     methods: {
48
+        // this onSubmit() should actually submit and bring up a page that
49
+        // confirms submission (thank you, etc.)
50
+        // it appears that this should then start to display ./SurveyView.vue(?)
41
         onSubmit() {
51
         onSubmit() {
42
             console.log(JSON.stringify(this.answered))
52
             console.log(JSON.stringify(this.answered))
43
         },
53
         },

Ładowanie…
Anuluj
Zapisz