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-autotable": "^3.5.28",
"jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"ng-chartist": "^4.1.0",
"ng-multiselect-dropdown": "^0.3.9",

1
package.json
View File

@ -63,6 +63,7 @@
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28",
"jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"ng-chartist": "^4.1.0",
"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"
routerLink="{{ breadcrumb.linkBack }}"
>
<i class="feather ft-chevron-left" style="color: #ffffff"></i>
<i class="feather ft-chevron-left" style="color: #242222"></i>
</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 }}
</h3>
<div class="row breadcrumbs-top d-inline-block">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<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">
<a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a>
<a routerLink="{{ link.link }}" style="color: #242222">{{ link.name }}</a>
</ng-container>
<ng-template #notLink>
<span style="color: #ffffff">{{ link.name }}</span>
<span style="color: #242222">{{ link.name }}</span>
</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>
</span>
</li>

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

@ -2,17 +2,17 @@
id="footer"
class="footer footer-static footer-light navbar-border navbar-shadow"
*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;">
<span class="float-md-ceter d-block d-md-inline-block" 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"
>Copyright &copy; 2024
<a
[routerLink]=""
class="text-bold-800 grey darken-2"
href="https://allbestsistem.com/"
target="_blank"
style="background-color: #000000 !important;"
style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-07-12.01)
</a></span
>

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

@ -1,7 +1,6 @@
<nav
class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
[ngClass]="selectedHeaderNavBarClass"
style="background-color: #000000 !important"
>
<div class="navbar-wrapper">
<div
@ -10,7 +9,7 @@
[ngClass]="selectedNavBarHeaderClass"
(mouseenter)="mouseEnter($event)"
(mouseleave)="mouseLeave($event)"
style="background-color: #252525 !important"
style="background-color: #fbfbfb !important"
>
<ul class="nav navbar-nav flex-row">
<!-- Remove position relative in responsive -->
@ -43,7 +42,7 @@
text-overflow: ellipsis;
"
>
<h3 class="brand-text" style="color: #ffffff; margin: 0">
<h3 class="brand-text" style="color: #242222; margin: 0">
Smart Building
</h3>
</div>
@ -119,7 +118,7 @@
<span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
</a> -->
<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> -->
</a>
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
@ -321,7 +320,7 @@
<span
*ngIf="currentUser.displayName"
class="mr-1 user-name text-bold-700"
style="color: #ffffff"
style="color: #242222"
>{{ currentUser.displayName }}</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"
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"
[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 -->
{{child?child.title:''}}
<li *ngFor="let child of _menuSettingsConfig.vertical_menu.items" class="" [ngClass]="{
@ -17,16 +17,16 @@
<!-- Section -->
<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"
data-original-title="Support"></i>
data-original-title="Support" style="color: #242222;"></i>
<!-- Root Menu -->
<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)"
style="background-color: #252525 !important;">
<i class="la" [ngClass]="child.icon"></i>
<span class="menu-title" data-i18n="">{{child.title}}</span>
style="background-color: #fbfbfb !important;">
<i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
<span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
<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}}
</span>
</a>
@ -53,15 +53,15 @@
<!-- Submenu -->
<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;">
<i class="la" [ngClass]="child.icon"></i>
<span class="menu-title" data-i18n="">{{child.title}}</span>
routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #fbfbfb !important;">
<i class="la" [ngClass]="child.icon" style="color: #242222;"></i>
<span class="menu-title" data-i18n="" style="color: #242222;">{{child.title}}</span>
<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}}
</span>
</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 -->
<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}">
@ -69,7 +69,7 @@
(click)="toggleMenu($event, subchild, true)"
routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}"
[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)"
routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a>
<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[] {
return devices.filter((device) =>
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) {
const requestData = {
device_id: data.device_id,
switch: data.mapping[0].switch,
id: data.id,
code: data.mapping[0].code,
value: ev,
command_type: "on_off",
};

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

@ -1,5 +1,5 @@
:host ::ng-deep .gap_fl_btn {
margin: 0 0.3rem;
margin: 0 0.3rem;
}
:host ::ng-deep .block-ui-wrapper {
@ -7,20 +7,70 @@
}
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #BEF264;
stroke-width: 35px !important;
stroke: #37A647;
stroke-width: 50px !important;
}
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #ffffff;
stroke-width: 35px !important;
stroke-width: 50px !important;
}
.btn-no-hover {
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;
color: inherit !important;
}
@ -28,4 +78,4 @@
.btn-primary.round:hover {
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-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -18,29 +18,25 @@
</div>
<div class="row mt-2">
<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"
>
<div class="card" style="background-color: #252525 !important; border-radius: 10px;">
<div class="card-header mb-2" style="background-color: #252525 !important;">
<div
class="card"
style="background-color: #dde1e6 !important; border-radius: 10px"
>
<div class="card-header mb-2 custom-card-header">
<div class="row">
<div class="col-12 text-center">
<h4
class="text-muted mb-1 font-weight-bold"
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;"
>
<h4 class="header-title">Building</h4>
<h3 class="header-subtitle">
{{ data.build_name ? data.build_name : data.name }}
</h3>
</div>
</div>
<hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" />
<hr class="custom-divider" />
</div>
<div class="card-content">
<div class="donut-chart1">
<x-chartist
@ -57,36 +53,31 @@
class="text-center"
style="
position: absolute;
top: 65%;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em; color: #ffffff !important;"
class="display-4 blue-grey darken-1 custom-total"
>
{{ data.total }} kWh
{{ data.total }} KWH
</h3>
<h6 style="color: #ffffff !important;">Consumption</h6>
<h6 class="custom-label-chart">Consumption</h6>
</div>
<div class="form-group text-center">
<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)"
ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;"
>
Room
</button>
<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)"
ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;"
>
Detail
</button>

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

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

@ -54,12 +54,12 @@ export class DetailComponent {
{
data: [],
label: "KWH Consumption",
backgroundColor: "#C3F164",
borderColor: "#C3F164",
pointBackgroundColor: "#C3F164",
pointBorderColor: "#C3F164",
backgroundColor: "#37A647",
borderColor: "#37A647",
pointBackgroundColor: "#37A647",
pointBorderColor: "#37A647",
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#C3F164",
pointHoverBorderColor: "#37A647",
barPercentage: 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;
}
: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-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -24,20 +24,20 @@
class="col-xl-3 col-lg-6 col-12"
*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-header mb-2" style="background-color: #252525 !important">
<div class="card-header mb-2" style="background-color: #DDE1E6 !important">
<div class="row">
<div class="col-12 text-center">
<h5
class="text-muted mb-1"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
class="text-muted mb-1 room-custom"
style="color: #242222 !important;"
>
Room
</h5>
<h4
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 }}
</h4>
@ -49,13 +49,13 @@
<div class="media d-flex">
<div class="media-body text-left">
<!-- <h3 class="info">{{ data.value }} kWh</h3> -->
<h3 style="color: #ffffff;">{{data.totalKwh}} kWh</h3>
<h6 style="color: #ffffff;">Consumption</h6>
<h3 style="color: #242222;">{{data.totalKwh}} kWh</h3>
<h6 style="color: #242222;">Consumption</h6>
</div>
<div>
<i
class="feather ft-server info font-large-2 float-right"
style="color: #bef264 !important;"
style="color: #2f5137 !important;"
></i>
</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> {
const endpoint = `/devices`;
const url = `${BASE_URL}${endpoint}/device-switch`;
const url = `${BASE_URL}${endpoint}/device-command`;
const headers = new HttpHeaders({
"Content-Type": "application/json",
"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 { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { BehaviorSubject, Observable } from "rxjs";
import { jwtDecode } from "jwt-decode";
import { Router } from "@angular/router";
import { AuthService } from "src/app/_services/auth.service";
@ -23,12 +23,17 @@ interface CustomJwtPayload {
})
export class LoginService {
private readonly tokenKey = "currentUser";
private tabSelected = new BehaviorSubject(null);
public _tabSelected = this.tabSelected.asObservable();
constructor(
private http: HttpClient,
private router: Router,
public logoutService: AuthService
) {}
setTabsSelected(e: string){
this.tabSelected.next(e);
}
updatePassword(data: any): Observable<any> {
const endpoint = `/users`;
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 { AuthService } from "src/app/_services/auth.service";
import { Router } from "@angular/router";
import * as _ from "lodash"
interface CustomJwtPayload {
exp: number;
scope: string;
@ -30,7 +31,7 @@ export class ProfilInformationComponent {
storedData: any;
currentUser: any;
disableButton: boolean = false;
oldData: any;
url: any = "https://www.w3schools.com/howto/img_avatar.png";
fileSelected: any = null;
@ -40,7 +41,22 @@ export class ProfilInformationComponent {
private toastr: ToastrService,
public logoutService: AuthService,
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 {
this.storedData = JSON.parse(localStorage.getItem("account_info"));
@ -69,6 +85,10 @@ export class ProfilInformationComponent {
phone: data.data.phone,
image: [null],
});
// this.oldData._.cloneDeep(this.profilInfo.value);
this.oldData = _.cloneDeep(this.profilInfo.value)
console.log(this.oldData);
if (
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 { LoginService } from "../service/login.service";
@Component({
selector: "app-user-profile",
@ -10,11 +11,12 @@ export class UserProfileComponent {
activeTab: string = "profile-info2";
constructor() {}
constructor(private loginService: LoginService) {}
ngOnInit(): void {}
selectTab(tabName: string) {
this.activeTab = tabName;
this.loginService.setTabsSelected(tabName)
}
}

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

@ -45,6 +45,7 @@
}
.input-custom {
background-color: rgba(1, 1, 1, 0.526) !important;
color: #ffffff !important;
}
.line-on-side span {
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);
font-weight: $input-font-weight;
line-height: $input-line-height;
// color: $input-color;
// background-color: $input-bg;
color: #FFFFFF !important;
background-color: #252525 !important;
color: $input-color;
background-color: $input-bg;
// color: #FFFFFF !important;
// background-color: #252525 !important;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;