Dashboard Component test page
This commit is contained in:
geek
parent
7e5ffb9d65
commit
73fda058ba
|
|
@ -14,7 +14,7 @@ export class RESTService {
|
|||
constructor(
|
||||
@Inject(HttpClient) private _httpClient: HttpClient,
|
||||
) {
|
||||
this.baseURL = 'http://192.168.1.101:80/webapp';
|
||||
this.baseURL = 'http://192.168.1.103:19090/webapp';
|
||||
this.httpHeaders = new HttpHeaders()
|
||||
.set('Accept', 'application/json')
|
||||
.set('Content-Type', 'application/json');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,76 @@
|
|||
<p>
|
||||
dashboard-page works!
|
||||
</p>
|
||||
<div class="inbox" fxLayout="column" [ngStyle]="{ 'height': height }">
|
||||
|
||||
<div class="header mat-elevation-z2"></div>
|
||||
|
||||
<div class="container" fxLayout="row">
|
||||
<div class="navigation" fxFlex="250px" [fxHide]="true" [fxHide.gt-md]="false">
|
||||
<div class="title-container">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<span class="title">Dashboard</span>
|
||||
</div>
|
||||
|
||||
<div class="compose-container">
|
||||
<h3 mat-subheader>Dashboard > Dashboard > Dashboard</h3>
|
||||
</div>
|
||||
|
||||
<mat-nav-list class="nav-list" >
|
||||
<h3 mat-subheader>Search Box</h3>
|
||||
<a class="nav-item mt0" mat-list-item>
|
||||
<h3 class="nav-title" mat-line>
|
||||
<mat-icon class="icon">mail</mat-icon>
|
||||
<span class="text">inbox </span>
|
||||
</h3>
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
<div class="content-container" fxFlex fxLayout="column">
|
||||
<!-- Contents Area -->
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<mat-table #table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="ip">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="os">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="cidr">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="targetCnt">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="authBy">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.authBy}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
$color__inactive: #616161;
|
||||
$color__primary: #3F51B5;
|
||||
$color__read: #9F9F9F;
|
||||
$color__checkbox__star: #616161;
|
||||
|
||||
$height__search__title: 56px;
|
||||
$margin-top__search__title: 42px;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inbox {
|
||||
background-color: white;
|
||||
|
||||
.header {
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
background: #039be5 url('/assets/bg20.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 20px 0px ;
|
||||
text-align: center;
|
||||
h6 {
|
||||
margin: 5px 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: -200px;
|
||||
max-height: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: $margin-top__search__title 24px 0;
|
||||
|
||||
.title-container {
|
||||
min-height: $height__search__title;
|
||||
max-height: $height__search__title;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 4px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-container {
|
||||
margin: 52px 16px 0 12px;
|
||||
|
||||
.compose {
|
||||
padding-left: 20px;
|
||||
padding-right: 32px;
|
||||
width: 100%;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: 28px;
|
||||
height: 400px; overflow-y: auto;
|
||||
|
||||
.nav-item {
|
||||
color: $color__inactive;
|
||||
margin: 8px 0;
|
||||
|
||||
.nav-title {
|
||||
|
||||
.icon {
|
||||
margin-right: 12px;
|
||||
font-size: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon, .text {
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #3F51B5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.search {
|
||||
margin-top: $margin-top__search__title;
|
||||
}
|
||||
|
||||
.mails-container {
|
||||
margin-top: 43px;
|
||||
background: white;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.inbox {
|
||||
.content-container {
|
||||
max-width: calc(100% - 290px); // 250px sidebar + 40px margin
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,58 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
|
||||
|
||||
|
||||
export interface Probe {
|
||||
id: string;
|
||||
name: string;
|
||||
ip: string;
|
||||
os: string;
|
||||
cidr: string;
|
||||
targetCnt: number;
|
||||
date: string;
|
||||
authBy: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'of-dashboard-page',
|
||||
templateUrl: './dashboard-page.component.html',
|
||||
styleUrls: ['./dashboard-page.component.scss']
|
||||
})
|
||||
export class DashboardPageComponent implements OnInit {
|
||||
|
||||
export class DashboardPageComponent implements OnInit, AfterContentInit {
|
||||
|
||||
displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
|
||||
dataSource: MatTableDataSource<Probe>;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngAfterContentInit() {
|
||||
// temporary data
|
||||
const data: Probe[] = new Array();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const p: Probe = {
|
||||
id: String('id' + i),
|
||||
name: String('name' + i),
|
||||
ip: String('ip' + i),
|
||||
os: String('os' + i),
|
||||
cidr: String('cidr' + i),
|
||||
targetCnt: i,
|
||||
date: String('date' + i),
|
||||
authBy: String('insanity')
|
||||
};
|
||||
data.push(p);
|
||||
}
|
||||
|
||||
this.dataSource = new MatTableDataSource(data);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
|
||||
handleRowClick(obj: Probe) {
|
||||
// this.router.navigate(['probe', obj.id]);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user