This commit is contained in:
crusader 2018-09-29 00:34:38 +09:00
parent 578a2af303
commit c1f532e2a9
9 changed files with 72 additions and 44 deletions

View File

@ -6,6 +6,7 @@ import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetect
selector: '[of-auto-height]'
})
export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
@Input() key: string;
@Input() footerElement = null;
@HostListener('window:resize', ['$event'])
@ -29,6 +30,10 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
ngOnDestroy(): void {
}
onVisible(event) {
console.log('visibilitychange');
}
/**
* forceCalculate
*/

View File

@ -25,7 +25,6 @@ import { SERVICES } from '../commons/service';
AppRoutingModule,
AppStoreModule,
],
providers: [
...SERVICES,

View File

@ -70,7 +70,7 @@
</p-tabPanel>
<p-tabPanel header="Ports" *ngIf="host.portList">
<div of-auto-height>
<div of-auto-height key="2">
<perfect-scrollbar>
<ul class="key-value">
<li *ngFor="let port of host.portList | sort: 'portNumber'">

View File

@ -1,4 +1,4 @@
import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
import { of } from 'rxjs';
import { map, catchError, take } from 'rxjs/operators';
@ -17,7 +17,8 @@ import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.
})
export class HostDetailComponent implements OnChanges {
@Input() host: Host;
@ViewChild(AutoHeightDirective) autoHeightDirective;
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
pingWaiting: boolean;
@ -75,7 +76,12 @@ export class HostDetailComponent implements OnChanges {
}
onTabViewChange($event) {
this.autoHeightDirective.forceCalculate();
const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
}
}

View File

@ -46,7 +46,7 @@
</p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="service.meta">
<div of-auto-height>
<div of-auto-height key="1">
<perfect-scrollbar>
<ul class="detail-content-meta-title">
<li *ngFor="let key of service.meta | objectKeys">
@ -105,8 +105,6 @@
</p-table>
</div>
</p-tabPanel>
</p-tabView>

View File

@ -1,4 +1,4 @@
import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
import { Service } from '@overflow/model/discovery';
import { PingResult } from '@overflow/model/ping';
import { ProbeService } from '../service/probe.service';
@ -15,7 +15,7 @@ export class ServiceDetailComponent implements OnChanges {
@Input() service: Service;
@ViewChild(AutoHeightDirective) autoHeightDirective;
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
pingWaiting: boolean;
@ -36,10 +36,6 @@ export class ServiceDetailComponent implements OnChanges {
this.deadline = 1;
}
onTabViewChange($event) {
this.autoHeightDirective.forceCalculate();
}
ngOnChanges(simpleChanges: SimpleChanges): void {
this.pingResult = null;
}
@ -75,4 +71,13 @@ export class ServiceDetailComponent implements OnChanges {
.subscribe();
}
onTabViewChange($event) {
const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
}
}

View File

@ -17,34 +17,36 @@
<p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
<p-tabPanel header="General">
<perfect-scrollbar>
<ul class="key-value">
<li *ngIf="zone.iface">
Interface
<span class="meta-value">{{zone.iface}}</span>
</li>
<li *ngIf="zone.mac">
Mac Address
<span class="meta-value">{{zone.mac}}</span>
</li>
<li *ngIf="zone.metaIPType">
IP Version
<span class="meta-value">{{zone.metaIPType.key}}</span>
</li>
<li *ngIf="zone.network">
Network
<span class="meta-value">{{zone.network}}</span>
</li>
<li *ngIf="zone.network">
IP Range
<span class="meta-value">{{ipRange}}</span>
</li>
</ul>
</perfect-scrollbar>
<div of-auto-height key="0">
<perfect-scrollbar>
<ul class="key-value">
<li *ngIf="zone.iface">
Interface
<span class="meta-value">{{zone.iface}}</span>
</li>
<li *ngIf="zone.mac">
Mac Address
<span class="meta-value">{{zone.mac}}</span>
</li>
<li *ngIf="zone.metaIPType">
IP Version
<span class="meta-value">{{zone.metaIPType.key}}</span>
</li>
<li *ngIf="zone.network">
Network
<span class="meta-value">{{zone.network}}</span>
</li>
<li *ngIf="zone.network">
IP Range
<span class="meta-value">{{ipRange}}</span>
</li>
</ul>
</perfect-scrollbar>
</div>
</p-tabPanel>
<p-tabPanel header="Hosts">
<div of-auto-height>
<div of-auto-height key="1">
<perfect-scrollbar>
<ul class="key-value">
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
@ -57,7 +59,5 @@
</perfect-scrollbar>
</div>
</p-tabPanel>
</p-tabView>
</div>

View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
import { Component, Input, OnInit, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
import { Zone, Host } from '@overflow/model/discovery';
import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
@ -14,7 +14,7 @@ export class ZoneDetailComponent implements OnInit {
@Input() zone: Zone;
@Output() otherHostSelect = new EventEmitter<Host>();
@ViewChild(AutoHeightDirective) autoHeightDirective;
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
ipRange: string;
@ -36,7 +36,12 @@ export class ZoneDetailComponent implements OnInit {
}
onTabViewChange($event) {
this.autoHeightDirective.forceCalculate();
const index = String($event.index);
this.autoHeightDirectives.map(item => {
if (item.key === index) {
item.forceCalculate();
}
});
}
}

View File

@ -790,6 +790,12 @@ amdefine@>=0.0.4:
version "1.0.1"
resolved "https://nexus.loafle.net/repository/npm-all/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
angular-page-visibility@^6.1.3:
version "6.1.3"
resolved "https://nexus.loafle.net/repository/npm-all/angular-page-visibility/-/angular-page-visibility-6.1.3.tgz#d2cfaa5a73aec195f393be03cf9fc45f9b293e16"
dependencies:
tslib "^1.9.0"
ansi-align@^2.0.0:
version "2.0.0"
resolved "https://nexus.loafle.net/repository/npm-all/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@ -6498,6 +6504,10 @@ rx@^4.1.0:
version "4.1.0"
resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
rxjs-compat@^6.3.3:
version "6.3.3"
resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.3.tgz#2ab3b9ac0dac0c073749d55fef9c03ea1df2045c"
rxjs@^6.0.0, rxjs@^6.2.2:
version "6.3.3"
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"