Compare commits
2 Commits
d1ad7baad1
...
4c1ce6031b
Author | SHA1 | Date | |
---|---|---|---|
4c1ce6031b | |||
1f5eb54225 |
@ -136,6 +136,21 @@ summary .dangerous-button, summary .action-button {
|
|||||||
background: var(--brand-bg);
|
background: var(--brand-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.submit-spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
border: 3px solid #f3f3f3; /* Цвет границы */
|
||||||
|
border-radius: 50%; /* Делаем круг */
|
||||||
|
border-top-color: #3498db; /* Цвет верхней границы */
|
||||||
|
animation: spin 0.8s linear infinite; /* Анимация вращения */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
/*********************** Стили для красивых 'switch' ***********************/
|
/*********************** Стили для красивых 'switch' ***********************/
|
||||||
|
|
||||||
.toggle-input {
|
.toggle-input {
|
||||||
|
184
static/main.html
184
static/main.html
@ -73,7 +73,7 @@
|
|||||||
<tr><th>DUMMY</th><td>{{ stat_rx.packetsDummy }}</td></tr>
|
<tr><th>DUMMY</th><td>{{ stat_rx.packetsDummy }}</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<button @click="resetPacketsStatistics()"> Сброс статистики </button>
|
<button class="action-button" @click="resetPacketsStatistics()"> Сброс статистики </button>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-set-container">
|
<div class="settings-set-container">
|
||||||
<h2>Статистика передачи</h2>
|
<h2>Статистика передачи</h2>
|
||||||
@ -327,7 +327,7 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>Сохранить</button>
|
<button class="action-button" @click="settingsSubmitRxTx()">Сохранить <span class="submit-spinner" v-show="submitStatus.rxTx"></span></button>
|
||||||
|
|
||||||
<h2 v-show="param.general.isCinC">Настройки режима CinC</h2>
|
<h2 v-show="param.general.isCinC">Настройки режима CinC</h2>
|
||||||
<div v-show="param.general.isCinC" class="settings-set-container">
|
<div v-show="param.general.isCinC" class="settings-set-container">
|
||||||
@ -363,7 +363,7 @@
|
|||||||
<input v-model="param.cinc.delayMax" type="number"/>
|
<input v-model="param.cinc.delayMax" type="number"/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button v-show="param.general.isCinC" type="submit">Сохранить</button>
|
<button class="action-button" v-show="param.general.isCinC" @click="settingsSubmitCinC()" type="submit">Сохранить <span class="submit-spinner" v-show="submitStatus.cinc"></span></button>
|
||||||
|
|
||||||
<h2>Настройки питания и опорного генератора</h2>
|
<h2>Настройки питания и опорного генератора</h2>
|
||||||
<div class="tabs-item-flex-container">
|
<div class="tabs-item-flex-container">
|
||||||
@ -422,7 +422,7 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">Сохранить</button>
|
<button class="action-button" @click="settingsSubmitBucLnb()">Сохранить <span class="submit-spinner" v-show="submitStatus.bucLnb"></span></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs-body-item" v-if="activeTab === 'qos'">
|
<div class="tabs-body-item" v-if="activeTab === 'qos'">
|
||||||
<h2>Настройки QoS</h2>
|
<h2>Настройки QoS</h2>
|
||||||
@ -432,64 +432,72 @@
|
|||||||
<span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span>
|
<span class="toggle-input"><input type="checkbox" v-model="qos.en" /><span class="slider"></span></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<h3>Классы CD</h3>
|
<template>
|
||||||
<button class="action-button" @click="qosAddClass('cd')">Добавить класс CD</button>
|
<div v-for="classesGroup in ['rt1', 'rt2', 'rt3', 'cd']">
|
||||||
<details v-for="(rule, index) in qos.cd" :key="index" class="settings-set-container">
|
<h3>Классы {{ classesGroup.toUpperCase() }}</h3>
|
||||||
<summary >#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary>
|
<button class="action-button" @click="qosAddClass(classesGroup)">Добавить класс {{ classesGroup.toUpperCase() }}</button>
|
||||||
<label>
|
<details v-for="(rule, index) in qos[classesGroup]" :key="index" class="settings-set-container">
|
||||||
<span>CIR</span>
|
<summary v-if="classesGroup === 'cd'">#{{ index }} CIR={{ rule.cir }}кбит, PIR={{ rule.pir }}кбит {{ rule.description }}</summary>
|
||||||
<input v-model="rule.cir" type="number"/>
|
<summary v-if="classesGroup !== 'cd'">#{{ index }} CBR={{ rule.cir }}кбит {{ rule.description }}</summary>
|
||||||
</label>
|
<label>
|
||||||
<label>
|
<span v-if="classesGroup === 'cd'">CIR</span> <span v-if="classesGroup !== 'cd'">CBR</span>
|
||||||
<span>PIR</span>
|
<input v-model="rule.cir" type="number"/>
|
||||||
<input v-model="rule.pir" type="number"/>
|
</label>
|
||||||
</label>
|
<label v-if="classesGroup === 'cd'">
|
||||||
<label>
|
<span>PIR</span>
|
||||||
<span>Описание</span>
|
<input v-model="rule.pir" type="number"/>
|
||||||
<input v-model="rule.description"/>
|
</label>
|
||||||
</label>
|
<label>
|
||||||
|
<span>Описание</span>
|
||||||
|
<input v-model="rule.description"/>
|
||||||
|
</label>
|
||||||
|
|
||||||
<h3>Фильтры ({{ rule.filters.length }})</h3>
|
<h3>Фильтры ({{ rule.filters.length }})</h3>
|
||||||
<div>
|
<div>
|
||||||
<button class="action-button" @click="qosClassAddRule('cd', index)">Добавить правило</button>
|
<button class="action-button" @click="qosClassAddRule(classesGroup, index)">Добавить правило</button>
|
||||||
</div>
|
</div>
|
||||||
<details v-for="(filter, filterIndex) in rule.filters" :key="filterIndex" class="settings-set-container">
|
<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>
|
<summary><span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span> <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button></summary>
|
||||||
<label>
|
<label>
|
||||||
<span>VLAN ID</span>
|
<span>VLAN ID</span>
|
||||||
<input v-model="filter.vlan" type="text">
|
<input v-model="filter.vlan" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>Протокол L3</span>
|
<span>Протокол L3</span>
|
||||||
<input v-model="filter.proto" type="text">
|
<input v-model="filter.proto" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>Порт источника</span>
|
<span>Порт источника</span>
|
||||||
<input v-model="filter.sport" type="text">
|
<input v-model="filter.sport" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>Порт назначения</span>
|
<span>Порт назначения</span>
|
||||||
<input v-model="filter.dport" type="text">
|
<input v-model="filter.dport" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>IP источника</span>
|
<span>IP источника</span>
|
||||||
<input v-model="filter.ip_src" type="text">
|
<input v-model="filter.ip_src" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>IP назначения</span>
|
<span>IP назначения</span>
|
||||||
<input v-model="filter.ip_dest" type="text">
|
<input v-model="filter.ip_dest" type="text">
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span>Метка IP.DSCP</span>
|
<span>Метка IP.DSCP</span>
|
||||||
<input v-model="filter.dscp" type="text">
|
<input v-model="filter.dscp" type="text">
|
||||||
</label>
|
</label>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button class="dangerous-button" @click="qosDelClass('cd', index)">Удалить класс QoS</button>
|
<button class="dangerous-button" @click="qosDelClass(classesGroup, index)">Удалить класс QoS</button>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</template>
|
||||||
<button class="action-button">Применить</button>
|
|
||||||
|
|
||||||
|
|
||||||
|
<button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatus.qos"></span></button>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
|
Эти настройки пока недоступны, но скоро разработчик это поправит. А пока купи разработчику банку <strike>пива</strike> колы)
|
||||||
@ -618,6 +626,14 @@
|
|||||||
data: {
|
data: {
|
||||||
isCinC: null,
|
isCinC: null,
|
||||||
|
|
||||||
|
// false - означает что статистика не отправляется, true - отправляется
|
||||||
|
submitStatus: {
|
||||||
|
rxTx: false,
|
||||||
|
cinc: false,
|
||||||
|
bucLnb: false,
|
||||||
|
qos: false,
|
||||||
|
},
|
||||||
|
|
||||||
stat_rx: {
|
stat_rx: {
|
||||||
// индикаторы
|
// индикаторы
|
||||||
state: '?', // общее состояние
|
state: '?', // общее состояние
|
||||||
@ -735,7 +751,7 @@
|
|||||||
|
|
||||||
qos: {
|
qos: {
|
||||||
en: false,
|
en: false,
|
||||||
rt1: [{cir: 100, description: 'test class'}, {cir: 200, description: 'fuck class'}],
|
rt1: [],
|
||||||
rt2: [],
|
rt2: [],
|
||||||
rt3: [],
|
rt3: [],
|
||||||
cd: [],
|
cd: [],
|
||||||
@ -821,6 +837,47 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
settingsSubmitRxTx() {
|
||||||
|
this.submitStatus.rxTx = true
|
||||||
|
},
|
||||||
|
|
||||||
|
settingsSubmitCinC() {
|
||||||
|
this.submitStatus.cinc = true
|
||||||
|
},
|
||||||
|
|
||||||
|
settingsSubmitBucLnb() {
|
||||||
|
this.submitStatus.bucLnb = true
|
||||||
|
// TODO сделать всплывающее окно с подтверждением того, что настройки действительно нужно применить
|
||||||
|
let query = {
|
||||||
|
"buc.refClk10M": this.param.buc.refClk10M,
|
||||||
|
"buc.powering": this.param.buc.powering,
|
||||||
|
"lnb.refClk10M": this.param.lnb.refClk10M,
|
||||||
|
"lnb.powering": this.param.lnb.powering,
|
||||||
|
"serviceSettings.refClk10M": this.param.serviceSettings.refClk10M,
|
||||||
|
"serviceSettings.autoStart": this.param.serviceSettings.autoStart
|
||||||
|
}
|
||||||
|
fetch('/api/applyBucLnbSettings', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(query)
|
||||||
|
}).then(() => {
|
||||||
|
this.submitStatus.bucLnb = false
|
||||||
|
this.performUpdateSettings()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
settingsSubmitQoS() {
|
||||||
|
this.submitStatus.qos = true
|
||||||
|
},
|
||||||
|
|
||||||
|
performUpdateSettings() {
|
||||||
|
const doFetchSettings = async () => {
|
||||||
|
let d = await fetch("/api/get/settings")
|
||||||
|
this.updateSettings(await d.json())
|
||||||
|
}
|
||||||
|
|
||||||
|
doFetchSettings().then(() => {})
|
||||||
|
},
|
||||||
|
|
||||||
updateSettings(vals) {
|
updateSettings(vals) {
|
||||||
this.settingFetchComplete = true
|
this.settingFetchComplete = true
|
||||||
|
|
||||||
@ -984,12 +1041,7 @@
|
|||||||
|
|
||||||
doFetchStatistics().then(() => {})
|
doFetchStatistics().then(() => {})
|
||||||
|
|
||||||
const doFetchSettings = async () => {
|
this.performUpdateSettings()
|
||||||
let d = await fetch("/api/get/settings")
|
|
||||||
this.updateSettings(await d.json())
|
|
||||||
}
|
|
||||||
|
|
||||||
doFetchSettings().then(() => {})
|
|
||||||
|
|
||||||
document.getElementById("app").removeAttribute("hidden")
|
document.getElementById("app").removeAttribute("hidden")
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user