ringtools/ringtools-web-v2
1
0
Fork 0
mirror of https://github.com/ringtools/ringtools-web-v2.git synced 2024-11-18 23:30:01 +01:00
Code Issues Projects Releases Wiki Activity

Added advanced view with Min/max HTLC values

Browse Source
This commit is contained in:
Djuri Baars 2022-06-03 23:24:15 +02:00
parent f4f36c0041
commit f7ec35ab17
8 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/actions/setting.actions.ts
View File

@ -41,6 +41,11 @@ export const setUseShortChannelIds = createAction(
(useShortChannelIds: boolean) => ({useShortChannelIds})
);
export const setAdvancedView = createAction(
'[Setting] set Advanced View',
(advancedView: boolean) => ({advancedView})
);
export const setLocale = createAction(
'[Setting] set locale',
(locale: string) => ({locale})

6
src/app/components/overview/overview.component.html
View File

@ -20,8 +20,10 @@
<app-participant-table [participants]="ring"></app-participant-table>
<button (click)="downloadAsPng()" class="btn btn-primary" translate>Overview.DOWNLOAD_VISUAL</button>
&nbsp;
<small translate>Overview.RED_CHANNELS</small>
<br>
<small translate>Overview.RED_CHANNELS</small><br>
<small translate *ngIf="settings.advancedView">Overview.MIN_MAX_HTLC_IN_SATS</small>
</div>
</div>
</div>

16
src/app/components/settings/settings.component.html
View File

@ -35,16 +35,24 @@
<input class="form-check-input" type="checkbox" value="" id="showSrRofLogo" [(ngModel)]="showLogo"
(ngModelChange)="updateShowLogo($event)" [ngModelOptions]="{standalone: true}">
<label class="form-check-label" for="showSrRofLogo">
Show SR RoF logo
<label class="form-check-label" for="showSrRofLogo" translate>
Settings.TOGGLE_SHOW_LOGO
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" value="" id="useShortChanIds" [(ngModel)]="useShortChannelIds"
(ngModelChange)="updateUseShortChannelIds($event)" [ngModelOptions]="{standalone: true}" disabled>
<label class="form-check-label" for="useShortChanIds">
Use short channel IDs (broken)
<label class="form-check-label" for="useShortChanIds" translate>
Settings.TOGGLE_USE_SHORT_CHANID
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" value="" id="advancedView" [(ngModel)]="advancedView"
(ngModelChange)="updateAdvancedView($event)" [ngModelOptions]="{standalone: true}" >
<label class="form-check-label" for="advancedView" translate>
Settings.TOGGLE_SHOW_ADVANCED
</label>
</div>

7
src/app/components/settings/settings.component.ts
View File

@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
import { deleteNodeOwner, loadNodeOwners } from 'src/app/actions/node-owner.actions';
import {
loadRingSetting,
setAdvancedView,
setLocale,
setRingName,
setRingSize,
@ -46,6 +47,7 @@ export class SettingsComponent implements OnInit {
shareUrl: string = '';
showLogo: boolean = true;
useShortChannelIds: boolean = false;
advancedView: boolean = false;
settings!: SettingState;
@ -75,6 +77,7 @@ export class SettingsComponent implements OnInit {
this.showLogo = settings.showLogo;
this.useShortChannelIds = settings.useShortChannelIds;
this.advancedView = settings.advancedView
this.selectedLanguage = settings.locale
});
@ -238,6 +241,10 @@ export class SettingsComponent implements OnInit {
this.store.dispatch(setUseShortChannelIds(event));
}
updateAdvancedView(event: any) {
this.store.dispatch(setAdvancedView(event));
}
processRingname() {}
get1MlLink(node: any) {

2
src/app/layout/navigation/navigation.component.html
View File

@ -13,7 +13,7 @@
<ul class="navbar-nav">
<li routerLinkActive="active" *ngFor="let menuItem of links" class="nav-item" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="[menuItem.route]" class="nav-link" [translate]="menuItem.title">
{{menuItem.title}}
</a>
</li>
</ul>

39
src/app/partials/participant-table/participant-table.component.html
View File

@ -6,19 +6,25 @@
<th scope="col"><span translate>Overview.TH_NODE</span> 2</th>
<th scope="col">N1 <span translate>Overview.BASE_FEE</span></th>
<th scope="col">N1 <span translate>Overview.FEE_RATE</span></th>
<th scope="col" *ngIf="settings.advancedView">N1 <span translate>Overview.MIN_MAX_HTLC</span></th>
<th scope="col">N2 <span translate>Overview.BASE_FEE</span></th>
<th scope="col">N2 <span translate>Overview.FEE_RATE</span></th>
<th scope="col" *ngIf="settings.advancedView">N2 <span translate>Overview.MIN_MAX_HTLC</span></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of participants; let i = index">
<tr [class.error]="item[2] && (!item[3][0]|| !item[3][1] || item[3][0].disabled === true || item[3][1].disabled === true)">
<ng-template #popTitle let-title="title"><span translate>Overview.NODE_POLICY</span> <strong>{{title}}</strong></ng-template>
<tr
[class.error]="item[2] && (!item[3][0]|| !item[3][1] || item[3][0].disabled === true || item[3][1].disabled === true)">
<ng-template #popTitle let-title="title"><span translate>Overview.NODE_POLICY</span>
<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">{{ getChannelId(item[2]) }}</th>
<th scope="row" [style.background-color]="getColor(i)" class="channelCol">{{ getChannelId(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>
@ -30,22 +36,35 @@
<td [class.error]="item[3] && item[3][0] && item[3][0].disabled === true">
<div *ngIf="item[3] && item[3][0]" [ngbPopover]="popContent" [popoverTitle]="popTitle"
#p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][0], item[0])">
<span>{{ item[3][0].fee_base_msat }}</span></div>
<span>{{ item[3][0].fee_base_msat }}</span>
</div>
</td>
<td [class.error]="item[3] && item[3][0] && item[3][0].disabled === true">
<div *ngIf="item[3] && item[3][0]" [ngbPopover]="popContent" [popoverTitle]="popTitle"
#p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][0], item[0])">
<span>{{ item[3][0].fee_rate_milli_msat }}</span></div>
<span>{{ item[3][0].fee_rate_milli_msat }}</span>
</div>
</td>
<td *ngIf="settings.advancedView && item[3] && item[3][0]">
<span>{{ item[3][0].min_htlc / 1000 }} / {{ item[3][0].max_htlc_msat / 1000 }}</span>
</td>
<td [class.error]="item[3] && item[3][1] && item[3][1].disabled === true">
<div *ngIf="item[3] && item[3][1]" [ngbPopover]="popContent" [popoverTitle]="popTitle"
#p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][1], item[1])">
<span>{{ item[3][1].fee_base_msat }}</span>
</div>
</td>
<td [class.error]="item[3] && item[3][1] && item[3][1].disabled === true">
<div *ngIf="item[3] && item[3][1]" [ngbPopover]="popContent" [popoverTitle]="popTitle"
#p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][1], item[1])">
<span>{{ item[3][1].fee_base_msat }}</span></div>
<span>{{ item[3][1].fee_rate_milli_msat }}</span>
</div>
</td>
<td [class.error]="item[3] && item[3][1] && item[3][1].disabled === true">
<div *ngIf="item[3] && item[3][1]" [ngbPopover]="popContent" [popoverTitle]="popTitle"
#p1="ngbPopover" triggers="manual" (click)="routingPolicyPopover(p1, item[3][1], item[1])">
<span>{{ item[3][1].fee_rate_milli_msat }}</span></div>
<td *ngIf="settings.advancedView && item[3] && item[3][1]">
<span>{{ item[3][1].min_htlc / 1000 }} / {{ item[3][1].max_htlc_msat / 1000 }}</span>
</td>
</tr>
</ng-container>
</tbody>

16
src/app/reducers/setting.reducer.ts
View File

@ -10,6 +10,7 @@ export interface SettingState {
viewMode: string
showLogo: boolean
useShortChannelIds: boolean
advancedView: boolean
locale: string
ringLeader?: NodeOwner
}
@ -19,6 +20,7 @@ export const initialSettingState: SettingState = {
viewMode: 'tg',
showLogo: false,
useShortChannelIds: false,
advancedView: false,
locale: 'en-US',
ringSize: 0
};
@ -27,11 +29,11 @@ export const settingReducer = createReducer(
initialSettingState,
on(SettingActions.setRingName,
(state: SettingState, {ringName}) => {
return {...state, ringName: ringName }
return {...state, ringName }
}),
on(SettingActions.setRingLeader,
(state: SettingState, {ringLeader}) => {
return {...state, ringLeader: ringLeader }
return {...state, ringLeader }
}),
on(SettingActions.setRingSize,
(state: SettingState, {ringSize}) => {
@ -39,15 +41,19 @@ export const settingReducer = createReducer(
}),
on(SettingActions.setViewMode,
(state: SettingState, {viewMode}) => {
return {...state, viewMode: viewMode }
return {...state, viewMode }
}),
on(SettingActions.setShowLogo,
(state: SettingState, {showLogo}) => {
return {...state, showLogo: showLogo }
return {...state, showLogo }
}),
on(SettingActions.setUseShortChannelIds,
(state: SettingState, {useShortChannelIds}) => {
return {...state, useShortChannelIds: useShortChannelIds }
return {...state, useShortChannelIds }
}),
on(SettingActions.setAdvancedView,
(state: SettingState, {advancedView}) => {
return {...state, advancedView }
}),
on(SettingActions.setLocale,
(state: SettingState, {locale}) => {

2
src/assets/translations

@ -1 +1 @@
Subproject commit 20a7a6008af65d03e77329d63158623f73b31493
Subproject commit fae7559351c93a7f358537feb4bb61f0f6776cf5