transit from nadrez, added panel

This commit is contained in:
2022-11-18 09:27:17 +10:00
parent 5e3e42ebe7
commit d8c41863a8
15 changed files with 11243 additions and 0 deletions

View File

@@ -0,0 +1,87 @@
::selection {
background: #808080;
}
::-moz-selection {
background: #808080;
}
body {
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #1c1c1c;
}
h1 {
margin-top: -10px;
margin-bottom: 10px;
color: #fafafa;
}
.setting:not(:last-child) {
margin-bottom: 10px;
}
.setting {
width: 40%;
}
.setting>label {
margin-bottom: 4px;
display: block;
color: #c4c4c4;
}
.setting>input:is([type="text"], [type="number"]) {
width: 100%;
padding: 5px 10px;
border-radius: 0px;
border: none;
outline: none;
color: #d0d0d0;
background-color: #2c2c2c;
}
.setting>input[type="checkbox"] {
display: none;
}
.setting>input[type="checkbox"]+div.checkbox[type="button"] {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #282828;
}
.setting>input[type="checkbox"]+div.checkbox[type="button"]:before {
content: 'Отключено';
color: #d0d0d0;
display: block;
}
.setting>input[type="checkbox"]+div.checkbox[type="button"]:hover {
background-color: #2b2b2b;
}
.setting>input[type="checkbox"]+div.checkbox[type="button"]:active {
background-color: #252525;
}
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"] {
background-color: #3c3c3c;
}
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:before {
content: 'Включено'
}
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:hover {
background-color: #3f3f3f;
}
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:active {
background-color: #3a3a3a;
}

View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/settings.css">
</head>
<body>
<h1>Настройки</h1>
<script src="../settings.js" defer></script>
<script src="js/generator.js" defer></script>
</body>
</html>

View File

@@ -0,0 +1,161 @@
'use strict'
/**
* Генерация HTML-элемента настройки с текстовым полем
*
* @param {string} id Настройка
* @param {string|null} name Ярлык настройки (понятный пользователю)
*
* @return {bool} Статус выполнения
*/
function text(id, name) {
if (typeof id === 'string') {
settings.read(id).then(result => {
// Инициализация оболочки поля ввода
let wrap = document.createElement('div');
wrap.classList.add('setting');
// Инициализация ярлыка поля ввода
let label = document.createElement('label');
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
// Инициализация поля ввода
let text = document.createElement('input');
text.setAttribute('id', id);
text.setAttribute('type', 'text');
text.value = result[id] ?? '';
// Инициализация архитектуры
wrap.appendChild(label);
wrap.appendChild(text);
// Запись в документ
document.body.appendChild(wrap);
// Инициализация созданного элемента поля ввода
text = document.getElementById(id);
// Инициализация события
text.addEventListener("change", fn => { settings.write(id, text.value); });
return true;
});
}
return false;
}
/**
* Генерация HTML-элемента настройки с циферным полем
*
* @param {string} id Настройка
* @param {string|null} name Ярлык настройки (понятный пользователю)
*
* @return {bool} Статус выполнения
*/
function number(id, name, min = 0, max = 100) {
if (typeof id === 'string') {
settings.read(id).then(result => {
// Инициализация оболочки циферного поля ввода
let wrap = document.createElement('div');
wrap.classList.add('setting');
// Инициализация ярлыка циферного поля ввода
let label = document.createElement('label');
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
// Инициализация поля циферного ввода
let number = document.createElement('input');
number.setAttribute('id', id);
number.setAttribute('type', 'number');
number.min = min;
number.max = max;
number.value = result[id] ?? '';
// Инициализация архитектуры
wrap.appendChild(label);
wrap.appendChild(number);
// Запись в документ
document.body.appendChild(wrap);
// Инициализация созданного элемента циферного поля ввода
number = document.getElementById(id);
// Инициализация события
number.addEventListener("change", fn => { settings.write(id, number.value); });
return true;
});
}
return false;
}
/**
* Генерация HTML-элемента настройки с кнопкой активации
*
* @param {string} id Настройка
* @param {string|null} name Ярлык настройки (понятный пользователю)
*
* @return {bool} Статус выполнения
*/
function checkbox(id, name) {
if (typeof id === 'string') {
settings.read(id).then(result => {
// Инициализация оболочки кнопки активации
let wrap = document.createElement('div');
wrap.classList.add('setting');
// Инициализация ярлыка кнопки активации
let label = document.createElement('label');
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
// Инициализация кнопки активации (настоящая)
let checkbox = document.createElement('input');
checkbox.setAttribute('id', id);
checkbox.setAttribute('type', 'checkbox');
checkbox.checked = result[id] === true || result[id] === 1 || result[id] === '1' ? true : false;
// Инициализация кнопки активации (видимая)
let div = document.createElement('div');
div.setAttribute('id', id + '_button');
div.classList.add('checkbox');
div.setAttribute('type', 'button');
// Инициализация архитектуры
wrap.appendChild(label);
wrap.appendChild(checkbox);
wrap.appendChild(div);
// Запись в документ
document.body.appendChild(wrap);
// Инициализация созданного элемента кнопки активации
checkbox = document.getElementById(id);
// Инициализация событий
checkbox.addEventListener("change", fn => { settings.write(id, checkbox.checked); });
document.getElementById(id + '_button').addEventListener("click", fn => { checkbox.checked = checkbox.checked ? false : true; });
return true;
});
}
return false;
}
/**
* Инициализация
*/
function init() {
checkbox('debug', 'Режим отладки');
checkbox('autonom', 'Режим автономный');
number('server_connect_repeats', 'Количество попыток соединения');
checkbox('instructions', 'Инструкции');
checkbox('instruction_settings', 'Инструкция по доступу к настройкам');
checkbox('instruction_killer', 'Инструкция по доступу к удалению сообщений');
checkbox('instruction_visor', 'Инструкция по доступу к просмотру удалённых сообщений');
}
document.addEventListener("DOMContentLoaded", init);