From ac932c641cb0ca28013fd78454fb4f6e0483d568 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 5 Mar 2023 18:54:04 -0600 Subject: [PATCH 1/2] unify time rendering components --- .../bisq/bisq-block/bisq-block.component.html | 2 +- .../bisq-blocks/bisq-blocks.component.html | 2 +- .../bisq-transaction.component.html | 2 +- .../bisq-transactions.component.html | 2 +- .../blockchain-blocks.component.html | 2 +- .../blocks-list/blocks-list.component.html | 2 +- ...ifficulty-adjustments-table.component.html | 2 +- .../difficulty/difficulty.component.html | 4 +- .../mempool-blocks.component.html | 4 +- .../app/components/pool/pool.component.html | 2 +- .../time-since/time-since.component.ts | 98 ---------------- .../time-span/time-span.component.ts | 91 --------------- .../time-until/time-until.component.ts | 104 ----------------- .../src/app/components/time/time.component.ts | 108 ++++++++++++++++++ .../transaction/transaction.component.html | 10 +- .../transactions-list.component.html | 2 +- .../app/dashboard/dashboard.component.html | 2 +- .../timestamp/timestamp.component.html | 2 +- frontend/src/app/shared/shared.module.ts | 12 +- 19 files changed, 131 insertions(+), 322 deletions(-) delete mode 100644 frontend/src/app/components/time-since/time-since.component.ts delete mode 100644 frontend/src/app/components/time-span/time-span.component.ts delete mode 100644 frontend/src/app/components/time-until/time-until.component.ts create mode 100644 frontend/src/app/components/time/time.component.ts diff --git a/frontend/src/app/bisq/bisq-block/bisq-block.component.html b/frontend/src/app/bisq/bisq-block/bisq-block.component.html index 9cc2ad699..4f79d8838 100644 --- a/frontend/src/app/bisq/bisq-block/bisq-block.component.html +++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.html @@ -24,7 +24,7 @@ ‎{{ block.time | date:'yyyy-MM-dd HH:mm' }}
- () + ()
diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html index 750e2e3b1..15f15b258 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html @@ -17,7 +17,7 @@ {{ block.height }} - + {{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} BSQ {{ block.txs.length }} diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html index 11f981774..3a23688e6 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html @@ -35,7 +35,7 @@ ‎{{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
- () + ()
diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html index 8d34448d8..bc22414ca 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html @@ -37,7 +37,7 @@ {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} BSQ - + {{ tx.blockHeight }} diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index 746c5fa5c..8323cf8c6 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -47,7 +47,7 @@ {{ i }} transactions
-
+
- + {{ diffChange.height }} - + {{ diffChange.difficultyShorten }} diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index e030f74fa..ce0bf7eff 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -10,7 +10,7 @@ {{ i }} blocks {{ i }} block
-
+
Estimate
@@ -53,7 +53,7 @@ {{ i }} blocks {{ i }} block
-
+
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 9e70c6e74..692f7d863 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -23,10 +23,10 @@
- + - +
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html index 53982ca86..0ae32ccb8 100644 --- a/frontend/src/app/components/pool/pool.component.html +++ b/frontend/src/app/components/pool/pool.component.html @@ -227,7 +227,7 @@ ‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} - + diff --git a/frontend/src/app/components/time-since/time-since.component.ts b/frontend/src/app/components/time-since/time-since.component.ts deleted file mode 100644 index c8941a665..000000000 --- a/frontend/src/app/components/time-since/time-since.component.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core'; -import { StateService } from '../../services/state.service'; -import { dates } from '../../shared/i18n/dates'; - -@Component({ - selector: 'app-time-since', - template: `{{ text }}`, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy { - interval: number; - text: string; - intervals = {}; - - @Input() time: number; - @Input() dateString: number; - @Input() fastRender = false; - - constructor( - private ref: ChangeDetectorRef, - private stateService: StateService, - ) { - this.intervals = { - year: 31536000, - month: 2592000, - week: 604800, - day: 86400, - hour: 3600, - minute: 60, - second: 1 - }; - } - - ngOnInit() { - if (!this.stateService.isBrowser) { - this.text = this.calculate(); - this.ref.markForCheck(); - return; - } - this.interval = window.setInterval(() => { - this.text = this.calculate(); - this.ref.markForCheck(); - }, 1000 * (this.fastRender ? 1 : 60)); - } - - ngOnChanges() { - this.text = this.calculate(); - this.ref.markForCheck(); - } - - ngOnDestroy() { - clearInterval(this.interval); - } - - calculate() { - let date: Date; - if (this.dateString) { - date = new Date(this.dateString) - } else { - date = new Date(this.time * 1000); - } - const seconds = Math.floor((+new Date() - +date) / 1000); - if (seconds < 60) { - return $localize`:@@date-base.just-now:Just now`; - } - let counter: number; - for (const i in this.intervals) { - if (this.intervals.hasOwnProperty(i)) { - counter = Math.floor(seconds / this.intervals[i]); - const dateStrings = dates(counter); - if (counter > 0) { - if (counter === 1) { - switch (i) { // singular (1 day) - case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break; - case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break; - case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break; - case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break; - case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break; - case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break; - case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break; - } - } else { - switch (i) { // plural (2 days) - case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break; - case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break; - case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break; - case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break; - case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break; - case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break; - case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break; - } - } - } - } - } - } - -} diff --git a/frontend/src/app/components/time-span/time-span.component.ts b/frontend/src/app/components/time-span/time-span.component.ts deleted file mode 100644 index 03a438164..000000000 --- a/frontend/src/app/components/time-span/time-span.component.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core'; -import { StateService } from '../../services/state.service'; -import { dates } from '../../shared/i18n/dates'; - -@Component({ - selector: 'app-time-span', - template: `{{ text }}`, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy { - interval: number; - text: string; - intervals = {}; - - @Input() time: number; - @Input() fastRender = false; - - constructor( - private ref: ChangeDetectorRef, - private stateService: StateService, - ) { - this.intervals = { - year: 31536000, - month: 2592000, - week: 604800, - day: 86400, - hour: 3600, - minute: 60, - second: 1 - }; - } - - ngOnInit() { - if (!this.stateService.isBrowser) { - this.text = this.calculate(); - this.ref.markForCheck(); - return; - } - this.interval = window.setInterval(() => { - this.text = this.calculate(); - this.ref.markForCheck(); - }, 1000 * (this.fastRender ? 1 : 60)); - } - - ngOnChanges() { - this.text = this.calculate(); - this.ref.markForCheck(); - } - - ngOnDestroy() { - clearInterval(this.interval); - } - - calculate() { - const seconds = Math.floor(this.time); - if (seconds < 60) { - return $localize`:@@date-base.just-now:Just now`; - } - let counter: number; - for (const i in this.intervals) { - if (this.intervals.hasOwnProperty(i)) { - counter = Math.floor(seconds / this.intervals[i]); - const dateStrings = dates(counter); - if (counter > 0) { - if (counter === 1) { - switch (i) { // singular (1 day) - case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break; - case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break; - case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break; - case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break; - case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break; - case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break; - case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break; - } - } else { - switch (i) { // plural (2 days) - case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break; - case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break; - case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break; - case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break; - case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break; - case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break; - case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break; - } - } - } - } - } - } - -} diff --git a/frontend/src/app/components/time-until/time-until.component.ts b/frontend/src/app/components/time-until/time-until.component.ts deleted file mode 100644 index 2b370b4ac..000000000 --- a/frontend/src/app/components/time-until/time-until.component.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core'; -import { StateService } from '../../services/state.service'; -import { dates } from '../../shared/i18n/dates'; - -@Component({ - selector: 'app-time-until', - template: `{{ text }}`, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy { - interval: number; - text: string; - intervals = {}; - - @Input() time: number; - @Input() fastRender = false; - @Input() fixedRender = false; - @Input() forceFloorOnTimeIntervals: string[]; - - constructor( - private ref: ChangeDetectorRef, - private stateService: StateService, - ) { - this.intervals = { - year: 31536000, - month: 2592000, - week: 604800, - day: 86400, - hour: 3600, - minute: 60, - second: 1 - }; - } - - ngOnInit() { - if(this.fixedRender){ - this.text = this.calculate(); - return; - } - - if (!this.stateService.isBrowser) { - this.text = this.calculate(); - this.ref.markForCheck(); - return; - } - this.interval = window.setInterval(() => { - this.text = this.calculate(); - this.ref.markForCheck(); - }, 1000 * (this.fastRender ? 1 : 60)); - } - - ngOnChanges() { - this.text = this.calculate(); - this.ref.markForCheck(); - } - - ngOnDestroy() { - clearInterval(this.interval); - } - - calculate() { - const seconds = (+new Date(this.time) - +new Date()) / 1000; - - if (seconds < 60) { - const dateStrings = dates(1); - return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`; - } - let counter: number; - for (const i in this.intervals) { - if (this.intervals.hasOwnProperty(i)) { - if (this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) { - counter = Math.floor(seconds / this.intervals[i]); - } else { - counter = Math.round(seconds / this.intervals[i]); - } - const dateStrings = dates(counter); - if (counter > 0) { - if (counter === 1) { - switch (i) { // singular (In ~1 day) - case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break; - case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break; - case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break; - case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break; - case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break; - case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`; - case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`; - } - } else { - switch (i) { // plural (In ~2 days) - case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break; - case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break; - case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break; - case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break; - case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break; - case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break; - case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break; - } - } - } - } - } - } - -} diff --git a/frontend/src/app/components/time/time.component.ts b/frontend/src/app/components/time/time.component.ts new file mode 100644 index 000000000..f46583fba --- /dev/null +++ b/frontend/src/app/components/time/time.component.ts @@ -0,0 +1,108 @@ +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core'; +import { StateService } from '../../services/state.service'; +import { dates } from '../../shared/i18n/dates'; + +@Component({ + selector: 'app-time', + template: `{{ text }}`, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class TimeComponent implements OnInit, OnChanges, OnDestroy { + interval: number; + text: string; + intervals = {}; + + @Input() time: number; + @Input() dateString: number; + @Input() kind: 'plain' | 'since' | 'until' | 'span' = 'plain'; + @Input() fastRender = false; + @Input() fixedRender = false; + @Input() relative = false; + @Input() forceFloorOnTimeIntervals: string[]; + + constructor( + private ref: ChangeDetectorRef, + private stateService: StateService, + ) { + this.intervals = { + Year: 31536000, + Month: 2592000, + Week: 604800, + Day: 86400, + Hour: 3600, + Minute: 60, + Second: 1 + }; + } + + ngOnInit() { + if(this.fixedRender){ + this.text = this.calculate(); + return; + } + if (!this.stateService.isBrowser) { + this.text = this.calculate(); + this.ref.markForCheck(); + return; + } + this.interval = window.setInterval(() => { + this.text = this.calculate(); + this.ref.markForCheck(); + }, 1000 * (this.fastRender ? 1 : 60)); + } + + ngOnChanges() { + this.text = this.calculate(); + this.ref.markForCheck(); + } + + ngOnDestroy() { + clearInterval(this.interval); + } + + calculate() { + let seconds: number; + switch (this.kind) { + case 'since': + seconds = Math.floor((+new Date() - +new Date(this.dateString || this.time * 1000)) / 1000); + break; + case 'until': + seconds = (+new Date(this.time) - +new Date()) / 1000; + break; + default: + seconds = Math.floor(this.time); + } + + if (seconds < 60) { + if (this.relative || this.kind === 'since') { + return $localize`:@@date-base.just-now:Just now`; + } else if (this.kind === 'until') { + seconds = 60; + } + } + + let counter: number; + for (const i in this.intervals) { + if (this.kind !== 'until' || this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i.toLowerCase()) > -1) { + counter = Math.floor(seconds / this.intervals[i]); + } else { + counter = Math.round(seconds / this.intervals[i]); + } + const dateStrings = dates(counter); + if (counter > 0) { + const dateStringKey = `i18n${i}${counter === 1 ? '' : 's'}`; + switch (this.kind) { + case 'since': + return $localize`:@@time-since:${dateStrings[dateStringKey]}:DATE: ago`; + case 'until': + return $localize`:@@time-until:In ~${dateStrings[dateStringKey]}:DATE:`; + case 'span': + return $localize`:@@time-span:After ${dateStrings[dateStringKey]}:DATE:`; + default: + return dateStrings[dateStringKey]; + } + } + } + } + +} diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 07234f7bc..455c74c99 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -57,14 +57,14 @@ ‎{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
- () + ()
Confirmed - + @@ -100,7 +100,7 @@ First seen - + @@ -116,10 +116,10 @@ - + - + diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index e5280d572..cb54e1870 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -6,7 +6,7 @@
‎{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} - +
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 7c3caccad..add846e24 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -93,7 +93,7 @@ {{ block.height }} - + ‎{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
- () + ()
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index fd257db85..52b469836 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -25,8 +25,7 @@ import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe'; import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe'; import { FiatCurrencyPipe } from './pipes/fiat-currency.pipe'; import { BlockchainComponent } from '../components/blockchain/blockchain.component'; -import { TimeSinceComponent } from '../components/time-since/time-since.component'; -import { TimeUntilComponent } from '../components/time-until/time-until.component'; +import { TimeComponent } from '../components/time/time.component'; import { ClipboardComponent } from '../components/clipboard/clipboard.component'; import { QrcodeComponent } from '../components/qrcode/qrcode.component'; import { FiatComponent } from '../fiat/fiat.component'; @@ -53,7 +52,6 @@ import { AddressComponent } from '../components/address/address.component'; import { SearchFormComponent } from '../components/search-form/search-form.component'; import { AddressLabelsComponent } from '../components/address-labels/address-labels.component'; import { FooterComponent } from '../components/footer/footer.component'; -import { TimeSpanComponent } from '../components/time-span/time-span.component'; import { AssetComponent } from '../components/asset/asset.component'; import { AssetsComponent } from '../components/assets/assets.component'; import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component'; @@ -88,8 +86,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati @NgModule({ declarations: [ ClipboardComponent, - TimeSinceComponent, - TimeUntilComponent, + TimeComponent, QrcodeComponent, FiatComponent, TxFeaturesComponent, @@ -129,7 +126,6 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati TransactionsListComponent, AddressComponent, SearchFormComponent, - TimeSpanComponent, AddressLabelsComponent, FooterComponent, AssetComponent, @@ -195,8 +191,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati NgbCollapseModule, InfiniteScrollModule, FontAwesomeModule, - TimeSinceComponent, - TimeUntilComponent, + TimeComponent, ClipboardComponent, QrcodeComponent, FiatComponent, @@ -232,7 +227,6 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati TransactionsListComponent, AddressComponent, SearchFormComponent, - TimeSpanComponent, AddressLabelsComponent, FooterComponent, AssetComponent, From 7f78fefb210bae04797edcfbfd1582bf32de1484 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 5 Mar 2023 21:09:22 -0600 Subject: [PATCH 2/2] revert time localization strings --- .../src/app/components/time/time.component.ts | 108 +++++++++++++++--- 1 file changed, 95 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/time/time.component.ts b/frontend/src/app/components/time/time.component.ts index f46583fba..4cc76975e 100644 --- a/frontend/src/app/components/time/time.component.ts +++ b/frontend/src/app/components/time/time.component.ts @@ -25,13 +25,13 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy { private stateService: StateService, ) { this.intervals = { - Year: 31536000, - Month: 2592000, - Week: 604800, - Day: 86400, - Hour: 3600, - Minute: 60, - Second: 1 + year: 31536000, + month: 2592000, + week: 604800, + day: 86400, + hour: 3600, + minute: 60, + second: 1 }; } @@ -83,23 +83,105 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy { let counter: number; for (const i in this.intervals) { - if (this.kind !== 'until' || this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i.toLowerCase()) > -1) { + if (this.kind !== 'until' || this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) { counter = Math.floor(seconds / this.intervals[i]); } else { counter = Math.round(seconds / this.intervals[i]); } const dateStrings = dates(counter); if (counter > 0) { - const dateStringKey = `i18n${i}${counter === 1 ? '' : 's'}`; switch (this.kind) { case 'since': - return $localize`:@@time-since:${dateStrings[dateStringKey]}:DATE: ago`; + if (counter === 1) { + switch (i) { // singular (1 day) + case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break; + case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break; + case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break; + case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break; + case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break; + case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break; + case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break; + } + } else { + switch (i) { // plural (2 days) + case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break; + case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break; + case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break; + case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break; + case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break; + case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break; + case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break; + } + } + break; case 'until': - return $localize`:@@time-until:In ~${dateStrings[dateStringKey]}:DATE:`; + if (counter === 1) { + switch (i) { // singular (In ~1 day) + case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break; + case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break; + case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break; + case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break; + case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break; + case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`; + case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`; + } + } else { + switch (i) { // plural (In ~2 days) + case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break; + case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break; + case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break; + case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break; + case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break; + case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break; + case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break; + } + } + break; case 'span': - return $localize`:@@time-span:After ${dateStrings[dateStringKey]}:DATE:`; + if (counter === 1) { + switch (i) { // singular (1 day) + case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break; + case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break; + case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break; + case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break; + case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break; + case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break; + case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break; + } + } else { + switch (i) { // plural (2 days) + case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break; + case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break; + case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break; + case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break; + case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break; + case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break; + case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break; + } + } + break; default: - return dateStrings[dateStringKey]; + if (counter === 1) { + switch (i) { // singular (1 day) + case 'year': return dateStrings.i18nYear; break; + case 'month': return dateStrings.i18nMonth; break; + case 'week': return dateStrings.i18nWeek; break; + case 'day': return dateStrings.i18nDay; break; + case 'hour': return dateStrings.i18nHour; break; + case 'minute': return dateStrings.i18nMinute; break; + case 'second': return dateStrings.i18nSecond; break; + } + } else { + switch (i) { // plural (2 days) + case 'year': return dateStrings.i18nYears; break; + case 'month': return dateStrings.i18nMonths; break; + case 'week': return dateStrings.i18nWeeks; break; + case 'day': return dateStrings.i18nDays; break; + case 'hour': return dateStrings.i18nHours; break; + case 'minute': return dateStrings.i18nMinutes; break; + case 'second': return dateStrings.i18nSeconds; break; + } + } } } }