mirror of
https://github.com/ringtools/ringtools-web-v2.git
synced 2024-11-19 07:40:01 +01:00
Added fee policy popover
This commit is contained in:
Djuri Baars
parent
104de4ba40
commit
dd6cad0e75
@ -31,6 +31,7 @@
|
||||
"bootstrap": "^4.6.0",
|
||||
"bootstrap-icons": "^1.7.2",
|
||||
"d3": "^7.3.0",
|
||||
"highlight.js": "^11.4.0",
|
||||
"keycharm": "^0.4.0",
|
||||
"lz-string": "^1.4.4",
|
||||
"ng2-dragula": "^2.1.1",
|
||||
@ -55,7 +56,7 @@
|
||||
"@angular/compiler-cli": "~13.1.0",
|
||||
"@ngrx/schematics": "^13.0.2",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^17.0",
|
||||
"@types/node": "^17.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.9",
|
||||
"@typescript-eslint/parser": "^5.9",
|
||||
"eslint": "^8.2.0",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="col-md-8 participants">
|
||||
<h2>Ring participants
|
||||
<div class="btn-group btn-small small btn-group-toggle" ngbRadioGroup name="names"
|
||||
[(ngModel)]="viewMode" (ngModelChange)="viewChange($event)">
|
||||
[(ngModel)]="settings.viewMode" (ngModelChange)="viewChange($event)">
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" value="node"> Nodename
|
||||
</label>
|
||||
|
||||
@ -3,6 +3,7 @@ import { Store } from '@ngrx/store';
|
||||
import { timeHours } from 'd3';
|
||||
import { Observable } from 'rxjs';
|
||||
import { upsertNodeInfo } from 'src/app/actions/node-info.actions';
|
||||
import { setViewMode } from 'src/app/actions/setting.actions';
|
||||
import { NodeInfo } from 'src/app/models/node-info.model';
|
||||
import { NodeOwner } from 'src/app/models/node-owner.model';
|
||||
import { IRing } from 'src/app/models/ring.model';
|
||||
@ -57,7 +58,9 @@ export class OverviewComponent implements OnDestroy {
|
||||
this.lnData.channelSocket.emit('unsubscribe_all');
|
||||
}
|
||||
|
||||
viewChange(event: any) {}
|
||||
viewChange(event: any) {
|
||||
this.store.dispatch(setViewMode(event));
|
||||
}
|
||||
|
||||
downloadAsPng() {}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CommonModule, JsonPipe } from '@angular/common';
|
||||
import { FileExporterComponent } from './file-exporter/file-exporter.component';
|
||||
import { EditRingOrderComponent } from './edit-ring-order/edit-ring-order.component';
|
||||
import { DragulaModule } from 'ng2-dragula';
|
||||
@ -11,6 +11,7 @@ import { VisModule } from '../vis/vis.module';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { ParticipantRingComponent } from './participant-ring/participant-ring.component';
|
||||
import { ParticipantTableComponent } from './participant-table/participant-table.component';
|
||||
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
|
||||
|
||||
@ -23,7 +24,9 @@ import { ParticipantTableComponent } from './participant-table/participant-table
|
||||
ReorderParticipantsComponent,
|
||||
NodeConnectionsComponent
|
||||
],
|
||||
providers: [JsonPipe],
|
||||
imports: [
|
||||
NgbPopoverModule,
|
||||
HttpClientModule,
|
||||
VisModule,
|
||||
FormsModule,
|
||||
|
||||
@ -13,20 +13,23 @@
|
||||
<tbody>
|
||||
<ng-container *ngFor="let item of participants; let i = index">
|
||||
<tr [class.error]="item.channel_id && (!item.initiator_fee || !item.receiver_fee)">
|
||||
<ng-template #popTitle let-title="title">Node policy <strong>{{title}}</strong></ng-template>
|
||||
<ng-template #popContent let-value="value"><pre><code [innerHTML]="value"></code></pre></ng-template>
|
||||
|
||||
<th scope="row" [style.background-color]="getColor(i)" class="channelCol">{{ item[2] }}</th>
|
||||
<ng-template [ngIf]="settings.viewMode === 'tg'" [ngIfElse]="elseBlock">
|
||||
<td *ngIf="item[0]">{{ item[0].username_or_name }}</td>
|
||||
<td *ngIf="item[1]">{{ item[1].username_or_name }}</td>
|
||||
</ng-template>
|
||||
<ng-template #elseBlock>
|
||||
<td *ngIf="item.initiator" class="node_key"><span>{{ item.initiator?.node?.alias }}</span></td>
|
||||
<td *ngIf="item.receiver" class="node_key"><span>{{ item.receiver?.node?.alias }}</span></td>
|
||||
<td *ngIf="item[0]" class="node_key"><span>{{ item[0].nodename }}</span></td>
|
||||
<td *ngIf="item[1]" class="node_key"><span>{{ item[1].nodename }}</span></td>
|
||||
</ng-template>
|
||||
<td><span *ngIf="item[3]">{{ item[3][0].fee_base_msat }}</span></td>
|
||||
<td><span *ngIf="item[3]">{{ item[3][0].fee_rate_milli_msat }}</span>
|
||||
<td [ngbPopover]="popContent" [popoverTitle]="popTitle" #p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][0], item[0])"><span *ngIf="item[3]">{{ item[3][0].fee_base_msat }}</span></td>
|
||||
<td [ngbPopover]="popContent" [popoverTitle]="popTitle" #p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][0], item[0])"><span *ngIf="item[3]">{{ item[3][0].fee_rate_milli_msat }}</span>
|
||||
</td>
|
||||
<td><span *ngIf="item[3]">{{ item[3][1].fee_base_msat }}</span></td>
|
||||
<td><span *ngIf="item[3]">{{ item[3][1].fee_rate_milli_msat }}</span>
|
||||
<td [ngbPopover]="popContent" [popoverTitle]="popTitle" #p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][1], item[1])"><span *ngIf="item[3]">{{ item[3][1].fee_base_msat }}</span></td>
|
||||
<td [ngbPopover]="popContent" [popoverTitle]="popTitle" #p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][1], item[1])"><span *ngIf="item[3]">{{ item[3][1].fee_rate_milli_msat }}</span>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
@import "~highlight.js/styles/github-dark.css";
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, Sanitizer } from '@angular/core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { NodeOwner } from 'src/app/models/node-owner.model';
|
||||
@ -8,6 +8,14 @@ import { SettingState } from 'src/app/reducers/setting.reducer';
|
||||
import { selectSettings } from 'src/app/selectors/setting.selectors';
|
||||
import { colorScale } from 'src/app/utils/utils';
|
||||
import * as fromRoot from '../../reducers';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import json from 'highlight.js/lib/languages/json';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { JsonPipe } from '@angular/common';
|
||||
import { RoutingPolicy } from 'src/app/models/routing_policy.model';
|
||||
import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
hljs.registerLanguage('json', json);
|
||||
|
||||
@Component({
|
||||
selector: 'app-participant-table',
|
||||
@ -30,10 +38,15 @@ export class ParticipantTableComponent {
|
||||
|
||||
constructor(
|
||||
private store: Store<fromRoot.State>,
|
||||
private sanitizer: DomSanitizer,
|
||||
private jsonPipe: JsonPipe,
|
||||
popoverConfig: NgbPopoverConfig
|
||||
) {
|
||||
this.store.select(selectSettings).subscribe((settings: SettingState) => {
|
||||
this.settings = settings;
|
||||
});
|
||||
|
||||
popoverConfig.container = 'body';
|
||||
}
|
||||
|
||||
getColor(i: any) {
|
||||
@ -43,4 +56,21 @@ export class ParticipantTableComponent {
|
||||
getUsername(item: NodeOwner) {
|
||||
return item.pub_key;
|
||||
}
|
||||
|
||||
channelInfo(item:IRing) {
|
||||
console.log(hljs.highlight(this.jsonPipe.transform(item[3][0]), { language: 'json' }).value);
|
||||
|
||||
return this.sanitizer.bypassSecurityTrustHtml(hljs.highlight(this.jsonPipe.transform(item[3][0]), { language: 'json' }).value);
|
||||
}
|
||||
|
||||
routingPolicyPopover(popover: NgbPopover, policy: RoutingPolicy, nodeOwner: NodeOwner) {
|
||||
if (popover.isOpen()) {
|
||||
popover.close()
|
||||
} else {
|
||||
popover.open({
|
||||
title: `${nodeOwner.username_or_name}`,
|
||||
value: this.sanitizer.bypassSecurityTrustHtml(hljs.highlight(this.jsonPipe.transform(policy), { language: 'json' }).value)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,3 +8,4 @@
|
||||
|
||||
/* Dragula Drag & Drop */
|
||||
@import 'style/dragula.scss';
|
||||
@import "~highlight.js/styles/github-dark.css";
|
||||
12
yarn.lock
12
yarn.lock
@ -1848,11 +1848,16 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/lz-string/-/lz-string-1.3.34.tgz#69bfadde419314b4a374bf2c8e58659c035ed0a5"
|
||||
integrity sha512-j6G1e8DULJx3ONf6NdR5JiR2ZY3K3PaaqiEuKYkLQO0Czfi1AzrtjfnfCROyWGeDd5IVMKCwsgSmMip9OWijow==
|
||||
|
||||
"@types/node@*", "@types/node@>=10.0.0", "@types/node@^17.0":
|
||||
"@types/node@*", "@types/node@>=10.0.0":
|
||||
version "17.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.8.tgz#50d680c8a8a78fe30abe6906453b21ad8ab0ad7b"
|
||||
integrity sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==
|
||||
|
||||
"@types/node@^17.0.9":
|
||||
version "17.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.9.tgz#0b7f161afb5b1cc12518d29b2cdc7175d5490628"
|
||||
integrity sha512-5dNBXu/FOER+EXnyah7rn8xlNrfMOQb/qXnw4NQgLkCygKBKhdmF/CA5oXVOKZLBEahw8s2WP9LxIcN/oDDRgQ==
|
||||
|
||||
"@types/parse-json@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
|
||||
@ -4400,6 +4405,11 @@ hdr-histogram-percentiles-obj@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz#9409f4de0c2dda78e61de2d9d78b1e9f3cba283c"
|
||||
integrity sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==
|
||||
|
||||
highlight.js@^11.4.0:
|
||||
version "11.4.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
|
||||
integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
|
||||
|
||||
hosted-git-info@^4.0.1:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user