lucasacchi/llm-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix model details modal and make running models primary page

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-25 13:31:04 +02:00
parent 1aee51b0d6
commit 87ebd35ad5
3 changed files with 45 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/static/js/app.js
+35 -56
View File
@@ -39,62 +39,6 @@ class LLMMonitorApp {
this.requestSync();
});
// Listener click card modello
document.getElementById("models-container")?.addEventListener("click", (event) => {
const card = event.target.closest("[data-model-key]");
if (!card) {
return;
}
const modelKey = card.getAttribute("data-model-key");
if (!modelKey) {
return;
}
this.showModelDetails(decodeURIComponent(modelKey));
});
// Apertura modal on-hover (con piccolo delay per evitare aperture involontarie)
document.getElementById("models-container")?.addEventListener("mouseover", (event) => {
const card = event.target.closest("[data-model-key]");
if (!card) {
return;
}
// Evita trigger quando il mouse si muove dentro la stessa card
if (event.relatedTarget && card.contains(event.relatedTarget)) {
return;
}
const modelKey = card.getAttribute("data-model-key");
if (!modelKey) {
return;
}
if (this.hoverOpenTimer) {
clearTimeout(this.hoverOpenTimer);
}
this.hoverOpenTimer = setTimeout(() => {
this.showModelDetails(decodeURIComponent(modelKey));
}, this.hoverOpenDelayMs);
});
document.getElementById("models-container")?.addEventListener("mouseout", (event) => {
const card = event.target.closest("[data-model-key]");
if (!card) {
return;
}
// Non cancellare se si resta all'interno della stessa card
if (event.relatedTarget && card.contains(event.relatedTarget)) {
return;
}
if (this.hoverOpenTimer) {
clearTimeout(this.hoverOpenTimer);
this.hoverOpenTimer = null;
}
});
// Chiusura modal con pulsante X
document.getElementById("model-details-close")?.addEventListener("click", () => {
this.hideModelDetails();
@@ -223,9 +167,44 @@ class LLMMonitorApp {
// Aggiornare solo se veramente diverso
if (container.innerHTML !== newHTML) {
container.innerHTML = newHTML;
this.bindModelCardInteractions();
}
}
// Associare eventi card dopo ogni render (piu affidabile della delega su hover)
bindModelCardInteractions() {
const cards = document.querySelectorAll("#models-container [data-model-key]");
cards.forEach((card) => {
const modelKey = card.getAttribute("data-model-key");
if (!modelKey) {
return;
}
const modelName = decodeURIComponent(modelKey);
card.addEventListener("click", () => {
this.showModelDetails(modelName);
});
card.addEventListener("mouseenter", () => {
if (this.hoverOpenTimer) {
clearTimeout(this.hoverOpenTimer);
}
this.hoverOpenTimer = setTimeout(() => {
this.showModelDetails(modelName);
}, this.hoverOpenDelayMs);
});
card.addEventListener("mouseleave", () => {
if (this.hoverOpenTimer) {
clearTimeout(this.hoverOpenTimer);
this.hoverOpenTimer = null;
}
});
});
}
// Renderizzare singola card modello
renderModelCard(model) {
const formattedDate = this.formatDate(model.modified_at);
app/web/templates/models_running.html
+1 -1
View File
@@ -30,7 +30,7 @@
</div>
</div>
<div class="flex items-center gap-2">
<a href="/dashboard" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Dashboard</a>
<a href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Modelli Disponibili</a>
<button id="refresh-btn" class="text-sm bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg transition">Aggiorna</button>
</div>
</div>