diff --git a/src/app/config.ts b/src/app/config.ts index 670679a..0727b3c 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,13 +1,16 @@ export const config = { dashboard: { route: 'dashboard', - currentLayout: 'terminal-web', + currentLayout: 'terminal-ide-web', enabledLayouts: new Set([ 'terminal-ide-web', - 'terminal-web', + 'terminal-ide-vertical', + 'terminal-ide-horizontal', 'terminal-only', - 'web-only', - 'ide-only' + 'terminal-web', + 'ide-web-vertical', + 'ide-only', + 'web-only' ]), allLayouts: new Set([ 'terminal-ide-web', diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 80709b0..4ac0dbe 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -17,7 +17,7 @@
- +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 720ea65..5a28bd9 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { Subscription } from 'rxjs/Subscription'; import { WebSocketService } from '../services/websocket.service'; @@ -11,16 +11,13 @@ import { SidebarComponent } from '../sidebar/sidebar.component'; templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { +export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; enabledLayouts: Set = config.dashboard.enabledLayouts; - layout: string = config.dashboard.currentLayout ; + layout: string = config.dashboard.currentLayout; command_handlers = {'layout': this.layoutHandler.bind(this)}; - @ViewChild(SidebarComponent) - private sidebarComponent: SidebarComponent; - constructor(private deploymentNotificationService: DeploymentNotificationService, private webSocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef) {} @@ -36,19 +33,22 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { ); } - ngAfterViewInit() { - this.layout = this.sidebarComponent.layout; - } - layoutHandler(data: LayoutCommand) { if (this.enabledLayouts.has(data.layout)) { - this.layout = data.layout; + this.setLayout(data.layout); } else { console.log('Invalid ide layout "' + data.layout + '" received!'); } } + setLayout(layout: string) { + this.layout = layout; + // We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed + // Ace editors 'resize' event listener requires a parameter of force=true + setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0); + } + ngOnDestroy() { if (this.deploymentNotificationSubscription) { this.deploymentNotificationSubscription.unsubscribe(); diff --git a/src/app/ide/ide.component.ts b/src/app/ide/ide.component.ts index 5cd0f88..ac06802 100644 --- a/src/app/ide/ide.component.ts +++ b/src/app/ide/ide.component.ts @@ -17,6 +17,7 @@ import { WebSocketService } from '../services/websocket.service'; import { ProcessManagerService } from '../services/processmanager.service'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { config } from '../config'; +import { element } from 'protractor'; const modelist = brace.acequire('ace/ext/modelist'); diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts index a3e2247..41b993c 100644 --- a/src/app/sidebar/sidebar.component.ts +++ b/src/app/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, OnInit } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; import { config } from '../config'; @Component({ @@ -7,14 +7,15 @@ import { config } from '../config'; styleUrls: ['./sidebar.component.scss'] }) -export class SidebarComponent implements OnInit { - @Input() @Output() layout: string; +export class SidebarComponent { + @Input() layout: string; + @Output() layoutChanged = new EventEmitter(); enabledLayouts: Set = config.dashboard.enabledLayouts; + constructor() {} - ngOnInit() { - } setLayout(layout: string) { this.layout = layout; + this.layoutChanged.emit(this.layout); } } diff --git a/src/app/webide/source-code.ts b/src/app/webide/source-code.ts deleted file mode 100644 index ab0b524..0000000 --- a/src/app/webide/source-code.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface SourceCode { - filename: string; - content?: string; - files: string[]; - directory: string; - command: string; -} diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html deleted file mode 100644 index 937d2c1..0000000 --- a/src/app/webide/webide.component.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
- -
- -
- -
-
- -
-
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss deleted file mode 100644 index c00e9f0..0000000 --- a/src/app/webide/webide.component.scss +++ /dev/null @@ -1,95 +0,0 @@ -@import "../../assets/scss/variables.scss"; - -.tfw-grid-webide-statusbar { - display: grid; - height: $tao-navbar-height; - grid-template-columns: 8fr 1fr; -} - -.tfw-ace-editor { - height: calc(100% - 67px); - width: 100%; -} - -.btn-group { - padding-left: 34px; -} - -.underline { - text-decoration: underline; -} - -.tfw-tab-btn { - background-color: white; - border: 1px solid $tao-plum-900; - border-left: 0; - border-right: 0; - border-radius: 100px; - padding: 5px 19px; - z-index: 200; - - .tfw-tab-btn-saved, - .active, - .disabled, - &:disabled { - background-color: $tao-plum-200; - font-weight: 500; - font-style: italic; - color: black; - border: 0; - } -} - -.tfw-deploy-btn-group { - margin: auto $tiny; - - .tfw-deploy-btn { - background: $tao-bright-green-200; - border-radius: 100px; - padding: 6px 19px; - - img { - position: relative; - bottom: 1px; - height: $small; - } - - &.failed { - background-color: $tao-red-500; - color:white; - } - - &:disabled, - &.disabled, - &.deployed, - &.deploy - { - background-color: $tao-bright-green-100; - color: black; - } - - &.deploy { - background-color: $tao-warm-yellow-200; - } - - - .loader { - border: 2px solid $tao-warm-yellow-600; - border-radius: 50%; - border-top: 2px solid $tao-warm-yellow-200; - width: 15px; - height: 15px; - animation: spin 2s linear infinite; - display: inline-block; - margin-right: 5px; - position: relative; - top: 2px; - } - - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } - } - - } -} diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts deleted file mode 100644 index 2849335..0000000 --- a/src/app/webide/webide.component.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; - -import * as brace from 'brace'; -import 'brace/ext/modelist'; - -import 'brace/mode/c_cpp'; -import 'brace/mode/csharp'; -import 'brace/mode/java'; -import 'brace/mode/javascript'; -import 'brace/mode/json'; -import 'brace/mode/python'; -import 'brace/mode/sql'; - -import 'brace/theme/cobalt'; -import { SourceCode } from './source-code'; -import { WebSocketService } from '../services/websocket.service'; -import { ProcessManagerService } from '../services/processmanager.service'; -import { DeploymentNotificationService } from '../services/deployment-notification.service'; -import { config } from '../config'; - -const modelist = brace.acequire('ace/ext/modelist'); - -@Component({ - selector: 'app-webide', - templateUrl: './webide.component.html', - styleUrls: ['./webide.component.scss'] -}) -export class WebideComponent implements OnInit { - key_id = 'webide'; - filename = ''; - code: string = config.webide.defaultCode; - language: string = config.webide.defaultLanguage; - theme = 'cobalt'; - directory = ''; - files: string[]; - codeState = 'SAVED'; - deployButtonState = 'DEPLOYED'; - showDeployButton: boolean = config.webide.showDeployButton; - autosave = null; - command_handlers = {'reload': this.reloadHandler.bind(this), - 'read': this.readHandler.bind(this), - 'select': this.selectHandler.bind(this), - 'write': this.writeHandler.bind(this), - 'selectdir': this.selectdirHandler.bind(this)}; - - constructor(private webSocketService: WebSocketService, - private changeDetectorRef: ChangeDetectorRef, - private processManagerService: ProcessManagerService, - private deploymentNotificationService: DeploymentNotificationService) { } - - ngOnInit() { - this.webSocketService.connect(); - this.subscribeWS(); - this.requestCode(); - this.processManagerService.init(); - this.processManagerService.subscribeCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); }); - this.processManagerService.subscribeErrorCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); }); - this.resetAutoSaveCountdown(); - } - - subscribeWS() { - this.webSocketService.observeKey(this.key_id).subscribe((event) => { - this.command_handlers[event.data.command](event.data); - this.changeDetectorRef.detectChanges(); - }); - } - - updateFileData(data: SourceCode) { - this.filename = data.filename; - this.directory = data.directory; - this.code = (data.content != null) ? data.content : this.code; - this.language = modelist.getModeForPath(this.filename).name; - this.files = data.files; - } - - selectHandler(data: SourceCode) { - this.updateFileData(data); - } - - reloadHandler(data: SourceCode) { - this.requestCode(); - } - - readHandler(data: SourceCode) { - if (this.codeState === 'SAVED') { - this.updateFileData(data); - } - } - - writeHandler() { - this.setCodeState('SAVED'); - } - - selectdirHandler(data: SourceCode) { - this.updateFileData(data); - } - - resetAutoSaveCountdown() { - if (this.autosave) { - clearInterval(this.autosave); - } - this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.webide.autoSaveInterval); - } - - tabSwitchButtonHandler(file) { - if (this.codeState === 'DIRTY') { - this.sendCodeContents(); - } - this.selectCode(file); - this.requestCode(); - } - - setCodeState(state: string) { - if (state.match('SAVED|DIRTY')) { - this.codeState = state; - } - } - - setDeployButtonState(state: string) { - this.deployButtonState = state; - this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false); - } - - deployCode() { - this.processManagerService.restartProcess('login'); - this.setDeployButtonState('DEPLOYING'); - } - - sendCodeIfDirty() { - if (this.codeState === 'DIRTY') { - this.sendCodeContents(); - } - } - - sendCodeContents() { - this.webSocketService.send(this.key_id, { - 'command': 'write', - 'content': this.code - }); - } - - requestCode() { - this.webSocketService.send(this.key_id, { - 'command': 'read' - }); - } - - selectCode(filename: string) { - this.webSocketService.send(this.key_id, { - 'command': 'select', - 'filename': filename - }); - } -} diff --git a/src/assets/images/IDE.svg b/src/assets/images/IDE.svg deleted file mode 100644 index 4a0b6d4..0000000 --- a/src/assets/images/IDE.svg +++ /dev/null @@ -1 +0,0 @@ -IDE_icon \ No newline at end of file diff --git a/src/assets/images/IDE_active.svg b/src/assets/images/IDE_active.svg deleted file mode 100644 index df74fe6..0000000 --- a/src/assets/images/IDE_active.svg +++ /dev/null @@ -1 +0,0 @@ -IDE_iconactive \ No newline at end of file diff --git a/src/assets/images/ide-only_active.svg b/src/assets/images/ide-only_active.svg deleted file mode 100644 index f6be46d..0000000 --- a/src/assets/images/ide-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -webideonly_active \ No newline at end of file diff --git a/src/assets/images/ide-web-vertical_active.svg b/src/assets/images/ide-web-vertical_active.svg deleted file mode 100644 index 2872419..0000000 --- a/src/assets/images/ide-web-vertical_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_webide_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-horizontal_active.svg b/src/assets/images/terminal-ide-horizontal_active.svg deleted file mode 100644 index 924ce3d..0000000 --- a/src/assets/images/terminal-ide-horizontal_active.svg +++ /dev/null @@ -1 +0,0 @@ -webide_terminal_horizontal_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide_vertical.svg b/src/assets/images/terminal-ide-vertical.svg similarity index 100% rename from src/assets/images/terminal-ide_vertical.svg rename to src/assets/images/terminal-ide-vertical.svg diff --git a/src/assets/images/terminal-ide-vertical_active.svg b/src/assets/images/terminal-ide-vertical_active.svg deleted file mode 100644 index ae63a60..0000000 --- a/src/assets/images/terminal-ide-vertical_active.svg +++ /dev/null @@ -1 +0,0 @@ -terminal_webide_vertical_active \ No newline at end of file diff --git a/src/assets/images/terminal-ide-web_active.svg b/src/assets/images/terminal-ide-web_active.svg deleted file mode 100644 index 818f251..0000000 --- a/src/assets/images/terminal-ide-web_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_webide_terminal_active \ No newline at end of file diff --git a/src/assets/images/terminal-only_active.svg b/src/assets/images/terminal-only_active.svg deleted file mode 100644 index 1e8a8f0..0000000 --- a/src/assets/images/terminal-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -terminalonly_active \ No newline at end of file diff --git a/src/assets/images/terminal-web_active.svg b/src/assets/images/terminal-web_active.svg deleted file mode 100644 index 51d5bb9..0000000 --- a/src/assets/images/terminal-web_active.svg +++ /dev/null @@ -1 +0,0 @@ -web_terminal_active \ No newline at end of file diff --git a/src/assets/images/web-only_active.svg b/src/assets/images/web-only_active.svg deleted file mode 100644 index cfcb65d..0000000 --- a/src/assets/images/web-only_active.svg +++ /dev/null @@ -1 +0,0 @@ -webonly_active \ No newline at end of file diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index 35303da..80d8407 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -46,7 +46,6 @@ $ide-web-vertical-layout: ( 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); - $terminal-only-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), @@ -74,7 +73,6 @@ $web-only-layout: ( 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); - $layouts: ( 'terminal-ide-web': $terminal-ide-web-layout, 'terminal-web': $terminal-web-layout, @@ -131,5 +129,3 @@ $layouts: ( min-height: #{$rows-count / $grid-rows-count * 100}vh; } } - -