Update หน้าจองเบิก

src/app/models/equirment.model.ts

-import { CategoryModel } from "./ItemDetail.model";
+import { CategoryModel } from "./itemDetail.model";
 
 export class Equirment {
     eqId: number;

src/app/models/roomDetail.model.ts

@@ -17,7 +17,8 @@ export class RoomDetail {
         second: number;
     };
     rStatus: string;
-    rTelephone: number;
+    rTelephone: string;
+    email: undefined;
     Remark: string;
     constructor(init?: RoomDetail) {
         Object.assign(this, init);
@@ -28,6 +29,7 @@ export class RoomDetail {
         this.eDate = '';
         this.rStatus = '';
         this.rTelephone = undefined;
+        this.email = undefined;
         this.Remark = '';
     }
 }

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

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 import { Equirment } from 'src/app/models/equirment.model';
-import { ItemDetail } from 'src/app/models/ItemDetail.model';
+import { ItemDetail } from 'src/app/models/itemDetail.model';
 import { RoomDetail } from 'src/app/models/RoomDetail.model';
 import { MyRoom, Room } from 'src/app/models/rooms.model';
 import { EquirmentService } from 'src/app/service/equirment.service';

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

@@ -7,6 +7,7 @@ import { ItemDetailService } from 'src/app/service/item-detail.service';
 import { RoomDetail } from 'src/app/models/roomDetail.model';
 import { RoomDetailService } from 'src/app/service/room-detail.service';
 import { MyRoom, Room } from 'src/app/models/rooms.model';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-admin-pending',
@@ -62,6 +63,9 @@ export class AdminPendingComponent implements OnInit {
 
   thStime: string;
   thEtime: string;
+
+
+
   thtimeChange (time:string,item:any){
     let timeSplit = time.split(":")
     item.hour = parseInt(timeSplit[0])
@@ -70,6 +74,8 @@ export class AdminPendingComponent implements OnInit {
   }
 
 
+
+
   constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter, private modalService: NgbModal, private ItemDetailService: ItemDetailService, private RoomDetailService: RoomDetailService) {
     this.fromDate = calendar.getToday();
     this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);

src/app/pages/equipment/equipment.component.html

@@ -131,7 +131,7 @@
                 <h5 class=" title">Add Equirment</h5>
             </div>
             <div class=" card-body">
-                <form>
+
                 <div class=" row">
                     <div class=" col-md-12">
                         <div class=" form-group">
@@ -146,8 +146,8 @@
                         <div class=" form-group">
                             <label> หมวดหมู่ </label>
                             <br>
-                                <select class="form-select"
-                                    aria-label="Default select example" [(ngModel)]="modelEquirment.eqType">
+                            <select class="form-select" aria-label="Default select example"
+                                [(ngModel)]="modelEquirment.eqType">
                                 <option selected>เลือกหมวดหมู่</option>
                                 <option value="4">IT</option>
                                 <option value="5">Company</option>
@@ -159,20 +159,19 @@
                     <div class=" col-md-12">
                         <div class=" form-group">
                             <label> รายละเอียด</label>
-                                <textarea class="form-control"
-                                    id="exampleFormControlTextarea1" rows="3"
+                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                 placeholder="......" [(ngModel)]="modelEquirment.eqDesc"></textarea>
                         </div>
                     </div>
                 </div>
                 <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
-                    <input type="file" class="form-control-file"
-                        id="exampleFormControlFile">
-                </form>
+                <input type="file" class="form-control-file" id="exampleFormControlFile">
+
             </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" (click)="modal.dismiss('Cross click')">Cancel</button>
+                <button class=" btn btn-fill btn-danger" type="cancel"
+                    (click)="modal.dismiss('Cross click')">Cancel</button>
             </div>
         </div>
     </div>
@@ -185,7 +184,6 @@
                 <h5 class=" title">Add Equirment</h5>
             </div>
             <div class=" card-body">
-                <form>
                 <div class=" row">
                     <div class=" col-md-12">
                         <div class=" form-group">
@@ -199,7 +197,8 @@
                         <div class=" form-group">
                             <label> ประเภท </label>
                             <br>
-                                <select class="form-select" aria-label="Default select example" [(ngModel)]="modelRoom.rType">
+                            <select class="form-select" aria-label="Default select example"
+                                [(ngModel)]="modelRoom.rType">
                                 <option selected>เลือกประเภท</option>
                                 <option value="1">ห้อง</option>
                                 <option value="2">รถ</option>
@@ -218,11 +217,11 @@
                 </div>
                 <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
                 <input type="file" class="form-control-file" id="exampleFormControlFile">
-                </form>
             </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" (click)="modal.dismiss('Cross click')">Cancel</button>
+                <button class=" btn btn-fill btn-danger" type="cancel"
+                    (click)="modal.dismiss('Cross click')">Cancel</button>
             </div>
         </div>
     </div>
@@ -235,12 +234,28 @@
                 <h5 class=" title">การจอง</h5>
             </div>
             <div class=" card-body">
-                <form>
+                <form [formGroup]="myFormRoom" class="needs-validation">
                     <div class=" row">
                         <div class=" col-md-12">
                             <div class=" form-group">
                                 <label> ชื่อผู้จอง </label>
-                                <input class=" form-control" placeholder="" type="text" value="" [(ngModel)]="modelRoomDetail.userName"/>
+                                <input class=" form-control" placeholder="" type="text"
+                                    formControlName="userNameForm" />
+                                <div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">
+                                    Invalid
+                                    Username.</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class=" row">
+                        <div class=" col-md-12">
+                            <div class=" form-group">
+                                <label> อีเมลผู้จอง </label>
+                                <input class=" form-control" placeholder="" type="text" value=""
+                                    [(ngModel)]="modelRoomDetail.email" formControlName="email" />
+                                <div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">Valid
+                                    Email.
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -248,40 +263,61 @@
                         <div class=" col-md-12">
                             <div class=" form-group">
                                 <label> เบอร์โทร </label>
-                                <input class=" form-control" placeholder="" type="text" value="" [(ngModel)]="modelRoomDetail.rTelephone" />
+                                <input class=" form-control" placeholder="" type="text" value=""
+                                    [(ngModel)]="modelRoomDetail.rTelephone" formControlName="rTelephone" />
+                                <div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">Valid
+                                    Telephone.</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]="modelRoomDetail.room.rName">
+                            <input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rName"
+                                formControlName="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]="modelRoomDetail.room.rDesc">
+                            <input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rDesc"
+                                formControlName="rDesc">
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
-                            <input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.sDate">
+                            <input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.sDate"
+                                formControlName="sDate">
+                            <div style="color: red;" *ngIf="myFormRoom.controls.sDate.status=='INVALID'">Valid Start
+                                Date.
+                            </div>
+
                         </div>
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
-                            <input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.eDate">
+                            <input type="date" class="form-control" value="" [(ngModel)]="modelRoomDetail.eDate"
+                                formControlName="eDate">
+                            <div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'">Valid End Date.
+                            </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
-                            <ngb-timepicker [(ngModel)]="modelRoomDetail.sTime"></ngb-timepicker>
+                            <ngb-timepicker [(ngModel)]="modelRoomDetail.sTime" formControlName="sTime">
+                            </ngb-timepicker>
+                            <div style="color: red;" *ngIf="myFormRoom.controls.sTime.status=='INVALID'">Valid Start
+                                Time.
+                            </div>
+
                         </div>
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
-                            <ngb-timepicker [(ngModel)]="modelRoomDetail.etime"></ngb-timepicker>
+                            <ngb-timepicker [(ngModel)]="modelRoomDetail.etime" formControlName="eTime">
+                            </ngb-timepicker>
+                            <div style="color: red;" *ngIf="myFormRoom.controls.eTime.status=='INVALID'">Valid End Time.
+                            </div>
                         </div>
                     </div>
                     <div class=" row">
@@ -289,14 +325,15 @@
                             <div class=" form-group">
                                 <label> หมายเหตุ </label>
                                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
-                                    placeholder="......" [(ngModel)]="modelRoomDetail.Remark"></textarea>
+                                    placeholder="......" [(ngModel)]="modelRoomDetail.Remark"
+                                    formControlName="Remark"></textarea>
                             </div>
                         </div>
                     </div>
                 </form>
             </div>
             <div class=" card-footer">
-                <button class=" btn btn-fill btn-danger" type="submit" (click)="saveBook()">Save</button>
+                <button class=" btn btn-fill btn-danger" [disabled]="" type="button" (click)="validate()">Save</button>
                 <button class=" btn btn-fill btn-danger" type="close">Cancel</button>
             </div>
         </div>
@@ -310,12 +347,16 @@
                 <h5 class=" title">เบิกอุปกรณ์</h5>
             </div>
             <div class=" card-body">
-                <form>
+                <form [formGroup]="myFormEquir" class="needs-validation">
                     <div class=" row">
                         <div class=" col-sm-12 mb-1">
                             <div class=" form-group">
                                 <label> ชื่อผู้เบิก </label>
-                                <input class=" form-control" placeholder="" type="text" value="" [(ngModel)]="modelItemDetail.userName"/>
+                                <input class=" form-control" placeholder="" type="text" value=""
+                                    [(ngModel)]="modelItemDetail.userName" formControlName="userNameForm" />
+                                <div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'">
+                                    Valid End Time.
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -323,47 +364,73 @@
                         <div class=" col-md-12">
                             <div class=" form-group">
                                 <label> เบอร์โทร </label>
-                                <input class=" form-control" placeholder="" type="text" value="" [(ngModel)]="modelItemDetail.eTelephone"/>
+                                <input class=" form-control" placeholder="" type="text" value=""
+                                    [(ngModel)]="modelItemDetail.eTelephone" formControlName="eTelephone" />
+                                <div style="color: red;" *ngIf="myFormEquir.controls.eTelephone.status=='INVALID'">Valid
+                                    End Time.
+                                </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]="modelItemDetail.equirment.eqName" >
+                            <input readonly class="form-control" type="text" [value]="modelItemDetail.equirment.eqName"
+                                formControlName="eqName">
+
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-sm-12 mb-1">
                             <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
-                            <input readonly class="form-control" type="text" [value]="modelItemDetail.equirment.eqDesc">
+                            <input readonly class="form-control" type="text" [value]="modelItemDetail.equirment.eqDesc"
+                                formControlName="eqDesc">
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
-                            <input type="date" class="form-control" value="" [(ngModel)]="modelItemDetail.sDate">
+                            <input type="date" class="form-control" value="" [(ngModel)]="modelItemDetail.sDate"
+                                formControlName="sDate">
+                            <div style="color: red;" *ngIf="myFormEquir.controls.sDate.status=='INVALID'">Valid End
+                                Time.
+                            </div>
                         </div>
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
-                            <input type="date" class="form-control" value="" [(ngModel)]="modelItemDetail.eDate">
+                            <input type="date" class="form-control" value="" [(ngModel)]="modelItemDetail.eDate"
+                                formControlName="eDate">
+                            <div style="color: red;" *ngIf="myFormEquir.controls.eDate.status=='INVALID'">Valid End
+                                Time.
+                            </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
-                            <ngb-timepicker [(ngModel)]="modelItemDetail.sTime"></ngb-timepicker>
+                            <ngb-timepicker [(ngModel)]="modelItemDetail.sTime" formControlName="sTime">
+                            </ngb-timepicker>
+                            <div style="color: red;" *ngIf="myFormEquir.controls.sTime.status=='INVALID'">Valid End
+                                Time.
+                            </div>
                         </div>
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
-                            <ngb-timepicker [(ngModel)]="modelItemDetail.eTime"></ngb-timepicker>
+                            <ngb-timepicker [(ngModel)]="modelItemDetail.eTime" formControlName="eTime">
+                            </ngb-timepicker>
+                            <div style="color: red;" *ngIf="myFormEquir.controls.eTime.status=='INVALID'">Valid End
+                                Time.
+                            </div>
                         </div>
                     </div>
                     <div class=" row">
                         <div class=" col-sm-6 mb-1">
                             <label for="changequantity">จำนวน</label>
                             <input id="changequantity" type="number" class="form-control form-control-sm"
-                            [(ngModel)]="modelItemDetail.Quantity" />
+                                [(ngModel)]="modelItemDetail.Quantity" formControlName="Quantity" />
+                            <div style="color: red;" *ngIf="myFormEquir.controls.Quantity.status=='INVALID'">Valid End
+                                Time.
+                            </div>
                         </div>
                     </div>
                     <div class=" row">
@@ -371,14 +438,15 @@
                             <div class=" form-group">
                                 <label> หมายเหตุ </label>
                                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
-                                    placeholder="......" [(ngModel)]="modelItemDetail.Remark"></textarea>
+                                    placeholder="......" [(ngModel)]="modelItemDetail.Remark"
+                                    formControlName="Remark"></textarea>
                             </div>
                         </div>
                     </div>
                 </form>
             </div>
             <div class=" card-footer">
-                <button class=" btn btn-fill btn-danger" type="submit" (click)="saveLend()">Save</button>
+                <button class=" btn btn-fill btn-danger" type="submit" (click)="validate()">Save</button>
                 <button class=" btn btn-fill btn-danger" type="close">Cancel</button>
             </div>
         </div>

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

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 import { Equirment } from 'src/app/models/equirment.model';
-import { ItemDetail } from 'src/app/models/ItemDetail.model';
+import { ItemDetail } from 'src/app/models/itemDetail.model';
 import { RoomDetail } from 'src/app/models/RoomDetail.model';
 import { MyRoom, Room } from 'src/app/models/rooms.model';
 import { EquirmentService } from 'src/app/service/equirment.service';
 import { ItemDetailService } from 'src/app/service/item-detail.service';
 import { RoomService } from 'src/app/service/room.service';
 import { RoomDetailService } from 'src/app/service/room-detail.service';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 
 @Component({
@@ -31,13 +32,54 @@ export class EquipmentComponent implements OnInit {
   modelItemDetail = new ItemDetail();
   modelRoomDetail = new RoomDetail();
 
-  constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService, private ItemDetailService : ItemDetailService, private RoomDetailService : RoomDetailService) {
+  myFormRoom: FormGroup;
+  myFormEquir: FormGroup;
+
+  constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService, private ItemDetailService : ItemDetailService, private RoomDetailService : RoomDetailService
+    ,private fb: FormBuilder) {
+    
     
   }
 
+  validate(){
+    console.log(this.myFormRoom.controls.userNameForm.status)
+    console.log(this.myFormRoom)
+    // var form = document.getElementsByClassName('needs-validation')[0] as HTMLFormElement;
+    // if (form.checkValidity() === false) {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    // }
+    // form.classList.add('was-validated');
+  }
+
   ngOnInit() {
     this.listEquirmentModel = this.equirmentService.getListEquirment();
     this.listRoomModel = this.roomService.getListRoom();
+    this.myFormRoom = new FormGroup({
+      userNameForm : new FormControl('',[Validators.required]),
+      rTelephone : new FormControl('',[Validators.required]),
+      email : new FormControl('',[Validators.required, Validators.email]),
+      rName : new FormControl(),
+      rDesc : new FormControl(),
+      sDate : new FormControl('',[Validators.required]),
+      eDate : new FormControl('',[Validators.required]),
+      sTime : new FormControl('',[Validators.required]),
+      eTime : new FormControl('',[Validators.required]),
+      Remark : new FormControl()
+    });
+    this.myFormEquir = new FormGroup({
+      userNameForm : new FormControl('',[Validators.required]),
+      eTelephone : new FormControl('',[Validators.required]),
+      email : new FormControl('',[Validators.required, Validators.email]),
+      eqName : new FormControl('',[Validators.required]),
+      eqDesc : new FormControl('',[Validators.required]),
+      sDate : new FormControl('',[Validators.required]),
+      eDate : new FormControl('',[Validators.required]),
+      sTime : new FormControl('',[Validators.required]),
+      eTime : new FormControl('',[Validators.required]),
+      Quantity : new FormControl('',[Validators.required]),
+      Remark : new FormControl('',[Validators.required]),
+    })
   }
 
 

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

 import { Component, OnInit } from '@angular/core';
-import { ItemDetail } from 'src/app/models/ItemDetail.model';
+import { ItemDetail } from 'src/app/models/itemDetail.model';
 
 @Component({
   selector: 'app-lend-page',

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

 import { Component, OnInit } from '@angular/core';
 import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
-import { ItemDetail } from 'src/app/models/ItemDetail.model';
+import { ItemDetail } from 'src/app/models/itemDetail.model';
 import { ItemDetailService } from 'src/app/service/item-detail.service';
 import { RoomDetail } from 'src/app/models/RoomDetail.model';
 import { RoomDetailService } from 'src/app/service/room-detail.service';

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

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { ItemDetail, SearchItemDetailModel } from '../models/ItemDetail.model';
+import { ItemDetail, SearchItemDetailModel } from '../models/itemDetail.model';
 
 @Injectable({ providedIn: 'root' })
 export class ItemDetailService {

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

@@ -33,6 +33,7 @@ export class RoomDetailService {
             },
             rStatus: 'รอการอนุมัติ',
             rTelephone: undefined,
+            email: undefined,
             Remark: 'test',
         },
         {
@@ -60,6 +61,7 @@ export class RoomDetailService {
             },
             rStatus: 'รอการอนุมัติ',
             rTelephone: undefined,
+            email: undefined,
             Remark: 'test',
         },