Skip to content

Commit

Permalink
Add About Page (#185)
Browse files Browse the repository at this point in the history
* Add logo to nav menu

* Add about page
  • Loading branch information
thecrypt0hunter authored Jul 17, 2020
1 parent 7c66609 commit 4f3d3fd
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 127 deletions.
55 changes: 55 additions & 0 deletions src/Features/Blockcore.Features.NodeHost/UI/Pages/About.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
@page "/about"

@using Blockcore.Utilities.Extensions

@inject IFullNode FullNode
@inject NBitcoin.Network Network
@inject NBitcoin.ChainIndexer ChainIndexer
@inject Blockcore.Connection.IConnectionManager ConnectionManager
@inject Blockcore.Interfaces.IInitialBlockDownloadState InitialBlockDownloadState
@inject NavigationManager NavigationManager

@{
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2"><strong>About @this.Network.CoinTicker.ToUpper()</strong></h1>
<div class="btn-toolbar mb-2 mb-md-0">
<span class="float-right">
<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>
<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>
<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>
</span>
</div>
</div>

<div class="row mb-3">
<div class="col-xl-12 col-sm-12 ">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<h5 class="card-title">Node Information</h5>
<table>
<tbody>
<tr>
<td style="min-width: 11em">Agent name:</td>
<td>@this.ConnectionManager.ConnectionSettings.Agent</td>
</tr>
<tr>
<td style="min-width: 11em">Node version:</td>
<td>@this.FullNode.Version?.ToString()</td>
</tr>
<tr>
<td style="min-width: 11em">Protocol version:</td>
<td>@this.Network.Consensus.ConsensusFactory.Protocol.ProtocolVersion</td>
</tr>
<tr>
<td style="min-width: 11em">Current tip Hash:</td>
<td>@this.ChainIndexer.Tip.HashBlock</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
}
225 changes: 100 additions & 125 deletions src/Features/Blockcore.Features.NodeHost/UI/Pages/Index.razor
Original file line number Diff line number Diff line change
Expand Up @@ -10,166 +10,141 @@
@inject NavigationManager NavigationManager
@inject ModalService ModalService

@{
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2"><strong>@this.Network.CoinTicker.ToUpper() Network</strong></h1>
<div class="btn-toolbar mb-2 mb-md-0">
<button class="btn btn-sm btn-primary mr-1" @onclick="AddNode">
<span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
<button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }">
<span class="oi oi-list" aria-hidden="true"></span> View Logs</button>
<button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }">
<span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown</button>
<button class="btn btn-sm btn-primary mr-1" @onclick="AddNode"><span class="oi oi-plus" aria-hidden="true"></span> Add Node</button>
<button class="btn btn-sm btn-primary mr-1" @onclick="() => { NavigateToLogs(); }"><span class="oi oi-list" aria-hidden="true"></span> View Logs</button>
<button class="btn btn-sm btn-danger" @onclick="() => { Shutdown(); }"><span class="oi oi-power-standby" aria-hidden="true"></span> Shutdown</button>
</div>
</div>

@{
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.Network.CoinTicker.ToUpper()</h3>
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<div class="col-3">
<div class="icon icon-box-success ">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.Network.CoinTicker.ToUpper()</h3>
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<h6 class="text-muted font-weight-normal">Network</h6>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.ConnectionManager.ConnectedPeers.Count()</h3>
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<div class="col-3">
<div class="icon icon-box-success ">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
<div class="col-3">
<div class="icon icon-box-success ">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
</div>
<h6 class="text-muted font-weight-normal">Peers</h6>
</div>
<h6 class="text-muted font-weight-normal">Network</h6>
</div>
</div>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
{
<h3 class="oi oi-circle-x text-danger" aria-hidden="true"></h3>
}
else
{
<h3 class="oi oi-circle-check text-success" aria-hidden="true"></h3>
}
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.ConnectionManager.ConnectedPeers.Count()</h3>
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
<div class="col-3">
<div class="icon icon-box-success">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
</div>
<div class="col-3">
<div class="icon icon-box-success ">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
</div>
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
{
<h6 class="text-danger font-weight-normal">Chain Syncing</h6>
} else {
<h6 class="text-muted font-weight-normal">Chain Synced</h6>
}
</div>
<h6 class="text-muted font-weight-normal">Peers</h6>
</div>
</div>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.ChainIndexer.Tip.Height</h3>
<p class="text-danger ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
{
<h3 class="oi oi-circle-x text-danger" aria-hidden="true"></h3>
}
else
{
<h3 class="oi oi-circle-check text-success" aria-hidden="true"></h3>
}
<p class="text-success ml-2 mb-0 font-weight-medium"></p>
</div>
<div class="col-3">
<div class="icon icon-box-danger">
<span class="mdi mdi-arrow-bottom-left icon-item"></span>
</div>
</div>
<div class="col-3">
<div class="icon icon-box-success">
<span class="mdi mdi-arrow-top-right icon-item"></span>
</div>
</div>
<h6 class="text-muted font-weight-normal">Block Height</h6>
</div>
@if (this.InitialBlockDownloadState.IsInitialBlockDownload())
{
<h6 class="text-danger font-weight-normal">Chain Syncing</h6>
} else {
<h6 class="text-muted font-weight-normal">Chain Synced</h6>
}
</div>
</div>
</div>

<div class="row mb-3">
<div class="col-xl-12 col-sm-12 ">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table>
<tbody>
<tr>
<td style="min-width: 11em">Current tip Hash:</td>
<td>@this.ChainIndexer.Tip.HashBlock</td>
</tr>
</tbody>
</table>
<div class="col-xl-3 col-sm-6 ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center align-self-start">
<h3 class="text-success mb-0">@this.ChainIndexer.Tip.Height</h3>
<p class="text-danger ml-2 mb-0 font-weight-medium"></p>
</div>
</div>
<div class="col-3">
<div class="icon icon-box-danger">
<span class="mdi mdi-arrow-bottom-left icon-item"></span>
</div>
</div>
</div>
<h6 class="text-muted font-weight-normal">Block Height</h6>
</div>
</div>
</div>

<div class="row">
<div class="col-xl-12 col-sm-12 ">
<div class="card">
<div class="mx-3 mt-3">
<h4 class="card-title">Peers</h4>
<div class="table-responsive small">
<table class="table table-border-bottom table-striped table-sm table-hover">
<thead class="thead">
</div>
<div class="row">
<div class="col-xl-12 col-sm-12 ">
<div class="card">
<div class="mx-3 mt-3">
<h4 class="card-title">Peers</h4>
<div class="table-responsive small">
<table class="table table-border-bottom table-striped table-sm table-hover">
<thead class="thead">
<tr>
<th class="text-primary"><strong>IP ADDRESS</strong></th>
<th class="text-primary"><strong>CONNECTION</strong></th>
<th class="text-primary"><strong>AGENT</strong></th>
<th class="text-primary"><strong>VERSION</strong></th>
</tr>
</thead>
<tbody>
@foreach (var peer in this.ConnectionManager.ConnectedPeers)
{
<tr>
<th class="text-primary"><strong>IP ADDRESS</strong></th>
<th class="text-primary"><strong>CONNECTION</strong></th>
<th class="text-primary"><strong>AGENT</strong></th>
<th class="text-primary"><strong>VERSION</strong></th>
<td class="align-middle"><h5 class="oi oi-monitor" aria-hidden="true"></h5> @peer.RemoteSocketEndpoint.ToString()</td>
<td class="align-middle">@(peer.Inbound ? "Inbound" : "Outbound") </td>
<td class="align-middle">@peer.PeerVersion?.UserAgent</td>
<td class="align-middle">@peer.PeerVersion?.Version</td>
</tr>
</thead>
<tbody>
@foreach (var peer in this.ConnectionManager.ConnectedPeers)
{
<tr>
<td class="align-middle"><h5 class="oi oi-monitor" aria-hidden="true"></h5> @peer.RemoteSocketEndpoint.ToString()</td>
<td class="align-middle">@(peer.Inbound ? "Inbound" : "Outbound") </td>
<td class="align-middle">@peer.PeerVersion?.UserAgent</td>
<td class="align-middle">@peer.PeerVersion?.Version</td>
</tr>
}
</tbody>
</table>
</div>
}
</tbody>
</table>
</div>
</div>
</div>
</div>

</div>
}
@code
{
Expand All @@ -185,4 +160,4 @@
{
ModalService.Show("Add Node", typeof(Modal.ModalAddNode));
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard</title>
<title>@this.Network.CoinTicker Dashboard</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/darkstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
Expand Down
33 changes: 33 additions & 0 deletions src/Features/Blockcore.Features.NodeHost/UI/Shared/Dropdown.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@typeparam TItem
<div class="dropdown dropleft">
<button class="btn btn-primary btn-sm dropdown-toggle mr-1" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show "
aria-haspopup="true" aria-expanded="false">
@Tip
</button>
<CascadingValue name="Dropdown" Value="@this">
<div class="dropdown-menu @(show? "show":"")" >
@ChildContent
</div>
</CascadingValue>
</div>

@code {
[Parameter]
public RenderFragment InitialTip{get;set;}
[Parameter]
public RenderFragment ChildContent{get;set;}
[Parameter]
public EventCallback<TItem> OnSelected {get;set;}

private bool show = false;
private RenderFragment Tip ;

protected override void OnInitialized(){ this.Tip = InitialTip; }
public async Task HandleSelect(TItem item, RenderFragment<TItem> contentFragment)
{
this.Tip= contentFragment.Invoke(item);
this.show=false;
StateHasChanged();
await this.OnSelected.InvokeAsync(item);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@typeparam TItem
<a class="dropdown-item" Item="@Item" @onclick="e=> Dropdown.HandleSelect(Item, ChildContent)" >@ChildContent(Item)</a>

@code {
[CascadingParameter(Name="Dropdown")]
public Dropdown<TItem> Dropdown {get;set;}

[Parameter]
public TItem Item{get;set;}
[Parameter]
public RenderFragment<TItem> ChildContent {get;set;}
}
Loading

0 comments on commit 4f3d3fd

Please sign in to comment.