diff --git a/angular.json b/angular.json index b1dda10..d4b3ecd 100644 --- a/angular.json +++ b/angular.json @@ -25,11 +25,15 @@ ], "styles": [ "src/styles.css", + "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/themes/nova-light/theme.css", "node_modules/primeng/resources/primeng.min.css" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/bootstrap/dist/js/bootstrap.min.js" + ] }, "configurations": { "production": { @@ -148,6 +152,7 @@ } } } - }}, + } + }, "defaultProject": "SystemNavigationFrontend" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7154f6c..cfc96af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2841,6 +2841,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bootstrap": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", + "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6262,6 +6267,11 @@ } } }, + "jquery": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" + }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", diff --git a/package.json b/package.json index 5537319..16b1ce2 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,9 @@ "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", + "bootstrap": "^4.4.1", "chart.js": "^2.9.3", + "jquery": "^3.4.1", "primeicons": "^2.0.0", "primeng": "^8.1.1", "quill": "^1.3.7", diff --git a/src/app/app.component.html b/src/app/app.component.html index 472cc95..8e0a821 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1 @@ -
-
- -
-
+ \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 311d503..bb570c8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ResourceService } from './services/api/resource.service'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-root', @@ -12,7 +13,7 @@ export class AppComponent implements OnInit { constructor( private resourceService: ResourceService - ) {} + ) { } ngOnInit() { // Example usage of resource service. @@ -26,7 +27,10 @@ export class AppComponent implements OnInit { console.log('Adblock prevents it from opening'); // window.open(url); }) - .catch(err => console.log(err)); + .catch((err: HttpErrorResponse) => { + console.log('Error occurred with status value', err.status); + console.log(err); + }); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f5b733a..23930f3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,23 +1,16 @@ -import { BrowserModule } from "@angular/platform-browser"; -import { NgModule } from "@angular/core"; +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; -import { AppRoutingModule } from "./app-routing.module"; -import { AppComponent } from "./app.component"; -import { TreeComponent } from "./tree/tree.component"; -import { ButtonModule, MessageService, TreeModule } from "primeng/primeng"; -import { MainComponent } from "./main/main.component"; -import { CenterComponent } from "./center/center.component"; -import { LeftComponent } from "./left/left.component"; -import { HttpClientModule } from "@angular/common/http"; +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { ButtonModule, MessageService, TreeModule } from 'primeng/primeng'; +import { HttpClientModule } from '@angular/common/http'; +import { MainComponent } from './main/main.component'; +import { MainCenterComponent } from './main/main-center/main-center.component'; +import { TreeComponent } from './main/tree/tree.component'; @NgModule({ - declarations: [ - AppComponent, - TreeComponent, - MainComponent, - CenterComponent, - LeftComponent - ], + declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent], imports: [ BrowserModule, AppRoutingModule, @@ -25,7 +18,7 @@ import { HttpClientModule } from "@angular/common/http"; HttpClientModule, ButtonModule ], - providers: [MessageService], + providers: [], bootstrap: [AppComponent] }) -export class AppModule {} +export class AppModule { } diff --git a/src/app/center/center.component.html b/src/app/center/center.component.html deleted file mode 100644 index 03eae30..0000000 --- a/src/app/center/center.component.html +++ /dev/null @@ -1 +0,0 @@ -

center works!

diff --git a/src/app/center/center.component.ts b/src/app/center/center.component.ts deleted file mode 100644 index 7ab645a..0000000 --- a/src/app/center/center.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-center', - templateUrl: './center.component.html', - styleUrls: ['./center.component.css'] -}) -export class CenterComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/src/app/left/left.component.css b/src/app/left/left.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/left/left.component.html b/src/app/left/left.component.html deleted file mode 100644 index a244bb7..0000000 --- a/src/app/left/left.component.html +++ /dev/null @@ -1 +0,0 @@ -

left works!

diff --git a/src/app/left/left.component.ts b/src/app/left/left.component.ts deleted file mode 100644 index 48e6e77..0000000 --- a/src/app/left/left.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-left', - templateUrl: './left.component.html', - styleUrls: ['./left.component.css'] -}) -export class LeftComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/src/app/center/center.component.css b/src/app/main/main-center/main-center.component.css similarity index 100% rename from src/app/center/center.component.css rename to src/app/main/main-center/main-center.component.css diff --git a/src/app/main/main-center/main-center.component.html b/src/app/main/main-center/main-center.component.html new file mode 100644 index 0000000..35923f7 --- /dev/null +++ b/src/app/main/main-center/main-center.component.html @@ -0,0 +1,8 @@ + +

Current node is {{this.currentNode.label}}

+ + + + +

No node selected

+ \ No newline at end of file diff --git a/src/app/center/center.component.spec.ts b/src/app/main/main-center/main-center.component.spec.ts similarity index 54% rename from src/app/center/center.component.spec.ts rename to src/app/main/main-center/main-center.component.spec.ts index da7698d..99d8a7b 100644 --- a/src/app/center/center.component.spec.ts +++ b/src/app/main/main-center/main-center.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { CenterComponent } from './center.component'; +import { MainCenterComponent } from './main-center.component'; -describe('CenterComponent', () => { - let component: CenterComponent; - let fixture: ComponentFixture; +describe('MainCenterComponent', () => { + let component: MainCenterComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ CenterComponent ] + declarations: [ MainCenterComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(CenterComponent); + fixture = TestBed.createComponent(MainCenterComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/main/main-center/main-center.component.ts b/src/app/main/main-center/main-center.component.ts new file mode 100644 index 0000000..337a70b --- /dev/null +++ b/src/app/main/main-center/main-center.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { TreeService } from 'src/app/services/tree.service'; +import { Subscription } from 'rxjs'; +import { TreeNode } from 'primeng/api'; +import { ResourceService } from 'src/app/services/api/resource.service'; +import { HttpErrorResponse } from '@angular/common/http'; + +@Component({ + selector: 'app-main-center', + templateUrl: './main-center.component.html', + styleUrls: ['./main-center.component.css'] +}) +export class MainCenterComponent implements OnInit, OnDestroy { + + private treeSubscription: Subscription; + currentNode: TreeNode; + + constructor( + private treeService: TreeService, + private resourceService: ResourceService + ) { } + + ngOnInit() { + this.treeSubscription = this.treeService.node$.subscribe(async (node) => { + if (node == null) { + return; + } + 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 + + } catch (err) { + console.log(err); + if ((err as HttpErrorResponse).status === 404) { + // handle not found + } + } + + }); + } + + ngOnDestroy() { + this.treeSubscription.unsubscribe(); + } +} diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index 17c1228..89b5a69 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -1 +1,2 @@ -

main works!

+ + \ No newline at end of file diff --git a/src/app/tree/tree.component.css b/src/app/main/tree/tree.component.css similarity index 100% rename from src/app/tree/tree.component.css rename to src/app/main/tree/tree.component.css diff --git a/src/app/main/tree/tree.component.html b/src/app/main/tree/tree.component.html new file mode 100644 index 0000000..19c0f99 --- /dev/null +++ b/src/app/main/tree/tree.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/left/left.component.spec.ts b/src/app/main/tree/tree.component.spec.ts similarity index 58% rename from src/app/left/left.component.spec.ts rename to src/app/main/tree/tree.component.spec.ts index b127005..e3df2c3 100644 --- a/src/app/left/left.component.spec.ts +++ b/src/app/main/tree/tree.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { LeftComponent } from './left.component'; +import { TreeComponent } from './tree.component'; -describe('LeftComponent', () => { - let component: LeftComponent; - let fixture: ComponentFixture; +describe('TreeComponent', () => { + let component: TreeComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LeftComponent ] + declarations: [ TreeComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(LeftComponent); + fixture = TestBed.createComponent(TreeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts new file mode 100644 index 0000000..fd3342c --- /dev/null +++ b/src/app/main/tree/tree.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { NodeService } from 'src/app/node.service'; +import { TreeService } from 'src/app/services/tree.service'; + +@Component({ + selector: 'app-tree', + templateUrl: './tree.component.html', + styleUrls: ['./tree.component.css'] +}) +export class TreeComponent implements OnInit { + + filesTree: TreeNode[]; + + constructor( + private treeService: TreeService, + private nodeService: NodeService + ) { } + + ngOnInit() { + this.nodeService.getFiles().then(files => (this.filesTree = files)); + } + + nodeSelect(event: { node: TreeNode }) { + this.treeService.changeNode(event.node); + } + +} diff --git a/src/app/node.service.ts b/src/app/node.service.ts index 4b9eb36..499c0c5 100644 --- a/src/app/node.service.ts +++ b/src/app/node.service.ts @@ -1,16 +1,14 @@ -import {HttpClient, HttpClientModule} from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { TreeNode } from 'primeng/api'; -@Injectable({providedIn: 'root'}) +@Injectable({ providedIn: 'root' }) export class NodeService { constructor(private http: HttpClient) { } - getFiles() { - return this.http.get('http://localhost:4200/assets/files.json') - .toPromise() - .then(res => res.data as TreeNode[]); + async getFiles() { + return (await this.http.get('http://localhost:4200/assets/files.json').toPromise()).data as TreeNode[]; } } diff --git a/src/app/services/api/resource.service.ts b/src/app/services/api/resource.service.ts index 1bbfcf0..e6cef09 100644 --- a/src/app/services/api/resource.service.ts +++ b/src/app/services/api/resource.service.ts @@ -32,6 +32,9 @@ export class ResourceService extends APIService { } getResourcePDF(key: string) { + if (key == null) { + throw new TypeError('Key must not be null!'); + } return this.get(`pdf/${key}`, { responseType: 'arraybuffer' }); diff --git a/src/app/services/tree.service.ts b/src/app/services/tree.service.ts new file mode 100644 index 0000000..6b01162 --- /dev/null +++ b/src/app/services/tree.service.ts @@ -0,0 +1,16 @@ +import { BehaviorSubject } from 'rxjs'; +import { TreeNode } from 'primeng/api'; +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class TreeService { + + private nodeChange = new BehaviorSubject(null); + node$ = this.nodeChange.asObservable(); + + changeNode(newNode: TreeNode) { + this.nodeChange.next(newNode); + } +} diff --git a/src/app/tree/tree.component.html b/src/app/tree/tree.component.html deleted file mode 100644 index 0dfec7c..0000000 --- a/src/app/tree/tree.component.html +++ /dev/null @@ -1,16 +0,0 @@ - -
- - -
diff --git a/src/app/tree/tree.component.spec.ts b/src/app/tree/tree.component.spec.ts deleted file mode 100644 index e758395..0000000 --- a/src/app/tree/tree.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { async, ComponentFixture, TestBed } from "@angular/core/testing"; - -import { TreeComponent } from "./tree.component"; - -describe("TreeComponent", () => { - let component: TreeComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [TreeComponent] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TreeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/tree/tree.component.ts b/src/app/tree/tree.component.ts deleted file mode 100644 index bf7a665..0000000 --- a/src/app/tree/tree.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {Tree} from 'primeng/tree'; -import {MessageService, TreeNode} from 'primeng/api'; -import {NodeService} from '../node.service'; - -@Component({ - selector: 'app-tree', - templateUrl: './tree.component.html', - styleUrls: ['./tree.component.css'] -}) -export class TreeComponent implements OnInit { - @ViewChild('expandingTree', {static: false}) - expandingTree: Tree; - filesTree: TreeNode[]; - - constructor(private nodeService: NodeService, private messageService: MessageService) { } - - ngOnInit() { - this.nodeService.getFiles().then(files => this.filesTree = files); - } - - expandAll(){ - this.filesTree.forEach( node => { - this.expandRecursive(node, true); - } ); - } - - collapseAll(){ - this.filesTree.forEach( node => { - this.expandRecursive(node, false); - } ); - } - - private expandRecursive(node: TreeNode, isExpand: boolean){ - node.expanded = isExpand; - if(node.children){ - node.children.forEach( childNode => { - this.expandRecursive(childNode, isExpand); - } ); - } - } - -} diff --git a/src/assets/files.json b/src/assets/files.json index 6dc3a5e..dfaed6c 100644 --- a/src/assets/files.json +++ b/src/assets/files.json @@ -1,109 +1,133 @@ { - "data": - [ + "data": [ { "label": "32 Landing Gear", - "data": "32 Landing Gear", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] }, { "label": "32-11 Main Landing Gear", - "data": "32-11 Main Landing Gear", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children": - [ + "children": [ { "label": "32-11-01 Pivot", - "data": "32-11-01 Pivot", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] }, { "label": "32-11-02 Main Landing Gear Shock Strut", - "data": "32-11-02 Main Landing Gear Shock Strut", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] }, { "label": "32-11-03 TORQUE ARM upper", - "data": "32-11-03 TORQUE ARM upper", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] }, { "label": "32-11-04 TORQUE ARM lower", - "data": "32-11-04 TORQUE ARM lower", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] } ] }, { "label": "32-30 Extension and Retraction System", - "data": "32-30 Extension and Retraction System", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children": - [ + "children": [ { "label": "30-30-01 MLG Retract Actuator Support", - "data": "30-30-01 MLG Retract Actuator Support", - "children":[] + "data": { + "pdfName": "radar.pdf" + }, + "children": [] }, { "label": "30-30-02 Retaining Pin", - "data": "30-30-02 Retaining Pin", + "data": { + "pdfName": "radar.pdf" + }, "children": [] } ] }, { "label": "32-31 Landing Gear Control", - "data": "32-31 Landing Gear Control", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children":[] + "children": [] }, { "label": "32-41 Wheels", - "data": "32-41 Wheels", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children": - [ + "children": [ { "label": "32-41-01 Landing Gear Wheels Tire Assembly", - "data": "32-41-01 Landing Gear Wheels Tire Assembly", - "children":[] + "data": { + "pdfName": "radar.pdf" + }, + "children": [] }, { "label": "32-41-02 Main Landing Gear Shock Strut", - "data": "32-41-02 Main Landing Gear Shock Strut", + "data": { + "pdfName": "radar.pdf" + }, "children": [] } ] }, { "label": "32-42 Brakes", - "data": "32-42 Brakes", + "data": { + "pdfName": "radar.pdf" + }, "expandedIcon": "fa fa-folder-open", "collapsedIcon": "fa fa-folder", - "children": - [ + "children": [ { "label": "32-42-04 Parking Brake Valve", - "data": "32-42-04 Parking Brake Valve", - "children":[] + "data": { + "pdfName": "radar.pdf" + }, + "children": [] } ] } - ] -} +} \ No newline at end of file