pending.component.html 26.9 KB
Newer Older
1
<div class=" content">
2 3 4 5
    <ul ngbNav #nav="ngbNav" class="nav-tabs">
        <li ngbNavItem>
            <a ngbNavLink>การจอง</a>
            <ng-template ngbNavContent>
6
                <div class="row text-center">
7 8
                    <div class="col-sm-12">
                        <div class="card">
Your Name committed
9 10 11 12 13 14
                            <div class="card-header">
                                <div class="col-sm-12">
                                    <form class="form-inline">
                                        <div class="form-group hidden">
                                            <div class="input-group">
                                                <input name="datepicker" class="form-control" ngbDatepicker
GAME\parin committed
15 16
                                                    [(ngModel)]="searchroomModel.sDate" 
                                                    [(ngModel)]="searchroomModel.eDate" #datepicker="ngbDatepicker"
17 18 19
                                                    [autoClose]="'outside'" (dateSelect)="onDateSelection($event)"
                                                    [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden"
                                                    [startDate]="fromDate!" tabindex="-1">
Your Name committed
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
                                                <ng-template #t let-date let-focused="focused">
                                                    <span class="custom-day" [class.focused]="focused"
                                                        [class.range]="isRange(date)"
                                                        [class.faded]="isHovered(date) || isInside(date)"
                                                        (mouseenter)="hoveredDate = date"
                                                        (mouseleave)="hoveredDate = null">
                                                        {{ date.day }}
                                                    </span>
                                                </ng-template>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd"
                                                    name="dpFromDate" [value]="formatter.format(fromDate)"
                                                    (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary calendar"
                                                        (click)="datepicker.toggle()" type="button"></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ml-2">
                                            <div class="input-group">
                                                <input #dpToDate class="form-control" placeholder="yyyy-mm-dd"
                                                    name="dpToDate" [value]="formatter.format(toDate)"
                                                    (input)="toDate = validateInput(toDate, dpToDate.value)">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary calendar"
                                                        (click)="datepicker.toggle()" type="button"></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ml-3">
                                            <div class="input-group">
                                                <div ngbDropdown class="d-inline-block">
                                                    <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1"
                                                        ngbDropdownToggle>ประเภทการค้นหา</button>
                                                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
GAME\parin committed
59 60
                                                        <button ngbDropdownItem>จอง</button>
                                                        <button ngbDropdownItem>ไม่อนุมัติ</button>
Your Name committed
61 62
                                                        <button ngbDropdownItem>ยกเลิก</button>
                                                    </div>
63 64
                                                    <button class="btn btn-sm btn-outline-success" type="submit"
                                                        (click)="openSearchRoom()">Search</button>
Your Name committed
65 66 67 68 69 70
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
71 72 73 74 75
                            <div class="card-body">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
76 77
                                            <th scope="col">หมวดหมู่</th>
                                            <th scope="col">ชื่อการจอง</th>
78
                                            <th scope="col">รายละเอียด</th>
79
                                            <th scope="col">ชื่อผู้จอง</th>
80 81 82
                                            <th scope="col">วันที่เริ่มต้น</th>
                                            <th scope="col">วันที่สิ้นสุด</th>
                                            <th scope="col">สถานะ</th>
83 84 85
                                        </tr>
                                    </thead>
                                    <tbody>
86
                                        <tr *ngFor="let item of listRoomDetail">
Your Name committed
87
                                            <th scope="row" style="color: rgb(255, 255, 255);">{{ item.id }}</th>
Your Name committed
88 89
                                            <td *ngIf="item.room.rType==1">ห้อง</td>
                                            <td *ngIf="item.room.rType==2">รถ</td>
90 91
                                            <td>{{ item.room.rName }}</td>
                                            <td>{{ item.room.rDesc }}</td>
92
                                            <td>{{ item.userName }}</td>
93 94
                                            <td>{{ item.sDate | date : 'dd/MM/yyyy' }} {{ item.sTime }}</td>
                                            <td>{{ item.eDate | date : 'dd/MM/yyyy' }} {{ item.eTime }}</td>
95 96
                                            <td *ngIf="item.rStatus==0">จอง</td>
                                            <td *ngIf="item.rStatus==1">ไม่อนุมัติ</td>
97
                                            <td *ngIf="item.rStatus==2">ยกเลิก</td>
98 99
                                            <div class="col-auto align-self-sm-center">
                                                <button type="button" class="btn btn-info btn-sm btn-circle "
100 101
                                                    style="line-height: 0px" (click)="openRoomDetail(Room,item)"><i
                                                        class="fa fa-search"></i> </button>
102
                                            </div>
103 104 105 106 107
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="d-flex justify-content-between p-2">
108 109 110 111
                                    <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                        [pageSize]="pageSizeListRoom">
                                        <ng-template ngbPaginationPrevious>Previous</ng-template>
                                        <ng-template ngbPaginationNext>Next</ng-template>
112
                                    </ngb-pagination>
113

114 115
                                    <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                        (ngModelChange)="pageListRoom=1">
116 117 118 119 120 121 122 123 124 125 126
                                        <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>
                </div>
            </ng-template>

127
        </li>
128 129 130
        <li ngbNavItem>
            <a ngbNavLink>การเบิก</a>
            <ng-template ngbNavContent>
131
                <div class="row text-center">
132 133
                    <div class="col-sm-12">
                        <div class="card">
Your Name committed
134 135 136 137 138 139
                            <div class="card-header">
                                <div class="col-sm-12">
                                    <form class="form-inline">
                                        <div class="form-group hidden">
                                            <div class="input-group">
                                                <input name="datepicker" class="form-control" ngbDatepicker
GAME\parin committed
140 141 142 143 144
                                                    [(ngModel)]="searcheqModel.sDate" [(ngModel)]="searcheqModel.eDate"
                                                    #datepicker="ngbDatepicker" [autoClose]="'outside'"
                                                    (dateSelect)="onDateSelection($event)" [displayMonths]="2"
                                                    [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!"
                                                    tabindex="-1">
Your Name committed
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
                                                <ng-template #t let-date let-focused="focused">
                                                    <span class="custom-day" [class.focused]="focused"
                                                        [class.range]="isRange(date)"
                                                        [class.faded]="isHovered(date) || isInside(date)"
                                                        (mouseenter)="hoveredDate = date"
                                                        (mouseleave)="hoveredDate = null">
                                                        {{ date.day }}
                                                    </span>
                                                </ng-template>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd"
                                                    name="dpFromDate" [value]="formatter.format(fromDate)"
                                                    (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary calendar"
                                                        (click)="datepicker.toggle()" type="button"></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ml-2">
                                            <div class="input-group">
                                                <input #dpToDate class="form-control" placeholder="yyyy-mm-dd"
                                                    name="dpToDate" [value]="formatter.format(toDate)"
                                                    (input)="toDate = validateInput(toDate, dpToDate.value)">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary calendar"
                                                        (click)="datepicker.toggle()" type="button"></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ml-3">
                                            <div class="input-group">
                                                <div ngbDropdown class="d-inline-block">
                                                    <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1"
                                                        ngbDropdownToggle>ประเภทการค้นหา</button>
                                                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                                                        <button ngbDropdownItem>รอดำเนินการ</button>
                                                        <button ngbDropdownItem>อนุมัติ</button>
                                                        <button ngbDropdownItem>ยกเลิก</button>
                                                        <button ngbDropdownItem>สำเร็จแล้ว</button>
                                                    </div>
189 190
                                                    <button class="btn btn-sm btn-outline-success" type="submit"
                                                        (click)="openSearchEq()">Search</button>
Your Name committed
191 192 193 194 195 196
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
197 198 199 200 201
                            <div class="card-body">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
202
                                            <th scope="col">หมวดหมู่</th>
203
                                            <th scope="col">ชื่ออุปกรณ์</th>
204
                                            <th scope="col">รายละเอียด</th>
205
                                            <th scope="col">ชื่อผู้เบิก</th>
206 207 208
                                            <th scope="col">วันที่เริ่มใช้</th>
                                            <th scope="col">จำนวน</th>
                                            <th scope="col">สถานะ</th>
209 210 211
                                        </tr>
                                    </thead>
                                    <tbody>
212
                                        <tr *ngFor="let item of listItemDetail">
Your Name committed
213
                                            <th scope="row" style="color: rgb(255, 255, 255);">{{ item.id }}</th>
Your Name committed
214 215 216 217
                                            <td *ngIf="item.equirments.eqType==4">IT</td>
                                            <td *ngIf="item.equirments.eqType==5">Company</td>
                                            <td>{{ item.equirments.eqName }}</td>
                                            <td>{{ item.equirments.eqDesc }}</td>
218
                                            <td>{{ item.userName }}</td>
219
                                            <td>{{ item.sDate | date : 'dd/MM/yyyy' }} {{ item.sTime }}</td>
220
                                            <td>{{ item.quantity }}</td>
221 222 223 224
                                            <td *ngIf="item.eStatus==0">รอดำเนินการ</td>
                                            <td *ngIf="item.eStatus==1">อนุมัติ</td>
                                            <td *ngIf="item.eStatus==2">ยกเลิก</td>
                                            <td *ngIf="item.eStatus==3">สำเร็จแล้ว</td>
225 226
                                            <div class="col-auto align-self-sm-center">
                                                <button type="button" class="btn btn-info btn-sm btn-circle "
227 228
                                                    style="line-height: 0px" (click)="openItemDetail(lend,item)"><i
                                                        class="fa fa-search"></i> </button>
229
                                            </div>
230 231 232
                                        </tr>
                                    </tbody>
                                </table>
233

234
                                <div class="d-flex justify-content-between p-2">
235 236 237 238
                                    <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                        [pageSize]="pageSizeListRoom">
                                        <ng-template ngbPaginationPrevious>Previous</ng-template>
                                        <ng-template ngbPaginationNext>Next</ng-template>
239
                                    </ngb-pagination>
240

241 242
                                    <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                        (ngModelChange)="pageListRoom=1">
243 244 245 246 247 248 249
                                        <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>
250 251
                    </div>
                </div>
252 253 254 255
            </ng-template>
        </li>
    </ul>
    <div [ngbNavOutlet]="nav"></div>
256
</div>
257

258 259 260
<ng-template #Room let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
261 262 263 264
            <div class=" card-header">
                <h5 class=" title">การจอง</h5>
            </div>
            <div class=" card-body">
265 266 267 268 269 270
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> ชื่อผู้จอง </label>
                            <input readonly class=" form-control" placeholder="" type="text"
                                [(ngModel)]="modelRoomDetail.userName" />
271 272
                        </div>
                    </div>
273 274 275 276 277 278 279
                </div>
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> อีเมล </label>
                            <input readonly class=" form-control" placeholder="" type="text"
                                [(ngModel)]="modelRoomDetail.email" />
280 281
                        </div>
                    </div>
282 283 284 285 286 287 288
                </div>
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> เบอร์โทร </label>
                            <input readonly class=" form-control" placeholder="" type="text"
                                [(ngModel)]="modelRoomDetail.rTelephone" />
289 290
                        </div>
                    </div>
291 292 293 294 295
                </div>
                <div class="row">
                    <div class="col-sm-12 mb-1">
                        <label for="exampleFormControlSelect1">ชื่อห้อง</label>
                        <input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rName">
296
                    </div>
297 298 299 300 301
                </div>
                <div class="row">
                    <div class="col-sm-12 mb-1">
                        <label for="exampleFormControlSelect1">รายละเอียด</label>
                        <input readonly class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rDesc">
302
                    </div>
303 304 305 306
                </div>
                <div class="row">
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
Your Name committed
307
                        <input readonly type="date" class="form-control" [(ngModel)]="modelRoomDetail.sDate">
308
                    </div>
309 310
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
Your Name committed
311
                        <input readonly type="date" class="form-control" [(ngModel)]="modelRoomDetail.eDate">
312 313 314 315 316
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
317
                        <input readonly class="form-control" type="time" [(ngModel)]="modelRoomDetail.sTime">
318 319 320
                    </div>
                    <div class="col-6 mb-1">
                        <label [readonly] for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
321
                        <input readonly class="form-control" type="time" [(ngModel)]="modelRoomDetail.eTime">
322 323 324 325 326 327 328 329
                    </div>
                </div>
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> หมายเหตุ </label>
                            <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3"
                                placeholder="......" [(ngModel)]="modelRoomDetail.Remark"></textarea>
330 331
                        </div>
                    </div>
332
                </div>
333 334 335 336
            </div>
        </div>
    </div>
</ng-template>
337

338 339 340
<ng-template #lend let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
341
            <div class=" card-header">
342
                <h5 class=" title">การเบิก</h5>
343 344
            </div>
            <div class=" card-body">
345 346 347
                <div class=" row">
                    <div class=" col-sm-12 mb-1">
                        <div class=" form-group">
Chanachai committed
348
                            <label> ชื่อผู้เบิก</label>
349 350
                            <input readonly class=" form-control" placeholder="" type="text"
                                [(ngModel)]="modelItemDetail.userName" />
351 352
                        </div>
                    </div>
353 354 355 356 357 358 359
                </div>
                <div class=" row">
                    <div class=" col-sm-12 mb-1">
                        <div class=" form-group">
                            <label> อีเมล </label>
                            <input readonly class=" form-control" placeholder="" type="text"
                                [(ngModel)]="modelItemDetail.email" />
360 361
                        </div>
                    </div>
362 363 364 365 366 367
                </div>
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> เบอร์โทร </label>
                            <input readonly class=" form-control" placeholder="" type="text"
368
                                [(ngModel)]="modelItemDetail.eTelephone" />
369 370
                        </div>
                    </div>
371 372 373 374
                </div>
                <div class="row">
                    <div class="col-sm-12 mb-1">
                        <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
375 376
                        <input readonly class="form-control" type="text"
                            [(ngModel)]="modelItemDetail.equirments.eqName">
377
                    </div>
378 379 380 381
                </div>
                <div class="row">
                    <div class="col-sm-12 mb-1">
                        <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
382 383
                        <input readonly class="form-control" type="text"
                            [(ngModel)]="modelItemDetail.equirments.eqDesc">
384
                    </div>
385 386 387 388
                </div>
                <div class="row">
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
Your Name committed
389
                        <input readonly type="date" class="form-control" [(ngModel)]="modelItemDetail.sDate">
390
                    </div>
391 392 393 394
                </div>
                <div class="row">
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
395
                        <input readonly class="form-control" type="time" [(ngModel)]="modelItemDetail.sTime">
396 397 398
                    </div>
                    <div class="col-6 mb-1">
                        <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
399
                        <input readonly class="form-control" type="time" [(ngModel)]="modelItemDetail.eTime">
400 401 402 403 404 405
                    </div>
                </div>
                <div class=" row">
                    <div class=" col-sm-6 mb-1">
                        <label for="changequantity">จำนวน</label>
                        <input readonly id="changequantity" type="number" class="form-control form-control-sm"
406
                            [(ngModel)]="modelItemDetail.quantity" />
407 408 409 410 411 412 413 414
                    </div>
                </div>
                <div class=" row">
                    <div class=" col-md-12">
                        <div class=" form-group">
                            <label> หมายเหตุ </label>
                            <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3"
                                placeholder="......" [(ngModel)]="modelItemDetail.Remark"></textarea>
415 416
                        </div>
                    </div>
417
                </div>
418 419 420
            </div>
        </div>
    </div>
421
</ng-template>