From 2d4ca17711c6f79b393b1dbfd5b4a36b142f08e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Sat, 10 Jul 2021 15:07:46 +0200
Subject: [PATCH] Add: Basics for graphical UI configuration

---
 dist/plex-meets-homeassistant.js | 34 +++++++++++++++++++++++++++++++-
 src/editor.ts                    | 16 +++++++++++++++
 src/plex-meets-homeassistant.ts  | 24 ++++++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/editor.ts

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 909cd31..beb0daf 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -19239,6 +19239,24 @@ class PlayController {
     }
 }
 
+/* eslint-env browser */
+class ContentCardEditor extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.setConfig = (config) => {
+            console.log(config);
+        };
+        this.configChanged = (newConfig) => {
+            const event = new Event('config-changed', {
+                bubbles: true,
+                composed: true
+            });
+            event.detail = { config: newConfig };
+            this.dispatchEvent(event);
+        };
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const escapeHtml = (unsafe) => {
@@ -21466,5 +21484,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             }
         }
     }
+    static getConfigElement() {
+        return document.createElement('content-card-editor');
+    }
+    static getStubConfig() {
+        return { entity: 'sun.sun' };
+    }
 }
-customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+customElements.define('content-card-editor', ContentCardEditor);
+customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+window.customCards = window.customCards || [];
+window.customCards.push({
+    type: 'plex-meets-homeassistant',
+    name: 'Plex meets Home Assistant',
+    preview: false,
+    description: 'Integrates Plex into Home Assistant. Browse and launch media with a simple click.' // Optional
+});
diff --git a/src/editor.ts b/src/editor.ts
new file mode 100644
index 0000000..2d9dd9b
--- /dev/null
+++ b/src/editor.ts
@@ -0,0 +1,16 @@
+/* eslint-env browser */
+class ContentCardEditor extends HTMLElement {
+	setConfig = (config: any): void => {
+		console.log(config);
+	};
+
+	configChanged = (newConfig: any) => {
+		const event: any = new Event('config-changed', {
+			bubbles: true,
+			composed: true
+		});
+		event.detail = { config: newConfig };
+		this.dispatchEvent(event);
+	};
+}
+export default ContentCardEditor;
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 0e55e96..226e240 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -6,6 +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 {
 	escapeHtml,
 	getOffset,
@@ -21,6 +22,12 @@ import {
 } from './modules/utils';
 import style from './modules/style';
 
+declare global {
+	interface Window {
+		customCards: any;
+	}
+}
+
 class PlexMeetsHomeAssistant extends HTMLElement {
 	plexProtocol: 'http' | 'https' = 'http';
 
@@ -129,6 +136,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		}
 	}
 
+	static getConfigElement() {
+		return document.createElement('content-card-editor');
+	}
+
+	static getStubConfig() {
+		return { entity: 'sun.sun' };
+	}
+
 	renderNewElementsIfNeeded = (): void => {
 		const loadAdditionalRowsCount = 2; // todo: make this configurable
 		const height = getHeight(this.content);
@@ -1542,4 +1557,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	};
 }
 
+customElements.define('content-card-editor', ContentCardEditor);
 customElements.define('plex-meets-homeassistant', PlexMeetsHomeAssistant);
+
+window.customCards = window.customCards || [];
+window.customCards.push({
+	type: 'plex-meets-homeassistant',
+	name: 'Plex meets Home Assistant',
+	preview: false,
+	description: 'Integrates Plex into Home Assistant. Browse and launch media with a simple click.' // Optional
+});