diff --git a/src/app/commons/service/rest.service.ts b/src/app/commons/service/rest.service.ts index 7c92574..e144c8b 100644 --- a/src/app/commons/service/rest.service.ts +++ b/src/app/commons/service/rest.service.ts @@ -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'); diff --git a/src/app/pages/dashboard/dashboard-page.component.html b/src/app/pages/dashboard/dashboard-page.component.html index ec071fe..0914573 100644 --- a/src/app/pages/dashboard/dashboard-page.component.html +++ b/src/app/pages/dashboard/dashboard-page.component.html @@ -1,3 +1,76 @@ -

- dashboard-page works! -

+
+ +
+ +
+
+
+ mail + Dashboard +
+ +
+

Dashboard > Dashboard > Dashboard

+
+ + +

Search Box

+ +

+ mail + inbox +

+ + +
+
+ +
+ + + + Name + {{element.name}} + + + + IP + {{element.ip}} + + + + OS + {{element.os}} + + + + CIDR + {{element.cidr}} + + + + Targets + {{element.targetCnt}} + + + + Date + {{element.date}} + + + + AuthBy + {{element.authBy}} + + + + + + + + +
+
+
+ +
\ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard-page.component.scss b/src/app/pages/dashboard/dashboard-page.component.scss index e69de29..2a7efed 100644 --- a/src/app/pages/dashboard/dashboard-page.component.scss +++ b/src/app/pages/dashboard/dashboard-page.component.scss @@ -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 + } + } +} diff --git a/src/app/pages/dashboard/dashboard-page.component.ts b/src/app/pages/dashboard/dashboard-page.component.ts index 7eaa558..a672eb9 100644 --- a/src/app/pages/dashboard/dashboard-page.component.ts +++ b/src/app/pages/dashboard/dashboard-page.component.ts @@ -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; + @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() { }