diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index d6057e3169..48cd99b8ec 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -11,6 +11,12 @@ import { mdiHomeAssistant, mdiKey, mdiNetwork, + mdiNumeric1, + mdiNumeric2, + mdiNumeric3, + mdiNumeric4, + mdiNumeric5, + mdiNumeric6, mdiPound, mdiShield, } from "@mdi/js"; @@ -25,7 +31,7 @@ import "../../../../src/components/buttons/ha-call-api-button"; import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-card"; -import "../../../../src/components/ha-label-badge"; +import "../../../../src/components/ha-chip"; import "../../../../src/components/ha-markdown"; import "../../../../src/components/ha-settings-row"; import "../../../../src/components/ha-svg-icon"; @@ -73,6 +79,15 @@ const STAGE_ICON = { deprecated: mdiExclamationThick, }; +const RATING_ICON = { + 1: mdiNumeric1, + 2: mdiNumeric2, + 3: mdiNumeric3, + 4: mdiNumeric4, + 5: mdiNumeric5, + 6: mdiNumeric6, +}; + @customElement("hassio-addon-info") class HassioAddonInfo extends LitElement { @property({ type: Boolean }) public narrow!: boolean; @@ -246,6 +261,163 @@ class HassioAddonInfo extends LitElement { >`} +
+ ${this.addon.stage !== "stable" + ? html` + + + ${this.supervisor.localize( + `addon.dashboard.capability.stages.${this.addon.stage}` + )} + ` + : ""} + + + + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.rating" + )} + + ${this.addon.host_network + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.host" + )} + + ` + : ""} + ${this.addon.full_access + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.hardware" + )} + + ` + : ""} + ${this.addon.homeassistant_api + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.core" + )} + + ` + : ""} + ${this._computeHassioApi + ? html` + + + ${this.supervisor.localize( + `addon.dashboard.capability.role.${this.addon.hassio_role}` + ) || this.addon.hassio_role} + + ` + : ""} + ${this.addon.docker_api + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.docker" + )} + + ` + : ""} + ${this.addon.host_pid + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.host_pid" + )} + + ` + : ""} + ${this.addon.apparmor !== "default" + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.apparmor" + )} + + ` + : ""} + ${this.addon.auth_api + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.auth" + )} + + ` + : ""} + ${this.addon.ingress + ? html` + + + ${this.supervisor.localize( + "addon.dashboard.capability.label.ingress" + )} + + ` + : ""} +
+
${this.addon.description}.
${this.supervisor.localize( @@ -266,172 +438,6 @@ class HassioAddonInfo extends LitElement { /> ` : ""} -
- ${this.addon.stage !== "stable" - ? html` - - ` - : ""} - - - ${this.addon.rating} - - ${this.addon.host_network - ? html` - - - - ` - : ""} - ${this.addon.full_access - ? html` - - - - ` - : ""} - ${this.addon.homeassistant_api - ? html` - - - - ` - : ""} - ${this._computeHassioApi - ? html` - - - - ` - : ""} - ${this.addon.docker_api - ? html` - - - - ` - : ""} - ${this.addon.host_pid - ? html` - - - - ` - : ""} - ${this.addon.apparmor - ? html` - - - - ` - : ""} - ${this.addon.auth_api - ? html` - - - - ` - : ""} - ${this.addon.ingress - ? html` - - - - ` - : ""} -
- ${this.addon.version ? html`