diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index beb0daf..d99b40d 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19239,12 +19239,42 @@ class PlayController { } } -/* eslint-env browser */ -class ContentCardEditor extends HTMLElement { +class PlexMeetsHomeAssistantEditor extends HTMLElement { constructor() { super(...arguments); + this.config = {}; + this.fireEvent = (node, type, detail, options = {}) => { + // eslint-disable-next-line no-param-reassign + detail = detail === null || detail === undefined ? {} : detail; + const event = new Event(type, { + bubbles: options.bubbles === undefined ? true : options.bubbles, + cancelable: Boolean(options.cancelable), + composed: options.composed === undefined ? true : options.composed + }); + event.detail = detail; + node.dispatchEvent(event); + return event; + }; + this.render = () => { + console.log('render'); + if (this.content) + this.content.remove(); + this.content = document.createElement('div'); + const ip = document.createElement('paper-input'); + ip.label = 'Plex IP Address'; + ip.value = this.config.ip; + this.content.appendChild(ip); + const token = document.createElement('paper-input'); + token.label = 'Plex Token'; + token.value = this.config.token; + this.content.appendChild(token); + this.appendChild(this.content); + this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me + }; this.setConfig = (config) => { console.log(config); + this.config = JSON.parse(JSON.stringify(config)); + this.render(); }; this.configChanged = (newConfig) => { const event = new Event('config-changed', { @@ -21485,13 +21515,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } static getConfigElement() { - return document.createElement('content-card-editor'); - } - static getStubConfig() { - return { entity: 'sun.sun' }; + return document.createElement('plex-meets-homeassistant-editor'); } } -customElements.define('content-card-editor', ContentCardEditor); +customElements.define('plex-meets-homeassistant-editor', PlexMeetsHomeAssistantEditor); customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant); window.customCards = window.customCards || []; window.customCards.push({ diff --git a/package-lock.json b/package-lock.json index 2226623..2091668 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,122 @@ "tslib": "^2.0.1" } }, + "@polymer/font-roboto": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz", + "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==" + }, + "@polymer/iron-a11y-announcer": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.2.0.tgz", + "integrity": "sha512-We+hyaFHcg7Ke8ovsoxUpYEXFIJLHxMCDaLehTB4dELS+C+K0zMnGSiqQvb/YzGS+nSYpAfkQIyg1msOCdHMtA==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-a11y-keys-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz", + "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-autogrow-textarea": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-3.0.3.tgz", + "integrity": "sha512-5r0VkWrIlm0JIp5E5wlnvkw7slK72lFRZXncmrsLZF+6n1dg2rI8jt7xpFzSmUWrqpcyXwyKaGaDvUjl3j4JLA==", + "requires": { + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/iron-validatable-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-behaviors": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz", + "integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-flex-layout": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz", + "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-form-element-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz", + "integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-input": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.1.tgz", + "integrity": "sha512-WLx13kEcbH9GKbj9+pWR6pbJkA5kxn3796ynx6eQd2rueMyUfVTR3GzOvadBKsciUuIuzrxpBWZ2+3UcueVUQQ==", + "requires": { + "@polymer/iron-a11y-announcer": "^3.0.0-pre.26", + "@polymer/iron-validatable-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-meta": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz", + "integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-validatable-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz", + "integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==", + "requires": { + "@polymer/iron-meta": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-input": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.2.1.tgz", + "integrity": "sha512-6ghgwQKM6mS0hAQxQqj+tkeEY1VUBqAsrasAm8V5RpNcfSWQC/hhRFxU0beGuKTAhndzezDzWYP6Zz4b8fExGg==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-autogrow-textarea": "^3.0.0-pre.26", + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-form-element-behavior": "^3.0.0-pre.26", + "@polymer/iron-input": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-styles": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz", + "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==", + "requires": { + "@polymer/font-roboto": "^3.0.1", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/polymer": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.4.1.tgz", + "integrity": "sha512-KPWnhDZibtqKrUz7enIPOiO4ZQoJNOuLwqrhV2MXzIt3VVnUVJVG5ORz4Z2sgO+UZ+/UZnPD0jqY+jmw/+a9mQ==", + "requires": { + "@webcomponents/shadycss": "^1.9.1" + } + }, "@rollup/plugin-json": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", @@ -191,6 +307,11 @@ "resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.28.5.tgz", "integrity": "sha512-ZSwD4EDCon2EsnPZ2/Qcigx4N2DiuBLV/rDnF04giEPFuDeBeUDdnSTyYYfX8KNic/prrJuS1vUEmAOHmj+fRg==" }, + "@webcomponents/shadycss": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.10.2.tgz", + "integrity": "sha512-9Iseu8bRtecb0klvv+WXZOVZatsRkbaH7M97Z+f+Pt909R4lDfgUODAnra23DOZTpeMTAkVpf4m/FZztN7Ox1A==" + }, "acorn": { "version": "7.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", diff --git a/package.json b/package.json index 57b93a4..0ac2c39 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,8 @@ }, "homepage": "https://github.com/JurajNyiri/PlexMeetsHomeAssistant#readme", "dependencies": { + "@polymer/paper-input": "^3.2.1", + "@polymer/polymer": "^3.4.1", "@vercel/ncc": "^0.28.5", "axios": "^0.21.1", "custom-card-helpers": "^1.7.0", diff --git a/src/editor.ts b/src/editor.ts index 2d9dd9b..1cddcab 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -1,10 +1,58 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-env browser */ -class ContentCardEditor extends HTMLElement { - setConfig = (config: any): void => { +import { HomeAssistant } from 'custom-card-helpers'; +import { PolymerElement } from '@polymer/polymer'; + +class PlexMeetsHomeAssistantEditor extends HTMLElement { + content: any; + + config: Record = {}; + + fireEvent = ( + node: HTMLElement, + type: string, + detail: Record, + options: Record = {} + ): Event => { + // eslint-disable-next-line no-param-reassign + detail = detail === null || detail === undefined ? {} : detail; + const event: any = new Event(type, { + bubbles: options.bubbles === undefined ? true : options.bubbles, + cancelable: Boolean(options.cancelable), + composed: options.composed === undefined ? true : options.composed + }); + event.detail = detail; + node.dispatchEvent(event); + return event; + }; + + render = (): void => { + console.log('render'); + if (this.content) this.content.remove(); + this.content = document.createElement('div'); + + const ip: any = document.createElement('paper-input'); + ip.label = 'Plex IP Address'; + ip.value = this.config.ip; + this.content.appendChild(ip); + + const token: any = document.createElement('paper-input'); + token.label = 'Plex Token'; + token.value = this.config.token; + this.content.appendChild(token); + + this.appendChild(this.content); + + this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me + }; + + setConfig = (config: Record): void => { console.log(config); + this.config = JSON.parse(JSON.stringify(config)); + this.render(); }; - configChanged = (newConfig: any) => { + configChanged = (newConfig: any): void => { const event: any = new Event('config-changed', { bubbles: true, composed: true @@ -13,4 +61,4 @@ class ContentCardEditor extends HTMLElement { this.dispatchEvent(event); }; } -export default ContentCardEditor; +export default PlexMeetsHomeAssistantEditor; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 226e240..48573d7 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -6,7 +6,7 @@ import { Connection } from 'home-assistant-js-websocket'; import { supported, CSS_STYLE } from './const'; import Plex from './modules/Plex'; import PlayController from './modules/PlayController'; -import ContentCardEditor from './editor'; +import PlexMeetsHomeAssistantEditor from './editor'; import { escapeHtml, getOffset, @@ -136,12 +136,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { } } - static getConfigElement() { - return document.createElement('content-card-editor'); - } - - static getStubConfig() { - return { entity: 'sun.sun' }; + static getConfigElement(): HTMLElement { + return document.createElement('plex-meets-homeassistant-editor'); } renderNewElementsIfNeeded = (): void => { @@ -1557,7 +1553,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; } -customElements.define('content-card-editor', ContentCardEditor); +customElements.define('plex-meets-homeassistant-editor', PlexMeetsHomeAssistantEditor); customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant); window.customCards = window.customCards || [];