Fix HTML escaping in state descriptions and improve formatting in statistics view
This commit is contained in:
@@ -1393,22 +1393,22 @@
|
||||
<h3 class="text-lg font-semibold text-base flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"><\/path>
|
||||
<\/svg>
|
||||
${interfaceData.name}
|
||||
</h3>
|
||||
<p class="text-sm text-base/60 mt-1">Live bandwidth • Updates every 30 seconds</p>
|
||||
</div>
|
||||
<\/h3>
|
||||
<p class="text-sm text-base/60 mt-1">Live bandwidth • Updates every 30 seconds<\/p>
|
||||
<\/div>
|
||||
<button class="flex items-center gap-1.5 text-base/60 hover:text-base transition-colors chart-toggle"
|
||||
data-interface="${interfaceId}"
|
||||
title="Toggle network graph">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium">Graph</span>
|
||||
</button>
|
||||
</div>
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"><\/path>
|
||||
<\/svg>
|
||||
<span class="text-sm font-medium">Graph<\/span>
|
||||
<\/button>
|
||||
<\/div>
|
||||
|
||||
<!-- Download Speed -->
|
||||
<div class="mb-6">
|
||||
@@ -1416,20 +1416,20 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-base/80">Download</span>
|
||||
<span class="text-lg font-bold text-success" data-traffic="${interfaceId}-download-rate">0 B/s</span>
|
||||
</div>
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"><\/path>
|
||||
<\/svg>
|
||||
<span class="text-sm font-medium text-base/80">Download<\/span>
|
||||
<span class="text-lg font-bold text-success" data-traffic="${interfaceId}-download-rate">0 B/s<\/span>
|
||||
<\/div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs text-base/50">Peak: </span>
|
||||
<span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-download-peak">0 B/s</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-base/50">Peak: <\/span>
|
||||
<span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-download-peak">0 B/s<\/span>
|
||||
<\/div>
|
||||
<\/div>
|
||||
<div class="network-flow-bar">
|
||||
<div class="network-flow-fill download" data-traffic="${interfaceId}-download-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-flow-fill download" data-traffic="${interfaceId}-download-bar"><\/div>
|
||||
<\/div>
|
||||
<\/div>
|
||||
|
||||
<!-- Upload Speed -->
|
||||
<div class="mb-6">
|
||||
@@ -1437,44 +1437,44 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-base/80">Upload</span>
|
||||
<span class="text-lg font-bold text-info" data-traffic="${interfaceId}-upload-rate">0 B/s</span>
|
||||
</div>
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"><\/path>
|
||||
<\/svg>
|
||||
<span class="text-sm font-medium text-base/80">Upload<\/span>
|
||||
<span class="text-lg font-bold text-info" data-traffic="${interfaceId}-upload-rate">0 B/s<\/span>
|
||||
<\/div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs text-base/50">Peak: </span>
|
||||
<span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-upload-peak">0 B/s</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-base/50">Peak: <\/span>
|
||||
<span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-upload-peak">0 B/s<\/span>
|
||||
<\/div>
|
||||
<\/div>
|
||||
<div class="network-flow-bar">
|
||||
<div class="network-flow-fill upload" data-traffic="${interfaceId}-upload-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-flow-fill upload" data-traffic="${interfaceId}-upload-bar"><\/div>
|
||||
<\/div>
|
||||
<\/div>
|
||||
|
||||
<!-- Network Graph Dropdown -->
|
||||
<div class="chart-dropdown" data-chart-container="${interfaceId}">
|
||||
<div class="border-t border-neutral/30 pt-4 mt-4">
|
||||
<canvas id="chart-${interfaceId}" class="w-full" style="height: 200px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-${interfaceId}" class="w-full" style="height: 200px;"><\/canvas>
|
||||
<\/div>
|
||||
<\/div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="grid grid-cols-3 gap-3 text-center">
|
||||
<div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
|
||||
<p class="text-xs text-base/50 uppercase">Combined</p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-combined">0 B/s</p>
|
||||
</div>
|
||||
<p class="text-xs text-base/50 uppercase">Combined<\/p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-combined">0 B/s<\/p>
|
||||
<\/div>
|
||||
<div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
|
||||
<p class="text-xs text-base/50 uppercase">Total In</p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-in">0 MB</p>
|
||||
</div>
|
||||
<p class="text-xs text-base/50 uppercase">Total In<\/p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-in">0 MB<\/p>
|
||||
<\/div>
|
||||
<div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
|
||||
<p class="text-xs text-base/50 uppercase">Total Out</p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-out">0 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-base/50 uppercase">Total Out<\/p>
|
||||
<p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-out">0 MB<\/p>
|
||||
<\/div>
|
||||
<\/div>
|
||||
<\/div>
|
||||
`;
|
||||
};
|
||||
|
||||
@@ -1608,10 +1608,10 @@
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-8 text-center">
|
||||
<svg class="w-12 h-12 mx-auto text-base/40 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<p class="text-base/60">No network data available</p>
|
||||
</div>
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"><\/path>
|
||||
<\/svg>
|
||||
<p class="text-base/60">No network data available<\/p>
|
||||
<\/div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
@@ -1879,11 +1879,11 @@
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-8 text-center">
|
||||
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<p class="text-base/60">Failed to load network data</p>
|
||||
<p class="text-sm text-base/40 mt-2">${error.message}</p>
|
||||
</div>
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"><\/path>
|
||||
<\/svg>
|
||||
<p class="text-base/60">Failed to load network data<\/p>
|
||||
<p class="text-sm text-base/40 mt-2">${error.message}<\/p>
|
||||
<\/div>
|
||||
`;
|
||||
}
|
||||
} finally {
|
||||
@@ -2200,4 +2200,4 @@
|
||||
</script>
|
||||
@endonce
|
||||
|
||||
</x-proxmox::layout>
|
||||
</x-proxmox::layout>
|
||||
|
||||
Reference in New Issue
Block a user