diff --git a/src/app/app.component.html b/src/app/app.component.html
index 15f42b9..f8c302a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,7 +37,7 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a48950..4254add 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,29 +1,33 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import {Component, OnDestroy} from '@angular/core';
-import { Output } from '@app/shared/models/response.interface';
-import { Pattern } from '@app/shared/models/pattern.interface';
-import { CommandService } from '@app/core/services/command.service';
-import { PatternService } from '@app/core/services/pattern.service';
-import { RedisConnectService } from '@app/core/services/redis-connect.service';
+import {Output} from '@app/shared/models/response.interface';
+import {Pattern} from '@app/shared/models/pattern.interface';
+import {CommandService} from '@app/core/services/command.service';
+import {PatternService} from '@app/core/services/pattern.service';
+import {RedisConnectService} from '@app/core/services/redis-connect.service';
+
+import {Observable, Subscription} from 'rxjs';
@Component({
selector: 'tr-root',
templateUrl: './app.component.html'
})
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+ private responseSub: Subscription = Subscription.EMPTY;
+
responses: Output[] = [];
selectedDoc: string;
activePattern: Pattern;
newCommandForInput: string;
resetCommand$: Observable = this.redisConnectService.execCommandTime$;
+
constructor(
public commandService: CommandService,
public patternService: PatternService,
private redisConnectService: RedisConnectService) {
- this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
- }
+ this.responseSub = this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
+ }
/**
* Set current command as the active one
@@ -63,9 +67,21 @@ export class AppComponent {
this.selectActiveCommand(first);
}
+ /**
+ * reset responses
+ *
+ */
+ clearOutput(): void {
+ this.responses = [];
+ }
+
private updateResponses(command: Output) {
const commands = [];
Object.assign(commands, [...this.responses, command]);
this.responses = commands;
}
+
+ ngOnDestroy(): void {
+ this.responseSub.unsubscribe();
+ }
}
diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 1301173..372c237 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,4 +1,12 @@
-Redis Responses
+
+ Redis Responses
+
+
+
+
\ No newline at end of file
diff --git a/src/app/features/command/command-output/command-output.component.scss b/src/app/features/command/command-output/command-output.component.scss
index 68f9d09..942ea0a 100644
--- a/src/app/features/command/command-output/command-output.component.scss
+++ b/src/app/features/command/command-output/command-output.component.scss
@@ -1,12 +1,12 @@
ul {
list-style: none;
- padding: .5rem;
+ padding: 0.5rem;
li {
&.command {
color: #736767;
- font-size: .7rem;
- padding-top: .6rem;
+ font-size: 0.7rem;
+ padding-top: 0.6rem;
span {
font-style: italic;
@@ -14,7 +14,7 @@ ul {
}
&.response {
- padding-bottom: .6rem;
+ padding-bottom: 0.6rem;
border-bottom: 1px solid #ccc;
.run-command {
@@ -24,7 +24,7 @@ ul {
span {
display: inline-block;
- padding: 0 .25rem;
+ padding: 0 0.25rem;
margin-bottom: 0;
}
}
@@ -40,4 +40,27 @@ ul {
padding-bottom: 2rem !important;
}
}
+.flex-box {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-content: stretch;
+ align-items: flex-start;
+ .flex-button,
+ .flex-span {
+ flex: 0 1 auto;
+ align-self: auto;
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ .flex-span {
+ align-self: flex-end;
+ }
+
+ button:focus {
+ outline: 0;
+ }
+}
diff --git a/src/app/features/command/command-output/command-output.component.ts b/src/app/features/command/command-output/command-output.component.ts
index 1486ad7..d4adf0c 100644
--- a/src/app/features/command/command-output/command-output.component.ts
+++ b/src/app/features/command/command-output/command-output.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, EventEmitter, Output} from '@angular/core';
-import { Output } from '@app/shared/models/response.interface';
+import {Output as OutputItf} from '@app/shared/models/response.interface';
@Component({
selector: 'tr-command-output',
@@ -9,5 +9,11 @@ import { Output } from '@app/shared/models/response.interface';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CommandOutputComponent {
- @Input() commandsOutput: Array