update cal detail

src/app/models/roomDetail.model.ts

@@ -13,6 +13,7 @@ export class RoomDetail {
     email: string;
     remark: string;
     allDay: boolean;
+    
     constructor(init?: RoomDetail) {
         Object.assign(this, init);
         this.id = 0;

src/app/pages/equipment/equipment.component.ts

@@ -195,10 +195,6 @@ export class EquipmentComponent implements OnInit {
       .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
 
-  NgbdTimepickerBasic() {
-
-  }
-
   saveEquirment() {
 
     this.equirmentService.addEquirment(this.modelEquirment);

src/app/pages/home-page/home-page-calendar.component.html

@@ -6,6 +6,8 @@
         </button>
     </div>
     <div class=" modal-body">
+        <img style="object-fit: cover;" [src]="roomSelect.room.rPic"  width="150px" height="150px" 
+        class="nav justify-content-center" ><br>
         <div class=" row">
             <div class=" col-md-12">
                 <div class=" form-group">

src/app/pages/home-page/home-page-lend-calendar.component.html

@@ -5,11 +5,13 @@
     </button>
 </div>
 <div class=" modal-body">
+    <img style="object-fit: cover;" [src]="itemSelect.equirments.eqPic"  width="150px" height="150px" text-align = "center"
+        class="nav justify-content-center" ><br>
     <div class=" row">
         <div class=" col-md-12">
             <div class=" form-group">
                 <label> ชื่อผู้เบิก </label>
-                <input readonly class=" form-control" type="text" value={{name}} style="color: aliceblue;" />
+                <input readonly class=" form-control" type="text" [value]="itemSelect.userName" style="color: aliceblue;" />
             </div>
         </div>
     </div>
@@ -17,20 +19,20 @@
         <div class=" col-md-12">
             <div class=" form-group">
                 <label> เบอร์โทร </label>
-                <input readonly class=" form-control" type="text" value={{telephone}} style="color: aliceblue;" />
+                <input readonly class=" form-control" type="text" [value]="itemSelect.eTelephone" style="color: aliceblue;" />
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-12 mb-1">
             <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
-            <input readonly class="form-control" type="text" value={{eqName}} style="color: aliceblue;">
+            <input readonly class="form-control" type="text" [value]="itemSelect.equirments.eqName" style="color: aliceblue;">
         </div>
     </div>
     <div class="row">
         <div class="col-sm-12 mb-1">
             <label for="exampleFormControlSelect1">จำนวน</label>
-            <input readonly class="form-control" type="text" value={{quantity}} style="color: aliceblue;"> 
+            <input readonly class="form-control" type="text" [value]="itemSelect.quantity" style="color: aliceblue;"> 
         </div>
     </div>
 </div>
\ No newline at end of file

src/app/pages/home-page/home-page.component.html

@@ -69,17 +69,17 @@
                 <div class="card-body">
                     <ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs">
                         <li [ngbNavItem]="1">
-                            <a ngbNavLink>ปฏิทินการจองห้อง</a>
+                            <a ngbNavLink>ปฏิทินการจอง</a>
                             <ng-template ngbNavContent>
                                 <full-calendar #calendarBook [options]="calendarRoom" style="
-                                margin-top: 20px;"></full-calendar>
+                                margin-top: 20px;" *ngIf="listRoomDetail.length > 0"></full-calendar>
                             </ng-template>
                         </li>
                         <li [ngbNavItem]="2">
-                            <a ngbNavLink>ปฏิทินการยืมรถ</a>
+                            <a ngbNavLink>ปฏิทินการยืมอุปกรณ์</a>
                             <ng-template ngbNavContent>
                                 <full-calendar #calendar [options]="calendarEquirment" style="
-                                margin-top: 20px;"></full-calendar>
+                                margin-top: 20px;" *ngIf="listRoomDetail.length > 0"></full-calendar>
                             </ng-template>
                         </li>
                     </ul>

src/app/pages/home-page/home-page.component.ts

@@ -18,6 +18,7 @@ import { RoomDetail } from 'src/app/models/RoomDetail.model';
 export class NgbdModalContent {
   @Input() roomSelect: RoomDetail;
   telephone;
+  rPic;
   rName;
   sTime;
   eTime;
@@ -44,14 +45,15 @@ export class NgbdModalContent {
 })
 
 export class NgbdModalLendContent {
-  @Input() name;
+  @Input() itemSelect: ItemDetail; 
   telephone;
+  eqPic;
   eqName;
   quantity;
   sDate;
 
   constructor(public activeModal: NgbActiveModal) {
-
+    console.log("name", this.itemSelect)
   }
 }
 
@@ -204,72 +206,71 @@ export class HomePageComponent implements OnInit {
     setTimeout(function () {
       window.dispatchEvent(new Event('resize'))
     }, 1)
-    this.ItemDetailService.getListItemDetail().subscribe( result => {
+    this.ItemDetailService.getListItemDetail().subscribe(result => {
       this.listItemDetail = result;
-    });
-    this.RoomDetailService.getListRoomDetail().subscribe( result => {
-      this.listRoomDetail = result;
-    });
-    for (let i = 0; i < this.listRoomDetail.length; i++) {
-      if (this.listRoomDetail[i].rStatus == 0) {
-        this.eventRoom.push({
-          id: this.listRoomDetail[i].id,
-          title: this.listRoomDetail[i].room.rName + " (" + this.listRoomDetail[i].userName + ")",
-          start: '2021-12-16T10:30:00',
-          end: '2021-12-16T11:30:00',
-          extendedProps: this.listRoomDetail[i],
-          description: this.listRoomDetail[i].remark,
-          allDay: this.listRoomDetail[i].allDay
+      console.log("2", this.listItemDetail)
+      for (let i = 0; i < this.listItemDetail.length; i++) {
+        if (this.listItemDetail[i].eStatus == 0) {
+          this.eventEquirment.push({
+            id: this.listItemDetail[i].id,
+            title: this.listItemDetail[i].equirments.eqName + " (" + this.listItemDetail[i].userName + ")",
+            start: '2021-12-16T10:30:00',
+            end: '2021-12-16T11:30:00',
+            extendedProps: this.listItemDetail[i],
+            description: this.listItemDetail[i].remark,
+            color: 'rgb(250,250,250)',
+            textColor: 'white'
+          }
+          )
         }
-        )
+
       }
+      this.calendarEquirment = {
+        initialView: 'dayGridMonth',
+        themeSystem: 'bootstrap',
+        dayMaxEventRows: true,
+        locale: "th",
+        events: this.eventEquirment,
+        eventClick: this.handleLendClick.bind(this),
+      };
 
-    }
 
-    for (let i = 0; i < this.listItemDetail.length; i++) {
-      if (this.listItemDetail[i].eStatus == 0) {
-        this.eventEquirment.push({
-          id: this.listItemDetail[i].id,
-          title: this.listItemDetail[i].equirments.eqName + " (" + this.listItemDetail[i].userName + ")",
-          start: '2021-12-16T10:30:00',
-          end: '2021-12-16T11:30:00',
-          extendedProps: this.listItemDetail[i],
-          description: this.listItemDetail[i].remark,
-          color: 'rgb(250,250,250)',
-          textColor: 'white'
+    });
+    this.RoomDetailService.getListRoomDetail().subscribe(result => {
+      this.listRoomDetail = result;
+      console.log("1", this.listRoomDetail)
+      for (let i = 0; i < this.listRoomDetail.length; i++) {
+        if (this.listRoomDetail[i].rStatus == 0) {
+          this.eventRoom.push({
+            id: this.listRoomDetail[i].id,
+            title: this.listRoomDetail[i].room.rName + " (" + this.listRoomDetail[i].userName + ")",
+            start: '2021-12-16T10:30:00',
+            end: '2021-12-16T11:30:00',
+            extendedProps: this.listRoomDetail[i],
+            description: this.listRoomDetail[i].remark,
+            allDay: this.listRoomDetail[i].allDay
+          }
+          )
         }
-        )
+
       }
 
-    }
+      this.calendarRoom = {
+        initialView: 'dayGridMonth',
+        themeSystem: 'bootstrap',
+        dayMaxEventRows: true,
+        locale: "th",
+        events: this.eventRoom,
+        eventClick: this.handleDateClick.bind(this),
+      };
+
+
+
+    });
+
+
+
 
-    this.calendarRoom = {
-      initialView: 'dayGridMonth',
-      themeSystem: 'bootstrap',
-      dayMaxEventRows: true,
-      locale: "th",
-      events: this.eventRoom,
-      eventClick: this.handleDateClick.bind(this),
-      //         this.selectedRoomDetail = info.event.extendedProps;
-      //         console.log(this.selectedRoomDetail)
-      // this.test();
-      //         // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
-      //         // alert('View: ' + info.view.type);
-
-      //         // // change the border color just for fun
-      //         // info.el.style.borderColor = 'red';
-
-      //       }
-    };
-
-    this.calendarEquirment = {
-      initialView: 'dayGridMonth',
-      themeSystem: 'bootstrap',
-      dayMaxEventRows: true,
-      locale: "th",
-      events: this.eventEquirment,
-      eventClick: this.handleLendClick.bind(this),
-    };
   }
 
   test() {
@@ -297,10 +298,11 @@ export class HomePageComponent implements OnInit {
 
   eventLendShow() {
     const modalRef = this.modalService.open(NgbdModalLendContent);
-    modalRef.componentInstance.name = this.selectedItemDetail.userName;
-    modalRef.componentInstance.telephone = this.selectedItemDetail.eTelephone;
-    modalRef.componentInstance.eqName = this.selectedItemDetail.equirments.eqName;
-    modalRef.componentInstance.quantity = this.selectedItemDetail.quantity;
-    modalRef.componentInstance.sDate = this.selectedRoomDetail.sDate;
+    modalRef.componentInstance.itemSelect = this.selectedItemDetail;
+    // modalRef.componentInstance.name = this.selectedItemDetail.userName;
+    // modalRef.componentInstance.telephone = this.selectedItemDetail.eTelephone;
+    // modalRef.componentInstance.eqName = this.selectedItemDetail.equirments.eqName;
+    // modalRef.componentInstance.quantity = this.selectedItemDetail.quantity;
+    // modalRef.componentInstance.sDate = this.selectedRoomDetail.sDate;
   }
 }
\ No newline at end of file