perbaikan detail building
This commit is contained in:
parent
23154e6862
commit
b968e8e434
|
|
@ -1,329 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,176 +0,0 @@
|
||||||
<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="basic-form-layouts">
|
|
||||||
<div class="row">
|
|
||||||
<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">
|
|
||||||
<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*</label>
|
|
||||||
<select
|
|
||||||
id="buildingId"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="buildingId"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.interestedIn.errors
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
*ngFor="let list of listBuildingMaster"
|
|
||||||
[value]="list.id"
|
|
||||||
>
|
|
||||||
{{ list.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group col-md-6 mb-2">
|
|
||||||
<label for="statusId">Status*</label>
|
|
||||||
<select
|
|
||||||
id="statusId"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="statusId"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.interestedIn.errors
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
*ngFor="let list of dataMasterstatus"
|
|
||||||
[value]="list.id"
|
|
||||||
>
|
|
||||||
{{ list.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="form-group col-12 mb-2">
|
|
||||||
<label for="name">Status*</label>
|
|
||||||
<select
|
|
||||||
id="statusId"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="statusId"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid': submitted && f.interestedIn.errors
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
*ngFor="let list of dataMasterstatus"
|
|
||||||
[value]="list.id"
|
|
||||||
>
|
|
||||||
{{ list.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div> -->
|
|
||||||
<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
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div [formGroupName]="i" class="">
|
|
||||||
<div class="input-group mb-1">
|
|
||||||
<select
|
|
||||||
id="roomId"
|
|
||||||
class="form-control"
|
|
||||||
formControlName="roomId"
|
|
||||||
[ngClass]="{
|
|
||||||
'is-invalid':
|
|
||||||
submitted && f.interestedIn.errors
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
*ngFor="let list of listRoomMaster"
|
|
||||||
[value]="list.id"
|
|
||||||
>
|
|
||||||
{{ list.name }}
|
|
||||||
</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
|
|
||||||
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"
|
|
||||||
(click)="save()"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
<span style="margin-left: 10px">
|
|
||||||
<!-- <i class="feather ft-chevron-right"></i> -->
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</m-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import { Component, OnInit } from "@angular/core";
|
|
||||||
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
|
|
||||||
import { ActivatedRoute, Router } from "@angular/router";
|
|
||||||
import { BlockUI, NgBlockUI } from "ng-block-ui";
|
|
||||||
import { BuildingService } from "../../service/monitoring-api.service";
|
|
||||||
|
|
||||||
@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;
|
|
||||||
dataMasterstatus: any;
|
|
||||||
listRoomMaster: any;
|
|
||||||
listBuildingMaster: any;
|
|
||||||
mode: string;
|
|
||||||
userProfileForm: FormGroup;
|
|
||||||
public userList: FormArray;
|
|
||||||
submitted = false;
|
|
||||||
get userFormGroup() {
|
|
||||||
return this.userProfileForm.get('userArray') as FormArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private formBuilder: FormBuilder,
|
|
||||||
private router: Router,
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private monitoringApiService: BuildingService,
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.breadcrumb = {
|
|
||||||
mainlabel: "Add building",
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
name: "Add Building",
|
|
||||||
isLink: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
this.userProfileForm = this.formBuilder.group({
|
|
||||||
buildingId: ['', Validators.required],
|
|
||||||
roomId: [''],
|
|
||||||
statusId: ['', Validators.required],
|
|
||||||
userArray: this.formBuilder.array([this.createRoom()]),
|
|
||||||
});
|
|
||||||
|
|
||||||
this.userList = this.userProfileForm.get('userArray') as FormArray;
|
|
||||||
this.listMaster();
|
|
||||||
this.listRoom();
|
|
||||||
this.listBuilding();
|
|
||||||
}
|
|
||||||
|
|
||||||
createRoom(): FormGroup {
|
|
||||||
return this.formBuilder.group({
|
|
||||||
roomId: ['', Validators.required]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
listMaster() {
|
|
||||||
this.monitoringApiService.getMasterData().subscribe((res) => {
|
|
||||||
this.dataMasterstatus = res.results.data.find(
|
|
||||||
(item) => item.name === "master_status"
|
|
||||||
).headerDetailParam;
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
listRoom() {
|
|
||||||
this.monitoringApiService.getListRoomData().subscribe((res) => {
|
|
||||||
this.listRoomMaster = res.results;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
listBuilding(){
|
|
||||||
this.monitoringApiService.getMasterBuildingData().subscribe((res) => {
|
|
||||||
this.listBuildingMaster = res.results.data;
|
|
||||||
console.log(this.listBuildingMaster);
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
save(){
|
|
||||||
this.submitted = true;
|
|
||||||
|
|
||||||
if (this.userProfileForm.invalid) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formData = this.userProfileForm.value;
|
|
||||||
const transformedData = {
|
|
||||||
buildingId: formData.buildingId,
|
|
||||||
roomId: formData.userArray.map(room => room.roomId),
|
|
||||||
statusId: formData.statusId
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitoringApiService.postBatchBuilding(transformedData).subscribe((res) => {
|
|
||||||
console.log(res);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
addPhone() {
|
|
||||||
this.userList.push(this.createRoom());
|
|
||||||
}
|
|
||||||
|
|
||||||
removePhone(index) {
|
|
||||||
this.userList.removeAt(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
cancel() {
|
|
||||||
this.router.navigate(["/monitoring"]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -5,70 +5,98 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xl-3 col-md-6 col-12">
|
<div class="col-xl-4 col-md-6 col-12">
|
||||||
<div class="card" style="background-color: #252525 !important">
|
<div class="card" style="background-color: #252525 !important">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="media d-flex">
|
<div class="media d-flex">
|
||||||
<div class="media-body text-left">
|
<div class="media-body text-left">
|
||||||
<h5 style="color: #ffffff">Electricity</h5>
|
<h5 style="color: #ffffff">Electricity</h5>
|
||||||
<h3 class="danger">{{ topCard?.kwh_consumption }} Kwh</h3>
|
<h3 style="color: #ffffff">
|
||||||
|
{{ topCard?.kwh_consumption }} Kwh
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="icon-energy danger font-large-2 float-right"></i>
|
<div
|
||||||
|
style="
|
||||||
|
background-color: #414f2b;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="icon-energy primary font-large-1 float-right"
|
||||||
|
style="color: #bef264 !important"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xl-3 col-md-6 col-12">
|
<div class="col-xl-4 col-md-6 col-12">
|
||||||
<div class="card" style="background-color: #252525 !important">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="media d-flex">
|
|
||||||
<div class="media-body text-left">
|
|
||||||
<h5 style="color: #ffffff">Water</h5>
|
|
||||||
<h3 class="success">{{ topCard?.water_consumption }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="align-self-center">
|
|
||||||
<i
|
|
||||||
class="icon-speedometer success font-large-2 float-right"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-3 col-md-6 col-12">
|
|
||||||
<div class="card" style="background-color: #252525 !important">
|
<div class="card" style="background-color: #252525 !important">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="media d-flex">
|
<div class="media d-flex">
|
||||||
<div class="media-body text-left">
|
<div class="media-body text-left">
|
||||||
<h5 style="color: #ffffff">Device</h5>
|
<h5 style="color: #ffffff">Device</h5>
|
||||||
<h3 class="warning">{{ topCard?.total_device }}</h3>
|
<h3 style="color: #ffffff">{{ topCard?.total_device }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="icon-bulb warning font-large-2 float-right"></i>
|
<div
|
||||||
|
style="
|
||||||
|
background-color: #414f2b;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="ri-device-line primary font-large-1 float-right"
|
||||||
|
style="color: #bef264 !important"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xl-3 col-md-6 col-12">
|
<div class="col-xl-4 col-md-6 col-12">
|
||||||
<div class="card" style="background-color: #252525 !important">
|
<div class="card" style="background-color: #252525 !important">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="media d-flex">
|
<div class="media d-flex">
|
||||||
<div class="media-body text-left">
|
<div class="media-body text-left">
|
||||||
<h5 style="color: #ffffff">Room</h5>
|
<h5 style="color: #ffffff">Room</h5>
|
||||||
<h3 class="info">{{ topCard?.total_room }}</h3>
|
<h3 style="color: #ffffff">{{ topCard?.total_room }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i class="icon-map info font-large-2 float-right"></i>
|
<div
|
||||||
|
style="
|
||||||
|
background-color: #414f2b;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="ri-building-2-line font-large-1 float-right"
|
||||||
|
style="color: #bef264 !important"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -234,10 +262,8 @@
|
||||||
<div class="media align-items-stretch mb-2">
|
<div class="media align-items-stretch mb-2">
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
<i
|
<i
|
||||||
class="icon-bulb background-round info font-large-2 mr-2"
|
class="icon-bulb background-round info font-large-1 mr-2"
|
||||||
style="
|
style="color: #bff264 !important"
|
||||||
color: #BFF264 !important;
|
|
||||||
"
|
|
||||||
></i>
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
|
|
@ -259,6 +285,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-right">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
style="
|
||||||
|
background-color: #c3f164 !important;
|
||||||
|
color: #000000 !important;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
See More
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, ElementRef, ViewChild } from "@angular/core";
|
import { Component, ElementRef, ViewChild } from "@angular/core";
|
||||||
import { ActivatedRoute } from "@angular/router";
|
import { ActivatedRoute, Router } from "@angular/router";
|
||||||
import { ChartOptions, ChartType, ChartDataset } from "chart.js";
|
import { ChartOptions, ChartType, ChartDataset } from "chart.js";
|
||||||
import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
|
import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
|
||||||
import { CurrencyPipe } from "@angular/common";
|
import { CurrencyPipe } from "@angular/common";
|
||||||
|
|
@ -118,12 +118,14 @@ export class DetailComponent {
|
||||||
temperature: any;
|
temperature: any;
|
||||||
deviceCategory: any;
|
deviceCategory: any;
|
||||||
chartKwhWater: any;
|
chartKwhWater: any;
|
||||||
|
paramsId: any;
|
||||||
//......
|
//......
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private energyMonitoringService: EnergyMonitoringService,
|
private energyMonitoringService: EnergyMonitoringService,
|
||||||
private currencyPipe: CurrencyPipe
|
private currencyPipe: CurrencyPipe,
|
||||||
|
private router: Router,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
get formattedSummaryCost(): string {
|
get formattedSummaryCost(): string {
|
||||||
|
|
@ -142,6 +144,7 @@ export class DetailComponent {
|
||||||
this.breadcrumbLink();
|
this.breadcrumbLink();
|
||||||
this.route.params.subscribe((params) => {
|
this.route.params.subscribe((params) => {
|
||||||
const buildingId = params["id"];
|
const buildingId = params["id"];
|
||||||
|
this.paramsId = params["id"];
|
||||||
if (buildingId) {
|
if (buildingId) {
|
||||||
this.dataEnergyMonitoringTopCard(buildingId);
|
this.dataEnergyMonitoringTopCard(buildingId);
|
||||||
this.dataEnergyMonitoringSummary(buildingId);
|
this.dataEnergyMonitoringSummary(buildingId);
|
||||||
|
|
@ -342,4 +345,8 @@ export class DetailComponent {
|
||||||
|
|
||||||
return weeks;
|
return weeks;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
seeMore(paramsId){
|
||||||
|
this.router.navigate(["/device/control-device"],{ queryParams: { paramsId } });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@ 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';
|
import { ArchwizardModule } from 'angular-archwizard';
|
||||||
import { DetailComponent } from './detail/detail.component';
|
import { DetailComponent } from './detail/detail.component';
|
||||||
import { NgxEchartsModule } from 'ngx-echarts';
|
import { NgxEchartsModule } from 'ngx-echarts';
|
||||||
|
|
@ -32,7 +31,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
||||||
declarations: [
|
declarations: [
|
||||||
BuildingComponent,
|
BuildingComponent,
|
||||||
RoomComponent,
|
RoomComponent,
|
||||||
AddNewBuildingRoomComponent,
|
|
||||||
DetailComponent,
|
DetailComponent,
|
||||||
DetailRoomComponent,
|
DetailRoomComponent,
|
||||||
FilterTopUsePipe,
|
FilterTopUsePipe,
|
||||||
|
|
@ -81,21 +79,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
||||||
component: RoomComponent,
|
component: RoomComponent,
|
||||||
data: { mode: 'room' }
|
data: { mode: 'room' }
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'add-new-room',
|
|
||||||
component: AddNewBuildingRoomComponent,
|
|
||||||
data: { mode: 'room' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'add-new-building',
|
|
||||||
component: AddNewBuildingRoomComponent,
|
|
||||||
data: { mode: 'build' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'edit-new-building/:id',
|
|
||||||
component: AddNewBuildingRoomComponent,
|
|
||||||
data: { mode: 'build' }
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'view-new-building/:id',
|
path: 'view-new-building/:id',
|
||||||
component: DetailComponent,
|
component: DetailComponent,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue