<div class=" content"> <div class="row"> <div class="col-sm-8"> <div class="card"> <div class="card-body"> <form class="form-inline"> <div class="form-group hidden"> <div class="input-group"> <input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker" [autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1"> <ng-template #t let-date let-focused="focused"> <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null"> {{ date.day }} </span> </ng-template> </div> </div> <div class="form-group"> <div class="input-group"> <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate" [value]="formatter.format(fromDate)" (input)="fromDate = validateInput(fromDate, dpFromDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> <div class="form-group ml-2"> <div class="input-group"> <input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate" [value]="formatter.format(toDate)" (input)="toDate = validateInput(toDate, dpToDate.value)"> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button> </div> </div> </div> </form> </div> </div> </div> <div class="col-4"> <div class="card"> <div class="card-body"> <div ngbDropdown class="d-inline-block"> <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>ประเภทการค้นหา</button> <div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <button ngbDropdownItem>รอดำเนินการ</button> <button ngbDropdownItem>อนุมัติ</button> <button ngbDropdownItem>ยกเลิก</button> <button ngbDropdownItem>สำเร็จแล้ว</button> </div> <button class="btn btn-sm btn-outline-success" type="submit">Search</button> </div> </div> </div> </div> </div> <ul ngbNav #nav="ngbNav" class="nav-tabs"> <li ngbNavItem> <a ngbNavLink>การจอง</a> <ng-template ngbNavContent> <div class="row text-center"> <div class="col-sm-12"> <div class="card"> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">หมวดหมู่</th> <th scope="col">ชื่อการจอง</th> <th scope="col">รายละเอียด</th> <th scope="col">ชื่อผู้จอง</th> <th scope="col">วันที่เริ่มต้น</th> <th scope="col">วันที่สิ้นสุด</th> <th scope="col">สถานะ</th> </tr> </thead> <tbody> <tr *ngFor="let item of listRoomDetail"> <th scope="row" style="color: rgb(255, 255, 255);">{{ item.id }}</th> <td>{{ item.room.rType }}</td> <td>{{ item.room.rName }}</td> <td>{{ item.room.rDesc }}</td> <td>{{ item.userName }}</td> <td>{{ item.sDate | date : 'dd/MM/yyyy' }} {{ item.sTime }}</td> <td>{{ item.eDate | date : 'dd/MM/yyyy' }} {{ item.eTime }}</td> <td *ngIf="item.rStatus==0">จอง</td> <td *ngIf="item.rStatus==1">ไม่อนุมัติ</td> <td *ngIf="item.rStatus==2">ยกเลิก</td> <div class="col-auto align-self-sm-center"> <button type="button" class="btn btn-info btn-sm btn-circle " style="line-height: 0px" (click)="openRoomDetail(Room,item)"><i class="fa fa-search"></i> </button> </div> </tr> </tbody> </table> <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> </div> </ng-template> </li> <li ngbNavItem> <a ngbNavLink>การเบิก</a> <ng-template ngbNavContent> <div class="row text-center"> <div class="col-sm-12"> <div class="card"> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">หมวดหมู่</th> <th scope="col">ชื่ออุปกรณ์</th> <th scope="col">รายละเอียด</th> <th scope="col">ชื่อผู้เบิก</th> <th scope="col">วันที่เริ่มต้น</th> <th scope="col">จำนวน</th> <th scope="col">สถานะ</th> </tr> </thead> <tbody> <tr *ngFor="let item of listItemDetail"> <th scope="row" style="color: rgb(255, 255, 255);">{{ item.id }}</th> <td>{{ item.equirment.eqType }}</td> <td>{{ item.equirment.eqName }}</td> <td>{{ item.equirment.eqDesc }}</td> <td>{{ item.userName }}</td> <td>{{ item.sDate | date : 'dd/MM/yyyy' }}</td> <td>{{ item.Quantity }}</td> <td *ngIf="item.eStatus==0">รอดำเนินการ</td> <td *ngIf="item.eStatus==1">อนุมัติ</td> <td *ngIf="item.eStatus==2">ยกเลิก</td> <td *ngIf="item.eStatus==3">คืนแล้ว</td> <div class="col-auto align-self-sm-center"> <button type="button" class="btn btn-info btn-sm btn-circle " style="line-height: 0px" (click)="openItemDetail(lend,item)"><i class="fa fa-search"></i> </button> </div> </tr> </tbody> </table> <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> </div> </ng-template> </li> </ul> <div [ngbNavOutlet]="nav"></div> </div> <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" formControlName="userNameForm" /> <div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'"> กรุณากรอกชื่อผู้จอง.</div> </div> </div> </div> <div class=" row"> <div class=" col-sm-12 mb-1"> <div class=" form-group"> <label> อีเมล </label> <input class=" form-control" placeholder="" type="text" 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" 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" formControlName="rName" /> <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'"> กรุณากรอกชื่อห้อง.</div> </div> </div> <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">รายละเอียด</label> <input readonly class="form-control" type="text" formControlName="rDesc" /> <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'"> กรุณากรอกรายละเอียดการจอง.</div> </div> </div> <div class="row" > <div class="col-6 mb-1"> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <input type="date" class="form-control" [(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" [(ngModel)]="modelRoomDetail.eDate" formControlName="eDate" /> <div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'"> กรุณากรอกวันที่สิ้นสุดการจอง.</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" 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" 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="......" formControlName="remark"></textarea> </div> </div> </div> <div class=" row"> <div class=" col-md-6 mb-2"> <label> สถานะ </label> <select class="custom-select form-control" aria-label="Default select example" formControlName="rStatus"> <option value="0" selected style="color: black;">จอง</option> <option value="1" style="color: black;">ไม่อนุมัติ</option> <option value="2" style="color: black;">ยกเลิก</option> </select> </div> </div> </form> <div class=" card-footer"> <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusRoom()">บันทึก</button> <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">ยกเลิก</button> </div> </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" formControlName="userNameForm" /> <div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'"> กรุณากรอกชื่อผู้จอง.</div> </div> </div> </div> <div class=" row"> <div class=" col-sm-12 mb-1"> <div class=" form-group"> <label> อีเมล </label> <input class=" form-control" placeholder="" type="text" 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" 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" formControlName="eqName" /> <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'"> กรุณากรอกชื่ออุปกรณ์.</div> </div> </div> <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label> <input readonly class="form-control" type="text" formControlName="eqDesc" /> <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'"> กรุณากรอกรายละเอียดการเบิก.</div> </div> </div> <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <input type="date" class="form-control" [(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" 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> <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" formControlName="eStatus"> <option value="0" style="color: black;">รอดำเนินการ</option> <option value="1" style="color: black;">อนุมัติ</option> <option value="2" style="color: black;">ยกเลิก</option> <option value="3" style="color: black;">คืนแล้ว</option> </select> </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)]="modelItemDetail.returnItem" formControlName="returnItem" /> <span class=" form-check-sign"> <span class="check">คืนอุปกรณ์ที่เบิก</span> </span> </label> </div> </div> </div> <div class="row" *ngIf="modelItemDetail.returnItem"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> <input type="date" class="form-control" [value]="modelItemDetail.eDate" formControlName="eDate" /> </div> </div> </form> <div class=" card-footer"> <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusEquirment()">บันทึก</button> <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">ยกเลิก</button> </div> </div> </div> </div> </ng-template>