From 2f268d6c586d09737120a656b349e264715d82be Mon Sep 17 00:00:00 2001
From: vadym <vadym.vikulin@gmail.com>
Date: Sun, 19 Sep 2021 20:08:36 +0300
Subject: [PATCH] added peer edit form

---
 contrib/ui/mesh-ui/index.html | 122 ++++++++++++++++++++++++++++++++--
 1 file changed, 115 insertions(+), 7 deletions(-)
diff --git a/contrib/ui/mesh-ui/index.html b/contrib/ui/mesh-ui/index.html
index 8cc664dd..0ee2cbc7 100755
--- a/contrib/ui/mesh-ui/index.html
+++ b/contrib/ui/mesh-ui/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Yggdrasil</title>
+    <title>RiV-nesh</title>
     <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css" type="text/css">
     <link rel="stylesheet" href="https://unpkg.com/bulmaswatch/slate/bulmaswatch.min.css" type="text/css">
     <script>
@@ -35,7 +35,7 @@
         document.getElementById(tabName).className = "tab here";
         element.parentElement.className = "tab is-active";
         refreshRecordsList();
-    }
+    };
     
     function copy2clipboard(text){
       var textArea = document.createElement("textarea");
@@ -72,7 +72,7 @@
       }
       document.body.removeChild(textArea);
       showInfo('value copied successfully!');
-    }
+    };
     
     function showInfo(text) {
         var info = document.getElementById("notification_info");
@@ -86,7 +86,67 @@
             info.className = "notification is-primary is-hidden";
         };
         setTimeout(button.onclick, 2000);
-    }
+    };
+    
+    function showWindow(text) {
+        var info = document.getElementById("notification_window");
+        var message = document.getElementById("info_text");
+        message.innerHTML = text;
+    
+        info.className = "notification is-primary";
+        var button = document.getElementById("info_close");
+        button.onclick = function() {
+            message.value = "";
+            info.className = "notification is-primary is-hidden";
+        };
+    };
+    
+	function getPeerList(){
+	    var xhr = new XMLHttpRequest();
+	    xhr.open("GET", 'http://192.168.1.106:8080/rest/peers.json', false);
+	    xhr.send(null);
+	    if (xhr.status === 200) {
+		const peerList = JSON.parse(xhr.responseText);
+		add_table(peerList);
+	    }
+	};
+	
+function add_table(peerList) {
+  const countries = Object.keys(peerList);
+  // get the reference for the body
+  var body = document.createElement("div");
+
+  // creates a <table> element and a <tbody> element
+  var tbl = document.createElement("table");
+  //tbl.setAttribute('cellpadding', '10');
+  var tblBody = document.createElement("tbody");
+
+  // creating all cells
+  for (var c in peerList) {
+    for (peer in peerList[c]){
+    // creates a table row
+    var row = document.createElement("tr");
+    var peerAddress = document.createElement("td");
+    var cellText = document.createTextNode(peer);
+    peerAddress.appendChild(cellText);
+    var peerSelect = document.createElement("td");
+    var chk = document.createElement('input');
+    chk.setAttribute('type', 'checkbox');
+    peerSelect.appendChild(chk);
+    row.appendChild(peerAddress);
+    row.appendChild(peerSelect);
+    tblBody.appendChild(row);
+  }
+}
+  // put the <tbody> in the <table>
+  tbl.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tbl);
+  // sets the border attribute of tbl to 2;
+  //tbl.setAttribute("border", "0");
+  showWindow(body.innerHTML);
+};
+
         
     </script>
     <style>
@@ -121,13 +181,61 @@
       max-height: 150px;
       overflow: auto;
     }
+    
+    .container{
+        position: relative;
+    }
+    
+    .box{
+        width: 100%;
+        height: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.0);
+    }
+
+    .stack-top{
+        z-index: 9;
+        margin: 10px; /* for demo purpose  */
+	background: rgba(255, 0, 0, 1);
+    }
+    
+    th, td {
+	  padding: 5px;
+    }
 
     </style>
 </head>
 
 <body onload="onLoad();">
-    <div style="padding:3px; max-height: 250px;">
-        
+   <div style="padding:3px; max-height: 250px;">
+   <div class="box">
+
+        <div style="z-index: 9;" class="box stack-top notification is-primary is-hidden" id="notification_window">
+              <button class="delete" id="info_close"></button>
+              <p style="padding:3px; max-height: 250px; overflow-y: auto;" id="info_text"></p>
+        <div style="padding-left:100px; padding-top:15px;" class="field is-grouped" >      
+        <p class="control">
+          <a class="button is-success">
+          <span class="icon is-small">
+            <i class="fa fa-check"> </i>
+          </span>
+          <span> Save </span>
+        </a>
+        </p>
+        <p class="control">
+          <a class="button is-danger is-outlined">
+          <span> Cancel </span>
+          <span class="icon is-small">
+            <i class="fa fa-times"> </i>
+          </span>
+        </a>
+        </p>
+      
+        </div>
+	</div>
+    </div>
         <!-- Tabs -->
         <div class="tabs is-centered is-boxed">
             <ul>
@@ -185,7 +293,7 @@
 
                   </div>
                   <div class="item push-right">
-                    <a class="fas fa-edit"></a>
+                    <a class="fas fa-edit" onclick="getPeerList();"></a>
                   </div>
 
                 </div>
