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 @@
<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">
......
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();
}
}
......
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
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);
......
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