Ability to print scenarios from UI (#76)

* added ngx-markdown as dependency

* added printable endpoint

* added printable component

* printable component and ngx-markdown init

* routing for printable page

* printable button

package.json

@@ -36,6 +36,7 @@
     "lodash-es": "^4.17.15",
     "moment": "^2.24.0",
     "ng2-dragula": "^2.1.1",
+    "ngx-markdown": "^10.1.1",
     "ngx-markdown-editor": "^2.5.0",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { ConfigurationComponent } from './configuration/configuration.component'
 import { EnvironmentsComponent } from './configuration/environments/environments.component';
 import { ContentComponent } from './content/content.component';
 import { CourseComponent } from './course/course.component';
+import { PrintableComponent } from './printable/printable.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/home', pathMatch: 'full'},
@@ -64,6 +65,13 @@ const routes: Routes = [
         component: EnvironmentsComponent
       }
     ]
+  },
+  {
+    path: 'scenario/:scenario/printable',
+    component: PrintableComponent,
+    canActivate: [
+      AuthGuard
+    ]
   }
 ];
 

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, SecurityContext } from '@angular/core';
 import '@clr/icons';
 import '@clr/icons/shapes/all-shapes';
 import { AppRoutingModule } from './app-routing.module';
@@ -37,6 +37,8 @@ import { DeleteConfirmationComponent } from './delete-confirmation/delete-confir
 import { EventStatusFilterComponent } from './event/event-status-filter/event-status-filter.component';
 import { EditUserComponent } from './user/edit-user/edit-user.component';
 import { EditAccessCodesComponent } from './user/edit-access-codes/edit-access-codes.component';
+import { PrintableComponent } from './printable/printable.component';
+import { MarkdownModule } from 'ngx-markdown';
 
 export function jwtOptionsFactory() {
   return {
@@ -77,7 +79,8 @@ export function jwtOptionsFactory() {
     DeleteConfirmationComponent,
     EventStatusFilterComponent,
     EditUserComponent,
-    EditAccessCodesComponent
+    EditAccessCodesComponent,
+    PrintableComponent
   ],
   imports: [
     BrowserModule,
@@ -97,7 +100,10 @@ export function jwtOptionsFactory() {
       }
     }),
     BrowserAnimationsModule,
-    DragulaModule.forRoot()
+    DragulaModule.forRoot(),
+    MarkdownModule.forRoot({
+      sanitize: SecurityContext.NONE
+    })
   ],
   providers: [
     ScenarioService

src/app/data/scenario.service.ts

@@ -105,4 +105,8 @@ export class ScenarioService {
 
     return this.http.post(environment.server + "/a/scenario/new", params)
   }
+
+  public printable(id: string) {
+    return this.http.get(environment.server + "/a/scenario/" + id + "/printable", {responseType: 'text'})
+  }
 }

src/app/printable/printable.component.html

@@ -0,0 +1 @@
+<div [innerHTML]="scenario | markdown"></div>

src/app/printable/printable.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrintableComponent } from './printable.component';
+
+describe('PrintableComponent', () => {
+  let component: PrintableComponent;
+  let fixture: ComponentFixture<PrintableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PrintableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrintableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/printable/printable.component.ts

@@ -0,0 +1,38 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { first, switchMap } from 'rxjs/operators';
+import { ScenarioService } from '../data/scenario.service';
+
+@Component({
+  selector: 'app-printable',
+  templateUrl: './printable.component.html',
+  styleUrls: ['./printable.component.scss']
+})
+export class PrintableComponent implements OnInit {
+
+  public scenario: string = "";
+
+  constructor(
+    public route: ActivatedRoute,
+    public scenarioService: ScenarioService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap
+    .pipe(
+      first(),
+      switchMap((p: ParamMap) => {
+        return this.scenarioService.printable(p.get("scenario"))
+      })
+    ).subscribe(
+      (content: any) => {
+        this.scenario = content;
+      },
+      (error: HttpErrorResponse) => {
+        this.scenario = "There was an error rendering printable scenario content: " + error.message
+      }
+    )
+  }
+
+}

src/app/scenario/scenario.component.html

@@ -119,6 +119,9 @@ <h3>Scenarios</h3>
                 </clr-stack-block>
               </clr-stack-block>
             </clr-stack-view>
+            <a [routerLink]="['/scenario', selectedscenario.id, 'printable']" target="_blank">
+              <button class="btn btn-info-outline">Print</button>
+            </a>
             <button class="btn btn-danger-outline">Delete</button>
             <button class="btn btn-success" (click)="savescenario()"
               [disabled]="!this.selectedscenario.steps || !this.selectedscenario.virtualmachines">Save</button>