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

визуальные изменения в вебе

Browse Source
This commit is contained in:
Vladislav Ostapov 2024-11-08 15:34:05 +03:00
parent a833c0f68a
commit 16b9776bfd
3 changed files with 463 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/fields.css
View File

@ -105,6 +105,14 @@ select * {
color: var(--text-color); color: var(--text-color);
} }
.settings-set-container tr > * {
border-bottom: solid 1px var(--text-color2);
}
.settings-set-container tr:hover {
background: var(--bg-selected);
}
/*********************** Стили для красивых 'switch' ***********************/ /*********************** Стили для красивых 'switch' ***********************/
.toggle-input { .toggle-input {

73
static/main.html
View File

@ -6,17 +6,33 @@
<title>RSCM-101</title> <title>RSCM-101</title>
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/fields.css"> <link rel="stylesheet" type="text/css" href="/fields.css">
<style>
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: var(--bg-selected);
}
body { /* значение по-умолчанию */ --header-height: 60px; }
#content {
padding-top: var(--header-height);
}
</style>
</head> </head>
<body> <body>
<div id="app" hidden> <div id="app" hidden>
<div> <header>
<span class="nav-bar-element">Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></span> <span class="nav-bar-element">Прием: <span :class="{ indicator_bad: stat_rx.state === false, indicator_good: stat_rx.state === true, indicator: true }"></span></span>
<span class="nav-bar-element">Передача: <span :class="{ indicator_good: stat_tx.state === true, indicator: true }"></span></span> <span class="nav-bar-element">Передача: <span :class="{ indicator_good: stat_tx.state === true, indicator: true }"></span></span>
<span class="nav-bar-element">Тест: <span :class="{ indicator_good: (param.general.isTestInputData === true || param.general.modulatorMode === 'test'), indicator: true }"></span></span> <span class="nav-bar-element">Тест: <span :class="{ indicator_good: (param.general.isTestInputData === true || param.general.modulatorMode === 'test'), indicator: true }"></span></span>
<!-- Последнее обновление: {{ lastUpdateTime }}--> <!-- Последнее обновление: {{ lastUpdateTime }}-->
</div> <div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div>
<div class="tabs">
<div class="tabs-header"> <div class="tabs-header">
<span style="font-weight:bold">RSCM-101</span> <span style="font-weight:bold">RSCM-101</span>
<a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a> <a href="#monitoring" class="tabs-btn" @click="activeTab = 'monitoring'" :class="{ active: activeTab === 'monitoring' }">Мониторинг</a>
@ -25,7 +41,7 @@
<a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a> <a href="#admin" class="tabs-btn" @click="activeTab = 'admin'" :class="{ active: activeTab === 'admin' }">Администрирование</a>
<a href="/logout" class="tabs-btn">Выход</a> <a href="/logout" class="tabs-btn">Выход</a>
</div> </div>
<div :class="{ value_bad: initState !== 'Успешная инициализация системы' }">{{ initState }}</div> </header>
<div id="content"> <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-show="activeTab === 'monitoring'">
<div class="settings-set-container"> <div class="settings-set-container">
@ -143,11 +159,11 @@
<h3>Параметры передачи</h3> <h3>Параметры передачи</h3>
<label> <label>
<span>Центральная частота, КГц</span> <span>Центральная частота, КГц</span>
<input v-model="param.tx.centerFreq"/> <input v-model="param.tx.centerFreq" type="number"/>
</label> </label>
<label> <label>
<span>Символьная скорость, Бод</span> <span>Символьная скорость, Бод</span>
<input v-model="param.tx.cymRate"/> <input v-model="param.tx.cymRate" type="number"/>
</label> </label>
<label> <label>
<span>Roll-off</span> <span>Roll-off</span>
@ -161,12 +177,16 @@
</label> </label>
<label> <label>
<span>Ослабление, дБ</span> <span>Ослабление, дБ</span>
<input v-model="param.tx.attenuation"/> <input v-model="param.tx.attenuation" type="number"/>
</label> </label>
</div> </div>
<div class="settings-set-container"> <div class="settings-set-container">
<h3>Режим работы DVB-S2</h3> <h3>Режим работы DVB-S2</h3>
<label>
<span>Период служебных пакетов, сек</span>
<input v-model="param.dvbs2.servicePacketPeriod" type="number">
</label>
<label> <label>
<span>Режим</span> <span>Режим</span>
<select v-model="param.dvbs2.mode"> <select v-model="param.dvbs2.mode">
@ -240,6 +260,10 @@
<option v-for="speed in getAvailableModcods(param.dvbs2.acm_minModulation)" v-bind:value="speed">{{ speed }}</option> <option v-for="speed in getAvailableModcods(param.dvbs2.acm_minModulation)" v-bind:value="speed">{{ speed }}</option>
</select> </select>
</label> </label>
<label v-show="param.dvbs2.mode === 'acm'">
<span>Запас ОСШ</span>
<input v-model="param.dvbs2.snrReserve" type="number">
</label>
</div> </div>
<div class="settings-set-container"> <div class="settings-set-container">
<h3>Авто-регулировка мощности</h3> <h3>Авто-регулировка мощности</h3>
@ -252,15 +276,15 @@
</label> </label>
<label> <label>
<span>Максимальное ослабление</span> <span>Максимальное ослабление</span>
<input v-model="param.acm.maxAttenuation"/> <input v-model="param.acm.maxAttenuation" type="number"/>
</label> </label>
<label> <label>
<span>Минимальное ослабление</span> <span>Минимальное ослабление</span>
<input v-model="param.acm.minAttenuation"/> <input v-model="param.acm.minAttenuation" type="number"/>
</label> </label>
<label> <label>
<span>Требуемое ОСШ</span> <span>Требуемое ОСШ</span>
<input v-model="param.acm.requiredSnr"/> <input v-model="param.acm.requiredSnr" type="number"/>
</label> </label>
</div> </div>
<div class="settings-set-container"> <div class="settings-set-container">
@ -274,7 +298,7 @@
</label> </label>
<label v-show="param.rx.gainMode === 'manual'"> <label v-show="param.rx.gainMode === 'manual'">
<span>Усиление, dB</span> <span>Усиление, dB</span>
<input v-model="param.rx.manualGain"/> <input v-model="param.rx.manualGain" type="number"/>
</label> </label>
<label> <label>
<span>Инверсия спектра</span> <span>Инверсия спектра</span>
@ -285,11 +309,11 @@
</label> </label>
<label> <label>
<span>Центральная частота, кГц</span> <span>Центральная частота, кГц</span>
<input v-model="param.rx.centerFreq"/> <input v-model="param.rx.centerFreq" type="number"/>
</label> </label>
<label> <label>
<span>Символьная скорость, Бод</span> <span>Символьная скорость, Бод</span>
<input v-model="param.rx.cymRate"/> <input v-model="param.rx.cymRate" type="number"/>
</label> </label>
<label> <label>
<span>Roll-off</span> <span>Roll-off</span>
@ -301,10 +325,6 @@
<option value="25">0.25</option> <option value="25">0.25</option>
</select> </select>
</label> </label>
<label>
<span>Ослабление, dB</span>
<input v-model="param.rx.attenuation"/>
</label>
</div> </div>
</div> </div>
<button>Сохранить</button> <button>Сохранить</button>
@ -322,25 +342,25 @@
<h3 v-show="param.cinc.mode === 'positional'">Настройки позиционирования</h3> <h3 v-show="param.cinc.mode === 'positional'">Настройки позиционирования</h3>
<label v-show="param.cinc.mode === 'positional'"> <label v-show="param.cinc.mode === 'positional'">
<span>Широта станции</span> <span>Широта станции</span>
<input v-model="param.cinc.position.station.latitude"/> <input v-model="param.cinc.position.station.latitude" type="number"/>
</label> </label>
<label v-show="param.cinc.mode === 'positional'"> <label v-show="param.cinc.mode === 'positional'">
<span>Долгота станции</span> <span>Долгота станции</span>
<input v-model="param.cinc.position.station.longitude"/> <input v-model="param.cinc.position.station.longitude" type="number"/>
</label> </label>
<label v-show="param.cinc.mode === 'positional'"> <label v-show="param.cinc.mode === 'positional'">
<span>Долгота спутника</span> <span>Долгота спутника</span>
<input v-model="param.cinc.position.satelliteLongitude"/> <input v-model="param.cinc.position.satelliteLongitude" type="number"/>
</label> </label>
<h3 v-show="param.cinc.mode === 'delay'">Задержка до спутника</h3> <h3 v-show="param.cinc.mode === 'delay'">Задержка до спутника</h3>
<label v-show="param.cinc.mode === 'delay'"> <label v-show="param.cinc.mode === 'delay'">
<span>от, мс</span> <span>от, мс</span>
<input v-model="param.cinc.delayMin"/> <input v-model="param.cinc.delayMin" type="number"/>
</label> </label>
<label v-show="param.cinc.mode === 'delay'"> <label v-show="param.cinc.mode === 'delay'">
<span>до, мс</span> <span>до, мс</span>
<input v-model="param.cinc.delayMax"/> <input v-model="param.cinc.delayMax" type="number"/>
</label> </label>
</div> </div>
<button v-show="param.general.isCinC" type="submit">Сохранить</button> <button v-show="param.general.isCinC" type="submit">Сохранить</button>
@ -484,7 +504,6 @@
</p> </p>
<img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil"> <img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil">
</div> </div>
</div>
<p>Последнее обновление статистики: {{ lastUpdateTime }}</p> <p>Последнее обновление статистики: {{ lastUpdateTime }}</p>
</div> </div>
</div> </div>
@ -492,6 +511,14 @@
<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений --> <!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="/js/vue.js"></script> <script src="/js/vue.js"></script>
<script> <script>
window.addEventListener('load', updateHeaderHeight);
window.addEventListener('resize', updateHeaderHeight);
function updateHeaderHeight() {
const header = document.querySelector('header');
document.body.style.setProperty('--header-height', `${header.offsetHeight}px`);
}
// const router = useRouter(); // const router = useRouter();
const availableTabs = ['monitoring', 'setup', 'qos', 'admin'] const availableTabs = ['monitoring', 'setup', 'qos', 'admin']
const defaultTab = availableTabs[0] const defaultTab = availableTabs[0]

24
static/style.css
View File

@ -42,6 +42,7 @@ body {
} }
body { body {
overflow-y: visible;
background: var(--bg-color); background: var(--bg-color);
margin: 0; /* браузеры зачем-то ставят свое значение */ margin: 0; /* браузеры зачем-то ставят свое значение */
} }
@ -52,29 +53,6 @@ body {
/* ========== MAIN STYLES ========== */ /* ========== MAIN STYLES ========== */
header > h1 {
text-align: center;
background-color: var(--brand-bg);
padding: 0.5em;
margin: 0;
}
header * {
color: var(--brand-text);
}
header > nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
header > nav > a {
margin: 0.5em;
}
.value-good { .value-good {
color: var(--text-good); color: var(--text-good);
} }