-
-
-

Messages

- -
+
+

Messages

+

+ Send your first event to see it here. +

+
    +
  • +
    + ID: {{ item.id }} +
    +
    + Time: {{ item.timestamp | date:'medium' }} +
    +
    + Channel: {{ item.key }} +
    +
    +
    + Content: +
    +
    + +
    +
    +
  • +
diff --git a/projects/demo/src/app/another/another.component.scss b/projects/demo/src/app/another/another.component.scss new file mode 100644 index 0000000..8edd607 --- /dev/null +++ b/projects/demo/src/app/another/another.component.scss @@ -0,0 +1,79 @@ +.content { + display: block; + margin-top: 10px; + width: 500px; + + @media screen and (max-width: 575px) { + padding: 0; + max-width: none; + width: 330px; + } + + h2 { + text-align: center; + } + + p { + border: 1px solid #ccc; + border-radius: 4px; + font-size: 12px; + text-align: center; + padding: 10px; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + background-color: #f3f3f3; + border: 1px solid #ccc; + border-radius: 4px; + + li { + display: flex; + justify-content: space-between; + padding: 5px 10px; + border-bottom: 1px solid #e3e3e3; + flex-direction: column; + font-size: 12px; + + &:nth-child(odd) { + background-color: #ffffff; + } + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + &:last-child { + border-bottom: none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + } + } + + .content-field { + display: flex; + justify-content: center; + align-items: flex-start; + flex-wrap: nowrap; + margin-top: -1px; + + :last-child { + width: 95%; + } + + textarea { + background-color: #F9F9F9; + border-radius: 4px; + font-size: 11px; + width: 100%; + margin-top: 4px; + resize: none; + margin-left: 4px; + } + + } +} diff --git a/projects/demo/src/app/another/another.component.ts b/projects/demo/src/app/another/another.component.ts index ee8ba27..98fba77 100644 --- a/projects/demo/src/app/another/another.component.ts +++ b/projects/demo/src/app/another/another.component.ts @@ -1,27 +1,29 @@ import { Component, OnInit } from '@angular/core'; + +import { NgEventBus } from '../../../../ng-event-bus/src/lib/ng-event-bus'; +import { MetaData } from '../../../../ng-event-bus/src/lib/meta-data'; + import { Message } from '../types/message'; -import { MetaData, NgEventBus } from '../../../../../src'; @Component({ selector: 'app-another', templateUrl: './another.component.html', + styleUrls: ['./another.component.scss'], }) export class AnotherComponent implements OnInit { + items: MetaData[] = []; + constructor(private eventBus: NgEventBus) {} ngOnInit(): void { - this.eventBus.on('channel-1').subscribe((value: MetaData) => this.writeToTextArea(value)); + this.eventBus.on('channel-1').subscribe((value: MetaData) => this.processEvent(value)); } - private writeToTextArea(value: MetaData): void { - const e: HTMLElement | null = document.getElementById('messages'); - - if (e != null && e instanceof HTMLTextAreaElement) { - e.value = e.value + this.generateTime() + JSON.stringify(value) + '\n'; + private processEvent(value: MetaData): void { + if (value.data?.text === 'clear') { + this.items = []; + } else { + this.items.push(value); } } - - private generateTime(): string { - return `[${new Date().toISOString()}] `; - } } diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index e3816aa..d97d435 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -1,188 +1,3 @@ - -