admin-equirment.component.html 22.7 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<div class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div>
                        <h4 class="nav justify-content-center ">รายการ</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul ngbNav #nav="ngbNav" class="nav-tabs">
        <li ngbNavItem>
            <a ngbNavLink>การจอง</a>
            <ng-template ngbNavContent>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="">
                            <div class="card-body">

                                <button class="btn btn-lg btn-outline-primary"
23
                                    (click)="openRoomDetail(contentroom)">เพิ่มรายการ</button>
24

Your Name committed
25 26
                                <button class="btn btn-lg btn-outline-primary" (click)="openType(contenttype)">เพิ่มประเภท</button>

27
                                <div class="row">
28 29
                                    <div class="col-sm-3"
                                        *ngFor="let item of listRoomModel|slice: (pageListRoom-1) * pageSizeListRoom :(pageListRoom-1) * pageSizeListRoom + pageSizeListRoom ;let i = index">
30 31 32
                                        <div class="card" style="
                                        padding: 10px;">
                                            <div class="card-body">
Your Name committed
33
                                                <img style="object-fit: cover;" [src]="item.rPic" class="nav justify-content-center"  width="150px" height="150px"
34 35 36 37
                                                    alt="...">
                                                <br>
                                                <p class="text-left">ชื่อ : {{item.rName}}</p>
                                                <p class="text-left">รายละเอียด : {{item.rDesc}}</p>
38
                                                <p class="text-left">หมวดหมู่ : <td *ngIf="item.rType==1">ห้อง</td><td *ngIf="item.rType==2">รถ</td></p>
39 40 41
                                            </div>

                                            <div class="text-center">
Chanachai committed
42 43 44
                                                <button class="btn btn-sm btn-outline-primary"
                                                    (click)="Ropen(editroom,((pageListRoom-1) * pageSizeListRoom)+i)">แก้ไข</button>
                                                <button class="btn btn-sm btn-danger" type="button.dispose"
Chanachai committed
45
                                                    (click)="openDeleteRoom(deleteRoomPopup,item)">ลบ</button>
46 47 48 49 50 51 52
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between p-2">
53 54 55 56
                                <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                    [pageSize]="pageSizeListRoom">
                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
                                    <ng-template ngbPaginationNext>Next</ng-template>
57 58
                                </ngb-pagination>

59 60
                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                    (ngModelChange)="pageListRoom=1">
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
                                    <option [ngValue]="10">10 items per page</option>
                                    <option [ngValue]="50">50 items per page</option>
                                    <option [ngValue]="100">100 items per page</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </li>


        <li ngbNavItem>
            <a ngbNavLink>การเบิก</a>
            <ng-template ngbNavContent>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="">
                            <div class="card-body">
                                <button class="btn btn-lg btn-outline-primary"
81
                                    (click)="openItemDetail(contentequirment)">เพิ่มรายการ</button>
Your Name committed
82 83
                                
                                    <button class="btn btn-lg btn-outline-primary" (click)="openType(contenttype)">เพิ่มประเภท</button>
84 85

                                <div class="row">
86 87
                                    <div class="col-sm-3"
                                        *ngFor="let item of listEquirmentModel|slice: (page-1) * pageSize :(page-1) * pageSize + pageSize ;let i = index">
88 89 90
                                        <div class="card" style="
                                        padding: 10px;">
                                            <div class="card-body">
Your Name committed
91
                                                <img style="object-fit: cover;" [src]="item.eqPic" class="nav justify-content-center"  width="150px" height="150px"
92 93 94 95
                                                    alt="...">
                                                <br>
                                                <p class="text-left">ชื่อ : {{item.eqName}}</p>
                                                <p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
96
                                                <p class="text-left">หมวดหมู่ : <td *ngIf="item.eqType==4">IT</td><td *ngIf="item.eqType==5">Company</td></p>
97 98 99
                                            </div>

                                            <div class="text-center">
Chanachai committed
100 101 102 103
                                                <button class="btn btn-sm btn-outline-primary"
                                                    (click)="Eopen(editLend,((page-1) * pageSize)+i)">แก้ไข</button>
                                                <button class="btn btn-sm btn-danger"
                                                    (click)="openDeleteEquirment(deleteEquirPopup,item)">ลบ</button>
104 105 106 107 108 109 110
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between p-2">
111 112 113
                                <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
                                    <ng-template ngbPaginationNext>Next</ng-template>
114 115 116
                                </ngb-pagination>

                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
117
                                    (ngModelChange)="page=1">
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
                                    <option [ngValue]="10">10 items per page</option>
                                    <option [ngValue]="50">50 items per page</option>
                                    <option [ngValue]="100">100 items per page</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </ng-template>
        </li>
    </ul>
    <div [ngbNavOutlet]="nav"></div>
</div>

133
<ng-template #contentequirment let-modal>
134 135
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
136
            <div class=" card-header">
137 138 139
                <h5 class=" title">Add Equirment</h5>
            </div>
            <div class=" card-body">
140
                <form [formGroup]="myFormEquir" class="needs-validation">
141 142 143 144
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อ </label>
145 146 147
                                <input class=" form-control" placeholder="" type="text"
                                    [(ngModel)]="modelEquirment.eqName" value="" formControlName="eqName" />
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
148
                                    กรุณากรอกชื่อ</div>
149 150 151 152 153 154
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <div class=" form-group">
155
                                <label> หมวดหมู่ </label>
156
                                <br>
157
                                <select class="form-select" aria-label="Default select example"
158 159 160 161
                                    [(ngModel)]="modelEquirment.eqType" formControlName="eqType">
                                    <option selected>เลือกหมวดหมู่</option>
                                    <option value="4">IT</option>
                                    <option value="5">Company</option>
162
                                </select>
163
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
164
                                    กรุณากรอกหมวดหมู่.</div>
165 166 167 168 169 170 171 172
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> รายละเอียด</label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
173 174 175
                                    placeholder="......" [(ngModel)]="modelEquirment.eqDesc"
                                    formControlName="eqDesc"></textarea>
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
176
                                    กรุณากรอกรายละเอียด.</div>
177 178 179 180
                            </div>
                        </div>
                    </div>
                    <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
Chanachai committed
181
                    <input type="file" class="form-control-file" id="exampleFormControlFile">
182 183
                </form>
            </div>
184

185
            <div class=" card-footer">
Chanachai committed
186
                <button class=" btn btn-fill btn-danger" [disabled]="myFormEquir.invalid" type="submit"
187
                    (click)="saveEquirment();modal.dismiss()">Save</button>
188 189
                <button class=" btn btn-fill btn-danger" type="cancel"
                    (click)="modal.dismiss('Cross click')">Cancel</button>
190 191 192 193 194
            </div>
        </div>
    </div>
</ng-template>

195
<ng-template #contentroom let-modal>
196 197
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
198
            <div class=" card-header">
199
                <h5 class=" title">เพิ่มรายการ</h5>
200 201
            </div>
            <div class=" card-body">
202
                <form [formGroup]="myFormRoom" class="needs-validation">
203 204 205 206
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อ </label>
Chanachai committed
207 208
                                <input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName"
                                    formControlName="rName">
209 210
                                <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
                                    กรุณากรอกชื่อ.</div>
211 212 213 214 215 216
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <div class=" form-group">
217
                                <label> ประเภท </label>
218
                                <br>
219
                                <select class="form-select" aria-label="Default select example"
220 221 222
                                    [(ngModel)]="modelRoom.rType" formControlName="rType">
                                    <option value="1">ห้อง</option>
                                    <option value="2">รถ</option>
223
                                </select>
224 225
                                <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
                                    กรุณากรอกประเภท</div>
226 227 228 229 230 231 232
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> รายละเอียด</label>
233
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
234 235 236
                                    placeholder="......" [(ngModel)]="modelRoom.rDesc"
                                    formControlName="rDesc"></textarea>
                                <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
Chanachai committed
237
                                    กรุณากรอกรายละเอียด</div>
238 239 240 241
                            </div>
                        </div>
                    </div>
                    <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
242
                    <input type="file" class="form-control-file" id="exampleFormControlFile">
243 244 245
                </form>
            </div>
            <div class=" card-footer">
Chanachai committed
246
                <button class=" btn btn-fill btn-danger" [disabled]="myFormRoom.invalid" type="submit"
247
                    (click)="saveType();modal.dismiss()">Save</button>
248 249
                <button class=" btn btn-fill btn-danger" type="cancel"
                    (click)="modal.dismiss('Cross click')">Cancel</button>
250 251 252 253 254
            </div>
        </div>
    </div>
</ng-template>

255
<ng-template #editroom let-modal>
256 257
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
258 259 260 261
            <div class=" card-header">
                <h5 class=" title">แก้ไขข้อมูล</h5>
            </div>
            <div class=" card-body">
262
                <form [formGroup]="myFormRoom" class="needs-validation">
263 264
                    <div class=" row">
                        <div class=" col-md-12">
265
                            <label>ชื่อ</label>
266 267 268
                            <input class=" form-control" type="text" [(ngModel)]="listRoomModelEdit.rName"
                                formControlName="rName">
                            <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
Chanachai committed
269
                                กรุณากรอกชื่อ</div>
270 271
                        </div>
                        <div class=" col-md-12">
272
                            <label>ประเภท</label>
Your Name committed
273 274 275 276 277
                            <select class="custom-select form-control" aria-label="Default select example"
                                formControlName="rType" [(ngModel)]="listRoomModelEdit.rType">
                                <option value="1" style="color: black;">ห้อง</option>
                                <option value="2" style="color: black;">รถ</option>
                            </select>
278
                            <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
Chanachai committed
279
                                กรุณากรอกประเภท.</div>
280 281
                        </div>
                        <div class=" col-md-12">
282
                            <label>รายละเอียด</label>
283 284 285
                            <input class=" form-control" type="text" [(ngModel)]="listRoomModelEdit.rDesc"
                                formControlName="rDesc">
                            <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
Chanachai committed
286
                                กรุณากรอกรายละเอียด.</div>
287 288
                        </div>
                    </div>
289
                </form>
290
            </div>
291

292
            <div class=" card-footer">
293 294 295
                <button class=" btn btn-fill btn-danger" type="update"
                    (click)="updateRoomProfile();modal.dismiss()">Save</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">Cancel</button>
296 297 298 299 300
            </div>
        </div>
    </div>
</ng-template>

301
<ng-template #editLend let-modal>
302 303
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
304 305 306 307
            <div class=" card-header">
                <h5 class=" title">แก้ไขข้อมูล</h5>
            </div>
            <div class=" card-body">
308
                <form [formGroup]="myFormEquir" class="needs-validation">
309 310
                    <div class=" row">
                        <div class=" col-md-12">
311
                            <label>ชื่ออุปกรณ์</label>
312 313
                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqName"
                                formControlName="eqName">
314
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
Chanachai committed
315
                                กรุณากรอกชื่ออุปกรณ์</div>
316 317
                        </div>
                        <div class=" col-md-12">
318
                            <label>ประเภทอุปกรณ์</label>
Your Name committed
319 320 321 322 323
                            <select class="custom-select form-control" aria-label="Default select example"
                                formControlName="eqType" [(ngModel)]="listEquirmentModelEdit.eqType">
                                <option value="4" style="color: black;">IT</option>
                                <option value="5" style="color: black;">Company</option>
                            </select>
324
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
Your Name committed
325
                                กรุณากรอกประเภท.</div>
326 327
                        </div>
                        <div class=" col-md-12">
328
                            <label>รายละเอียดอุปกรณ์</label>
329 330
                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqDesc"
                                formControlName="eqDesc">
331
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
Chanachai committed
332
                                กรุณากรอกรายละเอียดอุปกรณ์</div>
333 334 335 336 337
                        </div>
                    </div>
                </form>
            </div>
            <div class=" card-footer">
338 339 340
                <button class=" btn btn-fill btn-danger" type="update"
                    (click)="updateItemProfile();modal.dismiss()">Save</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">Cancel</button>
341 342 343
            </div>
        </div>
    </div>
344 345
</ng-template>

346
<ng-template #deleteRoomPopup let-modal>
347 348 349 350 351 352 353 354 355
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">ลบข้อมูล</h5>
            </div>
            <div class="card-body">
                <h4 class="text">คุณต้องการลบข้อมูลจริงหรือไม่</h4>
            </div>
            <div class=" card-footer">
356 357
                <button class=" btn btn-fill btn-danger" type="submit" (click)="deleteRoomProfile()">ยืนยัน</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">ยกเลิก</button>
358 359 360
            </div>
        </div>
    </div>
361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377
</ng-template>

<ng-template #deleteEquirPopup let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">ลบข้อมูล</h5>
            </div>
            <div class="card-body">
                <h4 class="text">คุณต้องการลบข้อมูลจริงหรือไม่</h4>
            </div>
            <div class=" card-footer">
                <button class=" btn btn-fill btn-danger" type="submit" (click)="deleteEquirProfile()">ยืนยัน</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">ยกเลิก</button>
            </div>
        </div>
    </div>
Your Name committed
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408
</ng-template>

<ng-template #contenttype let-model>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">เพิ่มประเภท</h5>
            </div>
            <div class=" card-body">
                <form [formGroup]="myFormType" class="needs-validation">
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อประเภท </label>
                                <input class=" form-control" placeholder="" type="text" [(ngModel)]="modelType.typeName"
                                    formControlName="typeName">
                                <div style="color: red;" *ngIf="myFormType.controls.typeName.status=='INVALID'">
                                    กรุณากรอกชื่อประเภท.</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class=" card-footer">
                <button class=" btn btn-fill btn-danger" [disabled]="myFormType.invalid" type="submit"
                    (click)="saveType()">Save</button>
                <button class=" btn btn-fill btn-danger" type="cancel"
                    (click)="modal.dismiss('Cross click')">Cancel</button>
            </div>
        </div>
    </div>
409
</ng-template>