denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(OspfToolsPage): improve layout and responsiveness of router groups and item display
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m0s
Details

Browse Source
This commit is contained in:
denozord
2026-03-05 16:59:48 +07:00
parent 897dd52eac
commit 81347c6c8d
1 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/OspfToolsPage.jsx
+21 -16
View File
@@ -171,6 +171,7 @@ export default function OspfToolsPage() {
.sort((a, b) => a.area.localeCompare(b.area)),
}));
}, [templates, servers]);
const routerColumnClass = groupedByRouter.length > 1 ? 'col-12 col-xxl-6' : 'col-12';
const loadServers = async () => {
try {
@@ -333,7 +334,7 @@ export default function OspfToolsPage() {
) : (
<div className="row g-3">
{groupedByRouter.map((routerGroup) => (
<div key={routerGroup.routerKey} className="col-12 col-xl-6">
<div key={routerGroup.routerKey} className={routerColumnClass}>
<div className="card card-sm border">
<div className="card-header fw-semibold">{routerGroup.routerLabel}</div>
<div className="card-body p-0">
@@ -350,7 +351,7 @@ export default function OspfToolsPage() {
return (
<div
key={item.key}
className="list-group-item d-flex align-items-center justify-content-between"
className="list-group-item"
draggable
onDragStart={() => setDragging({
routerKey: routerGroup.routerKey,
@@ -362,22 +363,26 @@ export default function OspfToolsPage() {
onDragEnd={() => setDragging(null)}
style={{ cursor: 'grab' }}
>
<div className="d-flex align-items-center gap-2">
<span className="text-muted small">::</span>
<code>{item.interfaceName}</code>
<span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
{item.active ? 'Активен' : 'Неактивен'}
</span>
{hint && (
<span
className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
>
opt cost {hint.optimalCost}
<div className="d-flex align-items-center justify-content-between gap-2 flex-wrap">
<div className="d-flex align-items-center gap-2 flex-wrap">
<span className="text-muted small">::</span>
<code>{item.interfaceName}</code>
<span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
{item.active ? 'Активен' : 'Неактивен'}
</span>
)}
</div>
<div className="d-flex align-items-center gap-2 ms-auto">
{hint && (
<span
className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
>
opt cost {hint.optimalCost}
</span>
)}
<span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
</div>
</div>
<span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
</div>
);
})()