Skip to content

B
BookingMyHrManagement
Commit 51383543 by DESKTOP-HF0LVOG\myhr
Options

Add model และ แก้ไขหน้าต่างการเบิกจอง

parent 0342af61
Showing with 92 additions and 43 deletions
src/app/models/items.model.ts
...@@ -26,6 +26,8 @@ interface Country { ...@@ -26,6 +26,8 @@ interface Country {
name: string; name: string;
sdate: string; sdate: string;
edate: string; edate: string;
stime: string;
etime: string;
status: string; status: string;
quantity: string; quantity: string;
} }
\ No newline at end of file
src/app/pages/admin-pending/admin-pending.component.html
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การจอง</a> <a ngbNavLink>การจอง</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row"> <div class="row text-center">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
...@@ -91,8 +91,8 @@ ...@@ -91,8 +91,8 @@
<td>{{ country.type }}</td> <td>{{ country.type }}</td>
<td>{{ country.detail }}</td> <td>{{ country.detail }}</td>
<td>{{ country.name }}</td> <td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td> <td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td> <td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td>
<td>{{ country.status }}</td> <td>{{ country.status }}</td>
<div class="d-grid gap-3 d-sm-flex justify-content-end"> <div class="d-grid gap-3 d-sm-flex justify-content-end">
<button class="btn btn-primary btn-sm align-end" <button class="btn btn-primary btn-sm align-end"
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การเบิก</a> <a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row"> <div class="row text-center">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
...@@ -140,6 +140,7 @@ ...@@ -140,6 +140,7 @@
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Start-Date</th> <th scope="col">Start-Date</th>
<th scope="col">End-Date</th> <th scope="col">End-Date</th>
<th scope="col">Quantity</th>
<th scope="col">Status</th> <th scope="col">Status</th>
</tr> </tr>
</thead> </thead>
...@@ -150,8 +151,9 @@ ...@@ -150,8 +151,9 @@
<td>{{ country.type }}</td> <td>{{ country.type }}</td>
<td>{{ country.detail }}</td> <td>{{ country.detail }}</td>
<td>{{ country.name }}</td> <td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td> <td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td> <td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td>
<td>{{ country.quantity }}</td>
<td>{{ country.status }}</td> <td>{{ country.status }}</td>
<div class="d-grid gap-3 d-sm-flex justify-content-end"> <div class="d-grid gap-3 d-sm-flex justify-content-end">
<button class="btn btn-primary btn-sm align-end" <button class="btn btn-primary btn-sm align-end"
......
src/app/pages/admin-pending/admin-pending.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
interface Country {
id?: number;
catagory: string;
type: string;
detail: string;
name: string;
sdate: string;
edate: string;
status: string;
}
@Component({ @Component({
selector: 'app-admin-pending', selector: 'app-admin-pending',
templateUrl: './admin-pending.component.html', templateUrl: './admin-pending.component.html',
...@@ -57,7 +45,10 @@ export class AdminPendingComponent implements OnInit { ...@@ -57,7 +45,10 @@ export class AdminPendingComponent implements OnInit {
name: 'a', name: 'a',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1',
}, },
{ {
catagory: 'string', catagory: 'string',
...@@ -66,7 +57,10 @@ export class AdminPendingComponent implements OnInit { ...@@ -66,7 +57,10 @@ export class AdminPendingComponent implements OnInit {
name: 'b', name: 'b',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1',
} }
]; ];
......
src/app/pages/equipment/equipment.component.html
...@@ -243,17 +243,37 @@ ...@@ -243,17 +243,37 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-5 mb-3"> <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-5 mb-3"> <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="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มใช้</label>
<input type="date" class="form-control" value="">
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</div>
</div>
</form> </form>
</div> </div>
<div class=" card-footer"> <div class=" card-footer">
...@@ -273,7 +293,7 @@ ...@@ -273,7 +293,7 @@
<div class=" card-body"> <div class=" card-body">
<form> <form>
<div class=" row"> <div class=" row">
<div class=" col-md-12"> <div class=" col-sm-12 mb-1">
<div class=" form-group"> <div class=" form-group">
<label> ชื่อผู้จอง </label> <label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text" value="" /> <input class=" form-control" placeholder="" type="text" value="" />
...@@ -281,19 +301,39 @@ ...@@ -281,19 +301,39 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-5 mb-3"> <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-5 mb-3"> <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="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่เริ่มใช้</label>
<input type="date" class="form-control" value="">
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</div>
<div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
</div>
</div>
<div class=" row"> <div class=" row">
<div class=" col-sm-6 mb-2"> <div class=" col-sm-6 mb-1">
<label for="changequantity">จำนวน</label> <label for="changequantity">จำนวน</label>
<input id="changequantity" type="number" class="form-control form-control-sm" <input id="changequantity" type="number" class="form-control form-control-sm"
[(ngModel)]="quantity" /> [(ngModel)]="quantity" />
......
src/app/pages/equipment/equipment.component.ts
...@@ -21,6 +21,7 @@ interface RoomModel{ ...@@ -21,6 +21,7 @@ interface RoomModel{
styleUrls: ['./equipment.component.scss'] styleUrls: ['./equipment.component.scss']
}) })
export class EquipmentComponent implements OnInit { export class EquipmentComponent implements OnInit {
time = {hour: 13, minute: 30};
page = 1; page = 1;
pageSize = 10; pageSize = 10;
...@@ -92,6 +93,8 @@ export class EquipmentComponent implements OnInit { ...@@ -92,6 +93,8 @@ export class EquipmentComponent implements OnInit {
name: 'a', name: 'a',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1', quantity : '1',
}, },
...@@ -103,6 +106,8 @@ export class EquipmentComponent implements OnInit { ...@@ -103,6 +106,8 @@ export class EquipmentComponent implements OnInit {
name: 'b', name: 'b',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1', quantity : '1',
} }
...@@ -136,4 +141,9 @@ export class EquipmentComponent implements OnInit { ...@@ -136,4 +141,9 @@ export class EquipmentComponent implements OnInit {
.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);
} }
}
\ No newline at end of file NgbdTimepickerBasic() {
}
}
src/app/pages/lend-page/lend-page.component.ts
...@@ -16,6 +16,8 @@ export class LendPageComponent implements OnInit { ...@@ -16,6 +16,8 @@ export class LendPageComponent implements OnInit {
name: 'a', name: 'a',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1', quantity : '1',
}, },
...@@ -27,6 +29,8 @@ export class LendPageComponent implements OnInit { ...@@ -27,6 +29,8 @@ export class LendPageComponent implements OnInit {
name: 'b', name: 'b',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1', quantity : '1',
} }
......
src/app/pages/pending/pending.component.html
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การจอง</a> <a ngbNavLink>การจอง</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row"> <div class="row text-center">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
...@@ -92,8 +92,8 @@ ...@@ -92,8 +92,8 @@
<td>{{ country.type }}</td> <td>{{ country.type }}</td>
<td>{{ country.detail }}</td> <td>{{ country.detail }}</td>
<td>{{ country.name }}</td> <td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td> <td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td> <td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td>
<td>{{ country.status }}</td> <td>{{ country.status }}</td>
</tr> </tr>
</tbody> </tbody>
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink>การเบิก</a> <a ngbNavLink>การเบิก</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row"> <div class="row text-center">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
...@@ -135,6 +135,7 @@ ...@@ -135,6 +135,7 @@
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Start-Date</th> <th scope="col">Start-Date</th>
<th scope="col">End-Date</th> <th scope="col">End-Date</th>
<th scope="col">Quantity</th>
<th scope="col">Status</th> <th scope="col">Status</th>
</tr> </tr>
</thead> </thead>
...@@ -145,8 +146,9 @@ ...@@ -145,8 +146,9 @@
<td>{{ country.type }}</td> <td>{{ country.type }}</td>
<td>{{ country.detail }}</td> <td>{{ country.detail }}</td>
<td>{{ country.name }}</td> <td>{{ country.name }}</td>
<td>{{ country.sdate | date:'dd-MM-yyyy' }}</td> <td>{{ country.sdate | date:'dd-MM-yyyy' }} {{ country.stime }}</td>
<td>{{ country.edate | date:'dd-MM-yyyy' }}</td> <td>{{ country.edate | date:'dd-MM-yyyy' }} {{ country.etime }}</td>
<td>{{ country.quantity }}</td>
<td>{{ country.status }}</td> <td>{{ country.status }}</td>
</tr> </tr>
</tbody> </tbody>
......
src/app/pages/pending/pending.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
interface Country {
id?: number;
catagory: string;
type: string;
detail: string;
name: string;
sdate: string;
edate: string;
status: string;
}
@Component({ @Component({
selector: 'app-pending', selector: 'app-pending',
templateUrl: './pending.component.html', templateUrl: './pending.component.html',
...@@ -55,7 +44,10 @@ export class PendingComponent implements OnInit { ...@@ -55,7 +44,10 @@ export class PendingComponent implements OnInit {
name: 'a', name: 'a',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1',
}, },
{ {
catagory: 'string', catagory: 'string',
...@@ -64,7 +56,10 @@ export class PendingComponent implements OnInit { ...@@ -64,7 +56,10 @@ export class PendingComponent implements OnInit {
name: 'b', name: 'b',
sdate: '2021-11-25', sdate: '2021-11-25',
edate: '2021-11-25', edate: '2021-11-25',
stime: '12.00',
etime: '12.00',
status: 'waiting', status: 'waiting',
quantity : '1',
} }
]; ];
collectionSize = this.countries.length; collectionSize = this.countries.length;
......
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