Invite Relatives

src/app/components/add-relatives/add-relatives.component.html

@@ -0,0 +1,118 @@
+<div>
+  <div *ngIf="isModalOpenBackdrop==false">
+    <ion-button size="small" shape="round" (click)="addStart()">Invite</ion-button>
+  </div>
+  <div *ngIf="isModalOpenBackdrop==true">
+    <div style="background-color: aliceblue; border-radius: 10px; padding: 10px; margin-top: 10px;">
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="Firstname"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='firstname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="lastname"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='lastname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="Email"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='email' ></ion-input>
+      </ion-item>
+<!--      <ion-item lines="none">-->
+<!--        <ion-label>Birthday(Year/Month)</ion-label>-->
+<!--      </ion-item>-->
+
+<!--      <ion-item lines="none">-->
+
+
+
+<!--        <ion-grid>-->
+<!--          <ion-row style="margin: 0px; padding: 0px;">-->
+<!--            <ion-col style="margin: 0px; padding: 4px;">-->
+<!--              <div style="width: 100%; background-color: #8b198e;">-->
+<!--                <div style="width: 30%; float: left;">-->
+
+<!--                  Year-->
+<!--                </div>-->
+
+<!--                <div style="width: 70%; float: right;">-->
+
+<!--                  <ion-select aria-label="Year"-->
+<!--                              (ionChange)="verifyEntry()"-->
+<!--                              [(ngModel)]='year'-->
+<!--                              style="background-color: aliceblue; border-radius: 10px; font-size: 12px; width:100%;">-->
+<!--                    <ion-select-option  *ngFor="let item1 of regYear"  value="{{item1}}">{{item1}}</ion-select-option>-->
+<!--                  </ion-select>-->
+
+<!--                </div>-->
+
+<!--              </div>-->
+
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+
+<!--          <ion-row style="margin: 0px; padding: 0px;">-->
+<!--            <ion-col style="margin: 0px; padding: 4px; ">-->
+<!--              <div style="width: 100%; background-color: #8b198e;">-->
+<!--                <div style="width: 30%; float: left;">-->
+<!--                  Month-->
+<!--                </div>-->
+
+<!--                <div style="width: 70%; float: right;">-->
+<!--                  <ion-select aria-label="Month"-->
+<!--                              (ionChange)="verifyEntry()"-->
+<!--                              [(ngModel)]='month'-->
+<!--                              expand="block"-->
+<!--                              style="background-color: aliceblue; border-radius: 10px; width: 100%; font-size: 12px;">-->
+<!--                    <ion-select-option *ngFor="let item of regMonth;" value="{{item[0]}}">{{item[1]}}</ion-select-option>-->
+<!--                  </ion-select>-->
+
+<!--                </div>-->
+
+<!--              </div>-->
+
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+
+
+<!--        </ion-grid>-->
+
+
+<!--      </ion-item>-->
+      <ion-grid>
+        <ion-row>
+          <ion-col style="text-align: left">
+            <ion-button (click)="setCloseModal()" size="small" shape="round" color="danger">
+              Close
+            </ion-button>
+
+          </ion-col>
+          <ion-col>
+            <div style="text-align: right;">
+              {{addFamilyResult}}
+              <ion-button shape="round"
+                          [disabled]="isDisabled"
+                          size="small"
+                          (click)="inviteFamily()">Send Invite</ion-button>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
+    </div>
+
+
+
+  </div>