custom_components/bahmcloud_store/panel/panel.js aktualisiert
This commit is contained in:
@@ -4,13 +4,27 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
this.attachShadow({ mode: "open" });
|
||||
|
||||
this._hass = null;
|
||||
this._view = "store"; // store | manage | about
|
||||
|
||||
// Views: store | manage | about | detail
|
||||
this._view = "store";
|
||||
|
||||
this._data = null;
|
||||
this._loading = true;
|
||||
this._error = null;
|
||||
|
||||
this._customAddUrl = "";
|
||||
this._customAddName = "";
|
||||
|
||||
// Store filtering
|
||||
this._search = "";
|
||||
this._category = "all";
|
||||
|
||||
// Detail view state
|
||||
this._detailRepoId = null;
|
||||
this._detailRepo = null;
|
||||
this._readmeLoading = false;
|
||||
this._readmeText = null;
|
||||
this._readmeError = null;
|
||||
}
|
||||
|
||||
set hass(hass) {
|
||||
@@ -67,6 +81,17 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
}
|
||||
|
||||
_goBack() {
|
||||
// If we're in detail, go back to store list first.
|
||||
if (this._view === "detail") {
|
||||
this._view = "store";
|
||||
this._detailRepoId = null;
|
||||
this._detailRepo = null;
|
||||
this._readmeText = null;
|
||||
this._readmeError = null;
|
||||
this._update();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
history.back();
|
||||
} catch (_) {
|
||||
@@ -90,11 +115,7 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
this._update();
|
||||
|
||||
try {
|
||||
await this._hass.callApi("post", "bcs", {
|
||||
op: "add_custom_repo",
|
||||
url,
|
||||
name,
|
||||
});
|
||||
await this._hass.callApi("post", "bcs", { op: "add_custom_repo", url, name });
|
||||
this._customAddUrl = "";
|
||||
this._customAddName = "";
|
||||
await this._load();
|
||||
@@ -120,6 +141,49 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
_openRepoDetail(repoId) {
|
||||
const repos = Array.isArray(this._data?.repos) ? this._data.repos : [];
|
||||
const repo = repos.find((r) => r.id === repoId);
|
||||
if (!repo) return;
|
||||
|
||||
this._view = "detail";
|
||||
this._detailRepoId = repoId;
|
||||
this._detailRepo = repo;
|
||||
|
||||
this._readmeText = null;
|
||||
this._readmeError = null;
|
||||
|
||||
this._update();
|
||||
this._loadReadme(repoId);
|
||||
}
|
||||
|
||||
async _loadReadme(repoId) {
|
||||
if (!this._hass) return;
|
||||
this._readmeLoading = true;
|
||||
this._readmeError = null;
|
||||
this._update();
|
||||
|
||||
try {
|
||||
const resp = await this._hass.callApi(
|
||||
"get",
|
||||
`bcs/readme?repo_id=${encodeURIComponent(repoId)}`
|
||||
);
|
||||
|
||||
if (resp?.ok && typeof resp.readme === "string") {
|
||||
this._readmeText = resp.readme;
|
||||
} else {
|
||||
this._readmeText = null;
|
||||
this._readmeError = resp?.message || "README not found.";
|
||||
}
|
||||
} catch (e) {
|
||||
this._readmeText = null;
|
||||
this._readmeError = e?.message ? String(e.message) : String(e);
|
||||
} finally {
|
||||
this._readmeLoading = false;
|
||||
this._update();
|
||||
}
|
||||
}
|
||||
|
||||
_render() {
|
||||
const root = this.shadowRoot;
|
||||
|
||||
@@ -156,13 +220,13 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
color:var(--primary-text-color);
|
||||
}
|
||||
|
||||
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
|
||||
.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:600; font-size:13px;
|
||||
cursor:pointer; font-weight:700; font-size:13px;
|
||||
}
|
||||
.tab.active{
|
||||
border-color:var(--bcs-accent);
|
||||
@@ -174,49 +238,122 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
border:1px solid var(--divider-color);
|
||||
background:var(--card-background-color);
|
||||
color:var(--primary-text-color);
|
||||
cursor:pointer; font-weight:700;
|
||||
cursor:pointer; font-weight:800;
|
||||
}
|
||||
button.primary{
|
||||
border-color:var(--bcs-accent);
|
||||
background: color-mix(in srgb, var(--bcs-accent) 16%, var(--card-background-color));
|
||||
}
|
||||
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;
|
||||
}
|
||||
.row{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
|
||||
|
||||
.card.clickable{
|
||||
cursor:pointer;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
.card.clickable:hover{
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.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; }
|
||||
.small{ font-size:12px; }
|
||||
|
||||
.badge{
|
||||
border:1px solid var(--divider-color);
|
||||
border-radius:999px; padding:2px 10px;
|
||||
font-size:12px; font-weight:700; height:fit-content;
|
||||
font-size:12px; font-weight:800; height:fit-content;
|
||||
}
|
||||
.badge.custom{ border-color:var(--bcs-accent); color:var(--bcs-accent); }
|
||||
|
||||
.error{ color:#b00020; white-space:pre-wrap; margin-top:10px; }
|
||||
|
||||
.grid{ display:grid; grid-template-columns:1fr; gap:10px; }
|
||||
.field{ display:grid; gap:6px; }
|
||||
.grid2{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
@media (min-width: 900px){
|
||||
.grid2{ grid-template-columns: 1.2fr 0.8fr; }
|
||||
}
|
||||
|
||||
input{
|
||||
.filters{
|
||||
display:flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
input, select{
|
||||
padding:10px 12px; border-radius:12px;
|
||||
border:1px solid var(--divider-color);
|
||||
background:var(--card-background-color);
|
||||
color:var(--primary-text-color);
|
||||
outline:none;
|
||||
}
|
||||
input:focus{
|
||||
input:focus, select:focus{
|
||||
border-color:var(--bcs-accent);
|
||||
box-shadow:0 0 0 2px color-mix(in srgb, var(--bcs-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
a{ color:var(--bcs-accent); text-decoration:none; }
|
||||
a:hover{ text-decoration:underline; }
|
||||
|
||||
/* FABs (detail view) */
|
||||
.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;
|
||||
}
|
||||
.fab-label{
|
||||
position: fixed;
|
||||
right: 84px;
|
||||
bottom: 18px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdwrap ha-markdown{
|
||||
display: block;
|
||||
}
|
||||
.mdwrap{
|
||||
padding-top: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mobilebar">
|
||||
@@ -234,7 +371,7 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="tabs">
|
||||
<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>
|
||||
@@ -243,6 +380,8 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
<div id="content"></div>
|
||||
<div id="error" class="error"></div>
|
||||
</div>
|
||||
|
||||
<div id="fabs"></div>
|
||||
`;
|
||||
|
||||
root.getElementById("refreshBtn").addEventListener("click", () => this._load());
|
||||
@@ -262,16 +401,22 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
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…";
|
||||
|
||||
// Tabs active state (detail is not a tab)
|
||||
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 only on detail view
|
||||
fabs.innerHTML = this._view === "detail" ? this._renderFabs() : "";
|
||||
this._wireFabs();
|
||||
|
||||
if (this._loading) {
|
||||
content.innerHTML = `<div class="card">Loading…</div>`;
|
||||
return;
|
||||
@@ -284,6 +429,7 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
|
||||
if (this._view === "store") {
|
||||
content.innerHTML = this._renderStore();
|
||||
this._wireStore();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -293,49 +439,227 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._view === "about") {
|
||||
content.innerHTML = this._renderAbout();
|
||||
return;
|
||||
}
|
||||
|
||||
// detail
|
||||
content.innerHTML = this._renderDetail();
|
||||
this._wireDetail();
|
||||
}
|
||||
|
||||
_renderStore() {
|
||||
const repos = Array.isArray(this._data.repos) ? this._data.repos : [];
|
||||
const categories = this._computeCategories(repos);
|
||||
|
||||
const rows = repos.map((r) => {
|
||||
const filtered = repos
|
||||
.filter((r) => {
|
||||
const q = (this._search || "").trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
const hay = `${r.name || ""} ${r.description || ""} ${r.url || ""} ${r.owner || ""}`.toLowerCase();
|
||||
return hay.includes(q);
|
||||
})
|
||||
.filter((r) => {
|
||||
if (this._category === "all") return true;
|
||||
return (r.category || "").toLowerCase() === this._category;
|
||||
});
|
||||
|
||||
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>`),
|
||||
].join("");
|
||||
|
||||
const rows = filtered
|
||||
.map((r) => {
|
||||
const badge = r.source === "custom"
|
||||
? `<span class="badge custom">Custom</span>`
|
||||
: `<span class="badge">Index</span>`;
|
||||
|
||||
const desc = r.meta_description || r.provider_description || "No description available.";
|
||||
|
||||
const creator = r.owner ? `Creator: ${this._esc(r.owner)}` : "Creator: -";
|
||||
const author = r.meta_author ? `Author: ${this._esc(r.meta_author)}` : null;
|
||||
const maint = r.meta_maintainer ? `Maintainer: ${this._esc(r.meta_maintainer)}` : null;
|
||||
const metaSrc = r.meta_source ? `Meta: ${this._esc(r.meta_source)}` : null;
|
||||
|
||||
const lineBits = [creator, author, maint, metaSrc].filter(Boolean);
|
||||
const desc = r.description || r.meta_description || r.provider_description || "No description available.";
|
||||
const creator = r.owner ? `Creator: ${r.owner}` : "Creator: -";
|
||||
const cat = r.category ? `Category: ${r.category}` : null;
|
||||
const metaSrc = r.meta_source ? `Meta: ${r.meta_source}` : null;
|
||||
const lineBits = [creator, cat, metaSrc].filter(Boolean);
|
||||
|
||||
return `
|
||||
<div class="card">
|
||||
<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">${lineBits.map(x => this._esc(x)).join(" · ")}</div>
|
||||
<div class="muted small"><a href="${this._esc(r.url)}" target="_blank" rel="noreferrer">Open repository</a></div>
|
||||
<div class="muted small">${this._esc(lineBits.join(" · "))}</div>
|
||||
</div>
|
||||
${badge}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join("");
|
||||
})
|
||||
.join("");
|
||||
|
||||
return rows || `<div class="card">No repositories configured.</div>`;
|
||||
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>`}
|
||||
`;
|
||||
}
|
||||
|
||||
_wireStore() {
|
||||
const root = this.shadowRoot;
|
||||
|
||||
const search = root.getElementById("searchInput");
|
||||
const cat = root.getElementById("categorySelect");
|
||||
|
||||
if (search) {
|
||||
search.addEventListener("input", (e) => {
|
||||
this._search = e.target.value;
|
||||
this._update();
|
||||
});
|
||||
}
|
||||
|
||||
if (cat) {
|
||||
cat.addEventListener("change", (e) => {
|
||||
this._category = String(e.target.value || "all");
|
||||
this._update();
|
||||
});
|
||||
}
|
||||
|
||||
for (const card of root.querySelectorAll("[data-repo]")) {
|
||||
card.addEventListener("click", () => {
|
||||
const id = card.getAttribute("data-repo");
|
||||
if (id) this._openRepoDetail(id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_renderDetail() {
|
||||
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 || r.meta_description || r.provider_description || "No description available.";
|
||||
|
||||
const infoBits = [
|
||||
r.owner ? `Creator: ${r.owner}` : "Creator: -",
|
||||
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 mdwrap">
|
||||
<ha-markdown id="readmeMd"></ha-markdown>
|
||||
</div>
|
||||
`
|
||||
: `
|
||||
<div class="card">
|
||||
<div><strong>README</strong></div>
|
||||
<div class="muted">${this._esc(this._readmeError || "README not found.")}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return `
|
||||
<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 & updates will be implemented via the official Home Assistant APIs.
|
||||
In v0.4.0, the buttons are UI-only (coming soon).
|
||||
</div>
|
||||
<div class="muted small" style="margin-top:10px;">
|
||||
Updates remain manual (like HACS).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
_wireDetail() {
|
||||
// Render markdown into ha-markdown after DOM exists
|
||||
const root = this.shadowRoot;
|
||||
const mdEl = root.getElementById("readmeMd");
|
||||
if (mdEl && this._readmeText) {
|
||||
try {
|
||||
mdEl.hass = this._hass;
|
||||
} catch (_) {}
|
||||
mdEl.content = this._readmeText;
|
||||
}
|
||||
}
|
||||
|
||||
_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>
|
||||
`;
|
||||
}
|
||||
|
||||
_wireFabs() {
|
||||
const root = this.shadowRoot;
|
||||
const r = this._detailRepo;
|
||||
if (!r) return;
|
||||
|
||||
const open = root.getElementById("fabOpen");
|
||||
const reload = root.getElementById("fabReload");
|
||||
|
||||
if (open) {
|
||||
open.addEventListener("click", () => {
|
||||
window.open(r.url, "_blank", "noreferrer");
|
||||
});
|
||||
}
|
||||
|
||||
if (reload) {
|
||||
reload.addEventListener("click", () => {
|
||||
if (this._detailRepoId) this._loadReadme(this._detailRepoId);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_renderManage() {
|
||||
const repos = Array.isArray(this._data.repos) ? this._data.repos : [];
|
||||
const custom = repos.filter((r) => r.source === "custom");
|
||||
|
||||
const list = custom.map((r) => {
|
||||
const list = custom
|
||||
.map((r) => {
|
||||
return `
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
@@ -349,21 +673,22 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join("");
|
||||
})
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<div class="card">
|
||||
<div><strong>Manage repositories</strong></div>
|
||||
<div class="muted">Add public repositories from any git provider.</div>
|
||||
|
||||
<div class="grid" style="margin-top: 12px;">
|
||||
<div class="field">
|
||||
<label class="muted small">Repository URL</label>
|
||||
<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 class="field">
|
||||
<label class="muted small">Display name (optional)</label>
|
||||
<div>
|
||||
<div class="muted small">Display name (optional)</div>
|
||||
<input id="addName" placeholder="My Integration" value="${this._esc(this._customAddName)}" />
|
||||
</div>
|
||||
|
||||
@@ -408,6 +733,15 @@ class BahmcloudStorePanel extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
|
||||
_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("&", "&")
|
||||
|
||||
Reference in New Issue
Block a user