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 class="content-body">
|
||||
<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="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
|
||||
<div class="card">
|
||||
|
|
|
|||
|
|
@ -31,6 +31,24 @@ export class BuildingComponent {
|
|||
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) {}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router';
|
|||
|
||||
import { ChartistModule } from 'ng-chartist';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { CardModule } from '../../../content/partials/general/card/card.module';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
|
|
@ -15,14 +15,18 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
|||
import { BuildingComponent } from './building/building.component';
|
||||
import { RoomComponent } from './room/room.component';
|
||||
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({
|
||||
declarations: [
|
||||
BuildingComponent,
|
||||
RoomComponent
|
||||
RoomComponent,
|
||||
AddNewBuildingRoomComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
ChartistModule,
|
||||
FormsModule,
|
||||
NgChartsModule,
|
||||
|
|
@ -30,6 +34,8 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
|||
MatchHeightModule,
|
||||
NgxDatatableModule,
|
||||
PerfectScrollbarModule,
|
||||
NgbDatepickerModule,
|
||||
ArchwizardModule,
|
||||
BreadcrumbModule,
|
||||
NgbModule,
|
||||
BlockUIModule.forRoot({
|
||||
|
|
@ -44,6 +50,10 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
|||
path: 'monitoring-room',
|
||||
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({
|
||||
selector: 'app-room',
|
||||
templateUrl: './room.component.html',
|
||||
styleUrls: ['./room.component.css']
|
||||
selector: "app-room",
|
||||
templateUrl: "./room.component.html",
|
||||
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