diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d08e84e..b8d5a95 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; -import { WebideComponent } from './webide/webide.component'; +import { IdeComponent } from './ide/ide.component'; import { TerminalComponent } from './terminal/terminal.component'; import { MessagesComponent } from './messages/messages.component'; import { TestmessengerComponent } from './testmessenger/testmessenger.component'; @@ -11,7 +11,7 @@ import { config } from './config'; const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, { path: config.dashboard.route, component: DashboardComponent}, - { path: config.webide.route, component: WebideComponent }, + { path: config.ide.route, component: IdeComponent }, { path: config.terminal.route, component: TerminalComponent }, { path: config.messages.route, component: MessagesComponent }, { path: config.testmessenger.route, component: TestmessengerComponent } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 97cc73d..d829e55 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import { SidebarComponent } from './sidebar/sidebar.component'; import { LoginComponent } from './web/web.component'; import { MarkdownService } from './services/markdown.service'; import { TerminadoService } from './services/terminado.service'; -import { WebideComponent } from './webide/webide.component'; +import { IdeComponent } from './ide/ide.component'; import { MessagesComponent } from './messages/messages.component'; import { WebSocketService } from './services/websocket.service'; import { TerminalComponent } from './terminal/terminal.component'; @@ -30,7 +30,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio HeaderComponent, SidebarComponent, LoginComponent, - WebideComponent, + IdeComponent, MessagesComponent, TerminalComponent, DashboardComponent, diff --git a/src/app/config.ts b/src/app/config.ts index c6f135d..319178c 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,24 +1,31 @@ export const config = { dashboard: { - 'route': 'dashboard', - 'defaultLayout': 'vraw-open' + route: 'dashboard', + defaultLayout: 'terminal-ide-vertical', + enabledLayouts: [ + 'terminal-ide-vertical', + 'terminal-ide-horizontal', + 'terminal-only', + 'ide-only' + ] + }, - webide: { - 'route': 'webide', - 'autoSaveInterval': 444, - 'defaultCode': 'Loading your file...', - 'defaultLanguage': 'text', - 'deployProcessName': 'login', - 'showDeployButton': true + ide: { + route: 'ide', + autoSaveInterval: 444, + defaultCode: 'Loading your file...', + defaultLanguage: 'text', + deployProcessName: 'login', + showDeployButton: true }, terminal: { - 'route': 'shell' + route: 'shell' }, messages: { - 'route': 'messages', - 'showNextButton': false + route: 'messages', + showNextButton: false }, testmessenger: { - 'route': 'testmessenger' + route: 'testmessenger' } }; diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index cff0f81..376d504 100755 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,9 @@ src="about:blank">
-
+
+ +
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 93d0887..0ad7a3f 100755 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -2,6 +2,24 @@ @import "../../assets/scss/mixins/layout.scss"; +@mixin set-tfw-web($layouts-key) { + + .tfw-web { + .iframe-container { + display: flex; + overflow: hidden; + @include set-component-size($layouts-key, 'web'); + } + + .iframe { + flex-grow: 1; + border: none; + margin: 0; + padding: $small; + } + } +} + .tfw-grid-main-components { display: grid; width: 100vw; @@ -13,7 +31,9 @@ .tfw-header, .tfw-messages { - @if (str_slice($layout-key, 0, str_length('default')) == 'default') { + + // Check whether the layout contains a web component + div[class*="web"] & { border: 2px solid $tao-gray-100; border-top: 0; border-left: 0; @@ -31,51 +51,34 @@ padding-top: $hair; background-color: $tao-gray-50; overflow-y: scroll; + max-height: 55vmin; - @if (str_slice($layout-key, 0, str_length('default')) != 'default') { + div[class*="web"] & { max-height: 95vmin; } - @else { - max-height: 55vmin; - } } - .tfw-web { - .iframe-container { - display: flex; - overflow: hidden; - @include set-component-size('web'); - } - - .iframe { - flex-grow: 1; - border: none; - margin: 0; - padding: $small; - } - } - - .tfw-webide { + .tfw-ide { background-color: $tao-plum-900; } .tfw-sidebar { - background-color: $tao-turqoise-800; + background-color: $tao-turqoise-300; display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: space-between; align-items: center; + padding-top: 75px; + border-left: 1px solid $tao-plum-500; } .tfw-terminal { overflow-y: hidden; - border: 1px solid $tao-plum-100; - border-bottom: 0; background-color: $tao-gray-800; - @if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') { - border-left: 0; - border-top: 0; + + div[class*="web"] & { + border-top: 1px solid $tao-plum-100; } } } @@ -83,3 +86,39 @@ .deploy-blur { filter: blur(3px); } + +.terminal-ide-web { + @include set-tfw-web('terminal-ide-web'); + @include position-grid-items(map_get($layouts, 'terminal-ide-web'),'.tfw-'); +} + +.terminal-web{ + @include set-tfw-web('terminal-web'); + @include position-grid-items(map_get($layouts,'terminal-web'),'.tfw-'); +} + +.terminal-ide-vertical { + @include position-grid-items(map_get($layouts,'terminal-ide-vertical'),'.tfw-'); +} + +.terminal-ide-horizontal { + @include position-grid-items(map_get($layouts,'terminal-ide-horizontal'),'.tfw-'); +} + +.ide-web-vertical { + @include set-tfw-web('ide-web-vertical'); + @include position-grid-items(map_get($layouts,'ide-web-vertical'),'.tfw-'); +} + +.terminal-only { + @include position-grid-items(map_get($layouts,'terminal-only'),'.tfw-'); +} + +.ide-only { + @include position-grid-items(map_get($layouts,'ide-only'),'.tfw-'); +} + +.web-only { + @include set-tfw-web('web-only'); + @include position-grid-items(map_get($layouts,'web-only'),'.tfw-'); +} diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 9fad94c..26b2dfc 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -13,8 +13,7 @@ import { config } from '../config'; export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; - layout: string = config.dashboard.defaultLayout; - layout = 'vraw-closed'; + layout: string = config.dashboard.defaultLayout ; command_handlers = {'layout': this.layoutHandler.bind(this)}; constructor(private deploymentNotificationService: DeploymentNotificationService, @@ -33,11 +32,11 @@ export class DashboardComponent implements OnInit, OnDestroy { } layoutHandler(data: LayoutCommand) { - if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) { + if (data.layout.match('terminal-ide-vertical|terminal-only|hraw|default-open|default-closed')) { this.layout = data.layout; } else { - console.log('Invalid webide layout "' + data.layout + '" received!'); + console.log('Invalid ide layout "' + data.layout + '" received!'); } } diff --git a/src/app/ide/ide.component.html b/src/app/ide/ide.component.html new file mode 100644 index 0000000..c4e0e15 --- /dev/null +++ b/src/app/ide/ide.component.html @@ -0,0 +1,44 @@ +
+
+ +
+ +
+ +
+
+ +
+
diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss new file mode 100644 index 0000000..da4aa8d --- /dev/null +++ b/src/app/ide/ide.component.scss @@ -0,0 +1,95 @@ +@import "../../assets/scss/variables.scss"; + +.tfw-grid-ide-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/ide/ide.component.ts b/src/app/ide/ide.component.ts new file mode 100644 index 0000000..5cd0f88 --- /dev/null +++ b/src/app/ide/ide.component.ts @@ -0,0 +1,154 @@ +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-ide', + templateUrl: './ide.component.html', + styleUrls: ['./ide.component.scss'] +}) +export class IdeComponent implements OnInit { + key_id = 'webide'; + filename = ''; + code: string = config.ide.defaultCode; + language: string = config.ide.defaultLanguage; + theme = 'cobalt'; + directory = ''; + files: string[]; + codeState = 'SAVED'; + deployButtonState = 'DEPLOYED'; + showDeployButton: boolean = config.ide.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.ide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); }); + this.processManagerService.subscribeErrorCallback(config.ide.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.ide.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/app/ide/source-code.ts b/src/app/ide/source-code.ts new file mode 100644 index 0000000..ab0b524 --- /dev/null +++ b/src/app/ide/source-code.ts @@ -0,0 +1,7 @@ +export interface SourceCode { + filename: string; + content?: string; + files: string[]; + directory: string; + command: string; +} diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index 2789e15..d1277ca 100755 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1 +1,4 @@ -
IDE
+
+ + +
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index cab9c74..14a4f05 100755 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -1,6 +1,16 @@ @import "../../assets/scss/variables.scss"; +@import "../../assets/scss/mixins/layout.scss"; -.tfw-webide-pin{ - - +img { + width: 50px; + height: auto; +} + +.tfw-ide-pin { + + cursor: pointer; + + & .active { + display: none; + } } diff --git a/src/assets/images/IDE.svg b/src/assets/images/IDE.svg new file mode 100644 index 0000000..4a0b6d4 --- /dev/null +++ b/src/assets/images/IDE.svg @@ -0,0 +1 @@ +IDE_icon \ No newline at end of file diff --git a/src/assets/images/IDE_active.svg b/src/assets/images/IDE_active.svg new file mode 100644 index 0000000..df74fe6 --- /dev/null +++ b/src/assets/images/IDE_active.svg @@ -0,0 +1 @@ +IDE_iconactive \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index ce8bd36..aa82644 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -158,3 +158,6 @@ $font-size-h5: floor(($font-size-base * 1.1)); $tao-navbar-height: 67px; $company-logo-width: 130px; + + + diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss index b2b0f09..10fe056 100644 --- a/src/assets/scss/mixins/_layout.scss +++ b/src/assets/scss/mixins/_layout.scss @@ -1,72 +1,102 @@ $grid-columns-count: 25; $grid-rows-count: 25; -$layout-key: 'vraw-open'; - -$default-open-layout: ( +$terminal-ide-web-layout: ( 'header': (1, 6, 1, 2), - 'messages': (1, 6, 2, 10), - 'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1), - 'terminal': (1, 15, 10, $grid-rows-count+1), - 'web': (6, 15, 1, 10), - 'sidebar': () + 'messages': (1, 6, 2, 16), + 'ide': (15,$grid-columns-count, 1, $grid-rows-count+1), + 'terminal': (1, 15, 16, $grid-rows-count+1), + 'web': (6, 15, 1, 16), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$default-closed-layout: ( +$terminal-web-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2, 10), - 'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1), - 'terminal': (1, 16, 10, $grid-rows-count+1), + 'ide': (), + 'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1), 'web': (6, 15, 1, 10), - 'sidebar': () + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$vraw-open-layout: ( +$terminal-ide-vertical-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), - 'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1), - 'terminal': (6, 16, 1, $grid-rows-count+1), + 'ide': (15, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (6, 15, 1, $grid-rows-count+1), 'web': (), - 'sidebar': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$vraw-closed-layout: ( +$terminal-ide-horizontal-layout: ( 'header': (1, 6, 1, 2), 'messages': (1, 6, 2,$grid-rows-count+1), - 'webide': (), + 'ide': (6,$grid-columns-count, 1, 16), + 'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1), + 'web': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1), +); + +$ide-web-vertical-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2, $grid-rows-count+1), + 'ide': (15, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (), + 'web': (6, 15, 10, $grid-rows-count+1), + '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), + 'ide': (), 'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1), 'web': (), 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); -$hraw-layout: ( - 'header': (1, 4, 1,$grid-rows-count+1), - 'messages': (1, 4, 2,$grid-rows-count+1), - 'webide': (4,$grid-columns-count+1, 1, 10), - 'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1), +$ide-only-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'ide': (6, $grid-columns-count, 1,$grid-rows-count+1), + 'terminal': (), 'web': (), - 'sidebar': (), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) ); +$web-only-layout: ( + 'header': (1, 6, 1, 2), + 'messages': (1, 6, 2,$grid-rows-count+1), + 'ide': (), + 'terminal': (), + 'web': (6, $grid-columns-count, 1,$grid-rows-count+1), + 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) +); + + $layouts: ( - 'default-open': $default-open-layout, - 'default-closed': $default-closed-layout, - 'vraw-open': $vraw-open-layout, - 'vraw-closed': $vraw-closed-layout, - 'hraw': $hraw-layout + 'terminal-ide-web': $terminal-ide-web-layout, + 'terminal-web': $terminal-web-layout, + 'terminal-ide-vertical': $terminal-ide-vertical-layout, + 'terminal-ide-horizontal': $terminal-ide-horizontal-layout, + 'ide-web-vertical': $ide-web-vertical-layout, + 'terminal-only': $terminal-only-layout, + 'ide-only': $ide-only-layout, + 'web-only': $web-only-layout ); -@mixin set-layout($layout_key) { - @if(index(map_keys($layouts), $layout_key)) { - $layout: map_get($layouts, $layout_key) +@mixin set-layout($layouts-key) { + @if(index(map_keys($layouts), $layouts-key)) { + $layout: map_get($layouts, $layouts-key) } @else { - @error 'Invalid layout value: "#{$layout_key}"' + @error 'Invalid layout value: "#{$layouts-key}"' } } -@function get-layout(){ - @return map_get($layouts, $layout_key); +@function get-layout($layouts-key){ + @return map_get($layouts, $layouts-key); } @mixin position-grid-items($map, $sel) { @@ -87,8 +117,8 @@ $layouts: ( } } -@mixin set-component-size($key) { - $tfw-component: map_get(get-layout(), $key); +@mixin set-component-size($layouts-key, $layout-key) { + $tfw-component: map_get(get-layout($layouts-key), $layout-key); @if (length($tfw-component) > 0) { $columns-count: nth($tfw-component,2) - nth($tfw-component,1); @@ -100,22 +130,3 @@ $layouts: ( } -[tfw-layout='vraw-open'] { - @include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-'); -} - -[tfw-layout='vraw-closed'] { - @include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-'); -} - -[tfw-layout='hraw'] { - @include position-grid-items(map_get($layouts,'hraw'),'.tfw-'); -} - -[tfw-layout='default-open'] { - @include position-grid-items(map_get($layouts, 'default-open'),'.tfw-'); -} - -[tfw-layout='default-closed'] { - @include position-grid-items(map_get($layouts,'default-closed'),'.tfw-'); -}