1303 lines
57 KiB
HTML
1303 lines
57 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Оборудование</title>
|
|
<script src="/static/js/wesp-theme-boot.js"></script>
|
|
<script>document.documentElement.classList.add('wesp-page-enter-pending');</script>
|
|
<script src="/static/js/wesp-page-enter.js?v=5"></script>
|
|
<script src="/static/js/wesp-nav-logo-shimmer.js?v=3"></script>
|
|
<script src="/static/js/wesp-zootech-nav.js?v=5"></script>
|
|
|
|
<style>
|
|
html { background: #f5f7fa; }
|
|
html[data-theme="dark"] { background: #12181b; }
|
|
html[data-theme="organic"] { background: #f6f6f4; }
|
|
</style>
|
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/static/css/wesp-zootech-shell.css?v=3" rel="stylesheet">
|
|
<link href="/static/css/inter-fonts.css" rel="stylesheet">
|
|
<link href="/static/css/wesp-zootech-layout.css?v=17" rel="stylesheet"> <link href="/static/css/wesp-zootech-components.css?v=8" rel="stylesheet">
|
|
<link href="/static/css/wesp-recipes-editor.css?v=12" rel="stylesheet">
|
|
<link href="/static/css/wesp-zootech-shell-modals.css?v=4" rel="stylesheet">
|
|
<link href="/static/css/wesp-zootech-k-hub.css?v=28" rel="stylesheet">
|
|
<link href="/static/css/wesp-feed-quality-settings.css?v=3" rel="stylesheet">
|
|
<link href="/static/css/font-awesome.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Dark theme — палитра как у страницы входа */
|
|
html[data-theme="dark"] {
|
|
--bg-light: #12181b;
|
|
--bg-white: #2c3338;
|
|
--text-dark: #f5f5f5;
|
|
--text-muted: #a8b0b8;
|
|
--border-light: rgba(255, 255, 255, 0.12);
|
|
--shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.55);
|
|
--shadow-medium: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
|
|
}
|
|
|
|
html[data-theme="dark"] .page-header,
|
|
html[data-theme="dark"] .dispenser-card.list-item {
|
|
background: var(--bg-white) !important;
|
|
color: #f5f5f5 !important;
|
|
border-color: rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-card.list-item {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-card.list-item .list-item-title,
|
|
html[data-theme="dark"] .dispenser-card.list-item .dispenser-name-text {
|
|
color: #f5f5f5 !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-card__device-icon {
|
|
color: #4fc3f8 !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-period-row__name {
|
|
color: #f5f5f5 !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .page-header *,
|
|
html[data-theme="dark"] .dispenser-card.list-item * {
|
|
color: var(--text-dark) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .page-subtitle,
|
|
html[data-theme="dark"] .stat-label {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] ::placeholder {
|
|
color: rgba(255, 255, 255, 0.7) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .form-control,
|
|
html[data-theme="dark"] input,
|
|
html[data-theme="dark"] select,
|
|
html[data-theme="dark"] textarea {
|
|
background-color: var(--dm-field, #3e444a) !important;
|
|
color: #f5f5f5 !important;
|
|
border-color: rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .text-muted {
|
|
color: #94a3b8 !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .modal.fade .alert-info {
|
|
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
border-color: rgba(var(--primary-rgb), 0.35) !important;
|
|
color: var(--text-dark) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-card.list-item:hover {
|
|
background-color: rgba(var(--primary-rgb), 0.1) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .dispenser-card.list-item.active {
|
|
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Только контент страницы — не .mobile-navbar > .container (как на /recipes) */
|
|
.feed-dispensers-page .page-content > .container {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.1rem;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.add-devices-container,
|
|
.dispensers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.add-devices-container,
|
|
.dispensers-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.add-devices-container,
|
|
.dispensers-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.add-devices-container {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.dispensers-grid {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dispenser-card.list-item {
|
|
background: var(--bg-white);
|
|
border-radius: 16px;
|
|
padding: 1rem 1.125rem;
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.625rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dispenser-card.list-item:hover,
|
|
.dispenser-card.list-item.zt-card--interactive:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
border-color: var(--primary-color);
|
|
background-color: rgba(var(--primary-rgb), 0.05);
|
|
}
|
|
|
|
.dispenser-card.list-item.active {
|
|
border-color: var(--primary-color);
|
|
background-color: rgba(var(--primary-rgb), 0.08);
|
|
}
|
|
|
|
.dispenser-card .dispenser-card__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dispenser-card__device-icon {
|
|
flex-shrink: 0;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--primary-color);
|
|
font-size: 1.75rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.dispenser-card .list-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.25rem;
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dispenser-card__toolbar-spacer {
|
|
display: none;
|
|
}
|
|
|
|
.dispenser-card .list-item-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
line-height: 1.25;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dispenser-card .list-item-title .dispenser-name-text {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dispenser-card .dispenser-card-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem 0.75rem;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dispenser-card .dispenser-card-meta small {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.dispenser-periods {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.dispenser-periods__label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.dispenser-period-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.dispenser-period-row__text {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.dispenser-period-row__name {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
color: var(--text-dark);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.dispenser-period-row__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dispenser-periods__empty {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.dispenser-card .list-item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-wrap: nowrap;
|
|
gap: 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dispenser-card .recipe-table-move-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.dispenser-card .recipe-table-move-group > .btn + .btn {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Modern Button Styles (модалки и legacy) */
|
|
.modern-btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary-modern {
|
|
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
|
|
color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(var(--primary-rgb, 33, 150, 243), 0.25);
|
|
}
|
|
|
|
.btn-primary-modern:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px 0 rgba(var(--primary-rgb, 33, 150, 243), 0.35);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary-modern {
|
|
background: var(--bg-white);
|
|
color: var(--primary-blue);
|
|
border: 2px solid var(--border-light);
|
|
}
|
|
|
|
.btn-secondary-modern:hover {
|
|
border-color: var(--primary-blue);
|
|
background: rgba(var(--primary-rgb, 33, 150, 243), 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-success-modern {
|
|
background: linear-gradient(135deg, rgb(32, 114, 244), rgb(26, 95, 212));
|
|
color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(32, 114, 244, 0.25);
|
|
}
|
|
|
|
.btn-success-modern:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px 0 rgba(32, 114, 244, 0.35);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger-modern {
|
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
|
color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.btn-danger-modern:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.35);
|
|
color: white;
|
|
}
|
|
|
|
.add-dispenser-section.zt-card--dashed {
|
|
background: var(--bg-white);
|
|
border-radius: 16px;
|
|
padding: 1rem 1.125rem;
|
|
border: 1px dashed var(--border-light);
|
|
text-align: center;
|
|
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
.add-dispenser-section:hover {
|
|
border-color: var(--primary-color);
|
|
background: rgba(var(--primary-rgb, 33, 150, 243), 0.03);
|
|
}
|
|
|
|
.add-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 2.5rem;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.add-icon .dispenser-icon {
|
|
font-size: 1.75rem;
|
|
color: var(--primary-color);
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.add-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin: 0 0 0.25rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.add-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
margin: 0 0 0.75rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.add-dispenser-section .btn {
|
|
margin-top: auto;
|
|
width: 100%;
|
|
min-height: 2rem;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-light);
|
|
padding: 0.75rem 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--primary-blue);
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 33, 150, 243), 0.1);
|
|
}
|
|
|
|
.form-label {
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Адаптивные стили для мобильного меню */
|
|
@media (max-width: 768px) {
|
|
/* Скрываем десктопное меню на мобильных */
|
|
.desktop-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Показываем гамбургер-меню */
|
|
.hamburger-menu {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Скрываем пользователя на мобильных */
|
|
.user-section {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.feed-dispensers-page .page-content > .container {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Loading and empty states */
|
|
.loading-state {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 4rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Для темной темы */
|
|
html[data-theme="dark"] .add-icon .dispenser-icon {
|
|
color: #4fc3f7 !important;
|
|
}
|
|
</style>
|
|
<link href="/static/css/wesp-zootech-pages-polish.css?v=6" rel="stylesheet">
|
|
<link href="/static/css/wesp-zootech-theme-organic.css?v=6" rel="stylesheet">
|
|
</head>
|
|
<body class="zootech-app-body feed-dispensers-page">
|
|
<div id="wespZootechNavMount" data-active-page="feed_dispensers"></div>
|
|
|
|
<div class="page-content wesp-page-main">
|
|
<div class="container">
|
|
<!-- Add Devices Section (Split in half) -->
|
|
<div class="add-devices-container" data-wesp-enter>
|
|
<!-- Add Dispenser Section -->
|
|
<div class="add-dispenser-section zt-card zt-card--dashed">
|
|
<div class="add-icon">
|
|
<i class="fas fa-tractor dispenser-icon"></i>
|
|
</div>
|
|
<h3 class="add-title">Кормораздатчик</h3>
|
|
<p class="add-subtitle">Добавить кормораздатчик в систему</p>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="showModal('addDispenserModal')">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Добавить кормораздатчик
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Add Mill Section -->
|
|
<div class="add-dispenser-section zt-card zt-card--dashed">
|
|
<div class="add-icon">
|
|
<i class="fas fa-industry dispenser-icon"></i>
|
|
</div>
|
|
<h3 class="add-title">Кормоцех</h3>
|
|
<p class="add-subtitle">Добавить кормоцех в систему</p>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="showModal('addMillModal')">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Добавить кормоцех
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Add Milk Tank Section -->
|
|
<div class="add-dispenser-section zt-card zt-card--dashed">
|
|
<div class="add-icon">
|
|
<i class="fas fa-tint dispenser-icon"></i>
|
|
</div>
|
|
<h3 class="add-title">Учет молока</h3>
|
|
<p class="add-subtitle">Добавить молочный танк в систему</p>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="addMilkTank()">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Добавить молочный танк
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dispensers Grid -->
|
|
<div id="dispensersContainer">
|
|
<div class="loading-state">
|
|
<div class="zt-spinner" role="status" aria-hidden="true"></div>
|
|
<p class="zt-loading-caption">Загрузка кормораздатчиков…</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Dispenser Modal -->
|
|
<div class="modal wesp-shell-modal" id="addDispenserModal" tabindex="-1" aria-labelledby="addDispenserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="addDispenserModalLabel">Добавить кормораздатчик</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<form id="addDispenserForm">
|
|
<div class="mb-3">
|
|
<label for="dispenserName" class="form-label">Название кормораздатчика</label>
|
|
<input type="text" class="form-control" id="dispenserName" required placeholder="Введите название...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="dispenserFarm" class="form-label">Ферма</label>
|
|
<input type="text" class="form-control" id="dispenserFarm" required placeholder="Введите название фермы...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="dispenserOperator" class="form-label">Оператор</label>
|
|
<input type="text" class="form-control" id="dispenserOperator" required placeholder="Введите ФИО оператора...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn" data-bs-dismiss="modal">Отмена</button>
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" onclick="addDispenser()">Добавить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Mill Modal -->
|
|
<div class="modal wesp-shell-modal" id="addMillModal" tabindex="-1" aria-labelledby="addMillModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="addMillModalLabel">Добавить кормоцех</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<form id="addMillForm">
|
|
<div class="mb-3">
|
|
<label for="millName" class="form-label">Название кормоцеха</label>
|
|
<input type="text" class="form-control" id="millName" required placeholder="Введите название...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="millFarm" class="form-label">Ферма</label>
|
|
<input type="text" class="form-control" id="millFarm" required placeholder="Введите название фермы...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="millOperator" class="form-label">Оператор</label>
|
|
<input type="text" class="form-control" id="millOperator" required placeholder="Введите ФИО оператора...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn" data-bs-dismiss="modal">Отмена</button>
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" onclick="addMill()">Добавить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Dispenser Modal -->
|
|
<div class="modal wesp-shell-modal" id="editDispenserModal" tabindex="-1" aria-labelledby="editDispenserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="editDispenserModalLabel">Редактировать кормораздатчик</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<form id="editDispenserForm">
|
|
<div class="mb-3">
|
|
<label for="editDispenserName" class="form-label">Название кормораздатчика</label>
|
|
<input type="text" class="form-control" id="editDispenserName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editDispenserFarm" class="form-label">Ферма</label>
|
|
<input type="text" class="form-control" id="editDispenserFarm" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editDispenserOperator" class="form-label">Оператор</label>
|
|
<input type="text" class="form-control" id="editDispenserOperator" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn" data-bs-dismiss="modal">Отмена</button>
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" onclick="updateDispenser()">Сохранить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Period Modal -->
|
|
<div class="modal wesp-shell-modal" id="addPeriodModal" tabindex="-1" aria-labelledby="addPeriodModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="addPeriodModalLabel">Добавить период кормления</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<form id="addPeriodForm">
|
|
<div class="mb-3">
|
|
<label for="periodName" class="form-label">Название периода</label>
|
|
<input type="text" class="form-control" id="periodName" required placeholder="Введите название периода...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn" data-bs-dismiss="modal">Отмена</button>
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" onclick="addPeriod()">Добавить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Period Modal -->
|
|
<div class="modal wesp-shell-modal" id="editPeriodModal" tabindex="-1" aria-labelledby="editPeriodModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="editPeriodModalLabel">Редактировать период</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<form id="editPeriodForm">
|
|
<input type="hidden" id="editPeriodDispenserId">
|
|
<input type="hidden" id="editPeriodId">
|
|
<div class="mb-3">
|
|
<label for="editPeriodName" class="form-label">Название периода</label>
|
|
<input type="text" class="form-control" id="editPeriodName" required placeholder="Введите новое название...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn" data-bs-dismiss="modal">Отмена</button>
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" onclick="savePeriodEdit()">Сохранить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milk Tank Development Notice Modal -->
|
|
<div class="modal wesp-shell-modal" id="milkTankNoticeModal" tabindex="-1" aria-labelledby="milkTankNoticeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog--shell">
|
|
<div class="modal-content wesp-shell-bsmodal border-0 shadow-none">
|
|
<h2 class="wesp-shell-bsmodal-title" id="milkTankNoticeModalLabel">Учёт молока</h2>
|
|
<div class="wesp-shell-bsmodal-body">
|
|
<p class="mb-0"><strong>Скоро!</strong> Этот раздел сейчас активно разрабатывается.</p>
|
|
</div>
|
|
<div class="wesp-shell-bsmodal-actions">
|
|
<button type="button" class="wesp-shell-bsmodal-btn wesp-shell-bsmodal-btn-primary" data-bs-dismiss="modal">Понятно</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/wesp-zootech-notification-messages.js?v=1"></script>
|
|
<script src="/static/js/wesp-user-messages.js?v=1"></script>
|
|
<script src="/static/js/wesp-zootech-notify.js?v=6"></script>
|
|
<script src="/static/js/wesp-dialog.js"></script>
|
|
<script src="/static/js/wesp-zootech-bootstrap-modals.js?v=4"></script>
|
|
<script src="/static/js/modules/daily-plan-skip-duration.js?v=2"></script>
|
|
<script src="/static/js/modules/daily-plan-replace-component-modal.js?v=1"></script>
|
|
<script src="/static/js/pages/daily-plan-panel.js?v=11"></script>
|
|
<script src="/static/js/pages/lab-master-panel.js?v=2"></script>
|
|
<script src="/static/js/pages/lab-animal-profiles-modal.js?v=1"></script>
|
|
<script src="/static/js/pages/daily-plan-component-norms-modal.js?v=23"></script>
|
|
<script src="/static/js/wesp-zootech-notification-center.js?v=13"></script>
|
|
<script>
|
|
let dispensers = [];
|
|
let editingDispenserId = null;
|
|
let currentDispenserId = null;
|
|
|
|
// Load dispensers on page load (checkAuth — в module ниже)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadDispensers();
|
|
});
|
|
|
|
// Load dispensers from server
|
|
function loadDispensers() {
|
|
fetch('/api/feed_dispensers')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(err.error || "Не удалось загрузить данные");
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Проверяем, что data является массивом
|
|
if (!Array.isArray(data)) {
|
|
console.error('Ожидался массив, получено:', data);
|
|
throw new Error('Неверный формат данных от сервера');
|
|
}
|
|
dispensers = data;
|
|
renderDispensers();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading dispensers:', error);
|
|
showError('Не удалось загрузить кормораздатчики');
|
|
const container = document.getElementById('dispensersContainer');
|
|
if (container) {
|
|
container.innerHTML = `
|
|
<div class="empty-state wesp-content-reveal">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<h3>Ошибка загрузки</h3>
|
|
<p>Проверьте подключение и попробуйте снова.</p>
|
|
</div>
|
|
`;
|
|
window.WespZootechModals?.revealContent(container.querySelector('.empty-state'));
|
|
}
|
|
});
|
|
}
|
|
|
|
// Render dispensers grid
|
|
function renderDispensers() {
|
|
const container = document.getElementById('dispensersContainer');
|
|
|
|
// Фильтруем только активные (не удаленные) кормораздатчики
|
|
const activeDispensers = dispensers.filter(dispenser => !dispenser.is_deleted);
|
|
|
|
if (activeDispensers.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state wesp-content-reveal">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-tractor"></i>
|
|
</div>
|
|
<h3>Кормораздатчики не найдены</h3>
|
|
<p>Добавьте первый кормораздатчик для начала работы</p>
|
|
</div>
|
|
`;
|
|
window.WespZootechModals?.revealContent(container.querySelector('.empty-state'));
|
|
return;
|
|
}
|
|
|
|
const dispensersHtml = activeDispensers.map(dispenser => {
|
|
const isMill = dispenser.type === 'mill';
|
|
const deviceIcon = isMill ? 'fa-industry' : 'fa-tractor';
|
|
const periodsCount = dispenser.periods ? dispenser.periods.filter(p => !p.is_deleted).length : 0;
|
|
const periodsLabel = periodsCount === 1 ? 'период' : periodsCount >= 2 && periodsCount <= 4 ? 'периода' : 'периодов';
|
|
return `
|
|
<div class="dispenser-card list-item zt-card--interactive ${isMill ? 'dispenser-card--mill' : ''}" data-dispenser-id="${dispenser.id}" onclick="selectDispenser('${dispenser.id}')">
|
|
<div class="dispenser-card__top">
|
|
<div class="dispenser-card__device-icon" aria-hidden="true">
|
|
<i class="fas ${deviceIcon}"></i>
|
|
</div>
|
|
<div class="list-item-header dispenser-card__toolbar">
|
|
<div class="list-item-actions" role="group">
|
|
<div class="btn-group recipe-table-move-group" role="group">
|
|
${!isMill ? `
|
|
<button type="button"
|
|
class="btn btn-outline-secondary btn-sm recipe-table-move-btn"
|
|
onclick="event.stopPropagation(); managePeriods('${dispenser.id}')"
|
|
title="Добавить период"
|
|
aria-label="Добавить период">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
` : ''}
|
|
<button type="button"
|
|
class="btn btn-outline-secondary btn-sm recipe-table-move-btn"
|
|
onclick="event.stopPropagation(); editDispenser('${dispenser.id}', \`${dispenser.name}\`, \`${dispenser.farm || ''}\`, \`${dispenser.operator || ''}\`)"
|
|
title="Изменить оборудование"
|
|
aria-label="Изменить оборудование">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button"
|
|
class="btn btn-sm recipe-table-delete-btn"
|
|
onclick="event.stopPropagation(); deleteDispenser('${dispenser.id}')"
|
|
title="Удалить оборудование"
|
|
aria-label="Удалить оборудование">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="list-item-title mb-0">
|
|
<span class="dispenser-name-text">${dispenser.name}</span>
|
|
</h4>
|
|
${isMill ? `
|
|
<div class="list-item-meta dispenser-card-meta">
|
|
<small class="text-muted">${dispenser.operator || 'Не указан'}</small>
|
|
<small class="text-muted">${dispenser.farm || 'Не указана'}</small>
|
|
</div>
|
|
` : ''}
|
|
${!isMill ? `
|
|
<div class="dispenser-periods">
|
|
<p class="dispenser-periods__label">Периоды кормления · ${periodsCount} ${periodsLabel}</p>
|
|
${periodsCount > 0 ? dispenser.periods.filter(p => !p.is_deleted).map(period => `
|
|
<div class="dispenser-period-row">
|
|
<div class="dispenser-period-row__text">
|
|
<span class="dispenser-period-row__name">${period.name}</span>
|
|
</div>
|
|
<div class="dispenser-period-row__actions">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm recipe-table-move-btn" title="Изменить период" aria-label="Изменить период" onclick="event.stopPropagation(); openEditPeriod('${dispenser.id}', '${period.id}', \`${period.name}\`)">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm recipe-table-delete-btn" title="Удалить период" aria-label="Удалить период" onclick="event.stopPropagation(); deletePeriod('${dispenser.id}', '${period.id}')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('') : `<p class="dispenser-periods__empty">Нет периодов — нажмите «+» сверху</p>`}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
container.innerHTML = `<div class="dispensers-grid">${dispensersHtml}</div>`;
|
|
window.WespZootechModals?.animateGridCards('.dispensers-grid');
|
|
}
|
|
|
|
// Select dispenser
|
|
function selectDispenser(dispenserId) {
|
|
document.querySelectorAll('.dispenser-card').forEach(card => {
|
|
card.classList.remove('active');
|
|
});
|
|
document.querySelector(`[data-dispenser-id="${dispenserId}"]`)?.classList.add('active');
|
|
}
|
|
|
|
// Add new dispenser
|
|
function addDispenser() {
|
|
console.log('addDispenser called');
|
|
const nameElement = document.getElementById('dispenserName');
|
|
const farmElement = document.getElementById('dispenserFarm');
|
|
const operatorElement = document.getElementById('dispenserOperator');
|
|
|
|
console.log('Elements found:', { nameElement, farmElement, operatorElement });
|
|
|
|
const name = nameElement ? nameElement.value.trim() : '';
|
|
const farm = farmElement ? farmElement.value.trim() : '';
|
|
const operator = operatorElement ? operatorElement.value.trim() : '';
|
|
|
|
console.log('Values:', { name, farm, operator });
|
|
console.log('Raw values:', {
|
|
nameRaw: nameElement ? nameElement.value : 'null',
|
|
farmRaw: farmElement ? farmElement.value : 'null',
|
|
operatorRaw: operatorElement ? operatorElement.value : 'null'
|
|
});
|
|
|
|
if (!name || !farm || !operator) {
|
|
console.log('Validation failed:', { name: !!name, farm: !!farm, operator: !!operator });
|
|
showError('Заполните все поля');
|
|
return;
|
|
}
|
|
|
|
fetch('/api/feed_dispensers', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
farm: farm,
|
|
operator: operator,
|
|
type: 'dispenser'
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.id) {
|
|
showSuccess('Кормораздатчик успешно добавлен');
|
|
bootstrap.Modal.getInstance(document.getElementById('addDispenserModal')).hide();
|
|
document.getElementById('addDispenserForm').reset();
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при добавлении кормораздатчика');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error adding dispenser:', error);
|
|
showError('Ошибка при добавлении кормораздатчика');
|
|
});
|
|
}
|
|
|
|
// Add new mill
|
|
function addMill() {
|
|
console.log('addMill called');
|
|
const nameElement = document.getElementById('millName');
|
|
const farmElement = document.getElementById('millFarm');
|
|
const operatorElement = document.getElementById('millOperator');
|
|
|
|
const name = nameElement ? nameElement.value.trim() : '';
|
|
const farm = farmElement ? farmElement.value.trim() : '';
|
|
const operator = operatorElement ? operatorElement.value.trim() : '';
|
|
|
|
if (!name || !farm || !operator) {
|
|
showError('Заполните все поля');
|
|
return;
|
|
}
|
|
|
|
fetch('/api/feed_dispensers', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
farm: farm,
|
|
operator: operator,
|
|
type: 'mill'
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.id) {
|
|
showSuccess('Кормоцех успешно добавлен');
|
|
bootstrap.Modal.getInstance(document.getElementById('addMillModal')).hide();
|
|
document.getElementById('addMillForm').reset();
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при добавлении кормоцеха');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error adding mill:', error);
|
|
showError('Ошибка при добавлении кормоцеха');
|
|
});
|
|
}
|
|
|
|
// Add milk tank (в разработке)
|
|
function addMilkTank() {
|
|
showModal('milkTankNoticeModal');
|
|
}
|
|
|
|
// Edit dispenser
|
|
function editDispenser(id, name, farm, operator) {
|
|
editingDispenserId = id;
|
|
document.getElementById('editDispenserName').value = name;
|
|
document.getElementById('editDispenserFarm').value = farm;
|
|
document.getElementById('editDispenserOperator').value = operator;
|
|
showModal('editDispenserModal');
|
|
}
|
|
|
|
// Update dispenser
|
|
function updateDispenser() {
|
|
const name = document.getElementById('editDispenserName').value.trim();
|
|
const farm = document.getElementById('editDispenserFarm').value.trim();
|
|
const operator = document.getElementById('editDispenserOperator').value.trim();
|
|
|
|
if (!name || !farm || !operator) {
|
|
showError('Заполните все поля');
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/feed_dispensers/${editingDispenserId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
farm: farm,
|
|
operator: operator
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.message) {
|
|
showSuccess('Кормораздатчик успешно обновлен');
|
|
bootstrap.Modal.getInstance(document.getElementById('editDispenserModal')).hide();
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при обновлении кормораздатчика');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error updating dispenser:', error);
|
|
showError('Ошибка при обновлении кормораздатчика');
|
|
});
|
|
}
|
|
|
|
// Delete dispenser
|
|
async function deleteDispenser(id) {
|
|
if (!(await WespDialog.confirm('Вы уверены, что хотите удалить этот кормораздатчик? Это действие нельзя отменить.'))) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/feed_dispensers/${id}`, {
|
|
method: 'DELETE',
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.message) {
|
|
showSuccess('Кормораздатчик успешно удален');
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при удалении кормораздатчика');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error deleting dispenser:', error);
|
|
showError('Ошибка при удалении кормораздатчика');
|
|
});
|
|
}
|
|
|
|
function showModal(modalId) {
|
|
if (window.WespZootechModals?.show(modalId)) return;
|
|
const el = document.getElementById(modalId);
|
|
if (el) bootstrap.Modal.getOrCreateInstance(el).show();
|
|
}
|
|
|
|
// Manage periods (add)
|
|
function managePeriods(dispenserId) {
|
|
currentDispenserId = dispenserId;
|
|
showModal('addPeriodModal');
|
|
}
|
|
|
|
// Add period
|
|
function addPeriod() {
|
|
const name = document.getElementById('periodName').value.trim();
|
|
|
|
if (!name) {
|
|
showError('Введите название периода');
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/feed_dispensers/${currentDispenserId}/periods`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ name: name }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.id) {
|
|
showSuccess('Период успешно добавлен');
|
|
bootstrap.Modal.getInstance(document.getElementById('addPeriodModal')).hide();
|
|
document.getElementById('addPeriodForm').reset();
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при добавлении периода');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error adding period:', error);
|
|
showError('Ошибка при добавлении периода');
|
|
});
|
|
}
|
|
|
|
// Open edit period modal
|
|
async function openEditPeriod(dispenserId, periodId, periodName) {
|
|
try {
|
|
document.getElementById('editPeriodDispenserId').value = dispenserId;
|
|
document.getElementById('editPeriodId').value = periodId;
|
|
document.getElementById('editPeriodName').value = periodName || '';
|
|
showModal('editPeriodModal');
|
|
} catch (e) {
|
|
console.error('openEditPeriod error', e);
|
|
showError('Не удалось открыть окно редактирования периода');
|
|
}
|
|
}
|
|
|
|
// Save edit period
|
|
function savePeriodEdit() {
|
|
const dispenserId = document.getElementById('editPeriodDispenserId').value;
|
|
const periodId = document.getElementById('editPeriodId').value;
|
|
const name = document.getElementById('editPeriodName').value.trim();
|
|
|
|
if (!name) {
|
|
showError('Введите название периода');
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/feed_dispensers/${dispenserId}/periods/${periodId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data && (data.id || data.success)) {
|
|
showSuccess('Период обновлен');
|
|
bootstrap.Modal.getInstance(document.getElementById('editPeriodModal')).hide();
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при обновлении периода');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('savePeriodEdit error', err);
|
|
showError('Ошибка при обновлении периода');
|
|
});
|
|
}
|
|
|
|
async function deletePeriod(dispenserId, periodId) {
|
|
if (!(await WespDialog.confirm('Удалить этот период?'))) return;
|
|
fetch(`/api/feed_dispensers/${dispenserId}/periods/${periodId}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.message) {
|
|
showSuccess('Период удалён');
|
|
loadDispensers();
|
|
} else {
|
|
showError('Ошибка при удалении периода');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error deleting period:', error);
|
|
showError('Ошибка при удалении периода');
|
|
});
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
window.WespZootechNotify?.success(message);
|
|
}
|
|
|
|
function showError(message) {
|
|
window.WespZootechNotify?.error(message);
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- Настройки — как на /recipes -->
|
|
<div id="settingsModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content">
|
|
<div class="settings-modal-header">
|
|
<h3><i class="fas fa-cog"></i> Настройки</h3>
|
|
<span class="settings-close" data-action="close-settings">×</span>
|
|
</div>
|
|
<div class="settings-modal-body">
|
|
<div class="settings-user-card settings-user-card--clickable" data-action="toggle-credentials-form">
|
|
<h4 class="settings-card-title"><i class="fas fa-user"></i> Сменить логин/пароль <i class="fas fa-chevron-down settings-chevron"></i></h4>
|
|
</div>
|
|
<div class="settings-credentials-form" id="credentialsForm" style="display: none;">
|
|
<form id="settingsForm">
|
|
<div class="form-group">
|
|
<label for="oldLogin">Текущий логин:</label>
|
|
<input type="text" id="oldLogin" class="form-control" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="oldPassword">Текущий пароль:</label>
|
|
<input type="password" id="oldPassword" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newLogin">Новый логин:</label>
|
|
<input type="text" id="newLogin" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPassword">Новый пароль:</label>
|
|
<input type="password" id="newPassword" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Подтвердите новый пароль:</label>
|
|
<input type="password" id="confirmPassword" class="form-control" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="settings-sync-card settings-sync-card--clickable" data-action="toggle-sync-form">
|
|
<h4 class="settings-card-title"><i class="fas fa-sync-alt"></i> Настройка синхронизации <i class="fas fa-chevron-down settings-chevron"></i></h4>
|
|
</div>
|
|
<div class="settings-sync-form" id="syncSettingsForm" style="display: none;">
|
|
<div id="syncClientsListSettings"></div>
|
|
<div id="syncClientsEmptySettings" class="text-muted small" style="display: none;">Нет подключенных клиентов</div>
|
|
</div>
|
|
<div class="settings-feed-quality-card settings-feed-quality-card--clickable" data-action="open-feed-quality-settings">
|
|
<h4 class="settings-card-title"><i class="fas fa-triangle-exclamation"></i> Контроль отклонений <i class="fas fa-chevron-right settings-chevron"></i></h4>
|
|
</div>
|
|
<div class="settings-theme-card">
|
|
<h4 class="settings-card-title"><i class="fas fa-palette"></i> Тема оформления</h4>
|
|
<div id="wespThemePicker" class="theme-picker-mount" role="radiogroup" aria-label="Тема оформления"></div>
|
|
<div class="settings-contrast-row">
|
|
<span class="settings-contrast-row__label">Усиленный контраст</span>
|
|
<label class="theme-switch" for="wespHighContrastToggle">
|
|
<input type="checkbox" id="wespHighContrastToggle" role="switch" aria-label="Усиленный контраст">
|
|
<span class="theme-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-muted small mt-2">Версия системы 2.1</div>
|
|
</div>
|
|
<div class="settings-modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-action="close-settings">Отмена</button>
|
|
<button type="button" class="btn btn-primary" data-action="change-credentials">
|
|
<i class="fas fa-save"></i> Сохранить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { createRecipesAuthSettingsController } from '/static/js/pages/recipes-auth-settings.js';
|
|
import { initFeedQualitySettingsModal } from '/static/js/pages/feed-quality-settings-modal.js?v=3';
|
|
import { SyncPanel } from '/static/js/modules/recipes/sync-panel.js';
|
|
|
|
const notyf = window.WespZootechNotify.createAdapter();
|
|
|
|
const authSettingsController = createRecipesAuthSettingsController({ notyf });
|
|
const syncPanelModule = new SyncPanel({
|
|
openSettings: (event) => authSettingsController.openSettings(event),
|
|
closeSettings: () => authSettingsController.closeSettings(),
|
|
toggleCredentialsForm: () => authSettingsController.toggleCredentialsForm(),
|
|
toggleSyncForm: () => authSettingsController.toggleSyncForm(),
|
|
changeCredentials: () => authSettingsController.changeCredentials(),
|
|
editSyncClientSettings: (btn) => authSettingsController.editSyncClientSettings(btn),
|
|
deleteSyncClientSettings: (btn) => authSettingsController.deleteSyncClientSettings(btn),
|
|
saveSyncClientDisplayName: (nodeId) => authSettingsController.saveSyncClientDisplayName(nodeId),
|
|
loadSyncClientsSettings: () => authSettingsController.loadSyncClientsSettings(),
|
|
});
|
|
|
|
window.openSettings = (event) => authSettingsController.openSettings(event);
|
|
window.closeSettings = () => authSettingsController.closeSettings();
|
|
window.logout = () => authSettingsController.logout();
|
|
|
|
document.addEventListener('click', async (event) => {
|
|
const actionEl = event.target.closest('[data-action]');
|
|
if (!actionEl) return;
|
|
const action = actionEl.dataset.action;
|
|
if (await syncPanelModule.handleAction(action, event, actionEl)) return;
|
|
if (action === 'logout') {
|
|
event.preventDefault();
|
|
authSettingsController.logout();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initFeedQualitySettingsModal(notyf);
|
|
authSettingsController.checkAuth();
|
|
});
|
|
</script>
|
|
<footer class="app-footer" data-wesp-enter>
|
|
<span class="text-muted small">Комптон® является зарегистрированным товарным знаком</span>
|
|
</footer>
|
|
<link href="/static/css/wesp-update-banner.css" rel="stylesheet">
|
|
<script src="/static/js/wesp-update-notifier.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
if (window.WespUpdateNotifier && window.WespDialog) {
|
|
WespUpdateNotifier.init({ dialog: window.WespDialog });
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |