commit 9e2283eb0445b6f63379f87a1488ece8a606a972
parent 1774ca32f629649de8426cee487908ea2ee73e45
Author: Marcello Stanisci <marcello.stanisci@inria.fr>
Date: Mon, 21 Nov 2016 00:48:18 +0100
~50% of backoffice chapter
Diffstat:
5 files changed, 124 insertions(+), 23 deletions(-)
diff --git a/php/backoffice.html b/php/backoffice.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+ <!-- This file is in the public domain -->
+ <head>
+ <title>Minimal merchant back office</title>
+ <script src="/history.js" type="application/javascript"></script>
+ </head>
+ <body>
+ <form action='/track-transaction.php' method='GET'>
+ <input type='text' name='tid' placeholder='Transaction ID'></input>
+ <input type='submit' value='Track transaction'></input>
+ </form>
+ <form action='/track-transfer.php' method='GET'>
+ <input type='text' name='wtid' placeholder='Wire transfer ID'></input>
+ <input type='text' name='exchange' placeholder='Exchange URL'></input>
+ <input type='submit' value='Track transfer'></input>
+ </form>
+ <form id="history_form" action="" method="GET">
+ Get transactions up to
+ <select name="days">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="7">7</option>
+ <option value="0">∞</option>
+ </select>
+ days back: <input type="button" onclick="submit_history();" value="Get!">
+ <br>
+ <small>Works only if JavaScript enabled</small>
+ </form>
+ <br/>
+ <table id="history" style="visibility: hidden;">
+ <tr>
+ <th>Transaction ID</th>
+ <th>Date</th>
+ <th>Contract</th>
+ <th>Amount</th>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/php/doc/tutorial.texi b/php/doc/tutorial.texi
@@ -439,12 +439,12 @@ We implement these with a simple HTML form. For simplicity, we have
one single page for gathering input data for both tracking directions:
@smallexample
-// php/track-input.html
-@verbatiminclude ../track-input.html
+// php/backoffice.html
+@verbatiminclude ../backoffice.html
@end smallexample
-@c TODO: expand with button to obtain list of all transactions.
-
+The imported script @code{history.js} is responsible for dynamically
+get the list of known transactions. See below.
@section Tracking a transaction
@@ -504,8 +504,39 @@ transaction IDs paid by the wire transfer:
@section Listing all transactions
-FIXME.
+In order to track transactions, transaction IDs are needed as input.
+To that purpose, the frontend needs to make a HTTP GET request to
+@code{/history?date=<TIMESTAMP>}, which is offered by the backend.
+The returned data lists all the transactions from @emph{<TIMESTAMP>}
+to now.
+
+Our example frontend, implements this feature by orchestrating two
+parts:
+
+@itemize
+@item The @code{history.php?days=<DAYSAGO>} script, whose @emph{<DAYSAGO>}
+ parameter indicates how old the oldest returned transaction should
+ be in terms of days. This script, will then translate @emph{<DAYSAGO>}
+ in a timestamp, and issue the call to backend's @code{/history?date=<TIMESTAMP>}.
+ The data it receives from the backend is finally returned in
+ JSON format to the caller.
+
+@item A JavaScript function, imported within @code{backoffice.html},
+ that triggers @code{history.php} and modifies the current page
+ by adding a table showing what is returned.
+@end itemize
+See below both parts:
+
+@smallexample
+// ../history.php
+@verbatiminclude ../history.php
+@end smallexample
+
+@smallexample
+// ../history.js
+@verbatiminclude ../history.js
+@end smallexample
@node Advanced topics
@chapter Advanced topics
diff --git a/php/history.js b/php/history.js
@@ -0,0 +1,43 @@
+function submit_history(){
+ var table = document.getElementById("history");
+ /* We don't want to kill the first child */
+ for (var i = 2; i < table.childNodes.length; i++)
+ table.removeChild(table.childNodes[i]);
+ var days = document.getElementById("history_form").days.value;
+ var req = new XMLHttpRequest();
+ var get_column = function(value){
+ var column = document.createElement("td");
+ column.textContent = value;
+ return column;
+ };
+ var on_error = function(){
+ table.innerHTML = "<p>Could not get transactions list from server</p>"
+ };
+ req.open("GET", `/history.php?days=${days}`, true);
+ req.onload = function(){
+ if(req.readyState == 4 && req.status == 200){
+ var history = JSON.parse(req.responseText);
+ if(!history)
+ console.log("Got invalid JSON");
+ if(0 == history.length){
+ table.innerHTML = "<p>No transaction was that young!</p>";
+ }
+ for (var i=0; i<history.length; i++){
+ var entry = history[i];
+ var tr = document.createElement("tr");
+ tr.appendChild(get_column(entry.transaction_id));
+ var date = get_date(entry.timestamp);
+ tr.appendChild(get_column(date.toLocaleDateString()));
+ var contract = entry.h_contract.substr(0, 5);
+ tr.appendChild(get_column(contract + "..."));
+ tr.appendChild(get_column(parse_amount(entry.total_amount)))
+ table.appendChild(tr);
+ }
+ table.style.visibility = "";
+ }
+ else{
+ on_error();
+ }
+ };
+ req.send();
+}
diff --git a/php/history.php b/php/history.php
@@ -0,0 +1,5 @@
+<?php
+
+ // FIXME
+
+?>
diff --git a/php/track-input.html b/php/track-input.html
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <!-- This file is in the public domain -->
- <head>
- <title>Minimal merchant back office</title>
- </head>
- <body>
- <form action='/track-transaction.php' method='GET'>
- <input type='text' name='tid' placeholder='Transaction ID'></input>
- <input type='submit' value='Track transaction'></input>
- </form>
- <form action='/track-transfer.php' method='GET'>
- <input type='text' name='wtid' placeholder='Wire transfer ID'></input>
- <input type='text' name='exchange' placeholder='Exchange URL'></input>
- <input type='submit' value='Track transfer'></input>
- </form>
- </body>
-</html>
