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

3 files changed, 123 insertions, 30 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() {
diff --git a/day9/task5/main.py b/day9/task5/main.py
index 8ed3b50..db54d13 100644
--- a/day9/task5/main.py
+++ b/day9/task5/main.py
@@ -1,5 +1,5 @@
 from router import route
-from utils import render_template, parse_query
+from utils import render_template, parse_query, NOT_FOUND_CODE
 from database import db
 from config import SERVER_HOST, SERVER_PORT
 
@@ -28,34 +28,50 @@ def add_post(query, *args):
     return f'<h1>ADD: {query}</h1>'
 
 
-@route('/')
-def index_get(query, *args):
+@route('/get', ['POST'])
+def db_get(query, *args):
     cursor = db.cursor()
-    cursor.execute('DESCRIBE table_task1;')
-    table_structure = cursor.fetchall()
 
-    cursor.execute('SELECT * FROM table_task1;')
-    content = cursor.fetchall()
+    if query['type'] == 'full':
+        cursor.execute('DESCRIBE table_task1;')
+        table_structure = cursor.fetchall()
 
-    cursor.close()
+        cursor.execute('SELECT * FROM table_task1;')
+        content = cursor.fetchall()
+
+        cursor.close()
+
+        table_headers = [field[0] for field in table_structure]
 
-    heading = []
-    for column in [field[0] for field in table_structure]:
-        heading.append(f'<th>{column}</th>')
-    heading = '<thead><tr>\n%s\n</tr></thead>' % '\n'.join(heading)
+        json_content = []
+        for row in content:
+            new_row = []
+            for col in row:
+                if not isinstance(col, (float, bool, int, dict, list, tuple)):
+                    col = str(col)
+                new_row.append(col)
+            json_content.append(new_row)
 
-    rows = []
-    for row_index, row in enumerate(content):
-        formatted = []
-        for field_index, field in enumerate(row):
-            color = 'odd' if (field_index % 2 + row_index % 2) % 2 == 0 else 'even'
+        return {'headers': table_headers, 'content': json_content}
+    elif query['type'] == 'single_id':
+        cursor.execute(f'SELECT * FROM table_task1 WHERE service_id="{query["service_id"]}";')
+        content = cursor.fetchone()
 
-            formatted.append(f'<td class={color}>{field}</td>')
+        cursor.close()
 
-        rows.append('<tr>{}</tr>'.format(''.join(formatted)))
+        json_content = []
+        for col in content:
+            if not isinstance(col, (float, bool, int, dict, list, tuple)):
+                col = str(col)
+            json_content.append(col)
 
-    body = '<tbody>{}</tbody>'.format("\n".join(rows))
+        return json_content
 
+    return NOT_FOUND_CODE
+
+
+@route('/')
+def index_get(query, *args):
     data = render_template('index.html', heading=heading, body=body)
 
     return data
diff --git a/day9/task5/server.py b/day9/task5/server.py
index d9fdc78..47e29f9 100644
--- a/day9/task5/server.py
+++ b/day9/task5/server.py
@@ -1,21 +1,31 @@
 from http.server import HTTPServer, BaseHTTPRequestHandler
 from urllib.parse import parse_qs
+from json import dumps
 
 from router import run
 from utils import HTTP_STATUS_CODES
 
 
 class MyHTTPRequestHandler(BaseHTTPRequestHandler):
-    def _set_response(self, code):
+    def _set_response(self, code, content_type):
         self.send_response(code)
-        self.send_header('Content-type', 'text/html')
+        self.send_header('Content-type', content_type)
         self.end_headers()
 
     def do_GET(self):
+        try:
+            content_length = int(self.headers['Content-Length'])
+            get_data = parse_qs(self.rfile.read(content_length).decode('utf-8'))
+        except TypeError:
+            get_data = {}
+
+        for key in get_data:
+            get_data[key] = get_data[key][0]
+
         self.finalize_request(run({
             'url': self.path,
             'method': 'GET',
-            'query': {}
+            'query': get_data
         }))
 
     def do_POST(self):
@@ -33,10 +43,13 @@ class MyHTTPRequestHandler(BaseHTTPRequestHandler):
 
     def finalize_request(self, response):
         if isinstance(response, int):
-            self._set_response(response)
+            self._set_response(response, 'text/html')
             response = f'<center><h1>ERROR {response} {HTTP_STATUS_CODES[response].upper()}</h1></center>'
+        elif isinstance(response, (dict, list, tuple)):
+            self._set_response(200, 'application/json')
+            response = dumps(response)
         else:
-            self._set_response(200)
+            self._set_response(200, 'text/html')
 
         self.wfile.write(response.encode('utf-8'))