overview items

src/app/commons/component/layouts.module.ts

@@ -7,6 +7,8 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
 import { SubMenubarComponent } from './sub-menubar/sub-menubar.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { InfoTableComponent } from './info-table/info-table.component';
+import { SensorSummaryComponent } from './sensor-summary/sensor-summary.component';
+import { SensorItemFilterComponent } from './sensor-item-filter/sensor-item-filter.component';
 
 
 @NgModule({
@@ -14,6 +16,6 @@ import { InfoTableComponent } from './info-table/info-table.component';
     CommonModule,
     FlexLayoutModule,
   ],
-  declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent, InfoTableComponent]
+  declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent, InfoTableComponent, SensorSummaryComponent, SensorItemFilterComponent]
 })
 export class LayoutsModule { }

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html

@@ -0,0 +1,3 @@
+<p>
+  sensor-item-filter works!
+</p>

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.spec.ts

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

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-sensor-item-filter',
+  templateUrl: './sensor-item-filter.component.html',
+  styleUrls: ['./sensor-item-filter.component.scss']
+})
+export class SensorItemFilterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/commons/component/sensor-summary/sensor-summary.component.html

@@ -0,0 +1,36 @@
+<div class="sales-list mat-elevation-z4 ">
+    <mat-toolbar>
+
+        <mat-toolbar-row>
+            <span>Sensor Items Summary</span>
+            <span class="pull-right"></span>
+            <button mat-icon-button>
+                <mat-icon (click)="reload();">refresh</mat-icon>
+            </button>
+        </mat-toolbar-row>
+    </mat-toolbar>
+    <mat-progress-bar *ngIf="showLoader" [color]="'primary'" [mode]="'indeterminate'" [value]="90" [bufferValue]="'10'">
+    </mat-progress-bar>
+    <mat-list>
+        <mat-list-item *ngFor="let status of sensorStatusList" (click)="handleSensorFilterClick(status)">
+            <img matListAvatar [src]="status.icon">
+            <h3> {{status.name}} </h3>
+            <span class="pull-right"></span>
+            <mat-chip-list>
+                <mat-chip *ngIf="status.name=='UP'" color="primary" selected="true">
+                    {{status.count}}
+                </mat-chip>
+                <mat-chip *ngIf="status.name=='DOWN'" color="warn" selected="true">
+                    {{status.count}}
+                </mat-chip>
+                <mat-chip *ngIf="status.name=='WARN'" color="warn" selected="true">
+                    {{status.count}}
+                </mat-chip>
+                <mat-chip *ngIf="status.name=='ERROR'" color="warn" selected="true">
+                    {{status.count}}
+                </mat-chip>
+            </mat-chip-list>
+        </mat-list-item>
+    </mat-list>
+
+</div>

src/app/commons/component/sensor-summary/sensor-summary.component.scss

@@ -0,0 +1,27 @@
+@mixin sensor-summary($theme) {
+    
+    .sensor-list{
+        margin: 10px 5px;
+        background: white;
+    }
+    .pull-right{
+        flex: 1 1 auto;
+    }
+    mat-list-item:hover {
+        background: #e8eaf6;
+        cursor: pointer;
+    }
+    .mat-chip {
+        padding: 1px 13px;
+    }
+    
+}
+.nav-item {
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  cursor: default;
+
+  &:hover {
+    transform: translate(0, -8px);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+  }
+}

src/app/commons/component/sensor-summary/sensor-summary.component.spec.ts

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

src/app/commons/component/sensor-summary/sensor-summary.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-sensor-summary',
+  templateUrl: './sensor-summary.component.html',
+  styleUrls: ['./sensor-summary.component.scss']
+})
+export class SensorSummaryComponent implements OnInit {
+
+  public showLoader = false;
+
+  // icon 상태별 색깔 아이콘으로 교체
+  public sensorStatusList = [
+    {
+      icon: 'https://www.bugsplat.com/images/icons/angular_icon_blue.png',
+      name: 'UP',
+      count: '10',
+    },
+    {
+      icon: 'https://firebase.google.com/_static/4d0ad1dc9e/images/firebase/logo.png',
+      name: 'DOWN',
+      count: '20',
+    },
+    {
+      // tslint:disable-next-line:max-line-length
+      icon: 'https://crunchbase-production-res.cloudinary.com/image/upload/c_lpad,h_256,w_256,f_jpg/v1481031537/j9c8urpwe7uabwmt2qau.png',
+      name: 'WARN',
+      count: 30,
+    },
+    {
+      icon: 'https://www.gstatic.com/images/branding/product/2x/app_maker_64dp.png',
+      name: 'ERROR',
+      count: 40,
+    }
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  reload() {
+    this.showLoader = true;
+    setTimeout(() => {
+      this.showLoader = false;
+    }, 2000);
+  }
+
+  handleSensorFilterClick(t: any) {
+    console.log(t);
+  }
+
+}

src/app/commons/ui/material/material.module.ts

@@ -7,7 +7,8 @@ import {
   MatToolbarModule, MatSnackBarModule, MatSidenavModule,
   MatTabsModule, MatSelectModule, MatRadioModule,
   MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
-  MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule
+  MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
+  MatProgressBarModule
 } from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -18,7 +19,8 @@ const MATERIAL_MODULES: any[] = [
   MatToolbarModule, MatSnackBarModule, MatSidenavModule,
   MatTabsModule, MatSelectModule, MatRadioModule,
   MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
-  MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule
+  MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
+  MatProgressBarModule
 ];
 
 @NgModule({

src/app/pages/overview/overview-page.component.html

@@ -3,11 +3,14 @@
   <div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
 
     <div fxLayoutAlign="start center" fxLayout="row">
-
       <div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
         <of-dashboard-card [dashData]="dash"></of-dashboard-card>
       </div>
+    </div>
 
+    <div fxLayout="row" fxLayoutWrap>
+        <of-sensor-summary fxFlex="60"  fxFlex.lt-sm="100"  fxFlex.sm="100" fxFlex.md="70" ></of-sensor-summary>
+        <of-sensor-item-filter></of-sensor-item-filter>
     </div>
 
   </div>
@@ -17,17 +20,21 @@
       <h3 class="mat-headline" fxFlex="80">Activities</h3>
     </div>
     <mat-divider></mat-divider>
-    <div>
+
-      <mat-list>
+    <perfect-scrollbar>
-        <mat-list-item *ngFor="let message of messages" (click)="handleActivityClick(message)">
+      <div>
-          <img matListAvatar src="assets/images/user-image2.jpg" alt="...">
+        <mat-list>
-          <h4 mat-line>{{message.content}} </h4>
+          <mat-list-item *ngFor="let message of messages" (click)="handleActivityClick(message)">
-          <p mat-line>{{message.date}} {{message.from}}</p>
+            <img matListAvatar src="assets/images/user-image2.jpg" alt="...">
-        </mat-list-item>
+            <h4 mat-line>{{message.content}} </h4>
-      </mat-list>
+            <p mat-line>{{message.date}} {{message.from}}</p>
-    </div>
+          </mat-list-item>
+        </mat-list>
+
+      </div>
+    </perfect-scrollbar>
   </div>
 </div>
 <div>
-  <button mat-raised-button (click)="openDialog()">Pick one</button>
+  <!-- <button mat-raised-button (click)="openDialog()">Pick one</button> -->
 </div>

src/app/pages/overview/overview-page.component.ts

@@ -18,22 +18,62 @@ export class OverviewPageComponent implements OnInit {
 
   public messages = [
     {
-      from: '존버왕김단타',
+      from: '1존버왕김단타',
       content: 'pac코인 여태 안 탄 혹우 있냐',
       date: '2017-01-01'
     },
     {
-      from: '코인왕박손절',
+      from: '2코인왕박손절',
       content: '큉텀이 낳냐 아다가 낳냐',
       date: '2017-01-01'
     },
     {
-      from: '존버왕김단타',
+      from: '3존버왕김단타',
       content: 'pac코인 여태 안 탄 혹우 있냐',
       date: '2017-01-01'
     },
     {
-      from: '코인왕박손절',
+      from: '4코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '5존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '6코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '7존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '8코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '9존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '10코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '11존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '12코인왕박손절',
       content: '큉텀이 낳냐 아다가 낳냐',
       date: '2017-01-01'
     },

src/app/pages/overview/overview-page.module.ts

@@ -6,17 +6,23 @@ import { DashboardCardComponent } from 'app/commons/component/dashboard-card/das
 import { DashboardCardModule } from 'app/commons/component/dashboard-card/dashboard-card.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
 import { AddDashboardDialogComponent } from './add-dashboard-dialog/add-dashboard-dialog.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { SensorSummaryComponent } from '../../commons/component/sensor-summary/sensor-summary.component';
+import { SensorItemFilterComponent } from '../../commons/component/sensor-item-filter/sensor-item-filter.component';
 
 @NgModule({
   imports: [
     CommonModule,
     OverviewPageRoutingModule,
     DashboardCardModule,
-    MaterialModule
+    MaterialModule,
+    PerfectScrollbarModule
   ],
   declarations: [
     OverviewPageComponent,
-    AddDashboardDialogComponent
+    AddDashboardDialogComponent,
+    SensorSummaryComponent,
+    SensorItemFilterComponent
   ],
   entryComponents: [
     AddDashboardDialogComponent

src/theme/theme.scss

@@ -3,6 +3,7 @@
 @import '~app/commons/component/sidebar/sidebar.component.scss';
 @import '~app/commons/component/menu-item/menu-item.component.scss';
 @import '~app/commons/component/dashboard-card/dashboard-card.component.scss';
+@import '~app/commons/component/sensor-summary/sensor-summary.component.scss';
 
 $mat-light-theme-background: (
   status-bar: map_get($mat-grey, 300),
@@ -56,6 +57,8 @@ of-dashboard-card {
 
 @include angular-material-theme($cdk-theme);
 @include auth($cdk-theme);
+@include sensor-summary($cdk-theme);
+
 
 html {
   height:100%;