Files
WrenchBoardIonic2023/src/app/pages/invite/invite.page.html
T
CHIEFSOFT\ameye dcb3b7aa08 refer data parts
2024-12-02 05:52:35 -05:00

139 lines
5.7 KiB
HTML

<ion-header class="ion-no-border">
<ion-toolbar>
<ion-buttons slot="start" (click)="onBack()">
<ion-button>
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Invite Friends</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="boxed_contents">
<div class="inv-head">Invite Friends</div>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button style="background-color: #fcf7ee; color: black; font-size: 14px; font-weight: bolder;" (click)="setTabMode(100);">Name & Email</ion-button>
<ion-button style="background-color: aliceblue; color: black; font-size: 14px; font-weight: bolder;" (click)="setTabMode(200);">From Contacts</ion-button>
<ion-button style="background-color: #ebe4ee; color: black; font-size: 14px; font-weight: bolder;" (click)="setTabMode(300);">Links</ion-button>
</ion-buttons>
</ion-toolbar>
<div *ngIf="tabMode == 100 " class="lesson">
<div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
<div style="margin-top: 10px; background-color: #fcf7ee; border-radius: 10px; padding: 5px">
<ion-grid style="margin: 0px; padding: 0px; background-color: #fcf7ee; border-radius: 10px;">
<ion-row style="margin: 0px; padding: 10px 0px;">
<ion-col style="margin: 0px; padding: 0px 5px 0px 0px;"><ion-input style="background-color: white; border-radius: 5px;" type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input></ion-col>
<ion-col style="margin: 0px; padding: 0px;"><ion-input style="background-color: white; border-radius: 5px;" type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input></ion-col>
</ion-row>
<ion-row style="margin: 0px; padding: 10px 0px; ">
<ion-col style="margin: 0px; padding: 0px;">
<ion-input style="background-color: white; border-radius: 5px; " type="email" placeholder="Email" maxlength="55" [(ngModel)]='email'></ion-input>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div style="padding: 10px 10px 0px 10px;">
<ion-button
shape="round"
expand="block"
size="small"
(click)="sendRefer()">
Send Invite
</ion-button>
</div>
</div>
</div>
<div *ngIf="tabMode == 200 " class="lesson">
<div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
<div style="margin-top: 10px; background-color: aliceblue; min-height: 150px; border-radius: 10px;">
<ion-grid>
<ion-row style="padding: 0px; margin: 0px;">
<ion-col style="padding: 0px; margin: 0px;">
<ion-searchbar animated="true" placeholder="Search Contacts" style="margin: 0px;"></ion-searchbar>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div style="padding:10px 10px 0px 10px;">
<ion-button (click)="refreshContacts()"
shape="round"
expand="block"
size="small">Refresh Contacts</ion-button>
</div>
</div>
</div>
<div *ngIf="tabMode == 300 " class="lesson">
<div class="ion-padding" slot="content" style="padding: 5px">
<div style="margin-top: 10px; background-color: whitesmoke; min-height: 100px; border-radius: 10px;">
<ion-grid>
<ion-row style="padding: 0px; margin: 0px;">
<ion-col style="padding: 0px; margin: 0px;">
<ion-textarea [readonly]="true" style="background-color: #eff2f4;
border-radius: 5px;
padding: 20px 1px 10px 1px;
height: 60px;
border-color: #3dc2ff;">
{{refer_link}}
</ion-textarea>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="text-align: right;">
<ion-button shape="round" size="small" color="secondary" (click)="sendToMyEmail()"> Send link to my email</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
<!-- <div style="padding: 10px 10px 0px 10px;">-->
<!-- <ion-button (click)="sendtoMyEmail()"-->
<!-- shape="round"-->
<!-- expand="block"-->
<!-- size="small">Send to my Email</ion-button>-->
<!-- </div>-->
</div>
</div>
<div class="lesson" style="background-color: white; padding: 5px;">
<div style="flex-direction: column;">
<div class="inv-head">Previous Invitations</div>
<div style="font-size: 10px;">Uncompleted signup will be removed automatically after 7 days</div>
</div>
<div class="video" *ngFor="let item of referData;" >
<div class="left">
<div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/invite-friend.svg)'"></div>
<div class="text">
<div class="bold_text" >{{item.firstname}} {{item.lastname}} </div>
<div class="msg_text"> {{item.email}}</div>
<ion-label class="due_date">{{item.added_date}} - {{item.status}}</ion-label>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
</div>
</div>
</ion-content>