Add: WIP configuration UI

2.0
Juraj Nyíri 3 years ago
parent 2d4ca17711
commit 76aed359f6

@ -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({

121
package-lock.json generated

@ -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",

@ -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",

@ -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<string, any> = {};
fireEvent = (
node: HTMLElement,
type: string,
detail: Record<string, any>,
options: Record<string, any> = {}
): 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<string, any>): 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;

@ -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 || [];

Loading…
Cancel
Save