Add Data Table

Author: wangpiju

db/models/transactionData.js

@@ -17,6 +17,7 @@ TransactionData.prototype.APPROVED = 'APPROVED';
 TransactionData.prototype.FAILED = 'FAILED';
 
 TransactionData.prototype.readAll = function() {
+    console.log('123');
     return pool.query('SELECT * FROM transactiondata');
 };
 

public/stylesheets/style.css

@@ -94,4 +94,141 @@ input[type="text"]:focus {
 	position:relative;
 	top:1px;
 }
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
+
+div.table-title {
+   display: block;
+  margin: auto;
+  max-width: 600px;
+  padding:5px;
+  width: 100%;
+}
+
+.table-title h3 {
+   color: #fafafa;
+   font-size: 30px;
+   font-weight: 400;
+   font-style:normal;
+   font-family: "Roboto", helvetica, arial, sans-serif;
+   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+   text-transform:uppercase;
+}
+
+
+/*** Table Styles **/
+
+.table-fill {
+  background: white;
+  border-radius:3px;
+  border-collapse: collapse;
+  height: 320px;
+  margin: auto;
+  max-width: 600px;
+  padding:5px;
+  width: 100%;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  animation: float 5s infinite;
+}
+ 
+th {
+  color:#D5DDE5;;
+  background:#1b1e24;
+  border-bottom:4px solid #9ea7af;
+  border-right: 1px solid #343a45;
+  font-size:23px;
+  font-weight: 100;
+  padding:24px;
+  text-align:left;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  vertical-align:middle;
+}
+
+th:first-child {
+  border-top-left-radius:3px;
+}
+ 
+th:last-child {
+  border-top-right-radius:3px;
+  border-right:none;
+}
+  
+tr {
+  border-top: 1px solid #C1C3D1;
+  border-bottom-: 1px solid #C1C3D1;
+  color:#666B85;
+  font-size:16px;
+  font-weight:normal;
+  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
+}
+ 
+tr:hover td {
+  background:#4E5066;
+  color:#FFFFFF;
+  border-top: 1px solid #22262e;
+  border-bottom: 1px solid #22262e;
+}
+ 
+tr:first-child {
+  border-top:none;
+}
+
+tr:last-child {
+  border-bottom:none;
+}
+ 
+tr:nth-child(odd) td {
+  background:#EBEBEB;
+}
+ 
+tr:nth-child(odd):hover td {
+  background:#4E5066;
+}
+
+tr:last-child td:first-child {
+  border-bottom-left-radius:3px;
+}
+ 
+tr:last-child td:last-child {
+  border-bottom-right-radius:3px;
+}
+ 
+td {
+  background:#FFFFFF;
+  padding:20px;
+  text-align:left;
+  vertical-align:middle;
+  font-weight:300;
+  font-size:18px;
+  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+  border-right: 1px solid #C1C3D1;
+}
+
+td:last-child {
+  border-right: 0px;
+}
+
+th.text-left {
+  text-align: left;
+}
+
+th.text-center {
+  text-align: center;
+}
+
+th.text-right {
+  text-align: right;
+}
+
+td.text-left {
+  text-align: left;
+}
+
+td.text-center {
+  text-align: center;
+}
+
+td.text-right {
+  text-align: right;
+}
+
 

routes/api.js

@@ -51,6 +51,22 @@ router.put('/v1/data', function(req, res, next) {
     }
 });
 
+/**
+ * Get All Data
+ * 拿table中全部的資料，初始化實用
+ */
+router.get('/v1/all', function(req, res, next) {
+    transactionData.readAll().then(function(result){
+       // console.log('typeof: ' + typeof result);
+       // console.log('object: ' + JSON.parse(JSON.stringify(result)));
+       res.json(result.rows);
+    })
+    .catch(function (err) {
+        console.log(err.message, err.stack);
+        res.json({'error': {'message': err.message}});
+    });
+    
+});
 /**
  * Get txHash information
  * Example:

views/index.jade

@@ -13,6 +13,17 @@ block content
     br
     br
     p(id="txnHash")
+    br
+    br
+    table.table-fill(id="dataTable")
+     thead
+      tr
+       th.text-left txHash
+       th.text-left transactionHash
+       th.text-left data
+       th.text-left timestamp
+       th.text-left status
+     tbody.table-hover
   script(type="text/javascript").
    $(function(){				
     $('#send').click(function(e){
@@ -29,6 +40,25 @@ block content
        $('#txnHash').text('your txHash: ' + object.data.txHash);
       }
      });
-    });				
+    });
+    $.ajax({
+      type: 'GET',
+      contentType: 'application/json',
+      url: 'http://localhost:3000/api/v1/all',						
+      success: function(data) {
+       console.log(data);
+       
+       for (index = 0; index < data.length; index++) {
+        var tableContent = '<tr>';
+        tableContent += "<td>" + data[index].txhash + "</td>";
+        tableContent += "<td>" + data[index].transactionhash + "</td>";
+        tableContent += "<td>" + data[index].data + "</td>";
+        tableContent += "<td>" + data[index].txtimestamp + "</td>";
+        tableContent += "<td>" + data[index].status + "</td>";
+        tableContent += '</tr>';
+        $('#dataTable tr:last').after(tableContent);
+       } 
+      }
+     });
    });