From 8f81344efa12fc8749a888e00d31fa1e4be6fc30 Mon Sep 17 00:00:00 2001
From: "marco.locatelli@steamware.net" <marco.locatelli@steamware.net>
Date: Fri, 2 Apr 2021 14:56:26 +0200
Subject: [PATCH] update logger page da testare

---
 server/templates/logger.html | 68 ++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/server/templates/logger.html b/server/templates/logger.html
index 88c2d31..6302d58 100644
--- a/server/templates/logger.html
+++ b/server/templates/logger.html
@@ -147,6 +147,74 @@
  
                     <!-- To Do: display contenuto cartella /data e dimensione files -->
 
+
+                    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
+                    <p id="showData"></p>
+
+                    <script>
+                        function CreateTableFromJSON() {
+                            var myBooks = [
+                                {
+                                    "Book ID": "1",
+                                    "Book Name": "Computer Architecture",
+                                    "Category": "Computers",
+                                    "Price": "125.60"
+                                },
+                                {
+                                    "Book ID": "2",
+                                    "Book Name": "Asp.Net 4 Blue Book",
+                                    "Category": "Programming",
+                                    "Price": "56.00"
+                                },
+                                {
+                                    "Book ID": "3",
+                                    "Book Name": "Popular Science",
+                                    "Category": "Science",
+                                    "Price": "210.40"
+                                }
+                            ]
+                    
+                            // EXTRACT VALUE FOR HTML HEADER. 
+                            // ('Book ID', 'Book Name', 'Category' and 'Price')
+                            var col = [];
+                            for (var i = 0; i < myBooks.length; i++) {
+                                for (var key in myBooks[i]) {
+                                    if (col.indexOf(key) === -1) {
+                                        col.push(key);
+                                    }
+                                }
+                            }
+                    
+                            // CREATE DYNAMIC TABLE.
+                            var table = document.createElement("table");
+                    
+                            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
+                    
+                            var tr = table.insertRow(-1);                   // TABLE ROW.
+                    
+                            for (var i = 0; i < col.length; i++) {
+                                var th = document.createElement("th");      // TABLE HEADER.
+                                th.innerHTML = col[i];
+                                tr.appendChild(th);
+                            }
+                    
+                            // ADD JSON DATA TO THE TABLE AS ROWS.
+                            for (var i = 0; i < myBooks.length; i++) {
+                    
+                                tr = table.insertRow(-1);
+                    
+                                for (var j = 0; j < col.length; j++) {
+                                    var tabCell = tr.insertCell(-1);
+                                    tabCell.innerHTML = myBooks[i][col[j]];
+                                }
+                            }
+                    
+                            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
+                            var divContainer = document.getElementById("showData");
+                            divContainer.innerHTML = "";
+                            divContainer.appendChild(table);
+                        }
+                    </script>
                 </div>
             </div>
         </div>