network tab is added
This commit is contained in:
parent
1f5ec4db64
commit
cc8ca99e9e
137
angular.json
137
angular.json
|
@ -3,41 +3,6 @@
|
||||||
"version": 1,
|
"version": 1,
|
||||||
"newProjectRoot": "projects",
|
"newProjectRoot": "projects",
|
||||||
"projects": {
|
"projects": {
|
||||||
"odds-crawler-frontend-common": {
|
|
||||||
"root": "projects/odds-crawler-frontend-common",
|
|
||||||
"sourceRoot": "projects/odds-crawler-frontend-common/src",
|
|
||||||
"projectType": "library",
|
|
||||||
"prefix": "odds-crawler-common",
|
|
||||||
"architect": {
|
|
||||||
"build": {
|
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": "projects/odds-crawler-frontend-common/tsconfig.lib.json",
|
|
||||||
"project": "projects/odds-crawler-frontend-common/ng-package.json"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"test": {
|
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
|
||||||
"options": {
|
|
||||||
"main": "projects/odds-crawler-frontend-common/src/test.ts",
|
|
||||||
"tsConfig": "projects/odds-crawler-frontend-common/tsconfig.spec.json",
|
|
||||||
"karmaConfig": "projects/odds-crawler-frontend-common/karma.conf.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"projects/odds-crawler-frontend-common/tsconfig.lib.json",
|
|
||||||
"projects/odds-crawler-frontend-common/tsconfig.spec.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"odds-crawler-frontend-app": {
|
"odds-crawler-frontend-app": {
|
||||||
"root": "projects/odds-crawler-frontend-app/",
|
"root": "projects/odds-crawler-frontend-app/",
|
||||||
"sourceRoot": "projects/odds-crawler-frontend-app/src",
|
"sourceRoot": "projects/odds-crawler-frontend-app/src",
|
||||||
|
@ -61,9 +26,7 @@
|
||||||
"projects/odds-crawler-frontend-app/src/favicon.ico",
|
"projects/odds-crawler-frontend-app/src/favicon.ico",
|
||||||
"projects/odds-crawler-frontend-app/src/assets"
|
"projects/odds-crawler-frontend-app/src/assets"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": ["projects/odds-crawler-frontend-app/src/styles.scss"],
|
||||||
"projects/odds-crawler-frontend-app/src/styles.scss"
|
|
||||||
],
|
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
"es5BrowserSupport": true
|
"es5BrowserSupport": true
|
||||||
},
|
},
|
||||||
|
@ -118,9 +81,7 @@
|
||||||
"polyfills": "projects/odds-crawler-frontend-app/src/polyfills.ts",
|
"polyfills": "projects/odds-crawler-frontend-app/src/polyfills.ts",
|
||||||
"tsConfig": "projects/odds-crawler-frontend-app/tsconfig.spec.json",
|
"tsConfig": "projects/odds-crawler-frontend-app/tsconfig.spec.json",
|
||||||
"karmaConfig": "projects/odds-crawler-frontend-app/karma.conf.js",
|
"karmaConfig": "projects/odds-crawler-frontend-app/karma.conf.js",
|
||||||
"styles": [
|
"styles": ["projects/odds-crawler-frontend-app/src/styles.scss"],
|
||||||
"projects/odds-crawler-frontend-app/src/styles.scss"
|
|
||||||
],
|
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
"assets": [
|
"assets": [
|
||||||
"projects/odds-crawler-frontend-app/src/favicon.ico",
|
"projects/odds-crawler-frontend-app/src/favicon.ico",
|
||||||
|
@ -135,9 +96,7 @@
|
||||||
"projects/odds-crawler-frontend-app/tsconfig.app.json",
|
"projects/odds-crawler-frontend-app/tsconfig.app.json",
|
||||||
"projects/odds-crawler-frontend-app/tsconfig.spec.json"
|
"projects/odds-crawler-frontend-app/tsconfig.spec.json"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": ["**/node_modules/**"]
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -168,9 +127,45 @@
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
"options": {
|
"options": {
|
||||||
"tsConfig": "projects/odds-crawler-frontend-app-e2e/tsconfig.e2e.json",
|
"tsConfig": "projects/odds-crawler-frontend-app-e2e/tsconfig.e2e.json",
|
||||||
"exclude": [
|
"exclude": ["**/node_modules/**"]
|
||||||
"**/node_modules/**"
|
}
|
||||||
]
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"odds-crawler-frontend-common": {
|
||||||
|
"root": "projects/odds-crawler-frontend-common",
|
||||||
|
"sourceRoot": "projects/odds-crawler-frontend-common/src",
|
||||||
|
"projectType": "library",
|
||||||
|
"prefix": "odds-crawler-common",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"style": "scss"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": "projects/odds-crawler-frontend-common/tsconfig.lib.json",
|
||||||
|
"project": "projects/odds-crawler-frontend-common/ng-package.json"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "projects/odds-crawler-frontend-common/src/test.ts",
|
||||||
|
"tsConfig": "projects/odds-crawler-frontend-common/tsconfig.spec.json",
|
||||||
|
"karmaConfig": "projects/odds-crawler-frontend-common/karma.conf.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"projects/odds-crawler-frontend-common/tsconfig.lib.json",
|
||||||
|
"projects/odds-crawler-frontend-common/tsconfig.spec.json"
|
||||||
|
],
|
||||||
|
"exclude": ["**/node_modules/**"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -208,44 +203,7 @@
|
||||||
"projects/odds-crawler-frontend-layout/tsconfig.lib.json",
|
"projects/odds-crawler-frontend-layout/tsconfig.lib.json",
|
||||||
"projects/odds-crawler-frontend-layout/tsconfig.spec.json"
|
"projects/odds-crawler-frontend-layout/tsconfig.spec.json"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": ["**/node_modules/**"]
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"odds-crawler-frontend-tab": {
|
|
||||||
"root": "projects/odds-crawler-frontend-tab",
|
|
||||||
"sourceRoot": "projects/odds-crawler-frontend-tab/src",
|
|
||||||
"projectType": "library",
|
|
||||||
"prefix": "odds-crawler-tab",
|
|
||||||
"architect": {
|
|
||||||
"build": {
|
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": "projects/odds-crawler-frontend-tab/tsconfig.lib.json",
|
|
||||||
"project": "projects/odds-crawler-frontend-tab/ng-package.json"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"test": {
|
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
|
||||||
"options": {
|
|
||||||
"main": "projects/odds-crawler-frontend-tab/src/test.ts",
|
|
||||||
"tsConfig": "projects/odds-crawler-frontend-tab/tsconfig.spec.json",
|
|
||||||
"karmaConfig": "projects/odds-crawler-frontend-tab/karma.conf.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"projects/odds-crawler-frontend-tab/tsconfig.lib.json",
|
|
||||||
"projects/odds-crawler-frontend-tab/tsconfig.spec.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -255,6 +213,11 @@
|
||||||
"sourceRoot": "projects/odds-crawler-frontend-network/src",
|
"sourceRoot": "projects/odds-crawler-frontend-network/src",
|
||||||
"projectType": "library",
|
"projectType": "library",
|
||||||
"prefix": "odds-crawler-network",
|
"prefix": "odds-crawler-network",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"style": "scss"
|
||||||
|
}
|
||||||
|
},
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||||
|
@ -278,9 +241,7 @@
|
||||||
"projects/odds-crawler-frontend-network/tsconfig.lib.json",
|
"projects/odds-crawler-frontend-network/tsconfig.lib.json",
|
||||||
"projects/odds-crawler-frontend-network/tsconfig.spec.json"
|
"projects/odds-crawler-frontend-network/tsconfig.spec.json"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": ["**/node_modules/**"]
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,9 @@
|
||||||
"build:library": "ng build odds-crawler-frontend-common && npm-run-all -s build:library:*",
|
"build:library": "ng build odds-crawler-frontend-common && npm-run-all -s build:library:*",
|
||||||
"build:library:layout": "ng build odds-crawler-frontend-layout",
|
"build:library:layout": "ng build odds-crawler-frontend-layout",
|
||||||
"build:library:network": "ng build odds-crawler-frontend-network",
|
"build:library:network": "ng build odds-crawler-frontend-network",
|
||||||
"build:library:tab": "ng build odds-crawler-frontend-tab",
|
"build:watch:library": "npm-run-all -p build:watch:library:*",
|
||||||
|
"build:watch:library:layout": "ng build odds-crawler-frontend-layout --watch",
|
||||||
|
"build:watch:library:network": "ng build odds-crawler-frontend-network --watch",
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
"lint": "ng lint",
|
"lint": "ng lint",
|
||||||
"e2e": "ng e2e"
|
"e2e": "ng e2e"
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
||||||
import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
|
import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
|
||||||
import { OddsCrawlerFrontendTabModule } from '@odds-crawler/tab';
|
import { OddsCrawlerFrontendNetworkModule } from '@odds-crawler/network';
|
||||||
|
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppStoreModule } from './app-store.module';
|
import { AppStoreModule } from './app-store.module';
|
||||||
|
@ -17,7 +17,7 @@ import { AppComponent } from './app.component';
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
OddsCrawlerFrontendCommonModule.forRoot(),
|
OddsCrawlerFrontendCommonModule.forRoot(),
|
||||||
OddsCrawlerFrontendLayoutModule.forRoot(),
|
OddsCrawlerFrontendLayoutModule.forRoot(),
|
||||||
OddsCrawlerFrontendTabModule.forRoot(),
|
OddsCrawlerFrontendNetworkModule.forRoot(),
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
AppStoreModule
|
AppStoreModule
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,17 +1,19 @@
|
||||||
|
<button mat-raised-button (click)="onClickAddTab($event)">
|
||||||
|
Add new tab
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<mat-tab-group
|
||||||
|
*ngIf="tabs"
|
||||||
|
[selectedIndex]="tabSelectedIndex"
|
||||||
|
(selectedIndexChange)="onTabSelectedIndexChange($event)"
|
||||||
|
>
|
||||||
|
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
|
||||||
<mat-tab-group>
|
<mat-tab-group>
|
||||||
<mat-tab label="First">
|
<mat-tab label="Network">
|
||||||
<ng-template matTabContent>
|
<ng-template matTabContent>
|
||||||
<odds-crawler-tab-main></odds-crawler-tab-main>
|
<odds-crawler-network-main></odds-crawler-network-main>
|
||||||
</ng-template>
|
|
||||||
</mat-tab>
|
|
||||||
<mat-tab label="Second">
|
|
||||||
<ng-template matTabContent>
|
|
||||||
<odds-crawler-tab-main></odds-crawler-tab-main>
|
|
||||||
</ng-template>
|
|
||||||
</mat-tab>
|
|
||||||
<mat-tab label="Third">
|
|
||||||
<ng-template matTabContent>
|
|
||||||
<odds-crawler-tab-main></odds-crawler-tab-main>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
||||||
|
|
|
@ -6,5 +6,19 @@ import { Component } from '@angular/core';
|
||||||
styleUrls: ['./main.page.component.scss']
|
styleUrls: ['./main.page.component.scss']
|
||||||
})
|
})
|
||||||
export class MainPageComponent {
|
export class MainPageComponent {
|
||||||
title = 'odds-crawler-frontend-app';
|
tabs: string[] = [];
|
||||||
|
tabSelectedIndex: 0;
|
||||||
|
|
||||||
|
onClickAddTab($event) {
|
||||||
|
this.addTab('new');
|
||||||
|
}
|
||||||
|
onTabSelectedIndexChange($event) {}
|
||||||
|
|
||||||
|
addTab(title: string) {
|
||||||
|
this.tabs.push(title);
|
||||||
|
}
|
||||||
|
removeTab(title: string) {
|
||||||
|
const index = this.tabs.indexOf(title);
|
||||||
|
this.tabs.splice(index, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
|
||||||
import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
||||||
import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
|
import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
|
||||||
import { OddsCrawlerFrontendTabModule } from '@odds-crawler/tab';
|
import { OddsCrawlerFrontendNetworkModule } from '@odds-crawler/network';
|
||||||
|
|
||||||
import { COMPONENTS } from './component';
|
import { COMPONENTS } from './component';
|
||||||
import { MainRoutingPageModule } from './main-routing.page.module';
|
import { MainRoutingPageModule } from './main-routing.page.module';
|
||||||
|
@ -15,7 +15,7 @@ import { MainRoutingPageModule } from './main-routing.page.module';
|
||||||
TranslateModule,
|
TranslateModule,
|
||||||
OddsCrawlerFrontendCommonModule,
|
OddsCrawlerFrontendCommonModule,
|
||||||
OddsCrawlerFrontendLayoutModule,
|
OddsCrawlerFrontendLayoutModule,
|
||||||
OddsCrawlerFrontendTabModule,
|
OddsCrawlerFrontendNetworkModule,
|
||||||
MainRoutingPageModule
|
MainRoutingPageModule
|
||||||
],
|
],
|
||||||
declarations: [...COMPONENTS]
|
declarations: [...COMPONENTS]
|
||||||
|
|
|
@ -1,37 +1,21 @@
|
||||||
<div>
|
<form class="filter-form">
|
||||||
<button mat-icon-button>
|
<mat-form-field>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<input matInput placeholder="Filter" />
|
||||||
>favorite</mat-icon
|
</mat-form-field>
|
||||||
>
|
|
||||||
</button>
|
<mat-checkbox>Hide data URLs</mat-checkbox>
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-radio-group aria-label="Select an option">
|
||||||
>favorite</mat-icon
|
<mat-radio-button value="1">All</mat-radio-button>
|
||||||
>
|
<mat-radio-button value="2">XHR</mat-radio-button>
|
||||||
</button>
|
<mat-radio-button value="2">JS</mat-radio-button>
|
||||||
<button mat-icon-button>
|
<mat-radio-button value="2">CSS</mat-radio-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-radio-button value="2">Img</mat-radio-button>
|
||||||
>favorite</mat-icon
|
<mat-radio-button value="2">Media</mat-radio-button>
|
||||||
>
|
<mat-radio-button value="2">Font</mat-radio-button>
|
||||||
</button>
|
<mat-radio-button value="2">Doc</mat-radio-button>
|
||||||
<button mat-icon-button>
|
<mat-radio-button value="2">WS</mat-radio-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-radio-button value="2">Manifest</mat-radio-button>
|
||||||
>favorite</mat-icon
|
<mat-radio-button value="2">Other</mat-radio-button>
|
||||||
>
|
</mat-radio-group>
|
||||||
</button>
|
</form>
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="name">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- status Column -->
|
||||||
|
<ng-container matColumnDef="status">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>status</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- type Column -->
|
||||||
|
<ng-container matColumnDef="type">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>type</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.type }}</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- initiator Column -->
|
||||||
|
<ng-container matColumnDef="initiator">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>initiator</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.initiator }}</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- size Column -->
|
||||||
|
<ng-container matColumnDef="size">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>size</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.size }}</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- time Column -->
|
||||||
|
<ng-container matColumnDef="time">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>time</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{ element.time }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||||
|
</table>
|
|
@ -0,0 +1,7 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.mat-sort-header-sorted {
|
||||||
|
color: black;
|
||||||
|
}
|
|
@ -1,19 +1,19 @@
|
||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { MainComponent } from './main.component';
|
import { IoComponent } from './io.component';
|
||||||
|
|
||||||
describe('tab.MainComponent', () => {
|
describe('network.IoComponent', () => {
|
||||||
let component: MainComponent;
|
let component: IoComponent;
|
||||||
let fixture: ComponentFixture<MainComponent>;
|
let fixture: ComponentFixture<IoComponent>;
|
||||||
|
|
||||||
beforeEach(async(() => {
|
beforeEach(async(() => {
|
||||||
TestBed.configureTestingModule({
|
TestBed.configureTestingModule({
|
||||||
declarations: [MainComponent]
|
declarations: [IoComponent]
|
||||||
}).compileComponents();
|
}).compileComponents();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
fixture = TestBed.createComponent(MainComponent);
|
fixture = TestBed.createComponent(IoComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||||
|
|
||||||
|
export interface NetworkIo {
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
type: string;
|
||||||
|
initiator: string;
|
||||||
|
size: number;
|
||||||
|
time: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: NetworkIo[] = [
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hydrogen',
|
||||||
|
status: '200',
|
||||||
|
type: 'script',
|
||||||
|
initiator: 'index',
|
||||||
|
size: 1024,
|
||||||
|
time: 10
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'odds-crawler-network-io',
|
||||||
|
templateUrl: './io.component.html',
|
||||||
|
styles: ['./io.component.scss']
|
||||||
|
})
|
||||||
|
export class IoComponent implements OnInit {
|
||||||
|
constructor() {}
|
||||||
|
displayedColumns: string[] = [
|
||||||
|
'name',
|
||||||
|
'status',
|
||||||
|
'type',
|
||||||
|
'initiator',
|
||||||
|
'size',
|
||||||
|
'time'
|
||||||
|
];
|
||||||
|
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
||||||
|
|
||||||
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,3 +4,6 @@
|
||||||
<div>
|
<div>
|
||||||
<odds-crawler-network-filter></odds-crawler-network-filter>
|
<odds-crawler-network-filter></odds-crawler-network-filter>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<odds-crawler-network-io></odds-crawler-network-io>
|
||||||
|
</div>
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
odds-crawler-network-io {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -1,32 +1,32 @@
|
||||||
<div>
|
<div>
|
||||||
<button mat-icon-button>
|
<button mat-icon-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-icon>fiber_manual_record</mat-icon>
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
</button>
|
||||||
<button mat-icon-button>
|
<button mat-icon-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-icon>not_interested</mat-icon>
|
||||||
>favorite</mat-icon
|
</button>
|
||||||
>
|
|
||||||
|
<button mat-icon-button>
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<button mat-icon-button>
|
<button mat-icon-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-icon>filter_list</mat-icon>
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
</button>
|
||||||
<button mat-icon-button>
|
<button mat-icon-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-icon>search</mat-icon>
|
||||||
>favorite</mat-icon
|
</button>
|
||||||
>
|
|
||||||
|
View:
|
||||||
|
<button mat-icon-button>
|
||||||
|
<mat-icon>list</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<button mat-icon-button>
|
<button mat-icon-button>
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
<mat-icon>format_list_numbered</mat-icon>
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon aria-label="Example icon-button with a heart icon"
|
|
||||||
>favorite</mat-icon
|
|
||||||
>
|
|
||||||
</button>
|
</button>
|
||||||
|
<mat-checkbox>Group by frame</mat-checkbox>
|
||||||
|
|
||||||
|
<mat-checkbox>Preserve log</mat-checkbox>
|
||||||
|
<mat-checkbox>Disable cache</mat-checkbox>
|
||||||
|
|
||||||
|
<mat-checkbox>Offline Online</mat-checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,8 +8,14 @@ import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
||||||
import { MainComponent } from './component/main.component';
|
import { MainComponent } from './component/main.component';
|
||||||
import { FilterComponent } from './component/filter.component';
|
import { FilterComponent } from './component/filter.component';
|
||||||
import { OptionComponent } from './component/option.component';
|
import { OptionComponent } from './component/option.component';
|
||||||
|
import { IoComponent } from './component/io.component';
|
||||||
|
|
||||||
export const COMPONENTS = [MainComponent, FilterComponent, OptionComponent];
|
export const COMPONENTS = [
|
||||||
|
MainComponent,
|
||||||
|
FilterComponent,
|
||||||
|
OptionComponent,
|
||||||
|
IoComponent
|
||||||
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [...COMPONENTS],
|
declarations: [...COMPONENTS],
|
||||||
|
|
|
@ -1,24 +0,0 @@
|
||||||
# OddsCrawlerFrontendTab
|
|
||||||
|
|
||||||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
|
|
||||||
|
|
||||||
## Code scaffolding
|
|
||||||
|
|
||||||
Run `ng generate component component-name --project odds-crawler-frontend-tab` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project odds-crawler-frontend-tab`.
|
|
||||||
> Note: Don't forget to add `--project odds-crawler-frontend-tab` or else it will be added to the default project in your `angular.json` file.
|
|
||||||
|
|
||||||
## Build
|
|
||||||
|
|
||||||
Run `ng build odds-crawler-frontend-tab` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
||||||
|
|
||||||
## Publishing
|
|
||||||
|
|
||||||
After building your library with `ng build odds-crawler-frontend-tab`, go to the dist folder `cd dist/odds-crawler-frontend-tab` and run `npm publish`.
|
|
||||||
|
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
Run `ng test odds-crawler-frontend-tab` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
||||||
|
|
||||||
## Further help
|
|
||||||
|
|
||||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
|
|
@ -1,32 +0,0 @@
|
||||||
// Karma configuration file, see link for more information
|
|
||||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|
||||||
|
|
||||||
module.exports = function (config) {
|
|
||||||
config.set({
|
|
||||||
basePath: '',
|
|
||||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
|
||||||
plugins: [
|
|
||||||
require('karma-jasmine'),
|
|
||||||
require('karma-chrome-launcher'),
|
|
||||||
require('karma-jasmine-html-reporter'),
|
|
||||||
require('karma-coverage-istanbul-reporter'),
|
|
||||||
require('@angular-devkit/build-angular/plugins/karma')
|
|
||||||
],
|
|
||||||
client: {
|
|
||||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
|
||||||
},
|
|
||||||
coverageIstanbulReporter: {
|
|
||||||
dir: require('path').join(__dirname, '../../coverage/odds-crawler-frontend-tab'),
|
|
||||||
reports: ['html', 'lcovonly'],
|
|
||||||
fixWebpackSourcePaths: true
|
|
||||||
},
|
|
||||||
reporters: ['progress', 'kjhtml'],
|
|
||||||
port: 9876,
|
|
||||||
colors: true,
|
|
||||||
logLevel: config.LOG_INFO,
|
|
||||||
autoWatch: true,
|
|
||||||
browsers: ['Chrome'],
|
|
||||||
singleRun: false,
|
|
||||||
restartOnFileChange: true
|
|
||||||
});
|
|
||||||
};
|
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
|
||||||
"dest": "../../dist/odds-crawler-frontend-tab",
|
|
||||||
"lib": {
|
|
||||||
"entryFile": "src/public-api.ts"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@odds-crawler/tab",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"peerDependencies": {
|
|
||||||
"@angular/common": "^7.2.0",
|
|
||||||
"@angular/core": "^7.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
<mat-tab-group>
|
|
||||||
<mat-tab label="First">
|
|
||||||
<ng-template matTabContent>
|
|
||||||
<odds-crawler-network-main></odds-crawler-network-main>
|
|
||||||
</ng-template>
|
|
||||||
</mat-tab>
|
|
||||||
<mat-tab label="Second">
|
|
||||||
<ng-template matTabContent>
|
|
||||||
<odds-crawler-network-main></odds-crawler-network-main>
|
|
||||||
</ng-template>
|
|
||||||
</mat-tab>
|
|
||||||
<mat-tab label="Third">
|
|
||||||
<ng-template matTabContent>
|
|
||||||
<odds-crawler-network-main></odds-crawler-network-main>
|
|
||||||
</ng-template>
|
|
||||||
</mat-tab>
|
|
||||||
</mat-tab-group>
|
|
|
@ -1,12 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'odds-crawler-tab-main',
|
|
||||||
templateUrl: './main.component.html',
|
|
||||||
styles: ['./main.component.scss']
|
|
||||||
})
|
|
||||||
export class MainComponent implements OnInit {
|
|
||||||
constructor() {}
|
|
||||||
|
|
||||||
ngOnInit() {}
|
|
||||||
}
|
|
|
@ -1,12 +0,0 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { OddsCrawlerFrontendLayoutService } from './odds-crawler-frontend-layout.service';
|
|
||||||
|
|
||||||
describe('OddsCrawlerFrontendLayoutService', () => {
|
|
||||||
beforeEach(() => TestBed.configureTestingModule({}));
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
const service: OddsCrawlerFrontendLayoutService = TestBed.get(OddsCrawlerFrontendLayoutService);
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,9 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class OddsCrawlerFrontendLayoutService {
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
}
|
|
|
@ -1,38 +0,0 @@
|
||||||
import { NgModule, ModuleWithProviders } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
|
|
||||||
import { RouterModule } from '@angular/router';
|
|
||||||
|
|
||||||
import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
|
|
||||||
import { OddsCrawlerFrontendNetworkModule } from '@odds-crawler/network';
|
|
||||||
|
|
||||||
import { MainComponent } from './component/main.component';
|
|
||||||
|
|
||||||
export const COMPONENTS = [MainComponent];
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [...COMPONENTS],
|
|
||||||
imports: [
|
|
||||||
CommonModule,
|
|
||||||
RouterModule,
|
|
||||||
OddsCrawlerFrontendCommonModule,
|
|
||||||
OddsCrawlerFrontendNetworkModule
|
|
||||||
],
|
|
||||||
exports: [...COMPONENTS]
|
|
||||||
})
|
|
||||||
export class OddsCrawlerFrontendTabModule {
|
|
||||||
public static forRoot(): ModuleWithProviders<
|
|
||||||
OddsCrawlerFrontendTabRootModule
|
|
||||||
> {
|
|
||||||
return {
|
|
||||||
ngModule: OddsCrawlerFrontendTabRootModule,
|
|
||||||
providers: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [],
|
|
||||||
exports: []
|
|
||||||
})
|
|
||||||
export class OddsCrawlerFrontendTabRootModule {}
|
|
|
@ -1,6 +0,0 @@
|
||||||
/*
|
|
||||||
* Public API Surface of odds-crawler-frontend-tab
|
|
||||||
*/
|
|
||||||
|
|
||||||
export * from './lib/tab.module';
|
|
||||||
export * from './lib/component/main.component';
|
|
|
@ -1,22 +0,0 @@
|
||||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
|
||||||
|
|
||||||
import 'core-js/es7/reflect';
|
|
||||||
import 'zone.js/dist/zone';
|
|
||||||
import 'zone.js/dist/zone-testing';
|
|
||||||
import { getTestBed } from '@angular/core/testing';
|
|
||||||
import {
|
|
||||||
BrowserDynamicTestingModule,
|
|
||||||
platformBrowserDynamicTesting
|
|
||||||
} from '@angular/platform-browser-dynamic/testing';
|
|
||||||
|
|
||||||
declare const require: any;
|
|
||||||
|
|
||||||
// First, initialize the Angular testing environment.
|
|
||||||
getTestBed().initTestEnvironment(
|
|
||||||
BrowserDynamicTestingModule,
|
|
||||||
platformBrowserDynamicTesting()
|
|
||||||
);
|
|
||||||
// Then we find all the tests.
|
|
||||||
const context = require.context('./', true, /\.spec\.ts$/);
|
|
||||||
// And load the modules.
|
|
||||||
context.keys().map(context);
|
|
|
@ -1,32 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../out-tsc/lib",
|
|
||||||
"target": "es2015",
|
|
||||||
"module": "es2015",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"declaration": true,
|
|
||||||
"sourceMap": true,
|
|
||||||
"inlineSources": true,
|
|
||||||
"emitDecoratorMetadata": true,
|
|
||||||
"experimentalDecorators": true,
|
|
||||||
"importHelpers": true,
|
|
||||||
"types": [],
|
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"es2018"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"angularCompilerOptions": {
|
|
||||||
"annotateForClosureCompiler": true,
|
|
||||||
"skipTemplateCodegen": true,
|
|
||||||
"strictMetadataEmit": true,
|
|
||||||
"fullTemplateTypeCheck": true,
|
|
||||||
"strictInjectionParameters": true,
|
|
||||||
"enableResourceInlining": true
|
|
||||||
},
|
|
||||||
"exclude": [
|
|
||||||
"src/test.ts",
|
|
||||||
"**/*.spec.ts"
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../out-tsc/spec",
|
|
||||||
"types": [
|
|
||||||
"jasmine",
|
|
||||||
"node"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"src/test.ts"
|
|
||||||
],
|
|
||||||
"include": [
|
|
||||||
"**/*.spec.ts",
|
|
||||||
"**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../../tslint.json",
|
|
||||||
"rules": {
|
|
||||||
"directive-selector": [
|
|
||||||
true,
|
|
||||||
"attribute",
|
|
||||||
"oddsCrawlerTab",
|
|
||||||
"camelCase"
|
|
||||||
],
|
|
||||||
"component-selector": [
|
|
||||||
true,
|
|
||||||
"element",
|
|
||||||
"odds-crawler-tab",
|
|
||||||
"kebab-case"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -16,7 +16,6 @@
|
||||||
"paths": {
|
"paths": {
|
||||||
"@odds-crawler/common": ["dist/odds-crawler-frontend-common"],
|
"@odds-crawler/common": ["dist/odds-crawler-frontend-common"],
|
||||||
"@odds-crawler/layout": ["dist/odds-crawler-frontend-layout"],
|
"@odds-crawler/layout": ["dist/odds-crawler-frontend-layout"],
|
||||||
"@odds-crawler/tab": ["dist/odds-crawler-frontend-tab"],
|
|
||||||
"@odds-crawler/network": ["dist/odds-crawler-frontend-network"]
|
"@odds-crawler/network": ["dist/odds-crawler-frontend-network"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user