прототип QoS
This commit is contained in:
parent
16b9776bfd
commit
d1ad7baad1
@ -113,6 +113,29 @@ select * {
|
||||
background: var(--bg-selected);
|
||||
}
|
||||
|
||||
.settings-set-container 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);
|
||||
}
|
||||
|
||||
/*********************** Стили для красивых 'switch' ***********************/
|
||||
|
||||
.toggle-input {
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<div id="content">
|
||||
<div class="tabs-body-item tabs-item-flex-container" v-show="activeTab === 'monitoring'">
|
||||
<div class="tabs-body-item tabs-item-flex-container" v-if="activeTab === 'monitoring'">
|
||||
<div class="settings-set-container">
|
||||
<h2>Статистика приема</h2>
|
||||
<table>
|
||||
@ -112,7 +112,7 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-body-item" v-show="activeTab === 'setup' && settingFetchComplete">
|
||||
<div class="tabs-body-item" v-if="activeTab === 'setup' && settingFetchComplete">
|
||||
<h2>Настройки приема/передачи</h2>
|
||||
<div class="settings-set-container">
|
||||
<label>
|
||||
@ -424,7 +424,7 @@
|
||||
</div>
|
||||
<button type="submit">Сохранить</button>
|
||||
</div>
|
||||
<div class="tabs-body-item" v-show="activeTab === 'qos'">
|
||||
<div class="tabs-body-item" v-if="activeTab === 'qos'">
|
||||
<h2>Настройки QoS</h2>
|
||||
<div class="settings-set-container">
|
||||
<label>
|
||||
@ -432,9 +432,8 @@
|
||||
<span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Классы CD</h3>
|
||||
<button @click="qosAddClass('cd')">Добавить класс CD</button>
|
||||
<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>
|
||||
<label>
|
||||
@ -451,45 +450,46 @@
|
||||
</label>
|
||||
|
||||
<h3>Фильтры ({{ rule.filters.length }})</h3>
|
||||
<button @click="qosClassAddRule('cd', index)">Добавить правило</button>
|
||||
<details v-for="filter in rule.filters" class="settings-set-container">
|
||||
<!-- :key="filterIndex"-->
|
||||
<!-- <summary>Правило #{{ filterIndex }}</summary>-->
|
||||
<div>
|
||||
<button class="action-button" @click="qosClassAddRule('cd', 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>
|
||||
<label>
|
||||
<span>vlan</span>
|
||||
<span>VLAN ID</span>
|
||||
<input v-model="filter.vlan" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>proto</span>
|
||||
<span>Протокол L3</span>
|
||||
<input v-model="filter.proto" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>sport</span>
|
||||
<span>Порт источника</span>
|
||||
<input v-model="filter.sport" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>dport</span>
|
||||
<span>Порт назначения</span>
|
||||
<input v-model="filter.dport" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>ip_src</span>
|
||||
<span>IP источника</span>
|
||||
<input v-model="filter.ip_src" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>ip_dest</span>
|
||||
<span>IP назначения</span>
|
||||
<input v-model="filter.ip_dest" type="text">
|
||||
</label>
|
||||
<label>
|
||||
<span>dscp</span>
|
||||
<span>Метка IP.DSCP</span>
|
||||
<input v-model="filter.dscp" type="text">
|
||||
</label>
|
||||
|
||||
</details>
|
||||
|
||||
<button @click="qosDelClass('cd', index)">Del</button>
|
||||
<div>
|
||||
<button class="dangerous-button" @click="qosDelClass('cd', index)">Удалить класс QoS</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<button>Применить</button>
|
||||
<button class="action-button">Применить</button>
|
||||
|
||||
<p>
|
||||
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
|
||||
@ -498,7 +498,7 @@
|
||||
<source src="/vid/video_2024-11-06_15-49-35.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="tabs-body-item" v-show="activeTab === 'admin'">
|
||||
<div class="tabs-body-item" v-if="activeTab === 'admin'">
|
||||
<p>
|
||||
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока смотри на крокодила
|
||||
</p>
|
||||
@ -609,6 +609,10 @@
|
||||
return { modulation: 'qpsk', speed: '1/4' }
|
||||
}
|
||||
|
||||
Vue.component('qos-component-root', {
|
||||
template: ""
|
||||
})
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
@ -731,7 +735,7 @@
|
||||
|
||||
qos: {
|
||||
en: false,
|
||||
rt1: [{cir: 100, description: 'test class'}],
|
||||
rt1: [{cir: 100, description: 'test class'}, {cir: 200, description: 'fuck class'}],
|
||||
rt2: [],
|
||||
rt3: [],
|
||||
cd: [],
|
||||
@ -916,6 +920,56 @@
|
||||
case 'rt3': this.qos.rt3.splice(index, 1); break
|
||||
case 'cd': this.qos.cd.splice(index, 1); break
|
||||
}
|
||||
},
|
||||
|
||||
qosDelFilter(name, index, filterIndex) {
|
||||
switch (name) {
|
||||
case 'rt1': this.qos.rt1[index].filters.splice(filterIndex, 1); break
|
||||
case 'rt2': this.qos.rt2[index].filters.splice(filterIndex, 1); break
|
||||
case 'rt3': this.qos.rt3[index].filters.splice(filterIndex, 1); break
|
||||
case 'cd': this.qos.cd[index].filters.splice(filterIndex, 1); break
|
||||
}
|
||||
},
|
||||
|
||||
qosGenerateRuleDescription(filter) {
|
||||
// попытка 1: просто отобразить все фильтры
|
||||
let result = ""
|
||||
let isFirst = true;
|
||||
for (const key in filter) {
|
||||
if (!filter[key]) {
|
||||
continue
|
||||
}
|
||||
if (isFirst) {
|
||||
isFirst = false;
|
||||
} else {
|
||||
result += '; '
|
||||
}
|
||||
result += `${key}: ${filter[key]}`
|
||||
}
|
||||
if (result === "") {
|
||||
return "пустой"
|
||||
}
|
||||
|
||||
const maxResultLen = 60
|
||||
|
||||
if (result.length > maxResultLen) {
|
||||
// попытка 2, отобразить что вообще в этом фильтре использовалось
|
||||
result = ""
|
||||
isFirst = true;
|
||||
for (const key in filter) {
|
||||
if (!filter[key]) {
|
||||
continue
|
||||
}
|
||||
if (isFirst) {
|
||||
isFirst = false;
|
||||
} else {
|
||||
result += ', '
|
||||
}
|
||||
result += `${key}`
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -12,6 +12,7 @@ body {
|
||||
--bg-selected: #F1F1F1;
|
||||
--bg-element: #a7a7a7;
|
||||
--bg-action: #5181fe;
|
||||
--bg-danger: #db2828;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user