web: migrate to my bicycle with templates render

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>

templates_engine.py

@@ -0,0 +1,33 @@
+"""
+Features:
+include files
+insert variables from context dict
+"""
+from os.path import join
+import re
+templates_dir = 'templates'
+
+variable_pattern: re.Pattern = re.compile(r'\{\{ .* }}')
+include_pattern: re.Pattern = re.compile(r'\{\{ @.* }}')
+
+
+def render(template_name: str, context: dict):
+    template_path = join(templates_dir, template_name)
+    template = get_file_content(template_path)
+
+    for include_statement in re.findall(include_pattern, template):
+        file_include = include_statement.split(' ')[1][1:]
+        include_content = get_file_content(join(templates_dir, file_include))
+        template = template.replace(include_statement, include_content)
+
+    for var_to_replace in re.findall(variable_pattern, template):
+        key = var_to_replace.split(' ')[1]
+        template = template.replace(var_to_replace, context[key])
+
+    return template
+
+
+def get_file_content(filename: str) -> str:
+    with open(filename, 'r', encoding='utf-8') as file:
+        # it will throw exception if file doesn't exist
+        return file.read()

web/__init__.py

@@ -3,7 +3,7 @@ import falcon
 import json
 
 from model import model
-from web import dynamic_js
+from templates_engine import render
 
 model.open_model()
 
@@ -17,9 +17,13 @@ class SquadsInfoByTagShort:
 class SquadsInfoByTagShortHtml:
     def on_get(self, req: falcon.request.Request, resp: falcon.response.Response, tag: str) -> None:
         resp.content_type = falcon.MEDIA_HTML
-        model_answer = model.list_squads_by_tag(tag)
-
-        resp.text = dynamic_js.activity_table_html_template.replace('{items}', json.dumps(model_answer))
+        resp.text = render(
+            'table_template.html',
+            {
+                'target_column_name': 'None',
+                'target_new_url': ''
+            }
+        )
 
 
 class SquadsInfoByTagExtended:
@@ -36,12 +40,13 @@ class SquadsInfoByTagExtended:
 class SquadsInfoByTagExtendedHtml:
     def on_get(self, req: falcon.request.Request, resp: falcon.response.Response, tag: str) -> None:
         resp.content_type = falcon.MEDIA_HTML
-        model_answer = model.list_squads_by_tag_with_tags(tag)
-
-        for squad in model_answer:
-            squad['user_tags'] = utils.humanify_resolved_user_tags(utils.resolve_user_tags(squad['user_tags']))
-
-        resp.text = dynamic_js.activity_table_html_template.replace('{items}', json.dumps(model_answer))
+        resp.text = render(
+            'table_template.html',
+            {
+                'target_column_name': 'None',
+                'target_new_url': ''
+            }
+        )
 
 
 application = falcon.App()

web/dynamic_js.py

@@ -1,33 +0,0 @@
-activity_table_html_template = """<!DOCTYPE HTML>
-<html lang="en-US">
-    <head>
-        <meta charset="UTF-8">
-        <script src="/js/json2htmltable.js"></script>
-         <script type="text/javascript">
-            window.addEventListener("load", () => {
-                document.body.appendChild(buildHtmlTable({items}));  // build table
-
-                var table = document.querySelector("body > 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 action_id filed onclick action
-                   row.cells[target_column_id].innerHTML = '<td><a href="{link}">{original_value}</a></td>'.replace('{link}', '{target_new_url}' + table.rows[i].cells[target_column_id].innerText).replace('{original_value}', table.rows[i].cells[target_column_id].innerText);
-                }
-            })
-        </script>
-        <link type="text/css" rel="stylesheet" href="/js/table_styles.css">
-    </head>
-    <body>
-    </body>
-</html>"""