From 435f215118abeac9f3ea7fb39e2575652bcb096b Mon Sep 17 00:00:00 2001
From: Vladislav Ostapov <Vlados.ost.31@yandex.ru>
Date: Mon, 11 Nov 2024 10:45:01 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5/=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=81=D1=81=D0=BE=D0=B2=20QoS=20=D0=B8=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20QoS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/fields.css | 55 ++++++++++++++++++++++++++---------------------
 static/main.html  | 53 +++++++++++++++++++++++++++++++--------------
 2 files changed, 68 insertions(+), 40 deletions(-)

diff --git a/static/fields.css b/static/fields.css
index 8acfe63..f1446af 100644
--- a/static/fields.css
+++ b/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;
-    display: block;
+
+label {
+    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;
-}
-
-.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);
+    align-items: stretch;
 }
 
 .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;
diff --git a/static/main.html b/static/main.html
index 96bf1cf..2487119 100644
--- a/static/main.html
+++ b/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">
-                        <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>
+                    <details v-for="(qosClass, index) in qos[classesGroup]" :key="index" class="settings-set-container">
+                        <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">
-                            <summary><span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span> <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button></summary>
+                        <details v-for="(filter, filterIndex) in qosClass.filters" :key="filterIndex" class="settings-set-container">
+                            <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",
-                    sport: "22,80,448",
-                    dport: "5000-6000",
-                    ip_src: "192.168.0.0/24",
-                    ip_dest: "192.168.0.0/24,172.16.0.0/16,95.127.91.34",
+                    proto: "",
+                    sport: "",
+                    dport: "",
+                    ip_src: "",
+                    ip_dest: "",
                     dscp: ""
                 }
                 switch (name) {