Add: Working IP, port, token and library selector

2.0
Juraj Nyíri 3 years ago
parent 5b35249491
commit ebe88211c3

@ -19239,10 +19239,17 @@ class PlayController {
}
}
/* eslint-disable @typescript-eslint/no-explicit-any */
class PlexMeetsHomeAssistantEditor extends HTMLElement {
constructor() {
super(...arguments);
this.plexPort = false;
this.plexProtocol = 'http';
this.config = {};
this.ip = document.createElement('paper-input');
this.token = document.createElement('paper-input');
this.port = document.createElement('paper-input');
this.libraryName = document.createElement('paper-dropdown-menu');
this.fireEvent = (node, type, detail, options = {}) => {
// eslint-disable-next-line no-param-reassign
detail = detail === null || detail === undefined ? {} : detail;
@ -19255,46 +19262,73 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
node.dispatchEvent(event);
return event;
};
this.render = () => {
this.valueUpdated = () => {
this.config.ip = this.ip.value;
this.config.token = this.token.value;
this.config.port = this.port.value;
this.config.libraryName = this.libraryName.value;
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
};
this.render = async () => {
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);
const port = document.createElement('paper-input');
port.label = 'Plex Port';
port.value = this.config.port;
port.type = 'number';
this.content.appendChild(port);
this.ip.label = 'Plex IP Address';
this.ip.value = this.config.ip;
this.ip.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.ip);
this.token.label = 'Plex Token';
this.token.value = this.config.token;
this.token.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.token);
this.port.label = 'Plex Port';
this.port.value = this.config.port;
this.port.type = 'number';
this.port.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.port);
const addLibraryItem = (text) => {
const libraryItem = document.createElement('paper-item');
libraryItem.innerHTML = text;
return libraryItem;
};
const library = document.createElement('paper-dropdown-menu');
const libraryItems = document.createElement('paper-listbox');
libraryItems.appendChild(addLibraryItem('Continue Watching'));
libraryItems.appendChild(addLibraryItem('Deck'));
libraryItems.appendChild(addLibraryItem('Recently Added'));
libraryItems.appendChild(addLibraryItem('Watch Next'));
libraryItems.slot = 'dropdown-content';
library.label = 'Plex Library';
library.appendChild(libraryItems);
library.style.width = '100%';
this.content.appendChild(library);
this.libraryName.label = 'Plex Library';
this.libraryName.disabled = true;
this.libraryName.appendChild(libraryItems);
this.libraryName.style.width = '100%';
this.libraryName.addEventListener('value-changed', this.valueUpdated);
this.content.appendChild(this.libraryName);
this.appendChild(this.content);
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
if (this.plex) {
try {
const sections = await this.plex.getSections();
lodash.forEach(sections, (section) => {
libraryItems.appendChild(addLibraryItem(section.title));
});
this.libraryName.disabled = false;
this.libraryName.value = this.config.libraryName;
}
catch (err) {
// pass
}
}
};
this.setConfig = (config) => {
console.log(config);
this.config = JSON.parse(JSON.stringify(config));
if (config.port) {
this.plexPort = config.port;
}
if (config.protocol) {
this.plexProtocol = config.protocol;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.render();
};
this.configChanged = (newConfig) => {

@ -1,13 +1,27 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-env browser */
import { HomeAssistant } from 'custom-card-helpers';
import { PolymerElement } from '@polymer/polymer';
import _ from 'lodash';
import Plex from './modules/Plex';
class PlexMeetsHomeAssistantEditor extends HTMLElement {
content: any;
plexPort: number | false = false;
plexProtocol: 'http' | 'https' = 'http';
plex: Plex | undefined;
config: Record<string, any> = {};
ip: any = document.createElement('paper-input');
token: any = document.createElement('paper-input');
port: any = document.createElement('paper-input');
libraryName: any = document.createElement('paper-dropdown-menu');
fireEvent = (
node: HTMLElement,
type: string,
@ -26,52 +40,82 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
return event;
};
render = (): void => {
valueUpdated = () => {
this.config.ip = this.ip.value;
this.config.token = this.token.value;
this.config.port = this.port.value;
this.config.libraryName = this.libraryName.value;
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
};
render = async (): Promise<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);
this.ip.label = 'Plex IP Address';
this.ip.value = this.config.ip;
this.ip.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.ip);
const token: any = document.createElement('paper-input');
token.label = 'Plex Token';
token.value = this.config.token;
this.content.appendChild(token);
this.token.label = 'Plex Token';
this.token.value = this.config.token;
this.token.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.token);
const port: any = document.createElement('paper-input');
port.label = 'Plex Port';
port.value = this.config.port;
port.type = 'number';
this.content.appendChild(port);
this.port.label = 'Plex Port';
this.port.value = this.config.port;
this.port.type = 'number';
this.port.addEventListener('change', this.valueUpdated);
this.content.appendChild(this.port);
const addLibraryItem = (text: string): HTMLElement => {
const libraryItem: any = document.createElement('paper-item');
libraryItem.innerHTML = text;
return libraryItem;
};
const library: any = document.createElement('paper-dropdown-menu');
const libraryItems: any = document.createElement('paper-listbox');
libraryItems.appendChild(addLibraryItem('Continue Watching'));
libraryItems.appendChild(addLibraryItem('Deck'));
libraryItems.appendChild(addLibraryItem('Recently Added'));
libraryItems.appendChild(addLibraryItem('Watch Next'));
libraryItems.slot = 'dropdown-content';
library.label = 'Plex Library';
library.appendChild(libraryItems);
library.style.width = '100%';
this.content.appendChild(library);
this.libraryName.label = 'Plex Library';
this.libraryName.disabled = true;
this.libraryName.appendChild(libraryItems);
this.libraryName.style.width = '100%';
this.libraryName.addEventListener('value-changed', this.valueUpdated);
this.content.appendChild(this.libraryName);
this.appendChild(this.content);
this.fireEvent(this, 'config-changed', { config: this.config }); // todo remove me
if (this.plex) {
try {
const sections = await this.plex.getSections();
_.forEach(sections, (section: Record<string, any>) => {
libraryItems.appendChild(addLibraryItem(section.title));
});
this.libraryName.disabled = false;
this.libraryName.value = this.config.libraryName;
} catch (err) {
// pass
}
}
};
setConfig = (config: Record<string, any>): void => {
console.log(config);
this.config = JSON.parse(JSON.stringify(config));
if (config.port) {
this.plexPort = config.port;
}
if (config.protocol) {
this.plexProtocol = config.protocol;
}
this.plex = new Plex(this.config.ip, this.plexPort, this.config.token, this.plexProtocol, this.config.sort);
this.render();
};

Loading…
Cancel
Save