v2026.5.26 — Badge user-badge cliquable + auto-détection EV à l'ouverture admin

This commit is contained in:
Quentin Rouiller
2026-04-23 16:21:48 +02:00
parent 10a1aef4c7
commit 3a28e1bd0a
3 changed files with 161 additions and 43 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Planification", "name": "Planification",
"version": "2026.5.25", "version": "2026.5.26",
"description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.", "description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.",
"permissions": ["activeTab", "scripting", "storage", "tabs", "alarms"], "permissions": ["activeTab", "scripting", "storage", "tabs", "alarms"],
"host_permissions": [ "host_permissions": [
+55 -15
View File
@@ -2745,15 +2745,9 @@ header.topbar::before {
filter: brightness(1.1); filter: brightness(1.1);
} }
/* v2026.5.18 : couleurs par catégorie (fond = couleur, texte blanc) */ /* v2026.5.18 : couleurs par catégorie (fond = couleur, texte blanc) */
.pinned-popup-dock-pill.color-livraison { background: var(--c-livraison); color: white; border-color: transparent; } /* v2026.5.26 : les anciennes règles color-XXX qui mettaient un fond coloré vif
.pinned-popup-dock-pill.color-installation { background: var(--c-installation); color: white; border-color: transparent; } sont remplacées par une simple barre verticale à gauche de la pastille.
.pinned-popup-dock-pill.color-recup { background: var(--c-recup); color: white; border-color: transparent; } Les styles pour ::before sont plus bas dans le fichier. */
.pinned-popup-dock-pill.color-remplacement { background: var(--c-remplacement); color: white; border-color: transparent; }
.pinned-popup-dock-pill.color-incident { background: var(--c-incident); color: white; border-color: transparent; }
.pinned-popup-dock-pill.color-rollout { background: var(--c-rollout); color: white; border-color: transparent; }
.pinned-popup-dock-pill.color-reservation { background: var(--c-reservation); color: white; border-color: transparent; }
.pinned-popup-dock-pill.color-absence { background: #2a2f36; color: white; border-color: transparent; }
.pinned-popup-dock-pill.color-autre { background: var(--c-autre); color: white; border-color: transparent; }
/* v2026.5.18 : bouton "Fermer tous" à droite du dock */ /* v2026.5.18 : bouton "Fermer tous" à droite du dock */
.pinned-popups-close-all { .pinned-popups-close-all {
@@ -3007,19 +3001,49 @@ body.popup-dragging .pinned-popup {
v2026.5.25 : pastille dock enrichie (lieu + service + date) + v2026.5.25 : pastille dock enrichie (lieu + service + date) +
bouton Paramètres dans popup user-badge + bouton Paramètres dans popup user-badge +
ref dans mini-menu pill ref dans mini-menu pill
v2026.5.26 : couleurs sobres (fond sombre + barre colorée à gauche) +
contenu centré
========================================================================== */ ========================================================================== */
/* Pastille dock : 3 lignes */ /* Pastille dock : 3 lignes centrées, fond sombre, barre colorée à gauche */
.pinned-popup-dock-pill { .pinned-popup-dock-pill {
flex-direction: column !important; flex-direction: column !important;
align-items: flex-start !important; align-items: center !important;
padding: 6px 14px !important; justify-content: center !important;
padding: 6px 14px 6px 18px !important;
gap: 2px !important; gap: 2px !important;
line-height: 1.2 !important; line-height: 1.2 !important;
text-align: left; text-align: center;
min-width: 200px; min-width: 200px;
max-width: 300px; max-width: 300px;
/* Fond sobre et texte bien lisible, peu importe la catégorie */
background: var(--bg-muted) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
position: relative;
overflow: hidden;
} }
/* Barre verticale colorée à gauche = indicateur de catégorie */
.pinned-popup-dock-pill::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--c-autre);
}
.pinned-popup-dock-pill.color-livraison::before { background: var(--c-livraison); }
.pinned-popup-dock-pill.color-installation::before { background: var(--c-installation); }
.pinned-popup-dock-pill.color-recup::before { background: var(--c-recup); }
.pinned-popup-dock-pill.color-remplacement::before { background: var(--c-remplacement); }
.pinned-popup-dock-pill.color-incident::before { background: var(--c-incident); }
.pinned-popup-dock-pill.color-rollout::before { background: var(--c-rollout); }
.pinned-popup-dock-pill.color-reservation::before { background: var(--c-reservation); }
.pinned-popup-dock-pill.color-absence::before { background: #666; }
.pinned-popup-dock-pill.color-autre::before { background: var(--c-autre); }
.pinned-popup-dock-pill-lieu { .pinned-popup-dock-pill-lieu {
display: block; display: block;
font-size: 13px; font-size: 13px;
@@ -3028,23 +3052,27 @@ body.popup-dragging .pinned-popup {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--text);
text-align: center;
} }
.pinned-popup-dock-pill-service { .pinned-popup-dock-pill-service {
display: block; display: block;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
opacity: 0.85; color: var(--text-muted);
max-width: 100%; max-width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center;
} }
.pinned-popup-dock-pill-date { .pinned-popup-dock-pill-date {
display: block; display: block;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
opacity: 0.75; color: var(--text-faint);
font-family: var(--mono, monospace); font-family: var(--mono, monospace);
text-align: center;
} }
/* Ref dans le mini-menu hover de la pastille */ /* Ref dans le mini-menu hover de la pastille */
@@ -3089,3 +3117,15 @@ body.popup-dragging .pinned-popup {
.user-name-popup-settings .settings-ico { .user-name-popup-settings .settings-ico {
font-size: 15px; font-size: 15px;
} }
/* ==========================================================================
v2026.5.26 : rond gris avec "?" quand user inconnu
========================================================================== */
.user-badge.user-badge-unknown {
--user-badge-color: #6b7280 !important;
opacity: 0.75;
font-weight: 500;
}
.user-badge.user-badge-unknown:hover {
opacity: 1;
}
+105 -27
View File
@@ -327,24 +327,60 @@ function markSessionActivity() {
// v4.2 : fetche l'utilisateur EasyVista connecté (via background.js) et // v4.2 : fetche l'utilisateur EasyVista connecté (via background.js) et
// l'affiche dans la topbar. En cas d'échec ou si aucun nom n'est trouvé, // l'affiche dans la topbar. En cas d'échec ou si aucun nom n'est trouvé,
// le badge reste caché. // le badge reste caché.
// v2026.5.26 : en cas d'échec, afficher quand même un rond vide avec "?"
// pour que l'user puisse ouvrir le popup (bouton Paramètres). Et retry
// automatique toutes les 60s (max 10 essais = 10 min) pour récupérer le user
// dès qu'il devient disponible (ex: après reconnexion SSO).
let _currentUserRetryCount = 0;
const _CURRENT_USER_MAX_RETRIES = 10;
const _CURRENT_USER_RETRY_DELAY_MS = 60 * 1000;
async function fetchAndShowCurrentUser() { async function fetchAndShowCurrentUser() {
let success = false;
try { try {
const resp = await sendMessage({ type: "fetchCurrentUser" }); const resp = await sendMessage({ type: "fetchCurrentUser" });
if (!resp || !resp.ok || !resp.user) return; if (resp && resp.ok && resp.user) {
const badge = document.getElementById("user-badge"); const badge = document.getElementById("user-badge");
if (!badge) return; if (badge) {
const fullName = resp.user.name || resp.user.login || null; const fullName = resp.user.name || resp.user.login || null;
if (!fullName) return; if (fullName) {
const initials = computeUserInitials(fullName); const initials = computeUserInitials(fullName);
badge.textContent = initials; badge.textContent = initials;
badge.title = fullName; badge.title = fullName;
// v4.2.3 : couleur unique dérivée du nom, dans la palette neutre du thème badge.style.setProperty("--user-badge-color", colorFromName(fullName));
badge.style.setProperty("--user-badge-color", colorFromName(fullName)); badge.classList.remove("hidden");
badge.classList.remove("hidden"); badge.classList.remove("user-badge-unknown");
state.currentUser = resp.user; state.currentUser = resp.user;
success = true;
_currentUserRetryCount = 0; // reset au succès
}
}
}
} catch (err) { } catch (err) {
console.warn("[currentUser] fetch failed:", err); console.warn("[currentUser] fetch failed:", err);
} }
// v2026.5.26 : échec → afficher rond vide avec "?" + scheduler retry
if (!success) {
const badge = document.getElementById("user-badge");
if (badge) {
badge.textContent = "?";
badge.title = "Utilisateur inconnu — cliquer pour accéder aux paramètres";
badge.style.setProperty("--user-badge-color", "#6b7280");
badge.classList.remove("hidden");
badge.classList.add("user-badge-unknown");
}
// Schedule retry si pas trop d'essais
if (_currentUserRetryCount < _CURRENT_USER_MAX_RETRIES) {
_currentUserRetryCount++;
console.log(`[currentUser] retry ${_currentUserRetryCount}/${_CURRENT_USER_MAX_RETRIES} dans ${_CURRENT_USER_RETRY_DELAY_MS / 1000}s`);
setTimeout(() => {
fetchAndShowCurrentUser();
}, _CURRENT_USER_RETRY_DELAY_MS);
} else {
console.warn("[currentUser] max retries atteint, arrêt");
}
}
} }
// v4.2.3 : calcule les initiales depuis un nom au format "Nom, Prénom" ou // v4.2.3 : calcule les initiales depuis un nom au format "Nom, Prénom" ou
@@ -400,14 +436,20 @@ function toggleUserNamePopup() {
hideUserNamePopup(); hideUserNamePopup();
return; return;
} }
if (!state.currentUser || !state.currentUser.name) return;
// v2026.5.17 : afficher aussi le temps restant de la session (MM:SS) avec // v2026.5.17 : afficher aussi le temps restant de la session (MM:SS) avec
// une couleur qui dépend du seuil (vert/jaune/rouge). // une couleur qui dépend du seuil (vert/jaune/rouge).
// v2026.5.26 : si user inconnu, afficher "Utilisateur inconnu" + retry + réglages
popup.innerHTML = ""; popup.innerHTML = "";
const nameEl = document.createElement("div"); const nameEl = document.createElement("div");
nameEl.className = "user-name-popup-name"; nameEl.className = "user-name-popup-name";
nameEl.textContent = state.currentUser.name; if (state.currentUser && state.currentUser.name) {
nameEl.textContent = state.currentUser.name;
} else {
nameEl.textContent = "Utilisateur inconnu";
nameEl.style.fontStyle = "italic";
nameEl.style.color = "var(--text-muted)";
}
popup.appendChild(nameEl); popup.appendChild(nameEl);
const sessEl = document.createElement("div"); const sessEl = document.createElement("div");
@@ -1714,17 +1756,9 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
tableWrap.appendChild(table); tableWrap.appendChild(table);
// Bouton Ajouter manuellement // v2026.5.26 : bouton "+ Ajouter manuellement" retiré. La liste complète
const addBtn = document.createElement("button"); // des techniciens du groupe est chargée automatiquement depuis EasyVista
addBtn.type = "button"; // à l'ouverture du panel admin (voir auto-détection plus bas).
addBtn.className = "btn btn-secondary";
addBtn.textContent = "+ Ajouter manuellement";
addBtn.style.marginTop = "10px";
addBtn.addEventListener("click", () => {
rows.push({ id: "", name: "", included: true, days: [] });
render();
});
tableWrap.appendChild(addBtn);
// Bouton Enregistrer // Bouton Enregistrer
const saveBtn = document.createElement("button"); const saveBtn = document.createElement("button");
@@ -1750,6 +1784,36 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
} }
render(); render();
// v2026.5.26 : auto-détection EasyVista à l'ouverture du panel admin.
// On lance en arrière-plan (non-bloquant), et on merge avec cfg.team actuel
// quand le résultat arrive. Les techs actuellement en cfg.team restent
// cochés par défaut ; les nouveaux détectés du groupe apparaissent non-cochés.
(async () => {
try {
const resp = await sendMessage({ type: "detectTeam" });
if (resp && resp.ok && resp.members && resp.members.length) {
for (const m of resp.members) {
const existing = rows.find(r => r.id === m.id);
if (existing) {
if (m.name && !m.name.startsWith("?") && existing.name.startsWith("?")) {
existing.name = m.name;
}
} else {
rows.push({
id: m.id,
name: m.name || "? (" + m.id + ")",
included: !!m.alreadyInTeam,
days: []
});
}
}
render();
}
} catch (err) {
console.warn("[admin auto-detect]", err);
}
})();
} }
// v5.0.0 : sections suivantes (placeholders, à enrichir v5.0.1+) // v5.0.0 : sections suivantes (placeholders, à enrichir v5.0.1+)
@@ -6642,11 +6706,25 @@ function pinTooltip() {
// Service : prendre les 2 dernières parties séparées par "/" // Service : prendre les 2 dernières parties séparées par "/"
// Ex: "AdmCV/DJES/SSCM/SSCM - Admin/TEO - OS" → "SSCM - Admin/TEO - OS" // Ex: "AdmCV/DJES/SSCM/SSCM - Admin/TEO - OS" → "SSCM - Admin/TEO - OS"
// "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron" // "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron"
// v2026.5.26 : dans le DERNIER segment seulement, couper au " - " (espace
// tiret espace) pour retirer les descriptions longues. Les
// noms propres comme "Lavaux-Oron" (sans espaces) sont préservés.
// Ex: "AdmCV/DJES/SSCM/SPOP - Centre administratif" → "SSCM/SPOP"
// "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron" (inchangé)
const serviceRaw = (info.service) || iv.categoryLine || ""; const serviceRaw = (info.service) || iv.categoryLine || "";
if (serviceRaw) { if (serviceRaw) {
const parts = serviceRaw.split("/").map(s => s.trim()).filter(Boolean); const parts = serviceRaw.split("/").map(s => s.trim()).filter(Boolean);
const last2 = parts.slice(-2).join("/"); let last2 = parts.slice(-2);
popup.dataset.service = last2; // Couper au " - " dans le DERNIER élément de last2
if (last2.length > 0) {
const lastIdx = last2.length - 1;
const lastSeg = last2[lastIdx];
const dashIdx = lastSeg.indexOf(" - ");
if (dashIdx > 0) {
last2[lastIdx] = lastSeg.substring(0, dashIdx).trim();
}
}
popup.dataset.service = last2.join("/");
} else { } else {
popup.dataset.service = ""; popup.dataset.service = "";
} }