Skip to content
Snippets Groups Projects
Commit dfbd92e7 authored by Nicolas Camera's avatar Nicolas Camera
Browse files

Se arreglan las traducciones del graficador 3D

parent a84271e1
No related branches found
No related tags found
1 merge request!1Se actualiza Angular a la versión 13 y se resuelven vulnerabilidades
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
+ 206
− 198
View file @ dfbd92e7
<div class="card"> <div class="card">
<div class="controls"> <div class="controls">
<div class="btn-group ddown"> <div class="btn-group ddown">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
style="min-width: 70px;" style="min-width: 70px"
(click)=changeZoomType()> (click)="changeZoomType()"
{{getZoom3DTypeName(graphProps.zoomType)}} >
</button> {{ getZoom3DTypeName(graphProps.zoomType) }}
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown"> </button>
<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button> <div
<div class="dropdown-menu" ngbDropdownMenu> class="btn-group"
<button ngbDropdown
*ngFor="let type of [1,2,3,4]" role="group"
class="dropdown-item" aria-label="Button group with nested dropdown"
[disabled]="type === graphProps.zoomType" >
(click)=changeZoomType(type)> <button
{{getZoom3DTypeName(type)}} class="btn btn-secondary dropdown-toggle-split"
</button> ngbDropdownToggle
</div> ></button>
</div> <div class="dropdown-menu" ngbDropdownMenu>
</div> <button
*ngFor="let type of [1, 2, 3, 4]"
<button class="dropdown-item"
ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} +' [disabled]="type === graphProps.zoomType"
triggers="mouseenter:mouseleave" (click)="changeZoomType(type)"
data-placement="bottom" >
class="btn btn-sm btn-secondary" {{ getZoom3DTypeName(type) }}
(click)=zoomIn() > </button>
<i class="fa fa-plus"></i> </div>
</button> </div>
</div>
<button
ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} -' <button
triggers="mouseenter:mouseleave" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
data-placement="bottom" triggers="mouseenter:mouseleave"
class="btn btn-sm btn-secondary" data-placement="bottom"
(click)=zoomOut() > class="btn btn-sm btn-secondary"
<i class="fa fa-minus"></i> (click)="zoomIn()"
</button> >
<i class="fa fa-plus"></i>
<button </button>
ngbPopover='{{ "i18n.action.center" | translate | titleCase}}'
triggers="mouseenter:mouseleave" <button
data-placement="bottom" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
class="btn btn-sm btn-secondary" triggers="mouseenter:mouseleave"
(click)=center() > data-placement="bottom"
<i class="fa fa-arrows"></i> class="btn btn-sm btn-secondary"
</button> (click)="zoomOut()"
>
<button <i class="fa fa-minus"></i>
closePopoverDirective </button>
class="btn btn-sm btn-secondary"
placement="bottom" <button
[ngbPopover]=popoverAxesSize ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
popoverTitle="Rango de ejes" triggers="mouseenter:mouseleave"
#popover="ngbPopover" data-placement="bottom"
tiggers="click"> class="btn btn-sm btn-secondary"
<i class="fa fa-arrows-h"></i> (click)="center()"
</button> >
<ng-template #popoverAxesSize> <i class="fa fa-arrows"></i>
<div class="axes-size"> </button>
<div class="axe">
<input <button
type="number" closePopoverDirective
class="form-control form-control-sm" class="btn btn-sm btn-secondary"
[(ngModel)]="graphProps.range.xMin" placement="bottom"
[max]="graphProps.range.xMax-1" [ngbPopover]="popoverAxesSize"
[min]="-99" popoverTitle="Rango de ejes"
(change)="onChangeAxesSize('xMin', $event)" #popover="ngbPopover"
/> tiggers="click"
<div class="less-than"> >
<span>&#8804;</span>x<span>&#8804;</span> <i class="fa fa-arrows-h"></i>
</div> </button>
<ng-template #popoverAxesSize>
<input <div class="axes-size">
type="number" <div class="axe">
class="form-control form-control-sm" <input
[(ngModel)]="graphProps.range.xMax" type="number"
[max]="99" class="form-control form-control-sm"
[min]="graphProps.range.xMin+1" [(ngModel)]="graphProps.range.xMin"
(change)="onChangeAxesSize('xMax', $event)" [max]="graphProps.range.xMax - 1"
/> [min]="-99"
</div> (change)="onChangeAxesSize('xMin', $event)"
/>
<div class="axe"> <div class="less-than"><span>&#8804;</span>x<span>&#8804;</span></div>
<input
type="number" <input
class="form-control form-control-sm" type="number"
[(ngModel)]="graphProps.range.yMin" class="form-control form-control-sm"
[max]="graphProps.range.yMax-1" [(ngModel)]="graphProps.range.xMax"
[min]="-99" [max]="99"
(change)="onChangeAxesSize('yMin', $event)" [min]="graphProps.range.xMin + 1"
/> (change)="onChangeAxesSize('xMax', $event)"
<div class="less-than"> />
<span>&#8804;</span>y<span>&#8804;</span> </div>
</div>
<div class="axe">
<input <input
type="number" type="number"
class="form-control form-control-sm" class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMax" [(ngModel)]="graphProps.range.yMin"
[max]="99" [max]="graphProps.range.yMax - 1"
[min]="graphProps.range.yMin+1" [min]="-99"
(change)="onChangeAxesSize('yMax', $event)" (change)="onChangeAxesSize('yMin', $event)"
/> />
</div> <div class="less-than"><span>&#8804;</span>y<span>&#8804;</span></div>
<div class="axe"> <input
<input type="number"
type="number" class="form-control form-control-sm"
class="form-control form-control-sm" [(ngModel)]="graphProps.range.yMax"
[(ngModel)]="graphProps.range.zMin" [max]="99"
[max]="graphProps.range.zMax-1" [min]="graphProps.range.yMin + 1"
[min]="-99" (change)="onChangeAxesSize('yMax', $event)"
(change)="onChangeAxesSize('zMin', $event)" />
/> </div>
<div class="less-than">
<span>&#8804;</span>z<span>&#8804;</span> <div class="axe">
</div> <input
type="number"
<input class="form-control form-control-sm"
type="number" [(ngModel)]="graphProps.range.zMin"
class="form-control form-control-sm" [max]="graphProps.range.zMax - 1"
[(ngModel)]="graphProps.range.zMax" [min]="-99"
[max]="99" (change)="onChangeAxesSize('zMin', $event)"
[min]="graphProps.range.zMin+1" />
(change)="onChangeAxesSize('zMax', $event)" <div class="less-than"><span>&#8804;</span>z<span>&#8804;</span></div>
/>
</div> <input
</div> type="number"
</ng-template> class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMax"
[max]="99"
<button [min]="graphProps.range.zMin + 1"
ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}' (change)="onChangeAxesSize('zMax', $event)"
triggers="mouseenter:mouseleave" />
data-placement="bottom" </div>
class="btn btn-sm btn-secondary" </div>
(click)=clear() > </ng-template>
<i class="fa fa-trash"></i>
</button> <button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
<button triggers="mouseenter:mouseleave"
[ngbPopover]=popoverConfig data-placement="bottom"
closePopoverDirective class="btn btn-sm btn-secondary"
placement="bottom" (click)="clear()"
tiggers="click" >
class="btn btn-sm btn-secondary" <i class="fa fa-trash"></i>
popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}' </button>
>
<i class="fa fa-gear"></i> <button
</button> [ngbPopover]="popoverConfig"
closePopoverDirective
<ng-template #popoverConfig> placement="bottom"
<div style="width: 140px;"> tiggers="click"
<label class="d-block"> class="btn btn-sm btn-secondary"
<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()"> popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
{{ "i18n.object.grid" | translate | titleCase }} >
</label> <i class="fa fa-gear"></i>
</button>
<div style="display: flex;">
<span style="margin-right: 8px; align-self: center;"> <ng-template #popoverConfig>
{{ "i18n.object.quality" | translate | titleCase }}: <div style="width: 140px">
</span> <label class="d-block">
<input
<input type="checkbox"
type="number" [checked]="graphProps.showAxes"
class="form-control form-control-sm" (click)="changeAxesVisibility()"
[(ngModel)]="graphProps.quality" />
[max]="99" {{ "i18n.object.grid" | translate | titleCase }}
[min]="2" </label>
(change)="onChangeQuality()"
style="width: 55px;" <div style="display: flex">
/> <span style="margin-right: 8px; align-self: center">
</div> {{ "i18n.object.quality" | translate | titleCase }}:
</div> </span>
</ng-template>
<input
type="number"
</div> class="form-control form-control-sm"
[(ngModel)]="graphProps.quality"
<div class="card-block contenedor-canvas" > [max]="99"
<animation-control [min]="2"
[minSpeed]="60" (change)="onChangeQuality()"
[value]="animationProps.value" style="width: 55px"
[speed]="animationProps.speed" />
[visible]="animationProps.visible" </div>
[playing]="animationProps.playing" </div>
[onChangeSpeed]="onAnimationChangeSpeed" </ng-template>
[onTogglePlay]="onAnimationTogglePlay" </div>
>
</animation-control> <div class="card-block contenedor-canvas">
<animation-control
<div #graph3DElement style="width: 100%; height: 100%;"> [minSpeed]="60"
</div> [value]="animationProps.value"
</div> [speed]="animationProps.speed"
[visible]="animationProps.visible"
[playing]="animationProps.playing"
[onChangeSpeed]="onAnimationChangeSpeed"
[onTogglePlay]="onAnimationTogglePlay"
>
</animation-control>
<div #graph3DElement style="width: 100%; height: 100%"></div>
</div>
</div> </div>
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
+ 24
− 23
View file @ dfbd92e7
...@@ -33,6 +33,16 @@ export class Graph3DComponent implements AfterViewInit { ...@@ -33,6 +33,16 @@ export class Graph3DComponent implements AfterViewInit {
private translateService: any; private translateService: any;
private titlecasePipe: any; private titlecasePipe: any;
/**
* Diccionario de traducciones para los tipos de Zoom.
*/
private translationTypes = {
[Zoom3DType.Normal]: "i18n.object.normal",
[Zoom3DType.XAxis]: "i18n.object.axis",
[Zoom3DType.YAxis]: "i18n.object.axis",
[Zoom3DType.ZAxis]: "i18n.object.axis",
};
@ViewChild("graph3DElement", { static: true }) @ViewChild("graph3DElement", { static: true })
private graph3DRef: ElementRef; private graph3DRef: ElementRef;
...@@ -198,29 +208,20 @@ export class Graph3DComponent implements AfterViewInit { ...@@ -198,29 +208,20 @@ export class Graph3DComponent implements AfterViewInit {
}; };
public getZoom3DTypeName = (type: Zoom3DType) => { public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) { let translation: string;
case Zoom3DType.Normal:
return this.titlecasePipe.transform( this.translateService.get(this.translationTypes[type]).subscribe((res) => {
this.translateService.get("i18n.object.normal").value translation = res;
); });
case Zoom3DType.XAxis:
return ( if (type == 2) {
this.titlecasePipe.transform( translation += " x";
this.translateService.get("i18n.object.axis").value } else if (type == 3) {
) + " x" translation += " y";
); } else if (type == 4) {
case Zoom3DType.YAxis: translation += " z";
return (
this.titlecasePipe.transform(
this.translateService.get("i18n.object.axis").value
) + " y"
);
case Zoom3DType.ZAxis:
return (
this.titlecasePipe.transform(
this.translateService.get("i18n.object.axis").value
) + " z"
);
} }
return this.titlecasePipe.transform(translation);
}; };
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment