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

42 lines
2.2 KiB
HTML

<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 === CodeState.SAVED">
<span *ngIf="filename !== file">{{pathBasename(file)}}</span>
<span *ngIf="filename === file"
[class.underline]="codeState === CodeState.DIRTY">{{pathBasename(file)}}</span>
</button>
</div>
<div class="btn-group-sm tfw-deploy-btn-group">
<button *ngIf="showDeployButton | async"
type="submit"
class="btn tfw-deploy-btn tao-grid-top-center"
(click)="sendCodeIfDirty(); deployCode()"
[disabled]="deployButtonState === DeployButtonState.DEPLOYING || deployButtonState === DeployButtonState.DEPLOYED"
[class.deployed]="deployButtonState === DeployButtonState.DEPLOYED"
[class.deploy]="deployButtonState === DeployButtonState.DEPLOYING"
[class.disabled]="deployButtonState === DeployButtonState.DEPLOYING || deployButtonState === DeployButtonState.DEPLOYED"
[class.failed]="deployButtonState === DeployButtonState.FAILED">
<span *ngIf="deployButtonState === DeployButtonState.TODEPLOY">{{(deployButtonText | async)['TODEPLOY']}}</span>
<span *ngIf="deployButtonState === DeployButtonState.DEPLOYED">
<img src="images/greentick_icon.svg"/>
<span>{{(deployButtonText | async)['DEPLOYED']}}</span>
</span>
<span *ngIf="deployButtonState === DeployButtonState.DEPLOYING"><div class="loader"></div>{{(deployButtonText | async)['DEPLOYING']}}</span>
<span *ngIf="deployButtonState === DeployButtonState.FAILED">{{(deployButtonText | async)['FAILED']}}</span>
</button>
</div>
</div>
<ngx-monaco-editor [(ngModel)]="code"
class="tfw-ide-editor"
(keyup)="editorWriteHandler()"
[options]="editorOptions"
></ngx-monaco-editor>