Enter

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

@@ -44,8 +44,6 @@ export class EquipmentComponent implements OnInit {
   myFormRoom: FormGroup;
   myFormEquir: FormGroup;
 
-  ctrl = new FormControl(null, Validators.required);
-
   constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService, private ItemDetailService : ItemDetailService, private RoomDetailService : RoomDetailService
     ,private fb: FormBuilder) {
     
@@ -231,8 +229,6 @@ export class EquipmentComponent implements OnInit {
     this.RoomDetailService.addRoomDetail(this.modelRoomDetail);
     this.modalService.dismissAll();
     this.ngOnInit();
-    
   }
 
-}
-
+}
\ No newline at end of file

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

-<div class="modal-header">
-    <h4 class="modal-title">รายละเอียดการจอง</h4>
-    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-        <span aria-hidden="true">&times;</span>
-    </button>
-</div>
-<div class=" modal-body">
-    <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;" />
+<div class="modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title">รายละเอียดการจอง</h4>
+        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class=" modal-body">
+        <div class=" row">
+            <div class=" col-md-12">
+                <div class=" form-group">
+                    <label> ชื่อผู้จอง </label>
+                    <input readonly class=" form-control" type="text" [value]="roomSelect.userName"
+                        style="color: aliceblue;" />
+                </div>
             </div>
         </div>
-    </div>
-    <div class=" row">
-        <div class=" col-md-12">
-            <div class=" form-group">
-                <label> เบอร์โทร </label>
-                <input readonly class=" form-control" type="text" value={{telephone}} style="color: aliceblue;" />
+        <div class=" row">
+            <div class=" col-md-12">
+                <div class=" form-group">
+                    <label> เบอร์โทร </label>
+                    <input readonly class=" form-control" type="text" value={{roomSelect.rTelephone}}
+                        style="color: aliceblue;" />
+                </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" value={{rName}} style="color: aliceblue;">
+        <div class="row">
+            <div class="col-sm-12 mb-1">
+                <label for="exampleFormControlSelect1">ชื่อห้อง</label>
+                <input readonly class="form-control" type="text" value={{roomSelect.room.rName}}
+                    style="color: aliceblue;">
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-6 mb-1">
-            <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
-            <input readonly class="form-control" type="time" value={{sTime}} style="color: aliceblue;"> 
+        <div class="row">
+            <div class="col-6 mb-1">
+                <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
+                <input readonly class="form-control" type="date" value={{roomSelect.sDate}} style="color: aliceblue;">
+            </div>
+            <div class="col-6 mb-1">
+                <label readonly for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
+                <input readonly class="form-control" type="date" value={{roomSelect.eDate}} style="color: aliceblue;">
+            </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" [checked]='roomSelect.allDay' />
+                        <span class=" form-check-sign">
+                            <span class="check">ทั้งวัน</span>
+                        </span>
+                    </label>
+                </div>
+            </div>
         </div>
-        <div class="col-6 mb-1">
-            <label readonly for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
-            <input readonly class="form-control" type="time" value={{eTime}} style="color: aliceblue;">
+        <div class="row" disabled='roomSelect.allDay.valid'>
+            <div class="col-6 mb-1">
+                <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
+                <input readonly class="form-control" type="time" value={{roomSelect.sTime}} style="color: aliceblue;">
+            </div>
+            <div class="col-6 mb-1">
+                <label readonly for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
+                <input readonly class="form-control" type="time" value={{roomSelect.eTime}} style="color: aliceblue;">
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file

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

-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { FullCalendarComponent, CalendarOptions } from '@fullcalendar/angular';
 import { NgbDate, NgbCalendar, NgbDateParserFormatter, NgbNavChangeEvent, NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Equirment } from 'src/app/models/equirment.model';
@@ -9,7 +9,6 @@ import { MyRoom } from 'src/app/models/rooms.model';
 import { EquirmentService } from 'src/app/service/equirment.service';
 import { RoomService } from 'src/app/service/room.service';
 import { RoomDetail } from 'src/app/models/RoomDetail.model';
-import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'ngbd-modal-content',
@@ -17,13 +16,26 @@ import { FormControl, FormGroup } from '@angular/forms';
 })
 
 export class NgbdModalContent {
-  @Input() name;
+  @Input() roomSelect: RoomDetail;
   telephone;
   rName;
   sTime;
   eTime;
+  sDate;
+  eDate;
+  allDay;
+
+  modelItemDetail = new ItemDetail();
+  modelRoomDetail = new RoomDetail();
+
+  constructor(public activeModal: NgbActiveModal) {
+    console.log("name", this.roomSelect)
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log("sssssssssss", this.roomSelect)
+  }
 
-  constructor(public activeModal: NgbActiveModal) { }
 }
 
 @Component({
@@ -36,8 +48,11 @@ export class NgbdModalLendContent {
   telephone;
   eqName;
   quantity;
+  sDate;
+
+  constructor(public activeModal: NgbActiveModal) {
 
-  constructor(public activeModal: NgbActiveModal) { }
+  }
 }
 
 @Component({
@@ -105,10 +120,6 @@ export class HomePageComponent implements OnInit {
 
   closeResult = '';
 
-  myFormRoom: FormGroup;
-  myFormEquir: FormGroup;
-
-
   calendarRoom: CalendarOptions = {
     initialView: 'dayGridMonth',
     dateClick: this.handleDateClick.bind(this), // bind is important!
@@ -235,16 +246,16 @@ export class HomePageComponent implements OnInit {
       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);
+      //         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';
+      //         // // change the border color just for fun
+      //         // info.el.style.borderColor = 'red';
 
-//       }
+      //       }
     };
 
     this.calendarEquirment = {
@@ -257,7 +268,7 @@ export class HomePageComponent implements OnInit {
     };
   }
 
-  test(){
+  test() {
     alert("sssssssss");
   }
 
@@ -269,25 +280,23 @@ export class HomePageComponent implements OnInit {
   }
 
   eventShow() {
-    this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
     const modalRef = this.modalService.open(NgbdModalContent);
-    modalRef.componentInstance.name = this.selectedRoomDetail.userName;
-    modalRef.componentInstance.telephone = this.selectedRoomDetail.rTelephone;
-    modalRef.componentInstance.rName = this.selectedRoomDetail.room.rName;
-    modalRef.componentInstance.sTime = this.selectedRoomDetail.sTime;
-    modalRef.componentInstance.eTime = this.selectedRoomDetail.eTime;
+    modalRef.componentInstance.roomSelect = this.selectedRoomDetail;
+    // modalRef.componentInstance.telephone = this.selectedRoomDetail.rTelephone;
+    // modalRef.componentInstance.rName = this.selectedRoomDetail.room.rName;
+    // modalRef.componentInstance.sTime = this.selectedRoomDetail.sTime;
+    // modalRef.componentInstance.eTime = this.selectedRoomDetail.eTime;
+    // modalRef.componentInstance.sDate = this.selectedRoomDetail.sDate;
+    // modalRef.componentInstance.eDate = this.selectedRoomDetail.eDate;
+    // modalRef.componentInstance.allDay = this.selectedRoomDetail.allDay;
   }
 
   eventLendShow() {
-    this.listItemDetail = this.ItemDetailService.getListItemDetail();
     const modalRef = this.modalService.open(NgbdModalLendContent);
     modalRef.componentInstance.name = this.selectedItemDetail.userName;
     modalRef.componentInstance.telephone = this.selectedItemDetail.eTelephone;
     modalRef.componentInstance.eqName = this.selectedItemDetail.equirment.eqName;
     modalRef.componentInstance.quantity = this.selectedItemDetail.Quantity;
+    modalRef.componentInstance.sDate = this.selectedRoomDetail.sDate;
   }
-}
-
+}
\ No newline at end of file
-function content(content: any, arg1: { ariaLabelledBy: string; }) {
-  throw new Error('Function not implemented.');
-}

src/app/service/room-detail.service.ts

@@ -20,19 +20,40 @@ export class RoomDetailService {
                 rDesc: "จำนวนคน 25 คน",
             },
             userName: 'เกม',
-            sDate: '2021-12-15',
-            eDate: '2021-12-15',
+            sDate: '2021-12-16',
+            eDate: '2021-12-16',
             sTime: '22:30',
             eTime: '22:30',
             rStatus: 0,
             rTelephone: '0123456789',
             email: 'qwerty@qwerty',
             remark: 'test',
-            allDay: false
+            allDay: true
         },
         {
             id: 2,
             room: {
+                rId: 1,
+                rName: "ห้องเดียว",
+                rType: "ห้อง",
+                rPic: "assets/img/room.jpg",
+                roomLimit: 25,
+                rDesc: "จำนวนคน 25 คน",
+            },
+            userName: 'ริว',
+            sDate: '2021-12-16',
+            eDate: '2021-12-16',
+            sTime: '22:30',
+            eTime: '22:30',
+            rStatus: 0,
+            rTelephone: '0123456789',
+            email: 'qwerty@qwerty',
+            remark: 'test',
+            allDay: false
+        },
+        {
+            id: 3,
+            room: {
                 rId: 2,
                 rName: "ห้องคู่",
                 rType: "ห้อง",