penambahan page monitoring building dan monitoring room
This commit is contained in:
parent
970c903ff4
commit
dc987d78c9
|
|
@ -0,0 +1,329 @@
|
||||||
|
.tab-content .tab-pane {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control.is-invalid {
|
||||||
|
border-color: #CACFE7;
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .block-ui-wrapper {
|
||||||
|
background: rgba(255, 249, 249, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .wizard-steps.vertical {
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical .large-filled-symbols {
|
||||||
|
width: 10;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.wizard-steps.vertical {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.vertical .large-filled-symbols {
|
||||||
|
width: 20% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||||
|
color: #999;
|
||||||
|
font-size: 19px;
|
||||||
|
text-align: center;
|
||||||
|
border: 5px solid #f4f5fa;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||||
|
color: #e6e6e6;
|
||||||
|
border: 3px solid #e6e6e6 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing1:after {
|
||||||
|
color: #666EE8;
|
||||||
|
border: 5px solid #666EE8 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:host ::ng-deep.horizontal.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||||
|
color: #fff;
|
||||||
|
border: 5px solid #666EE8;
|
||||||
|
background-color: #666EE8;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 5px !important;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
top: -25px;
|
||||||
|
left: calc(50% + 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done:before {
|
||||||
|
background-color: #666EE8;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 5px !important;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
top: -25px;
|
||||||
|
left: calc(50% + 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep :host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||||
|
background-color: #f4f5fa;
|
||||||
|
height: 10px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||||
|
background-color: #666EE8;
|
||||||
|
height: 5px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||||
|
color: #999;
|
||||||
|
font-size: 18px;
|
||||||
|
border: 5px solid #f4f5fa;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||||
|
color: #666EE8;
|
||||||
|
border: 5px solid #666EE8 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||||
|
color: #666EE8;
|
||||||
|
border: 5px solid #666EE8;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||||
|
color: #fff;
|
||||||
|
border: 5px solid #666EE8;
|
||||||
|
background-color: #666EE8;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||||
|
background-color: #f4f5fa;
|
||||||
|
height: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||||
|
background-color: #666EE8;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):after {
|
||||||
|
background-color: #666EE8;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -25px;
|
||||||
|
top: 50px;
|
||||||
|
height: 10px;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current:after {
|
||||||
|
color: #666EE8;
|
||||||
|
border: 1px solid #f4f5fa;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||||
|
color: #e6e6e6;
|
||||||
|
border: 1px solid #e6e6e6 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done.step:after {
|
||||||
|
background-color: #666EE8;
|
||||||
|
border-color: #666EE8;
|
||||||
|
color: #FFF;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal ul.steps-indicator li .step-indicator {
|
||||||
|
position: relative;
|
||||||
|
margin: 0px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||||
|
background-color: #666EE8;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||||
|
color: unset !important;
|
||||||
|
background-color: unset !important;
|
||||||
|
border-color: #d3d9df !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||||
|
background-color: #e2e6ea !important;
|
||||||
|
border-color: #dae0e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .btn-light {
|
||||||
|
color: unset !important;
|
||||||
|
background-color: unset !important;
|
||||||
|
border-color: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .bg-primary {
|
||||||
|
background-color: #007bff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .text-white {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .custom-day {
|
||||||
|
text-align: center;
|
||||||
|
padding: .185rem .25rem;
|
||||||
|
display: inline-block;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .custom-day:active {
|
||||||
|
color: #6d7183 !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border-block-color: rgb(2, 117, 216) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .hidden {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-weekday {
|
||||||
|
color: #17a2b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-week-number,
|
||||||
|
.ngb-dp-weekday {
|
||||||
|
line-height: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-datepicker-month-view {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngb-dp-header {
|
||||||
|
background-color: var(--light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngb-dp-weekdays {
|
||||||
|
background-color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngb-dp-month-name {
|
||||||
|
background-color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-day {
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-month {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-light:hover {
|
||||||
|
color: #212529 !important;
|
||||||
|
background-color: #e2e6ea !important;
|
||||||
|
border-color: #dae0e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-datepicker-month-view {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-header {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: .25rem .25rem 0 0;
|
||||||
|
padding-top: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ngb-dp-day,
|
||||||
|
.ngb-dp-week-number,
|
||||||
|
.ngb-dp-weekday {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-day {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.185rem 0.25rem;
|
||||||
|
display: inline-block;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-day.focused {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-day.range,
|
||||||
|
.custom-day:hover {
|
||||||
|
background-color: rgb(2, 117, 216);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-day.faded {
|
||||||
|
background-color: rgba(2, 117, 216, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .block-ui-wrapper {
|
||||||
|
background: rgba(255, 249, 249, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||||
|
color: #666EE8;
|
||||||
|
border: 5px solid #666EE8;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,720 @@
|
||||||
|
<div class="app-content content">
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<div class="content-header row mb-1">
|
||||||
|
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="number-tabs">
|
||||||
|
<section id="basic-form-layouts">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12" *blockUI="'numberTabs'; message: 'Loading'">
|
||||||
|
<m-card>
|
||||||
|
<ng-container mCardHeaderTitle>
|
||||||
|
<h2>Add New</h2>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container mCardBody>
|
||||||
|
<div class="card-block">
|
||||||
|
<aw-wizard #wizard navBarLayout="large-filled-symbols">
|
||||||
|
<aw-wizard-step
|
||||||
|
[stepTitle]="'General Information'"
|
||||||
|
[navigationSymbol]="{
|
||||||
|
symbol: '',
|
||||||
|
fontFamily: 'FontAwesome'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<form [formGroup]="numberTab">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label" for="buildName"
|
||||||
|
>Building Name :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="buildName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label" for="email"
|
||||||
|
>Email Address :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label
|
||||||
|
class="form-control-label"
|
||||||
|
for="phoneNumber"
|
||||||
|
>Phone Number :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="phoneNumber"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label" for="address"
|
||||||
|
>Address :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="address"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label" for="owned"
|
||||||
|
>Owned :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="owned"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label" for="phone"
|
||||||
|
>Phone :</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
formControlName="phone"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group text-center">
|
||||||
|
<button
|
||||||
|
uiSref="personal"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-danger mr-1"
|
||||||
|
(click)="cancel()"
|
||||||
|
>
|
||||||
|
<span style="margin-right: 10px">
|
||||||
|
<i class="feather ft-x"></i>
|
||||||
|
</span>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
uiSref="work"
|
||||||
|
class="btn btn-info btn-raised"
|
||||||
|
[disabled]="numberTab.valid"
|
||||||
|
awNextStep
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<span style="margin-left: 10px">
|
||||||
|
<i class="feather ft-chevron-right"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</aw-wizard-step>
|
||||||
|
|
||||||
|
<aw-wizard-step
|
||||||
|
[stepTitle]="'Room'"
|
||||||
|
[navigationSymbol]="{
|
||||||
|
symbol: '',
|
||||||
|
fontFamily: 'FontAwesome'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="form-group overflow-hidden">
|
||||||
|
<div class="col-12">
|
||||||
|
<button
|
||||||
|
data-repeater-create
|
||||||
|
class="btn btn-primary"
|
||||||
|
(click)="addRepeat()"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="repeatForm">
|
||||||
|
<div class="card-body" formArrayName="repeatArray">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*ngFor="
|
||||||
|
let repeatForm of repeatFormGroup.controls;
|
||||||
|
let i = index
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="repeater-default">
|
||||||
|
<div [formGroupName]="i" class="row">
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="roomName">Room</label>
|
||||||
|
<br />
|
||||||
|
<div class="input-group">
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="roomName"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="room">Room Name</label>
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
formControlName="room"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="room"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="floor">Floor</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="floor"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="status"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group col-sm-12 col-md-2 text-center mt-2"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-danger"
|
||||||
|
(click)="removeRepeat(i)"
|
||||||
|
>
|
||||||
|
<i class="feather ft-x"></i> Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-center space-20">
|
||||||
|
<button
|
||||||
|
uiSref="personal"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-secondary mr-1"
|
||||||
|
awPreviousStep
|
||||||
|
>
|
||||||
|
<span style="margin-right: 10px">
|
||||||
|
<i class="feather ft-chevron-left"></i>
|
||||||
|
</span>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
uiSref="address"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-info"
|
||||||
|
[disabled]="numberTab.valid"
|
||||||
|
awNextStep
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<span style="margin-left: 10px">
|
||||||
|
<i class="feather ft-chevron-right"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</aw-wizard-step>
|
||||||
|
|
||||||
|
<aw-wizard-step
|
||||||
|
[stepTitle]="'Device'"
|
||||||
|
[navigationSymbol]="{
|
||||||
|
symbol: '',
|
||||||
|
fontFamily: 'FontAwesome'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="form-group overflow-hidden">
|
||||||
|
<div class="col-12">
|
||||||
|
<button
|
||||||
|
data-repeater-create
|
||||||
|
class="btn btn-primary"
|
||||||
|
(click)="addRepeat()"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="repeatForm">
|
||||||
|
<div class="card-body" formArrayName="repeatArray">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*ngFor="
|
||||||
|
let repeatForm of repeatFormGroup.controls;
|
||||||
|
let i = index
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="repeater-default">
|
||||||
|
<div [formGroupName]="i" class="row">
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="roomName">Room</label>
|
||||||
|
<br />
|
||||||
|
<div class="input-group">
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="roomName"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="room">Room Name</label>
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
formControlName="room"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="room"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="floor">Floor</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="floor"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="status"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group col-sm-12 col-md-2 text-center mt-2"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-danger"
|
||||||
|
(click)="removeRepeat(i)"
|
||||||
|
>
|
||||||
|
<i class="feather ft-x"></i> Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-center space-20">
|
||||||
|
<button
|
||||||
|
uiSref="personal"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-secondary mr-1"
|
||||||
|
awPreviousStep
|
||||||
|
>
|
||||||
|
<span style="margin-right: 10px">
|
||||||
|
<i class="feather ft-chevron-left"></i>
|
||||||
|
</span>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
uiSref="address"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-info"
|
||||||
|
[disabled]="numberTab.valid"
|
||||||
|
awNextStep
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<span style="margin-left: 10px">
|
||||||
|
<i class="feather ft-chevron-right"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</aw-wizard-step>
|
||||||
|
|
||||||
|
<aw-wizard-step
|
||||||
|
[stepTitle]="'Estimasi Energy'"
|
||||||
|
[navigationSymbol]="{
|
||||||
|
symbol: '',
|
||||||
|
fontFamily: 'FontAwesome'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="form-group overflow-hidden">
|
||||||
|
<div class="col-12">
|
||||||
|
<button
|
||||||
|
data-repeater-create
|
||||||
|
class="btn btn-primary"
|
||||||
|
(click)="addRepeat()"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="repeatForm">
|
||||||
|
<div class="card-body" formArrayName="repeatArray">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*ngFor="
|
||||||
|
let repeatForm of repeatFormGroup.controls;
|
||||||
|
let i = index
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="repeater-default">
|
||||||
|
<div [formGroupName]="i" class="row">
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="roomName">Room</label>
|
||||||
|
<br />
|
||||||
|
<div class="input-group">
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="roomName"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="room">Room Name</label>
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
formControlName="room"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="room"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="floor">Floor</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="floor"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="status"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group col-sm-12 col-md-2 text-center mt-2"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-danger"
|
||||||
|
(click)="removeRepeat(i)"
|
||||||
|
>
|
||||||
|
<i class="feather ft-x"></i> Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-center space-20">
|
||||||
|
<button
|
||||||
|
uiSref="personal"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-secondary mr-1"
|
||||||
|
awPreviousStep
|
||||||
|
>
|
||||||
|
<span style="margin-right: 10px">
|
||||||
|
<i class="feather ft-chevron-left"></i>
|
||||||
|
</span>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
uiSref="address"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-info"
|
||||||
|
[disabled]="numberTab.valid"
|
||||||
|
awNextStep
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<span style="margin-left: 10px">
|
||||||
|
<i class="feather ft-chevron-right"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</aw-wizard-step>
|
||||||
|
|
||||||
|
<aw-wizard-step
|
||||||
|
[stepTitle]="'User Access'"
|
||||||
|
[navigationSymbol]="{
|
||||||
|
symbol: '',
|
||||||
|
fontFamily: 'FontAwesome'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="form-group overflow-hidden">
|
||||||
|
<div class="col-12">
|
||||||
|
<button
|
||||||
|
data-repeater-create
|
||||||
|
class="btn btn-primary"
|
||||||
|
(click)="addRepeat()"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="repeatForm">
|
||||||
|
<div class="card-body" formArrayName="repeatArray">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*ngFor="
|
||||||
|
let repeatForm of repeatFormGroup.controls;
|
||||||
|
let i = index
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="repeater-default">
|
||||||
|
<div [formGroupName]="i" class="row">
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="roomName">Room</label>
|
||||||
|
<br />
|
||||||
|
<div class="input-group">
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="roomName"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-3"
|
||||||
|
>
|
||||||
|
<label for="room">Room Name</label>
|
||||||
|
<br />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
formControlName="room"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="room"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="floor">Floor</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="floor"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group mb-1 col-sm-12 col-md-2"
|
||||||
|
>
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<br />
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
formControlName="status"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
*ngFor="let interest of countries"
|
||||||
|
[value]="interest"
|
||||||
|
>
|
||||||
|
{{ interest }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form-group col-sm-12 col-md-2 text-center mt-2"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-danger"
|
||||||
|
(click)="removeRepeat(i)"
|
||||||
|
>
|
||||||
|
<i class="feather ft-x"></i> Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-center space-20">
|
||||||
|
<button
|
||||||
|
uiSref="personal"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-secondary mr-1"
|
||||||
|
awPreviousStep
|
||||||
|
(click)="previousFourthStep()"
|
||||||
|
>
|
||||||
|
<span style="margin-right: 10px">
|
||||||
|
<i class="feather ft-chevron-left"></i>
|
||||||
|
</span>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
uiSref="address"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-raised btn-info"
|
||||||
|
[disabled]="!numberTab.valid"
|
||||||
|
(click)="submit()"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</aw-wizard-step>
|
||||||
|
</aw-wizard>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</m-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AddNewBuildingRoomComponent } from './add-new-building-room.component';
|
||||||
|
|
||||||
|
describe('AddNewBuildingRoomComponent', () => {
|
||||||
|
let component: AddNewBuildingRoomComponent;
|
||||||
|
let fixture: ComponentFixture<AddNewBuildingRoomComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ AddNewBuildingRoomComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AddNewBuildingRoomComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
|
||||||
|
import { Router } from "@angular/router";
|
||||||
|
import { BlockUI, NgBlockUI } from "ng-block-ui";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-add-new-building-room",
|
||||||
|
templateUrl: "./add-new-building-room.component.html",
|
||||||
|
styleUrls: ["./add-new-building-room.component.css"],
|
||||||
|
})
|
||||||
|
export class AddNewBuildingRoomComponent implements OnInit {
|
||||||
|
public breadcrumb: any;
|
||||||
|
numberTab: FormGroup;
|
||||||
|
stepOneForm: FormGroup;
|
||||||
|
stepTwoForm: FormGroup;
|
||||||
|
stepThreeForm: FormGroup;
|
||||||
|
stepFourForm: FormGroup;
|
||||||
|
isStepFourReached = false;
|
||||||
|
|
||||||
|
repeatForm: FormGroup;
|
||||||
|
public repeatList: FormArray;
|
||||||
|
|
||||||
|
get repeatFormGroup() {
|
||||||
|
return this.repeatForm.get('repeatArray') as FormArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
@BlockUI('numberTabs') blockUINumberTabs: NgBlockUI;
|
||||||
|
@BlockUI('iconTabs') blockUIIconTabs: NgBlockUI;
|
||||||
|
|
||||||
|
countries = ["Amsterdam", "Berlin", "Frankfurt"];
|
||||||
|
eventType = ["Banquet", "Fund Raiser", "Dinner Party", "Wedding"];
|
||||||
|
eventLocation = ["Amsterdam", "Berlin", "Frankfurt"];
|
||||||
|
eventStatus = ["Planning", "In Progress", "Finished"];
|
||||||
|
requirements1 = [
|
||||||
|
{ id: 1, name: "Staffing" },
|
||||||
|
{ id: 2, name: "Catering" },
|
||||||
|
];
|
||||||
|
agendaItems1 = [
|
||||||
|
{ id: 1, name: "1st item", idName: "item1" },
|
||||||
|
{ id: 2, name: "2st item", idName: "item2" },
|
||||||
|
{ id: 3, name: "3st item", idName: "item3" },
|
||||||
|
{ id: 4, name: "4st item", idName: "item4" },
|
||||||
|
{ id: 5, name: "5st item", idName: "item5" },
|
||||||
|
];
|
||||||
|
|
||||||
|
constructor(private formBuilder: FormBuilder, private router: Router,) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.breadcrumb = {
|
||||||
|
mainlabel: "Device",
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
isLink: false,
|
||||||
|
link: "/dashboard/sales",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Device",
|
||||||
|
isLink: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.numberTab = this.formBuilder.group({
|
||||||
|
buildName: ["", Validators.required],
|
||||||
|
phone: ["", Validators.required],
|
||||||
|
phoneNumber: ["", [Validators.required]],
|
||||||
|
email: ["", [Validators.required, Validators.email]],
|
||||||
|
address: ["", [Validators.required]],
|
||||||
|
owned: ["", [Validators.required]],
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
this.repeatForm = this.formBuilder.group({
|
||||||
|
repeatArray: this.formBuilder.array([this.createRepeat()])
|
||||||
|
});
|
||||||
|
|
||||||
|
this.repeatList = this.repeatForm.get('repeatArray') as FormArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
createRepeat(): FormGroup {
|
||||||
|
return this.formBuilder.group({
|
||||||
|
roomName: ['', Validators.required],
|
||||||
|
room: ['', Validators.required],
|
||||||
|
floor: ['', Validators.required],
|
||||||
|
status: ['', Validators.required],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addRepeat() {
|
||||||
|
this.repeatList.push(this.createRepeat());
|
||||||
|
}
|
||||||
|
|
||||||
|
removeRepeat(index) {
|
||||||
|
this.repeatList.removeAt(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
getRepeatFormGroup(index): FormGroup {
|
||||||
|
const formGroup = this.repeatList.controls[index] as FormGroup;
|
||||||
|
return formGroup;
|
||||||
|
}
|
||||||
|
|
||||||
|
public previousFourthStep() {
|
||||||
|
this.isStepFourReached = true;
|
||||||
|
}
|
||||||
|
get f() {
|
||||||
|
return this.stepOneForm.controls;
|
||||||
|
}
|
||||||
|
get i() {
|
||||||
|
return this.stepTwoForm.controls;
|
||||||
|
}
|
||||||
|
get j() {
|
||||||
|
return this.stepThreeForm.controls;
|
||||||
|
}
|
||||||
|
get k() {
|
||||||
|
return this.stepFourForm.controls;
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
window.alert('Form submitted.');
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.router.navigate(["/monitoring"]);
|
||||||
|
}
|
||||||
|
|
||||||
|
reloadNumberTabs() {
|
||||||
|
this.blockUINumberTabs.start('Loading..');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.blockUINumberTabs.stop();
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
|
||||||
|
reloadIconTabs() {
|
||||||
|
this.blockUIIconTabs.start('Loading..');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.blockUIIconTabs.stop();
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,23 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<section id="social-cards">
|
<section id="social-cards">
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Search..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-right">
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
[routerLink]="['/monitoring/add-new-room']"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add new building
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row mt-2">
|
<div class="row mt-2">
|
||||||
<div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
|
<div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,24 @@ export class BuildingComponent {
|
||||||
labels: [],
|
labels: [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
build_name: "PT Ikea",
|
||||||
|
total: "342",
|
||||||
|
donut: {
|
||||||
|
series: [50, 50],
|
||||||
|
labels: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
build_name: "PT Tokopedia",
|
||||||
|
total: "342",
|
||||||
|
donut: {
|
||||||
|
series: [90, 10],
|
||||||
|
labels: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
constructor(private chartApiservice: ChartApiService) {}
|
constructor(private chartApiservice: ChartApiService) {}
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { ChartistModule } from 'ng-chartist';
|
import { ChartistModule } from 'ng-chartist';
|
||||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||||
import { CardModule } from '../../../content/partials/general/card/card.module';
|
import { CardModule } from '../../../content/partials/general/card/card.module';
|
||||||
import { NgChartsModule } from 'ng2-charts';
|
import { NgChartsModule } from 'ng2-charts';
|
||||||
import { BlockUIModule } from 'ng-block-ui';
|
import { BlockUIModule } from 'ng-block-ui';
|
||||||
|
|
@ -15,14 +15,18 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||||
import { BuildingComponent } from './building/building.component';
|
import { BuildingComponent } from './building/building.component';
|
||||||
import { RoomComponent } from './room/room.component';
|
import { RoomComponent } from './room/room.component';
|
||||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||||
|
import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
|
||||||
|
import { ArchwizardModule } from 'angular-archwizard';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
BuildingComponent,
|
BuildingComponent,
|
||||||
RoomComponent
|
RoomComponent,
|
||||||
|
AddNewBuildingRoomComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
ChartistModule,
|
ChartistModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
NgChartsModule,
|
NgChartsModule,
|
||||||
|
|
@ -30,6 +34,8 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||||
MatchHeightModule,
|
MatchHeightModule,
|
||||||
NgxDatatableModule,
|
NgxDatatableModule,
|
||||||
PerfectScrollbarModule,
|
PerfectScrollbarModule,
|
||||||
|
NgbDatepickerModule,
|
||||||
|
ArchwizardModule,
|
||||||
BreadcrumbModule,
|
BreadcrumbModule,
|
||||||
NgbModule,
|
NgbModule,
|
||||||
BlockUIModule.forRoot({
|
BlockUIModule.forRoot({
|
||||||
|
|
@ -44,6 +50,10 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||||
path: 'monitoring-room',
|
path: 'monitoring-room',
|
||||||
component: RoomComponent
|
component: RoomComponent
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'add-new-room',
|
||||||
|
component: AddNewBuildingRoomComponent
|
||||||
|
},
|
||||||
])
|
])
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: medium;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #6B6F82;
|
||||||
|
}
|
||||||
|
:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
|
||||||
|
position: relative;
|
||||||
|
height: 50px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-right:before {
|
||||||
|
font-family: 'icofont';
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-skip:before {
|
||||||
|
font-family: 'icofont';
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-left:before {
|
||||||
|
font-family: 'icofont';
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-left:before {
|
||||||
|
content: "\2039";
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-prev:before {
|
||||||
|
content: "\00AB";
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-right:before {
|
||||||
|
content: "\203A";
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-icon-skip:before {
|
||||||
|
content: "\00BB";
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||||
|
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||||
|
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #d4d2e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||||
|
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #d4d2e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #d4d2e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #d4d2e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||||
|
background-color: #d4d2e7;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||||
|
height: 32px;
|
||||||
|
min-width: 34px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 3px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: 3px;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: bottom;
|
||||||
|
color: #7c8091;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 9px;
|
||||||
|
padding: 0px 08px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||||
|
font-size: 0px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||||
|
font-size: 0px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||||
|
font-size: 0px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||||
|
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||||
|
font-size: 0px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0px 09px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||||
|
background-color: #545454;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||||
|
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||||
|
background-color: #545454;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||||
|
background: #727e8e;
|
||||||
|
color: #ededed;
|
||||||
|
margin-top: -1px;
|
||||||
|
overflow: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||||
|
font-weight: bold;
|
||||||
|
height: unset !important;
|
||||||
|
overflow: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||||
|
flex: 0 0 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .block-ui-wrapper {
|
||||||
|
background: rgba(255, 249, 249, 0.5) !important;
|
||||||
|
}
|
||||||
|
:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
|
||||||
|
flex: 0 0 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .ngx-datatable {
|
||||||
|
display: -webkit-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1 +1,149 @@
|
||||||
<p>room works!</p>
|
<div class="app-content content">
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<div class="content-header row mb-1">
|
||||||
|
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<section id="configuration">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*blockUI="'zeroConfiguration'; message: 'Loading'"
|
||||||
|
>
|
||||||
|
<m-card>
|
||||||
|
<ng-container mCardHeaderTitle> Room Table </ng-container>
|
||||||
|
<ng-container mCardBody>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Search..."
|
||||||
|
[(ngModel)]="searchTerm"
|
||||||
|
(input)="filterRows()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-right">
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
[routerLink]="['/monitoring/add-new-room']"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add new room
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-dashboard">
|
||||||
|
<ngx-datatable
|
||||||
|
class="bootstrap table-bordered"
|
||||||
|
[limit]="10"
|
||||||
|
[rows]="filteredRows"
|
||||||
|
[columnMode]="'force'"
|
||||||
|
[headerHeight]="50"
|
||||||
|
[footerHeight]="50"
|
||||||
|
[rowHeight]="50"
|
||||||
|
fxFlex="auto"
|
||||||
|
[scrollbarH]="true"
|
||||||
|
>
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="product"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
|
<ng-template ngx-datatable-header-template>
|
||||||
|
<span>Room Name</span>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template
|
||||||
|
let-value="value"
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="buttonname"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
|
<ng-template ngx-datatable-header-template>
|
||||||
|
<span>Category</span>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-outline-primary round"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="value"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
|
<ng-template ngx-datatable-header-template>
|
||||||
|
<span>Popularity</span>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
<ngb-progressbar
|
||||||
|
height="7px"
|
||||||
|
type="danger"
|
||||||
|
[value]="value"
|
||||||
|
>
|
||||||
|
</ngb-progressbar>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="amount"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
|
<ng-template ngx-datatable-header-template>
|
||||||
|
<span>Amount</span>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{value}}
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="Actions"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="150"
|
||||||
|
>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-rowIndex="rowIndex"
|
||||||
|
let-row="row"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-info mr-1"
|
||||||
|
(click)="viewRow(row)"
|
||||||
|
>
|
||||||
|
<i class="ficon feather ft-eye"></i>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
</ngx-datatable>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</m-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,203 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-room',
|
selector: "app-room",
|
||||||
templateUrl: './room.component.html',
|
templateUrl: "./room.component.html",
|
||||||
styleUrls: ['./room.component.css']
|
styleUrls: ["./room.component.css"],
|
||||||
})
|
})
|
||||||
export class RoomComponent {
|
export class RoomComponent implements OnInit {
|
||||||
|
public breadcrumb: any;
|
||||||
|
// filteredRows: any[];
|
||||||
|
searchTerm: string = "";
|
||||||
|
firstRow = [
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-4.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-5.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-6.png",
|
||||||
|
];
|
||||||
|
secondRow = [
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-7.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-8.png",
|
||||||
|
];
|
||||||
|
thirdRow = [
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-1.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-2.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-3.png",
|
||||||
|
];
|
||||||
|
fourthRow = [
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-11.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-12.png",
|
||||||
|
];
|
||||||
|
fifthRow = [
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-6.png",
|
||||||
|
"../../../assets/images/portrait/small/avatar-s-4.png",
|
||||||
|
];
|
||||||
|
filteredRows = [
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 100,
|
||||||
|
product: "iPhone X",
|
||||||
|
image: this.firstRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1200.00",
|
||||||
|
bagde: "+8 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 75,
|
||||||
|
product: "iPad",
|
||||||
|
image: this.secondRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1190.00",
|
||||||
|
bagde: "+5 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 65,
|
||||||
|
product: "OnePlus",
|
||||||
|
image: this.thirdRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 999.00",
|
||||||
|
bagde: "+3 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 55,
|
||||||
|
product: "ZenPad",
|
||||||
|
image: this.fourthRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1150.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 45,
|
||||||
|
product: "Pixel 2",
|
||||||
|
image: this.fifthRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1180.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 100,
|
||||||
|
product: "iPhone X",
|
||||||
|
image: this.firstRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1200.00",
|
||||||
|
bagde: "+8 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 75,
|
||||||
|
product: "iPad",
|
||||||
|
image: this.secondRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1190.00",
|
||||||
|
bagde: "+5 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 65,
|
||||||
|
product: "OnePlus",
|
||||||
|
image: this.thirdRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 999.00",
|
||||||
|
bagde: "+3 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 55,
|
||||||
|
product: "ZenPad",
|
||||||
|
image: this.fourthRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1150.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 45,
|
||||||
|
product: "Pixel 2",
|
||||||
|
image: this.fifthRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1180.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 100,
|
||||||
|
product: "iPhone X",
|
||||||
|
image: this.firstRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1200.00",
|
||||||
|
bagde: "+8 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 75,
|
||||||
|
product: "iPad",
|
||||||
|
image: this.secondRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1190.00",
|
||||||
|
bagde: "+5 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 65,
|
||||||
|
product: "OnePlus",
|
||||||
|
image: this.thirdRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 999.00",
|
||||||
|
bagde: "+3 more",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
value: 55,
|
||||||
|
product: "ZenPad",
|
||||||
|
image: this.fourthRow,
|
||||||
|
buttonname: "Teblet",
|
||||||
|
amount: "$ 1150.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
value: 45,
|
||||||
|
product: "Pixel 2",
|
||||||
|
image: this.fifthRow,
|
||||||
|
buttonname: "Mobile",
|
||||||
|
amount: "$ 1180.00",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.breadcrumb = {
|
||||||
|
mainlabel: "Device",
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
isLink: false,
|
||||||
|
link: "/dashboard/sales",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Device",
|
||||||
|
isLink: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
filterRows() {
|
||||||
|
if (!this.searchTerm) {
|
||||||
|
this.filteredRows = [...this.filteredRows];
|
||||||
|
} else {
|
||||||
|
this.filteredRows = this.filteredRows.filter((row) =>
|
||||||
|
this.rowContainsSearchTerm(row)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rowContainsSearchTerm(row: any): boolean {
|
||||||
|
const searchTermLC = this.searchTerm.toLowerCase();
|
||||||
|
return Object.values(row).some(
|
||||||
|
(value) =>
|
||||||
|
value !== null && value.toString().toLowerCase().includes(searchTermLC)
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue