mempool/frontend/src/app/dashboard/dashboard.component.html

205 lines
10 KiB
HTML
Raw Normal View History

2020-09-26 23:40:26 +07:00
<div class="container-xl mt-2">
2020-09-22 12:50:12 +07:00
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<ng-container *ngTemplateOutlet="txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
2020-09-27 01:31:20 +07:00
</div>
</div>
</div>
<div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
<ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
</div>
</ng-template>
<ng-template #expanded>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
2020-09-26 22:46:26 +07:00
</div>
</div>
</div>
<div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
<ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
</div>
<div class="col mb-4">
<div class="card text-center graph-card">
<div class="card-body pl-0">
<div style="padding-left: 1.25rem;">
<ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
<hr>
</div>
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
<app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="20" [small]="true"></app-mempool-graph>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center graph-card">
<div class="card-body">
<ng-container *ngTemplateOutlet="txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
2020-09-27 02:24:50 +07:00
<br>
<hr>
2020-09-27 01:31:20 +07:00
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
<app-chartist
[data]="mempoolStats.weightPerSecond"
[type]="'Line'"
[options]="transactionsWeightPerSecondOptions">
</app-chartist>
</div>
</div>
2020-09-26 22:46:26 +07:00
</div>
</div>
<ng-template [ngIf]="collapseLevel === 'one'">
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.latest-blocks">Latest blocks</h5>
<table class="table table-borderless text-left">
<thead>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<th style="width: 15%;" i18n="dashboard.latest-blocks.height">Height</th>
<th style="width: 35%;" i18n="dashboard.latest-blocks.mined">Mined</th>
<th style="width: 20%;" class="d-none d-lg-table-cell" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
<th style="width: 30%;" i18n="dashboard.latest-blocks.size">Size</th>
</thead>
<tbody>
<tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
<td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
<td class="d-none d-lg-table-cell">{{ block.tx_count | number }}</td>
<td>
<div class="progress position-relative">
<div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
<div class="progress-text">{{ block.size | bytes: 2 }}</div>
</div>
</td>
</tr>
</tbody>
</table>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<div class="text-center"><a href="" [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
<table class="table table-borderless text-left">
<thead>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<th style="width: 20%;" i18n="dashboard.latest-transactions.txid">TXID</th>
<th style="width: 35%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.amount">Amount</th>
<th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.USD">USD</th>
<th style="width: 25%;" class="text-right" i18n="dashboard.latest-transactions.fee">Fee</th>
</thead>
<tbody>
<tr *ngFor="let transaction of transactions$ | async; let i = index;">
<td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
<td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
<td *ngIf="(network$ | async) === ''" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
</tbody>
</table>
<div class="text-center">&nbsp;</div>
</div>
</div>
</div>
</ng-template>
</ng-template>
</div>
<button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">
<div [ngSwitch]="collapseLevel">
<fa-icon *ngSwitchCase="'three'" [icon]="['fas', 'angle-down']" [fixedWidth]="true" i18n-title="dashboard.expand" title="Expand"></fa-icon>
<fa-icon *ngSwitchDefault [icon]="['fas', 'angle-up']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</div>
</button>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<div [formGroup]="languageForm" class="text-small text-center mt-4">
<select formControlName="language" class="form-control form-control-secondary form-control-sm mx-auto" style="width: 130px;" (change)="changeLanguage()">
<option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
</select>
</div>
<div class="text-small text-center mt-3">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
</div>
2020-09-22 12:50:12 +07:00
</div>
<ng-template #loading>
<div class="skeleton-loader"></div>
</ng-template>
<ng-template #emptyBlock>
<div class="col mb-4">
</div>
</ng-template>
<ng-template #mempoolTable let-mempoolInfoData>
<table style="width: 100%;">
<tr>
<td>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.mempool-size|Mempool size">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
{{ mempoolBlocksData.size | bytes }} (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
</p>
</td>
<td>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
{{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
</p>
</td>
</tr>
</table>
</ng-template>
<ng-template #txPerSecond let-mempoolInfoData>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
<ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
<span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
&nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span>
</span>
<ng-template #inSync>
<div class="progress sub-text" style="max-width: 250px;">
2020-12-03 18:34:19 +07:00
<div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
</div>
</ng-template>
</ng-template>
</ng-template>
<ng-template #difficultyEpoch>
<div class="card text-center">
<div class="card-body more-padding">
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
<h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
<div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
</div>
</div>
</div>
Implement i18n support in frontend using Angular + Transifex + NGINX This PR adds basic i18n support into the mempool frontend, together with a smooth workflow for developers and translators to collaborate: * Using the existing @angular/localize module, developers add i18n metadata to any frontend strings their new features or changes modify * Using the new npm script `i18n-extract-from-source`, developers extract the i18n data from source code into `src/locale/messages.xlf` * After pushing the updated `src/locale/messages.xlf` to GitHub, the Transifex service will update its database from the new source data * Using the Transifex website UI, translators can work together to translate all the mempool frontend strings into their native languages * Using the new npm script `i18n-pull-from-transifex`, developers can pull in completed translations from Transifex, and commit them into git. This flow requires an API key from Transifex, which can be obtained at https://www.transifex.com/user/settings/api/ to be used with the python script installed by `pip install transifex-client` - after preparing these, run the npm script which will ask you for the API key the first time. When downloading is complete, you can test building the frontend, and if successful, commit the new strings files into git. This PR implements a new locale selector in the footer of the homepage dashboard, and includes WIP translations for the following languages: * Czech (cs) * German (de) * Japanese (ja) * Norwegian (nn) * Spanish (es) * Swedish (sv) * Ukrainian (uk) * Persian (fa) * Portugese (pt) * Turkish (tr) * Dutch (nl) * French (fr) * Chinese (zh) * Slovenian (sl) * Korean (ko) * Polish (pl) The user-agent's `Accept-Language` header is used to automatically detect their preferred language, which can be manually overriden by the pull-down selector, which saves their preference to a cookie, which is used by nginx to serve the correct HTML bundle to the user. Remaining tasks include adding i18n metadata for strings in the Bisq and Liquid frontend code, mouseover hover tooltip strings, hard-coded og metadata inside HTML templates, and many other places. This will be done in a separate PR. When upgrading to add i18n support, mempool instance operators must take care to install the new nginx.conf and nginx-mempool.conf files, and tweak for their specific site configuration. Fixes #81
2020-12-02 04:19:33 +09:00
</ng-template>