Skip to content

Commit 4f3d3fd

Browse files
thecrypt0hunterthecrypt0hunter
authored
Add About Page (#185)
* Add logo to nav menu * Add about page
1 parent 7c66609 commit 4f3d3fd

6 files changed

Lines changed: 212 additions & 127 deletions

File tree

‎src/Features/Blockcore.Features.NodeHost/UI/Pages/About.razor‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@page "/about"
2+
3+
@using Blockcore.Utilities.Extensions
4+
5+
@inject IFullNode FullNode
6+
@inject NBitcoin.Network Network
7+
@inject NBitcoin.ChainIndexer ChainIndexer
8+
@inject Blockcore.Connection.IConnectionManager ConnectionManager
9+
@inject Blockcore.Interfaces.IInitialBlockDownloadState InitialBlockDownloadState
10+
@inject NavigationManager NavigationManager
11+
12+
@{
13+
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
14+
<h1 class="h2"><strong>About @this.Network.CoinTicker.ToUpper()</strong></h1>
15+
<div class="btn-toolbar mb-2 mb-md-0">
16+
<span class="float-right">
17+
<a class="btn btn-sm btn-primary mr-1" href="/docs/index.html" target="_blank" role="button"><span class="oi oi-code" aria-hidden="true"></span> Open API</a>
18+
<a class="btn btn-sm btn-primary mr-1" href="/ws-ui/index.html" target="_blank" role="button"><span class="oi oi-link-intact" aria-hidden="true"></span> Web Socket</a>
19+
<a class="btn btn-sm btn-primary mr-1" href="https://www.blockcore.net" target="_blank" role="button"><span class="oi oi-external-link" aria-hidden="true"></span> Blockcore</a>
20+
</span>
21+
</div>
22+
</div>
23+
24+
<div class="row mb-3">
25+
<div class="col-xl-12 col-sm-12 ">
26+
<div class="card">
27+
<div class="card-body">
28+
<div class="table-responsive">
29+
<h5 class="card-title">Node Information</h5>
30+
<table>
31+
<tbody>
32+
<tr>
33+
<td style="min-width: 11em">Agent name:</td>
34+
<td>@this.ConnectionManager.ConnectionSettings.Agent</td>
35+
</tr>
36+
<tr>
37+
<td style="min-width: 11em">Node version:</td>
38+
<td>@this.FullNode.Version?.ToString()</td>
39+
</tr>
40+
<tr>
41+
<td style="min-width: 11em">Protocol version:</td>
42+
<td>@this.Network.Consensus.ConsensusFactory.Protocol.ProtocolVersion</td>
43+
</tr>
44+
<tr>
45+
<td style="min-width: 11em">Current tip Hash:</td>
46+
<td>@this.ChainIndexer.Tip.HashBlock</td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
}

‎src/Features/Blockcore.Features.NodeHost/UI/Pages/Index.razor‎

Lines changed: 100 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -10,166 +10,141 @@
1010
@inject NavigationManager NavigationManager
1111
@inject ModalService ModalService
1212

13+
@{
1314
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
1415
<h1 class="h2"><strong>@this.Network.CoinTicker.ToUpper() Network</strong></h1>
1516
<div class="btn-toolbar mb-2 mb-md-0">
16-
<button class="btn btn-sm btn-primary mr-1" @onclick="AddNode">
17-
<span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
18-
<button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }">
19-
<span class="oi oi-list" aria-hidden="true"></span> View Logs</button>
20-
<button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }">
21-
<span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown</button>
17+
<button class="btn btn-sm btn-primary mr-1" @onclick="AddNode"><span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
18+
<button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }"><span class="oi oi-list" aria-hidden="true"></span> View Logs</button>
19+
<button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }"><span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown</button>
2220
</div>
2321
</div>
24-
25-
@{
26-
<div class="row mb-3">
27-
<div class="col-xl-3 col-sm-6 ">
28-
<div class="card">
29-
<div class="card-body">
30-
<div class="row">
31-
<div class="col-9">
32-
<div class="d-flex align-items-center align-self-start">
33-
<h3 class="text-success mb-0">@this.Network.CoinTicker.ToUpper()</h3>
34-
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
35-
</div>
36-
</div>
37-
<div class="col-3">
38-
<div class="icon icon-box-success ">
39-
<span class="mdi mdi-arrow-top-right icon-item"></span>
40-
</div>
22+
<div class="row mb-3">
23+
<div class="col-xl-3 col-sm-6 ">
24+
<div class="card">
25+
<div class="card-body">
26+
<div class="row">
27+
<div class="col-9">
28+
<div class="d-flex align-items-center align-self-start">
29+
<h3 class="text-success mb-0">@this.Network.CoinTicker.ToUpper()</h3>
30+
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
4131
</div>
4232
</div>
43-
<h6 class="text-muted font-weight-normal">Network</h6>
44-
</div>
45-
</div>
46-
</div>
47-
<div class="col-xl-3 col-sm-6 ">
48-
<div class="card">
49-
<div class="card-body">
50-
<div class="row">
51-
<div class="col-9">
52-
<div class="d-flex align-items-center align-self-start">
53-
<h3 class="text-success mb-0">@this.ConnectionManager.ConnectedPeers.Count()</h3>
54-
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
55-
</div>
56-
</div>
57-
<div class="col-3">
58-
<div class="icon icon-box-success ">
59-
<span class="mdi mdi-arrow-top-right icon-item"></span>
60-
</div>
33+
<div class="col-3">
34+
<div class="icon icon-box-success ">
35+
<span class="mdi mdi-arrow-top-right icon-item"></span>
6136
</div>
6237
</div>
63-
<h6 class="text-muted font-weight-normal">Peers</h6>
6438
</div>
39+
<h6 class="text-muted font-weight-normal">Network</h6>
6540
</div>
6641
</div>
67-
<div class="col-xl-3 col-sm-6 ">
68-
<div class="card">
69-
<div class="card-body">
70-
<div class="row">
71-
<div class="col-9">
72-
<div class="d-flex align-items-center align-self-start">
73-
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
74-
{
75-
<h3 class="oi oi-circle-x text-danger" aria-hidden="true"></h3>
76-
}
77-
else
78-
{
79-
<h3 class="oi oi-circle-check text-success" aria-hidden="true"></h3>
80-
}
81-
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
82-
</div>
42+
</div>
43+
<div class="col-xl-3 col-sm-6 ">
44+
<div class="card">
45+
<div class="card-body">
46+
<div class="row">
47+
<div class="col-9">
48+
<div class="d-flex align-items-center align-self-start">
49+
<h3 class="text-success mb-0">@this.ConnectionManager.ConnectedPeers.Count()</h3>
50+
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
8351
</div>
84-
<div class="col-3">
85-
<div class="icon icon-box-success">
86-
<span class="mdi mdi-arrow-top-right icon-item"></span>
87-
</div>
52+
</div>
53+
<div class="col-3">
54+
<div class="icon icon-box-success ">
55+
<span class="mdi mdi-arrow-top-right icon-item"></span>
8856
</div>
8957
</div>
90-
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
91-
{
92-
<h6 class="text-danger font-weight-normal">Chain Syncing</h6>
93-
} else {
94-
<h6 class="text-muted font-weight-normal">Chain Synced</h6>
95-
}
9658
</div>
59+
<h6 class="text-muted font-weight-normal">Peers</h6>
9760
</div>
9861
</div>
99-
<div class="col-xl-3 col-sm-6 ">
100-
<div class="card">
101-
<div class="card-body">
102-
<div class="row">
103-
<div class="col-9">
104-
<div class="d-flex align-items-center align-self-start">
105-
<h3 class="text-success mb-0">@this.ChainIndexer.Tip.Height</h3>
106-
<p class="text-danger ml-2 mb-0 font-weight-medium"></p>
107-
</div>
62+
</div>
63+
<div class="col-xl-3 col-sm-6 ">
64+
<div class="card">
65+
<div class="card-body">
66+
<div class="row">
67+
<div class="col-9">
68+
<div class="d-flex align-items-center align-self-start">
69+
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
70+
{
71+
<h3 class="oi oi-circle-x text-danger" aria-hidden="true"></h3>
72+
}
73+
else
74+
{
75+
<h3 class="oi oi-circle-check text-success" aria-hidden="true"></h3>
76+
}
77+
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
10878
</div>
109-
<div class="col-3">
110-
<div class="icon icon-box-danger">
111-
<span class="mdi mdi-arrow-bottom-left icon-item"></span>
112-
</div>
79+
</div>
80+
<div class="col-3">
81+
<div class="icon icon-box-success">
82+
<span class="mdi mdi-arrow-top-right icon-item"></span>
11383
</div>
11484
</div>
115-
<h6 class="text-muted font-weight-normal">Block Height</h6>
11685
</div>
86+
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
87+
{
88+
<h6 class="text-danger font-weight-normal">Chain Syncing</h6>
89+
} else {
90+
<h6 class="text-muted font-weight-normal">Chain Synced</h6>
91+
}
11792
</div>
11893
</div>
11994
</div>
120-
121-
<div class="row mb-3">
122-
<div class="col-xl-12 col-sm-12 ">
123-
<div class="card">
124-
<div class="card-body">
125-
<div class="table-responsive">
126-
<table>
127-
<tbody>
128-
<tr>
129-
<td style="min-width: 11em">Current tip Hash:</td>
130-
<td>@this.ChainIndexer.Tip.HashBlock</td>
131-
</tr>
132-
</tbody>
133-
</table>
95+
<div class="col-xl-3 col-sm-6 ">
96+
<div class="card">
97+
<div class="card-body">
98+
<div class="row">
99+
<div class="col-9">
100+
<div class="d-flex align-items-center align-self-start">
101+
<h3 class="text-success mb-0">@this.ChainIndexer.Tip.Height</h3>
102+
<p class="text-danger ml-2 mb-0 font-weight-medium"></p>
103+
</div>
104+
</div>
105+
<div class="col-3">
106+
<div class="icon icon-box-danger">
107+
<span class="mdi mdi-arrow-bottom-left icon-item"></span>
108+
</div>
134109
</div>
135110
</div>
111+
<h6 class="text-muted font-weight-normal">Block Height</h6>
136112
</div>
137113
</div>
138114
</div>
139-
140-
<div class="row">
141-
<div class="col-xl-12 col-sm-12 ">
142-
<div class="card">
143-
<div class="mx-3 mt-3">
144-
<h4 class="card-title">Peers</h4>
145-
<div class="table-responsive small">
146-
<table class="table table-border-bottom table-striped table-sm table-hover">
147-
<thead class="thead">
115+
</div>
116+
<div class="row">
117+
<div class="col-xl-12 col-sm-12 ">
118+
<div class="card">
119+
<div class="mx-3 mt-3">
120+
<h4 class="card-title">Peers</h4>
121+
<div class="table-responsive small">
122+
<table class="table table-border-bottom table-striped table-sm table-hover">
123+
<thead class="thead">
124+
<tr>
125+
<th class="text-primary"><strong>IP ADDRESS</strong></th>
126+
<th class="text-primary"><strong>CONNECTION</strong></th>
127+
<th class="text-primary"><strong>AGENT</strong></th>
128+
<th class="text-primary"><strong>VERSION</strong></th>
129+
</tr>
130+
</thead>
131+
<tbody>
132+
@foreach (var peer in this.ConnectionManager.ConnectedPeers)
133+
{
148134
<tr>
149-
<th class="text-primary"><strong>IP ADDRESS</strong></th>
150-
<th class="text-primary"><strong>CONNECTION</strong></th>
151-
<th class="text-primary"><strong>AGENT</strong></th>
152-
<th class="text-primary"><strong>VERSION</strong></th>
135+
<td class="align-middle"><h5 class="oi oi-monitor" aria-hidden="true"></h5> @peer.RemoteSocketEndpoint.ToString()</td>
136+
<td class="align-middle">@(peer.Inbound ? "Inbound" : "Outbound") </td>
137+
<td class="align-middle">@peer.PeerVersion?.UserAgent</td>
138+
<td class="align-middle">@peer.PeerVersion?.Version</td>
153139
</tr>
154-
</thead>
155-
<tbody>
156-
@foreach (var peer in this.ConnectionManager.ConnectedPeers)
157-
{
158-
<tr>
159-
<td class="align-middle"><h5 class="oi oi-monitor" aria-hidden="true"></h5> @peer.RemoteSocketEndpoint.ToString()</td>
160-
<td class="align-middle">@(peer.Inbound ? "Inbound" : "Outbound") </td>
161-
<td class="align-middle">@peer.PeerVersion?.UserAgent</td>
162-
<td class="align-middle">@peer.PeerVersion?.Version</td>
163-
</tr>
164-
}
165-
</tbody>
166-
</table>
167-
</div>
140+
}
141+
</tbody>
142+
</table>
168143
</div>
169144
</div>
170145
</div>
171146
</div>
172-
147+
</div>
173148
}
174149
@code
175150
{
@@ -185,4 +160,4 @@
185160
{
186161
ModalService.Show("Add Node", typeof(Modal.ModalAddNode));
187162
}
188-
}
163+
}

‎src/Features/Blockcore.Features.NodeHost/UI/Pages/_Host.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<head>
1313
<meta charset="utf-8" />
1414
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15-
<title>Dashboard</title>
15+
<title>@this.Network.CoinTicker Dashboard</title>
1616
<base href="~/" />
1717
<link rel="stylesheet" href="css/bootstrap/darkstrap.min.css" />
1818
<link rel="stylesheet" href="css/site.css" />

‎src/Features/Blockcore.Features.NodeHost/UI/Shared/Dropdown.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@typeparam TItem
2+
<div class="dropdown dropleft">
3+
<button class="btn btn-primary btn-sm dropdown-toggle mr-1" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show "
4+
aria-haspopup="true" aria-expanded="false">
5+
@Tip
6+
</button>
7+
<CascadingValue name="Dropdown" Value="@this">
8+
<div class="dropdown-menu @(show? "show":"")" >
9+
@ChildContent
10+
</div>
11+
</CascadingValue>
12+
</div>
13+
14+
@code {
15+
[Parameter]
16+
public RenderFragment InitialTip{get;set;}
17+
[Parameter]
18+
public RenderFragment ChildContent{get;set;}
19+
[Parameter]
20+
public EventCallback<TItem> OnSelected {get;set;}
21+
22+
private bool show = false;
23+
private RenderFragment Tip ;
24+
25+
protected override void OnInitialized(){ this.Tip = InitialTip; }
26+
public async Task HandleSelect(TItem item, RenderFragment<TItem> contentFragment)
27+
{
28+
this.Tip= contentFragment.Invoke(item);
29+
this.show=false;
30+
StateHasChanged();
31+
await this.OnSelected.InvokeAsync(item);
32+
}
33+
}

‎src/Features/Blockcore.Features.NodeHost/UI/Shared/DropdownListItem.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@typeparam TItem
2+
<a class="dropdown-item" Item="@Item" @onclick="e=> Dropdown.HandleSelect(Item, ChildContent)" >@ChildContent(Item)</a>
3+
4+
@code {
5+
[CascadingParameter(Name="Dropdown")]
6+
public Dropdown<TItem> Dropdown {get;set;}
7+
8+
[Parameter]
9+
public TItem Item{get;set;}
10+
[Parameter]
11+
public RenderFragment<TItem> ChildContent {get;set;}
12+
}

0 commit comments

Comments
 (0)