Update calendar show การจอง การเบิก

src/app/models/itemDetail.model.ts

 import { Equirment } from "./equirment.model";
 
 export class ItemDetail {
-    Id?: number;
+    id?: number;
     equirment : Equirment;
     userName: string;
     sDate: string;
@@ -12,10 +12,10 @@ export class ItemDetail {
     Quantity: string;
     eTelephone: string;
     email: string;
-    Remark: string;
+    remark: string;
     constructor(init?: ItemDetail) {
         Object.assign(this, init);
-        this.Id = 1;
+        this.id = 1;
         this.equirment = this.equirment;
         this.userName = '';
         this.sDate = '';
@@ -24,7 +24,7 @@ export class ItemDetail {
         this.Quantity = '';
         this.eTelephone = '';
         this.email = '';
-        this.Remark = '';
+        this.remark = '';
     }
 }
 

src/app/models/roomDetail.model.ts

 import { Room } from "./rooms.model";
 
 export class RoomDetail {
-    Id?: number;
+    id?: number;
     room: Room;
     userName: string;
     sDate: string;
@@ -11,10 +11,10 @@ export class RoomDetail {
     rStatus: number;
     rTelephone: string;
     email: string;
-    Remark: string;
+    remark: string;
     constructor(init?: RoomDetail) {
         Object.assign(this, init);
-        this.Id = 1;
+        this.id = 1;
         this.room = this.room;
         this.userName = '';
         this.sDate = '';
@@ -22,7 +22,7 @@ export class RoomDetail {
         this.rStatus = 0;
         this.rTelephone = '';
         this.email = '';
-        this.Remark = '';
+        this.remark = '';
     }
 }
 

src/app/pages/admin-pending/admin-pending.component.ts

@@ -124,7 +124,7 @@ export class AdminPendingComponent implements OnInit {
       sTime: new FormControl(this.modelItemDetail.sTime, [Validators.required]),
       eTime: new FormControl(this.modelItemDetail.eTime, [Validators.required]),
       Quantity: new FormControl(this.modelItemDetail.Quantity, [Validators.required]),
-      Remark: new FormControl(this.modelItemDetail.Remark),
+      Remark: new FormControl(this.modelItemDetail.remark),
       eStatus: new FormControl(this.modelItemDetail.eStatus)
     })
     this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
@@ -166,7 +166,7 @@ export class AdminPendingComponent implements OnInit {
       eDate: new FormControl(this.modelRoomDetail.eDate, [Validators.required]),
       sTime: new FormControl(this.modelRoomDetail.sTime, [Validators.required]),
       eTime: new FormControl(this.modelRoomDetail.eTime, [Validators.required]),
-      Remark: new FormControl(this.modelRoomDetail.Remark),
+      remark: new FormControl(this.modelRoomDetail.remark),
       rStatus: new FormControl(this.modelRoomDetail.rStatus)
     });
     this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
@@ -239,7 +239,7 @@ export class AdminPendingComponent implements OnInit {
     this.modelRoomDetail.eDate  = this.myFormRoom.value.eDate
     this.modelRoomDetail.sTime  = this.myFormRoom.value.sTime
     this.modelRoomDetail.eTime  = this.myFormRoom.value.eTime
-    this.modelRoomDetail.Remark  = this.myFormRoom.value.Remark
+    this.modelRoomDetail.remark  = this.myFormRoom.value.remark
     this.modelRoomDetail.rStatus  = this.myFormRoom.value.rStatus
     console.log("this.modelRoomDetail", this.modelRoomDetail)
     this.RoomDetailService.updateRoomDetail(this.modelRoomDetail)
@@ -261,7 +261,7 @@ export class AdminPendingComponent implements OnInit {
     this.modelItemDetail.eDate  = this.myFormEquir.value.eDate
     this.modelItemDetail.sTime  = this.myFormEquir.value.sTime
     this.modelItemDetail.eTime  = this.myFormEquir.value.eTime
-    this.modelItemDetail.Remark  = this.myFormEquir.value.Remark
+    this.modelItemDetail.remark  = this.myFormEquir.value.remark
     this.modelItemDetail.eStatus  = this.myFormEquir.value.eStatus
     console.log("this.modelItemDetail", this.modelItemDetail)
     this.ItemDetailService.updateItemDetail(this.modelItemDetail)

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

@@ -71,13 +71,13 @@
                         <li [ngbNavItem]="1">
                             <a ngbNavLink>ปฏิทินการจองห้อง</a>
                             <ng-template ngbNavContent>
-                                <full-calendar #calendarBook [options]="calendarOptions"></full-calendar>
+                                <full-calendar #calendarBook [options]="calendarRoom"></full-calendar>
                             </ng-template>
                         </li>
                         <li [ngbNavItem]="2">
                             <a ngbNavLink>ปฏิทินการยืมรถ</a>
                             <ng-template ngbNavContent>
-                                <full-calendar #calendar [options]="calendarOptions"></full-calendar>
+                                <full-calendar #calendar [options]="calendarEquirment"></full-calendar>
                             </ng-template>
                         </li>
                     </ul>

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

+::ng-deep .fc-direction-ltr .fc-daygrid-event .fc-event-time {
+    margin-right: 3px;
+    color: white;
+}
+
+::ng-deep .fc-event-title{
+    color: white;
+}
+
+::ng-deep .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {
+    margin-right: 2px;
+    background-color: blueviolet;
+}
\ No newline at end of file

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

@@ -63,46 +63,24 @@ export class HomePageComponent implements OnInit {
   toDate: NgbDate | null;
 
   showBook = false;
+  eventRoom = [];
+  eventEquirment = [];
 
 
+  calendarRoom: CalendarOptions = {
+    initialView: 'dayGridMonth',
+    dateClick: this.handleDateClick.bind(this), // bind is important!
+    locale: "th",
+    events: this.eventRoom
+  };
 
-  calendarOptions: CalendarOptions = {
+  calendarEquirment: CalendarOptions = {
     initialView: 'dayGridMonth',
     dateClick: this.handleDateClick.bind(this), // bind is important!
     locale: "th",
-    events: [ 
-      {
-        id : '1',
-        title: 'ห้องเดียว',
-        start: '2021-12-16T10:30:00',
-        end: '2021-12-16T11:30:00',
-        extendedProps: {
-          Id: 1,
-          room: {
-            rId: 1,
-            rName: "ห้องเดียว",
-            rType: "ห้อง",
-            rPic: "assets/img/room.jpg",
-            roomLimit: 25,
-            rDesc: "จำนวนคน 25 คน",
-          },
-          userName: 'เกม',
-          sDate: '2021/12/15',
-          eDate: '2021/12/15',
-          sTime: '22:30',
-          eTime: '22:30',
-          rStatus: 0,
-          rTelephone: '0123456789',
-          email: 'qwerty@qwerty',
-          Remark: 'test',
-        },
-        description: 'เกมส์ (0123456789)',
-        color : 'rgb(900,0,0)',
-        
-      }
-    ]
+    events: this.eventEquirment
   };
-  
+
   handleDateClick(arg) {
     alert('date click! ' + arg.dateStr)
   }
@@ -112,7 +90,7 @@ export class HomePageComponent implements OnInit {
   }
 
   toggleWeekends() {
-    this.calendarOptions.weekends = !this.calendarOptions.weekends // toggle the boolean!
+    this.calendarRoom.weekends = !this.calendarRoom.weekends // toggle the boolean!
   }
 
   constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService, private equirmentService: EquirmentService, private roomService: RoomService) {
@@ -156,6 +134,55 @@ export class HomePageComponent implements OnInit {
     }, 1)
     this.listItemDetail = this.ItemDetailService.getListItemDetail();
     this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
+    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,
+          color: 'rgb(250,250,250)',
+          textColor: 'white'
+        }
+        )
+      }
+
+    }
+
+    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].equirment.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.calendarRoom = {
+      initialView: 'dayGridMonth',
+      themeSystem: 'bootstrap',
+      dateClick: this.handleDateClick.bind(this), // bind is important!
+      locale: "th",
+      events: this.eventRoom
+    };
+
+    this.calendarEquirment = {
+      initialView: 'dayGridMonth',
+      themeSystem: 'bootstrap',
+      dateClick: this.handleDateClick.bind(this), // bind is important!
+      locale: "th",
+      events: this.eventEquirment
+    };
   }
 
 
@@ -169,6 +196,3 @@ export class HomePageComponent implements OnInit {
 
 
 }
-
-export class NgbdDropdownBasic {
-}
\ No newline at end of file

src/app/pages/pending/pending.component.ts

@@ -127,7 +127,7 @@ export class PendingComponent implements OnInit {
       sTime: new FormControl(this.modelItemDetail.sTime, [Validators.required]),
       eTime: new FormControl(this.modelItemDetail.eTime, [Validators.required]),
       Quantity: new FormControl(this.modelItemDetail.Quantity, [Validators.required]),
-      Remark: new FormControl(this.modelItemDetail.Remark),
+      remark: new FormControl(this.modelItemDetail.remark),
       eStatus: new FormControl(this.modelItemDetail.eStatus)
     })
     this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
@@ -156,7 +156,7 @@ export class PendingComponent implements OnInit {
       eDate: new FormControl(this.modelRoomDetail.eDate, [Validators.required]),
       sTime: new FormControl(this.modelRoomDetail.sTime, [Validators.required]),
       eTime: new FormControl(this.modelRoomDetail.eTime, [Validators.required]),
-      Remark: new FormControl(this.modelRoomDetail.Remark),
+      remark: new FormControl(this.modelRoomDetail.remark),
       rStatus: new FormControl(this.modelRoomDetail.rStatus)
     });
 

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

@@ -9,7 +9,7 @@ export class ItemDetailService {
   url: string;
   listItemDetail: ItemDetail[] = [
     {
-      Id : 1,
+      id : 1,
       equirment : {
         eqId: 2,
         eqName: "เมาส์",
@@ -26,10 +26,10 @@ export class ItemDetailService {
       Quantity: '1',
       eTelephone: '0123456789',
       email: 'qwerty@qwerty',
-      Remark: 'test',
+      remark: 'test',
     },
     {
-      Id : 2,
+      id : 2,
       equirment : {
         eqId: 3,
         eqName: "โน๊ตบุ๊ค",
@@ -46,7 +46,7 @@ export class ItemDetailService {
       Quantity: '1',
       eTelephone: '0123456789',
       email: 'qwerty@qwerty',
-      Remark: 'test',
+      remark: 'test',
     },
 
   ]
@@ -92,7 +92,7 @@ export class ItemDetailService {
 
   // }
   deleteItemDetail(ItemDetailModel: ItemDetail) {
-    this.http.delete(this.url + "/" + ItemDetailModel.Id).subscribe(response => {
+    this.http.delete(this.url + "/" + ItemDetailModel.id).subscribe(response => {
       console.log(response);
       this.getListItemDetail()
       alert("ลบข้อมูลอุปกรณ์สำเร็จ")
@@ -100,7 +100,7 @@ export class ItemDetailService {
   }
 
   // updateItemDetail(ItemDetailModel: ItemDetail) {
-  //   this.http.put(this.url + "/" +ItemDetailModel.Id, ItemDetailModel).subscribe(response => {
+  //   this.http.put(this.url + "/" +ItemDetailModel.id, ItemDetailModel).subscribe(response => {
   //     console.log(response);
   //     alert("อัพเดทข้อมูลอุปกรณ์สำเร็จ")
   //   })
@@ -108,7 +108,7 @@ export class ItemDetailService {
 
   updateItemDetail(row_obj: ItemDetail) {
     this.listItemDetail = this.listItemDetail.filter((value, key) => {
-        if (value.Id === row_obj.Id) {
+        if (value.id === row_obj.id) {
             value = row_obj;
         }
         return true;

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { RoomDetail, SearchRoomDetailModel } from '../models/RoomDetail.model';
 
+
 @Injectable({ providedIn: 'root' })
 export class RoomDetailService {
 
@@ -9,7 +10,7 @@ export class RoomDetailService {
     url: string;
     listRoomDetail: RoomDetail[] = [
         {
-            Id: 1,
+            id: 1,
             room: {
                 rId: 1,
                 rName: "ห้องเดียว",
@@ -26,10 +27,10 @@ export class RoomDetailService {
             rStatus: 0,
             rTelephone: '0123456789',
             email: 'qwerty@qwerty',
-            Remark: 'test',
+            remark: 'test',
         },
         {
-            Id: 2,
+            id: 2,
             room: {
                 rId: 2,
                 rName: "ห้องคู่",
@@ -46,7 +47,7 @@ export class RoomDetailService {
             rStatus: 1,
             rTelephone: '0123456789',
             email: 'qwerty@qwerty',
-            Remark: 'test',
+            remark: 'test',
         },
 
     ]
@@ -68,7 +69,7 @@ export class RoomDetailService {
 
     updateRoomDetail(row_obj: RoomDetail) {
         this.listRoomDetail = this.listRoomDetail.filter((value, key) => {
-            if (value.Id === row_obj.Id) {
+            if (value.id === row_obj.id) {
                 value = row_obj;
             }
             return true;
@@ -80,6 +81,9 @@ export class RoomDetailService {
         return this.listRoomDetail;
     }
 
+
+
+
     // getListRoomDetail() {
     //   this.http.get(this.url).subscribe((response: any) => {
     //     console.log(response);
@@ -109,7 +113,7 @@ export class RoomDetailService {
 
     // }
     deleteRoomDetail(RoomDetailModel: RoomDetail) {
-        this.http.delete(this.url + "/" + RoomDetailModel.Id).subscribe(response => {
+        this.http.delete(this.url + "/" + RoomDetailModel.id).subscribe(response => {
             console.log(response);
             this.getListRoomDetail()
             alert("ลบข้อมูลอุปกรณ์สำเร็จ")
@@ -123,8 +127,4 @@ export class RoomDetailService {
     //     })
     // }
 
-    RoomDetailModel(rId: string) {
-
-    }
-
 }
\ No newline at end of file