` to act as our scrolling element for desktop layouts. */
+ flex: 1;
+}
+
+.example-is-mobile .example-sidenav-container {
+ /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
+ `` to be our scrolling element for mobile layouts. */
+ flex: 1 0 auto;
+}
+
+.addFabBtn{
+ position: absolute;
+ bottom: 50px;
+ right: 50px;
+}
diff --git a/packages/klingon-ui/src/app/dashboard/dashboard.component.html b/packages/klingon-ui/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..cac4ba2
--- /dev/null
+++ b/packages/klingon-ui/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,28 @@
+
+
+
+ Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/klingon-ui/src/app/dashboard/dashboard.component.spec.ts b/packages/klingon-ui/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..9c996c3
--- /dev/null
+++ b/packages/klingon-ui/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+ let component: DashboardComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DashboardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/packages/klingon-ui/src/app/dashboard/dashboard.component.ts b/packages/klingon-ui/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..98d6d96
--- /dev/null
+++ b/packages/klingon-ui/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,23 @@
+import { Component, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+
+@Component({
+ selector: 'app-dashboard',
+ templateUrl: './dashboard.component.html',
+ styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnDestroy {
+ constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
+ this.mobileQuery = media.matchMedia('(max-width: 600px)');
+ this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+ this.mobileQuery.addListener(this._mobileQueryListener);
+ }
+
+ mobileQuery: MediaQueryList;
+
+ private _mobileQueryListener: () => void;
+
+ ngOnDestroy(): void {
+ this.mobileQuery.removeListener(this._mobileQueryListener);
+ }
+}
diff --git a/packages/klingon-ui/src/app/dashboard/dashboard.module.ts b/packages/klingon-ui/src/app/dashboard/dashboard.module.ts
new file mode 100644
index 0000000..2dd55cc
--- /dev/null
+++ b/packages/klingon-ui/src/app/dashboard/dashboard.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardComponent } from './dashboard.component';
+import { Route, RouterModule } from '@angular/router';
+import { MatModule } from '../mat.module';
+
+const routes: Route[] = [
+ {
+ path: '',
+ component: DashboardComponent
+ }
+];
+
+@NgModule({
+ declarations: [DashboardComponent],
+ imports: [
+ CommonModule,
+ MatModule,
+ RouterModule.forChild(routes)
+ ],
+})
+export class DashboardModule { }
diff --git a/packages/klingon-ui/src/app/home/home.component.css b/packages/klingon-ui/src/app/home/home.component.css
new file mode 100644
index 0000000..8239e13
--- /dev/null
+++ b/packages/klingon-ui/src/app/home/home.component.css
@@ -0,0 +1,30 @@
+: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;
+}
diff --git a/packages/klingon-ui/src/app/home/home.component.html b/packages/klingon-ui/src/app/home/home.component.html
new file mode 100644
index 0000000..bd4b928
--- /dev/null
+++ b/packages/klingon-ui/src/app/home/home.component.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ bug_report
+ Contribute
+
+
+
+
+
+
+
+ New
+
+
+
+ Generate
+
+
+ Serve
+
+
+
+ Test
+
+
+
+ Build
+
+
+
+
+
+
+
+
+ keyboard
+ Shell
+ Access the "GOD" mode!
+
+
+
diff --git a/packages/klingon-ui/src/app/home/home.component.spec.ts b/packages/klingon-ui/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..490e81b
--- /dev/null
+++ b/packages/klingon-ui/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HomeComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/packages/klingon-ui/src/app/home/home.component.ts b/packages/klingon-ui/src/app/home/home.component.ts
new file mode 100644
index 0000000..523eb3f
--- /dev/null
+++ b/packages/klingon-ui/src/app/home/home.component.ts
@@ -0,0 +1,122 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { TerminalData } from '../_shared/terminal/terminal.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { CliCreateComponent } from '../cli/create/create.component';
+
+
+@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:
+ 'errorAn error has occured. Check the logs tab.'
+})
+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:
+ 'verified_userCommand executed successfully.'
+})
+export class SnackBarSuccessComponent {}
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.css']
+})
+export class HomeComponent 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);
+ }
+
+ 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 });
+ }
+ }
+}
diff --git a/packages/klingon-ui/src/app/home/home.module.ts b/packages/klingon-ui/src/app/home/home.module.ts
new file mode 100644
index 0000000..c52829c
--- /dev/null
+++ b/packages/klingon-ui/src/app/home/home.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeComponent } from './home.component';
+import { CliModule } from '../cli/cli.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { TerminalModule } from '../_shared/terminal/terminal.module';
+import { SharedModule } from '../_shared/shared.module';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+
+
+@NgModule({
+ declarations: [HomeComponent],
+ imports: [
+ CommonModule,
+ CliModule,
+ MatIconModule,
+ MatMenuModule,
+ MatToolbarModule,
+ MatTabsModule,
+ TerminalModule,
+ SharedModule,
+ MatCardModule,
+ MatButtonModule,
+ RouterModule
+ ]
+})
+export class HomeModule { }
diff --git a/packages/klingon-ui/src/app/mat.module.ts b/packages/klingon-ui/src/app/mat.module.ts
index da9d82e..6b0718e 100644
--- a/packages/klingon-ui/src/app/mat.module.ts
+++ b/packages/klingon-ui/src/app/mat.module.ts
@@ -13,6 +13,7 @@ import { MatListModule } from '@angular/material/list';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSidenavModule } from '@angular/material/sidenav';
import { NgModule } from '@angular/core';
const imports = [
@@ -30,7 +31,8 @@ const imports = [
MatListModule,
MatSnackBarModule,
MatProgressBarModule,
- MatSlideToggleModule
+ MatSlideToggleModule,
+ MatSidenavModule
];
@NgModule({
diff --git a/packages/klingon-ui/src/tsconfig.app.json b/packages/klingon-ui/src/tsconfig.app.json
index 39ba8db..8a98399 100644
--- a/packages/klingon-ui/src/tsconfig.app.json
+++ b/packages/klingon-ui/src/tsconfig.app.json
@@ -3,7 +3,7 @@
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
- "module": "es2015",
+ "module": "esnext",
"types": []
},
"exclude": [
diff --git a/packages/klingon-ui/tsconfig.json b/packages/klingon-ui/tsconfig.json
index 7168743..f49d4d7 100644
--- a/packages/klingon-ui/tsconfig.json
+++ b/packages/klingon-ui/tsconfig.json
@@ -15,7 +15,7 @@
"es2017",
"dom"
],
- "module": "es2015",
+ "module": "esnext",
"baseUrl": "./"
}
-}
\ No newline at end of file
+}