matefun.component.html

<notificacion></notificacion> 
<div class="container-fluid" style=" padding-left: 0px; padding-right: 0px; margin-top: -13px; margin-left: -6px; margin-right: -6px;">
    <div class="row">
        <div class="col-md-6">
            <ngb-tabset [destroyOnHide]=false (tabChange)="onChangeTab($event)">
                <ngb-tab id="ProgramBtn" title='{{ "i18n.object.program" | translate | titlecase }}'>
                    <ng-template ngbTabContent>

            <div class="card">
                <div class="card-header">
                    <form>
                        <input type="text" name="archivo" class="nomArchivoInp form-control form-control-sm" 
                        [disabled]="!archivo.editable || archivo.estado=='Corregido' || archivo.estado == 'Entregado'"
                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder='{{ "i18n.msg.file.fileName" | translate }}' />

                        <button 
                            style="margin-left: 5px; float: right;"
                            id="shortcutsPopover"
                            class="btn btn-sm btn-secondary"
                            placement="bottom"
                            [ngbPopover]=shortcutsPopoverContent
                            #popover="ngbPopover"
                            popoverTitle='{{ "i18n.object.shortcuts" | translate | titleCase }}'
                            tiggers="click">
                            <i class="fa fa-keyboard-o"></i>
                        </button>
                        <button
                            id="downloadFileButton"
                            (click)="downloadFile()"
                            style="margin-left: 5px; float: right;"
                            class="btn btn-sm btn-secondary"
                            placement="bottom"
                            ngbPopover='{{ "i18n.action.export" | translate | titleCase }} (Ctrl+E)'
                            triggers="mouseenter:mouseleave"
                            tiggers="click">
                            <i class="fa fa-download "></i>
                        </button>
                        <button
                            style="margin-left: 5px; float: right;"
                            id="popover" class="btn btn-sm btn-secondary"
                            placement="bottom"
                            [ngbPopover]=popoverContent
                            #popover="ngbPopover"
                            popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
                            tiggers="click">
                            <i class="fa fa-gear"></i>
                        </button>
                        <div
                            style="margin-left: 5px; float: right;"
                            ngbPopover='{{ "i18n.action.save" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }} (Ctrl+G)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom" >
                            <button [disabled]="!modificado" (click)="guardarArchivo()" class="btn btn-sm btn-secondary" >
                                <i class="fa fa-save"></i>
                            </button>
                        </div>
                        <button
                            style="margin-left: 5px; float: right;"
                            (click)="reiniciarInterprete()"
                            class="btn btn-sm btn-secondary"
                            ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom">
                            <i class="fa fa-refresh"></i>
                        </button>
                        <button
                            style="margin-left: 5px; float: right;"
                            (click)="runCode()"
                            class="btn btn-sm btn-secondary"
                            ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom">
                            <i class="fa fa-play"></i>
                        </button>
                        <button
                            style="float: right;"
                            (click)="seleccionarDirectorio()"
                            class="btn btn-sm btn-secondary"
                            ngbPopover='{{ "i18n.action.new" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }} (Ctrl+A)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom">
                            <i class="fa fa-plus"></i>
                        </button>
                        <ng-template #popoverContent style="width: 15em">
                            <div style="width: 12em">
                                <div class="form-group">
                                    <label>{{ "i18n.object.theme" | translate | titleCase }}:</label>
                                    <select name="theme" class="form-control form-control-sm" #selectTheme (change)=updateConfig(selectTheme.value)>
                                        <option *ngFor="let theme of themes" [selected]="theme==configCodeMirror.theme" value='{{theme}}'>{{theme}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{ "i18n.msg.codemirror.fontSize" | translate }}:</label>
                                    <div>
                                        <button class="btn btn-sm btn-secondary" (click)="aumentarFuente()">A⁺</button>
                                        <button class="btn btn-sm btn-secondary" (click)="disminuirFuente()">A⁻</button>
                                        {{configCodeMirror.fontSize}}px                                    
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="argumentoF" class="form-control form-control-sm" [(ngModel)]=argumentoF>
                                        {{ "i18n.msg.codemirror.functionWarnings" | translate }}
                                    </label>
                                    <br>
                                    <label>
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="argumentoI" class="form-control form-control-sm" [(ngModel)]=argumentoI>
                                        {{ "i18n.msg.codemirror.infixOperatorsWarnings" | translate }}
                                        
                                    </label>
                                    <br>
                                    <label>
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="hintsCheck" class="form-control form-control-sm" [(ngModel)]=hintsCheck>
                                        {{ "i18n.msg.codemirror.showHints" | translate }}
                                    </label>
                                    <br>
                                    <label>
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="typingCheck" class="form-control form-control-sm" [(ngModel)]=typingCheck>
                                        {{ "i18n.msg.codemirror.functionTyping" | translate }}
                                    </label>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-secondary" (click)="saveConfig(); popover.close();">{{ "i18n.action.save" | translate | titleCase }}</button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-template #shortcutsPopoverContent style="width: 18em">
                            <div style="width: 18em">
                                <div class="form-group">
                                    <label><b>Ctrl+P</b> {{ "i18n.shortcuts.runCode" | translate }}</label>
                                    <label><b>Ctrl+A</b> {{ "i18n.shortcuts.newFile" | translate }}</label>
                                    <label><b>Ctrl+O</b> {{ "i18n.shortcuts.openMenu" | translate }}</label>
                                    <label><b>Ctrl+E</b> {{ "i18n.shortcuts.exportFile" | translate }}</label>
                                    <label><b>Ctrl+R</b> {{ "i18n.shortcuts.restartInterpreter" | translate }}</label>
                                    <label><b>Ctrl+G</b> {{ "i18n.shortcuts.saveFile" | translate }}</label>
                                    <label><b>Ctrl+{{ "i18n.shortcuts.space" | translate }}</b> {{ "i18n.shortcuts.autocomplete" | translate }}</label>
                                    <label><b>Ctrl+Shift+K</b> {{ "i18n.shortcuts.comment" | translate }}</label>
                                </div>
                            </div>
                        </ng-template>
                    </form>
                </div>
                <codemirror class="codemirrorPrograma" [(ngModel)]="archivo.contenido" (keyup)="archivoModificado($event)" (click)="clickEnEditor($event)" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
                </codemirror>
            </div>

            </ng-template>
                </ngb-tab>
                <!-- <ngb-tab id="FigurasBtn" title="Figuras OLD">
                    <ng-template ngbTabContent>
                        <canvas-component (canvasComp)=canvasC></canvas-component>
                    </ng-template>
                </ngb-tab> -->
                <ngb-tab id="FigurasBtn2D" title='{{ "i18n.object.figures" | translate | titleCase }} 2D'>
                    <ng-template ngbTabContent>
                        <graph2D-component (graph2DComp)=graph2DComp></graph2D-component>
                    </ng-template>
                </ngb-tab>
                <ngb-tab id="FigurasBtn3D" title='{{ "i18n.object.figures" | translate | titleCase }} 3D'>
                    <ng-template ngbTabContent>
                        <graph3d-component (graph3DComp)=graph3DComp></graph3d-component>
                    </ng-template>
                </ngb-tab>

            </ngb-tabset> 

        </div>

        <div class="col-md-6">
            <!--  
            <ngb-tabset [destroyOnHide]=false>
                <ngb-tab title="Programa">
                    <ng-template ngbTabContent>

                        <div class="card">
                            <div id="console" > </div>
                        </div>

                    </ng-template>
                </ngb-tab>
                <ngb-tab title="Figuras">
                    <ng-template ngbTabContent>
                        <canvas-component (canvasComp)=canvasC></canvas-component>
                    </ng-template>
                </ngb-tab>
            </ngb-tabset> 
            -->
            


            <div class="card">
                <div id="console"> </div>
            </div>
           <!--
            <canvas-component (canvasComp)=canvasC></canvas-component>
            
             <div class="card">
                <div id="svgHaskell">
                </div>
            </div> -->

        </div>
    </div>
    <span class="version">v{{version}}</span>
</div>