переделки для того, чтобы библиотека 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>
--- a/static/style.css
+++ b/static/style.css
@@ -1,75 +1,82 @@
-:root {
-    --text: #000;
-    --bg: #fff;
+/* ========== THEME ========== */
+body {
+    --text-color: #262626;
+    --text-color2: #3d3d3d;
+    --text-good: green;
+    --text-bad: red;

-    --item_bg: rgb(248, 246, 243);
-    --second_text: #6e6d6d;
+    --brand-bg: #EDF3FE;
+    --brand-text: #5488F7;
+
+    --bg-color: #FEFEFE;
+    --bg-selected: #F1F1F1;
+    --bg-action: #5181fe;
 }

@media (prefers-color-scheme: dark) {
-    :root {
-        --text: #fff;
-        --bg: #222226;
+    /* defaults to dark theme */
+    body {
+        --text-color: #eee;
+        --text-color2: #bbb;
+        --text-good: greenyellow;
+        --text-bad: orangered;

-        --item_bg: #333336;
-        --second_text: #828282;
+        --brand-bg: #393E50;
+        --brand-text: #5F93F3;
+
+        --bg-color: #2d2c33;
+        --bg-selected: #424248;
+        --bg-action: #4a70d5;
    }
 }

-html {
-    padding: 10px;
+* {
+    background: transparent;
+    color: var(--text-color);
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
 }

 body {
-    display: flex;
-    flex-direction: column;
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    align-items: center;
-    justify-content: center;
-
-    background-color: var(--bg);
-    color: var(--text);
+    background: var(--bg-color);
+    margin: 0; /* браузеры зачем-то ставят свое значение */
 }

-a {
-    text-decoration: none;
-    background-color: var(--bg);
-    color: var(--text);
+#content {
+    margin: 0.5em;
 }

-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bg);
-    color: var(--text);
-}
+/* ========== MAIN STYLES ========== */

-.title {
+header > h1 {
    text-align: center;
+    background-color: var(--brand-bg);
+    padding: 0.5em;
+    margin: 0;
 }

-.item {
-    padding: 20px;
-    width: 400px;
-    color: var(--text);
-    background-color: var(--item_bg);
-    border-bottom: 1px solid var(--text);
+header * {
+    color: var(--brand-text);
 }

-.item_title {
-    font-weight: 600;
-    text-align: center;
+header > nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
 }

-.item_status {
-    text-align: end;
-    font-weight: 300;
-    color: var(--second_text);
+header > nav > a {
+    margin: 0.5em;
 }

-.item_icon {
-    width: 25px;
+.value-good {
+    color: var(--text-good);
 }
+
+.value-bad {
+    color: var(--text-bad);
+}