diff --git a/src/app/commons/component/header/header.component.html b/src/app/commons/component/header/header.component.html index 3d6e05b..4c92ef6 100644 --- a/src/app/commons/component/header/header.component.html +++ b/src/app/commons/component/header/header.component.html @@ -7,7 +7,7 @@ - +
+ +
+ +
+
+
+
Notifications
+
+ +
+
+ +
+
+
+
View All
+
+
+ +
+ +
+ + + +
+
+ notifications +
+
{{ notification.title }}
+
{{ notification.lastTime }}
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/src/packages/notification/component/badge/notification.component.scss b/src/packages/notification/component/badge/notification.component.scss new file mode 100644 index 0000000..2594319 --- /dev/null +++ b/src/packages/notification/component/badge/notification.component.scss @@ -0,0 +1,165 @@ +$prefix: 'notification'; + + +.badge { + position: absolute; + top: 0; + left: 50%; + font-weight: 700; + line-height: 13px; + height: 13px; + padding: 5px; + border-radius: 26%; + width: 30%; + background-color: #f44336; + color: #fff; + border-color:#f44336 +} + +.#{$prefix} { + &-container { + position: relative; + display: flex; + align-items: center; + } + + &-btn { + display: flex; + justify-content: center; + margin-right: 10px; + } +} +.dropdown { + background: white; + position: absolute; + top: 42px; + right: 28px; + min-width: 350px; + z-index: 2; + transform: translateY(0) scale(0); + transform-origin: top right; + visibility: hidden; + transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1); + + @media screen and (max-width: 599px) { + min-width: 50vw; + right: 5px; + transform: translateY(0); + visibility: hidden; + transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1); + } + + &.open { + transform: translateY(0) scale(1); + visibility: visible; + } + .card { + + .header { + background: #EEEEEE; + min-height: 54px; + padding-left: 16px; + padding-right: 8px; + color: #555; + display: flex; + justify-content: flex-start; + align-items: center; + align-content: center; + border-bottom: 1px solid #e0e0e0; + + .extra { + font-size: 12px; + color: #888; + } + } + } + .content { + overflow: hidden; + max-height: 256px; + + .notification { + min-height: 64px; + padding: 0 16px 0 14px; + position: relative; + color: #666; + cursor: pointer; + + .icon { + height: 28px; + width: 28px; + line-height: 28px; + font-size: 18px; + margin-right: 13px; + text-align: center; + border-radius: 50%; + background: #FFF; + color: #888; + border: 1px solid #EEE; + } + + .title { + font-weight: 500; + font-size: 14px; + } + + .time { + font-size: 12px; + } + + .close { + font-size: 18px; + width: 18px; + height: 18px; + line-height: 18px; + } + + &.primary { + .icon { + background: #ccc; + color: #ddd; + } + } + + &.accent { + .icon { + background: #aaa; + color: #bbb; + } + } + + &.warn { + .icon { + background: #eee; + color: #ddd; + } + } + + &.read { + color: #999; + + .name { + font-weight: normal; + } + } + } + } + + .footer { + min-height: 42px; + border-top: 1px solid #EEE; + + .action { + cursor: pointer; + color: #AAA; + text-align: center; + font-size: 13px; + } + } + + .divider { + width: calc(100% - 30px); + height: 1px; + background: #EEE; + margin: 0 16px 0 14px; + } +} \ No newline at end of file diff --git a/src/packages/notification/component/badge/notification.component.spec.ts b/src/packages/notification/component/badge/notification.component.spec.ts new file mode 100644 index 0000000..58baf09 --- /dev/null +++ b/src/packages/notification/component/badge/notification.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationBadgeComponent } from './notification.component'; + +describe('NotificationBadgeComponent', () => { + let component: NotificationBadgeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotificationBadgeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationBadgeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/packages/notification/component/badge/notification.component.ts b/src/packages/notification/component/badge/notification.component.ts new file mode 100644 index 0000000..fd1c9a7 --- /dev/null +++ b/src/packages/notification/component/badge/notification.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'of-notification-badge', + templateUrl: './notification.component.html', + styleUrls: ['./notification.component.scss'] +}) +export class NotificationBadgeComponent implements OnInit { + + cssPrefix = 'toolbar-notification'; + isOpen = false; + @Input() notifications = []; + + constructor( + private router: Router + ) { } + + ngOnInit() { + } + + select() { + + } + + delete(notification) { + + } + + handleMarkAllAsRead() { + console.log('Mark All'); + } + + handleViewAll() { + this.isOpen = false; + this.router.navigate(['notification']); + } +} diff --git a/src/packages/notification/component/index.ts b/src/packages/notification/component/index.ts index 1cb0950..7b18dbb 100644 --- a/src/packages/notification/component/index.ts +++ b/src/packages/notification/component/index.ts @@ -1,5 +1,7 @@ import { NotificationComponent } from './notification/notification.component'; +import { NotificationBadgeComponent } from './badge/notification.component'; export const COMPONENTS = [ NotificationComponent, + NotificationBadgeComponent, ]; diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html index 0129d46..d1612e2 100644 --- a/src/packages/notification/component/notification/notification.component.html +++ b/src/packages/notification/component/notification/notification.component.html @@ -1,52 +1 @@ - -
- - -
- -
-
-
-
Notifications
-
- You have {{ notifications?.length }} new notifications
-
- -
-
-
-
Mark all as read
-
-
- -
- -
- - - -
-
- notifications -
-
{{ notification.title }}
-
{{ notification.lastTime }}
-
- - -
-
-
- - - - -
????
- \ No newline at end of file +
list
\ No newline at end of file diff --git a/src/packages/notification/component/notification/notification.component.ts b/src/packages/notification/component/notification/notification.component.ts index 6acbd56..99bc5b1 100644 --- a/src/packages/notification/component/notification/notification.component.ts +++ b/src/packages/notification/component/notification/notification.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'of-notification', @@ -7,21 +8,11 @@ import { Component, OnInit, Input } from '@angular/core'; }) export class NotificationComponent implements OnInit { - cssPrefix = 'toolbar-notification'; - isOpen = false; - @Input() notifications = []; - - constructor() { } + constructor( + private router: Router + ) { } ngOnInit() { } - select() { - - } - - delete(notification) { - - } - } diff --git a/src/packages/probe/component/detail/detail.component.html b/src/packages/probe/component/detail/detail.component.html index c9f0c55..e30254b 100644 --- a/src/packages/probe/component/detail/detail.component.html +++ b/src/packages/probe/component/detail/detail.component.html @@ -1,4 +1,4 @@ -

{{probeAlias}}

+ +
aaa
\ No newline at end of file diff --git a/src/packages/probe/component/detail/detail.component.ts b/src/packages/probe/component/detail/detail.component.ts index 18b82b3..e5b0596 100644 --- a/src/packages/probe/component/detail/detail.component.ts +++ b/src/packages/probe/component/detail/detail.component.ts @@ -1,14 +1,22 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject, AfterContentInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ConfirmDialogComponent } from 'app/commons/component/confirm-dialog/confirm-dialog.component'; +import * as DetailStore from '../../store/detail'; +import { DetailSelector } from '../../store'; +import { Store, select } from '@ngrx/store'; +import { Probe } from '../../model'; +import { RPCError } from 'packages/core/rpc/error'; @Component({ selector: 'of-probe-detail', templateUrl: './detail.component.html', styleUrls: ['./detail.component.scss'] }) -export class DetailComponent implements OnInit { +export class DetailComponent implements OnInit, AfterContentInit { + + probe$ = this.store.pipe(select(DetailSelector.select('probe'))); + probe: Probe = null; probeAlias = ''; probeId = undefined; @@ -67,6 +75,7 @@ export class DetailComponent implements OnInit { private route: ActivatedRoute, private router: Router, public dialog: MatDialog, + private store: Store ) { } ngOnInit() { @@ -74,6 +83,23 @@ export class DetailComponent implements OnInit { this.probeAlias = 'Probe Alias 블라블라'; } + ngAfterContentInit() { + this.store.dispatch( + new DetailStore.Read( + { id: this.probeId } + ) + ); + this.probe$.subscribe( + (probe: Probe) => { + console.log(probe); + this.probe = probe; + }, + (error: RPCError) => { + console.log(error.message); + } + ); + } + handleStartStop() { this.isUpState = !this.isUpState; } diff --git a/src/packages/probe/model/Probe.ts b/src/packages/probe/model/Probe.ts index 0c943f2..3d3b1bb 100644 --- a/src/packages/probe/model/Probe.ts +++ b/src/packages/probe/model/Probe.ts @@ -1,8 +1,7 @@ import { MetaProbeStatus } from 'packages/meta/model'; import { Domain } from 'packages/domain/model'; import { Member } from 'packages/member/model'; -import { Target } from 'packages/target/model'; -import { InfraHost } from 'packages/infra/model'; +import { Infra } from 'packages/infra/model'; export interface Probe { id?: number; @@ -17,5 +16,5 @@ export interface Probe { authorizeDate?: Date; authorizeMember?: Member; // host?: InfraHost; - targets?: Target[]; + targets?: Infra[]; } diff --git a/src/packages/probe/store/detail/detail.reducer.ts b/src/packages/probe/store/detail/detail.reducer.ts index 90bca24..33b67c3 100644 --- a/src/packages/probe/store/detail/detail.reducer.ts +++ b/src/packages/probe/store/detail/detail.reducer.ts @@ -9,7 +9,6 @@ import { import { State, initialState, - adapter, } from './detail.state'; import { Probe } from '../../model'; diff --git a/src/packages/probe/store/detail/detail.state.ts b/src/packages/probe/store/detail/detail.state.ts index 3b614ab..cbb889b 100644 --- a/src/packages/probe/store/detail/detail.state.ts +++ b/src/packages/probe/store/detail/detail.state.ts @@ -14,9 +14,6 @@ import { Probe } from '../../model'; // probe: null, // }; -// export const getProbe = (state: State) => state.probe; -// export const getError = (state: State) => state.error; -// export const isPending = (state: State) => state.isPending; import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity'; @@ -32,6 +29,10 @@ export const initialState: State = adapter.getInitialState({ probe: null, }); +export const getProbe = (state: State) => state.probe; +export const getError = (state: State) => state.error; +export const isPending = (state: State) => state.isPending; + // export const { // selectIds, // selectEntities,