Skip to content

B
BookingMyHrManagement
Commit 31cfe643 by DESKTOP-HF0LVOG\myhr
Options

Add เพิ่มรายการ หน้าการจอง

parent 186fb8d6
Showing with 158 additions and 119 deletions
src/app/pages/equipment/equipment.component.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="card-body"> <div class="card-body">
<button class="btn btn-lg btn-outline-primary" <button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button> (click)="Ropen(content)">เพิ่มรายการ</button>
<div class="row"> <div class="row">
<div class="col-sm-3" *ngFor="let item of listRoomModel"> <div class="col-sm-3" *ngFor="let item of listRoomModel">
...@@ -28,11 +28,11 @@ ...@@ -28,11 +28,11 @@
padding: 10px;"> padding: 10px;">
<div class="card-body"> <div class="card-body">
<img style="height: 200px; <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="..."> alt="...">
<br> <br>
<p class="text-left">ชื่อ : {{item.rname}}</p> <p class="text-left">ชื่อ : {{item.rName}}</p>
<p class="text-left">รายละเอียด : {{item.rdesc}}</p> <p class="text-left">รายละเอียด : {{item.rDesc}}</p>
</div> </div>
<div class="text-center"> <div class="text-center">
...@@ -119,27 +119,27 @@ ...@@ -119,27 +119,27 @@
</div> </div>
<div class=" card-footer"> <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="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> </div>
</div> </div>
</ng-template> </ng-template>
<button class="btn btn-lg btn-outline-primary" <button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button> (click)="Eqopen(content)">เพิ่มรายการ</button>
<div class="row"> <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=" <div class="card" style="
padding: 10px;"> padding: 10px;">
<div class="card-body"> <div class="card-body">
<img style="height: 200px; <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="..."> alt="...">
<br> <br>
<p class="text-left">ชื่อ : {{item.eqname}}</p> <p class="text-left">ชื่อ : {{item.eqName}}</p>
<p class="text-left">รายละเอียด : {{item.eqdesc}}</p> <p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
<p class="text-left">ประเภท : {{item.eqtype}}</p> <p class="text-left">ประเภท : {{item.eqType}}</p>
</div> </div>
<div class="text-center"> <div class="text-center">
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> ชื่อ </label> <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> </div>
</div> </div>
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
</div> </div>
<div class=" card-footer"> <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="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> </div>
</div> </div>
...@@ -253,13 +253,13 @@ ...@@ -253,13 +253,13 @@
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label> <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> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label> <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> </div>
<div class="row"> <div class="row">
...@@ -328,13 +328,13 @@ ...@@ -328,13 +328,13 @@
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label> <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> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label> <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> </div>
<div class="row"> <div class="row">
......
src/app/pages/equipment/equipment.component.ts
...@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Equirment } from 'src/app/models/equirment.model'; import { Equirment } from 'src/app/models/equirment.model';
import { Room } from 'src/app/models/rooms.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({ @Component({
selector: 'app-equipment', selector: 'app-equipment',
...@@ -9,22 +12,28 @@ import { Room } from 'src/app/models/rooms.model'; ...@@ -9,22 +12,28 @@ import { Room } from 'src/app/models/rooms.model';
styleUrls: ['./equipment.component.scss'] styleUrls: ['./equipment.component.scss']
}) })
export class EquipmentComponent implements OnInit { export class EquipmentComponent implements OnInit {
time = {hour: 13, minute: 30}; time = { hour: 13, minute: 30 };
page = 1; page = 1;
pageSize = 10; pageSize = 10;
closeResult = ''; closeResult = '';
listEquirmentModel: Equirment[] = []; listEquirmentModel: Equirment[] = [];
listRoomModel: Room[] = [];
collectionSize = this.listEquirmentModel.length; collectionSize = this.listEquirmentModel.length;
modelEquirment = new Equirment(); modelEquirment = new Equirment();
modelRoom = new Room(); 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.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`; this.closeResult = `Closed with: ${result}`;
}, (reason) => { }, (reason) => {
...@@ -32,6 +41,16 @@ export class EquipmentComponent implements OnInit { ...@@ -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 { private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) { if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC'; return 'by pressing ESC';
...@@ -43,23 +62,28 @@ export class EquipmentComponent implements OnInit { ...@@ -43,23 +62,28 @@ export class EquipmentComponent implements OnInit {
} }
refreshCountries() { refreshCountries() {
this.listEquirmentModel = this.listEquirmentModel this.listEquirmentModel = this.listEquirmentModel
this.listRoomModel = this.listRoomModel
.map((item, i) => ({ id: i + 1, ...item })) .map((item, i) => ({ id: i + 1, ...item }))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize); .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
} }
NgbdTimepickerBasic() { NgbdTimepickerBasic() {
} }
saveEquirment(){ saveEquirment() {
console.log(this.modelEquirment); 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();
} }
} }
......
src/app/service/equirment.service.ts
...@@ -5,85 +5,93 @@ import { Equirment, SearchEquirmentModel } from '../models/equirment.model'; ...@@ -5,85 +5,93 @@ import { Equirment, SearchEquirmentModel } from '../models/equirment.model';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class EquirmentService { export class EquirmentService {
constructor(private http: HttpClient) { } constructor(private http: HttpClient) { }
url: string; url: string;
listEquirment: Equirment[] = [ listEquirment: Equirment[] = [
{ {
eqId: 1, eqId: 1,
eqName: "จอคอมพิวเตอร์", eqName: "จอคอมพิวเตอร์",
eqDesc: "หน้าจอขนาด 22 นิ้ว", eqDesc: "หน้าจอขนาด 22 นิ้ว",
eqType: "it", eqType: "it",
eqPic: "assets/img/mo1.jpg" eqPic: "assets/img/mo1.jpg"
}, },
{ {
eqId: 2, eqId: 2,
eqName: "เมาส์", eqName: "เมาส์",
eqDesc: "...", eqDesc: "...",
eqType: "it", eqType: "it",
eqPic: "assets/img/mou.jpg" eqPic: "assets/img/mou.jpg"
}, },
{ {
eqId: 3, eqId: 3,
eqName: "โน๊ตบุ๊ค", eqName: "โน๊ตบุ๊ค",
eqDesc: "หน้าจอขนาด 20 นิ้ว", eqDesc: "หน้าจอขนาด 20 นิ้ว",
eqType: "it", eqType: "it",
eqPic: "assets/img/notebook.jpg" eqPic: "assets/img/notebook.jpg"
}, },
{ {
eqId: 4, eqId: 4,
eqName: "คีย์บอร์ด", eqName: "คีย์บอร์ด",
eqDesc: "...", eqDesc: "...",
eqType: "it", eqType: "it",
eqPic: "assets/img/keyboard.png" eqPic: "assets/img/keyboard.png"
} }
] ]
listEquirmentModel: Equirment[] = [];
getListRoom() { addEquirment(model: Equirment) {
this.http.get(this.url).subscribe((response: any) => { this.listEquirment.push(model);
console.log(response);
this.listEquirmentModel = response.content; }
}, error => {
console.log(error) getListEquirment() {
// alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) return this.listEquirment;
}) }
}
getListRoom() {
searchListRoom(searchModel: SearchEquirmentModel) { this.http.get(this.url).subscribe((response: any) => {
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);
console.log(response); this.listEquirment = response.content;
this.listEquirmentModel = response; }, error => {
}, error => { console.log(error)
console.log(error) // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message)
alert("ไม่สามารถค้นหาอุปกรณ์ที่ว่างได้ เนื่องจาก :\n" + error.message) })
}) }
}
searchListEquirment(searchModel: SearchEquirmentModel) {
addRoom(EquirmentModel: Equirment) { 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) => {
this.http.post(this.url, EquirmentModel).subscribe(response => { console.log(response);
console.log(response); this.listEquirment = response;
}, error => {
}) console.log(error)
alert("ไม่สามารถค้นหาอุปกรณ์ที่ว่างได้ เนื่องจาก :\n" + error.message)
})
} }
deleteRoom(EquirmentModel: Equirment) {
this.http.delete(this.url + "/" + EquirmentModel.eqId).subscribe(response => { // addEquirment(EquirmentModel: Equirment) {
console.log(response); // this.http.post(this.url, EquirmentModel).subscribe(response => {
this.getListRoom() // console.log(response);
alert("ลบข้อมูลอุปกรณ์สำเร็จ")
}) // })
}
updateRoom(EquirmentModel: Equirment) { // }
this.http.put(this.url + "/" + EquirmentModel.eqId, EquirmentModel).subscribe(response => { deleteEquirment(EquirmentModel: Equirment) {
console.log(response); this.http.delete(this.url + "/" + EquirmentModel.eqId).subscribe(response => {
alert("อัพเดทข้อมูลอุปกรณ์สำเร็จ") console.log(response);
}) this.getListRoom()
} alert("ลบข้อมูลอุปกรณ์สำเร็จ")
})
EquirmentModel(eqId: string) { }
} 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
src/app/service/room.service.ts
...@@ -44,14 +44,20 @@ export class RoomService { ...@@ -44,14 +44,20 @@ export class RoomService {
] ]
listRoomSearch: Room[] = []; listRoomSearch: Room[] = [];
addRoom(model : Room){
this.listRoomModel.push(model);
}
getListRoom() { getListRoom() {
this.http.get(this.url).subscribe((response: any) => { return this.listRoomModel;
console.log(response); // this.http.get(this.url).subscribe((response: any) => {
this.listRoomModel = response.content; // console.log(response);
}, error => { // this.listRoomModel = response.content;
console.log(error) // }, error => {
// alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message) // console.log(error)
}) // // alert("ไม่สามารถดึงข้อมูลห้องประชุมได้ เนื่องจาก :\n" + error.message)
// })
} }
searchListRoom(searchModel: SearchRoomModel) { searchListRoom(searchModel: SearchRoomModel) {
...@@ -64,14 +70,14 @@ export class RoomService { ...@@ -64,14 +70,14 @@ export class RoomService {
}) })
} }
addRoom(roomModel: Room) { // // addRoom(roomModel: Room) {
this.http.post(this.url, roomModel).subscribe(response => { // // this.http.post(this.url, roomModel).subscribe(response => {
console.log(response); // // console.log(response);
}) // // })
// }
}
deleteRoom(roomModel: Room) { deleteRoom(roomModel: Room) {
this.http.delete(this.url + "/" + roomModel.rId).subscribe(response => { this.http.delete(this.url + "/" + roomModel.rId).subscribe(response => {
console.log(response); console.log(response);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment