whitesportapp/src/pages/login/login.html

<!--
    Generated template for the LoginPage page.

    See http://ionicframework.com/docs/components/#navigation for more info on
    Ionic pages and navigation.
-->
<ion-header>

    <ion-navbar color="primary">
        <ion-title>My Profile</ion-title>
    </ion-navbar>
    <ion-toolbar no-border-top *ngIf="isLogin == true">
        <ion-segment [(ngModel)]="seg" color='secondary'>
            <ion-segment-button value="myinfo">
                My Info
            </ion-segment-button>
            <ion-segment-button value="activities" (ionSelect)="getMyActivities()">
                Activities
            </ion-segment-button>
            <ion-segment-button value="myWallet" (ionSelect)="selectWallet()">
                Wallet
            </ion-segment-button>
            <ion-segment-button value="history">
                My Coupons
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>


<ion-content>
 <ion-refresher (ionRefresh)="refreshSwitch($event)" *ngIf="isLogin">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
    <!--
        {{ isLogin }} -->
        <div *ngIf="isLogin === false" padding class="forest-bg" style="height:100%">
            <ion-grid style="height:100%">
                <ion-row justify-content-center align-items-center style="height: 100%">
                    <ion-col col-12>
                        <img src="assets/imgs/stravalogo.png" id='stravalogo'>
                        <button ion-button block (click)="openWeb()" color='yellow-tab' id='login-btn'>
                            Login With Strava
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <!-- 
                <a href="http://localhost:8000/strava/">Login Strava</a> -->
        </div>
        <div *ngIf="isLogin === true" padding-top>
            <!-- 
                {{ seg }} -->
                <div [ngSwitch]="seg" *ngIf="profileObject">
                    <div  *ngSwitchCase="'myinfo'">
                        <!-- 
                            {{ profileObject | json }} -->
                            <ion-card>

                                <div>
                                    <img [src]="profileObject.profile_medium"/>
                                </div>

                                <ion-card-content>
                                    <ion-card-title>
                                        {{ profileObject.firstname }} {{ profileObject.lastname }}
                                    </ion-card-title>
                                    <p>
                                    {{ profileObject.city }} {{ profileObject.state }} {{ profileObject.country }}<br>
                                    {{ profileObject.description }}
                                    </p>
                                    <form #f="ngForm" (ngSubmit)="profileSave(f)">
                                    <ion-input placeholder="Enter Your Firstname and Lastname" [(ngModel)]="profile.fullName"  required=true name="fullName" #fullName="ngModel"></ion-input>

                                    <ion-label color="danger" *ngIf="fullName.invalid && (fullName.dirty || fullName.touched)">
                                        <div *ngIf="fullName.errors.required">
                                            Name is required.
                                        </div>
                                    </ion-label>
                                    <ion-input placeholder="Enter Email" [(ngModel)]="profile.email" type='email' required name='email' #email="ngModel"></ion-input>

                                    <ion-label color="danger" *ngIf="email.invalid && (email.dirty || email.touched)">
                                        <div *ngIf="email.errors.required">
                                            Email is required.
                                        </div>
                                    </ion-label>
                                    <ion-input placeholder="Enter Tel." [(ngModel)]="profile.tel" required name='tel' #tel="ngModel"></ion-input>

                                    <ion-label color="danger" *ngIf="tel.invalid && (tel.dirty || tel.touched)">
                                        <div *ngIf="tel.errors.required">
                                            Tel. is required.
                                        </div>
                                    </ion-label>
                                     <ion-textarea placeholder="Enter Your Address" [(ngModel)]="profile.address" required name='address' #address="ngModel"></ion-textarea>

                                    <ion-label color="danger" *ngIf="address.invalid && (address.dirty || address.touched)">
                                        <div *ngIf="address.errors.required">
                                            Address is required.
                                        </div>
                                    </ion-label>
                                        <button ion-button  color="primary" name='updateProfile' type='submit' block>
                                            <ion-icon name='save'></ion-icon>
                                            Update Profile
                                        </button>
                                        <!--
                                        {{ f.value | json }}
                                        {{ f.valid | json }} -->
                                    </form>
                                    <!--
                                    <dl>
                                        <dt>Email</dt><dd>{{ profileObject.email }}</dd>
                                        <dt>Description</dt><dd>{{ profileObject.description  }}</dd>

                                    </dl> -->
                                </ion-card-content>

                                <ion-row no-padding>
                                    <ion-col>
                                        <button ion-button  color="danger" (click)="logout()" block>
                                            <ion-icon name='log-out'></ion-icon>
                                            Log Out
                                        </button>
                                    </ion-col>
                                </ion-row>

                            </ion-card> 
                    </div>
                    <div *ngSwitchCase="'myWallet'" padding>
                        <h2 text-center>
                            <img src='assets/imgs/wallet-solid.png' id="walletIcon"><br>
                            You have {{ points | number :'1.2-2' }} Points</h2>
                        <button ion-button block (click)="doRefresh($event)">{{ refreshText }}</button>
                    </div>
                    <div *ngSwitchCase="'activities'">
                        <ion-list>

                            <ion-item-sliding *ngFor="let a of acts" #slideItem>
                                <ion-item>
                                    <h2>{{ a.name }}</h2>

                                    <p>{{ a.start_date.$date | date :'short'  }} - {{ a.distance.slice(0,-1) / 1000 | number :'1.2-2' }}km</p>
                                    <ion-badge [color]="a.used ? 'light': 'primary'">{{ a.used ? "ใช้ไปแล้ว": "สไลด์ เพื่อแลกแต้ม" }}</ion-badge>
                                </ion-item>
                                <ion-item-options *ngIf="!a.used">
                                    <button ion-button color="primary" icon-start (click)="redeem(a, slideItem)">
                                        <ion-icon name="pricetag"></ion-icon>
                                        แลกแต้ม
                                    </button>
                                    <!-- 
                                        <button ion-button color="primary" icon-start>
                                        <ion-icon name="text"></ion-icon>
                                        Text
                                        </button>
                                        <button ion-button color="secondary" icon-start>
                                        <ion-icon name="call"></ion-icon>
                                        Call
                                        </button> -->
                                </ion-item-options>
                            </ion-item-sliding>
                        </ion-list>
                    </div>
                    <div *ngSwitchCase="'history'">
                        <ion-list>
                            <h1 *ngIf="!hists || hists.length == 0" text-center>
                            Please burn and checkout our coupons
                            </h1>
                            <ion-item *ngFor="let h of hists" >
                                <ion-thumbnail item-start>
                                    <img [src]="imageURL + h.p.feature_image">
                                </ion-thumbnail>
                                <h2>{{ h.p.name }}</h2>
                                <p>Cut: {{ h.p.cal_return  }}cals</p>
                                <p>{{ h.created_at.$date | date: 'short' }}</p>
                                <ion-note item-end *ngIf="!h.t.used">
                                    <button ion-button (click)="openViewCoupon(h)">Use</button>
                                </ion-note>
                            </ion-item>
                        </ion-list>
                    </div>
                </div>
        </div>
</ion-content>