Improve voting wallet status aesthetics.
This commit is contained in:
Jamie Holdstock
Jamie Holdstock
parent
e05ced391a
commit
851d3137e5
@ -2,6 +2,7 @@ package webapi
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"strings"
|
||||
"time"
|
||||
)
|
||||
|
||||
@ -26,3 +27,9 @@ func blockURL(blockExplorerURL string) func(int64) string {
|
||||
func dateTime(t int64) string {
|
||||
return time.Unix(t, 0).Format("2 Jan 2006 15:04:05 MST")
|
||||
}
|
||||
|
||||
func stripWss(input string) string {
|
||||
input = strings.ReplaceAll(input, "wss://", "")
|
||||
input = strings.ReplaceAll(input, "/ws", "")
|
||||
return input
|
||||
}
|
||||
|
||||
@ -107,8 +107,8 @@ footer .code {
|
||||
.block__content th {
|
||||
font-weight: normal;
|
||||
padding-right: 15px;
|
||||
color: #495057;
|
||||
background-color: #e9ecef;
|
||||
color: #091440;
|
||||
background-color: #edeff1;
|
||||
}
|
||||
|
||||
.block__content table td {
|
||||
@ -121,12 +121,6 @@ footer .code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.status-good{
|
||||
background-color: #C4ECCA;
|
||||
}
|
||||
td.status-bad{
|
||||
background-color: #FEB8A5;
|
||||
}
|
||||
|
||||
.ticket-table th {
|
||||
text-align: right;
|
||||
@ -136,7 +130,34 @@ td.status-bad{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.status-table th,
|
||||
.status-table td {
|
||||
|
||||
#status-table th,
|
||||
#status-table td {
|
||||
border: 1px solid #edeff1;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
#status-table .center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#status-table .status {
|
||||
height: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
#status-table .good {
|
||||
background: url(/public/images/success-icon.svg) no-repeat center center;
|
||||
}
|
||||
|
||||
#status-table .bad {
|
||||
background: url(/public/images/error-icon.svg) no-repeat left center;
|
||||
}
|
||||
|
||||
#status-table .with-text {
|
||||
padding-left: 40px;
|
||||
}
|
||||
7
webapi/public/images/error-icon.svg
Normal file
7
webapi/public/images/error-icon.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.28047 23.8632L13.2056 5.03628C13.3885 4.72097 13.6504 4.45935 13.9652 4.27752C14.2801 4.09569 14.6369 4 15 4C15.3631 4 15.7199 4.09569 16.0348 4.27752C16.3496 4.45935 16.6115 4.72097 16.7944 5.03628L27.7195 23.8632C27.9026 24.1804 27.9993 24.5405 28 24.9072C28.0007 25.274 27.9052 25.6344 27.7233 25.9523C27.5414 26.2703 27.2794 26.5345 26.9637 26.7184C26.648 26.9023 26.2896 26.9994 25.9247 27H4.07435C3.70949 26.9992 3.35127 26.902 3.03567 26.718C2.72007 26.534 2.45821 26.2698 2.27642 25.9519C2.09462 25.634 1.99929 25.2736 2 24.907C2.00072 24.5403 2.09744 24.1803 2.28047 23.8632V23.8632Z" fill="#FD714B"/>
|
||||
<path d="M28 23H2V25H28V23Z" fill="#FD714B"/>
|
||||
<path d="M2.28047 21.8632L13.2056 3.03628C13.3885 2.72097 13.6504 2.45935 13.9652 2.27752C14.2801 2.09569 14.6369 2 15 2C15.3631 2 15.7199 2.09569 16.0348 2.27752C16.3496 2.45935 16.6115 2.72097 16.7944 3.03628L27.7195 21.8632C27.9026 22.1804 27.9993 22.5405 28 22.9072C28.0007 23.274 27.9052 23.6344 27.7233 23.9523C27.5414 24.2703 27.2794 24.5345 26.9637 24.7184C26.648 24.9023 26.2896 24.9994 25.9247 25H4.07435C3.70949 24.9992 3.35127 24.902 3.03567 24.718C2.72007 24.534 2.45821 24.2698 2.27642 23.9519C2.09462 23.634 1.99929 23.2736 2 22.907C2.00072 22.5403 2.09744 22.1803 2.28047 21.8632V21.8632Z" fill="#FEB8A5"/>
|
||||
<path d="M18.537 11.0509L10.0518 19.5361L11.466 20.9503L19.9513 12.4651L18.537 11.0509Z" fill="#FD714B"/>
|
||||
<path d="M11.4655 11.0501L10.0513 12.4644L18.5366 20.9496L19.9508 19.5354L11.4655 11.0501Z" fill="#FD714B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
4
webapi/public/images/success-icon.svg
Normal file
4
webapi/public/images/success-icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 28C22.1797 28 28 22.1797 28 15C28 7.8203 22.1797 2 15 2C7.8203 2 2 7.8203 2 15C2 22.1797 7.8203 28 15 28Z" fill="#41BF53"/>
|
||||
<path d="M20.8433 8.3999C18.2547 10.9512 15.663 13.4996 13.0682 16.0449L9.37437 13.0119L6.8457 15.9999L11.9356 20.1709L13.3224 21.3099L14.6035 20.0499C17.6162 17.0799 20.6359 14.1269 23.6526 11.1499L20.8433 8.3999Z" fill="#C6ECCB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 473 B |
@ -28,49 +28,78 @@
|
||||
<div class="block__content">
|
||||
<h1>Voting Wallet Status</h1>
|
||||
|
||||
<table class="table status-table mb-0" width="100%">
|
||||
<tr>
|
||||
<table id="status-table" class="w-100 mb-0">
|
||||
<thead>
|
||||
<th>URL</th>
|
||||
<th>Best Block Height</th>
|
||||
<th>Daemon Connected</th>
|
||||
<th>Height</th>
|
||||
<th>Connected</th>
|
||||
<th>Unlocked</th>
|
||||
<th>Voting</th>
|
||||
<th>Vote Version</th>
|
||||
</tr>
|
||||
{{ range $host, $status := .WalletStatus }}
|
||||
<tr>
|
||||
<td>{{ $host }}</td>
|
||||
|
||||
{{ if $status.Connected }}
|
||||
|
||||
{{ if $status.BestBlockError }}
|
||||
<td class="status-bad">Error</td>
|
||||
{{ else }}
|
||||
<td>{{ $status.BestBlockHeight }}</td>
|
||||
{{ end }}
|
||||
|
||||
{{ if $status.InfoError }}
|
||||
<td class="status-bad" colspan="4">Error getting wallet info</td>
|
||||
{{ else }}
|
||||
<td class="{{ if $status.DaemonConnected }}status-good{{else}}status-bad{{end}}"
|
||||
>{{ $status.DaemonConnected }}</td>
|
||||
|
||||
|
||||
<td class="{{ if $status.Unlocked }}status-good{{else}}status-bad{{end}}"
|
||||
>{{ $status.Unlocked }}</td>
|
||||
|
||||
|
||||
<td class="{{ if $status.Voting }}status-good{{else}}status-bad{{end}}"
|
||||
>{{ $status.Voting }}</td>
|
||||
|
||||
<td>{{ $status.VoteVersion }}</td>
|
||||
{{ end }}
|
||||
|
||||
{{else}}
|
||||
<td class="status-bad" colspan="5">Cannot connect to wallet</td>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $host, $status := .WalletStatus }}
|
||||
<tr>
|
||||
<td>{{ stripWss $host }}</td>
|
||||
|
||||
{{ if $status.Connected }}
|
||||
|
||||
{{ if $status.BestBlockError }}
|
||||
<td>
|
||||
<div class="center">
|
||||
<div class="status bad center with-text">
|
||||
Error
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{{ else }}
|
||||
<td>{{ $status.BestBlockHeight }}</td>
|
||||
{{ end }}
|
||||
|
||||
{{ if $status.InfoError }}
|
||||
<td colspan="4">
|
||||
<div class="center">
|
||||
<div class="status bad center with-text">
|
||||
Error getting wallet info
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{{ else }}
|
||||
<td>
|
||||
<div class="center">
|
||||
<div class="status {{ if $status.DaemonConnected }}good{{else}}bad{{end}}"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<div class="center">
|
||||
<div class="status {{ if $status.Unlocked }}good{{else}}bad{{end}}"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<div class="center">
|
||||
<div class="status {{ if $status.Voting }}good{{else}}bad{{end}}"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{{ $status.VoteVersion }}</td>
|
||||
{{ end }}
|
||||
|
||||
{{else}}
|
||||
<td colspan="5">
|
||||
<div class="center">
|
||||
<div class="status bad center with-text">
|
||||
Cannot connect to wallet
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{{end}}
|
||||
</tr>
|
||||
{{end}}
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
@ -181,6 +181,7 @@ func router(debugMode bool, cookieSecret []byte, dcrd rpc.DcrdConnect, wallets r
|
||||
"addressURL": addressURL(cfg.BlockExplorerURL),
|
||||
"blockURL": blockURL(cfg.BlockExplorerURL),
|
||||
"dateTime": dateTime,
|
||||
"stripWss": stripWss,
|
||||
})
|
||||
|
||||
router.LoadHTMLGlob("webapi/templates/*.html")
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user