1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<app-loading [condition]="isLoading"></app-loading>
<app-toast [message]="toast.message"></app-toast>
<div class="card" *ngIf="!isLoading">
<h4 class="card-header">จำนวนหมู ({{pigs.length}}) ตัว</h4>
<div class="card-block">
<table class="table table-bordered table-striped">
<thead class="thead-default">
<tr>
<th>ชื่อหมู</th>
<th>อายุ</th>
<th>น้ำหนัก</th>
<th>เเก้ไข/ลบ</th>
</tr>
</thead>
<tbody *ngIf="pigs.length === 0">
<tr>
<td colspan="4">ยังไม่มีข้อมูลหมูอยู่ในฐานข้อมูล.</td>
</tr>
</tbody>
<tbody *ngIf="!isEditing">
<tr *ngFor="let pig of pigs">
<td>{{pig.name}}</td>
<td>{{pig.age}}</td>
<td>{{pig.weight}}</td>
<td>
<button class="btn btn-sm btn-warning" (click)="enableEditing(pig)"><i class="fa fa-pencil"></i> เเก้ไข</button>
<button class="btn btn-sm btn-danger" (click)="deletePig(pig)"><i class="fa fa-trash"></i> ลบ</button>
</td>
</tr>
</tbody>
<tbody *ngIf="isEditing">
<tr>
<td colspan="4">
<form class="form-inline" #form="ngForm" (ngSubmit)="editPig(pig)" style="display:inline">
<div class="form-group">
<input class="form-control" type="text" name="name" [(ngModel)]="pig.name" placeholder="ชื่อหมู" required>
</div>
<div class="form-group">
<input class="form-control" type="number" name="age" [(ngModel)]="pig.age" placeholder="อายุ" min="0" required>
</div>
<div class="form-group">
<input class="form-control" type="number" name="weight" [(ngModel)]="pig.weight" placeholder="น้ำหนัก" step="any" min="0" required>
</div>
<button class="btn btn-sm btn-primary" type="submit" [disabled]="!form.form.valid"><i class="fa fa-floppy-o"></i> บันทึก</button>
</form>
<button class="btn btn-sm btn-warning" (click)="cancelEditing()"><i class="fa fa-times"></i> ยกเลิก</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" *ngIf="!isEditing">
<h4 class="card-header">เพิ่มข้อมูลหมู</h4>
<div class="card-block">
<form class="form-inline" [formGroup]="addPigForm" (ngSubmit)="addPig()" style="text-align:center">
<div class="form-group">
<input class="form-control" type="text" name="name" formControlName="name" placeholder="ชื่อหมู">
</div>
<div class="form-group">
<input class="form-control" type="number" name="age" formControlName="age" placeholder="อายุ" min="0">
</div>
<div class="form-group">
<input class="form-control" type="number" name="weight" formControlName="weight" placeholder="น้ำหนัก" step="any" min="0">
</div>
<button class="btn btn-primary" type="submit" [disabled]="!addPigForm.valid"><i class="fa fa-floppy-o"></i> เพิ่ม</button>
</form>
</div>
</div>