1584 lines
52 KiB
JavaScript
1584 lines
52 KiB
JavaScript
const DEFAULT_ENTITIES = {
|
|
roof: "cover.sternwarte_dach",
|
|
power: "switch.sternwarte_dachsteuerung",
|
|
roofClosed: "binary_sensor.sternwarte_dach_zu",
|
|
roofOpen: "binary_sensor.sternwarte_dach_offen",
|
|
roofMoving: "binary_sensor.sternwarte_dach_bewegt",
|
|
roofStatus: "sensor.sternwarte_dachstatus",
|
|
roofPosition: "sensor.sternwarte_dachposition",
|
|
rain: "binary_sensor.sternwarte_regen",
|
|
wind: "sensor.sternwarte_windgeschwindigkeit",
|
|
scheduleOpen: "datetime.sternwarte_offnen_geplant",
|
|
scheduleClose: "datetime.sternwarte_schliessen_geplant",
|
|
astroLat: 50.2984230,
|
|
astroLon: 11.0481766,
|
|
};
|
|
|
|
const ASTRONOMY_LIB_URL = (() => {
|
|
try {
|
|
return new URL("./astronomy.browser.min.js", import.meta.url).toString();
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
})();
|
|
|
|
const MOON_IMAGE_URL = (() => {
|
|
try {
|
|
return new URL("./moon_small.png", import.meta.url).toString();
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
})();
|
|
|
|
class SternwarteCard extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._scheduleInputState = {
|
|
open: { draft: "", editing: false, pending: false },
|
|
close: { draft: "", editing: false, pending: false },
|
|
};
|
|
this._pendingRender = false;
|
|
this._astronomyLoadPromise = null;
|
|
this._moonTexture = null;
|
|
this._moonTexturePromise = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._ensureAstronomy();
|
|
this._ensureMoonTexture();
|
|
this._ensureClockTimer();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this._clockTimer) {
|
|
window.clearInterval(this._clockTimer);
|
|
this._clockTimer = null;
|
|
}
|
|
}
|
|
|
|
setConfig(config) {
|
|
this.config = { ...DEFAULT_ENTITIES, ...config };
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
}
|
|
|
|
set hass(hass) {
|
|
this._hass = hass;
|
|
this._ensureClockTimer();
|
|
this._requestRender();
|
|
}
|
|
|
|
getCardSize() {
|
|
return 10;
|
|
}
|
|
|
|
getGridOptions() {
|
|
return {
|
|
rows: 10,
|
|
columns: 18,
|
|
min_rows: 9,
|
|
};
|
|
}
|
|
|
|
_state(entityId) {
|
|
return this._hass?.states?.[entityId];
|
|
}
|
|
|
|
_ensureClockTimer() {
|
|
if (this._clockTimer) return;
|
|
this._clockTimer = window.setInterval(() => {
|
|
if (this._hass) this._requestRender();
|
|
}, 30000);
|
|
}
|
|
|
|
_astronomy() {
|
|
return window.Astronomy || null;
|
|
}
|
|
|
|
_ensureAstronomy() {
|
|
const astronomy = this._astronomy();
|
|
if (astronomy) return Promise.resolve(astronomy);
|
|
if (this._astronomyLoadPromise) return this._astronomyLoadPromise;
|
|
if (!ASTRONOMY_LIB_URL) return Promise.resolve(null);
|
|
|
|
this._astronomyLoadPromise = new Promise((resolve) => {
|
|
const finish = () => {
|
|
const loaded = this._astronomy();
|
|
if (loaded && this._hass) {
|
|
this._requestRender();
|
|
}
|
|
this._astronomyLoadPromise = null;
|
|
resolve(loaded || null);
|
|
};
|
|
|
|
const existing = Array.from(document.querySelectorAll("script"))
|
|
.find((script) => script.src === ASTRONOMY_LIB_URL);
|
|
|
|
if (existing) {
|
|
existing.addEventListener("load", finish, { once: true });
|
|
existing.addEventListener("error", finish, { once: true });
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement("script");
|
|
script.src = ASTRONOMY_LIB_URL;
|
|
script.async = true;
|
|
script.addEventListener("load", finish, { once: true });
|
|
script.addEventListener("error", finish, { once: true });
|
|
document.head.appendChild(script);
|
|
});
|
|
|
|
return this._astronomyLoadPromise;
|
|
}
|
|
|
|
_ensureMoonTexture() {
|
|
if (this._moonTexture) return Promise.resolve(this._moonTexture);
|
|
if (this._moonTexturePromise) return this._moonTexturePromise;
|
|
if (!MOON_IMAGE_URL) return Promise.resolve(null);
|
|
|
|
this._moonTexturePromise = new Promise((resolve) => {
|
|
const image = new Image();
|
|
image.addEventListener("load", () => {
|
|
this._moonTexture = image;
|
|
this._moonTexturePromise = null;
|
|
if (this._hass) this._requestRender();
|
|
resolve(image);
|
|
}, { once: true });
|
|
image.addEventListener("error", () => {
|
|
this._moonTexturePromise = null;
|
|
resolve(null);
|
|
}, { once: true });
|
|
image.src = MOON_IMAGE_URL;
|
|
});
|
|
|
|
return this._moonTexturePromise;
|
|
}
|
|
|
|
_requestRender() {
|
|
if (this._isScheduleEditing()) {
|
|
this._pendingRender = true;
|
|
return;
|
|
}
|
|
this._pendingRender = false;
|
|
this.render();
|
|
}
|
|
|
|
_isScheduleEditing() {
|
|
return Object.values(this._scheduleInputState).some((field) => field.editing);
|
|
}
|
|
|
|
_scheduleFieldState(key) {
|
|
return this._scheduleInputState[key];
|
|
}
|
|
|
|
_scheduleInputValue(key, fallbackState) {
|
|
const field = this._scheduleFieldState(key);
|
|
if (field.draft) return field.draft;
|
|
return this._isoForInput(fallbackState);
|
|
}
|
|
|
|
_resetScheduleDrafts() {
|
|
for (const field of Object.values(this._scheduleInputState)) {
|
|
field.draft = "";
|
|
field.editing = false;
|
|
field.pending = false;
|
|
}
|
|
}
|
|
|
|
_beginScheduleEdit(key, fallbackState) {
|
|
const field = this._scheduleFieldState(key);
|
|
field.editing = true;
|
|
field.pending = false;
|
|
if (!field.draft) {
|
|
field.draft = this._isoForInput(fallbackState);
|
|
}
|
|
}
|
|
|
|
_updateScheduleDraft(key, value) {
|
|
const field = this._scheduleFieldState(key);
|
|
field.draft = value;
|
|
field.pending = false;
|
|
}
|
|
|
|
_endScheduleEdit(key, event) {
|
|
const field = this._scheduleFieldState(key);
|
|
field.editing = false;
|
|
if (!this._isScheduleEditing() && this._pendingRender) {
|
|
this._requestRender();
|
|
}
|
|
}
|
|
|
|
_bindScheduleInput(key, inputId, fallbackState) {
|
|
const input = this.shadowRoot.getElementById(inputId);
|
|
if (!input) return;
|
|
input.addEventListener("focus", () => this._beginScheduleEdit(key, fallbackState));
|
|
input.addEventListener("input", (event) => this._updateScheduleDraft(key, event.target.value));
|
|
input.addEventListener("change", (event) => this._updateScheduleDraft(key, event.target.value));
|
|
input.addEventListener("blur", (event) => this._endScheduleEdit(key, event));
|
|
}
|
|
|
|
_firstExistingEntityId(entityIds) {
|
|
for (const entityId of entityIds) {
|
|
if (entityId && this._state(entityId)) return entityId;
|
|
}
|
|
return entityIds.find(Boolean) || null;
|
|
}
|
|
|
|
_scheduleOpenEntityId() {
|
|
return this._firstExistingEntityId([
|
|
this.config.scheduleOpen,
|
|
"datetime.sternwarte_offnen_geplant",
|
|
"datetime.sternwarte_oeffnen_geplant",
|
|
]);
|
|
}
|
|
|
|
_scheduleCloseEntityId() {
|
|
return this._firstExistingEntityId([
|
|
this.config.scheduleClose,
|
|
"datetime.sternwarte_schliessen_geplant",
|
|
]);
|
|
}
|
|
|
|
_powerEntityId() {
|
|
const configured = this.config?.power;
|
|
if (configured && this._state(configured)) {
|
|
return configured;
|
|
}
|
|
|
|
const states = this._hass?.states || {};
|
|
const fallback = Object.keys(states).find((entityId) => {
|
|
if (!entityId.startsWith("switch.")) return false;
|
|
const normalized = entityId.toLowerCase();
|
|
const friendlyName = String(states[entityId]?.attributes?.friendly_name || "").toLowerCase();
|
|
return (
|
|
normalized.includes("dachsteuer")
|
|
|| (normalized.includes("sternwarte") && normalized.includes("power"))
|
|
|| friendlyName.includes("dachsteuerung")
|
|
);
|
|
});
|
|
|
|
return fallback || configured || "switch.sternwarte_dachsteuerung";
|
|
}
|
|
|
|
async _call(domain, service) {
|
|
try {
|
|
const result = this._hass.callService(domain, service, {});
|
|
Promise.resolve(result).catch(() => {});
|
|
} catch (error) {}
|
|
}
|
|
|
|
async _callEntity(domain, service, entityId) {
|
|
if (!entityId) return;
|
|
try {
|
|
const result = this._hass.callService(domain, service, { entity_id: entityId });
|
|
Promise.resolve(result).catch(() => {});
|
|
} catch (error) {}
|
|
}
|
|
|
|
_bindClick(id, handler) {
|
|
this.shadowRoot.getElementById(id)?.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handler();
|
|
});
|
|
}
|
|
|
|
_showMoreInfo(entityId) {
|
|
if (!entityId) return;
|
|
const event = new Event("hass-more-info", {
|
|
bubbles: true,
|
|
composed: true,
|
|
});
|
|
event.detail = { entityId };
|
|
this.dispatchEvent(event);
|
|
}
|
|
|
|
_bindMoreInfo(id, entityId) {
|
|
const element = this.shadowRoot.getElementById(id);
|
|
if (!element || !entityId) return;
|
|
|
|
const openMoreInfo = (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this._showMoreInfo(entityId);
|
|
};
|
|
|
|
element.addEventListener("click", openMoreInfo);
|
|
element.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
openMoreInfo(event);
|
|
}
|
|
});
|
|
}
|
|
|
|
_setDateTime(entityId, inputId, key) {
|
|
const input = this.shadowRoot.getElementById(inputId);
|
|
const field = this._scheduleFieldState(key);
|
|
const value = field?.draft || input?.value || "";
|
|
if (!value) return;
|
|
if (!entityId) return;
|
|
field.pending = true;
|
|
field.editing = false;
|
|
field.draft = value;
|
|
this._hass.callService("datetime", "set_value", {
|
|
entity_id: entityId,
|
|
datetime: value,
|
|
});
|
|
if (this._pendingRender) {
|
|
this._requestRender();
|
|
}
|
|
}
|
|
|
|
_isoForInput(state) {
|
|
if (!state || !state.state || state.state === "unknown" || state.state === "unavailable") {
|
|
return "";
|
|
}
|
|
const value = new Date(state.state);
|
|
if (Number.isNaN(value.getTime())) return "";
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}`;
|
|
}
|
|
|
|
_formatDateTime(state) {
|
|
if (!state || !state.state || state.state === "unknown" || state.state === "unavailable") {
|
|
return "\u2014";
|
|
}
|
|
const value = new Date(state.state);
|
|
if (Number.isNaN(value.getTime())) return "\u2014";
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `${pad(value.getDate())}.${pad(value.getMonth() + 1)}. ${pad(value.getHours())}:${pad(value.getMinutes())}`;
|
|
}
|
|
|
|
_roofStatusText() {
|
|
const status = this._state(this.config.roofStatus)?.state;
|
|
switch (status) {
|
|
case "offen":
|
|
return "Offen";
|
|
case "geschlossen":
|
|
return "Geschlossen";
|
|
case "in_bewegung":
|
|
return "In Bewegung";
|
|
case "sensorfehler":
|
|
return "Sensorfehler";
|
|
case "unbekannt":
|
|
return "Unbekannt";
|
|
default:
|
|
return this._labelForRoof();
|
|
}
|
|
}
|
|
|
|
_roofPositionValue() {
|
|
const value = Number(this._state(this.config.roofPosition)?.state);
|
|
if (Number.isNaN(value)) return null;
|
|
return Math.max(0, Math.min(100, Math.round(value)));
|
|
}
|
|
|
|
_labelForRoof() {
|
|
const roof = this._state(this.config.roof);
|
|
const moving = this._state(this.config.roofMoving);
|
|
const closed = this._state(this.config.roofClosed);
|
|
const open = this._state(this.config.roofOpen);
|
|
|
|
if (moving?.state === "on") return "In Bewegung";
|
|
if (open?.state === "on" && closed?.state !== "on") return "Offen";
|
|
if (closed?.state === "on" && open?.state !== "on") return "Geschlossen";
|
|
if (roof?.state === "opening") return "\u00d6ffnet";
|
|
if (roof?.state === "closing") return "Schlie\u00dft";
|
|
return "Unbekannt";
|
|
}
|
|
|
|
_boolBadge(label, entityId, onText = "Aktiv", offText = "Aus", extraClass = "", options = {}) {
|
|
const state = this._state(entityId);
|
|
const on = state?.state === "on";
|
|
const animStyle = (on && extraClass) ? ` style="animation-delay: -${Date.now() % 1000}ms"` : "";
|
|
const idAttr = options.id ? ` id="${options.id}"` : "";
|
|
const clickableClass = options.clickable ? " clickable" : "";
|
|
const roleAttr = options.clickable ? ` role="button" tabindex="0" aria-label="${label} öffnen"` : "";
|
|
return `
|
|
<div class="badge ${on ? "on" : ""} ${extraClass}${clickableClass}"${idAttr}${roleAttr}${animStyle}>
|
|
<span class="badge-label">${label}</span>
|
|
<span class="badge-value">${on ? onText : offText}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
_openBlockedReason() {
|
|
const rain = this._state(this.config.rain)?.state === "on";
|
|
const moving = this._state(this.config.roofMoving)?.state === "on";
|
|
const open = this._state(this.config.roofOpen)?.state === "on";
|
|
if (rain) return "\u00d6ffnen gesperrt: Regen erkannt";
|
|
if (moving) return "\u00d6ffnen gesperrt: Dach ist in Bewegung";
|
|
if (open) return "Dach ist bereits offen";
|
|
return "";
|
|
}
|
|
|
|
_powerIndicatorClassName() {
|
|
const state = this._state(this._powerEntityId())?.state;
|
|
if (state === "on") return "on";
|
|
if (state === "off") return "off";
|
|
return "unknown";
|
|
}
|
|
|
|
_inputPanelStates() {
|
|
const roofStatus = this._state(this.config.roofStatus);
|
|
const rawInputs = Array.isArray(roofStatus?.attributes?.inputs)
|
|
? roofStatus.attributes.inputs
|
|
: [];
|
|
const knownInputs = {
|
|
7: { label: "Regen", entityId: this.config.rain, accent: "warn" },
|
|
9: { label: "Dach bewegt", entityId: this.config.roofMoving, accent: "motion" },
|
|
10: { label: "Dach zu", entityId: this.config.roofClosed, accent: "ok" },
|
|
11: { label: "Dach offen", entityId: this.config.roofOpen, accent: "ok" },
|
|
};
|
|
|
|
return Array.from({ length: 12 }, (_, index) => {
|
|
const known = knownInputs[index] || {};
|
|
const entityState = known.entityId ? this._state(known.entityId) : null;
|
|
const rawValue = typeof rawInputs[index] === "boolean" ? rawInputs[index] : null;
|
|
const entityValue = entityState?.state === "on" ? true : entityState?.state === "off" ? false : null;
|
|
const on = rawValue ?? entityValue;
|
|
|
|
return {
|
|
key: `input-${index}`,
|
|
label: known.label || "",
|
|
shortLabel: `IN ${index}`,
|
|
accent: known.accent || "neutral",
|
|
on,
|
|
};
|
|
});
|
|
}
|
|
|
|
_windIndicatorState() {
|
|
const wind = this._state(this.config.wind);
|
|
const value = Number(wind?.state);
|
|
const display = wind?.state && wind.state !== "unknown" && wind.state !== "unavailable"
|
|
? `${wind.state} ${wind.attributes?.unit_of_measurement ?? "km/h"}`
|
|
: "\u2014";
|
|
|
|
if (Number.isNaN(value)) {
|
|
return {
|
|
display,
|
|
className: "",
|
|
};
|
|
}
|
|
if (value <= 10) {
|
|
return {
|
|
display,
|
|
className: "wind-good",
|
|
};
|
|
}
|
|
if (value <= 15) {
|
|
return {
|
|
display,
|
|
className: "wind-warn",
|
|
};
|
|
}
|
|
return {
|
|
display,
|
|
className: "wind-danger",
|
|
};
|
|
}
|
|
|
|
_isMESZ(date) {
|
|
const year = date.getUTCFullYear();
|
|
const lastSunday = (month, hour) => {
|
|
const event = new Date(Date.UTC(year, month + 1, 0, hour));
|
|
while (event.getUTCDay() !== 0) event.setUTCDate(event.getUTCDate() - 1);
|
|
return event;
|
|
};
|
|
return date >= lastSunday(2, 1) && date < lastSunday(9, 1);
|
|
}
|
|
|
|
_astroObserver() {
|
|
const astronomy = this._astronomy();
|
|
if (!astronomy) return null;
|
|
const lat = Number(this.config.astroLat);
|
|
const lon = Number(this.config.astroLon);
|
|
if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
|
|
return new astronomy.Observer(lat, lon, 0);
|
|
}
|
|
|
|
_astroTimeToUtcHour(eventTime) {
|
|
if (!eventTime) return null;
|
|
const date = eventTime.date instanceof Date ? eventTime.date : null;
|
|
if (!date || Number.isNaN(date.getTime())) return null;
|
|
return date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
|
|
}
|
|
|
|
_calcTwilight(date) {
|
|
const astronomy = this._astronomy();
|
|
const observer = this._astroObserver();
|
|
if (!astronomy || !observer) {
|
|
return {
|
|
sun: { dawn: null, dusk: null },
|
|
civil: { dawn: null, dusk: null },
|
|
naut: { dawn: null, dusk: null },
|
|
astro: { dawn: null, dusk: null },
|
|
};
|
|
}
|
|
|
|
try {
|
|
const bodySun = astronomy.Body?.Sun ?? "Sun";
|
|
const start = new Date(date);
|
|
start.setHours(0, 0, 0, 0);
|
|
const limitDays = 2;
|
|
const altitudeEvent = (altitude) => ({
|
|
dawn: this._astroTimeToUtcHour(astronomy.SearchAltitude(bodySun, observer, +1, start, limitDays, altitude)),
|
|
dusk: this._astroTimeToUtcHour(astronomy.SearchAltitude(bodySun, observer, -1, start, limitDays, altitude)),
|
|
});
|
|
|
|
return {
|
|
sun: {
|
|
dawn: this._astroTimeToUtcHour(astronomy.SearchRiseSet(bodySun, observer, +1, start, limitDays, 0)),
|
|
dusk: this._astroTimeToUtcHour(astronomy.SearchRiseSet(bodySun, observer, -1, start, limitDays, 0)),
|
|
},
|
|
civil: altitudeEvent(-6),
|
|
naut: altitudeEvent(-12),
|
|
astro: altitudeEvent(-18),
|
|
};
|
|
} catch (error) {
|
|
return {
|
|
sun: { dawn: null, dusk: null },
|
|
civil: { dawn: null, dusk: null },
|
|
naut: { dawn: null, dusk: null },
|
|
astro: { dawn: null, dusk: null },
|
|
};
|
|
}
|
|
}
|
|
|
|
_moonStateAt(date) {
|
|
const astronomy = this._astronomy();
|
|
const observer = this._astroObserver();
|
|
if (!astronomy || !observer) {
|
|
return { altitude: Number.NEGATIVE_INFINITY, illumination: 0, phaseAngle: 0 };
|
|
}
|
|
|
|
try {
|
|
const bodyMoon = astronomy.Body?.Moon ?? "Moon";
|
|
const equator = astronomy.Equator(bodyMoon, date, observer, true, true);
|
|
const horizon = astronomy.Horizon(date, observer, equator.ra, equator.dec, "normal");
|
|
const illumination = astronomy.Illumination(bodyMoon, date);
|
|
const phaseAngle = Number(astronomy.MoonPhase(date)) || 0;
|
|
|
|
return {
|
|
altitude: (Number(horizon?.altitude) || 0) * Math.PI / 180,
|
|
illumination: Math.max(0, Math.min(1, Number(illumination?.phase_fraction) || 0)),
|
|
phaseAngle: ((phaseAngle % 360) + 360) % 360,
|
|
};
|
|
} catch (error) {
|
|
return { altitude: Number.NEGATIVE_INFINITY, illumination: 0, phaseAngle: 0 };
|
|
}
|
|
}
|
|
|
|
_sunAltitudeDegAt(date) {
|
|
const astronomy = this._astronomy();
|
|
const observer = this._astroObserver();
|
|
if (!astronomy || !observer) return Number.NEGATIVE_INFINITY;
|
|
|
|
try {
|
|
const bodySun = astronomy.Body?.Sun ?? "Sun";
|
|
const equator = astronomy.Equator(bodySun, date, observer, true, true);
|
|
const horizon = astronomy.Horizon(date, observer, equator.ra, equator.dec, "normal");
|
|
return Number(horizon?.altitude);
|
|
} catch (error) {
|
|
return Number.NEGATIVE_INFINITY;
|
|
}
|
|
}
|
|
|
|
_astroPhaseAt(date) {
|
|
const altitude = this._sunAltitudeDegAt(date);
|
|
if (!Number.isFinite(altitude)) return "night";
|
|
if (altitude >= -0.833) return "day";
|
|
if (altitude >= -6) return "civil";
|
|
if (altitude >= -12) return "naut";
|
|
if (altitude >= -18) return "astro";
|
|
return "night";
|
|
}
|
|
|
|
_moonVisualState() {
|
|
const moon = this._moonStateAt(new Date());
|
|
const phaseAngle = moon.phaseAngle ?? 0;
|
|
const waxing = phaseAngle <= 180;
|
|
const radians = phaseAngle * Math.PI / 180;
|
|
|
|
return {
|
|
illumination: Math.max(0, Math.min(1, moon.illumination || 0)),
|
|
illuminationPercent: Math.round((moon.illumination || 0) * 100),
|
|
waxing,
|
|
phaseAngle,
|
|
cosPhase: Math.cos(radians),
|
|
};
|
|
}
|
|
|
|
_renderMoonPhaseDataUrl(moonVisual, size = 64) {
|
|
const texture = this._moonTexture;
|
|
if (!texture) return "";
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return "";
|
|
|
|
const radius = size / 2 - 1;
|
|
const x = size / 2;
|
|
const y = size / 2;
|
|
const cosPhase = Number(moonVisual.cosPhase) || 0;
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
ctx.clip();
|
|
|
|
ctx.fillStyle = "rgba(8,10,16,0.96)";
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.globalAlpha = 0.98;
|
|
ctx.drawImage(texture, x - radius, y - radius, radius * 2, radius * 2);
|
|
ctx.globalAlpha = 1;
|
|
|
|
ctx.fillStyle = "rgba(8,10,16,0.96)";
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
ctx.clip();
|
|
|
|
if (moonVisual.illumination >= 0.999) {
|
|
ctx.drawImage(texture, x - radius, y - radius, radius * 2, radius * 2);
|
|
} else if (moonVisual.illumination > 0.001) {
|
|
ctx.beginPath();
|
|
for (let i = 0; i <= 72; i += 1) {
|
|
const t = -radius + (2 * radius * i) / 72;
|
|
const xr = Math.sqrt(Math.max(0, radius * radius - t * t));
|
|
const xt = (moonVisual.waxing ? cosPhase : -cosPhase) * xr;
|
|
if (i === 0) {
|
|
ctx.moveTo(x + xt, y + t);
|
|
} else {
|
|
ctx.lineTo(x + xt, y + t);
|
|
}
|
|
}
|
|
for (let i = 72; i >= 0; i -= 1) {
|
|
const t = -radius + (2 * radius * i) / 72;
|
|
const xr = Math.sqrt(Math.max(0, radius * radius - t * t));
|
|
ctx.lineTo(x + (moonVisual.waxing ? xr : -xr), y + t);
|
|
}
|
|
ctx.closePath();
|
|
ctx.clip();
|
|
ctx.drawImage(texture, x - radius, y - radius, radius * 2, radius * 2);
|
|
}
|
|
|
|
ctx.restore();
|
|
ctx.restore();
|
|
|
|
ctx.strokeStyle = "rgba(255,255,255,0.18)";
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
return canvas.toDataURL("image/png");
|
|
}
|
|
|
|
_moonTrackState() {
|
|
const now = new Date();
|
|
const cycleStart = new Date(now);
|
|
cycleStart.setHours(12, 0, 0, 0);
|
|
if (now.getHours() < 12) {
|
|
cycleStart.setDate(cycleStart.getDate() - 1);
|
|
}
|
|
|
|
const stepMinutes = 10;
|
|
const totalSteps = Math.round((24 * 60) / stepMinutes);
|
|
const segments = [];
|
|
let segmentStart = null;
|
|
let currentStep = 0;
|
|
const currentMoon = this._moonStateAt(now);
|
|
|
|
for (; currentStep <= totalSteps; currentStep += 1) {
|
|
const sample = new Date(cycleStart.getTime() + currentStep * stepMinutes * 60000);
|
|
const visible = this._moonStateAt(sample).altitude > 0;
|
|
if (visible && segmentStart === null) {
|
|
segmentStart = currentStep;
|
|
}
|
|
if ((!visible || currentStep === totalSteps) && segmentStart !== null) {
|
|
const endStep = visible && currentStep === totalSteps ? currentStep : currentStep - 1;
|
|
const startHour = (segmentStart * stepMinutes) / 60;
|
|
const endHour = ((endStep + 1) * stepMinutes) / 60;
|
|
segments.push({
|
|
left: `${(startHour / 24) * 100}%`,
|
|
width: `${Math.max(((endHour - startHour) / 24) * 100, 0.5)}%`,
|
|
});
|
|
segmentStart = null;
|
|
}
|
|
}
|
|
|
|
return {
|
|
opacity: "0.38",
|
|
segments,
|
|
};
|
|
}
|
|
|
|
_formatHourValue(hourValue) {
|
|
if (hourValue === null || hourValue === undefined) return "\u2014";
|
|
const hours = ((hourValue % 24) + 24) % 24;
|
|
const h = Math.floor(hours);
|
|
const m = Math.floor((hours - h) * 60);
|
|
return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
|
|
}
|
|
|
|
_astroState() {
|
|
const now = new Date();
|
|
const windowStart = new Date(now);
|
|
windowStart.setHours(12, 0, 0, 0);
|
|
if (now < windowStart) {
|
|
windowStart.setDate(windowStart.getDate() - 1);
|
|
}
|
|
const nowLocal = (now.getTime() - windowStart.getTime()) / 3600000;
|
|
const segments = [];
|
|
const colors = {
|
|
night: "#16202f",
|
|
astro: "#2a4978",
|
|
naut: "#4a76bf",
|
|
civil: "#c68c50",
|
|
day: "#eed06f",
|
|
};
|
|
const sampleMinutes = 5;
|
|
const totalSamples = Math.floor((24 * 60) / sampleMinutes);
|
|
let activePhase = null;
|
|
let segmentStart = 0;
|
|
const pushSegment = (startHour, endHour, phaseName) => {
|
|
if (!phaseName || endHour <= startHour) return;
|
|
segments.push({
|
|
start: startHour,
|
|
end: endHour,
|
|
color: colors[phaseName],
|
|
});
|
|
};
|
|
|
|
for (let index = 0; index <= totalSamples; index += 1) {
|
|
const minutesFromStart = Math.min(index * sampleMinutes, 24 * 60);
|
|
const sampleDate = new Date(windowStart.getTime() + minutesFromStart * 60000);
|
|
const phase = this._astroPhaseAt(sampleDate);
|
|
if (activePhase === null) {
|
|
activePhase = phase;
|
|
segmentStart = minutesFromStart / 60;
|
|
continue;
|
|
}
|
|
if (phase !== activePhase) {
|
|
pushSegment(segmentStart, minutesFromStart / 60, activePhase);
|
|
activePhase = phase;
|
|
segmentStart = minutesFromStart / 60;
|
|
}
|
|
}
|
|
if (activePhase !== null) {
|
|
pushSegment(segmentStart, 24, activePhase);
|
|
}
|
|
|
|
segments.sort((a, b) => a.start - b.start);
|
|
|
|
const toWindowHour = (state) => {
|
|
if (!state?.state || state.state === "unknown" || state.state === "unavailable") return null;
|
|
const value = new Date(state.state);
|
|
if (Number.isNaN(value.getTime())) return null;
|
|
const hour = (value.getTime() - windowStart.getTime()) / 3600000;
|
|
if (hour < 0 || hour > 24) return null;
|
|
return hour;
|
|
};
|
|
|
|
return {
|
|
now: now.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" }),
|
|
phaseSegments: segments.map((segment) => ({
|
|
left: `${(segment.start / 24) * 100}%`,
|
|
width: `${Math.max(((segment.end - segment.start) / 24) * 100, 0.35)}%`,
|
|
color: segment.color,
|
|
})),
|
|
markerLeft: `${(nowLocal / 24) * 100}%`,
|
|
openMarkerLeft: toWindowHour(this._state(this._scheduleOpenEntityId())),
|
|
closeMarkerLeft: toWindowHour(this._state(this._scheduleCloseEntityId())),
|
|
};
|
|
}
|
|
|
|
render() {
|
|
if (!this.shadowRoot || !this._hass) return;
|
|
|
|
const powerEntityId = this._powerEntityId();
|
|
const powerIndicatorClassName = this._powerIndicatorClassName();
|
|
const openScheduleEntityId = this._scheduleOpenEntityId();
|
|
const closeScheduleEntityId = this._scheduleCloseEntityId();
|
|
const openSchedule = this._state(openScheduleEntityId);
|
|
const closeSchedule = this._state(closeScheduleEntityId);
|
|
const openInputValue = this._scheduleInputValue("open", openSchedule);
|
|
const closeInputValue = this._scheduleInputValue("close", closeSchedule);
|
|
if (openInputValue === this._isoForInput(openSchedule)) {
|
|
this._scheduleFieldState("open").draft = "";
|
|
this._scheduleFieldState("open").pending = false;
|
|
}
|
|
if (closeInputValue === this._isoForInput(closeSchedule)) {
|
|
this._scheduleFieldState("close").draft = "";
|
|
this._scheduleFieldState("close").pending = false;
|
|
}
|
|
const roofPosition = this._roofPositionValue();
|
|
const windIndicator = this._windIndicatorState();
|
|
const inputPanelStates = this._inputPanelStates();
|
|
const movingOn = this._state(this.config.roofMoving)?.state === "on";
|
|
const openOn = this._state(this.config.roofOpen)?.state === "on";
|
|
const closedOn = this._state(this.config.roofClosed)?.state === "on";
|
|
const openBlockedReason = this._openBlockedReason();
|
|
const powerState = this._state(powerEntityId)?.state;
|
|
const powerOn = powerState === "on";
|
|
const powerOff = powerState === "off";
|
|
const powerOnButtonDisabled = powerOn;
|
|
const powerOffButtonDisabled = powerOff;
|
|
let openButtonDisabled;
|
|
let closeButtonDisabled;
|
|
let stopButtonDisabled;
|
|
if (!powerOn) {
|
|
openButtonDisabled = true;
|
|
closeButtonDisabled = true;
|
|
stopButtonDisabled = true;
|
|
} else if (movingOn) {
|
|
openButtonDisabled = true;
|
|
closeButtonDisabled = true;
|
|
stopButtonDisabled = false;
|
|
} else if (openOn && !closedOn) {
|
|
openButtonDisabled = true;
|
|
closeButtonDisabled = false;
|
|
stopButtonDisabled = true;
|
|
} else if (closedOn && !openOn) {
|
|
openButtonDisabled = false;
|
|
closeButtonDisabled = true;
|
|
stopButtonDisabled = true;
|
|
} else if (closedOn && openOn) {
|
|
openButtonDisabled = true;
|
|
closeButtonDisabled = true;
|
|
stopButtonDisabled = false;
|
|
} else {
|
|
openButtonDisabled = false;
|
|
closeButtonDisabled = false;
|
|
stopButtonDisabled = false;
|
|
}
|
|
const astro = this._astroState();
|
|
const moonTrack = this._moonTrackState();
|
|
const moonVisual = this._moonVisualState();
|
|
const moonImageDataUrl = this._renderMoonPhaseDataUrl(moonVisual, 56);
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
.wrap {
|
|
padding: 16px;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--divider-color);
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
|
|
overflow: hidden;
|
|
}
|
|
.panel.control-panel.on {
|
|
border-color: rgba(76, 175, 80, 0.38);
|
|
background: linear-gradient(180deg, rgba(76, 175, 80, 0.24), rgba(76, 175, 80, 0.10));
|
|
}
|
|
.panel.control-panel.off {
|
|
border-color: rgba(198, 40, 40, 0.40);
|
|
background: linear-gradient(180deg, rgba(198, 40, 40, 0.24), rgba(198, 40, 40, 0.10));
|
|
}
|
|
.panel.control-panel.unknown {
|
|
border-color: rgba(209, 169, 74, 0.35);
|
|
background: linear-gradient(180deg, rgba(209, 169, 74, 0.18), rgba(209, 169, 74, 0.08));
|
|
}
|
|
.title {
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
opacity: 0.7;
|
|
margin-bottom: 10px;
|
|
}
|
|
.status-big {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
.sub {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
opacity: 0.78;
|
|
}
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
.stat {
|
|
border-radius: 10px;
|
|
padding: 7px 9px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.stat.clickable {
|
|
cursor: pointer;
|
|
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
|
|
}
|
|
.stat.clickable:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255,255,255,0.2);
|
|
background: rgba(255,255,255,0.07);
|
|
}
|
|
.stat.clickable:focus-visible {
|
|
outline: 2px solid var(--primary-color);
|
|
outline-offset: 2px;
|
|
}
|
|
.stat.wind-good {
|
|
background: rgba(76, 175, 80, 0.14);
|
|
border-color: rgba(76, 175, 80, 0.3);
|
|
}
|
|
.stat.wind-warn {
|
|
background: rgba(255, 179, 0, 0.16);
|
|
border-color: rgba(255, 179, 0, 0.35);
|
|
}
|
|
.stat.wind-danger {
|
|
background: rgba(198, 40, 40, 0.16);
|
|
border-color: rgba(198, 40, 40, 0.34);
|
|
}
|
|
.stat-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
.stat-value {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.moon-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.moon-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
flex: 0 0 28px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
object-fit: cover;
|
|
box-shadow: 0 0 10px rgba(246, 240, 196, 0.12);
|
|
}
|
|
.moon-percent {
|
|
text-align: right;
|
|
line-height: 1.05;
|
|
}
|
|
.moon-percent .stat-value {
|
|
margin-top: 2px;
|
|
}
|
|
.position {
|
|
margin-top: 10px;
|
|
}
|
|
.position-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.position-track {
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.08);
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.position-fill {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, #d1a94a, #69b36d);
|
|
transition: width 160ms ease;
|
|
}
|
|
.astro {
|
|
margin-top: 10px;
|
|
padding: 8px 10px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
}
|
|
.astro-meta {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.astro-meta span {
|
|
display: block;
|
|
opacity: 0.7;
|
|
}
|
|
.astro-meta strong {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 14px;
|
|
}
|
|
.astro-scale {
|
|
position: relative;
|
|
padding-top: 18px;
|
|
}
|
|
.astro-bar {
|
|
position: relative;
|
|
height: 32px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: #16202f;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
|
|
}
|
|
.astro-phase {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
box-shadow:
|
|
inset -1px 0 0 rgba(255,255,255,0.14),
|
|
inset 0 1px 0 rgba(255,255,255,0.08),
|
|
inset 0 -10px 18px rgba(0,0,0,0.14);
|
|
}
|
|
.astro-tick {
|
|
position: absolute;
|
|
top: 17px;
|
|
height: 36px;
|
|
width: 2px;
|
|
margin-left: -1px;
|
|
background: rgba(255,255,255,0.5);
|
|
z-index: 2;
|
|
}
|
|
.astro-tick-label {
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: rgba(255,255,255,0.72);
|
|
letter-spacing: 0.02em;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
.astro-now {
|
|
position: absolute;
|
|
top: -4px;
|
|
bottom: -4px;
|
|
width: 4px;
|
|
margin-left: -1px;
|
|
background: #d32f2f;
|
|
box-shadow: 0 0 8px rgba(211, 47, 47, 0.55);
|
|
}
|
|
.astro-marker {
|
|
position: absolute;
|
|
top: -3px;
|
|
bottom: -3px;
|
|
width: 4px;
|
|
margin-left: -1px;
|
|
box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
|
|
}
|
|
.astro-marker.open {
|
|
background: #4caf50;
|
|
}
|
|
.astro-marker.close {
|
|
background: #ffb300;
|
|
}
|
|
.astro-moon-track {
|
|
position: absolute;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
height: 6px;
|
|
top: 3px;
|
|
bottom: auto;
|
|
margin-left: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(12, 18, 28, 0.78);
|
|
box-sizing: border-box;
|
|
box-shadow: 0 0 6px rgba(255, 255, 255, 0.24);
|
|
z-index: 2;
|
|
}
|
|
.badges {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.badge {
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.badge.clickable {
|
|
cursor: pointer;
|
|
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
|
|
}
|
|
.badge.clickable:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255,255,255,0.2);
|
|
background: rgba(255,255,255,0.07);
|
|
}
|
|
.badge.clickable:focus-visible {
|
|
outline: 2px solid var(--primary-color);
|
|
outline-offset: 2px;
|
|
}
|
|
.badge.on {
|
|
background: rgba(76, 175, 80, 0.12);
|
|
border-color: rgba(76, 175, 80, 0.3);
|
|
}
|
|
.badge.moving.on {
|
|
animation: moving-badge-blink 1s linear infinite;
|
|
background: rgba(255, 179, 0, 0.2);
|
|
border-color: rgba(255, 179, 0, 0.55);
|
|
}
|
|
.badge.rain.on {
|
|
animation: rain-badge-blink 1s linear infinite;
|
|
background: rgba(220, 50, 50, 0.2);
|
|
border-color: rgba(220, 50, 50, 0.55);
|
|
}
|
|
.badge-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
.badge-value {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
@keyframes moving-badge-blink {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 rgba(255, 179, 0, 0);
|
|
}
|
|
50% {
|
|
opacity: 0.45;
|
|
box-shadow: 0 0 14px rgba(255, 179, 0, 0.35);
|
|
}
|
|
}
|
|
@keyframes rain-badge-blink {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 rgba(220, 50, 50, 0);
|
|
}
|
|
50% {
|
|
opacity: 0.45;
|
|
box-shadow: 0 0 14px rgba(220, 50, 50, 0.5);
|
|
}
|
|
}
|
|
.controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
button {
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 12px 10px;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
button.secondary {
|
|
background: rgba(255,255,255,0.08);
|
|
color: var(--primary-text-color);
|
|
}
|
|
button.warn {
|
|
background: #c62828;
|
|
}
|
|
.schedule-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 196px) max-content;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: start;
|
|
margin-top: 10px;
|
|
}
|
|
input[type="datetime-local"] {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 196px;
|
|
box-sizing: border-box;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
background: rgba(0,0,0,0.18);
|
|
color: var(--primary-text-color);
|
|
font: inherit;
|
|
}
|
|
.schedule-grid button {
|
|
white-space: nowrap;
|
|
}
|
|
.inline-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
align-items: center;
|
|
}
|
|
.schedule-overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.schedule-card {
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.input-panel {
|
|
position: relative;
|
|
border-radius: 16px;
|
|
padding: 7px;
|
|
border: 1px solid rgba(120, 220, 255, 0.18);
|
|
background:
|
|
radial-gradient(circle at top, rgba(120, 220, 255, 0.12), transparent 42%),
|
|
linear-gradient(180deg, rgba(7, 16, 18, 0.98), rgba(3, 8, 10, 0.96));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.06),
|
|
inset 0 -14px 28px rgba(0,0,0,0.35),
|
|
0 10px 24px rgba(0,0,0,0.18);
|
|
}
|
|
.input-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 5px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.035);
|
|
pointer-events: none;
|
|
}
|
|
.input-panel-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 4px;
|
|
}
|
|
.input-led {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 8px 1fr;
|
|
gap: 1px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: 2px;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 28px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
|
|
rgba(0,0,0,0.26);
|
|
}
|
|
.input-led.warn.is-on {
|
|
border-color: rgba(255, 96, 96, 0.38);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 96, 96, 0.16), rgba(255, 96, 96, 0.04)),
|
|
rgba(0,0,0,0.28);
|
|
}
|
|
.input-led.ok.is-on,
|
|
.input-led.motion.is-on,
|
|
.input-led.neutral.is-on {
|
|
border-color: rgba(120, 255, 180, 0.28);
|
|
background:
|
|
linear-gradient(180deg, rgba(120, 255, 180, 0.14), rgba(120, 255, 180, 0.04)),
|
|
rgba(0,0,0,0.28);
|
|
}
|
|
.input-led-light {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #162126;
|
|
border: 1px solid rgba(255,255,255,0.14);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.08),
|
|
inset 0 -2px 4px rgba(0,0,0,0.45);
|
|
}
|
|
.input-led.is-on .input-led-light {
|
|
background: #78ffb4;
|
|
border-color: rgba(210,255,230,0.9);
|
|
box-shadow:
|
|
0 0 12px rgba(120,255,180,0.8),
|
|
0 0 24px rgba(120,255,180,0.42),
|
|
inset 0 0 4px rgba(255,255,255,0.55);
|
|
}
|
|
.input-led.warn.is-on .input-led-light {
|
|
background: #ff6767;
|
|
border-color: rgba(255, 220, 220, 0.95);
|
|
box-shadow:
|
|
0 0 12px rgba(255, 96, 96, 0.82),
|
|
0 0 24px rgba(255, 96, 96, 0.46),
|
|
inset 0 0 4px rgba(255,255,255,0.5);
|
|
}
|
|
.input-led.is-unknown .input-led-light {
|
|
background: #49545a;
|
|
border-color: rgba(255,255,255,0.18);
|
|
box-shadow:
|
|
inset 0 0 4px rgba(255,255,255,0.08);
|
|
}
|
|
.input-led-meta {
|
|
min-width: 0;
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
.input-led-index {
|
|
display: block;
|
|
font-size: 7px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
opacity: 0.92;
|
|
}
|
|
.input-led-state {
|
|
display: block;
|
|
margin-top: 1px;
|
|
font-size: 0;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
}
|
|
.schedule-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
.schedule-value {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
.hint {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: #ffcc80;
|
|
}
|
|
@media (max-width: 700px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.badges {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.controls {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.schedule-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
input[type="datetime-local"] {
|
|
width: 100%;
|
|
}
|
|
.stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.schedule-overview {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.input-panel-grid {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.input-panel-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
</style>
|
|
<ha-card header="Sternwarte">
|
|
<div class="wrap">
|
|
<div class="hero">
|
|
<div class="panel">
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<span class="stat-label">\u00d6ffnen geplant</span>
|
|
<span class="stat-value" style="font-size:16px">${this._formatDateTime(openSchedule)}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Schlie\u00dfen geplant</span>
|
|
<span class="stat-value" style="font-size:16px">${this._formatDateTime(closeSchedule)}</span>
|
|
</div>
|
|
<div
|
|
class="stat ${windIndicator.className} clickable"
|
|
id="wind-stat"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Windverlauf öffnen"
|
|
>
|
|
<span class="stat-label">Wind</span>
|
|
<span class="stat-value">${windIndicator.display}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Mond</span>
|
|
<div class="moon-stat">
|
|
<img
|
|
class="moon-icon"
|
|
src="${moonImageDataUrl}"
|
|
alt="Mondphase"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="moon-percent">
|
|
<span class="stat-value">${moonVisual.illuminationPercent} %</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="badges">
|
|
${this._boolBadge("Dach zu", this.config.roofClosed, "Ja", "Nein")}
|
|
${this._boolBadge("Dach offen", this.config.roofOpen, "Ja", "Nein")}
|
|
${this._boolBadge("Dach bewegt", this.config.roofMoving, "Ja", "Nein", "moving")}
|
|
${this._boolBadge("Regen", this.config.rain, "Ja", "Nein", "rain", { id: "rain-badge", clickable: true })}
|
|
</div>
|
|
<div class="astro">
|
|
<div class="astro-meta">
|
|
<div><span>Jetzt</span><strong>${astro.now}</strong></div>
|
|
</div>
|
|
<div class="astro-scale">
|
|
<div class="astro-tick" style="left:0%"></div>
|
|
<div class="astro-tick-label" style="left:0%">12</div>
|
|
<div class="astro-tick" style="left:25%"></div>
|
|
<div class="astro-tick-label" style="left:25%">18</div>
|
|
<div class="astro-tick" style="left:50%"></div>
|
|
<div class="astro-tick-label" style="left:50%">0</div>
|
|
<div class="astro-tick" style="left:75%"></div>
|
|
<div class="astro-tick-label" style="left:75%">6</div>
|
|
<div class="astro-tick" style="left:100%"></div>
|
|
<div class="astro-tick-label" style="left:100%">12</div>
|
|
<div class="astro-bar">
|
|
${astro.phaseSegments.map((segment) => `<div class="astro-phase" style="left:${segment.left};width:${segment.width};background:${segment.color}"></div>`).join("")}
|
|
${moonTrack.segments.map((segment) => `<div class="astro-moon-track" style="left:${segment.left};width:${segment.width};opacity:${moonTrack.opacity}"></div>`).join("")}
|
|
${astro.openMarkerLeft === null ? "" : `<div class="astro-marker open" style="left:${(astro.openMarkerLeft / 24) * 100}%"></div>`}
|
|
${astro.closeMarkerLeft === null ? "" : `<div class="astro-marker close" style="left:${(astro.closeMarkerLeft / 24) * 100}%"></div>`}
|
|
<div class="astro-now" style="left:${astro.markerLeft}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position">
|
|
<div class="position-top">
|
|
<span>Dachposition</span>
|
|
<strong>${roofPosition === null ? "\u2014" : `${roofPosition} %`}</strong>
|
|
</div>
|
|
<div class="position-track">
|
|
<div class="position-fill" style="width:${roofPosition ?? 0}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel control-panel ${powerIndicatorClassName}">
|
|
<div class="title">Steuerung</div>
|
|
<div class="controls">
|
|
<button type="button" id="open-btn" ${openButtonDisabled ? "disabled" : ""}>\u00d6ffnen</button>
|
|
<button type="button" class="warn" id="stop-btn" ${stopButtonDisabled ? "disabled" : ""}>Stopp</button>
|
|
<button type="button" class="secondary" id="close-btn" ${closeButtonDisabled ? "disabled" : ""}>Schlie\u00dfen</button>
|
|
</div>
|
|
<div class="inline-actions">
|
|
<button type="button" class="secondary" id="power-on-btn" ${powerOnButtonDisabled ? "disabled" : ""}>Dachsteuerung ein</button>
|
|
<button type="button" class="secondary" id="power-off-btn" ${powerOffButtonDisabled ? "disabled" : ""}>Dachsteuerung aus</button>
|
|
</div>
|
|
${openBlockedReason ? `<div class="hint">${openBlockedReason}</div>` : ""}
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="title">Zeitplanung</div>
|
|
<div class="schedule-overview">
|
|
<div class="schedule-card">
|
|
<span class="schedule-label">\u00d6ffnen geplant</span>
|
|
<span class="schedule-value">${this._formatDateTime(openSchedule)}</span>
|
|
</div>
|
|
<div class="schedule-card">
|
|
<span class="schedule-label">Schlie\u00dfen geplant</span>
|
|
<span class="schedule-value">${this._formatDateTime(closeSchedule)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="schedule-grid">
|
|
<input id="open-schedule-input" type="datetime-local" value="${openInputValue}">
|
|
<button type="button" class="secondary" id="open-schedule-btn">\u00d6ffnen setzen</button>
|
|
</div>
|
|
<div class="schedule-grid">
|
|
<input id="close-schedule-input" type="datetime-local" value="${closeInputValue}">
|
|
<button type="button" class="secondary" id="close-schedule-btn">Schlie\u00dfen setzen</button>
|
|
</div>
|
|
<div class="inline-actions">
|
|
<button type="button" class="secondary" id="nautical-btn">Nautisch setzen</button>
|
|
<button type="button" class="secondary" id="clear-schedule-btn">Zeitplanung l\u00f6schen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel">
|
|
<div class="title">Eing\u00e4nge</div>
|
|
<div class="input-panel-grid">
|
|
${inputPanelStates.map((input) => `
|
|
<div class="input-led ${input.accent} ${input.on === true ? "is-on" : ""} ${input.on === null ? "is-unknown" : ""}">
|
|
<span class="input-led-light" aria-hidden="true"></span>
|
|
<div class="input-led-meta">
|
|
<span class="input-led-index">${input.shortLabel}</span>
|
|
<span class="input-led-state">${input.on === true ? "AN" : input.on === false ? "AUS" : "UNBEKANNT"}</span>
|
|
</div>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
|
|
this._bindClick("open-btn", () => this._callEntity("cover", "open_cover", this.config.roof));
|
|
this._bindClick("stop-btn", () => this._callEntity("cover", "stop_cover", this.config.roof));
|
|
this._bindClick("close-btn", () => this._callEntity("cover", "close_cover", this.config.roof));
|
|
this._bindClick("power-on-btn", () => this._callEntity("switch", "turn_on", powerEntityId));
|
|
this._bindClick("power-off-btn", () => this._callEntity("switch", "turn_off", powerEntityId));
|
|
this._bindClick("nautical-btn", () => this._call("sternwarte", "set_nautical_schedule"));
|
|
this._bindClick("clear-schedule-btn", () => {
|
|
this._resetScheduleDrafts();
|
|
this._call("sternwarte", "clear_schedule");
|
|
this._requestRender();
|
|
});
|
|
this._bindClick("open-schedule-btn", () => this._setDateTime(openScheduleEntityId, "open-schedule-input", "open"));
|
|
this._bindClick("close-schedule-btn", () => this._setDateTime(closeScheduleEntityId, "close-schedule-input", "close"));
|
|
this._bindMoreInfo("wind-stat", this.config.wind);
|
|
this._bindMoreInfo("rain-badge", this.config.rain);
|
|
this._bindScheduleInput("open", "open-schedule-input", openSchedule);
|
|
this._bindScheduleInput("close", "close-schedule-input", closeSchedule);
|
|
}
|
|
}
|
|
|
|
if (!customElements.get("sternwarte-card")) {
|
|
customElements.define("sternwarte-card", SternwarteCard);
|
|
}
|
|
|
|
window.customCards = window.customCards || [];
|
|
if (!window.customCards.some((card) => card?.type === "sternwarte-card")) {
|
|
window.customCards.push({
|
|
type: "sternwarte-card",
|
|
name: "Sternwarte Card",
|
|
description: "Eigene Card f\u00fcr die Sternwarte",
|
|
});
|
|
}
|