сделал включение/отключение классов QoS и правил QoS

static/fields.css

@@ -37,6 +37,30 @@
     border-radius: 0.5em;
 }
 
+.dangerous-button, .action-button {
+    border: solid 1px var(--text-color2);
+    border-radius: 0.5em;
+    padding: 0.3em;
+    margin: 0.2em;
+}
+
+.summary-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}
+.summary-actions * {
+    margin: 0;
+}
+
+.dangerous-button {
+    background: var(--bg-danger);
+}
+
+.action-button {
+    background: var(--brand-bg);
+}
+
 .nav-bar-element {
     margin: 0.5em;
     border-bottom: 2px solid var(--text-color2);
@@ -76,12 +100,13 @@
     margin: 0;
 }
 
-.settings-set-container label * {
+label * {
     display: block;
 }
-.settings-set-container label {
+
-    margin: 1em 0;
+label {
-    display: block;
+    margin: 1em 0.5em;
+    /*display: block;*/
     /*background: var(--bg-selected);*/
     color: var(--text-color2);
 }
@@ -113,27 +138,10 @@ select * {
     background: var(--bg-selected);
 }
 
-.settings-set-container details summary {
+details > summary {
     display: flex;
     justify-content: space-between;
-}
+    align-items: stretch;
-
-.dangerous-button, .action-button {
-    border: solid 1px var(--text-color2);
-    border-radius: 0.5em;
-    padding: 0.3em;
-    margin: 0.2em;
-}
-summary .dangerous-button, summary .action-button {
-    margin: 0;
-}
-
-.dangerous-button {
-    background: var(--bg-danger);
-}
-
-.action-button {
-    background: var(--brand-bg);
 }
 
 .submit-spinner {
@@ -154,7 +162,6 @@ summary .dangerous-button, summary .action-button {
 /*********************** Стили для красивых 'switch' ***********************/
 
 .toggle-input {
-    display: inline-block;
     position: relative;
     margin: 5px 10px;
     width: 50px;

static/main.html

@@ -436,28 +436,49 @@
                 <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">
+                    <details v-for="(qosClass, 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>
-                        <summary v-if="classesGroup !== 'cd'">#{{ index }} CBR={{ rule.cir }}кбит {{ rule.description }}</summary>
+                            <span v-if="classesGroup === 'cd'">#{{ index }} CIR={{ qosClass.cir }}кбит, PIR={{ qosClass.pir }}кбит {{ qosClass.description }}</span>
+                            <span v-if="classesGroup !== 'cd'">#{{ index }} CBR={{ qosClass.cir }}кбит {{ qosClass.description }}</span>
+                            <span class="summary-actions">
+                                <label>
+                                    <span class="toggle-input">
+                                        <input type="checkbox" v-model="qosClass.isDisabled" />
+                                        <span class="slider"></span>
+                                    </span>
+                                </label>
+                            </span>
+                        </summary>
                         <label>
                             <span v-if="classesGroup === 'cd'">CIR</span> <span v-if="classesGroup !== 'cd'">CBR</span>
-                            <input v-model="rule.cir" type="number"/>
+                            <input v-model="qosClass.cir" type="number"/>
                         </label>
                         <label v-if="classesGroup === 'cd'">
                             <span>PIR</span>
-                            <input v-model="rule.pir" type="number"/>
+                            <input v-model="qosClass.pir" type="number"/>
                         </label>
                         <label>
                             <span>Описание</span>
-                            <input v-model="rule.description"/>
+                            <input v-model="qosClass.description"/>
                         </label>
 
-                        <h3>Фильтры ({{ rule.filters.length }})</h3>
+                        <h3>Фильтры ({{ qosClass.filters.length }})</h3>
                         <div>
                             <button class="action-button" @click="qosClassAddRule(classesGroup, index)">Добавить правило</button>
                         </div>
-                        <details v-for="(filter, filterIndex) in rule.filters" :key="filterIndex" class="settings-set-container">
+                        <details v-for="(filter, filterIndex) in qosClass.filters" :key="filterIndex" class="settings-set-container">
-                            <summary><span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span> <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button></summary>
+                            <summary>
+                                <span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span>
+                                <span class="summary-actions">
+                                    <label>
+                                        <span class="toggle-input">
+                                            <input type="checkbox" v-model="filter.isDisabled" />
+                                            <span class="slider"></span>
+                                        </span>
+                                    </label>
+                                    <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button>
+                                </span>
+                            </summary>
                             <label>
                                 <span>VLAN ID</span>
                                 <input v-model="filter.vlan" type="text">
@@ -495,8 +516,6 @@
                 </div>
             </template>
 
-
-
             <button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatus.qos"></span></button>
 
             <p>
@@ -940,6 +959,7 @@
             // addQosClass()
             qosAddClass(name) {
                 let res = {
+                    isDisabled: false,
                     cir: 0,
                     pir: 0,
                     filters: []
@@ -954,12 +974,13 @@
 
             qosClassAddRule(name, index) {
                 let rule = {
+                    isDisabled: false,
                     vlan: "",
-                    proto: "tcp",
+                    proto: "",
-                    sport: "22,80,448",
+                    sport: "",
-                    dport: "5000-6000",
+                    dport: "",
-                    ip_src: "192.168.0.0/24",
+                    ip_src: "",
-                    ip_dest: "192.168.0.0/24,172.16.0.0/16,95.127.91.34",
+                    ip_dest: "",
                     dscp: ""
                 }
                 switch (name) {