mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-16 05:51:55 +00:00
Code Issues Releases Wiki Activity

Merge pull request #13 from avatao-content/pmgeh_monitorpause_fix

Browse Source 
Fix monitor pausing rendered useless by pmgeh, general webide optimization
This commit is contained in:
Bokros Bálint 2018-03-02 14:21:04 +01:00 committed by GitHub
commit fcb48fa6fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -4,7 +4,7 @@
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod --aot --build-optimizer", "build": "ng build --prod --aot --build-optimizer",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",

10
src/app/webide/webide.component.html
View File

@ -3,13 +3,13 @@
class="btn btn-secondary" class="btn btn-secondary"
[class.active]="filename === file" [class.active]="filename === file"
[class.disabled]="filename === file" [class.disabled]="filename === file"
(click)="sendCodeContents(); selectCode(file); requestCode()" (click)="tabSwitchButtonHandler(file)"
[disabled]="filename === file"> [disabled]="filename === file">
{{file}} {{file}}
</button> </button>
</div> </div>
<div (textChanged)="setButtonStateDirty()" <div (keypress)="setButtonStateDirty(); resetAutoSaveCountdown()"
ace-editor ace-editor
[(text)]="code" [(text)]="code"
[mode]="language" [mode]="language"
@ -25,6 +25,6 @@
[class.btn-success]="saveButtonState === 'SAVED'" [class.btn-success]="saveButtonState === 'SAVED'"
[class.btn-info]="saveButtonState === 'SAVING'" [class.btn-info]="saveButtonState === 'SAVING'"
[class.disabled]="saveButtonState === 'SAVING'" [class.disabled]="saveButtonState === 'SAVING'"
><span *ngIf="saveButtonState === 'DIRTY'">Save!</span> ><span *ngIf="saveButtonState === 'DIRTY'">Save</span>
<span *ngIf="saveButtonState === 'SAVED'">Done!</span> <span *ngIf="saveButtonState === 'SAVED'">Save</span>
<span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading...</span></button> <span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading app...</span></button>

1
src/app/webide/webide.component.scss
View File

@ -1,4 +1,5 @@
.tfw-ace-editor { .tfw-ace-editor {
min-height: 30vh;
height: 80%; height: 80%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;

31
src/app/webide/webide.component.ts
View File

@ -18,7 +18,8 @@ import { ProcessManagerService } from '../services/processmanager.service';
const modelist = brace.acequire('ace/ext/modelist'); const modelist = brace.acequire('ace/ext/modelist');
const defaultSourceCode = `alert( 'Hello, world!' );`; const defaultSourceCode = 'Oops! Something went wrong :(';
const autosave_interval = 10000;
@Component({ @Component({
selector: 'app-webide', selector: 'app-webide',
@ -32,7 +33,8 @@ export class WebideComponent implements OnInit {
language = 'javascript'; language = 'javascript';
theme = 'monokai'; theme = 'monokai';
files: string[]; files: string[];
saveButtonState = 'DIRTY'; saveButtonState = 'SAVED';
autosave = null;
command_handlers = { 'reload': this.reloadHandler.bind(this), command_handlers = { 'reload': this.reloadHandler.bind(this),
'read': this.readHandler.bind(this), 'read': this.readHandler.bind(this),
'select': this.selectHandler.bind(this), 'select': this.selectHandler.bind(this),
@ -48,6 +50,7 @@ export class WebideComponent implements OnInit {
this.requestCode(); this.requestCode();
this.processManagerService.init(); this.processManagerService.init();
this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); });
this.resetAutoSaveCountdown();
} }
subscribeWS() { subscribeWS() {
@ -74,6 +77,22 @@ export class WebideComponent implements OnInit {
readHandler(data: SourceCode) { readHandler(data: SourceCode) {
this.updateFileData(data); this.updateFileData(data);
this.saveButtonState = 'SAVED';
}
resetAutoSaveCountdown() {
if (this.autosave) {
clearInterval(this.autosave);
}
this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, autosave_interval);
}
tabSwitchButtonHandler(file) {
if (this.saveButtonState === 'DIRTY') {
this.sendCodeContents();
}
this.selectCode(file);
this.requestCode();
} }
setButtonStateSaved() { setButtonStateSaved() {
@ -81,7 +100,7 @@ export class WebideComponent implements OnInit {
} }
setButtonStateDirty() { setButtonStateDirty() {
setTimeout(() => {this.saveButtonState = 'DIRTY'; }, 0); this.saveButtonState = 'DIRTY';
} }
sendCode() { sendCode() {
@ -90,6 +109,12 @@ export class WebideComponent implements OnInit {
this.processManagerService.restartProcess('login'); this.processManagerService.restartProcess('login');
} }
sendCodeIfDirty() {
if (this.saveButtonState === 'DIRTY') {
this.sendCodeContents();
}
}
sendCodeContents() { sendCodeContents() {
this.webSocketService.send(this.key_id, { this.webSocketService.send(this.key_id, {
'command': 'write', 'command': 'write',