Add compact mapping health indicator
This commit is contained in:
+11
-6
@@ -22,6 +22,7 @@ const suggestedTitle = document.querySelector("#suggestedTitle");
|
||||
const suggestedList = document.querySelector("#suggestedList");
|
||||
const suggestedCloseButton = document.querySelector("#suggestedCloseButton");
|
||||
const mappingState = document.querySelector("#mappingState");
|
||||
const mappingStatusText = document.querySelector("#mappingStatusText");
|
||||
const mappingList = document.querySelector("#mappingList");
|
||||
const mappingDetails = document.querySelector("#mappingDetails");
|
||||
const findSourcesButton = document.querySelector("#findSourcesButton");
|
||||
@@ -386,8 +387,7 @@ async function loadMappingSources() {
|
||||
renderMappingSources({ mapped: false, items: [], message: "Select manufacturer." });
|
||||
return;
|
||||
}
|
||||
mappingState.textContent = "Loading mapping...";
|
||||
mappingState.className = "mapping-state";
|
||||
setMappingStatus("Loading mapping...", "is-loading");
|
||||
mappingList.replaceChildren();
|
||||
try {
|
||||
const params = new URLSearchParams({ manufacturerId, check: "1" });
|
||||
@@ -409,8 +409,7 @@ async function loadMappingSources() {
|
||||
function renderMappingSources(data) {
|
||||
const items = data.items || [];
|
||||
if (!data.mapped || !items.length) {
|
||||
mappingState.textContent = data.message || "Mapping missing";
|
||||
mappingState.className = "mapping-state is-missing";
|
||||
setMappingStatus(data.message || "Mapping missing", "is-missing");
|
||||
mappingList.replaceChildren();
|
||||
mappingDetails.open = true;
|
||||
return;
|
||||
@@ -419,10 +418,10 @@ function renderMappingSources(data) {
|
||||
const failedCount = items.filter((item) => item.enabled && item.health && item.health !== "ok").length;
|
||||
const testedCount = items.filter((item) => item.enabled && item.health === "ok").length;
|
||||
const ready = enabledCount > 0 && failedCount === 0;
|
||||
mappingState.textContent = ready
|
||||
const statusText = ready
|
||||
? `Sources OK ✓ (${testedCount}/${enabledCount})`
|
||||
: data.message || `Sources problem (${testedCount}/${enabledCount})`;
|
||||
mappingState.className = ready ? "mapping-state is-ready" : "mapping-state is-missing";
|
||||
setMappingStatus(statusText, ready ? "is-ready" : testedCount > 0 ? "is-warning" : "is-missing");
|
||||
mappingDetails.open = !ready || failedCount > 0;
|
||||
mappingList.replaceChildren(...items.map((item) => {
|
||||
const row = document.createElement("div");
|
||||
@@ -437,6 +436,12 @@ function renderMappingSources(data) {
|
||||
return row;
|
||||
}));
|
||||
}
|
||||
function setMappingStatus(text, stateClass) {
|
||||
mappingState.textContent = "";
|
||||
mappingState.className = `mapping-state-dot ${stateClass}`;
|
||||
mappingState.setAttribute("aria-label", text);
|
||||
mappingStatusText.textContent = text;
|
||||
}
|
||||
function getMappingHealthText(item) {
|
||||
if (!item.enabled)
|
||||
return "off";
|
||||
|
||||
+12
-6
@@ -22,6 +22,7 @@ const suggestedTitle = document.querySelector("#suggestedTitle");
|
||||
const suggestedList = document.querySelector("#suggestedList");
|
||||
const suggestedCloseButton = document.querySelector("#suggestedCloseButton");
|
||||
const mappingState = document.querySelector("#mappingState");
|
||||
const mappingStatusText = document.querySelector("#mappingStatusText");
|
||||
const mappingList = document.querySelector("#mappingList");
|
||||
const mappingDetails = document.querySelector("#mappingDetails");
|
||||
const findSourcesButton = document.querySelector("#findSourcesButton");
|
||||
@@ -407,8 +408,7 @@ async function loadMappingSources() {
|
||||
return;
|
||||
}
|
||||
|
||||
mappingState.textContent = "Loading mapping...";
|
||||
mappingState.className = "mapping-state";
|
||||
setMappingStatus("Loading mapping...", "is-loading");
|
||||
mappingList.replaceChildren();
|
||||
|
||||
try {
|
||||
@@ -434,8 +434,7 @@ function renderMappingSources(data) {
|
||||
const items = data.items || [];
|
||||
|
||||
if (!data.mapped || !items.length) {
|
||||
mappingState.textContent = data.message || "Mapping missing";
|
||||
mappingState.className = "mapping-state is-missing";
|
||||
setMappingStatus(data.message || "Mapping missing", "is-missing");
|
||||
mappingList.replaceChildren();
|
||||
mappingDetails.open = true;
|
||||
return;
|
||||
@@ -445,10 +444,10 @@ function renderMappingSources(data) {
|
||||
const failedCount = items.filter((item) => item.enabled && item.health && item.health !== "ok").length;
|
||||
const testedCount = items.filter((item) => item.enabled && item.health === "ok").length;
|
||||
const ready = enabledCount > 0 && failedCount === 0;
|
||||
mappingState.textContent = ready
|
||||
const statusText = ready
|
||||
? `Sources OK ✓ (${testedCount}/${enabledCount})`
|
||||
: data.message || `Sources problem (${testedCount}/${enabledCount})`;
|
||||
mappingState.className = ready ? "mapping-state is-ready" : "mapping-state is-missing";
|
||||
setMappingStatus(statusText, ready ? "is-ready" : testedCount > 0 ? "is-warning" : "is-missing");
|
||||
mappingDetails.open = !ready || failedCount > 0;
|
||||
|
||||
mappingList.replaceChildren(
|
||||
@@ -470,6 +469,13 @@ function renderMappingSources(data) {
|
||||
);
|
||||
}
|
||||
|
||||
function setMappingStatus(text, stateClass) {
|
||||
mappingState.textContent = "";
|
||||
mappingState.className = `mapping-state-dot ${stateClass}`;
|
||||
mappingState.setAttribute("aria-label", text);
|
||||
mappingStatusText.textContent = text;
|
||||
}
|
||||
|
||||
function getMappingHealthText(item) {
|
||||
if (!item.enabled) return "off";
|
||||
if (item.health === "ok") return `${item.httpStatus || 200} OK`;
|
||||
|
||||
+4
-1
@@ -85,10 +85,13 @@
|
||||
<summary class="mapping-summary">
|
||||
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
|
||||
<span class="mapping-title">Mapping</span>
|
||||
<span class="mapping-state is-missing" id="mappingState">Mapping not loaded</span>
|
||||
<span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span>
|
||||
<span class="mapping-toggle" aria-hidden="true"></span>
|
||||
</summary>
|
||||
<div class="mapping-panel" role="status">
|
||||
<div class="mapping-detail-status" id="mappingStatusText">Mapping not loaded</div>
|
||||
<div class="mapping-list" id="mappingList"></div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="app-status">
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+7
-5
@@ -118,15 +118,18 @@
|
||||
.sidebar-mapping-box { @apply overflow-hidden border-slate-700 bg-slate-900; }
|
||||
.mapping-summary { @apply flex min-h-8 items-center justify-center gap-1.5 rounded bg-slate-800 px-2 text-center text-[11px] font-semibold text-slate-100; }
|
||||
.mapping-title { @apply shrink-0; }
|
||||
.mapping-summary .mapping-state { @apply min-w-0 flex-1 truncate bg-transparent text-center text-[10px] font-normal text-slate-300; }
|
||||
.mapping-state-dot { @apply inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; }
|
||||
.mapping-state-dot.is-ready { @apply border-emerald-300 bg-emerald-500; }
|
||||
.mapping-state-dot.is-warning { @apply border-amber-300 bg-amber-400; }
|
||||
.mapping-state-dot.is-missing { @apply border-red-300 bg-red-500; }
|
||||
.mapping-state-dot.is-loading { @apply border-slate-300 bg-slate-400; }
|
||||
.mapping-panel { @apply border-t border-slate-700 bg-slate-950/20; }
|
||||
.mapping-detail-status { @apply truncate px-2 py-1 text-center text-[10px] font-normal text-slate-300; }
|
||||
.mapping-summary .mapping-toggle { @apply ml-auto shrink-0; }
|
||||
.mapping-details summary { @apply grid cursor-pointer grid-cols-[auto_auto_minmax(0,1fr)_22px] items-center px-1 py-1 list-none; }
|
||||
.mapping-details summary::-webkit-details-marker { display: none; }
|
||||
.mapping-toggle::before { content: "›"; @apply inline-block text-center text-lg leading-none text-slate-100; }
|
||||
.mapping-details[open] .mapping-toggle::before { content: "⌄"; }
|
||||
.mapping-state { @apply block truncate rounded px-1 py-0.5 text-[10px] font-normal; }
|
||||
.mapping-state.is-ready { @apply bg-slate-100 text-slate-800; }
|
||||
.mapping-state.is-missing { @apply bg-red-100 text-red-700; }
|
||||
.mapping-list { @apply grid gap-0.5 px-1 pb-1; }
|
||||
.mapping-source-row { @apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded bg-slate-100 px-1 py-0.5 text-[10px] text-slate-800; }
|
||||
.mapping-source-row.is-disabled { @apply opacity-50; }
|
||||
@@ -277,7 +280,6 @@
|
||||
html:not(.dark) .app-status { @apply border-slate-300 bg-white text-slate-700; }
|
||||
html:not(.dark) .sidebar-mapping-box { @apply border-slate-300 bg-slate-100; }
|
||||
html:not(.dark) .mapping-summary { @apply border border-slate-300 bg-white text-slate-700; }
|
||||
html:not(.dark) .mapping-summary .mapping-state { @apply text-slate-600; }
|
||||
html:not(.dark) .manufacturer-trigger { @apply border-slate-300 bg-white text-slate-700; }
|
||||
html:not(.dark) .manufacturer-trigger:hover { @apply border-slate-400 bg-slate-200; }
|
||||
html.contrast-light-high:not(.dark) .control-panel { @apply bg-slate-200 text-slate-900; }
|
||||
|
||||
Reference in New Issue
Block a user