penyesuaian UI device

src/app/_layout/settings/menu-settings.config.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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