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

feat: Add country flag display for inventory servers in FilterManager to enhance visual representation and user experience.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m10s
Details

Browse Source
This commit is contained in:
denozord
2025-12-06 23:23:42 +07:00
parent 8a99309773
commit 85e4f9c22d
1 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+36 -6
View File
@@ -35,6 +35,14 @@ import {
const API_URL = '/api'; const API_URL = '/api';
const countryToFlag = (code) => {
if (!code || typeof code !== 'string') return '';
const cc = code.trim().toUpperCase();
if (cc.length !== 2) return '';
const codePoints = [...cc].map((c) => 0x1f1e6 - 65 + c.charCodeAt(0));
return String.fromCodePoint(...codePoints);
};
function FilterManager() { function FilterManager() {
const [error, setError] = useState(''); const [error, setError] = useState('');
const [success, setSuccess] = useState(''); const [success, setSuccess] = useState('');
@@ -1007,9 +1015,20 @@ function FilterManager() {
onClick={() => setSelectedServer(server)} onClick={() => setSelectedServer(server)}
> >
<div className="card-body d-flex align-items-start gap-2"> <div className="card-body d-flex align-items-start gap-2">
<span className="avatar bg-primary-lt"> {(() => {
<IconServer size={16} /> const meta = inventoryServers.find(
</span> (s) =>
String(s.dns || '').trim() === server.name ||
String(s.hostName || '').trim() === server.name ||
String(s.ip || '').trim() === server.name
);
const flag = meta?.country ? countryToFlag(meta.country) : '';
return (
<span className="avatar bg-primary-lt" title={meta?.country || ''}>
{flag || <IconServer size={16} />}
</span>
);
})()}
<div className="flex-grow-1"> <div className="flex-grow-1">
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2">
<div className="fw-bold text-truncate" title={server.name}>{server.name}</div> <div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
@@ -1051,9 +1070,20 @@ function FilterManager() {
onClick={() => setSelectedServer(server)} onClick={() => setSelectedServer(server)}
> >
<div className="card-body d-flex align-items-start gap-2"> <div className="card-body d-flex align-items-start gap-2">
<span className="avatar bg-secondary-lt"> {(() => {
<IconServer size={16} /> const meta = inventoryServers.find(
</span> (s) =>
String(s.dns || '').trim() === server.name ||
String(s.hostName || '').trim() === server.name ||
String(s.ip || '').trim() === server.name
);
const flag = meta?.country ? countryToFlag(meta.country) : '';
return (
<span className="avatar bg-secondary-lt" title={meta?.country || ''}>
{flag || <IconServer size={16} />}
</span>
);
})()}
<div className="flex-grow-1"> <div className="flex-grow-1">
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2">
<div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div> <div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>