web: frontend request backend, bicycle: templates_engine

templates/footer.html

@@ -0,0 +1,5 @@
+<div id=footer0div>
+    <footer>
+        <a href="/">Main page</a>
+    </footer>
+</div>

templates/json2html_template.html

@@ -0,0 +1,40 @@
+        <script src="/js/json2htmltable.js"></script>
+         <script type="text/javascript">
+            window.addEventListener("load", () => {
+                let xhr = new XMLHttpRequest();
+                let api_endpoint = location.protocol + '//' + location.host + '/api' + location.pathname + location.search;
+                table = document.getElementById('table0div');
+                xhr.open('GET', api_endpoint)
+
+                xhr.onload = function() {
+                    table = document.getElementById('table0div');
+                    table.innerHTML = '';
+                    table.appendChild(buildHtmlTable(JSON.parse(xhr.response))); // build table
+
+                    var table = document.querySelector("#table0div > table")
+                    var header = table.rows[0]
+
+                    for (var i = 0, cell; cell = header.cells[i]; i++) {
+                        if (cell.innerText.includes('{{ target_column_name }}')) {
+                            var target_column_id = i;
+                            break;
+                        }
+                    }
+
+                    if (target_column_id == null) { // don't to anything if no action_id in the table
+                        return;
+                    }
+
+                    for (var i = 1, row; row = table.rows[i]; i++) { // append to target column filed href
+                        row.cells[target_column_id].innerHTML = '<td><a href="' + '{{ target_new_url }}' + table.rows[i].cells[target_column_id].innerText + ' ">' + table.rows[i].cells[target_column_id].innerText + '</a></td>';
+                    }
+                }
+
+                xhr.onerror = function() { // происходит, только когда запрос совсем не получилось выполнить
+                    table.innerHTML = 'Loading Error';
+                };
+
+                xhr.send()
+                table.innerHTML = 'Loading...';
+            })
+        </script>

templates/table_template.html

@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <meta charset="UTF-8">
+        {{ @json2html_template.html }}
+        <link type="text/css" rel="stylesheet" href="/js/table_styles.css">
+    </head>
+    <body>
+        <div id="table0div">
+        </div>
+        {{ @footer.html }}
+    </body>
+</html>