bahmcloud/bahmcloud_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

custom_components/bahmcloud_store/panel/panel.js aktualisiert

Browse Source
This commit is contained in:
René Bachmann
2026-01-15 11:12:50 +00:00
parent 7219f82e7f
commit 8b21d070f3
1 changed files with 466 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

550
custom_components/bahmcloud_store/panel/panel.js
View File

@@ -5,11 +5,14 @@ class BahmcloudStorePanel extends HTMLElement {
this._hass = null;
this._view = "store";
this._view = "store"; // store | manage | about | detail
this._data = null;
this._loading = true;
this._error = null;
this._customAddUrl = "";
this._customAddName = "";
this._search = "";
this._category = "all";
@@ -20,6 +23,8 @@ class BahmcloudStorePanel extends HTMLElement {
this._readmeText = null;
this._readmeHtml = null;
this._readmeError = null;
this._mdMountToken = 0;
}
set hass(hass) {
@@ -56,7 +61,8 @@ class BahmcloudStorePanel extends HTMLElement {
_toggleMenu() {
if (this._isDesktop()) return;
try {
this.dispatchEvent(new Event("hass-toggle-menu", { bubbles: true, composed: true }));
const ev = new Event("hass-toggle-menu", { bubbles: true, composed: true });
this.dispatchEvent(ev);
} catch (_) {}
}
@@ -78,6 +84,48 @@ class BahmcloudStorePanel extends HTMLElement {
}
}
async _addCustomRepo() {
if (!this._hass) return;
const url = (this._customAddUrl || "").trim();
const name = (this._customAddName || "").trim() || null;
if (!url) {
this._error = "Please enter a repository URL.";
this._update();
return;
}
this._error = null;
this._update();
try {
await this._hass.callApi("post", "bcs", { op: "add_custom_repo", url, name });
this._customAddUrl = "";
this._customAddName = "";
await this._load();
this._view = "manage";
this._update();
} catch (e) {
this._error = e?.message ? String(e.message) : String(e);
this._update();
}
}
async _removeCustomRepo(id) {
if (!this._hass) return;
try {
await this._hass.callApi("delete", `bcs/custom_repo?id=${encodeURIComponent(id)}`);
await this._load();
this._view = "manage";
this._update();
} catch (e) {
this._error = e?.message ? String(e.message) : String(e);
this._update();
}
}
_openRepoDetail(repoId) {
const repos = Array.isArray(this._data?.repos) ? this._data.repos : [];
const repo = repos.find((r) => r.id === repoId);
@@ -135,24 +183,26 @@ class BahmcloudStorePanel extends HTMLElement {
.mobilebar{
position:sticky; top:0; z-index:50;
display:flex; align-items:center; justify-content:space-between;
gap:8px; padding:10px 12px;
gap:10px; padding:10px 12px;
background: var(--app-header-background-color, var(--card-background-color));
color: var(--app-header-text-color, var(--primary-text-color));
border-bottom:1px solid var(--divider-color);
}
.mobilebar .left, .mobilebar .right { display:flex; align-items:center; gap:8px; }
.mobilebar .left, .mobilebar .right { display:flex; align-items:center; gap:10px; }
.iconbtn{
width:40px; height:40px; border-radius:12px;
width:40px; height:40px; border-radius:14px;
border:1px solid var(--divider-color);
background: color-mix(in srgb, var(--card-background-color) 80%, transparent);
background: color-mix(in srgb, var(--card-background-color) 82%, transparent);
color:inherit; display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; user-select:none; font-weight:900; font-size:18px; line-height:1;
}
.iconbtn:hover{ box-shadow: 0 10px 30px rgba(0,0,0,0.10); transform: translateY(-1px); }
.iconbtn:active{ transform: translateY(0px); box-shadow:none; }
@media (min-width: 1024px) { .iconbtn.menu { display:none; } }
.brandtitle{ display:flex; flex-direction:column; line-height:1.2; }
.brandtitle .t{ font-size:16px; font-weight:900; }
.brandtitle .t{ font-size:16px; font-weight:900; letter-spacing: .2px; }
.brandtitle .s{ font-size:12px; color:var(--secondary-text-color); margin-top:2px; }
.wrap{
@@ -161,12 +211,48 @@ class BahmcloudStorePanel extends HTMLElement {
color:var(--primary-text-color);
}
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tab{
border:1px solid var(--divider-color);
background:var(--card-background-color);
color:var(--primary-text-color);
padding:8px 12px; border-radius:999px;
cursor:pointer; font-weight:800; font-size:13px;
}
.tab.active{
border-color:var(--bcs-accent);
box-shadow:0 0 0 2px color-mix(in srgb, var(--bcs-accent) 20%, transparent);
}
button{
padding:10px 12px; border-radius:14px;
border:1px solid var(--divider-color);
background:var(--card-background-color);
color:var(--primary-text-color);
cursor:pointer; font-weight:900;
}
button.primary{
border-color:var(--bcs-accent);
background: color-mix(in srgb, var(--bcs-accent) 16%, var(--card-background-color));
}
button:hover{ box-shadow: 0 10px 30px rgba(0,0,0,0.10); transform: translateY(-1px); }
button:active{ transform: translateY(0px); box-shadow:none; }
button:disabled{ opacity: 0.55; cursor: not-allowed; }
.card{
border:1px solid var(--divider-color);
background:var(--card-background-color);
border-radius:16px; padding:12px; margin:10px 0;
border-radius:18px; padding:12px; margin:10px 0;
}
.card.clickable{
cursor:pointer;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.card.clickable:hover{
transform: translateY(-1px);
box-shadow: 0 12px 34px rgba(0,0,0,0.10);
}
.card.clickable{ cursor:pointer; }
.row{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.muted{ color:var(--secondary-text-color); font-size:13px; margin-top:4px; }
@@ -175,14 +261,25 @@ class BahmcloudStorePanel extends HTMLElement {
.badge{
border:1px solid var(--divider-color);
border-radius:999px; padding:2px 10px;
font-size:12px; font-weight:800; height:fit-content;
font-size:12px; font-weight:900; height:fit-content;
}
.badge.custom{ border-color:var(--bcs-accent); color:var(--bcs-accent); }
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.error{ color:#b00020; white-space:pre-wrap; margin-top:10px; }
.grid2{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px){ .grid2{ grid-template-columns: 1.2fr 0.8fr; } }
.filters{
display:flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 12px;
}
input, select{
padding:10px 12px; border-radius:12px;
padding:10px 12px; border-radius:14px;
border:1px solid var(--divider-color);
background:var(--card-background-color);
color:var(--primary-text-color);
@@ -196,7 +293,47 @@ class BahmcloudStorePanel extends HTMLElement {
a{ color:var(--bcs-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
/* Pretty markdown styling for server-rendered HTML */
.fabs{
position: fixed;
right: 18px;
bottom: 18px;
display: grid;
gap: 10px;
z-index: 100;
}
.fab{
width: 56px;
height: 56px;
border-radius: 18px;
border: 1px solid var(--divider-color);
background: var(--card-background-color);
box-shadow: 0 12px 30px rgba(0,0,0,0.14);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
cursor: pointer;
user-select: none;
}
.fab.primary{
border-color: var(--bcs-accent);
background: color-mix(in srgb, var(--bcs-accent) 18%, var(--card-background-color));
}
.fab[disabled]{ opacity: .55; cursor: not-allowed; }
pre.readme{
white-space: pre-wrap;
word-break: break-word;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12.5px;
line-height: 1.5;
}
details{ margin-top: 10px; }
summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 900; }
/* Pretty markdown (server rendered HTML) */
.md { line-height: 1.65; font-size: 14px; }
.md h1,.md h2,.md h3{ margin: 18px 0 10px; }
.md p{ margin: 10px 0; }
@@ -214,18 +351,8 @@ class BahmcloudStorePanel extends HTMLElement {
background: color-mix(in srgb, var(--bcs-accent) 8%, var(--card-background-color));
border-radius: 12px;
}
pre.readme{
white-space: pre-wrap;
word-break: break-word;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12.5px;
line-height: 1.5;
}
details{ margin-top: 10px; }
summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 800; }
.md table{ width:100%; border-collapse: collapse; }
.md th,.md td{ border: 1px solid var(--divider-color); padding: 8px; text-align: left; }
</style>
<div class="mobilebar">
@@ -238,67 +365,145 @@ class BahmcloudStorePanel extends HTMLElement {
</div>
</div>
<div class="right">
<button id="refreshBtn">Refresh</button>
<button id="refreshBtn" class="primary">Refresh</button>
</div>
</div>
<div class="wrap">
<div class="tabs" id="tabs">
<div class="tab" data-view="store">Store</div>
<div class="tab" data-view="manage">Manage repositories</div>
<div class="tab" data-view="about">Settings / About</div>
</div>
<div id="content"></div>
<div id="error" style="color:#b00020; white-space:pre-wrap; margin-top:10px;"></div>
<div id="error" class="error"></div>
</div>
<div id="fabs"></div>
`;
root.getElementById("refreshBtn").addEventListener("click", () => this._load());
root.getElementById("menuBtn").addEventListener("click", () => this._toggleMenu());
root.getElementById("backBtn").addEventListener("click", () => this._goBack());
// Prevent HA global shortcuts while typing inside panel inputs
for (const tab of root.querySelectorAll(".tab")) {
tab.addEventListener("click", () => {
this._view = tab.getAttribute("data-view");
this._update();
});
}
// Prevent HA global shortcuts while typing inside the panel
const stopIfFormField = (e) => {
const t = e.composedPath ? e.composedPath()[0] : e.target;
if (!t) return;
const tag = (t.tagName || "").toLowerCase();
if (tag === "input" || tag === "textarea" || tag === "select" || t.isContentEditable) {
e.stopPropagation();
}
const isEditable =
tag === "input" || tag === "textarea" || tag === "select" || t.isContentEditable;
if (isEditable) e.stopPropagation();
};
root.addEventListener("keydown", stopIfFormField, true);
root.addEventListener("keyup", stopIfFormField, true);
root.addEventListener("keypress", stopIfFormField, true);
}
_captureFocusState() {
const root = this.shadowRoot;
const ae = root.activeElement;
if (!ae || !ae.id) return null;
const supported = new Set(["searchInput", "categorySelect", "addUrl", "addName"]);
if (!supported.has(ae.id)) return null;
return {
id: ae.id,
value: ae.value,
selectionStart: typeof ae.selectionStart === "number" ? ae.selectionStart : null,
selectionEnd: typeof ae.selectionEnd === "number" ? ae.selectionEnd : null,
};
}
_restoreFocusState(state) {
if (!state) return;
const root = this.shadowRoot;
const el = root.getElementById(state.id);
if (!el) return;
try {
el.focus({ preventScroll: true });
if (
state.selectionStart !== null &&
state.selectionEnd !== null &&
typeof el.setSelectionRange === "function"
) {
el.setSelectionRange(state.selectionStart, state.selectionEnd);
}
} catch (_) {}
}
_update() {
const root = this.shadowRoot;
const focusState = this._captureFocusState();
const content = root.getElementById("content");
const err = root.getElementById("error");
const subtitle = root.getElementById("subtitle");
const fabs = root.getElementById("fabs");
const v = this._data?.version ? String(this._data.version) : null;
subtitle.textContent = v ? `BCS ${v}` : "BCS — loading…";
for (const tab of root.querySelectorAll(".tab")) {
tab.classList.toggle("active", tab.getAttribute("data-view") === this._view);
}
err.textContent = this._error ? `Error: ${this._error}` : "";
fabs.innerHTML = this._view === "detail" ? this._renderFabs() : "";
this._wireFabs();
if (this._loading) {
content.innerHTML = `<div class="card">Loading…</div>`;
this._restoreFocusState(focusState);
return;
}
if (!this._data) {
content.innerHTML = `<div class="card">No data.</div>`;
this._restoreFocusState(focusState);
return;
}
if (this._view === "detail") {
content.innerHTML = this._renderDetail();
this._wireDetail();
if (this._view === "store") {
content.innerHTML = this._renderStore();
this._wireStore();
this._restoreFocusState(focusState);
return;
}
content.innerHTML = this._renderStore();
this._wireStore();
if (this._view === "manage") {
content.innerHTML = this._renderManage();
this._wireManage();
this._restoreFocusState(focusState);
return;
}
if (this._view === "about") {
content.innerHTML = this._renderAbout();
this._restoreFocusState(focusState);
return;
}
content.innerHTML = this._renderDetail();
this._wireDetail();
this._restoreFocusState(focusState);
}
_renderStore() {
const repos = Array.isArray(this._data.repos) ? this._data.repos : [];
const categories = Array.from(new Set(repos.map(r => (r.category || "").toLowerCase()).filter(Boolean))).sort();
const categories = this._computeCategories(repos);
const filtered = repos
.filter((r) => {
@@ -314,37 +519,50 @@ class BahmcloudStorePanel extends HTMLElement {
const options = [
`<option value="all"${this._category === "all" ? " selected" : ""}>All categories</option>`,
...categories.map((c) => `<option value="${this._esc(c)}"${this._category === c ? " selected" : ""}>${this._esc(c)}</option>`),
...categories.map(
(c) =>
`<option value="${this._esc(c)}"${
this._category === c ? " selected" : ""
}>${this._esc(c)}</option>`
),
].join("");
const rows = filtered.map((r) => {
const badge = r.source === "custom"
? `<span class="badge custom">Custom</span>`
: `<span class="badge">Index</span>`;
const rows = filtered
.map((r) => {
const badge =
r.source === "custom"
? `<span class="badge custom">Custom</span>`
: `<span class="badge">Index</span>`;
const desc = r.description || "No description available.";
const creator = r.owner ? `Creator: ${r.owner}` : "Creator: -";
const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
const desc = r.description || "No description available.";
const creator = r.owner ? `Creator: ${r.owner}` : "Creator: -";
const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
const cat = r.category ? `Category: ${r.category}` : null;
const metaSrc = r.meta_source ? `Meta: ${r.meta_source}` : null;
return `
<div class="card clickable" data-repo="${this._esc(r.id)}">
<div class="row">
<div>
<div><strong>${this._esc(r.name)}</strong></div>
<div class="muted">${this._esc(desc)}</div>
<div class="muted small">${this._esc(`${creator} · ${latest}`)}</div>
const lineBits = [creator, latest, cat, metaSrc].filter(Boolean);
return `
<div class="card clickable" data-repo="${this._esc(r.id)}">
<div class="row">
<div>
<div><strong>${this._esc(r.name)}</strong></div>
<div class="muted">${this._esc(desc)}</div>
<div class="muted small">${this._esc(lineBits.join(" · "))}</div>
</div>
${badge}
</div>
${badge}
</div>
</div>
`;
}).join("");
`;
})
.join("");
return `
<div class="filters">
<input id="searchInput" placeholder="Search repositories…" value="${this._esc(this._search)}" />
<select id="categorySelect">${options}</select>
</div>
${rows || `<div class="card">No repositories configured.</div>`}
`;
}
@@ -360,6 +578,7 @@ class BahmcloudStorePanel extends HTMLElement {
this._update();
});
}
if (cat) {
cat.addEventListener("change", (e) => {
this._category = String(e.target.value || "all");
@@ -379,45 +598,82 @@ class BahmcloudStorePanel extends HTMLElement {
const r = this._detailRepo;
if (!r) return `<div class="card">Repository not found.</div>`;
const badge =
r.source === "custom" ? `<span class="badge custom">Custom</span>` : `<span class="badge">Index</span>`;
const desc = r.description || "No description available.";
const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
const infoBits = [
r.owner ? `Creator: ${r.owner}` : "Creator: -",
latest,
r.provider ? `Provider: ${r.provider}` : null,
r.category ? `Category: ${r.category}` : null,
r.meta_author ? `Author: ${r.meta_author}` : null,
r.meta_maintainer ? `Maintainer: ${r.meta_maintainer}` : null,
r.meta_source ? `Meta: ${r.meta_source}` : null,
].filter(Boolean);
const readmeBlock = this._readmeLoading
? `<div class="card">Loading README…</div>`
: this._readmeText
? `
<div class="card">
? `
<div class="card">
<div class="row" style="align-items:center;">
<div><strong>README</strong></div>
<div id="readmePretty" class="md" style="margin-top:12px;"></div>
<div class="muted small">${this._readmeHtml ? "Rendered Markdown" : "Raw Markdown (renderer unavailable)"}</div>
</div>
<details>
<summary>Show raw Markdown</summary>
<div style="margin-top:10px;">
<pre class="readme">${this._esc(this._readmeText)}</pre>
</div>
</details>
</div>
`
: `
<div class="card">
<div><strong>README</strong></div>
<div class="muted">${this._esc(this._readmeError || "README not found.")}</div>
</div>
`;
<div id="readmePretty" class="md" style="margin-top:12px;"></div>
<details>
<summary>Show raw Markdown</summary>
<div style="margin-top:10px;">
<pre class="readme">${this._esc(this._readmeText)}</pre>
</div>
</details>
</div>
`
: `
<div class="card">
<div><strong>README</strong></div>
<div class="muted">${this._esc(this._readmeError || "README not found.")}</div>
</div>
`;
return `
<div class="card">
<div class="row">
<div>
<div><strong style="font-size:16px;">${this._esc(r.name)}</strong></div>
<div class="muted">${this._esc(desc)}</div>
<div class="muted small" style="margin-top:8px;">
<a href="${this._esc(r.url)}" target="_blank" rel="noreferrer">Open repository</a>
<div class="grid2">
<div>
<div class="card">
<div class="row">
<div>
<div><strong style="font-size:16px;">${this._esc(r.name)}</strong></div>
<div class="muted">${this._esc(desc)}</div>
<div class="muted small" style="margin-top:8px;">${this._esc(infoBits.join(" · "))}</div>
<div class="muted small" style="margin-top:8px;">
<a href="${this._esc(r.url)}" target="_blank" rel="noreferrer">Open repository</a>
</div>
</div>
${badge}
</div>
</div>
${readmeBlock}
</div>
<div>
<div class="card">
<div><strong>Installation & Updates</strong></div>
<div class="muted">
Installation and updates are performed manually via <strong>Settings → System → Updates</strong>.
The Store UI is used to browse repositories and trigger installation/update actions.
</div>
<div class="muted small" style="margin-top:10px;">
Updates remain manual (like HACS).
</div>
</div>
<span class="badge">${this._esc(r.source === "custom" ? "Custom" : "Index")}</span>
</div>
</div>
${readmeBlock}
`;
}
@@ -427,14 +683,140 @@ class BahmcloudStorePanel extends HTMLElement {
if (!pretty) return;
if (this._readmeHtml) {
// ✅ pretty HTML from backend
pretty.innerHTML = this._readmeHtml;
} else if (this._readmeText) {
// fallback: no renderer available in backend
pretty.innerHTML = `<div class="muted">Markdown rendering is not available on this system. Use “Show raw Markdown”.</div>`;
}
}
_renderFabs() {
const r = this._detailRepo;
if (!r) return "";
return `
<div class="fabs">
<div class="fab primary" id="fabOpen" title="Open repository">↗</div>
<div class="fab" id="fabReload" title="Reload README">⟳</div>
<div class="fab" id="fabInstall" title="Install (coming soon)" disabled>＋</div>
<div class="fab" id="fabUpdate" title="Update (coming soon)" disabled>↑</div>
<div class="fab" id="fabInfo" title="About">i</div>
</div>
`;
}
_wireFabs() {
const root = this.shadowRoot;
const r = this._detailRepo;
if (!r) return;
const open = root.getElementById("fabOpen");
const reload = root.getElementById("fabReload");
const info = root.getElementById("fabInfo");
if (open) open.addEventListener("click", () => window.open(r.url, "_blank", "noreferrer"));
if (reload) {
reload.addEventListener("click", () => {
if (this._detailRepoId) this._loadReadme(this._detailRepoId);
});
}
if (info) {
info.addEventListener("click", () => {
this._view = "about";
this._update();
});
}
}
_renderManage() {
const repos = Array.isArray(this._data.repos) ? this._data.repos : [];
const custom = repos.filter((r) => r.source === "custom");
const list = custom
.map(
(r) => `
<div class="card">
<div class="row">
<div>
<div><strong>${this._esc(r.name)}</strong></div>
<div class="muted">${this._esc(r.url)}</div>
</div>
<div>
<button class="primary" data-remove="${this._esc(r.id)}">Remove</button>
</div>
</div>
</div>
`
)
.join("");
return `
<div class="card">
<div><strong>Manage repositories</strong></div>
<div class="muted">Add public repositories from any git provider.</div>
<div style="display:grid; gap:10px; margin-top:12px;">
<div>
<div class="muted small">Repository URL</div>
<input id="addUrl" placeholder="https://github.com/user/repo" value="${this._esc(this._customAddUrl)}" />
</div>
<div>
<div class="muted small">Display name (optional)</div>
<input id="addName" placeholder="My Integration" value="${this._esc(this._customAddName)}" />
</div>
<div>
<button id="addBtn" class="primary">Add repository</button>
</div>
</div>
</div>
${list || `<div class="card">No custom repositories added yet.</div>`}
`;
}
_wireManage() {
const root = this.shadowRoot;
const addUrl = root.getElementById("addUrl");
const addName = root.getElementById("addName");
const addBtn = root.getElementById("addBtn");
if (addUrl) addUrl.addEventListener("input", (e) => (this._customAddUrl = e.target.value));
if (addName) addName.addEventListener("input", (e) => (this._customAddName = e.target.value));
if (addBtn) addBtn.addEventListener("click", () => this._addCustomRepo());
for (const btn of root.querySelectorAll("[data-remove]")) {
btn.addEventListener("click", () => {
const id = btn.getAttribute("data-remove");
if (id) this._removeCustomRepo(id);
});
}
}
_renderAbout() {
return `
<div class="card">
<div><strong>Settings / About</strong></div>
<div class="muted">Language: English (v1). i18n will be added later.</div>
<div class="muted">Theme: follows Home Assistant light/dark automatically.</div>
<div class="muted">Accent: Bahmcloud Blue.</div>
<div class="muted small" style="margin-top: 10px;">BCS version: ${this._esc(this._data.version || "-")}</div>
</div>
`;
}
_computeCategories(repos) {
const set = new Set();
for (const r of repos) {
const c = (r.category || "").trim().toLowerCase();
if (c) set.add(c);
}
return Array.from(set).sort();
}
_esc(s) {
return String(s ?? "")
.replaceAll("&", "&amp;")