save

bin/web_kbn.py

@@ -5,11 +5,13 @@ import aiohttp_jinja2
 import os
 import __py_include
 
+from io import StringIO
 from typing import Optional
 from homekit.config import config, AppConfigUnit
 from homekit.util import homekit_path
 from aiohttp import web
 from homekit import http
+from homekit.modem import ModemsConfig
 
 
 class WebKbnConfig(AppConfigUnit):
@@ -18,10 +20,50 @@ class WebKbnConfig(AppConfigUnit):
     @classmethod
     def schema(cls) -> Optional[dict]:
         return {
-            'listen_addr': cls._addr_schema(required=True)
+            'listen_addr': cls._addr_schema(required=True),
+            'assets_public_path': {'type': 'string'}
         }
 
 
+STATIC_FILES = [
+    'bootstrap.min.css',
+    'bootstrap.min.js',
+    'polyfills.js',
+    'app.js',
+    'app.css'
+]
+
+
+def get_js_link(file, version) -> str:
+    if version:
+        file += f'?version={version}'
+    return f'<script src="{config.app_config["assets_public_path"]}/{file}" type="text/javascript"></script>'
+
+
+def get_css_link(file, version) -> str:
+    if version:
+        file += f'?version={version}'
+    return f'<link rel="stylesheet" type="text/css" href="{config.app_config["assets_public_path"]}/{file}">'
+
+
+def get_head_static() -> str:
+    buf = StringIO()
+    for file in STATIC_FILES:
+        v = 1
+        try:
+            q_ind = file.index('?')
+            v = file[q_ind+1:]
+            file = file[:file.index('?')]
+        except ValueError:
+            pass
+
+        if file.endswith('.js'):
+            buf.write(get_js_link(file, v))
+        else:
+            buf.write(get_css_link(file, v))
+    return buf.getvalue()
+
+
 class WebSite(http.HTTPServer):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -31,20 +73,29 @@ class WebSite(http.HTTPServer):
             loader=jinja2.FileSystemLoader(homekit_path('web', 'kbn_templates'))
         )
 
+        self.app.router.add_static('/assets/', path=homekit_path('web', 'kbn_assets'))
+
         self.get('/', self.get_index)
+        self.get('/modems', self.get_modems)
 
-    @staticmethod
-    async def get_index(req: http.Request):
-        # context = {
-        #     'username': request.match_info.get("username", ""),
-        #     'current_date': 'January 27, 2017'
-        # }
-        # response = aiohttp_jinja2.render_template("example.html", request,
-        #                                           context=context)
-        # return response
+    async def render_page(self,
+                          req: http.Request,
+                          context: Optional[dict] = None):
+        if context is None:
+            context = {}
+        context = {
+            **context,
+            'head_static': get_head_static(),
+            'title': 'this is title'
+        }
+        response = aiohttp_jinja2.render_template('index.html', req, context=context)
+        return response
 
-        message = "nothing here, keep lurking"
-        return http.Response(text=message, content_type='text/plain')
+    async def get_index(self, req: http.Request):
+        return await self.render_page(req)
+
+    async def get_modems(self, req: http.Request):
+        pass
 
 
 if __name__ == '__main__':

include/py/homekit/modem/__init__.py

@@ -0,0 +1 @@
+from .config import ModemsConfig

include/py/homekit/modem/config.py

@@ -0,0 +1,5 @@
+from ..config import ConfigUnit
+
+
+class ModemsConfig(ConfigUnit):
+    pass

localwebsite/handlers/ModemHandler.php

@@ -7,12 +7,6 @@ use libphonenumber\PhoneNumberUtil;
 class ModemHandler extends RequestHandler
 {
 
-    public function __construct()
-    {
-        parent::__construct();
-        $this->tpl->add_static('modem.js');
-    }
-
     public function GET_status_page() {
         global $config;
 

localwebsite/htdocs/assets/modem.js

@@ -1,29 +0,0 @@
-var ModemStatus = {
-    _modems: [],
-
-    init: function(modems) {
-        for (var i = 0; i < modems.length; i++) {
-            var modem = modems[i];
-            this._modems.push(new ModemStatusUpdater(modem));
-        }
-    }
-};
-
-
-function ModemStatusUpdater(id) {
-    this.id = id;
-    this.elem = ge('modem_data_'+id);
-    this.fetch();
-}
-extend(ModemStatusUpdater.prototype, {
-    fetch: function() {
-        ajax.get('/modem/get.ajax', {
-            id: this.id
-        }).then(({response}) => {
-            var {html} = response;
-            this.elem.innerHTML = html;
-
-            // TODO enqueue rerender
-        });
-    },
-});

web/kbn_assets/app.js

@@ -316,4 +316,34 @@ window.Cameras = {
         return video.canPlayType('application/vnd.apple.mpegurl');
     },
 };
-})();
+})();
+
+
+var ModemStatus = {
+    _modems: [],
+
+    init: function(modems) {
+        for (var i = 0; i < modems.length; i++) {
+            var modem = modems[i];
+            this._modems.push(new ModemStatusUpdater(modem));
+        }
+    }
+};
+
+function ModemStatusUpdater(id) {
+    this.id = id;
+    this.elem = ge('modem_data_'+id);
+    this.fetch();
+}
+extend(ModemStatusUpdater.prototype, {
+    fetch: function() {
+        ajax.get('/modem/get.ajax', {
+            id: this.id
+        }).then(({response}) => {
+            var {html} = response;
+            this.elem.innerHTML = html;
+
+            // TODO enqueue rerender
+        });
+    },
+});

web/kbn_templates/base.html

@@ -9,11 +9,13 @@
             window.console && console.error(error);
         }
     </script>
-    {{ head_static }}
+    {{ head_static | safe }}
 </head>
 <body>
 <div class="container py-3">
 
+{% block content %} {% endblock %}
+
 {% if js %}
 <script>{{ js|raw }}</script>
 {% endif %}

web/kbn_templates/index.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container py-4">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item active" aria-current="page">Главная</li>
+        </ol>
+    </nav>
+
+<!--    {% if auth_user %}-->
+<!--    <div class="mb-4 alert alert-secondary">-->
+<!--        Вы авторизованы как <b>{{ auth_user.username }}</b>. <a href="/deauth/">Выйти</a>-->
+<!--    </div>-->
+<!--    {% endif %}-->
+
+    <h6>Интернет</h6>
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item"><a href="/modem/">Модемы</a></li>
+        <li class="list-group-item"><a href="/routing/">Маршрутизация</a></li>
+        <li class="list-group-item"><a href="/sms/">SMS-сообщения</a></li>
+    </ul>
+
+    <h6 class="mt-4">Другое</h6>
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item"><a href="/inverter/">Инвертор</a> (<a href="{{ grafana_inverter_url }}">Grafana</a>)</li>
+        <li class="list-group-item"><a href="/pump/">Насос</a></li>
+        <li class="list-group-item"><a href="/sensors/">Датчики</a> (<a href="{{ grafana_sensors_url }}">Grafana</a>)</li>
+    </ul>
+
+    <h6 class="mt-4"><a href="/cams/"><b>Все камеры</b></a> (<a href="/cams/?high=1">HQ</a>)</h6>
+    <ul class="list-group list-group-flush">
+        {% for id, name in cameras %}
+        <li class="list-group-item"><a href="/cams/{{ id }}/">{{ name }}</a> (<a href="/cams/{{ id }}/?high=1">HQ</a>)</li>
+        {% endfor %}
+        <li class="list-group-item"><a href="/cams/stat/">Статистика</a></li>
+    </ul>
+</div>
+{% endblock %}