markmorado/pvemanager
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases 3 Wiki Activity

Fix Font Awesome icons rendering in modal dialogs

Browse Source 
- Changed textContent to innerHTML for proper HTML icon rendering
- Fixed VNC modal titles in instance_detail.html, proxmox_vms.html, proxmox_server_detail.html
- Fixed command execution output icons in instance_detail.html
- Fixed settings and reinstall modal titles in proxmox_server_detail.html
- Added color styles to IPv4/IPv6 network interface icons
This commit is contained in:
dilshod
2025-12-15 20:37:34 +05:00
parent cf456faa16
commit b0450438da
3 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
backend/app/templates/instance_detail.html
View File

@@ -633,7 +633,9 @@ function displayNetworkInterfaces(interfaces) {
if (iface.ips && iface.ips.length > 0) { if (iface.ips && iface.ips.length > 0) {
html += '<div style="display: flex; flex-direction: column; gap: 0.35rem;">'; html += '<div style="display: flex; flex-direction: column; gap: 0.35rem;">';
iface.ips.forEach(ip => { iface.ips.forEach(ip => {
const icon = ip.type === 'ipv4' ? '<i class="fa-solid fa-globe"></i>' : '<i class="fa-solid fa-earth-americas"></i>'; const icon = ip.type === 'ipv4'
? '<i class="fa-solid fa-globe" style="color: var(--success);"></i>'
: '<i class="fa-solid fa-earth-americas" style="color: var(--info);"></i>';
const badge = ip.type === 'ipv4' ? const badge = ip.type === 'ipv4' ?
'<span class="badge badge-success">IPv4</span>' : '<span class="badge badge-success">IPv4</span>' :
'<span class="badge badge-info">IPv6</span>'; '<span class="badge badge-info">IPv6</span>';
@@ -740,7 +742,7 @@ async function executeCommand(command) {
const outputContent = document.getElementById('command-output-content'); const outputContent = document.getElementById('command-output-content');
outputDiv.style.display = 'block'; outputDiv.style.display = 'block';
outputContent.textContent = `$ ${command}\n<i class="fa-solid fa-spinner fa-spin"></i> Выполняется...\n`; outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-spinner fa-spin"></i> Выполняется...\n`;
try { try {
const timeout = 30; const timeout = 30;
@@ -753,7 +755,7 @@ async function executeCommand(command) {
if (!response.ok) { if (!response.ok) {
const error = await response.text(); const error = await response.text();
outputContent.textContent = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> Ошибка: ${error}`; outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> Ошибка: ${error}`;
showNotification('Ошибка выполнения команды', 'error'); showNotification('Ошибка выполнения команды', 'error');
return; return;
} }
@@ -762,7 +764,7 @@ async function executeCommand(command) {
displayCommandOutput(result, command); displayCommandOutput(result, command);
} catch (error) { } catch (error) {
outputContent.textContent = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> Ошибка: ${error.message}`; outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> Ошибка: ${error.message}`;
showNotification('Ошибка выполнения команды', 'error'); showNotification('Ошибка выполнения команды', 'error');
} }
} }
@@ -1092,9 +1094,9 @@ function drawCharts(data, timeframe = 'hour') {
// Модальное окно подтверждения // Модальное окно подтверждения
function showConfirmModal(icon, title, message, btnColor, action) { function showConfirmModal(icon, title, message, btnColor, action) {
pendingAction = action; pendingAction = action;
document.getElementById('confirmIcon').textContent = icon; document.getElementById('confirmIcon').innerHTML = icon;
document.getElementById('confirmTitle').textContent = title; document.getElementById('confirmTitle').textContent = title;
document.getElementById('confirmMessage').textContent = message; document.getElementById('confirmMessage').innerHTML = message;
document.getElementById('confirmBtn').style.background = btnColor; document.getElementById('confirmBtn').style.background = btnColor;
document.getElementById('confirmModal').style.display = 'flex'; document.getElementById('confirmModal').style.display = 'flex';
} }
@@ -1240,7 +1242,7 @@ async function openVNC() {
const vncContent = document.getElementById('vncContent'); const vncContent = document.getElementById('vncContent');
modal.style.display = 'flex'; modal.style.display = 'flex';
document.getElementById('vncTitle').textContent = `<i class="fa-solid fa-desktop"></i> VNC Console: ${instanceName}`; document.getElementById('vncTitle').innerHTML = `<i class="fa-solid fa-desktop"></i> VNC Console: ${instanceName}`;
vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting')}</div>`; vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting')}</div>`;
try { try {

6
backend/app/templates/proxmox_server_detail.html
View File

@@ -1360,7 +1360,7 @@ let RFBClass = null;
function showVNCModal(serverId, node, vmid, type, name) { function showVNCModal(serverId, node, vmid, type, name) {
const modal = document.getElementById('vncModal'); const modal = document.getElementById('vncModal');
document.getElementById('vncTitle').textContent = `<i class="fa-solid fa-desktop"></i> VNC Console: ${name} (${vmid})`; document.getElementById('vncTitle').innerHTML = `<i class="fa-solid fa-desktop"></i> VNC Console: ${name} (${vmid})`;
document.getElementById('vncContent').innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting_to_vnc')}</div>`; document.getElementById('vncContent').innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting_to_vnc')}</div>`;
modal.style.display = 'flex'; modal.style.display = 'flex';
@@ -1760,7 +1760,7 @@ async function showEditConfigModal(serverId, node, vmid, type, name) {
const title = document.getElementById('editConfigTitle'); const title = document.getElementById('editConfigTitle');
const content = document.getElementById('editConfigContent'); const content = document.getElementById('editConfigContent');
title.textContent = `<i class="fa-solid fa-gear"></i> Настройки: ${name} (${vmid})`; title.innerHTML = `<i class="fa-solid fa-gear"></i> Настройки: ${name} (${vmid})`;
content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Загрузка конфигурации...</div>'; content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Загрузка конфигурации...</div>';
modal.style.display = 'flex'; modal.style.display = 'flex';
@@ -2027,7 +2027,7 @@ async function showReinstallModal(serverId, node, vmid, type, name) {
const title = document.getElementById('reinstallTitle'); const title = document.getElementById('reinstallTitle');
const content = document.getElementById('reinstallContent'); const content = document.getElementById('reinstallContent');
title.textContent = `<i class="fa-solid fa-rotate"></i> Переустановка: ${name} (${vmid})`; title.innerHTML = `<i class="fa-solid fa-rotate"></i> Переустановка: ${name} (${vmid})`;
content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Загрузка доступных шаблонов...</div>'; content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Загрузка доступных шаблонов...</div>';
modal.style.display = 'flex'; modal.style.display = 'flex';

2
backend/app/templates/proxmox_vms.html
View File

@@ -1498,7 +1498,7 @@ function drawCharts(cpuData, memData, netData, diskData) {
// VNC Modal // VNC Modal
function showVNCModal(serverId, node, vmid, type, name) { function showVNCModal(serverId, node, vmid, type, name) {
const modal = document.getElementById('vncModal'); const modal = document.getElementById('vncModal');
document.getElementById('vncTitle').textContent = `<i class="fa-solid fa-desktop"></i> VNC Console: ${name} (${vmid})`; document.getElementById('vncTitle').innerHTML = `<i class="fa-solid fa-desktop"></i> VNC Console: ${name} (${vmid})`;
document.getElementById('vncContent').innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting')}</div>`; document.getElementById('vncContent').innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting')}</div>`;
modal.style.display = 'flex'; modal.style.display = 'flex';