sensor config popup is in progress

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' },
 ];

src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts

@@ -4,14 +4,14 @@ import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
 
 export interface MetaCrawlerInputItem {
   id?: number;
-  inputType: MetaInputType;
+  inputType?: MetaInputType;
-  crawler: MetaCrawler;
+  crawler?: MetaCrawler;
-  description: string;
+  description?: string;
-  name: string;
+  name?: string;
-  createDate: Date;
+  createDate?: Date;
-  required: boolean;
+  required?: boolean;
-  defaultValue: string;
+  defaultValue?: string;
-  pattern: string;
+  pattern?: string;
-  keyName: string;
+  keyName?: string;
-  keyValue: string;
+  keyValue?: string;
 }

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

@@ -1,6 +1,6 @@
 <div>
-    <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay">
+    <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false">
-        <of-sensor-setting></of-sensor-setting>
+        <of-sensor-setting [selectedTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
     </p-dialog>
 
     <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor()"></button>

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

@@ -10,9 +10,10 @@ import * as SensorStore from '../../store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as ListStore from '../../store/list';
 import { sensorListSelector } from '../../store';
-import { Domain } from '../../../domain/model';
+import { Domain } from 'packages/domain/model';
 import { AuthSelector } from 'packages/member/store';
 import { Page, PageParams } from 'app/commons/model';
+import { Target } from 'packages/target/model';
 
 @Component({
   selector: 'of-sensor-list',
@@ -26,6 +27,8 @@ export class ListComponent implements OnInit, AfterContentInit {
   totalLength = 0;
   sensorSettingDisplay = false;
 
+  target: Target = null;
+
   constructor(private router: Router,
     private store: Store<ListStore.State>,
   ) { }
@@ -41,6 +44,14 @@ export class ListComponent implements OnInit, AfterContentInit {
     //     console.log(error.response.message);
     //   }
     // );
+
+    // Test
+    // this.target = {
+    //   id: 1,
+    //   createDate: new Date(),
+    //   displayName: 'Alredy selected target',
+    //   description: 'Desc..',
+    // };
   }
 
   ngAfterContentInit() {
@@ -73,4 +84,8 @@ export class ListComponent implements OnInit, AfterContentInit {
     this.sensorSettingDisplay = true;
   }
 
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
+  }
+
 }

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

@@ -1,41 +1,13 @@
-<p-panel header="3. Credential">
+<p-panel header="{{title}}">
   <div class="ui-g" style="height: 180px; overflow: auto">
-    <div class="ui-g-12">
+
+    <div class="ui-g-12" *ngFor="let item of inputItems">
       <span class="md-inputfield">
         <input id="name" type="text" pInputText />
         <label for="name">User</label>
       </span>
     </div>
-    <div class="ui-g-12">
-      <span class="md-inputfield">
-        <input id="age" type="text" pInputText />
-        <label for="age">Password</label>
-      </span>
-    </div>
-    <div class="ui-g-12">
-      <span class="md-inputfield">
-        <input id="name" type="text" pInputText />
-        <label for="name">User</label>
-      </span>
-    </div>
-    <div class="ui-g-12">
-      <span class="md-inputfield">
-        <input id="age" type="text" pInputText />
-        <label for="age">Password</label>
-      </span>
-    </div>
-    <div class="ui-g-12">
-      <span class="md-inputfield">
-        <input id="name" type="text" pInputText />
-        <label for="name">User</label>
-      </span>
-    </div>
-    <div class="ui-g-12">
-      <span class="md-inputfield">
-        <input id="age" type="text" pInputText />
-        <label for="age">Password</label>
-      </span>
-    </div>
   </div>
-  <button type="button" label="Test" icon="ui-icon-send" pButton></button>
+
+  <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
 </p-panel>

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

@@ -17,50 +17,66 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
 
   inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
   inputItems: MetaCrawlerInputItem[];
+  title: string;
 
-  @Output() testPassEvent = new EventEmitter<boolean>();
+  @Output() credentialPassed = new EventEmitter<boolean>();
+  @Input() crawler: MetaCrawler;
 
-  @Input() selectedCrawler: MetaCrawler;
   constructor(
     private router: Router,
     private listStore: Store<ListStore.State>,
   ) { }
 
   ngOnInit() {
-    this.inputItems$.subscribe(
+    // this.inputItems$.subscribe(
-      (list: MetaCrawlerInputItem[]) => {
+    //   (list: MetaCrawlerInputItem[]) => {
-        if (list !== null) {
+    //     if (list !== null) {
-          if (this.inputItems !== list) {
+    //       if (this.inputItems !== list) {
-            this.testPassEvent.emit(false);
+    //         this.testPassEvent.emit(false);
-          }
+    //       }
-          this.inputItems = list;
+    //       this.inputItems = list;
-        }
+    //     }
-      },
+    //   },
-      (error: RPCClientError) => {
+    //   (error: RPCClientError) => {
-        console.log(error.response.message);
+    //     console.log(error.response.message);
-      }
+    //   }
-    );
+    // );
   }
 
   ngOnChanges() {
-    this.getCrawlerAuthInputItems();
+    // this.getCrawlerAuthInputItems();
+    this.title = '3. Credentials';
+
+    this.inputItems = [];
+    // Temporary data
+    if (null == this.crawler) {
+      return;
+    }
+    this.title += ' for ' + this.crawler.name;
+    for (let i = 0; i < 10; i++) {
+      const item: MetaCrawlerInputItem = {
+
+      };
+      this.inputItems.push(item);
+    }
+
   }
 
   getCrawlerAuthInputItems() {
-    this.listStore.dispatch(new ListStore.ReadAll(this.selectedCrawler));
+    this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
-}
+  }
 
-  testConnect() {
+  testCredentials() {
-    switch (this.selectedCrawler.id) {
+    // switch (this.crawler.id) {
-      case 1:
+    //   case 1:
-        break;
+    //     break;
-      case 2:
+    //   case 2:
-        break;
+    //     break;
-      case 3:
+    //   case 3:
-        break;
+    //     break;
-      default :
+    //   default :
-        break;
+    //     break;
-    }
+    // }
-    this.testPassEvent.emit(true);
+    this.credentialPassed.emit(true);
   }
 }

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

@@ -1,7 +1,7 @@
-<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name">
+<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name"
+  (onSelectionChange)="onSelectionChange($event)">
   <ng-template let-crawler pTemplate="item">
     <div class="ui-helper-clearfix">
-      <!-- <img src="assets/demo/images/car/Audi.gif" style="display:inline-block;margin:2px 0 2px 2px" /> -->
       <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
     </div>
   </ng-template>

src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts

@@ -17,14 +17,14 @@ import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
 export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContentInit {
 
   crawlers$ = this.listStore.pipe(select(ReadAllCrawlerSelector.select('metaCrawlerList')));
-  @Input() selectedTarget: Target;
+  @Input() target: Target;
   crawlers: MetaCrawler[];
-  @Output() crawlerSelectEvent = new EventEmitter<MetaCrawler>();
+  @Output() crawlerSelected = new EventEmitter<MetaCrawler>();
 
   constructor(
     private router: Router,
     private listStore: Store<ListStore.State>,
-  ) {}
+  ) { }
 
   ngOnInit() {
     // this.crawlers$.subscribe(
@@ -38,26 +38,31 @@ export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContent
     //   }
     // );
 
-    // Temporary Data
-    this.crawlers = [];
-    for (let i = 0; i < 10; i++) {
-      const c: MetaCrawler = {
-        id: i,
-        name: 'CrawlerName' + i,
-        description: 'Description' + i,
-      };
-      this.crawlers.push(c);
-    }
   }
 
   ngAfterContentInit() {
-    this.listStore.dispatch(new ListStore.ReadAll());
+    // this.listStore.dispatch(new ListStore.ReadAll());
   }
 
   ngOnChanges() {
+
+    this.crawlers = [];
+    if (null == this.target) {
+      return;
+    }
+
+    // Temporary Data
+    for (let i = 0; i < 4; i++) {
+      const c: MetaCrawler = {
+        id: i,
+        name: 'CrawlerName' + i + ' For ' + this.target.displayName,
+      };
+      this.crawlers.push(c);
+    }
+
   }
 
-  crawlerSelected(crawler: MetaCrawler) {
+  onSelectionChange(event) {
-    this.crawlerSelectEvent.emit(crawler);
+    this.crawlerSelected.emit(event.value[0]);
   }
 }

src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html

@@ -1,4 +1,9 @@
-<p-tree [value]="displayItems" selectionMode="checkbox" [(selection)]="selectedItems"></p-tree>
+<p-panel header="4. Choose sensor items">
+  <div class="ui-g" style="height: 200px; overflow: auto">
+    <p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
+      (onNodeUnselect)="onNodeUnselect($event)"></p-tree>
+  </div>
+</p-panel>
 
 <!-- <div>
   <mat-card>

src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts

@@ -5,9 +5,10 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as ListStore from 'packages/meta/sensor-display-item/store/list';
 import { ReadAllSensorDisplayItemByCrawlerSelector } from 'packages/meta/sensor-display-item/store';
 import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
-import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
-import { MetaSensorItemType } from '../../../../meta/sensor-item-type/model/MetaSensorItemType';
+import { MetaSensorItemType } from 'packages/meta/sensor-item-type/model/MetaSensorItemType';
 import { TreeNode } from 'primeng/primeng';
+import { Target } from 'packages/target/model';
 
 @Component({
   selector: 'of-sensor-item-selector',
@@ -16,12 +17,14 @@ import { TreeNode } from 'primeng/primeng';
 })
 export class SensorItemSelectorComponent implements OnInit, OnChanges {
 
-  @Input() selectedCrawler: MetaCrawler;
+  @Input() target: Target;
-  @Output() itemSelectEvent = new EventEmitter<Set<MetaSensorDisplayItem>>();
+  @Input() crawler: MetaCrawler;
+  @Output() sensorItemsSelected = new EventEmitter<TreeNode[]>();
+
   items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
 
-  selectedItems: MetaSensorDisplayItem[];
+  selectedItems: TreeNode[];
-  treeNode: TreeNode[];
+  itemTreeNode: TreeNode[];
 
   constructor(
     private router: Router,
@@ -29,6 +32,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
+   //  this.selectedItems = new Set();
     // this.items$.subscribe(
     //   (list: MetaSensorDisplayItem[]) => {
     //     if (list !== null) {
@@ -39,6 +43,16 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
     //   }
     // );
 
+  }
+
+  ngOnChanges() {
+    // this.selectedItems.clear();
+    // this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.crawler));
+
+    this.itemTreeNode = [];
+    if (!this.target || !this.crawler) {
+      return;
+    }
     // Temporary data
     const displayItems = [];
     for (let i = 0; i < 10; i++) {
@@ -53,7 +67,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
       const si: MetaSensorDisplayItem = {
         id: i,
         key: 'SensorDisplayItemKey' + i,
-        displayName: 'DisplayName' + i,
+        displayName: 'this.is.display.item.name' + i,
         description: 'Description' + i,
         default: isDefault,
         itemType: t
@@ -65,13 +79,49 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   }
 
   generateTreeData(items) {
+    this.itemTreeNode = [];
+    for (const item of items) {
+      const categoryNode = this.existCategory(item);
+      if (categoryNode === null) {
+        const childrenNode = [];
+        childrenNode.push(this.getChildNode(item));
+        const node = {
+          label: item.itemType.name,
+          children: childrenNode,
+          expanded: true,
+        };
+        this.itemTreeNode.push(node);
+      } else {
+        categoryNode.children.push(this.getChildNode(item));
+      }
+    }
+  }
 
+  getChildNode(item) {
+    const childNode = {
+      label: item.displayName,
+      expandedIcon: item.default ? 'ui-icon-star' : '',
+      collapsedIcon: item.default ? 'ui-icon-star' : '',
+      expanded: true,
+      data: item
+    };
+    return childNode;
+  }
+  existCategory(item: MetaSensorDisplayItem) {
+    let categoryNode = null;
+    for (const node of this.itemTreeNode) {
+      if (node.label === item.itemType.name) {
+        categoryNode = node;
+      }
+    }
+    return categoryNode;
   }
 
 
-  ngOnChanges() {
+  onNodeSelect(event) {
-    // this.checkedSet.clear();
+    this.sensorItemsSelected.emit(this.selectedItems);
-    this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler));
+  }
+  onNodeUnselect(event) {
+   this.sensorItemsSelected.emit(this.selectedItems);
   }
-
 }

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

@@ -1,16 +1,19 @@
-<!-- <p-steps [model]="stepsItems"></p-steps> -->
-
 <div class="ui-g">
   <div class="ui-g-6">
-    <of-target-selector></of-target-selector>
+    <of-target-selector [target]="selectedTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
   </div>
   <div class="ui-g-6">
-    <of-crawler-auth></of-crawler-auth>
+    <of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
   </div>
   <div class="ui-g-6">
-    <of-crawler-selector></of-crawler-selector>
+    <of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
   </div>
   <div class="ui-g-6">
-    <of-sensor-item-selector></of-sensor-item-selector>
+    <of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
   </div>
+</div>
+
+<div>
+  <button pButton class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
+  <button pButton [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { Target } from 'packages/target/model';
 import { Infra } from 'packages/infra/model';
 import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
@@ -9,6 +9,7 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
 import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
 import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
+import { TreeNode } from 'primeng/primeng';
 
 @Component({
     selector: 'of-sensor-setting',
@@ -17,22 +18,16 @@ import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSenso
 })
 export class SettingComponent implements OnInit, DoCheck {
 
+    @Output() close = new EventEmitter();
+    nextable = false;
     sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
-    stepsItems = [
+
-        {
+    @Input() selectedTarget: Target;
-            label: 'Target'
+    selectedCrawler: MetaCrawler;
-        },
+    credentialPassed: boolean;
-        {
+    selectedSensorDisplayItems: MetaSensorDisplayItem[];
-            label: 'Crawler'
+
-        },
+    itemNodes: TreeNode[];
-        {
-            label: 'Credentials'
-        },
-        {
-            label: 'Sensor Items'
-        }
-    ];
-    activeIndex = 1;
 
     constructor(
         private keyListStore: Store<SensorItemKeyListStore.State>,
@@ -40,18 +35,62 @@ export class SettingComponent implements OnInit, DoCheck {
     }
 
     ngOnInit() {
-        this.sensorItemKeys$.subscribe(
+        // this.sensorItemKeys$.subscribe(
-            (list: MetaSensorItemKey[]) => {
+        //     (list: MetaSensorItemKey[]) => {
-                if (list !== null) {
+        //         if (list !== null) {
-                    console.log(list);
+        //             console.log(list);
-                }
+        //         }
-            },
+        //     },
-            (error: RPCClientError) => {
+        //     (error: RPCClientError) => {
-                console.log(error.response.message);
+        //         console.log(error.response.message);
-            }
+        //     }
-        );
+        // );
     }
 
     ngDoCheck() {
+        try {
+            if (
+                this.selectedTarget === null ||
+                this.selectedCrawler === null ||
+                this.itemNodes === null ||
+                this.itemNodes.length === 0 ||
+                !this.credentialPassed
+            ) {
+                this.nextable = false;
+            } else {
+                this.nextable = true;
+            }
+        } catch (exception) {}
+    }
+
+    onCancel() {
+        this.selectedTarget = null;
+        this.selectedCrawler = null;
+        this.credentialPassed = false;
+        this.selectedSensorDisplayItems = null;
+        this.close.emit();
+    }
+
+    onNext() {
+        this.selectedSensorDisplayItems = [];
+        for (const node of this.itemNodes) {
+            if (node.data && node.data !== undefined) {
+                this.selectedSensorDisplayItems.push(node.data);
+            }
+        }
+        console.log(this.selectedSensorDisplayItems);
+    }
+
+    onTargetSelect(t: Target) {
+        this.selectedTarget = t;
+    }
+    onCrawlerSelect(c: MetaCrawler) {
+        this.selectedCrawler = c;
+    }
+    onCredentialPass(b: boolean) {
+        this.credentialPassed = b;
+    }
+    onItemsSelect(nodes: TreeNode[]) {
+        this.itemNodes = nodes;
     }
 }

src/packages/sensor/component/setting/target-selector/target-selector.component.html

@@ -1,11 +1,25 @@
-<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName">
+<div>
-  <ng-template let-target pTemplate="item">
+  <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName"
-    <div class="ui-helper-clearfix">
+    (onSelectionChange)="onSelectionChange($event)">
-      <!-- <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" /> -->
+    <ng-template let-target pTemplate="item">
-      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
+      <div class="ui-helper-clearfix">
+        <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
+        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
+      </div>
+    </ng-template>
+  </p-orderList>
+</div>
+<!-- <div *ngIf="target">
+  <p-panel header="1. Target">
+    <div>
+      {{target.displayName}}
     </div>
-  </ng-template>
+    <div>
-</p-orderList>
+      {{target.description}}
+    </div>
+  </p-panel>
+</div> -->
+
 
 <!-- <div style="width:100%">
   <mat-card>

src/packages/sensor/component/setting/target-selector/target-selector.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { Target } from 'packages/target/model';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
@@ -14,12 +14,12 @@ import { SelectItem } from 'primeng/primeng';
     selector: 'of-target-selector',
     templateUrl: './target-selector.component.html',
 })
-export class TargetSelectorComponent implements OnInit {
+export class TargetSelectorComponent implements OnInit, OnChanges {
 
     targets$ = this.store.pipe(select(ListSelector.select('page')));
 
     @Input() target: Target = null;
-    @Output() targetSelectEvent = new EventEmitter<Target>();
+    @Output() targetSelected = new EventEmitter<Target>();
     targets: Target[] = null;
 
     constructor(
@@ -33,31 +33,24 @@ export class TargetSelectorComponent implements OnInit {
             this.getTargetList();
         } else {
             this.targets.push(this.target);
+            this.targetSelected.emit(this.target);
         }
 
-        this.targets$.subscribe(
+        // this.targets$.subscribe(
-            (page: Page) => {
+        //     (page: Page) => {
-                if (page !== null) {
+        //         if (page !== null) {
-                    this.convertInfraToTarget(page);
+        //             this.convertInfraToTarget(page);
-                }
+        //         }
-            },
+        //     },
-            (error: RPCClientError) => {
+        //     (error: RPCClientError) => {
-                console.log(error.response.message);
+        //         console.log(error.response.message);
-            }
+        //     }
-        );
+        // );
-
-        // Temporary data
-        for (let i = 0; i < 10; i++) {
-            const t: Target = {
-                id: i,
-                displayName: 'DisplayName' + i,
-                createDate: new Date(),
-                description: 'Description' + i,
-            };
-            this.targets.push(t);
-        }
     }
 
+    ngOnChanges() {
+
+    }
 
     convertInfraToTarget(page: Page) {
         for (const infra of page.content) {
@@ -80,10 +73,21 @@ export class TargetSelectorComponent implements OnInit {
         //         console.log(error);
         //     }
         // );
+
+        // Temporary data
+        for (let i = 0; i < 10; i++) {
+            const t: Target = {
+                id: i,
+                displayName: 'DisplayName' + i,
+                createDate: new Date(),
+                description: 'Description' + i,
+            };
+            this.targets.push(t);
+        }
     }
 
-    targetSelected(t: Target) {
+    onSelectionChange(event) {
-        this.targetSelectEvent.emit(t);
+        this.targetSelected.emit(event.value[0]);
     }
 
 }

src/styles.scss

@@ -25,4 +25,9 @@
 
 .ui-button-large {
     font-size: 1.6em !important;
+}
+
+.ui-orderlist-controls {
+    display: none !important;
+    visibility: hidden;
 }