key-value component
This commit is contained in:
insanity
parent
c205f405d6
commit
62c5fa2b99
@ -0,0 +1,7 @@
|
||||
<div>
|
||||
<span>{{key}}</span>
|
||||
<a *ngIf="clickable" href="javascript:void(0)" (click)="onClick()">
|
||||
<span>{{value}}</span>
|
||||
</a>
|
||||
<span *ngIf="!clickable">{{value}}</span>
|
||||
</div>
|
||||
23
src/app/commons/component/key-value/key-value.component.ts
Normal file
23
src/app/commons/component/key-value/key-value.component.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'of-key-value',
|
||||
templateUrl: './key-value.component.html'
|
||||
})
|
||||
export class KeyValueComponent implements OnInit {
|
||||
|
||||
@Input() key: string;
|
||||
@Input() value: string;
|
||||
@Input() clickable = false;
|
||||
@Output() click = new EventEmitter<string>();
|
||||
|
||||
constructor(
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
onClick() {
|
||||
this.click.emit(this.value);
|
||||
}
|
||||
}
|
||||
18
src/app/commons/component/key-value/key-value.module.ts
Normal file
18
src/app/commons/component/key-value/key-value.module.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { KeyValueComponent } from './key-value.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PrimeNGModules
|
||||
],
|
||||
declarations: [
|
||||
KeyValueComponent,
|
||||
],
|
||||
exports: [
|
||||
KeyValueComponent,
|
||||
]
|
||||
})
|
||||
export class KeyValueModule { }
|
||||
@ -1,72 +1,50 @@
|
||||
<h1>Sensor Alias 출력</h1>
|
||||
<div *ngIf="sensor">
|
||||
<h1>{{sensor.crawler.name}}</h1>
|
||||
|
||||
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #STOPPED>
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="margin: 0 0 1em 0; display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div class="ui-bottom-space-10" dir="rtl">
|
||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
|
||||
</div>
|
||||
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{sensor.id}}">
|
||||
<label>ID</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{sensor.description}}">
|
||||
<label>Description</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{sensor.crawler.name}}">
|
||||
<label>Crawler Type</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{sensor.itemCount}}">
|
||||
<label>Items</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{sensor.createDate | date: 'dd/MM/yyyy'}}">
|
||||
<label>Created at</label>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #STOPPED>
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="margin: 0 0 1em 0; display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div class="ui-g-12 ui-md-9">
|
||||
<h1>Monitored Items</h1>
|
||||
<of-sensor-item-list></of-sensor-item-list>
|
||||
<div class="ui-bottom-space-10" dir="rtl">
|
||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<div class="ui-g form-group">
|
||||
<of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
|
||||
<of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick($event)" ></of-key-value>
|
||||
<of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
|
||||
<of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
|
||||
<of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
|
||||
<of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-9">
|
||||
<h1>Monitored Items</h1>
|
||||
<of-sensor-item-list></of-sensor-item-list>
|
||||
</div>
|
||||
</div>
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
</div>
|
||||
@ -61,5 +61,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onTargetClick(event) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import { COMPONENTS } from './component';
|
||||
import { SERVICES } from './service';
|
||||
import { SensorStoreModule } from './sensor-store.module';
|
||||
import { SensorItemModule } from '../sensor-item/sensor-item.module';
|
||||
import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
|
||||
// import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
|
||||
// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
|
||||
// import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
|
||||
@ -16,9 +17,10 @@ import { SensorItemModule } from '../sensor-item/sensor-item.module';
|
||||
FormsModule,
|
||||
SensorStoreModule,
|
||||
PrimeNGModules,
|
||||
SensorItemModule
|
||||
SensorItemModule,
|
||||
// MetaCrawlerModule,
|
||||
// MetaSensorDisplayItemModule,
|
||||
KeyValueModule
|
||||
],
|
||||
declarations: [
|
||||
COMPONENTS,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user