mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 10:12:41 +00:00
Code Issues Releases Wiki Activity

Use enums in IdeComponent state machines

Browse Source
This commit is contained in:
Kristóf Tóth 2018-05-23 11:16:44 +02:00
parent 8bf82365f4
commit b2862b755b
2 changed files with 68 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,10 +9,10 @@
[class.active]="filename === file" [class.active]="filename === file"
[class.disabled]="filename === file" [class.disabled]="filename === file"
[disabled]="filename === file" [disabled]="filename === file"
[class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'"> [class.tao-tab-btn-saved]="filename === file && codeState === CodeState.SAVED">
<span *ngIf="filename !== file">{{file}}</span> <span *ngIf="filename !== file">{{file}}</span>
<span *ngIf="filename === file" <span *ngIf="filename === file"
[class.underline]="codeState === 'DIRTY'">{{file}}</span> [class.underline]="codeState === CodeState.DIRTY">{{file}}</span>
</button> </button>
</div> </div>
@ -21,28 +21,27 @@
type="submit" type="submit"
class="btn tfw-deploy-btn tao-grid-top-center" class="btn tfw-deploy-btn tao-grid-top-center"
(click)="sendCodeIfDirty(); deployCode()" (click)="sendCodeIfDirty(); deployCode()"
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'" [disabled]="deployButtonState === DeployButtonState.DEPLOYING || deployButtonState === DeployButtonState.DEPLOYED"
[class.deployed]="deployButtonState === 'DEPLOYED'" [class.deployed]="deployButtonState === DeployButtonState.DEPLOYED"
[class.deploy]="deployButtonState === 'DEPLOYING'" [class.deploy]="deployButtonState === DeployButtonState.DEPLOYING"
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'" [class.disabled]="deployButtonState === DeployButtonState.DEPLOYING || deployButtonState === DeployButtonState.DEPLOYED"
[class.failed]="deployButtonState === 'FAILED'" [class.failed]="deployButtonState === DeployButtonState.FAILED">
> <span *ngIf="deployButtonState === DeployButtonState.TODEPLOY">Deploy</span>
<span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span> <span *ngIf="deployButtonState === DeployButtonState.DEPLOYED">
<span *ngIf="deployButtonState === 'DEPLOYED'">
<img src="images/greentick_icon.svg"/> <img src="images/greentick_icon.svg"/>
<span>Deployed</span> <span>Deployed</span>
</span> </span>
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span> <span *ngIf="deployButtonState === DeployButtonState.DEPLOYING"><div class="loader"></div>Reloading app...</span>
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button> <span *ngIf="deployButtonState === DeployButtonState.FAILED">Deployment failed. Retry</span>
</button>
</div> </div>
</div> </div>
<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()" <div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
ace-editor ace-editor
[(text)]="code" [(text)]="code"
[mode]="language" [mode]="language"
[theme]="theme" [theme]="theme"
[options]="options" [options]="options"
class="tfw-ace-editor" class="tfw-ace-editor">
>
</div> </div>

78
src/app/ide/ide.component.ts
View File

@ -26,26 +26,46 @@ const modelist = brace.acequire('ace/ext/modelist');
const langTools = brace.acequire('ace/ext/language_tools'); const langTools = brace.acequire('ace/ext/language_tools');
enum DeployButtonState {
DEPLOYED,
DEPLOYING,
FAILED,
TODEPLOY
}
enum CodeState {
SAVED,
DIRTY
}
@Component({ @Component({
selector: 'app-ide', selector: 'app-ide',
templateUrl: './ide.component.html', templateUrl: './ide.component.html',
styleUrls: ['./ide.component.scss'] styleUrls: ['./ide.component.scss']
}) })
export class IdeComponent implements OnInit { export class IdeComponent implements OnInit {
CodeState = CodeState;
DeployButtonState = DeployButtonState;
key_id = 'ide'; key_id = 'ide';
files: string[];
filename = ''; filename = '';
directory = '';
code: string = config.ide.defaultCode; code: string = config.ide.defaultCode;
codeState = CodeState.SAVED;
deployButtonState = DeployButtonState.DEPLOYED;
showDeployButton: boolean = config.ide.showDeployButton;
autosave = null;
language: string = config.ide.defaultLanguage; language: string = config.ide.defaultLanguage;
theme = 'cobalt'; theme = 'cobalt';
options: any = {enableBasicAutocompletion: true, options: any = {enableBasicAutocompletion: true,
enableSnippets: true, enableSnippets: true,
enableLiveAutocompletion: true}; enableLiveAutocompletion: true};
directory = '';
files: string[];
codeState = 'SAVED';
deployButtonState = 'DEPLOYED';
showDeployButton: boolean = config.ide.showDeployButton;
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),
@ -74,9 +94,20 @@ export class IdeComponent implements OnInit {
initProcessManagerService() { initProcessManagerService() {
this.processManagerService.init(); this.processManagerService.init();
this.processManagerService.subscribeCallback(config.ide.deployProcessName, (event) => this.deploymentNotificationService.deploying.next(false)); this.processManagerService.subscribeCallback(
this.processManagerService.subscribeSuccessCallback(config.ide.deployProcessName, (event) => this.setDeployButtonState('DEPLOYED')); config.ide.deployProcessName,
this.processManagerService.subscribeErrorCallback(config.ide.deployProcessName, (event) => this.setDeployButtonState('FAILED')); (event) => this.deploymentNotificationService.deploying.next(false)
);
this.processManagerService.subscribeSuccessCallback(
config.ide.deployProcessName,
(event) => this.setDeployButtonState(DeployButtonState.DEPLOYED)
);
this.processManagerService.subscribeErrorCallback(
config.ide.deployProcessName,
(event) => this.setDeployButtonState(DeployButtonState.FAILED)
);
} }
updateFileData(data: SourceCode) { updateFileData(data: SourceCode) {
@ -96,13 +127,13 @@ export class IdeComponent implements OnInit {
} }
readHandler(data: SourceCode) { readHandler(data: SourceCode) {
if (this.codeState === 'SAVED') { if (this.codeState === CodeState.SAVED) {
this.updateFileData(data); this.updateFileData(data);
} }
} }
writeHandler() { writeHandler() {
this.setCodeState('SAVED'); this.setCodeState(CodeState.SAVED);
} }
selectdirHandler(data: SourceCode) { selectdirHandler(data: SourceCode) {
@ -113,37 +144,36 @@ export class IdeComponent implements OnInit {
if (this.autosave) { if (this.autosave) {
clearInterval(this.autosave); clearInterval(this.autosave);
} }
this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.ide.autoSaveInterval); this.autosave = setInterval(
() => { this.sendCodeIfDirty(); },
config.ide.autoSaveInterval
);
} }
tabSwitchButtonHandler(file) { tabSwitchButtonHandler(file: string) {
if (this.codeState === 'DIRTY') { if (this.codeState === CodeState.DIRTY) {
this.sendCodeContents(); this.sendCodeContents();
} }
this.selectCode(file); this.selectCode(file);
this.requestCode(); this.requestCode();
} }
setCodeState(state: string) { setCodeState(state: CodeState) {
if (state.match('SAVED|DIRTY')) { this.codeState = state;
this.codeState = state;
}
} }
setDeployButtonState(state: string) { setDeployButtonState(state: DeployButtonState) {
if (state.match('DEPLOYED|DEPLOYING|FAILED|TODEPLOY')) { this.deployButtonState = state;
this.deployButtonState = state;
}
} }
deployCode() { deployCode() {
this.processManagerService.restartProcess(config.ide.deployProcessName); this.processManagerService.restartProcess(config.ide.deployProcessName);
this.setDeployButtonState('DEPLOYING'); this.setDeployButtonState(DeployButtonState.DEPLOYING);
this.deploymentNotificationService.deploying.next(true); this.deploymentNotificationService.deploying.next(true);
} }
sendCodeIfDirty() { sendCodeIfDirty() {
if (this.codeState === 'DIRTY') { if (this.codeState === CodeState.DIRTY) {
this.sendCodeContents(); this.sendCodeContents();
} }
} }