pf-sdn/webui/src/ui/subscriptions.js

126 lines
4.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import $ from 'jquery';
import { JSONRPC } from '@/json-rpc.js';
// --- Глобальное состояние для страницы ---
let availableResources = {};
let subscribedKeys = [];
/** Загружает все необходимые данные для страницы */
async function loadSubscriptionData() {
try {
subscribedKeys = await JSONRPC.SubscriptionManager.getSubscribedResources();
availableResources = await JSONRPC.SubscriptionManager.getAvailableResources();
} catch (e) {
console.error("Ошибка при загрузке данных подписок:", e);
availableResources = {};
subscribedKeys = [];
return false;
}
return true;
}
/** Рендеринг HTML списка */
function renderSubscriptionList() {
const $listContainer = $('#subscription-list-container');
const availableKeys = Object.keys(availableResources).sort();
if (availableKeys.length === 0) {
$listContainer.html('<p>Нет доступных ресурсов для подписки.</p>');
return;
}
let listHtml = availableKeys.map(key => {
const details = availableResources[key];
const isChecked = subscribedKeys.includes(key);
// 🔥 Обновлено: Используем description и меняем структуру
const description = details.description || 'Нет описания';
// Формируем строку с деталями (теперь на новой строке)
const detailText = `
Доменов: ${details.domains ? details.domains.length : 0},
ASN: ${details.ASN ? details.ASN.length : 0},
Подсетей: ${details.subnets ? details.subnets.length : 0}
`;
return `
<li class="subscription-item">
<label>
<input type="checkbox" class="subscription-checkbox" value="${key}" ${isChecked ? 'checked' : ''}>
<div class="resource-info">
<div class="resource-main-line">
<span class="resource-description">${description}</span>
<span class="resource-key">(${key})</span>
</div>
<div class="resource-details">${detailText}</div>
</div>
</label>
</li>
`;
}).join('');
const html = `
<ul class="subscription-list">${listHtml}</ul>
<button id="save-subscriptions-btn" class="btn-primary" style="width: 250px; margin-top: 30px;">Сохранить</button>
<div id="subscription-status-message" class="error-message" style="display: none;"></div>
`;
$listContainer.html(html);
attachEventHandlers();
}
/** Обработчик кнопки "Сохранить" (остается без изменений) */
function attachEventHandlers() {
$('#save-subscriptions-btn').on('click', async function() {
const $btn = $(this);
const $message = $('#subscription-status-message');
$message.hide().removeClass('success-message').addClass('error-message');
const newSubscribedKeys = $('.subscription-checkbox:checked').map(function() {
return $(this).val();
}).get();
$btn.prop('disabled', true).text('Сохранение...');
try {
await JSONRPC.SubscriptionManager.setSubscribedResources(newSubscribedKeys);
subscribedKeys = newSubscribedKeys;
$message.text('Настройки подписок успешно сохранены!').addClass('success-message').show();
} catch (e) {
console.error('Ошибка сохранения подписок:', e);
$message.text('Ошибка при сохранении подписок.').show();
} finally {
$btn.prop('disabled', false).text('Сохранить');
setTimeout(() => $message.fadeOut(), 5000);
}
});
}
// ... (SubscriptionsPage, loadSubscriptionData остаются без изменений) ...
export const SubscriptionsPage = {
render: () => {
return `
<h1 class="page-title">Управление Подписками</h1>
<div id="subscription-list-container">
<p>Загрузка доступных ресурсов...</p>
</div>
`;
},
mount: async () => {
const success = await loadSubscriptionData();
if (success) {
renderSubscriptionList();
} else {
$('#subscription-list-container').html('<p class="error-message">Не удалось загрузить данные. Проверьте соединение с сервером.</p>');
}
},
unmount: () => {
availableResources = {};
subscribedKeys = [];
}
};