Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-01 21:13:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

new dot styling

Browse Source
This commit is contained in:
Luca Kröger 2023-09-27 22:07:38 +02:00
parent 24825f90ea
commit 2df5baac9d
1 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,57 +7,52 @@ export default function Ping({ group, service, style }) {
refreshInterval: 30000 refreshInterval: 30000
}); });
let textSize = "text-[8px]";
let colorClass = ""
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50";
let statusTitle = "HTTP status";
let statusText;
if (error) { if (error) {
return ( colorClass = "text-rose-500"
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden ping-error"> statusText = t("ping.error")
<div className="text-[8px] font-bold text-rose-500 uppercase">{t("ping.error")}</div> statusTitle += " error"
</div> } else if (!data) {
); colorClass = "text-black/20 dark:text-white/40"
} statusText = t("ping.ping")
statusTitle += " not available"
if (!data) { } else if (data.status > 403) {
return ( colorClass = "text-rose-500/80"
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden ping-ping"> statusTitle += ` ${data.status}`
<div className="text-[8px] font-bold text-black/20 dark:text-white/40 uppercase">{t("ping.ping")}</div>
</div>
);
}
let statusText = `HTTP status ${data.status}`;
let status;
if (data.status > 403) {
if (style === "basic") { if (style === "basic") {
status = t("docker.offline") statusText = t("docker.offline")
} else if (style === "dot") { } else if (style === "dot") {
status = "◉" statusText = "◉"
textSize += "text-[10px]"
backgroundClass = ""
} else { } else {
status = data.status statusText = data.status
} }
return (
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden ping-status-invalid" title={statusText}>
<div className="text-[8px] font-bold text-rose-500/80 uppercase">{status}</div>
</div>
);
}
// Sucessful ping
const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
statusText += ` (${ping})`;
if (style === "basic") {
status = t("docker.running")
} else if (style === "dot") {
status = "◉"
} else { } else {
status = ping const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
statusTitle += ` ${data.status} (${ping})`;
colorClass = "text-emerald-500/80"
if (style === "basic") {
statusText = t("docker.running")
} else if (style === "dot") {
statusText = "◉"
textSize += "text-[10px]"
backgroundClass = ""
} else {
statusText = ping
}
} }
return ( return (
<div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden ping-status-valid" title={statusText}> <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="text-[8px] font-bold text-emerald-500/80 uppercase">{status}</div> <div className={`font-bold uppercase ${textSize} ${colorClass}`}>{statusText}</div>
</div> </div>
); );
} }