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
});
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) {
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-error">
<div className="text-[8px] font-bold text-rose-500 uppercase">{t("ping.error")}</div>
</div>
);
}
if (!data) {
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-ping">
<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) {
colorClass = "text-rose-500"
statusText = t("ping.error")
statusTitle += " error"
} else if (!data) {
colorClass = "text-black/20 dark:text-white/40"
statusText = t("ping.ping")
statusTitle += " not available"
} else if (data.status > 403) {
colorClass = "text-rose-500/80"
statusTitle += ` ${data.status}`
if (style === "basic") {
status = t("docker.offline")
statusText = t("docker.offline")
} else if (style === "dot") {
status = "◉"
statusText = "◉"
textSize += "text-[10px]"
backgroundClass = ""
} 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 {
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 (
<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="text-[8px] font-bold text-emerald-500/80 uppercase">{status}</div>
<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>
</div>
);
}