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

[menu] write menu component with hardcoded values

Browse Source
This commit is contained in:
nymkappa 2023-08-17 18:51:39 +02:00
parent 2c9e20dd87
commit 23b871631a
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
7 changed files with 170 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/master-page/master-page.component.html
View File

@ -1,5 +1,7 @@
<app-menu></app-menu>
<ng-container *ngIf="{ val: network$ | async } as network">
<header *ngIf="headerVisible">
<header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
<ng-template [ngIf]="subdomain">

17
frontend/src/app/components/menu/menu.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
<div class="pt-3 pl-4 pr-4">
<nav>
<div *ngFor="let group of menuGroups">
<h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
<span>{{ group.title }}</span>
</h6>
<ul class="nav flex-column" *ngFor="let item of group.items">
<li class="nav-item d-flex justify-content-start align-items-center" (click)="navOpen = false;">
<fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
<a class="nav-link" routerLinkActive="active" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

46
frontend/src/app/components/menu/menu.component.scss Normal file
View File

@ -0,0 +1,46 @@
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 65px;
left: 0;
background-color: #1d1f31;
overflow-x: hidden;
box-shadow: 0px 0px 15px 0px #000;
overflow-y: scroll;
height: 100vh;
@media (max-width: 991px) {
top: 80px;
};
@media (max-width: 572px) {
top: 120px;
}
}
.sidenav.open {
width: 235px;
@media (max-width: 400px) {
width: 100%;
}
}
.sidenav.close {
width: 0px;
}
.sidenav a {
text-decoration: none;
font-size: 20x;
color: lightgray;
margin-left: 20px;
display: block;
}
.sidenav a:hover {
color: white;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

23
frontend/src/app/components/menu/menu.component.ts Normal file
View File

@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { MenuGroup } from '../../interfaces/services.interface';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
navOpen: boolean = true;
userMenuGroups$: Observable<MenuGroup[]> | undefined;
constructor(
private apiService: ApiService
) {}
ngOnInit(): void {
this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
}
}

13
frontend/src/app/interfaces/services.interface.ts Normal file
View File

@ -0,0 +1,13 @@
import { IconName } from '@fortawesome/fontawesome-common-types';
export type MenuItem = {
title: string;
i18n: string;
faIcon: IconName;
link: string;
};
export type MenuGroup = {
title: string;
i18n: string;
items: MenuItem[];
}

50
frontend/src/app/services/api.service.ts
View File

@ -7,6 +7,7 @@ import { StateService } from './state.service';
import { WebsocketResponse } from '../interfaces/websocket.interface';
import { Outspend, Transaction } from '../interfaces/electrs.interface';
import { Conversion } from './price.service';
import { MenuGroup } from '../interfaces/services.interface';
const SERVICES_API_PREFIX = `/api/v1/services`;
@ -334,9 +335,56 @@ export class ApiService {
/**
* Services
*/
getNodeOwner$(publicKey: string) {
getNodeOwner$(publicKey: string): Observable<any> {
let params = new HttpParams()
.set('node_public_key', publicKey);
return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
}
getUserMenuGroups$(): Observable<MenuGroup[]> {
const auth = JSON.parse(localStorage.getItem('auth') || '');
if (!auth) {
return of(null);
}
return of([
{
title: 'Lightning',
i18n: '',
items: [
{
title: 'Nodes',
i18n: '',
faIcon: 'network-wired',
link: '/services/lightning/nodes'
}
]
},
{
title: 'Enterprise',
i18n: '',
items: [
{
title: 'Settings',
i18n: '',
faIcon: 'id-card-alt',
link: '/services/enterprise/settings'
},
{
title: 'IP Whitelist',
i18n: '',
faIcon: 'check-circle',
link: '/services/enterprise/ip-whitelist'
}
]
}
]);
// return this.httpClient.get<MenuGroup[]>(`${SERVICES_API_PREFIX}/account`, {
// headers: {
// 'Authorization': auth.token
// }
// });
}
}

20
frontend/src/app/shared/shared.module.ts
View File

@ -4,9 +4,10 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft } from '@fortawesome/free-solid-svg-icons';
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MasterPageComponent } from '../components/master-page/master-page.component';
import { MenuComponent } from '../components/menu/menu.component';
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
@ -135,6 +136,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
AmountComponent,
AboutComponent,
MasterPageComponent,
MenuComponent,
PreviewTitleComponent,
BisqMasterPageComponent,
LiquidMasterPageComponent,
@ -220,6 +222,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
],
exports: [
MasterPageComponent,
MenuComponent,
RouterModule,
ReactiveFormsModule,
NgbNavModule,
@ -359,5 +362,20 @@ export class SharedModule {
library.addIcons(faQrcode);
library.addIcons(faArrowRightArrowLeft);
library.addIcons(faExchangeAlt);
library.addIcons(faList);
library.addIcons(faFastForward);
library.addIcons(faWallet);
library.addIcons(faUserClock);
library.addIcons(faWrench);
library.addIcons(faUserFriends);
library.addIcons(faQuestionCircle);
library.addIcons(faHistory);
library.addIcons(faSignOutAlt);
library.addIcons(faKey);
library.addIcons(faSuitcase);
library.addIcons(faIdCardAlt);
library.addIcons(faNetworkWired);
library.addIcons(faUserCheck);
library.addIcons(faCircleCheck);
}
}