ngx-infinite-scroll module

This commit is contained in:
insanity 2018-03-29 15:05:14 +09:00
parent 464f7b184e
commit 969d1029b4
9 changed files with 171 additions and 28 deletions

View File

@ -29,20 +29,21 @@
"@ngrx/router-store": "^5.2.0",
"@ngrx/store": "^5.2.0",
"@ngrx/store-devtools": "^5.2.0",
"angular-l10n": "^4.1.5",
"angular-tree-component": "^7.1.0",
"angularx-qrcode": "^1.0.1",
"angular-l10n": "^4.1.5",
"core-js": "^2.5.3",
"d3": "^3.5.17",
"hammerjs": "^2.0.8",
"ip-cidr": "^1.1.2",
"ng2-odometer": "^1.1.3",
"ngx-cookie-service": "^1.0.10",
"ngx-infinite-scroll": "^0.8.3",
"ngx-perfect-scrollbar": "^5.3.1",
"nvd3": "^1.8.6",
"reflect-metadata": "^0.1.12",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20",
"ip-cidr": "^1.1.2"
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "1.6.5",

View File

@ -24,15 +24,12 @@ import { AppSummaryCardModule } from 'packages/commons/component/app-summary-car
FormsModule,
PerfectScrollbarModule,
MaterialModule,
DashboardCardModule,
SensorSummaryModule,
SensorItemFilterModule,
HostSummaryCardModule,
AppSummaryCardModule,
SensorItemModule,
OverviewPageRoutingModule,
],

View File

@ -1,12 +1,12 @@
<div class="mat-elevation-z4" style="padding:10px">
<!-- Type -->
<div>
<!-- <div>
<mat-radio-group class="types-radio-group" [(ngModel)]="selectedType">
<mat-radio-button class="types-radio-button" *ngFor="let t of types" [value]="t">
{{t}}
</mat-radio-button>
</mat-radio-group>
</div>
</div> -->
<!-- Host range -->
<div *ngIf="selectedType == 'All' || selectedType == 'Host'">
<mat-form-field class="example-full-width">
@ -18,13 +18,13 @@
</mat-form-field>
</div>
<!-- Crawler type -->
<div *ngIf="selectedType == 'All' || selectedType == 'Application'">
<!-- <div *ngIf="selectedType == 'All' || selectedType == 'Application'">
<mat-radio-group class="types-radio-group" [(ngModel)]="crawlerType">
<mat-radio-button class="types-radio-button" *ngFor="let c of crawlerTypes" [value]="c">
{{c}}
</mat-radio-button>
</mat-radio-group>
</div>
</div> -->
<!-- Applications -->
<div *ngIf="selectedType == 'All' || selectedType == 'Application'">
<mat-form-field>

View File

@ -7,6 +7,7 @@
</form>
</div>
<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
** probe가 설치된 host와 그 probe가 가장 상위에 나와야 함 **
<div class="box up"></div>Up
<div class="box down"></div>Down
<div class="box warn"></div>Warn
@ -16,7 +17,7 @@
<div *ngIf="loading" fxLayoutAlign="center">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading">
<div *ngIf="!loading" class="search-result" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
<div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
<mat-toolbar>
<mat-toolbar-row>

View File

@ -71,3 +71,8 @@ cursor: default;
.full-width {
width: 100%;
}
.search-result {
height: 80%;
overflow-y: scroll;
}

View File

@ -21,7 +21,7 @@ interface HostData {
@Component({
selector: 'of-infra-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit, AfterContentInit {
@ -31,6 +31,8 @@ export class MapComponent implements OnInit, AfterContentInit {
totalList: Infra[];
loading = false;
page = 1;
constructor(
private listStore: Store<ListStore.State>,
public dialog: MatDialog
@ -80,7 +82,7 @@ export class MapComponent implements OnInit, AfterContentInit {
portType: i % 2 ? 'TCP' : 'UDP',
port: i,
vendor: {
name: String('vendor' + i + '-' + j)
name: String('Service name' + i + '-' + j)
}
};
list.push(service);
@ -157,7 +159,7 @@ export class MapComponent implements OnInit, AfterContentInit {
this.listStore.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => {
const pageParams: PageParams = {
pageNo: '0',
pageNo: this.page + '',
countPerPage: '9999999',
sortCol: 'id',
sortDirection: 'descending'
@ -200,4 +202,9 @@ export class MapComponent implements OnInit, AfterContentInit {
this.hostDataList.length = 0;
this.generateInfraHostData(filterStr);
}
onScroll() {
console.log(this.page);
this.page++;
}
}

View File

@ -11,6 +11,7 @@ import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting
import { SensorModule } from '../sensor/sensor.module';
import { SettingComponent } from '../sensor/component/setting/setting.component';
import { FormsModule } from '@angular/forms';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@NgModule({
imports: [
@ -18,7 +19,8 @@ import { FormsModule } from '@angular/forms';
MaterialModule,
InfraStoreModule,
SensorModule,
FormsModule
FormsModule,
InfiniteScrollModule
],
declarations: [
COMPONENTS,

144
yarn.lock
View File

@ -573,6 +573,10 @@ angularx-qrcode@^1.0.1:
dependencies:
qrcodejs2 "0.0.2"
ansi-escapes@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
ansi-html@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
@ -858,6 +862,14 @@ babel-messages@^6.23.0:
dependencies:
babel-runtime "^6.22.0"
babel-polyfill@6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
dependencies:
babel-runtime "^6.22.0"
core-js "^2.4.0"
regenerator-runtime "^0.10.0"
babel-runtime@^6.22.0, babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@ -1363,7 +1375,7 @@ center-align@^0.1.1:
align-text "^0.1.3"
lazy-cache "^1.0.3"
chalk@^1.1.1, chalk@^1.1.3:
chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
dependencies:
@ -1389,6 +1401,10 @@ chalk@~2.2.0:
escape-string-regexp "^1.0.5"
supports-color "^4.0.0"
chardet@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
chokidar@^1.4.1, chokidar@^1.4.2, chokidar@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@ -1461,6 +1477,16 @@ clean-css@4.1.x:
dependencies:
source-map "0.5.x"
cli-cursor@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
dependencies:
restore-cursor "^2.0.0"
cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -2288,6 +2314,12 @@ encodeurl@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@ -2633,6 +2665,14 @@ extend@3, extend@^3.0.0, extend@~3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
external-editor@^2.0.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
dependencies:
chardet "^0.4.0"
iconv-lite "^0.4.17"
tmp "^0.0.33"
extglob@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
@ -2693,6 +2733,12 @@ faye-websocket@~0.11.0:
dependencies:
websocket-driver ">=0.5.1"
figures@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
dependencies:
escape-string-regexp "^1.0.5"
file-loader@^1.1.5:
version "1.1.6"
resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.6.tgz#7b9a8f2c58f00a77fddf49e940f7ac978a3ea0e8"
@ -3376,7 +3422,7 @@ iconv-lite@0.4.15:
version "0.4.15"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
iconv-lite@0.4.19:
iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@ -3468,6 +3514,24 @@ inline-source-map@~0.6.0:
dependencies:
source-map "~0.5.3"
inquirer@3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
dependencies:
ansi-escapes "^1.1.0"
chalk "^1.0.0"
cli-cursor "^2.1.0"
cli-width "^2.0.0"
external-editor "^2.0.1"
figures "^2.0.0"
lodash "^4.3.0"
mute-stream "0.0.7"
run-async "^2.2.0"
rx "^4.1.0"
string-width "^2.0.0"
strip-ansi "^3.0.0"
through "^2.3.6"
insert-module-globals@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.0.1.tgz#c03bf4e01cb086d5b5e5ace8ad0afe7889d638c3"
@ -3735,6 +3799,10 @@ is-primitive@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
is-promise@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
is-property@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
@ -3745,7 +3813,7 @@ is-regex@^1.0.4:
dependencies:
has "^1.0.1"
is-stream@^1.1.0:
is-stream@^1.0.1, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@ -4550,7 +4618,7 @@ minimist@0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@ -4651,6 +4719,10 @@ multicast-dns@^6.0.1:
dns-packet "^1.0.1"
thunky "^0.1.0"
mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
nan@^2.3.0, nan@^2.3.2:
version "2.8.0"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
@ -4695,6 +4767,12 @@ ngx-cookie-service@^1.0.10:
version "1.0.10"
resolved "https://registry.yarnpkg.com/ngx-cookie-service/-/ngx-cookie-service-1.0.10.tgz#dc17ff4f1a0224cf3b0c7a7f52bff2b798396e3d"
ngx-infinite-scroll@^0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.8.3.tgz#387000fc5e34ee5ee5164db6cb0a959c77bd3819"
dependencies:
opencollective "^1.0.3"
ngx-perfect-scrollbar@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc"
@ -4708,6 +4786,13 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-fetch@1.6.3:
version "1.6.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-forge@0.6.33:
version "0.6.33"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
@ -5000,6 +5085,30 @@ once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
dependencies:
wrappy "1"
onetime@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
dependencies:
mimic-fn "^1.0.0"
opencollective@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
dependencies:
babel-polyfill "6.23.0"
chalk "1.1.3"
inquirer "3.0.6"
minimist "1.2.0"
node-fetch "1.6.3"
opn "4.0.2"
opn@4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
dependencies:
object-assign "^4.0.1"
pinkie-promise "^2.0.0"
opn@^5.1.0, opn@~5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
@ -5966,6 +6075,10 @@ regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
regenerator-runtime@^0.10.0:
version "0.10.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
@ -6167,6 +6280,13 @@ resolve@^1.1.3, resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.3.2:
dependencies:
path-parse "^1.0.5"
restore-cursor@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
dependencies:
onetime "^2.0.0"
signal-exit "^3.0.2"
right-align@^0.1.1:
version "0.1.3"
resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@ -6186,12 +6306,22 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^2.0.0"
inherits "^2.0.1"
run-async@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
dependencies:
is-promise "^2.1.0"
run-queue@^1.0.0, run-queue@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
dependencies:
aproba "^1.1.1"
rx@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
rxjs@^5.5.2, rxjs@^5.5.6:
version "5.5.6"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.6.tgz#e31fb96d6fd2ff1fd84bcea8ae9c02d007179c02"
@ -6435,7 +6565,7 @@ shell-quote@^1.6.1:
array-reduce "~0.0.0"
jsonify "~0.0.0"
signal-exit@^3.0.0:
signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -6956,7 +7086,7 @@ through2@^2.0.0:
readable-stream "^2.1.5"
xtend "~4.0.1"
"through@>=2.2.7 <3", through@X.X.X:
"through@>=2.2.7 <3", through@X.X.X, through@^2.3.6:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@ -6998,7 +7128,7 @@ tmp@0.0.30:
dependencies:
os-tmpdir "~1.0.1"
tmp@0.0.33, tmp@0.0.x:
tmp@0.0.33, tmp@0.0.x, tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
dependencies: