Uptime Indicators

This commit is contained in:
headlessdev 2025-04-12 16:51:40 +02:00
parent 9a3a36ab7c
commit 40302d7e4e
2 changed files with 32 additions and 25 deletions

View File

@ -8,7 +8,7 @@ import (
"os" "os"
"time" "time"
_ "github.com/jackc/pgx/v4/stdlib" // Wird für die Registrierung des pgx Treibers benötigt _ "github.com/jackc/pgx/v4/stdlib"
"github.com/joho/godotenv" "github.com/joho/godotenv"
) )

View File

@ -240,30 +240,37 @@ export default function Dashboard() {
"space-y-4"}> "space-y-4"}>
{applications.map((app) => ( {applications.map((app) => (
<Card <Card
key={app.id} key={app.id}
className={isGridLayout ? className={isGridLayout ? "h-full flex flex-col justify-between relative" : "w-full mb-4 relative"}
"h-full flex flex-col justify-between" : >
"w-full mb-4"} <CardHeader>
> {/* Online-/Offline-Indikator mit innerem Kreis */}
<CardHeader> <div className="absolute top-2 right-2">
<div className="flex items-center justify-between w-full"> <div
<div className="flex items-center"> className={`w-4 h-4 rounded-full flex items-center justify-center ${app.online ? "bg-green-700" : "bg-red-700"}`}
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md"> title={app.online ? "Online" : "Offline"}
{app.icon ? ( >
<img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" /> <div className={`w-2 h-2 rounded-full ${app.online ? "bg-green-500" : "bg-red-500"}`} />
) : ( </div>
<span className="text-gray-500 text-xs">Image</span> </div>
)} <div className="flex items-center justify-between w-full">
</div> <div className="flex items-center">
<div className="ml-4"> <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
<CardTitle className="text-2xl font-bold">{app.name}</CardTitle> {app.icon ? (
<CardDescription className="text-md"> <img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
{app.description}<br /> ) : (
Server: {app.server || 'No server'} <span className="text-gray-500 text-xs">Image</span>
</CardDescription> )}
</div>
</div> </div>
<div className="flex flex-col items-end justify-start space-y-2 w-[270px]"> <div className="ml-4">
<CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
<CardDescription className="text-md">
{app.description}<br />
Server: {app.server || 'No server'}
</CardDescription>
</div>
</div>
<div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex flex-col space-y-2 flex-grow"> <div className="flex flex-col space-y-2 flex-grow">
<Button <Button
@ -297,7 +304,7 @@ export default function Dashboard() {
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
</Card> </Card>
))} ))}
</div> </div>
<div className="pt-4"> <div className="pt-4">