sensor / filter

src/app/commons/component/layout/topbar/app.topbar.component.html

@@ -133,7 +133,14 @@
                     <span class="topbar-item-name">Messages</span>
                 </a>
                 <ul class="ultima-menu animated fadeInDown">
-                    <li role="menuitem">
+                    <li role="menuitem" *ngFor="let noti of notis">
+                        <a href="#" class="topbar-message">
+                            <!-- <img src="assets/layout/images/avatar1.png" width="35" /> -->
+                            <span>{{noti.title}}</span>
+                            <span>{{noti.content}}</span>
+                        </a>
+                    </li>
+                    <!-- <li role="menuitem">
                         <a href="#" class="topbar-message">
                             <img src="assets/layout/images/avatar1.png" width="35" />
                             <span>Give me a call</span>
@@ -162,7 +169,7 @@
                             <img src="assets/layout/images/avatar4.png" width="35" />
                             <span>Out of office</span>
                         </a>
-                    </li>
+                    </li> -->
                 </ul>
             </li>
             <li #notifications [ngClass]="{'active-top-menu':app.activeTopbarItem === notifications}">

src/app/commons/component/layout/topbar/app.topbar.component.ts

@@ -1,13 +1,32 @@
-import {Component} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {AppComponent} from 'app/app.component';
+import { AppComponent } from 'app/app.component';
 import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     selector: 'of-topbar',
     templateUrl: './app.topbar.component.html'
 })
-export class AppTopbarComponent {
+export class AppTopbarComponent implements OnInit {
 
-    constructor(public app: PagesComponent) {}
+    notis;
+
+    constructor(public app: PagesComponent) { }
+
+    ngOnInit() {
+        this.notis = [
+            {
+                title: 'Notification 1',
+                content: 'Noti content11111111111111111111111111111111111111111111',
+            },
+            {
+                title: 'Notification 2',
+                content: 'Noti content22222222222',
+            },
+            {
+                title: 'Notification 3',
+                content: 'content3',
+            }
+        ];
+    }
 
 }

src/packages/commons/prime-ng/prime-ng.module.ts

@@ -66,7 +66,8 @@ import { ToolbarModule } from 'primeng/primeng';
 import { TooltipModule } from 'primeng/primeng';
 import { TreeModule } from 'primeng/primeng';
 import { TreeTableModule } from 'primeng/primeng';
-import {CardModule} from 'primeng/card';
+import { CardModule } from 'primeng/card';
+import {DataViewModule} from 'primeng/dataview';
 
 
 const PRIME_NG_MODULES: any[] = [
@@ -137,7 +138,8 @@ const PRIME_NG_MODULES: any[] = [
   TooltipModule,
   TreeModule,
   TreeTableModule,
-  CardModule
+  CardModule,
+  DataViewModule,
 ];
 
 @NgModule({
@@ -148,4 +150,4 @@ const PRIME_NG_MODULES: any[] = [
     PRIME_NG_MODULES
   ],
 })
-export class PrimeNGModules {}
+export class PrimeNGModules { }

src/packages/sensor/component/list/list.component.html

@@ -10,26 +10,72 @@
     <button type="button" label="Add Sensor with Target2(temp)" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget2()"></button>
 </div>
 
+<div class="ui-g-12 ui-md-3">
 
-<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+    <button pButton type="button" label="Search" class="ui-button-secondary" (click)="onSearch()"></button>
-    <ng-template pTemplate="header">
+
-        <tr>
+    <div class="ui-inputgroup">
-            <th>No.</th>
+        <span class="md-inputfield">
-            <th>Description</th>
+            <input type="text" pInputText>
-            <th>Status</th>
+            <label>IP or Application name</label>
-            <th>Crawler</th>
+        </span>
-            <th>Items</th>
+    </div>
-            <th>Created at</th>
+
-        </tr>
+    <div>
-    </ng-template>
+        <p-multiSelect [options]="targetOptions" [(ngModel)]="selectedTargets"></p-multiSelect>
-    <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+        <!-- <p-multiSelect [options]="targetOptions" (onChange)="onTargetFilterSelect($event)"></p-multiSelect> -->
-        <tr [pSelectableRow]="sensor">
+    </div>
-            <td>{{rowIndex + 1}}</td>
+
-            <td>{{sensor.Description}}</td>
+
-            <td>{{sensor.status.name}}</td>
+    <div class="ui-g-12 ui-md-4">
-            <td>{{sensor.crawler.name}}</td>
+        <p-checkbox name="cg" value="Active" label="Active" [(ngModel)]="checkboxValues"></p-checkbox>
-            <td>???</td>
+    </div>
-            <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+    <div class="ui-g-12 ui-md-4">
-        </tr>
+        <p-checkbox name="cg" value="Inactive" label="Inactive" [(ngModel)]="checkboxValues"></p-checkbox>
-    </ng-template>
+    </div>
-</p-table>
+</div>
+
+<div class="ui-g-12 ui-md-9">
+
+    <div class="card card-w-title">
+        <p-dataList [value]="targetSensor" [paginator]="true" styleClass="cars-datalist" [rows]="10">
+            <!-- <p-header>
+                List of Cars
+            </p-header> -->
+            <ng-template let-item pTemplate="item">
+                <div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
+                    <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{item.target.id}} - {{item.target.displayName}}</div>
+                    <div class="car-details" style="display:inline-block;vertical-align:middle">
+                        <div *ngFor="let sensor of item.sensors">
+                            <a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
+                        </div>
+                    </div>
+                    <!-- <button type="button" pButton icon="ui-icon-search" style="margin:24px 24px 0 0;float:right"></button> -->
+                </div>
+            </ng-template>
+        </p-dataList>
+    </div>
+
+    <!-- <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+        <ng-template pTemplate="header">
+            <tr>
+                <th>No.</th>
+                <th>Description</th>
+                <th>Status</th>
+                <th>Crawler</th>
+                <th>Items</th>
+                <th>Created at</th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+            <tr [pSelectableRow]="sensor">
+                <td>{{rowIndex + 1}}</td>
+                <td>{{sensor.Description}}</td>
+                <td>{{sensor.status.name}}</td>
+                <td>{{sensor.crawler.name}}</td>
+                <td>???</td>
+                <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+            </tr>
+        </ng-template>
+    </p-table> -->
+</div>

src/packages/sensor/component/list/list.component.ts

@@ -15,6 +15,7 @@ import { AuthSelector } from 'packages/member/store';
 import { Page, PageParams } from 'app/commons/model';
 import { Target } from 'packages/target/model';
 import { SettingComponent } from '../setting/setting.component';
+import { SelectItem } from 'primeng/primeng';
 
 @Component({
   selector: 'of-sensor-list',
@@ -24,13 +25,19 @@ import { SettingComponent } from '../setting/setting.component';
 export class ListComponent implements OnInit, AfterContentInit {
 
   sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
-  PAGE_SIZE = '10';
+  PAGE_SIZE = '99999';
   totalLength = 0;
   sensorSettingDisplay = false;
 
   sensors: Sensor[];
   target: Target = null;
 
+  targetSensor;
+
+  // filter
+  targetOptions: SelectItem[];
+  selectedTargets: string[] = [];
+
   constructor(private router: Router,
     private store: Store<ListStore.State>,
   ) { }
@@ -40,7 +47,7 @@ export class ListComponent implements OnInit, AfterContentInit {
       (page: Page) => {
         if (page != null) {
           this.sensors = page.content;
-          this.totalLength = page.totalElements;
+          this.generateSensorMap();
         }
       },
       (error: RPCClientError) => {
@@ -71,8 +78,48 @@ export class ListComponent implements OnInit, AfterContentInit {
     );
   }
 
-  onRowSelect(event) {
+  generateSensorMap() {
-    this.router.navigate(['sensor', event.data.id, 'info']);
+    const tempList = [];
+    for (const sensor of this.sensors) {
+      const targetNode = this.existTarget(sensor, tempList);
+      if (targetNode === null) {
+        const sensorsNode = [];
+        sensorsNode.push(sensor);
+        const node = {
+          target: sensor.target,
+          sensors: sensorsNode,
+        };
+
+        tempList.push(node);
+      } else {
+        targetNode.sensors.push(sensor);
+      }
+    }
+    this.totalLength = tempList.length;
+    this.targetSensor = tempList;
+
+    this.generateTargetFilter();
+  }
+
+  generateTargetFilter() {
+    if (this.targetOptions) {
+      return;
+    }
+    const tempList = [];
+    for (const data of this.targetSensor) {
+      tempList.push({ label: data.target.displayName, value: data.target.id });
+    }
+    this.targetOptions = tempList;
+  }
+
+  existTarget(sensor: Sensor, tempList) {
+    let targetNode = null;
+    for (const node of tempList) {
+      if (node.target.id === sensor.target.id) {
+        targetNode = node;
+      }
+    }
+    return targetNode;
   }
 
   onAddSensor() {
@@ -80,6 +127,21 @@ export class ListComponent implements OnInit, AfterContentInit {
     this.sensorSettingDisplay = true;
   }
 
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
+  }
+  onSensorClick(sensor) {
+    this.router.navigate(['sensor', sensor.id, 'info']);
+  }
+
+  onSearch() {
+
+  }
+
+
+
+
+  // Test
   onAddSensorWithTarget() {
     this.target = {
       id: 1,
@@ -99,8 +161,5 @@ export class ListComponent implements OnInit, AfterContentInit {
     };
     this.sensorSettingDisplay = true;
   }
-  onSensorSettingClose() {
-    this.sensorSettingDisplay = false;
-  }
 }
 

src/packages/target/component/list/list.component.html

@@ -1,4 +1,5 @@
 <h1>Targets</h1>
+
 <p-table [value]="infras" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
   <ng-template pTemplate="header">
     <tr>
@@ -20,7 +21,7 @@
       <td>??</td>
       <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
       <td>
-          <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor(infra.target)"></button>
+          <button type="button" label="AddSensor" icon="ui-icon-add" pButton (click)="onAddSensor(infra.target)"></button>
       </td>
     </tr>
   </ng-template>