Merge pull request #191 from SoftStackFactory/dev

Dev

Author: khoadnguyen

src/pages/profile/profile.html

@@ -102,7 +102,7 @@
   <div class="buttons-div">
   <button ion-button class="buttons1" outline color="dark">Edit Profile</button>
 
-  <button ion-button outline class="buttons1" color="dark">Logout</button>
+  <button ion-button outline class="buttons1" color="dark" (click)='onLogout()'>Logout</button>
   </div>
 
 </ion-content>

src/pages/profile/profile.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
+import { UserProvider } from '../../providers/user/user';
 
 /**
  * Generated class for the ProfilePage page.
@@ -14,11 +15,19 @@ import { NavController, NavParams } from 'ionic-angular';
 })
 export class ProfilePage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, public user :UserProvider) {
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad ProfilePage');
   }
 
+  onLogout() {
+    this.user.logoutUser(window.sessionStorage.getItem('token'))
+      .subscribe( response => {
+        console.log('onsubscibe-logout')
+        window.sessionStorage.clear()
+      })
+  }
+
 }

src/pages/wizard/wizard.html

@@ -45,46 +45,48 @@ <h1 class="h1">Home Dasboard</h1>
             <p class="h2">Here you will find links to the timeline and self assessment section.
             Usefull tips and links are also available to check out.</p>
           </ion-list>
-          <img id='dashImg' src='../../assets/imgs/dashboard.png'>
+          <img  class= "demo-img" src='../../assets/imgs/dashboard.png'>
         </div>
       </ion-slide>
 
       <ion-slide class="demo-slide">
         <div class='top-demo'>
-          <ion-list class="demo-header list list-ios" >
+          <ion-list class="demo-header list list-ios">
             <ion-list-header class='item item-ios list-header list-header-ios'>
-              <h1 class="h1">Self Assessment</h1>
+              <h1 class="h1">Life Balance Wheel</h1>
             </ion-list-header>
-            <p class='h2'>Here you will be promted to take your self assessment to assess your finances, relationships, family, and
-              more!
-            </p>
+            <p class='h2'>Here you will be promted to take your self assessment for your finances, health, family, and
+              more. This chart will display the results of your self assesment.</p>
           </ion-list>
-          <img id="self" src='../../assets/imgs/asssesment.png'>
+          <img class='demo-img' src='../../assets/imgs/assessment.png'>
         </div>
       </ion-slide>
 
       <ion-slide class="demo-slide">
         <div class='top-demo'>
-          <ion-list class="demo-header list list-ios">
-            <ion-list-header class='item item-ios list-header list-header-ios'>
-              <h1 class="h1">Life Balance Wheel</h1>
+          <ion-list class="demo-header list list-ios" >
+            <ion-list-header class='item item-ios list-header list-header-ios'> 
+              <h1 class="h1">Timeline</h1>
             </ion-list-header>
-            <p class='h2'>This chart will display the results of your self assesment by category.</p>
+            <p class='h2'>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
+                item that you need to accomplish.
+            </p>
           </ion-list>
-          <img src='../../assets/imgs/whell.png'>
+          <img class='demo-img' src='../../assets/imgs/timeline.png'>
         </div>
       </ion-slide>
 
       <ion-slide class="demo-slide">
         <div class='top-demo'>
-          <ion-list class="demo-header list list-iosr" >
-            <ion-list-header class='item item-ios list-header list-header-ios'> 
-              <h1 class="h1">Timeline</h1>
+          <ion-list class="demo-header list list-ios" >
+            <ion-list-header class='item item-ios list-header list-header-ios'>
+              <h1 class="h1">Profile</h1>
             </ion-list-header>
-            <p class='h2'>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
-                item that you need to accomplish.</p>
-          </ion-list >
-          <img id="time" src='../../assets/imgs/timeline.png'>
+            <p class='h2'>
+             In your profile page you can see your information or update it at any time .
+            </p>
+          </ion-list>
+          <img class= 'demo-img'src='../../assets/imgs/profile.png'>
         </div>
       </ion-slide>
 
@@ -145,7 +147,6 @@ <h1 class="h1">Questionnaire <ion-badge>1/3</ion-badge></h1>
                   Are you an active member or a veteran?
                 </ion-item-divider>
                 <ion-item class="q-wrapper">
-                  <a class="select" >Select</a>
                   <ion-select 
                     placeholder="Select &#x25BC;"
                     formControlName="vetOrActive"
@@ -197,7 +198,7 @@ <h1 class="h1">Questionnaire <ion-badge>1/3</ion-badge></h1>
                   </ion-select>
                 </ion-item>
                 <ion-item  no-lines *ngIf="!firstForm.controls.disability.valid && (firstForm.controls.disability.touched || submitIntent)" >
-                    <p class="invalid-text">Enter an option</p>
+                  <p class="invalid-text">Enter an option</p>
                 </ion-item>
               </ion-item-group>
             </ion-card>
@@ -249,7 +250,7 @@ <h1 class="h1">Questionnaire <ion-badge>2/3</ion-badge></h1>
                   <ion-select 
                     placeholder="Select&#x25BC;"
                     formControlName="employment"
-                    [selectOptions] = 'UnemployedOptions'>
+                    [selectOptions] = 'unemployedOptions'>
                     <ion-option value="Employed">Employed</ion-option>
                     <ion-option value="Unemployed">Unemployed</ion-option>
                   </ion-select>
@@ -281,27 +282,6 @@ <h1 class="h1">Questionnaire <ion-badge>2/3</ion-badge></h1>
               </ion-item-group>
             </ion-card>    
 
-            <ion-card  [class.invalid]="!secondForm.controls.marital.valid && (secondForm.controls.marital.touched)" class="card-wrapper">
-              <ion-item-group>
-                <ion-item-divider class='q-group' color="light">
-                    Are you married?
-                </ion-item-divider>
-                <ion-item class="q-wrapper">
-                  <ion-select 
-                  placeholder="Select&#x25BC;"
-                  formControlName="marital"
-                  [selectOptions] = 'marriageOptions'>
-                  <ion-option value="married">Yes</ion-option>
-                  <ion-option value="notMarried">No</ion-option>
-                </ion-select>
-                </ion-item>
-                <ion-item *ngIf="!secondForm.controls.marital.valid && (secondForm.controls.marital.touched)" >
-                    <p class="invalid-text">Enter an option</p>
-                </ion-item>
-              </ion-item-group>
-            </ion-card>     
-
-
             <ion-card  [class.invalid]="!secondForm.controls.marital.valid && (secondForm.controls.marital.touched)" class="card-wrapper">
               <ion-item-group>
                 <ion-item-divider class='q-group' color="light">
@@ -324,7 +304,7 @@ <h1 class="h1">Questionnaire <ion-badge>2/3</ion-badge></h1>
                 </ion-item>
               </ion-item-group>
             </ion-card>     
-      <!-- <button ion-button type="submit" [disabled]="" (click)="onSubmit()" >submit</button> -->
+    
           </form>
         </div> 
       </ion-slide> 
@@ -406,7 +386,7 @@ <h1 class="h1">Questionnaire <ion-badge>3/3</ion-badge> </h1>
                 </ion-select>
                 </ion-item>
                 <ion-item *ngIf="!thirdForm.controls.enlistedPay.valid && (thirdForm.controls.enlistedPay.touched)" >
-                    <p class="invalid-text">Enter an option</p>
+                  <p class="invalid-text">Enter an option</p>
                 </ion-item>
               </ion-item-group>
             </ion-card>     

src/pages/wizard/wizard.scss

@@ -56,10 +56,7 @@ page-wizard {
     }
     .top-question{
         position: relative;
-        //display: block;
-        // width: 70%;
         margin: auto auto 50px auto;
-      //  font-size: 2.5vw;
         top: 12vw;
     }
     .list-header-md {
@@ -76,12 +73,12 @@ page-wizard {
         padding: 5px;
         margin: 0px !important;
         top: -5px;
-       
     }
     .h1{
         font-weight: bold;
         font-size: 20px;
         margin-right: 5px;
+        white-space: normal;
     } 
     .h2 {
         white-space: normal;
@@ -90,22 +87,15 @@ page-wizard {
         margin: 15px auto auto auto;
         top: 20px;
     }
-    #dashImg {
-        width: 60%;
-        //height: 80%;
-    }
-    #self {
-        width: 60%;
-     //   height: 70%;
-    }
-    #timeline {
-        width: 80%;
-    }
     img {
        // margin-top: 10px auto auto auto;
         display: inline;
         box-shadow: 0px 1px 66px -4px rgba(0,0,0,0.68);
     }
+    .demo-img{
+        width: 60%;
+
+    }
     .select-placeholder, .select-text{
         font-size: 20px;
     }
@@ -124,7 +114,6 @@ page-wizard {
     .date {
         float: left;
     }
-      
     .question-header {
         position: relative;
     } 
@@ -212,33 +201,29 @@ page-wizard {
             height: 55px;
             margin: auto
         }
-    }
-    @media screen and (min-width: 1024px) {
         .h1 {
             font-size: 40px;
         }
         .h2 {
             font-size: 28px;
-        }
+        }   
+
+    }
+    @media screen and (min-width: 1024px) {
         @media screen and(orientation: portrait){
             .button1{
                 width: 230px;
                 height: 70px;
             }
+            .h1 {
+                font-size: 50px;
+            }
+            .h2 {
+                font-size: 38px;
+            }
         } 
     }
-    @media screen and (max-width: 812px) and (orientation: landscape){
-        .question-header{
-            margin: 0px;
-            top: -30px;
-        }
-        .form {
-            margin-top: -25px;
-        }
-        .inner-question-header {
-            margin: 7px auto 0px auto;
-        }
-    }
+   
     @media screen and (max-width: 767px){
         ion-badge{
             font-size: 15px;
@@ -254,24 +239,7 @@ page-wizard {
             }
         }
     }
-    @media screen and (max-width: 824px) and (orientation: landscape){
-        ion-badge{
-            font-size: 15px;
-            padding: 3px;
-        } 
-        .top-simple {
-            top: auto;
-            width: 80%!important;
-         }
-    }
-    @media screen and (min-width: 700px) and (orientation: portrait){
-        .h1 {
-            font-size: 40px;
-        }
-        .h2 {
-            font-size: 28px;
-        }
-    }
+  
     @media screen and (orientation:landscape) {
         .demo-slide .slide-zoom {
             display: flex;
@@ -291,20 +259,10 @@ page-wizard {
         .demo-header {
             width: 40%;
         }
-        img {
-           width: 100px;
-        }
-        #dashImg {
-            width: 30%;
-            height: 80%;
-        }
-        #self {
-            width: 30%;
-            height: 70%;
-        }
-        #timeline {
-            width: 35%;
-        }
+        .demo-img{
+            width: 37%;
+            margin-left: 2.2vw;
+        } 
         .top-question {
             position: relative;
             top: 80px;
@@ -316,8 +274,41 @@ page-wizard {
                 height: 70px;
                 font-size: 30px;
             }
-       }     
+            .h1 {
+                font-size: 50px;
+            }
+            .h2 {
+                font-size: 38px;
+            }
+       }   
+       @media screen and (max-width: 850px) {
+            ion-badge{
+                font-size: 15px;
+                padding: 3px;
+            } 
+            .top-simple {
+                top: auto;
+                width: 80%;
+            }
+            .demo-img{
+                width: 25%;
+            }
+            .demo-header {
+                width: 55%;
+            }
+            .question-header{
+                margin: 0px;
+                top: -30px;
+            }
+            .form {
+                margin-top: -25px;
+            }
+            .inner-question-header {
+                margin: 7px auto 0px auto;
+            }    
+       }
     }
+       
     .invalid {
         box-shadow: 0px 0px 10px 3px#ea6153;
     }

src/pages/wizard/wizard.ts

@@ -231,7 +231,7 @@ export class WizardPage {
   branchOption = this.customizeSelectOptions("Military Branch", "Select a branch");
   vetOrActiveOptions = this.customizeSelectOptions("Military Status", "Select one");
   disabilityOptions = this.customizeSelectOptions("Disability Status", "Select one");
-  UnemployedOptions = this.customizeSelectOptions("Employement Status", "Select one");
+  unemployedOptions = this.customizeSelectOptions("Employement Status", "Select one");
   maritalOptions = this.customizeSelectOptions("Marital Status","Select one");
   insigniaOptions = this.customizeSelectOptions("Officer Rank Insignia", "Select one")
   enlistedPayOptions = this.customizeSelectOptions("Enlisted Pay Rank", "Select one")

src/providers/user/user.ts

@@ -32,7 +32,13 @@ export class UserProvider {
     return this.http.post(this.requestUrl + '/appUsers/login', creds);
   }
 
+  logoutUser(token:any) {
+    console.log('onservice-logout')
+    return this.http.post(this.requestUrl + "/appUsers/logout", token )
+  }
+  
   getUser(id) {
     return this.http.get(this.requestUrl + '/appUsers/' + id)
+
   }
 }