fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penyesuaian UI device

This commit is contained in:
Fuzi_fauzia 2024-06-05 13:35:58 +07:00
parent 4578a5db61
commit 3f1c97ebe4
12 changed files with 296 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/_layout/settings/menu-settings.config.ts
View File

@ -954,11 +954,11 @@ export const MenuSettingsConfig: MenuConfig = {
},
{
title: 'Surveillance',
page: '/monitoring'
page: '/monitoring/surveillance'
},
{
title: 'Water Consumption',
page: '/monitoring'
page: '/monitoring/water-monitoring'
}
]
}

177
src/app/content/hemat-app/device/device.component.html
View File

@ -4,6 +4,68 @@
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="configuration">
<div class="row">
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device</h6>
<h3>{{filteredRows.length}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-zap primary font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device Aktive</h6>
<h3>{{totalOn}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-wifi success font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device Non-Active</h6>
<h3>{{totalOff}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-wifi-off danger font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="configuration">
<div class="row">
<div
@ -11,19 +73,65 @@
*blockUI="'zeroConfiguration'; message: 'Loading'"
>
<m-card>
<ng-container mCardHeaderTitle> Device Table </ng-container>
<!-- <ng-container mCardHeaderTitle> Device 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 class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Building"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-md-6 text-right">
<div class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Month"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Category"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-2">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
</div>
<div class="col-2 text-left">
<button type="button" class="btn btn-outline-success mr-1">
<i class="la la-search"></i>
</button>
</div>
<div class="col-2 text-right">
<button
class="btn btn-secondary"
[disabled]="spinnerActive"
@ -39,6 +147,7 @@
</button>
</div>
</div>
<div class="card-dashboard">
<ngx-datatable
class="bootstrap table-bordered"
@ -68,9 +177,9 @@
[flexGrow]="1"
[minWidth]="140"
>
<ng-template ngx-datatable-header-template>
<span>Image</span>
</ng-template>
<ng-template ngx-datatable-header-template>
<span>Image</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<span class="avatar avatar-sm rounded-circle">
<img [src]="row.icon" /><i></i
@ -204,48 +313,6 @@
</div>
</div>
</section>
<!-- <section id="configuration">
<div class="row">
<div class="col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Use</h6>
<h3>3,568</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-zap danger font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Estimation Cost</h6>
<h3>Rp 1.000.000.000.000</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-trending-up success font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
</div>
</div>
</div>

17
src/app/content/hemat-app/device/device.component.ts
View File

@ -13,12 +13,26 @@ import { BuildingService } from "../service/monitoring-api.service";
})
export class DeviceComponent implements OnInit {
data: any;
totalOn: any;
totalOff: any;
filteredRows: any[];
searchTerm: string = "";
rows: any = [];
public breadcrumb: any;
spinnerActive: boolean = false;
singlebasicSelected: any;
singleSelectArray = [
{ item_id: 1, item_text: "Alaska" },
{ item_id: 2, item_text: "California" },
{ item_id: 3, item_text: "Colorado" },
{ item_id: 4, item_text: "New Mexico" },
{ item_id: 5, item_text: "Alabama" },
{ item_id: 6, item_text: "Connecticut" },
{ item_id: 7, item_text: "New York" },
];
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
constructor(
@ -51,6 +65,9 @@ export class DeviceComponent implements OnInit {
this.data = res;
this.filteredRows = this.data.results.data;
console.log(this.filteredRows);
this.totalOn = this.filteredRows.filter((row) => row.statusEntity.name.toLowerCase() === 'aktif').length
this.totalOff = this.filteredRows.filter((row) => row.statusEntity.name.toLowerCase() === 'nonaktif').length
// console.log(totalon);
});
}

14
src/app/content/hemat-app/monitoring/monitoring.module.ts
View File

@ -24,6 +24,8 @@ import { NgxMasonryModule } from 'ngx-masonry';
import { UiSwitchModule } from 'ngx-ui-switch';
import { DetailRoomComponent } from './detail-room/detail-room.component';
import { FilterTopUsePipe } from './monitoring.pipe';
import { SurveillanceComponent } from './surveillance/surveillance.component';
import { WaterComponent } from './water/water.component';
@NgModule({
declarations: [
@ -32,7 +34,9 @@ import { FilterTopUsePipe } from './monitoring.pipe';
AddNewBuildingRoomComponent,
DetailComponent,
DetailRoomComponent,
FilterTopUsePipe
FilterTopUsePipe,
SurveillanceComponent,
WaterComponent
],
imports: [
CommonModule,
@ -62,6 +66,14 @@ import { FilterTopUsePipe } from './monitoring.pipe';
path: '',
component: BuildingComponent,
},
{
path: 'surveillance',
component: SurveillanceComponent,
},
{
path: 'water-monitoring',
component: WaterComponent,
},
{
path: 'monitoring-room/:id',
component: RoomComponent,

0
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.css Normal file
View File

38
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html Normal file
View File

@ -0,0 +1,38 @@
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-body text-center">
<h3>Coming Soon</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
</div>
</div>
</section>
</div>
</div>
</div>

23
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SurveillanceComponent } from './surveillance.component';
describe('SurveillanceComponent', () => {
let component: SurveillanceComponent;
let fixture: ComponentFixture<SurveillanceComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SurveillanceComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(SurveillanceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-surveillance',
templateUrl: './surveillance.component.html',
styleUrls: ['./surveillance.component.css']
})
export class SurveillanceComponent {
}

0
src/app/content/hemat-app/monitoring/water/water.component.css Normal file
View File

38
src/app/content/hemat-app/monitoring/water/water.component.html Normal file
View File

@ -0,0 +1,38 @@
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-body text-center">
<h3>Coming Soon</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
</div>
</div>
</section>
</div>
</div>
</div>

23
src/app/content/hemat-app/monitoring/water/water.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WaterComponent } from './water.component';
describe('WaterComponent', () => {
let component: WaterComponent;
let fixture: ComponentFixture<WaterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ WaterComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(WaterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/content/hemat-app/monitoring/water/water.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-water',
templateUrl: './water.component.html',
styleUrls: ['./water.component.css']
})
export class WaterComponent {
}