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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

127
static/login.html
View File

@@ -3,54 +3,101 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title>
<title>Вход</title>
<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>
<body>
<div id="mainState" hidden>
<h1>Общее состояние</h1>
<ul>
<li>Прием: {{ rxState }}</li>
<li>Передача: {{ txState }}</li>
<li>Тест: {{ testState }}</li>
<li>Последнее обновление: {{ lastUpdateTime }}</li>
</ul>
<div id="form-wrapper">
<h1> Вход </h1>
<form method="POST" id="login-form">
{% csrf_token %}
{% if message %}
<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 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>
<div id="status-header"></div>
<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="/js/vue.js"></script>
<script>
const mainState = new Vue({
el: '#mainState',
data: {
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("username").onkeydown = (e) => {
if (e.key === 'Enter') {
document.getElementById("password").focus()
}
})
}
document.getElementById("mainState").removeAttribute("hidden")
// import MyComponent from './modules/header'
// const sh = new Vue(MyComponent)
document.getElementById("password").onkeydown = (e) => {
if (e.key === 'Enter') {
document.getElementById("login-form").submit()
}
}
</script>
</body>
</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>