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

slicing dashboard

This commit is contained in:
Fuzi_fauzia 2024-07-15 21:39:12 +07:00
parent 4c2d40986e
commit 751c36209e
20 changed files with 221 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -57,6 +57,7 @@
"jspdf": "^2.5.1", "jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28", "jspdf-autotable": "^3.5.28",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"ng-chartist": "^4.1.0", "ng-chartist": "^4.1.0",
"ng-multiselect-dropdown": "^0.3.9", "ng-multiselect-dropdown": "^0.3.9",

1
package.json
View File

@ -63,6 +63,7 @@
"jspdf": "^2.5.1", "jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28", "jspdf-autotable": "^3.5.28",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"ng-chartist": "^4.1.0", "ng-chartist": "^4.1.0",
"ng-multiselect-dropdown": "^0.3.9", "ng-multiselect-dropdown": "^0.3.9",

12
src/app/_layout/breadcrumb/breadcrumb.component.html
View File

@ -9,23 +9,23 @@
class="btn btn-icon btn-pure secondary mr-1" class="btn btn-icon btn-pure secondary mr-1"
routerLink="{{ breadcrumb.linkBack }}" routerLink="{{ breadcrumb.linkBack }}"
> >
<i class="feather ft-chevron-left" style="color: #ffffff"></i> <i class="feather ft-chevron-left" style="color: #242222"></i>
</button> </button>
<h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff"> <h3 class="content-header-title mb-0 d-inline-block" style="color: #242222">
{{ breadcrumb.mainlabel }} {{ breadcrumb.mainlabel }}
</h3> </h3>
<div class="row breadcrumbs-top d-inline-block"> <div class="row breadcrumbs-top d-inline-block">
<div class="breadcrumb-wrapper col-12"> <div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb"> <ol class="breadcrumb">
<ng-container *ngFor="let link of breadcrumb.links; let last = last"> <ng-container *ngFor="let link of breadcrumb.links; let last = last">
<li class="breadcrumb-item" style="color: #ffffff"> <li class="breadcrumb-item" style="color: #242222">
<ng-container *ngIf="link.isLink; else notLink"> <ng-container *ngIf="link.isLink; else notLink">
<a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a> <a routerLink="{{ link.link }}" style="color: #242222">{{ link.name }}</a>
</ng-container> </ng-container>
<ng-template #notLink> <ng-template #notLink>
<span style="color: #ffffff">{{ link.name }}</span> <span style="color: #242222">{{ link.name }}</span>
</ng-template> </ng-template>
<span *ngIf="!last" class="breadcrumb-arrow" style="color: #ffffff; margin: 0 5px;"> <span *ngIf="!last" class="breadcrumb-arrow" style="color: #242222; margin: 0 5px;">
<i class="feather ft-chevron-right"></i> <i class="feather ft-chevron-right"></i>
</span> </span>
</li> </li>

8
src/app/_layout/footer/footer.component.html
View File

@ -2,17 +2,17 @@
id="footer" id="footer"
class="footer footer-static footer-light navbar-border navbar-shadow" class="footer footer-static footer-light navbar-border navbar-shadow"
*ngIf="showFooter" *ngIf="showFooter"
style="background-color: #000000 !important; border: none !important;" style="border: none !important;"
> >
<p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2" style="background-color: #000000 !important;"> <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
<span class="float-md-ceter d-block d-md-inline-block" style="background-color: #000000 !important;" <span class="float-md-ceter d-block d-md-inline-block"
>Copyright &copy; 2024 >Copyright &copy; 2024
<a <a
[routerLink]="" [routerLink]=""
class="text-bold-800 grey darken-2" class="text-bold-800 grey darken-2"
href="https://allbestsistem.com/" href="https://allbestsistem.com/"
target="_blank" target="_blank"
style="background-color: #000000 !important;" style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-07-12.01) >Smart Building Management Systems (V@2024-07-12.01)
</a></span </a></span
> >

9
src/app/_layout/header/vertical/vertical.component.html
View File

@ -1,7 +1,6 @@
<nav <nav
class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow" class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
[ngClass]="selectedHeaderNavBarClass" [ngClass]="selectedHeaderNavBarClass"
style="background-color: #000000 !important"
> >
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div <div
@ -10,7 +9,7 @@
[ngClass]="selectedNavBarHeaderClass" [ngClass]="selectedNavBarHeaderClass"
(mouseenter)="mouseEnter($event)" (mouseenter)="mouseEnter($event)"
(mouseleave)="mouseLeave($event)" (mouseleave)="mouseLeave($event)"
style="background-color: #252525 !important" style="background-color: #fbfbfb !important"
> >
<ul class="nav navbar-nav flex-row"> <ul class="nav navbar-nav flex-row">
<!-- Remove position relative in responsive --> <!-- Remove position relative in responsive -->
@ -43,7 +42,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
" "
> >
<h3 class="brand-text" style="color: #ffffff; margin: 0"> <h3 class="brand-text" style="color: #242222; margin: 0">
Smart Building Smart Building
</h3> </h3>
</div> </div>
@ -119,7 +118,7 @@
<span class="badge badge-pill badge-danger badge-up badge-glow">5</span> <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
</a> --> </a> -->
<a class="nav-link nav-link-label"> <a class="nav-link nav-link-label">
<i class="ficon la la-bell" style="color: #bef264"></i> <i class="ficon la la-bell" style="color: #242424"></i>
<!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> --> <!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> -->
</a> </a>
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu> <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
@ -321,7 +320,7 @@
<span <span
*ngIf="currentUser.displayName" *ngIf="currentUser.displayName"
class="mr-1 user-name text-bold-700" class="mr-1 user-name text-bold-700"
style="color: #ffffff" style="color: #242222"
>{{ currentUser.displayName }}</span >{{ currentUser.displayName }}</span
> >
<span <span

26
src/app/_layout/navigation/verticalnav/verticalnav.component.html
View File

@ -1,8 +1,8 @@
<div (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" id="main-menu" <div (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" id="main-menu"
class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true" style="background-color: #252525 !important;"> class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true" style="background-color: #fbfbfb !important; box-shadow: none !important; border-right: 3px solid #f4f4f4;">
<div id="main-menu-content" class="main-menu-content ps-container ps-theme-light" fxFlex="auto" <div id="main-menu-content" class="main-menu-content ps-container ps-theme-light" fxFlex="auto"
[perfectScrollbar]="config" > [perfectScrollbar]="config" >
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" style="background-color: #252525 !important;"> <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" style="background-color: #fbfbfb !important;">
<!-- Menu --> <!-- Menu -->
{{child?child.title:''}} {{child?child.title:''}}
<li *ngFor="let child of _menuSettingsConfig.vertical_menu.items" class="" [ngClass]="{ <li *ngFor="let child of _menuSettingsConfig.vertical_menu.items" class="" [ngClass]="{
@ -17,16 +17,16 @@
<!-- Section --> <!-- Section -->
<span class="menu-title" *ngIf="child.section">{{child.section}}</span> <span class="menu-title" *ngIf="child.section">{{child.section}}</span>
<i class="la" *ngIf="child.section" [ngClass]="child.icon" data-toggle="tooltip" data-placement="right" <i class="la" *ngIf="child.section" [ngClass]="child.icon" data-toggle="tooltip" data-placement="right"
data-original-title="Support"></i> data-original-title="Support" style="color: #242222;"></i>
<!-- Root Menu --> <!-- Root Menu -->
<a *ngIf="child.title && !child.submenu && !child.excludeInVertical && !child.isExternalLink && !child.issupportExternalLink && !child.isStarterkitExternalLink" <a *ngIf="child.title && !child.submenu && !child.excludeInVertical && !child.isExternalLink && !child.issupportExternalLink && !child.isStarterkitExternalLink"
routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)"
style="background-color: #252525 !important;"> style="background-color: #fbfbfb !important;">
<i class="la" [ngClass]="child.icon"></i> <i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
<span class="menu-title" data-i18n="">{{child.title}}</span> <span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
<span *ngIf="child.badge" class="badge badge-pill float-right" <span *ngIf="child.badge" class="badge badge-pill float-right"
[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}"> [ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}" style="color: #242222;">
{{child.badge.value}} {{child.badge.value}}
</span> </span>
</a> </a>
@ -53,15 +53,15 @@
<!-- Submenu --> <!-- Submenu -->
<a *ngIf="child.title && child.submenu && !child.excludeInVertical" <a *ngIf="child.title && child.submenu && !child.excludeInVertical"
routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #252525 !important;"> routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #fbfbfb !important;">
<i class="la" [ngClass]="child.icon"></i> <i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
<span class="menu-title" data-i18n="">{{child.title}}</span> <span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
<span *ngIf="child.badge" class="badge badge-pill float-right" <span *ngIf="child.badge" class="badge badge-pill float-right"
[ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}"> [ngClass]="{'badge-info mr-2': child.badge.type==='badge-info' , 'badge-danger':child.badge.type==='badge-danger'}" style="color: #242222;">
{{child.badge.value}} {{child.badge.value}}
</span> </span>
</a> </a>
<ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen" style="background-color: #252525 !important;"> <ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen" style="background-color: #fbfbfb !important;">
<!-- Submenu of Submenu --> <!-- Submenu of Submenu -->
<li *ngFor="let subchild of child.submenu.items" class="isShown" <li *ngFor="let subchild of child.submenu.items" class="isShown"
[ngClass]="{'has-sub':(subchild.submenu),'active': subchild.isSelected && !subchild.submenu, 'open': subchild.isOpen && subchild.submenu}"> [ngClass]="{'has-sub':(subchild.submenu),'active': subchild.isSelected && !subchild.submenu, 'open': subchild.isOpen && subchild.submenu}">
@ -69,7 +69,7 @@
(click)="toggleMenu($event, subchild, true)" (click)="toggleMenu($event, subchild, true)"
routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}" routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}"
[ngClass]="{'active': subchild.isSelected}" [ngClass]="{'active': subchild.isSelected}"
style="background-color: #252525 !important;">{{subchild.title}}</a> style="background-color: #fbfbfb !important; color: #242222;">{{subchild.title}}</a>
<a class="menu-item" *ngIf="subchild.submenu && !subchild.excludeInVertical" (click)="toggleMenu($event, subchild, true)" <a class="menu-item" *ngIf="subchild.submenu && !subchild.excludeInVertical" (click)="toggleMenu($event, subchild, true)"
routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a> routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a>
<ul *ngIf="subchild.submenu && !subchild.excludeInVertical" class="menu-content"> <ul *ngIf="subchild.submenu && !subchild.excludeInVertical" class="menu-content">

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

@ -77,7 +77,7 @@ export class DeviceControlComponent {
filterDevices(devices: any[]): any[] { filterDevices(devices: any[]): any[] {
return devices.filter((device) => return devices.filter((device) =>
device.mapping.some( device.mapping.some(
(map) => map.name.startsWith("switch") && map.type === "Boolean" (map) => map.code.startsWith("switch") && map.type === "Boolean"
) )
); );
} }
@ -150,8 +150,8 @@ export class DeviceControlComponent {
switchChanged(ev, data) { switchChanged(ev, data) {
const requestData = { const requestData = {
device_id: data.device_id, id: data.id,
switch: data.mapping[0].switch, code: data.mapping[0].code,
value: ev, value: ev,
command_type: "on_off", command_type: "on_off",
}; };

60
src/app/content/hemat-app/monitoring/building/building.component.css
View File

@ -7,20 +7,70 @@
} }
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut { :host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #BEF264; stroke: #37A647;
stroke-width: 35px !important; stroke-width: 50px !important;
} }
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut { :host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #ffffff; stroke: #ffffff;
stroke-width: 35px !important; stroke-width: 50px !important;
} }
.btn-no-hover { .btn-no-hover {
border: none !important; border: none !important;
} }
.btn-no-hover:hover { .custom-card-header {
background-color: #dde1e6 !important;
}
.header-title {
font-family: "Open Sans", sans-serif !important;
color: #242222 !important;
font-weight: 600 !important;
font-size: 20px !important;
}
.header-subtitle {
font-family: "Open Sans", sans-serif !important;
color: #242222 !important;
font-weight: 600 !important;
font-size: 24px !important;
}
.custom-divider {
border-top: 6px solid rgb(0, 0, 0);
}
.custom-total {
font-family: "Open Sans", sans-serif !important;
font-size: 40px !important;
color: #242222 !important;
font-weight: 800 !important;
}
.custom-label-chart {
font-family: "Open Sans", sans-serif !important;
font-size: 20px !important;
color: #242222 !important;
}
.btn-room {
background-color: #2f5137 !important;
color: #ffffff;
width: 163px;
border-radius: 16px;
}
.btn-detail {
background-color: transparent !important;
border-color: #242222 !important;
color: #242222;
width: 163px;
border-radius: 16px;
}
/* .btn-no-hover:hover {
background-color: transparent !important; background-color: transparent !important;
color: inherit !important; color: inherit !important;
} }
@ -28,4 +78,4 @@
.btn-primary.round:hover { .btn-primary.round:hover {
color: #BEF264 !important; color: #BEF264 !important;
border-color: #BEF264 !important; border-color: #BEF264 !important;
} } */

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

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important;"> <div class="app-content content">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -18,29 +18,25 @@
</div> </div>
<div class="row mt-2"> <div class="row mt-2">
<div <div
class="col-xl-4 col-md-6 col-12" class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"
*ngFor="let data of filteredRows" *ngFor="let data of filteredRows"
> >
<div class="card" style="background-color: #252525 !important; border-radius: 10px;"> <div
<div class="card-header mb-2" style="background-color: #252525 !important;"> class="card"
style="background-color: #dde1e6 !important; border-radius: 10px"
>
<div class="card-header mb-2 custom-card-header">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<h4 <h4 class="header-title">Building</h4>
class="text-muted mb-1 font-weight-bold" <h3 class="header-subtitle">
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
>
Building
</h4>
<h3
class="text-muted mb-0 open-sans"
style="font-family: Open Sans, sans-serif; color: #ffffff !important; font-weight: 600;"
>
{{ data.build_name ? data.build_name : data.name }} {{ data.build_name ? data.build_name : data.name }}
</h3> </h3>
</div> </div>
</div> </div>
<hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" /> <hr class="custom-divider" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="donut-chart1"> <div class="donut-chart1">
<x-chartist <x-chartist
@ -57,36 +53,31 @@
class="text-center" class="text-center"
style=" style="
position: absolute; position: absolute;
top: 65%; top: 70%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
" "
> >
<h3 <h3
class="display-4 blue-grey darken-1" class="display-4 blue-grey darken-1 custom-total"
style="font-size: 2em; color: #ffffff !important;"
> >
{{ data.total }} kWh {{ data.total }} KWH
</h3> </h3>
<h6 style="color: #ffffff !important;">Consumption</h6> <h6 class="custom-label-chart">Consumption</h6>
</div> </div>
<div class="form-group text-center"> <div class="form-group text-center">
<button <button
type="button" type="button"
class="btn btn-primary round btn-min-width mr-1 mb-1" class="btn btn-min-width mr-1 mb-1 btn-room"
(click)="viewRoom(data)" (click)="viewRoom(data)"
ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;"
> >
Room Room
</button> </button>
<button <button
type="button" type="button"
class="btn btn-success round btn-min-width mr-1 mb-1" class="btn btn-min-width mr-1 mb-1 btn-detail"
(click)="viewRow(data)" (click)="viewRow(data)"
ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;"
> >
Detail Detail
</button> </button>

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

@ -51,7 +51,7 @@ canvas {
} }
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut { :host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
stroke: #BEF264; stroke: #37A647;
stroke-width: 20px !important; stroke-width: 20px !important;
} }
@ -68,13 +68,13 @@ canvas {
} }
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point { :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point {
stroke: #BEF264; stroke: #37A647;
} }
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line { :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line {
stroke: #BEF264; stroke: #37A647;
} }
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area { :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area {
fill: #BEF264; fill: #37A647;
fill-opacity: 1; fill-opacity: 1;
} }
:host ::ng-deep .sp-line-total-cost .ct-point { :host ::ng-deep .sp-line-total-cost .ct-point {
@ -82,13 +82,26 @@ canvas {
} }
:host ::ng-deep .progress-bar { :host ::ng-deep .progress-bar {
background-color: #BEF264 !important; background-color: #37A647 !important;
} }
.background-round { .background-round {
background-color: #252525 !important; background-color: #2F5137 !important;
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #BEF264; border: 2px solid #2F5137;
border-color: #BEF264 !important; border-color: #2F5137 !important;
}
.custom-label {
font-family: "Open Sans", sans-serif !important;
color: #242222;
font-size: 16px;
}
.custom-value {
font-family: "Open Sans", sans-serif !important;
color: #242222;
font-weight: 800;
font-size: 24px;
} }

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

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important"> <div class="app-content content" style="background-color: #FBFBFB;">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -6,20 +6,20 @@
<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-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !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">Kwh Consumption</h5> <h5 class="custom-label">Kwh Consumption</h5>
<h3 style="color: #ffffff"> <h3 class="custom-value">
{{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(3) : 0 }} Kwh {{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(3) : 0 }} Kwh
</h3> </h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #2F5137;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -30,7 +30,7 @@
> >
<i <i
class="icon-energy primary font-large-1 float-right" class="icon-energy primary font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -40,18 +40,18 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !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 class="custom-label">Device</h5>
<h3 style="color: #ffffff">{{ topCard?.total_device }}</h3> <h3 class="custom-value">{{ topCard?.total_device }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #2F5137;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -62,7 +62,7 @@
> >
<i <i
class="ri-device-line primary font-large-1 float-right" class="ri-device-line primary font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -72,18 +72,18 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !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 class="custom-label">Room</h5>
<h3 style="color: #ffffff">{{ topCard?.total_room }}</h3> <h3 class="custom-value">{{ topCard?.total_room }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #2F5137;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -94,7 +94,7 @@
> >
<i <i
class="ri-building-2-line font-large-1 float-right" class="ri-building-2-line font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -104,13 +104,13 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !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">Summary Cost</h5> <h5 class="custom-label">Summary Cost</h5>
<h3 style="color: #ffffff"> <h3 class="custom-value">
{{ {{
summaryCost?.summary_cost summaryCost?.summary_cost
| currency : "Rp " : "symbol" : "1.0-0" | currency : "Rp " : "symbol" : "1.0-0"
@ -131,7 +131,7 @@
> >
<i <i
class="ri-money-dollar-box-line font-large-1 float-right" class="ri-money-dollar-box-line font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -143,14 +143,14 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<canvas <canvas
style=" style="
background-color: #252525 !important; background-color: #DDE1E6 !important;
border-color: #252525; border-color: #DDE1E6;
color: #ffffff; color: #242222;
" "
class="barchart" class="barchart"
height="400" height="400"
@ -171,8 +171,8 @@
<div class="row"> <div class="row">
<div class="col-6" *ngFor="let item of deviceCategory?.usesd"> <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div <div
class="card overflow-hidden" class="card"
style="background-color: #000000 !important" style="background-color: transparent !important; border: none; box-shadow: none;"
> >
<div class="card-content"> <div class="card-content">
<div class="card-body clearfix"> <div class="card-body clearfix">
@ -180,15 +180,15 @@
<div class="align-self-center"> <div class="align-self-center">
<i <i
class="{{item.icon}} background-round info font-large-1 mr-2" class="{{item.icon}} background-round info font-large-1 mr-2"
style="color: #bff264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
<div class="media-body"> <div class="media-body">
<p style="color: #ffffff !important"> <p style="color: #242222 !important">
{{ item.category_device }} {{ item.category_device }}
<span <span
class="float-right text-bold-600" class="float-right text-bold-600"
style="color: #ffffff" style="color: #242222"
>{{ item.value.toFixed(1) }}%</span >{{ item.value.toFixed(1) }}%</span
> >
</p> </p>
@ -214,8 +214,8 @@
<button <button
class="btn btn-primary" class="btn btn-primary"
style=" style="
background-color: #c3f164 !important; background-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
border-radius: 10px; border-radius: 10px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 700; font-weight: 700;

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

@ -54,12 +54,12 @@ export class DetailComponent {
{ {
data: [], data: [],
label: "KWH Consumption", label: "KWH Consumption",
backgroundColor: "#C3F164", backgroundColor: "#37A647",
borderColor: "#C3F164", borderColor: "#37A647",
pointBackgroundColor: "#C3F164", pointBackgroundColor: "#37A647",
pointBorderColor: "#C3F164", pointBorderColor: "#37A647",
pointHoverBackgroundColor: "#ffffff", pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#C3F164", pointHoverBorderColor: "#37A647",
barPercentage: 0.5, barPercentage: 0.5,
categoryPercentage: 0.5, categoryPercentage: 0.5,
}, },

7
src/app/content/hemat-app/monitoring/room/room.component.css
View File

@ -6,5 +6,10 @@
background: rgba(255, 249, 249, 0.5) !important; background: rgba(255, 249, 249, 0.5) !important;
} }
:host ::ng-deep .progress-bar { :host ::ng-deep .progress-bar {
background-color: #bef264 !important; background-color: #2f5137 !important;
}
.room-custom{
font-family: Montserrat, sans-serif;
color: #ffffff !important;
} }

18
src/app/content/hemat-app/monitoring/room/room.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important"> <div class="app-content content">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -24,20 +24,20 @@
class="col-xl-3 col-lg-6 col-12" class="col-xl-3 col-lg-6 col-12"
*ngFor="let data of filteredRows" *ngFor="let data of filteredRows"
> >
<div class="card pull-up" style="background-color: #252525 !important"> <div class="card pull-up" style="background-color: #DDE1E6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-header mb-2" style="background-color: #252525 !important"> <div class="card-header mb-2" style="background-color: #DDE1E6 !important">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<h5 <h5
class="text-muted mb-1" class="text-muted mb-1 room-custom"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;" style="color: #242222 !important;"
> >
Room Room
</h5> </h5>
<h4 <h4
class="text-muted mb-0" class="text-muted mb-0"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;" style="font-family: Montserrat, sans-serif; color: #242222 !important;"
> >
{{ data.name }} {{ data.name }}
</h4> </h4>
@ -49,13 +49,13 @@
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<!-- <h3 class="info">{{ data.value }} kWh</h3> --> <!-- <h3 class="info">{{ data.value }} kWh</h3> -->
<h3 style="color: #ffffff;">{{data.totalKwh}} kWh</h3> <h3 style="color: #242222;">{{data.totalKwh}} kWh</h3>
<h6 style="color: #ffffff;">Consumption</h6> <h6 style="color: #242222;">Consumption</h6>
</div> </div>
<div> <div>
<i <i
class="feather ft-server info font-large-2 float-right" class="feather ft-server info font-large-2 float-right"
style="color: #bef264 !important;" style="color: #2f5137 !important;"
></i> ></i>
</div> </div>
</div> </div>

2
src/app/content/hemat-app/service/device.service.ts
View File

@ -71,7 +71,7 @@ export class DeviceService {
deviceSwitch(data): Observable<any> { deviceSwitch(data): Observable<any> {
const endpoint = `/devices`; const endpoint = `/devices`;
const url = `${BASE_URL}${endpoint}/device-switch`; const url = `${BASE_URL}${endpoint}/device-command`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({
"Content-Type": "application/json", "Content-Type": "application/json",
"x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT", "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",

7
src/app/content/hemat-app/service/login.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from "@angular/core"; import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http"; import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs"; import { BehaviorSubject, Observable } from "rxjs";
import { jwtDecode } from "jwt-decode"; import { jwtDecode } from "jwt-decode";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import { AuthService } from "src/app/_services/auth.service"; import { AuthService } from "src/app/_services/auth.service";
@ -23,12 +23,17 @@ interface CustomJwtPayload {
}) })
export class LoginService { export class LoginService {
private readonly tokenKey = "currentUser"; private readonly tokenKey = "currentUser";
private tabSelected = new BehaviorSubject(null);
public _tabSelected = this.tabSelected.asObservable();
constructor( constructor(
private http: HttpClient, private http: HttpClient,
private router: Router, private router: Router,
public logoutService: AuthService public logoutService: AuthService
) {} ) {}
setTabsSelected(e: string){
this.tabSelected.next(e);
}
updatePassword(data: any): Observable<any> { updatePassword(data: any): Observable<any> {
const endpoint = `/users`; const endpoint = `/users`;
const url = `${BASE_URL}${endpoint}/reset-password`; const url = `${BASE_URL}${endpoint}/reset-password`;

24
src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts
View File

@ -5,6 +5,7 @@ import { ToastrService } from "ngx-toastr";
import { jwtDecode } from "jwt-decode"; import { jwtDecode } from "jwt-decode";
import { AuthService } from "src/app/_services/auth.service"; import { AuthService } from "src/app/_services/auth.service";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import * as _ from "lodash"
interface CustomJwtPayload { interface CustomJwtPayload {
exp: number; exp: number;
scope: string; scope: string;
@ -30,7 +31,7 @@ export class ProfilInformationComponent {
storedData: any; storedData: any;
currentUser: any; currentUser: any;
disableButton: boolean = false; disableButton: boolean = false;
oldData: any;
url: any = "https://www.w3schools.com/howto/img_avatar.png"; url: any = "https://www.w3schools.com/howto/img_avatar.png";
fileSelected: any = null; fileSelected: any = null;
@ -40,7 +41,22 @@ export class ProfilInformationComponent {
private toastr: ToastrService, private toastr: ToastrService,
public logoutService: AuthService, public logoutService: AuthService,
private router: Router private router: Router
) {} ) {
this.authService._tabSelected.subscribe(res => {
console.log(res);
console.log(this.oldData);
console.log(this.profilInfo.value);
if (res === "update-password") {
if (this.oldData !== this.profilInfo.value) {
console.log('ada perubahan');
return false
} else {
console.log('tidak ada perubahan');
}
}
})
}
ngOnInit(): void { ngOnInit(): void {
this.storedData = JSON.parse(localStorage.getItem("account_info")); this.storedData = JSON.parse(localStorage.getItem("account_info"));
@ -69,6 +85,10 @@ export class ProfilInformationComponent {
phone: data.data.phone, phone: data.data.phone,
image: [null], image: [null],
}); });
// this.oldData._.cloneDeep(this.profilInfo.value);
this.oldData = _.cloneDeep(this.profilInfo.value)
console.log(this.oldData);
if ( if (
data.data.image_path !== "https://kapi.absys.ninja/hemat/image/null" data.data.image_path !== "https://kapi.absys.ninja/hemat/image/null"
) { ) {

4
src/app/content/hemat-app/user-profile/user-profile.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { LoginService } from "../service/login.service";
@Component({ @Component({
selector: "app-user-profile", selector: "app-user-profile",
@ -10,11 +11,12 @@ export class UserProfileComponent {
activeTab: string = "profile-info2"; activeTab: string = "profile-info2";
constructor() {} constructor(private loginService: LoginService) {}
ngOnInit(): void {} ngOnInit(): void {}
selectTab(tabName: string) { selectTab(tabName: string) {
this.activeTab = tabName; this.activeTab = tabName;
this.loginService.setTabsSelected(tabName)
} }
} }

1
src/app/login/login.component.css
View File

@ -45,6 +45,7 @@
} }
.input-custom { .input-custom {
background-color: rgba(1, 1, 1, 0.526) !important; background-color: rgba(1, 1, 1, 0.526) !important;
color: #ffffff !important;
} }
.line-on-side span { .line-on-side span {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);

8
src/assets/sass/scss/bootstrap/_forms.scss
View File

@ -13,10 +13,10 @@
@include font-size($input-font-size); @include font-size($input-font-size);
font-weight: $input-font-weight; font-weight: $input-font-weight;
line-height: $input-line-height; line-height: $input-line-height;
// color: $input-color; color: $input-color;
// background-color: $input-bg; background-color: $input-bg;
color: #FFFFFF !important; // color: #FFFFFF !important;
background-color: #252525 !important; // background-color: #252525 !important;
background-clip: padding-box; background-clip: padding-box;
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;