7 files changed, 64 insertions, 22 deletions
diff --git a/web/kbn_assets/app.css b/web/kbn_assets/app.css
index 3146bcf..1a4697a 100644
--- a/web/kbn_assets/app.css
+++ b/web/kbn_assets/app.css
@@ -14,7 +14,7 @@
 }
 
 
-/** spinner.twig **/
+/** spinner.j2 **/
 
 .sk-fading-circle {
     margin-top: 10px;
diff --git a/web/kbn_assets/app.js b/web/kbn_assets/app.js
index c187f89..eaac003 100644
--- a/web/kbn_assets/app.js
+++ b/web/kbn_assets/app.js
@@ -319,6 +319,26 @@ window.Cameras = {
 })();
 
 
+class ModemStatusUpdater {
+    constructor(id) {
+        this.id = id;
+        this.elem = ge('modem_data_'+id);
+        this.fetch()
+    }
+
+    fetch() {
+        ajax.get('/modems/info.ajx', {
+            id: this.id
+        }).then(({response}) => {
+            const {html} = response;
+            this.elem.innerHTML = html;
+
+            // TODO enqueue rerender
+        });
+    }
+}
+
+
 var ModemStatus = {
     _modems: [],
 
@@ -329,21 +349,3 @@ var ModemStatus = {
         }
     }
 };
-
-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
-        });
-    },
-});
-\ No newline at end of file
diff --git a/web/kbn_templates/base.j2 b/web/kbn_templates/base.j2
index d43a08b..e2e29e3 100644
--- a/web/kbn_templates/base.j2
+++ b/web/kbn_templates/base.j2
@@ -35,9 +35,9 @@
 
 {% block content %}{% endblock %}
 
-{% if js %}
-<script>{{ js|raw }}</script>
-{% endif %}
+<script>
+{% block js %}{% endblock %}
+</script>
 
 </div>
 </body>
diff --git a/web/kbn_templates/modem_data.j2 b/web/kbn_templates/modem_data.j2
new file mode 100644
index 0000000..7f97b77
--- /dev/null
+++ b/web/kbn_templates/modem_data.j2
@@ -0,0 +1,13 @@
+{% with level=modem_data.level %}
+    <span class="text-secondary">Сигнал:</span> {% include 'signal_level.j2' %}<br>
+{% endwith %}
+
+<span class="text-secondary">Тип сети:</span> <b>{{ modem_data.type }}</b><br>
+<span class="text-secondary">RSSI:</span> {{ modem_data.rssi }}<br/>
+{% if modem_data.sinr %}
+<span class="text-secondary">SINR:</span> {{ modem_data.sinr }}<br/>
+{% endif %}
+<span class="text-secondary">Время соединения:</span> {{ modem_data.connected_time }}<br>
+<span class="text-secondary">Принято/передано:</span> {{ modem_data.downloaded }} / {{ modem_data.uploaded }}
+<br>
+<a href="/modems/verbose.cgi?id={{ modem }}">Подробная информация</a>
diff --git a/web/kbn_templates/modem_verbose.j2 b/web/kbn_templates/modem_verbose.j2
new file mode 100644
index 0000000..7c6c930
--- /dev/null
+++ b/web/kbn_templates/modem_verbose.j2
@@ -0,0 +1,18 @@
+{% extends "base.j2" %}
+
+{% block content %}
+{{ breadcrumbs([
+    {'link': '/modems.cgi', 'text': "Модемы"},
+    {'text': modem_name}
+]) }}
+
+{% for item in data %}
+    {% set item_name = item[0] %}
+    {% set item_data = item[1] %}
+    <h6 class="text-primary mt-4">{{ item_name }}</h6>
+    {% for k, v in item_data.items() %}
+        {{ k }} = {{ v }}<br>
+    {% endfor %}
+{% endfor %}
+
+{% endblock %}
+\ No newline at end of file
diff --git a/web/kbn_templates/modems.j2 b/web/kbn_templates/modems.j2
index f148140..4ff9cf8 100644
--- a/web/kbn_templates/modems.j2
+++ b/web/kbn_templates/modems.j2
@@ -9,4 +9,8 @@
     {% include "loading.j2" %}
 </div>
 {% endfor %}
+{% endblock %}
+
+{% block js %}
+ModemStatus.init({{ modems.getkeys()|tojson }});
 {% endblock %}
 \ No newline at end of file
diff --git a/web/kbn_templates/signal_level.j2 b/web/kbn_templates/signal_level.j2
new file mode 100644
index 0000000..93c9abf
--- /dev/null
+++ b/web/kbn_templates/signal_level.j2
@@ -0,0 +1,5 @@
+<div class="signal_level">
+  {% for i in range(5) %}
+    <div{% if i < level %} class="yes"{% endif %}></div>
+  {% endfor %}
+</div>
+\ No newline at end of file