mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:11:32 +00:00
Code Issues Releases Wiki Activity

Merge branch 'frontend_fixes'

Browse Source
This commit is contained in:
Kristóf Tóth 2019-07-04 16:35:56 +02:00
commit af4374fb10
17 changed files with 3145 additions and 2332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
package.json
View File

@ -9,38 +9,37 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.2",
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/forms": "^6.0.2",
"@angular/http": "^6.0.2",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"bootstrap": "^4.0.0",
"@angular/animations": "^7.2.15",
"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/core": "^7.2.15",
"@angular/forms": "^7.2.15",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "^7.2.15",
"@angular/platform-browser-dynamic": "^7.2.15",
"@angular/router": "^7.2.15",
"@ng-bootstrap/ng-bootstrap": "^4.1.2",
"bootstrap": "^4.3.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"ngx-monaco-editor": "^6.0.0",
"node-sass": "^4.7.2",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.1.0",
"ngx-monaco-editor": "^7.0.0",
"node-sass": "^4.12.0",
"rxjs": "^6.5.2",
"rxjs-websockets": "^6.0.1",
"showdown": "^1.8.5",
"xterm": "^3.4.1",
"zone.js": "^0.8.26"
"xterm": "^3.13.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.6.3",
"@angular/cli": "^6.0.3",
"@angular/compiler-cli": "^6.0.2",
"@angular/language-service": "^6.0.2",
"@types/node": "~8.9.4",
"@types/showdown": "^1.7.2",
"codelyzer": "~4.2.1",
"ts-node": "~5.0.1",
"tslint": "^5.10.0",
"typescript": "~2.7.2"
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "^7.2.15",
"@angular/language-service": "^7.2.15",
"@types/node": "^12.0.0",
"@types/showdown": "^1.9.2",
"codelyzer": "~5.1.0",
"ts-node": "^8.1.0",
"tslint": "^5.16.0",
"typescript": "3.1.6"
}
}

1
src/app/config.ts
View File

@ -21,6 +21,7 @@ export const config = {
'web-only'
],
iframeUrl: '/webservice',
showUrlBar: false,
hideMessages: false
},
ide: {

24
src/app/dashboard/dashboard.component.html
View File

@ -10,15 +10,25 @@
<app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
</div>
<div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying}">
[ngClass]="{'deploy-blur': deploying || polling}">
<app-web *ngIf="!iframeUrl"></app-web>
<div *ngIf="showUrlBar" class="urlbar-container">
<button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>
<input type="text"
#urlbar
class="urlbar form-control"
value="{{actualIframeUrl}}"
(keyup.enter)="changeIframeURL()">
<button class="go btn btn-sm rounded-circle" (click)="changeIframeURL()">&#8680;</button>
</div>
<div *ngIf="iframeUrl" class="iframe-container">
<iframe class="iframe"
#webiframe
scrolling="yes"
frameborder="0"
[src]="iframeUrl | safe">
</iframe>
<iframe class="iframe"
#webiframe
scrolling="yes"
frameborder="0"
(load)="iframeLoad()"
[src]="iframeUrl | safe">
</iframe>
</div>
</div>
<div class="tfw-ide">

28
src/app/dashboard/dashboard.component.scss
View File

@ -3,11 +3,13 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
@import "../../assets/scss/mixins/scrollbar";
@mixin set-tfw-web($layouts-key) {
.tfw-web {
.iframe-container {
display: flex;
flex-direction: column;
overflow: hidden;
@include set-component-size($layouts-key, 'web');
}
@ -18,6 +20,30 @@
margin: 0;
padding: 0;
}
.urlbar-container {
display: flex;
height: 37px;
background: #353535;
.btn {
background: #353535;
color: white;
align-self: center;
margin: 5px;
}
.btn:hover{
background: lighten(#353535, 10);
}
}
.urlbar {
flex-grow: 1;
height: 30px;
align-self: center;
border-radius: 15px;
}
}
}
@ -46,6 +72,8 @@
background-color: $tao-gray-50;
}
@include set-scrollbar-style('dark', '.tfw-messages');
.tfw-messages {
padding: $space;
padding-top: $hair;

61
src/app/dashboard/dashboard.component.ts
View File

@ -10,6 +10,8 @@ import { config } from '../config';
import { ProcessLogService } from '../services/processlog.service';
import { LogMessage } from '../message-types/log-message';
import { CommandMessage } from '../message-types/command-message';
import { HttpClient } from '@angular/common/http';
import { delay, retryWhen, tap } from 'rxjs/operators';
@Component({
selector: 'app-dashboard',
@ -18,14 +20,19 @@ import { CommandMessage } from '../message-types/command-message';
})
export class DashboardComponent implements OnInit, OnDestroy {
deploying = false;
polling = false;
deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe') webiframe: ElementRef;
@ViewChild('tfwmessages') messages: ElementRef;
@ViewChild('urlbar') urlbar: ElementRef;
layout: string = config.dashboard.currentLayout;
hideMessages: boolean = config.dashboard.hideMessages;
iframeUrl: string = config.dashboard.iframeUrl;
showUrlBar = config.dashboard.showUrlBar;
actualIframeUrl: string = this.iframeUrl;
selectedTerminalMenuItem: string = config.dashboard.terminalOrConsole;
iframeReloadSubscription: Subscription;
command_handlers = {
'layout': this.layoutHandler.bind(this),
@ -38,7 +45,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
constructor(private deploymentNotificationService: DeploymentNotificationService,
private webSocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef,
private processLogService: ProcessLogService) {}
private processLogService: ProcessLogService,
private http: HttpClient) {}
ngOnInit() {
this.webSocketService.connect();
@ -60,7 +68,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
(deploying) => {
this.deploying = deploying;
if (!deploying && config.ide.reloadIframeOnDeploy) {
this.reloadIframe();
if (this.polling) {
this.iframeReloadSubscription.unsubscribe();
}
this.pollingServerForIframeReload();
}
});
}
@ -113,12 +124,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
}
ngOnDestroy() {
if (this.deploymentNotificationSubscription) {
this.deploymentNotificationSubscription.unsubscribe();
}
}
reloadIframe() {
setTimeout(() => {
this.webiframe.nativeElement.contentWindow.location.reload(true);
@ -152,4 +157,44 @@ export class DashboardComponent implements OnInit, OnDestroy {
// change detection (not in the template like ConsoleComponent does)
element.scrollTop = element.scrollHeight;
}
iframeLoad(): void {
if (this.webiframe) {
this.actualIframeUrl = this.webiframe.nativeElement.contentWindow.frames.location.pathname;
}
}
changeIframeURL() {
this.webiframe.nativeElement.contentWindow.frames.location.pathname = this.urlbar.nativeElement.value;
}
pollingServerForIframeReload() {
this.polling = true;
this.iframeReloadSubscription = this.http.get(this.actualIframeUrl, {observe: 'response'}).pipe(
retryWhen(errors =>
errors.pipe(
tap(
response => {
if (response.status === 200) {
this.iframeReloadSubscription.unsubscribe();
this.polling = false;
this.reloadIframe();
}
}
),
delay(1000)
)
)
).subscribe();
}
ngOnDestroy() {
if (this.deploymentNotificationSubscription) {
this.deploymentNotificationSubscription.unsubscribe();
}
if (this.iframeReloadSubscription) {
this.iframeReloadSubscription.unsubscribe();
}
}
}

2
src/app/ide/ide.component.html
View File

@ -39,6 +39,6 @@
<ngx-monaco-editor [(ngModel)]="code"
class="tfw-ide-editor"
(keyup)="editorWriteHanlder()"
(ngModelChange)="editorWriteHanlder()"
[options]="editorOptions"
></ngx-monaco-editor>

21
src/app/ide/ide.component.scss
View File

@ -4,13 +4,12 @@
@import "../../assets/scss/variables.scss";
.tfw-grid-ide-statusbar {
display: grid;
grid-template-columns: 8fr 1fr;
display: flex;
background-color: #353535;
}
.tfw-ide-editor {
height: calc(100% - 67px);
height: calc(100% - 25px);
width: 100%;
overflow: hidden;
}
@ -37,13 +36,20 @@
.tfw-deploy-btn-group {
display: flex;
justify-content: flex-end;
justify-content: flex-end;
flex-grow: 1;
.tfw-deploy-btn {
background: $tao-bright-green-200;
padding: 0.3em 0.7em 0.7em 1.5em;
border-radius: 0;
border-bottom-left-radius: 2.2em;
border-radius: 0 0 0 2.2em;
color: black;
&:first-child {
display: flex;
align-items: center;
justify-content: center;
}
img {
padding-right: 0.5em;
@ -71,9 +77,8 @@
.loader {
border: 2px solid $tao-warm-yellow-600;
border-radius: 50%;
border-top: 2px solid $tao-warm-yellow-200;
border: 2px solid;
width: 15px;
height: 15px;
animation: spin 2s linear infinite;

2
src/app/messages/messages.component.html
View File

@ -10,7 +10,7 @@
<div class="tao-grid-center-left originator">{{message.originator}}</div>
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
</div>
<div [innerHtml]="message.message"></div>
<div class="tfw-grid-message-body" [innerHtml]="message.message"></div>
</div>
<div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
<div class="jumping-circle" id="jc1"></div>

5
src/app/messages/messages.component.scss
View File

@ -2,6 +2,7 @@
// All Rights Reserved. See LICENSE file for details.
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout";
.tfw-next-button {
text-align: center;
@ -84,3 +85,7 @@
opacity: 0.37;
}
}
.tfw-grid-message-body {
@include word-break()
}

4
src/app/terminal/terminal.component.scss
View File

@ -5,6 +5,10 @@
@import "../../app/dashboard/dashboard.component.scss";
::ng-deep .xterm .xterm-viewport {
overflow-y: auto;
}
.tfw-xterm {
max-height: 100%;
height: 100%;

BIN
src/assets/images/favicon.ico Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 15 KiB

111
src/assets/scss/mixins/_layout.scss
View File

@ -1,79 +1,79 @@
// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.
$grid-columns-count: 25;
$grid-rows-count: 25;
$grid-columns-count: 100;
$grid-rows-count: 30;
$terminal-ide-web-layout: (
'header': (1, 6, 1, 2),
'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)
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 60),
'ide': (56, 96, 0, 100),
'terminal': (0, 56, 60, 100),
'web': (20, 56, 0, 60),
'sidebar': (96, 100, 0, 100)
);
$terminal-web-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, $grid-columns-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (),
'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1),
'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'terminal': (56, 96, 0, 100),
'web': (20, 56, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$terminal-ide-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': (6, 15, 1, $grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (56, 96, 0, 100),
'terminal': (20, 56, 0, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$terminal-ide-horizontal-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'ide': (6,$grid-columns-count, 1, 16),
'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (20, 96, 0, 60),
'terminal': (20, 96, 60, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1),
'sidebar': (96, 100, 0, 100)
);
$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),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (56, 96, 0, 100),
'terminal': (),
'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'web': (20, 56, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$terminal-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (),
'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1),
'terminal': (20, 96, 0, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$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),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (20, 96, 0, 100),
'terminal': (),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$web-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'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)
'web': (20, 96, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$layouts: (
@ -111,6 +111,10 @@ $layouts: (
@return map_get($layouts, $layouts-key);
}
@function convert-ratio($ratio, $max) {
@return round(($ratio * $max) / 100) + 1;
}
@mixin position-grid-items($map, $sel) {
$sel: if($sel == '' and &, &, $sel);
@ -120,11 +124,18 @@ $layouts: (
@include hide-component();
}
@else {
grid-column-start: nth($v, 1);
grid-column-end: nth($v, 2);
grid-row-start: nth($v, 3);
grid-row-end: nth($v, 4);
grid-column-start: convert-ratio(nth($v, 1), $grid-columns-count);
grid-column-end: convert-ratio(nth($v, 2), $grid-columns-count);
grid-row-start: convert-ratio(nth($v, 3), $grid-rows-count);
grid-row-end: convert-ratio(nth($v, 4), $grid-rows-count);
max-width: calc(100vw / #{$grid-columns-count} * (#{convert-ratio(nth($v, 2), $grid-columns-count)} - #{convert-ratio(nth($v, 1), $grid-columns-count)}));
}
/* A hack for Chrome, without this there is a white 1px strip on the left of the terminal */
/* You have been warned: don't try to understand this */
@if($sel == 'terminal-ide-web' & & $k == 'terminal') {
transform: translateX(-1px);
}
/* End of hack */
}
}
}
@ -133,10 +144,18 @@ $layouts: (
$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);
$rows-count: nth($tfw-component,4) - nth($tfw-component,3);
$columns-count: convert-ratio(nth($tfw-component,2), $grid-columns-count) - convert-ratio(nth($tfw-component,1), $grid-columns-count);
$rows-count: convert-ratio(nth($tfw-component,4), $grid-columns-count) - convert-ratio(nth($tfw-component,3), $grid-columns-count);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
}
}
@mixin word-break() {
/* For Firefox */
white-space: pre-wrap;
word-break: break-all;
/* For Chrome and IE */
word-wrap: break-word;
}

41
src/assets/scss/mixins/_scrollbar.scss
View File

@ -1,17 +1,36 @@
@mixin set-scrollbar-style() {
::-webkit-scrollbar-track
{
background-color: #F5F5F5;
@mixin set-scrollbar-style($style, $selctor) {
::-webkit-scrollbar {
width: 3px !important;
}
::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
#{$selctor}::-webkit-scrollbar-track {
border-radius: 10px !important;
width: 3px !important;
@if ($style == 'light') {
background: #8a8a8a !important;
} @else if ($style == 'dark') {
background: white !important;
};
}
::-webkit-scrollbar-thumb
{
background-color: gray;
#{$selctor}::-webkit-scrollbar-thumb {
@if ($style == 'dark') {
background: #8a8a8a !important;
} @else if ($style == 'light') {
background: white !important;
};
border-radius: 10px !important;
}
#{$selctor}::-webkit-scrollbar-thumb:hover {
@if ($style == 'dark') {
background: #424242 !important;
} @else if ($style == 'light') {
background: #9d9d9d !important;
};
cursor: pointer !important;
}
}

1
src/styles.scss
View File

@ -8,4 +8,5 @@ body, html {
height: 100vh;
width: 100vw;
overflow: hidden;
@include set-scrollbar-style('light', '');
}

10
src/tsconfig.app.json
View File

@ -1,10 +1,16 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"paths": {
"*": [
"types/*"
]
},
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
"module": "esNext",
"types": [],
"resolveJsonModule": true
},
"exclude": [
"test.ts",

1
tsconfig.json
View File

@ -8,6 +8,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"module": "esNext",
"typeRoots": [
"node_modules/@types"
],

5112
yarn.lock
View File

File diff suppressed because it is too large Load Diff