<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div>
<h4 class="nav justify-content-center ">รายการ</h4>
</div>
</div>
</div>
</div>
</div>
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>การจอง</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-sm-12">
<div class="">
<div class="card-body">
<div class="row">
<div class="col-sm-3"
*ngFor="let item of listRoomModel|slice: (pageListRoom-1) * pageSizeListRoom :(pageListRoom-1) * pageSizeListRoom + pageSizeListRoom ;let i = index">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="object-fit: cover;" [src]="item.rPic" width="150px" height="150px"
class="nav justify-content-center" alt="...">
<br>
<p class="text-left">ชื่อ : {{item.rName}}</p>
<p class="text-left">รายละเอียด : {{item.rDesc}}</p>
<p class="text-left">หมวดหมู่ : <td *ngIf="item.rType==1">ห้อง</td><td *ngIf="item.rType==2">รถ</td></p>
</div>
<div class="text-center">
<button class="btn btn-sm btn-outline-primary"
(click)="bookRoom(Room,item)">จอง</button>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
[pageSize]="pageSizeListRoom">
<ng-template ngbPaginationPrevious>Previous</ng-template>
<ng-template ngbPaginationNext>Next</ng-template>
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
(ngModelChange)="pageListRoom=1">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div>
</div>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-sm-12">
<div class="">
<div class="card-body">
<div class="row">
<div class="col-sm-3"
*ngFor="let item of listEquirmentModel |slice: (page-1) * pageSize :(page-1) * pageSize + pageSize ;let i = index">
<div class="card" style="
padding: 10px;">
<div class="card-body">
<img style="object-fit: cover;" [src]="item.eqPic" width="150px" height="150px"
class="nav justify-content-center" alt="...">
<br>
<p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">หมวดหมู่ : <td *ngIf="item.eqType==4">IT</td><td *ngIf="item.eqType==5">Company</td></p>
</div>
<div class="text-center">
<button class="btn btn-sm btn-outline-primary"
(click)="bookEquir(Lend,item)">เบิก</button>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
<ng-template ngbPaginationPrevious>Previous</ng-template>
<ng-template ngbPaginationNext>Next</ng-template>
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
(ngModelChange)="page=1">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div>
</div>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
<ng-template #contentequirment let-modal>
<div class=" col-md-12" style="padding: 0; ">
<div class="card" style="margin: 0; ">
<div class=" card-header">
<h5 class=" title">Add Equirment</h5>
</div>
<div class=" card-body">
<form [formGroup]="myFormEquir" class="needs-validation">
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อ </label>
<input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelEquirment.eqName" value="" formControlName="eqName" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
กรุณากรอกชื่ออุปกรณ์.</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-6 mb-2">
<div class=" form-group">
<label> หมวดหมู่ </label>
<br>
<select class="form-select" aria-label="Default select example"
[(ngModel)]="modelEquirment.eqType" formControlName="eqType">
<option value="4" style="color: black;">IT</option>
<option value="5" style="color: black;">Company</option>
</select>
<div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
กรุณากรอกประเภทอุปกรณ์.</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> รายละเอียด</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelEquirment.eqDesc"
formControlName="eqDesc"></textarea>
<div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
กรุณากรอกรายละเอียดอุปกรณ์.</div>
</div>
</div>
</div>
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile" formControlName="eqPic">
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit" (click)="saveEquirment()">บันทึก</button>
<button class=" btn btn-fill btn-danger" type="cancel"
(click)="modal.dismiss('Cross click')">ยกเลิก</button>
</div>
</div>
</div>
</ng-template>
<ng-template #contentroom let-modal>
<div class=" col-md-12" style="padding: 0; ">
<div class="card" style="margin: 0; ">
<div class=" card-header">
<h5 class=" title">เพิ่มรายการ</h5>
</div>
<div class=" card-body">
<form [formGroup]="myFormRoom" class="needs-validation">
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อ </label>
<input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName"
formControlName="rName">
<div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
กรุณากรอกชื่อ.</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-6 mb-2">
<div class=" form-group">
<label> ประเภท </label>
<br>
<select class="form-select form-control" aria-label="Default select example"
[(ngModel)]="modelRoom.rType" formControlName="rType">
<option value="1" style="color: black;">ห้อง</option>
<option value="2" style="color: black;">รถ</option>
</select>
<div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
กรุณากรอกประเภท.</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> รายละเอียด</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelRoom.rDesc"
formControlName="rDesc"></textarea>
<div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
กรุณากรอกรายละเอียด.</div>
</div>
</div>
</div>
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" type="submit" (click)="saveRoom()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel"
(click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
</div>
</ng-template>
<ng-template #Room let-modal>
<div class=" col-md-12" style="padding: 0; ">
<div class="card" style="margin: 0; ">
<div class=" card-header">
<h5 class=" title">การจอง</h5>
</div>
<div class=" card-body">
<form [formGroup]="myFormRoom" class="needs-validation">
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelRoomDetail.userName" formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">
กรุณากรอกชื่อผู้จอง.</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> อีเมลผู้จอง </label>
<input class=" form-control" placeholder="" type="text" value=""
[(ngModel)]="modelRoomDetail.email" formControlName="email" />
<div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">
กรุณากรอกอีเมล.
</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value=""
[(ngModel)]="modelRoomDetail.rTelephone" formControlName="rTelephone"
maxlength="10" />
<div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">
กรุณากรอกหมายเลขโทรศัพท์.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label>
<input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rName"
formControlName="rName">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label>
<input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rDesc"
formControlName="rDesc">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.sDate"
formControlName="sDate">
<div style="color: red;" *ngIf="myFormRoom.controls.sDate.status=='INVALID'">
กรุณากรอกวันที่เริ่มต้นการจอง.
</div>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.eDate"
formControlName="eDate">
<div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'">
กรุณากรอกวันที่สิ้นสุดการจอง.
</div>
</div>
</div>
<div class="row">
<div class="col-12 mb-1">
<div class=" form-check">
<label class=" form-check-label">
<input class=" form-check" type="checkbox" [(ngModel)]="modelRoomDetail.allDay"
formControlName="allDay" />
<span class=" form-check-sign">
<span class="check">ทั้งวัน</span>
</span>
</label>
</div>
</div>
</div>
<div class="row" *ngIf="!modelRoomDetail.allDay">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="time" [(ngModel)]="modelRoomDetail.sTime"
formControlName="sTime" />
<div style="color: red;" *ngIf="myFormRoom.controls.sTime.status=='INVALID'">
กรุณากรอกเวลาที่เริ่มต้นการจอง.
</div>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="time" [(ngModel)]="modelRoomDetail.eTime"
formControlName="eTime" />
<div style="color: red;" *ngIf="myFormRoom.controls.eTime.status=='INVALID'">
กรุณากรอกเวลาที่สิ้นสุดการจอง.
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelRoomDetail.remark"
formControlName="remark"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" [disabled]="myFormRoom.invalid" type="button"
(click)="saveBook()">บันทึก</button>
<button class=" btn btn-fill btn-danger" type="cancel"
(click)="modal.dismiss('Cross click')">ยกเลิก</button>
</div>
</div>
</div>
</ng-template>
<ng-template #Lend let-modal>
<div class=" col-md-12" style="padding: 0; ">
<div class="card" style="margin: 0; ">
<div class=" card-header">
<h5 class=" title">เบิกอุปกรณ์</h5>
</div>
<div class=" card-body">
<form [formGroup]="myFormEquir" class="needs-validation">
<div class=" row">
<div class=" col-sm-12 mb-1">
<div class=" form-group">
<label> ชื่อผู้เบิก </label>
<input class=" form-control" placeholder="" type="text" value=""
[(ngModel)]="modelItemDetail.userName" formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'">
กรุณากรอกชื่อผู้เบิก.
</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> อีเมลผู้เบิก </label>
<input class=" form-control" placeholder="" type="text" value=""
[(ngModel)]="modelItemDetail.email" formControlName="email" />
<div style="color: red;" *ngIf="myFormEquir.controls.email.status=='INVALID'">
กรุณากรอกอีเมล.
</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" value=""
[(ngModel)]="modelItemDetail.eTelephone" formControlName="eTelephone"
maxlength="10" />
<div style="color: red;" *ngIf="myFormEquir.controls.eTelephone.status=='INVALID'">
กรุณากรอกหมายเลขโทรศัพท์.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<input readonly class="form-control" type="text"
[(ngModel)]="modelItemDetail.equirment.eqName" formControlName="eqName">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
<input readonly class="form-control" type="text"
[(ngModel)]="modelItemDetail.equirment.eqDesc" formControlName="eqDesc">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" value="" [(ngModel)]="modelItemDetail.sDate"
formControlName="sDate">
<div style="color: red;" *ngIf="myFormEquir.controls.sDate.status=='INVALID'">
กรุณากรอกวันที่เริ่มต้นการเบิก.
</div>
</div>
</div>
<div class=" row">
<div class=" col-sm-6 mb-1">
<label for="changequantity">จำนวน</label>
<input id="changequantity" type="number" class="form-control form-control-sm"
[(ngModel)]="modelItemDetail.Quantity" formControlName="Quantity" />
<div style="color: red;" *ngIf="myFormEquir.controls.Quantity.status=='INVALID'">
กรุณากรอกจำนวนการเบิก.
</div>
</div>
</div>
<div class=" row">
<div class=" col-md-12">
<div class=" form-group">
<label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelItemDetail.remark"
formControlName="remark"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class=" card-footer">
<button class=" btn btn-fill btn-danger" [disabled]="myFormEquir.invalid" type="submit"
(click)="saveLend()">Save</button>
<button class=" btn btn-fill btn-danger" type="cancel"
(click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</div>
</div>
</ng-template>