primgng test

.angular-cli.json

@@ -20,7 +20,10 @@
       "prefix": "of",
       "styles": [
         "theme/theme.scss",
-        "theme/typography.scss"
+        "theme/typography.scss",
+        "../node_modules/font-awesome/css/font-awesome.min.css",
+        "../node_modules/primeng/resources/themes/omega/theme.css",
+        "../node_modules/primeng/resources/primeng.min.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -58,8 +61,8 @@
     "styleExt": "scss",
     "component": {},
     "serve": {
-      "host":"0.0.0.0",
+      "host": "0.0.0.0",
-      "port":4200
+      "port": 4200
     }
   }
-}
+}

package.json

@@ -29,6 +29,7 @@
     "@ngrx/router-store": "^5.2.0",
     "@ngrx/store": "^5.2.0",
     "@ngrx/store-devtools": "^5.2.0",
+    "@types/google.visualization": "^0.0.41",
     "angular-l10n": "^4.1.5",
     "angular-tree-component": "^7.1.0",
     "angularx-qrcode": "^1.0.1",
@@ -41,6 +42,8 @@
     "ngx-infinite-scroll": "^0.8.3",
     "ngx-perfect-scrollbar": "^5.3.1",
     "nvd3": "^1.8.6",
+    "primeng": "^5.2.4",
+    "font-awesome": "^4.7.0",
     "reflect-metadata": "^0.1.12",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.20"

src/app/app-routing.module.ts

@@ -3,8 +3,8 @@ import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { AuthGuard } from './commons/guard/auth.guard';
 
 const routes: Routes = [
-  { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard] },
+  // { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard] },
-  // { path: '', loadChildren: './pages/pages.module#PagesModule' },
+  { path: '', loadChildren: './pages/pages.module#PagesModule' },
   { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
   { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
   // { path: '**', redirectTo: 'errors/404' }

src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html

@@ -5,7 +5,7 @@
       <mat-card-subtitle>Crawler 인증</mat-card-subtitle>
     </mat-card-header>
 
-    <mat-card-content>
+    <mat-card-content *ngIf="inputItems">
       <perfect-scrollbar style="height: 150px">
         <div *ngFor="let inputItem of inputItems">
           <mat-form-field>
@@ -21,7 +21,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxLayoutAlign="end">
+        <div fxLayoutAlign="end" *ngIf="inputItems.length > 0">
           <button mat-raised-button (click)="testConnect()" color="primary">Test</button>
         </div>
       </perfect-scrollbar>

src/packages/sensor/component/setting/setting.component.html

@@ -1,20 +1,20 @@
 <div>
   <div [hidden]="step !== 1">
     <mat-grid-list cols="2" rowHeight="5:1">
-
+<!-- isAllSelectable === 0 ? 3 : 1 -->
-      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightblue">
+      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 3 : 2" style="background-color: lightblue" (click)="onAreaClick(0)">
         <of-target-selector [target]="selectedTarget" (targetSelectEvent)="handleTargetSelection($event)" ></of-target-selector>
       </mat-grid-tile>
 
-      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
+      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral" (click)="onAreaClick(2)">
         <of-crawler-auth [selectedCrawler]="selectedCrawler" (testPassEvent)="handleTest($event)"></of-crawler-auth>
       </mat-grid-tile>
 
-      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey">
+      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey" (click)="onAreaClick(3)">
         <of-sensor-item-selector [selectedCrawler]="selectedCrawler" (itemSelectEvent)="handleItemSelection($event)"></of-sensor-item-selector>
       </mat-grid-tile>
 
-      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightpink">
+      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 2 : 3" style="background-color: lightpink" (click)="onAreaClick(1)">
         <of-crawler-selector [selectedTarget]="selectedTarget" (crawlerSelectEvent)="handleCrawlerSelection($event)"></of-crawler-selector>
       </mat-grid-tile>
 

src/packages/sensor/component/setting/setting.component.ts

@@ -24,6 +24,8 @@ export class SettingComponent implements OnInit, DoCheck {
   selectedSensorDisplayItems: Set<MetaSensorDisplayItem> = null;
   step = 1;
   nextable = false;
+  focus = 0;
+  isAllSelectable = true;
 
   sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
 
@@ -33,6 +35,7 @@ export class SettingComponent implements OnInit, DoCheck {
     private keyListStore: Store<SensorItemKeyListStore.State>,
   ) {
     if (data !== null) {
+      this.isAllSelectable = false;
       this.selectedTarget = data.infra.target;
     }
   }
@@ -101,4 +104,8 @@ export class SettingComponent implements OnInit, DoCheck {
   handleTest(b: boolean) {
     this.testPassed = b;
   }
+
+  onAreaClick(no: number) {
+    this.focus = no;
+  }
 }

yarn.lock

@@ -409,6 +409,10 @@
   version "7946.0.2"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.2.tgz#0bd0a01ef04e813c2b7580318da9e37c2eadea9c"
 
+"@types/google.visualization@^0.0.41":
+  version "0.0.41"
+  resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.41.tgz#cd4858a66fd039e31586ef3989c59ab0e42d0392"
+
 "@types/jasmine@*", "@types/jasmine@~2.8.5":
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.5.tgz#96e58872583fa80c7ea0dd29024b180d5e133678"
@@ -2842,6 +2846,10 @@ follow-redirects@1.0.0:
   dependencies:
     debug "^2.2.0"
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -4757,6 +4765,14 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+ng2-google-charts@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-3.4.0.tgz#9e3770fbed673fea56e12b22983675c387e8d131"
+
+ng2-googlechart@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/ng2-googlechart/-/ng2-googlechart-2.11.0.tgz#07b492fc8c35d2795634685924518ab610b581e7"
+
 ng2-odometer@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/ng2-odometer/-/ng2-odometer-1.1.3.tgz#27209e7ed225790120635aba2281b8a9318b6f47"
@@ -5735,6 +5751,10 @@ pretty-error@^2.0.2:
     renderkid "^2.0.1"
     utila "~0.4"
 
+primeng@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/primeng/-/primeng-5.2.4.tgz#79d9b030ea37fdeb23284dcbbca3b89dddc3e91e"
+
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"