machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2548 from mempool/simon/block-search-result

Browse Source 
Suggest block height in search result
This commit is contained in:
wiz 2022-09-19 06:24:42 +09:00 committed by GitHub
commit 72bed3b062
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/search-form/search-form.component.html
View File

@ -3,7 +3,7 @@
<div class="search-box-container mr-2">
<input (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Search the full Bitcoin ecosystem">
<app-search-results #searchResults [results]="typeAhead$ | async" [searchTerm]="searchForm.get('searchText').value" (selectedResult)="selectedResult($event)"></app-search-results>
<app-search-results #searchResults [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
</div>
<div>

18
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -74,6 +74,7 @@ export class SearchFormComponent implements OnInit {
switchMap((text) => {
if (!text.length) {
return of([
'',
[],
{
nodes: [],
@ -84,11 +85,14 @@ export class SearchFormComponent implements OnInit {
this.isTypeaheading$.next(true);
if (!this.stateService.env.LIGHTNING) {
return zip(
of(text),
this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
[{ nodes: [], channels: [] }]
[{ nodes: [], channels: [] }],
of(this.regexBlockheight.test(text)),
);
}
return zip(
of(text),
this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
this.apiService.lightningSearch$(text).pipe(catchError(() => of({
nodes: [],
@ -102,10 +106,12 @@ export class SearchFormComponent implements OnInit {
return result[0].map((address: string) => 'B' + address);
}
return {
addresses: result[0],
nodes: result[1].nodes,
channels: result[1].channels,
totalResults: result[0].length + result[1].nodes.length + result[1].channels.length,
searchText: result[0],
blockHeight: this.regexBlockheight.test(result[0]) ? [parseInt(result[0], 10)] : [],
addresses: result[1],
nodes: result[2].nodes,
channels: result[2].channels,
totalResults: result[1].length + result[2].nodes.length + result[2].channels.length,
};
})
);
@ -121,6 +127,8 @@ export class SearchFormComponent implements OnInit {
selectedResult(result: any) {
if (typeof result === 'string') {
this.search(result);
} else if (typeof result === 'number') {
this.navigate('/block/', result.toString());
} else if (result.alias) {
this.navigate('/lightning/node/', result.public_key);
} else if (result.short_id) {

20
frontend/src/app/components/search-form/search-results/search-results.component.html
View File

@ -1,25 +1,31 @@
<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.addresses.length && !results.nodes.length && !results.channels.length">
<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.blockHeight.length && !results.addresses.length && !results.nodes.length && !results.channels.length">
<ng-template [ngIf]="results.blockHeight.length">
<div class="card-title">Bitcoin Block Height</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
Go to "{{ results.searchText }}"
</button>
</ng-template>
<ng-template [ngIf]="results.addresses.length">
<div class="card-title" *ngIf="stateService.env.LIGHTNING">Bitcoin Addresses</div>
<ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
<button (click)="clickItem(i)" [class.active]="i === activeIdx" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="searchTerm"></ngb-highlight>
<button (click)="clickItem(results.blockHeight.length + i)" [class.active]="(results.blockHeight.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
</button>
</ng-template>
</ng-template>
<ng-template [ngIf]="results.nodes.length">
<div class="card-title">Lightning Nodes</div>
<ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
<button (click)="clickItem(results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="node.alias" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
<button (click)="clickItem(results.blockHeight.length + results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.blockHeight.length + results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="node.alias" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
</button>
</ng-template>
</ng-template>
<ng-template [ngIf]="results.channels.length">
<div class="card-title">Lightning Channels</div>
<ng-template ngFor [ngForOf]="results.channels" let-channel let-i="index">
<button (click)="clickItem(results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2" [class.active]="results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="channel.short_id" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
<button (click)="clickItem(results.blockHeight.length + results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2" [class.active]="results.blockHeight.length + results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="channel.short_id" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
</button>
</ng-template>
</ng-template>

9
frontend/src/app/components/search-form/search-results/search-results.component.ts
View File

@ -8,7 +8,6 @@ import { StateService } from 'src/app/services/state.service';
})
export class SearchResultsComponent implements OnChanges {
@Input() results: any = {};
@Input() searchTerm = '';
@Output() selectedResult = new EventEmitter();
isMobile = (window.innerWidth <= 767.98);
@ -16,12 +15,14 @@ export class SearchResultsComponent implements OnChanges {
activeIdx = 0;
focusFirst = true;
constructor(public stateService: StateService) { }
constructor(
public stateService: StateService,
) { }
ngOnChanges() {
this.activeIdx = 0;
if (this.results) {
this.resultsFlattened = [...this.results.addresses, ...this.results.nodes, ...this.results.channels];
this.resultsFlattened = [...this.results.blockHeight, ...this.results.addresses, ...this.results.nodes, ...this.results.channels];
}
}
@ -47,7 +48,7 @@ export class SearchResultsComponent implements OnChanges {
if (this.resultsFlattened[this.activeIdx]) {
this.selectedResult.emit(this.resultsFlattened[this.activeIdx]);
} else {
this.selectedResult.emit(this.searchTerm);
this.selectedResult.emit(this.results.searchText);
}
this.results = null;
break;