20200212.0

hassio/src/addon-store/hassio-addon-repository.ts

@@ -39,79 +39,85 @@ class HassioAddonRepositoryEl extends LitElement {
   protected render(): TemplateResult {
     const repo = this.repo;
     const addons = this._getAddons(this.addons, this.filter);
+    const ha105pluss = this._computeHA105plus;
 
     if (this.filter && addons.length < 1) {
       return html`
-        <div class="card-group">
-          <div class="title">
-            <div class="description">
-              No results found in "${repo.name}"
-            </div>
-          </div>
+        <div class="content">
+          <p class="description">
+            No results found in "${repo.name}"
+          </p>
         </div>
       `;
     }
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           ${repo.name}
-          <div class="description">
-            Maintained by ${repo.maintainer}<br />
-            <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
-          </div>
+        </h1>
+        <p class="description">
+          Maintained by ${repo.maintainer}<br />
+          <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
+        </p>
+        <div class="card-group">
+          ${addons.map(
+            (addon) => html`
+              <paper-card
+                .addon=${addon}
+                class=${addon.available ? "" : "not_available"}
+                @click=${this._addonTapped}
+              >
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${addon.name}
+                    .description=${addon.description}
+                    .available=${addon.available}
+                    .icon=${addon.installed && addon.installed !== addon.version
+                      ? "hassio:arrow-up-bold-circle"
+                      : "hassio:puzzle"}
+                    .iconTitle=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "New version available"
+                        : "Add-on is installed"
+                      : addon.available
+                      ? "Add-on is not installed"
+                      : "Add-on is not available on your system"}
+                    .iconClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "not_available"
+                      : ""}
+                    .iconImage=${ha105pluss && addon.icon
+                      ? `/api/hassio/addons/${addon.slug}/icon`
+                      : undefined}
+                    .showTopbar=${addon.installed || !addon.available}
+                    .topbarClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "unavailable"
+                      : ""}
+                  ></hassio-card-content>
+                </div>
+              </paper-card>
+            `
+          )}
         </div>
-
-        ${addons.map(
-          (addon) => html`
-            <paper-card
-              .addon=${addon}
-              class=${addon.available ? "" : "not_available"}
-              @click=${this.addonTapped}
-            >
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${addon.name}
-                  .description=${addon.description}
-                  .available=${addon.available}
-                  .icon=${this.computeIcon(addon)}
-                  .iconTitle=${this.computeIconTitle(addon)}
-                  .iconClass=${this.computeIconClass(addon)}
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          `
-        )}
       </div>
     `;
   }
 
-  private computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version
-      ? "hassio:arrow-up-bold-circle"
-      : "hassio:puzzle";
-  }
-
-  private computeIconTitle(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version
-        ? "New version available"
-        : "Add-on is installed";
-    }
-    return addon.available
-      ? "Add-on is not installed"
-      : "Add-on is not available on your system";
-  }
-
-  private computeIconClass(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version ? "update" : "installed";
-    }
-    return !addon.available ? "not_available" : "";
+  private _addonTapped(ev) {
+    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
-  private addonTapped(ev) {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+  private get _computeHA105plus(): boolean {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 105);
   }
 
   static get styles(): CSSResultArray {

hassio/src/addon-store/hassio-repositories-editor.ts

@@ -36,61 +36,63 @@ class HassioRepositoriesEditor extends LitElement {
   protected render(): TemplateResult {
     const repos = this._sortedRepos(this.repos);
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           Repositories
-          <div class="description">
-            Configure which add-on repositories to fetch data from:
-          </div>
-        </div>
-        ${// Use repeat so that the fade-out from call-service-api-button
-        // stays with the correct repo after we add/delete one.
-        repeat(
-          repos,
-          (repo) => repo.slug,
-          (repo) => html`
-            <paper-card>
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${repo.name}
-                  .description=${repo.url}
-                  icon="hassio:github-circle"
-                ></hassio-card-content>
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  path="hassio/supervisor/options"
-                  .hass=${this.hass}
-                  .data=${this.computeRemoveRepoData(repos, repo.url)}
-                  class="warning"
-                >
-                  Remove
-                </ha-call-api-button>
-              </div>
-            </paper-card>
-          `
-        )}
+        </h1>
+        <p class="description">
+          Configure which add-on repositories to fetch data from:
+        </p>
+        <div class="card-group">
+          ${// Use repeat so that the fade-out from call-service-api-button
+          // stays with the correct repo after we add/delete one.
+          repeat(
+            repos,
+            (repo) => repo.slug,
+            (repo) => html`
+              <paper-card>
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${repo.name}
+                    .description=${repo.url}
+                    icon="hassio:github-circle"
+                  ></hassio-card-content>
+                </div>
+                <div class="card-actions">
+                  <ha-call-api-button
+                    path="hassio/supervisor/options"
+                    .hass=${this.hass}
+                    .data=${this.computeRemoveRepoData(repos, repo.url)}
+                    class="warning"
+                  >
+                    Remove
+                  </ha-call-api-button>
+                </div>
+              </paper-card>
+            `
+          )}
 
-        <paper-card>
-          <div class="card-content add">
-            <iron-icon icon="hassio:github-circle"></iron-icon>
-            <paper-input
-              label="Add new repository by URL"
-              .value=${this._repoUrl}
-              @value-changed=${this._urlChanged}
-            ></paper-input>
-          </div>
-          <div class="card-actions">
-            <ha-call-api-button
-              path="hassio/supervisor/options"
-              .hass=${this.hass}
-              .data=${this.computeAddRepoData(repos, this._repoUrl)}
-            >
-              Add
-            </ha-call-api-button>
-          </div>
-        </paper-card>
+          <paper-card>
+            <div class="card-content add">
+              <iron-icon icon="hassio:github-circle"></iron-icon>
+              <paper-input
+                label="Add new repository by URL"
+                .value=${this._repoUrl}
+                @value-changed=${this._urlChanged}
+              ></paper-input>
+            </div>
+            <div class="card-actions">
+              <ha-call-api-button
+                path="hassio/supervisor/options"
+                .hass=${this.hass}
+                .data=${this.computeAddRepoData(repos, this._repoUrl)}
+              >
+                Add
+              </ha-call-api-button>
+            </div>
+          </paper-card>
+        </div>
       </div>
     `;
   }

hassio/src/addon-view/hassio-addon-audio.ts

@@ -51,7 +51,7 @@ class HassioAddonAudio extends LitElement {
 
           <paper-dropdown-menu
             label="Input"
-            @selected-item-changed=${this._setInputDevice}
+            @iron-select=${this._setInputDevice}
           >
             <paper-listbox
               slot="dropdown-content"
@@ -61,14 +61,16 @@ class HassioAddonAudio extends LitElement {
               ${this._inputDevices &&
                 this._inputDevices.map((item) => {
                   return html`
-                    <paper-item device=${item.device}>${item.name}</paper-item>
+                    <paper-item device=${item.device || ""}
+                      >${item.name}</paper-item
+                    >
                   `;
                 })}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
             label="Output"
-            @selected-item-changed=${this._setOutputDevice}
+            @iron-select=${this._setOutputDevice}
           >
             <paper-listbox
               slot="dropdown-content"
@@ -78,7 +80,9 @@ class HassioAddonAudio extends LitElement {
               ${this._outputDevices &&
                 this._outputDevices.map((item) => {
                   return html`
-                    <paper-item device=${item.device}>${item.name}</paper-item>
+                    <paper-item device=${item.device || ""}
+                      >${item.name}</paper-item
+                    >
                   `;
                 })}
             </paper-listbox>
@@ -123,17 +127,13 @@ class HassioAddonAudio extends LitElement {
   }
 
   private _setInputDevice(ev): void {
-    const device = ev.detail.device;
-    if (device) {
-      this._selectedInput = device;
-    }
+    const device = ev.detail.item.getAttribute("device");
+    this._selectedInput = device || null;
   }
 
   private _setOutputDevice(ev): void {
-    const device = ev.detail.device;
-    if (device) {
-      this._selectedOutput = device;
-    }
+    const device = ev.detail.item.getAttribute("device");
+    this._selectedOutput = device || null;
   }
 
   private async _addonChanged(): Promise<void> {
@@ -143,13 +143,11 @@ class HassioAddonAudio extends LitElement {
       return;
     }
 
-    const noDevice: HassioHardwareAudioDevice[] = [
-      { device: undefined, name: "-" },
-    ];
+    const noDevice: HassioHardwareAudioDevice = { device: null, name: "-" };
 
     try {
       const { audio } = await fetchHassioHardwareAudio(this.hass);
-      const inupt = Object.keys(audio.input).map((key) => ({
+      const input = Object.keys(audio.input).map((key) => ({
         device: key,
         name: audio.input[key],
       }));
@@ -158,12 +156,12 @@ class HassioAddonAudio extends LitElement {
         name: audio.output[key],
       }));
 
-      this._inputDevices = noDevice.concat(inupt);
-      this._outputDevices = noDevice.concat(output);
+      this._inputDevices = [noDevice, ...input];
+      this._outputDevices = [noDevice, ...output];
     } catch {
       this._error = "Failed to fetch audio hardware";
-      this._inputDevices = noDevice;
-      this._outputDevices = noDevice;
+      this._inputDevices = [noDevice];
+      this._outputDevices = [noDevice];
     }
   }