matefun.component.html 13.2 KB
Newer Older
1
2
3
4
<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">
5
            <ngb-tabset [destroyOnHide]=false (tabChange)="onChangeTab($event)">
6
                <ngb-tab id="ProgramBtn" title='{{ "i18n.object.program" | translate | titlecase }}'>
7
8
9
10
11
12
13
                    <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'"
14
                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder='{{ "i18n.msg.file.fileName" | translate }}' />
15

Franco Pariani's avatar
Franco Pariani committed
16
17
18
19
20
21
22
23
24
25
26
                        <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>
27
28
29
                        <button
                            id="downloadFileButton"
                            (click)="downloadFile()"
Franco Pariani's avatar
Franco Pariani committed
30
                            style="margin-left: 5px; float: right;"
31
32
33
34
35
                            class="btn btn-sm btn-secondary"
                            placement="bottom"
                            ngbPopover='{{ "i18n.action.export" | translate | titleCase }} (Ctrl+E)'
                            triggers="mouseenter:mouseleave"
                            tiggers="click">
36
37
                            <i class="fa fa-download "></i>
                        </button>
38
                        <button
Franco Pariani's avatar
Franco Pariani committed
39
                            style="margin-left: 5px; float: right;"
40
41
42
43
44
45
                            id="popover" class="btn btn-sm btn-secondary"
                            placement="bottom"
                            [ngbPopover]=popoverContent
                            #popover="ngbPopover"
                            popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
                            tiggers="click">
46
47
                            <i class="fa fa-gear"></i>
                        </button>
48
                        <div
Franco Pariani's avatar
Franco Pariani committed
49
                            style="margin-left: 5px; float: right;"
50
51
52
                            ngbPopover='{{ "i18n.action.save" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }} (Ctrl+G)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom" >
53
54
55
56
                            <button [disabled]="!modificado" (click)="guardarArchivo()" class="btn btn-sm btn-secondary" >
                                <i class="fa fa-save"></i>
                            </button>
                        </div>
57
                        <button
Franco Pariani's avatar
Franco Pariani committed
58
                            style="margin-left: 5px; float: right;"
59
                            (click)="mostrandoDefinicion = false; reiniciarInterprete()"
60
61
62
63
                            class="btn btn-sm btn-secondary"
                            ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom">
64
65
                            <i class="fa fa-refresh"></i>
                        </button>
66
                        <button
Franco Pariani's avatar
Franco Pariani committed
67
                            style="margin-left: 5px; float: right;"
68
                            (click)="mostrandoDefinicion = false; runCode()"
69
70
71
72
                            class="btn btn-sm btn-secondary"
                            ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
                            triggers="mouseenter:mouseleave"
                            placement="bottom">
73
74
                            <i class="fa fa-play"></i>
                        </button>
75
76
77
78
79
80
81
                        <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">
82
83
84
85
86
                            <i class="fa fa-plus"></i>
                        </button>
                        <ng-template #popoverContent style="width: 15em">
                            <div style="width: 12em">
                                <div class="form-group">
87
                                    <label>{{ "i18n.object.theme" | translate | titleCase }}:</label>
88
89
90
91
92
                                    <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">
93
                                    <label>{{ "i18n.msg.codemirror.fontSize" | translate }}:</label>
94
95
96
97
98
99
100
101
102
                                    <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>
103
                                        {{ "i18n.msg.codemirror.functionWarnings" | translate }}
104
105
106
107
                                    </label>
                                    <br>
                                    <label>
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="argumentoI" class="form-control form-control-sm" [(ngModel)]=argumentoI>
108
109
                                        {{ "i18n.msg.codemirror.infixOperatorsWarnings" | translate }}
                                        
110
                                    </label>
Franco Pariani's avatar
Franco Pariani committed
111
112
                                    <br>
                                    <label>
Franco Pariani's avatar
Franco Pariani committed
113
114
                                        <input type="checkbox" style="width: 15px; display: inline-block;" name="hintsCheck" class="form-control form-control-sm" [(ngModel)]=hintsCheck>
                                        {{ "i18n.msg.codemirror.showHints" | translate }}
Franco Pariani's avatar
Franco Pariani committed
115
                                    </label>
Franco Pariani's avatar
Franco Pariani committed
116
117
118
119
120
                                    <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>
121
122
                                </div>
                                <div class="form-group">
Franco Pariani's avatar
Franco Pariani committed
123
                                    <button class="btn btn-secondary" (click)="saveConfig(); popover.close();">{{ "i18n.action.save" | translate | titleCase }}</button>
124
125
126
                                </div>
                            </div>
                        </ng-template>
Franco Pariani's avatar
Franco Pariani committed
127
128
                        <ng-template #shortcutsPopoverContent style="width: 18em">
                            <div style="width: 18em">
Franco Pariani's avatar
Franco Pariani committed
129
                                <div class="form-group">
Franco Pariani's avatar
Franco Pariani committed
130
131
132
133
134
135
                                    <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>
Franco Pariani's avatar
Franco Pariani committed
136
                                    <label><b>Ctrl+{{ "i18n.shortcuts.space" | translate }}</b> {{ "i18n.shortcuts.autocomplete" | translate }}</label>
Franco Pariani's avatar
Franco Pariani committed
137
                                    <label><b>Ctrl+Shift+K</b> {{ "i18n.shortcuts.comment" | translate }}</label>
Franco Pariani's avatar
Franco Pariani committed
138
                                    <label><b>Alt+.</b> {{ "i18n.shortcuts.functionNavigation" | translate }}</label>
Franco Pariani's avatar
Franco Pariani committed
139
140
141
                                </div>
                            </div>
                        </ng-template>
142
143
                    </form>
                </div>
144
                <codemirror class="codemirrorPrograma" [(ngModel)]="archivo.contenido" (keyup)="archivoModificado($event)" (click)="clickEnEditor($event)" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
145
146
147
148
149
                </codemirror>
            </div>

            </ng-template>
                </ngb-tab>
150
                <!-- <ngb-tab id="FigurasBtn" title="Figuras OLD">
151
152
153
                    <ng-template ngbTabContent>
                        <canvas-component (canvasComp)=canvasC></canvas-component>
                    </ng-template>
154
                </ngb-tab> -->
155
                <ngb-tab id="FigurasBtn2D" title='{{ "i18n.object.figures" | translate | titleCase }} 2D'>
156
                    <ng-template ngbTabContent>
Diego Rey's avatar
Diego Rey committed
157
                        <graph2D-component (graph2DComp)=graph2DComp></graph2D-component>
158
                    </ng-template>
159
                </ngb-tab>
160
                <ngb-tab id="FigurasBtn3D" title='{{ "i18n.object.figures" | translate | titleCase }} 3D'>
161
                    <ng-template ngbTabContent>
Diego Rey's avatar
Diego Rey committed
162
                        <graph3d-component (graph3DComp)=graph3DComp></graph3d-component>
163
164
                    </ng-template>
                </ngb-tab>
Diego Rey's avatar
Diego Rey committed
165

166
167
168
169
            </ngb-tabset> 

        </div>

170
        <div class="col-md-6" [hidden]="mostrandoDefinicion">
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
            <!--  
            <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>
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

        <div class="col-md-6" [hidden]="!mostrandoDefinicion" style="top: 42px">
            <div class="card">
                <div class="card-header" style="height: 52.22px">
                    <form>
                        <div class="pull-left" *ngIf="archivoDefinicion">
                            {{ "i18n.object.name" | translate | titleCase }}:
                            {{archivoDefinicion?.nombre}}
                            &nbsp;-&nbsp;
                            {{ "i18n.action.created" | translate | titleCase }}:
                            {{archivoDefinicion?.fechaCreacion | date}}
                        </div>
                        <button style="float: right;" (click)="mostrandoDefinicion = !mostrandoDefinicion">
                            <i class="fa fa-times"></i>
                        </button>
                    </form>
                </div>
                <codemirror
                    #codemirror_def
                    class="codemirrorPrograma"
                    [(ngModel)]="archivoDefinicion.contenido"
                    [config]="configCodeMirrorDefinicion"
                    [ngStyle]="{'font-size': configCodeMirrorDefinicion.fontSize+'px'}">
                </codemirror>
            </div>
        </div>
230
    </div>
231
    <span class="version">v{{version}}</span>
232
233
</div>