perbaikan tampilan monitoring room

src/app/content/hemat-app/device/device.component.ts

@@ -97,12 +97,10 @@ export class DeviceComponent implements OnInit {
   }
 
   viewRow(row) {
-    console.log("View row:", row);
     this.router.navigate(["/device/view", row.name]);
   }
 
   editRow(row) {
-    console.log("Edit row:", row);
     this.router.navigate(["/device/edit", row.name]);
   }
 

src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
-import { Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
 
 @Component({
@@ -10,6 +10,7 @@ import { BlockUI, NgBlockUI } from "ng-block-ui";
 })
 export class AddNewBuildingRoomComponent implements OnInit {
   public breadcrumb: any;
+  mode: string;
   numberTab: FormGroup;
   stepOneForm: FormGroup;
   stepTwoForm: FormGroup;
@@ -21,11 +22,11 @@ export class AddNewBuildingRoomComponent implements OnInit {
   public repeatList: FormArray;
 
   get repeatFormGroup() {
-    return this.repeatForm.get('repeatArray') as FormArray;
+    return this.repeatForm.get("repeatArray") as FormArray;
   }
 
-  @BlockUI('numberTabs') blockUINumberTabs: NgBlockUI;
+  @BlockUI("numberTabs") blockUINumberTabs: NgBlockUI;
-  @BlockUI('iconTabs') blockUIIconTabs: NgBlockUI;
+  @BlockUI("iconTabs") blockUIIconTabs: NgBlockUI;
 
   countries = ["Amsterdam", "Berlin", "Frankfurt"];
   eventType = ["Banquet", "Fund Raiser", "Dinner Party", "Wedding"];
@@ -43,7 +44,11 @@ export class AddNewBuildingRoomComponent implements OnInit {
     { id: 5, name: "5st item", idName: "item5" },
   ];
 
-  constructor(private formBuilder: FormBuilder, private router: Router,) {}
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
 
   ngOnInit() {
     this.numberTab = this.formBuilder.group({
@@ -53,22 +58,25 @@ export class AddNewBuildingRoomComponent implements OnInit {
       email: ["", [Validators.required, Validators.email]],
       address: ["", [Validators.required]],
       owned: ["", [Validators.required]],
-      
-    });
-    
-    this.repeatForm = this.formBuilder.group({
-      repeatArray: this.formBuilder.array([this.createRepeat()])
     });
 
-    this.repeatList = this.repeatForm.get('repeatArray') as FormArray;
+    this.repeatForm = this.formBuilder.group({
+      repeatArray: this.formBuilder.array([this.createRepeat()]),
+    });
+
+    this.repeatList = this.repeatForm.get("repeatArray") as FormArray;
+
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
   }
 
   createRepeat(): FormGroup {
     return this.formBuilder.group({
-      roomName: ['', Validators.required],
+      roomName: ["", Validators.required],
-      room: ['', Validators.required],
+      room: ["", Validators.required],
-      floor: ['', Validators.required],
+      floor: ["", Validators.required],
-      status: ['', Validators.required],
+      status: ["", Validators.required],
     });
   }
 
@@ -102,15 +110,20 @@ export class AddNewBuildingRoomComponent implements OnInit {
   }
 
   submit() {
-    window.alert('Form submitted.');
+    window.alert("Form submitted.");
   }
 
   cancel() {
-    this.router.navigate(["/monitoring"]);
+    if (this.mode === "room") {
+      this.router.navigate(["/monitoring/monitoring-room"]);
+    } else {
+      this.router.navigate(["/monitoring"]);
+    }
+    
   }
 
   reloadNumberTabs() {
-    this.blockUINumberTabs.start('Loading..');
+    this.blockUINumberTabs.start("Loading..");
 
     setTimeout(() => {
       this.blockUINumberTabs.stop();
@@ -118,7 +131,7 @@ export class AddNewBuildingRoomComponent implements OnInit {
   }
 
   reloadIconTabs() {
-    this.blockUIIconTabs.start('Loading..');
+    this.blockUIIconTabs.start("Loading..");
 
     setTimeout(() => {
       this.blockUIIconTabs.stop();

src/app/content/hemat-app/monitoring/building/building.component.html

@@ -7,16 +7,12 @@
       <section id="social-cards">
         <div class="row mb-2">
           <div class="col-md-6">
-            <input
+            <input type="text" class="form-control" placeholder="Search..." />
-              type="text"
-              class="form-control"
-              placeholder="Search..."
-            />
           </div>
           <div class="col-md-6 text-right">
             <button
               class="btn btn-secondary"
-              [routerLink]="['/monitoring/add-new-room']"
+              [routerLink]="['/monitoring/add-new-building']"
             >
               <i class="feather ft-plus"></i>&nbsp; Add new building
             </button>
@@ -25,130 +21,132 @@
         <div class="row mt-2">
           <div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
             <div class="card">
+              <div class="card-header mb-2">
+                <div class="row">
+                  <div class="col-12 text-center">
+                    <h4
+                      class="text-muted mb-1 font-weight-bold"
+                      style="font-family: Montserrat, sans-serif"
+                    >
+                      Building Name
+                    </h4>
+                    <h3
+                      class="text-muted mb-0"
+                      style="font-family: Montserrat, sans-serif"
+                    >
+                      {{ data.build_name }}
+                    </h3>
+                  </div>
+                </div>
+                <hr style="border-top: 3px solid #100a0a" />
+              </div>
               <div class="card-content">
-                <div class="card-body text-center">
+                <x-chartist
-                  <div class="card-header mb-2">
+                  *ngIf="data"
-                    <div class="row">
+                  [data]="data.donut"
-                      <div class="col-12 text-center">
+                  [type]="donutChart1.type"
-                        <h4
+                  [options]="donutChart1.options"
-                          class="text-muted mb-1 font-weight-bold"
+                  [events]="donutChart1.events"
-                          style="font-family: Montserrat, sans-serif"
+                >
-                        >
+                </x-chartist>
-                          Building Name
-                        </h4>
-                        <h3
-                          class="text-muted mb-0"
-                          style="font-family: Montserrat, sans-serif"
-                        >
-                          {{data.build_name}}
-                        </h3>
-                      </div>
-                    </div>
-                    <hr style="border-top: 3px solid #100a0a" />
-                  </div>
-                  <div class="card-content">
-                    <x-chartist
-                      *ngIf="data"
-                      [data]="data.donut"
-                      [type]="donutChart1.type"
-                      [options]="donutChart1.options"
-                      [events]="donutChart1.events"
-                    >
-                    </x-chartist>
 
-                    <div
+                <div
-                      class="text-center"
+                  class="text-center"
-                      style="
+                  style="
-                        position: absolute;
+                    position: absolute;
-                        top: 50%;
+                    top: 50%;
-                        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"
-                        style="font-size: 2em"
+                    style="font-size: 2em"
+                  >
+                    {{ data.total }} kWh
+                  </h3>
+                </div>
+                <div class="card-body" style="padding-top: 0">
+                  <div class="row mb-3">
+                    <div class="col Started">
+                      <span class="mb-1 text-muted cardtext d-block"
+                        >23% - Lighning</span
                       >
-                        {{data.total}} kWh
+                      <div>
-                      </h3>
+                        <ngb-progressbar
-                    </div>
+                          height="7px"
-                    <div class="card-body" style="padding-top: 0">
+                          type="success"
-                      <div class="row mb-3">
+                          [value]="23"
-                        <div class="col Started">
+                        ></ngb-progressbar>
-                          <span class="mb-1 text-muted cardtext d-block"
-                            >23% - Lighning</span
-                          >
-                          <div>
-                            <ngb-progressbar
-                              height="7px"
-                              type="success"
-                              [value]="23"
-                            ></ngb-progressbar>
-                          </div>
-                        </div>
-                        <div class="col Progress">
-                          <span class="mb-1 text-muted cardtext d-block"
-                            >14% - In Progress</span
-                          >
-                          <div>
-                            <ngb-progressbar
-                              height="7px"
-                              type="danger"
-                              [value]="14"
-                            ></ngb-progressbar>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row mb-3">
-                        <div class="col Remaining">
-                          <span class="mb-1 text-muted cardtext d-block"
-                            >35% - Remaining</span
-                          >
-                          <div>
-                            <ngb-progressbar
-                              height="7px"
-                              type="warning"
-                              [value]="35"
-                            ></ngb-progressbar>
-                          </div>
-                        </div>
-                        <div class="col Done">
-                          <span class="mb-1 text-muted cardtext d-block"
-                            >28% - Started</span
-                          >
-                          <div>
-                            <ngb-progressbar
-                              height="7px"
-                              type="primary"
-                              [value]="28"
-                            ></ngb-progressbar>
-                          </div>
-                        </div>
                       </div>
                     </div>
-
+                    <div class="col Progress">
-                    <div class="form-group text-center">
+                      <span class="mb-1 text-muted cardtext d-block"
-                      <button
+                        >14% - In Progress</span
-                        type="button"
-                        class="btn btn-float btn-square btn-outline-secondary"
                       >
-                        <i class="feather ft-layers"></i>
+                      <div>
-                      </button>
+                        <ngb-progressbar
-                      <button
+                          height="7px"
-                        type="button"
+                          type="danger"
-                        class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
+                          [value]="14"
-                      >
+                        ></ngb-progressbar>
-                        <i class="la la-building"></i>
+                      </div>
-                      </button>
-                      <button
-                        type="button"
-                        class="btn btn-float btn-square btn-outline-secondary"
-                        [routerLink]="['/monitoring/monitoring-room']"
-                      >
-                        <i class="feather ft-log-in"></i>
-                      </button>
                     </div>
                   </div>
+                  <div class="row mb-3">
+                    <div class="col Remaining">
+                      <span class="mb-1 text-muted cardtext d-block"
+                        >35% - Remaining</span
+                      >
+                      <div>
+                        <ngb-progressbar
+                          height="7px"
+                          type="warning"
+                          [value]="35"
+                        ></ngb-progressbar>
+                      </div>
+                    </div>
+                    <div class="col Done">
+                      <span class="mb-1 text-muted cardtext d-block"
+                        >28% - Started</span
+                      >
+                      <div>
+                        <ngb-progressbar
+                          height="7px"
+                          type="primary"
+                          [value]="28"
+                        ></ngb-progressbar>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="form-group text-center">
+                  <button
+                    type="button"
+                    class="btn btn-float btn-square btn-outline-secondary"
+                    triggers="hover:click:hover"
+                    ngbTooltip="Edit"
+                  >
+                    <i class="feather ft-edit"></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"
+                  >
+                    <i class="la la-building"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-float btn-square btn-outline-secondary"
+                    triggers="hover:click:hover"
+                    ngbTooltip="Room"
+                    [routerLink]="['/monitoring/monitoring-room']"
+                  >
+                    <i class="feather ft-log-in"></i>
+                  </button>
                 </div>
               </div>
             </div>

src/app/content/hemat-app/monitoring/building/building.component.ts

@@ -1,5 +1,4 @@
 import { Component } from "@angular/core";
-import { ChartApiService } from "src/app/_services/chart.api";
 
 @Component({
   selector: "app-building",
@@ -51,7 +50,7 @@ export class BuildingComponent {
     },
   ];
 
-  constructor(private chartApiservice: ChartApiService) {}
+  constructor() {}
 
   ngOnInit() {
     this.breadcrumb = {

src/app/content/hemat-app/monitoring/detail/detail.component.html

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

src/app/content/hemat-app/monitoring/detail/detail.component.spec.ts

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

src/app/content/hemat-app/monitoring/detail/detail.component.ts

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

src/app/content/hemat-app/monitoring/monitoring.module.ts

@@ -17,12 +17,14 @@ import { RoomComponent } from './room/room.component';
 import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
 import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
 import { ArchwizardModule } from 'angular-archwizard';
+import { DetailComponent } from './detail/detail.component';
 
 @NgModule({
   declarations: [
     BuildingComponent,
     RoomComponent,
-    AddNewBuildingRoomComponent
+    AddNewBuildingRoomComponent,
+    DetailComponent
   ],
   imports: [
     CommonModule,
@@ -44,7 +46,7 @@ import { ArchwizardModule } from 'angular-archwizard';
     RouterModule.forChild([
       {
         path: '',
-        component: BuildingComponent
+        component: BuildingComponent,
       },
       {
         path: 'monitoring-room',
@@ -52,7 +54,13 @@ import { ArchwizardModule } from 'angular-archwizard';
       },
       {
         path: 'add-new-room',
-        component: AddNewBuildingRoomComponent
+        component: AddNewBuildingRoomComponent,
+        data: { mode: 'room' }
+      },
+      {
+        path: 'add-new-building',
+        component: AddNewBuildingRoomComponent,
+        data: { mode: 'build' }
       },
     ])
   ]

src/app/content/hemat-app/monitoring/room/room.component.css

@@ -1,190 +1,8 @@
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+:host ::ng-deep .gap_fl_btn {
-    font-family: inherit;
+    margin: 0 0.3rem;
-    font-size: medium;
-    font-weight: bold;
-    color: #6B6F82;
-}
-:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
-    position: relative;
-    height: 50px !important;
-}
-
-:host ::ng-deep .datatable-icon-right:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-skip:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-left:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-left:before {
-    content: "\2039";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-prev:before {
-    content: "\00AB";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-right:before {
-    content: "\203A";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-skip:before {
-    content: "\00BB";
-    font-size: x-large;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
-    background-color: #d4d2e7;
-    font-weight: bold;
-    font-size: larger;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
-    height: 32px;
-    min-width: 34px;
-    line-height: 22px;
-    padding: 0;
-    border-radius: 3px;
-    margin: 0 3px;
-    text-align: center;
-    vertical-align: top;
-    padding-top: 3px;
-    text-decoration: none;
-    vertical-align: bottom;
-    color: #7c8091;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 14px;
-    line-height: 9px;
-    padding: 0px 08px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
-    background-color: #545454;
-    font-weight: bold;
-    color: white;
-
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
-    background-color: #545454;
-    font-weight: bold;
-    color: white;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-    background: #727e8e;
-    color: #ededed;
-    margin-top: -1px;
-    overflow: inherit;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
-    font-weight: bold;
-    height: unset !important;
-    overflow: inherit
-}
-
-:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
-    flex: 0 0 0%;
-}
-
-:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
-    display: flex;
 }
 
 :host ::ng-deep .block-ui-wrapper {
-    background: rgba(255, 249, 249, 0.5) !important;
+  background: rgba(255, 249, 249, 0.5) !important;
-}
-:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
-   flex: 0 0 0%;
-}
-
-:host ::ng-deep .ngx-datatable {
-  display: -webkit-box;
 }
 

src/app/content/hemat-app/monitoring/room/room.component.html

@@ -4,143 +4,87 @@
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>
     <div class="content-body">
-      <section id="configuration">
+      <section id="social-cards">
-        <div class="row">
+        <div class="row mb-2">
+          <div class="col-md-6">
+            <input type="text" class="form-control" placeholder="Search..." />
+          </div>
+          <div class="col-md-6 text-right">
+            <button
+              class="btn btn-secondary"
+              [routerLink]="['/monitoring/add-new-room']"
+            >
+              <i class="feather ft-plus"></i>&nbsp; Add new room
+            </button>
+          </div>
+        </div>
+        <div class="row mt-2">
           <div
-            class="col-12"
+            class="col-xl-3 col-lg-6 col-12"
-            *blockUI="'zeroConfiguration'; message: 'Loading'"
+            *ngFor="let data of filteredRows"
           >
-            <m-card>
+            <div class="card pull-up">
-              <ng-container mCardHeaderTitle> Room Table </ng-container>
+              <div class="card-content">
-              <ng-container mCardBody>
+                <div class="card-header mb-2">
-                <div class="row mb-2">
+                  <div class="row">
-                  <div class="col-md-6">
+                    <div class="col-12 text-center">
-                    <input
+                      <h5
-                      type="text"
+                        class="text-muted mb-1"
-                      class="form-control"
+                        style="font-family: Montserrat, sans-serif"
-                      placeholder="Search..."
+                      >
-                      [(ngModel)]="searchTerm"
+                        Room Name
-                      (input)="filterRows()"
+                      </h5>
-                    />
+                      <h4
+                        class="text-muted mb-0"
+                        style="font-family: Montserrat, sans-serif"
+                      >
+                        {{ data.product }}
+                      </h4>
+                    </div>
                   </div>
-                  <div class="col-md-6 text-right">
+                  <hr style="border-top: 3px solid #100a0a" />
-                    <button
+                </div>
-                      class="btn btn-secondary"
+                <div class="card-body card_padding">
-                      [routerLink]="['/monitoring/add-new-room']"
+                  <div class="media d-flex">
-                    >
+                    <div class="media-body text-left">
-                      <i class="feather ft-plus"></i>&nbsp; Add new room
+                      <h3 class="info">{{ data.value }} kWh</h3>
-                    </button>
+                      <h6>Consumtion</h6>
+                    </div>
+                    <div>
+                      <i
+                        class="feather ft-server info font-large-2 float-right"
+                      ></i>
+                    </div>
+                  </div>
+                  <div class="mb-0 mt-1">
+                    <ngb-progressbar
+                      height="7px"
+                      width="100%"
+                      type="{{ data.type }}"
+                      value="{{ data.value }}"
+                    ></ngb-progressbar>
                   </div>
                 </div>
-                <div class="card-dashboard">
+              </div>
-                  <ngx-datatable
+              <div class="form-group text-center">
-                    class="bootstrap table-bordered"
+                <button
-                    [limit]="10"
+                  type="button"
-                    [rows]="filteredRows"
+                  class="btn btn-icon btn-outline-primary mr-1"
-                    [columnMode]="'force'"
+                  triggers="hover:click:hover"
-                    [headerHeight]="50"
+                  ngbTooltip="Edit"
-                    [footerHeight]="50"
+                >
-                    [rowHeight]="50"
+                  <i class="feather ft-edit"></i>
-                    fxFlex="auto"
+                </button>
-                    [scrollbarH]="true"
+                <button
-                  >
+                  type="button"
-                    <ngx-datatable-column
+                  class="btn btn-icon btn-outline-primary mr-1"
-                      name="product"
+                  triggers="hover:click:hover"
-                      [flexGrow]="1"
+                  ngbTooltip="Detail"
-                      [minWidth]="90"
+                >
-                    >
+                  <i class="la la-building"></i>
-                      <ng-template ngx-datatable-header-template>
+                </button>
-                        <span>Room Name</span>
+              </div>
-                      </ng-template>
+            </div>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{ value }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="buttonname"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Category</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        <span>
-                          <button
-                            type="button"
-                            class="btn btn-sm btn-outline-primary round"
-                          >
-                            {{ value }}
-                          </button>
-                        </span>
-                      </ng-template>
-                    </ngx-datatable-column>
-
-                    <ngx-datatable-column
-                      name="value"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Popularity</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        <ngb-progressbar
-                          height="7px"
-                          type="danger"
-                          [value]="value"
-                        >
-                        </ngb-progressbar>
-                      </ng-template>
-                    </ngx-datatable-column>
-
-                    <ngx-datatable-column
-                      name="amount"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Amount</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        {{value}}
-                      </ng-template>
-                    </ngx-datatable-column>
-
-                    <ngx-datatable-column
-                      name="Actions"
-                      [flexGrow]="1"
-                      [minWidth]="150"
-                    >
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-rowIndex="rowIndex"
-                        let-row="row"
-                      >
-                        <button
-                          class="btn btn-sm btn-info mr-1"
-                          (click)="viewRow(row)"
-                        >
-                          <i class="ficon feather ft-eye"></i>
-                        </button>
-                      </ng-template>
-                    </ngx-datatable-column>
-                  </ngx-datatable>
-                </div>
-              </ng-container>
-            </m-card>
           </div>
         </div>
       </section>

src/app/content/hemat-app/monitoring/room/room.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: "app-room",
@@ -7,54 +8,31 @@ import { Component, OnInit } from "@angular/core";
 })
 export class RoomComponent implements OnInit {
   public breadcrumb: any;
+  mode: string;
   // filteredRows: any[];
   searchTerm: string = "";
-  firstRow = [
+  ;
-    "../../../assets/images/portrait/small/avatar-s-4.png",
-    "../../../assets/images/portrait/small/avatar-s-5.png",
-    "../../../assets/images/portrait/small/avatar-s-6.png",
-  ];
-  secondRow = [
-    "../../../assets/images/portrait/small/avatar-s-7.png",
-    "../../../assets/images/portrait/small/avatar-s-8.png",
-  ];
-  thirdRow = [
-    "../../../assets/images/portrait/small/avatar-s-1.png",
-    "../../../assets/images/portrait/small/avatar-s-2.png",
-    "../../../assets/images/portrait/small/avatar-s-3.png",
-  ];
-  fourthRow = [
-    "../../../assets/images/portrait/small/avatar-s-11.png",
-    "../../../assets/images/portrait/small/avatar-s-12.png",
-  ];
-  fifthRow = [
-    "../../../assets/images/portrait/small/avatar-s-6.png",
-    "../../../assets/images/portrait/small/avatar-s-4.png",
-  ];
   filteredRows = [
     {
       type: "danger",
-      value: 100,
+      value: 95,
-      product: "iPhone X",
+      product: "Ruang Meeting 1",
-      image: this.firstRow,
       buttonname: "Mobile",
       amount: "$ 1200.00",
       bagde: "+8 more",
     },
     {
-      type: "success",
+      type: "warning",
       value: 75,
-      product: "iPad",
+      product: "Ruang Meeting 2",
-      image: this.secondRow,
       buttonname: "Teblet",
       amount: "$ 1190.00",
       bagde: "+5 more",
     },
     {
-      type: "danger",
+      type: "success",
       value: 65,
-      product: "OnePlus",
+      product: "Ruang Meeting 3",
-      image: this.thirdRow,
       buttonname: "Mobile",
       amount: "$ 999.00",
       bagde: "+3 more",
@@ -62,111 +40,51 @@ export class RoomComponent implements OnInit {
     {
       type: "success",
       value: 55,
-      product: "ZenPad",
+      product: "Dapur",
-      image: this.fourthRow,
       buttonname: "Teblet",
       amount: "$ 1150.00",
     },
     {
-      type: "danger",
+      type: "success",
       value: 45,
-      product: "Pixel 2",
+      product: "Ruang Musola",
-      image: this.fifthRow,
       buttonname: "Mobile",
       amount: "$ 1180.00",
     },
     {
       type: "danger",
-      value: 100,
+      value: 90,
-      product: "iPhone X",
+      product: "Ruang Server",
-      image: this.firstRow,
       buttonname: "Mobile",
       amount: "$ 1200.00",
       bagde: "+8 more",
     },
     {
-      type: "success",
+      type: "warning",
       value: 75,
-      product: "iPad",
+      product: "Ruang Kepala Bagian",
-      image: this.secondRow,
       buttonname: "Teblet",
       amount: "$ 1190.00",
       bagde: "+5 more",
     },
     {
-      type: "danger",
+      type: "success",
       value: 65,
-      product: "OnePlus",
+      product: "Ruang Tengah",
-      image: this.thirdRow,
       buttonname: "Mobile",
       amount: "$ 999.00",
       bagde: "+3 more",
     },
-    {
-      type: "success",
-      value: 55,
-      product: "ZenPad",
-      image: this.fourthRow,
-      buttonname: "Teblet",
-      amount: "$ 1150.00",
-    },
-    {
-      type: "danger",
-      value: 45,
-      product: "Pixel 2",
-      image: this.fifthRow,
-      buttonname: "Mobile",
-      amount: "$ 1180.00",
-    },
-    {
-      type: "danger",
-      value: 100,
-      product: "iPhone X",
-      image: this.firstRow,
-      buttonname: "Mobile",
-      amount: "$ 1200.00",
-      bagde: "+8 more",
-    },
-    {
-      type: "success",
-      value: 75,
-      product: "iPad",
-      image: this.secondRow,
-      buttonname: "Teblet",
-      amount: "$ 1190.00",
-      bagde: "+5 more",
-    },
-    {
-      type: "danger",
-      value: 65,
-      product: "OnePlus",
-      image: this.thirdRow,
-      buttonname: "Mobile",
-      amount: "$ 999.00",
-      bagde: "+3 more",
-    },
-    {
-      type: "success",
-      value: 55,
-      product: "ZenPad",
-      image: this.fourthRow,
-      buttonname: "Teblet",
-      amount: "$ 1150.00",
-    },
-    {
-      type: "danger",
-      value: 45,
-      product: "Pixel 2",
-      image: this.fifthRow,
-      buttonname: "Mobile",
-      amount: "$ 1180.00",
-    },
   ];
   
 
-  constructor() {}
+  constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    console.log(this.mode);
     this.breadcrumb = {
       mainlabel: "Room",
       links: [

src/app/login/login.component.ts

@@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
     if (localStorage.getItem('remember')) {
       this.renderer.removeClass(document.body, 'bg-full-screen-image');
       localStorage.removeItem('currentLayoutStyle');
-      this.router.navigate(['/dashboard/sales']);
+      this.router.navigate(['/monitoring']);
     } else if (localStorage.getItem('currentUser')) {
       // Force logout on login if not remember me
       this.authService.doLogout();
@@ -74,7 +74,7 @@ export class LoginComponent implements OnInit {
         }
         this.setUserInStorage(res);
         localStorage.removeItem('currentLayoutStyle');
-        let returnUrl = '/dashboard/sales';
+        let returnUrl = '/monitoring';
         if (this.returnUrl) {
           returnUrl = this.returnUrl;
         }