Show properties and links.

package.json

@@ -21,12 +21,13 @@
     "@angular/platform-browser": "2.0.0-rc.4",
     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
     "@angular/router": "3.0.0-alpha.8",
-    "@angular2-material/button": "^2.0.0-alpha.5-2",
-    "@angular2-material/card": "^2.0.0-alpha.5-2",
-    "@angular2-material/core": "^2.0.0-alpha.5-2",
-    "@angular2-material/grid-list": "^2.0.0-alpha.5-2",
-    "@angular2-material/list": "^2.0.0-alpha.5-2",
-    "@angular2-material/toolbar": "^2.0.0-alpha.5-2",
+    "@angular2-material/button": "^2.0.0-alpha.6-2",
+    "@angular2-material/card": "^2.0.0-alpha.6-2",
+    "@angular2-material/core": "^2.0.0-alpha.6-2",
+    "@angular2-material/grid-list": "^2.0.0-alpha.6-2",
+    "@angular2-material/list": "^2.0.0-alpha.6-2",
+    "@angular2-material/toolbar": "^2.0.0-alpha.6-2",
+    "@angular2-material/icon": "^2.0.0-alpha.6-2",
     "es6-shim": "0.35.1",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",

src/app/shared/schema/parsers/v3.parser.ts

@@ -8,16 +8,107 @@ export class V3Parser {
 
   }
 
-  public parse(rawSchemas: string): Array<IParsedSchema> {
+  public parse(rawSchemas: string): Array<ISchema> {
+    let schemas: Array<any>
     try {
-      return JSON.parse(rawSchemas)
+      schemas = JSON.parse(rawSchemas)
     } catch (err) {
+      schemas = []
+    }
+
+    return schemas.map((rawSchema: any) => {
+      return new Schema(rawSchema)
+    })
+  }
+
+}
+
+export interface ISchema {
+  title: string
+  url: string
+  properties: Array<IProperty>
+  links: Array<ILink>
+}
+
+class Schema implements ISchema {
+
+  public title: string
+  public url: string
+  public properties: Array<IProperty>
+  public links: Array<ILink>
+
+  public constructor(rawSchema: any) {
+    this.title = rawSchema.title
+    this.url = rawSchema.pathStart
+    this.properties = this.getProperties(rawSchema.properties)
+    this.links = this.getLinks(rawSchema.links)
+  }
+
+  private getProperties(rawProperties: any): Array<IProperty> {
+    if (rawProperties === undefined || rawProperties === null || Object.keys(rawProperties).length === 0) {
       return []
     }
+    return Object.keys(rawProperties).map((rawPropertyName: string) => {
+      return new Property(rawPropertyName, rawProperties[rawPropertyName])
+    })
   }
 
+  private getLinks(rawLinks: Array<any>): Array<ILink> {
+    if (rawLinks === undefined || rawLinks === null || rawLinks.length === 0) {
+      return []
+    }
+    return rawLinks.map((rawLink: any) => {
+      return new Link(rawLink)
+    })
+  }
+
+}
+
+export interface IProperty {
+  name: string
+  type: string
+  required: boolean
+  ref?: ISchema
+}
+
+class Property implements IProperty {
+
+  public name: string
+  public type: string
+  public required: boolean
+  public ref: ISchema
+
+  public constructor(name: string, rawProperty: any) {
+    this.name = name
+    this.type = rawProperty.type
+    this.required = rawProperty.required || false
+    // this.ref = rawProperty.ref
+  }
+}
+
+export interface ILink {
+  name: string
+  url: string
+  method: string
+  ref?: ISchema
+  type?: string
 }
 
-export interface IParsedSchema {
-  // TODO
+class Link implements ILink {
+
+  public name: string
+  public url: string
+  public method: string
+  public ref: ISchema
+  public type: string
+
+  public constructor(rawLink: any) {
+    this.name = rawLink.rel
+    this.url = rawLink.href
+    this.method = rawLink.method
+    if (rawLink.targetSchema !== undefined) {
+      this.ref = rawLink.targetSchema.$ref
+      this.type = rawLink.targetSchema.type
+    }
+  }
 }

src/app/viewer/shared/schema-item.component.html

@@ -0,0 +1,13 @@
+<md-list-item>
+  <button md-list-avatar md-mini-fab (click)="toggleExpand()">
+    <md-icon *ngIf="!isExpanded">add</md-icon>
+    <md-icon *ngIf="isExpanded">remove</md-icon>
+  </button>
+  <h4 md-line>{{schema.title}}</h4>
+</md-list-item>
+<ul *ngIf="isExpanded">
+  <li *ngFor="let property of schema.properties">{{property.name}}: {{property.type}}</li>
+</ul>
+<ul *ngIf="isExpanded">
+  <li *ngFor="let link of schema.links">{{link.method.toUpperCase()}} - {{link.name}}: {{link.type}} - {{link.url}}</li>
+</ul>

src/app/viewer/shared/schema-item.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core'
+import { MD_LIST_DIRECTIVES } from '@angular2-material/list'
+import { MdIcon, MdIconRegistry } from '@angular2-material/icon'
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button'
+import { ISchema } from "../../shared/schema/parsers/v3.parser"
+
+@Component({
+  moduleId: module.id,
+  selector: 'app-schema-item',
+  templateUrl: 'schema-item.component.html',
+  directives: [MD_LIST_DIRECTIVES, MdIcon, MD_BUTTON_DIRECTIVES],
+  providers: [MdIconRegistry]
+})
+export class SchemaItemComponent {
+  @Input() schema: ISchema
+
+  public isExpanded: boolean
+
+  public constructor() {
+    this.isExpanded = false
+  }
+
+  public toggleExpand(): void {
+    this.isExpanded = !this.isExpanded
+  }
+
+}

src/app/viewer/shared/schema-list.component.html

@@ -1,3 +1,3 @@
 <md-list>
-  <md-list-item *ngFor="let schema of schemas let i = index">{{i}} - {{schema.title}}</md-list-item>
+  <app-schema-item *ngFor="let schema of schemas" [schema]="schema"></app-schema-item>
 </md-list>

src/app/viewer/shared/schema-list.component.ts

@@ -1,16 +1,16 @@
 import { Component, Input } from '@angular/core'
-import { SchemaComponent } from "./schema.component"
-import { V3Parser, IParsedSchema } from "../../shared/schema/parsers/v3.parser"
+import { SchemaItemComponent } from "./schema-item.component"
+import { V3Parser, ISchema } from "../../shared/schema/parsers/v3.parser"
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list'
 
 @Component({
   moduleId: module.id,
   selector: 'app-schema-list',
   templateUrl: 'schema-list.component.html',
-  directives: [SchemaComponent, MD_LIST_DIRECTIVES],
+  directives: [SchemaItemComponent, MD_LIST_DIRECTIVES],
 })
 export class SchemaListComponent {
-  @Input() schemas: Array<IParsedSchema>
+  @Input() schemas: Array<ISchema>
 
   public constructor() {
 

src/app/viewer/viewer.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card'
 import { SchemaListComponent } from './shared/schema-list.component'
-import { V3Parser, IParsedSchema } from '../shared/schema/parsers/v3.parser'
+import { V3Parser, ISchema } from '../shared/schema/parsers/v3.parser'
 
 @Component({
   moduleId: module.id,
@@ -12,13 +12,13 @@ import { V3Parser, IParsedSchema } from '../shared/schema/parsers/v3.parser'
 export class ViewerComponent {
 
   public rawSchema: string
-  public schemas: Array<IParsedSchema>
+  public schemas: Array<ISchema>
 
   private V3Parser: V3Parser
 
   public constructor(V3Parser: V3Parser) {
     this.V3Parser = V3Parser
-    this.schemas = new Array()
+    this.schemas = []
   }
 
   public onRawSchemaChange(): void {

src/system-config.ts

@@ -22,6 +22,7 @@ const materialPkgs:string[] = [
   'toolbar',
   'grid-list',
   'list',
+  'icon',
 ]
 
 materialPkgs.forEach((pkg) => {