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)), .sort((a, b) => a.area.localeCompare(b.area)),
})); }));
}, [templates, servers]); }, [templates, servers]);
const routerColumnClass = groupedByRouter.length > 1 ? 'col-12 col-xxl-6' : 'col-12';
const loadServers = async () => { const loadServers = async () => {
try { try {
@@ -333,7 +334,7 @@ export default function OspfToolsPage() {
) : ( ) : (
<div className="row g-3"> <div className="row g-3">
{groupedByRouter.map((routerGroup) => ( {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 card-sm border">
<div className="card-header fw-semibold">{routerGroup.routerLabel}</div> <div className="card-header fw-semibold">{routerGroup.routerLabel}</div>
<div className="card-body p-0"> <div className="card-body p-0">
@@ -350,7 +351,7 @@ export default function OspfToolsPage() {
return ( return (
<div <div
key={item.key} key={item.key}
className="list-group-item d-flex align-items-center justify-content-between" className="list-group-item"
draggable draggable
onDragStart={() => setDragging({ onDragStart={() => setDragging({
routerKey: routerGroup.routerKey, routerKey: routerGroup.routerKey,
@@ -362,22 +363,26 @@ export default function OspfToolsPage() {
onDragEnd={() => setDragging(null)} onDragEnd={() => setDragging(null)}
style={{ cursor: 'grab' }} style={{ cursor: 'grab' }}
> >
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center justify-content-between gap-2 flex-wrap">
<span className="text-muted small">::</span> <div className="d-flex align-items-center gap-2 flex-wrap">
<code>{item.interfaceName}</code> <span className="text-muted small">::</span>
<span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}> <code>{item.interfaceName}</code>
{item.active ? 'Активен' : 'Неактивен'} <span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
</span> {item.active ? 'Активен' : 'Неактивен'}
{hint && (
<span
className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
>
opt cost {hint.optimalCost}
</span> </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> </div>
<span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
</div> </div>
); );
})() })()