feat(api): api docs component

src/app/dev/dev.component.html

@@ -2,7 +2,7 @@
 .row {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 .column {
@@ -49,11 +49,16 @@ <h2>Components</h2>
                      <mat-list-item>
                          <a mat-button [routerLink]="['/dev/app-runbox-dynamic']"><mat-icon svgIcon="border-inside"></mat-icon>Dynamic</a>
                      </mat-list-item>
+                     <mat-list-item>
+                         <a mat-button [routerLink]="['/dev/app-runbox-api-docs']"><mat-icon svgIcon="border-inside"></mat-icon>API</a>
+                     </mat-list-item>
                     </mat-list>
                   </div>
                 </div>
                 <div class='column right'>
                   <div class='green-column'>
+                    <app-runbox-api-docs *ngIf="route.params['getValue']().selected_component === 'app-runbox-api-docs'">
+                    </app-runbox-api-docs>
                     <app-runbox-dynamic *ngIf="route.params['getValue']().selected_component === 'app-runbox-dynamic'">
                     </app-runbox-dynamic>
                     <app-runbox-intro *ngIf="route.params['getValue']().selected_component === 'app-runbox-intro'">

src/app/rmm.ts

@@ -25,6 +25,7 @@ import { Alias } from './rmm/alias';
 import { Me } from './rmm/me';
 import { RunboxDomain } from './rmm/runbox_domain';
 import { AccountSecurity } from './rmm/account-security';
+import { Docs } from './rmm/docs';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable({
@@ -39,6 +40,7 @@ export class RMM {
     public email: Email;
     public runbox_domain: RunboxDomain;
     public account_security: AccountSecurity;
+    public docs: Docs;
     constructor(
         public http: HttpClient,
         public snackBar: MatSnackBar,
@@ -50,6 +52,7 @@ export class RMM {
         this.runbox_domain = new RunboxDomain(this);
         this.email = new Email(this);
         this.account_security = new AccountSecurity(this);
+        this.docs = new Docs(this);
     }
 
     public show_error ( message, action ) {

src/app/rmm/docs.ts

@@ -0,0 +1,39 @@
+// --------- BEGIN RUNBOX LICENSE ---------
+// Copyright (C) 2016-2018 Runbox Solutions AS (runbox.com).
+// 
+// This file is part of Runbox 7.
+// 
+// Runbox 7 is free software: You can redistribute it and/or modify it
+// under the terms of the GNU General Public License as published by the
+// Free Software Foundation, either version 3 of the License, or (at your
+// option) any later version.
+// 
+// Runbox 7 is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+// 
+// You should have received a copy of the GNU General Public License
+// along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
+// ---------- END RUNBOX LICENSE ----------
+import { timeout, share } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { RMM } from '../rmm';
+
+export class Docs {
+    constructor(
+        public app: RMM,
+    ) {
+    }
+    load_docs(): Observable<any> {
+        const req = this.app.ua.http.get('/_js/docs.json').pipe(timeout(60000), share());
+        req.subscribe(
+          data => {
+          },
+          error => {
+            return this.app.show_error('Could not load /_js/docs.json.', 'Dismiss');
+          }
+        );
+        return req;
+    }
+}

src/app/runbox-components/runbox-api-docs.ts

@@ -0,0 +1,135 @@
+// --------- BEGIN RUNBOX LICENSE ---------
+// Copyright (C) 2016-2018 Runbox Solutions AS (runbox.com).
+// 
+// This file is part of Runbox 7.
+// 
+// Runbox 7 is free software: You can redistribute it and/or modify it
+// under the terms of the GNU General Public License as published by the
+// Free Software Foundation, either version 3 of the License, or (at your
+// option) any later version.
+// 
+// Runbox 7 is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+// 
+// You should have received a copy of the GNU General Public License
+// along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
+// ---------- END RUNBOX LICENSE ----------
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+import { RMM } from '../rmm';
+import 'rxjs/add/operator/toPromise';
+
+@Component({
+    selector: 'app-runbox-api-docs',
+    styles: [`
+        .docs-container {
+            display: flex;
+            flex-grow: 1;
+        }
+        .docs-container .row {
+            display: flex;
+            flex-direction: row;
+            flex-grow: 1;
+        }
+        .docs-container .col {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+        }
+    `],
+    template: `
+    <div class="app-runbox-api-docs" >
+        <section class="mat-typography" *ngIf="docs">
+            <div class="docs-container">
+                <div class="row" style="">
+                    <div class="col" style="flex-grow: 0;">
+                        <mat-list>
+                            <div *ngFor="let section of sections">
+                              <mat-list-item (click)="open_section(section)"><a>{{section}}</a></mat-list-item>
+                              <mat-divider></mat-divider>
+                            </div>
+                        </mat-list>
+                    </div>
+                    <div class="col" style="">
+                        <div class="row" style="flex-grow: 0;">
+                            <div style="max-width: 700px">
+                                <mat-tab-group [(selectedIndex)]="tab_index" style="">
+                                  <mat-tab *ngFor="let subsection of subsections" [label]="subsection">
+                                      <app-runbox-section>
+                                          <div runbox-section-header>
+                                            <h1 class="runbox-section-header">{{docs.sections[section][subsection].section}} &#62; {{docs.sections[section][subsection].title}}</h1>
+                                          </div>
+                                          <div runbox-section-content class="runbox-section-content">
+                                              <div class="description">
+                                                <p><strong>Description:</strong> {{docs.sections[section][subsection].details}}</p>
+                                                <p><strong>Url:</strong> https:&#47;&#47;runbox.com{{docs.sections[section][subsection].request.url}}</p>
+                                                <p><strong>Method:</strong> {{docs.sections[section][subsection].request.method}}</p>
+                                                <mat-divider></mat-divider>
+                                              </div>
+                                              <div class="request">
+                                                <h2>Request</h2>
+                                                <p><strong>Headers:</strong> {{docs.sections[section][subsection].request.headers | json}}</p>
+                                                <p><strong>Content:</strong> {{docs.sections[section][subsection].request.content}}</p>
+                                                <mat-divider></mat-divider>
+                                              </div>
+                                              <div class="response">
+                                                <h2>Response</h2>
+                                                <p><strong>Headers:</strong> {{docs.sections[section][subsection].response.headers | json}}</p>
+                                                <p><strong>Content:</strong> {{docs.sections[section][subsection].response.content}}</p>
+                                              </div>
+                                          </div>
+                                      </app-runbox-section>
+                                  </mat-tab>
+                                </mat-tab-group>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    `
+})
+
+export class RunboxApiDocsComponent implements OnInit {
+  docs_url: '/_js/docs.json';
+  docs: any;
+  section: any;
+  sections: any;
+  subsections: any;
+  public tab_index: any;
+  constructor(
+    public rmm: RMM,
+  ) {
+  }
+
+  ngOnInit() {
+    this.load_docs();
+  }
+
+  sort_alphanumeric(a, b) {
+    if ( a < b )  { return -1; }
+    if ( a > b )  { return  1; }
+    return 0;
+  }
+
+  load_docs() {
+    const req = this.rmm.docs.load_docs();
+    req.toPromise().then( (data) => {
+        this.docs = data;
+        this.sections = Object.keys( this.docs.sections ).sort( this.sort_alphanumeric );
+        this.open_section(this.sections[0]);
+    });
+  }
+
+  open_section(section) {
+    this.section = section;
+    this.subsections = Object.keys(this.docs.sections[this.section]).sort( this.sort_alphanumeric );
+    setTimeout( () => { this.tab_index = 0; }, 200 );
+  }
+}
+

src/app/runbox-components/runbox-component.module.ts

@@ -36,13 +36,15 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RunboxIntroComponent } from '../runbox-components/runbox-intro';
 import { RunboxListComponent } from '../runbox-components/runbox-list';
 import { RunboxContainerComponent } from '../runbox-components/runbox-container';
 import { RunboxSectionComponent } from '../runbox-components/runbox-section';
 import { RunboxSlideToggleComponent } from '../runbox-components/runbox-slide-toggle';
 import { RunboxTimerComponent } from '../runbox-components/runbox-timer';
 import { RunboxDynamicComponent } from '../runbox-components/runbox-dynamic';
+import { RunboxApiDocsComponent } from '../runbox-components/runbox-api-docs';
 import { RunboxDynamicBuilderComponent } from './runbox-dynamic-builder';
 
 @NgModule({
@@ -55,6 +57,7 @@ import { RunboxDynamicBuilderComponent } from './runbox-dynamic-builder';
         RunboxTimerComponent,
         RunboxDynamicComponent,
         RunboxDynamicBuilderComponent,
+        RunboxApiDocsComponent,
     ],
     imports: [
         CommonModule,
@@ -74,6 +77,7 @@ import { RunboxDynamicBuilderComponent } from './runbox-dynamic-builder';
         MatToolbarModule,
         MatTooltipModule,
         MatTableModule,
+        MatTabsModule,
         MenuModule,
     ],
     exports: [
@@ -85,6 +89,7 @@ import { RunboxDynamicBuilderComponent } from './runbox-dynamic-builder';
         RunboxTimerComponent,
         RunboxDynamicComponent,
         RunboxDynamicBuilderComponent,
+        RunboxApiDocsComponent,
     ],
     entryComponents: [
     ],