Forbidden commands integration

VERSION.txt

+15.1.5 Update boolean directive of command.
 15.1.4 Fix behavior subject for forbidden commands.
 15.1.3 Change background color for forbidden commands.
 15.1.2 Update detected forbidden command model.

projects/kypo-command-visualizations/timeline/src/timeline.component.html

@@ -29,7 +29,14 @@
           {{command.trainingTime}}
         </mgl-timeline-entry-side>
         <mgl-timeline-entry-header>
-          <div>{{commandPrefix(command)}}{{command.cmd}} {{command.options}}</div>
+          <ng-container *ngIf="checkCommandColor(command) | async as isCommandForbidden">
+            <div *ngIf="isCommandForbidden" [style.color]="'red'">
+              [x] {{command.cmd}} {{command.options}}
+            </div>
+            <div *ngIf="!isCommandForbidden">
+              {{command.cmd}} {{command.options}}
+            </div>
+          </ng-container>
         </mgl-timeline-entry-header>
 
         <mgl-timeline-entry-content [expandAnimationTiming]="'200ms ease'"

projects/kypo-command-visualizations/timeline/src/timeline.component.ts

@@ -59,16 +59,15 @@ export class TimelineComponent implements OnInit {
     }
   }
 
-  commandPrefix(command: Command): Observable<string> {
+  checkCommandColor(command: Command): Observable<boolean> {
     if (!this.isForbidden) {
-      return of('');
+      of(false);
     }
     return this.forbiddenCommands$.pipe(
       map((forbiddenCommands) => {
-        const isForbidden = forbiddenCommands.some((forbiddenCommand) => {
+        return forbiddenCommands.some((forbiddenCommand) => {
           return command.cmd === forbiddenCommand.command;
         });
-        return isForbidden ? '[x] ' : '';
       })
     );
   }