frontend-tutorial-framework/src/app/ide/ide.component.html

45 lines
1.8 KiB
HTML
Raw Normal View History

<div class="tfw-grid-ide-statusbar">
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
<button *ngFor="let file of files"
class="btn tfw-tab-btn"
(click)="tabSwitchButtonHandler(file)"
[class.active]="filename === file"
[class.disabled]="filename === file"
[disabled]="filename === file"
[class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
<span *ngIf="filename !== file">{{file}}</span>
<span *ngIf="filename === file"
[class.underline]="codeState === 'DIRTY'">{{file}}</span>
</button>
</div>
<div class="btn-group-sm tfw-deploy-btn-group">
<button *ngIf="showDeployButton"
type="submit"
class="btn tfw-deploy-btn tao-grid-top-center"
(click)="sendCodeIfDirty(); deployCode()"
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.deployed]="deployButtonState === 'DEPLOYED'"
[class.deploy]="deployButtonState === 'DEPLOYING'"
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.failed]="deployButtonState === 'FAILED'"
>
<span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYED'">
<img src="images/greentick_icon.svg"/>
<span>Deployed</span>
</span>
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
</div>
</div>
<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
ace-editor
[(text)]="code"
[mode]="language"
[theme]="theme"
class="tfw-ace-editor"
>
</div>