OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use div for ping dot

Browse Source
This commit is contained in:
shamoon 2023-10-04 20:09:15 -07:00
parent a9c71366b3
commit 8d6bfbcfaa
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/services/ping.jsx
View File

@ -7,7 +7,6 @@ export default function Ping({ group, service, style }) {
refreshInterval: 30000 refreshInterval: 30000
}); });
let textSize = "text-[8px]";
let colorClass = "" let colorClass = ""
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50"; let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50";
let statusTitle = "HTTP status"; let statusTitle = "HTTP status";
@ -27,10 +26,6 @@ export default function Ping({ group, service, style }) {
if (style === "basic") { if (style === "basic") {
statusText = t("docker.offline") statusText = t("docker.offline")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
} else { } else {
statusText = data.status statusText = data.status
} }
@ -41,18 +36,23 @@ export default function Ping({ group, service, style }) {
if (style === "basic") { if (style === "basic") {
statusText = t("docker.running") statusText = t("docker.running")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
} else { } else {
statusText = ping statusText = ping
} }
} }
if (style === "dot") {
backgroundClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '')
}
return ( return (
<div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${backgroundClass}`} title={statusTitle}> <>
<div className={`font-bold uppercase ${textSize} ${colorClass}`}>{statusText}</div> {style !== 'dot' &&
</div> <div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${style !== 'dot' ? backgroundClass : ''}`} title={statusTitle}>
<div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>
</div>
}
{style == 'dot' && <div className={`rounded-full h-[9px] w-[9px] ${backgroundClass}`} title={statusTitle}></div>}
</>
); );
} }