VladislavOstapov/terminal-web-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vladislav Ostapov 2024-11-11 10:45:01 +03:00
parent 4c1ce6031b
commit 435f215118
2 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
static/fields.css
View File

@ -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;

53
static/main.html
View File

@ -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) {