target detail

src/app/packages/target/component/detail/detail.component.html

@@ -0,0 +1,43 @@
+<div fxLayout="column" fxLayoutWrap style=" padding: 8px;">
+
+
+
+  <div fxLayout="column" fxLayout.xs="column" style="background-color: white;padding: 10px;">
+
+    <div class="mat-headline" style="margin: 20px; border-bottom: 1px solid #dddddd;">
+      TARGET ALIAS
+    </div>
+
+    <div fxLayoutAlign="end">
+      <button mat-raised-button>Check Alive</button>
+      <button mat-raised-button>Traceroute</button>
+    </div>
+
+    <div fxLayout="row" fxLayout.xs="column">
+      <div fxFlex.gt-xs="35" style="padding-top: 10px;">
+        info
+
+      </div>
+
+      <div fxFlex.gt-xs="10"></div>
+
+      <div style="padding: 5px 10px;" fxFlex.gt-xs="55">
+        <div style="height: 300px;">
+
+          <table class="table">
+            <tr *ngFor="let detail of tableData">
+              <td class="mat-subheading-1">{{ detail?.country }}</td>
+              <td class="text-right mat-subheading-1">{{ detail?.sales }}</td>
+              <td class="text-right mat-subheading-1">{{ detail?.percentage }}</td>
+            </tr>
+          </table>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+

src/app/packages/target/component/detail/detail.component.scss

@@ -0,0 +1,27 @@
+.table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+}
+.table tr:first-child td {
+    border-top: none;
+}
+
+.text-right {
+	text-align: right;
+}
+
+th, td {
+    padding: 8px;
+    text-align: left;
+    border-top: 1px solid #ddd;
+}
+.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/packages/target/component/detail/detail.component.spec.ts

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

src/app/packages/target/component/detail/detail.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-target-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+  @Input() sensors = [];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/packages/target/component/list/list.component.ts

@@ -35,7 +35,7 @@ export class ListComponent implements OnInit, AfterContentInit {
     const data: Probe[] = new Array();
     for (let i = 0; i < 10; i++) {
       const p: Probe = {
-        id: String('id' + i),
+        id: String(i),
         name: String('name' + i),
         ip: String('ip' + i),
         os: String('os' + i),
@@ -57,6 +57,6 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   handleRowClick(obj: Probe) {
-    this.router.navigate(['probe', obj.id]);
+    this.router.navigate(['target', obj.id]);
   }
 }

src/app/packages/target/target.module.ts

@@ -2,15 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ListComponent } from 'app/packages/target/component/list/list.component';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { DetailComponent } from './component/detail/detail.component';
+import { InfoTableModule } from 'app/commons/component/info-table/info-table.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    MaterialModule
+    MaterialModule,
+    InfoTableModule
   ],
-  declarations: [ListComponent],
+  declarations: [ListComponent, DetailComponent],
   exports: [
-    ListComponent
+    ListComponent,
+    DetailComponent
   ]
 })
 export class TargetModule { }

src/app/pages/pages-routing.module.ts

@@ -14,6 +14,7 @@ const routes: Routes = [
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
       { path: 'sensor-setting', loadChildren: './sensor-setting/sensor-setting-page.module#SensorSettingPageModule' },
+      { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
     ]
   }
 ];

src/app/pages/probe/probe-page-routing.module.ts

@@ -20,4 +20,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class ProbesPageRoutingModule { }
+export class ProbePageRoutingModule { }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-pages-probe',
@@ -10,14 +10,16 @@ export class ProbePageComponent implements OnInit {
 
   tabs = undefined;
 
-  constructor(private router: Router) {
+  constructor(private route: ActivatedRoute, private router: Router) {
   }
 
   ngOnInit() {
+    const id = this.router.url.split('probe/')[1].split('/')[0];
+
     this.tabs = [
-      { label: 'Info', path: this.router.url },
+      { label: 'Info', path: '/probe/' + id },
-      { label: 'Targets', path: this.router.url + '/targets' },
+      { label: 'Targets', path: '/probe/' + id + '/targets' },
-      { label: 'History', path: this.router.url + '/history' },
+      { label: 'History', path: '/probe/' + id + '/history' },
     ];
   }
 

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ProbePageComponent } from './probe-page.component';
-import { ProbesPageRoutingModule } from './probe-page-routing.module';
+import { ProbePageRoutingModule } from './probe-page-routing.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
 import { ProbeModule } from 'app/packages/probe/probe.module';
 import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.module';
@@ -9,7 +9,7 @@ import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.
 @NgModule({
   imports: [
     CommonModule,
-    ProbesPageRoutingModule,
+    ProbePageRoutingModule,
     MaterialModule,
     ProbeModule,
     SubMenubarModule,

src/app/pages/target/target-page-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TargetPageComponent } from './target-page.component';
+
+const routes: Routes = [
+  {
+    path: ':id',
+    component: TargetPageComponent,
+    children: [
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TargetPageRoutingModule { }

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

@@ -0,0 +1 @@
+<of-target-detail></of-target-detail>

src/app/pages/target/target-page.component.spec.ts

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

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-pages-target',
+  templateUrl: './target-page.component.html',
+  styleUrls: ['./target-page.component.scss']
+})
+export class TargetPageComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TargetPageComponent } from './target-page.component';
+import { TargetPageRoutingModule } from './target-page-routing.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { TargetModule } from 'app/packages/target/target.module';
+import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TargetPageRoutingModule,
+    MaterialModule,
+    TargetModule,
+    SubMenubarModule,
+  ],
+  declarations: [
+    TargetPageComponent,
+  ]
+})
+export class TargetPageModule { }