сделал получение параметров через api, немного подредачил фронт

This commit is contained in:
Vladislav Ostapov 2024-10-30 18:00:48 +03:00
parent 9037c6b329
commit e8eeee3755
5 changed files with 268 additions and 55 deletions

View File

@ -73,7 +73,8 @@ void init_logging() {
} }
static void initResources(http::server::Server& s, std::shared_ptr<api_driver::ApiDriver>& api) { static void initResources(http::server::Server& s, std::shared_ptr<api_driver::ApiDriver>& api) {
s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/", "static/login.html", mime_types::text_html)); s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/", "static/main.html", mime_types::text_html));
s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/login", "static/login.html", mime_types::text_html));
s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/favicon.ico", "static/favicon.png", mime_types::image_png)); s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/favicon.ico", "static/favicon.png", mime_types::image_png));
s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/style.css", "static/style.css", mime_types::text_css)); s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/style.css", "static/style.css", mime_types::text_css));
s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/js/vue.js", "static/js/vue.js", mime_types::javascript)); s.resources.emplace_back(std::make_unique<http::resource::StaticFileResource>("/js/vue.js", "static/js/vue.js", mime_types::javascript));

View File

@ -1,26 +1,73 @@
#include "terminal_api_driver.h" #include "terminal_api_driver.h"
#include "terminal_api/ControlProtoCInterface.h" #include "terminal_api/ControlProtoCInterface.h"
#include <sstream>
api_driver::ApiDriver::ApiDriver() { api_driver::ApiDriver::ApiDriver() {
CP_Login("admin", "pass", &sid, &access); CP_Login("admin", "pass", &sid, &access);
} }
static bool DriverCP_GetLevelDemod(TSID sid, const char* param) {
double variable_dbl = 0;
CP_GetLevelDemod(sid, param, &variable_dbl);
return variable_dbl == 0;
}
static bool DriverCP_GetGain(TSID sid, const char* param) {
double variable_dbl = 0;
CP_GetGain(sid, param, &variable_dbl);
return variable_dbl == 0;
}
static const char* boolAsStr(bool value) {
return value ? "true" : "false";
}
std::string api_driver::ApiDriver::loadTerminalState() { std::string api_driver::ApiDriver::loadTerminalState() {
std::stringstream result;
result << "{";
return R"({"rxState":0,"txState":0,"testState":0})"; result << "\"txState\":" << boolAsStr(DriverCP_GetGain(sid, "TXPWD"));
}
std::string api_driver::ApiDriver::loadTxStatistics() { const auto sym_sync_lock = DriverCP_GetLevelDemod(sid, "sym_sync_lock"); // захват символьной
return R"("{"error":"no impl"}")"; const auto freq_search_lock = DriverCP_GetLevelDemod(sid, "freq_lock"); // Захват поиска по частоте
} const auto afc_lock = DriverCP_GetLevelDemod(sid, "afc_lock"); // захват ФАПЧ
const auto pkt_sync = DriverCP_GetLevelDemod(sid, "pkt_sync"); // захват пакетной синхронизации
const auto receive_active = sym_sync_lock && freq_search_lock && afc_lock && pkt_sync;
std::string api_driver::ApiDriver::loadRxStatistics() { result << ",\"rxState\":" << boolAsStr(receive_active);
return R"("{"error":"no impl"}")"; result << ",\"rx.sym_sync_lock\":" << boolAsStr(sym_sync_lock);
result << ",\"rx.freq_search_lock\":" << boolAsStr(freq_search_lock);
result << ",\"rx.afc_lock\":" << boolAsStr(afc_lock);
result << ",\"rx.pkt_sync\":" << boolAsStr(pkt_sync);
result << "}";
// return R"({"rxState":0,"txState":0,"testState":0})";
return result.str();
} }
std::string api_driver::ApiDriver::loadDeviceStatistics() { std::string api_driver::ApiDriver::loadDeviceStatistics() {
return R"("{"error":"no impl"}")"; std::stringstream result;
result << "{";
result << "\"txState\":" << boolAsStr(DriverCP_GetGain(sid, "TXPWD"));
const auto sym_sync_lock = DriverCP_GetLevelDemod(sid, "sym_sync_lock"); // захват символьной
const auto freq_search_lock = DriverCP_GetLevelDemod(sid, "freq_lock"); // Захват поиска по частоте
const auto afc_lock = DriverCP_GetLevelDemod(sid, "afc_lock"); // захват ФАПЧ
const auto pkt_sync = DriverCP_GetLevelDemod(sid, "pkt_sync"); // захват пакетной синхронизации
const auto receive_active = sym_sync_lock && freq_search_lock && afc_lock && pkt_sync;
result << ",\"rxState\":" << boolAsStr(receive_active);
result << ",\"rx.sym_sync_lock\":" << boolAsStr(sym_sync_lock);
result << ",\"rx.freq_search_lock\":" << boolAsStr(freq_search_lock);
result << ",\"rx.afc_lock\":" << boolAsStr(afc_lock);
result << ",\"rx.pkt_sync\":" << boolAsStr(pkt_sync);
result << "}";
// return R"({"rxState":0,"txState":0,"testState":0})";
return result.str();
} }
api_driver::ApiDriver::~ApiDriver() = default; api_driver::ApiDriver::~ApiDriver() = default;

View File

@ -15,14 +15,14 @@ namespace api_driver {
/** /**
* Запросить общее состояние терминала * Запросить общее состояние терминала
* @return {"rxState":0,"txState":0,"testState":0} * @return {"txState":false,"rxState":false,"rx.sym_sync_lock":false,"rx.freq_search_lock":false,"rx.afc_lock":false,"rx.pkt_sync":false}
*/ */
std::string loadTerminalState(); std::string loadTerminalState();
std::string loadTxStatistics(); /**
* Запросить статистику модулятора, демодулятора, CicC и температурные датчики
std::string loadRxStatistics(); * @return
*/
std::string loadDeviceStatistics(); std::string loadDeviceStatistics();
~ApiDriver(); ~ApiDriver();

View File

@ -3,54 +3,101 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title> <title>Вход</title>
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
<style>
#form-wrapper {
overflow: hidden;
max-width: 27em;
margin: 5em auto;
height: auto;
text-align: center;
}
.form-row {
padding: 4px 0;
margin: 1.5em;
}
.form-row * {
font-size: 1em;
text-align: left;
display: block;
}
.form-row label {
line-height: 2em;
font-weight: bolder;
}
.form-row input {
padding: 8px;
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: var(--brand-bg) 2px solid;
background-color: var(--bg-color);
text-overflow: ellipsis;
min-height: 2em;
}
.form-row input:focus {
outline: none;
border: none;
border-bottom: var(--brand-text) 2px solid;
background-color: var(--bg-selected);
}
#submit {
border: none;
font-weight: bolder;
background: var(--bg-action);
text-align: center;
}
</style>
</head> </head>
<body> <body>
<div id="mainState" hidden>
<h1>Общее состояние</h1> <div id="form-wrapper">
<ul> <h1> Вход </h1>
<li>Прием: {{ rxState }}</li> <form method="POST" id="login-form">
<li>Передача: {{ txState }}</li> {% csrf_token %}
<li>Тест: {{ testState }}</li>
<li>Последнее обновление: {{ lastUpdateTime }}</li> {% if message %}
</ul> <div class="form-row value-bad">
{{ message }}
</div>
{% endif %}
<div class="form-row">
<label for="username">Имя пользователя</label>
<input type="text" name="username" id="username" required/>
</div> </div>
<div id="status-header"></div> <div class="form-row">
<label for="password">Пароль</label>
<input type="password" name="password" id="password" required/>
</div>
<div class="form-row">
<input id="submit" type="submit" value="Войти">
</div>
</form>
</div>
<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="/js/vue.js"></script>
<script> <script>
const mainState = new Vue({ document.getElementById("username").onkeydown = (e) => {
el: '#mainState', if (e.key === 'Enter') {
data: { document.getElementById("password").focus()
rxState: '?',
txState: '?',
testState: '?',
lastUpdateTime: new Date()
},
methods: {
updateMainState(vals) {
this.lastUpdateTime = new Date();
this.rxState = vals["mainState"]["rxState"]
this.txState = vals["mainState"]["txState"]
this.testState = vals["mainState"]["testState"]
} }
},
mounted() {
setInterval(() => {
fetch("/api/mainStatistics").then(async (val) => {
this.updateMainState(await val.json())
});
}, 1000);
} }
})
document.getElementById("mainState").removeAttribute("hidden") document.getElementById("password").onkeydown = (e) => {
if (e.key === 'Enter') {
// import MyComponent from './modules/header' document.getElementById("login-form").submit()
// const sh = new Vue(MyComponent) }
}
</script> </script>
</body> </body>
</html> </html>

118
static/main.html Normal file
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<style>
.tabs-header {
margin: 0.5em 0;
background: var(--brand-bg);
}
.tabs-header > * {
display: inline-block;
}
.tabs-btn {
font-size: 18px;
border: none;
padding: 10px 25px;
text-align: center;
cursor: pointer;
margin-bottom: -3px;
border-bottom: 3px solid #eee;
}
.tabs-btn.active {
color: #5fa03a;
border-bottom: 3px solid #5fa03a;
}
.tabs-body-item {
padding: 20px 0;
}
</style>
</head>
<body>
<div id="app" hidden>
<div>
<h1>Общее состояние</h1>
<ul>
<li>Прием: {{ rxState }}</li>
<li>Передача: {{ txState }}</li>
<li>Тест: {{ testState }}</li>
<li>Последнее обновление: {{ lastUpdateTime }}</li>
</ul>
</div>
<div class="tabs">
<div class="tabs-header">
<span style="font-weight:bold">RSCM-101</span>
<button class="tabs-btn" @click="activeTab = 1" :class="{ active: activeTab === 1 }">Мониторинг</button>
<button class="tabs-btn" @click="activeTab = 2" :class="{ active: activeTab === 2 }">Прием/Передача</button>
<button class="tabs-btn" @click="activeTab = 3" :class="{ active: activeTab === 3 }">Настройки CinC</button>
<button class="tabs-btn" @click="activeTab = 4" :class="{ active: activeTab === 4 }">Настройки питания и опорного генератора</button>
<button class="tabs-btn" @click="activeTab = 5" :class="{ active: activeTab === 5 }">Администрирование</button>
</div>
<div class="tabs-body">
<div class="tabs-body-item" v-show="activeTab === 1">
<div>
<h2>Статистика передачи</h2>
</div>
</div>
<div class="tabs-body-item" v-show="activeTab === 2">
Содержимое вкладки 2
</div>
<div class="tabs-body-item" v-show="activeTab === 3">
Содержимое вкладки 3
</div>
<div class="tabs-body-item" v-show="activeTab === 4">
Содержимое вкладки 4
</div>
<div class="tabs-body-item" v-show="activeTab === 5">
Содержимое вкладки 5
</div>
</div>
</div>
</div>
<div id="mainState" hidden>
</div>
<div id="status-header"></div>
<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
activeTab: 1,
rxState: '?',
txState: '?',
testState: '?',
lastUpdateTime: new Date()
},
methods: {
updateMainState(vals) {
this.lastUpdateTime = new Date();
this.rxState = vals["mainState"]["rxState"]
this.txState = vals["mainState"]["txState"]
this.testState = vals["mainState"]["testState"]
}
},
mounted() {
setInterval(() => {
fetch("/api/mainStatistics").then(async (val) => {
this.updateMainState(await val.json())
});
}, 1000);
}
})
document.getElementById("app").removeAttribute("hidden")
// import MyComponent from './modules/header'
// const sh = new Vue(MyComponent)
</script>
</body>
</html>