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

penyasuaian UI dan penambahan menu

This commit is contained in:
Fuzi_fauzia 2024-06-04 20:39:04 +07:00
parent 0f1c3d6c33
commit a3bfd7b328
22 changed files with 1406 additions and 1658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

4
src/app/app.routing.ts
View File

@ -52,6 +52,10 @@ const appRoutes: Routes = [
path: 'monitoring', loadChildren: () => import('../app/content/hemat-app/monitoring/monitoring.module').then(m => m.MonitoringModule)
, canActivate: [AuthGuard]
},
{
path: 'calculator', loadChildren: () => import('../app/content/hemat-app/calculator/calculator.module').then(m => m.CalculatorModule)
, canActivate: [AuthGuard]
},
{
path: 'list-monitoring', loadChildren: () => import('../app/content/hemat-app/list-monitoring/list-monitoring.module').then(m => m.ListMonitoringModule)
, canActivate: [AuthGuard]

0
src/app/content/hemat-app/calculator/calculation/calculation.component.css Normal file
View File

38
src/app/content/hemat-app/calculator/calculation/calculation.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/calculator/calculation/calculation.component.spec.ts Normal file
View File

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

10
src/app/content/hemat-app/calculator/calculation/calculation.component.ts Normal file
View File

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

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

1
src/app/content/hemat-app/calculator/calculator.component.html Normal file
View File

@ -0,0 +1 @@
<p>calculator works!</p>

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

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

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

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

48
src/app/content/hemat-app/calculator/calculator.module.ts Normal file
View File

@ -0,0 +1,48 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalculationComponent } from './calculation/calculation.component';
import { ReductionComponent } from './reduction/reduction.component';
import { CardModule } from '../../partials/general/card/card.module';
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ClipboardModule } from 'ngx-clipboard';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { BlockUIModule } from 'ng-block-ui';
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
CalculationComponent,
ReductionComponent
],
imports: [
CommonModule,
CardModule,
BreadcrumbModule,
NgSelectModule,
FormsModule,
ReactiveFormsModule,
ClipboardModule,
PerfectScrollbarModule,
NgxDatatableModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent
}),
RouterModule.forChild([
{
path: 'calculation',
component: CalculationComponent
},
{
path: 'reduction',
component: ReductionComponent
},
])
]
})
export class CalculatorModule { }

0
src/app/content/hemat-app/calculator/reduction/reduction.component.css Normal file
View File

38
src/app/content/hemat-app/calculator/reduction/reduction.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/calculator/reduction/reduction.component.spec.ts Normal file
View File

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

10
src/app/content/hemat-app/calculator/reduction/reduction.component.ts Normal file
View File

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

84
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -15,14 +15,6 @@
(input)="filterRows()"
/>
</div>
<div class="col-md-6 text-right">
<!-- <button
class="btn btn-secondary"
[routerLink]="['/monitoring/add-new-building']"
>
<i class="feather ft-plus"></i>&nbsp; Add new building
</button> -->
</div>
</div>
<div class="row mt-2">
<div
@ -43,7 +35,7 @@
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
>
{{ data.build_name ? data.build_name : data.name}}
{{ data.build_name ? data.build_name : data.name }}
</h3>
</div>
</div>
@ -72,7 +64,7 @@
class="text-center"
style="
position: absolute;
top: 50%;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
"
@ -83,75 +75,29 @@
>
{{ data.total }} kWh
</h3>
</div>
<div class="card-body" style="padding-top: 0">
<div class="row mb-3">
<div
class="col-xl-6 col-md-6 col-12"
*ngFor="let top of data.topUse | filterTopUse; let i = index"
>
<div>
<span class="mb-1 text-muted cardtext d-block"
>{{ top.value }}% - {{ top.label }}</span
>
<div>
<ngb-progressbar
height="7px"
type="danger"
[value]="top.value"
></ngb-progressbar>
</div>
</div>
</div>
</div>
<h6>Consumtion</h6>
</div>
<div class="form-group text-center">
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
triggers="hover:click:hover"
ngbTooltip="CCTV"
(click)="editRow(data)"
>
<i class="feather ft-camera"></i>
</button>
<button
type="button"
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
triggers="hover:click:hover"
ngbTooltip="Detail"
(click)="viewRow(data)"
>
<i class="la la-building"></i>
</button>
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
class="btn btn-primary round btn-min-width mr-1 mb-1"
(click)="viewRoom(data)"
triggers="hover:click:hover"
ngbTooltip="Room"
(click)="viewRoom(data)"
>
<i class="feather ft-log-in"></i>
Room
</button>
<button
type="button"
class="btn btn-success round btn-min-width mr-1 mb-1"
(click)="viewRow(data)"
triggers="hover:click:hover"
ngbTooltip="Detail"
>
Detail
</button>
</div>
<!-- <div class="form-group text-center">
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-adn"><span
class="la la-adn"></span></button>
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-bitbucket"><span
class="la la-bitbucket font-medium-4"></span></button>
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-dropbox"><span
class="la la-dropbox font-medium-4"></span></button>
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></button>
<button [routerLink]="" n class="btn btn-social-icon mr-1 mb-1 btn-outline-flickr"><span
class="la la-flickr font-medium-4"></span></button>
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-foursquare"><span
class="la la-foursquare font-medium-4"></span></button>
<button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></button>
</div> -->
</div>
</div>
</div>

4
src/app/content/hemat-app/monitoring/building/building.component.ts
View File

@ -39,9 +39,9 @@ export class BuildingComponent {
type: "Pie",
options: {
fullwidth: true,
height: "250px",
height: "300px",
donut: true,
donutWidth: 60,
donutWidth: 100,
startAngle: 270,
total: 200,
showLabel: false,

136
src/app/content/hemat-app/monitoring/detail/data.ts Normal file
View File

@ -0,0 +1,136 @@
///////////////////// Start Barchart ///////////////
export const barChartOptions: any = {
responsive: true,
scaleShowVerticalLines: false,
maintainAspectRatio: false,
legend: {
labels: {
padding: 20,
},
},
// scales: {
// xAxes: [
// {
// categoryPercentage: 0.36,
// barPercentage: 0.68,
// },
// ],
// },
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
};
export const barChartLabels: string[] = [
"MON",
"TUE",
"WED",
"THU",
"FRI",
"SAT",
"SUN",
];
export const barChartType = "bar";
export const barChartLegend = true;
export const barChartData: any[] = [
{
data: [70, 75, 90, 60, 80, 75, 65],
label: "Fulfilled",
backgroundColor: "#00a5a8",
borderColor: "#00a5a8",
pointBackgroundColor: "#00a5a8",
pointBorderColor: "#00a5a8",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#00a5a8",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
{
data: [60, 65, 80, 63, 90, 80, 70],
label: "Booked",
backgroundColor: "#ff4081",
borderColor: "#ff4081",
pointBackgroundColor: "#ff4081",
pointBorderColor: "#ff4081",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#ff4081",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
// {
// data: [42, 45, 65, 40, 42, 63, 35],
// label: "Arrived",
// backgroundColor: "#626e82",
// borderColor: "#626e82",
// pointBackgroundColor: "#626e82",
// pointBorderColor: "#626e82",
// pointHoverBackgroundColor: "#fff",
// pointHoverBorderColor: "#626e82",
// barPercentage: 0.5,
// categoryPercentage: 0.5,
// },
{
type: "line", // override the default type
data: [40, 60, 80, 60, 75, 60, 70],
label: "Appointment",
backgroundColor: "rgba(0,255,255,0)",
borderColor: "#1e9ff2",
fill: false,
pointBorderColor: "#1e9ff2",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
lineTension: 0.4,
},
];
export const barChartColors: Array<any> = [
{
backgroundColor: "#00a5a8",
borderColor: "#00a5a8",
pointBackgroundColor: "#00a5a8",
pointBorderColor: "#00a5a8",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#00a5a8",
},
{
backgroundColor: "#ff4081",
borderColor: "#ff4081",
pointBackgroundColor: "#ff4081",
pointBorderColor: "#ff4081",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#ff4081",
},
{
backgroundColor: "#626e82",
borderColor: "#626e82",
pointBackgroundColor: "#626e82",
pointBorderColor: "#626e82",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#626e82",
},
{
backgroundColor: "#ff6e40",
borderColor: "#ff6e40",
pointBackgroundColor: "#ff6e40",
pointBorderColor: "#ff6e40",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#ff6e40",
},
{
backgroundColor: "#7c4dff",
borderColor: "#7c4dff",
pointBackgroundColor: "#7c4dff",
pointBorderColor: "#7c4dff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#7c4dff",
},
];
///////////////////// End barchart////////////////

145
src/app/content/hemat-app/monitoring/detail/detail.component.css
View File

@ -1,140 +1,11 @@
:host ::ng-deep .Likes .ct-series-a .ct-point {
stroke: #28d094;
/* chart.component.css */
:host {
display: block;
width: 100%;
}
:host ::ng-deep .Likes .ct-line {
fill: none;
stroke-width: 2px;
}
:host ::ng-deep .Likes .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .Likes .ct-series-a .ct-line {
stroke: #28d094;
}
:host ::ng-deep .Likes .ct-series-a .ct-area {
fill: #28d094;
}
:host ::ng-deep .Comments .ct-series-a .ct-point {
stroke: #FF9149;
}
:host ::ng-deep .Comments .ct-line {
fill: none;
stroke-width: 2px;
}
:host ::ng-deep .Comments .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .Comments .ct-series-a .ct-line {
stroke: #FF9149;
}
:host ::ng-deep .Comments .ct-series-a .ct-area {
fill: #FF9149;
}
:host ::ng-deep .Views .ct-series-a .ct-point {
stroke: #FF4961;
}
:host ::ng-deep .Views .ct-line {
fill: none;
stroke-width: 2px;
}
:host ::ng-deep .Views .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .Views .ct-series-a .ct-line {
stroke: #FF4961;
}
:host ::ng-deep .Views .ct-series-a .ct-area {
fill: #FF4961;
}
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
stroke: #ff9149;
}
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
stroke: #ff9149;
}
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
fill: #ff9149;
fill-opacity: 1;
}
:host ::ng-deep .sp-line-total-cost .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .sp-line-total-cost svg {
margin-left: 13px;
}
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{
stroke: #28d094;
}
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{
stroke: #28d094;
}
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{
fill: #28d094;
fill-opacity: 1;
}
:host ::ng-deep .sp-line-total-sales .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .sp-line-total-sales svg {
margin-left: 13px;
}
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{
stroke: #ff4961;
}
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{
stroke: #ff4961;
}
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{
fill: #ff4961;
fill-opacity: 1;
}
:host ::ng-deep .sp-line-total-revenue .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .sp-line-total-revenue svg {
margin-left: 13px;
}
:host ::ng-deep .ct-bar {
fill: none;
stroke-width: 2px;
}
:host ::ng-deep .sp-bar-total-cost .ct-series-a .ct-bar{
stroke: #ff9148;
}
:host ::ng-deep .sp-bar-total-sales .ct-series-a .ct-bar{
stroke: #28d094;
}
:host ::ng-deep .sp-bar-total-revenue .ct-series-a .ct-bar{
stroke: #ff4961;
}
:host ::ng-deep .sp-bar-total-cost {
margin-bottom: -90px;
}
:host ::ng-deep .sp-bar-total-sales{
margin-bottom: -90px;
}
:host ::ng-deep .sp-bar-total-revenue{
margin-bottom: -90px;
}
:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut {
stroke: #28d094;
stroke-width: 10px !important;
}
:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut {
stroke: #ff9149;
stroke-width: 10px !important;
}
:host ::ng-deep .Users .ct-series-a .ct-slice-donut {
stroke: #ff4961;
stroke-width: 10px !important;
}
:host ::ng-deep .ct-series-b .ct-slice-donut {
stroke: #eeeeee;
stroke-width: 12px !important;
}
:host ::ng-deep .text-muted {
position: absolute;
canvas {
width: 100% !important;
max-height: 400px; /* Atur tinggi maksimal sesuai keinginan Anda */
height: auto !important;
}

509
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@ -32,7 +32,9 @@
<span>Water</span>
</div>
<div class="align-self-center">
<i class="icon-speedometer success font-large-2 float-right"></i>
<i
class="icon-speedometer success font-large-2 float-right"
></i>
</div>
</div>
</div>
@ -45,7 +47,7 @@
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="warning">{{device}}</h3>
<h3 class="warning">{{ device }}</h3>
<span>Device</span>
</div>
<div class="align-self-center">
@ -62,7 +64,7 @@
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info">{{room}}</h3>
<h3 class="info">{{ room }}</h3>
<span>Room</span>
</div>
<div class="align-self-center">
@ -75,490 +77,37 @@
</div>
</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="col-12">
<div class="card">
<div class="card-content">
<div class="p-1 text-center">
<div>
<h3 class="display-4 blue-grey darken-1">34,879</h3>
<span class="blue-grey darken-1">Total Likes</span>
</div>
<div class="card-content">
<!-- <div id="morris-likes" style="height:75px;"> -->
<x-chartist
*ngIf="lineArea"
class="Likes"
[data]="lineArea.data"
[type]="lineArea.type"
[options]="lineArea.options"
[responsiveOptions]="lineArea.responsiveOptions"
[events]="lineArea.events"
>
</x-chartist>
<ul class="list-inline clearfix">
<li
class="border-right-blue-grey border-right-lighten-2 pr-1"
>
<h1 class="success text-bold-400">4789</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-up"></i> Per Post</span
>
</li>
<li class="pl-1">
<h1 class="success text-bold-400">389</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-down"></i> Today</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="p-1 text-center">
<div>
<h3 class="display-4 blue-grey darken-1">34,879</h3>
<span class="blue-grey darken-1">Total Likes</span>
</div>
<div class="card-content">
<!-- <div id="morris-likes" style="height:75px;"> -->
<x-chartist
*ngIf="lineArea"
class="Likes"
[data]="lineArea.data"
[type]="lineArea.type"
[options]="lineArea.options"
[responsiveOptions]="lineArea.responsiveOptions"
[events]="lineArea.events"
>
</x-chartist>
<ul class="list-inline clearfix">
<li
class="border-right-blue-grey border-right-lighten-2 pr-1"
>
<h1 class="success text-bold-400">4789</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-up"></i> Per Post</span
>
</li>
<li class="pl-1">
<h1 class="success text-bold-400">389</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-down"></i> Today</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<section id="chartjs-bar-charts">
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
<m-card
[options]="options"
(reloadFunction)="reloadBarCharts($event)"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
<ng-container mCardHeaderTitle> Appointment </ng-container>
<ng-container mCardBody>
<div class="z" style="display: block;">
<canvas
class="barchart"
height="328"
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
</ng-container>
</m-card>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-xl-4 col-md-12 col-sm-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">Carousel</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<div
id="carousel-example-generic"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner" role="listbox">
<ngb-carousel *ngIf="carouselOne">
<ng-template ngbSlide>
<img [src]="carouselOne[0]" class="d-block w-100" />
</ng-template>
<ng-template ngbSlide>
<img [src]="carouselOne[1]" class="d-block w-100" />
</ng-template>
<ng-template ngbSlide>
<img [src]="carouselOne[2]" class="d-block w-100" />
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Sales and Expenses</h4>
<div class="heading-elements">
<div ngbDropdown class="dropdown">
<button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
ngbDropdownToggle
>
This Fiscal Year
</button>
<div
ngbDropdownMenu
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a class="dropdown-item" [routerLink]=""
>Previous Fiscal Year</a
>
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
</div>
</div>
</div>
</div>
<div class="card-content">
<div class="card-body overflow-hidden row">
<div
class="col-md-9 col-sm-12 border-right-grey border-right-lighten-2"
>
<div
echarts
[options]="chartOption"
class="height-300 echart-container"
></div>
</div>
<div class="col-md-3 col-sm-12">
<div class="list-group">
<a
[routerLink]=""
class="list-group-item list-group-item-action"
>
<h5 class="list-group-item-heading">$ 12080.00</h5>
<p class="list-group-item-text primary">Total Sales</p>
</a>
<a
[routerLink]=""
class="list-group-item list-group-item-action"
>
<h5 class="list-group-item-heading">$ 8500.00</h5>
<p class="list-group-item-text success">Total Receipts</p>
</a>
<a
[routerLink]=""
class="list-group-item list-group-item-action"
>
<h5 class="list-group-item-heading">$ 560.00</h5>
<p class="list-group-item-text warning">Total Expenses</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/ Sales and Expenses -->
<div class="row">
<!-- Your Top Expenses -->
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Your Top Expenses</h4>
<div class="heading-elements">
<div ngbDropdown class="dropdown">
<button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
ngbDropdownToggle
>
This Fiscal Year
</button>
<div
ngbDropdownMenu
class="dropdown-menu"
aria-labelledby="dropdownMenuButton2"
>
<a class="dropdown-item" [routerLink]=""
>Previous Fiscal Year</a
>
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
</div>
</div>
</div>
</div>
<div class="card-content">
<div class="card-body">
<div
echarts
[options]="ExpenseschartOption"
class="height-250 echart-container"
></div>
</div>
</div>
</div>
</div>
<!-- Your Top Expenses -->
<!-- Sales, Receipts and Dues -->
<div class="col-lg-6 col-md-12">
<div class="row">
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info">850</h3>
<h6>Products Sold</h6>
</div>
<div>
<i
class="icon-basket-loaded info font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="warning">$748</h3>
<h6>Net Profit</h6>
</div>
<div>
<i
class="icon-pie-chart warning font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="warning">$748</h3>
<h6>Net Profit</h6>
</div>
<div>
<i
class="icon-pie-chart warning font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info">850</h3>
<h6>Products Sold</h6>
</div>
<div>
<i
class="icon-basket-loaded info font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="warning">$748</h3>
<h6>Net Profit</h6>
</div>
<div>
<i
class="icon-pie-chart warning font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="warning">$748</h3>
<h6>Net Profit</h6>
</div>
<div>
<i
class="icon-pie-chart warning font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sales, Receipts and Dues -->
</div>
</div>
</div>

337
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@ -1,14 +1,8 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { BlockUI, NgBlockUI } from "ng-block-ui";
import { ChartApiService } from "src/app/_services/chart.api";
import { BuildingService } from "../../service/monitoring-api.service";
interface Sales {
name: string;
sales: string;
receipts: string;
due: string;
}
import * as chartsData from "./data";
import { ChartOptions, ChartType, ChartDataset } from "chart.js";
@Component({
selector: "app-detail",
@ -17,14 +11,65 @@ interface Sales {
})
export class DetailComponent {
data: any;
chartOption: any;
Sales: any;
salesData: any;
lineArea: any;
mode: string;
ExpenseschartOption: any;
donutChart2: any;
public breadcrumb: any;
breadcrumb: any;
// chart
public barChartOptions: ChartOptions = {
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
};
public barChartLabels: string[] = [];
public barChartType: ChartType = "bar";
public barChartLegend = true;
public barChartData: ChartDataset[] = [
{
data: [],
label: "KWH Consumption",
backgroundColor: "#00a5a8",
borderColor: "#00a5a8",
pointBackgroundColor: "#00a5a8",
pointBorderColor: "#00a5a8",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#00a5a8",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
{
data: [],
label: "Water Consumption",
backgroundColor: "#ff4081",
borderColor: "#ff4081",
pointBackgroundColor: "#ff4081",
pointBorderColor: "#ff4081",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#ff4081",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
{
type: "line", // override the default type
data: [],
label: "Appointment",
backgroundColor: "rgba(0,255,255,0)",
borderColor: "#1e9ff2",
fill: false,
pointBorderColor: "#1e9ff2",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
},
];
//..........................
// integrasi
electric: any;
water: any;
@ -32,32 +77,28 @@ export class DetailComponent {
room: any;
//......
constructor(
private chartApiservice: ChartApiService,
private router: Router,
private route: ActivatedRoute,
private monitoringApiService: BuildingService,
private monitoringApiService: BuildingService
) {}
hitRateOptions = {
bodyClass: ['bg-hexagons', 'pt-0'],
headerClass: ['bg-hexagons'],
cardClass: ['pull-up'],
close: false,
expand: false,
minimize: false,
reload: true
};
@BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
carouselOne = [
'../../../assets/images/carousel/02.jpg',
'../../../assets/images/carousel/03.jpg',
'../../../assets/images/carousel/01.jpg'
];
ngOnInit() {
this.route.data.subscribe((data) => {
this.mode = data.mode;
});
this.breadcrumbLink();
this.generateChartLabelsAndData();
this.route.params.subscribe((params) => {
const buildingId = params["id"];
if (buildingId) {
this.fetchData(buildingId);
this.devicePerBuilding(buildingId);
}
});
}
breadcrumbLink() {
if (this.mode === "room") {
this.breadcrumb = {
mainlabel: "Detail Monitoring",
@ -95,220 +136,42 @@ export class DetailComponent {
],
};
}
this.route.params.subscribe(params => {
const buildingId = params['id'];
if (buildingId) {
this.fetchData(buildingId);
this.devicePerBuilding(buildingId);
}
});
this.chartApiservice.getStatisticsData().subscribe(Response => {
this.salesData = Response;
this.getlineArea();
});
this.chartApiservice.getInvoiceData().subscribe((Response) => {
this.data = Response;
this.getInvoicechart();
});
}
getlineArea(){
const ChartData = this.salesData;
generateChartLabelsAndData() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
// this.lineArea = {
// type: 'Line',
// data: ChartData['lineArea'],
// options: {
// // low: 650,
// fullwidth: true,
// height: '80px',
// showArea: true,
// axisX: {
// showGrid: false,
// showLabel: false
// },
// axisY: {
// showGrid: false,
// showLabel: false
// }
// }
// };
for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(year, month, day);
this.barChartLabels.push(date.toISOString().split("T")[0]); // Format YYYY-MM-DD
this.lineArea = {
type: 'Line',
data: ChartData['lineArea'],
options: {
// low: 650,
fullwidth: true,
height: '75px',
showArea: true,
axisX: {
showGrid: false,
showLabel: false
},
axisY: {
showGrid: false,
showLabel: false
}
}
};
}
getInvoicechart() {
this.Sales = this.data["sales"];
this.chartOption = {
grid: {
x: 40,
x2: 40,
y: 35,
y2: 25,
},
// Add tooltip
tooltip: {
trigger: "axis",
enterable: false,
},
// Add legend
legend: {
data: ["Total Sales", "Total Receipts", "Total Expenses"],
},
// Add custom colors
color: ["#3BAFDA", "#37BC9B", "#F6BB42"],
// Horizontal axis
xAxis: [
{
type: "category",
data: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
],
// Vertical axis
yAxis: [
{
type: "value",
},
],
// Add series
series: [
{
name: "Total Sales",
type: "bar",
data: this.data.TotalSales.TotalSales[0],
},
{
name: "Total Receipts",
type: "bar",
data: this.data.TotalReceipts.TotalReceipts[0],
},
{
name: "Total Expenses",
type: "bar",
data: this.data.TotalExpenses.TotalExpenses[0],
},
],
};
this.ExpenseschartOption = {
legend: {
orient: "horizontal",
x: "center",
data: ["Internet", "Infrastructure", "Party", "Assets", "Electricity"],
},
// Add custom colors
color: ["#FECEA8", "#FF847C", "#E84A5F", "#2A363B", "#99B898"],
// Display toolbox
toolbox: {
show: true,
orient: "vertical",
},
series: [
{
name: "Browsers",
type: "pie",
radius: ["50%", "70%"],
center: ["50%", "57.5%"],
itemStyle: {
normal: {
label: {
show: true,
},
labelLine: {
show: true,
},
},
emphasis: {
label: {
show: true,
formatter: "{b}" + "\n\n" + "{c} ({d}%)",
position: "center",
textStyle: {
fontSize: "17",
fontWeight: "500",
},
},
},
},
data: [
{ value: 335, name: "Internet" },
{ value: 1548, name: "Infrastructure" },
{ value: 135, name: "Party" },
{ value: 234, name: "Assets" },
{ value: 650, name: "Electricity" },
],
},
],
};
}
reloadTotalReceivables() {
this.blockUITotalReceivables.start("Loading..");
setTimeout(() => {
this.blockUITotalReceivables.stop();
}, 2500);
}
reloadSalesRecieptsDues() {
this.blockUISalesRecieptsDues.start("Loading..");
setTimeout(() => {
this.blockUISalesRecieptsDues.stop();
}, 2500);
// Example data generation, replace with your actual data logic
this.barChartData[0].data?.push(Math.floor(Math.random() * 100));
this.barChartData[1].data?.push(Math.floor(Math.random() * 100));
this.barChartData[2].data?.push(Math.floor(Math.random() * 100));
}
}
//integrasi
fetchData(buildingId) {
this.monitoringApiService.getRoomByBuildingId(buildingId).subscribe((res) => {
this.room = res.resp.map(entry => entry.roomEntity).length;
});
this.monitoringApiService
.getRoomByBuildingId(buildingId)
.subscribe((res) => {
this.room = res.resp.map((entry) => entry.roomEntity).length;
});
}
devicePerBuilding(buildingId) {
this.monitoringApiService.listDevicePerBuilding(buildingId).subscribe((res) => {
this.device = res.resp.reduce((sum, item) => sum + item.total_device, 0);
});
this.monitoringApiService
.listDevicePerBuilding(buildingId)
.subscribe((res) => {
this.device = res.resp.reduce(
(sum, item) => sum + item.total_device,
0
);
});
}
}

135
src/app/content/hemat-app/service/master-api.service.ts Normal file
View File

@ -0,0 +1,135 @@
import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({
providedIn: "root",
})
export class MasterService {
constructor(private http: HttpClient) {}
getMasterListData(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-param/list`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
getMasterData(page: number = 1, limit: number = 100): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-param?page=${page}&limit=${limit}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
postHeaderDetailParam(data: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-detail-param`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.post<any>(url, data, { headers });
}
putHeaderDetailParam(data: any, id: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.put<any>(url, data, { headers });
}
deleteHeaderDetailParam(id: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.delete<any>(url, { headers });
}
postMasterBuildingParam(data: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.post<any>(url, data, { headers });
}
getMasterBuildingData(page: number = 1, limit: number = 100): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
getBuildingList(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building/list`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
putMasterBuildingParam(data: any, id: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.put<any>(url, data, { headers });
}
deleteMasterBuildingParam(id: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.delete<any>(url, { headers });
}
postMasterRoomParam(data: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.post<any>(url, data, { headers });
}
putMasterRoomParam(data: any, id: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.put<any>(url, data, { headers });
}
getListRoomData(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room/list`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
getMasterRoomData(page: number = 1, limit: number = 100): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
}