Skip to content

Commit

Permalink
Add pending transaction page
Browse files Browse the repository at this point in the history
  • Loading branch information
@conradoqg
conradoqg committed Jan 21, 2018
1 parent 4c72f27 commit 8417563
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 108 deletions.
15 changes: 12 additions & 3 deletions lib/httpServer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class HttpServer {
this.app.use(bodyParser.json());

this.app.set('view engine', 'pug');
this.app.set('views', path.join(__dirname, 'views'));
this.app.set('views', path.join(__dirname, 'views'));
this.app.locals.formatters = {
time: (rawTime) => {
const timeInMS = new Date(rawTime * 1000);
Expand All @@ -43,10 +43,13 @@ class HttpServer {
this.app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

this.app.get('/blockchain', (req, res) => {
if (!req.is('application/json'))
if (req.headers['accept'] && req.headers['accept'].includes('text/html'))
res.render('blockchain/index.pug', {
pageTitle: 'Blockchain',
blocks: blockchain.getAllBlocks()
});
else
throw new HTTPError(400, 'Accept content not supported');
});

this.app.get('/blockchain/blocks', (req, res) => {
Expand Down Expand Up @@ -96,7 +99,13 @@ class HttpServer {
});

this.app.get('/blockchain/transactions', (req, res) => {
res.status(200).send(blockchain.getAllTransactions());
if (req.headers['accept'] && req.headers['accept'].includes('text/html'))
res.render('blockchain/transactions/index.pug', {
pageTitle: 'Transactions',
transactions: blockchain.getAllTransactions()
});
else
res.status(200).send(blockchain.getAllTransactions());
});

this.app.post('/blockchain/transactions', (req, res) => {
Expand Down
169 changes: 64 additions & 105 deletions lib/httpServer/views/blockchain/index.pug
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,66 @@
doctype html
html(lang="en").has-navbar-fixed-top
head
title Naivecoin - Blockchain
meta(name="viewport", content="width=device-width, initial-scale=1")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css")
script(src="https://use.fontawesome.com/releases/v5.0.0/js/all.js", defer)
style(type='text/css').
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
extends ../layout.pug

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
top: -5px;
left: 105%;
word-break: normal;

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
body
nav.navbar.is-fixed-top.is-info
.container
.navbar-menu.is-active
.navbar-start
span.title.is-2.has-text-white Naivecoin
.navbar-end
a.navbar-item(href="/api-docs/", target="_blank") API
section.section
.container
.level
.level-left
h2.title.is-3 Blockchain
.level-right
.tags.has-addons
span.tag Type
span.tag.is-primary Regular
span.tag.is-warning Fee
span.tag.is-danger Reward
hr
.columns.is-multiline
each block in blocks
.column.is-one-quarter
.box
.content.is-small
p.title.is-4
| Block
small ##{block.index}
p.subtitle.is-6
| Hash:
code.tooltip
| #{formatters.hash(block.hash)}
span.tooltiptext #{block.hash}
if block.index > 0
br
| Previous:
code.tooltip
| #{formatters.hash(block.previousHash)}
span.tooltiptext #{block.previousHash}
hr
block content
section.section
.container
.level
.level-left
h2.title.is-3 Blockchain
.level-right
.tags.has-addons
span.tag Type
span.tag.is-primary Regular
span.tag.is-warning Fee
span.tag.is-danger Reward
hr
.columns.is-multiline
each block in blocks
.column.is-one-quarter
.box
.content.is-small
p.title.is-4
| Block
small ##{block.index}
p.subtitle.is-6
| Hash:
code.tooltip
| #{formatters.hash(block.hash)}
span.tooltiptext #{block.hash}
if block.index > 0
each transaction in block.transactions
if transaction.data.inputs.length > 0 || transaction.data.outputs.length > 0
- var classByType = { 'regular': 'is-primary', 'fee': 'is-warning', 'reward': 'is-danger' }
div.notification(class=`${classByType[transaction.type]}`)
p
if transaction.data.inputs.length > 0
each input in transaction.data.inputs
p
span.icon.has-text-white
i.fas.fa-arrow-right(data-fa-transform="rotate-45")
| #{formatters.amount(input.amount)}
| from
code.tooltip
| #{formatters.hash(input.address)}
span.tooltiptext #{input.address}
p
if transaction.data.outputs.length > 0
each output in transaction.data.outputs
p
span.icon.has-text-white
i.fas.fa-arrow-right(data-fa-transform="rotate-320")
| #{formatters.amount(output.amount)}
| to
code.tooltip
| #{formatters.hash(output.address)}
span.tooltiptext #{output.address}
p.has-text-grey-light.has-text-right.is-small
| #{formatters.time(block.timestamp)}
else
.subtitle.is-3.has-text-centered Genesis
br
| Previous:
code.tooltip
| #{formatters.hash(block.previousHash)}
span.tooltiptext #{block.previousHash}
hr
if block.index > 0
each transaction in block.transactions
if transaction.data.inputs.length > 0 || transaction.data.outputs.length > 0
- var classByType = { 'regular': 'is-primary', 'fee': 'is-warning', 'reward': 'is-danger' }
div.notification(class=`${classByType[transaction.type]}`)
p
if transaction.data.inputs.length > 0
each input in transaction.data.inputs
p
span.icon.has-text-white
i.fas.fa-arrow-right(data-fa-transform="rotate-45")
| #{formatters.amount(input.amount)}
| from
code.tooltip
| #{formatters.hash(input.address)}
span.tooltiptext #{input.address}
p
if transaction.data.outputs.length > 0
each output in transaction.data.outputs
p
span.icon.has-text-white
i.fas.fa-arrow-right(data-fa-transform="rotate-320")
| #{formatters.amount(output.amount)}
| to
code.tooltip
| #{formatters.hash(output.address)}
span.tooltiptext #{output.address}
p.has-text-grey-light.has-text-right.is-small
| #{formatters.time(block.timestamp)}
else
.subtitle.is-3.has-text-centered Genesis
60 changes: 60 additions & 0 deletions lib/httpServer/views/blockchain/transactions/index.pug
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
extends ../../layout.pug

block content
section.section
.container
.level
.level-left
h2.title.is-3 Transactions (Pending)
hr
table.table.is-fullwidth.is-hoverable
thead
tr
th Id
th Hash
th Type
th Inputs
th Outputs
tbody
each transaction in transactions
tr(onClick=`toggle_visibility( '${transaction.id}' )`)
td
span.tooltip #{formatters.hash(transaction.id)}
span.tooltiptext #{transaction.id}
td
span.tooltip #{formatters.hash(transaction.hash)}
span.tooltiptext #{transaction.hash}
td #{transaction.type}
td #{transaction.data.inputs.length}
td #{transaction.data.outputs.length}
tr(id=`${transaction.id}`, style="display: none;")
td(colspan=5)
.content
.columns
.column.is-two-thirds
.title.is-4 Inputs
each input in transaction.data.inputs
p
span.icon
i.fas.fa-arrow-right(data-fa-transform="rotate-45")
| Address
code.tooltip #{formatters.hash(input.address)}
span.tooltiptext #{input.address}
| From transaction
code.tooltip #{formatters.hash(input.transaction)} : #{input.index}
span.tooltiptext #{input.transaction}
| Amount
code #{formatters.amount(input.amount)}
| Signature
code #{formatters.hash(input.signature)}
.column
.title.is-4 Outputs
each output in transaction.data.outputs
p
span.icon
i.fas.fa-arrow-right(data-fa-transform="rotate-320")
| Address
code.tooltip #{formatters.hash(output.address)}
span.tooltiptext #{output.address}
| Amount
code #{formatters.amount(output.amount)}
54 changes: 54 additions & 0 deletions lib/httpServer/views/layout.pug
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
doctype html
html(lang="en").has-navbar-fixed-top
head
title Naivecoin - #{pageTitle}
meta(name="viewport", content="width=device-width, initial-scale=1")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css")
script(src="https://use.fontawesome.com/releases/v5.0.0/js/all.js", defer)
style(type='text/css').
/* Tooltip container */
.tooltip {
position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
top: -5px;
left: 105%;
word-break: normal;

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
body
nav.navbar.is-fixed-top.is-info
.container
.navbar-menu.is-active
.navbar-brand
span.navbar-item.title.is-2 Naivecoin
.navbar-start
a.navbar-item(href="/blockchain", class=`${pageTitle=='Blockchain' ? 'is-active' : ''}`) Blockchain
a.navbar-item(href="/blockchain/transactions", class=`${pageTitle=='Transactions' ? 'is-active' : ''}`) Transactions
.navbar-end
a.navbar-item(href="/api-docs/", target="_blank") API
block content
script.
function toggle_visibility(id) {
var e = document.getElementById(id);
if ( e.style.display == 'none' )
e.style.display = null;
else
e.style.display = 'none';
}

0 comments on commit 8417563

Please sign in to comment.