penambahan detail room dan penyesuaian device list
This commit is contained in:
parent
c6a51e91b1
commit
ded0ca21a1
|
|
@ -93,12 +93,12 @@
|
|||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="Position"
|
||||
name="watt"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span>Category</span>
|
||||
<span>watt</span>
|
||||
</ng-template>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
|
|
@ -108,12 +108,12 @@
|
|||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="Office"
|
||||
name="typeId"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span>Location</span>
|
||||
<span>typeId</span>
|
||||
</ng-template>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
|
|
@ -123,12 +123,12 @@
|
|||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="Age"
|
||||
name="roomBuildingId"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="40"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span>Location Room</span>
|
||||
<span>roomBuildingId</span>
|
||||
</ng-template>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
|
|
@ -138,12 +138,12 @@
|
|||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="Startdate"
|
||||
name="voltageId"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span>Duration Use</span>
|
||||
<span>voltageId</span>
|
||||
</ng-template>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="Salary"
|
||||
name="statusId"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
>
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
{{ value }}
|
||||
{{ value === 2 ? "Aktif" : "Tidak Aktif" }}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@ export class DeviceComponent implements OnInit {
|
|||
this.monitoringApiService.getDeviceData().subscribe((res) => {
|
||||
this.data = res;
|
||||
this.filteredRows = this.data.results.data;
|
||||
console.log(this.filteredRows);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,93 +3,119 @@
|
|||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="number-tabs">
|
||||
<div class="content-body">
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'numberTabs'; message: 'Loading'">
|
||||
<div class="col-6" *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'
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<form [formGroup]="userProfileForm" class="row">
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<label for="name">Building Name *</label>
|
||||
<select
|
||||
id="buildingId"
|
||||
class="form-control"
|
||||
formControlName="buildingId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<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
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
formControlName="buildName"
|
||||
/>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="email"
|
||||
>Email Address :</label
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<label for="name">Floor*</label>
|
||||
<select
|
||||
id="floorId"
|
||||
class="form-control"
|
||||
formControlName="floorId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
formControlName="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
class="form-control-label"
|
||||
for="phoneNumber"
|
||||
>Phone Number :</label
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
<input
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="name">Status*</label>
|
||||
<select
|
||||
id="statusId"
|
||||
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
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
formControlName="address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="owned"
|
||||
>Owned :</label
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
formControlName="owned"
|
||||
/>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="phone"
|
||||
>Phone :</label
|
||||
<div class="form-group col-12 mb-2 contact-repeater">
|
||||
<div class="" formArrayName="userArray">
|
||||
<div
|
||||
class=""
|
||||
*ngFor="
|
||||
let userForm of userFormGroup.controls;
|
||||
let i = index
|
||||
"
|
||||
>
|
||||
<input
|
||||
<div [formGroupName]="i" class="">
|
||||
<div class="input-group mb-1">
|
||||
<select
|
||||
id="roomId"
|
||||
class="form-control"
|
||||
type="text"
|
||||
formControlName="phone"
|
||||
/>
|
||||
formControlName="roomId"
|
||||
[ngClass]="{
|
||||
'is-invalid':
|
||||
submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
type="button"
|
||||
(click)="removePhone(i)"
|
||||
>
|
||||
<i class="feather ft-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addPhone()"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add Room
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
<button
|
||||
|
|
@ -107,608 +133,37 @@
|
|||
type="button"
|
||||
uiSref="work"
|
||||
class="btn btn-info btn-raised"
|
||||
[disabled]="numberTab.valid"
|
||||
awNextStep
|
||||
>
|
||||
Next
|
||||
Save
|
||||
<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"
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<m-card style="background: transparent !important">
|
||||
<ng-container mCardHeaderTitle>
|
||||
<!-- <h2>Profile Image</h2> -->
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body text-center">
|
||||
<img
|
||||
src="../../../assets/images/backgrounds/smart3.jpg"
|
||||
alt="Profile Image"
|
||||
class="img-fluid rounded-circle"
|
||||
style="max-width: 50%"
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -11,39 +11,13 @@ import { BlockUI, NgBlockUI } from "ng-block-ui";
|
|||
export class AddNewBuildingRoomComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
mode: string;
|
||||
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;
|
||||
userProfileForm: FormGroup;
|
||||
public userList: FormArray;
|
||||
submitted = false;
|
||||
get userFormGroup() {
|
||||
return this.userProfileForm.get('userArray') 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,
|
||||
|
|
@ -51,90 +25,40 @@ export class AddNewBuildingRoomComponent implements OnInit {
|
|||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
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.breadcrumb = {
|
||||
mainlabel: "Add building",
|
||||
links: [
|
||||
{
|
||||
name: "Add Building",
|
||||
isLink: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.userProfileForm = this.formBuilder.group({
|
||||
buildingId: ['', Validators.required],
|
||||
roomId: ['', Validators.required],
|
||||
floorId: ['', Validators.required],
|
||||
userArray: this.formBuilder.array([this.createPhone()]),
|
||||
});
|
||||
|
||||
this.repeatForm = this.formBuilder.group({
|
||||
repeatArray: this.formBuilder.array([this.createRepeat()]),
|
||||
});
|
||||
|
||||
this.repeatList = this.repeatForm.get("repeatArray") as FormArray;
|
||||
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
});
|
||||
this.userList = this.userProfileForm.get('userArray') as FormArray;
|
||||
}
|
||||
|
||||
createRepeat(): FormGroup {
|
||||
createPhone(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
roomName: ["", Validators.required],
|
||||
room: ["", Validators.required],
|
||||
floor: ["", Validators.required],
|
||||
status: ["", Validators.required],
|
||||
roomId: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
addRepeat() {
|
||||
this.repeatList.push(this.createRepeat());
|
||||
addPhone() {
|
||||
this.userList.push(this.createPhone());
|
||||
}
|
||||
|
||||
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.");
|
||||
removePhone(index) {
|
||||
this.userList.removeAt(index);
|
||||
}
|
||||
|
||||
cancel() {
|
||||
if (this.mode === "room") {
|
||||
this.router.navigate(["/monitoring/monitoring-room"]);
|
||||
} else {
|
||||
this.router.navigate(["/monitoring"]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
reloadNumberTabs() {
|
||||
this.blockUINumberTabs.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUINumberTabs.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadIconTabs() {
|
||||
this.blockUIIconTabs.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIIconTabs.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,17 +88,17 @@
|
|||
<div class="row mb-3">
|
||||
<div
|
||||
class="col-xl-6 col-md-6 col-12"
|
||||
*ngFor="let top of dataTop; let i = index"
|
||||
*ngFor="let top of data.topUse; let i = index"
|
||||
>
|
||||
<div>
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>{{ top.value[i] }}% - {{ top.label[i] }}</span
|
||||
>{{ top.value }}% - {{ top.label }}</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="top.value[i]"
|
||||
[value]="top.value"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export class BuildingComponent {
|
|||
feedbacksdonutChart: any;
|
||||
donutChart1: any;
|
||||
filteredRows: any[];
|
||||
dataTop: any[];
|
||||
dataTop: any;
|
||||
searchTerm: string = "";
|
||||
colorChart: string = "";
|
||||
|
||||
|
|
@ -55,20 +55,6 @@ export class BuildingComponent {
|
|||
console.log(res.data);
|
||||
this.data = res.data;
|
||||
this.filteredRows = res.data;
|
||||
|
||||
this.dataTop = [];
|
||||
const maxItems = 4;
|
||||
|
||||
res.data.forEach((item) => {
|
||||
for (let i = 0; i < maxItems; i++) {
|
||||
if (item.topUse.label[i] !== undefined) {
|
||||
this.dataTop.push({
|
||||
label: item.topUse.label,
|
||||
value: item.topUse.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +90,7 @@ export class BuildingComponent {
|
|||
this.router.navigate(["/monitoring/edit-new-building", row.id]);
|
||||
}
|
||||
|
||||
viewRoom(row){
|
||||
viewRoom(row) {
|
||||
console.log(row);
|
||||
this.router.navigate(["/monitoring/monitoring-room", row.id]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>detail-room works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DetailRoomComponent } from './detail-room.component';
|
||||
|
||||
describe('DetailRoomComponent', () => {
|
||||
let component: DetailRoomComponent;
|
||||
let fixture: ComponentFixture<DetailRoomComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DetailRoomComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DetailRoomComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail-room',
|
||||
templateUrl: './detail-room.component.html',
|
||||
styleUrls: ['./detail-room.component.css']
|
||||
})
|
||||
export class DetailRoomComponent {
|
||||
|
||||
}
|
||||
|
|
@ -22,13 +22,15 @@ import { NgxEchartsModule } from 'ngx-echarts';
|
|||
import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
|
||||
import { NgxMasonryModule } from 'ngx-masonry';
|
||||
import { UiSwitchModule } from 'ngx-ui-switch';
|
||||
import { DetailRoomComponent } from './detail-room/detail-room.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
BuildingComponent,
|
||||
RoomComponent,
|
||||
AddNewBuildingRoomComponent,
|
||||
DetailComponent
|
||||
DetailComponent,
|
||||
DetailRoomComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -88,6 +90,11 @@ import { UiSwitchModule } from 'ngx-ui-switch';
|
|||
component: DetailComponent,
|
||||
data: { mode: 'room' }
|
||||
},
|
||||
{
|
||||
path: 'view-detail-room/:id',
|
||||
component: DetailRoomComponent,
|
||||
data: { mode: 'room' }
|
||||
},
|
||||
])
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
type="button"
|
||||
class="btn btn-icon btn-outline-primary mr-1"
|
||||
triggers="hover:click:hover"
|
||||
ngbTooltip="Edit"
|
||||
ngbTooltip="Control"
|
||||
(click)="editRow(data)"
|
||||
>
|
||||
<i class="feather ft-edit"></i>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export class RoomComponent implements OnInit {
|
|||
);
|
||||
}
|
||||
viewRow(row) {
|
||||
this.router.navigate(["/monitoring/view-new-room", row.id]);
|
||||
this.router.navigate(["/monitoring/view-detail-room", row.id]);
|
||||
}
|
||||
|
||||
editRow(row) {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
Loading…
Reference in New Issue