mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2024-11-19 01:40:29 +01:00
ng Lint Fixes
This commit is contained in:
ShahanaFarooqui
parent
893fcd964b
commit
8501afe9b5
@ -22,8 +22,7 @@
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/all",
|
||||
"plugin:@angular-eslint/recommended",
|
||||
"plugin:@angular-eslint/recommended--extra",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
"plugin:@angular-eslint/recommended--extra"
|
||||
],
|
||||
"rules": {
|
||||
"deprecation/deprecation": "error",
|
||||
@ -188,10 +187,12 @@
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/template/all",
|
||||
"plugin:@angular-eslint/template/recommended"
|
||||
"plugin:@angular-eslint/template/recommended",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {
|
||||
"@angular-eslint/template/accessibility-elements-content": "off",
|
||||
"@angular-eslint/template/button-has-type": ["off"],
|
||||
"@angular-eslint/template/click-events-have-key-events": "off",
|
||||
"@angular-eslint/template/conditional-complexity": "off",
|
||||
"@angular-eslint/template/cyclomatic-complexity": "off",
|
||||
@ -204,4 +205,3 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
// https://eslint.org/docs/rules/
|
||||
1
frontend/258.00be382b52daa5c8.js
Normal file
1
frontend/258.00be382b52daa5c8.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
frontend/564.d7d237e6d65cd1f1.js
Normal file
1
frontend/564.d7d237e6d65cd1f1.js
Normal file
File diff suppressed because one or more lines are too long
1
frontend/636.c4ba818bf8417c96.js
Normal file
1
frontend/636.c4ba818bf8417c96.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,9 +10,9 @@
|
||||
<link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta i18n-content="" name="msapplication-TileColor" content="#da532c">
|
||||
<meta i18n-content="" name="theme-color" content="#ffffff">
|
||||
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.bd8d28882e5bae00.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.bd8d28882e5bae00.css"></noscript></head>
|
||||
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.3818de96604f2a1f.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.3818de96604f2a1f.css"></noscript></head>
|
||||
<body>
|
||||
<rtl-app></rtl-app>
|
||||
<script src="runtime.387504493589fa89.js" type="module"></script><script src="polyfills.b0802d8d65655abd.js" type="module"></script><script src="main.9d35e85b21682df2.js" type="module"></script>
|
||||
<script src="runtime.ca83eb75a9a0db5b.js" type="module"></script><script src="polyfills.b0802d8d65655abd.js" type="module"></script><script src="main.c0354e799971eaab.js" type="module"></script>
|
||||
|
||||
</body></html>
|
||||
File diff suppressed because one or more lines are too long
1
frontend/main.c0354e799971eaab.js
Normal file
1
frontend/main.c0354e799971eaab.js
Normal file
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
(()=>{"use strict";var e,v={},g={};function r(e){var n=g[e];if(void 0!==n)return n.exports;var t=g[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(n,t,f,o)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,f,o]=e[i],s=!0,d=0;d<t.length;d++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[d]))?t.splice(d--,1):(s=!1,o<a&&(a=o));if(s){e.splice(i--,1);var l=f();void 0!==l&&(n=l)}}return n}o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[t,f,o]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{258:"cbdcdbce98fcc969",267:"2689f72a6679e94b",564:"2634ef7577798453",636:"e3f5cbf8c7d0b85a"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,f,o,i)=>{if(e[t])e[t].push(f);else{var a,s;if(void 0!==o)for(var d=document.getElementsByTagName("script"),l=0;l<d.length;l++){var u=d[l];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==n+o){a=u;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+o),a.src=r.tu(t)),e[t]=[f];var c=(m,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(_=>_(b)),m)return m(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(f,o)=>{var i=r.o(e,f)?e[f]:void 0;if(0!==i)if(i)o.push(i[2]);else if(666!=f){var a=new Promise((u,c)=>i=e[f]=[u,c]);o.push(i[2]=a);var s=r.p+r.u(f),d=new Error;r.l(s,u=>{if(r.o(e,f)&&(0!==(i=e[f])&&(e[f]=void 0),i)){var c=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;d.message="Loading chunk "+f+" failed.\n("+c+": "+p+")",d.name="ChunkLoadError",d.type=c,d.request=p,i[1](d)}},"chunk-"+f,f)}else e[f]=0},r.O.j=f=>0===e[f];var n=(f,o)=>{var d,l,[i,a,s]=o,u=0;if(i.some(p=>0!==e[p])){for(d in a)r.o(a,d)&&(r.m[d]=a[d]);if(s)var c=s(r)}for(f&&f(o);u<i.length;u++)r.o(e,l=i[u])&&e[l]&&e[l][0](),e[l]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
|
||||
(()=>{"use strict";var e,v={},g={};function r(e){var n=g[e];if(void 0!==n)return n.exports;var t=g[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(n,t,f,d)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,f,d]=e[i],s=!0,o=0;o<t.length;o++)(!1&d||a>=d)&&Object.keys(r.O).every(b=>r.O[b](t[o]))?t.splice(o--,1):(s=!1,d<a&&(a=d));if(s){e.splice(i--,1);var l=f();void 0!==l&&(n=l)}}return n}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[t,f,d]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{258:"00be382b52daa5c8",267:"8fee459f8c85a156",564:"d7d237e6d65cd1f1",636:"c4ba818bf8417c96"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,f,d,i)=>{if(e[t])e[t].push(f);else{var a,s;if(void 0!==d)for(var o=document.getElementsByTagName("script"),l=0;l<o.length;l++){var u=o[l];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==n+d){a=u;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+d),a.src=r.tu(t)),e[t]=[f];var c=(m,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(_=>_(b)),m)return m(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(f,d)=>{var i=r.o(e,f)?e[f]:void 0;if(0!==i)if(i)d.push(i[2]);else if(666!=f){var a=new Promise((u,c)=>i=e[f]=[u,c]);d.push(i[2]=a);var s=r.p+r.u(f),o=new Error;r.l(s,u=>{if(r.o(e,f)&&(0!==(i=e[f])&&(e[f]=void 0),i)){var c=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;o.message="Loading chunk "+f+" failed.\n("+c+": "+p+")",o.name="ChunkLoadError",o.type=c,o.request=p,i[1](o)}},"chunk-"+f,f)}else e[f]=0},r.O.j=f=>0===e[f];var n=(f,d)=>{var o,l,[i,a,s]=d,u=0;if(i.some(p=>0!==e[p])){for(o in a)r.o(a,o)&&(r.m[o]=a[o]);if(s)var c=s(r)}for(f&&f(d);u<i.length;u++)r.o(e,l=i[u])&&e[l]&&e[l][0](),e[l]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
|
||||
1
frontend/styles.3818de96604f2a1f.css
Normal file
1
frontend/styles.3818de96604f2a1f.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,13 +1,13 @@
|
||||
<div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[settings.themeColor | lowercase, settings.themeMode | lowercase]">
|
||||
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary rtl-top-toolbar">
|
||||
<div>
|
||||
<button *ngIf="flgLoggedIn" class="top-toolbar-icon mr-1" mat-icon-button (click)="sideNavToggle()" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" matTooltipPosition="right">
|
||||
<button *ngIf="flgLoggedIn" class="top-toolbar-icon mr-1" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" (click)="sideNavToggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<button *ngIf="!smallScreen && flgLoggedIn" mat-icon-button (click)="flgSidenavPinned = !flgSidenavPinned" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" matTooltipPosition="right">
|
||||
<button *ngIf="!smallScreen && flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" (click)="flgSidenavPinned = !flgSidenavPinned">
|
||||
<svg class="top-toolbar-icon icon-pinned" viewBox="0 0 32 32">
|
||||
<path fill="currentColor" *ngIf="!flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
||||
<path fill="currentColor" *ngIf="flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
|
||||
<path *ngIf="!flgSidenavPinned" fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
||||
<path *ngIf="flgSidenavPinned" fill="currentColor" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@ -20,16 +20,16 @@
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav [perfectScrollbar] [opened]="flgSideNavOpened && flgLoggedIn" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'" #sideNavigation class="sidenav mat-elevation-z6">
|
||||
<rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)" fxFlex="100"></rtl-side-navigation>
|
||||
<mat-sidenav #sideNavigation class="sidenav mat-elevation-z6" [perfectScrollbar] [opened]="flgSideNavOpened && flgLoggedIn" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'">
|
||||
<rtl-side-navigation fxFlex="100" (ChildNavClicked)="onNavigationClicked($event)"></rtl-side-navigation>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content [perfectScrollbar] #sideNavContent>
|
||||
<mat-sidenav-content #sideNavContent [perfectScrollbar]>
|
||||
<div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<router-outlet #outlet="outlet"></router-outlet>
|
||||
</div>
|
||||
</mat-sidenav-content>>
|
||||
</mat-sidenav-container>
|
||||
<div class="rtl-spinner" *ngIf="!settings.themeColor">
|
||||
<div *ngIf="!settings.themeColor" class="rtl-spinner">
|
||||
<mat-spinner color="accent"></mat-spinner>
|
||||
<h4>Loading RTL...</h4>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faSearch" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faSearch"></fa-icon>
|
||||
<span class="page-title">Graph Lookups</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div fxLayout="column" *ngIf="lookupResult" class="mt-1">
|
||||
<div *ngIf="lookupResult" fxLayout="column" class="mt-1">
|
||||
<mat-divider></mat-divider>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row">
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large">
|
||||
<div fxLayout="column">
|
||||
<h3 class="page-title font-bold-500" *ngIf="!node1_match">Node 1</h3>
|
||||
<h3 class="page-title font-bold-500" *ngIf="node1_match">Node 1 (Your Node)</h3>
|
||||
<h3 *ngIf="!node1_match" class="page-title font-bold-500">Node 1</h3>
|
||||
<h3 *ngIf="node1_match" class="page-title font-bold-500">Node 1 (Your Node)</h3>
|
||||
</div>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div fxLayout="column" fxFlex="20" class="my-1">
|
||||
@ -84,8 +84,8 @@
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large">
|
||||
<div>
|
||||
<h3 class="page-title font-bold-500" *ngIf="!node2_match">Node 2</h3>
|
||||
<h3 class="page-title font-bold-500" *ngIf="node2_match">Node 2 (Your Node)</h3>
|
||||
<h3 *ngIf="!node2_match" class="page-title font-bold-500">Node 2</h3>
|
||||
<h3 *ngIf="node2_match" class="page-title font-bold-500">Node 2 (Your Node)</h3>
|
||||
</div>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div fxLayout="column" fxFlex="20" class="my-1">
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap">
|
||||
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100" #form="ngForm">
|
||||
<form #form="ngForm" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100">
|
||||
<div fxFlex="100" fxLayoutAlign="start end">
|
||||
<mat-radio-group color="primary" [(ngModel)]="selectedFieldId" (change)="onSelectChange($event)" tabindex="1" name="lookupField">
|
||||
<mat-radio-button *ngFor="let lookupField of lookupFields" [value]="lookupField.id" [checked]="selectedFieldId === lookupField.id" class="mr-4">
|
||||
<mat-radio-group color="primary" tabindex="1" name="lookupField" [(ngModel)]="selectedFieldId" (change)="onSelectChange($event)">
|
||||
<mat-radio-button *ngFor="let lookupField of lookupFields" class="mr-4" [value]="lookupField.id" [checked]="selectedFieldId === lookupField.id">
|
||||
{{lookupField.name}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<input matInput name="lookupKey" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" (change)="clearLookupValue()" [(ngModel)]="lookupKey" tabindex="2" required #key>
|
||||
<input #key matInput name="lookupKey" tabindex="2" required [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" [(ngModel)]="lookupKey" (change)="clearLookupValue()">
|
||||
<mat-error *ngIf="!lookupKey">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" fxFlex="100" class="mt-1">
|
||||
@ -18,14 +18,14 @@
|
||||
<button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onLookup()">Lookup</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" *ngIf="flgSetLookupValue" class="w-100 mt-2">
|
||||
<div *ngIf="flgSetLookupValue" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100 mt-2">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<span class="page-title font-bold-500">{{lookupFields[selectedFieldId].name}} Details</span>
|
||||
</div>
|
||||
<div [ngSwitch]="selectedFieldId" fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<span fxFlex="100" *ngSwitchCase="0"><div *ngIf="nodeLookupValue.nodeid !== ''; else errorBlock"><rtl-cln-node-lookup [lookupResult]="nodeLookupValue"></rtl-cln-node-lookup></div></span>
|
||||
<span fxFlex="100" *ngSwitchCase="1"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span>
|
||||
<span fxFlex="100" *ngSwitchDefault><h3>Error! Unable to find details!</h3></span>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" [ngSwitch]="selectedFieldId">
|
||||
<span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeid !== ''; else errorBlock"><rtl-cln-node-lookup [lookupResult]="nodeLookupValue"></rtl-cln-node-lookup></div></span>
|
||||
<span *ngSwitchCase="1" fxFlex="100"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span>
|
||||
<span *ngSwitchDefault> fxFlex="100"<h3>Error! Unable to find details!</h3></span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="column" *ngIf="lookupResult" class="mt-1">
|
||||
<mat-divider [inset]="true" class="mb-1"></mat-divider>
|
||||
<div *ngIf="lookupResult" fxLayout="column" class="mt-1">
|
||||
<mat-divider class="mb-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="30">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
|
||||
@ -10,7 +10,7 @@
|
||||
<span class="foreground-secondary-text w-100">{{lookupResult?.nodeid}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="30">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Last Update</h4>
|
||||
@ -18,38 +18,38 @@
|
||||
</div>
|
||||
<div fxFlex="70">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Features</h4>
|
||||
<span class="foreground-secondary-text" *ngFor="let featureDescription of featureDescriptions">{{featureDescription}}</span>
|
||||
<span *ngFor="let featureDescription of featureDescriptions" class="foreground-secondary-text">{{featureDescription}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="column">
|
||||
<h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
|
||||
<div [perfectScrollbar] fxLayout="row" fxFlex="100" class="table-container">
|
||||
<table mat-table #table [dataSource]="addresses" matSort>
|
||||
<div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<table #table mat-table matSort [dataSource]="addresses">
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.type}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Type</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.type}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.address}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.address}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="port">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Port</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.port}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Port</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.port}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let address">
|
||||
<td *matCellDef="let address" mat-cell>
|
||||
<span fxLayoutAlign="end center">
|
||||
<button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns;" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<div fxLayout="column" fxFlex="100" class="padding-gap">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()" #queryRoutesForm="ngForm">
|
||||
<form #queryRoutesForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()">
|
||||
<div fxFlex="100" class="alert alert-warn">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
|
||||
</div>
|
||||
<mat-form-field fxFlex="69" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Destination Pubkey" name="destinationPubkey" [(ngModel)]="destinationPubkey" tabindex="1" required #destPubkey="ngModel">
|
||||
<input #destPubkey="ngModel" matInput placeholder="Destination Pubkey" name="destinationPubkey" tabindex="1" required [(ngModel)]="destinationPubkey">
|
||||
<mat-error *ngIf="!destinationPubkey">Destination pubkey is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="29" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Amount (Sats)" [(ngModel)]="amount" name="amount" tabindex="2" type="number" [step]="1000" [min]="0" required>
|
||||
<input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount">
|
||||
<mat-error *ngIf="!amount">Amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="mt-1">
|
||||
@ -19,55 +19,55 @@
|
||||
</form>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container mt-2 mb-1">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faRoute" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faRoute"></fa-icon>
|
||||
<span class="page-title">Transaction Route</span>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] class="table-container mb-6">
|
||||
<div class="table-container mb-6" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="qrHops" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<table #table mat-table matSort [dataSource]="qrHops" [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
|
||||
<td mat-cell *matCellDef="let hop">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
|
||||
<td *matCellDef="let hop" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{hop?.id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let hop">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let hop" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{hop?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel</th>
|
||||
<td mat-cell *matCellDef="let hop">{{hop?.channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel</th>
|
||||
<td *matCellDef="let hop" mat-cell>{{hop?.channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="direction">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Direction</th>
|
||||
<td mat-cell *matCellDef="let hop">{{hop?.direction}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Direction</th>
|
||||
<td *matCellDef="let hop" mat-cell>{{hop?.direction}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="delay">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Delay</th>
|
||||
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center">{{hop?.delay | number}} </span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Delay</th>
|
||||
<td *matCellDef="let hop" mat-cell><span fxLayoutAlign="end center">{{hop?.delay | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center">{{hop?.msatoshi/1000 | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let hop" mat-cell><span fxLayoutAlign="end center">{{hop?.msatoshi/1000 | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let hop" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let hop" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onHopClick(hop, $event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="column" fxFlex="100"fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
|
||||
<div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxFlex="100" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="column" fxLayoutAlign="space-between stretch"fxFlex="100">
|
||||
<div fxLayout="column" fxFlex="9" fxLayoutAlign="end start">
|
||||
<span class="dashboard-capacity-header this-channel-capacity">Total Capacity</span>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90"><strong class="font-weight-900 mr-5px">Local:</strong>{{channelBalances?.localBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
<mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90">
|
||||
<fa-icon [icon]="faBalanceScale" class="mr-3px" matTooltip="Balance Score"></fa-icon>
|
||||
<fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
|
||||
({{channelBalances?.balancedness || 0 | number}})
|
||||
</mat-hint>
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channelBalances?.remoteBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
@ -13,15 +13,15 @@
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
|
||||
<div class="channels-capacity-scroll" [perfectScrollbar]>
|
||||
<div fxLayout="column" fxFlex="100" *ngIf="activeChannels && activeChannels.length > 0; else noChannelBlock">
|
||||
<div *ngIf="activeChannels && activeChannels.length > 0; else noChannelBlock" fxLayout="column"fxFlex="100">
|
||||
<div *ngFor="let channel of activeChannels" class="mt-2">
|
||||
<a [routerLink]="['../connections/channels/open']" [state]="{filter: channel.id}" class="dashboard-capacity-header" matTooltip="{{channel.alias || channel.id}}" matTooltipDisabled="{{(channel.alias || channel.id).length < 26}}">
|
||||
<a class="dashboard-capacity-header" [routerLink]="['../connections/channels/open']" [state]="{filter: channel.id}" matTooltip="{{channel.alias || channel.id}}" matTooltipDisabled="{{(channel.alias || channel.id).length < 26}}">
|
||||
{{(channel.alias || channel.id) | slice:0:24}}{{(channel.alias || channel.id).length > 25 ? '...' : ''}}
|
||||
</a>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Local:</strong>{{channel.msatoshi_to_us/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
<mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90 color-primary">
|
||||
<fa-icon [icon]="faBalanceScale" class="color-primary mr-3px" matTooltip="Balance Score"></fa-icon>
|
||||
<fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
|
||||
({{channel.balancedness || 0 | number}})
|
||||
</mat-hint>
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channel.msatoshi_to_them/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
@ -34,7 +34,7 @@
|
||||
<ng-template #noChannelBlock>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" class="mt-1 w-100">
|
||||
No channels available.
|
||||
<button mat-stroked-button color="primary" (click)="goToChannels()" tabindex="1">Open Channel</button>
|
||||
<button mat-stroked-button color="primary" tabindex="1" (click)="goToChannels()">Open Channel</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #errorBlock>
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100"></mat-progress-bar>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start">
|
||||
<div fxLayout="column" fxFlex="100" class="w-100" *ngIf="activeChannels && activeChannels.length > 0; else noChannelBlock">
|
||||
<div fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start" [perfectScrollbar]>
|
||||
<div *ngIf="activeChannels && activeChannels.length > 0; else noChannelBlock" fxLayout="column" fxFlex="100"class="w-100">
|
||||
<div *ngFor="let channel of activeChannels" class="mt-2">
|
||||
<a [routerLink]="['../connections/channels/open']" [state]="{filter: channel.id}" class="dashboard-capacity-header" matTooltip="{{channel.alias || channel.id}}" matTooltipDisabled="{{(channel.alias || channel.id).length < 26}}">
|
||||
<a class="dashboard-capacity-header" [routerLink]="['../connections/channels/open']" [state]="{filter: channel.id}" matTooltip="{{channel.alias || channel.id}}" matTooltipDisabled="{{(channel.alias || channel.id).length < 26}}">
|
||||
{{(channel.alias || channel.id) | slice:0:24}}{{(channel.alias || channel.id).length > 25 ? '...' : ''}}
|
||||
</a>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
@ -24,7 +24,7 @@
|
||||
<ng-template #noChannelBlock>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" class="mt-1">
|
||||
No channels available.
|
||||
<button *ngIf="direction === 'Out'" mat-stroked-button color="primary" (click)="goToChannels()" tabindex="1">Open Channel</button>
|
||||
<button *ngIf="direction === 'Out'" mat-stroked-button color="primary" tabindex="1" (click)="goToChannels()">Open Channel</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #errorBlock>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<div fxLayout="column" *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard">
|
||||
<div *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard"fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="page-title-container mb-2">
|
||||
<fa-icon [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile"></fa-icon>
|
||||
<span class="page-title">{{apiCallStatusNodeInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : 'Error! Please check the server connection.'}}</span>
|
||||
</div>
|
||||
<mat-grid-list cols="10" gutterSize="20px" [rowHeight]="operatorCardHeight">
|
||||
<mat-grid-tile *ngFor="let card of operatorCards" [colspan]="card.cols" [rowspan]="card.rows" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-grid-tile *ngFor="let card of operatorCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" [matMenuTriggerFor]="menuOperator" aria-label="Toggle menu">
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuOperator">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuOperator="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
<button mat-menu-item *ngFor="let goToOption of card.goToOptions; index as i" (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
|
||||
<button *ngIf="card.id === 'capacity'" (click)="onsortChannelsBy()" mat-menu-item>Sort By {{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}</button>
|
||||
<button *ngIf="card.id === 'capacity'" mat-menu-item (click)="onsortChannelsBy()">Sort By {{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-card-title>
|
||||
@ -30,19 +30,19 @@
|
||||
(card.id === 'capacity' && (apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR)) ||
|
||||
(card.id === 'fee' && (apiCallStatusFees.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusFHistory.status === apiCallStatusEnum.ERROR)) ||
|
||||
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR))}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'balance' && (apiCallStatusBalance.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'capacity' && (apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'fee' && (apiCallStatusFees.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED))"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-cln-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
|
||||
<rtl-cln-channel-capacity-info fxFlex="100" *ngSwitchCase="'capacity'" [sortBy]="sortField" [channelBalances]="channelBalances" [activeChannels]="activeChannelsCapacity" [errorMessage]="errorMessages[4] + ' ' + errorMessages[3]"></rtl-cln-channel-capacity-info>
|
||||
<rtl-cln-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[4] + ' ' + errorMessages[5]"></rtl-cln-fee-info>
|
||||
<rtl-cln-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-channel-status-info>
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
|
||||
<rtl-cln-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [activeChannels]="activeChannelsCapacity" [errorMessage]="errorMessages[4] + ' ' + errorMessages[3]"></rtl-cln-channel-capacity-info>
|
||||
<rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[4] + ' ' + errorMessages[5]"></rtl-cln-fee-info>
|
||||
<rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-channel-status-info>
|
||||
<h3 *ngSwitchDefault>Error! Unable to find information!</h3>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
@ -52,20 +52,20 @@
|
||||
</div>
|
||||
<ng-template #merchantDashboard>
|
||||
<div fxLayout="row" fxLayoutAlign="start end" class="page-title-container mb-2">
|
||||
<fa-icon [icon]="faSmile" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faSmile"></fa-icon>
|
||||
<span class="page-title">Welcome {{information.alias}}! Your node is up and running.</span>
|
||||
</div>
|
||||
<mat-grid-list cols="6" gutterSize="20px" [rowHeight]="merchantCardHeight">
|
||||
<mat-grid-tile *ngFor="let card of merchantCards" [colspan]="card.cols" [rowspan]="card.rows" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-grid-tile *ngFor="let card of merchantCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card" [ngClass]="{'p-0': card.id === 'transactions'}">
|
||||
<mat-card-header *ngIf="card.id !== 'transactions'">
|
||||
<mat-card-title fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" [matMenuTriggerFor]="menuMerchant" aria-label="Toggle menu">
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuMerchant">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuMerchant="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
@ -79,23 +79,23 @@
|
||||
'error-border': (card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'balance' && (apiCallStatusBalance.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR)) ||
|
||||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusChannels.status === apiCallStatusEnum.ERROR)}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'balance' && (apiCallStatusBalance.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusChannels.status === apiCallStatusEnum.INITIATED)"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-cln-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information"></rtl-cln-node-info>
|
||||
<rtl-cln-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
|
||||
<rtl-cln-channel-liquidity-info fxFlex="100" *ngSwitchCase="'inboundLiq'" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
|
||||
<rtl-cln-channel-liquidity-info fxFlex="100" *ngSwitchCase="'outboundLiq'" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
|
||||
<span fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start" *ngSwitchCase="'transactions'">
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information"></rtl-cln-node-info>
|
||||
<rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
|
||||
<rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
|
||||
<rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
|
||||
<span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
|
||||
<mat-tab-group fxLayout="column" class="w-100 dashboard-tabs-group">
|
||||
<mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'"></rtl-cln-lightning-invoices-table></mat-tab>
|
||||
<mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'"></rtl-cln-lightning-payments></mat-tab>
|
||||
<mat-tab [disabled]="true">
|
||||
<ng-template mat-tab-label>
|
||||
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menuTransactions" aria-label="Toggle menu">
|
||||
<button mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuTransactions">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuTransactions="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="dashboard-info-title">Chain</h4>
|
||||
<span class="overflow-wrap dashboard-info-value" *ngFor="let chain of chains">{{chain}}</span>
|
||||
<span *ngFor="let chain of chains" class="overflow-wrap dashboard-info-value">{{chain}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faBullhorn" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faBullhorn"></fa-icon>
|
||||
<span class="page-title">Liquidity Ads</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content class="padding-gap-large">
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #formAsk="ngForm">
|
||||
<form #formAsk="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<div fxFlex="100" fxLayout="row" class="alert alert-warn">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>Ads should be supplemented with additional research of the node, before buying liquidity.</span>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="30">
|
||||
<span class="page-title">
|
||||
Liquidity Ask
|
||||
<mat-icon [matTooltip]="askTooltipMsg" matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary">info_outline</mat-icon>
|
||||
<mat-icon matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary" [matTooltip]="askTooltipMsg">info_outline</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field fxFlex="34">
|
||||
<input autoFocus matInput placeholder="Channel Amount (Sats)" name="channelAmount" [(ngModel)]="channelAmount" (keyup)="onCalculateOpeningFee()" tabindex="1" type="number" step="10000" required>
|
||||
<input autoFocus matInput placeholder="Channel Amount (Sats)" name="channelAmount" tabindex="1" type="number" step="10000" required [(ngModel)]="channelAmount" (keyup)="onCalculateOpeningFee()">
|
||||
<mat-error *ngIf="!channelAmount">Channel amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="34">
|
||||
<input matInput placeholder="Channel Opening Fee Rate (Sats/vByte)" name="channel_opening_feeRate" [(ngModel)]="channel_opening_feeRate" (keyup)="onCalculateOpeningFee()" type="number" step="10" tabindex="2" required>
|
||||
<input matInput placeholder="Channel Opening Fee Rate (Sats/vByte)" name="channel_opening_feeRate" type="number" step="10" tabindex="2" required [(ngModel)]="channel_opening_feeRate" (keyup)="onCalculateOpeningFee()">
|
||||
<mat-error *ngIf="!channel_opening_feeRate">Channel opening fee rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -48,26 +48,26 @@
|
||||
</form> -->
|
||||
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-2">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
|
||||
<span class="page-title">Liquidity Providing Peers</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="listNodesCallStatus === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="liquidityNodes" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table matSort [dataSource]="liquidityNodes" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span fxLayout="row" fxLayoutAlign="start center" class="ellipsis-child">
|
||||
{{lqNode?.alias}}
|
||||
@ -81,20 +81,20 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeid">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{lqNode?.nodeid}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="last_timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Last Announcement At</th>
|
||||
<td mat-cell *matCellDef="let lqNode">{{((lqNode?.last_timestamp * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Last Announcement At</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>{{((lqNode?.last_timestamp * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="compact_lease">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Compact Lease</th>
|
||||
<td mat-cell *matCellDef="let lqNode">{{ lqNode?.option_will_fund?.compact_lease }}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Compact Lease</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>{{ lqNode?.option_will_fund?.compact_lease }}</td>
|
||||
</ng-container>
|
||||
<!-- <ng-container matColumnDef="capacity_channels">
|
||||
<th mat-header-cell *matHeaderCellDef> Capacity/Channels</th>
|
||||
@ -103,35 +103,35 @@
|
||||
</td>
|
||||
</ng-container> -->
|
||||
<ng-container matColumnDef="lease_fee">
|
||||
<th mat-header-cell *matHeaderCellDef> Lease Fee</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell> Lease Fee</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
{{lqNode?.option_will_fund?.lease_fee_base_msat/1000 | number:'1.0-0'}} Sats + {{(lqNode?.option_will_fund?.lease_fee_basis/100) | number:'1.2-2'}}%
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="routing_fee">
|
||||
<th mat-header-cell *matHeaderCellDef> Routing Fee</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell> Routing Fee</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
{{lqNode?.option_will_fund?.channel_fee_max_base_msat/1000 | number:'1.0-0'}} Sats + {{lqNode?.option_will_fund?.channel_fee_max_proportional_thousandths * 1000 | number:'1.0-0'}} ppm
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channel_opening_fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Channel Opening Fee (Sats)</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Channel Opening Fee (Sats)</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
<span fxLayoutAlign="end center">
|
||||
{{lqNode.channel_opening_fee | number:'1.0-0'}}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="funding_weight">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Funding Weight</th>
|
||||
<td mat-cell *matCellDef="let lqNode">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Funding Weight</th>
|
||||
<td *matCellDef="let lqNode" mat-cell>
|
||||
<span fxLayoutAlign="end center">
|
||||
{{lqNode?.option_will_fund?.funding_weight | number:'1.0-0'}}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -139,7 +139,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let lqNode" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let lqNode" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -152,18 +152,18 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_lqNode">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.COMPLETED">No node with liquidity.</p>
|
||||
<p *ngIf="(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.INITIATED">Getting nodes with liquidity...</p>
|
||||
<p *ngIf="(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_lqNode']" [ngClass]="{'display-none': liquidityNodes?.data && liquidityNodes?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_lqNode']" mat-footer-row [ngClass]="{'display-none': liquidityNodes?.data && liquidityNodes?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -4,24 +4,24 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">{{alertTitle}}</span>
|
||||
</div>
|
||||
<button tabindex="6" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="6" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="column" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="column">
|
||||
<ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock"></ng-container>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
|
||||
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
||||
<input autoFocus matInput [(ngModel)]="requestedAmount" (keyup)="calculateFee()" placeholder="Requested Amount" type="number" [step]="10000" [min]="0" tabindex="1" required name="ramount" #ramount="ngModel">
|
||||
<input #ramount="ngModel" autoFocus matInput placeholder="Requested Amount" type="number" tabindex="1" required name="ramount" [step]="10000" [min]="0" [(ngModel)]="requestedAmount" (keyup)="calculateFee()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="ramount.errors?.required">Requested amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="feeRate" placeholder="Fee Rate" (keyup)="calculateFee()" type="number" [step]="10" [min]="0" tabindex="2" required name="feerate" #feeRt="ngModel">
|
||||
<input #feeRt="ngModel" matInput placeholder="Fee Rate" type="number" tabindex="2" required name="feerate" [step]="10" [min]="0" [(ngModel)]="feeRate" (keyup)="calculateFee()">
|
||||
<span matSuffix> Sats/vByte </span>
|
||||
<mat-error *ngIf="feeRt.errors?.required">Fee rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="localAmount" placeholder="Local Amount" type="number" [step]="10000" [min]="20000" [max]="totalBalance" tabindex="3" required name="lamount" #lamount="ngModel">
|
||||
<input #lamount="ngModel" matInput placeholder="Local Amount" type="number" tabindex="3" required name="lamount" [step]="10000" [min]="20000" [max]="totalBalance" [(ngModel)]="localAmount">
|
||||
<mat-hint>Remaining Bal: {{totalBalance - ((localAmount) ? localAmount : 0) | number}}</mat-hint>
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="lamount.errors?.required">Local amount is required.</mat-error>
|
||||
@ -32,8 +32,8 @@
|
||||
<div fxFlex="100" class="alert alert-info mt-4">
|
||||
<span>Total cost to lease {{node.channel_opening_fee | number}} (Sats)</span>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-2" *ngIf="channelConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-2">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
|
||||
<ng-template #nodeDetailsExpansionBlock>
|
||||
<mat-expansion-panel class="flat-expansion-panel mt-1 mb-2" *ngIf="node" expanded="false">
|
||||
<mat-expansion-panel *ngIf="node" class="flat-expansion-panel mt-1 mb-2" expanded="false">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<span>Node: </span><strong class="font-weight-900">{{node?.alias || node?.nodeid}}</strong>
|
||||
@ -70,21 +70,21 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<h4 fxFlex="100" class="font-bold-500 mb-1">Addresses</h4>
|
||||
<div class="table-container">
|
||||
<table mat-table #table [dataSource]="node.addresses" matSort class="overflow-auto">
|
||||
<table #table mat-table matSort class="overflow-auto" [dataSource]="node.addresses">
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.type}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Type</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.type}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.address }}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.address }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="port">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Port</th>
|
||||
<td mat-cell *matCellDef="let address">{{address?.port}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Port</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address?.port}}</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns;" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="stretch" class="h-100" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="stretch"class="h-100">
|
||||
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start center" class="dashboard-info-title">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" class="mb-4">
|
||||
<mat-grid-list *ngIf="selNode.userPersona === userPersonaEnum.OPERATOR" cols="6" rowHeight="100px">
|
||||
<mat-grid-tile class="node-grid-tile" *ngFor="let card of nodeCardsOperator" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-grid-tile *ngFor="let card of nodeCardsOperator" class="node-grid-tile" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<div fxLayout="column" fxLayoutAlign="stretch start" fxFlex="100" class="h-100">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="w-100">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="page-title-container pl-2">
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,21 +18,21 @@
|
||||
(card.id === 'feeRatesKB' && apiCallStatusPerKB.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.ERROR)}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'fee' && (apiCallStatusFees.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'feeRatesKB' && apiCallStatusPerKB.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED)"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-cln-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
|
||||
<rtl-cln-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" class="h-100" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" class="h-100" [errorMessage]="errorMessages[6]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" [feeRates]="feeRatesPerKW" class="h-100" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
|
||||
<rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[6]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -41,11 +41,11 @@
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<mat-grid-list *ngIf="selNode.userPersona === userPersonaEnum.MERCHANT" cols="6" rowHeight="100px">
|
||||
<mat-grid-tile class="node-grid-tile" *ngFor="let card of nodeCardsMerchant" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-grid-tile *ngFor="let card of nodeCardsMerchant" class="node-grid-tile" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<div fxLayout="column" fxLayoutAlign="stretch start" fxFlex="100" class="h-100">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="w-100">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="page-title-container pl-15px">
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,21 +59,21 @@
|
||||
(card.id === 'feeRatesKB' && apiCallStatusPerKB.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.ERROR)}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'fee' && (apiCallStatusFees.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
|
||||
(card.id === 'feeRatesKB' && apiCallStatusPerKB.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED)"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-cln-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
|
||||
<rtl-cln-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" class="h-100" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" class="h-100" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" [feeRates]="feeRatesPerKW" class="h-100" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
|
||||
<rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
|
||||
<rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
|
||||
<rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="stretch" class="h-100" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100" fxLayoutAlign="stretch"class="h-100">
|
||||
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start center" class="dashboard-info-title">
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<div fxLayout="row" fxLayoutAlign="space-between end" fxLayoutAlign.gt-sm="start end">
|
||||
<mat-form-field fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end" class="mr-2">
|
||||
<mat-select [(ngModel)]="selectedAddressType" placeholder="Address Type" name="address_type" tabindex="1">
|
||||
<mat-select placeholder="Address Type" name="address_type" tabindex="1" [(ngModel)]="selectedAddressType">
|
||||
<mat-option *ngFor="let addressType of addressTypes" [value]="addressType">
|
||||
{{addressType.addressTp}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="mt-2">
|
||||
<button mat-flat-button color="primary" (click)="onGenerateAddress()" tabindex="2" class="top-minus-15px">Generate Address</button>
|
||||
<button mat-flat-button color="primary" tabindex="2" class="top-minus-15px" (click)="onGenerateAddress()">Generate Address</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,49 +4,49 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">{{sweepAll ? 'Sweep All Funds' : 'Send Funds'}}</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="row wrap" fxLayoutAlign="space-between start" fxFlex="100" *ngIf="!sweepAll; else sweepAllBlock;" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()" #form="ngForm">
|
||||
<form *ngIf="!sweepAll; else sweepAllBlock;" #form="ngForm" fxLayout="row wrap"fxLayoutAlign="space-between start" fxFlex="100" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()">
|
||||
<mat-form-field fxFlex="55">
|
||||
<input matInput autoFocus [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="address" required #address="ngModel">
|
||||
<input #address="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="address" required [(ngModel)]="transaction.address">
|
||||
<mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput [(ngModel)]="transaction.satoshis" placeholder="Amount" name="amount" [type]="flgUseAllBalance ? 'text' : 'number'" [step]="100" [min]="0" tabindex="2" required #amount="ngModel" [disabled]="flgUseAllBalance">
|
||||
<input #amount="ngModel" matInput placeholder="Amount" name="amount" tabindex="2" required [type]="flgUseAllBalance ? 'text' : 'number'" [step]="100" [min]="0" [disabled]="flgUseAllBalance" [(ngModel)]="transaction.satoshis">
|
||||
<mat-hint *ngIf="flgUseAllBalance">Amount replaced by UTXO balance</mat-hint>
|
||||
<span matSuffix>{{selAmountUnit}} </span>
|
||||
<mat-error *ngIf="!transaction.satoshis">{{amountError}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="10" fxLayoutAlign="start end">
|
||||
<mat-select [value]="selAmountUnit" tabindex="3" required name="amountUnit" (selectionChange)="onAmountUnitChange($event)" [disabled]="flgUseAllBalance">
|
||||
<mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" [disabled]="flgUseAllBalance" (selectionChange)="onAmountUnitChange($event)">
|
||||
<mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
|
||||
<div fxFlex="48" fxLayoutAlign="space-between end">
|
||||
<mat-form-field [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'" fxLayoutAlign="start center">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null" [disabled]="flgMinConf">
|
||||
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
|
||||
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
|
||||
{{feeRateType.feeRateType}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxFlex="48" fxLayoutAlign="end center">
|
||||
<input matInput [(ngModel)]="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" [step]="0.1" [min]="0" tabindex="4" #custFeeRate="ngModel" [required]="selFeeRate === 'customperkb' && !flgMinConf">
|
||||
<input #custFeeRate="ngModel" matInput placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate">
|
||||
<mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
|
||||
<mat-form-field fxFlex="98">
|
||||
<input matInput [(ngModel)]="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" [step]="1" [min]="0" tabindex="8" #blocks="ngModel" [required]="flgMinConf" [disabled]="!flgMinConf">
|
||||
<input #blocks="ngModel" matInput placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
|
||||
<mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap" *ngIf="isCompatibleVersion">
|
||||
<div *ngIf="isCompatibleVersion" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
|
||||
<mat-expansion-panel fxLayout="column" fxFlex="100" class="flat-expansion-panel mt-2" expanded="false" (closed)="onAdvancedPanelToggle(true)" (opened)="onAdvancedPanelToggle(false)">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
@ -56,13 +56,13 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="35" fxLayoutAlign="start end">
|
||||
<mat-select tabindex="8" placeholder="Coin Selection" (selectionChange)="onUTXOSelectionChange($event)" [(value)]="selUTXOs" multiple>
|
||||
<mat-select tabindex="8" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
|
||||
<mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger>
|
||||
<mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxFlex="60" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle tabindex="9" color="primary" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1">
|
||||
<mat-slide-toggle tabindex="9" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()">
|
||||
Use selected UTXOs balance
|
||||
</mat-slide-toggle>
|
||||
<mat-icon matTooltip="Use selected UTXOs balance as the amount to be sent. Final amount sent will be less the mining fee." matTooltipPosition="above" class="info-icon">info_outline</mat-icon>
|
||||
@ -72,8 +72,8 @@
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"></div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="sendFundError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
||||
@ -88,9 +88,9 @@
|
||||
|
||||
<ng-template #sweepAllBlock>
|
||||
<div fxLayout="column">
|
||||
<mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-vertical-stepper #stepper [linear]="true" (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-step *ngIf="!appConfig.sso.rtlSSO" [stepControl]="passwordFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="passwordFormGroup" fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1" [formGroup]="passwordFormGroup">
|
||||
<ng-template matStepLabel>{{passwordFormLabel}}</ng-template>
|
||||
<div fxLayout="row">
|
||||
<mat-form-field fxFlex="100">
|
||||
@ -104,7 +104,7 @@
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="sendFundFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="sendFundFormGroup" fxLayout="column" class="my-1 pr-1">
|
||||
<form fxLayout="column" class="my-1 pr-1" [formGroup]="sendFundFormGroup">
|
||||
<ng-template matStepLabel disabled="true">{{sendFundFormLabel}}</ng-template>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<mat-form-field fxFlex="100">
|
||||
@ -113,7 +113,7 @@
|
||||
</mat-form-field>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
|
||||
<div fxFlex="48" fxLayoutAlign="space-between end">
|
||||
<mat-form-field [fxFlex]="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value ? '48' : '100'" fxLayoutAlign="start center">
|
||||
<mat-form-field fxLayoutAlign="start center" [fxFlex]="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value ? '48' : '100'">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" formControlName="selFeeRate">
|
||||
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
|
||||
{{feeRateType.feeRateType}}
|
||||
@ -121,14 +121,14 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center">
|
||||
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" [step]="0.1" [min]="0" tabindex="4">
|
||||
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0">
|
||||
<mat-error *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
|
||||
<mat-form-field fxFlex="98">
|
||||
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" [step]="1" [min]="0" tabindex="8" [required]="sendFundFormGroup.controls.flgMinConf.value">
|
||||
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="sendFundFormGroup.controls.flgMinConf.value">
|
||||
<mat-error *ngIf="sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -140,15 +140,15 @@
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="confirmFormGroup">
|
||||
<form [formGroup]="confirmFormGroup" fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1">
|
||||
<form fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1" [formGroup]="confirmFormGroup">
|
||||
<ng-template matStepLabel>{{confirmFormLabel}}</ng-template>
|
||||
<div fxLayout="column">
|
||||
<div fxFlex="100" class="w-100 alert alert-warn">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mt-1 mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mt-1 mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>You are about to sweep all funds from RTL. Are you sure?</span>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="sendFundError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
@ -159,7 +159,7 @@
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
||||
<button mat-button color="primary" tabindex="12" type="button" [mat-dialog-close]="false" default>{{flgValidated ? 'Close' : 'Cancel'}}</button>
|
||||
<button mat-button color="primary" tabindex="12" type="button" default [mat-dialog-close]="false">{{flgValidated ? 'Close' : 'Cancel'}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
|
||||
<span class="page-title">On-chain Balance</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x mb-4">
|
||||
@ -10,14 +10,14 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faExchangeAlt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
|
||||
<span class="page-title">On-chain Transactions</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link?.link" (click)="activeLink = link?.link" [routerLink]="[link?.link, selectedTable?.name]">{{link?.name}}</div>
|
||||
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
@ -27,7 +27,7 @@
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
|
||||
<rtl-cln-utxo-tables [selectedTableIndex]="selectedTable?.id" (selectedTableIndexChange)="onSelectedTableIndexChanged($event)" fxLayout="row" fxFlex="100"></rtl-cln-utxo-tables>
|
||||
<rtl-cln-utxo-tables fxLayout="row" fxFlex="100" [selectedTableIndex]="selectedTable?.id" (selectedTableIndexChange)="onSelectedTableIndexChanged($event)"></rtl-cln-utxo-tables>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
<mat-tab-group [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{numUtxos}}" matBadgeOverlap="false" class="tab-badge">UTXOs</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numUtxos}}">UTXOs</span>
|
||||
</ng-template>
|
||||
<rtl-cln-on-chain-utxos [numDustUTXOs]="numDustUtxos" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT" fxLayout="row" fxFlex="100"></rtl-cln-on-chain-utxos>
|
||||
<rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT"></rtl-cln-on-chain-utxos>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{numDustUtxos}}" matBadgeOverlap="false" class="tab-badge">Dust UTXOs</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numDustUtxos}}">Dust UTXOs</span>
|
||||
</ng-template>
|
||||
<rtl-cln-on-chain-utxos [numDustUTXOs]="numDustUtxos" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT" fxLayout="row" fxFlex="100"></rtl-cln-on-chain-utxos>
|
||||
<rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT"></rtl-cln-on-chain-utxos>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
@ -3,83 +3,83 @@
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<div [perfectScrollbar] class="table-container" fxFlex="100">
|
||||
<div class="table-container" fxFlex="100" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="listUTXOs" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table matSort [dataSource]="listUTXOs" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="is_dust">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Dust/Nondust"></th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Dust/Nondust"></th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span *ngIf="numDustUTXOs > 0 && !isDustUTXO && utxo.value < dustAmount; else emptySpace" matTooltip="Risk of dust attack" matTooltipPosition="right">
|
||||
<mat-icon fxLayoutAlign="start center" color="warn" class="small-icon">warning</mat-icon>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span *ngIf="utxo.status === 'confirmed'" class="dot green" matTooltip="Confirmed" matTooltipPosition="right"></span>
|
||||
<span *ngIf="utxo.status !== 'confirmed'" class="dot yellow" matTooltip="{{utxo.status | titlecase}}" matTooltipPosition="right"></span>
|
||||
<span *ngIf="utxo.status !== 'confirmed'" class="dot yellow" matTooltipPosition="right" matTooltip="{{utxo.status | titlecase}}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="txid">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Transaction ID</th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{utxo.txid}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{utxo.address}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="scriptpubkey">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Script Pubkey</th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Script Pubkey</th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{utxo.scriptpubkey}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="output">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Output</th>
|
||||
<td mat-cell *matCellDef="let utxo"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Output</th>
|
||||
<td *matCellDef="let utxo" mat-cell><span fxLayoutAlign="end center">
|
||||
{{utxo?.output | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="value">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Value (Sats)</th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<span fxLayoutAlign="end center" *ngIf="utxo.value > 0 || utxo.value === 0">{{utxo.value | number}}</span>
|
||||
<span fxLayoutAlign="end center" class="red" *ngIf="utxo.value < 0">({{utxo.value * -1 | number}})</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Value (Sats)</th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span *ngIf="utxo.value > 0 || utxo.value === 0" fxLayoutAlign="end center">{{utxo.value | number}}</span>
|
||||
<span *ngIf="utxo.value < 0" fxLayoutAlign="end center" class="red">({{utxo.value * -1 | number}})</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="blockheight">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Blockheight</th>
|
||||
<td mat-cell *matCellDef="let utxo"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Blockheight</th>
|
||||
<td *matCellDef="let utxo" mat-cell><span fxLayoutAlign="end center">
|
||||
{{utxo?.blockheight | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="reserved">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Reserved</th>
|
||||
<td mat-cell *matCellDef="let utxo">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Reserved</th>
|
||||
<td *matCellDef="let utxo" mat-cell>
|
||||
<span>{{utxo.reserved ? 'Yes' : 'No'}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -87,22 +87,22 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onUTXOClick(utxo, $event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let utxo" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onUTXOClick(utxo, $event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_utxo">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No utxos available.</p>
|
||||
<p *ngIf="(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting utxos...</p>
|
||||
<p *ngIf="(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_utxo']" [ngClass]="{'display-none': listUTXOs?.data && listUTXOs?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_utxo']" mat-footer-row [ngClass]="{'display-none': listUTXOs?.data && listUTXOs?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -106,10 +106,18 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (this.utxos && this.utxos.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
|
||||
setTimeout(() => {
|
||||
if (this.isDustUTXO) {
|
||||
if (this.dustUtxos && this.dustUtxos.length > 0) {
|
||||
this.loadUTXOsTable(this.dustUtxos);
|
||||
}
|
||||
} else {
|
||||
if (this.utxos && this.utxos.length > 0) {
|
||||
this.loadUTXOsTable(this.utxos);
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
onUTXOClick(selUtxo: UTXO, event: any) {
|
||||
const reorderedUTXO = [
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Bump Fee</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="column">
|
||||
<div fxLayout="column" class="bordered-box mb-1 p-2">
|
||||
<p fxLayoutAlign="start center" class="pb-1 word-break">Bump fee for transaction id: {{bumpFeeChannel?.funding_txid}}
|
||||
<fa-icon class="ml-1" [icon]="faCopy" matSuffix rtlClipboard [payload]="bumpFeeChannel?.funding_txid" (copied)="onCopyID($event)" matTooltip="Copy transaction ID"></fa-icon>
|
||||
<fa-icon class="ml-1" matSuffix rtlClipboard matTooltip="Copy transaction ID" [icon]="faCopy" [payload]="bumpFeeChannel?.funding_txid" (copied)="onCopyID($event)"></fa-icon>
|
||||
</p>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxFlex="100" class="alert alert-info">
|
||||
<fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle"></fa-icon>
|
||||
<span fxLayout="column" fxFlex="100">Bumping fee on pending open channels is an advanced feature, attempt it only if you are familiar with the functionality of Bitcoin transactions.
|
||||
<div>Before attempting fee bump ensure the following:</div>
|
||||
<div class="pl-1">1: Use a Bitcoin block explorer to ensure that channel opening transaction is not confirmed.</div>
|
||||
@ -26,24 +26,24 @@
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="49">
|
||||
<input autoFocus matInput [(ngModel)]="outputIndex" placeholder="Output Index" type="number" [step]="1" [min]="0" tabindex="1" required name="outputIdx" #outputIdx="ngModel">
|
||||
<input #outputIdx="ngModel" autoFocus matInput placeholder="Output Index" type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
|
||||
<mat-error *ngIf="outputIdx.errors?.required">Output Index required.</mat-error>
|
||||
<mat-error *ngIf="outputIdx.errors?.pendingChannelOutputIndex">Invalid index value.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="fees" placeholder="Fees (Sats/vByte)"
|
||||
type="number" name="fees" [step]="1" [min]="0" required tabindex="4" #fee="ngModel">
|
||||
<input #fee="ngModel" matInput placeholder="Fees (Sats/vByte)"
|
||||
type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees">
|
||||
<mat-error *ngIf="!fees">Fees is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="bumpFeeError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="bumpFeeError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{bumpFeeError}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="end center">
|
||||
<button mat-button color="primary" type="reset" class="mr-1" (click)="resetData()" tabindex="5" default>Clear</button>
|
||||
<button mat-button color="primary" type="reset" class="mr-1" tabindex="5" default (click)="resetData()">Clear</button>
|
||||
<button mat-button color="primary" type="submit" tabindex="6" (click)="onBumpFee()">{{bumpFeeError !== '' ? 'Retry Bump Fee' : 'Bump Fee'}}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div fxFlex="100">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
|
||||
<span class="page-title">Channel Information</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
|
||||
<div fxLayout="column">
|
||||
@ -19,21 +19,21 @@
|
||||
<span class="foreground-secondary-text">{{channel.alias}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
|
||||
<span class="foreground-secondary-text">{{channel.channel_id}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
|
||||
<span class="foreground-secondary-text">{{channel.id}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="25">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">mSatoshi to Us</h4>
|
||||
@ -52,7 +52,7 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.state}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="25">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Our Reserve (Sats)</h4>
|
||||
@ -71,7 +71,7 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.private ? 'Yes' : 'No'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div *ngIf="showAdvanced">
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
@ -79,10 +79,10 @@
|
||||
<span class="foreground-secondary-text">{{channel.funding_txid}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center" fxFlex="100">
|
||||
<button mat-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="1" class="mr-1">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
|
||||
<button mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
|
||||
@ -3,102 +3,102 @@
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<div [perfectScrollbar] fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100">
|
||||
<table mat-table #table [dataSource]="channels" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100" [perfectScrollbar]>
|
||||
<table #table mat-table matSort [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="private">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private"></th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
|
||||
<span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="short_channel_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Short Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.short_channel_id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channel_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.channel_id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="funding_txid">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Funding Transaction ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="connected">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Connected</th>
|
||||
<td mat-cell *matCellDef="let channel">{{(channel?.connected) ? 'Connected' : 'Disconnected'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Connected</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{(channel?.connected) ? 'Connected' : 'Disconnected'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="our_channel_reserve_satoshis">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.our_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="their_channel_reserve_satoshis">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.their_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_total">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Total (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_total/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="spendable_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Spendable (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Spendable (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.spendable_msatoshi/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_to_us">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_to_them">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balancedness">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Balance Score</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div fxLayout="row">
|
||||
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness || 0 | number}}</mat-hint>
|
||||
</div>
|
||||
@ -106,7 +106,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -115,7 +115,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -128,17 +128,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_peer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No peers connected. Add a peer in order to open a channel.</p>
|
||||
<p *ngIf="numPeers>0 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No channel available.</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting channels...</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_peer']" mat-footer-row [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -3,97 +3,97 @@
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<div [perfectScrollbar] fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100">
|
||||
<table mat-table #table [dataSource]="channels" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100" [perfectScrollbar]>
|
||||
<table #table mat-table matSort [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="private">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private"></th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
|
||||
<span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channel_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.channel_id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="funding_txid">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Funding Transaction ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="connected">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Connected</th>
|
||||
<td mat-cell *matCellDef="let channel">{{(channel?.connected) ? 'Connected' : 'Disconnected'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Connected</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{(channel?.connected) ? 'Connected' : 'Disconnected'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
|
||||
<td mat-cell *matCellDef="let channel" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">{{CLNChannelPendingState[channel?.state]}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>State</th>
|
||||
<td *matCellDef="let channel" mat-cell [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">{{CLNChannelPendingState[channel?.state]}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="our_channel_reserve_satoshis">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.our_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="their_channel_reserve_satoshis">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.their_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_total">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Total (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_total/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="spendable_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Spendable (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Spendable (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.spendable_msatoshi/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_to_us">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_to_them">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -101,29 +101,29 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
<mat-option (click)="onChannelClick(channel, $event)">View Info</mat-option>
|
||||
<mat-option (click)="onChannelClose(channel)" *ngIf="isCompatibleVersion && (channel.state === 'CHANNELD_SHUTTING_DOWN' || channel.state === 'CLOSINGD_SIGEXCHANGE' || (!channel.connected && channel.state === 'CHANNELD_NORMAL'))">Close Channel</mat-option>
|
||||
<mat-option (click)="onBumpFee(channel)" *ngIf="channel.state === 'CHANNELD_AWAITING_LOCKIN'">Bump Fee</mat-option>
|
||||
<mat-option *ngIf="isCompatibleVersion && (channel.state === 'CHANNELD_SHUTTING_DOWN' || channel.state === 'CLOSINGD_SIGEXCHANGE' || (!channel.connected && channel.state === 'CHANNELD_NORMAL'))" (click)="onChannelClose(channel)">Close Channel</mat-option>
|
||||
<mat-option *ngIf="channel.state === 'CHANNELD_AWAITING_LOCKIN'" (click)="onBumpFee(channel)">Bump Fee</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_peer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No peers connected. Add a peer in order to open a channel.</p>
|
||||
<p *ngIf="numPeers>0 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending/inactive channel available.</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending/inactive channels...</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_peer']" mat-footer-row [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxLayout="row">
|
||||
<button mat-flat-button color="primary" (click)="onOpenChannel()" type="submit" tabindex="1">Open Channel</button>
|
||||
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
|
||||
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{openChannels}}" matBadgeOverlap="false" class="tab-badge">Open</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{openChannels}}">Open</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{pendingChannels}}" matBadgeOverlap="false" class="tab-badge">Pending/Inactive</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{pendingChannels}}">Pending/Inactive</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">{{alertTitle}}</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()">
|
||||
<div fxLayout="column">
|
||||
<mat-form-field fxFlex="100" *ngIf="!peer && peers && peers.length > 0">
|
||||
<input type="text" placeholder="Peer Alias" aria-label="Peers" matInput [formControl]="selectedPeer" (change)="onSelectedPeerChanged()" [matAutocomplete]="auto" tabindex="1" required>
|
||||
<mat-form-field *ngIf="!peer && peers && peers.length > 0" fxFlex="100">
|
||||
<input type="text" placeholder="Peer Alias" aria-label="Peers" matInput tabindex="1" required [formControl]="selectedPeer" [matAutocomplete]="auto" (change)="onSelectedPeerChanged()">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedPeerChanged()">
|
||||
<mat-option *ngFor="let peer of filteredPeers | async" [value]="peer">{{peer.alias ? peer.alias : peer.id ? peer.id : ''}}</mat-option>
|
||||
</mat-autocomplete>
|
||||
@ -22,14 +22,14 @@
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="70" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" [step]="1000" [min]="1" [max]="totalBalance" tabindex="1" required name="amount" #amount="ngModel" [disabled]="flgUseAllBalance">
|
||||
<input #amount="ngModel" matInput placeholder="Amount" type="number" tabindex="1" required name="amount" [step]="1000" [min]="1" [max]="totalBalance" [disabled]="flgUseAllBalance" [(ngModel)]="fundingAmount">
|
||||
<mat-hint>Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}{{flgUseAllBalance ? '. Amount replaced by UTXO balance' : ''}}</mat-hint>
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="amount.errors?.required || !fundingAmount">Amount is required.</mat-error>
|
||||
<mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxFlex="25" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle tabindex="2" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
|
||||
<mat-slide-toggle tabindex="2" color="primary" name="isPrivate" [(ngModel)]="isPrivate">Private Channel</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<mat-expansion-panel class="flat-expansion-panel mt-2" expanded="false" (closed)="onAdvancedPanelToggle(true)" (opened)="onAdvancedPanelToggle(false)">
|
||||
@ -41,35 +41,35 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
|
||||
<div fxFlex="54" fxLayoutAlign="space-between end">
|
||||
<mat-form-field [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'" fxLayoutAlign="start center">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null" [disabled]="flgMinConf">
|
||||
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
|
||||
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
|
||||
{{feeRateType.feeRateType}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxFlex="48" fxLayoutAlign="end center">
|
||||
<input matInput [(ngModel)]="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" [step]="0.1" [min]="0" tabindex="4" #custFeeRate="ngModel" [required]="selFeeRate === 'customperkb' && !flgMinConf">
|
||||
<input #custFeeRate="ngModel" matInput placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate">
|
||||
<mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="42" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
|
||||
<mat-form-field fxFlex="98">
|
||||
<input matInput [(ngModel)]="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" [step]="1" [min]="0" tabindex="8" #blocks="ngModel" [required]="flgMinConf" [disabled]="!flgMinConf">
|
||||
<input #blocks="ngModel" matInput placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
|
||||
<mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap" *ngIf="isCompatibleVersion">
|
||||
<div *ngIf="isCompatibleVersion" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
|
||||
<mat-form-field fxFlex="54" fxLayoutAlign="start end">
|
||||
<mat-select tabindex="6" placeholder="Coin Selection" (selectionChange)="onUTXOSelectionChange($event)" [(value)]="selUTXOs" multiple>
|
||||
<mat-select tabindex="6" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
|
||||
<mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger>
|
||||
<mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxFlex="42" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle tabindex="7" color="primary" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1">
|
||||
<mat-slide-toggle tabindex="7" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()">
|
||||
Use selected UTXOs balance
|
||||
</mat-slide-toggle>
|
||||
<mat-icon matTooltip="Use selected UTXOs balance as the amount to be sent. Final amount sent will be less the mining fee." matTooltipPosition="before" class="info-icon">info_outline</mat-icon>
|
||||
@ -78,8 +78,8 @@
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="channelConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
|
||||
@ -92,7 +92,7 @@
|
||||
</div>
|
||||
|
||||
<ng-template #peerDetailsExpansionBlock>
|
||||
<mat-expansion-panel class="flat-expansion-panel my-1" *ngIf="peer" expanded="false">
|
||||
<mat-expansion-panel *ngIf="peer" class="flat-expansion-panel my-1" expanded="false">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<span>Peer: </span><strong class="font-weight-900">{{peer?.alias || peer?.id}}</strong>
|
||||
|
||||
@ -4,20 +4,20 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Connect to a new peer</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<div fxLayout="column">
|
||||
<mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-vertical-stepper #stepper [linear]="true" (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="peerFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="peerFormGroup">
|
||||
<ng-template matStepLabel>{{peerFormLabel}}</ng-template>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
|
||||
<mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="peerConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{peerConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
@ -26,12 +26,12 @@
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="channelFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="channelFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mb-1" (ngSubmit)="onOpenChannel()">
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mb-1" [formGroup]="channelFormGroup" (ngSubmit)="onOpenChannel()">
|
||||
<ng-template matStepLabel disabled="true">{{channelFormLabel}}</ng-template>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
|
||||
<mat-form-field fxFlex="60" fxLayoutAlign="start end">
|
||||
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" [step]="1000" tabindex="1" required>
|
||||
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" tabindex="1" required [step]="1000">
|
||||
<mat-hint>Remaining Bal: {{totalBalance - ((channelFormGroup.controls.fundingAmount.value) ? channelFormGroup.controls.fundingAmount.value : 0)}}</mat-hint>
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.required">Amount is required.</mat-error>
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
|
||||
<div fxFlex="60" fxLayoutAlign="space-between end">
|
||||
<mat-form-field [fxFlex]="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value ? '48' : '100'" fxLayoutAlign="start center">
|
||||
<mat-form-field fxLayoutAlign="start center" [fxFlex]="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value ? '48' : '100'">
|
||||
<mat-select tabindex="4" placeholder="Fee Rate" formControlName="selFeeRate">
|
||||
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
|
||||
{{feeRateType.feeRateType}}
|
||||
@ -52,21 +52,21 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center">
|
||||
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" [step]="0.1" [min]="0" tabindex="4">
|
||||
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0">
|
||||
<mat-error *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="35" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-checkbox fxFlex="2" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
|
||||
<mat-form-field fxFlex="98">
|
||||
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" [step]="1" [min]="0" tabindex="8" [required]="channelFormGroup.controls.flgMinConf.value">
|
||||
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="channelFormGroup.controls.flgMinConf.value">
|
||||
<mat-error *ngIf="channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="channelConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{channelConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
@ -76,7 +76,7 @@
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
||||
<button mat-button color="primary" tabindex="12" type="button" [mat-dialog-close]="false" default>{{newlyAddedPeer?.id ? 'Do It Later' : 'Close'}}</button>
|
||||
<button mat-button color="primary" tabindex="12" type="button" default [mat-dialog-close]="false">{{newlyAddedPeer?.id ? 'Do It Later' : 'Close'}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
|
||||
<span class="page-title">On-chain Balance</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x mb-4">
|
||||
@ -10,7 +10,7 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
|
||||
<span class="page-title">Connections</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
@ -19,12 +19,12 @@
|
||||
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{activeChannels}}" matBadgeOverlap="false" class="tab-badge">Channels</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{activePeers}}" matBadgeOverlap="false" class="tab-badge">Peers</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activePeers}}">Peers</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
@ -1,60 +1,60 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="row" #peersForm="ngForm">
|
||||
<form #peersForm="ngForm" fxLayout="row">
|
||||
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onConnectPeer({})">Add Peer</button>
|
||||
</form>
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
|
||||
<span class="page-title">Connected Peers</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="peers" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table matSort [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="connected">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Connected"></th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Connected"></th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<span *ngIf="peer?.connected" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="!peer?.connected" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{peer?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{peer?.id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="netaddr">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Network Address</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Network Address</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child" *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
|
||||
<span *ngFor="let addr of peer?.netaddr; last as isLast" class="ellipsis-child">{{addr}}<span *ngIf="!isLast">,<br></span></span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -62,7 +62,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let peer" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -75,17 +75,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_peer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No connected peer.</p>
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting peers...</p>
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_peer']" mat-footer-row [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartBar" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartBar"></fa-icon>
|
||||
<span class="page-title">Reports</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
|
||||
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
|
||||
<div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
|
||||
<mat-radio-group class="my-1" color="primary" name="selReportBy" [(ngModel)]="selReportBy" (change)="onSelReportByChange()" fxFlex="100" fxLayoutAlign="start start">
|
||||
<mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start start" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
|
||||
<span class="mr-2">Report By: </span>
|
||||
<mat-radio-button class="mr-2" tabindex="1" value="{{reportBy.FEES}}">Fees</mat-radio-button>
|
||||
<mat-radio-button tabindex="2" value="{{reportBy.EVENTS}}">Events</mat-radio-button>
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout.gt-xs="column" fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.gt-xs="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="100" class="alert alert-warn mt-1">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>Maximum 1,000 failed transactions only.</span>
|
||||
</div>
|
||||
<div fxFlex="100">
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="errorMessage === ''" [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="failedForwardingEvents" fxFlex="100" matSort class="overflow-auto">
|
||||
<table #table mat-table fxFlex="100" matSort class="overflow-auto" [dataSource]="failedForwardingEvents">
|
||||
<ng-container matColumnDef="received_time">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Received Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="resolved_time">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Resolved Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Resolved Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.in_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.in_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.out_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.out_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (mSats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.fee | number:'1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (mSats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.fee | number:'1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -75,21 +75,21 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let fhEvent" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onFailedEventClick(fhEvent)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!failedForwardingEvents?.data || failedForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No failed transaction available.</p>
|
||||
<p *ngIf="(!failedForwardingEvents?.data || failedForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting failed transactions...</p>
|
||||
<p *ngIf="(!failedForwardingEvents?.data || failedForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': failedForwardingEvents?.data && failedForwardingEvents?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_event']" mat-footer-row [ngClass]="{'display-none': failedForwardingEvents?.data && failedForwardingEvents?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator *ngIf="errorMessage === ''" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="errorMessage === ''" [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="forwardingHistoryEvents" fxFlex="100" matSort class="overflow-auto">
|
||||
<table #table mat-table fxFlex="100" matSort class="overflow-auto" [dataSource]="forwardingHistoryEvents">
|
||||
<ng-container matColumnDef="received_time">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Received Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="resolved_time">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Resolved Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Resolved Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.in_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.in_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.out_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.out_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="payment_hash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.payment_hash}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (mSat)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.fee | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (mSat)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.fee | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -77,21 +77,21 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let fhEvent" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onForwardingEventClick(fhEvent,$event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No forwarding history available.</p>
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting forwarding history...</p>
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_event']" mat-footer-row [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator *ngIf="errorMessage === ''" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,69 +1,69 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout.gt-xs="column" fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.gt-xs="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="100" class="alert alert-warn mt-1">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>Maximum 1,000 local failed transactions only.</span>
|
||||
</div>
|
||||
<div fxFlex="100">
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="errorMessage === ''" [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="failedLocalForwardingEvents" fxFlex="100" matSort class="overflow-auto">
|
||||
<table #table mat-table fxFlex="100" matSort class="overflow-auto" [dataSource]="failedLocalForwardingEvents">
|
||||
<ng-container matColumnDef="received_time">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Received Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.in_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.in_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.out_channel}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.out_channel}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="out_channel_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="in_msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="style">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Style</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.style}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Style</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.style}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="failreason">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fail Reason</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{CLNFailReason[fhEvent?.failreason]}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Fail Reason</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{CLNFailReason[fhEvent?.failreason]}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -71,21 +71,21 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let fhEvent" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onFailedLocalEventClick(fhEvent)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!failedLocalForwardingEvents?.data || failedLocalForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No failed transaction available.</p>
|
||||
<p *ngIf="(!failedLocalForwardingEvents?.data || failedLocalForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting failed transactions...</p>
|
||||
<p *ngIf="(!failedLocalForwardingEvents?.data || failedLocalForwardingEvents?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': failedLocalForwardingEvents?.data && failedLocalForwardingEvents?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_event']" mat-footer-row [ngClass]="{'display-none': failedLocalForwardingEvents?.data && failedLocalForwardingEvents?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator *ngIf="errorMessage === ''" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-md="row" fxFlex="100" fxLayoutAlign="space-between stretch" class="page-sub-title-container mt-2">
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS, 'mt-1': screenSize === screenSizeEnum.SM}">
|
||||
@ -15,51 +15,51 @@
|
||||
</mat-form-field> -->
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableIn [dataSource]="routingPeersIncoming" matSort class="overflow-auto incoming-table">
|
||||
<table #tableIn mat-table matSort class="overflow-auto incoming-table" [dataSource]="routingPeersIncoming">
|
||||
<ng-container matColumnDef="channel_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer.channel_id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Events</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer?.total_amount/1000 | number:rPeer?.total_amount < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer?.total_amount/1000 | number:rPeer?.total_amount < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer?.total_fee/1000 | number:rPeer?.total_fee < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer?.total_fee/1000 | number:rPeer?.total_fee < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_incoming_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No incoming routing peer available.</p>
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting incoming routing peers...</p>
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': routingPeersIncoming?.data && routingPeersIncoming?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_incoming_event']" mat-footer-row [ngClass]="{'display-none': routingPeersIncoming?.data && routingPeersIncoming?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator #paginatorIn [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="end stretch">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}">
|
||||
@ -75,50 +75,50 @@
|
||||
</mat-form-field> -->
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableOut [dataSource]="routingPeersOutgoing" matSort class="overflow-auto outgoing-table">
|
||||
<table #tableOut mat-table matSort class="overflow-auto outgoing-table" [dataSource]="routingPeersOutgoing">
|
||||
<ng-container matColumnDef="channel_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer.channel_id}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Events</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer?.total_amount/1000 | number:rPeer?.total_amount < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer?.total_amount/1000 | number:rPeer?.total_amount < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer?.total_fee/1000 | number:rPeer?.total_fee < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer?.total_fee/1000 | number:rPeer?.total_fee < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_outgoing_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No outgoing routing peer available.</p>
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting outgoing routing peers...</p>
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': routingPeersOutgoing?.data && routingPeersOutgoing?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_outgoing_event']" mat-footer-row [ngClass]="{'display-none': routingPeersOutgoing?.data && routingPeersOutgoing?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
<mat-paginator #paginatorOut [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div fxLayout="column" class="mb-2">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faMapSigns" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faMapSigns"></fa-icon>
|
||||
<span class="page-title">Routing</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
|
||||
@ -8,7 +8,7 @@
|
||||
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="row" fxFlex="100">
|
||||
<nav mat-tab-nav-bar fxFlex="100" [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar fxFlex="100">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faUserCheck" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUserCheck"></fa-icon>
|
||||
<span class="page-title">Sign/Verify Message</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<mat-form-field fxLayout="row" fxFlex="100" fxLayoutAlign="start end">
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="1" placeholder="Message to sign" required tabindex="1" (keyup)="onMessageChange()" name="message"></textarea>
|
||||
<textarea autoFocus matInput rows="1" placeholder="Message to sign" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onMessageChange()"></textarea>
|
||||
<mat-error *ngIf="!message">Message is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="my-1">
|
||||
<button class="mr-1" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-flat-button color="primary" (click)="onSign()" tabindex="3" type="submit">Sign</button>
|
||||
<button mat-flat-button color="primary" tabindex="3" type="submit" (click)="onSign()">Sign</button>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-2"></mat-divider>
|
||||
<mat-divider class="my-2" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><p>Generated Signature</p></div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="bordered-box read-only h-4 padding-gap">{{signature}}</div>
|
||||
<div fxLayout="row" class="mt-2">
|
||||
<button mat-stroked-button color="primary" tabindex="4" rtlClipboard [payload]="signature" (copied)="onCopyField($event)" type="button">Copy Signature</button>
|
||||
<button mat-stroked-button color="primary" tabindex="4" rtlClipboard type="button" [payload]="signature" (copied)="onCopyField($event)">Copy Signature</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="1" placeholder="Message to verify" required tabindex="1" name="message" (keyup)="onChange()"></textarea>
|
||||
<textarea autoFocus matInput rows="1" placeholder="Message to verify" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onChange()"></textarea>
|
||||
<mat-error *ngIf="!message">Message is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Signature provided" name="signature" [(ngModel)]="signature" tabindex="2" required #sign="ngModel" (keyup)="onChange()">
|
||||
<input #sign="ngModel" matInput placeholder="Signature provided" name="signature" tabindex="2" required [(ngModel)]="signature" (keyup)="onChange()">
|
||||
<mat-error *ngIf="!signature">Signature is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<p *ngIf="showVerifyStatus && !verifyRes.verified" fxFlex="100" class="color-warn" fxLayoutAlign="start center"><mat-icon class="mr-1 icon-small">close</mat-icon>Verification failed, please double check message and signature</p>
|
||||
<div fxLayout="row" class="my-1">
|
||||
<button class="mr-1" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()">Clear Fields</button>
|
||||
<button mat-flat-button color="primary" (click)="onVerify()" tabindex="4" type="submit">Verify</button>
|
||||
<button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onVerify()">Verify</button>
|
||||
</div>
|
||||
<div *ngIf="showVerifyStatus && verifyRes.verified" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<mat-divider [inset]="true" class="my-2"></mat-divider>
|
||||
<mat-divider class="my-2" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<p *ngIf="verifyRes.verified">Pubkey Used</p>
|
||||
</div>
|
||||
<div *ngIf="verifyRes.verified" fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="bordered-box read-only h-4 padding-gap">
|
||||
<p>{{verifyRes?.pubkey}}</p>
|
||||
</div>
|
||||
<div fxLayout="row" class="mt-2" *ngIf="verifyRes.verified">
|
||||
<button mat-stroked-button color="primary" tabindex="5" rtlClipboard [payload]="verifyRes?.pubkey" (copied)="onCopyField($event)" type="button">Copy Pubkey</button>
|
||||
<div *ngIf="verifyRes.verified" fxLayout="row" class="mt-2">
|
||||
<button mat-stroked-button color="primary" tabindex="5" rtlClipboard type="button" [payload]="verifyRes?.pubkey" (copied)="onCopyField($event)">Copy Pubkey</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -4,40 +4,40 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Create Invoice</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100" #addInvoiceForm="ngForm">
|
||||
<form #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput autoFocus [(ngModel)]="description" placeholder="Description" tabindex="2" name="description">
|
||||
<input matInput autoFocus placeholder="Description" tabindex="2" name="description" [(ngModel)]="description">
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
|
||||
<mat-form-field fxFlex="40">
|
||||
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" [step]="100" [min]="1" tabindex="3" name="invoiceValue">
|
||||
<input matInput placeholder="Amount" type="number" tabindex="3" name="invoiceValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-hint>{{invoiceValueHint}}</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput [(ngModel)]="expiry" name="expiry" placeholder="Expiry" type="number" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" tabindex="4">
|
||||
<input matInput name="expiry" placeholder="Expiry" type="number" tabindex="4" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" [(ngModel)]="expiry">
|
||||
<span matSuffix>{{selTimeUnit | titlecase}} </span>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="26">
|
||||
<mat-select [value]="selTimeUnit" tabindex="5" name="timeUnit" (selectionChange)="onTimeUnitChange($event)">
|
||||
<mat-select tabindex="5" name="timeUnit" [value]="selTimeUnit" (selectionChange)="onTimeUnitChange($event)">
|
||||
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="50" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-slide-toggle tabindex="6" color="primary" [(ngModel)]="private" name="private">Private Routing Hints</mat-slide-toggle>
|
||||
<mat-slide-toggle tabindex="6" color="primary" name="private" [(ngModel)]="private">Private Routing Hints</mat-slide-toggle>
|
||||
<mat-icon matTooltip="Include routing hints for private channels" matTooltipPosition="above" class="info-icon">info_outline</mat-icon>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="invoiceError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="invoiceError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="invoiceError !== ''">{{invoiceError}}</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" class="mt-1" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-button color="primary" (click)="onAddInvoice(addInvoiceForm)" tabindex="8">Create Invoice</button>
|
||||
<button mat-button color="primary" tabindex="8" (click)="onAddInvoice(addInvoiceForm)">Create Invoice</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
|
||||
<div fxFlex="35" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap-large" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-300">N/A</span>
|
||||
</div>
|
||||
<div fxFlex="65">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
|
||||
<span class="page-title">
|
||||
{{screenSize === screenSizeEnum.XS ? (newlyAdded ? 'Created' : 'Invoice') : (newlyAdded ? 'Invoice Created' : 'Invoice Information')}}
|
||||
<span *ngIf="invoice?.status === 'paid'" class="dot green ml-1" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
@ -14,18 +14,18 @@
|
||||
<span *ngIf="invoice?.status === 'expired'" class="dot red ml-1" matTooltip="Expired" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
|
||||
<div fxLayout="column">
|
||||
<div fxFlex="30" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-120">QR Code Not Applicable</span>
|
||||
</div>
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" [inset]="true" class="my-1"></mat-divider>
|
||||
<div fxLayout="row" *ngIf="invoice?.warning_capacity">
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider>
|
||||
<div *ngIf="invoice?.warning_capacity" fxLayout="row">
|
||||
<div fxFlex="100" class="alert alert-warn">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{invoice?.warning_capacity}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,7 +50,7 @@
|
||||
</ng-container>
|
||||
<ng-container *ngIf="invoice?.status !== 'paid'">
|
||||
<span *ngIf="invoice?.status !== 'unpaid' || !flgVersionCompatible">-</span>
|
||||
<mat-spinner [diameter]="20" *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible"></mat-spinner>
|
||||
<mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20"></mat-spinner>
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
@ -97,8 +97,8 @@
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="1">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
|
||||
@ -1,106 +1,106 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap">
|
||||
<form *ngIf="calledFrom === 'home'" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100" #addInvoiceForm="ngForm">
|
||||
<form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<input matInput [(ngModel)]="description" placeholder="Description" tabindex="2" name="description">
|
||||
<input matInput placeholder="Description" tabindex="2" name="description" [(ngModel)]="description">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" name="invoiceValue" type="number" [step]="100" [min]="1" tabindex="3">
|
||||
<input matInput placeholder="Amount" name="invoiceValue" type="number" tabindex="3" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-hint>{{invoiceValueHint}}</mat-hint>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="mt-1">
|
||||
<button class="mr-1" mat-stroked-button color="primary" tabindex="9" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-flat-button color="primary" (click)="onAddInvoice(addInvoiceForm)" tabindex="10">Create Invoice</button>
|
||||
<button mat-flat-button color="primary" tabindex="10" (click)="onAddInvoice(addInvoiceForm)">Create Invoice</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxLayout="row" *ngIf="calledFrom === 'transactions'">
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="row">
|
||||
<button class="mr-1" mat-stroked-button color="warn" tabindex="7" type="button" (click)="onDeleteExpiredInvoices()">Delete Expired</button>
|
||||
<button mat-flat-button color="primary" (click)="openCreateInvoiceModal()" tabindex="8">Create Invoice</button>
|
||||
<button mat-flat-button color="primary" tabindex="8" (click)="openCreateInvoiceModal()">Create Invoice</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" *ngIf="calledFrom === 'transactions'">
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Invoices History</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="invoices" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<span *ngIf="invoice?.status === 'paid'" class="dot green" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="invoice?.status === 'expired'" class="dot red" matTooltip="Expired" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="expires_at">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Expiry Date</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Expiry Date</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
{{(invoice?.expires_at * 1000) | date:'dd/MMM/y HH:mm'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="paid_at">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date Settled</th>
|
||||
<td mat-cell *matCellDef="let invoice">{{((invoice?.paid_at * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date Settled</th>
|
||||
<td *matCellDef="let invoice" mat-cell>{{((invoice?.paid_at * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
|
||||
<td mat-cell *matCellDef="let invoice">{{ invoice?.bolt12 ? 'Bolt12' : (invoice?.bolt11 && invoice.label.includes('keysend-')) ? 'Keysend' : 'Bolt11' }}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Type</th>
|
||||
<td *matCellDef="let invoice" mat-cell>{{ invoice?.bolt12 ? 'Bolt12' : (invoice?.bolt11 && invoice.label.includes('keysend-')) ? 'Keysend' : 'Bolt11' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.description}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="label">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Label</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.label}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="payment_hash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.payment_hash}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="bolt11">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Invoice</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.bolt11}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center">{{invoice?.msatoshi/1000 | number:invoice?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let invoice" mat-cell><span fxLayoutAlign="end center">{{invoice?.msatoshi/1000 | number:invoice?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_received">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Settled (Sats)</th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center">{{invoice?.msatoshi_received/1000 | number:invoice?.msatoshi_received < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount Settled (Sats)</th>
|
||||
<td *matCellDef="let invoice" mat-cell><span fxLayoutAlign="end center">{{invoice?.msatoshi_received/1000 | number:invoice?.msatoshi_received < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -108,7 +108,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let invoice" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let invoice" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -119,17 +119,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_invoice">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No invoice available.</p>
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting invoices...</p>
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_invoice']" [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_invoice']" mat-footer-row [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@ -4,30 +4,30 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Create Offer</span>
|
||||
</div>
|
||||
<button tabindex="6" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="6" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100" #addOfferForm="ngForm">
|
||||
<form #addOfferForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput autoFocus [(ngModel)]="description" placeholder="Description" tabindex="1" name="description">
|
||||
<input matInput autoFocus placeholder="Description" tabindex="1" name="description" [(ngModel)]="description">
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
|
||||
<mat-form-field fxFlex="40">
|
||||
<input matInput [(ngModel)]="offerValue" (keyup)="onOfferValueChange()" placeholder="Amount" type="number" [step]="100" [min]="1" tabindex="2" name="offerValue">
|
||||
<input matInput placeholder="Amount" type="number" tabindex="2" name="offerValue" [step]="100" [min]="1" [(ngModel)]="offerValue" (keyup)="onOfferValueChange()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-hint>{{offerValueHint}}</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="58" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="vendor" placeholder="Vendor" tabindex="3" name="vendor">
|
||||
<input matInput placeholder="Vendor" tabindex="3" name="vendor" [(ngModel)]="vendor">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="offerError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="offerError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="offerError !== ''">{{offerError}}</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" class="mt-1" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" tabindex="4" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-button color="primary" (click)="onAddOffer()" tabindex="5">Create Offer</button>
|
||||
<button mat-button color="primary" tabindex="5" (click)="onAddOffer()">Create Offer</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
||||
@ -3,61 +3,61 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Offer Bookmarks</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="offersBookmarks" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="offersBookmarks" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="lastUpdatedAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Updated At</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark">{{offersbookmark.lastUpdatedAt | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Updated At</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell>{{offersbookmark.lastUpdatedAt | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="title">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Title</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{offersbookmark.title}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{offersbookmark.description}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="vendor">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Vendor</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark">{{offersbookmark.vendor}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Vendor</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell>{{offersbookmark.vendor}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="bolt12">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Invoice</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{offersbookmark.bolt12}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amountMSat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let offersbookmark"><span fxLayoutAlign="end center">{{(offersbookmark.amountMSat === 0) ? 'Open' : (offersbookmark.amountMSat / 1000) | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let offersbookmark" mat-cell><span fxLayoutAlign="end center">{{(offersbookmark.amountMSat === 0) ? 'Open' : (offersbookmark.amountMSat / 1000) | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -65,7 +65,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let offer" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let offer" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -77,17 +77,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_offer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!offersBookmarks?.data || offersBookmarks?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No offer bookmarked.</p>
|
||||
<p *ngIf="(!offersBookmarks?.data || offersBookmarks?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting offer bookmarks...</p>
|
||||
<p *ngIf="(!offersBookmarks?.data || offersBookmarks?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_offer']" [ngClass]="{'display-none': offersBookmarks?.data && offersBookmarks?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_offer']" mat-footer-row [ngClass]="{'display-none': offersBookmarks?.data && offersBookmarks?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
|
||||
<div fxFlex="35" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap-large" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!offer?.bolt12 || offer?.bolt12 === ''" class="font-size-300">N/A</span>
|
||||
</div>
|
||||
<div fxFlex="65">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
|
||||
<span class="page-title">{{screenSize === screenSizeEnum.XS ? (newlyAdded ? 'Created' : 'Offer') : (newlyAdded ? 'Offer Created' : 'Offer Information')}}</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
|
||||
<div fxLayout="column">
|
||||
<div fxFlex="30" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!offer?.bolt12 || offer?.bolt12 === ''" class="font-size-120">QR Code Not Applicable</span>
|
||||
</div>
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Requested (Sats)</h4>
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
<div *ngIf="showAdvanced">
|
||||
<mat-divider *ngIf="offer?.used || offer?.single_use" class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row" *ngIf="offer?.used || offer?.single_use">
|
||||
<div *ngIf="offer?.used || offer?.single_use" fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Used</h4>
|
||||
<span class="foreground-secondary-text">
|
||||
@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider *ngIf="offerDecoded?.vendor || offerDecoded?.issuer" class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row" *ngIf="offerDecoded?.vendor || offerDecoded?.issuer">
|
||||
<div *ngIf="offerDecoded?.vendor || offerDecoded?.issuer" fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Vendor</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{offerDecoded?.vendor || offerDecoded?.issuer}}</span>
|
||||
@ -80,8 +80,8 @@
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="1">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
|
||||
@ -1,37 +1,37 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap">
|
||||
<div fxLayout="row">
|
||||
<button mat-flat-button color="primary" (click)="openCreateOfferModal()" tabindex="1">Create Offer</button>
|
||||
<button mat-flat-button color="primary" tabindex="1" (click)="openCreateOfferModal()">Create Offer</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Offers History</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="offers" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="offers" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="active">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Active"></th>
|
||||
<td mat-cell *matCellDef="let offer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Active"></th>
|
||||
<td *matCellDef="let offer" mat-cell>
|
||||
<span *ngIf="offer.active" class="dot green" matTooltip="Active" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="!offer.active" class="dot red" matTooltip="Inactive" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="offer_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Offer ID</th>
|
||||
<td mat-cell *matCellDef="let offer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Offer ID</th>
|
||||
<td *matCellDef="let offer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">
|
||||
{{offer.offer_id}}
|
||||
@ -40,18 +40,18 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="single_use">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Single Use</th>
|
||||
<td mat-cell *matCellDef="let offer">{{offer.single_use ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Single Use</th>
|
||||
<td *matCellDef="let offer" mat-cell>{{offer.single_use ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="used">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Used</th>
|
||||
<td mat-cell *matCellDef="let offer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Used</th>
|
||||
<td *matCellDef="let offer" mat-cell>
|
||||
{{offer.used ? 'Yes' : 'No'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="bolt12">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Invoice</th>
|
||||
<td mat-cell *matCellDef="let offer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
|
||||
<td *matCellDef="let offer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">
|
||||
{{offer.bolt12}}
|
||||
@ -60,7 +60,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -68,7 +68,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let offer" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let offer" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -80,17 +80,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_offer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!offers?.data || offers?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No offer available.</p>
|
||||
<p *ngIf="(!offers?.data || offers?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting offers...</p>
|
||||
<p *ngIf="(!offers?.data || offers?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_offer']" [ngClass]="{'display-none': offers?.data && offers?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_offer']" mat-footer-row [ngClass]="{'display-none': offers?.data && offers?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,106 +1,106 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
|
||||
<form *ngIf="calledFrom === 'home'" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #sendPaymentForm="ngForm">
|
||||
<form *ngIf="calledFrom === 'home'" #sendPaymentForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<mat-form-field fxFlex="100">
|
||||
<textarea [perfectScrollbar] matInput placeholder="Payment Request" name="paymentRequest" tabindex="1" [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" required (matTextareaAutosize)="true" #paymentReq="ngModel"></textarea>
|
||||
<textarea #paymentReq="ngModel" matInput placeholder="Payment Request" name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
|
||||
<mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
|
||||
<mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="mt-1">
|
||||
<button class="mr-1" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-flat-button color="primary" (click)="onSendPayment()" tabindex="3">Send Payment</button>
|
||||
<button mat-flat-button color="primary" tabindex="3" (click)="onSendPayment()">Send Payment</button>
|
||||
</div>
|
||||
</form>
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="row">
|
||||
<button mat-flat-button color="primary" (click)="openSendPaymentModal()" tabindex="3">Send Payment</button>
|
||||
<button mat-flat-button color="primary" tabindex="3" (click)="openSendPaymentModal()">Send Payment</button>
|
||||
</div>
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Payments History</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="payments" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="payments" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
|
||||
<span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="created_at">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created At</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Created At</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
{{(payment?.created_at * 1000) | date:'dd/MMM/y HH:mm'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
|
||||
<td mat-cell *matCellDef="let payment">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Type</th>
|
||||
<td *matCellDef="let payment" mat-cell>{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="payment_hash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.payment_hash}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="bolt11">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Invoice</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.bolt11}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="label">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Label</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.label}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="destination">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Destination</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Destination</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.destination}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="memo">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Memo</th>
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Memo</th>
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.memo}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi_sent">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent</th>
|
||||
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Sats Sent</th>
|
||||
<td *matCellDef="let payment" mat-cell><span fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="msatoshi">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Received</th>
|
||||
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Sats Received</th>
|
||||
<td *matCellDef="let payment" mat-cell><span fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -108,12 +108,12 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let payment" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let payment" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onPaymentClick(payment)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_payment">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!payments?.data || !payments?.data?.length) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">No payment available.</p>
|
||||
<p *ngIf="(!payments?.data || !payments?.data?.length) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">Getting payments...</p>
|
||||
<p *ngIf="(!payments?.data || !payments?.data?.length) && apiCallStatus?.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
@ -122,7 +122,7 @@
|
||||
|
||||
<!-- Payment Group Row Start -->
|
||||
<ng-container matColumnDef="group_status">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="start center" class="mpp-row-span">
|
||||
<span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
|
||||
<span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
|
||||
@ -136,7 +136,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_created_at">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="start center" class="mpp-row-span">
|
||||
Total Attempts: {{payment?.total_parts}}
|
||||
</span>
|
||||
@ -148,13 +148,13 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_type">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span>
|
||||
<span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span"></span></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_payment_hash">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.payment_hash}}</span>
|
||||
</span>
|
||||
@ -166,7 +166,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_bolt11">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.bolt11}}</span>
|
||||
</span>
|
||||
@ -178,7 +178,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_label">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.label}}</span>
|
||||
</span>
|
||||
@ -190,7 +190,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_destination">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.destination}}</span>
|
||||
</span>
|
||||
@ -202,7 +202,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_memo">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{payment?.memo}}</span>
|
||||
</span>
|
||||
@ -214,7 +214,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_msatoshi_sent">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span>
|
||||
<span *ngIf="payment.is_expanded">
|
||||
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
|
||||
@ -224,7 +224,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_msatoshi">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span>
|
||||
<span *ngIf="payment.is_expanded">
|
||||
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
|
||||
@ -234,7 +234,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="group_actions">
|
||||
<td mat-cell *matCellDef="let payment">
|
||||
<td *matCellDef="let payment" mat-cell>
|
||||
<span fxLayoutAlign="end center">
|
||||
<button mat-flat-button class="btn-mpp-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
|
||||
</span>
|
||||
@ -247,12 +247,12 @@
|
||||
</ng-container>
|
||||
<tr mat-row *matRowDef="let row; columns: mppColumns; when: is_group;"></tr>
|
||||
<!-- Payment Group Row End -->
|
||||
<tr mat-footer-row *matFooterRowDef="['no_payment']" [ngClass]="{'display-none': payments?.data && payments?.data?.length && payments?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr *matFooterRowDef="['no_payment']" mat-footer-row [ngClass]="{'display-none': payments?.data && payments?.data?.length && payments?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns; when: !is_group;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Send Payment</span>
|
||||
</div>
|
||||
<button tabindex="12" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="12" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-radio-group *ngIf="isCompatibleVersion" class="my-1" color="primary" name="paymentType" [(ngModel)]="paymentType" (change)="onPaymentTypeChange()" fxFlex="100" fxLayoutAlign="start start">
|
||||
<mat-radio-group *ngIf="isCompatibleVersion" class="my-1" color="primary" name="paymentType" fxFlex="100" fxLayoutAlign="start start" [(ngModel)]="paymentType" (change)="onPaymentTypeChange()">
|
||||
<mat-radio-button fxFlex="20" tabindex="1" value="{{paymentTypes.INVOICE}}">Invoice</mat-radio-button>
|
||||
<mat-radio-button fxFlex="20" tabindex="2" value="{{paymentTypes.KEYSEND}}">Keysend</mat-radio-button>
|
||||
<mat-radio-button *ngIf="selNode.enableOffers" fxFlex="20" tabindex="3" value="{{paymentTypes.OFFER}}">Offer</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<form fxLayoutAlign="space-between stretch" fxLayout="column" #sendPaymentForm="ngForm" (submit)="onSendPayment()" (reset)="resetData()">
|
||||
<form #sendPaymentForm="ngForm" fxLayoutAlign="space-between stretch" fxLayout="column" (submit)="onSendPayment()" (reset)="resetData()">
|
||||
<ng-container *ngTemplateOutlet="paymentType === paymentTypes.KEYSEND ? keysendBlock : paymentType === paymentTypes.OFFER ? offerBlock : invoiceBlock"></ng-container>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="paymentError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="paymentError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="paymentError !== ''">{{paymentError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
|
||||
@ -28,36 +28,36 @@
|
||||
</div>
|
||||
<ng-template #invoiceBlock>
|
||||
<mat-form-field fxFlex="100">
|
||||
<textarea autoFocus matInput placeholder="Payment Request" rows="4" name="paymentRequest" tabindex="4" [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true" required #paymentReq="ngModel"></textarea>
|
||||
<textarea #paymentReq="ngModel" autoFocus matInput placeholder="Payment Request" rows="4" name="paymentRequest" tabindex="4" required [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
|
||||
<mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
|
||||
<mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
|
||||
<mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" *ngIf="zeroAmtInvoice">
|
||||
<input matInput placeholder="Amount (Sats)" name="amount" [(ngModel)]="paymentAmount" (change)="onAmountChange($event)" tabindex="5" required #paymentAmt="ngModel">
|
||||
<mat-form-field *ngIf="zeroAmtInvoice" fxFlex="100">
|
||||
<input #paymentAmt="ngModel" matInput placeholder="Amount (Sats)" name="amount" tabindex="5" required [(ngModel)]="paymentAmount" (change)="onAmountChange($event)">
|
||||
<mat-hint>It is a zero amount invoice, enter amount to be paid.</mat-hint>
|
||||
<mat-error *ngIf="!paymentAmount">Payment amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template #keysendBlock>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input autoFocus matInput placeholder="Pubkey" [(ngModel)]="pubkey" name="pubkey" tabindex="4" required>
|
||||
<input autoFocus matInput placeholder="Pubkey" name="pubkey" tabindex="4" required [(ngModel)]="pubkey">
|
||||
<mat-error *ngIf="!pubkey">Pubkey is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="Amount (Sats)" name="keysendAmount" [(ngModel)]="keysendAmount" tabindex="5" required #keysendAmt="ngModel">
|
||||
<input #keysendAmt="ngModel" matInput placeholder="Amount (Sats)" name="keysendAmount" tabindex="5" required [(ngModel)]="keysendAmount">
|
||||
<mat-error *ngIf="!keysendAmount">Keysend amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template #offerBlock>
|
||||
<mat-form-field fxFlex="100">
|
||||
<textarea autoFocus matInput placeholder="Offer Request" rows="4" name="offerRequest" tabindex="4" [ngModel]="offerRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true" required #offerReq="ngModel"></textarea>
|
||||
<textarea #offerReq="ngModel" autoFocus matInput placeholder="Offer Request" rows="4" name="offerRequest" tabindex="4" required [ngModel]="offerRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
|
||||
<mat-hint *ngIf="offerRequest && offerDecodedHint !== ''">{{offerDecodedHint}}</mat-hint>
|
||||
<mat-error *ngIf="!offerRequest">Offer request is required.</mat-error>
|
||||
<mat-error *ngIf="offerReq.errors?.decodeError">{{offerDecodedHint}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" *ngIf="zeroAmtOffer">
|
||||
<input matInput placeholder="Amount (Sats)" name="amountoffer" [(ngModel)]="offerAmount" (change)="onAmountChange($event)" tabindex="5" required #offerAmt="ngModel">
|
||||
<mat-form-field *ngIf="zeroAmtOffer" fxFlex="100">
|
||||
<input #offerAmt="ngModel" matInput placeholder="Amount (Sats)" name="amountoffer" tabindex="5" required [(ngModel)]="offerAmount" (change)="onAmountChange($event)">
|
||||
<mat-hint>It is a zero amount offer, enter amount to be paid.</mat-hint>
|
||||
<mat-error *ngIf="!offerAmount">Offer amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
@ -65,7 +65,7 @@
|
||||
<mat-checkbox fxFlex="none" tabindex="6" color="primary" [(ngModel)]="flgSaveToDB">Bookmark Offer</mat-checkbox>
|
||||
<mat-icon matTooltip="Save offer in database for future payments" matTooltipPosition="below" fxFlex="none" class="info-icon">info_outline</mat-icon>
|
||||
</div>
|
||||
<mat-form-field fxFlex="100" *ngIf="flgSaveToDB || offerTitle !== ''" class="mt-1">
|
||||
<input matInput placeholder="Title to Save" [(ngModel)]="offerTitle" tabindex="7">
|
||||
<mat-form-field *ngIf="flgSaveToDB || offerTitle !== ''" fxFlex="100" class="mt-1">
|
||||
<input matInput placeholder="Title to Save" tabindex="7" [(ngModel)]="offerTitle">
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
|
||||
<span class="page-title">Lightning Balance</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x mb-4">
|
||||
@ -10,14 +10,14 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faExchangeAlt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
|
||||
<span class="page-title">Lightning Transactions</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faSearch" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faSearch"></fa-icon>
|
||||
<span class="page-title">Graph Lookups</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap">
|
||||
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100" #form="ngForm">
|
||||
<form #form="ngForm" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100">
|
||||
<div fxFlex="100" fxLayoutAlign="start end">
|
||||
<!-- <mat-radio-group color="primary" [(ngModel)]="selectedFieldId" (change)="onSelectChange($event)" tabindex="1" name="lookupField">
|
||||
<mat-radio-button *ngFor="let lookupField of lookupFields" [value]="lookupField.id" [checked]="selectedFieldId === lookupField.id" class="mr-4">
|
||||
@ -9,12 +9,12 @@
|
||||
</mat-radio-button>
|
||||
</mat-radio-group> -->
|
||||
<mat-radio-group color="primary" tabindex="1" name="lookupField">
|
||||
<mat-radio-button [value]="0" checked class="mr-4">Node</mat-radio-button>
|
||||
<mat-radio-button checked class="mr-4" [value]="0">Node</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<!-- <input matInput name="lookupKey" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" (change)="clearLookupValue()" [(ngModel)]="lookupKey" tabindex="2" required #key> -->
|
||||
<input matInput name="lookupKey" [formControl]="lookupKeyCtrl" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" tabindex="2" required #key>
|
||||
<input #key matInput name="lookupKey" tabindex="2" required [formControl]="lookupKeyCtrl" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'">
|
||||
<mat-error *ngIf="lookupKeyCtrl.errors?.required">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error>
|
||||
<mat-error *ngIf="lookupKeyCtrl.errors?.invalid">Invalid {{lookupFields[selectedFieldId]?.placeholder}}.</mat-error>
|
||||
</mat-form-field>
|
||||
@ -23,14 +23,14 @@
|
||||
<button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onLookup()">Lookup</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" *ngIf="flgSetLookupValue" class="w-100 mt-2">
|
||||
<div *ngIf="flgSetLookupValue" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100 mt-2">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<span class="page-title font-bold-500">{{lookupFields[selectedFieldId].name}} Details</span>
|
||||
</div>
|
||||
<div [ngSwitch]="selectedFieldId" fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<span fxFlex="100" *ngSwitchCase="0"><div *ngIf="nodeLookupValue.nodeId; else errorBlock"><rtl-ecl-node-lookup [lookupResult]="nodeLookupValue"></rtl-ecl-node-lookup></div></span>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" [ngSwitch]="selectedFieldId">
|
||||
<span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeId; else errorBlock"><rtl-ecl-node-lookup [lookupResult]="nodeLookupValue"></rtl-ecl-node-lookup></div></span>
|
||||
<!-- <span fxFlex="100" *ngSwitchCase="1"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span> -->
|
||||
<span fxFlex="100" *ngSwitchDefault><h3>Error! Unable to find details!</h3></span>
|
||||
<span *ngSwitchDefault> fxFlex="100"<h3>Error! Unable to find details!</h3></span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="column" *ngIf="lookupResult">
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<div *ngIf="lookupResult" fxLayout="column">
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="30">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
|
||||
@ -10,7 +10,7 @@
|
||||
<span class="foreground-secondary-text w-100">{{lookupResult?.nodeId}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="30">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Date/Time</h4>
|
||||
@ -18,37 +18,37 @@
|
||||
</div>
|
||||
<div fxFlex="70">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Features</h4>
|
||||
<span class="foreground-secondary-text w-100" *ngFor="let activeFeature of lookupResult?.features.activated | keyvalue"><div>{{nodeFeaturesEnum[activeFeature.key] || activeFeature.key}}: {{activeFeature.value | titlecase}}</div></span>
|
||||
<span *ngFor="let activeFeature of lookupResult?.features.activated | keyvalue" class="foreground-secondary-text w-100"><div>{{nodeFeaturesEnum[activeFeature.key] || activeFeature.key}}: {{activeFeature.value | titlecase}}</div></span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Signature</h4>
|
||||
<span class="foreground-secondary-text">{{lookupResult?.signature}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="column">
|
||||
<h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
|
||||
<div [perfectScrollbar] fxLayout="row" fxFlex="100" class="table-container">
|
||||
<table mat-table #table [dataSource]="addresses" matSort class="overflow-auto">
|
||||
<div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<table #table mat-table matSort class="overflow-auto" [dataSource]="addresses">
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
||||
<td mat-cell *matCellDef="let address">{{address}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
|
||||
<td *matCellDef="let address" mat-cell>{{address}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let address">
|
||||
<td *matCellDef="let address" mat-cell>
|
||||
<span fxLayoutAlign="end center">
|
||||
<button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeId + '@' + address" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns;" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<div fxLayout="column" fxFlex="100">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()" #queryRoutesForm="ngForm">
|
||||
<form #queryRoutesForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()">
|
||||
<div fxFlex="100" class="alert alert-warn">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
|
||||
</div>
|
||||
<mat-form-field fxFlex="69" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Destination Node ID" name="nodeId" [(ngModel)]="nodeId" tabindex="1" required #destPubkey="ngModel">
|
||||
<input #destPubkey="ngModel" matInput placeholder="Destination Node ID" name="nodeId" tabindex="1" required [(ngModel)]="nodeId">
|
||||
<mat-error *ngIf="!nodeId">Destination Node ID is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="29" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Amount (Sats)" [(ngModel)]="amount" name="amount" tabindex="2" type="number" [step]="1000" [min]="0" required>
|
||||
<input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount">
|
||||
<mat-error *ngIf="!amount">Amount is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="mt-1">
|
||||
@ -19,14 +19,14 @@
|
||||
</form>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container mt-2 mb-1">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faRoute" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faRoute"></fa-icon>
|
||||
<span class="page-title">Transaction Route</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<div fxLayout="row" fxFlex="100" class="padding-gap-x" fxLayoutAlign="start start">
|
||||
<div fxLayout="column" fxFlex="100">
|
||||
<div fxFlex="100" *ngFor="let qRoute of allQRoutes; index as i">
|
||||
<div *ngFor="let qRoute of allQRoutes; index as i" fxFlex="100">
|
||||
<mat-expansion-panel class="flat-expansion-panel help-expansion mb-2px">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title fxLayout="row" fxLayoutAlign="space-between start">
|
||||
@ -35,34 +35,34 @@
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-panel-description fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div [perfectScrollbar] class="table-container mb-2" fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<table mat-table #table[i] [dataSource]="qrHops[i]" [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<div class="table-container mb-2" fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch" [perfectScrollbar]>
|
||||
<table #table[i] mat-table [dataSource]="qrHops[i]" [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef> Alias</th>
|
||||
<td mat-cell *matCellDef="let hop">
|
||||
<th *matHeaderCellDef mat-header-cell> Alias</th>
|
||||
<td *matCellDef="let hop" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
|
||||
<span class="ellipsis-child">{{hop?.alias}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef> ID</th>
|
||||
<td mat-cell *matCellDef="let hop">
|
||||
<th *matHeaderCellDef mat-header-cell> ID</th>
|
||||
<td *matCellDef="let hop" mat-cell>
|
||||
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
|
||||
<span class="ellipsis-child">{{hop?.nodeId}}</span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let hop" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let hop" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onHopClick(hop)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-panel-description>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="column" fxFlex="100"fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
|
||||
<div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxFlex="100" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="column" fxLayoutAlign="space-between stretch"fxFlex="100">
|
||||
<div fxLayout="column" fxFlex="9" fxLayoutAlign="end start">
|
||||
<span class="dashboard-capacity-header this-channel-capacity">Total Capacity</span>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90"><strong class="font-weight-900 mr-5px">Local:</strong>{{channelBalances?.localBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
<mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90">
|
||||
<fa-icon [icon]="faBalanceScale" class="mr-3px" matTooltip="Balance Score"></fa-icon>
|
||||
<fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
|
||||
({{channelBalances?.balancedness || 0 | number}})
|
||||
</mat-hint>
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channelBalances?.remoteBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
@ -13,15 +13,15 @@
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
|
||||
<div class="channels-capacity-scroll" [perfectScrollbar]>
|
||||
<div fxLayout="column" fxFlex="100" *ngIf="allChannels && allChannels?.length > 0; else noChannelBlock">
|
||||
<div *ngIf="allChannels && allChannels?.length > 0; else noChannelBlock" fxLayout="column"fxFlex="100">
|
||||
<div *ngFor="let channel of allChannels" class="mt-2">
|
||||
<a [routerLink]="['../connections/channels/open']" [state]="{filter: channel.channelId}" class="dashboard-capacity-header" matTooltip="{{channel.alias || channel.shortChannelId}}" matTooltipDisabled="{{(channel.alias || channel.shortChannelId).length < 26}}">
|
||||
<a class="dashboard-capacity-header" [routerLink]="['../connections/channels/open']" [state]="{filter: channel.channelId}" matTooltip="{{channel.alias || channel.shortChannelId}}" matTooltipDisabled="{{(channel.alias || channel.shortChannelId).length < 26}}">
|
||||
{{(channel?.alias || channel?.shortChannelId) | slice:0:24}}{{(channel?.alias || channel?.shortChannelId).length > 25 ? '...' : ''}}
|
||||
</a>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Local:</strong>{{channel?.toLocal || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
<mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90 color-primary">
|
||||
<fa-icon [icon]="faBalanceScale" class="color-primary mr-3px" matTooltip="Balance Score"></fa-icon>
|
||||
<fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
|
||||
({{channel?.balancedness || 0 | number}})
|
||||
</mat-hint>
|
||||
<mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channel?.toRemote || 0 | number:'1.0-0'}} Sats</mat-hint>
|
||||
@ -34,7 +34,7 @@
|
||||
<ng-template #noChannelBlock>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" class="mt-1 w-100">
|
||||
No channels available.
|
||||
<button mat-stroked-button color="primary" (click)="goToChannels()" tabindex="1">Open Channel</button>
|
||||
<button mat-stroked-button color="primary" tabindex="1" (click)="goToChannels()">Open Channel</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #errorBlock>
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100"></mat-progress-bar>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start">
|
||||
<div fxLayout="column" fxFlex="100" class="w-100" *ngIf="allChannels && allChannels.length > 0; else noChannelBlock">
|
||||
<div fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start" [perfectScrollbar]>
|
||||
<div *ngIf="allChannels && allChannels.length > 0; else noChannelBlock" fxLayout="column" fxFlex="100"class="w-100">
|
||||
<div *ngFor="let channel of allChannels" class="mt-2">
|
||||
<a [routerLink]="['../connections/channels/open']" [state]="{filter: channel.channelId}" class="dashboard-capacity-header" matTooltip="{{channel.alias || channel.shortChannelId}}" matTooltipDisabled="{{(channel.alias || channel.shortChannelId).length < 26}}">
|
||||
<a class="dashboard-capacity-header" [routerLink]="['../connections/channels/open']" [state]="{filter: channel.channelId}" matTooltip="{{channel.alias || channel.shortChannelId}}" matTooltipDisabled="{{(channel.alias || channel.shortChannelId).length < 26}}">
|
||||
{{(channel.alias || channel.shortChannelId) | slice:0:24}}{{(channel.alias || channel.shortChannelId).length > 25 ? '...' : ''}}
|
||||
</a>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
|
||||
@ -24,7 +24,7 @@
|
||||
<ng-template #noChannelBlock>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" class="mt-1">
|
||||
No channels available.
|
||||
<button *ngIf="direction === 'Out'" mat-stroked-button color="primary" (click)="goToChannels()" tabindex="1">Open Channel</button>
|
||||
<button *ngIf="direction === 'Out'" mat-stroked-button color="primary" tabindex="1" (click)="goToChannels()">Open Channel</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #errorBlock>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start stretch" *ngIf="errorMessage?.trim() === ''; else errorBlock">
|
||||
<div *ngIf="errorMessage?.trim() === ''; else errorBlock" fxLayout="row" fxFlex="100"fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
|
||||
<div>
|
||||
<h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<div fxLayout="column" *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard">
|
||||
<div *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard"fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="page-title-container mb-2">
|
||||
<fa-icon [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile"></fa-icon>
|
||||
<span class="page-title">{{apiCallStatusNodeInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : 'Error! Please check the server connection.'}}</span>
|
||||
</div>
|
||||
<mat-grid-list cols="10" gutterSize="20px" [rowHeight]="operatorCardHeight">
|
||||
<mat-grid-tile *ngFor="let card of operatorCards" [colspan]="card.cols" [rowspan]="card.rows" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-grid-tile *ngFor="let card of operatorCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" [matMenuTriggerFor]="menuOperator"
|
||||
aria-label="Toggle menu">
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu"
|
||||
[matMenuTriggerFor]="menuOperator">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuOperator="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
<button mat-menu-item *ngFor="let goToOption of card.goToOptions; index as i" (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
|
||||
<button *ngIf="card.id === 'capacity'" (click)="onsortChannelsBy()" mat-menu-item>Sort By
|
||||
<button *ngIf="card.id === 'capacity'" mat-menu-item (click)="onsortChannelsBy()">Sort By
|
||||
{{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
@ -31,18 +31,18 @@
|
||||
(card.id === 'balance' && (apiCallStatusAllChannels.status === apiCallStatusEnum.ERROR || apiCallStatusOCBal.status === apiCallStatusEnum.ERROR)) ||
|
||||
((card.id === 'capacity' || card.id === 'status') && apiCallStatusAllChannels.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'fee' && apiCallStatusFees.status === apiCallStatusEnum.ERROR)}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'balance' && (apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusOCBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
((card.id === 'capacity' || card.id === 'status') && apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'fee' && apiCallStatusFees.status === apiCallStatusEnum.INITIATED)"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-ecl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false"></rtl-ecl-node-info>
|
||||
<rtl-ecl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
|
||||
<rtl-ecl-channel-capacity-info fxFlex="100" *ngSwitchCase="'capacity'" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-capacity-info>
|
||||
<rtl-ecl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [errorMessage]="errorMessages[1]"></rtl-ecl-fee-info>
|
||||
<rtl-ecl-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-status-info>
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-ecl-node-info>
|
||||
<rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
|
||||
<rtl-ecl-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-capacity-info>
|
||||
<rtl-ecl-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1]"></rtl-ecl-fee-info>
|
||||
<rtl-ecl-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-status-info>
|
||||
<h3 *ngSwitchDefault>Error! Unable to find information!</h3>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
@ -52,21 +52,21 @@
|
||||
</div>
|
||||
<ng-template #merchantDashboard>
|
||||
<div fxLayout="row" fxLayoutAlign="start end" class="page-title-container mb-2">
|
||||
<fa-icon [icon]="faSmile" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faSmile"></fa-icon>
|
||||
<span class="page-title">Welcome {{information.alias}}! Your node is up and running.</span>
|
||||
</div>
|
||||
<mat-grid-list cols="6" gutterSize="20px" [rowHeight]="merchantCardHeight">
|
||||
<mat-grid-tile *ngFor="let card of merchantCards" [colspan]="card.cols" [rowspan]="card.rows" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-grid-tile *ngFor="let card of merchantCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
||||
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card" [ngClass]="{'p-0': card.id === 'transactions'}">
|
||||
<mat-card-header *ngIf="card.id !== 'transactions'">
|
||||
<mat-card-title fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
||||
<fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
|
||||
<span>{{card.title}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" [matMenuTriggerFor]="menuMerchant"
|
||||
aria-label="Toggle menu">
|
||||
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu"
|
||||
[matMenuTriggerFor]="menuMerchant">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuMerchant="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
@ -80,17 +80,17 @@
|
||||
'error-border': (card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR) ||
|
||||
(card.id === 'balance' && (apiCallStatusAllChannels.status === apiCallStatusEnum.ERROR || apiCallStatusOCBal.status === apiCallStatusEnum.ERROR)) ||
|
||||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusAllChannels.status === apiCallStatusEnum.ERROR)}">
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
*ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
||||
(card.id === 'balance' && (apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusOCBal.status === apiCallStatusEnum.INITIATED)) ||
|
||||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED)"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
||||
<rtl-ecl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information"></rtl-ecl-node-info>
|
||||
<rtl-ecl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
|
||||
<rtl-ecl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'inboundLiq'" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
|
||||
<rtl-ecl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'outboundLiq'" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
|
||||
<span fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start" *ngSwitchCase="'transactions'">
|
||||
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
||||
<rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information"></rtl-ecl-node-info>
|
||||
<rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
|
||||
<rtl-ecl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
|
||||
<rtl-ecl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
|
||||
<span *ngSwitchCase="'transactions'" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
|
||||
<mat-tab-group fxLayout="column" class="w-100 dashboard-tabs-group">
|
||||
<mat-tab label="Receive">
|
||||
<rtl-ecl-lightning-invoices class="h-100" [calledFrom]="'home'"></rtl-ecl-lightning-invoices>
|
||||
@ -100,7 +100,7 @@
|
||||
</mat-tab>
|
||||
<mat-tab [disabled]="true">
|
||||
<ng-template mat-tab-label>
|
||||
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menuTransactions" aria-label="Toggle menu">
|
||||
<button mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuTransactions">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menuTransactions="matMenu" class="dashboard-vert-menu" xPosition="before">
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="dashboard-info-title">Chain</h4>
|
||||
<span class="overflow-wrap dashboard-info-value" *ngFor="let chain of chains">{{chain}}</span>
|
||||
<span *ngFor="let chain of chains" class="overflow-wrap dashboard-info-value">{{chain}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxLayout="row">
|
||||
<button mat-flat-button color="primary" (click)="onGenerateAddress()" tabindex="1">Generate Address</button>
|
||||
<button mat-flat-button color="primary" tabindex="1" (click)="onGenerateAddress()">Generate Address</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,33 +4,33 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Send Payment</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()">
|
||||
<mat-form-field fxFlex="55">
|
||||
<input matInput autoFocus [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="addr" required #addrs="ngModel">
|
||||
<input #addrs="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="addr" required [(ngModel)]="transaction.address">
|
||||
<mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput [(ngModel)]="transaction.amount" placeholder="Amount" name="amt" type="number" [step]="100" [min]="0" tabindex="2" required #amnt="ngModel">
|
||||
<input #amnt="ngModel" matInput placeholder="Amount" name="amt" type="number" tabindex="2" required [step]="100" [min]="0" [(ngModel)]="transaction.amount">
|
||||
<span matSuffix>{{selAmountUnit}} </span>
|
||||
<mat-error *ngIf="!transaction.amount">{{amountError}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="10" fxLayoutAlign="start end">
|
||||
<mat-select [value]="selAmountUnit" tabindex="3" required name="amountUnit" (selectionChange)="onAmountUnitChange($event)">
|
||||
<mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" (selectionChange)="onAmountUnitChange($event)">
|
||||
<mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxFlex="60" fxLayoutAlign="space-between stretch" fxLayout="row wrap">
|
||||
<mat-form-field fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
|
||||
<input matInput [(ngModel)]="transaction.blocks" placeholder="Target Confirmation Blocks" type="number" name="blocks" [step]="1" [min]="0" tabindex="8" #blocks="ngModel" required="true">
|
||||
<input #blocks="ngModel" matInput placeholder="Target Confirmation Blocks" type="number" name="blocks" tabindex="8" required="true" [step]="1" [min]="0" [(ngModel)]="transaction.blocks">
|
||||
<mat-error *ngIf="!transaction.blocks">Target Confirmation Blocks is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"></div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="sendFundError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start start" fxLayout.gt-sm="column" fxFlex="100" fxLayoutAlign.gt-sm="start stretch">
|
||||
<div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Transaction History</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="listTransactions" matSort
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="listTransactions"
|
||||
[ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date/Time</th>
|
||||
<td mat-cell *matCellDef="let transaction">{{(transaction?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date/Time</th>
|
||||
<td *matCellDef="let transaction" mat-cell>{{(transaction?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
|
||||
<td *matCellDef="let transaction" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{transaction?.address}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="blockHash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Blockhash</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Blockhash</th>
|
||||
<td *matCellDef="let transaction" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{transaction?.blockHash}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="txid">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Transaction ID</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
|
||||
<td *matCellDef="let transaction" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{transaction?.txid}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<span fxLayoutAlign="end center" *ngIf="transaction?.amount > 0 || transaction?.amount === 0">{{transaction?.amount | number}}</span>
|
||||
<span fxLayoutAlign="end center" class="red" *ngIf="transaction?.amount < 0">({{transaction?.amount * -1 | number}})</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let transaction" mat-cell>
|
||||
<span *ngIf="transaction?.amount > 0 || transaction?.amount === 0" fxLayoutAlign="end center">{{transaction?.amount | number}}</span>
|
||||
<span *ngIf="transaction?.amount < 0" fxLayoutAlign="end center" class="red">({{transaction?.amount * -1 | number}})</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fees">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fees (Sats)</th>
|
||||
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction?.fees | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fees (Sats)</th>
|
||||
<td *matCellDef="let transaction" mat-cell><span fxLayoutAlign="end center">{{transaction?.fees | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="confirmations">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Confirmations</th>
|
||||
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Confirmations</th>
|
||||
<td *matCellDef="let transaction" mat-cell><span fxLayoutAlign="end center">
|
||||
{{transaction?.confirmations | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -73,22 +73,22 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let transaction" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onTransactionClick(transaction, $event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_transaction">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!listTransactions?.data || listTransactions?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No transaction available.</p>
|
||||
<p *ngIf="(!listTransactions?.data || listTransactions?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting transactions...</p>
|
||||
<p *ngIf="(!listTransactions?.data || listTransactions?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_transaction']" [ngClass]="{'display-none': listTransactions?.data && listTransactions?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_transaction']" mat-footer-row [ngClass]="{'display-none': listTransactions?.data && listTransactions?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
|
||||
<span class="page-title">On-chain Balance</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x mb-4">
|
||||
@ -10,14 +10,14 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faExchangeAlt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
|
||||
<span class="page-title">On-chain Transactions</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div fxFlex="100">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
|
||||
<span class="page-title">Channel Information</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
|
||||
<div fxLayout="column">
|
||||
@ -23,21 +23,21 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.state | titlecase}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
|
||||
<span class="foreground-secondary-text">{{channel.channelId}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
|
||||
<span class="foreground-secondary-text">{{channel.nodeId}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Private</h4>
|
||||
@ -48,7 +48,7 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.isFunder ? 'Yes' : 'No'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">State</h4>
|
||||
@ -59,7 +59,7 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.buried ? 'Yes' : 'No'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div *ngIf="showAdvanced && channelsType === 'open'">
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
@ -71,7 +71,7 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.toRemote | number}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Base Fee (mSats)</h4>
|
||||
@ -82,10 +82,10 @@
|
||||
<span class="overflow-wrap foreground-secondary-text">{{channel.feeProportionalMillionths | number}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider class="my-1" [inset]="true"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center" fxFlex="100">
|
||||
<button *ngIf="channelsType === 'open'" mat-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="1" class="mr-1">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
|
||||
<button *ngIf="channelsType === 'open'" mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
|
||||
@ -3,83 +3,83 @@
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="announceChannel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private"></th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
|
||||
<span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.state | titlecase}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>State</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.state | titlecase}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="shortChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Short Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.shortChannelId}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.shortChannelId}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.channelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.nodeId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="isFunder">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Funder</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funder</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="buried">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Buried</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Buried</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toLocal">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toLocal | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toRemote">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toRemote | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feeRatePerKw">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Fee/KW</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Fee/KW</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balancedness">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Balance Score</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div fxLayout="row">
|
||||
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
|
||||
</div>
|
||||
@ -87,7 +87,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -95,7 +95,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -106,16 +106,16 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_channel">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No inactive channel available.</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting inactive channels...</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_channel']" mat-footer-row [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -3,89 +3,89 @@
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="announceChannel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private"></th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
|
||||
<span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="shortChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Short Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.shortChannelId}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.shortChannelId}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.channelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.nodeId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="isFunder">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Funder</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funder</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="buried">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Buried</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Buried</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feeBaseMsat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Base Fee (mSats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Base Fee (mSats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.feeBaseMsat | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feeProportionalMillionths">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee Rate (mili mSats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee Rate (mili mSats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.feeProportionalMillionths | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toLocal">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toLocal | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toRemote">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toRemote | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feeRatePerKw">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee/KW</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="balancedness">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Balance Score</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div fxLayout="row">
|
||||
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
|
||||
</div>
|
||||
@ -93,7 +93,7 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -102,7 +102,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -115,17 +115,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_peer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No peers connected. Add a peer in order to open a channel?.</p>
|
||||
<p *ngIf="numPeers>0 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No channel available.</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting channels...</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_peer']" mat-footer-row [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -3,74 +3,74 @@
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="announceChannel">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private"></th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
|
||||
<span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.state | titlecase}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>State</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.state | titlecase}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.channelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.alias}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.alias}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let channel">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let channel" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{channel?.nodeId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="isFunder">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Funder</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funder</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.isFunder ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="buried">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Buried</th>
|
||||
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Buried</th>
|
||||
<td *matCellDef="let channel" mat-cell>{{channel?.buried ? 'Yes' : 'No'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toLocal">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toLocal | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toRemote">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.toRemote | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="feeRatePerKw">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</th>
|
||||
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee/KW</th>
|
||||
<td *matCellDef="let channel" mat-cell><span fxLayoutAlign="end center">
|
||||
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -78,21 +78,21 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onChannelClick(channel, $event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_channel">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No pending channel available.</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting pending channels...</p>
|
||||
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_channel']" mat-footer-row [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxLayout="row">
|
||||
<button mat-flat-button color="primary" (click)="onOpenChannel()" type="submit" tabindex="1">Open Channel</button>
|
||||
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box">
|
||||
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{numOfOpenChannels}}" matBadgeOverlap="false" class="tab-badge">Open</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfOpenChannels}}">Open</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{numOfPendingChannels}}" matBadgeOverlap="false" class="tab-badge">Pending</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfPendingChannels}}">Pending</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{numOfInactiveChannels}}" matBadgeOverlap="false" class="tab-badge">Inactive</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{numOfInactiveChannels}}">Inactive</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">{{alertTitle}}</span>
|
||||
</div>
|
||||
<button tabindex="11" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="11" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()" #form="ngForm">
|
||||
<form #form="ngForm" fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()">
|
||||
<div fxLayout="column">
|
||||
<mat-form-field fxFlex="100" *ngIf="!peer && peers && peers.length > 0">
|
||||
<input type="text" placeholder="Peer Alias" aria-label="Peers" matInput [formControl]="selectedPeer" (change)="onSelectedPeerChanged()" [matAutocomplete]="auto" tabindex="1" required>
|
||||
<mat-form-field *ngIf="!peer && peers && peers.length > 0" fxFlex="100">
|
||||
<input type="text" placeholder="Peer Alias" aria-label="Peers" matInput tabindex="1" required [formControl]="selectedPeer" [matAutocomplete]="auto" (change)="onSelectedPeerChanged()">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedPeerChanged()">
|
||||
<mat-option *ngFor="let peer of filteredPeers | async" [value]="peer">{{peer.alias ? peer.alias : peer.nodeId ? peer.nodeId : ''}}</mat-option>
|
||||
</mat-autocomplete>
|
||||
@ -22,14 +22,14 @@
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="70" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" [step]="1000" [min]="1" [max]="totalBalance" tabindex="1" required name="amount" #amount="ngModel">
|
||||
<input #amount="ngModel" matInput placeholder="Amount" type="number" tabindex="1" required name="amount" [step]="1000" [min]="1" [max]="totalBalance" [(ngModel)]="fundingAmount">
|
||||
<mat-hint>Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}</mat-hint>
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="amount.errors?.required">Amount is required.</mat-error>
|
||||
<mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxFlex="25" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle tabindex="2" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
|
||||
<mat-slide-toggle tabindex="2" color="primary" name="isPrivate" [(ngModel)]="isPrivate">Private Channel</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<mat-expansion-panel class="flat-expansion-panel mt-2" expanded="false" (closed)="onAdvancedPanelToggle(true)" (opened)="onAdvancedPanelToggle(false)">
|
||||
@ -42,15 +42,15 @@
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="feeRate" placeholder="Fee (Sats/vByte)" type="number" name="fee" [step]="1" [min]="0" tabindex="7" #fee="ngModel">
|
||||
<input #fee="ngModel" matInput placeholder="Fee (Sats/vByte)" type="number" name="fee" tabindex="7" [step]="1" [min]="0" [(ngModel)]="feeRate">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="channelConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
|
||||
<ng-template #peerDetailsExpansionBlock>
|
||||
<mat-expansion-panel class="flat-expansion-panel my-1" *ngIf="peer" expanded="false">
|
||||
<mat-expansion-panel *ngIf="peer" class="flat-expansion-panel my-1" expanded="false">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<span>Peer: </span><strong class="font-weight-900">{{peer?.alias || peer?.nodeId}}</strong>
|
||||
|
||||
@ -4,20 +4,20 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Connect to a new peer</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<div fxLayout="column">
|
||||
<mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-vertical-stepper #stepper [linear]="true" (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="peerFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="peerFormGroup">
|
||||
<ng-template matStepLabel>{{peerFormLabel}}</ng-template>
|
||||
<mat-form-field fxFlex="100">
|
||||
<input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
|
||||
<mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="peerConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{peerConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
@ -26,12 +26,12 @@
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="channelFormGroup" [editable]="flgEditable">
|
||||
<form [formGroup]="channelFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mb-1">
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="mb-1" [formGroup]="channelFormGroup">
|
||||
<ng-template matStepLabel disabled="true">{{channelFormLabel}}</ng-template>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
||||
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
||||
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" [step]="1000" tabindex="1" required>
|
||||
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" tabindex="1" required [step]="1000">
|
||||
<mat-hint>Remaining Bal: {{totalBalance - ((channelFormGroup.controls.fundingAmount.value) ? channelFormGroup.controls.fundingAmount.value : 0)}}</mat-hint>
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.required">Amount is required.</mat-error>
|
||||
@ -39,15 +39,15 @@
|
||||
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput formControlName="feeRate" placeholder="Fee (Sats/vByte)" type="number" name="feeRate" [step]="1" [min]="0" tabindex="7">
|
||||
<input matInput formControlName="feeRate" placeholder="Fee (Sats/vByte)" type="number" name="feeRate" tabindex="7" [step]="1" [min]="0">
|
||||
</mat-form-field>
|
||||
<div fxFlex="35" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle tabindex="2" color="primary" formControlName="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="channelConnectionError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span>{{channelConnectionError}}</span>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
@ -57,7 +57,7 @@
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
||||
<button mat-button color="primary" tabindex="12" type="button" (click)="onClose()" default>{{newlyAddedPeer?.nodeId ? 'Do It Later' : 'Close'}}</button>
|
||||
<button mat-button color="primary" tabindex="12" type="button" default (click)="onClose()">{{newlyAddedPeer?.nodeId ? 'Do It Later' : 'Close'}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartPie" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
|
||||
<span class="page-title">On-chain Balance</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x mb-4">
|
||||
@ -10,7 +10,7 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
|
||||
<span class="page-title">Connections</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
@ -19,12 +19,12 @@
|
||||
<mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{activeChannels}}" matBadgeOverlap="false" class="tab-badge">Channels</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span matBadge="{{activePeers}}" matBadgeOverlap="false" class="tab-badge">Peers</span>
|
||||
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{activePeers}}">Peers</span>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
@ -1,62 +1,62 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #peersForm="ngForm">
|
||||
<form #peersForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onConnectPeer({})">Add Peer</button>
|
||||
</form>
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
|
||||
<span class="page-title">Peers</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="peers" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="State"></th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="State"></th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<span *ngIf="peer.state === 'CONNECTED'" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="peer.state === 'DISCONNECTED'" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{peer?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{peer?.nodeId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Network Address</th>
|
||||
<td mat-cell *matCellDef="let peer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Network Address</th>
|
||||
<td *matCellDef="let peer" mat-cell>
|
||||
{{peer?.address}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="channels">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channels</th>
|
||||
<td mat-cell *matCellDef="let peer">{{peer?.channels}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channels</th>
|
||||
<td *matCellDef="let peer" mat-cell>{{peer?.channels}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -64,7 +64,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let peer" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -77,17 +77,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_peer">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No connected peer.</p>
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting peers...</p>
|
||||
<p *ngIf="(!peers?.data || peers?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_peer']" mat-footer-row [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faChartBar" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faChartBar"></fa-icon>
|
||||
<span class="page-title">Reports</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
|
||||
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
|
||||
<div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
|
||||
<mat-radio-group class="my-1" color="primary" name="selReportBy" [(ngModel)]="selReportBy" (change)="onSelReportByChange()" fxFlex="100" fxLayoutAlign="start start">
|
||||
<mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start start" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
|
||||
<span class="mr-2">Report By: </span>
|
||||
<mat-radio-button class="mr-2" tabindex="1" value="{{reportBy.FEES}}">Fees</mat-radio-button>
|
||||
<mat-radio-button tabindex="2" value="{{reportBy.EVENTS}}">Events</mat-radio-button>
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
|
||||
<div fxFlex="70"></div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="errorMessage === ''" [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="forwardingHistoryEvents" fxFlex="100" matSort class="overflow-auto">
|
||||
<table #table mat-table fxFlex="100" matSort class="overflow-auto" [dataSource]="forwardingHistoryEvents">
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Type (if not payment relayed)"></th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<span *ngIf="fhEvent?.type !== 'payment-relayed'" class="dot yellow" matTooltip="{{fhEvent?.type | camelcase}}" matTooltipPosition="right" [ngClass]="{'ml-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Type (if not payment relayed)"></th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<span *ngIf="fhEvent?.type !== 'payment-relayed'" class="dot yellow" matTooltipPosition="right" matTooltip="{{fhEvent?.type | camelcase}}" [ngClass]="{'ml-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date/Time</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date/Time</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
{{fhEvent?.timestamp | date:'dd/MMM/y HH:mm'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fromChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.fromChannelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fromShortChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel Short ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.fromShortChannelId}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel Short ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.fromShortChannelId}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fromChannelAlias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.fromChannelAlias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.toChannelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toShortChannelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel Short ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.toShortChannelId}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel Short ID</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>{{fhEvent?.toShortChannelId}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="toChannelAlias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.toChannelAlias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="paymentHash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{fhEvent?.paymentHash}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amountIn">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.amountIn | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount In (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.amountIn | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amountOut">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.amountOut | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{fhEvent?.amountOut | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee Earned (Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee Earned (Sats)</th>
|
||||
<td *matCellDef="let fhEvent" mat-cell><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -97,21 +97,21 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
|
||||
<td *matCellDef="let fhEvent" mat-cell fxLayoutAlign="end center">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" class="table-actions-button" (click)="onForwardingEventClick(fhEvent,$event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No forwarding history available.</p>
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting forwarding history...</p>
|
||||
<p *ngIf="(!forwardingHistoryEvents?.data || forwardingHistoryEvents?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_event']" mat-footer-row [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator *ngIf="errorMessage === ''" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap">
|
||||
<div class="p-2 error-border my-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
|
||||
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-md="row" fxFlex="100" fxLayoutAlign="space-between stretch" class="page-sub-title-container mt-2">
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch" class="mb-4">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS, 'mt-1': screenSize === screenSizeEnum.SM}">
|
||||
@ -15,51 +15,51 @@
|
||||
</mat-form-field> -->
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start start" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxLayoutAlign="start start" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableIn [dataSource]="routingPeersIncoming" matSort class="overflow-auto incoming-table">
|
||||
<table #tableIn mat-table matSort class="overflow-auto incoming-table" [dataSource]="routingPeersIncoming">
|
||||
<ng-container matColumnDef="channelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer?.channelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Events</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="totalAmount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.totalAmount | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.totalAmount | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="totalFee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.totalFee | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.totalFee | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_incoming_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No incoming routing peer available.</p>
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting incoming routing peers...</p>
|
||||
<p *ngIf="(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': routingPeersIncoming?.data && routingPeersIncoming?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_incoming_event']" mat-footer-row [ngClass]="{'display-none': routingPeersIncoming?.data && routingPeersIncoming?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator #paginatorIn [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="end stretch" class="mb-4">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}">
|
||||
@ -75,50 +75,50 @@
|
||||
</mat-form-field> -->
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableOut [dataSource]="routingPeersOutgoing" matSort class="overflow-auto outgoing-table">
|
||||
<table #tableOut mat-table matSort class="overflow-auto outgoing-table" [dataSource]="routingPeersOutgoing">
|
||||
<ng-container matColumnDef="channelId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer?.channelId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
|
||||
<td *matCellDef="let rPeer" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{rPeer?.alias}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Events</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="totalAmount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.totalAmount | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.totalAmount | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="totalFee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.totalFee | number}}</span></td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Fee (Sats)</th>
|
||||
<td *matCellDef="let rPeer" mat-cell><span fxLayoutAlign="end center">{{rPeer.totalFee | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_outgoing_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No outgoing routing peer available.</p>
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting outgoing routing peers...</p>
|
||||
<p *ngIf="(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': routingPeersOutgoing?.data && routingPeersOutgoing?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_outgoing_event']" mat-footer-row [ngClass]="{'display-none': routingPeersOutgoing?.data && routingPeersOutgoing?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
<mat-paginator #paginatorOut [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
|
||||
<fa-icon [icon]="faMapSigns" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faMapSigns"></fa-icon>
|
||||
<span class="page-title">Routing</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
|
||||
@ -8,7 +8,7 @@
|
||||
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="row" fxFlex="100">
|
||||
<nav mat-tab-nav-bar fxFlex="100" [tabPanel]="tabPanel">
|
||||
<div role="tab" mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" (click)="activeLink = link.link" routerLink="{{link.link}}">{{link.name}}</div>
|
||||
<div mat-tab-link *ngFor="let link of links" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
|
||||
<!-- <nav mat-tab-nav-bar fxFlex="100">
|
||||
|
||||
@ -4,37 +4,37 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Create Invoice</span>
|
||||
</div>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" default mat-button>X</button>
|
||||
<button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large">
|
||||
<form fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100" #addInvoiceForm="ngForm">
|
||||
<form #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput autoFocus [(ngModel)]="description" placeholder="Description" tabindex="2" name="description" required>
|
||||
<input matInput autoFocus placeholder="Description" tabindex="2" name="description" required [(ngModel)]="description">
|
||||
<mat-error *ngIf="!description">Description is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
|
||||
<mat-form-field fxFlex="40">
|
||||
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" [step]="100" [min]="1" tabindex="3" name="invValue">
|
||||
<input matInput placeholder="Amount" type="number" tabindex="3" name="invValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-hint>{{invoiceValueHint}}</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput [(ngModel)]="expiry" placeholder="Expiry" type="number" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" name="exp" tabindex="4">
|
||||
<input matInput placeholder="Expiry" type="number" name="exp" tabindex="4" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" [(ngModel)]="expiry">
|
||||
<span matSuffix>{{selTimeUnit | titlecase}} </span>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="26">
|
||||
<mat-select [value]="selTimeUnit" tabindex="5" name="timeUnit" (selectionChange)="onTimeUnitChange($event)">
|
||||
<mat-select tabindex="5" name="timeUnit" [value]="selTimeUnit" (selectionChange)="onTimeUnitChange($event)">
|
||||
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="100" class="alert alert-danger mt-1" *ngIf="invoiceError !== ''">
|
||||
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
|
||||
<div *ngIf="invoiceError !== ''" fxFlex="100" class="alert alert-danger mt-1">
|
||||
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
|
||||
<span *ngIf="invoiceError !== ''">{{invoiceError}}</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" class="mt-2" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-button color="primary" (click)="onAddInvoice(addInvoiceForm)" tabindex="8">Create Invoice</button>
|
||||
<button mat-button color="primary" tabindex="8" (click)="onAddInvoice(addInvoiceForm)">Create Invoice</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
|
||||
<div fxFlex="35" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap-large" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!invoice?.serialized || invoice?.serialized === ''" class="font-size-300">N/A</span>
|
||||
</div>
|
||||
<div fxFlex="65">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
|
||||
<span class="page-title">{{screenSize === screenSizeEnum.XS ? (newlyAdded ? 'Created' : 'Invoice') : (newlyAdded ? 'Invoice Created' : 'Invoice Information')}}</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
|
||||
<div fxLayout="column">
|
||||
<div fxFlex="30" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" class="modal-qr-code-container padding-gap" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
|
||||
<qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
|
||||
<span *ngIf="!invoice?.serialized || invoice?.serialized === ''" class="font-size-120">QR Code Not Applicable</span>
|
||||
</div>
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" [inset]="true" class="my-1"></mat-divider>
|
||||
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Requested</h4>
|
||||
@ -37,7 +37,7 @@
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!invoice?.amountSettled">
|
||||
<span *ngIf="invoice?.status !== 'unpaid' || !flgVersionCompatible">-</span>
|
||||
<mat-spinner [diameter]="20" *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible"></mat-spinner>
|
||||
<mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20"></mat-spinner>
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
@ -95,8 +95,8 @@
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="1">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
|
||||
<button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
|
||||
@ -1,100 +1,100 @@
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<form *ngIf="calledFrom === 'home'" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100" #addInvoiceForm="ngForm">
|
||||
<form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<input matInput [(ngModel)]="description" placeholder="Description" tabindex="2" name="description" required="true">
|
||||
<input matInput placeholder="Description" tabindex="2" name="description" required="true" [(ngModel)]="description">
|
||||
<mat-error *ngIf="!description">Description is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" [step]="100" [min]="1" tabindex="3" name="invValue" #invcVal="ngModel">
|
||||
<input #invcVal="ngModel" matInput placeholder="Amount" type="number" tabindex="3" name="invValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
|
||||
<span matSuffix> Sats </span>
|
||||
<mat-hint>{{invoiceValueHint}}</mat-hint>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row" class="mt-1">
|
||||
<button class="mr-1" mat-stroked-button color="primary" tabindex="9" type="reset" (click)="resetData()">Clear Field</button>
|
||||
<button mat-flat-button color="primary" (click)="onAddInvoice(addInvoiceForm)" tabindex="10">Create Invoice</button>
|
||||
<button mat-flat-button color="primary" tabindex="10" (click)="onAddInvoice(addInvoiceForm)">Create Invoice</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxLayout="row" *ngIf="calledFrom === 'transactions'">
|
||||
<button mat-flat-button color="primary" (click)="openCreateInvoiceModal()" tabindex="8">Create Invoice</button>
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="row">
|
||||
<button mat-flat-button color="primary" tabindex="8" (click)="openCreateInvoiceModal()">Create Invoice</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" *ngIf="calledFrom === 'transactions'">
|
||||
<div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
|
||||
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
|
||||
<span class="page-title">Invoices History</span>
|
||||
</div>
|
||||
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49">
|
||||
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()" name="filterBy">
|
||||
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
|
||||
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49">
|
||||
<input matInput [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()" name="filter" placeholder="Filter">
|
||||
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div [perfectScrollbar] fxLayout="column" fxFlex="100" class="table-container">
|
||||
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
|
||||
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<table #table mat-table fxFlex="100" matSort [dataSource]="invoices" [ngClass]="{'error-border': errorMessage !== ''}">
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<span *ngIf="invoice?.status === 'received'" class="dot green" matTooltip="Received" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
<span *ngIf="!invoice?.status || invoice?.status === 'expired' || invoice?.status === 'unknown'" class="dot red" matTooltip="Expired/Unknown" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date Created</th>
|
||||
<td mat-cell *matCellDef="let invoice">{{(invoice?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date Created</th>
|
||||
<td *matCellDef="let invoice" mat-cell>{{(invoice?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="expiresAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date Expiry</th>
|
||||
<td mat-cell *matCellDef="let invoice">{{((invoice?.expiresAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date Expiry</th>
|
||||
<td *matCellDef="let invoice" mat-cell>{{((invoice?.expiresAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="receivedAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date Settled</th>
|
||||
<td mat-cell *matCellDef="let invoice">{{((invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Date Settled</th>
|
||||
<td *matCellDef="let invoice" mat-cell>{{((invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nodeId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Node ID</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.nodeId}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.description}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="paymentHash">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
|
||||
<span class="ellipsis-child">{{invoice?.paymentHash}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Amount (Sats)</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<span fxLayoutAlign="end center">{{invoice?.amount ? (invoice?.amount | number:'1.0-0') : '-'}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amountSettled">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="p1-3"> Amount Settled (Sats)</th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" class="p1-3"> Amount Settled (Sats)</th>
|
||||
<td *matCellDef="let invoice" mat-cell>
|
||||
<span fxLayoutAlign="end center">{{invoice?.amountSettled ? (invoice?.amountSettled | number:'1.0-0') : '-'}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -102,7 +102,7 @@
|
||||
</mat-select>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let invoice" fxLayoutAlign="end center">
|
||||
<td *matCellDef="let invoice" mat-cell fxLayoutAlign="end center">
|
||||
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
|
||||
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
|
||||
<mat-select-trigger></mat-select-trigger>
|
||||
@ -113,17 +113,17 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_invoice">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<td *matFooterCellDef mat-footer-cellcolspan="4">
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No invoice available.</p>
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting invoices...</p>
|
||||
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_invoice']" [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr *matFooterRowDef="['no_invoice']" mat-footer-row [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
|
||||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
|
||||
<mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<span class="page-title">Payment Information</span>
|
||||
</div>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
|
||||
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content [perfectScrollbar] class="h-40 padding-gap-x-large" #scrollContainer>
|
||||
<mat-card-content #scrollContainer class="h-40 padding-gap-x-large" [perfectScrollbar]>
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="30">
|
||||
@ -47,17 +47,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row" *ngIf="description">
|
||||
<div *ngIf="description" fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
|
||||
<span class="foreground-secondary-text">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1" *ngIf="description"></mat-divider>
|
||||
<mat-divider *ngIf="description" class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel [expanded]="expansionOpen" (opened)="onExpansionOpen(true)" (closed)="onExpansionOpen(false)" class="flat-expansion-panel my-1" *ngFor="let part of payment.parts; index as i">
|
||||
<mat-expansion-panel *ngFor="let part of payment.parts; index as i" class="flat-expansion-panel my-1" [expanded]="expansionOpen" (opened)="onExpansionOpen(true)" (closed)="onExpansionOpen(false)">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<h4 fxFlex="30" fxLayoutAlign="start" class="font-bold-500">Part {{i + 1}}</h4>
|
||||
@ -102,7 +102,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="end center" class="padding-gap-x-large padding-gap-bottom-large">
|
||||
<button class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" [mat-dialog-close]="false" default>OK</button>
|
||||
<button class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" default [mat-dialog-close]="false">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user