Implement PDF rendering based on tree node data.

src/app/main/main-center/main-center.component.html

@@ -1,8 +1,17 @@
+
 <ng-container *ngIf="this.currentNode != null; else noNode">
-    <p>Current node is {{this.currentNode.label}}</p>
-    <!-- Add pdf container here -->
+    <div class="d-flex h-100 flex-column">
+        <h1 class="ml-2">{{this.currentNode.label}}</h1>
+        <ng-container *ngIf="!this.notFound; else noPdf">
+            <embed *ngIf="this.blobUrl != null" [src]="blobUrl" type="application/pdf" width="100%" height="100%" />
+        </ng-container>
+    </div>
 </ng-container>
 
 <ng-template #noNode>
-    <p>No node selected</p>
-</ng-template>
+    <h1 class="ml-2">No node selected</h1>
+</ng-template>
+
+<ng-template #noPdf>
+    <h1 class="ml-4 mt-4 text-danger">PDF not found</h1>
+</ng-template>

src/app/main/main-center/main-center.component.ts

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs';
 import { TreeNode } from 'primeng/api';
 import { ResourceService } from 'src/app/services/api/resource.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-main-center',
@@ -14,32 +15,34 @@ export class MainCenterComponent implements OnInit, OnDestroy {
 
   private treeSubscription: Subscription;
   currentNode: TreeNode;
+  blobUrl: SafeResourceUrl;
+  notFound = false;
 
   constructor(
     private treeService: TreeService,
-    private resourceService: ResourceService
+    private resourceService: ResourceService,
+    private domSanitizer: DomSanitizer
   ) { }
 
   ngOnInit() {
     this.treeSubscription = this.treeService.node$.subscribe(async (node) => {
       if (node == null) {
         return;
       }
+      this.notFound = false;
       console.log('Selected node is', node);
       this.currentNode = node;
       const data = node.data as { pdfName: string };
       try {
-        console.log('I will load', data.pdfName);
-        const pdfData = await this.resourceService.getResourcePDF(data.pdfName);
-        // render pdf to screen
-
+        const pdfData = await this.resourceService.getResourcePDF(data.pdfName).toPromise();
+        this.blobUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
+          URL.createObjectURL(new Blob([pdfData], { type: 'application/pdf' })));
       } catch (err) {
         console.log(err);
         if ((err as HttpErrorResponse).status === 404) {
-          // handle not found
+          this.notFound = true;
         }
       }
-
     });
   }
 

src/app/main/main.component.html

@@ -1,2 +1,4 @@
-<app-tree></app-tree>
-<app-main-center></app-main-center>
+<div class="d-flex h-100 w-100">
+    <app-tree></app-tree>
+    <app-main-center class="w-100"></app-main-center>
+</div>

src/app/main/tree/tree.component.css

@@ -0,0 +1,5 @@
+.tree {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}

src/app/main/tree/tree.component.html

@@ -1 +1,7 @@
-<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)"></p-tree>
+<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
+    <ng-template let-node pTemplate="default">
+        <div class="tree">
+            <div class="flex-fill">{{ node.label }}</div>
+        </div>
+    </ng-template>
+</p-tree>

src/assets/files.json

@@ -12,7 +12,7 @@
         {
             "label": "32-11 Main Landing Gear",
             "data": {
-                "pdfName": "radar.pdf"
+                "pdfName": "radar2.pdf"
             },
             "expandedIcon": "fa fa-folder-open",
             "collapsedIcon": "fa fa-folder",

src/styles.css

@@ -1 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
+html, body, app-root {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+
+app-tree .ui-tree {
+    height: 100%;
+    width: 100%;
+}