Kaloyan DanchevandClaude Opus 4.6
d681f20884
New HA integration (integration/custom_components/luma_home/) with: - WS API: luma/get_config (Lovelace→v2 bridge), luma/pair, luma/pair_status - Config flow with dashboard URL path setting 8 HACS frontend cards (cards/) matching TV app visual spec: - toggle, range, climate, media, curtain, action, vacuum, weather - Glass card design: rgba(36,40,48,0.75) bg, 22px radius, accent glows Pairing page (pairing/luma-pair.html) for TV token provisioning. Web dashboard (web-dashboard/) — legacy config editor (deprecated). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
82 lines
4.0 KiB
JavaScript
82 lines
4.0 KiB
JavaScript
const LUMA_ACTION_VERSION = '0.1.0';
|
|
|
|
class LumaActionCard extends HTMLElement {
|
|
set hass(hass) { this._hass = hass; this._render(); }
|
|
|
|
setConfig(config) {
|
|
if (!config.entity) throw new Error('Entity is required');
|
|
this._config = { entity: config.entity, name: config.name || '', size: config.size || '1x1',
|
|
accent_color: config.accent_color || '', icon: config.icon || '',
|
|
tap_action: config.tap_action || { action: 'toggle' },
|
|
hold_action: config.hold_action || { action: 'more-info' },
|
|
confirmation: config.confirmation || false, ...config };
|
|
this._render();
|
|
}
|
|
|
|
getCardSize() { return 2; }
|
|
static getStubConfig() { return { entity: '', name: '', size: '1x1' }; }
|
|
connectedCallback() { if (!this.shadowRoot) this.attachShadow({ mode: 'open' }); this._render(); }
|
|
|
|
_getState() { return this._hass?.states?.[this._config?.entity]; }
|
|
|
|
_handleClick() {
|
|
if (!this._hass || !this._config) return;
|
|
const entity = this._config.entity;
|
|
if (entity.startsWith('scene.')) {
|
|
this._hass.callService('scene', 'turn_on', { entity_id: entity });
|
|
} else if (entity.startsWith('script.')) {
|
|
this._hass.callService('script', 'turn_on', { entity_id: entity });
|
|
} else {
|
|
this._hass.callService('homeassistant', 'toggle', { entity_id: entity });
|
|
}
|
|
}
|
|
|
|
_render() {
|
|
if (!this.shadowRoot || !this._config) return;
|
|
const accent = this._config.accent_color || '#c9a0dc';
|
|
const name = this._config.name || this._getState()?.attributes?.friendly_name || '';
|
|
const icon = this._config.icon || 'mdi:play-circle';
|
|
const typeLabel = this._config.entity.startsWith('script.') ? 'Script' : 'Scene';
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: block; --accent: ${accent}; }
|
|
.card {
|
|
position: relative; overflow: hidden; background: rgba(36,40,48,0.75);
|
|
border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; padding: 16px;
|
|
cursor: pointer; transition: border-color .15s, box-shadow .15s;
|
|
height: 100%; min-height: 120px; display: flex; flex-direction: column;
|
|
justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,.06);
|
|
}
|
|
.card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
|
|
.top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
|
|
.icon-circle {
|
|
width: 48px; height: 48px; border-radius: 24px; display: flex;
|
|
align-items: center; justify-content: center; flex-shrink: 0;
|
|
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
|
}
|
|
.icon-circle ha-icon { --mdc-icon-size: 28px; color: var(--accent); }
|
|
.info { flex: 1; min-width: 0; }
|
|
.type-label { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: color-mix(in srgb, var(--accent) 70%, transparent); }
|
|
.name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
|
|
.hint { font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: rgba(232,232,232,0.40); position: relative; z-index: 1; }
|
|
</style>
|
|
<div class="card">
|
|
<div class="top">
|
|
<div class="icon-circle"><ha-icon icon="${icon}"></ha-icon></div>
|
|
<div class="info">
|
|
<div class="type-label">${typeLabel}</div>
|
|
<div class="name">${name}</div>
|
|
</div>
|
|
</div>
|
|
<div class="hint">Tap to activate</div>
|
|
</div>`;
|
|
this.shadowRoot.querySelector('.card').addEventListener('click', () => this._handleClick());
|
|
}
|
|
}
|
|
|
|
customElements.define('luma-action-card', LumaActionCard);
|
|
window.customCards = window.customCards || [];
|
|
window.customCards.push({ type: 'luma-action-card', name: 'Luma Action', description: 'Luma-style scene/script activation card.', preview: true });
|
|
console.info(`%c LUMA-ACTION-CARD %c v${LUMA_ACTION_VERSION} `, 'background:#c9a0dc;color:#111;font-weight:bold', 'background:#161a22;color:#c9a0dc');
|