🎨 Rework UI to show queued blocks

api/api.go

@@ -84,9 +84,9 @@ func API(l string, ledger *blockchain.Ledger) error {
 
 	ec.GET("/*", echo.WrapHandler(http.StripPrefix("/", assetHandler)))
 
-	// ec.GET("/api/blockchain", func(c echo.Context) error {
-	// 	return c.JSON(http.StatusOK, ledger.BlockChain())
-	// })
+	ec.GET("/api/blockchain", func(c echo.Context) error {
+		return c.JSON(http.StatusOK, ledger.LastBlock())
+	})
 
 	ec.GET("/api/ledger", func(c echo.Context) error {
 		return c.JSON(http.StatusOK, ledger.CurrentData())

api/public/blockchain.html

@@ -105,28 +105,36 @@
     </section>
           <script type="text/javascript">
             $(document).ready(function() {
-                var table = $('#table').DataTable( {
-                    "processing": true,
-                    "ajax": {
-                        "url": "/api/blockchain",
-                        "type": "GET",
-                        "dataSrc": '',
-                    },
-                    'language':{ 
-                      "loadingRecords": "&nbsp;",
-                      "processing": "Loading..."
-                    },
-                    "columns": [
-                        { "data": "Index" },
-                        { "data": "Timestamp" },
-                        { "data": "Hash" },
-                        { "data": "PrevHash" },
-                    ],
-                } );
+              var resp
+              var table = $('#table').DataTable()
+              sync = function() {
+                $.ajax({
+                    url: "/api/blockchain",
+                    type: "GET",
+                    cache: false,
+                    async: true,
 
+                    dataType: "json",
+                    success: function (response) {
+                        // response is JSON
+                        if (resp && response.Index <= resp.Index ) {
+                          return
+                        }
+
+                       resp = response
+                       table.row.add( [
+                            resp.Index,
+                            resp.Timestamp,
+                            resp.Hash,
+                            resp.PrevHash
+                          ] ).draw( false );
+                    }
+                });
+              }
+              sync()
               setInterval( function () {
-                    table.ajax.reload();
-                }, 30000 );
+                 sync()
+                }, 5000 );
             } );
         </script>  
         <footer class="footer">

pkg/blockchain/ledger.go

@@ -192,12 +192,12 @@ func (l *Ledger) CurrentData() map[string]map[string]Data {
 	return l.blockchain.Last().Storage
 }
 
-// // BlockChain returns the current blockchain (locking)
-// func (l *Ledger) BlockChain() Blockchain {
-// 	l.Lock()
-// 	defer l.Unlock()
-// 	return l.blockchain
-// }
+// LastBlock returns the last block in the blockchain
+func (l *Ledger) LastBlock() Block {
+	l.Lock()
+	defer l.Unlock()
+	return l.blockchain.Last()
+}
 
 // Add data to the blockchain
 func (l *Ledger) Add(b string, s map[string]interface{}) {