сделал вторую версию прототипа для QoS, осталось для нее только сохранение прикрутить

static/fields.css

@@ -136,6 +136,21 @@ summary .dangerous-button, summary .action-button {
     background: var(--brand-bg);
 }
 
+.submit-spinner {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 3px solid #f3f3f3; /* Цвет границы */
+    border-radius: 50%; /* Делаем круг */
+    border-top-color: #3498db; /* Цвет верхней границы */
+    animation: spin 0.8s linear infinite; /* Анимация вращения */
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /*********************** Стили для красивых 'switch' ***********************/
 
 .toggle-input {

static/main.html

@@ -73,7 +73,7 @@
                     <tr><th>DUMMY</th><td>{{ stat_rx.packetsDummy }}</td></tr>
                     </tbody>
                 </table>
-                <button @click="resetPacketsStatistics()"> Сброс статистики </button>
+                <button class="action-button" @click="resetPacketsStatistics()"> Сброс статистики </button>
             </div>
             <div class="settings-set-container">
                 <h2>Статистика передачи</h2>
@@ -327,7 +327,7 @@
                     </label>
                 </div>
             </div>
-            <button>Сохранить</button>
+            <button class="action-button" @click="settingsSubmitRxTx()">Сохранить <span class="submit-spinner" v-show="submitStatus.rxTx"></span></button>
 
             <h2 v-show="param.general.isCinC">Настройки режима CinC</h2>
             <div v-show="param.general.isCinC" class="settings-set-container">
@@ -363,7 +363,7 @@
                     <input v-model="param.cinc.delayMax" type="number"/>
                 </label>
             </div>
-            <button v-show="param.general.isCinC" type="submit">Сохранить</button>
+            <button class="action-button" v-show="param.general.isCinC" @click="settingsSubmitCinC()" type="submit">Сохранить <span class="submit-spinner" v-show="submitStatus.cinc"></span></button>
 
             <h2>Настройки питания и опорного генератора</h2>
             <div class="tabs-item-flex-container">
@@ -422,7 +422,7 @@
                     </label>
                 </div>
             </div>
-            <button type="submit">Сохранить</button>
+            <button class="action-button" @click="settingsSubmitBucLnb()">Сохранить <span class="submit-spinner" v-show="submitStatus.bucLnb"></span></button>
         </div>
         <div class="tabs-body-item" v-if="activeTab === 'qos'">
             <h2>Настройки QoS</h2>
@@ -432,15 +432,18 @@
                     <span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span>
                 </label>
             </div>
-            <h3>Классы CD</h3>
-            <button class="action-button" @click="qosAddClass('cd')">Добавить класс CD</button>
-            <details v-for="(rule, index) in qos.cd" :key="index" class="settings-set-container">
-                <summary >#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary>
+            <template>
+                <div v-for="classesGroup in ['rt1', 'rt2', 'rt3', 'cd']">
+                    <h3>Классы {{ classesGroup.toUpperCase() }}</h3>
+                    <button class="action-button" @click="qosAddClass(classesGroup)">Добавить класс {{ classesGroup.toUpperCase() }}</button>
+                    <details v-for="(rule, index) in qos[classesGroup]" :key="index" class="settings-set-container">
+                        <summary v-if="classesGroup === 'cd'">#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary>
+                        <summary v-if="classesGroup !== 'cd'">#{{ index }} CBR={{ rule.cir }}кбит {{ rule.description }}</summary>
                         <label>
-                    <span>CIR</span>
+                            <span v-if="classesGroup === 'cd'">CIR</span> <span v-if="classesGroup !== 'cd'">CBR</span>
                             <input v-model="rule.cir" type="number"/>
                         </label>
-                <label>
+                        <label v-if="classesGroup === 'cd'">
                             <span>PIR</span>
                             <input v-model="rule.pir" type="number"/>
                         </label>
@@ -451,10 +454,10 @@
 
                         <h3>Фильтры ({{ rule.filters.length }})</h3>
                         <div>
-                    <button class="action-button" @click="qosClassAddRule('cd', index)">Добавить правило</button>
+                            <button class="action-button" @click="qosClassAddRule(classesGroup, index)">Добавить правило</button>
                         </div>
                         <details v-for="(filter, filterIndex) in rule.filters" :key="filterIndex" class="settings-set-container">
-                    <summary><span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span> <button class="dangerous-button" @click="qosDelFilter('cd', index, filterIndex)">Del</button></summary>
+                            <summary><span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span> <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button></summary>
                             <label>
                                 <span>VLAN ID</span>
                                 <input v-model="filter.vlan" type="text">
@@ -486,10 +489,15 @@
                         </details>
 
                         <div>
-                    <button class="dangerous-button" @click="qosDelClass('cd', index)">Удалить класс QoS</button>
+                            <button class="dangerous-button" @click="qosDelClass(classesGroup, index)">Удалить класс QoS</button>
                         </div>
                     </details>
-            <button class="action-button">Применить</button>
+                </div>
+            </template>
+
+
+
+            <button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatus.qos"></span></button>
 
             <p>
                 Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
@@ -618,6 +626,14 @@
         data: {
             isCinC: null,
 
+            // false - означает что статистика не отправляется, true - отправляется
+            submitStatus: {
+                rxTx: false,
+                cinc: false,
+                bucLnb: false,
+                qos: false,
+            },
+
             stat_rx: {
                 // индикаторы
                 state: '?', // общее состояние
@@ -735,7 +751,7 @@
 
             qos: {
                 en: false,
-                rt1: [{cir: 100, description: 'test class'}, {cir: 200, description: 'fuck class'}],
+                rt1: [],
                 rt2: [],
                 rt3: [],
                 cd: [],
@@ -821,6 +837,47 @@
                 })
             },
 
+            settingsSubmitRxTx() {
+                this.submitStatus.rxTx = true
+            },
+
+            settingsSubmitCinC() {
+                this.submitStatus.cinc = true
+            },
+
+            settingsSubmitBucLnb() {
+                this.submitStatus.bucLnb = true
+                // TODO сделать всплывающее окно с подтверждением того, что настройки действительно нужно применить
+                let query = {
+                    "buc.refClk10M": this.param.buc.refClk10M,
+                    "buc.powering": this.param.buc.powering,
+                    "lnb.refClk10M": this.param.lnb.refClk10M,
+                    "lnb.powering": this.param.lnb.powering,
+                    "serviceSettings.refClk10M": this.param.serviceSettings.refClk10M,
+                    "serviceSettings.autoStart": this.param.serviceSettings.autoStart
+                }
+                fetch('/api/applyBucLnbSettings', {
+                    method: 'POST',
+                    body: JSON.stringify(query)
+                }).then(() => {
+                    this.submitStatus.bucLnb = false
+                    this.performUpdateSettings()
+                })
+            },
+
+            settingsSubmitQoS() {
+                this.submitStatus.qos = true
+            },
+
+            performUpdateSettings() {
+                const doFetchSettings = async () => {
+                    let d = await fetch("/api/get/settings")
+                    this.updateSettings(await d.json())
+                }
+
+                doFetchSettings().then(() => {})
+            },
+
             updateSettings(vals) {
                 this.settingFetchComplete = true
 
@@ -984,12 +1041,7 @@
 
             doFetchStatistics().then(() => {})
 
-            const doFetchSettings = async () => {
-                let d = await fetch("/api/get/settings")
-                this.updateSettings(await d.json())
-            }
-
-            doFetchSettings().then(() => {})
+            this.performUpdateSettings()
 
             document.getElementById("app").removeAttribute("hidden")
         }