Display all token transaction of user

- Display all token-transactions of the user's floID
- Added fieldsets to improve UI slightly

fn_pay.js

@@ -4,7 +4,6 @@ const TYPE_MONEY_REQUEST = "MoneyRequests",
 
 const cashierUPI = {};
 
-//https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressTransactions?token=rupee&floAddress=FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf
 //For regular users
 const User = {};
 const cashierStatus = {};

fn_ui.js

@@ -41,7 +41,7 @@ userUI.sendMoneyToUser = function() {
     let confirmation = confirm(`Do you want to SEND ${amount} to ${floID}?`);
     if (!confirmation)
         return alert("Cancelled");
-    User.sendToken(floID, amount, remark).then(txid => {
+    User.sendToken(floID, amount, "|" + remark).then(txid => {
         console.warn(`Sent ${amount} to ${floID}`, txid);
         alert(`Sent ${amount} to ${floID}. It may take a few mins to reflect in their wallet`);
     }).catch(error => console.error(error));
@@ -118,7 +118,7 @@ userUI.payRequest = function(reqID) {
     let confirmation = confirm(`Do you want to SEND ${request.message.amount} to ${request.senderID}?`);
     if (!confirmation)
         return alert("Cancelled");
-    User.sendToken(request.senderID, request.message.amount, request.message.remark).then(txid => {
+    User.sendToken(request.senderID, request.message.amount, "|" + request.message.remark).then(txid => {
         console.warn(`Sent ${request.message.amount} to ${request.senderID}`, txid);
         alert(`Sent ${request.message.amount} to ${request.senderID}. It may take a few mins to reflect in their wallet`);
         User.decideRequest(request, 'PAID: ' + txid)
@@ -215,4 +215,30 @@ function completeTokenToCashRequest(request) {
                 console.info('Rejected token-to-cash request:', request.vectorClock);
             }).catch(error => console.error(error))
     })
+}
+
+function renderAllTokenTransactions() {
+    let table = document.getElementById('token-transactions').getElementsByTagName('tbody')[0];
+    tokenAPI.getAllTxs(myFloID).then(result => {
+        for (let txid in result.transactions) {
+            let row = table.insertRow();
+            renderTransactionCard(row, txid, tokenAPI.util.parseTxData(result.transactions[txid]));
+        }
+    }).catch(error => console.error(error))
+}
+
+function renderTransactionCard(row, txid, tx) {
+    row.setAttribute('title', txid);
+    row.insertCell().textContent = tx.time;
+    if (tx.sender === myFloID) {
+        row.insertCell().textContent = 'Sent';
+        row.insertCell().textContent = tx.receiver || 'Myself';
+    } else if (tx.receiver === myFloID) {
+        row.insertCell().textContent = 'Recieved';
+        row.insertCell().textContent = tx.sender;
+    } else { //This should not happen unless API returns transaction that doesnot involve myFloID
+        row.insertCell().textContent = tx.sender;
+        row.insertCell().textContent = tx.receiver;
+    }
+    row.insertCell().textContent = tx.tokenAmount;
 }

new.html

@@ -67,6 +67,7 @@
                         document.getElementById('user').hidden = false;
                     }).catch(error => console.error(error))
                 }
+                renderAllTokenTransactions();
             }).catch(error => console.error(error))
         }
     </script>
@@ -88,7 +89,7 @@
         <div>
             <form id="user-money">
                 <fieldset>
-                    <legend>Request Users</legend>
+                    <legend>Token transfer</legend>
                     FLO-ID: <input type="text" name="flo-id" /><br />
                     Amount: <input type="number" name="amount" /><br />
                     Remark: <input type="text" name="remark" /><br />
@@ -98,31 +99,37 @@
             </form>
         </div>
         <div>
-            <table id="user-cashier-requests">
+            <fieldset>
-                <thead>
+                <legend>Cashier Requests</legend>
-                    <tr>
+                <table id="user-cashier-requests">
-                        <td>Date-Time</td>
+                    <thead>
-                        <td>Cashier</td>
+                        <tr>
-                        <td>Mode</td>
+                            <td>Date-Time</td>
-                        <td>Status</td>
+                            <td>Cashier</td>
-                    </tr>
+                            <td>Mode</td>
-                </thead>
+                            <td>Status</td>
-                <tbody></tbody>
+                        </tr>
-            </table>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </fieldset>
         </div>
         <div>
-            <table id="user-money-requests">
+            <fieldset>
-                <thead>
+                <legend>Money Request</legend>
-                    <tr>
+                <table id="user-money-requests">
-                        <td>Date-Time</td>
+                    <thead>
-                        <td>Requestor</td>
+                        <tr>
-                        <td>Amount</td>
+                            <td>Date-Time</td>
-                        <td>Remark</td>
+                            <td>Requestor</td>
-                        <td>Status</td>
+                            <td>Amount</td>
-                    </tr>
+                            <td>Remark</td>
-                </thead>
+                            <td>Status</td>
-                <tbody></tbody>
+                        </tr>
-            </table>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </fieldset>
         </div>
 
     </section>
@@ -130,20 +137,38 @@
     <section id="cashier" hidden>
         <div id="cashier-id"></div>
         <div>
-            <table id="cashier-request-list">
+            <fieldset>
+                <legend>Requests</legend>
+                <table id="cashier-request-list">
+                    <thead>
+                        <tr>
+                            <td>Requestor</td>
+                            <td>Date-Time</td>
+                            <td>Mode</td>
+                            <td>Status</td>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </fieldset>
+        </div>
+    </section>
+    <div>
+        <fieldset>
+            <legend>Transactions</legend>
+            <table id="token-transactions">
                 <thead>
                     <tr>
-                        <td>Requestor</td>
+                        <td>Time</td>
-                        <td>Date-Time</td>
+                        <td></td>
-                        <td>Mode</td>
+                        <td>FLO ID</td>
-                        <td>Status</td>
+                        <td>Amount</td>
                     </tr>
                 </thead>
                 <tbody></tbody>
             </table>
-        </div>
+        </fieldset>
-    </section>
+    </div>
-
 </body>
 
 </html>

std_op.js

@@ -7453,6 +7453,7 @@
                 for (let vout of tx.transactionDetails.vout)
                     if (vout.scriptPubKey.addresses[0] !== result.sender)
                         result.receiver = vout.scriptPubKey.addresses[0];
+                result.time = tx.transactionDetails.time;
                 return result;
             }
         },
@@ -7501,6 +7502,13 @@
                         .catch(error => reject(error))
                 }).catch(error => reject(error))
             });
+        },
+        getAllTxs: function(floID, token = floGlobals.currency) {
+            return new Promise((resolve, reject) => {
+                this.fetch_api(`api/v1.0/getFloAddressTransactions?token=${token}&floAddress=${floID}`)
+                    .then(result => resolve(result))
+                    .catch(error => reject(error))
+            })
         }
     }
 })(typeof global !== "undefined" ? global : window);