From 26593a150706025d1be29422a74aa3586f2e00e5 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Tue, 27 Feb 2018 16:09:33 +0900
Subject: [PATCH] overview/sensor-item

---
 .../sensor-item-filter.component.html         | 44 +++++++++++++++++--
 .../sensor-item-filter.component.scss         |  8 ++++
 .../sensor-item-filter.component.ts           | 26 ++++++++++-
 .../sensor-summary.component.html             |  2 +-
 .../component/list/list.component.html        |  3 ++
 .../component/list/list.component.scss        |  0
 .../component/list/list.component.spec.ts     | 25 +++++++++++
 .../component/list/list.component.ts          | 15 +++++++
 .../sensor-item/sensor-item.module.ts         | 16 +++++++
 .../overview/overview-page.component.html     |  3 +-
 10 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100644 src/app/packages/sensor-item/component/list/list.component.html
 create mode 100644 src/app/packages/sensor-item/component/list/list.component.scss
 create mode 100644 src/app/packages/sensor-item/component/list/list.component.spec.ts
 create mode 100644 src/app/packages/sensor-item/component/list/list.component.ts
 create mode 100644 src/app/packages/sensor-item/sensor-item.module.ts

diff --git a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html
index c86dfdb..7cea3cd 100644
--- a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html
+++ b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html
@@ -1,3 +1,41 @@
-<p>
-  sensor-item-filter works!
-</p>
+<div class="mat-elevation-z4" style="padding:10px">
+  <!-- Type -->
+  <div>
+    <mat-radio-group class="types-radio-group" [(ngModel)]="selectedType">
+      <mat-radio-button class="types-radio-button" *ngFor="let t of types" [value]="t">
+        {{t}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <!-- Host range -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Host'">
+    <mat-form-field class="example-full-width">
+      <input matInput placeholder="From" value="">
+    </mat-form-field>
+    ~
+    <mat-form-field class="example-full-width">
+      <input matInput placeholder="To" value="">
+    </mat-form-field>
+  </div>
+  <!-- Crawler type -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Application'">
+    <mat-radio-group class="types-radio-group" [(ngModel)]="crawlerType">
+      <mat-radio-button class="types-radio-button" *ngFor="let c of crawlerTypes" [value]="c">
+        {{c}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <!-- Applications -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Application'">
+    <mat-form-field>
+      <mat-select placeholder="Applications">
+        <mat-option *ngFor="let app of applications" [value]="app.value">
+          {{ app.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div fxLayoutAlign="end">
+    <button mat-raised-button color="primary">Search</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss
index e69de29..909b5be 100644
--- a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss
+++ b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss
@@ -0,0 +1,8 @@
+types-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .types-radio-button {
+    margin: 5px;
+  }
\ No newline at end of file
diff --git a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts
index 03b297c..f4984e3 100644
--- a/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts
+++ b/src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts
@@ -7,7 +7,31 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SensorItemFilterComponent implements OnInit {
 
-  constructor() { }
+  selectedType: string;
+
+  types = [
+    'All',
+    'Host',
+    'Application',
+  ];
+
+  crawlerTypes = [
+    'All',
+    'WMI',
+    'SSH',
+    'SNMP'
+  ];
+
+  applications = [
+    {value: 'all', name: 'All'},
+    {value: 'mysql', name: 'MySQL'},
+    {value: 'redis', name: 'Redis'},
+    {value: 'tomcat', name: 'Tomcat'}
+  ];
+
+  constructor() {
+    this.selectedType = 'All';
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/commons/component/sensor-summary/sensor-summary.component.html b/src/app/commons/component/sensor-summary/sensor-summary.component.html
index 4a607d1..a97b894 100644
--- a/src/app/commons/component/sensor-summary/sensor-summary.component.html
+++ b/src/app/commons/component/sensor-summary/sensor-summary.component.html
@@ -1,4 +1,4 @@
-<div class="sales-list mat-elevation-z4 ">
+<div class="mat-elevation-z4 ">
     <mat-toolbar>
         <mat-toolbar-row>
             <span>Sensor Items Summary</span>
diff --git a/src/app/packages/sensor-item/component/list/list.component.html b/src/app/packages/sensor-item/component/list/list.component.html
new file mode 100644
index 0000000..2c78552
--- /dev/null
+++ b/src/app/packages/sensor-item/component/list/list.component.html
@@ -0,0 +1,3 @@
+<p>
+  list works!
+</p>
diff --git a/src/app/packages/sensor-item/component/list/list.component.scss b/src/app/packages/sensor-item/component/list/list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/packages/sensor-item/component/list/list.component.spec.ts b/src/app/packages/sensor-item/component/list/list.component.spec.ts
new file mode 100644
index 0000000..beacd15
--- /dev/null
+++ b/src/app/packages/sensor-item/component/list/list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/packages/sensor-item/component/list/list.component.ts b/src/app/packages/sensor-item/component/list/list.component.ts
new file mode 100644
index 0000000..fa28354
--- /dev/null
+++ b/src/app/packages/sensor-item/component/list/list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/packages/sensor-item/sensor-item.module.ts b/src/app/packages/sensor-item/sensor-item.module.ts
new file mode 100644
index 0000000..80bcbd0
--- /dev/null
+++ b/src/app/packages/sensor-item/sensor-item.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+  ],
+  declarations: [
+  ],
+  exports: [
+  ]
+})
+export class SensorItemModule { }
diff --git a/src/app/pages/overview/overview-page.component.html b/src/app/pages/overview/overview-page.component.html
index d90362f..ddbf726 100644
--- a/src/app/pages/overview/overview-page.component.html
+++ b/src/app/pages/overview/overview-page.component.html
@@ -14,10 +14,11 @@
 
     <div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
       <of-sensor-summary fxFlex="40" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70"></of-sensor-summary>
-      <of-sensor-item-filter></of-sensor-item-filter>
+      <of-sensor-item-filter fxFlex="60"></of-sensor-item-filter>
     </div>
 
     <div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
+        <!-- <of-sensor-item-table></of-sensor-item-table> -->
         <button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
     </div>