рабочая генерация всех полей на вкладке настроек и Qos, осталось администрирование

front-generator/template/common/qos-data.js.j2

@@ -1,14 +1,8 @@
-                paramsQos: {
+                submitStatusQos: false,
+                paramQos: {
                     en: false,
                     rt1: [],
                     rt2: [],
                     rt3: [],
                     cd: [],
                 },
-                {% if 'tcpaccel' in params.paramGroupsList %}
-                paramsTcpAccel: {
-                    en: false,
-                    maxConnections: 128
-                },
-                {% endif %}
-

front-generator/template/common/qos-methods.js.j2

@@ -1,29 +1,6 @@
-            {% if 'tcpaccel' in params.paramGroupsList %}
-            submitTcpaccelSettings() {
-                if (this.submitStatus.tcpAccel) { return }
-                this.submitStatus.tcpAccel = true
-                fetch('/api/set/tcpAccel', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        "tcpAccel.en": this.param.tcpAccel.en,
-                        "tcpAccel.maxConnections": this.param.tcpAccel.maxConnections
-                    })
-                }).then(async (resp) => {
-                    this.submitStatus.tcpAccel = false
-                    this.updateNetworkSettings(await resp.json())
-                }).catch((reason) => {
-                    this.submitStatus.tcpAccel = false
-                    alert(`Ошибка при применении настроек: ${reason}`)
-                })
-            },
-            updateTcpaccelSettings(vals) { console.log('tcp accel setting update function has no impl! update backend and write this function') }
-            {% endif %}
             settingsSubmitQoS() {
-                if (this.submitStatus.qos) { return }
-                this.submitStatus.qos = true
+                if (this.submitStatusQos) { return }
+                this.submitStatusQos = true
                 function _translateQosClass(trafficClass, qc) {
                     let res = {
                         cir: qc['cir'],
@@ -66,18 +43,18 @@
                     return res
                 }
                 let query = {
-                    "en": this.paramsQos.en,
+                    "en": this.paramQos.en,
                     "rt1": [],
                     "rt2": [],
                     "rt3": [],
                     "cd": []
                 }
-                for (let i = 0; i < this.paramsQos.rt1.length; i++) { query.rt1.push(_translateQosClass('rt', this.paramsQos.rt1[i])) }
-                for (let i = 0; i < this.paramsQos.rt2.length; i++) { query.rt2.push(_translateQosClass('rt', this.paramsQos.rt2[i])) }
-                for (let i = 0; i < this.paramsQos.rt3.length; i++) { query.rt3.push(_translateQosClass('rt', this.paramsQos.rt3[i])) }
-                for (let i = 0; i < this.paramsQos.cd.length; i++) { query.cd.push(_translateQosClass('rt', this.paramsQos.cd[i])) }
+                for (let i = 0; i < this.paramQos.rt1.length; i++) { query.rt1.push(_translateQosClass('rt', this.paramQos.rt1[i])) }
+                for (let i = 0; i < this.paramQos.rt2.length; i++) { query.rt2.push(_translateQosClass('rt', this.paramQos.rt2[i])) }
+                for (let i = 0; i < this.paramQos.rt3.length; i++) { query.rt3.push(_translateQosClass('rt', this.paramQos.rt3[i])) }
+                for (let i = 0; i < this.paramQos.cd.length; i++) { query.cd.push(_translateQosClass('rt', this.paramQos.cd[i])) }
 
-                console.log(query)
+                //console.log(query)
                 fetch('/api/set/qos', {
                     method: 'POST',
                     headers: {
@@ -85,24 +62,24 @@
                     },
                     body: JSON.stringify(query)
                 }).then(async (resp) => {
-                    this.submitStatus.qos = false
+                    this.submitStatusQos = false
                     this.updateQosSettings(await resp.json())
                 }).catch((reason) => {
-                    this.submitStatus.qos = false
+                    this.submitStatusQos = false
                     alert(`Ошибка при применении настроек: ${reason}`)
                 })
             },
 
             updateQosSettings(vals) {
-                this.submitStatus.qos = false
-                this.paramsQos.en = vals["settings"]["qos.enabled"]
+                this.submitStatusQos = false
+                this.paramQos.en = vals["settings"]["qos.enabled"]
 
                 const qosProfile = vals["settings"]["qos.profile"]
                 if (qosProfile !== null && qosProfile !== undefined) {
-                    this.paramsQos.rt1 = [] // .splice(0, this.paramsQos.rt1.length)
-                    this.paramsQos.rt2 = [] // .splice(0, this.paramsQos.rt2.length)
-                    this.paramsQos.rt3 = [] // .splice(0, this.paramsQos.rt3.length)
-                    this.paramsQos.cd = [] // .splice(0, this.paramsQos.cd.length)
+                    this.paramQos.rt1 = [] // .splice(0, this.paramQos.rt1.length)
+                    this.paramQos.rt2 = [] // .splice(0, this.paramQos.rt2.length)
+                    this.paramQos.rt3 = [] // .splice(0, this.paramQos.rt3.length)
+                    this.paramQos.cd = [] // .splice(0, this.paramQos.cd.length)
 
                     for (let trafficClass in qosProfile) {
                         if (['rt1', 'rt2', 'rt3', 'cd'].indexOf(trafficClass) < 0) {
@@ -137,10 +114,10 @@
                                     })
                                 }
                                 switch (trafficClass) {
-                                    case 'rt1': this.paramsQos.rt1.push(result); break
-                                    case 'rt2': this.paramsQos.rt2.push(result); break
-                                    case 'rt3': this.paramsQos.rt3.push(result); break
-                                    case 'cd': this.paramsQos.cd.push(result); break
+                                    case 'rt1': this.paramQos.rt1.push(result); break
+                                    case 'rt2': this.paramQos.rt2.push(result); break
+                                    case 'rt3': this.paramQos.rt3.push(result); break
+                                    case 'cd': this.paramQos.cd.push(result); break
                                 }
                             }
                         }
@@ -157,10 +134,10 @@
                     filters: []
                 }
                 switch (name) {
-                    case 'rt1': this.paramsQos.rt1.push(res); break
-                    case 'rt2': this.paramsQos.rt2.push(res); break
-                    case 'rt3': this.paramsQos.rt3.push(res); break
-                    case 'cd': this.paramsQos.cd.push(res); break
+                    case 'rt1': this.paramQos.rt1.push(res); break
+                    case 'rt2': this.paramQos.rt2.push(res); break
+                    case 'rt3': this.paramQos.rt3.push(res); break
+                    case 'cd': this.paramQos.cd.push(res); break
                 }
             },
 
@@ -176,28 +153,28 @@
                     dscp: ""
                 }
                 switch (name) {
-                    case 'rt1': this.paramsQos.rt1[index].filters.push(rule); break
-                    case 'rt2': this.paramsQos.rt2[index].filters.push(rule); break
-                    case 'rt3': this.paramsQos.rt3[index].filters.push(rule); break
-                    case 'cd': this.paramsQos.cd[index].filters.push(rule); break
+                    case 'rt1': this.paramQos.rt1[index].filters.push(rule); break
+                    case 'rt2': this.paramQos.rt2[index].filters.push(rule); break
+                    case 'rt3': this.paramQos.rt3[index].filters.push(rule); break
+                    case 'cd': this.paramQos.cd[index].filters.push(rule); break
                 }
             },
 
             qosDelClass(name, index) {
                 switch (name) {
-                    case 'rt1': this.paramsQos.rt1.splice(index, 1); break
-                    case 'rt2': this.paramsQos.rt2.splice(index, 1); break
-                    case 'rt3': this.paramsQos.rt3.splice(index, 1); break
-                    case 'cd': this.paramsQos.cd.splice(index, 1); break
+                    case 'rt1': this.paramQos.rt1.splice(index, 1); break
+                    case 'rt2': this.paramQos.rt2.splice(index, 1); break
+                    case 'rt3': this.paramQos.rt3.splice(index, 1); break
+                    case 'cd': this.paramQos.cd.splice(index, 1); break
                 }
             },
 
             qosDelFilter(name, index, filterIndex) {
                 switch (name) {
-                    case 'rt1': this.paramsQos.rt1[index].filters.splice(filterIndex, 1); break
-                    case 'rt2': this.paramsQos.rt2[index].filters.splice(filterIndex, 1); break
-                    case 'rt3': this.paramsQos.rt3[index].filters.splice(filterIndex, 1); break
-                    case 'cd': this.paramsQos.cd[index].filters.splice(filterIndex, 1); break
+                    case 'rt1': this.paramQos.rt1[index].filters.splice(filterIndex, 1); break
+                    case 'rt2': this.paramQos.rt2[index].filters.splice(filterIndex, 1); break
+                    case 'rt3': this.paramQos.rt3[index].filters.splice(filterIndex, 1); break
+                    case 'cd': this.paramQos.cd[index].filters.splice(filterIndex, 1); break
                 }
             },
 

front-generator/template/common/qos.html.j2

@@ -1,15 +1,16 @@
+{% from 'common/widgets.j2' import build_widget %}
 {% raw %}
         <div class="tabs-body-item" v-if="activeTab === 'qos' && settingFetchComplete">
             <h2>Настройки QoS</h2>
             <div class="settings-set-container">
                 <label>
                     <span>Активировать QoS</span>
-                    <span class="toggle-input"><input type="checkbox" v-model="paramsQos.en" /><span class="slider"></span></span>
+                    <span class="toggle-input"><input type="checkbox" v-model="paramQos.en" /><span class="slider"></span></span>
                 </label>
             </div>
             <div v-for="classesGroup in ['rt1', 'rt2', 'rt3', 'cd']">
                 <h3>Классы {{ classesGroup.toUpperCase() }} <button class="action-button" @click="qosAddClass(classesGroup)"> + </button></h3>
-                <details v-for="(qosClass, index) in paramsQos[classesGroup]" :key="index" class="settings-set-container">
+                <details v-for="(qosClass, index) in paramQos[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>
@@ -98,20 +99,9 @@
                     </div>
                 </details>
             </div>
-            <button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatus.qos"></span></button>
+            <button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatusQos"></span></button>
 
-            {% endraw %}{% if 'tcpaccel' in params.paramGroupsList %}{% raw %}
-            <h2>Настройки TCP-акселерации</h2>
-            <div class="settings-set-container">
-                <label>
-                    <span>Активировать акселерацию</span>
-                    <span class="toggle-input"><input type="checkbox" v-model="paramsTcpAccel.en" /><span class="slider"></span></span>
-                </label>
-                <label>
-                    <span>Максимальное количество соединений</span>
-                    <input type="number" v-model="paramsTcpAccel.maxConnections" min="1" max="10000" />
-                </label>
-            </div>
-            <button class="action-button" @click="settingsSubmitTcpAccel()">Применить <span class="submit-spinner" v-show="submitStatus.tcpAccel"></span></button>
-        </div>
-        {% endraw %}{% endif %}
+            {% endraw %}{% if 'tcpaccel' in params %}
+                {% for w in params['tcpaccel'] %}{{ build_widget('tcpaccel', w) | indent(12, true) }}{% endfor %}
+            {% endif %}
+        </div>

front-generator/template/common/setup.html.j2

@@ -3,7 +3,6 @@
             {% for cat in ['rxtx', 'cinc', 'buclnb'] %}
                 {% if cat in params %}
                     {% for w in params[cat] %}{{ build_widget(cat, w) | indent(12, true) }}{% endfor %}
-            <button class="action-button" @click="settingsSubmit{{ cat | title }}()">Сохранить <span class="submit-spinner" v-show="submitStatus.{{ cat }}"></span></button>
                 {% endif %}
             {% endfor %}
         </div>

front-generator/template/common/widgets.j2

@@ -13,6 +13,25 @@
     </select>
 </label>{% endmacro %}
 
+{% macro build_widget_watch(param_group, widget) %}<label{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}><span>{{ widget.label }}</span><input type="text" readonly v-model="{{ widget.model }}"/></label>{% endmacro %}
+
+{% macro build_widget_modulation_modcod(param_group, widget) %}<label{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>
+    <span>{{ widget.label }}</span>
+    <select v-model="param{{ param_group | title }}.{{ widget.name }}Modulation" @change="param{{ param_group | title }}.{{ widget.name }}Speed = correctModcodSpeed(param{{ param_group | title }}.{{ widget.name }}Modulation, param{{ param_group | title }}.{{ widget.name }}Speed)">
+        <option :value="'qpsk'">QPSK</option>
+        <option :value="'8psk'">8PSK</option>
+        <option :value="'16apsk'">16APSK</option>
+        <option :value="'32apsk'">32APSK</option>
+    </select>
+</label>{% endmacro %}
+
+{% macro build_widget_modulation_speed(param_group, widget) %}<label{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>
+    <span>{{ widget.label }}</span>
+    <select v-model="param{{ param_group | title }}.{{ widget.name }}Speed">
+        <option v-for="speed in getAvailableModcods(param{{ param_group | title }}.{{ widget.name }}Modulation)" v-bind:value="speed">{{ '{{' }} speed {{ '}}' }}</option>
+    </select>
+</label>{% endmacro %}
+
 {% macro build_widget_flex_container(param_group, widget) %}<div class="tabs-item-flex-container"{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>
 {% for w in widget.childs %}{{ build_widget(param_group, w) | indent(4, true) }}{% endfor %}
 </div>{% endmacro %}
@@ -26,9 +45,13 @@
 {% elif widget.widget == 'settings-container' %}{{ build_widget_settings_container(param_group, widget) }}
 {% elif widget.widget == 'h2' %}<h2{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>{{ widget.label }}</h2>
 {% elif widget.widget == 'h3' %}<h3{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>{{ widget.label }}</h3>
+{% elif widget.widget == 'submit' %}<button class="action-button" @click="settingsSubmit{{ param_group | title }}()"{% if widget.v_show %} v-show="{{ widget.v_show }}"{% endif %}>Сохранить <span class="submit-spinner" v-show="submitStatus.{{ param_group }}"></span></button>
 {% elif widget.widget == 'checkbox' %}{{ build_widget_checkbox(param_group, widget) }}
 {% elif widget.widget == 'number' %}{{ build_widget_number(param_group, widget) }}
+{% elif widget.widget == 'watch' %}{{ build_widget_watch(param_group, widget) }}
 {% elif widget.widget == 'select' %}{{ build_widget_select(param_group, widget) }}
+{% elif widget.widget == 'modulation-modcod' %}{{ build_widget_modulation_modcod(param_group, widget) }}
+{% elif widget.widget == 'modulation-speed' %}{{ build_widget_modulation_speed(param_group, widget) }}
 {% else %}<p>Widget '{{ widget.widget }}' not defined!</p><p>{{ widget }}</p>
 {% endif %}
 {% endmacro %}