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

Implement separate deploy button

Browse Source
This commit is contained in:
Kristóf Tóth 2018-03-02 15:34:30 +01:00
parent fcb48fa6fb
commit c508f367d9
2 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
</button> </button>
</div> </div>
<div (keypress)="setButtonStateDirty(); resetAutoSaveCountdown()" <div (keypress)="setSaveButtonStateDirty(); setDeployButtonStateTodeploy(); resetAutoSaveCountdown()"
ace-editor ace-editor
[(text)]="code" [(text)]="code"
[mode]="language" [mode]="language"
@ -18,13 +18,25 @@
> >
</div> </div>
<div class="btn-group flex-wrap">
<button type="submit"
class="btn btn-secondary"
(click)="sendCode(); deployCode()"
[disabled]="deployButtonState === 'DEPLOYING'"
[class.btn-success]="deployButtonState === 'DEPLOYED'"
[class.btn-info]="deployButtonState === 'DEPLOYING'"
[class.disabled]="deployButtonState === 'DEPLOYING'"
><span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYED'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span></button>
<button (click)="sendCode()" <button (click)="sendCode()"
[disabled]="saveButtonState === 'SAVING'" [disabled]="saveButtonState === 'SAVING'"
type="submit" type="submit"
class="btn btn-secondary" class="btn btn-secondary"
[class.btn-success]="saveButtonState === 'SAVED'" [class.btn-success]="saveButtonState === 'SAVED'"
[class.btn-info]="saveButtonState === 'SAVING'" [class.btn-warning]="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'">Save</span> <span *ngIf="saveButtonState === 'SAVED'">Save</span>
<span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading app...</span></button> <span *ngIf="saveButtonState === 'SAVING'">Saving...</span></button>
</div>

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

@ -34,11 +34,12 @@ export class WebideComponent implements OnInit {
theme = 'monokai'; theme = 'monokai';
files: string[]; files: string[];
saveButtonState = 'SAVED'; saveButtonState = 'SAVED';
deployButtonState = 'DEPLOYED';
autosave = null; 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),
'write': () => {}}; 'write': this.writeHandler.bind(this)};
constructor(private webSocketService: WebSocketService, constructor(private webSocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef,
@ -49,7 +50,7 @@ export class WebideComponent implements OnInit {
this.subscribeWS(); this.subscribeWS();
this.requestCode(); this.requestCode();
this.processManagerService.init(); this.processManagerService.init();
this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); this.processManagerService.subscribeCallback('login', (event) => { this.setDeployButtonStateDeployed(); });
this.resetAutoSaveCountdown(); this.resetAutoSaveCountdown();
} }
@ -80,6 +81,10 @@ export class WebideComponent implements OnInit {
this.saveButtonState = 'SAVED'; this.saveButtonState = 'SAVED';
} }
writeHandler() {
this.saveButtonState = 'SAVED';
}
resetAutoSaveCountdown() { resetAutoSaveCountdown() {
if (this.autosave) { if (this.autosave) {
clearInterval(this.autosave); clearInterval(this.autosave);
@ -95,18 +100,28 @@ export class WebideComponent implements OnInit {
this.requestCode(); this.requestCode();
} }
setButtonStateSaved() { setSaveButtonStateDirty() {
this.saveButtonState = 'SAVED';
}
setButtonStateDirty() {
this.saveButtonState = 'DIRTY'; this.saveButtonState = 'DIRTY';
} }
sendCode() { setDeployButtonStateDeployed() {
this.sendCodeContents(); this.deployButtonState = 'DEPLOYED';
this.saveButtonState = 'SAVING'; }
setDeployButtonStateTodeploy() {
this.deployButtonState = 'TODEPLOY';
}
deployCode() {
this.processManagerService.restartProcess('login'); this.processManagerService.restartProcess('login');
this.deployButtonState = 'DEPLOYING';
}
sendCode() {
if (this.saveButtonState === 'DIRTY') {
this.sendCodeContents();
this.saveButtonState = 'SAVING';
}
} }
sendCodeIfDirty() { sendCodeIfDirty() {