Remove light card for generated mode

.gitattributes

@@ -11,4 +11,3 @@
 *.mp3 binary
 
 demo/public/api/camera_proxy_stream/* binary
-demo/public/api/media_player_proxy/* binary

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -1,88 +0,0 @@
----
-name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
-labels: bug
----
-
-<!-- READ THIS FIRST:
-- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
-- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
-- Do not report issues for custom Lovelace cards.
-- Provide as many details as possible. Paste logs, configuration samples and code into the backticks.
-DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed without comment.
--->
-
-## Checklist
-
-- [ ] I have updated to the latest available Home Assistant version.
-- [ ] I have cleared the cache of my browser.
-- [ ] I have tried a different browser to see if it is related to my browser.
-
-## The problem
-
-<!--
-  Describe the issue you are experiencing here to communicate to the
-  maintainers. Tell us about the current behavior.
-  If possible provide a screenshot with a description.
--->
-
-## Expected behavior
-
-<!--
-  Describe what you expected to happen or it should look/behave.
-  If possible provide a screenshot with a description.
--->
-
-## Steps to reproduce
-
-<!--
-  Provide steps for us, that helps reproducing your issue.
-  For example:
-    1. Add a climate integration
-    2. Navigate to Lovelace
-    3. Click more info of the climate entity
-    4. Set the HVAC action to heat
-    5. Set the temperature higher than the current temperature
-    6. Set the HVAC action to cool
--->
-
-## Environment
-
-<!--
-  Provide details about the versions you are using, which helps us reproducing
-  and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Developer tools -> Info.
-
-  Browser version and operating system is important! Please try to replicate
-  your issue in a different browser and be sure to include your findings.
--->
-
-- Home Assistant release with the issue:
-- Last working Home Assistant release (if known):
-- Browser and browser version:
-- Operating system:
-
-## Problem-relevant configuration
-
-<!--
-  An example configuration that caused the problem for you. Fill this out even
-  if it seems unimportant to you. Please be sure to remove personal information
-  like passwords, private URLs and other credentials.
--->
-
-```yaml
-
-```
-
-## Javascript errors shown in your browser console/inspector
-
-<!--
-  If you come across any javascript or other error logs, e.g., in your browser
-  console/inspector please provide them.
--->
-
-```txt
-
-```
-
-## Additional information

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,25 +0,0 @@
----
-name: Request a feature for the UI, Frontend or Lovelace
-about: Request an new feature for the Home Assistant frontend.
-labels: feature request
----
-<!--
-  DO NOT DELETE ANY TEXT from this template!
-  Otherwise, your request may be closed without comment.
--->
-## The request
-<!-- 
-  Describe to our maintainers, the feature you would like to be added.
-  Please be clear and concise and, if possible, provide a screenshot or mockup.
--->
-
-
-## The alternatives
-<!--
-  Are you currently using, or have you considered alternatives?
-  If so, could you please describe those?
--->
-
-
-## Additional information
-

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,78 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
+<!-- READ THIS FIRST:
+- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
+- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
+- Provide as many details as possible. Do not delete any text from this template!
+-->
+
+**Checklist:**
+
+- [ ] I updated to the latest version available
+- [ ] I cleared the cache of my browser
+
+**Home Assistant release with the issue:**
+
+<!--
+- Frontend -> Developer tools -> Info
+- Or use this command: hass --version
+-->
+
+**Last working Home Assistant release (if known):**
+
+**UI (States or Lovelace UI?):**
+
+<!--
+- Frontend -> Developer tools -> Info
+-->
+
+**Browser and Operating System:**
+
+<!--
+Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
+-->
+
+**Description of problem:**
+
+<!--
+Explain what the issue is, and what is the current behaviour. If possible provide a screenshot with a description.
+-->
+
+**Expected behaviour:**
+
+<!--
+Explain how things should look/behave. If possible provide a screenshot with a description.
+-->
+
+**Relevant config:**
+
+<!--
+Give the config of both the integration that is used, the Lovelace config, scene, automation or otherwise relevant configuration.
+-->
+
+**Steps to reproduce this problem:**
+
+<!--
+Sum up all steps that are necessary to reproduce this bug.
+For example:
+1. Add a climate integration
+2. Navigate to Lovelace
+3. Click more info of the climate entity
+4. Set the hvac action to heat
+5. Set the temperature higher than the current temperature
+6. Set the hvac action to cool
+-->
+
+**Javascript errors shown in the web inspector (if applicable):**
+
+```
+
+```
+
+**Additional information:**

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
-    url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
-  - name: Report incorrect or missing information on our website
-    url: https://github.com/home-assistant/home-assistant.io/issues
-    about: Our documentation has its own issue tracker. Please report issues with the website there.
-  - name: I have a question or need support
-    url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs, check our website for resources on getting help.
-  - name: I'm unsure where to go
-    url: https://www.home-assistant.io/join-chat
-    about: If you are unsure where to go, then joining our chat is recommended; Just ask!

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: feature request
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,77 +0,0 @@
-<!--
-  You are amazing! Thanks for contributing to our project!
-  Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
--->
-## Breaking change
-<!--
-  If your PR contains a breaking change for existing users, it is important
-  to tell them what breaks, how to make it work again and why we did this.
-  This piece of text is published with the release notes, so it helps if you
-  write it towards our users, not us.
-  Note: Remove this section if this PR is NOT a breaking change.
--->
-
-
-## Proposed change
-<!-- 
-  Describe the big picture of your changes here to communicate to the
-  maintainers why we should accept this pull request. If it fixes a bug
-  or resolves a feature request, be sure to link to that issue in the
-  additional information section.
--->
-
-
-## Type of change
-<!--
-  What type of change does your PR introduce to the Home Assistant frontend?
-  NOTE: Please, check only 1! box! 
-  If your PR requires multiple boxes to be checked, you'll most likely need to
-  split it into multiple PRs. This makes things easier and faster to code review.
--->
-
-- [ ] Dependency upgrade
-- [ ] Bugfix (non-breaking change which fixes an issue)
-- [ ] New feature (thank you!)
-- [ ] Breaking change (fix/feature causing existing functionality to break)
-- [ ] Code quality improvements to existing code or addition of tests
-
-## Example configuration
-<!--
-  Supplying a configuration snippet, makes it easier for a maintainer to test
-  your PR.
--->
-
-```yaml
-
-```
-
-## Additional information
-<!--
-  Details are important, and help maintainers processing your PR.
-  Please be sure to fill out additional details, if applicable.
--->
-
-- This PR fixes or closes issue: fixes #
-- This PR is related to issue: 
-- Link to documentation pull request: 
-
-## Checklist
-<!--
-  Put an `x` in the boxes that apply. You can also fill these out after
-  creating the PR. If you're unsure about any of them, don't hesitate to ask.
-  We're here to help! This is simply a reminder of what we are going to look
-  for before merging your code.
--->
-
-- [ ] The code change is tested and works locally.
-- [ ] There is no commented out code in this PR.
-- [ ] Tests have been added to verify that the new code works.
-
-If user exposed functionality or configuration variables are added/changed:
-
-- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
-
-<!--
-  Thank you for contributing <3
--->
-[docs-repository]: https://github.com/home-assistant/home-assistant.io

.github/stale.yml

@@ -1,56 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-
-# Number of days of inactivity before an Issue or Pull Request becomes stale
-daysUntilStale: 90
-
-# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
-# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
-daysUntilClose: 7
-
-# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
-onlyLabels: []
-
-# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
-exemptLabels:
-  - feature request
-  - Help wanted
-  - to do
-
-# Set to true to ignore issues in a project (defaults to false)
-exemptProjects: true
-
-# Set to true to ignore issues in a milestone (defaults to false)
-exemptMilestones: true
-
-# Set to true to ignore issues with an assignee (defaults to false)
-exemptAssignees: false
-
-# Label to use when marking as stale
-staleLabel: stale
-
-# Comment to post when marking as stale. Set to `false` to disable
-markComment: >
-  There hasn't been any activity on this issue recently. Due to the high number
-  of incoming GitHub notifications, we have to clean some of the old issues,
-  as many of them have already been resolved with the latest updates.
-
-  Please make sure to update to the latest Home Assistant version and check
-  if that solves the issue. Let us know if that works for you by adding a
-  comment 👍
-
-  This issue now has been marked as stale and will be closed if no further
-  activity occurs. Thank you for your contributions.
-
-# Comment to post when removing the stale label.
-# unmarkComment: >
-#   Your comment here.
-
-# Comment to post when closing a stale Issue or Pull Request.
-# closeComment: >
-#   Your comment here.
-
-# Limit the number of actions per hour, from 1-30. Default is 30
-limitPerRun: 30
-
-# Limit to only `issues` or `pulls`
-only: issues

.github/workflows/ci.yaml

@@ -1,127 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - dev
-      - master
-  pull_request:
-    branches:
-      - dev
-      - master
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
-      - name: Build translations
-        run: ./node_modules/.bin/gulp build-translations
-      - name: Run eslint
-        run: ./node_modules/.bin/eslint src hassio/src gallery/src
-      - name: Run tslint
-        run: ./node_modules/.bin/tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts'
-      - name: Run tsc
-        run: ./node_modules/.bin/tsc
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Run Mocha
-        run: npm run mocha
-  build:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-app
-        env:
-          TRAVIS: "true"
-  supervisor:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-hassio
-        env:
-          TRAVIS: "true"

.github/workflows/demo.yaml

@@ -1,39 +0,0 @@
-name: Demo
-
-on:
-  push:
-    branches:
-      - dev
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-      - name: Deploy to Netlify
-        uses: netlify/actions/cli@master
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
-        with:
-          args: deploy --dir=demo/dist --prod

.travis.yml

@@ -0,0 +1,18 @@
+sudo: false
+language: node_js
+cache:
+  yarn: true
+  directories:
+    - bower_components
+install: yarn install
+script:
+  - npm run build
+  - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
+  - npm run test
+  # - xvfb-run wct --module-resolution=node --npm
+  # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
+dist: trusty
+addons:
+  sauce_connect: true

README.md

@@ -1,4 +1,4 @@
-# Home Assistant Frontend
+# Home Assistant Polymer [![Build Status](https://travis-ci.org/home-assistant/home-assistant-polymer.svg?branch=master)](https://travis-ci.org/home-assistant/home-assistant-polymer)
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
@@ -19,15 +19,12 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 ## Frontend development
 
 ### Classic environment
-
 A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
 
 ### Docker environment
-
 It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
-
-- `sh ./script/docker_run.sh build` Build all the project with one command
-- `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the _classic environment_) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
+* `sh ./script/docker_run.sh build` Build all the project with one command
+* `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the *classic environment*) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
 
 **Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
 

azure-pipelines-netlify.yml

@@ -1,27 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger: none
-pr: none
-schedules:
-  - cron: "0 0 * * *"
-    displayName: "build preview"
-    branches:
-      include:
-      - dev
-    always: false
-variables:
-  - group: netlify
-
-jobs:
-
-- job: 'Netlify_preview'
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - script: |
-      # Cast
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_CAST}
-
-      # Demo
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_DEMO}
-    displayName: 'Trigger netlify build preview'

azure-pipelines-translation.yml

@@ -11,7 +11,7 @@ trigger:
 pr: none
 schedules:
   - cron: "30 0 * * *"
-    displayName: "frontend translation update"
+    displayName: "translation update"
     branches:
       include:
       - dev

build-scripts/babel.js

@@ -34,7 +34,6 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
             },
           ],
           "@babel/plugin-proposal-optional-chaining",
-          "@babel/plugin-proposal-nullish-coalescing-operator",
           [
             require("@babel/plugin-proposal-decorators").default,
             { decoratorsBeforeExport: true },

build-scripts/gulp/app.js

@@ -24,7 +24,7 @@ gulp.task(
       gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations"
+      gulp.series("create-test-translation", "build-translations")
     ),
     "copy-static",
     "webpack-watch-app"

build-scripts/gulp/gallery.js

@@ -16,7 +16,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-gallery",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     "webpack-dev-server-gallery"

build-scripts/gulp/gather-static.js

@@ -65,12 +65,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
-  const staticDir = paths.static;
-  copyTranslations(staticDir);
-  done();
-});
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);

build-scripts/gulp/gen-icons.js

@@ -2,7 +2,6 @@ const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
 const paths = require("../paths");
-const { mapFiles } = require("../util");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -58,6 +57,20 @@ function generateIconset(iconsetName, iconNames) {
   return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
+// Helper function to map recursively over files in a folder and it's subfolders
+function mapFiles(startPath, filter, mapFunc) {
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      mapFiles(filename, filter, mapFunc);
+    } else if (filename.indexOf(filter) >= 0) {
+      mapFunc(filename);
+    }
+  }
+}
+
 // Find all icons used by the project.
 function findIcons(searchPath, iconsetName) {
   const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");

build-scripts/gulp/translations.js

@@ -1,18 +1,14 @@
-const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
-const source = require("vinyl-source-stream");
-const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const hashFilename = require("gulp-hash-filename");
 const merge = require("gulp-merge-json");
 const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
-const { mapFiles } = require("../util");
-const env = require("../env");
-const paths = require("../paths");
 
 const inDir = "translations";
 const workDir = "build-translations";
@@ -43,6 +39,8 @@ const TRANSLATION_FRAGMENTS = [
   "developer-tools",
 ];
 
+const tasks = [];
+
 function recursiveFlatten(prefix, data) {
   let output = {};
   Object.keys(data).forEach(function(key) {
@@ -118,9 +116,11 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function() {
-  return del([workDir]);
+let taskName = "clean-translations";
+gulp.task(taskName, function() {
+  return del([`${outDir}/**/*.json`]);
 });
+tasks.push(taskName);
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -129,23 +129,29 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function(cb) {
-  fs.writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
-});
-
+taskName = "create-test-metadata";
 gulp.task(
-  "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
+  taskName,
+  gulp.series("ensure-translations-build-dir", function writeTestMetaData(cb) {
+    fs.writeFile(
+      workDir + "/testMetadata.json",
+      JSON.stringify({
+        test: {
+          nativeName: "Test",
+        },
+      }),
+      cb
+    );
+  })
+);
+tasks.push(taskName);
+
+taskName = "create-test-translation";
+gulp.task(
+  taskName,
+  gulp.series("create-test-metadata", function() {
     return gulp
-      .src(path.join(paths.translations_src, "en.json"))
+      .src("src/translations/en.json")
       .pipe(
         transform(function(data, file) {
           return recursiveEmpty(data);
@@ -155,6 +161,7 @@ gulp.task(
       .pipe(gulp.dest(workDir));
   })
 );
+tasks.push(taskName);
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -165,215 +172,235 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function() {
-  return gulp
-    .src(path.join(paths.translations_src, "en.json"))
-    .pipe(
-      transform(function(data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(rename("translationMaster.json"))
-    .pipe(gulp.dest(workDir));
-});
+taskName = "build-master-translation";
+gulp.task(
+  taskName,
+  gulp.series("clean-translations", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .pipe(rename("translationMaster.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
 
-gulp.task("build-merged-translations", function() {
-  return gulp
-    .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
-    .pipe(
-      transform(function(data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      foreach(function(stream, file) {
-        // For each language generate a merged json file. It begins with the master
-        // translation as a failsafe for untranslated strings, and merges all parent
-        // tags into one file for each specific subtag
-        //
-        // TODO: This is a naive interpretation of BCP47 that should be improved.
-        //       Will be OK for now as long as we don't have anything more complicated
-        //       than a base translation + region.
-        const tr = path.basename(file.history[0], ".json");
-        const subtags = tr.split("-");
-        const src = [workDir + "/translationMaster.json"];
-        for (let i = 1; i <= subtags.length; i++) {
-          const lang = subtags.slice(0, i).join("-");
-          if (lang === "test") {
-            src.push(workDir + "/test.json");
-          } else if (lang !== "en") {
-            src.push(inDir + "/" + lang + ".json");
+taskName = "build-merged-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-master-translation", function() {
+    return gulp
+      .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .pipe(
+        foreach(function(stream, file) {
+          // For each language generate a merged json file. It begins with the master
+          // translation as a failsafe for untranslated strings, and merges all parent
+          // tags into one file for each specific subtag
+          //
+          // TODO: This is a naive interpretation of BCP47 that should be improved.
+          //       Will be OK for now as long as we don't have anything more complicated
+          //       than a base translation + region.
+          const tr = path.basename(file.history[0], ".json");
+          const subtags = tr.split("-");
+          const src = [workDir + "/translationMaster.json"];
+          for (let i = 1; i <= subtags.length; i++) {
+            const lang = subtags.slice(0, i).join("-");
+            if (lang === "test") {
+              src.push(workDir + "/test.json");
+            } else if (lang !== "en") {
+              src.push(inDir + "/" + lang + ".json");
+            }
           }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    );
-});
-
-var taskName;
+          return gulp
+            .src(src, { allowEmpty: true })
+            .pipe(transform((data) => emptyFilter(data)))
+            .pipe(
+              merge({
+                fileName: tr + ".json",
+              })
+            )
+            .pipe(gulp.dest(fullDir));
+        })
+      );
+  })
+);
+tasks.push(taskName);
 
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function() {
-    // Return only the translations for this fragment.
-    return gulp
-      .src(fullDir + "/*.json")
-      .pipe(
-        transform((data) => ({
-          ui: {
-            panel: {
-              [fragment]: data.ui.panel[fragment],
+  gulp.task(
+    taskName,
+    gulp.series("build-merged-translations", function() {
+      // Return only the translations for this fragment.
+      return gulp
+        .src(fullDir + "/*.json")
+        .pipe(
+          transform((data) => ({
+            ui: {
+              panel: {
+                [fragment]: data.ui.panel[fragment],
+              },
             },
-          },
-        }))
-      )
-      .pipe(gulp.dest(workDir + "/" + fragment));
-  });
+          }))
+        )
+        .pipe(gulp.dest(workDir + "/" + fragment));
+    })
+  );
+  tasks.push(taskName);
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function() {
-  // Remove the fragment translations from the core translation.
-  return gulp
-    .src(fullDir + "/*.json")
-    .pipe(
-      transform((data) => {
-        TRANSLATION_FRAGMENTS.forEach((fragment) => {
-          delete data.ui.panel[fragment];
-        });
-        return data;
-      })
-    )
-    .pipe(gulp.dest(coreDir));
-});
-
+gulp.task(
+  taskName,
+  gulp.series("build-merged-translations", function() {
+    // Remove the fragment translations from the core translation.
+    return gulp
+      .src(fullDir + "/*.json")
+      .pipe(
+        transform((data) => {
+          TRANSLATION_FRAGMENTS.forEach((fragment) => {
+            delete data.ui.panel[fragment];
+          });
+          return data;
+        })
+      )
+      .pipe(gulp.dest(coreDir));
+  })
+);
+tasks.push(taskName);
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function() {
-  // Flatten the split versions of our translations, and move them into outDir
-  return gulp
-    .src(
-      TRANSLATION_FRAGMENTS.map(
-        (fragment) => workDir + "/" + fragment + "/*.json"
-      ).concat(coreDir + "/*.json"),
-      { base: workDir }
-    )
-    .pipe(
-      transform(function(data) {
-        // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
-    )
-    .pipe(minify())
-    .pipe(
-      rename((filePath) => {
-        if (filePath.dirname === "core") {
-          filePath.dirname = "";
-        }
-      })
-    )
-    .pipe(gulp.dest(outDir));
-});
-
-const fingerprints = {};
-
+taskName = "build-flattened-translations";
 gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
-    for (let i = 0; i < files.length; i++) {
-      fingerprints[files[i].split(".")[0]] = {
-        // In dev we create fake hashes
-        hash: env.isProdBuild
-          ? crypto
-              .createHash("md5")
-              .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
-              .digest("hex")
-          : "dev",
-      };
-    }
-
-    mapFiles(outDir, ".json", (filename) => {
-      const parsed = path.parse(filename);
-
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
-      }
-
-      fs.renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
-  }
+  taskName,
+  gulp.series(...splitTasks, function() {
+    // Flatten the split versions of our translations, and move them into outDir
+    return gulp
+      .src(
+        TRANSLATION_FRAGMENTS.map(
+          (fragment) => workDir + "/" + fragment + "/*.json"
+        ).concat(coreDir + "/*.json"),
+        { base: workDir }
+      )
+      .pipe(
+        transform(function(data) {
+          // Polymer.AppLocalizeBehavior requires flattened json
+          return flatten(data);
+        })
+      )
+      .pipe(minify())
+      .pipe(hashFilename())
+      .pipe(
+        rename((filePath) => {
+          if (filePath.dirname === "core") {
+            filePath.dirname = "";
+          }
+        })
+      )
+      .pipe(gulp.dest(outDir));
+  })
 );
+tasks.push(taskName);
 
+taskName = "build-translation-fingerprints";
 gulp.task(
-  "build-translations",
-  gulp.series(
-    "clean-translations",
-    "ensure-translations-build-dir",
-    env.isProdBuild ? (done) => done() : "create-test-translation",
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations",
-    "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .pipe(
-          transform(function(data) {
-            const newData = {};
-            Object.entries(data).forEach(([key, value]) => {
-              // Filter out translations without native name.
-              if (data[key].nativeName) {
-                newData[key] = data[key];
-              } else {
-                console.warn(
-                  `Skipping language ${key}. Native name was not translated.`
-                );
-              }
-              if (data[key]) newData[key] = value;
-            });
-            return newData;
-          })
-        )
-        .pipe(
-          transform((data) => ({
-            fragments: TRANSLATION_FRAGMENTS,
-            translations: data,
-          }))
-        )
-        .pipe(rename("translationMetadata.json"))
-        .pipe(gulp.dest(workDir));
-    }
-  )
+  taskName,
+  gulp.series("build-flattened-translations", function() {
+    return gulp
+      .src(outDir + "/**/*.json")
+      .pipe(
+        rename({
+          extname: "",
+        })
+      )
+      .pipe(
+        hash({
+          algorithm: "md5",
+          hashLength: 32,
+          template: "<%= name %>.json",
+        })
+      )
+      .pipe(hash.manifest("translationFingerprints.json"))
+      .pipe(
+        transform(function(data) {
+          // After generating fingerprints of our translation files, consolidate
+          // all translation fragment fingerprints under the translation name key
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            const [path, _md5] = key.rsplit("-", 1);
+            // let translation = key;
+            let translation = path;
+            const parts = translation.split("/");
+            if (parts.length === 2) {
+              translation = parts[1];
+            }
+            if (!(translation in newData)) {
+              newData[translation] = {
+                fingerprints: {},
+              };
+            }
+            newData[translation].fingerprints[path] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(gulp.dest(workDir));
+  })
 );
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-translation-fingerprints", function() {
+    return gulp
+      .src(
+        [
+          "src/translations/translationMetadata.json",
+          workDir + "/testMetadata.json",
+          workDir + "/translationFingerprints.json",
+        ],
+        { allowEmpty: true }
+      )
+      .pipe(merge({}))
+      .pipe(
+        transform(function(data) {
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            // Filter out translations without native name.
+            if (data[key].nativeName) {
+              newData[key] = data[key];
+            } else {
+              console.warn(
+                `Skipping language ${key}. Native name was not translated.`
+              );
+            }
+            if (data[key]) newData[key] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(
+        transform((data) => ({
+          fragments: TRANSLATION_FRAGMENTS,
+          translations: data,
+        }))
+      )
+      .pipe(rename("translationMetadata.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/webpack.js

@@ -3,7 +3,6 @@ const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
-const path = require("path");
 const paths = require("../paths");
 const {
   createAppConfig,
@@ -58,14 +57,10 @@ const handler = (done) => (err, stats) => {
 
 gulp.task("webpack-watch-app", () => {
   // we are not calling done, so this command will run forever
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/ },
+  webpack(bothBuilds(createAppConfig, { isProdBuild: false })).watch(
+    {},
     handler()
   );
-  gulp.watch(
-    path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
-  );
 });
 
 gulp.task(

build-scripts/paths.js

@@ -29,6 +29,4 @@ module.exports = {
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_root: path.resolve(__dirname, "../hassio/build"),
   hassio_publicPath: "/api/hassio/app/",
-
-  translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/util.js

@@ -1,16 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-
-// Helper function to map recursively over files in a folder and it's subfolders
-module.exports.mapFiles = function mapFiles(startPath, filter, mapFunc) {
-  const files = fs.readdirSync(startPath);
-  for (let i = 0; i < files.length; i++) {
-    const filename = path.join(startPath, files[i]);
-    const stat = fs.lstatSync(filename);
-    if (stat.isDirectory()) {
-      mapFiles(filename, filter, mapFunc);
-    } else if (filename.indexOf(filter) >= 0) {
-      mapFunc(filename);
-    }
-  }
-};

build-scripts/webpack.js

@@ -22,11 +22,7 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
-  dontHash,
 }) => {
-  if (!dontHash) {
-    dontHash = new Set();
-  }
   return {
     mode: isProdBuild ? "production" : "development",
     devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
@@ -107,6 +103,8 @@ const createWebpackConfig = ({
     },
     output: {
       filename: ({ chunk }) => {
+        const dontHash = new Set();
+
         if (!isProdBuild || dontHash.has(chunk.name)) {
           return `${chunk.name}.js`;
         }
@@ -148,17 +146,11 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     // Create an object mapping browser urls to their paths during build
     const translationMetadata = require("../build-translations/translationMetadata.json");
     const workBoxTranslationsTemplatedURLs = {};
-    const englishFilename = `en-${translationMetadata.translations.en.hash}.json`;
-
-    // core
-    workBoxTranslationsTemplatedURLs[
-      `/static/translations/${englishFilename}`
-    ] = `build-translations/output/${englishFilename}`;
-
-    Object.keys(translationMetadata.fragments).forEach((fragment) => {
+    const englishFP = translationMetadata.translations.en.fingerprints;
+    Object.keys(englishFP).forEach((key) => {
       workBoxTranslationsTemplatedURLs[
-        `/static/translations/${fragment}/${englishFilename}`
-      ] = `build-translations/output/${fragment}/${englishFilename}`;
+        `/static/translations/${englishFP[key]}`
+      ] = `build-translations/output/${key}.json`;
     });
 
     config.plugins.push(
@@ -230,12 +222,11 @@ const createHassioConfig = ({ isProdBuild, latestBuild }) => {
   }
   const config = createWebpackConfig({
     entry: {
-      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.js"),
     },
     outputRoot: "",
     isProdBuild,
     latestBuild,
-    dontHash: new Set(["entrypoint"]),
   });
 
   config.output.path = paths.hassio_root;

cast/src/launcher/layout/hc-cast.ts

@@ -26,12 +26,10 @@ import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   LovelaceConfig,
   getLovelaceCollection,
-  getLegacyLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import "./hc-layout";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import { atLeastVersion } from "../../../../src/common/config/version";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -41,7 +39,7 @@ class HcCast extends LitElement {
   @property() private askWrite = false;
   @property() private lovelaceConfig?: LovelaceConfig | null;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this.lovelaceConfig === undefined) {
       return html`
         <loading-screen></loading-screen>>
@@ -135,9 +133,7 @@ class HcCast extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
-    const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
-      ? getLovelaceCollection(this.connection)
-      : getLegacyLovelaceCollection(this.connection);
+    const llColl = getLovelaceCollection(this.connection);
     // We first do a single refresh because we need to check if there is LL
     // configuration.
     llColl.refresh().then(

cast/src/launcher/layout/hc-connect.ts

@@ -70,7 +70,7 @@ export class HcConnect extends LitElement {
   @property() private castManager?: CastManager | null;
   private openDemo = false;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this.cannotConnect) {
       const tokens = loadTokens();
       return html`

cast/src/launcher/layout/hc-layout.ts

@@ -22,7 +22,7 @@ class HcLayout extends LitElement {
   @property() public connection?: Connection;
   @property() public user?: HassUser;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <ha-card>
         <div class="layout">
@@ -50,12 +50,13 @@ class HcLayout extends LitElement {
         </div>
       </ha-card>
       <div class="footer">
-        <a href="./faq.html">Frequently Asked Questions</a> – Found a bug?
-        <a
+        <a href="./faq.html">Frequently Asked Questions</a> – Found a bug? Let
+        @balloob know
+        <!-- <a
           href="https://github.com/home-assistant/home-assistant-polymer/issues"
           target="_blank"
           >Let us know!</a
-        >
+        > -->
       </div>
     `;
   }

cast/src/receiver/layout/hc-demo.ts

@@ -16,7 +16,7 @@ class HcDemo extends HassElement {
   @property() public lovelacePath!: string;
   @property() private _lovelaceConfig?: LovelaceConfig;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (!this._lovelaceConfig) {
       return html``;
     }

cast/src/receiver/layout/hc-launch-screen.ts

@@ -14,7 +14,7 @@ class HcLaunchScreen extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public error?: string;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <div class="container">
         <img

cast/src/receiver/layout/hc-lovelace.ts

@@ -22,7 +22,7 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     const index = this._viewIndex;
     if (index === undefined) {
       return html`

cast/src/receiver/layout/hc-main.ts

@@ -15,9 +15,6 @@ import {
 import {
   LovelaceConfig,
   getLovelaceCollection,
-  fetchResources,
-  LegacyLovelaceConfig,
-  getLegacyLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import "./hc-launch-screen";
 import { castContext } from "../cast_context";
@@ -25,9 +22,6 @@ import { CAST_NS } from "../../../../src/cast/const";
 import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
-import { atLeastVersion } from "../../../../src/common/config/version";
-
-let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
@@ -40,7 +34,6 @@ export class HcMain extends HassElement {
   @property() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
-  private _urlPath?: string | null;
 
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
@@ -57,7 +50,7 @@ export class HcMain extends HassElement {
     }
   }
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this._showDemo) {
       return html`
         <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo>
@@ -115,7 +108,6 @@ export class HcMain extends HassElement {
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
       status.lovelacePath = this._lovelacePath!;
-      status.urlPath = this._urlPath;
     }
 
     if (senderId) {
@@ -171,14 +163,8 @@ export class HcMain extends HassElement {
       this._error = "Cannot show Lovelace because we're not connected.";
       return;
     }
-    if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
-      this._urlPath = msg.urlPath;
-      if (this._unsubLovelace) {
-        this._unsubLovelace();
-      }
-      const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+    if (!this._unsubLovelace) {
+      const llColl = getLovelaceCollection(this.hass!.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -197,15 +183,6 @@ export class HcMain extends HassElement {
         );
       }
     }
-    if (!resourcesLoaded) {
-      resourcesLoaded = true;
-      const resources = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? await fetchResources(this.hass!.connection)
-        : (this._lovelaceConfig as LegacyLovelaceConfig).resources;
-      if (resources) {
-        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
-      }
-    }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
     if (castContext.getDeviceCapabilities().touch_input_supported) {
@@ -217,6 +194,12 @@ export class HcMain extends HassElement {
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
     castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;
+    if (lovelaceConfig.resources) {
+      loadLovelaceResources(
+        lovelaceConfig.resources,
+        this.hass!.auth.data.hassUrl
+      );
+    }
   }
 
   private _handleShowDemo(_msg: ShowDemoMessage) {

demo/src/configs/arsaboo/entities.ts

@@ -291,7 +291,16 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "13:21",
       attributes: {
         attribution: "Data provided by Ring.com",
+        device_id: "e04f434dca02",
+        firmware: "Up to Date",
+        kind: "lpd_v2",
+        timezone: "America/New_York",
+        type: "doorbots",
+        wifi_name: "RingOfSecurity-hUrGKNlhR",
+        created_at: "2019-01-22T13:21:03-05:00",
         answered: false,
+        recording_status: "ready",
+        category: "motion",
         friendly_name: "Front Door Last Motion",
         icon: "hademo:history",
       },
@@ -304,7 +313,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "cbd8dfac9efb441f19168e271cb8629b0372d0c1f721353394b23ed0202013b0",
         motion_detection: true,
         friendly_name: "Patio",
-        entity_picture: "/assets/arsaboo/images/camera.patio.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.patio?token=cbd8dfac9efb441f19168e271cb8629b0372d0c1f721353394b23ed0202013b0",
         supported_features: 0,
       },
     },
@@ -316,7 +326,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "479b332e0a7cad4c58e0fb98a1ecb7942e3b225190adb93a1341edfa7daf45b0",
         motion_detection: true,
         friendly_name: "Porch",
-        entity_picture: "/assets/arsaboo/images/camera.porch.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.porch?token=479b332e0a7cad4c58e0fb98a1ecb7942e3b225190adb93a1341edfa7daf45b0",
         supported_features: 0,
       },
     },
@@ -328,7 +339,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "9381b2e4edd1bb21e868e2193f5d132a5fae153ce4f458451d979a02712b4642",
         motion_detection: true,
         friendly_name: "Backyard",
-        entity_picture: "/assets/arsaboo/images/camera.backyard.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.backyard?token=9381b2e4edd1bb21e868e2193f5d132a5fae153ce4f458451d979a02712b4642",
         supported_features: 0,
       },
     },
@@ -340,7 +352,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "ac38bf88c2c5896eed66ae15739a3e726677f92d79e0d57f83f726ac28bda746",
         motion_detection: true,
         friendly_name: "Driveway",
-        entity_picture: "/assets/arsaboo/images/camera.driveway.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.driveway?token=ac38bf88c2c5896eed66ae15739a3e726677f92d79e0d57f83f726ac28bda746",
         supported_features: 0,
       },
     },
@@ -464,7 +477,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         friendly_name: localize(
           "ui.panel.page-demo.config.arsaboo.names.family_room"
         ),
-        entity_picture: "/assets/arsaboo/images/media_player_family_room.jpg",
+        entity_picture:
+          "/api/media_player_proxy/media_player.family_room_2?token=be41a86e2a360761d67c36a010b09654b730deec092016ee92aafef79b1978ff&cache=e03d22fb103202e7",
         supported_features: 64063,
       },
     },
@@ -473,7 +487,16 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "06:44",
       attributes: {
         attribution: "Data provided by Ring.com",
+        device_id: "e04f434dca02",
+        firmware: "Up to Date",
+        kind: "lpd_v2",
+        timezone: "America/New_York",
+        type: "doorbots",
+        wifi_name: "RingOfSecurity-hUrGKNlhR",
+        created_at: "2019-01-22T06:44:31-05:00",
         answered: false,
+        recording_status: "ready",
+        category: "ding",
         friendly_name: "Front Door Last Ding",
         icon: "hademo:history",
       },

demo/src/configs/teachingbirds/lovelace.ts

@@ -395,7 +395,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           cards: [
             {
               entity: "script.air_cleaner_quiet",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -408,7 +408,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.air_cleaner_auto",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -421,7 +421,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.air_cleaner_turbo",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -434,7 +434,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.ac_off",
-              type: "button",
+              type: "entity-button",
               name: "AC",
               tap_action: {
                 action: "call-service",
@@ -447,7 +447,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.ac_on",
-              type: "button",
+              type: "entity-button",
               name: "AC",
               tap_action: {
                 action: "call-service",
@@ -658,7 +658,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     action: "call-service",
                     service: "script.goodnight",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:weather-night",
                 },
                 {
@@ -670,7 +670,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "scene.turn_on",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:coffee-outline",
                 },
                 {
@@ -682,7 +682,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "scene.turn_on",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:television-classic",
                 },
               ],
@@ -743,7 +743,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "light.toggle",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:page-layout-footer",
                 },
                 {
@@ -755,7 +755,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "light.toggle",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:page-layout-header",
                 },
               ],

demo/src/custom-cards/cast-demo-row.ts

@@ -10,7 +10,7 @@ import {
 
 import "../../../src/components/ha-icon";
 import {
-  LovelaceRow,
+  EntityRow,
   CastConfig,
 } from "../../../src/panels/lovelace/entity-rows/types";
 import { HomeAssistant } from "../../../src/types";
@@ -18,7 +18,7 @@ import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
 
 @customElement("cast-demo-row")
-class CastDemoRow extends LitElement implements LovelaceRow {
+class CastDemoRow extends LitElement implements EntityRow {
   public hass!: HomeAssistant;
 
   @property() private _castManager?: CastManager | null;
@@ -27,7 +27,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     // No config possible.
   }
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (
       !this._castManager ||
       this._castManager.castState === "NO_DEVICES_AVAILABLE"

gallery/src/components/demo-card.js

@@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { safeLoad } from "js-yaml";
 
-import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
+import { createCardElement } from "../../../src/panels/lovelace/common/create-card-element";
 
 class DemoCard extends PolymerElement {
   static get template() {

gallery/src/data/media_players.ts

@@ -1,62 +0,0 @@
-import { getEntity } from "../../../src/fake_data/entity";
-
-export const createMediaPlayerEntities = () => [
-  getEntity("media_player", "bedroom", "playing", {
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    friendly_name: "Skip, no pause",
-    supported_features: 32,
-  }),
-  getEntity("media_player", "family_room", "paused", {
-    friendly_name: "Paused, music",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 16417,
-    entity_picture: "/images/album_cover.jpg",
-  }),
-  getEntity("media_player", "family_room_no_play", "paused", {
-    friendly_name: "Paused, no play",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 33,
-  }),
-  getEntity("media_player", "living_room", "playing", {
-    friendly_name: "Pause, No skip, tvshow",
-    media_content_type: "tvshow",
-    media_title: "Chapter 1",
-    media_series_title: "House of Cards",
-    app_name: "Netflix",
-    supported_features: 1,
-  }),
-  getEntity("media_player", "lounge_room", "idle", {
-    friendly_name: "Screen casting",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 1,
-  }),
-  getEntity("media_player", "theater", "off", {
-    friendly_name: "Chromcast Idle",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 33,
-  }),
-  getEntity("media_player", "android_cast", "playing", {
-    friendly_name: "Player Off",
-    media_title: "Android Screen Casting",
-    app_name: "Screen Mirroring",
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "unavailable", "unavailable", {
-    friendly_name: "Player Unavailable",
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "unknown", "unknown", {
-    friendly_name: "Player Unknown",
-    supported_features: 21437,
-  }),
-];

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -15,14 +15,14 @@ const CONFIGS = [
   {
     heading: "Basic example",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
     `,
   },
   {
     heading: "With Name",
     config: `
-- type: button
+- type: entity-button
   name: Bedroom
   entity: light.bed_light
     `,
@@ -30,7 +30,7 @@ const CONFIGS = [
   {
     heading: "With Icon",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   icon: mdi:hotel
     `,
@@ -38,7 +38,7 @@ const CONFIGS = [
   {
     heading: "Without State",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   show_state: false
     `,
@@ -46,7 +46,7 @@ const CONFIGS = [
   {
     heading: "Custom Tap Action (toggle)",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   tap_action: 
     action: toggle
@@ -55,7 +55,7 @@ const CONFIGS = [
   {
     heading: "Running Service",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   service: light.toggle
     `,
@@ -63,13 +63,13 @@ const CONFIGS = [
   {
     heading: "Invalid Entity",
     config: `
-- type: button
+- type: entity-button
   entity: sensor.invalid_entity
     `,
   },
 ];
 
-class DemoButtonEntity extends PolymerElement {
+class DemoEntityButtonEntity extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
@@ -97,4 +97,4 @@ class DemoButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-button-card", DemoButtonEntity);
+customElements.define("demo-hui-entity-button-card", DemoEntityButtonEntity);

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,102 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import "../components/demo-cards";
-import { createMediaPlayerEntities } from "../data/media_players";
-
-const CONFIGS = [
-  {
-    heading: "Skip, no pause",
-    config: `
-  - type: media-control
-    entity: media_player.bedroom
-    `,
-  },
-  {
-    heading: "Paused, music",
-    config: `
-  - type: media-control
-    entity: media_player.family_room
-    `,
-  },
-  {
-    heading: "Paused, no play",
-    config: `
-  - type: media-control
-    entity: media_player.family_room_no_play
-    `,
-  },
-  {
-    heading: "Pause, No skip, tvshow",
-    config: `
-  - type: media-control
-    entity: media_player.living_room
-    `,
-  },
-  {
-    heading: "Screen casting",
-    config: `
-  - type: media-control
-    entity: media_player.android_cast
-    `,
-  },
-  {
-    heading: "Chromcast Idle",
-    config: `
-  - type: media-control
-    entity: media_player.lounge_room
-    `,
-  },
-  {
-    heading: "Player Off",
-    config: `
-  - type: media-control
-    entity: media_player.theater
-    `,
-  },
-  {
-    heading: "Player Unavailable",
-    config: `
-  - type: media-control
-    entity: media_player.unavailable
-    `,
-  },
-  {
-    heading: "Player Unknown",
-    config: `
-  - type: media-control
-    entity: media_player.unknown
-    `,
-  },
-];
-
-class DemoHuiMediControlCard extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
-    hass.addEntities(createMediaPlayerEntities());
-  }
-}
-
-customElements.define("demo-hui-media-control-card", DemoHuiMediControlCard);

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,9 +1,54 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
-import { createMediaPlayerEntities } from "../data/media_players";
+
+const ENTITIES = [
+  getEntity("media_player", "bedroom", "playing", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 32,
+  }),
+  getEntity("media_player", "family_room", "paused", {
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 16417,
+  }),
+  getEntity("media_player", "family_room_no_play", "paused", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "living_room", "playing", {
+    media_content_type: "tvshow",
+    media_title: "Chapter 1",
+    media_series_title: "House of Cards",
+    app_name: "Netflix",
+    supported_features: 1,
+  }),
+  getEntity("media_player", "lounge_room", "idle", {
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 1,
+  }),
+  getEntity("media_player", "theater", "off", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "android_cast", "playing", {
+    media_title: "Android Screen Casting",
+    app_name: "Screen Mirroring",
+    supported_features: 21437,
+  }),
+];
 
 const CONFIGS = [
   {
@@ -24,11 +69,7 @@ const CONFIGS = [
     - entity: media_player.lounge_room
       name: Chromcast Idle
     - entity: media_player.theater
-      name: Player Off
-    - entity: media_player.unavailable
-      name: Player Unavailable
-    - entity: media_player.unknown
-      name: Player Unknown
+      name: 'Player Off'
     `,
   },
 ];
@@ -57,7 +98,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
-    hass.addEntities(createMediaPlayerEntities());
+    hass.addEntities(ENTITIES);
   }
 }
 

gallery/src/demos/demo-util-long-press.ts

@@ -6,7 +6,7 @@ import { actionHandler } from "../../../src/panels/lovelace/common/directives/ac
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 
 export class DemoUtilLongPress extends LitElement {
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       ${this.renderStyle()}
       ${[1, 2, 3].map(

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

@@ -15,10 +15,9 @@ import { HomeAssistant } from "../../../src/types";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
-} from "../../../src/data/hassio/addon";
+} from "../../../src/data/hassio";
 import { navigate } from "../../../src/common/navigate";
 import { filterAndSort } from "../components/hassio-filter-addons";
-import { atLeastVersion } from "../../../src/common/config/version";
 
 class HassioAddonRepositoryEl extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -37,87 +36,81 @@ class HassioAddonRepositoryEl extends LitElement {
     }
   );
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     const repo = this.repo;
     const addons = this._getAddons(this.addons, this.filter);
 
     if (this.filter && addons.length < 1) {
       return html`
-        <div class="content">
-          <p class="description">
-            No results found in "${repo.name}"
-          </p>
+        <div class="card-group">
+          <div class="title">
+            <div class="description">
+              No results found in "${repo.name}"
+            </div>
+          </div>
         </div>
       `;
     }
     return html`
-      <div class="content">
-        <h1>
+      <div class="card-group">
+        <div class="title">
           ${repo.name}
-        </h1>
-        <p class="description">
-          Maintained by ${repo.maintainer}<br />
-          <a class="repo" href=${repo.url} target="_blank" rel="noreferrer">
-            ${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=${atLeastVersion(
-                      this.hass.connection.haVersion,
-                      0,
-                      105
-                    ) && 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 class="description">
+            Maintained by ${repo.maintainer}<br />
+            <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
+          </div>
         </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 _addonTapped(ev) {
+  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}`);
   }
 

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

@@ -14,7 +14,7 @@ import {
   HassioAddonInfo,
   fetchHassioAddonsInfo,
   reloadHassioAddons,
-} from "../../../src/data/hassio/addon";
+} from "../../../src/data/hassio";
 import "../../../src/layouts/loading-screen";
 import "../components/hassio-search-input";
 
@@ -48,7 +48,7 @@ class HassioAddonStore extends LitElement {
     await this._loadData();
   }
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (!this._addons || !this._repos) {
       return html`
         <loading-screen></loading-screen>

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

@@ -17,7 +17,7 @@ import "../../../src/components/buttons/ha-call-api-button";
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
 import { HomeAssistant } from "../../../src/types";
-import { HassioAddonRepository } from "../../../src/data/hassio/addon";
+import { HassioAddonRepository } from "../../../src/data/hassio";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { repeat } from "lit-html/directives/repeat";
 
@@ -33,66 +33,64 @@ class HassioRepositoriesEditor extends LitElement {
       .sort((a, b) => (a.name < b.name ? -1 : 1))
   );
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     const repos = this._sortedRepos(this.repos);
     return html`
-      <div class="content">
-        <h1>
+      <div class="card-group">
+        <div class="title">
           Repositories
-        </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>
+          <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>
+          `
+        )}
+
+        <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>
     `;
   }

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

@@ -0,0 +1,138 @@
+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`
+      <style include="ha-style">
+        :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;
+        }
+      </style>
+      <paper-card heading="Audio">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
+          </template>
+
+          <paper-dropdown-menu label="Input">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedInput}}"
+            >
+              <template is="dom-repeat" items="[[inputDevices]]">
+                <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <paper-dropdown-menu label="Output">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedOutput}}"
+            >
+              <template is="dom-repeat" items="[[outputDevices]]">
+                <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+        <div class="card-actions">
+          <mwc-button on-click="_saveSettings">Save</mwc-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  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);

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

@@ -1,193 +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 {
-  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`
-      <paper-card heading="Audio">
-        <div class="card-content">
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-
-          <paper-dropdown-menu
-            label="Input"
-            @iron-select=${this._setInputDevice}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedInput}
-            >
-              ${this._inputDevices &&
-                this._inputDevices.map((item) => {
-                  return html`
-                    <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
-                    >
-                  `;
-                })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu
-            label="Output"
-            @iron-select=${this._setOutputDevice}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedOutput}
-            >
-              ${this._outputDevices &&
-                this._outputDevices.map((item) => {
-                  return html`
-                    <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
-                    >
-                  `;
-                })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-        <div class="card-actions">
-          <mwc-button @click=${this._saveSettings}>Save</mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  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.item.getAttribute("device");
-    this._selectedInput = device;
-  }
-
-  private _setOutputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
-    this._selectedOutput = device;
-  }
-
-  private async _addonChanged(): Promise<void> {
-    this._selectedInput =
-      this.addon.audio_input === null ? "default" : this.addon.audio_input;
-    this._selectedOutput =
-      this.addon.audio_output === null ? "default" : this.addon.audio_output;
-    if (this._outputDevices) {
-      return;
-    }
-
-    const noDevice: HassioHardwareAudioDevice = {
-      device: "default",
-      name: "Default",
-    };
-
-    try {
-      const { audio } = await fetchHassioHardwareAudio(this.hass);
-      const input = 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, ...input];
-      this._outputDevices = [noDevice, ...output];
-    } catch {
-      this._error = "Failed to fetch audio hardware";
-      this._inputDevices = [noDevice];
-      this._outputDevices = [noDevice];
-    }
-  }
-
-  private async _saveSettings(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      audio_input:
-        this._selectedInput === "default" ? null : this._selectedInput,
-      audio_output:
-        this._selectedOutput === "default" ? null : this._selectedOutput,
-    };
-    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;
-  }
-}

hassio/src/addon-view/hassio-addon-config.js

@@ -0,0 +1,111 @@
+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`
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+        }
+        .card-actions {
+          @apply --layout;
+          @apply --layout-justified;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-bottom: 16px;
+        }
+        iron-autogrow-textarea {
+          width: 100%;
+          font-family: monospace;
+        }
+        .syntaxerror {
+          color: var(--google-red-500);
+        }
+      </style>
+      <paper-card heading="Config">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
+          </template>
+          <iron-autogrow-textarea
+            id="config"
+            value="{{config}}"
+          ></iron-autogrow-textarea>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
+          <mwc-button on-click="saveTapped" disabled="[[!configParsed]]"
+            >Save</mwc-button
+          >
+        </div>
+      </paper-card>
+    `;
+  }
+
+  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);

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

@@ -1,179 +0,0 @@
-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,
-  query,
-} 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 { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-yaml-editor";
-// tslint:disable-next-line: no-duplicate-imports
-import { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
-
-@customElement("hassio-addon-config")
-class HassioAddonConfig extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public addon!: HassioAddonDetails;
-  @property() private _error?: string;
-  @property({ type: Boolean }) private _configHasChanged = false;
-
-  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
-
-  protected render(): TemplateResult {
-    const editor = this._editor;
-    // If editor not rendered, don't show the error.
-    const valid = editor ? editor.isValid : true;
-
-    return html`
-      <paper-card heading="Config">
-        <div class="card-content">
-          <ha-yaml-editor
-            @value-changed=${this._configChanged}
-          ></ha-yaml-editor>
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-          ${valid
-            ? ""
-            : html`
-                <div class="errors">Invalid YAML</div>
-              `}
-        </div>
-        <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </mwc-button>
-          <mwc-button
-            @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !valid}
-          >
-            Save
-          </mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  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-top: 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._editor.setValue(this.addon.options);
-    }
-  }
-
-  private _configChanged(): void {
-    this._configHasChanged = true;
-    this.requestUpdate();
-  }
-
-  private async _resetTapped(): Promise<void> {
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to reset all your options?",
-      confirmText: "reset options",
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    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<void> {
-    let data: HassioAddonSetOptionParams;
-    this._error = undefined;
-    try {
-      data = {
-        options: this._editor.value,
-      };
-    } 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;
-  }
-}

hassio/src/addon-view/hassio-addon-info.js

@@ -0,0 +1,624 @@
+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`
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+          margin-bottom: 16px;
+        }
+        paper-card.warning {
+          background-color: var(--google-red-500);
+          color: white;
+          --paper-card-header-color: white;
+        }
+        paper-card.warning mwc-button {
+          color: white !important;
+        }
+        .warning {
+          color: var(--google-red-500);
+        }
+        .addon-header {
+          @apply --paper-font-headline;
+        }
+        .light-color {
+          color: var(--secondary-text-color);
+        }
+        .addon-version {
+          float: right;
+          font-size: 15px;
+          vertical-align: middle;
+        }
+        .description {
+          margin-bottom: 16px;
+        }
+        .logo img {
+          max-height: 60px;
+          margin: 16px 0;
+          display: block;
+        }
+        .state {
+          display: flex;
+          margin: 8px 0;
+        }
+        .state div {
+          width: 180px;
+          display: inline-block;
+        }
+        .state iron-icon {
+          width: 16px;
+          color: var(--secondary-text-color);
+        }
+        ha-switch {
+          display: inline;
+        }
+        iron-icon.running {
+          color: var(--paper-green-400);
+        }
+        iron-icon.stopped {
+          color: var(--google-red-300);
+        }
+        ha-call-api-button {
+          font-weight: 500;
+          color: var(--primary-color);
+        }
+        .right {
+          float: right;
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        .red {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
+        .blue {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
+        .green {
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
+        }
+        .yellow {
+          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        }
+        .security {
+          margin-bottom: 16px;
+        }
+        .security h3 {
+          margin-bottom: 8px;
+          font-weight: normal;
+        }
+        .security ha-label-badge {
+          cursor: pointer;
+          margin-right: 4px;
+          --iron-icon-height: 45px;
+        }
+        .protection-enable mwc-button {
+          --mdc-theme-primary: white;
+        }
+        .description a, ha-markdown a {
+          color: var(--primary-color);
+        }
+      </style>
+
+      <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
+        <paper-card heading="Update available! 🎉">
+          <div class="card-content">
+            <hassio-card-content
+              hass="[[hass]]"
+              title="[[addon.name]] [[addon.last_version]] is available"
+              description="You are currently running version [[addon.version]]"
+              icon="hassio:arrow-up-bold-circle"
+              icon-class="update"
+            ></hassio-card-content>
+            <template is="dom-if" if="[[!addon.available]]">
+              <p>This update is no longer compatible with your system.</p>
+            </template>
+          </div>
+          <div class="card-actions">
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/update"
+              disabled="[[!addon.available]]"
+              >
+              Update
+              </ha-call-api-button
+            >
+            <template is="dom-if" if="[[addon.changelog]]">
+              <mwc-button on-click="openChangelog">Changelog</mwc-button>
+            </template>
+          </div>
+        </paper-card>
+      </template>
+
+      <template is="dom-if" if="[[!addon.protected]]">
+        <paper-card heading="Warning: Protection mode is disabled!" class="warning">
+          <div class="card-content">
+            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.
+          </div>
+          <div class="card-actions protection-enable">
+              <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
+            </div>
+          </div>
+        </paper-card>
+      </template>
+
+      <paper-card>
+        <div class="card-content">
+          <div class="addon-header">
+            [[addon.name]]
+            <div class="addon-version light-color">
+              <template is="dom-if" if="[[addon.version]]">
+                [[addon.version]]
+                <template is="dom-if" if="[[isRunning]]">
+                  <iron-icon
+                    title="Add-on is running"
+                    class="running"
+                    icon="hassio:circle"
+                  ></iron-icon>
+                </template>
+                <template is="dom-if" if="[[!isRunning]]">
+                  <iron-icon
+                    title="Add-on is stopped"
+                    class="stopped"
+                    icon="hassio:circle"
+                  ></iron-icon>
+                </template>
+              </template>
+              <template is="dom-if" if="[[!addon.version]]">
+                [[addon.last_version]]
+              </template>
+            </div>
+          </div>
+          <div class="description light-color">
+            [[addon.description]].<br />
+            Visit
+            <a href="[[addon.url]]" target="_blank">[[addon.name]] page</a> for
+            details.
+          </div>
+          <template is="dom-if" if="[[addon.logo]]">
+            <a href="[[addon.url]]" target="_blank" class="logo">
+              <img src="/api/hassio/addons/[[addonSlug]]/logo" />
+            </a>
+          </template>
+          <div class="security">
+              <ha-label-badge
+                class$="[[computeSecurityClassName(addon.rating)]]"
+                on-click="showMoreInfo"
+                id="rating"
+                value="[[addon.rating]]"
+                label="rating"
+                description=""
+              ></ha-label-badge>
+              <template is="dom-if" if="[[addon.host_network]]">
+                <ha-label-badge
+                on-click="showMoreInfo"
+                id="host_network"
+                icon="hassio:network"
+                label="host"
+                description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.full_access]]">
+                <ha-label-badge
+                on-click="showMoreInfo"
+                id="full_access"
+                icon="hassio:chip"
+                label="hardware"
+                description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.homeassistant_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="homeassistant_api"
+                  icon="hassio:home-assistant"
+                  label="hass"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[computeHassioApi(addon)]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="hassio_api"
+                  icon="hassio:home-assistant"
+                  label="hassio"
+                  description="[[addon.hassio_role]]"
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.docker_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="docker_api"
+                  icon="hassio:docker"
+                  label="docker"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.host_pid]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="host_pid"
+                  icon="hassio:pound"
+                  label="host pid"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.apparmor]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  class$="[[computeApparmorClassName(addon.apparmor)]]"
+                  id="apparmor"
+                  icon="hassio:shield"
+                  label="apparmor"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.auth_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="auth_api"
+                  icon="hassio:key"
+                  label="auth"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.ingress]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="ingress"
+                  icon="hassio:cursor-default-click-outline"
+                  label="ingress"
+                  description=""
+                ></ha-label-badge>
+              </template>
+          </div>
+          <template is="dom-if" if="[[addon.version]]">
+            <div class="state">
+              <div>Start on boot</div>
+              <ha-switch
+                on-change="startOnBootToggled"
+                checked="[[computeStartOnBoot(addon.boot)]]"
+              ></ha-switch>
+            </div>
+            <div class="state">
+              <div>Auto update</div>
+              <ha-switch
+                on-change="autoUpdateToggled"
+                checked="[[addon.auto_update]]"
+              ></ha-switch>
+            </div>
+            <template is="dom-if" if="[[addon.ingress]]">
+              <div class="state">
+                <div>Show in sidebar</div>
+                <ha-switch
+                  on-change="panelToggled"
+                  checked="[[addon.ingress_panel]]"
+                  disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
+                ></ha-switch>
+                <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
+                  <span>This option requires Home Assistant 0.92 or later.</span>
+                </template>
+              </div>
+            </template>
+            <template is="dom-if" if="[[_computeUsesProtectedOptions(addon)]]">
+              <div class="state">
+                <div>
+                  Protection mode
+                  <span>
+                    <iron-icon icon="hassio:information"></iron-icon>
+                    <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
+                  </span>
+                </div>
+                <ha-switch
+                  on-change="protectionToggled"
+                  checked="[[addon.protected]]"
+                ></ha-switch>
+              </div>
+            </template>
+          </template>
+        </div>
+        <div class="card-actions">
+          <template is="dom-if" if="[[addon.version]]">
+            <mwc-button class="warning" on-click="_unistallClicked"
+              >Uninstall</mwc-button
+            >
+            <template is="dom-if" if="[[addon.build]]">
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/rebuild"
+                >Rebuild</ha-call-api-button
+              >
+            </template>
+            <template is="dom-if" if="[[isRunning]]">
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/restart"
+                >Restart</ha-call-api-button
+              >
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/stop"
+                >Stop</ha-call-api-button
+              >
+            </template>
+            <template is="dom-if" if="[[!isRunning]]">
+              <ha-call-api-button
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/start"
+                >Start</ha-call-api-button
+              >
+            </template>
+            <template
+              is="dom-if"
+              if="[[computeShowWebUI(addon.ingress, addon.webui, isRunning)]]"
+            >
+              <a
+                href="[[pathWebui(addon.webui)]]"
+                tabindex="-1"
+                target="_blank"
+                class="right"
+                ><mwc-button>Open web UI</mwc-button></a
+              >
+            </template>
+            <template
+              is="dom-if"
+              if="[[computeShowIngressUI(addon.ingress, isRunning)]]"
+            >
+              <mwc-button
+                tabindex="-1"
+                class="right"
+                on-click="openIngress"
+              >Open web UI</mwc-button>
+            </template>
+          </template>
+          <template is="dom-if" if="[[!addon.version]]">
+            <template is="dom-if" if="[[!addon.available]]">
+              <p class="warning">This add-on is not available on your system.</p>
+            </template>
+            <ha-call-api-button
+              disabled="[[!addon.available]]"
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/install"
+              >Install</ha-call-api-button
+            >
+          </template>
+        </div>
+      </paper-card>
+      <template is="dom-if" if="[[addon.long_description]]">
+        <paper-card>
+          <div class="card-content">
+            <ha-markdown content="[[addon.long_description]]"></ha-markdown>
+          </div>
+        </paper-card>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addon: Object,
+      addonSlug: String,
+      isRunning: { type: Boolean, computed: "computeIsRunning(addon)" },
+    };
+  }
+
+  computeIsRunning(addon) {
+    return addon && addon.state === "started";
+  }
+
+  computeUpdateAvailable(addon) {
+    return (
+      addon &&
+      !addon.detached &&
+      addon.version &&
+      addon.version !== addon.last_version
+    );
+  }
+
+  computeHassioApi(addon) {
+    return (
+      addon.hassio_api &&
+      (addon.hassio_role === "manager" || addon.hassio_role === "admin")
+    );
+  }
+
+  computeApparmorClassName(apparmor) {
+    if (apparmor === "profile") {
+      return "green";
+    }
+    if (apparmor === "disable") {
+      return "red";
+    }
+    return "";
+  }
+
+  pathWebui(webui) {
+    return webui && webui.replace("[HOST]", document.location.hostname);
+  }
+
+  computeShowWebUI(ingress, webui, isRunning) {
+    return !ingress && webui && isRunning;
+  }
+
+  openIngress() {
+    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+  }
+
+  computeShowIngressUI(ingress, isRunning) {
+    return ingress && isRunning;
+  }
+
+  computeStartOnBoot(state) {
+    return state === "auto";
+  }
+
+  computeSecurityClassName(rating) {
+    if (rating > 4) {
+      return "green";
+    }
+    if (rating > 2) {
+      return "yellow";
+    }
+    return "red";
+  }
+
+  startOnBootToggled() {
+    const data = { boot: this.addon.boot === "auto" ? "manual" : "auto" };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
+  autoUpdateToggled() {
+    const data = { auto_update: !this.addon.auto_update };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
+  protectionToggled() {
+    const data = { protected: !this.addon.protected };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/security`, data);
+    this.set("addon.protected", !this.addon.protected);
+  }
+
+  panelToggled() {
+    const data = { ingress_panel: !this.addon.ingress_panel };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
+  showMoreInfo(e) {
+    const id = e.target.getAttribute("id");
+    showHassioMarkdownDialog(this, {
+      title: PERMIS_DESC[id].title,
+      content: PERMIS_DESC[id].description,
+    });
+  }
+
+  openChangelog() {
+    this.hass
+      .callApi("get", `hassio/addons/${this.addonSlug}/changelog`)
+      .then(
+        (resp) => resp,
+        () => "Error getting changelog"
+      )
+      .then((content) => {
+        showHassioMarkdownDialog(this, {
+          title: "Changelog",
+          content: content,
+        });
+      });
+  }
+
+  _unistallClicked() {
+    if (!confirm("Are you sure you want to uninstall this add-on?")) {
+      return;
+    }
+    const path = `hassio/addons/${this.addonSlug}/uninstall`;
+    const eventData = {
+      path: path,
+    };
+    this.hass
+      .callApi("post", path)
+      .then(
+        (resp) => {
+          eventData.success = true;
+          eventData.response = resp;
+        },
+        (resp) => {
+          eventData.success = false;
+          eventData.response = resp;
+        }
+      )
+      .then(() => {
+        this.fire("hass-api-called", eventData);
+      });
+  }
+
+  _computeCannotIngressSidebar(hass, addon) {
+    return !addon.ingress || !this._computeHA92plus(hass);
+  }
+
+  _computeUsesProtectedOptions(addon) {
+    return addon.docker_api || addon.full_access || addon.host_pid;
+  }
+
+  _computeHA92plus(hass) {
+    const [major, minor] = hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 92);
+  }
+}
+customElements.define("hassio-addon-info", HassioAddonInfo);

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

@@ -1,804 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-
-import "../../../src/components/buttons/ha-call-api-button";
-import "../../../src/components/buttons/ha-progress-button";
-import "../../../src/components/ha-label-badge";
-import "../../../src/components/ha-markdown";
-import "../../../src/components/ha-switch";
-import "../components/hassio-card-content";
-
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import {
-  HassioAddonDetails,
-  HassioAddonSetOptionParams,
-  HassioAddonSetSecurityParams,
-  setHassioAddonOption,
-  setHassioAddonSecurity,
-  uninstallHassioAddon,
-  installHassioAddon,
-  fetchHassioAddonChangelog,
-} from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import { navigate } from "../../../src/common/navigate";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import { atLeastVersion } from "../../../src/common/config/version";
-
-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.",
-  },
-};
-
-@customElement("hassio-addon-info")
-class HassioAddonInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public addon!: HassioAddonDetails;
-  @property() private _error?: string;
-  @property({ type: Boolean }) private _installing = false;
-
-  protected render(): TemplateResult {
-    return html`
-      ${this._computeUpdateAvailable
-        ? html`
-            <paper-card heading="Update available! 🎉">
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title="${this.addon.name} ${this.addon
-                    .last_version} is available"
-                  .description="You are currently running version ${this.addon
-                    .version}"
-                  icon="hassio:arrow-up-bold-circle"
-                  iconClass="update"
-                ></hassio-card-content>
-                ${!this.addon.available
-                  ? html`
-                      <p>
-                        This update is no longer compatible with your system.
-                      </p>
-                    `
-                  : ""}
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  .hass=${this.hass}
-                  .disabled=${!this.addon.available}
-                  path="hassio/addons/${this.addon.slug}/update"
-                >
-                  Update
-                </ha-call-api-button>
-                ${this.addon.changelog
-                  ? html`
-                      <mwc-button @click=${this._openChangelog}>
-                        Changelog
-                      </mwc-button>
-                    `
-                  : ""}
-              </div>
-            </paper-card>
-          `
-        : ""}
-      ${!this.addon.protected
-        ? html`
-        <paper-card heading="Warning: Protection mode is disabled!" class="warning">
-          <div class="card-content">
-            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.
-          </div>
-          <div class="card-actions protection-enable">
-              <mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
-            </div>
-          </div>
-        </paper-card>
-      `
-        : ""}
-
-      <paper-card>
-        <div class="card-content">
-          <div class="addon-header">
-            ${this.addon.name}
-            <div class="addon-version light-color">
-              ${this.addon.version
-                ? html`
-                    ${this.addon.version}
-                    ${this._computeIsRunning
-                      ? html`
-                          <iron-icon
-                            title="Add-on is running"
-                            class="running"
-                            icon="hassio:circle"
-                          ></iron-icon>
-                        `
-                      : html`
-                          <iron-icon
-                            title="Add-on is stopped"
-                            class="stopped"
-                            icon="hassio:circle"
-                          ></iron-icon>
-                        `}
-                  `
-                : html`
-                    ${this.addon.last_version}
-                  `}
-            </div>
-          </div>
-          <div class="description light-color">
-            ${this.addon.description}.<br />
-            Visit
-            <a href="${this.addon.url}" target="_blank" rel="noreferrer">
-              ${this.addon.name} page</a
-            >
-            for details.
-          </div>
-          ${this.addon.logo
-            ? html`
-                <a
-                  href="${this.addon.url}"
-                  target="_blank"
-                  class="logo"
-                  rel="noreferrer"
-                >
-                  <img src="/api/hassio/addons/${this.addon.slug}/logo" />
-                </a>
-              `
-            : ""}
-          <div class="security">
-            <ha-label-badge
-              class=${classMap({
-                green: [5, 6].includes(Number(this.addon.rating)),
-                yellow: [3, 4].includes(Number(this.addon.rating)),
-                red: [1, 2].includes(Number(this.addon.rating)),
-              })}
-              @click=${this._showMoreInfo}
-              id="rating"
-              .value=${this.addon.rating}
-              label="rating"
-              description=""
-            ></ha-label-badge>
-            ${this.addon.host_network
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="host_network"
-                    icon="hassio:network"
-                    label="host"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.full_access
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="full_access"
-                    icon="hassio:chip"
-                    label="hardware"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.homeassistant_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="homeassistant_api"
-                    icon="hassio:home-assistant"
-                    label="hass"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this._computeHassioApi
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="hassio_api"
-                    icon="hassio:home-assistant"
-                    label="hassio"
-                    .description=${this.addon.hassio_role}
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.docker_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="docker_api"
-                    icon="hassio:docker"
-                    label="docker"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.host_pid
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="host_pid"
-                    icon="hassio:pound"
-                    label="host pid"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.apparmor
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    class=${this._computeApparmorClassName}
-                    id="apparmor"
-                    icon="hassio:shield"
-                    label="apparmor"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.auth_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="auth_api"
-                    icon="hassio:key"
-                    label="auth"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.ingress
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="ingress"
-                    icon="hassio:cursor-default-click-outline"
-                    label="ingress"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-          </div>
-
-          ${this.addon.version
-            ? html`
-                <div class="state">
-                  <div>Start on boot</div>
-                  <ha-switch
-                    @change=${this._startOnBootToggled}
-                    .checked=${this.addon.boot === "auto"}
-                    haptic
-                  ></ha-switch>
-                </div>
-                <div class="state">
-                  <div>Auto update</div>
-                  <ha-switch
-                    @change=${this._autoUpdateToggled}
-                    .checked=${this.addon.auto_update}
-                    haptic
-                  ></ha-switch>
-                </div>
-                ${this.addon.ingress
-                  ? html`
-                      <div class="state">
-                        <div>Show in sidebar</div>
-                        <ha-switch
-                          @change=${this._panelToggled}
-                          .checked=${this.addon.ingress_panel}
-                          .disabled=${this._computeCannotIngressSidebar}
-                          haptic
-                        ></ha-switch>
-                        ${this._computeCannotIngressSidebar
-                          ? html`
-                              <span>
-                                This option requires Home Assistant 0.92 or
-                                later.
-                              </span>
-                            `
-                          : ""}
-                      </div>
-                    `
-                  : ""}
-                ${this._computeUsesProtectedOptions
-                  ? html`
-                      <div class="state">
-                        <div>
-                          Protection mode
-                          <span>
-                            <iron-icon icon="hassio:information"></iron-icon>
-                            <paper-tooltip>
-                              Grant the add-on elevated system access.
-                            </paper-tooltip>
-                          </span>
-                        </div>
-                        <ha-switch
-                          @change=${this._protectionToggled}
-                          .checked=${this.addon.protected}
-                          haptic
-                        ></ha-switch>
-                      </div>
-                    `
-                  : ""}
-              `
-            : ""}
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-        </div>
-        <div class="card-actions">
-          ${this.addon.version
-            ? html`
-                <mwc-button class="warning" @click=${this._uninstallClicked}>
-                  Uninstall
-                </mwc-button>
-                ${this.addon.build
-                  ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/rebuild"
-                      >
-                        Rebuild
-                      </ha-call-api-button>
-                    `
-                  : ""}
-                ${this._computeIsRunning
-                  ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/restart"
-                      >
-                        Restart
-                      </ha-call-api-button>
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/stop"
-                      >
-                        Stop
-                      </ha-call-api-button>
-                    `
-                  : html`
-                      <ha-call-api-button
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/start"
-                      >
-                        Start
-                      </ha-call-api-button>
-                    `}
-                ${this._computeShowWebUI
-                  ? html`
-                      <a
-                        .href=${this._pathWebui}
-                        tabindex="-1"
-                        target="_blank"
-                        class="right"
-                        rel="noopener"
-                      >
-                        <mwc-button>
-                          Open web UI
-                        </mwc-button>
-                      </a>
-                    `
-                  : ""}
-                ${this._computeShowIngressUI
-                  ? html`
-                      <mwc-button class="right" @click=${this._openIngress}>
-                        Open web UI
-                      </mwc-button>
-                    `
-                  : ""}
-              `
-            : html`
-                ${!this.addon.available
-                  ? html`
-                      <p class="warning">
-                        This add-on is not available on your system.
-                      </p>
-                    `
-                  : ""}
-                <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
-                  .progress=${this._installing}
-                  @click=${this._installClicked}
-                >
-                  Install
-                </ha-progress-button>
-              `}
-        </div>
-      </paper-card>
-
-      ${this.addon.long_description
-        ? html`
-            <paper-card>
-              <div class="card-content">
-                <ha-markdown
-                  .content=${this.addon.long_description}
-                ></ha-markdown>
-              </div>
-            </paper-card>
-          `
-        : ""}
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        paper-card {
-          display: block;
-          margin-bottom: 16px;
-        }
-        paper-card.warning {
-          background-color: var(--google-red-500);
-          color: white;
-          --paper-card-header-color: white;
-        }
-        paper-card.warning mwc-button {
-          --mdc-theme-primary: white !important;
-        }
-        .warning {
-          color: var(--google-red-500);
-          --mdc-theme-primary: var(--google-red-500);
-        }
-        .light-color {
-          color: var(--secondary-text-color);
-        }
-        .addon-header {
-          font-size: 24px;
-          color: var(--paper-card-header-color, --primary-text-color);
-        }
-        .addon-version {
-          float: right;
-          font-size: 15px;
-          vertical-align: middle;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-        .description {
-          margin-bottom: 16px;
-        }
-        .logo img {
-          max-height: 60px;
-          margin: 16px 0;
-          display: block;
-        }
-        .state {
-          display: flex;
-          margin: 33px 0;
-        }
-        .state div {
-          width: 180px;
-          display: inline-block;
-        }
-        .state iron-icon {
-          width: 16px;
-          height: 16px;
-          color: var(--secondary-text-color);
-        }
-        ha-switch {
-          display: flex;
-        }
-        iron-icon.running {
-          color: var(--paper-green-400);
-        }
-        iron-icon.stopped {
-          color: var(--google-red-300);
-        }
-        ha-call-api-button {
-          font-weight: 500;
-          color: var(--primary-color);
-        }
-        .right {
-          float: right;
-        }
-        ha-markdown img {
-          max-width: 100%;
-        }
-        protection-enable mwc-button {
-          --mdc-theme-primary: white;
-        }
-        .description a,
-        ha-markdown a {
-          color: var(--primary-color);
-        }
-        .red {
-          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
-        }
-        .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
-        }
-        .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
-        }
-        .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
-        }
-        .security {
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flow-root;
-        }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --iron-icon-height: 45px;
-        }
-      `,
-    ];
-  }
-
-  private get _computeHassioApi(): boolean {
-    return (
-      this.addon.hassio_api &&
-      (this.addon.hassio_role === "manager" ||
-        this.addon.hassio_role === "admin")
-    );
-  }
-
-  private get _computeApparmorClassName(): string {
-    if (this.addon.apparmor === "profile") {
-      return "green";
-    }
-    if (this.addon.apparmor === "disable") {
-      return "red";
-    }
-    return "";
-  }
-
-  private _showMoreInfo(ev): void {
-    const id = ev.target.getAttribute("id");
-    showHassioMarkdownDialog(this, {
-      title: PERMIS_DESC[id].title,
-      content: PERMIS_DESC[id].description,
-    });
-  }
-
-  private get _computeIsRunning(): boolean {
-    return this.addon?.state === "started";
-  }
-
-  private get _computeUpdateAvailable(): boolean | "" {
-    return (
-      this.addon &&
-      !this.addon.detached &&
-      this.addon.version &&
-      this.addon.version !== this.addon.last_version
-    );
-  }
-
-  private get _pathWebui(): string | null {
-    return (
-      this.addon.webui &&
-      this.addon.webui.replace("[HOST]", document.location.hostname)
-    );
-  }
-
-  private get _computeShowWebUI(): boolean | "" | null {
-    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
-  }
-
-  private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
-  }
-
-  private get _computeShowIngressUI(): boolean {
-    return this.addon.ingress && this._computeIsRunning;
-  }
-
-  private get _computeCannotIngressSidebar(): boolean {
-    return (
-      !this.addon.ingress ||
-      !atLeastVersion(this.hass.connection.haVersion, 0, 92)
-    );
-  }
-
-  private get _computeUsesProtectedOptions(): boolean {
-    return (
-      this.addon.docker_api || this.addon.full_access || this.addon.host_pid
-    );
-  }
-
-  private async _startOnBootToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      boot: this.addon.boot === "auto" ? "manual" : "auto",
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
-    }
-  }
-
-  private async _autoUpdateToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      auto_update: !this.addon.auto_update,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
-    }
-  }
-
-  private async _protectionToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetSecurityParams = {
-      protected: !this.addon.protected,
-    };
-    try {
-      await setHassioAddonSecurity(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "security",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon security option, ${err.body?.message ||
-        err}`;
-    }
-  }
-
-  private async _panelToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      ingress_panel: !this.addon.ingress_panel,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
-    }
-  }
-
-  private async _openChangelog(): Promise<void> {
-    this._error = undefined;
-    try {
-      const content = await fetchHassioAddonChangelog(
-        this.hass,
-        this.addon.slug
-      );
-      showHassioMarkdownDialog(this, {
-        title: "Changelog",
-        content,
-      });
-    } catch (err) {
-      this._error = `Failed to get addon changelog, ${err.body?.message ||
-        err}`;
-    }
-  }
-
-  private async _installClicked(): Promise<void> {
-    this._error = undefined;
-    this._installing = true;
-    try {
-      await installHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "install",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to install addon, ${err.body?.message || err}`;
-    }
-    this._installing = false;
-  }
-
-  private async _uninstallClicked(): Promise<void> {
-    if (!confirm("Are you sure you want to uninstall this add-on?")) {
-      return;
-    }
-    this._error = undefined;
-    try {
-      await uninstallHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "uninstall",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
-    }
-  }
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-info": HassioAddonInfo;
-  }
-}

hassio/src/addon-view/hassio-addon-logs.js

@@ -0,0 +1,66 @@
+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 { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
+
+import "../../../src/resources/ha-style";
+
+class HassioAddonLogs extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="ha-style">
+        :host,
+        paper-card {
+          display: block;
+        }
+        pre {
+          overflow-x: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+      </style>
+      ${ANSI_HTML_STYLE}
+      <paper-card heading="Log">
+        <div class="card-content" id="content"></div>
+        <div class="card-actions">
+          <mwc-button on-click="refresh">Refresh</mwc-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addonSlug: {
+        type: String,
+        observer: "addonSlugChanged",
+      },
+    };
+  }
+
+  addonSlugChanged(slug) {
+    if (!this.hass) {
+      setTimeout(() => {
+        this.addonChanged(slug);
+      }, 0);
+      return;
+    }
+
+    this.refresh();
+  }
+
+  refresh() {
+    this.hass
+      .callApi("get", `hassio/addons/${this.addonSlug}/logs`)
+      .then((text) => {
+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(parseTextToColoredPre(text));
+      });
+  }
+}
+
+customElements.define("hassio-addon-logs", HassioAddonLogs);

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

@@ -1,95 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-  query,
-} from "lit-element";
-import { HomeAssistant } from "../../../src/types";
-import {
-  HassioAddonDetails,
-  fetchHassioAddonLogs,
-} from "../../../src/data/hassio/addon";
-import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-
-@customElement("hassio-addon-logs")
-class HassioAddonLogs extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public addon!: HassioAddonDetails;
-  @property() private _error?: string;
-  @query("#content") private _logContent!: any;
-
-  public async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-    await this._loadData();
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <paper-card heading="Log">
-        ${this._error
-          ? html`
-              <div class="errors">${this._error}</div>
-            `
-          : ""}
-        <div class="card-content" id="content"></div>
-        <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      ANSI_HTML_STYLE,
-      css`
-        :host,
-        paper-card {
-          display: block;
-        }
-        pre {
-          overflow-x: auto;
-          white-space: pre-wrap;
-          overflow-wrap: break-word;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-      `,
-    ];
-  }
-
-  private async _loadData(): Promise<void> {
-    this._error = undefined;
-    try {
-      const content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
-      while (this._logContent.lastChild) {
-        this._logContent.removeChild(this._logContent.lastChild as Node);
-      }
-      this._logContent.appendChild(parseTextToColoredPre(content));
-    } catch (err) {
-      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
-    }
-  }
-
-  private async _refresh(): Promise<void> {
-    await this._loadData();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-logs": HassioAddonLogs;
-  }
-}

hassio/src/addon-view/hassio-addon-network.js

@@ -0,0 +1,129 @@
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/resources/ha-style";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
+
+class HassioAddonNetwork extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          @apply --layout;
+          @apply --layout-justified;
+        }
+      </style>
+      <paper-card heading="Network">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
+          </template>
+
+          <table>
+            <tbody>
+              <tr>
+                <th>Container</th>
+                <th>Host</th>
+                <th>Description</th>
+              </tr>
+              <template is="dom-repeat" items="[[config]]">
+                <tr>
+                  <td>[[item.container]]</td>
+                  <td>
+                    <paper-input
+                      placeholder="disabled"
+                      value="{{item.host}}"
+                      no-label-float=""
+                    ></paper-input>
+                  </td>
+                  <td>[[item.description]]</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
+          <mwc-button on-click="saveTapped">Save</mwc-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addonSlug: String,
+      config: Object,
+      addon: {
+        type: Object,
+        observer: "addonChanged",
+      },
+      error: String,
+      resetData: {
+        type: Object,
+        value: {
+          network: null,
+        },
+      },
+    };
+  }
+
+  addonChanged(addon) {
+    if (!addon) return;
+
+    const network = addon.network || {};
+    const description = addon.network_description || {};
+    const items = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
+    this.config = items.sort(function(el1, el2) {
+      return el1.host - el2.host;
+    });
+  }
+
+  saveTapped() {
+    this.error = null;
+    const data = {};
+    this.config.forEach(function(item) {
+      data[item.container] = parseInt(item.host);
+    });
+    const path = `hassio/addons/${this.addonSlug}/options`;
+
+    this.hass
+      .callApi("post", path, {
+        network: data,
+      })
+      .then(
+        () => {
+          this.fire("hass-api-called", { success: true, path: path });
+        },
+        (resp) => {
+          this.error = resp.body.message;
+        }
+      );
+  }
+}
+
+customElements.define("hassio-addon-network", HassioAddonNetwork);

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

@@ -1,202 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-
-import { HomeAssistant } from "../../../src/types";
-import {
-  HassioAddonDetails,
-  HassioAddonSetOptionParams,
-  setHassioAddonOption,
-} from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-
-interface NetworkItem {
-  description: string;
-  container: string;
-  host: number | null;
-}
-
-interface NetworkItemInput extends PaperInputElement {
-  container: string;
-}
-
-@customElement("hassio-addon-network")
-class HassioAddonNetwork extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public addon!: HassioAddonDetails;
-  @property() private _error?: string;
-  @property() private _config?: NetworkItem[];
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._setNetworkConfig();
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      <paper-card heading="Network">
-        <div class="card-content">
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-
-          <table>
-            <tbody>
-              <tr>
-                <th>Container</th>
-                <th>Host</th>
-                <th>Description</th>
-              </tr>
-              ${this._config!.map((item) => {
-                return html`
-                  <tr>
-                    <td>${item.container}</td>
-                    <td>
-                      <paper-input
-                        @value-changed=${this._configChanged}
-                        placeholder="disabled"
-                        .value=${item.host}
-                        .container=${item.container}
-                        no-label-float
-                      ></paper-input>
-                    </td>
-                    <td>${item.description}</td>
-                  </tr>
-                `;
-              })}
-            </tbody>
-          </table>
-        </div>
-        <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </mwc-button>
-          <mwc-button @click=${this._saveTapped}>Save</mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        paper-card {
-          display: block;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flex;
-          justify-content: space-between;
-        }
-      `,
-    ];
-  }
-
-  protected update(changedProperties: PropertyValues): void {
-    super.update(changedProperties);
-    if (changedProperties.has("addon")) {
-      this._setNetworkConfig();
-    }
-  }
-
-  private _setNetworkConfig(): void {
-    const network = this.addon.network || {};
-    const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => {
-      return {
-        container: key,
-        host: network[key],
-        description: description[key],
-      };
-    });
-    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
-  }
-
-  private async _configChanged(ev: Event): Promise<void> {
-    const target = ev.target as NetworkItemInput;
-    this._config!.forEach((item) => {
-      if (
-        item.container === target.container &&
-        item.host !== parseInt(String(target.value), 10)
-      ) {
-        item.host = target.value ? parseInt(String(target.value), 10) : null;
-      }
-    });
-  }
-
-  private async _resetTapped(): Promise<void> {
-    const data: HassioAddonSetOptionParams = {
-      network: null,
-    };
-
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon network configuration, ${err.body
-        ?.message || err}`;
-    }
-  }
-
-  private async _saveTapped(): Promise<void> {
-    this._error = undefined;
-    const networkconfiguration = {};
-    this._config!.forEach((item) => {
-      networkconfiguration[item.container] = parseInt(String(item.host), 10);
-    });
-
-    const data: HassioAddonSetOptionParams = {
-      network: networkconfiguration,
-    };
-
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon network configuration, ${err.body
-        ?.message || err}`;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-network": HassioAddonNetwork;
-  }
-}

hassio/src/addon-view/hassio-addon-view.js

@@ -0,0 +1,139 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./hassio-addon-audio";
+import "./hassio-addon-config";
+import "./hassio-addon-info";
+import "./hassio-addon-logs";
+import "./hassio-addon-network";
+
+class HassioAddonView extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          color: var(--primary-text-color);
+          --paper-card-header-color: var(--primary-text-color);
+        }
+        .content {
+          padding: 24px 0 32px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        hassio-addon-info,
+        hassio-addon-network,
+        hassio-addon-audio,
+        hassio-addon-config {
+          margin-bottom: 24px;
+          width: 600px;
+        }
+        hassio-addon-logs {
+          max-width: calc(100% - 8px);
+          min-width: 600px;
+        }
+        @media only screen and (max-width: 600px) {
+          hassio-addon-info,
+          hassio-addon-network,
+          hassio-addon-audio,
+          hassio-addon-config,
+          hassio-addon-logs {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
+      </style>
+      <hass-subpage header="Hass.io: add-on details" hassio>
+        <div class="content">
+          <hassio-addon-info
+            hass="[[hass]]"
+            addon="[[addon]]"
+            addon-slug="[[addonSlug]]"
+          ></hassio-addon-info>
+
+          <template is="dom-if" if="[[addon.version]]">
+            <hassio-addon-config
+              hass="[[hass]]"
+              addon="[[addon]]"
+              addon-slug="[[addonSlug]]"
+            ></hassio-addon-config>
+
+            <template is="dom-if" if="[[addon.audio]]">
+              <hassio-addon-audio
+                hass="[[hass]]"
+                addon="[[addon]]"
+              ></hassio-addon-audio>
+            </template>
+
+            <template is="dom-if" if="[[addon.network]]">
+              <hassio-addon-network
+                hass="[[hass]]"
+                addon="[[addon]]"
+                addon-slug="[[addonSlug]]"
+              ></hassio-addon-network>
+            </template>
+
+            <hassio-addon-logs
+              hass="[[hass]]"
+              addon-slug="[[addonSlug]]"
+            ></hassio-addon-logs>
+          </template>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      route: {
+        type: Object,
+        observer: "routeDataChanged",
+      },
+      addonSlug: {
+        type: String,
+        computed: "_computeSlug(route)",
+      },
+      addon: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+  }
+
+  apiCalled(ev) {
+    const path = ev.detail.path;
+
+    if (!path) return;
+
+    if (path.substr(path.lastIndexOf("/") + 1) === "uninstall") {
+      history.back();
+    } else {
+      this.routeDataChanged(this.route);
+    }
+  }
+
+  routeDataChanged(routeData) {
+    const addon = routeData.path.substr(1);
+    this.hass.callApi("get", `hassio/addons/${addon}/info`).then(
+      (info) => {
+        this.addon = info.data;
+      },
+      () => {
+        this.addon = null;
+      }
+    );
+  }
+
+  _computeSlug(route) {
+    return route.path.substr(1);
+  }
+}
+
+customElements.define("hassio-addon-view", HassioAddonView);

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

@@ -1,159 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import { HomeAssistant, Route } from "../../../src/types";
-import {
-  HassioAddonDetails,
-  fetchHassioAddonInfo,
-} from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-
-import "./hassio-addon-audio";
-import "./hassio-addon-config";
-import "./hassio-addon-info";
-import "./hassio-addon-logs";
-import "./hassio-addon-network";
-
-@customElement("hassio-addon-view")
-class HassioAddonView extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public route!: Route;
-  @property() public addon?: HassioAddonDetails;
-
-  protected render(): TemplateResult {
-    if (!this.addon) {
-      return html`
-        <paper-spinner-lite active></paper-spinner-lite>
-      `;
-    }
-    return html`
-      <hass-subpage header="Hass.io: add-on details" hassio>
-        <div class="content">
-          <hassio-addon-info
-            .hass=${this.hass}
-            .addon=${this.addon}
-          ></hassio-addon-info>
-
-          ${this.addon && this.addon.version
-            ? html`
-                <hassio-addon-config
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-config>
-
-                ${this.addon.audio
-                  ? html`
-                      <hassio-addon-audio
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-audio>
-                    `
-                  : ""}
-                ${this.addon.network
-                  ? html`
-                      <hassio-addon-network
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-network>
-                    `
-                  : ""}
-
-                <hassio-addon-logs
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-logs>
-              `
-            : ""}
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-          --paper-card-header-color: var(--primary-text-color);
-        }
-        .content {
-          padding: 24px 0 32px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        hassio-addon-info,
-        hassio-addon-network,
-        hassio-addon-audio,
-        hassio-addon-config {
-          margin-bottom: 24px;
-          width: 600px;
-        }
-        hassio-addon-logs {
-          max-width: calc(100% - 8px);
-          min-width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          hassio-addon-info,
-          hassio-addon-network,
-          hassio-addon-audio,
-          hassio-addon-config,
-          hassio-addon-logs {
-            max-width: 100%;
-            min-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
-
-  protected async firstUpdated(): Promise<void> {
-    await this._routeDataChanged(this.route);
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  private async _apiCalled(ev): Promise<void> {
-    const path: string = ev.detail.path;
-
-    if (!path) {
-      return;
-    }
-
-    if (path === "uninstall") {
-      history.back();
-    } else {
-      await this._routeDataChanged(this.route);
-    }
-  }
-
-  private async _routeDataChanged(routeData: Route): Promise<void> {
-    const addon = routeData.path.substr(1);
-    try {
-      const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
-      this.addon = addoninfo;
-    } catch {
-      this.addon = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-view": HassioAddonView;
-  }
-}

hassio/src/ansi-to-html.js

@@ -1,75 +1,68 @@
-import { css } from "lit-element";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
 
-interface State {
-  bold: boolean;
-  italic: boolean;
-  underline: boolean;
-  strikethrough: boolean;
-  foregroundColor: null | string;
-  backgroundColor: null | string;
-}
-
-export const ANSI_HTML_STYLE = css`
-  .bold {
-    font-weight: bold;
-  }
-  .italic {
-    font-style: italic;
-  }
-  .underline {
-    text-decoration: underline;
-  }
-  .strikethrough {
-    text-decoration: line-through;
-  }
-  .underline.strikethrough {
-    text-decoration: underline line-through;
-  }
-  .fg-red {
-    color: rgb(222, 56, 43);
-  }
-  .fg-green {
-    color: rgb(57, 181, 74);
-  }
-  .fg-yellow {
-    color: rgb(255, 199, 6);
-  }
-  .fg-blue {
-    color: rgb(0, 111, 184);
-  }
-  .fg-magenta {
-    color: rgb(118, 38, 113);
-  }
-  .fg-cyan {
-    color: rgb(44, 181, 233);
-  }
-  .fg-white {
-    color: rgb(204, 204, 204);
-  }
-  .bg-black {
-    background-color: rgb(0, 0, 0);
-  }
-  .bg-red {
-    background-color: rgb(222, 56, 43);
-  }
-  .bg-green {
-    background-color: rgb(57, 181, 74);
-  }
-  .bg-yellow {
-    background-color: rgb(255, 199, 6);
-  }
-  .bg-blue {
-    background-color: rgb(0, 111, 184);
-  }
-  .bg-magenta {
-    background-color: rgb(118, 38, 113);
-  }
-  .bg-cyan {
-    background-color: rgb(44, 181, 233);
-  }
-  .bg-white {
-    background-color: rgb(204, 204, 204);
-  }
+export const ANSI_HTML_STYLE = html`
+  <style>
+    .bold {
+      font-weight: bold;
+    }
+    .italic {
+      font-style: italic;
+    }
+    .underline {
+      text-decoration: underline;
+    }
+    .strikethrough {
+      text-decoration: line-through;
+    }
+    .underline.strikethrough {
+      text-decoration: underline line-through;
+    }
+    .fg-red {
+      color: rgb(222, 56, 43);
+    }
+    .fg-green {
+      color: rgb(57, 181, 74);
+    }
+    .fg-yellow {
+      color: rgb(255, 199, 6);
+    }
+    .fg-blue {
+      color: rgb(0, 111, 184);
+    }
+    .fg-magenta {
+      color: rgb(118, 38, 113);
+    }
+    .fg-cyan {
+      color: rgb(44, 181, 233);
+    }
+    .fg-white {
+      color: rgb(204, 204, 204);
+    }
+    .bg-black {
+      background-color: rgb(0, 0, 0);
+    }
+    .bg-red {
+      background-color: rgb(222, 56, 43);
+    }
+    .bg-green {
+      background-color: rgb(57, 181, 74);
+    }
+    .bg-yellow {
+      background-color: rgb(255, 199, 6);
+    }
+    .bg-blue {
+      background-color: rgb(0, 111, 184);
+    }
+    .bg-magenta {
+      background-color: rgb(118, 38, 113);
+    }
+    .bg-cyan {
+      background-color: rgb(44, 181, 233);
+    }
+    .bg-white {
+      background-color: rgb(204, 204, 204);
+    }
+  </style>
 `;
 
 export function parseTextToColoredPre(text) {
@@ -77,7 +70,7 @@ export function parseTextToColoredPre(text) {
   const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
   let i = 0;
 
-  const state: State = {
+  const state = {
     bold: false,
     italic: false,
     underline: false,
@@ -88,42 +81,29 @@ export function parseTextToColoredPre(text) {
 
   const addSpan = (content) => {
     const span = document.createElement("span");
-    if (state.bold) {
-      span.classList.add("bold");
-    }
-    if (state.italic) {
-      span.classList.add("italic");
-    }
-    if (state.underline) {
-      span.classList.add("underline");
-    }
-    if (state.strikethrough) {
-      span.classList.add("strikethrough");
-    }
-    if (state.foregroundColor !== null) {
+    if (state.bold) span.classList.add("bold");
+    if (state.italic) span.classList.add("italic");
+    if (state.underline) span.classList.add("underline");
+    if (state.strikethrough) span.classList.add("strikethrough");
+    if (state.foregroundColor !== null)
       span.classList.add(`fg-${state.foregroundColor}`);
-    }
-    if (state.backgroundColor !== null) {
+    if (state.backgroundColor !== null)
       span.classList.add(`bg-${state.backgroundColor}`);
-    }
     span.appendChild(document.createTextNode(content));
     pre.appendChild(span);
   };
 
   /* eslint-disable no-cond-assign */
   let match;
-  // tslint:disable-next-line
   while ((match = re.exec(text)) !== null) {
-    const j = match!.index;
+    const j = match.index;
     addSpan(text.substring(i, j));
     i = j + match[0].length;
 
-    if (match[1] === undefined) {
-      continue;
-    }
+    if (match[1] === undefined) continue;
 
-    match[1].split(";").forEach((colorCode: string) => {
-      switch (parseInt(colorCode, 10)) {
+    match[1].split(";").forEach((colorCode) => {
+      switch (parseInt(colorCode)) {
         case 0:
           // reset
           state.bold = false;

hassio/src/components/hassio-card-content.ts

@@ -17,40 +17,21 @@ class HassioCardContent extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public title!: string;
   @property() public description?: string;
-  @property({ type: Boolean }) public available: boolean = true;
-  @property({ type: Boolean }) public showTopbar: boolean = false;
-  @property() public topbarClass?: string;
+  @property({ type: Boolean }) public available?: boolean;
   @property() public datetime?: string;
   @property() public iconTitle?: string;
   @property() public iconClass?: string;
   @property() public icon = "hass:help-circle";
-  @property() public iconImage?: string;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
-      ${this.showTopbar
-        ? html`
-            <div class="topbar ${this.topbarClass}"></div>
-          `
-        : ""}
-      ${this.iconImage
-        ? html`
-            <div class="icon_image ${this.iconClass}">
-              <img src="${this.iconImage}" title="${this.iconTitle}" />
-              <div></div>
-            </div>
-          `
-        : html`
-            <iron-icon
-              class=${this.iconClass}
-              .icon=${this.icon}
-              .title=${this.iconTitle}
-            ></iron-icon>
-          `}
+      <iron-icon
+        class=${this.iconClass}
+        .icon=${this.icon}
+        .title=${this.iconTitle}
+      ></iron-icon>
       <div>
-        <div class="title">
-          ${this.title}
-        </div>
+        <div class="title">${this.title}</div>
         <div class="addition">
           ${this.description}
           ${/* treat as available when undefined */
@@ -72,9 +53,8 @@ class HassioCardContent extends LitElement {
   static get styles(): CSSResult {
     return css`
       iron-icon {
-        margin-right: 24px;
-        margin-left: 8px;
-        margin-top: 12px;
+        margin-right: 16px;
+        margin-top: 16px;
         float: left;
         color: var(--secondary-text-color);
       }
@@ -108,44 +88,6 @@ class HassioCardContent extends LitElement {
       ha-relative-time {
         display: block;
       }
-      .icon_image img {
-        max-height: 40px;
-        max-width: 40px;
-        margin-top: 4px;
-        margin-right: 16px;
-        float: left;
-      }
-      .icon_image.stopped,
-      .icon_image.not_available {
-        filter: grayscale(1);
-      }
-      .dot {
-        position: absolute;
-        background-color: var(--paper-orange-400);
-        width: 12px;
-        height: 12px;
-        top: 8px;
-        right: 8px;
-        border-radius: 50%;
-      }
-      .topbar {
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        top: 0;
-        left: 0;
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-      }
-      .topbar.installed {
-        background-color: var(--primary-color);
-      }
-      .topbar.update {
-        background-color: var(--accent-color);
-      }
-      .topbar.unavailable {
-        background-color: var(--error-color);
-      }
     `;
   }
 }

hassio/src/components/hassio-filter-addons.ts

@@ -1,4 +1,4 @@
-import { HassioAddonInfo } from "../../../src/data/hassio/addon";
+import { HassioAddonInfo } from "../../../src/data/hassio";
 import * as Fuse from "fuse.js";
 
 export function filterAndSort(addons: HassioAddonInfo[], filter: string) {

hassio/src/components/hassio-search-input.ts

@@ -16,7 +16,7 @@ import "@material/mwc-button";
 class HassioSearchInput extends LitElement {
   @property() private filter?: string;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <div class="search-container">
         <paper-input

hassio/src/dashboard/hassio-addons.js

@@ -0,0 +1,92 @@
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
+import NavigateMixin from "../../../src/mixins/navigate-mixin";
+
+class HassioAddons extends NavigateMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style include="ha-style hassio-style">
+        paper-card {
+          cursor: pointer;
+        }
+      </style>
+      <div class="content card-group">
+        <div class="title">Add-ons</div>
+        <template is="dom-if" if="[[!addons.length]]">
+          <paper-card>
+            <div class="card-content">
+              You don't have any add-ons installed yet. Head over to
+              <a href="#" on-click="openStore">the add-on store</a> to get
+              started!
+            </div>
+          </paper-card>
+        </template>
+        <template
+          is="dom-repeat"
+          items="[[addons]]"
+          as="addon"
+          sort="sortAddons"
+        >
+          <paper-card on-click="addonTapped">
+            <div class="card-content">
+              <hassio-card-content
+                hass="[[hass]]"
+                title="[[addon.name]]"
+                description="[[addon.description]]"
+                available="[[addon.available]]"
+                icon="[[computeIcon(addon)]]"
+                icon-title="[[computeIconTitle(addon)]]"
+                icon-class="[[computeIconClass(addon)]]"
+              ></hassio-card-content>
+            </div>
+          </paper-card>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addons: Array,
+    };
+  }
+
+  sortAddons(a, b) {
+    return a.name < b.name ? -1 : 1;
+  }
+
+  computeIcon(addon) {
+    return addon.installed !== addon.version
+      ? "hassio:arrow-up-bold-circle"
+      : "hassio:puzzle";
+  }
+
+  computeIconTitle(addon) {
+    if (addon.installed !== addon.version) return "New version available";
+    return addon.state === "started"
+      ? "Add-on is running"
+      : "Add-on is stopped";
+  }
+
+  computeIconClass(addon) {
+    if (addon.installed !== addon.version) return "update";
+    return addon.state === "started" ? "running" : "";
+  }
+
+  addonTapped(ev) {
+    this.navigate("/hassio/addon/" + ev.model.addon.slug);
+    ev.target.blur();
+  }
+
+  openStore(ev) {
+    this.navigate("/hassio/store");
+    ev.target.blur();
+  }
+}
+
+customElements.define("hassio-addons", HassioAddons);

hassio/src/dashboard/hassio-addons.ts

@@ -1,111 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import { HomeAssistant } from "../../../src/types";
-import { HassioAddonInfo } from "../../../src/data/hassio/addon";
-import { navigate } from "../../../src/common/navigate";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import "../components/hassio-card-content";
-import { atLeastVersion } from "../../../src/common/config/version";
-
-@customElement("hassio-addons")
-class HassioAddons extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public addons?: HassioAddonInfo[];
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="content">
-        <h1>Add-ons</h1>
-        <div class="card-group">
-          ${!this.addons
-            ? html`
-                <paper-card>
-                  <div class="card-content">
-                    You don't have any add-ons installed yet. Head over to
-                    <a href="#" @click=${this._openStore}>the add-on store</a>
-                    to get started!
-                  </div>
-                </paper-card>
-              `
-            : this.addons
-                .sort((a, b) => (a.name > b.name ? 1 : -1))
-                .map(
-                  (addon) => html`
-                    <paper-card .addon=${addon} @click=${this._addonTapped}>
-                      <div class="card-content">
-                        <hassio-card-content
-                          .hass=${this.hass}
-                          .title=${addon.name}
-                          .description=${addon.description}
-                          available
-                          .showTopbar=${addon.installed !== addon.version}
-                          topbarClass="update"
-                          .icon=${addon.installed !== addon.version
-                            ? "hassio:arrow-up-bold-circle"
-                            : "hassio:puzzle"}
-                          .iconTitle=${addon.state !== "started"
-                            ? "Add-on is stopped"
-                            : addon.installed !== addon.version
-                            ? "New version available"
-                            : "Add-on is running"}
-                          .iconClass=${addon.installed &&
-                          addon.installed !== addon.version
-                            ? addon.state === "started"
-                              ? "update"
-                              : "update stopped"
-                            : addon.installed && addon.state === "started"
-                            ? "running"
-                            : "stopped"}
-                          .iconImage=${atLeastVersion(
-                            this.hass.connection.haVersion,
-                            0,
-                            105
-                          ) && addon.icon
-                            ? `/api/hassio/addons/${addon.slug}/icon`
-                            : undefined}
-                        ></hassio-card-content>
-                      </div>
-                    </paper-card>
-                  `
-                )}
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        paper-card {
-          cursor: pointer;
-        }
-      `,
-    ];
-  }
-
-  private _addonTapped(ev: any): void {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
-  }
-
-  private _openStore(): void {
-    navigate(this, "/hassio/store");
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addons": HassioAddons;
-  }
-}

hassio/src/dashboard/hassio-dashboard.ts

@@ -9,22 +9,22 @@ import {
 } from "lit-element";
 import "./hassio-addons";
 import "./hassio-update";
-import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioSupervisorInfo,
   HassioHomeAssistantInfo,
-} from "../../../src/data/hassio/supervisor";
+  HassioHassOSInfo,
+} from "../../../src/data/hassio";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
   @property() public hassOsInfo!: HassioHassOSInfo;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <div class="content">
         <hassio-update
@@ -41,15 +41,12 @@ class HassioDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      css`
-        .content {
-          margin: 0 auto;
-        }
-      `,
-    ];
+  static get styles(): CSSResult {
+    return css`
+      .content {
+        margin: 0 auto;
+      }
+    `;
   }
 }
 

hassio/src/dashboard/hassio-update.ts

@@ -10,14 +10,13 @@ import {
 import "@polymer/iron-icon/iron-icon";
 
 import { HomeAssistant } from "../../../src/types";
-import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
   HassioSupervisorInfo,
-} from "../../../src/data/hassio/supervisor";
+} from "../../../src/data/hassio";
 
 import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
 
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
@@ -27,25 +26,20 @@ import "../components/hassio-card-content";
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public hassInfo: HassioHomeAssistantInfo;
   @property() public hassOsInfo?: HassioHassOSInfo;
   @property() public supervisorInfo: HassioSupervisorInfo;
-  @property() private _error?: string;
 
-  protected render(): TemplateResult {
+  @property() public error?: string;
+
+  protected render(): TemplateResult | void {
     const updatesAvailable: number = [
       this.hassInfo,
       this.supervisorInfo,
       this.hassOsInfo,
     ].filter((value) => {
-      return (
-        !!value &&
-        (value.last_version
-          ? value.version !== value.last_version
-          : value.version_latest
-          ? value.version !== value.version_latest
-          : false)
-      );
+      return !!value && value.version !== value.last_version;
     }).length;
 
     if (!updatesAvailable) {
@@ -54,19 +48,19 @@ export class HassioUpdate extends LitElement {
 
     return html`
       <div class="content">
-        ${this._error
+        ${this.error
           ? html`
-              <div class="error">Error: ${this._error}</div>
+              <div class="error">Error: ${this.error}</div>
             `
           : ""}
-        <h1>
-          ${updatesAvailable > 1
-            ? "Updates Available 🎉"
-            : "Update Available 🎉"}
-        </h1>
         <div class="card-group">
+          <div class="title">
+            ${updatesAvailable > 1
+              ? "Updates Available 🎉"
+              : "Update Available 🎉"}
+          </div>
           ${this._renderUpdateCard(
-            "Home Assistant Core",
+            "Home Assistant",
             this.hassInfo.version,
             this.hassInfo.last_version,
             "hassio/homeassistant/update",
@@ -76,7 +70,7 @@ export class HassioUpdate extends LitElement {
             "hassio:home-assistant"
           )}
           ${this._renderUpdateCard(
-            "Supervisor",
+            "Hass.io Supervisor",
             this.supervisorInfo.version,
             this.supervisorInfo.last_version,
             "hassio/supervisor/update",
@@ -84,7 +78,7 @@ export class HassioUpdate extends LitElement {
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
-                "Operating System",
+                "HassOS",
                 this.hassOsInfo.version,
                 this.hassOsInfo.version_latest,
                 "hassio/hassos/update",
@@ -104,7 +98,7 @@ export class HassioUpdate extends LitElement {
     releaseNotesUrl: string,
     icon?: string
   ): TemplateResult {
-    if (!lastVersion || lastVersion === curVersion) {
+    if (lastVersion === curVersion) {
       return html``;
     }
     return html`
@@ -123,7 +117,7 @@ export class HassioUpdate extends LitElement {
           </div>
         </div>
         <div class="card-actions">
-          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
+          <a href="${releaseNotesUrl}" target="_blank">
             <mwc-button>Release notes</mwc-button>
           </a>
           <ha-call-api-button
@@ -140,22 +134,28 @@ export class HassioUpdate extends LitElement {
 
   private _apiCalled(ev) {
     if (ev.detail.success) {
-      this._error = "";
+      this.error = "";
       return;
     }
 
     const response = ev.detail.response;
 
     typeof response.body === "object"
-      ? (this._error = response.body.message || "Unknown error")
-      : (this._error = response.body);
+      ? (this.error = response.body.message || "Unknown error")
+      : (this.error = response.body);
   }
 
   static get styles(): CSSResult[] {
     return [
-      haStyle,
       hassioStyle,
       css`
+        :host {
+          width: 33%;
+        }
+        paper-card {
+          display: inline-block;
+          margin-bottom: 32px;
+        }
         .icon {
           --iron-icon-height: 48px;
           --iron-icon-width: 48px;
@@ -170,10 +170,6 @@ export class HassioUpdate extends LitElement {
         .warning {
           color: var(--secondary-text-color);
         }
-        .card-content {
-          height: calc(100% - 47px);
-          box-sizing: border-box;
-        }
         .card-actions {
           text-align: right;
         }

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -1,59 +1,20 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-icon-button/paper-icon-button";
-import { PaperDialogElement } from "@polymer/paper-dialog";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-  query,
-} from "lit-element";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import { hassioStyle } from "../../resources/hassio-style";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
-
-import "../../../../src/components/dialog/ha-paper-dialog";
 import "../../../../src/components/ha-markdown";
+import "../../../../src/resources/ha-style";
+import "../../../../src/components/dialog/ha-paper-dialog";
+import { customElement } from "lit-element";
+import { PaperDialogElement } from "@polymer/paper-dialog";
 
 @customElement("dialog-hassio-markdown")
-class HassioMarkdownDialog extends LitElement {
-  @property() public title!: string;
-  @property() public content!: string;
-  @query("#dialog") private _dialog!: PaperDialogElement;
-
-  public showDialog(params: HassioMarkdownDialogParams) {
-    this.title = params.title;
-    this.content = params.content;
-    this._dialog.open();
-  }
-
-  protected render(): TemplateResult {
+class HassioMarkdownDialog extends PolymerElement {
+  static get template() {
     return html`
-      <ha-paper-dialog id="dialog" with-backdrop="">
-        <app-toolbar>
-          <paper-icon-button
-            icon="hassio:close"
-            dialog-dismiss=""
-          ></paper-icon-button>
-          <div main-title="">${this.title}</div>
-        </app-toolbar>
-        <paper-dialog-scrollable>
-          <ha-markdown .content=${this.content || ""}></ha-markdown>
-        </paper-dialog-scrollable>
-      </ha-paper-dialog>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      hassioStyle,
-      css`
+      <style include="ha-style-dialog">
         ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
@@ -91,8 +52,32 @@ class HassioMarkdownDialog extends LitElement {
             background-color: var(--primary-color);
           }
         }
-      `,
-    ];
+      </style>
+      <ha-paper-dialog id="dialog" with-backdrop="">
+        <app-toolbar>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
+          <div main-title="">[[title]]</div>
+        </app-toolbar>
+        <paper-dialog-scrollable>
+          <ha-markdown content="[[content]]"></ha-markdown>
+        </paper-dialog-scrollable>
+      </ha-paper-dialog>
+    `;
+  }
+
+  static get properties() {
+    return {
+      title: String,
+      content: String,
+    };
+  }
+
+  public showDialog(params) {
+    this.setProperties(params);
+    (this.$.dialog as PaperDialogElement).open();
   }
 }
 

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -1,33 +1,20 @@
-import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-icon/iron-icon";
+import "@material/mwc-button";
+import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-input/paper-input";
-import { PaperDialogElement } from "@polymer/paper-dialog";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-  query,
-} from "lit-element";
-
-import {
-  fetchHassioSnapshotInfo,
-  HassioSnapshotDetail,
-} from "../../../../src/data/hassio/snapshot";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { getSignedPath } from "../../../../src/data/auth";
-import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
-import { PolymerChangedEvent } from "../../../../src/polymer-types";
 
+import "../../../../src/resources/ha-style";
 import "../../../../src/components/dialog/ha-paper-dialog";
+import { customElement } from "lit-element";
+import { PaperDialogElement } from "@polymer/paper-dialog";
+import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
+import { fetchHassioSnapshotInfo } from "../../../../src/data/hassio";
 
 const _computeFolders = (folders) => {
   const list: Array<{ slug: string; name: string; checked: boolean }> = [];
@@ -59,179 +46,21 @@ const _computeAddons = (addons) => {
   }));
 };
 
-interface AddonItem {
-  slug: string;
-  name: string;
-  version: string;
-  checked: boolean | null | undefined;
-}
-
-interface FolderItem {
-  slug: string;
-  name: string;
-  checked: boolean | null | undefined;
-}
-
 @customElement("dialog-hassio-snapshot")
-class HassioSnapshotDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() private _error?: string;
-  @property() private snapshot?: HassioSnapshotDetail;
-  @property() private _folders!: FolderItem[];
-  @property() private _addons!: AddonItem[];
-  @property() private _dialogParams?: HassioSnapshotDialogParams;
-  @property() private _snapshotPassword!: string;
-  @property() private _restoreHass: boolean | null | undefined = true;
-  @query("#dialog") private _dialog!: PaperDialogElement;
+class HassioSnapshotDialog extends PolymerElement {
+  // Commented out because it breaks Polymer! Kept around for when we migrate
+  // to Lit. Now just putting ts-ignore everywhere because we need this out.
+  // Sorry future developer.
+  // public hass!: HomeAssistant;
+  // protected error?: string;
+  // private snapshot?: any;
+  // private dialogParams?: HassioSnapshotDialogParams;
+  // private restoreHass!: boolean;
+  // private snapshotPassword!: string;
 
-  public async showDialog(params: HassioSnapshotDialogParams) {
-    this.snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
-    this._folders = _computeFolders(
-      this.snapshot.folders
-    ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
-    this._addons = _computeAddons(
-      this.snapshot.addons
-    ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
-
-    this._dialogParams = params;
-
-    try {
-      this._dialog.open();
-    } catch {
-      await this.showDialog(params);
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (!this.snapshot) {
-      return html``;
-    }
+  static get template() {
     return html`
-      <ha-paper-dialog
-        id="dialog"
-        with-backdrop=""
-        .on-iron-overlay-closed=${this._dialogClosed}
-      >
-        <app-toolbar>
-          <paper-icon-button
-            icon="hassio:close"
-            dialog-dismiss=""
-          ></paper-icon-button>
-          <div main-title="">${this._computeName}</div>
-        </app-toolbar>
-        <div class="details">
-          ${this.snapshot.type === "full"
-            ? "Full snapshot"
-            : "Partial snapshot"}
-          (${this._computeSize})<br />
-          ${this._formatDatetime(this.snapshot.date)}
-        </div>
-        <div>Home Assistant:</div>
-        <paper-checkbox
-          .checked=${this._restoreHass}
-          @change="${(ev: Event) =>
-            (this._restoreHass = (ev.target as PaperCheckboxElement).checked)}"
-        >
-          Home Assistant ${this.snapshot.homeassistant}
-        </paper-checkbox>
-        ${this._folders.length
-          ? html`
-              <div>Folders:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._folders.map((item) => {
-                  return html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateFolders(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                    </paper-checkbox>
-                  `;
-                })}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this._addons.length
-          ? html`
-              <div>Add-on:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._addons.map((item) => {
-                  return html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateAddons(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                    </paper-checkbox>
-                  `;
-                })}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this.snapshot.protected
-          ? html`
-              <paper-input
-                autofocus=""
-                label="Password"
-                type="password"
-                @value-changed=${this._passwordInput}
-                .value=${this._snapshotPassword}
-              ></paper-input>
-            `
-          : ""}
-        ${this._error
-          ? html`
-              <p class="error">Error: ${this._error}</p>
-            `
-          : ""}
-
-        <div>Actions:</div>
-        <ul class="buttons">
-          <li>
-            <mwc-button @click=${this._downloadClicked}>
-              <iron-icon icon="hassio:download" class="icon"></iron-icon>
-              Download Snapshot
-            </mwc-button>
-          </li>
-          <li>
-            <mwc-button @click=${this._partialRestoreClicked}>
-              <iron-icon icon="hassio:history" class="icon"> </iron-icon>
-              Restore Selected
-            </mwc-button>
-          </li>
-          ${this.snapshot.type === "full"
-            ? html`
-                <li>
-                  <mwc-button @click=${this._fullRestoreClicked}>
-                    <iron-icon icon="hassio:history" class="icon"> </iron-icon>
-                    Wipe &amp; restore
-                  </mwc-button>
-                </li>
-              `
-            : ""}
-          <li>
-            <mwc-button @click=${this._deleteClicked}>
-              <iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
-              <span class="warning">Delete Snapshot</span>
-            </mwc-button>
-          </li>
-        </ul>
-      </ha-paper-dialog>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
+      <style include="ha-style-dialog">
         ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
@@ -283,155 +112,259 @@ class HassioSnapshotDialog extends LitElement {
         .no-margin-top {
           margin-top: 0;
         }
-      `,
-    ];
+      </style>
+      <ha-paper-dialog
+        id="dialog"
+        with-backdrop=""
+        on-iron-overlay-closed="_dialogClosed"
+      >
+        <app-toolbar>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
+          <div main-title="">[[_computeName(snapshot)]]</div>
+        </app-toolbar>
+        <div class="details">
+          [[_computeType(snapshot.type)]] ([[_computeSize(snapshot.size)]])<br />
+          [[_formatDatetime(snapshot.date)]]
+        </div>
+        <div>Home Assistant:</div>
+        <paper-checkbox checked="{{restoreHass}}">
+          Home Assistant [[snapshot.homeassistant]]
+        </paper-checkbox>
+        <template is="dom-if" if="[[_folders.length]]">
+          <div>Folders:</div>
+          <template is="dom-repeat" items="[[_folders]]">
+            <paper-checkbox checked="{{item.checked}}">
+              [[item.name]]
+            </paper-checkbox>
+          </template>
+        </template>
+        <template is="dom-if" if="[[_addons.length]]">
+          <div>Add-ons:</div>
+          <paper-dialog-scrollable class="no-margin-top">
+            <template is="dom-repeat" items="[[_addons]]" sort="_sortAddons">
+              <paper-checkbox checked="{{item.checked}}">
+                [[item.name]] <span class="details">([[item.version]])</span>
+              </paper-checkbox>
+            </template>
+          </paper-dialog-scrollable>
+        </template>
+        <template is="dom-if" if="[[snapshot.protected]]">
+          <paper-input
+            autofocus=""
+            label="Password"
+            type="password"
+            value="{{snapshotPassword}}"
+          ></paper-input>
+        </template>
+        <template is="dom-if" if="[[error]]">
+          <p class="error">Error: [[error]]</p>
+        </template>
+        <div>Actions:</div>
+        <ul class="buttons">
+          <li>
+            <mwc-button on-click="_downloadClicked">
+              <iron-icon icon="hassio:download" class="icon"></iron-icon>
+              Download Snapshot
+            </mwc-button>
+          </li>
+          <li>
+            <mwc-button on-click="_partialRestoreClicked">
+              <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+              Restore Selected
+            </mwc-button>
+          </li>
+          <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
+            <li>
+              <mwc-button on-click="_fullRestoreClicked">
+                <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+                Wipe &amp; restore
+              </mwc-button>
+            </li>
+          </template>
+          <li>
+            <mwc-button on-click="_deleteClicked">
+              <iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
+              <span class="warning">Delete Snapshot</span>
+            </mwc-button>
+          </li>
+        </ul>
+      </ha-paper-dialog>
+    `;
   }
 
-  private _updateFolders(item: FolderItem, value: boolean | null | undefined) {
-    this._folders = this._folders.map((folder) => {
-      if (folder.slug === item.slug) {
-        folder.checked = value;
-      }
-      return folder;
+  static get properties() {
+    return {
+      hass: Object,
+      dialogParams: Object,
+      snapshot: Object,
+      _folders: Object,
+      _addons: Object,
+      restoreHass: {
+        type: Boolean,
+        value: true,
+      },
+      snapshotPassword: String,
+      error: String,
+    };
+  }
+
+  public async showDialog(params: HassioSnapshotDialogParams) {
+    // @ts-ignore
+    const snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
+    this.setProperties({
+      dialogParams: params,
+      snapshot,
+      _folders: _computeFolders(snapshot.folders),
+      _addons: _computeAddons(snapshot.addons),
     });
+    (this.$.dialog as PaperDialogElement).open();
   }
 
-  private _updateAddons(item: AddonItem, value: boolean | null | undefined) {
-    this._addons = this._addons.map((addon) => {
-      if (addon.slug === item.slug) {
-        addon.checked = value;
-      }
-      return addon;
-    });
+  protected _isFullSnapshot(type) {
+    return type === "full";
   }
 
-  private _passwordInput(ev: PolymerChangedEvent<string>) {
-    this._snapshotPassword = ev.detail.value;
-  }
-
-  private _partialRestoreClicked() {
+  protected _partialRestoreClicked() {
     if (!confirm("Are you sure you want to restore this snapshot?")) {
       return;
     }
-
+    // @ts-ignore
     const addons = this._addons
       .filter((addon) => addon.checked)
       .map((addon) => addon.slug);
-
+    // @ts-ignore
     const folders = this._folders
       .filter((folder) => folder.checked)
       .map((folder) => folder.slug);
 
-    const data: {
-      homeassistant: boolean | null | undefined;
-      addons: any;
-      folders: any;
-      password?: string;
-    } = {
-      homeassistant: this._restoreHass,
+    const data = {
+      // @ts-ignore
+      homeassistant: this.restoreHass,
       addons,
       folders,
     };
-
-    if (this.snapshot!.protected) {
-      data.password = this._snapshotPassword;
+    // @ts-ignore
+    if (this.snapshot.protected) {
+      // @ts-ignore
+      data.password = this.snapshotPassword;
     }
 
+    // @ts-ignore
     this.hass
       .callApi(
         "POST",
-
-        `hassio/snapshots/${this.snapshot!.slug}/restore/partial`,
+        // @ts-ignore
+        `hassio/snapshots/${this.dialogParams!.slug}/restore/partial`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this._dialog.close();
+          (this.$.dialog as PaperDialogElement).close();
         },
         (error) => {
-          this._error = error.body.message;
+          // @ts-ignore
+          this.error = error.body.message;
         }
       );
   }
 
-  private _fullRestoreClicked() {
+  protected _fullRestoreClicked() {
     if (!confirm("Are you sure you want to restore this snapshot?")) {
       return;
     }
-
-    const data = this.snapshot!.protected
-      ? { password: this._snapshotPassword }
+    // @ts-ignore
+    const data = this.snapshot.protected
+      ? {
+          password:
+            // @ts-ignore
+            this.snapshotPassword,
+        }
       : undefined;
-
+    // @ts-ignore
     this.hass
       .callApi(
         "POST",
-        `hassio/snapshots/${this.snapshot!.slug}/restore/full`,
+        // @ts-ignore
+        `hassio/snapshots/${this.dialogParams!.slug}/restore/full`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this._dialog.close();
+          (this.$.dialog as PaperDialogElement).close();
         },
         (error) => {
-          this._error = error.body.message;
+          // @ts-ignore
+          this.error = error.body.message;
         }
       );
   }
 
-  private _deleteClicked() {
+  protected _deleteClicked() {
     if (!confirm("Are you sure you want to delete this snapshot?")) {
       return;
     }
-
+    // @ts-ignore
     this.hass
-
-      .callApi("POST", `hassio/snapshots/${this.snapshot!.slug}/remove`)
+      // @ts-ignore
+      .callApi("POST", `hassio/snapshots/${this.dialogParams!.slug}/remove`)
       .then(
         () => {
-          this._dialog.close();
-          this._dialogParams!.onDelete();
+          (this.$.dialog as PaperDialogElement).close();
+          // @ts-ignore
+          this.dialogParams!.onDelete();
         },
         (error) => {
-          this._error = error.body.message;
+          // @ts-ignore
+          this.error = error.body.message;
         }
       );
   }
 
-  private async _downloadClicked() {
-    let signedPath: { path: string };
+  protected async _downloadClicked() {
+    let signedPath;
     try {
       signedPath = await getSignedPath(
+        // @ts-ignore
         this.hass,
-        `/api/hassio/snapshots/${this.snapshot!.slug}/download`
+        // @ts-ignore
+        `/api/hassio/snapshots/${this.dialogParams!.slug}/download`
       );
     } catch (err) {
       alert(`Error: ${err.message}`);
       return;
     }
-
-    const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
+    // @ts-ignore
+    const name = this._computeName(this.snapshot).replace(/[^a-z0-9]+/gi, "_");
     const a = document.createElement("a");
     a.href = signedPath.path;
     a.download = `Hass_io_${name}.tar`;
-    this._dialog.appendChild(a);
+    this.$.dialog.appendChild(a);
     a.click();
-    this._dialog.removeChild(a);
+    this.$.dialog.removeChild(a);
   }
 
-  private get _computeName() {
-    return this.snapshot
-      ? this.snapshot.name || this.snapshot.slug
-      : "Unnamed snapshot";
+  protected _computeName(snapshot) {
+    return snapshot ? snapshot.name || snapshot.slug : "Unnamed snapshot";
   }
 
-  private get _computeSize() {
-    return Math.ceil(this.snapshot!.size * 10) / 10 + " MB";
+  protected _computeType(type) {
+    return type === "full" ? "Full snapshot" : "Partial snapshot";
   }
 
-  private _formatDatetime(datetime) {
+  protected _computeSize(size) {
+    return Math.ceil(size * 10) / 10 + " MB";
+  }
+
+  protected _sortAddons(a, b) {
+    return a.name < b.name ? -1 : 1;
+  }
+
+  protected _formatDatetime(datetime) {
     return new Date(datetime).toLocaleDateString(navigator.language, {
       weekday: "long",
       year: "numeric",
@@ -442,12 +375,13 @@ class HassioSnapshotDialog extends LitElement {
     });
   }
 
-  private _dialogClosed() {
-    this._dialogParams = undefined;
-    this.snapshot = undefined;
-    this._snapshotPassword = "";
-    this._folders = [];
-    this._addons = [];
+  protected _dialogClosed() {
+    this.setProperties({
+      dialogParams: undefined,
+      snapshot: undefined,
+      _addons: [],
+      _folders: [],
+    });
   }
 }
 

hassio/src/entrypoint.js

@@ -1,12 +1,9 @@
 window.loadES5Adapter().then(() => {
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
   // eslint-disable-next-line
   import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
   // eslint-disable-next-line
   import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
 });
-
 const styleEl = document.createElement("style");
 styleEl.innerHTML = `
 body {

hassio/src/hassio-main.ts

@@ -12,28 +12,22 @@ import {
 import { HomeAssistant } from "../../src/types";
 import {
   fetchHassioSupervisorInfo,
-  fetchHassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-  HassioHomeAssistantInfo,
-  createHassioSession,
-  HassioPanelInfo,
-} from "../../src/data/hassio/supervisor";
-import {
   fetchHassioHostInfo,
   fetchHassioHassOsInfo,
+  fetchHassioHomeAssistantInfo,
+  HassioSupervisorInfo,
   HassioHostInfo,
   HassioHassOSInfo,
-} from "../../src/data/hassio/host";
-import { fetchHassioAddonInfo } from "../../src/data/hassio/addon";
+  HassioHomeAssistantInfo,
+  fetchHassioAddonInfo,
+  createHassioSession,
+  HassioPanelInfo,
+} from "../../src/data/hassio";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-pages-with-tabs";
 import { navigate } from "../../src/common/navigate";
-import {
-  showAlertDialog,
-  AlertDialogParams,
-} from "../../src/dialogs/generic/show-dialog-box";
 
 // The register callback of the IronA11yKeysBehavior inside paper-icon-button
 // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
@@ -76,6 +70,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       },
     },
   };
+
   @property() private _supervisorInfo: HassioSupervisorInfo;
   @property() private _hostInfo: HassioHostInfo;
   @property() private _hassOsInfo?: HassioHassOSInfo;
@@ -84,12 +79,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    applyThemesOnElement(
-      this.parentElement,
-      this.hass.themes,
-      this.hass.selectedTheme,
-      true
-    );
+    applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019
     // We went to a single hass-toggle-menu event in HA 0.90. However, the
@@ -115,14 +105,6 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       })
     );
 
-    // Forward haptic events to parent window.
-    window.addEventListener("haptic", (ev) => {
-      // @ts-ignore
-      fireEvent(window.parent, ev.type, ev.detail, {
-        bubbles: false,
-      });
-    });
-
     makeDialogManager(this, document.body);
   }
 
@@ -174,81 +156,31 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
   }
 
   private async _redirectIngress(addonSlug: string) {
-    // When we trigger a navigation, we sleep to make sure we don't
-    // show the hassio dashboard before navigating away.
-    const awaitAlert = async (
-      alertParams: AlertDialogParams,
-      action: () => void
-    ) => {
-      await new Promise((resolve) => {
-        alertParams.confirm = resolve;
-        showAlertDialog(this, alertParams);
-      });
-      action();
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    };
-
-    const createSessionPromise = createHassioSession(this.hass).then(
-      () => true,
-      () => false
-    );
-
-    let addon;
-
     try {
-      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
+      const [addon] = await Promise.all([
+        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
+          throw new Error("Failed to fetch add-on info");
+        }),
+        createHassioSession(this.hass).catch(() => {
+          throw new Error("Failed to create an ingress session");
+        }),
+      ]);
+      if (!addon.ingress_url) {
+        alert("Add-on does not support Ingress");
+        return;
+      }
+      if (addon.state !== "started") {
+        alert("Add-on is not running. Please start it first");
+        navigate(this, `/hassio/addon/${addon.slug}`, true);
+        return;
+      }
+      location.assign(addon.ingress_url);
+      // await a promise that doesn't resolve, so we show the loading screen
+      // while we load the next page.
+      await new Promise(() => undefined);
     } catch (err) {
-      await awaitAlert(
-        {
-          text: "Unable to fetch add-on info to start Ingress",
-          title: "Hass.io",
-        },
-        () => history.back()
-      );
-
-      return;
+      alert("Unable to open ingress connection");
     }
-
-    if (!addon.ingress_url) {
-      await awaitAlert(
-        {
-          text: "Add-on does not support Ingress",
-          title: addon.name,
-        },
-        () => history.back()
-      );
-
-      return;
-    }
-
-    if (addon.state !== "started") {
-      await awaitAlert(
-        {
-          text: "Add-on is not running. Please start it first",
-          title: addon.name,
-        },
-        () => navigate(this, `/hassio/addon/${addon.slug}`, true)
-      );
-
-      return;
-    }
-
-    if (!(await createSessionPromise)) {
-      await awaitAlert(
-        {
-          text: "Unable to create an Ingress session",
-          title: addon.name,
-        },
-        () => history.back()
-      );
-
-      return;
-    }
-
-    location.assign(addon.ingress_url);
-    // await a promise that doesn't resolve, so we show the loading screen
-    // while we load the next page.
-    await new Promise(() => undefined);
   }
 
   private _apiCalled(ev) {

hassio/src/hassio-pages-with-tabs.ts

@@ -23,11 +23,12 @@ import scrollToTarget from "../../src/common/dom/scroll-to-target";
 import { haStyle } from "../../src/resources/styles";
 import { HomeAssistant, Route } from "../../src/types";
 import { navigate } from "../../src/common/navigate";
-import { HassioHostInfo, HassioHassOSInfo } from "../../src/data/hassio/host";
 import {
   HassioSupervisorInfo,
+  HassioHostInfo,
   HassioHomeAssistantInfo,
-} from "../../src/data/hassio/supervisor";
+  HassioHassOSInfo,
+} from "../../src/data/hassio";
 
 const HAS_REFRESH_BUTTON = ["store", "snapshots"];
 
@@ -41,7 +42,7 @@ class HassioPagesWithTabs extends LitElement {
   @property() public hassInfo!: HassioHomeAssistantInfo;
   @property() public hassOsInfo!: HassioHassOSInfo;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     const page = this._page;
     return html`
       <app-header-layout has-scrolling-region>
@@ -52,7 +53,7 @@ class HassioPagesWithTabs extends LitElement {
               .narrow=${this.narrow}
               hassio
             ></ha-menu-button>
-            <div main-title>Supervisor</div>
+            <div main-title>Hass.io</div>
             ${HAS_REFRESH_BUTTON.includes(page)
               ? html`
                   <paper-icon-button
@@ -123,7 +124,7 @@ class HassioPagesWithTabs extends LitElement {
         }
         paper-tabs {
           margin-left: 12px;
-          --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
+          --paper-tabs-selection-bar-color: #fff;
           text-transform: uppercase;
         }
       `,

hassio/src/hassio-tabs-router.ts

@@ -11,11 +11,12 @@ import "./dashboard/hassio-dashboard";
 import "./snapshots/hassio-snapshots";
 import "./addon-store/hassio-addon-store";
 import "./system/hassio-system";
-import { HassioHostInfo, HassioHassOSInfo } from "../../src/data/hassio/host";
 import {
   HassioSupervisorInfo,
+  HassioHostInfo,
   HassioHomeAssistantInfo,
-} from "../../src/data/hassio/supervisor";
+  HassioHassOSInfo,
+} from "../../src/data/hassio";
 
 @customElement("hassio-tabs-router")
 class HassioTabsRouter extends HassRouterPage {

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -9,11 +9,11 @@ import {
   css,
 } from "lit-element";
 import { HomeAssistant, Route } from "../../../src/types";
-import { createHassioSession } from "../../../src/data/hassio/supervisor";
 import {
+  createHassioSession,
   HassioAddonDetails,
   fetchHassioAddonInfo,
-} from "../../../src/data/hassio/addon";
+} from "../../../src/data/hassio";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 
@@ -23,7 +23,7 @@ class HassioIngressView extends LitElement {
   @property() public route!: Route;
   @property() private _addon?: HassioAddonDetails;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (!this._addon) {
       return html`
         <hass-loading-screen></hass-loading-screen>

hassio/src/resources/hassio-style.js

@@ -0,0 +1,66 @@
+import { css } from "lit-element";
+
+const documentContainer = document.createElement("template");
+documentContainer.setAttribute("style", "display: none;");
+
+export const hassioStyle = css`
+  .card-group {
+    margin-top: 24px;
+  }
+  .card-group .title {
+    color: var(--primary-text-color);
+    font-size: 2em;
+    padding-left: 8px;
+    margin-bottom: 8px;
+  }
+  .card-group .description {
+    font-size: 0.5em;
+    font-weight: 500;
+    margin-top: 4px;
+  }
+  .card-group paper-card {
+    --card-group-columns: 4;
+    width: calc(
+      (100% - 12px * var(--card-group-columns)) / var(--card-group-columns)
+    );
+    margin: 4px;
+    vertical-align: top;
+  }
+  @media screen and (max-width: 1200px) and (min-width: 901px) {
+    .card-group paper-card {
+      --card-group-columns: 3;
+    }
+  }
+  @media screen and (max-width: 900px) and (min-width: 601px) {
+    .card-group paper-card {
+      --card-group-columns: 2;
+    }
+  }
+  @media screen and (max-width: 600px) and (min-width: 0) {
+    .card-group paper-card {
+      width: 100%;
+      margin: 4px 0;
+    }
+    .content {
+      padding: 0;
+    }
+  }
+  ha-call-api-button {
+    font-weight: 500;
+    color: var(--primary-color);
+  }
+  .error {
+    color: var(--google-red-500);
+    margin-top: 16px;
+  }
+`;
+
+documentContainer.innerHTML = `<dom-module id="hassio-style">
+  <template>
+    <style>
+      ${hassioStyle.toString()}
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild(documentContainer.content);

hassio/src/resources/hassio-style.ts

@@ -1,51 +0,0 @@
-import { css } from "lit-element";
-
-export const hassioStyle = css`
-  .content {
-    margin: 8px;
-  }
-  h1 {
-    color: var(--primary-text-color);
-    font-size: 2em;
-    margin-bottom: 8px;
-    font-family: var(--paper-font-headline_-_font-family);
-    -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
-    font-size: var(--paper-font-headline_-_font-size);
-    font-weight: var(--paper-font-headline_-_font-weight);
-    letter-spacing: var(--paper-font-headline_-_letter-spacing);
-    line-height: var(--paper-font-headline_-_line-height);
-    padding-left: 8px;
-  }
-  .description {
-    margin-top: 4px;
-    padding-left: 8px;
-  }
-  .card-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
-  }
-  @media screen and (min-width: 640px) {
-    .card-group {
-      grid-template-columns: repeat(auto-fit, minmax(300px, 0.5fr));
-    }
-  }
-  @media screen and (min-width: 1020px) {
-    .card-group {
-      grid-template-columns: repeat(auto-fit, minmax(300px, 0.333fr));
-    }
-  }
-  @media screen and (min-width: 1300px) {
-    .card-group {
-      grid-template-columns: repeat(auto-fit, minmax(300px, 0.25fr));
-    }
-  }
-  ha-call-api-button {
-    font-weight: 500;
-    color: var(--primary-color);
-  }
-  .error {
-    color: var(--error-color);
-    margin-top: 16px;
-  }
-`;

hassio/src/snapshots/hassio-snapshots.ts

@@ -17,20 +17,19 @@ import "@polymer/paper-radio-group/paper-radio-group";
 
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
 
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
 import { HomeAssistant } from "../../../src/types";
 import {
   HassioSnapshot,
+  HassioSupervisorInfo,
   fetchHassioSnapshots,
   reloadHassioSnapshots,
   HassioFullSnapshotCreateParams,
   HassioPartialSnapshotCreateParams,
   createHassioFullSnapshot,
   createHassioPartialSnapshot,
-} from "../../../src/data/hassio/snapshot";
-import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+} from "../../../src/data/hassio";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 
@@ -76,17 +75,17 @@ class HassioSnapshots extends LitElement {
     await this._updateSnapshots();
   }
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <div class="content">
-        <h1>
-          Create snapshot
-        </h1>
-        <p class="description">
-          Snapshots allow you to easily backup and restore all data of your Home
-          Assistant instance.
-        </p>
         <div class="card-group">
+          <div class="title">
+            Create snapshot
+            <div class="description">
+              Snapshots allow you to easily backup and restore all data of your
+              Hass.io instance.
+            </div>
+          </div>
           <paper-card>
             <div class="card-content">
               <paper-input
@@ -173,8 +172,8 @@ class HassioSnapshots extends LitElement {
           </paper-card>
         </div>
 
-        <h1>Available snapshots</h1>
         <div class="card-group">
+          <div class="title">Available snapshots</div>
           ${this._snapshots === undefined
             ? undefined
             : this._snapshots.length === 0
@@ -335,7 +334,6 @@ class HassioSnapshots extends LitElement {
 
   static get styles(): CSSResultArray {
     return [
-      haStyle,
       hassioStyle,
       css`
         paper-radio-group {

hassio/src/system/hassio-host-info.js

@@ -0,0 +1,201 @@
+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";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
+
+import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
+
+class HassioHostInfo extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        paper-card {
+          display: inline-block;
+          width: 400px;
+          margin-left: 8px;
+        }
+        .card-content {
+          height: 200px;
+          color: var(--primary-text-color);
+        }
+        @media screen and (max-width: 830px) {
+          paper-card {
+            margin-top: 8px;
+            margin-left: 0;
+            width: 100%;
+          }
+          .card-content {
+            height: auto;
+          }
+        }
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-top: 16px;
+        }
+        mwc-button.info {
+          max-width: calc(50% - 12px);
+        }
+        table.info {
+          margin-bottom: 10px;
+        }
+      </style>
+      <paper-card>
+        <div class="card-content">
+          <h2>Host system</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Hostname</td>
+                <td>[[data.hostname]]</td>
+              </tr>
+              <tr>
+                <td>System</td>
+                <td>[[data.operating_system]]</td>
+              </tr>
+              <template is="dom-if" if="[[data.deployment]]">
+                <tr>
+                  <td>Deployment</td>
+                  <td>[[data.deployment]]</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <mwc-button raised on-click="_showHardware" class="info">
+            Hardware
+          </mwc-button>
+          <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
+            <mwc-button raised on-click="_changeHostnameClicked" class="info">
+              Change hostname
+            </mwc-button>
+          </template>
+          <template is="dom-if" if="[[errors]]">
+            <div class="errors">Error: [[errors]]</div>
+          </template>
+        </div>
+        <div class="card-actions">
+          <template is="dom-if" if="[[_featureAvailable(data, 'reboot')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/reboot"
+              >Reboot</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_featureAvailable(data, 'shutdown')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/shutdown"
+              >Shutdown</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_featureAvailable(data, 'hassos')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/hassos/config/sync"
+              title="Load HassOS configs or updates from USB"
+              >Import from USB</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_computeUpdateAvailable(hassOsInfo)]]">
+            <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update"
+              >Update</ha-call-api-button
+            >
+          </template>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      data: Object,
+      hassOsInfo: Object,
+      errors: String,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+  }
+
+  apiCalled(ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === "object") {
+      this.errors = response.body.message || "Unknown error";
+    } else {
+      this.errors = response.body;
+    }
+  }
+
+  _computeUpdateAvailable(data) {
+    return data && data.version !== data.version_latest;
+  }
+
+  _featureAvailable(data, feature) {
+    return data && data.features && data.features.includes(feature);
+  }
+
+  _showHardware() {
+    this.hass
+      .callApi("get", "hassio/hardware/info")
+      .then(
+        (resp) => this._objectToMarkdown(resp.data),
+        () => "Error getting hardware info"
+      )
+      .then((content) => {
+        showHassioMarkdownDialog(this, {
+          title: "Hardware",
+          content: content,
+        });
+      });
+  }
+
+  _objectToMarkdown(obj, indent = "") {
+    let data = "";
+    Object.keys(obj).forEach((key) => {
+      if (typeof obj[key] !== "object") {
+        data += `${indent}- ${key}: ${obj[key]}\n`;
+      } else {
+        data += `${indent}- ${key}:\n`;
+        if (Array.isArray(obj[key])) {
+          if (obj[key].length) {
+            data +=
+              `${indent}    - ` + obj[key].join(`\n${indent}    - `) + "\n";
+          }
+        } else {
+          data += this._objectToMarkdown(obj[key], `    ${indent}`);
+        }
+      }
+    });
+    return data;
+  }
+
+  _changeHostnameClicked() {
+    const curHostname = this.data.hostname;
+    const hostname = prompt("Please enter a new hostname:", curHostname);
+    if (hostname && hostname !== curHostname) {
+      this.hass.callApi("post", "hassio/host/options", { hostname });
+    }
+  }
+}
+
+customElements.define("hassio-host-info", HassioHostInfo);

hassio/src/system/hassio-host-info.ts

@@ -1,229 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import {
-  HassioHostInfo as HassioHostInfoType,
-  HassioHassOSInfo,
-} from "../../../src/data/hassio/host";
-import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
-import { HomeAssistant } from "../../../src/types";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-
-import "../../../src/components/buttons/ha-call-api-button";
-
-@customElement("hassio-host-info")
-class HassioHostInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public hostInfo!: HassioHostInfoType;
-  @property() public hassOsInfo!: HassioHassOSInfo;
-  @property() private _errors?: string;
-
-  public render(): TemplateResult | void {
-    return html`
-      <paper-card>
-        <div class="card-content">
-          <h2>Host system</h2>
-          <table class="info">
-            <tbody>
-              <tr>
-                <td>Hostname</td>
-                <td>${this.hostInfo.hostname}</td>
-              </tr>
-              <tr>
-                <td>System</td>
-                <td>${this.hostInfo.operating_system}</td>
-              </tr>
-              ${this.hostInfo.deployment
-                ? html`
-                    <tr>
-                      <td>Deployment</td>
-                      <td>${this.hostInfo.deployment}</td>
-                    </tr>
-                  `
-                : ""}
-            </tbody>
-          </table>
-          <mwc-button raised @click=${this._showHardware} class="info">
-            Hardware
-          </mwc-button>
-          ${this.hostInfo.features.includes("hostname")
-            ? html`
-                <mwc-button
-                  raised
-                  @click=${this._changeHostnameClicked}
-                  class="info"
-                >
-                  Change hostname
-                </mwc-button>
-              `
-            : ""}
-          ${this._errors
-            ? html`
-                <div class="errors">Error: ${this._errors}</div>
-              `
-            : ""}
-        </div>
-        <div class="card-actions">
-          ${this.hostInfo.features.includes("reboot")
-            ? html`
-                <ha-call-api-button
-                  class="warning"
-                  .hass=${this.hass}
-                  path="hassio/host/reboot"
-                  >Reboot</ha-call-api-button
-                >
-              `
-            : ""}
-          ${this.hostInfo.features.includes("shutdown")
-            ? html`
-                <ha-call-api-button
-                  class="warning"
-                  .hass=${this.hass}
-                  path="hassio/host/shutdown"
-                  >Shutdown</ha-call-api-button
-                >
-              `
-            : ""}
-          ${this.hostInfo.features.includes("hassos")
-            ? html`
-                <ha-call-api-button
-                  class="warning"
-                  .hass=${this.hass}
-                  path="hassio/hassos/config/sync"
-                  title="Load HassOS configs or updates from USB"
-                  >Import from USB</ha-call-api-button
-                >
-              `
-            : ""}
-          ${this.hostInfo.version !== this.hostInfo.version_latest
-            ? html`
-                <ha-call-api-button
-                  .hass=${this.hass}
-                  path="hassio/hassos/update"
-                  >Update</ha-call-api-button
-                >
-              `
-            : ""}
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        paper-card {
-          height: 100%;
-          width: 100%;
-        }
-        .card-content {
-          color: var(--primary-text-color);
-          box-sizing: border-box;
-          height: calc(100% - 47px);
-        }
-        .info {
-          width: 100%;
-        }
-        .info td:nth-child(2) {
-          text-align: right;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-top: 16px;
-        }
-        mwc-button.info {
-          max-width: calc(50% - 12px);
-        }
-        table.info {
-          margin-bottom: 10px;
-        }
-        .warning {
-          --mdc-theme-primary: var(--google-red-500);
-        }
-      `,
-    ];
-  }
-
-  protected firstUpdated(): void {
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  private _apiCalled(ev): void {
-    if (ev.detail.success) {
-      this._errors = undefined;
-      return;
-    }
-
-    const response = ev.detail.response;
-
-    this._errors =
-      typeof response.body === "object"
-        ? response.body.message || "Unknown error"
-        : response.body;
-  }
-
-  private async _showHardware(): Promise<void> {
-    try {
-      const content = this._objectToMarkdown(
-        await fetchHassioHardwareInfo(this.hass)
-      );
-      showHassioMarkdownDialog(this, {
-        title: "Hardware",
-        content,
-      });
-    } catch (err) {
-      showHassioMarkdownDialog(this, {
-        title: "Hardware",
-        content: "Error getting hardware info",
-      });
-    }
-  }
-
-  private _objectToMarkdown(obj, indent = ""): string {
-    let data = "";
-    Object.keys(obj).forEach((key) => {
-      if (typeof obj[key] !== "object") {
-        data += `${indent}- ${key}: ${obj[key]}\n`;
-      } else {
-        data += `${indent}- ${key}:\n`;
-        if (Array.isArray(obj[key])) {
-          if (obj[key].length) {
-            data +=
-              `${indent}    - ` + obj[key].join(`\n${indent}    - `) + "\n";
-          }
-        } else {
-          data += this._objectToMarkdown(obj[key], `    ${indent}`);
-        }
-      }
-    });
-
-    return data;
-  }
-
-  private _changeHostnameClicked(): void {
-    const curHostname = this.hostInfo.hostname;
-    const hostname = prompt("Please enter a new hostname:", curHostname);
-    if (hostname && hostname !== curHostname) {
-      this.hass.callApi("POST", "hassio/host/options", { hostname });
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-host-info": HassioHostInfo;
-  }
-}

hassio/src/system/hassio-supervisor-info.js

@@ -0,0 +1,175 @@
+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";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
+
+class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        paper-card {
+          display: inline-block;
+          width: 400px;
+        }
+        .card-content {
+          height: 200px;
+          color: var(--primary-text-color);
+        }
+        @media screen and (max-width: 830px) {
+          paper-card {
+            width: 100%;
+          }
+          .card-content {
+            height: auto;
+          }
+        }
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-top: 16px;
+        }
+      </style>
+      <paper-card>
+        <div class="card-content">
+          <h2>Hass.io supervisor</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Version</td>
+                <td>[[data.version]]</td>
+              </tr>
+              <tr>
+                <td>Latest version</td>
+                <td>[[data.last_version]]</td>
+              </tr>
+              <template is="dom-if" if='[[!_equals(data.channel, "stable")]]'>
+                <tr>
+                  <td>Channel</td>
+                  <td>[[data.channel]]</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <template is="dom-if" if="[[errors]]">
+            <div class="errors">Error: [[errors]]</div>
+          </template>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/reload"
+            >Reload</ha-call-api-button
+          >
+          <template is="dom-if" if="[[computeUpdateAvailable(data)]]">
+            <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/update"
+              >Update</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if='[[_equals(data.channel, "beta")]]'>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/supervisor/options"
+              data="[[leaveBeta]]"
+              >Leave beta channel</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if='[[_equals(data.channel, "stable")]]'>
+            <mwc-button
+              on-click="_joinBeta"
+              class="warning"
+              title="Get beta updates for Home Assistant (RCs), supervisor and host"
+              >Join beta channel</mwc-button
+            >
+          </template>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      data: Object,
+      errors: String,
+      leaveBeta: {
+        type: Object,
+        value: { channel: "stable" },
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+  }
+
+  apiCalled(ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === "object") {
+      this.errors = response.body.message || "Unknown error";
+    } else {
+      this.errors = response.body;
+    }
+  }
+
+  computeUpdateAvailable(data) {
+    return data.version !== data.last_version;
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _joinBeta() {
+    if (
+      !confirm(`WARNING:
+Beta releases are for testers and early adopters and can contain unstable code changes. Make sure you have backups of your data before you activate this feature.
+
+This inludes beta releases for:
+- Home Assistant (Release Candidates)
+- Hass.io supervisor
+- Host system`)
+    ) {
+      return;
+    }
+    const method = "post";
+    const path = "hassio/supervisor/options";
+    const data = { channel: "beta" };
+
+    const eventData = {
+      method: method,
+      path: path,
+      data: data,
+    };
+
+    this.hass
+      .callApi(method, path, data)
+      .then(
+        (resp) => {
+          eventData.success = true;
+          eventData.response = resp;
+        },
+        (resp) => {
+          eventData.success = false;
+          eventData.response = resp;
+        }
+      )
+      .then(() => {
+        this.fire("hass-api-called", eventData);
+      });
+  }
+}
+
+customElements.define("hassio-supervisor-info", HassioSupervisorInfo);

hassio/src/system/hassio-supervisor-info.ts

@@ -1,177 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import {
-  HassioSupervisorInfo as HassioSupervisorInfoType,
-  setSupervisorOption,
-  SupervisorOptions,
-} from "../../../src/data/hassio/supervisor";
-import { HomeAssistant } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-
-import "../../../src/components/buttons/ha-call-api-button";
-
-@customElement("hassio-supervisor-info")
-class HassioSupervisorInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public supervisorInfo!: HassioSupervisorInfoType;
-  @property() private _errors?: string;
-
-  public render(): TemplateResult | void {
-    return html`
-      <paper-card>
-        <div class="card-content">
-          <h2>Supervisor</h2>
-          <table class="info">
-            <tbody>
-              <tr>
-                <td>Version</td>
-                <td>${this.supervisorInfo.version}</td>
-              </tr>
-              <tr>
-                <td>Latest version</td>
-                <td>${this.supervisorInfo.last_version}</td>
-              </tr>
-              ${this.supervisorInfo.channel !== "stable"
-                ? html`
-                    <tr>
-                      <td>Channel</td>
-                      <td>${this.supervisorInfo.channel}</td>
-                    </tr>
-                  `
-                : ""}
-            </tbody>
-          </table>
-          ${this._errors
-            ? html`
-                <div class="errors">Error: ${this._errors}</div>
-              `
-            : ""}
-        </div>
-        <div class="card-actions">
-          <ha-call-api-button .hass=${this.hass} path="hassio/supervisor/reload"
-            >Reload</ha-call-api-button
-          >
-          ${this.supervisorInfo.version !== this.supervisorInfo.last_version
-            ? html`
-                <ha-call-api-button
-                  .hass=${this.hass}
-                  path="hassio/supervisor/update"
-                  >Update</ha-call-api-button
-                >
-              `
-            : ""}
-          ${this.supervisorInfo.channel === "beta"
-            ? html`
-                <ha-call-api-button
-                  .hass=${this.hass}
-                  path="hassio/supervisor/options"
-                  .data=${{ channel: "stable" }}
-                  >Leave beta channel</ha-call-api-button
-                >
-              `
-            : ""}
-          ${this.supervisorInfo.channel === "stable"
-            ? html`
-                <mwc-button
-                  @click=${this._joinBeta}
-                  class="warning"
-                  title="Get beta updates for Home Assistant (RCs), supervisor and host"
-                  >Join beta channel</mwc-button
-                >
-              `
-            : ""}
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        paper-card {
-          height: 100%;
-          width: 100%;
-        }
-        .card-content {
-          color: var(--primary-text-color);
-          box-sizing: border-box;
-          height: calc(100% - 47px);
-        }
-        .info {
-          width: 100%;
-        }
-        .info td:nth-child(2) {
-          text-align: right;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-top: 16px;
-        }
-      `,
-    ];
-  }
-
-  protected firstUpdated(): void {
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  private _apiCalled(ev): void {
-    if (ev.detail.success) {
-      this._errors = undefined;
-      return;
-    }
-
-    const response = ev.detail.response;
-
-    this._errors =
-      typeof response.body === "object"
-        ? response.body.message || "Unknown error"
-        : response.body;
-  }
-
-  private async _joinBeta() {
-    if (
-      !confirm(`WARNING:
-Beta releases are for testers and early adopters and can contain unstable code changes. Make sure you have backups of your data before you activate this feature.
-
-This includes beta releases for:
-- Home Assistant (Release Candidates)
-- Hass.io supervisor
-- Host system`)
-    ) {
-      return;
-    }
-    try {
-      const data: SupervisorOptions = { channel: "beta" };
-      await setSupervisorOption(this.hass, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._errors = `Error joining beta channel, ${err.body?.message || err}`;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-supervisor-info": HassioSupervisorInfo;
-  }
-}

hassio/src/system/hassio-supervisor-log.js

@@ -0,0 +1,64 @@
+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 { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
+
+class HassioSupervisorLog extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="ha-style">
+        paper-card {
+          display: block;
+        }
+        pre {
+          overflow-x: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+        .fg-green {
+          color: var(--primary-text-color) !important;
+        }
+      </style>
+      ${ANSI_HTML_STYLE}
+      <paper-card>
+        <div class="card-content" id="content"></div>
+        <div class="card-actions">
+          <mwc-button on-click="refresh">Refresh</mwc-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.loadData();
+  }
+
+  loadData() {
+    this.hass.callApi("get", "hassio/supervisor/logs").then(
+      (text) => {
+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(parseTextToColoredPre(text));
+      },
+      () => {
+        this.$.content.innerHTML =
+          '<span class="fg-red bold">Error fetching logs</span>';
+      }
+    );
+  }
+
+  refresh() {
+    this.loadData();
+  }
+}
+
+customElements.define("hassio-supervisor-log", HassioSupervisorLog);

hassio/src/system/hassio-supervisor-log.ts

@@ -1,90 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-  query,
-} from "lit-element";
-
-import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import { fetchSupervisorLogs } from "../../../src/data/hassio/supervisor";
-
-@customElement("hassio-supervisor-log")
-class HassioSupervisorLog extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() private _error?: string;
-  @query("#content") private _logContent!: HTMLDivElement;
-
-  public async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-    await this._loadData();
-  }
-
-  public render(): TemplateResult | void {
-    return html`
-      <paper-card>
-        ${this._error
-          ? html`
-              <div class="errors">${this._error}</div>
-            `
-          : ""}
-        <div class="card-content" id="content"></div>
-        <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      ANSI_HTML_STYLE,
-      css`
-        paper-card {
-          width: 100%;
-        }
-        pre {
-          white-space: pre-wrap;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-      `,
-    ];
-  }
-
-  private async _loadData(): Promise<void> {
-    this._error = undefined;
-    try {
-      const content = await fetchSupervisorLogs(this.hass);
-      while (this._logContent.lastChild) {
-        this._logContent.removeChild(this._logContent.lastChild as Node);
-      }
-      this._logContent.appendChild(parseTextToColoredPre(content));
-    } catch (err) {
-      this._error = `Failed to get supervisor logs, ${err.body?.message ||
-        err}`;
-    }
-  }
-
-  private async _refresh(): Promise<void> {
-    await this._loadData();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-supervisor-log": HassioSupervisorLog;
-  }
-}

hassio/src/system/hassio-system.js

@@ -0,0 +1,51 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./hassio-host-info";
+import "./hassio-supervisor-info";
+import "./hassio-supervisor-log";
+
+class HassioSystem extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .content {
+          margin: 4px;
+          color: var(--primary-text-color);
+        }
+        .title {
+          margin-top: 24px;
+          color: var(--primary-text-color);
+          font-size: 2em;
+          padding-left: 8px;
+          margin-bottom: 8px;
+        }
+      </style>
+      <div class="content">
+        <div class="title">Information</div>
+        <hassio-supervisor-info
+          hass="[[hass]]"
+          data="[[supervisorInfo]]"
+        ></hassio-supervisor-info>
+        <hassio-host-info
+          hass="[[hass]]"
+          data="[[hostInfo]]"
+          hass-os-info="[[hassOsInfo]]"
+        ></hassio-host-info>
+        <div class="title">System log</div>
+        <hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      supervisorInfo: Object,
+      hostInfo: Object,
+      hassOsInfo: Object,
+    };
+  }
+}
+
+customElements.define("hassio-system", HassioSystem);

hassio/src/system/hassio-system.ts

@@ -1,81 +0,0 @@
-import "@polymer/paper-menu-button/paper-menu-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import {
-  HassioHostInfo,
-  HassioHassOSInfo,
-} from "../../../src/data/hassio/host";
-import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
-import { HomeAssistant } from "../../../src/types";
-
-import "./hassio-host-info";
-import "./hassio-supervisor-info";
-import "./hassio-supervisor-log";
-
-@customElement("hassio-system")
-class HassioSystem extends LitElement {
-  @property() public hass!: HomeAssistant;
-  @property() public supervisorInfo!: HassioSupervisorInfo;
-  @property() public hostInfo!: HassioHostInfo;
-  @property() public hassOsInfo!: HassioHassOSInfo;
-
-  public render(): TemplateResult | void {
-    return html`
-      <div class="content">
-        <h1>Information</h1>
-        <div class="card-group">
-          <hassio-supervisor-info
-            .hass=${this.hass}
-            .supervisorInfo=${this.supervisorInfo}
-          ></hassio-supervisor-info>
-          <hassio-host-info
-            .hass=${this.hass}
-            .hostInfo=${this.hostInfo}
-            .hassOsInfo=${this.hassOsInfo}
-          ></hassio-host-info>
-        </div>
-        <h1>System log</h1>
-        <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        .content {
-          margin: 8px;
-          color: var(--primary-text-color);
-        }
-        .title {
-          margin-top: 24px;
-          color: var(--primary-text-color);
-          font-size: 2em;
-          padding-left: 8px;
-          margin-bottom: 8px;
-        }
-        hassio-supervisor-log {
-          width: 100%;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-system": HassioSystem;
-  }
-}

package.json

@@ -9,7 +9,6 @@
   "scripts": {
     "build": "script/build_frontend",
     "lint": "eslint src hassio/src gallery/src && tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts' && tsc",
-    "lint-hassio": "eslint hassio/src && tslint 'hassio/src/**/*.ts'",
     "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
     "test": "npm run lint && npm run mocha",
     "docker_build": "sh ./script/docker_run.sh build $npm_package_version",
@@ -18,14 +17,16 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material/chips": "^5.0.0",
-    "@material/mwc-button": "^0.13.0",
-    "@material/mwc-checkbox": "^0.13.0",
-    "@material/mwc-dialog": "^0.13.0",
-    "@material/mwc-fab": "^0.13.0",
-    "@material/mwc-ripple": "^0.13.0",
-    "@material/mwc-switch": "^0.13.0",
-    "@mdi/svg": "4.9.95",
+    "@material/chips": "^3.2.0",
+    "@material/data-table": "^3.2.0",
+    "@material/mwc-base": "^0.10.0",
+    "@material/mwc-button": "^0.10.0",
+    "@material/mwc-checkbox": "^0.10.0",
+    "@material/mwc-dialog": "^0.10.0",
+    "@material/mwc-fab": "^0.10.0",
+    "@material/mwc-ripple": "^0.10.0",
+    "@material/mwc-switch": "^0.10.0",
+    "@mdi/svg": "4.7.95",
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-localize-behavior": "^3.0.1",
     "@polymer/app-route": "^3.0.2",
@@ -68,9 +69,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.3.7",
-    "@types/resize-observer-browser": "^0.1.3",
-    "@vaadin/vaadin-combo-box": "^5.0.10",
-    "@vaadin/vaadin-date-picker": "^4.0.7",
+    "@vaadin/vaadin-combo-box": "^5.0.6",
+    "@vaadin/vaadin-date-picker": "^4.0.3",
     "@webcomponents/shadycss": "^1.9.0",
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "~2.8.0",
@@ -78,17 +78,15 @@
     "codemirror": "^5.49.0",
     "cpx": "^1.5.0",
     "deep-clone-simple": "^1.1.1",
-    "deep-freeze": "^0.0.1",
     "es6-object-assign": "^1.1.0",
     "fecha": "^3.0.2",
     "fuse.js": "^3.4.4",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "5.0.0",
+    "home-assistant-js-websocket": "^4.4.0",
     "intl-messageformat": "^2.2.0",
     "js-yaml": "^3.13.1",
     "leaflet": "^1.4.0",
-    "leaflet-draw": "^1.0.4",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.0",
     "lit-virtualizer": "^0.4.2",
@@ -96,12 +94,10 @@
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
     "moment": "^2.24.0",
-    "node-vibrant": "^3.1.5",
     "preact": "^8.4.2",
     "preact-compat": "^3.18.4",
     "react-big-calendar": "^0.20.4",
     "regenerator-runtime": "^0.13.2",
-    "resize-observer": "^1.0.0",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
     "tslib": "^1.10.0",
@@ -110,17 +106,16 @@
     "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-external-helpers": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-typescript": "^7.8.3",
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-external-helpers": "^7.7.4",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-transform-react-jsx": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
     "@types/chromecast-caf-sender": "^1.0.1",
@@ -128,7 +123,6 @@
     "@types/hls.js": "^0.12.3",
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
-    "@types/leaflet-draw": "^1.0.1",
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^5.2.6",
     "@types/webspeechapi": "^0.0.29",
@@ -146,11 +140,13 @@
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
+    "gulp-hash": "^4.2.2",
+    "gulp-hash-filename": "^2.0.1",
     "gulp-insert": "^0.5.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
-    "gulp-rename": "^2.0.0",
+    "gulp-rename": "^1.4.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
@@ -173,8 +169,6 @@
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",
     "typescript": "^3.7.2",
-    "vinyl-buffer": "^1.0.1",
-    "vinyl-source-stream": "^2.0.0",
     "web-component-tester": "^6.9.2",
     "webpack": "^4.40.2",
     "webpack-cli": "^3.3.9",
@@ -188,15 +182,7 @@
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "^1.1.2",
-    "@material/button": "^5.0.0",
-    "@material/checkbox": "^5.0.0",
-    "@material/dialog": "^5.0.0",
-    "@material/fab": "^5.0.0",
-    "@material/switch": "^5.0.0",
-    "@material/ripple": "^5.0.0",
-    "@material/dom": "^5.0.0",
-    "@material/touch-target": "^5.0.0"
+    "lit-html": "^1.1.2"
   },
   "main": "src/home-assistant.js",
   "husky": {

polymer.json

@@ -11,13 +11,17 @@
     "src/panels/dev-template/ha-panel-dev-template.js",
     "src/panels/history/ha-panel-history.js",
     "src/panels/iframe/ha-panel-iframe.js",
+    "src/panels/kiosk/ha-panel-kiosk.js",
     "src/panels/logbook/ha-panel-logbook.js",
     "src/panels/map/ha-panel-map.js",
     "src/panels/shopping-list/ha-panel-shopping-list.js",
     "src/panels/mailbox/ha-panel-mailbox.js",
     "hassio/src/entrypoint.js"
   ],
-  "sources": ["src/**/*", "!src/translations/*"],
+  "sources": [
+    "src/**/*",
+    "!src/translations/*"
+  ],
   "lint": {
     "rules": ["polymer-3"],
     "ignoreWarnings": ["could-not-resolve-reference", "could-not-load"],

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200311.1",
+    version="20200108.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/auth/ha-authorize.ts

@@ -91,6 +91,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         .redirectUri="${this.redirectUri}"
         .oauth2State="${this.oauth2State}"
         .authProvider="${this._authProvider}"
+        .step="{{step}}"
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0

src/cards/ha-badges-card.ts

@@ -0,0 +1,45 @@
+import { TemplateResult, html } from "lit-html";
+import { customElement, LitElement, property } from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import "../components/entity/ha-state-label-badge";
+
+import { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-badges-card")
+class HaBadgesCard extends LitElement {
+  @property() public hass?: HomeAssistant;
+  @property() public states?: HassEntity[];
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.states) {
+      return html``;
+    }
+
+    return html`
+      ${this.states.map(
+        (state) => html`
+          <ha-state-label-badge
+            .hass=${this.hass}
+            .state=${state}
+            @click=${this._handleClick}
+          ></ha-state-label-badge>
+        `
+      )}
+    `;
+  }
+
+  private _handleClick(ev: Event) {
+    const entityId = ((ev.target as any).state as HassEntity).entity_id;
+    fireEvent(this, "hass-more-info", {
+      entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-badges-card": HaBadgesCard;
+  }
+}

src/cards/ha-camera-card.js

@@ -0,0 +1,127 @@
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { fetchThumbnailUrlWithCache } from "../data/camera";
+
+const UPDATE_INTERVAL = 10000; // ms
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style include="paper-material-styles">
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+          cursor: pointer;
+          min-height: 48px;
+          line-height: 0;
+        }
+        .camera-feed {
+          width: 100%;
+          height: auto;
+          border-radius: 2px;
+        }
+        .caption {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0px;
+          right: 0px;
+          bottom: 0px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
+
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          color: white;
+        }
+      </style>
+
+      <template is="dom-if" if="[[cameraFeedSrc]]">
+        <img
+          src="[[cameraFeedSrc]]"
+          class="camera-feed"
+          alt="[[_computeStateName(stateObj)]]"
+          on-load="_imageLoaded"
+          on-error="_imageError"
+        />
+      </template>
+      <div class="caption">
+        [[_computeStateName(stateObj)]]
+        <template is="dom-if" if="[[!imageLoaded]]">
+          ([[localize('ui.card.camera.not_available')]])
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: {
+        type: Object,
+        observer: "updateCameraFeedSrc",
+      },
+      cameraFeedSrc: {
+        type: String,
+        value: "",
+      },
+      imageLoaded: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("click", () => this.cardTapped());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.timer = setInterval(() => this.updateCameraFeedSrc(), UPDATE_INTERVAL);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this.timer);
+  }
+
+  _imageLoaded() {
+    this.imageLoaded = true;
+  }
+
+  _imageError() {
+    this.imageLoaded = false;
+  }
+
+  cardTapped() {
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  async updateCameraFeedSrc() {
+    this.cameraFeedSrc = await fetchThumbnailUrlWithCache(
+      this.hass,
+      this.stateObj.entity_id
+    );
+  }
+
+  _computeStateName(stateObj) {
+    return computeStateName(stateObj);
+  }
+}
+customElements.define("ha-camera-card", HaCameraCard);

src/cards/ha-card-chooser.js

@@ -0,0 +1,81 @@
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./ha-camera-card";
+import "./ha-entities-card";
+import "./ha-history_graph-card";
+import "./ha-media_player-card";
+import "./ha-persistent_notification-card";
+import "./ha-plant-card";
+import "./ha-weather-card";
+
+import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
+
+class HaCardChooser extends PolymerElement {
+  static get properties() {
+    return {
+      cardData: {
+        type: Object,
+        observer: "cardDataChanged",
+      },
+    };
+  }
+
+  _updateCard(newData) {
+    dynamicContentUpdater(
+      this,
+      "HA-" + newData.cardType.toUpperCase() + "-CARD",
+      newData
+    );
+  }
+
+  createObserver() {
+    this._updatesAllowed = false;
+    this.observer = new IntersectionObserver((entries) => {
+      if (!entries.length) return;
+      if (entries[0].isIntersecting) {
+        this.style.height = "";
+        if (this._detachedChild) {
+          this.appendChild(this._detachedChild);
+          this._detachedChild = null;
+        }
+        this._updateCard(this.cardData); // Don't use 'newData' as it might have changed.
+        this._updatesAllowed = true;
+      } else {
+        // Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
+        // following cards would trigger the observer at once.
+        const offsetHeight = this.offsetHeight;
+        this.style.height = `${offsetHeight || 48}px`;
+        if (this.lastChild) {
+          this._detachedChild = this.lastChild;
+          this.removeChild(this.lastChild);
+        }
+        this._updatesAllowed = false;
+      }
+    });
+    this.observer.observe(this);
+  }
+
+  cardDataChanged(newData) {
+    if (!newData) return;
+    // ha-entities-card is exempt from observer as it doesn't load heavy resources.
+    // and usually doesn't load external resources (except for entity_picture).
+    const eligibleToObserver =
+      window.IntersectionObserver && newData.cardType !== "entities";
+    if (!eligibleToObserver) {
+      if (this.observer) {
+        this.observer.unobserve(this);
+        this.observer = null;
+      }
+      this.style.height = "";
+      this._updateCard(newData);
+      return;
+    }
+    if (!this.observer) {
+      this.createObserver();
+    }
+    if (this._updatesAllowed) {
+      this._updateCard(newData);
+    }
+  }
+}
+customElements.define("ha-card-chooser", HaCardChooser);

src/cards/ha-entities-card.js

@@ -0,0 +1,182 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/entity/ha-entity-toggle";
+import "../components/ha-card";
+import "../state-summary/state-card-content";
+
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { stateMoreInfoType } from "../common/entity/state_more_info_type";
+import { canToggleState } from "../common/entity/can_toggle_state";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+
+class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style include="iron-flex"></style>
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        .states {
+          margin: -4px 0;
+        }
+        .state {
+          padding: 4px 0;
+        }
+        .header {
+          @apply --paper-font-headline;
+          /* overwriting line-height +8 because entity-toggle can be 40px height,
+           compensating this with reduced padding */
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 4px 0 12px;
+        }
+        .header .name {
+          @apply --paper-font-common-nowrap;
+        }
+        ha-entity-toggle {
+          margin-left: 16px;
+        }
+        .more-info {
+          cursor: pointer;
+        }
+      </style>
+
+      <ha-card>
+        <template is="dom-if" if="[[title]]">
+          <div
+            class$="[[computeTitleClass(groupEntity)]]"
+            on-click="entityTapped"
+          >
+            <div class="flex name">[[title]]</div>
+            <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
+              <ha-entity-toggle
+                hass="[[hass]]"
+                state-obj="[[groupEntity]]"
+              ></ha-entity-toggle>
+            </template>
+          </div>
+        </template>
+        <div class="states">
+          <template
+            is="dom-repeat"
+            items="[[states]]"
+            on-dom-change="addTapEvents"
+          >
+            <div class$="[[computeStateClass(item)]]">
+              <state-card-content
+                hass="[[hass]]"
+                class="state-card"
+                state-obj="[[item]]"
+              ></state-card-content>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      states: Array,
+      groupEntity: Object,
+      title: {
+        type: String,
+        computed: "computeTitle(states, groupEntity, localize)",
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    // We need to save a single bound function reference to ensure the event listener
+    // can identify it properly.
+    this.entityTapped = this.entityTapped.bind(this);
+  }
+
+  computeTitle(states, groupEntity, localize) {
+    if (groupEntity) {
+      return computeStateName(groupEntity).trim();
+    }
+    const domain = computeStateDomain(states[0]);
+    return (
+      (localize && localize(`domain.${domain}`)) || domain.replace(/_/g, " ")
+    );
+  }
+
+  computeTitleClass(groupEntity) {
+    let classes = "header horizontal layout center ";
+    if (groupEntity) {
+      classes += "more-info";
+    }
+    return classes;
+  }
+
+  computeStateClass(stateObj) {
+    return stateMoreInfoType(stateObj) !== "hidden"
+      ? "state more-info"
+      : "state";
+  }
+
+  addTapEvents() {
+    const cards = this.root.querySelectorAll(".state");
+    cards.forEach((card) => {
+      if (card.classList.contains("more-info")) {
+        card.addEventListener("click", this.entityTapped);
+      } else {
+        card.removeEventListener("click", this.entityTapped);
+      }
+    });
+  }
+
+  entityTapped(ev) {
+    const item = this.root
+      .querySelector("dom-repeat")
+      .itemForElement(ev.target);
+    let entityId;
+    if (!item && !this.groupEntity) {
+      return;
+    }
+    ev.stopPropagation();
+
+    if (item) {
+      entityId = item.entity_id;
+    } else {
+      entityId = this.groupEntity.entity_id;
+    }
+    this.fire("hass-more-info", { entityId: entityId });
+  }
+
+  showGroupToggle(groupEntity, states) {
+    if (
+      !groupEntity ||
+      !states ||
+      groupEntity.attributes.control === "hidden" ||
+      (groupEntity.state !== "on" && groupEntity.state !== "off")
+    ) {
+      return false;
+    }
+
+    // Only show if we can toggle 2+ entities in group
+    let canToggleCount = 0;
+    for (let i = 0; i < states.length; i++) {
+      if (!canToggleState(this.hass, states[i])) {
+        continue;
+      }
+
+      canToggleCount++;
+
+      if (canToggleCount > 1) {
+        break;
+      }
+    }
+
+    return canToggleCount > 1;
+  }
+}
+customElements.define("ha-entities-card", HaEntitiesCard);

src/cards/ha-media_player-card.js

@@ -0,0 +1,409 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-progress/paper-progress";
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import HassMediaPlayerEntity from "../util/hass-media-player-model";
+import { fetchMediaPlayerThumbnailWithCache } from "../data/media-player";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style
+        include="paper-material-styles iron-flex iron-flex-alignment iron-positioning"
+      >
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+        }
+
+        .banner {
+          position: relative;
+          background-color: white;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+        }
+
+        .banner:before {
+          display: block;
+          content: "";
+          width: 100%;
+          /* removed .25% from 16:9 ratio to fix YT black bars */
+          padding-top: 56%;
+          transition: padding-top 0.8s;
+        }
+
+        .banner.no-cover {
+          background-position: center center;
+          background-image: url(/static/images/card_media_player_bg.png);
+          background-repeat: no-repeat;
+          background-color: var(--primary-color);
+        }
+
+        .banner.content-type-music:before {
+          padding-top: 100%;
+        }
+
+        .banner.content-type-game:before {
+          padding-top: 100%;
+        }
+
+        .banner.no-cover:before {
+          padding-top: 88px;
+        }
+
+        .banner > .cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+
+          background-position: center center;
+          background-size: cover;
+          transition: opacity 0.8s;
+          opacity: 1;
+        }
+
+        .banner.is-off > .cover {
+          opacity: 0;
+        }
+
+        .banner > .caption {
+          @apply --paper-font-caption;
+
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+
+          background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+
+          padding: 8px 16px;
+
+          font-size: 14px;
+          font-weight: 500;
+          color: white;
+
+          transition: background-color 0.5s;
+        }
+
+        .banner.is-off > .caption {
+          background-color: initial;
+        }
+
+        .banner > .caption .title {
+          @apply --paper-font-common-nowrap;
+          font-size: 1.2em;
+          margin: 8px 0 4px;
+        }
+
+        .progress {
+          width: 100%;
+          height: var(--paper-progress-height, 4px);
+          margin-top: calc(-1 * var(--paper-progress-height, 4px));
+          --paper-progress-active-color: var(--accent-color);
+          --paper-progress-container-color: rgba(200, 200, 200, 0.5);
+        }
+
+        .controls {
+          position: relative;
+          @apply --paper-font-body1;
+          padding: 8px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+          background-color: var(--paper-card-background-color, white);
+        }
+
+        .controls paper-icon-button {
+          width: 44px;
+          height: 44px;
+        }
+
+        .playback-controls {
+          direction: ltr;
+        }
+
+        paper-icon-button {
+          opacity: var(--dark-primary-opacity);
+        }
+
+        paper-icon-button[disabled] {
+          opacity: var(--dark-disabled-opacity);
+        }
+
+        paper-icon-button.primary {
+          width: 56px !important;
+          height: 56px !important;
+          background-color: var(--primary-color);
+          color: white;
+          border-radius: 50%;
+          padding: 8px;
+          transition: background-color 0.5s;
+        }
+
+        paper-icon-button.primary[disabled] {
+          background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+        }
+
+        [invisible] {
+          visibility: hidden !important;
+        }
+      </style>
+
+      <div
+        class$="[[computeBannerClasses(playerObj, _coverShowing, _coverLoadError)]]"
+      >
+        <div class="cover" id="cover"></div>
+
+        <div class="caption">
+          [[_computeStateName(stateObj)]]
+          <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
+          [[playerObj.secondaryTitle]]<br />
+        </div>
+      </div>
+
+      <paper-progress
+        max="[[stateObj.attributes.media_duration]]"
+        value="[[playbackPosition]]"
+        hidden$="[[computeHideProgress(playerObj)]]"
+        class="progress"
+      ></paper-progress>
+
+      <div class="controls layout horizontal justified">
+        <paper-icon-button
+          aria-label="Turn off"
+          icon="hass:power"
+          on-click="handleTogglePower"
+          invisible$="[[computeHidePowerButton(playerObj)]]"
+          class="self-center secondary"
+        ></paper-icon-button>
+
+        <div class="playback-controls">
+          <paper-icon-button
+            aria-label="Previous track"
+            icon="hass:skip-previous"
+            invisible$="[[!playerObj.supportsPreviousTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePrevious"
+          ></paper-icon-button>
+          <paper-icon-button
+            aria-label="Play or Pause"
+            class="primary"
+            icon="[[computePlaybackControlIcon(playerObj)]]"
+            invisible$="[[!computePlaybackControlIcon(playerObj)]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePlaybackControl"
+          ></paper-icon-button>
+          <paper-icon-button
+            aria-label="Next track"
+            icon="hass:skip-next"
+            invisible$="[[!playerObj.supportsNextTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handleNext"
+          ></paper-icon-button>
+        </div>
+
+        <paper-icon-button
+          aria-label="More information."
+          icon="hass:dots-vertical"
+          on-click="handleOpenMoreInfo"
+          class="self-center secondary"
+        ></paper-icon-button>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      playerObj: {
+        type: Object,
+        computed: "computePlayerObj(hass, stateObj)",
+        observer: "playerObjChanged",
+      },
+      playbackControlIcon: {
+        type: String,
+        computed: "computePlaybackControlIcon(playerObj)",
+      },
+      playbackPosition: Number,
+      _coverShowing: {
+        type: Boolean,
+        value: false,
+      },
+      _coverLoadError: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  async playerObjChanged(playerObj, oldPlayerObj) {
+    if (playerObj.isPlaying && playerObj.showProgress) {
+      if (!this._positionTracking) {
+        this._positionTracking = setInterval(
+          () => this.updatePlaybackPosition(),
+          1000
+        );
+      }
+    } else if (this._positionTracking) {
+      clearInterval(this._positionTracking);
+      this._positionTracking = null;
+    }
+    if (playerObj.showProgress) {
+      this.updatePlaybackPosition();
+    }
+
+    const picture = playerObj.stateObj.attributes.entity_picture;
+    const oldPicture =
+      oldPlayerObj && oldPlayerObj.stateObj.attributes.entity_picture;
+
+    if (picture !== oldPicture && !picture) {
+      this.$.cover.style.backgroundImage = "";
+      return;
+    }
+    if (picture === oldPicture) {
+      return;
+    }
+
+    // We have a new picture url
+    // If entity picture is non-relative, we use that url directly.
+    if (picture.substr(0, 1) !== "/") {
+      this._coverShowing = true;
+      this._coverLoadError = false;
+      this.$.cover.style.backgroundImage = `url(${picture})`;
+      return;
+    }
+
+    try {
+      const {
+        content_type: contentType,
+        content,
+      } = await fetchMediaPlayerThumbnailWithCache(
+        this.hass,
+        playerObj.stateObj.entity_id
+      );
+      this._coverShowing = true;
+      this._coverLoadError = false;
+      this.$.cover.style.backgroundImage = `url(data:${contentType};base64,${content})`;
+    } catch (err) {
+      this._coverShowing = false;
+      this._coverLoadError = true;
+      this.$.cover.style.backgroundImage = "";
+    }
+  }
+
+  updatePlaybackPosition() {
+    this.playbackPosition = this.playerObj.currentProgress;
+  }
+
+  computeBannerClasses(playerObj, coverShowing, coverLoadError) {
+    var cls = "banner";
+
+    if (!playerObj) {
+      return cls;
+    }
+
+    if (playerObj.isOff || playerObj.isIdle) {
+      cls += " is-off no-cover";
+    } else if (
+      !playerObj.stateObj.attributes.entity_picture ||
+      coverLoadError ||
+      !coverShowing
+    ) {
+      cls += " no-cover";
+    } else if (playerObj.stateObj.attributes.media_content_type === "music") {
+      cls += " content-type-music";
+    } else if (playerObj.stateObj.attributes.media_content_type === "game") {
+      cls += " content-type-game";
+    }
+    return cls;
+  }
+
+  computeHideProgress(playerObj) {
+    return !playerObj.showProgress;
+  }
+
+  computeHidePowerButton(playerObj) {
+    return playerObj.isOff
+      ? !playerObj.supportsTurnOn
+      : !playerObj.supportsTurnOff;
+  }
+
+  computePlayerObj(hass, stateObj) {
+    return new HassMediaPlayerEntity(hass, stateObj);
+  }
+
+  computePrimaryText(localize, playerObj) {
+    return (
+      playerObj.primaryTitle ||
+      localize(`state.media_player.${playerObj.stateObj.state}`) ||
+      localize(`state.default.${playerObj.stateObj.state}`) ||
+      playerObj.stateObj.state
+    );
+  }
+
+  computePlaybackControlIcon(playerObj) {
+    if (playerObj.isPlaying) {
+      return playerObj.supportsPause ? "hass:pause" : "hass:stop";
+    }
+    if (playerObj.hasMediaControl || playerObj.isOff || playerObj.isIdle) {
+      if (
+        playerObj.hasMediaControl &&
+        playerObj.supportsPause &&
+        !playerObj.isPaused
+      ) {
+        return "hass:play-pause";
+      }
+      return playerObj.supportsPlay ? "hass:play" : null;
+    }
+    return "";
+  }
+
+  _computeStateName(stateObj) {
+    return computeStateName(stateObj);
+  }
+
+  handleNext(ev) {
+    ev.stopPropagation();
+    this.playerObj.nextTrack();
+  }
+
+  handleOpenMoreInfo(ev) {
+    ev.stopPropagation();
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  handlePlaybackControl(ev) {
+    ev.stopPropagation();
+    this.playerObj.mediaPlayPause();
+  }
+
+  handlePrevious(ev) {
+    ev.stopPropagation();
+    this.playerObj.previousTrack();
+  }
+
+  handleTogglePower(ev) {
+    ev.stopPropagation();
+    this.playerObj.togglePower();
+  }
+}
+customElements.define("ha-media_player-card", HaMediaPlayerCard);

src/cards/ha-persistent_notification-card.js

@@ -0,0 +1,76 @@
+import "@material/mwc-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/ha-card";
+import "../components/ha-markdown";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { computeObjectId } from "../common/entity/compute_object_id";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        ha-markdown p:first-child {
+          margin-top: 0;
+        }
+        ha-markdown p:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        mwc-button {
+          margin: 8px;
+        }
+      </style>
+
+      <ha-card header="[[computeTitle(stateObj)]]">
+        <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
+        <mwc-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
+        >
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+    };
+  }
+
+  computeTitle(stateObj) {
+    return stateObj.attributes.title || computeStateName(stateObj);
+  }
+
+  dismissTap(ev) {
+    ev.preventDefault();
+    this.hass.callService("persistent_notification", "dismiss", {
+      notification_id: computeObjectId(this.stateObj.entity_id),
+    });
+  }
+}
+customElements.define(
+  "ha-persistent_notification-card",
+  HaPersistentNotificationCard
+);

src/cards/ha-plant-card.js

@@ -0,0 +1,165 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/ha-card";
+import "../components/ha-icon";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+
+class HaPlantCard extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        .banner {
+          display: flex;
+          align-items: flex-end;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          padding-top: 12px;
+        }
+        .has-plant-image .banner {
+          padding-top: 30%;
+        }
+        .header {
+          @apply --paper-font-headline;
+          line-height: 40px;
+          padding: 8px 16px;
+        }
+        .has-plant-image .header {
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          padding: 16px;
+          color: white;
+          width: 100%;
+          background: rgba(0, 0, 0, var(--dark-secondary-opacity));
+        }
+        .content {
+          display: flex;
+          justify-content: space-between;
+          padding: 16px 32px 24px 32px;
+        }
+        .has-plant-image .content {
+          padding-bottom: 16px;
+        }
+        ha-icon {
+          color: var(--paper-item-icon-color);
+          margin-bottom: 8px;
+        }
+        .attributes {
+          cursor: pointer;
+        }
+        .attributes div {
+          text-align: center;
+        }
+        .problem {
+          color: var(--google-red-500);
+          font-weight: bold;
+        }
+        .uom {
+          color: var(--secondary-text-color);
+        }
+      </style>
+
+      <ha-card
+        class$="[[computeImageClass(stateObj.attributes.entity_picture)]]"
+      >
+        <div
+          class="banner"
+          style="background-image:url([[stateObj.attributes.entity_picture]])"
+        >
+          <div class="header">[[computeTitle(stateObj)]]</div>
+        </div>
+        <div class="content">
+          <template
+            is="dom-repeat"
+            items="[[computeAttributes(stateObj.attributes)]]"
+          >
+            <div class="attributes" on-click="attributeClicked">
+              <div>
+                <ha-icon
+                  icon="[[computeIcon(item, stateObj.attributes.battery)]]"
+                ></ha-icon>
+              </div>
+              <div
+                class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]"
+              >
+                [[computeValue(stateObj.attributes, item)]]
+              </div>
+              <div class="uom">
+                [[computeUom(stateObj.attributes.unit_of_measurement_dict,
+                item)]]
+              </div>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      config: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this.sensors = {
+      moisture: "hass:water",
+      temperature: "hass:thermometer",
+      brightness: "hass:white-balance-sunny",
+      conductivity: "hass:emoticon-poop",
+      battery: "hass:battery",
+    };
+  }
+
+  computeTitle(stateObj) {
+    return (this.config && this.config.name) || computeStateName(stateObj);
+  }
+
+  computeAttributes(data) {
+    return Object.keys(this.sensors).filter((key) => key in data);
+  }
+
+  computeIcon(attr, batLvl) {
+    const icon = this.sensors[attr];
+    if (attr === "battery") {
+      if (batLvl <= 5) {
+        return `${icon}-alert`;
+      }
+      if (batLvl < 95) {
+        return `${icon}-${Math.round(batLvl / 10 - 0.01) * 10}`;
+      }
+    }
+    return icon;
+  }
+
+  computeValue(attributes, attr) {
+    return attributes[attr];
+  }
+
+  computeUom(dict, attr) {
+    return dict[attr] || "";
+  }
+
+  computeAttributeClass(problem, attr) {
+    return problem.indexOf(attr) === -1 ? "" : "problem";
+  }
+
+  computeImageClass(entityPicture) {
+    return entityPicture ? "has-plant-image" : "";
+  }
+
+  attributeClicked(ev) {
+    this.fire("hass-more-info", {
+      entityId: this.stateObj.attributes.sensors[ev.model.item],
+    });
+  }
+}
+
+customElements.define("ha-plant-card", HaPlantCard);

src/cards/ha-weather-card.js

@@ -0,0 +1,383 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+
+import "../components/ha-card";
+import "../components/ha-icon";
+
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { computeRTL } from "../common/util/compute_rtl";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+
+        .content {
+          padding: 0 20px 20px;
+        }
+
+        ha-icon {
+          color: var(--paper-item-icon-color);
+        }
+
+        .header {
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-headline_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          text-rendering: var(
+            --paper-font-common-expensive-kerning_-_text-rendering
+          );
+          opacity: var(--dark-primary-opacity);
+          padding: 24px 16px 16px;
+          display: flex;
+          align-items: baseline;
+        }
+
+        .name {
+          margin-left: 16px;
+          font-size: 16px;
+          color: var(--secondary-text-color);
+        }
+
+        :host([rtl]) .name {
+          margin-left: 0px;
+          margin-right: 16px;
+        }
+
+        .now {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+
+        .main {
+          display: flex;
+          align-items: center;
+          margin-right: 32px;
+        }
+
+        :host([rtl]) .main {
+          margin-right: 0px;
+        }
+
+        .main ha-icon {
+          --iron-icon-height: 72px;
+          --iron-icon-width: 72px;
+          margin-right: 8px;
+        }
+
+        :host([rtl]) .main ha-icon {
+          margin-right: 0px;
+        }
+
+        .main .temp {
+          font-size: 52px;
+          line-height: 1em;
+          position: relative;
+        }
+
+        :host([rtl]) .main .temp {
+          direction: ltr;
+          margin-right: 28px;
+        }
+
+        .main .temp span {
+          font-size: 24px;
+          line-height: 1em;
+          position: absolute;
+          top: 4px;
+        }
+
+        .measurand {
+          display: inline-block;
+        }
+
+        :host([rtl]) .measurand {
+          direction: ltr;
+        }
+
+        .forecast {
+          margin-top: 16px;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .forecast div {
+          flex: 0 0 auto;
+          text-align: center;
+        }
+
+        .forecast .icon {
+          margin: 4px 0;
+          text-align: center;
+        }
+
+        :host([rtl]) .forecast .temp {
+          direction: ltr;
+        }
+
+        .weekday {
+          font-weight: bold;
+        }
+
+        .attributes,
+        .templow,
+        .precipitation {
+          color: var(--secondary-text-color);
+        }
+
+        :host([rtl]) .precipitation {
+          direction: ltr;
+        }
+      </style>
+      <ha-card>
+        <div class="header">
+          [[computeState(stateObj.state, localize)]]
+          <div class="name">[[computeName(stateObj)]]</div>
+        </div>
+        <div class="content">
+          <div class="now">
+            <div class="main">
+              <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
+                <ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
+              </template>
+              <div class="temp">
+                [[stateObj.attributes.temperature]]<span
+                  >[[getUnit('temperature')]]</span
+                >
+              </div>
+            </div>
+            <div class="attributes">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.pressure)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.air_pressure')]]:
+                  <span class="measurand">
+                    [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+                  </span>
+                </div>
+              </template>
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.humidity)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.humidity')]]:
+                  <span class="measurand"
+                    >[[stateObj.attributes.humidity]] %</span
+                  >
+                </div>
+              </template>
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.wind_speed)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.wind_speed')]]:
+                  <span class="measurand">
+                    [[getWindSpeed(stateObj.attributes.wind_speed)]]
+                  </span>
+                  [[getWindBearing(stateObj.attributes.wind_bearing, localize)]]
+                </div>
+              </template>
+            </div>
+          </div>
+          <template is="dom-if" if="[[forecast]]">
+            <div class="forecast">
+              <template is="dom-repeat" items="[[forecast]]">
+                <div>
+                  <div class="weekday">
+                    [[computeDate(item.datetime)]]<br />
+                    <template is="dom-if" if="[[!_showValue(item.templow)]]">
+                      [[computeTime(item.datetime)]]
+                    </template>
+                  </div>
+                  <template is="dom-if" if="[[_showValue(item.condition)]]">
+                    <div class="icon">
+                      <ha-icon
+                        icon="[[getWeatherIcon(item.condition)]]"
+                      ></ha-icon>
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.temperature)]]">
+                    <div class="temp">
+                      [[item.temperature]] [[getUnit('temperature')]]
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.templow)]]">
+                    <div class="templow">
+                      [[item.templow]] [[getUnit('temperature')]]
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.precipitation)]]">
+                    <div class="precipitation">
+                      [[item.precipitation]] [[getUnit('precipitation')]]
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      config: Object,
+      stateObj: Object,
+      forecast: {
+        type: Array,
+        computed: "computeForecast(stateObj.attributes.forecast)",
+      },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.cardinalDirections = [
+      "N",
+      "NNE",
+      "NE",
+      "ENE",
+      "E",
+      "ESE",
+      "SE",
+      "SSE",
+      "S",
+      "SSW",
+      "SW",
+      "WSW",
+      "W",
+      "WNW",
+      "NW",
+      "NNW",
+      "N",
+    ];
+    this.weatherIcons = {
+      "clear-night": "hass:weather-night",
+      cloudy: "hass:weather-cloudy",
+      exceptional: "hass:alert-circle-outline",
+      fog: "hass:weather-fog",
+      hail: "hass:weather-hail",
+      lightning: "hass:weather-lightning",
+      "lightning-rainy": "hass:weather-lightning-rainy",
+      partlycloudy: "hass:weather-partly-cloudy",
+      pouring: "hass:weather-pouring",
+      rainy: "hass:weather-rainy",
+      snowy: "hass:weather-snowy",
+      "snowy-rainy": "hass:weather-snowy-rainy",
+      sunny: "hass:weather-sunny",
+      windy: "hass:weather-windy",
+      "windy-variant": "hass:weather-windy-variant",
+    };
+  }
+
+  ready() {
+    this.addEventListener("click", this._onClick);
+    super.ready();
+  }
+
+  _onClick() {
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  computeForecast(forecast) {
+    return forecast && forecast.slice(0, 5);
+  }
+
+  getUnit(measure) {
+    const lengthUnit = this.hass.config.unit_system.length || "";
+    switch (measure) {
+      case "air_pressure":
+        return lengthUnit === "km" ? "hPa" : "inHg";
+      case "length":
+        return lengthUnit;
+      case "precipitation":
+        return lengthUnit === "km" ? "mm" : "in";
+      default:
+        return this.hass.config.unit_system[measure] || "";
+    }
+  }
+
+  computeState(state, localize) {
+    return localize(`state.weather.${state}`) || state;
+  }
+
+  computeName(stateObj) {
+    return (this.config && this.config.name) || computeStateName(stateObj);
+  }
+
+  showWeatherIcon(condition) {
+    return condition in this.weatherIcons;
+  }
+
+  getWeatherIcon(condition) {
+    return this.weatherIcons[condition];
+  }
+
+  windBearingToText(degree) {
+    const degreenum = parseInt(degree);
+    if (isFinite(degreenum)) {
+      return this.cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
+    }
+    return degree;
+  }
+
+  getWindSpeed(speed) {
+    return `${speed} ${this.getUnit("length")}/h`;
+  }
+
+  getWindBearing(bearing, localize) {
+    if (bearing != null) {
+      const cardinalDirection = this.windBearingToText(bearing);
+      return `(${localize(
+        `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
+      ) || cardinalDirection})`;
+    }
+    return ``;
+  }
+
+  _showValue(item) {
+    return typeof item !== "undefined" && item !== null;
+  }
+
+  computeDate(data) {
+    const date = new Date(data);
+    return date.toLocaleDateString(this.hass.language, { weekday: "short" });
+  }
+
+  computeTime(data) {
+    const date = new Date(data);
+    return date.toLocaleTimeString(this.hass.language, { hour: "numeric" });
+  }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
+}
+customElements.define("ha-weather-card", HaWeatherCard);