Skip to content

Commit 4aaf791

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #100 from SoftStackFactory/65-wizard-validation-erro-message
65 wizard validation error message
2 parents c98a015 + 87bb1d6 commit 4aaf791

5 files changed

Lines changed: 564 additions & 154 deletions

File tree

‎src/app/app.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
// http://ionicframework.com/docs/theming/
22

3+
.branchRadio .alert-wrapper{
4+
// background-color: blue;
5+
width: 40vw;
6+
max-width: 500px;
7+
//height: 50vw;
8+
font-size: 20px;
9+
//font-size: 50px;
10+
}
11+
12+
@media screen and (min-width: 765) {
13+
.branchRadio .alert-wrapper{
14+
font-size: 50px;
15+
}
16+
}
17+
318

419
// App Global Sass
520
// --------------------------------------------------

‎src/pages/wizard/wizard.html‎

Lines changed: 147 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -14,103 +14,181 @@
1414
</ion-header>
1515

1616
<ion-content >
17-
1817
<div class="nav-start">
1918
<button ion-button (click)="exit()" class="start">Exit</button>
2019
<button ion-button (click)="back()"class="start">Back</button>
21-
<button ion-button (click)="next()" id="end">Next</button>
20+
<button ion-button [disabled]='nextButton' (click)="next()" id="end">Next</button>
2221
</div>
23-
<ion-slides pager (ionSlideDidChange)="slideChanged()">
24-
<ion-slide>
25-
<div class='top-simple'>
26-
<h1>Welcome</h1>
27-
<p> InTranshition is an app designed for Veterans to transition into the civial environment.
28-
This wizard will guide you through the app <br><br>
29-
<strong> Scroll to the right to begin.</strong>
30-
</p>
22+
23+
<ion-slides (ionSlideDidChange)="slideChanged()" pager>
24+
25+
<ion-slide class="demo-slide">
26+
<div class='top-simple'>
27+
<ion-list class="simple-header" >
28+
<ion-list-header>
29+
<h1 class="h1">Welcome Austin!!</h1>
30+
</ion-list-header>
31+
<p class="h2">InTranshition is an app designed for Veterans to transition into the civial environment.
32+
This wizard will guide you through the app.<br><br>
33+
<strong> Scroll to the right to begin.</strong>
34+
</p>
35+
</ion-list>
3136
</div>
3237
</ion-slide>
33-
<ion-slide>
38+
39+
<ion-slide class="demo-slide">
3440
<div class='top-demo'>
35-
<div class="top-message">
36-
<h1>Home Dasboard</h1>
37-
<p>Here you will find links to the timeline and self assessment section.<br><br>
38-
Usefull tips and links are also available to check out. </p>
39-
</div>
41+
<ion-list class="demo-header" >
42+
<ion-list-header>
43+
<h1 class="h1">Home Dasboard</h1>
44+
</ion-list-header>
45+
<p class="h2">Here you will find links to the timeline and self assessment section.
46+
Usefull tips and links are also available to check out.</p>
47+
</ion-list>
4048
<img id='dashImg' src='../../assets/imgs/dashboard.png'>
4149
</div>
4250
</ion-slide>
43-
<ion-slide>
51+
52+
<ion-slide class="demo-slide">
4453
<div class='top-demo'>
45-
<div class="top-message">
46-
<h1>Self Assessment</h1>
47-
<p>Here you will be promted to take your self assessment to assess your finances, relationships, family, and
48-
more!</p>
49-
</div>
54+
<ion-list class="demo-header" >
55+
<ion-list-header>
56+
<h1 class="h1">Self Assesment</h1>
57+
</ion-list-header>
58+
<p class='h2'>Here you will be promted to take your self assessment to assess your finances, relationships, family, and
59+
more!
60+
</p>
61+
</ion-list>
5062
<img id="self" src='../../assets/imgs/asssesment.png'>
5163
</div>
5264
</ion-slide>
53-
<ion-slide>
65+
66+
67+
<ion-slide class="demo-slide">
5468
<div class='top-demo'>
55-
<div class="top-message">
56-
<h1>Life Balance Wheel</h1>
57-
<p>This chart will display the results of your self assesment by category.</p>
58-
</div>
69+
<ion-list class="demo-header">
70+
<ion-list-header>
71+
<h1 class="h1">Life Balance Wheel</h1>
72+
</ion-list-header>
73+
<p class='h2'>This chart will display the results of your self assesment by category.</p>
74+
</ion-list>
5975
<img src='../../assets/imgs/whell.png'>
6076
</div>
6177
</ion-slide>
62-
<ion-slide>
78+
79+
<ion-slide class="demo-slide">
6380
<div class='top-demo'>
64-
<div class="top-message">
65-
<h1>Timeline</h1>
66-
<p>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
67-
item that you need to accomplish.</p>
68-
</div>
69-
81+
<ion-list class="demo-header" >
82+
<ion-list-header>
83+
<h1 class="h1">Timeline</h1>
84+
</ion-list-header>
85+
<p class='h2'>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
86+
item that you need to accomplish.</p>
87+
</ion-list >
7088
<img id="time" src='../../assets/imgs/timeline.png'>
7189
</div>
7290
</ion-slide>
73-
<ion-slide>
74-
<div class='top-form-page'>
75-
<div class="top-message">
76-
<h1>Tell more about yourself</h1>
77-
<p>By filling out this this short questionare, we can personalize the app for a better experience!</p>
78-
</div>
79-
</div>
80-
<form [formGroup]="todo" (ngSubmit)="logForm()">
81-
<div class='input-form'>
82-
<input class="input-item" formControlName="branch" type="text" #first placeholder="Military Branch" > <br>
83-
<ion-list radio-group formControlName="injured" >
84-
<ion-list-header>
85-
Have you been injured or wounded?
86-
</ion-list-header>
87-
<ion-item>
88-
<ion-label> yes</ion-label>
89-
<ion-radio value="yes"></ion-radio>
90-
</ion-item>
91-
92-
<ion-item>
93-
<ion-label>no</ion-label>
94-
<ion-radio value="no"></ion-radio>
95-
</ion-item>
96-
</ion-list>
97-
<ion-item>
98-
<ion-label>Date Enlisted</ion-label>
99-
<ion-datetime formControlName="EnlistingDate" displayFormat="MM/DD/YYYY" pickerFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
100-
</ion-item>
101-
<button ion-button type="submit" (click)="onSubmit()" [disabled]="!todo.valid"> Submit </button>
102-
</div>
103-
</form>
91+
92+
<ion-slide class='quest-slide'>
93+
<div class='top-question'>
94+
<ion-list class="question-header" >
95+
<ion-list-header class='inner-question-header' >
96+
<h1 class="h1">Questionnaire 1/3</h1>
97+
</ion-list-header>
98+
<p class='h2'>Tell us about yourself</p>
99+
</ion-list>
104100

105-
101+
<form [formGroup]="todo" (ngSubmit)="logForm()" (ionChange)="formChanged">
102+
<ion-card class="card-size">
103+
<ion-item-group>
104+
<ion-item-divider class='q-group' color="light">
105+
Select your Branch of Service
106+
</ion-item-divider>
107+
<ion-item class="">
108+
<span class='question'>{{branchDisplay}}</span>
109+
<a class="select" (click)="showRadioBranch()">Select</a>
110+
</ion-item>
111+
</ion-item-group>
112+
</ion-card>
113+
114+
<ion-card>
115+
<ion-item-group>
116+
<ion-item-divider class='q-group' color="light">
117+
Are you an active member or a veteran?
118+
</ion-item-divider>
119+
<ion-item class="">
120+
<span class='question'>{{vetDisplay}}</span>
121+
<a class="select" (click)="showVetOptions()">Select</a>
122+
</ion-item>
123+
</ion-item-group>
124+
</ion-card>
125+
126+
<ion-card *ngIf="vetSelection">
127+
<ion-item-group>
128+
<ion-item-divider class='q-group' color="light">
129+
{{vetQuestion}}
130+
</ion-item-divider>
131+
<ion-item class="q-wrapper">
132+
<ion-datetime
133+
type="date"
134+
formControlName="VetQuestionName"
135+
class='date'
136+
displayFormat="MM/DD/YYYY"
137+
>
138+
</ion-datetime>
139+
<ion-label ><a class="select">Select</a></ion-label>
140+
</ion-item>
141+
</ion-item-group>
142+
</ion-card>
143+
144+
<ion-card>
145+
<ion-item-group>
146+
<ion-item-divider class='q-group' color="light">
147+
Do you have any service disability?
148+
</ion-item-divider>
149+
<ion-item>
150+
<span class='question'>{{disabilityDisplay}}</span>
151+
<a class="select" #disabilityValue (click)="showRadioDisability()">Select</a>
152+
</ion-item>
153+
</ion-item-group>
154+
</ion-card>
155+
156+
<ion-card *ngIf="hasDisability">
157+
<ion-item-group>
158+
<ion-item-divider class='q-group' color="light">
159+
What Percentage?
160+
</ion-item-divider>
161+
<ion-item>
162+
<ion-input
163+
type="number"
164+
placeholder='Input Answer here..'
165+
formControlName="PercentageQuestionName"
166+
[required]="disabilityRequired"
167+
>
168+
</ion-input>
169+
</ion-item>
170+
</ion-item-group>
171+
</ion-card>
172+
<button ion-button type="submit" [disabled]="!todo.valid" >submit</button>
173+
</form>
174+
</div>
106175
</ion-slide>
107-
<ion-slide>
108-
<div class='top-simple'>
176+
177+
<ion-slide class="demo-slide">
178+
<div class='top-simple'>
179+
<ion-list class="simple-header" >
180+
<ion-list-header>
181+
<h1 id="end-wizard-h" class="h1">Thank you for using the Wizard</h1>
182+
</ion-list-header>
183+
<p class="h2">You may begin by taking the self assesment.</p>
184+
</ion-list >
185+
</div>
186+
<!-- <div class='top-simple'>
109187
<div class="top-message">
110188
<h1>Thanks for using the Wizard</h1>
111189
<p>You may begin by taking the self assesment.</p>
112190
</div>
113-
</div>
191+
</div> -->
114192
<div class='buttons'>
115193
<button class='button1' ion-button>Dashboard</button>
116194
<button class='button1' ion-button>Take Assesment</button>

0 commit comments

Comments
 (0)