diff --git a/web/index.html b/web/index.html index fd04fe8..3f3c7de 100644 --- a/web/index.html +++ b/web/index.html @@ -496,8 +496,45 @@ function displayApps(apps) { const tbody = document.getElementById("apps-tbody"); tbody.innerHTML = apps - .map( - (app) => ` + .map((app) => { + // Determinar color del badge segĂșn estado + const statusColors = { + Running: { + bg: "bg-green-100 dark:bg-green-900/30", + text: "text-green-700 dark:text-green-400", + dot: "bg-green-500", + }, + Stopped: { + bg: "bg-gray-100 dark:bg-gray-800", + text: "text-gray-700 dark:text-gray-400", + dot: "bg-gray-400", + }, + Failed: { + bg: "bg-red-100 dark:bg-red-900/30", + text: "text-red-700 dark:text-red-400", + dot: "bg-red-500", + }, + Starting: { + bg: "bg-blue-100 dark:bg-blue-900/30", + text: "text-blue-700 dark:text-blue-400", + dot: "bg-blue-500", + }, + Stopping: { + bg: "bg-yellow-100 dark:bg-yellow-900/30", + text: "text-yellow-700 dark:text-yellow-400", + dot: "bg-yellow-500", + }, + Unknown: { + bg: "bg-slate-100 dark:bg-slate-800", + text: "text-slate-700 dark:text-slate-400", + dot: "bg-slate-400", + }, + }; + + const statusStyle = + statusColors[app.status] || statusColors["Unknown"]; + + return `
${app}
-Servicio
+${app.name}
+${app.service_name || "Servicio"}