визуальные изменения в вебе

2024-11-08 15:34:05 +03:00 · 2024-11-08 15:34:05 +03:00 · 16b9776bfd
commit 16b9776bfd
parent a833c0f68a
3 changed files with 463 additions and 450 deletions
--- a/static/fields.css
+++ b/static/fields.css
@ -105,6 +105,14 @@ select * {
    color: var(--text-color);
 }

+.settings-set-container tr > * {
+    border-bottom: solid 1px var(--text-color2);
+}
+
+.settings-set-container tr:hover {
+    background: var(--bg-selected);
+}
+
 /*********************** Стили для красивых 'switch' ***********************/

 .toggle-input {
--- a/static/main.html
+++ b/static/main.html
@ -6,17 +6,33 @@
    <title>RSCM-101</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
    <link rel="stylesheet" type="text/css" href="/fields.css">
+    <style>
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 10;
+            background: var(--bg-selected);
+        }
+
+        body { /* значение по-умолчанию */ --header-height: 60px; }
+
+        #content {
+            padding-top: var(--header-height);
+        }
+    </style>
 </head>
 <body>

 <div id="app" hidden>
-    <div>
+    <header>
        <span class="nav-bar-element">Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></span>
        <span class="nav-bar-element">Передача: <span :class="{ indicator_good: stat_tx.state === true, indicator: true }"></span></span>
        <span class="nav-bar-element">Тест: <span :class="{ indicator_good: (param.general.isTestInputData === true || param.general.modulatorMode === 'test'), indicator: true }"></span></span>
 <!--        Последнее обновление: {{ lastUpdateTime }}-->
-    </div>
-    <div class="tabs">
+        <div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div>
+
        <div class="tabs-header">
            <span style="font-weight:bold">RSCM-101</span>
            <a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a>
@ -25,7 +41,7 @@
            <a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a>
            <a href="/logout" class="tabs-btn">Выход</a>
        </div>
-        <div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div>
+    </header>
    <div id="content">
        <div class="tabs-body-item tabs-item-flex-container" v-show="activeTab === 'monitoring'">
            <div class="settings-set-container">
@ -143,11 +159,11 @@
                    <h3>Параметры передачи</h3>
                    <label>
                        <span>Центральная частота, КГц</span>
-                            <input v-model="param.tx.centerFreq"/>
+                        <input v-model="param.tx.centerFreq" type="number"/>
                    </label>
                    <label>
                        <span>Символьная скорость, Бод</span>
-                            <input v-model="param.tx.cymRate"/>
+                        <input v-model="param.tx.cymRate" type="number"/>
                    </label>
                    <label>
                        <span>Roll-off</span>
@ -161,12 +177,16 @@
                    </label>
                    <label>
                        <span>Ослабление, дБ</span>
-                            <input v-model="param.tx.attenuation"/>
+                        <input v-model="param.tx.attenuation" type="number"/>
                    </label>

                </div>
                <div class="settings-set-container">
                    <h3>Режим работы DVB-S2</h3>
+                    <label>
+                        <span>Период служебных пакетов, сек</span>
+                        <input v-model="param.dvbs2.servicePacketPeriod" type="number">
+                    </label>
                    <label>
                        <span>Режим</span>
                        <select v-model="param.dvbs2.mode">
@ -240,6 +260,10 @@
                            <option v-for="speed in getAvailableModcods(param.dvbs2.acm_minModulation)" v-bind:value="speed">{{ speed }}</option>
                        </select>
                    </label>
+                    <label v-show="param.dvbs2.mode === 'acm'">
+                        <span>Запас ОСШ</span>
+                        <input v-model="param.dvbs2.snrReserve" type="number">
+                    </label>
                </div>
                <div class="settings-set-container">
                    <h3>Авто-регулировка мощности</h3>
@ -252,15 +276,15 @@
                    </label>
                    <label>
                        <span>Максимальное ослабление</span>
-                            <input v-model="param.acm.maxAttenuation"/>
+                        <input v-model="param.acm.maxAttenuation" type="number"/>
                    </label>
                    <label>
                        <span>Минимальное ослабление</span>
-                            <input v-model="param.acm.minAttenuation"/>
+                        <input v-model="param.acm.minAttenuation" type="number"/>
                    </label>
                    <label>
                        <span>Требуемое ОСШ</span>
-                            <input v-model="param.acm.requiredSnr"/>
+                        <input v-model="param.acm.requiredSnr" type="number"/>
                    </label>
                </div>
                <div class="settings-set-container">
@ -274,7 +298,7 @@
                    </label>
                    <label v-show="param.rx.gainMode === 'manual'">
                        <span>Усиление, dB</span>
-                            <input v-model="param.rx.manualGain"/>
+                        <input v-model="param.rx.manualGain" type="number"/>
                    </label>
                    <label>
                        <span>Инверсия спектра</span>
@ -285,11 +309,11 @@
                    </label>
                    <label>
                        <span>Центральная частота, кГц</span>
-                            <input v-model="param.rx.centerFreq"/>
+                        <input v-model="param.rx.centerFreq" type="number"/>
                    </label>
                    <label>
                        <span>Символьная скорость, Бод</span>
-                            <input v-model="param.rx.cymRate"/>
+                        <input v-model="param.rx.cymRate" type="number"/>
                    </label>
                    <label>
                        <span>Roll-off</span>
@ -301,10 +325,6 @@
                            <option value="25">0.25</option>
                        </select>
                    </label>
-                        <label>
-                            <span>Ослабление, dB</span>
-                            <input v-model="param.rx.attenuation"/>
-                        </label>
                </div>
            </div>
            <button>Сохранить</button>
@ -322,25 +342,25 @@
                <h3 v-show="param.cinc.mode === 'positional'">Настройки позиционирования</h3>
                <label v-show="param.cinc.mode === 'positional'">
                    <span>Широта станции</span>
-                        <input v-model="param.cinc.position.station.latitude"/>
+                    <input v-model="param.cinc.position.station.latitude" type="number"/>
                </label>
                <label v-show="param.cinc.mode === 'positional'">
                    <span>Долгота станции</span>
-                        <input v-model="param.cinc.position.station.longitude"/>
+                    <input v-model="param.cinc.position.station.longitude" type="number"/>
                </label>
                <label v-show="param.cinc.mode === 'positional'">
                    <span>Долгота спутника</span>
-                        <input v-model="param.cinc.position.satelliteLongitude"/>
+                    <input v-model="param.cinc.position.satelliteLongitude" type="number"/>
                </label>

                <h3 v-show="param.cinc.mode === 'delay'">Задержка до спутника</h3>
                <label v-show="param.cinc.mode === 'delay'">
                    <span>от, мс</span>
-                        <input v-model="param.cinc.delayMin"/>
+                    <input v-model="param.cinc.delayMin" type="number"/>
                </label>
                <label v-show="param.cinc.mode === 'delay'">
                    <span>до, мс</span>
-                        <input v-model="param.cinc.delayMax"/>
+                    <input v-model="param.cinc.delayMax" type="number"/>
                </label>
            </div>
            <button v-show="param.general.isCinC" type="submit">Сохранить</button>
@ -484,7 +504,6 @@
            </p>
            <img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil">
        </div>
-        </div>
        <p>Последнее обновление статистики: {{ lastUpdateTime }}</p>
    </div>
 </div>
@ -492,6 +511,14 @@
 <!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
 <script src="/js/vue.js"></script>
 <script>
+    window.addEventListener('load', updateHeaderHeight);
+    window.addEventListener('resize', updateHeaderHeight);
+
+    function updateHeaderHeight() {
+        const header = document.querySelector('header');
+        document.body.style.setProperty('--header-height', `${header.offsetHeight}px`);
+    }
+
    // const router = useRouter();
    const availableTabs = ['monitoring', 'setup', 'qos', 'admin']
    const defaultTab = availableTabs[0]
--- a/static/style.css
+++ b/static/style.css
@ -42,6 +42,7 @@ body {
 }

 body {
+    overflow-y: visible;
    background: var(--bg-color);
    margin: 0; /* браузеры зачем-то ставят свое значение */
 }
@ -52,29 +53,6 @@ body {

 /* ========== MAIN STYLES ========== */

-header > h1 {
-    text-align: center;
-    background-color: var(--brand-bg);
-    padding: 0.5em;
-    margin: 0;
-}
-
-header * {
-    color: var(--brand-text);
-}
-
-header > nav {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-}
-
-header > nav > a {
-    margin: 0.5em;
-}
-
 .value-good {
    color: var(--text-good);
 }