From 31cfe6434f251fa54967f064a3ab221f19a402bd Mon Sep 17 00:00:00 2001 From: DESKTOP-HF0LVOG\myhr <teetacg@csc.co.th> Date: Thu, 2 Dec 2021 11:21:43 +0700 Subject: [PATCH] Add เพิ่มรายการ หน้าการจอง --- src/app/pages/equipment/equipment.component.html | 34 +++++++++++++++++----------------- src/app/pages/equipment/equipment.component.ts | 44 ++++++++++++++++++++++++++++++++++---------- src/app/service/equirment.service.ts | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------- src/app/service/room.service.ts | 32 +++++++++++++++++++------------- 4 files changed, 157 insertions(+), 119 deletions(-) diff --git a/src/app/pages/equipment/equipment.component.html b/src/app/pages/equipment/equipment.component.html index 06dc8b1..b25359e 100644 --- a/src/app/pages/equipment/equipment.component.html +++ b/src/app/pages/equipment/equipment.component.html @@ -20,7 +20,7 @@ <div class="card-body"> <button class="btn btn-lg btn-outline-primary" - (click)="open(content)">เพิ่มรายการ</button> + (click)="Ropen(content)">เพิ่มรายการ</button> <div class="row"> <div class="col-sm-3" *ngFor="let item of listRoomModel"> @@ -28,11 +28,11 @@ padding: 10px;"> <div class="card-body"> <img style="height: 200px; - width: 200px;" [src]="item.rpic" class="nav justify-content-center" + width: 200px;" [src]="item.rPic" 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">ชื่อ : {{item.rName}}</p> + <p class="text-left">รายละเอียด : {{item.rDesc}}</p> </div> <div class="text-center"> @@ -119,27 +119,27 @@ </div> <div class=" card-footer"> <button class=" btn btn-fill btn-danger" type="submit" (click)="saveEquirment()">Save</button> - <button class=" btn btn-fill btn-danger" type="cancel">Cancel</button> + <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button> </div> </div> </div> </ng-template> <button class="btn btn-lg btn-outline-primary" - (click)="open(content)">เพิ่มรายการ</button> + (click)="Eqopen(content)">เพิ่มรายการ</button> <div class="row"> - <div class="col-sm-3" *ngFor="let item of listEquirment"> + <div class="col-sm-3" *ngFor="let item of listEquirmentModel"> <div class="card" style=" padding: 10px;"> <div class="card-body"> <img style="height: 200px; - width: 200px;" [src]="item.pic" class="nav justify-content-center" + width: 200px;" [src]="item.eqPic" 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">ประเภท : {{item.eqtype}}</p> + <p class="text-left">ชื่อ : {{item.eqName}}</p> + <p class="text-left">รายละเอียด : {{item.eqDesc}}</p> + <p class="text-left">ประเภท : {{item.eqType}}</p> </div> <div class="text-center"> @@ -188,7 +188,7 @@ <div class=" col-md-12"> <div class=" form-group"> <label> ชื่อ </label> - <input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName" value="" /> + <input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName"> </div> </div> </div> @@ -220,7 +220,7 @@ </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">Cancel</button> + <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">Cancel</button> </div> </div> </div> @@ -253,13 +253,13 @@ <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">ชื่อห้อง</label> - <input readonly class="form-control" type="text" value="{{item.rname}}"> + <input readonly class="form-control" type="text" value="{{item.rName}}"> </div> </div> <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">รายละเอียด</label> - <input readonly class="form-control" type="text" value="{{item.rdecs}}"> + <input readonly class="form-control" type="text" value="{{item.rDecs}}"> </div> </div> <div class="row"> @@ -328,13 +328,13 @@ <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label> - <input readonly class="form-control" type="text" value="{{item.rname}}"> + <input readonly class="form-control" type="text" value="{{item.rName}}"> </div> </div> <div class="row"> <div class="col-sm-12 mb-1"> <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label> - <input readonly class="form-control" type="text" value="{{item.rdecs}}"> + <input readonly class="form-control" type="text" value="{{item.rDecs}}"> </div> </div> <div class="row"> diff --git a/src/app/pages/equipment/equipment.component.ts b/src/app/pages/equipment/equipment.component.ts index ced5fd9..fc60452 100644 --- a/src/app/pages/equipment/equipment.component.ts +++ b/src/app/pages/equipment/equipment.component.ts @@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; import { Equirment } from 'src/app/models/equirment.model'; import { Room } from 'src/app/models/rooms.model'; +import { EquirmentService } from 'src/app/service/equirment.service'; +import { RoomService } from 'src/app/service/room.service'; + @Component({ selector: 'app-equipment', @@ -9,22 +12,28 @@ import { Room } from 'src/app/models/rooms.model'; styleUrls: ['./equipment.component.scss'] }) export class EquipmentComponent implements OnInit { - time = {hour: 13, minute: 30}; + time = { hour: 13, minute: 30 }; page = 1; pageSize = 10; closeResult = ''; listEquirmentModel: Equirment[] = []; + listRoomModel: Room[] = []; collectionSize = this.listEquirmentModel.length; modelEquirment = new Equirment(); modelRoom = new Room(); - constructor(private modalService: NgbModal) { } + constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService) { + + } - ngOnInit(): void { + ngOnInit() { + this.listEquirmentModel = this.equirmentService.getListEquirment(); + this.listRoomModel = this.roomService.getListRoom(); } - open(content) { + Eqopen(content) { + this.modelEquirment = new Equirment(); this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { @@ -32,6 +41,16 @@ export class EquipmentComponent implements OnInit { }); } + Ropen(content) { + this.modelRoom = new Room(); + this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { + this.closeResult = `Closed with: ${result}`; + }, (reason) => { + this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; + }); + } + + private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; @@ -43,23 +62,28 @@ export class EquipmentComponent implements OnInit { } refreshCountries() { this.listEquirmentModel = this.listEquirmentModel + this.listRoomModel = this.listRoomModel .map((item, i) => ({ id: i + 1, ...item })) .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize); } NgbdTimepickerBasic() { - + } - saveEquirment(){ - - console.log(this.modelEquirment); + saveEquirment() { + + this.equirmentService.addEquirment(this.modelEquirment); + this.modalService.dismissAll(); + this.ngOnInit(); } - saveRoom(){ + saveRoom() { - console.log(this.modelRoom); + this.roomService.addRoom(this.modelRoom); + this.modalService.dismissAll(); + this.ngOnInit(); } } diff --git a/src/app/service/equirment.service.ts b/src/app/service/equirment.service.ts index 0ae1518..c9e617c 100644 --- a/src/app/service/equirment.service.ts +++ b/src/app/service/equirment.service.ts @@ -5,85 +5,93 @@ import { Equirment, SearchEquirmentModel } from '../models/equirment.model'; @Injectable({ providedIn: 'root' }) export class EquirmentService { - constructor(private http: HttpClient) { } - url: string; - listEquirment: Equirment[] = [ - { - eqId: 1, - eqName: "จอคอมพิวเตอร์", - eqDesc: "หน้าจอขนาด 22 นิ้ว", - eqType: "it", - eqPic: "assets/img/mo1.jpg" - }, - { - eqId: 2, - eqName: "เมาส์", - eqDesc: "...", - eqType: "it", - eqPic: "assets/img/mou.jpg" - }, - { - eqId: 3, - eqName: "โน๊ตบุ๊ค", - eqDesc: "หน้าจอขนาด 20 นิ้ว", - eqType: "it", - eqPic: "assets/img/notebook.jpg" - }, - { - eqId: 4, - eqName: "คีย์บอร์ด", - eqDesc: "...", - eqType: "it", - eqPic: "assets/img/keyboard.png" - } - ] - listEquirmentModel: Equirment[] = []; + constructor(private http: HttpClient) { } + url: string; + listEquirment: Equirment[] = [ + { + eqId: 1, + eqName: "จอคอมพิวเตอร์", + eqDesc: "หน้าจอขนาด 22 นิ้ว", + eqType: "it", + eqPic: "assets/img/mo1.jpg" + }, + { + eqId: 2, + eqName: "เมาส์", + eqDesc: "...", + eqType: "it", + eqPic: "assets/img/mou.jpg" + }, + { + eqId: 3, + eqName: "โน๊ตบุ๊ค", + eqDesc: "หน้าจอขนาด 20 นิ้ว", + eqType: "it", + eqPic: "assets/img/notebook.jpg" + }, + { + eqId: 4, + eqName: "คีย์บอร์ด", + eqDesc: "...", + eqType: "it", + eqPic: "assets/img/keyboard.png" + } + ] - getListRoom() { - this.http.get(this.url).subscribe((response: any) => { - console.log(response); - this.listEquirmentModel = response.content; - }, error => { - console.log(error) - // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) - }) - } - - searchListRoom(searchModel: SearchEquirmentModel) { - this.http.get(this.url + '&startDate='+searchModel.sdate.split("-")[2]+'-'+searchModel.sdate.split("-")[1]+'-'+searchModel.sdate.split("-")[0]+'&endDate='+searchModel.edate.split("-")[2]+'-'+searchModel.edate.split("-")[1]+'-'+searchModel.edate.split("-")[0]+'&startTime='+searchModel.stime+':00'+'&endTime='+searchModel.etime+':00').subscribe((response: any) => { - console.log(response); - this.listEquirmentModel = response; - }, error => { - console.log(error) - alert("ไม่สามารถค้นหาอุปกรณ์ที่ว่างได้ เนื่องจาก :\n" + error.message) - }) - } - - addRoom(EquirmentModel: Equirment) { - this.http.post(this.url, EquirmentModel).subscribe(response => { - console.log(response); - - }) - - - } - deleteRoom(EquirmentModel: Equirment) { - this.http.delete(this.url + "/" + EquirmentModel.eqId).subscribe(response => { - console.log(response); - this.getListRoom() - alert("ลบข้อมูลอุปกรณ์สำเร็จ") - }) - } - - updateRoom(EquirmentModel: Equirment) { - this.http.put(this.url + "/" + EquirmentModel.eqId, EquirmentModel).subscribe(response => { - console.log(response); - alert("อัพเดทข้อมูลอุปกรณ์สำเร็จ") - }) - } - - EquirmentModel(eqId: string) { - - } + addEquirment(model: Equirment) { + this.listEquirment.push(model); + + } + + getListEquirment() { + return this.listEquirment; + } + + getListRoom() { + this.http.get(this.url).subscribe((response: any) => { + console.log(response); + this.listEquirment = response.content; + }, error => { + console.log(error) + // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) + }) + } + + searchListEquirment(searchModel: SearchEquirmentModel) { + this.http.get(this.url + '&startDate=' + searchModel.sdate.split("-")[2] + '-' + searchModel.sdate.split("-")[1] + '-' + searchModel.sdate.split("-")[0] + '&endDate=' + searchModel.edate.split("-")[2] + '-' + searchModel.edate.split("-")[1] + '-' + searchModel.edate.split("-")[0] + '&startTime=' + searchModel.stime + ':00' + '&endTime=' + searchModel.etime + ':00').subscribe((response: any) => { + console.log(response); + this.listEquirment = response; + }, error => { + console.log(error) + alert("ไม่สามารถค้นหาอุปกรณ์ที่ว่างได้ เนื่องจาก :\n" + error.message) + }) + } + + // addEquirment(EquirmentModel: Equirment) { + // this.http.post(this.url, EquirmentModel).subscribe(response => { + // console.log(response); + + // }) + + + // } + deleteEquirment(EquirmentModel: Equirment) { + this.http.delete(this.url + "/" + EquirmentModel.eqId).subscribe(response => { + console.log(response); + this.getListRoom() + alert("ลบข้อมูลอุปกรณ์สำเร็จ") + }) + } + + updateEquirment(EquirmentModel: Equirment) { + this.http.put(this.url + "/" + EquirmentModel.eqId, EquirmentModel).subscribe(response => { + console.log(response); + alert("อัพเดทข้อมูลอุปกรณ์สำเร็จ") + }) + } + + EquirmentModel(eqId: string) { + + } } \ No newline at end of file diff --git a/src/app/service/room.service.ts b/src/app/service/room.service.ts index a16f522..6033e9d 100644 --- a/src/app/service/room.service.ts +++ b/src/app/service/room.service.ts @@ -44,14 +44,20 @@ export class RoomService { ] listRoomSearch: Room[] = []; + addRoom(model : Room){ + this.listRoomModel.push(model); + + } + getListRoom() { - this.http.get(this.url).subscribe((response: any) => { - console.log(response); - this.listRoomModel = response.content; - }, error => { - console.log(error) - // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) - }) + return this.listRoomModel; + // this.http.get(this.url).subscribe((response: any) => { + // console.log(response); + // this.listRoomModel = response.content; + // }, error => { + // console.log(error) + // // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) + // }) } searchListRoom(searchModel: SearchRoomModel) { @@ -64,14 +70,14 @@ export class RoomService { }) } - addRoom(roomModel: Room) { - this.http.post(this.url, roomModel).subscribe(response => { - console.log(response); + // // addRoom(roomModel: Room) { + // // this.http.post(this.url, roomModel).subscribe(response => { + // // console.log(response); - }) + // // }) + // } - - } + deleteRoom(roomModel: Room) { this.http.delete(this.url + "/" + roomModel.rId).subscribe(response => { console.log(response); -- libgit2 0.26.0