fix(client): localize decimal separator

pull/3643/head
kontrollanten 2021-01-26 18:37:35 +01:00
parent 5d84d717b2
commit 1fe74db9c3
2 changed files with 16 additions and 9 deletions

View File

@ -1,14 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core' import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'
// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts // Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts
@Pipe({ name: 'myNumberFormatter' }) @Pipe({ name: 'myNumberFormatter' })
export class NumberFormatterPipe implements PipeTransform { export class NumberFormatterPipe implements PipeTransform {
private dictionary: Array<{max: number, type: string}> = [
{ max: 1000, type: '' },
{ max: 1000000, type: 'K' },
{ max: 1000000000, type: 'M' }
]
/** /**
* @param x number * @param x number
@ -21,14 +16,25 @@ export class NumberFormatterPipe implements PipeTransform {
return +f return +f
} }
private dictionary: Array<{max: number, type: string}> = [
{ max: 1000, type: '' },
{ max: 1000000, type: 'K' },
{ max: 1000000000, type: 'M' }
]
constructor (@Inject(LOCALE_ID) private localeId: string) {}
transform (value: number) { transform (value: number) {
const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1] const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
const calc = value / (format.max / 1000) const calc = value / (format.max / 1000)
const integralPart = Math.floor(calc) const integralPart = Math.floor(calc)
const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc) const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc)
const decimalSeparator = Intl.NumberFormat(this.localeId)
.formatToParts(1.1)
.find(part => part.type === 'decimal')
.value
return integralPart < 10 && decimalPart > 0 return integralPart < 10 && decimalPart > 0
? `${integralPart}.${decimalPart}${format.type}` ? `${integralPart}${decimalSeparator}${decimalPart}${format.type}`
: `${integralPart}${format.type}` : `${integralPart}${format.type}`
} }
} }

View File

@ -1,5 +1,5 @@
import { mapValues, pick } from 'lodash-es' import { mapValues, pick } from 'lodash-es'
import { Component, ElementRef, ViewChild } from '@angular/core' import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
import { AuthService, Notifier } from '@app/core' import { AuthService, Notifier } from '@app/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models' import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
@ -34,13 +34,14 @@ export class VideoDownloadComponent {
private numbersPipe: NumberFormatterPipe private numbersPipe: NumberFormatterPipe
constructor ( constructor (
@Inject(LOCALE_ID) private localeId: string,
private notifier: Notifier, private notifier: Notifier,
private modalService: NgbModal, private modalService: NgbModal,
private videoService: VideoService, private videoService: VideoService,
private auth: AuthService private auth: AuthService
) { ) {
this.bytesPipe = new BytesPipe() this.bytesPipe = new BytesPipe()
this.numbersPipe = new NumberFormatterPipe() this.numbersPipe = new NumberFormatterPipe(this.localeId)
} }
get typeText () { get typeText () {