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="controls">
<div class="btn-group ddown">
<button
type="button"
class="btn btn-secondary"
style="min-width: 70px;"
(click)=changeZoomType()>
{{getZoom3DTypeName(graphProps.zoomType)}}
</button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button
*ngFor="let type of [1,2,3,4]"
class="dropdown-item"
[disabled]="type === graphProps.zoomType"
(click)=changeZoomType(type)>
{{getZoom3DTypeName(type)}}
</button>
</div>
</div>
</div>
<button
ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} +'
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomIn() >
<i class="fa fa-plus"></i>
</button>
<button
ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} -'
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=zoomOut() >
<i class="fa fa-minus"></i>
</button>
<button
ngbPopover='{{ "i18n.action.center" | translate | titleCase}}'
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=center() >
<i class="fa fa-arrows"></i>
</button>
<button
closePopoverDirective
class="btn btn-sm btn-secondary"
placement="bottom"
[ngbPopover]=popoverAxesSize
popoverTitle="Rango de ejes"
#popover="ngbPopover"
tiggers="click">
<i class="fa fa-arrows-h"></i>
</button>
<ng-template #popoverAxesSize>
<div class="axes-size">
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMin"
[max]="graphProps.range.xMax-1"
[min]="-99"
(change)="onChangeAxesSize('xMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>x<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMax"
[max]="99"
[min]="graphProps.range.xMin+1"
(change)="onChangeAxesSize('xMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMin"
[max]="graphProps.range.yMax-1"
[min]="-99"
(change)="onChangeAxesSize('yMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>y<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMax"
[max]="99"
[min]="graphProps.range.yMin+1"
(change)="onChangeAxesSize('yMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMin"
[max]="graphProps.range.zMax-1"
[min]="-99"
(change)="onChangeAxesSize('zMin', $event)"
/>
<div class="less-than">
<span>&#8804;</span>z<span>&#8804;</span>
</div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMax"
[max]="99"
[min]="graphProps.range.zMin+1"
(change)="onChangeAxesSize('zMax', $event)"
/>
</div>
</div>
</ng-template>
<button
ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)=clear() >
<i class="fa fa-trash"></i>
</button>
<button
[ngbPopover]=popoverConfig
closePopoverDirective
placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary"
popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
>
<i class="fa fa-gear"></i>
</button>
<ng-template #popoverConfig>
<div style="width: 140px;">
<label class="d-block">
<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
{{ "i18n.object.grid" | translate | titleCase }}
</label>
<div style="display: flex;">
<span style="margin-right: 8px; align-self: center;">
{{ "i18n.object.quality" | translate | titleCase }}:
</span>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.quality"
[max]="99"
[min]="2"
(change)="onChangeQuality()"
style="width: 55px;"
/>
</div>
</div>
</ng-template>
</div>
<div class="card-block contenedor-canvas" >
<animation-control
[minSpeed]="60"
[value]="animationProps.value"
[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 class="controls">
<div class="btn-group ddown">
<button
type="button"
class="btn btn-secondary"
style="min-width: 70px"
(click)="changeZoomType()"
>
{{ getZoom3DTypeName(graphProps.zoomType) }}
</button>
<div
class="btn-group"
ngbDropdown
role="group"
aria-label="Button group with nested dropdown"
>
<button
class="btn btn-secondary dropdown-toggle-split"
ngbDropdownToggle
></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button
*ngFor="let type of [1, 2, 3, 4]"
class="dropdown-item"
[disabled]="type === graphProps.zoomType"
(click)="changeZoomType(type)"
>
{{ getZoom3DTypeName(type) }}
</button>
</div>
</div>
</div>
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomIn()"
>
<i class="fa fa-plus"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomOut()"
>
<i class="fa fa-minus"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)="center()"
>
<i class="fa fa-arrows"></i>
</button>
<button
closePopoverDirective
class="btn btn-sm btn-secondary"
placement="bottom"
[ngbPopover]="popoverAxesSize"
popoverTitle="Rango de ejes"
#popover="ngbPopover"
tiggers="click"
>
<i class="fa fa-arrows-h"></i>
</button>
<ng-template #popoverAxesSize>
<div class="axes-size">
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMin"
[max]="graphProps.range.xMax - 1"
[min]="-99"
(change)="onChangeAxesSize('xMin', $event)"
/>
<div class="less-than"><span>&#8804;</span>x<span>&#8804;</span></div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.xMax"
[max]="99"
[min]="graphProps.range.xMin + 1"
(change)="onChangeAxesSize('xMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMin"
[max]="graphProps.range.yMax - 1"
[min]="-99"
(change)="onChangeAxesSize('yMin', $event)"
/>
<div class="less-than"><span>&#8804;</span>y<span>&#8804;</span></div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.yMax"
[max]="99"
[min]="graphProps.range.yMin + 1"
(change)="onChangeAxesSize('yMax', $event)"
/>
</div>
<div class="axe">
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMin"
[max]="graphProps.range.zMax - 1"
[min]="-99"
(change)="onChangeAxesSize('zMin', $event)"
/>
<div class="less-than"><span>&#8804;</span>z<span>&#8804;</span></div>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.range.zMax"
[max]="99"
[min]="graphProps.range.zMin + 1"
(change)="onChangeAxesSize('zMax', $event)"
/>
</div>
</div>
</ng-template>
<button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
data-placement="bottom"
class="btn btn-sm btn-secondary"
(click)="clear()"
>
<i class="fa fa-trash"></i>
</button>
<button
[ngbPopover]="popoverConfig"
closePopoverDirective
placement="bottom"
tiggers="click"
class="btn btn-sm btn-secondary"
popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
>
<i class="fa fa-gear"></i>
</button>
<ng-template #popoverConfig>
<div style="width: 140px">
<label class="d-block">
<input
type="checkbox"
[checked]="graphProps.showAxes"
(click)="changeAxesVisibility()"
/>
{{ "i18n.object.grid" | translate | titleCase }}
</label>
<div style="display: flex">
<span style="margin-right: 8px; align-self: center">
{{ "i18n.object.quality" | translate | titleCase }}:
</span>
<input
type="number"
class="form-control form-control-sm"
[(ngModel)]="graphProps.quality"
[max]="99"
[min]="2"
(change)="onChangeQuality()"
style="width: 55px"
/>
</div>
</div>
</ng-template>
</div>
<div class="card-block contenedor-canvas">
<animation-control
[minSpeed]="60"
[value]="animationProps.value"
[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>
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 {
private translateService: 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 })
private graph3DRef: ElementRef;
......@@ -198,29 +208,20 @@ export class Graph3DComponent implements AfterViewInit {
};
public getZoom3DTypeName = (type: Zoom3DType) => {
switch (type) {
case Zoom3DType.Normal:
return this.titlecasePipe.transform(
this.translateService.get("i18n.object.normal").value
);
case Zoom3DType.XAxis:
return (
this.titlecasePipe.transform(
this.translateService.get("i18n.object.axis").value
) + " x"
);
case Zoom3DType.YAxis:
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"
);
let translation: string;
this.translateService.get(this.translationTypes[type]).subscribe((res) => {
translation = res;
});
if (type == 2) {
translation += " x";
} else if (type == 3) {
translation += " y";
} else if (type == 4) {
translation += " 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