22 < div class ="section ">
33 < form #shelterForm ="ngForm " (submit) ="addShelter() ">
44 < div class ="columns ">
5- < div class ="column ">
6- < div class ="field ">
7- < label class ="label "> Name</ label >
8- < div class ="control ">
9- < input class ="input " type ="text " placeholder ="Name " [(ngModel)] ="shelter.name " name ="name " required >
5+ < div class ="column is-1 ">
6+ < ul class ="steps is-vertical ">
7+ < li class ="steps-segment " [ngClass] ="{'is-active': shelterDetailsTab === 0} ">
8+ < span class ="steps-marker "> </ span >
9+ </ li >
10+ < li class ="steps-segment " [ngClass] ="{'is-active': shelterDetailsTab === 1} ">
11+ < span class ="steps-marker "> </ span >
12+ </ li >
13+ </ ul >
14+ </ div >
15+ < div class ="column " *ngIf ="shelterDetailsTab === 0 ">
16+ < div class ="columns ">
17+ < div class ="column ">
18+ < div class ="field ">
19+ < label class ="label "> Shelter Name</ label >
20+ < div class ="control ">
21+ < input class ="input " type ="text " placeholder ="Shelter Name " [(ngModel)] ="shelter.name " name ="name " required >
22+ </ div >
23+ </ div >
1024 </ div >
1125 </ div >
12- </ div >
13- </ div >
14- < div class ="columns ">
15- < div class ="column " >
16- < div class ="field ">
17- < label class ="label " > Contact Number</ label >
18- < div class =" control " >
19- < input class =" input " type =" text " placeholder =" Contact Number " [(ngModel)] =" shelter.contact " name =" contact "
20- required >
26+ < div class =" columns " >
27+ < div class =" column " >
28+ < div class ="field ">
29+ < label class ="label " > Contact Number </ label >
30+ < div class ="control ">
31+ < input class ="input " type =" text " placeholder =" Contact Number " [(ngModel)] =" shelter.contact " name =" contact "
32+ required >
33+ </ div >
34+ </ div >
2135 </ div >
2236 </ div >
23- </ div >
24- </ div >
25- < div class ="columns ">
26- < div class ="column ">
27- < div class ="field ">
28- < label class ="label "> Address</ label >
29- < div class ="control ">
30- < input class ="input " type ="text " placeholder ="Address " [(ngModel)] ="shelter.address " name ="address "
31- required >
37+ < div class ="columns ">
38+ < div class ="column ">
39+ < div class ="field ">
40+ < label class ="label "> Address</ label >
41+ < div class ="control ">
42+ < input class ="input " type ="text " placeholder ="Address " [(ngModel)] ="shelter.address " name ="address "
43+ required >
44+ </ div >
45+ </ div >
46+ </ div >
47+ </ div >
48+ < div class ="columns ">
49+ < div class ="column ">
50+ < div class ="field ">
51+ < label class ="label "> City</ label >
52+ < div class ="control ">
53+ < input class ="input " type ="text " placeholder ="City " [(ngModel)] ="shelter.city " name ="city " required >
54+ </ div >
55+ </ div >
56+ </ div >
57+ </ div >
58+ < div class ="columns ">
59+ < div class ="column ">
60+ < div class ="field ">
61+ < label class ="label "> State</ label >
62+ < div class ="control ">
63+ < input class ="input " type ="text " placeholder ="State " [(ngModel)] ="shelter.state " name ="state "
64+ required >
65+ </ div >
66+ </ div >
67+ </ div >
68+ </ div >
69+ < div class ="columns ">
70+ < div class ="column ">
71+ < div class ="field ">
72+ < label class ="label "> Zip Code</ label >
73+ < div class ="control ">
74+ < input class ="input " type ="text " placeholder ="Zip Code " [(ngModel)] ="shelter.zipcode " name ="zipcode "
75+ required >
76+ </ div >
77+ </ div >
3278 </ div >
3379 </ div >
3480 </ div >
35- </ div >
36- < div class ="columns ">
37- < div class ="column ">
38- < div class ="field ">
39- < label class ="label "> City</ label >
40- < div class ="control ">
41- < input class ="input " type ="text " placeholder ="City " [(ngModel)] ="shelter.city " name ="city " required >
81+ < div class ="column " *ngIf ="shelterDetailsTab === 1 ">
82+ < div class ="columns ">
83+ < div class ="column ">
84+ < div class ="field ">
85+ < label class ="label "> Property Type < span *ngIf ="shelter.propertyType " (click) ="shelter.propertyType = null "
86+ class ="is-size-6 has-text-info is-pulled-right "> clear</ span > </ label >
87+ < div class ="control radio-group ">
88+ < input class ="is-checkradio " type ="radio " id ="property-type-public " value ="0 " [(ngModel)] ="shelter.propertyType "
89+ name ="propertyType ">
90+ < label for ="property-type-public "> Public</ label >
91+ < input class ="is-checkradio " type ="radio " id ="property-type-private " value ="1 " [(ngModel)] ="shelter.propertyType "
92+ name ="propertyType ">
93+ < label for ="property-type-private "> Private</ label >
94+ </ div >
95+ </ div >
96+ </ div >
97+ </ div >
98+
99+ < div class ="columns ">
100+ < div class ="column ">
101+ < div class ="field ">
102+ < label class ="label "> Infant Friendly? < span *ngIf ="shelter.infantFriendly " (click) ="shelter.infantFriendly = null "
103+ class ="is-size-6 has-text-info is-pulled-right "> clear</ span > </ label >
104+ < div class ="control radio-group ">
105+ < input class ="is-checkradio " type ="radio " id ="infant-friendly-yes " value ="1 " [(ngModel)] ="shelter.infantFriendly "
106+ name ="infantFriendly ">
107+ < label for ="infant-friendly-yes "> Yes</ label >
108+ < input class ="is-checkradio " type ="radio " id ="infant-friendly-no " value ="0 " [(ngModel)] ="shelter.infantFriendly "
109+ name ="infantFriendly ">
110+ < label for ="infant-friendly-no "> No</ label >
111+ </ div >
112+ </ div >
113+ </ div >
114+ </ div >
115+
116+ < div class ="columns ">
117+ < div class ="column ">
118+ < div class ="field ">
119+ < label class ="label "> Elder Friendly? < span *ngIf ="shelter.elderFriendly " (click) ="shelter.elderFriendly = null "
120+ class ="is-size-6 has-text-info is-pulled-right "> clear</ span > </ label >
121+ < div class ="control radio-group ">
122+ < input class ="is-checkradio " type ="radio " id ="elder-friendly-yes " value ="1 " [(ngModel)] ="shelter.elderFriendly "
123+ name ="elderFriendly ">
124+ < label for ="elder-friendly-yes "> Yes</ label >
125+ < input class ="is-checkradio " type ="radio " id ="elder-friendly-no " value ="0 " [(ngModel)] ="shelter.elderFriendly "
126+ name ="elderFriendly ">
127+ < label for ="elder-friendly-no "> No</ label >
128+ </ div >
129+ </ div >
130+ </ div >
131+ </ div >
132+
133+ < div class ="columns ">
134+ < div class ="column ">
135+ < div class ="field ">
136+ < label class ="label "> Are you living with your family? < span *ngIf ="shelter.family " (click) ="shelter.family = null "
137+ class ="is-size-6 has-text-info is-pulled-right "> clear</ span > </ label >
138+ < div class ="control radio-group ">
139+ < input class ="is-checkradio " type ="radio " id ="family-yes " value ="1 " [(ngModel)] ="shelter.family " name ="family ">
140+ < label for ="family-yes "> Yes</ label >
141+ < input class ="is-checkradio " type ="radio " id ="family-no " value ="0 " [(ngModel)] ="shelter.family " name ="family ">
142+ < label for ="family-no "> No</ label >
143+ </ div >
144+ </ div >
145+ </ div >
146+ </ div >
147+
148+ < div class ="columns " *ngIf ="shelter.family === '1' ">
149+ < div class ="column ">
150+ < div class ="field ">
151+ < label class ="label "> Age range of family members < span *ngIf ="shelter.familyAgeMin || shelter.familyAgeMax " (click) ="shelter.familyAgeMin = null; shelter.familyAgeMax = null "
152+ class ="is-size-6 has-text-info is-pulled-right "> clear</ span > </ label >
153+
154+ < div class ="control ">
155+ < div class ="columns ">
156+ < div class ="column is-2 ">
157+ < input class ="input " type ="number " placeholder ="Min " [(ngModel)] ="shelter.familyAgeMin " name ="familyAgeMin ">
158+ </ div >
159+ < div class ="column is-2 ">
160+ < input class ="input " type ="number " placeholder ="Max " [(ngModel)] ="shelter.familyAgeMax " name ="familyAgeMax ">
161+ </ div >
162+ </ div >
163+ </ div >
164+ </ div >
42165 </ div >
43166 </ div >
44167 </ div >
45168 </ div >
46- < div class ="columns ">
169+
170+ < div class ="columns has-text-centered ">
47171 < div class ="column ">
48- < div class ="field ">
49- < label class ="label "> State</ label >
50- < div class ="control ">
51- < input class ="input " type ="text " placeholder ="State " [(ngModel)] ="shelter.state " name ="state "
52- required >
53- </ div >
54- </ div >
172+ < button type ="button " class ="button is-primary " (click) ="changeAddShelterTab(-1) " [disabled] ="shelterDetailsTab == 0 "> Previous</ button >
173+ </ div >
174+ < div class ="column ">
175+ < button type ="button " class ="button is-primary " (click) ="changeAddShelterTab(1) " [disabled] ="shelterDetailsTab == 1 "> Next</ button >
55176 </ div >
56177 </ div >
178+
57179 < div class ="columns ">
58180 < div class ="column ">
59181 < div class ="field ">
68190 < div class ="columns ">
69191 < div class ="column ">
70192 < div class ="field ">
71- < button class ="button is-primary is-outlined " [disabled] ="!shelterForm.form.valid "> Add Shelter</ button >
193+ < button class ="button is-primary is-outlined " [disabled] ="!shelterForm.form.valid " type ="submit "> Add
194+ Shelter</ button >
72195 </ div >
73196 </ div >
74197 </ div >
75198 </ form >
76199 </ div >
77- </ div >
200+ </ div >
0 commit comments