40 lines
1.5 KiB
HTML
40 lines
1.5 KiB
HTML
<ion-header [translucent]="true">
|
|
<ion-toolbar>
|
|
<div class="toolbar">
|
|
<ion-title *ngIf="isAddMode">Create Goal</ion-title>
|
|
<ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
|
|
<ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
|
|
</div>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content [fullscreen]="true">
|
|
<form [formGroup]="form">
|
|
<div class="item" *ngIf="isAddMode || goalId != 0">
|
|
<label>Goal Name</label>
|
|
<input id="name" type="text" formControlName="name"/>
|
|
</div>
|
|
|
|
<div class="item" *ngIf="isAddMode || goalId != 0">
|
|
<label>Target</label>
|
|
<input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
|
|
</div>
|
|
|
|
<label>Weight</label>
|
|
<input id="weight" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="weight"/>
|
|
|
|
<div class="item" *ngIf="isAddMode || goalId != 0">
|
|
<label>Colour</label>
|
|
<select formControlName="color">
|
|
<option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" [disabled]="!form.valid" (click)="submit()">
|
|
<span *ngIf="isAddMode">Add Goal</span>
|
|
<span *ngIf="!isAddMode && goalId != 0">Update Goal</span>
|
|
<span *ngIf="!isAddMode && goalId == 0">Update Allowance</span>
|
|
</button>
|
|
</form>
|
|
</ion-content>
|