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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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 @@
-
\ 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;
}
}
-
-