dhutchison · dhutchison · Mar 8, 2019 · Mar 7, 2019 · Mar 8, 2019
diff --git a/docs/404.html b/docs/404.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<link rel="stylesheet" href="styles.4963c1e1ffd00e7d57a1.css"></head>
+<link rel="stylesheet" href="styles.a28a5002915fea04e4ea.css"></head>
 <body>
   <app-root></app-root>
-<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.88f2fd7c2945d23e6062.js"></script></body>
+<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.12f4031c93c1c8fa87dc.js"></script></body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<link rel="stylesheet" href="styles.4963c1e1ffd00e7d57a1.css"></head>
+<link rel="stylesheet" href="styles.a28a5002915fea04e4ea.css"></head>
 <body>
   <app-root></app-root>
-<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.88f2fd7c2945d23e6062.js"></script></body>
+<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.12f4031c93c1c8fa87dc.js"></script></body>
 </html>
diff --git a/docs/main.88f2fd7c2945d23e6062.js → docs/main.12f4031c93c1c8fa87dc.js b/docs/main.88f2fd7c2945d23e6062.js → docs/main.12f4031c93c1c8fa87dc.js
diff --git a/docs/styles.4963c1e1ffd00e7d57a1.css → docs/styles.a28a5002915fea04e4ea.css b/docs/styles.4963c1e1ffd00e7d57a1.css → docs/styles.a28a5002915fea04e4ea.css
diff --git a/src/app/api-path-tree/api-path-tree.component.html b/src/app/api-path-tree/api-path-tree.component.html
@@ -1,5 +1,12 @@
-<p-tree [value]="apiPathNodes" layout="horizontal">
+<p-tree [value]="apiPathNodes" layout="horizontal"
+  selectionMode="single" [(selection)]="selectedNode">
   <ng-template let-node  pTemplate="operation">
     <span pTooltip="{{ node.tooltip }}">{{ node.label }}</span>
   </ng-template>
 </p-tree>
+
+<app-node-method-detail *ngIf="selectedNode"
+  [(method)]="selectedNode.method"
+  [(path)]="selectedNode.path"
+  [(node)]="selectedNode.operation">
+</app-node-method-detail>
diff --git a/src/app/api-path-tree/api-path-tree.component.ts b/src/app/api-path-tree/api-path-tree.component.ts
@@ -14,6 +14,7 @@ export class ApiPathTreeComponent implements OnInit {
    * Object hoilding the tree nodes to display
    */
   apiPathNodes: TreeNode[] = [];
+  selectedNode: TreeNode;
 
   constructor(
     private fileReaderService: FileReaderService,

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,26 +2,35 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
+import { ButtonModule } from 'primeng/button';
+import {FieldsetModule} from 'primeng/fieldset';
+import { PanelModule } from 'primeng/panel';
 import { TooltipModule } from 'primeng/tooltip';
 import { TreeModule } from 'primeng/tree';
 
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FileChooserComponent } from './file-chooser/file-chooser.component';
 import { ApiPathTreeComponent } from './api-path-tree/api-path-tree.component';
+import { NodeMethodDetailComponent } from './node-method-detail/node-method-detail.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     FileChooserComponent,
-    ApiPathTreeComponent
+    ApiPathTreeComponent,
+    NodeMethodDetailComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
 
     BrowserAnimationsModule,
 
+    ButtonModule,
+    FieldsetModule,
+    PanelModule,
     TooltipModule,
     TreeModule
   ],

diff --git a/src/app/node-method-detail/node-method-detail.component.html b/src/app/node-method-detail/node-method-detail.component.html
@@ -0,0 +1,53 @@
+<div *ngIf="node">
+  <p-panel styleClass="http-{{method | lowercase}}" [toggleable]="true">
+    <p-header>
+        <p-button label="{{method | uppercase}}" style="display: inline-block" ></p-button>
+        <p class="path" style="display: inline-block">{{path}}</p>
+        <p style="display: inline-block">{{node.summary}}</p>
+    </p-header>
+    <p>{{node.description}}</p>
+
+    <p-fieldset [toggleable]="true">
+        <p-header>Parameters</p-header>
+        <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let p of node.parameters">
+                <td class="key">
+                  <dl>
+                    <dt>{{p.name}} <span *ngIf="p.required" class="required">* <sup>required</sup></span></dt>
+                      <dd>({{p.in}})</dd>
+                  </dl>
+                </td>
+                <td>{{p.description}}</td>
+              </tr>
+            </tbody>
+          </table>
+    </p-fieldset>
+
+    <p-fieldset [toggleable]="true">
+        <p-header>
+          Responses
+        </p-header>
+        <table>
+            <thead>
+                <tr>
+                  <th>Code</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="key" *ngFor="let item of node.responses | keyvalue">
+                  <td>{{item.key}}</td>
+                  <td>{{item.value.description}}</td>
+                </tr>
+            </tbody>
+          </table>
+    </p-fieldset>
+  </p-panel>
+</div>
diff --git a/src/app/node-method-detail/node-method-detail.component.scss b/src/app/node-method-detail/node-method-detail.component.scss
@@ -0,0 +1,35 @@
+span.required {
+    color: red;
+}
+
+.path {
+    font-weight: bold;
+    margin: 1em;
+}
+
+p-fieldset {
+    margin:1em;
+}
+p-fieldset dt {
+    font-weight: bold;
+}
+p-fieldset dd {
+    font-style: italic;
+    font-size: 0.8em;
+    margin:0.5em;
+}
+
+table {
+    width: 100%;
+}
+
+th {
+    border-bottom: 1px solid #CCC;
+}
+
+th {
+    text-align: left;
+}
+td {
+    padding:0.5em;
+}
diff --git a/src/app/node-method-detail/node-method-detail.component.spec.ts b/src/app/node-method-detail/node-method-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NodeMethodDetailComponent } from './node-method-detail.component';
+
+describe('NodeMethodDetailComponent', () => {
+  let component: NodeMethodDetailComponent;
+  let fixture: ComponentFixture<NodeMethodDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NodeMethodDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NodeMethodDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/node-method-detail/node-method-detail.component.ts b/src/app/node-method-detail/node-method-detail.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+  selector: 'app-node-method-detail',
+  templateUrl: './node-method-detail.component.html',
+  styleUrls: ['./node-method-detail.component.scss']
+})
+export class NodeMethodDetailComponent implements OnInit {
+
+    @Input() method: String;
+    @Input() path;
+    @Input() node: TreeNode;
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/src/app/services/openapi-treenode-converter.service.ts b/src/app/services/openapi-treenode-converter.service.ts
@@ -165,7 +165,7 @@ export class OpenapiTreenodeConverterService {
               if (apiPath[method]) {
                 /* Definition exists for the http method */
                 pathNode.children.push(
-                  this.createHttpMethodNode(method.toUpperCase(), apiPath[method]));
+                  this.createHttpMethodNode(key, method.toUpperCase(), apiPath[method]));
               }
             });
           }
@@ -196,13 +196,16 @@ export class OpenapiTreenodeConverterService {
    * @param method the HTTP method
    * @param operation the details of the Operation
    */
-  private createHttpMethodNode(method: string, operation: OperationObject): TreeNode {
+  private createHttpMethodNode(path:string, method: string, operation: OperationObject): TreeNode {
 
     const node: OperationTreeNode = {
       label: method,
       leaf: true,
       type: 'operation',
-      styleClass: 'ui-treenode-http-method'
+      styleClass: 'ui-treenode-http-method',
+      operation: operation,
+      method: method,
+      path: path
     };
 
     /* Add a tooltip */
@@ -220,4 +223,9 @@ export class OpenapiTreenodeConverterService {
 
 export interface OperationTreeNode extends TreeNode {
   tooltip?: string;
+
+  //Additional fields to supply details to Node Detail Rendering
+  method?:string;
+  path?:string;
+  operation?: OperationObject;
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -11,4 +11,53 @@
     .ui-corner-all {
         border-radius: 10px;
     }
+}
+
+.http-post {
+    .ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
+        border-color:#49cc90;
+        background:rgba(73,204,144,.1);
+    }
+
+    .ui-widget-header button {
+        background:#49cc90;
+        border-color:#49cc90;
+        padding: 0 0.5em
+    }
+}
+
+.http-put {
+    .ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
+        border-color:#fca130;
+        background:rgba(252,161,48,.1);
+    }
+    .ui-widget-header .ui-button {
+        border-color:#fca130;
+        background: #fca130;
+        padding: 0 0.5em
+    }
+}
+
+.http-get {
+    .ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
+        border-color:#61affe;
+        background:rgba(97,175,254,.1);
+    }
+    .ui-widget-header .ui-button {
+        border-color:#61affe;
+        background: #61affe;
+        padding: 0 0.5em
+    }
+}
+
+.http-delete {
+    .ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
+        border-color:#f93e3e;
+        background:rgba(249,62,62,.1);
+    }
+    .ui-widget-header .ui-button {
+        border-color:#f93e3e;
+        background: #f93e3e;
+        padding: 0 0.5em
+    }
 }