WIP: Рендеринг таблицы на стороне клиента.

1 files changed, 69 insertions, 5 deletions

diff --git a/day9/task5/index.html b/day9/task5/index.html
index dc99964..7fe81bb 100644
--- a/day9/task5/index.html
+++ b/day9/task5/index.html
@@ -87,11 +87,7 @@
         </form>
     </div>
 
-    <table>
-        %%heading%%
-
-        %%body%%
-    </table>
+    <table id="table"></table>
 
     <script>
         let queryHTMLElements = {
@@ -127,6 +123,74 @@
         function loadDefaultOperation() {
             let query = document.getElementById('query');
             query.innerHTML = queryHTMLElements[DEFAULT_OPERATION];
+
+            request.post('http://localhost:8000/get', renderTable, {'type': 'full'});
+        }
+
+        const request = {
+            get: function (url, callback) {
+                let xmlHttp = new XMLHttpRequest();
+                xmlHttp.onreadystatechange = function() {
+                    if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
+                        callback(xmlHttp.responseText);
+                };
+                xmlHttp.open("GET", url, true);
+                xmlHttp.send();
+            },
+
+            post: function (url, callback, data) {
+                let xmlHttp = new XMLHttpRequest();
+                xmlHttp.onreadystatechange = function() {
+                    if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
+                        callback(xmlHttp.responseText);
+                };
+                xmlHttp.open("POST", url, true);
+                xmlHttp.send(this.formatParams(data));
+            },
+
+            formatParams: function (params) {
+                return Object.keys(params).map((key) => {
+                    return key+"="+encodeURIComponent(params[key])
+                }).join("&")
+            }
+        };
+
+        function renderTable(text) {
+            let data = JSON.parse(text);
+
+            let table = document.getElementById('table');
+
+            let tableHeaders = document.createElement('thead');
+            let headerRow = document.createElement('tr');
+            tableHeaders.appendChild(headerRow);
+            for (let field of data['headers']) {
+                let header = document.createElement('th');
+                header.innerText = field;
+                headerRow.appendChild(header);
+            }
+            headerRow.appendChild(document.createElement('th'));
+            headerRow.appendChild(document.createElement('th'));
+
+            let tableContent = document.createElement('tbody');
+            data['content'].forEach((row, rowIndex) => {
+                row.push(`<button value="${row[0]}">Edit</button>`);
+                row.push(`<button value="${row[0]}">Remove</button>`);
+
+                let contentRow = document.createElement('tr');
+                row.forEach((column, colIndex) => {
+                    let color = (colIndex % 2 + rowIndex % 2) % 2 === 0 ? 'odd' : 'even';
+                    let columnNode = document.createElement('td');
+                    columnNode.classList.add(color);
+
+                    columnNode.innerHTML = column;
+                    contentRow.appendChild(columnNode);
+                });
+
+                tableContent.appendChild(contentRow);
+            });
+
+            table.appendChild(tableHeaders);
+            table.appendChild(tableContent);
         }
 
         function addUpdateSet() {