переделки для того, чтобы библиотека api заводилась

2024-10-30 16:16:56 +03:00
parent 815a081a4c
commit 9037c6b329
9 changed files with 192 additions and 88 deletions
--- a/static/login.html
+++ b/static/login.html
@@ -3,41 +3,54 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
+    <title>Главная</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
 </head>
 <body>
-<header>
-    <div id="app">
-        <h1>{{ message }}</h1>
-        <p>{{ now }}</p>
-    </div>
+<div id="mainState" hidden>
+    <h1>Общее состояние</h1>
+    <ul>
+        <li>Прием: {{ rxState }}</li>
+        <li>Передача: {{ txState }}</li>
+        <li>Тест: {{ testState }}</li>
+        <li>Последнее обновление: {{ lastUpdateTime }}</li>
+    </ul>
+</div>

-    <div id="status-header"></div>
+<div id="status-header"></div>

-    <!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
-    <script src="/js/vue.js"></script>
-    <script>
-        const app = new Vue({
-            el: '#app',
-            data: {
-                message: 'Hello Vue!',
-                now: new Date()
-            },
-            methods: {
-                updateDate() {
-                    this.now = new Date();
-                }
-            },
-            mounted() {
-                setInterval(() => {
-                    this.updateDate();
-                }, 1000);
+<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
+<script src="/js/vue.js"></script>
+<script>
+    const mainState = new Vue({
+        el: '#mainState',
+        data: {
+            rxState: '?',
+            txState: '?',
+            testState: '?',
+            lastUpdateTime: new Date()
+        },
+        methods: {
+            updateMainState(vals) {
+                this.lastUpdateTime = new Date();
+                this.rxState = vals["mainState"]["rxState"]
+                this.txState = vals["mainState"]["txState"]
+                this.testState = vals["mainState"]["testState"]
            }
-        })
+        },
+        mounted() {
+            setInterval(() => {
+                fetch("/api/mainStatistics").then(async (val) => {
+                    this.updateMainState(await val.json())
+                });
+            }, 1000);
+        }
+    })

-        // import MyComponent from './modules/header'
-        // const sh = new Vue(MyComponent)
-    </script>
-</header>
+    document.getElementById("mainState").removeAttribute("hidden")
+
+    // import MyComponent from './modules/header'
+    // const sh = new Vue(MyComponent)
+</script>
 </body>
 </html>