TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-02-01 14:31:50 +00:00
Code Activity

fix breaking ui

Browse Source
This commit is contained in:
CanbiZ 2025-01-30 13:48:36 +01:00
parent a38e9070ef
commit 343de50ef8
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/data/page.tsx
View File

@ -159,12 +159,6 @@ const DataFetcher: React.FC = () => {
/>
<label className="text-sm text-gray-600 mt-1 block">Set a end date</label>
</div>
<button
onClick={() => setShowChart((prev) => !prev)}
className="p-2 bg-blue-500 text-white rounded"
>
{showChart ? "Hide Chart" : "Show Chart"}
</button>
</div>
<ApplicationChart data={filteredData} />
<div className="mb-4 flex justify-between items-center">

26
frontend/src/components/ApplicationChart.tsx
View File

@ -16,6 +16,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
const [isChartOpen, setIsChartOpen] = useState(false);
const [isTableOpen, setIsTableOpen] = useState(false);
const [chartStartIndex, setChartStartIndex] = useState(0);
const [tableLimit, setTableLimit] = useState(20);
const appCounts: Record<string, number> = {};
data.forEach((item) => {
@ -59,7 +60,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
</button>
<Modal isOpen={isChartOpen} onClose={() => setIsChartOpen(false)}>
<h2 className="text-xl font-bold mb-4">Top Applications (Chart)</h2>
<h2 className="text-xl font-bold text-black dark:text-white mb-4">Top Applications (Chart)</h2>
<div className="w-3/4 mx-auto">
<Pie
data={chartData}
@ -82,21 +83,21 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
disabled={chartStartIndex === 0}
className="p-2 border rounded bg-blue-500 text-white"
>
◀ Vorherige 20
◀ Last 20
</button>
<button
onClick={() => setChartStartIndex(chartStartIndex + 20)}
disabled={chartStartIndex + 20 >= sortedApps.length}
className="p-2 border rounded bg-blue-500 text-white"
>
Nächste 20 ▶
Next 20 ▶
</button>
</div>
</Modal>
<Modal isOpen={isTableOpen} onClose={() => setIsTableOpen(false)}>
<h2 className="text-xl font-bold mb-4">Application Count Table</h2>
<table className="w-full border-collapse border border-gray-600">
<h2 className="text-xl font-bold text-black dark:text-white mb-4">Application Count Table</h2>
<table className="w-full border-collapse border border-gray-600 dark:border-gray-500">
<thead>
<tr className="bg-gray-800 text-white">
<th className="p-2 border">Application</th>
@ -104,14 +105,25 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
</tr>
</thead>
<tbody>
{sortedApps.map(([name, count]) => (
<tr key={name} className="hover:bg-gray-200">
{sortedApps.slice(0, tableLimit).map(([name, count]) => (
<tr key={name} className="hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white">
<td className="p-2 border">{name}</td>
<td className="p-2 border">{count}</td>
</tr>
))}
</tbody>
</table>
{tableLimit < sortedApps.length && (
<div className="text-center mt-4">
<button
onClick={() => setTableLimit(tableLimit + 20)}
className="p-2 bg-green-500 text-white rounded"
>
Load More
</button>
</div>
)}
</Modal>
</div>
);

2
frontend/src/components/Modal.tsx
View File

@ -13,7 +13,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white p-6 rounded-lg shadow-lg w-3/4 max-w-4xl relative">
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg w-11/12 max-w-4xl relative max-h-[90vh] overflow-y-auto">
<button
onClick={onClose}
className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded"