+ ${formatTime(new Date(item.when), this.hass.language)}
+
+
diff --git a/hassio/src/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js
deleted file mode 100644
index 84ec925d80..0000000000
--- a/hassio/src/addon-view/hassio-addon-audio.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import "web-animations-js/web-animations-next-lite.min";
-
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/resources/ha-style";
-import { EventsMixin } from "../../../src/mixins/events-mixin";
-
-class HassioAddonAudio extends EventsMixin(PolymerElement) {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- addon: {
- type: Object,
- observer: "addonChanged",
- },
- inputDevices: Array,
- outputDevices: Array,
- selectedInput: String,
- selectedOutput: String,
- error: String,
- };
- }
-
- addonChanged(addon) {
- this.setProperties({
- selectedInput: addon.audio_input || "null",
- selectedOutput: addon.audio_output || "null",
- });
- if (this.outputDevices) return;
-
- const noDevice = [{ device: "null", name: "-" }];
- this.hass.callApi("get", "hassio/hardware/audio").then(
- (resp) => {
- const dev = resp.data.audio;
- const input = Object.keys(dev.input).map((key) => ({
- device: key,
- name: dev.input[key],
- }));
- const output = Object.keys(dev.output).map((key) => ({
- device: key,
- name: dev.output[key],
- }));
- this.setProperties({
- inputDevices: noDevice.concat(input),
- outputDevices: noDevice.concat(output),
- });
- },
- () => {
- this.setProperties({
- inputDevices: noDevice,
- outputDevices: noDevice,
- });
- }
- );
- }
-
- _saveSettings() {
- this.error = null;
- const path = `hassio/addons/${this.addon.slug}/options`;
- this.hass
- .callApi("post", path, {
- audio_input: this.selectedInput === "null" ? null : this.selectedInput,
- audio_output:
- this.selectedOutput === "null" ? null : this.selectedOutput,
- })
- .then(
- () => {
- this.fire("hass-api-called", { success: true, path: path });
- },
- (resp) => {
- this.error = resp.body.message;
- }
- );
- }
-}
-
-customElements.define("hassio-addon-audio", HassioAddonAudio);
diff --git a/hassio/src/addon-view/hassio-addon-audio.ts b/hassio/src/addon-view/hassio-addon-audio.ts
new file mode 100644
index 0000000000..c0718a4c9a
--- /dev/null
+++ b/hassio/src/addon-view/hassio-addon-audio.ts
@@ -0,0 +1,188 @@
+import "web-animations-js/web-animations-next-lite.min";
+
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ PropertyValues,
+ TemplateResult,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../src/types";
+import {
+ HassioAddonDetails,
+ setHassioAddonOption,
+ HassioAddonSetOptionParams,
+} from "../../../src/data/hassio/addon";
+import {
+ HassioHardwareAudioDevice,
+ fetchHassioHardwareAudio,
+} from "../../../src/data/hassio/hardware";
+import { hassioStyle } from "../resources/hassio-style";
+import { haStyle } from "../../../src/resources/styles";
+
+@customElement("hassio-addon-audio")
+class HassioAddonAudio extends LitElement {
+ @property() public hass!: HomeAssistant;
+ @property() public addon!: HassioAddonDetails;
+ @property() private _error?: string;
+ @property() private _inputDevices?: HassioHardwareAudioDevice[];
+ @property() private _outputDevices?: HassioHardwareAudioDevice[];
+ @property() private _selectedInput!: null | string;
+ @property() private _selectedOutput!: null | string;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ hassioStyle,
+ css`
+ :host,
+ paper-card,
+ paper-dropdown-menu {
+ display: block;
+ }
+ .errors {
+ color: var(--google-red-500);
+ margin-bottom: 16px;
+ }
+ paper-item {
+ width: 450px;
+ }
+ .card-actions {
+ text-align: right;
+ }
+ `,
+ ];
+ }
+
+ protected update(changedProperties: PropertyValues): void {
+ super.update(changedProperties);
+ if (changedProperties.has("addon")) {
+ this._addonChanged();
+ }
+ }
+
+ private _setInputDevice(ev): void {
+ const device = ev.detail.device;
+ if (device) {
+ this._selectedInput = device;
+ }
+ }
+
+ private _setOutputDevice(ev): void {
+ const device = ev.detail.device;
+ if (device) {
+ this._selectedOutput = device;
+ }
+ }
+
+ private async _addonChanged(): Promise {
+ this._selectedInput = this.addon.audio_input;
+ this._selectedOutput = this.addon.audio_output;
+ if (this._outputDevices) {
+ return;
+ }
+
+ const noDevice: HassioHardwareAudioDevice[] = [
+ { device: undefined, name: "-" },
+ ];
+
+ try {
+ const { audio } = await fetchHassioHardwareAudio(this.hass);
+ const inupt = Object.keys(audio.input).map((key) => ({
+ device: key,
+ name: audio.input[key],
+ }));
+ const output = Object.keys(audio.output).map((key) => ({
+ device: key,
+ name: audio.output[key],
+ }));
+
+ this._inputDevices = noDevice.concat(inupt);
+ this._outputDevices = noDevice.concat(output);
+ } catch {
+ this._error = "Failed to fetch audio hardware";
+ this._inputDevices = noDevice;
+ this._outputDevices = noDevice;
+ }
+ }
+
+ private async _saveSettings(): Promise {
+ this._error = undefined;
+ const data: HassioAddonSetOptionParams = {
+ audio_input: this._selectedInput || null,
+ audio_output: this._selectedOutput || null,
+ };
+ try {
+ await setHassioAddonOption(this.hass, this.addon.slug, data);
+ } catch {
+ this._error = "Failed to set addon audio device";
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hassio-addon-audio": HassioAddonAudio;
+ }
+}
diff --git a/hassio/src/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js
deleted file mode 100644
index a4061b8899..0000000000
--- a/hassio/src/addon-view/hassio-addon-config.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/components/buttons/ha-call-api-button";
-
-class HassioAddonConfig extends PolymerElement {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- addon: {
- type: Object,
- observer: "addonChanged",
- },
- addonSlug: String,
- config: {
- type: String,
- observer: "configChanged",
- },
- configParsed: Object,
- error: String,
- resetData: {
- type: Object,
- value: {
- options: null,
- },
- },
- };
- }
-
- addonChanged(addon) {
- this.config = addon ? JSON.stringify(addon.options, null, 2) : "";
- }
-
- configChanged(config) {
- try {
- this.$.config.classList.remove("syntaxerror");
- this.configParsed = JSON.parse(config);
- } catch (err) {
- this.$.config.classList.add("syntaxerror");
- this.configParsed = null;
- }
- }
-
- saveTapped() {
- this.error = null;
-
- this.hass
- .callApi("post", `hassio/addons/${this.addonSlug}/options`, {
- options: this.configParsed,
- })
- .catch((resp) => {
- this.error = resp.body.message;
- });
- }
-}
-
-customElements.define("hassio-addon-config", HassioAddonConfig);
diff --git a/hassio/src/addon-view/hassio-addon-config.ts b/hassio/src/addon-view/hassio-addon-config.ts
new file mode 100644
index 0000000000..5d36267a81
--- /dev/null
+++ b/hassio/src/addon-view/hassio-addon-config.ts
@@ -0,0 +1,158 @@
+import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ PropertyValues,
+ TemplateResult,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../src/types";
+import {
+ HassioAddonDetails,
+ setHassioAddonOption,
+ HassioAddonSetOptionParams,
+} from "../../../src/data/hassio/addon";
+import { hassioStyle } from "../resources/hassio-style";
+import { haStyle } from "../../../src/resources/styles";
+import { PolymerChangedEvent } from "../../../src/polymer-types";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+
+@customElement("hassio-addon-config")
+class HassioAddonConfig extends LitElement {
+ @property() public hass!: HomeAssistant;
+ @property() public addon!: HassioAddonDetails;
+ @property() private _error?: string;
+ @property() private _config!: string;
+ @property({ type: Boolean }) private _configHasChanged = false;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ hassioStyle,
+ css`
+ :host {
+ display: block;
+ }
+ paper-card {
+ display: block;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ }
+ .errors {
+ color: var(--google-red-500);
+ margin-bottom: 16px;
+ }
+ iron-autogrow-textarea {
+ width: 100%;
+ font-family: monospace;
+ }
+ .syntaxerror {
+ color: var(--google-red-500);
+ }
+ `,
+ ];
+ }
+
+ protected updated(changedProperties: PropertyValues): void {
+ super.updated(changedProperties);
+ if (changedProperties.has("addon")) {
+ this._config = JSON.stringify(this.addon.options, null, 2);
+ }
+ }
+
+ private _configChanged(ev: PolymerChangedEvent): void {
+ this._config =
+ ev.detail.value || JSON.stringify(this.addon.options, null, 2);
+ this._configHasChanged =
+ this._config !== JSON.stringify(this.addon.options, null, 2);
+ }
+
+ private async _resetTapped(): Promise {
+ this._error = undefined;
+ const data: HassioAddonSetOptionParams = {
+ options: null,
+ };
+ try {
+ await setHassioAddonOption(this.hass, this.addon.slug, data);
+ this._configHasChanged = false;
+ const eventdata = {
+ success: true,
+ response: undefined,
+ path: "options",
+ };
+ fireEvent(this, "hass-api-called", eventdata);
+ } catch (err) {
+ this._error = `Failed to reset addon configuration, ${err.body?.message ||
+ err}`;
+ }
+ }
+
+ private async _saveTapped(): Promise {
+ let data: HassioAddonSetOptionParams;
+ this._error = undefined;
+ try {
+ data = {
+ options: JSON.parse(this._config),
+ };
+ } catch (err) {
+ this._error = err;
+ return;
+ }
+ try {
+ await setHassioAddonOption(this.hass, this.addon.slug, data);
+ this._configHasChanged = false;
+ const eventdata = {
+ success: true,
+ response: undefined,
+ path: "options",
+ };
+ fireEvent(this, "hass-api-called", eventdata);
+ } catch (err) {
+ this._error = `Failed to save addon configuration, ${err.body?.message ||
+ err}`;
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hassio-addon-config": HassioAddonConfig;
+ }
+}
diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
deleted file mode 100644
index 1ef1386ecb..0000000000
--- a/hassio/src/addon-view/hassio-addon-info.js
+++ /dev/null
@@ -1,624 +0,0 @@
-import "@polymer/iron-icon/iron-icon";
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-tooltip/paper-tooltip";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/components/ha-label-badge";
-import "../../../src/components/ha-markdown";
-import "../../../src/components/buttons/ha-call-api-button";
-import "../../../src/components/ha-switch";
-import "../../../src/resources/ha-style";
-import "../components/hassio-card-content";
-
-import { EventsMixin } from "../../../src/mixins/events-mixin";
-import { navigate } from "../../../src/common/navigate";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-
-const PERMIS_DESC = {
- rating: {
- title: "Add-on Security Rating",
- description:
- "Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
- },
- host_network: {
- title: "Host Network",
- description:
- "Add-ons usually run in their own isolated network layer, which prevents them from accessing the network of the host operating system. In some cases, this network isolation can limit add-ons in providing their services and therefore, the isolation can be lifted by the add-on author, giving the add-on full access to the network capabilities of the host machine. This gives the add-on more networking capabilities but lowers the security, hence, the security rating of the add-on will be lowered when this option is used by the add-on.",
- },
- homeassistant_api: {
- title: "Home Assistant API Access",
- description:
- "This add-on is allowed to access your running Home Assistant instance directly via the Home Assistant API. This mode handles authentication for the add-on as well, which enables an add-on to interact with Home Assistant without the need for additional authentication tokens.",
- },
- full_access: {
- title: "Full Hardware Access",
- description:
- "This add-on is given full access to the hardware of your system, by request of the add-on author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
- },
- hassio_api: {
- title: "Hass.io API Access",
- description:
- "The add-on was given access to the Hass.io API, by request of the add-on author. By default, the add-on can access general version information of your system. When the add-on requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Hass.io system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
- },
- docker_api: {
- title: "Full Docker Access",
- description:
- "The add-on author has requested the add-on to have management access to the Docker instance running on your system. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
- },
- host_pid: {
- title: "Host Processes Namespace",
- description:
- "Usually, the processes the add-on runs, are isolated from all other system processes. The add-on author has requested the add-on to have access to the system processes running on the host system instance, and allow the add-on to spawn processes on the host system as well. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
- },
- apparmor: {
- title: "AppArmor",
- description:
- "AppArmor ('Application Armor') is a Linux kernel security module that restricts add-ons capabilities like network access, raw socket access, and permission to read, write, or execute specific files.\n\nAdd-on authors can provide their security profiles, optimized for the add-on, or request it to be disabled. If AppArmor is disabled, it will raise security risks and therefore, has a negative impact on the security score of the add-on.",
- },
- auth_api: {
- title: "Home Assistant Authentication",
- description:
- "An add-on can authenticate users against Home Assistant, allowing add-ons to give users the possibility to log into applications running inside add-ons, using their Home Assistant username/password. This badge indicates if the add-on author requests this capability.",
- },
- ingress: {
- title: "Ingress",
- description:
- "This add-on is using Ingress to embed its interface securely into Home Assistant.",
- },
-};
-
-class HassioAddonInfo extends EventsMixin(PolymerElement) {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- [[item.name]]
-
-
-
-
-
-
- [[item.name]]
-
-
-
-
- [[error]]
-
-
-
- Save
-
-
+ ${this._error
+ ? html`
+
+
+ ${this._inputDevices &&
+ this._inputDevices.map((item) => {
+ return html`
+ ${item.name}
+ `;
+ })}
+
+
+
+
+ ${this._outputDevices &&
+ this._outputDevices.map((item) => {
+ return html`
+ ${item.name}
+ `;
+ })}
+
+
+
+ ${this._error}
+ `
+ : ""}
+
+
+ Save
+
+
-
-
- [[error]]
-
-
- Reset to defaults
- Save
-
-
+ ${this._error
+ ? html`
+
+ ${this._error}
+ `
+ : ""}
+
+
+ Reset to defaults
+
+
+ Save
+
+
+
-
- This update is no longer compatible with your system.
- -
-
- Update
-
-
- Changelog
-
-
-
- Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
-
-
- Enable Protection mode
-
-
- 
-
-
-
-
- [[addon.name]]
-
-
-
- [[addon.version]]
-
-
-
- [[addon.description]].
- Visit - [[addon.name]] page for - details. -
-
-
- - Visit - [[addon.name]] page for - details. -
-
-
-
-
- Start on boot
-
-
-
- Auto update
-
-
-
-
- Show in sidebar
-
-
-
-
-
- Protection mode
-
- Grant the add-on elevated system access.
-
-
-
-
- Uninstall
-
- Rebuild
-
-
- Restart
- Stop
-
-
- Start
-
-
- Open web UI
-
-
- Open web UI
-
-
-
-
- Install
-
-
- This add-on is not available on your system.
- -
-
-
+
+ + This update is no longer compatible with your system. +
+ ` + : ""} +
+
+ Update
+
+ ${this.addon.changelog
+ ? html`
+
+ Changelog
+
+ `
+ : ""}
+
+
+ Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
+
+
+ Enable Protection mode
+
+