feature(ui): new UI

packages/klingon-server/package.json

@@ -11,6 +11,7 @@
         "server"
     ],
     "dependencies": {
+        "@compodoc/ts-stats": "^1.1.1",
         "body-parser": "^1.17.2",
         "cors": "^2.8.4",
         "express": "^4.15.3",

packages/klingon-ui/src/app/_shared/shared.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { DropDownComponent } from './drop-down/drop-down.component';
+import { LogComponent } from './log/log.component';
+import { TerminalModule } from './terminal/terminal.module';
+import { CommonModule } from '@angular/common';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+@NgModule({
+  declarations: [DropDownComponent, LogComponent],
+  imports: [TerminalModule, CommonModule, MatExpansionModule],
+  exports: [DropDownComponent, LogComponent]
+})
+export class SharedModule {}

packages/klingon-ui/src/app/app-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Route } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+
+const routes: Route[] = [
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  },
+  {
+    path: 'dashboard',
+    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
+  },
+  {
+    path: 'home',
+    component: HomeComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

packages/klingon-ui/src/app/app.component.css

@@ -1,30 +0,0 @@
-:host mat-toolbar {
-    height: 149px;
-    position: fixed;
-    background-image: url('../assets/ngKlingon__white.png');
-    background-size: 90px;
-    background-repeat: no-repeat;
-    background-position: center top;
-}
-
-.mat-card {
-    background: white;
-    width: 70vw;
-    margin: 0 auto;
-    top: 100px;
-    padding: 0;
-}
-
-@media (max-width: 600px) {
-    .mat-card {
-        width: 99vw;
-    }
-}
-
-span.fill-remaining-space {
-    flex: 1 1 auto;
-}
-
-snack-bar-container.error-container {
-    background: red;
-}

packages/klingon-ui/src/app/app.component.html

@@ -1,69 +1 @@
-<mat-toolbar color="primary">
-  <button mat-icon-button>
-    <mat-icon>dehaze</mat-icon>
-  </button>
-  <!-- <h1>ngKlingon</h1> -->
-  <span class="fill-remaining-space"></span>
-  <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item>
-      <mat-icon>account_circle</mat-icon>
-      <span>About</span>
-    </button>
-    <a href="https://github.com/angular-klingon/klingon/blob/master/CONTRIBUTING.md" target="_blank" mat-menu-item>
-      <!-- <button mat-menu-item> -->
-      <mat-icon>bug_report</mat-icon>
-      <span>Contribute</span>
-    </a>
-    <!-- </button> -->
-    <!-- <button mat-menu-item (click)="openShell()">
-        <mat-icon>settings_input_composite</mat-icon>
-        <span>Open Shell</span>
-      </button> -->
-    <button mat-menu-item disabled>
-      <mat-icon>help</mat-icon>
-      <span>Help</span>
-    </button>
-  </mat-menu>
-</mat-toolbar>
-<!-- <mat-card>
-
-</mat-card> -->
-
-<mat-tab-group class="mat-card" (selectedIndexChange)="storeIndex($event)" [selectedIndex]="selectedIndex"
-  (dragover)="onDrag($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
-  <mat-tab>
-    <ng-template mat-tab-label>New</ng-template>
-    <app-cli-create #appCli (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-create>
-  </mat-tab>
-  <mat-tab [disabled]="true">
-    <ng-template mat-tab-label>Generate</ng-template>
-  </mat-tab>
-  <mat-tab>
-    <ng-template mat-tab-label>Serve</ng-template>
-    <app-cli-serve (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-serve>
-  </mat-tab>
-  <mat-tab>
-    <ng-template mat-tab-label>Test</ng-template>
-    <app-cli-test (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-test>
-  </mat-tab>
-  <mat-tab>
-    <ng-template mat-tab-label>Build</ng-template>
-    <app-cli-build (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-build>
-  </mat-tab>
-</mat-tab-group>
-
-<br>
-
-<mat-card>
-  <app-drop-down contentHeight="542px">
-    <mat-icon>keyboard</mat-icon>
-    <h3 class="title">Shell</h3>
-    <h6 class="sub-title">Access the "GOD" mode!</h6>
-    <div class="content">
-      <app-terminal height="500px" (open)="onTerminalOpen($event);"></app-terminal>
-    </div>
-  </app-drop-down>
-</mat-card>
+<router-outlet></router-outlet>

packages/klingon-ui/src/app/app.component.ts

@@ -1,122 +1,10 @@
-import { Component, ViewChild } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { OnInit } from '@angular/core';
-import { CliCreateComponent } from './cli/create/create.component';
-import { TerminalData } from './_shared/terminal/terminal.service';
-
-@Component({
-  selector: 'app-snack-bar-error',
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
-      span {
-        color: #f44336;
-        font-family: Roboto, 'Helvetica Neue', sans-serif;
-      }
-      mat-icon {
-        color: #f44336;
-      }
-    `
-  ],
-  template:
-    '<mat-icon>error</mat-icon><span>An error has occured. Check the logs tab.</span>'
-})
-export class SnackBarErrorComponent {}
-
-@Component({
-  selector: 'app-snack-bar-success',
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
-      span {
-        color: #81c784;
-        font-family: Roboto, 'Helvetica Neue', sans-serif;
-      }
-      mat-icon {
-        color: #4caf50;
-      }
-    `
-  ],
-  template:
-    '<mat-icon>verified_user</mat-icon><span>Command executed successfully.</span>'
-})
-export class SnackBarSuccessComponent {}
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
-  selectedIndex = 0;
-
-  @ViewChild('appCli', { static: true }) appCli: CliCreateComponent;
-
-  constructor(
-    public snackBarError: MatSnackBar,
-    public snackBarSuccess: MatSnackBar
-  ) {}
-
-  ngOnInit() {
-    this.selectedIndex = parseInt(
-      localStorage.getItem('ui.selectedIndex') || '0',
-      10
-    );
-    localStorage.setItem('ui.selectedIndex', `${this.selectedIndex}`);
-  }
-
-  storeIndex(index: number) {
-    localStorage.setItem('ui.selectedIndex', `${index}`);
-  }
-
-  onError(message) {
-    console.log('onError::', message);
-    this.snackBarError.openFromComponent(SnackBarErrorComponent, {
-      duration: 3000,
-      panelClass: ['error-container']
-    });
-  }
-
-  onSuccess(message) {
-    console.log('onSuccess::', message);
-    if (message) {
-      this.snackBarSuccess.openFromComponent(SnackBarSuccessComponent, {
-        duration: 2000
-      });
-    }
-  }
-
-  onDrag(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  onDragLeave(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  onDrop(event: DragEvent) {
-    event.preventDefault();
-    this.appCli.import(event);
-  }
+export class AppComponent {
 
-  onTerminalOpen(data: TerminalData) {
-    /**
-     * Set current directory from server if root directory field is empty
-     */
-    if (data.cwd && !this.appCli.form.value['root-dir']) {
-      this.appCli.form.patchValue({ 'root-dir': data.cwd });
-    }
-  }
 }

packages/klingon-ui/src/app/app.module.ts

@@ -7,33 +7,18 @@ import { HttpClientModule } from '@angular/common/http';
 import { MatModule } from './mat.module';
 
 import { CliService } from './cli/cli.service';
-import { TerminalModule } from './_shared/terminal/terminal.module';
-import {
-  AppComponent,
-  SnackBarErrorComponent,
-  SnackBarSuccessComponent
-} from './app.component';
-import { DropDownComponent } from './_shared/drop-down/drop-down.component';
-import { CliCreateComponent } from './cli/create/create.component';
-import { CliServeComponent } from './cli/serve/serve.component';
-import { BuildComponent } from './cli/build/build.component';
-import { FlagsComponent } from './cli/flags/flags.component';
-import { CliTestComponent } from './cli/test/test.component';
-import { LogComponent } from './_shared/log/log.component';
+import { AppComponent } from './app.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { DashboardModule } from './dashboard/dashboard.module';
+import { AppRoutingModule } from './app-routing.module';
+import { HomeModule } from './home/home.module';
+import { SnackBarSuccessComponent, SnackBarErrorComponent } from './home/home.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DropDownComponent,
-    CliCreateComponent,
-    CliServeComponent,
-    BuildComponent,
-    FlagsComponent,
-    CliTestComponent,
-    LogComponent,
     SnackBarSuccessComponent,
     SnackBarErrorComponent
   ],
@@ -42,11 +27,15 @@ import { environment } from '../environments/environment';
     BrowserModule,
     ReactiveFormsModule,
     HttpClientModule,
-    TerminalModule,
     BrowserAnimationsModule,
     MatModule,
     MatExpansionModule,
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production
+    }),
+    DashboardModule,
+    AppRoutingModule,
+    HomeModule
   ],
   providers: [CliService],
   bootstrap: [AppComponent]

packages/klingon-ui/src/app/cli/cli.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { BuildComponent } from './build/build.component';
+import { FlagsComponent } from './flags/flags.component';
+import { CliServeComponent } from './serve/serve.component';
+import { CliCreateComponent } from './create/create.component';
+import { CliTestComponent } from './test/test.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatModule } from '../mat.module';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../_shared/shared.module';
+
+@NgModule({
+  declarations: [
+    BuildComponent,
+    CliCreateComponent,
+    FlagsComponent,
+    CliServeComponent,
+    CliTestComponent
+  ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatModule,
+    CommonModule,
+    SharedModule
+  ],
+  exports: [
+    CliServeComponent,
+    CliCreateComponent,
+    CliTestComponent,
+    BuildComponent
+  ]
+})
+export class CliModule {}

packages/klingon-ui/src/app/cli/cli.service.ts

@@ -15,7 +15,9 @@ export class CliService {
 
   constructor() {
     this.response$ = new Subject();
-    this.ws = new WebSocket(`ws://` + environment.host + `:` + environment.port + `/cli`);
+    this.ws = new WebSocket(
+      `ws://` + environment.host + `:` + environment.port + `/cli`
+    );
     this.ws.onopen = e => {
       this.isConnectionOn = true;
     };