overview/sensor-item

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

@@ -1,3 +1,41 @@
-<p>
+<div class="mat-elevation-z4" style="padding:10px">
-  sensor-item-filter works!
+  <!-- Type -->
-</p>
+  <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>

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;
+  }

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() {
   }

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>

src/app/packages/sensor-item/component/list/list.component.html

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

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();
+  });
+});

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() {
+  }
+
+}

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 { }

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>