diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml new file mode 100644 index 0000000000..f03f0dcbd0 --- /dev/null +++ b/.github/workflows/codeql-analysis.yml @@ -0,0 +1,60 @@ +name: "CodeQL" + +on: + push: + branches: [dev, master] + pull_request: + # The branches below must be a subset of the branches above + branches: [dev] + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + + strategy: + fail-fast: false + matrix: + # Override automatic language detection by changing the below list + # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] + language: ['javascript'] + # Learn more... + # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + with: + # We must fetch at least the immediate parents so that if this is + # a pull request then we can checkout the head. + fetch-depth: 2 + + # If this run was triggered by a pull request event, then checkout + # the head of the pull request instead of the merge commit. + - run: git checkout HEAD^2 + if: ${{ github.event_name == 'pull_request' }} + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 + + # ℹ️ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl + + # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language + + #- run: | + # make bootstrap + # make release + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/build-scripts/removedIcons.json b/build-scripts/removedIcons.json index ed3b46bbfa..fe51488c70 100644 --- a/build-scripts/removedIcons.json +++ b/build-scripts/removedIcons.json @@ -1,267 +1 @@ -[ - { - "path": "M17.5,15.61C17.33,15.37 9.53,5.4 9.27,5.08C9,4.75 9.08,4.65 9.13,4.59C9.22,4.5 9.36,4.5 9.93,4.5C10.26,4.5 13.59,4.5 13.94,4.47C14.66,4.47 14.78,4.53 14.85,4.56C14.93,4.58 15.13,4.75 15.26,4.92C15.33,5 22.32,13.36 22.39,13.45C22.46,13.54 22.59,13.69 22.67,13.84C22.76,14 22.77,14.18 22.64,14.25C22.56,14.3 18.7,15.89 18.59,15.93C18.5,16 18.27,16.06 18.11,16.04C18,16 17.77,15.92 17.5,15.61M21.47,15.42L21.75,15.47C21.75,15.47 22.68,15.65 22.77,15.67C22.87,15.69 22.96,15.76 22.95,15.79C22.94,15.87 22.9,15.91 22.83,15.95C22.77,16 18.58,18.58 18.5,18.62C18.43,18.66 18.33,18.72 18.11,18.75C17.7,18.83 16.91,18.61 16.66,18.56C16.41,18.5 6.15,16.23 6.06,16.2C5.97,16.17 5.91,16.16 5.9,16.08C5.89,15.94 6.11,15.88 6.28,15.81C6.46,15.75 11.28,14 11.45,13.93C11.62,13.86 11.84,13.84 11.95,13.83C12.06,13.82 12.73,13.93 13.03,13.97C13.34,14 14.2,14.15 14.2,14.15L16.16,16.7C16.5,17.09 16.72,17.25 17,17.28C17.15,17.29 17.31,17.25 17.42,17.2C17.5,17.16 21.47,15.42 21.47,15.42M10.25,9.18L11.96,11.37L12,11.45V11.5C11.96,11.54 8.93,14.32 8.91,14.35L5.72,15.5C5.72,15.5 5.63,15.55 5.58,15.58C5.53,15.61 5.47,15.67 5.5,15.82C5.5,15.87 5.5,16.59 5.5,16.79L1.56,18.04C1.37,18.1 1,18.23 0.95,18.19C0.88,18.14 0.97,18.03 1,17.97C1.06,17.91 9.08,10 9.39,9.7C9.84,9.24 10.25,9.18 10.25,9.18", - "name": "accusoft" - }, - { - "path": "M4.94,11.12C5.23,11.12 5.5,11.16 5.76,11.23C5.77,9.09 7.5,7.35 9.65,7.35C11.27,7.35 12.67,8.35 13.24,9.77C13.83,9 14.74,8.53 15.76,8.53C17.5,8.53 18.94,9.95 18.94,11.71C18.94,11.95 18.91,12.2 18.86,12.43C19.1,12.34 19.37,12.29 19.65,12.29C20.95,12.29 22,13.35 22,14.65C22,15.95 20.95,17 19.65,17C18.35,17 6.36,17 4.94,17C3.32,17 2,15.68 2,14.06C2,12.43 3.32,11.12 4.94,11.12Z", - "name": "amazon-drive" - }, - { - "path": "M8,11.5A1.25,1.25 0 0,0 6.75,12.75A1.25,1.25 0 0,0 8,14A1.25,1.25 0 0,0 9.25,12.75A1.25,1.25 0 0,0 8,11.5M16,11.5A1.25,1.25 0 0,0 14.75,12.75A1.25,1.25 0 0,0 16,14A1.25,1.25 0 0,0 17.25,12.75A1.25,1.25 0 0,0 16,11.5M12,7C13.5,7 14.9,7.33 16.18,7.91L18.34,5.75C18.73,5.36 19.36,5.36 19.75,5.75C20.14,6.14 20.14,6.77 19.75,7.16L17.95,8.96C20.41,10.79 22,13.71 22,17H2C2,13.71 3.59,10.79 6.05,8.96L4.25,7.16C3.86,6.77 3.86,6.14 4.25,5.75C4.64,5.36 5.27,5.36 5.66,5.75L7.82,7.91C9.1,7.33 10.5,7 12,7Z", - "name": "android-head" - }, - { - "path": "M2,16.25C2,16.25 4,3.75 12,3.75C20,3.75 22,16.25 22,16.25C22,16.25 20,20.25 12,20.25C4,20.25 2,16.25 2,16.25M3.35,15.65C3.35,15.65 4.3,19 12,19C17,19 20,17.8 20.65,15.85C21.3,13.9 15.65,7.6 14.65,7.6C13.65,7.6 11.2,12 10.45,12C8.45,12 8.9,10 7.15,10C5.4,10 3.35,15.65 3.35,15.65Z", - "name": "basecamp" - }, - { - "path": "M7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7C10.87,7 9.84,7.37 9,8V2.46C9.95,2.16 10.95,2 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,8.3 4,5.07 7,3.34V12M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z", - "name": "beats" - }, - { - "path": "M19.58,12.27C19.54,11.65 19.33,11.18 18.96,10.86C18.59,10.54 18.13,10.38 17.58,10.38C17,10.38 16.5,10.55 16.19,10.89C15.86,11.23 15.65,11.69 15.57,12.27M21.92,12.04C22,12.45 22,13.04 22,13.81H15.5C15.55,14.71 15.85,15.33 16.44,15.69C16.79,15.92 17.22,16.03 17.73,16.03C18.26,16.03 18.69,15.89 19,15.62C19.2,15.47 19.36,15.27 19.5,15H21.88C21.82,15.54 21.53,16.07 21,16.62C20.22,17.5 19.1,17.92 17.66,17.92C16.47,17.92 15.43,17.55 14.5,16.82C13.62,16.09 13.16,14.9 13.16,13.25C13.16,11.7 13.57,10.5 14.39,9.7C15.21,8.87 16.27,8.46 17.58,8.46C18.35,8.46 19.05,8.6 19.67,8.88C20.29,9.16 20.81,9.59 21.21,10.2C21.58,10.73 21.81,11.34 21.92,12.04M9.58,14.07C9.58,13.42 9.31,12.97 8.79,12.73C8.5,12.6 8.08,12.53 7.54,12.5H4.87V15.84H7.5C8.04,15.84 8.46,15.77 8.76,15.62C9.31,15.35 9.58,14.83 9.58,14.07M4.87,10.46H7.5C8.04,10.46 8.5,10.36 8.82,10.15C9.16,9.95 9.32,9.58 9.32,9.06C9.32,8.5 9.1,8.1 8.66,7.91C8.27,7.78 7.78,7.72 7.19,7.72H4.87M11.72,12.42C12.04,12.92 12.2,13.53 12.2,14.24C12.2,15 12,15.64 11.65,16.23C11.41,16.62 11.12,16.94 10.77,17.21C10.37,17.5 9.9,17.72 9.36,17.83C8.82,17.94 8.24,18 7.61,18H2V5.55H8C9.53,5.58 10.6,6 11.23,6.88C11.61,7.41 11.8,8.04 11.8,8.78C11.8,9.54 11.61,10.15 11.23,10.61C11,10.87 10.7,11.11 10.28,11.32C10.91,11.55 11.39,11.92 11.72,12.42M20.06,7.32H15.05V6.07H20.06V7.32Z", - "name": "behance" - }, - { - "path": "M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z", - "name": "blackberry" - }, - { - "path": "M12,3A9,9 0 0,1 21,12A9,9 0 0,1 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M5.94,8.5C4,11.85 5.15,16.13 8.5,18.06C11.85,20 18.85,7.87 15.5,5.94C12.15,4 7.87,5.15 5.94,8.5Z", - "name": "cisco-webex" - }, - { - "path": "M11.9,14.5H10.8V9.5H11.9C13.5,9.5 14.6,10.4 14.6,12C14.6,13.6 13.5,14.5 11.9,14.5M11.9,7H8.1V17H11.8C15.3,17 17.4,14.9 17.4,12V12C17.4,9.1 15.4,7 11.9,7M12,20C10.1,20 8.3,19.3 6.9,18.1L6.2,17.5L4.5,17.7L5.2,16.1L4.9,15.3C4.4,14.2 4.2,13.1 4.2,11.9C4.2,7.5 7.8,3.9 12.1,3.9C16.4,3.9 19.9,7.6 19.9,12C19.9,16.4 16.3,20 12,20M12,2C6.5,2 2.1,6.5 2.1,12C2.1,13.5 2.4,14.9 3,16.2L1.4,20.3L5.7,19.7C7.4,21.2 9.7,22.1 12.1,22.1C17.6,22.1 22,17.6 22,12.1C22,6.6 17.5,2 12,2Z", - "name": "disqus-outline" - }, - { - "path": "M16.42,18.42C16,16.5 15.5,14.73 15,13.17C15.5,13.1 16,13.06 16.58,13.06H16.6V13.06H16.6C17.53,13.06 18.55,13.18 19.66,13.43C19.28,15.5 18.08,17.27 16.42,18.42M12,19.8C10.26,19.8 8.66,19.23 7.36,18.26C7.64,17.81 8.23,16.94 9.18,16.04C10.14,15.11 11.5,14.15 13.23,13.58C13.82,15.25 14.36,17.15 14.77,19.29C13.91,19.62 13,19.8 12,19.8M4.2,12C4.2,11.96 4.2,11.93 4.2,11.89C4.42,11.9 4.71,11.9 5.05,11.9H5.06C6.62,11.89 9.36,11.76 12.14,10.89C12.29,11.22 12.44,11.56 12.59,11.92C10.73,12.54 9.27,13.53 8.19,14.5C7.16,15.46 6.45,16.39 6.04,17C4.9,15.66 4.2,13.91 4.2,12M8.55,5C9.1,5.65 10.18,7.06 11.34,9.25C9,9.96 6.61,10.12 5.18,10.12C5.14,10.12 5.1,10.12 5.06,10.12H5.05C4.81,10.12 4.6,10.12 4.43,10.11C5,7.87 6.5,6 8.55,5M12,4.2C13.84,4.2 15.53,4.84 16.86,5.91C15.84,7.14 14.5,8 13.03,8.65C12,6.67 11,5.25 10.34,4.38C10.88,4.27 11.43,4.2 12,4.2M18.13,7.18C19.1,8.42 19.71,9.96 19.79,11.63C18.66,11.39 17.6,11.28 16.6,11.28V11.28H16.59C15.79,11.28 15.04,11.35 14.33,11.47C14.16,11.05 14,10.65 13.81,10.26C15.39,9.57 16.9,8.58 18.13,7.18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z", - "name": "dribbble" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15.09,16.5C14.81,15.14 14.47,13.91 14.08,12.82L15.2,12.74H15.22V12.74C15.87,12.74 16.59,12.82 17.36,13C17.09,14.44 16.26,15.69 15.09,16.5M12,17.46C10.79,17.46 9.66,17.06 8.76,16.39C8.95,16.07 9.36,15.46 10,14.83C10.7,14.18 11.64,13.5 12.86,13.11C13.28,14.27 13.65,15.6 13.94,17.1C13.33,17.33 12.68,17.46 12,17.46M6.54,12V11.92L7.14,11.93V11.93C8.24,11.93 10.15,11.83 12.1,11.22L12.41,11.94C11.11,12.38 10.09,13.07 9.34,13.76C8.61,14.42 8.12,15.08 7.83,15.5C7.03,14.56 6.54,13.34 6.54,12M9.59,7.11C9.97,7.56 10.73,8.54 11.54,10.08C9.89,10.57 8.23,10.68 7.22,10.68H7.14V10.68H6.7C7.09,9.11 8.17,7.81 9.59,7.11M12,6.54C13.29,6.54 14.47,7 15.41,7.74C14.69,8.6 13.74,9.22 12.72,9.66C12,8.27 11.31,7.28 10.84,6.67C11.21,6.59 11.6,6.54 12,6.54M16.29,8.63C16.97,9.5 17.4,10.57 17.45,11.74C16.66,11.58 15.92,11.5 15.22,11.5V11.5C14.66,11.5 14.13,11.54 13.63,11.63L13.27,10.78C14.37,10.3 15.43,9.61 16.29,8.63M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z", - "name": "dribbble-box" - }, - { - "path": "M6.72,20.78C8.23,20.71 10.07,20.78 11.87,20.78C13.72,20.78 15.62,20.66 17.12,20.78C17.72,20.83 18.28,21.19 18.77,20.87C19.16,20.38 18.87,19.71 18.96,19.05C19.12,17.78 20.28,16.27 18.59,15.95C17.87,16.61 18.35,17.23 17.95,18.05C17.45,19.03 15.68,19.37 14,19.5C12.54,19.62 10,19.76 9.5,18.77C9.04,17.94 9.29,16.65 9.29,15.58C9.29,14.38 9.16,13.22 9.5,12.3C11.32,12.43 13.7,11.69 15,12.5C15.87,13 15.37,14.06 16.38,14.4C17.07,14.21 16.7,13.32 16.66,12.5C16.63,11.94 16.63,11.19 16.66,10.57C16.69,9.73 17,8.76 16.1,8.74C15.39,9.3 15.93,10.23 15.18,10.75C14.95,10.92 14.43,11 14.08,11C12.7,11.17 10.54,11.05 9.38,10.84C9.23,9.16 9.24,6.87 9.38,5.19C10,4.57 11.45,4.54 12.42,4.55C14.13,4.55 16.79,4.7 17.3,5.55C17.58,6 17.36,7 17.85,7.1C18.85,7.33 18.36,5.55 18.41,4.73C18.44,4.11 18.71,3.72 18.59,3.27C18.27,2.83 17.79,3.05 17.5,3.09C14.35,3.5 9.6,3.27 6.26,3.27C5.86,3.27 5.16,3.07 4.88,3.54C4.68,4.6 6.12,4.16 6.62,4.73C6.79,4.91 7.03,5.73 7.08,6.28C7.23,7.74 7.08,9.97 7.08,12.12C7.08,14.38 7.26,16.67 7.08,18.05C7,18.53 6.73,19.3 6.62,19.41C6,20.04 4.34,19.35 4.5,20.69C5.09,21.08 5.93,20.82 6.72,20.78Z", - "name": "etsy" - }, - { - "path": "M12,17.5C10.15,17.5 8.42,16.56 7.41,15L17.41,12.75L22.08,11.75C22.05,10.32 21.71,8.92 21.08,7.64C18.66,2.61 12.62,0.5 7.58,2.92C2.55,5.34 0.44,11.38 2.86,16.41C5.29,21.44 11.33,23.56 16.36,21.14C18.5,20.09 20.25,18.31 21.22,16.11L16.61,15C15.6,16.57 13.86,17.5 12,17.5M12,6.5C13.76,6.5 15.41,7.34 16.44,8.77L6.57,11.19C6.96,8.5 9.28,6.5 12,6.5Z", - "name": "eventbrite" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z", - "name": "facebook-box" - }, - { - "path": "M21,12A9,9 0 0,1 12,21H4.5L9.74,15.76L11.16,17.17L9.33,19H12A7,7 0 0,0 19,12V7L21,5V12M3,12A9,9 0 0,1 12,3H19.5L14.26,8.24L12.84,6.83L14.67,5H12A7,7 0 0,0 5,12V17L3,19V12Z", - "name": "flattr" - }, - { - "path": "M11,12C11,14.5 9,16.5 6.5,16.5C4,16.5 2,14.5 2,12C2,9.5 4,7.5 6.5,7.5C9,7.5 11,9.5 11,12M17.5,7.5C15,7.5 13,9.5 13,12C13,14.5 15,16.5 17.5,16.5C20,16.5 22,14.5 22,12C22,9.5 20,7.5 17.5,7.5Z", - "name": "flickr" - }, - { - "path": "M17,5L16.57,7.5C16.5,7.73 16.2,8 15.91,8C15.61,8 12,8 12,8C11.53,8 10.95,8.32 10.95,8.79V9.2C10.95,9.67 11.53,10 12,10C12,10 14.95,10 15.28,10C15.61,10 15.93,10.36 15.86,10.71C15.79,11.07 14.94,13.28 14.9,13.5C14.86,13.67 14.64,14 14.25,14C13.92,14 11.37,14 11.37,14C10.85,14 10.69,14.07 10.34,14.5C10,14.94 7.27,18.1 7.27,18.1C7.24,18.13 7,18.04 7,18V5C7,4.7 7.61,4 8,4C8,4 16.17,4 16.5,4C16.82,4 17.08,4.61 17,5M17,14.45C17.11,13.97 18.78,6.72 19.22,4.55M17.58,2C17.58,2 8.38,2 6.91,2C5.43,2 5,3.11 5,3.8C5,4.5 5,20.76 5,20.76C5,21.54 5.42,21.84 5.66,21.93C5.9,22.03 6.55,22.11 6.94,21.66C6.94,21.66 11.65,16.22 11.74,16.13C11.87,16 11.87,16 12,16C12.26,16 14.2,16 15.26,16C16.63,16 16.85,15 17,14.45C17.11,13.97 18.78,6.72 19.22,4.55C19.56,2.89 19.14,2 17.58,2Z", - "name": "foursquare" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H14.56C14.24,20.93 14.23,20.32 14.23,20.11L14.24,17.64C14.24,16.8 13.95,16.25 13.63,15.97C15.64,15.75 17.74,15 17.74,11.53C17.74,10.55 17.39,9.74 16.82,9.11C16.91,8.89 17.22,7.97 16.73,6.73C16.73,6.73 15.97,6.5 14.25,7.66C13.53,7.46 12.77,7.36 12,7.35C11.24,7.36 10.46,7.46 9.75,7.66C8.03,6.5 7.27,6.73 7.27,6.73C6.78,7.97 7.09,8.89 7.18,9.11C6.61,9.74 6.26,10.55 6.26,11.53C6.26,15 8.36,15.75 10.36,16C10.1,16.2 9.87,16.6 9.79,17.18C9.27,17.41 7.97,17.81 7.17,16.43C7.17,16.43 6.69,15.57 5.79,15.5C5.79,15.5 4.91,15.5 5.73,16.05C5.73,16.05 6.32,16.33 6.73,17.37C6.73,17.37 7.25,19.12 9.76,18.58L9.77,20.11C9.77,20.32 9.75,20.93 9.43,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z", - "name": "github-box" - }, - { - "path": "M20.38,8.53C20.54,8.13 21.06,6.54 20.21,4.39C20.21,4.39 18.9,4 15.91,6C14.66,5.67 13.33,5.62 12,5.62C10.68,5.62 9.34,5.67 8.09,6C5.1,3.97 3.79,4.39 3.79,4.39C2.94,6.54 3.46,8.13 3.63,8.53C2.61,9.62 2,11 2,12.72C2,19.16 6.16,20.61 12,20.61C17.79,20.61 22,19.16 22,12.72C22,11 21.39,9.62 20.38,8.53M12,19.38C7.88,19.38 4.53,19.19 4.53,15.19C4.53,14.24 5,13.34 5.8,12.61C7.14,11.38 9.43,12.03 12,12.03C14.59,12.03 16.85,11.38 18.2,12.61C19,13.34 19.5,14.23 19.5,15.19C19.5,19.18 16.13,19.38 12,19.38M8.86,13.12C8.04,13.12 7.36,14.12 7.36,15.34C7.36,16.57 8.04,17.58 8.86,17.58C9.69,17.58 10.36,16.58 10.36,15.34C10.36,14.11 9.69,13.12 8.86,13.12M15.14,13.12C14.31,13.12 13.64,14.11 13.64,15.34C13.64,16.58 14.31,17.58 15.14,17.58C15.96,17.58 16.64,16.58 16.64,15.34C16.64,14.11 16,13.12 15.14,13.12Z", - "name": "github-face" - }, - { - "path": "M8,2A3,3 0 0,0 5,5V16.5H8V5H19A3,3 0 0,0 16,2H8M16,7.5V19H5A3,3 0 0,0 8,22H16A3,3 0 0,0 19,19V7.5H16Z", - "name": "glassdoor" - }, - { - "path": "M2,22L8.5,2H15.4L9.2,20C9.2,20 8.6,22 7,22C5.9,22 2,22 2,22M16.4,5L13,15L15,20.7C15,20.7 15.4,22 17,22C18.3,22 22,22 22,22L16.4,5Z", - "name": "google-adwords" - }, - { - "path": "M19,3H13V8L17,7L16,11H21V5C21,3.89 20.1,3 19,3M17,17L13,16V21H19A2,2 0 0,0 21,19V13H16M8,13H3V19A2,2 0 0,0 5,21H11V16L7,17M3,5V11H8L7,7L11,8V3H5C3.89,3 3,3.89 3,5Z", - "name": "google-pages" - }, - { - "path": "M12,1.5A9,9 0 0,1 21,10.5C21,13.11 19.89,15.47 18.11,17.11L17.05,16.05C18.55,14.68 19.5,12.7 19.5,10.5A7.5,7.5 0 0,0 12,3A7.5,7.5 0 0,0 4.5,10.5C4.5,12.7 5.45,14.68 6.95,16.05L5.89,17.11C4.11,15.47 3,13.11 3,10.5A9,9 0 0,1 12,1.5M12,4.5A6,6 0 0,1 18,10.5C18,12.28 17.22,13.89 16,15L14.92,13.92C15.89,13.1 16.5,11.87 16.5,10.5C16.5,8 14.5,6 12,6C9.5,6 7.5,8 7.5,10.5C7.5,11.87 8.11,13.1 9.08,13.92L8,15C6.78,13.89 6,12.28 6,10.5A6,6 0 0,1 12,4.5M8.11,17.65L11.29,14.46C11.68,14.07 12.32,14.07 12.71,14.46L15.89,17.65C16.28,18.04 16.28,18.67 15.89,19.06L12.71,22.24C12.32,22.63 11.68,22.63 11.29,22.24L8.11,19.06C7.72,18.67 7.72,18.04 8.11,17.65Z", - "name": "google-physical-web" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z", - "name": "google-plus-box" - }, - { - "path": "M14,20.95H20V10.78L8,7.34V3.05H4V20.95H10V15.31H14V20.95Z", - "name": "houzz" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M13.5,18.71H18V11.09L9,8.5V5.29H6V18.71H10.5V14.5H13.5V18.71Z", - "name": "houzz-box" - }, - { - "path": "M10,5A1,1 0 0,0 9,4H8V2H16V4H15A1,1 0 0,0 14,5V19A1,1 0 0,0 15,20H16V22H8V20H9A1,1 0 0,0 10,19V5Z", - "name": "instapaper" - }, - { - "path": "M7.85,17.07C7.03,17.17 3.5,17.67 4.06,20.26C4.69,23.3 9.87,22.59 9.83,19C9.81,16.57 9.83,9.2 9.83,9.2C9.83,9.2 9.76,8.53 10.43,8.39L18.19,6.79C18.19,6.79 18.83,6.65 18.83,7.29C18.83,7.89 18.83,14.2 18.83,14.2C18.83,14.2 18.9,14.83 18.12,15C17.34,15.12 13.91,15.4 14.19,18C14.5,21.07 20,20.65 20,17.07V2.61C20,2.61 20.04,1.62 18.9,1.87L9.5,3.78C9.5,3.78 8.66,3.96 8.66,4.77C8.66,5.5 8.66,16.11 8.66,16.11C8.66,16.11 8.66,16.96 7.85,17.07Z", - "name": "itunes" - }, - { - "path": "M2,5.69C8.92,1.07 11.1,7 11.28,10.27C11.46,13.53 8.29,17.64 4.31,14.92V20.3L2,18.77V5.69M4.22,7.4V12.78C7.84,14.95 9.08,13.17 9.08,10.09C9.08,5.74 6.57,5.59 4.22,7.4M15.08,4.15C15.08,4.15 14.9,7.64 15.08,11.07C15.44,14.5 19.69,11.84 19.69,11.84V4.92L22,5.2V14.44C22,20.6 15.85,20.3 15.85,20.3L15.08,18C20.46,18 19.78,14.43 19.78,14.43C13.27,16.97 12.77,12.61 12.77,12.61V5.69L15.08,4.15Z", - "name": "language-python-text" - }, - { - "path": "M18,17.93C15.92,17.92 14.81,16.9 14.04,15.09L13.82,14.6L11.92,10.23C11.29,8.69 9.72,7.64 7.96,7.64C5.57,7.64 3.63,9.59 3.63,12C3.63,14.41 5.57,16.36 7.96,16.36C9.62,16.36 11.08,15.41 11.8,14L12.57,15.81C11.5,17.15 9.82,18 7.96,18C4.67,18 2,15.32 2,12C2,8.69 4.67,6 7.96,6C10.44,6 12.45,7.34 13.47,9.7C13.54,9.89 14.54,12.24 15.42,14.24C15.96,15.5 16.42,16.31 17.91,16.36C19.38,16.41 20.39,15.5 20.39,14.37C20.39,13.26 19.62,13 18.32,12.56C16,11.79 14.79,11 14.79,9.15C14.79,7.33 16,6.12 18,6.12C19.31,6.12 20.24,6.7 20.89,7.86L19.62,8.5C19.14,7.84 18.61,7.57 17.94,7.57C17,7.57 16.33,8.23 16.33,9.1C16.33,10.34 17.43,10.53 18.97,11.03C21.04,11.71 22,12.5 22,14.42C22,16.45 20.27,17.93 18,17.93Z", - "name": "lastfm" - }, - { - "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z", - "name": "linkedin-box" - }, - { - "path": "M9.56,12.5C9.56,12.6 9.5,12.72 9.4,12.79C9.2,12.97 8.89,12.94 8.71,12.74C8.63,12.65 8.59,12.53 8.59,12.41V8.5H5.66V13.39A2.44,2.44 0 0,0 8.1,15.83C8.68,15.83 9.24,15.62 9.68,15.24C9.64,15.6 9.43,15.93 9.11,16.11C8.75,16.31 8.35,16.42 7.94,16.41C7.46,16.41 7,16.3 6.56,16.09L6.39,16V18.6C7.04,18.86 7.74,19 8.44,19C9.47,19 10.46,18.66 11.25,18C12.08,17.25 12.54,16.18 12.5,15.06V8.5H9.56V12.5M4.93,13.39V5.59H2V12.9C1.84,14.35 2.88,15.65 4.33,15.81C4.41,15.82 4.5,15.83 4.56,15.83V15.83C4.93,15.83 5.29,15.74 5.63,15.59L5.75,15.5L5.65,15.41C5.17,14.85 4.91,14.13 4.93,13.39M22,11.39V8.5H21C20.59,6.38 18.53,5 16.41,5.41C16.17,5.45 15.94,5.5 15.71,5.61C14.28,6.24 13.33,7.62 13.26,9.18V15.83H13.39C14.95,15.76 16.19,14.47 16.19,12.9H17.41V10H16.15V9.17C16.15,8.86 16.32,8.57 16.59,8.41C17.06,8.13 17.68,8.28 17.96,8.76C18.05,8.91 18.09,9.07 18.1,9.24V11.93C18.07,14.05 19.75,15.79 21.87,15.83H22V12.9H22A1,1 0 0,1 21,11.9V11.41L22,11.39Z", - "name": "lyft" - }, - { - "path": "M15.45,11.91C15.34,9.7 13.7,8.37 11.72,8.37H11.64C9.35,8.37 8.09,10.17 8.09,12.21C8.09,14.5 9.62,15.95 11.63,15.95C13.88,15.95 15.35,14.3 15.46,12.36M11.65,6.39C13.18,6.39 14.62,7.07 15.67,8.13V8.13C15.67,7.62 16,7.24 16.5,7.24H16.61C17.35,7.24 17.5,7.94 17.5,8.16V16.06C17.46,16.58 18.04,16.84 18.37,16.5C19.64,15.21 21.15,9.81 17.58,6.69C14.25,3.77 9.78,4.25 7.4,5.89C4.88,7.63 3.26,11.5 4.83,15.11C6.54,19.06 11.44,20.24 14.35,19.06C15.83,18.47 16.5,20.46 15,21.11C12.66,22.1 6.23,22 3.22,16.79C1.19,13.27 1.29,7.08 6.68,3.87C10.81,1.42 16.24,2.1 19.5,5.5C22.95,9.1 22.75,15.8 19.4,18.41C17.89,19.59 15.64,18.44 15.66,16.71L15.64,16.15C14.59,17.2 13.18,17.81 11.65,17.81C8.63,17.81 6,15.15 6,12.13C6,9.08 8.63,6.39 11.65,6.39Z", - "name": "mail-ru" - }, - { - "path": "M20.93,14C20.66,15.4 18.5,16.95 15.97,17.25C14.66,17.4 13.38,17.55 12,17.5C9.76,17.38 8,16.95 8,16.95L8.03,17.57C8.32,19.78 10.22,19.92 12.03,20C13.85,20.04 15.47,19.53 15.47,19.53L15.55,21.17C15.55,21.17 14.27,21.86 12,22C10.75,22.05 9.2,21.95 7.39,21.47C3.47,20.43 2.79,16.25 2.69,12L2.68,8.57C2.68,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.36,11.77 20.93,14M8.33,10.32C8.33,9.54 7.7,8.91 6.93,8.91C6.15,8.91 5.5,9.54 5.5,10.32C5.5,11.09 6.15,11.72 6.93,11.72A1.4,1.4 0 0,0 8.33,10.32M13.41,10.32A1.41,1.41 0 0,0 12,8.91A1.41,1.41 0 0,0 10.59,10.32C10.59,11.09 11.22,11.72 12,11.72C12.78,11.72 13.41,11.09 13.41,10.32M18.5,10.32C18.5,9.54 17.85,8.91 17.07,8.91C16.3,8.91 15.67,9.54 15.67,10.32A1.4,1.4 0 0,0 17.07,11.72C17.85,11.72 18.5,11.09 18.5,10.32Z", - "name": "mastodon-variant" - }, - { - "path": "M4.37,7.3C4.4,7.05 4.3,6.81 4.12,6.65L2.25,4.4V4.06H8.05L12.53,13.89L16.47,4.06H22V4.4L20.4,5.93C20.27,6.03 20.2,6.21 20.23,6.38V17.62C20.2,17.79 20.27,17.97 20.4,18.07L21.96,19.6V19.94H14.12V19.6L15.73,18.03C15.89,17.88 15.89,17.83 15.89,17.59V8.5L11.4,19.9H10.8L5.57,8.5V16.14C5.5,16.46 5.63,16.78 5.86,17L7.96,19.57V19.9H2V19.57L4.1,17C4.33,16.78 4.43,16.46 4.37,16.14V7.3Z", - "name": "medium" - }, - { - "path": "M19.61,14.86C19.61,16.68 18.3,18.25 16.5,18.55C16.29,18.59 16.07,18.62 15.84,18.61C15.76,18.61 15.73,18.64 15.71,18.71C15.35,19.74 14.64,20.35 13.57,20.5C12.86,20.6 12.22,20.41 11.65,19.97C11.57,19.9 11.5,19.9 11.44,19.96C10.78,20.43 10.04,20.64 9.23,20.59C7.66,20.5 6.33,19.29 6.08,17.74C6.06,17.63 6.04,17.5 6.04,17.41C6.04,17.32 6,17.29 5.92,17.27C5.44,17.18 5,17 4.63,16.68C3.92,16.13 3.5,15.41 3.4,14.5C3.29,13.5 3.61,12.62 4.32,11.89C4.38,11.83 4.38,11.79 4.34,11.72C4.07,11.24 3.94,10.72 3.96,10.17C4,8.79 4.97,7.65 6.31,7.37C6.46,7.33 6.54,7.27 6.61,7.13C7.27,5.71 8.37,4.85 9.91,4.56C11,4.36 12,4.58 12.94,5.13C13,5.18 13.08,5.18 13.17,5.16C14.67,4.72 16,5.04 17.12,6.11C17.78,6.74 18.15,7.54 18.26,8.46C18.28,8.66 18.29,8.86 18.28,9.06C18.27,9.14 18.29,9.17 18.37,9.19C19.04,9.44 19.5,9.91 19.71,10.6C19.96,11.45 19.75,12.21 19.11,12.83C19.05,12.89 19.07,12.92 19.1,12.97C19.44,13.56 19.61,14.18 19.61,14.86M12.93,14.57C12.93,15.34 13.43,16 14.14,16.26C14.5,16.37 14.85,16.43 15.22,16.45C15.5,16.46 15.75,16.44 16,16.32C16.19,16.22 16.28,16.06 16.27,15.85C16.26,15.64 16.16,15.5 15.96,15.4C15.89,15.37 15.82,15.34 15.74,15.33C15.5,15.29 15.3,15.26 15.07,15.21C14.71,15.14 14.55,14.95 14.55,14.57C14.54,14.24 14.63,13.93 14.73,13.63C14.92,13.07 15.17,12.53 15.41,12C15.64,11.47 15.88,10.95 16.04,10.4C16.13,10.1 16.18,9.8 16.09,9.5C15.97,9 15.69,8.7 15.2,8.61C14.75,8.5 14.3,8.5 13.9,8.78C13.76,8.87 13.63,8.85 13.5,8.74C13.43,8.67 13.34,8.58 13.26,8.5C12.84,8.12 12.3,8.1 11.85,8.45C11.67,8.59 11.5,8.76 11.33,8.89C11.16,9 11,9.03 10.79,8.92C10.6,8.83 10.42,8.74 10.23,8.65C10.03,8.57 9.85,8.46 9.63,8.44C8.95,8.38 8.24,8.79 7.94,9.41C7.8,9.68 7.69,9.96 7.59,10.25C7.11,11.57 6.72,12.91 6.32,14.26C6.14,14.86 6.35,15.45 6.86,15.77C7.26,16 7.69,16.09 8.14,15.95C8.5,15.84 8.71,15.55 8.85,15.22C9.31,14.13 9.73,13 10.17,11.91C10.29,11.61 10.41,11.3 10.54,11C10.67,10.7 11.04,10.6 11.26,10.8C11.4,10.92 11.44,11.09 11.42,11.26C11.41,11.45 11.34,11.62 11.27,11.79C11,12.5 10.69,13.24 10.4,13.97C10.34,14.11 10.28,14.26 10.25,14.42C10.21,14.69 10.31,14.93 10.54,15C10.76,15.12 11,15.14 11.23,15.05C11.5,14.95 11.67,14.74 11.79,14.5C12.22,13.65 12.65,12.8 13.08,11.95C13.28,11.56 13.5,11.17 13.68,10.78C13.76,10.64 13.85,10.5 14,10.41C14.12,10.33 14.25,10.33 14.38,10.4C14.5,10.47 14.5,10.6 14.5,10.73C14.5,10.8 14.5,10.87 14.47,10.93C14.41,11.07 14.36,11.2 14.3,11.33C13.94,12.09 13.57,12.84 13.22,13.59C13.07,13.91 12.91,14.23 12.93,14.57M17.96,20.12C17.96,19.62 17.54,19.2 17.04,19.2C16.5,19.2 16.1,19.61 16.1,20.12A0.93,0.93 0 0,0 17.03,21.05A0.93,0.93 0 0,0 17.96,20.12M2.38,12.46C2.86,12.46 3.27,12.05 3.27,11.57C3.27,11.09 2.87,10.69 2.39,10.69C1.89,10.69 1.5,11.08 1.5,11.57C1.5,12.06 1.89,12.46 2.38,12.46M13.26,2.55C12.77,2.55 12.37,2.94 12.37,3.42C12.37,3.91 12.77,4.3 13.25,4.3C13.74,4.3 14.13,3.92 14.13,3.43C14.13,2.95 13.74,2.55 13.26,2.55M20.45,8.03C20.45,7.63 20.11,7.29 19.71,7.29C19.3,7.28 18.95,7.63 18.95,8.04C18.95,8.45 19.28,8.78 19.7,8.78C20.12,8.78 20.46,8.45 20.45,8.03M5.04,5.89C5.04,6.27 5.34,6.56 5.71,6.56C6.09,6.56 6.39,6.26 6.38,5.88C6.38,5.5 6.09,5.22 5.72,5.22C5.33,5.22 5.04,5.5 5.04,5.89M12.06,21.44C12.06,21.12 11.81,20.86 11.5,20.86C11.16,20.86 10.91,21.11 10.91,21.44C10.91,21.75 11.16,22 11.5,22C11.8,22 12.06,21.75 12.06,21.44M21,12.5C20.71,12.5 20.45,12.78 20.45,13.08A0.55,0.55 0 0,0 21,13.63C21.33,13.63 21.57,13.4 21.57,13.08C21.57,12.77 21.33,12.5 21,12.5M7.62,2C7.35,2 7.14,2.2 7.14,2.47C7.14,2.73 7.35,2.94 7.62,2.94A0.47,0.47 0 0,0 8.09,2.47C8.09,2.2 7.89,2 7.62,2M22.08,10C21.86,10 21.67,10.17 21.66,10.4C21.66,10.63 21.85,10.82 22.08,10.82C22.32,10.82 22.5,10.64 22.5,10.41C22.5,10.17 22.32,10 22.08,10M5.5,18.26C5.5,18.04 5.29,17.85 5.06,17.84C4.84,17.84 4.65,18.03 4.65,18.27C4.65,18.5 4.84,18.68 5.07,18.68C5.3,18.68 5.5,18.5 5.5,18.26Z", - "name": "meetup" - }, - { - "path": "M21.11,18.5C20.97,18.5 20.83,18.44 20.71,18.36C20.37,18.13 20.28,17.68 20.5,17.34C21.18,16.34 21.54,15.16 21.54,13.93C21.54,12.71 21.18,11.53 20.5,10.5C20.28,10.18 20.37,9.73 20.71,9.5C21.04,9.28 21.5,9.37 21.72,9.7C22.56,10.95 23,12.41 23,13.93C23,15.45 22.56,16.91 21.72,18.16C21.58,18.37 21.35,18.5 21.11,18.5M19,17.29C18.88,17.29 18.74,17.25 18.61,17.17C18.28,16.94 18.19,16.5 18.42,16.15C18.86,15.5 19.1,14.73 19.1,13.93C19.1,13.14 18.86,12.37 18.42,11.71C18.19,11.37 18.28,10.92 18.61,10.69C18.95,10.47 19.4,10.55 19.63,10.89C20.24,11.79 20.56,12.84 20.56,13.93C20.56,15 20.24,16.07 19.63,16.97C19.5,17.18 19.25,17.29 19,17.29M14.9,15.73C15.89,15.73 16.7,14.92 16.7,13.93C16.7,13.17 16.22,12.5 15.55,12.25C15.5,12.55 15.43,12.85 15.34,13.14C15.23,13.44 14.95,13.64 14.64,13.64C14.57,13.64 14.5,13.62 14.41,13.6C14.03,13.47 13.82,13.06 13.95,12.67C14.09,12.24 14.17,11.78 14.17,11.32C14.17,8.93 12.22,7 9.82,7C8.1,7 6.56,8 5.87,9.5C6.54,9.7 7.16,10.04 7.66,10.54C7.95,10.83 7.95,11.29 7.66,11.58C7.38,11.86 6.91,11.86 6.63,11.58C6.17,11.12 5.56,10.86 4.9,10.86C3.56,10.86 2.46,11.96 2.46,13.3C2.46,14.64 3.56,15.73 4.9,15.73H14.9M15.6,10.75C17.06,11.07 18.17,12.37 18.17,13.93C18.17,15.73 16.7,17.19 14.9,17.19H4.9C2.75,17.19 1,15.45 1,13.3C1,11.34 2.45,9.73 4.33,9.45C5.12,7.12 7.33,5.5 9.82,5.5C12.83,5.5 15.31,7.82 15.6,10.75Z", - "name": "mixcloud" - }, - { - "path": "M5.68,3.96L11.41,11.65C11.55,11.84 11.55,12.1 11.41,12.29L5.65,20L5.5,20.18C4.76,21 3.47,21.07 2.64,20.31C1.85,19.59 1.79,18.37 2.43,17.5L6.56,11.97L2.46,6.47C1.83,5.62 1.88,4.39 2.67,3.67L2.82,3.54C3.73,2.87 5,3.05 5.68,3.96M18.32,3.96C19,3.05 20.27,2.87 21.18,3.54L21.33,3.67C22.12,4.39 22.17,5.61 21.54,6.47L17.44,11.97L21.57,17.5C22.21,18.36 22.15,19.59 21.36,20.31C20.53,21.07 19.24,21 18.5,20.18L18.35,20L12.59,12.29C12.45,12.1 12.45,11.84 12.59,11.65L18.32,3.96Z", - "name": "mixer" - }, - { - "path": "M3.25,4.03L19.95,20.73L18.7,22L14.86,18.13C14.77,18.12 14.68,18.09 14.59,18.05C14.26,17.89 14.14,17.62 14.11,17.38L12.18,15.45C12.14,15.53 12.09,15.6 12.05,15.66C11.62,16.26 11.19,16.26 10.86,16.04C10.54,15.83 5.5,12 5.23,11.87C4.95,11.76 4.85,12.03 5.12,13.5C5.39,15 4.95,15.39 4.57,15.45C4.2,15.5 3.06,15.18 3,12.14C2.95,9.11 3.76,8.62 4.14,8.62C4.6,8.62 7.08,10.69 8.84,12.12L2,5.28L3.25,4.03M18.38,16.56C18.75,15.4 19.12,13.8 19.1,12.03V12C19.14,8.5 17.66,5.58 17.66,5.58C17.66,5.58 17.42,4.72 18.12,4.39C18.83,4.06 19.3,4.61 19.3,4.61C21.12,8.22 21,11.64 21,12C21,12.27 21.09,14.96 19.88,18.05L18.38,16.56M15.14,13.31C15.19,12.92 15.22,12.5 15.24,12.03V12C15.14,8.5 14.13,7.21 14.13,7.21C14.13,7.21 13.89,6.34 14.59,6C15.3,5.69 15.77,6.23 15.77,6.23C17.26,8.94 17.16,11.64 17.14,12C17.15,12.2 17.2,13.38 16.82,15L15.14,13.31M10.2,8.38C10.23,7.77 10.59,7.64 10.59,7.64C10.59,7.64 11.19,7.37 11.57,7.8C11.91,8.19 12.72,9.57 12.89,11.07L10.2,8.38Z", - "name": "nfc-off" - }, - { "path": "M20,4H4V20H12V8H16V20H20V4", "name": "npm-variant" }, - { - "path": "M3,3V21H21V3H3M6,6H18V18H15V9H12V18H6V6Z", - "name": "npm-variant-outline" - }, - { - "path": "M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z", - "name": "paypal" - }, - { - "path": "M12,7A2,2 0 0,1 10,9A2,2 0 0,1 8,7C7.37,7.84 7,8.87 7,10A5,5 0 0,0 12,15A5,5 0 0,0 17,10A5,5 0 0,0 12,5C11.57,5 11.16,5.05 10.77,5.15C11.5,5.45 12,6.17 12,7M12,2A8,8 0 0,1 20,10C20,11.05 19.8,12.04 19.43,12.96C17.89,17.38 13.63,22 12,22C10.37,22 6.11,17.38 4.57,12.96C4.2,12.04 4,11.05 4,10A8,8 0 0,1 12,2Z", - "name": "periscope" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z", - "name": "pinterest-box" - }, - { - "path": "M21.9,4.26C21.64,3.55 20.96,3.07 20.2,3.07H20.19L18.46,3.07H3.81C3.07,3.07 2.39,3.54 2.12,4.24C2.04,4.45 2,4.66 2,4.88V10.92L2.07,12.12C2.36,14.85 3.78,17.23 5.97,18.9C6,18.93 6.05,18.96 6.09,19H6.11C7.29,19.86 8.6,20.44 10,20.73C10.68,20.86 11.35,20.93 12,20.93C12.63,20.93 13.25,20.87 13.85,20.76C13.93,20.75 14,20.73 14.07,20.72C14.09,20.71 14.11,20.7 14.14,20.69C15.5,20.4 16.76,19.83 17.89,19H17.91C17.95,18.96 18,18.93 18.03,18.9C20.22,17.23 21.64,14.85 21.93,12.12L22,10.92V4.88C22,4.68 21.97,4.47 21.9,4.26M17.67,10.55L12.96,15.06C12.7,15.32 12.35,15.44 12,15.44C11.67,15.44 11.33,15.32 11.06,15.06L6.36,10.55C5.81,10.03 5.79,9.16 6.32,8.61C6.84,8.06 7.71,8.05 8.26,8.57L12,12.17L15.77,8.57C16.31,8.05 17.18,8.07 17.71,8.61C18.23,9.16 18.21,10.03 17.67,10.55Z", - "name": "pocket" - }, - { - "path": "M12,3A9,9 0 0,1 21,12C21,13.76 20.5,15.4 19.62,16.79L21,18.17V20A1,1 0 0,1 20,21H18.18L16.79,19.62C15.41,20.5 13.76,21 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17C12.65,17 13.26,16.88 13.83,16.65L10.95,13.77C10.17,13 10.17,11.72 10.95,10.94C11.73,10.16 13,10.16 13.78,10.94L16.66,13.82C16.88,13.26 17,12.64 17,12A5,5 0 0,0 12,7Z", - "name": "quicktime" - }, - { - "path": "M18.61,5.89C18.6,5.79 18.5,5.73 18.44,5.73C18.37,5.72 16.83,5.61 16.83,5.61C16.83,5.61 15.76,4.55 15.65,4.43C15.53,4.31 15.3,4.35 15.21,4.37C15.2,4.37 15,4.44 14.61,4.55C14.25,3.5 13.62,2.58 12.43,2.58C12.11,2.18 11.72,2 11.38,2C8.8,2 7.57,5.22 7.18,6.86C6.18,7.17 5.47,7.39 5.37,7.42C4.82,7.6 4.8,7.62 4.73,8.14C4.67,8.54 3.21,19.86 3.21,19.86L14.61,22L20.79,20.66C20.79,20.66 18.62,6 18.61,5.89M14,4.76C13.69,4.85 13.37,4.95 13,5.06C13,5 13,4.93 13,4.85C13,4.21 12.93,3.7 12.79,3.29C13.35,3.36 13.73,4 14,4.76M12.08,3.42C12.24,3.82 12.34,4.39 12.34,5.16C12.34,5.2 12.34,5.24 12.34,5.27C11.71,5.46 11.03,5.68 10.35,5.89C10.73,4.4 11.45,3.69 12.08,3.42M11.31,2.69C11.42,2.69 11.53,2.73 11.64,2.8C10.81,3.19 9.93,4.17 9.55,6.12C9,6.3 8.47,6.46 8,6.62C8.42,5.12 9.46,2.69 11.31,2.69M12.5,9.15L11.76,11.42C11.76,11.42 11.09,11.06 10.27,11.06C9.07,11.06 9,11.81 9,12C9,13.04 11.71,13.43 11.71,15.86C11.71,17.77 10.5,19 8.87,19C6.91,19 5.91,17.78 5.91,17.78L6.43,16.05C6.43,16.05 7.46,16.93 8.33,16.93C8.9,16.93 9.13,16.5 9.13,16.16C9.13,14.81 6.92,14.75 6.92,12.53C6.92,10.66 8.26,8.85 10.97,8.85C12,8.85 12.5,9.15 12.5,9.15M15.43,5.29L16.75,6.6L17.71,6.68C18.05,9 19.19,16.73 19.66,19.88L14.66,20.97L15.43,5.29Z", - "name": "shopify" - }, - { - "path": "M7.47,17.19C7.37,17.95 7.08,18.21 6.19,18.21C5.27,18.21 4.87,17.79 4.81,16.87L4.61,13.65C4.61,12.91 4.87,12.55 5.86,12.55C7.21,12.55 7.04,13.54 7.64,14.5C8.33,15.62 10,16.35 12.31,16.35C15.17,16.35 17,15.14 17,13.57C17,12.23 15.89,11.39 13.85,11.16L11.5,10.89C7.21,10.42 5.1,9.19 5.1,6.62C5.1,4.07 8.06,2 12.21,2C13.5,2 14.81,2.29 16.29,2.76C16.29,2.26 16.58,2.1 17.3,2.1C18.46,2.1 18.55,2.39 18.62,3.08L18.85,5.88C18.85,6.5 18.39,6.83 17.63,6.83C16.35,6.83 16.55,5.88 15.86,5.07C15.17,4.26 13.79,3.73 12.08,3.73C9.44,3.73 7.7,4.89 7.7,6.5C7.7,7.8 8.92,8.56 11.38,8.82L13.95,9.08C17.7,9.5 19.61,10.92 19.61,13.33C19.61,16.17 16.71,18.08 12.21,18.08C10.56,18.08 9.08,17.77 7.47,17.19M1,16H2V21H23V22H1V16Z", - "name": "slackware" - }, - { - "path": "M6,3H18A3,3 0 0,1 21,6V18A3,3 0 0,1 18,21H6A3,3 0 0,1 3,18V6A3,3 0 0,1 6,3M7,6A1,1 0 0,0 6,7V17A1,1 0 0,0 7,18H17A1,1 0 0,0 18,17V7A1,1 0 0,0 17,6H7M9.5,9H14.5A0.5,0.5 0 0,1 15,9.5V14.5A0.5,0.5 0 0,1 14.5,15H9.5A0.5,0.5 0 0,1 9,14.5V9.5A0.5,0.5 0 0,1 9.5,9Z", - "name": "square-inc" - }, - { - "path": "M5.5,0H18.5A5.5,5.5 0 0,1 24,5.5V18.5A5.5,5.5 0 0,1 18.5,24H5.5A5.5,5.5 0 0,1 0,18.5V5.5A5.5,5.5 0 0,1 5.5,0M15.39,15.18C15.39,16.76 14.5,17.81 12.85,17.95V12.61C14.55,13.13 15.39,13.66 15.39,15.18M11.65,6V10.88C10.34,10.5 9.03,9.93 9.03,8.43C9.03,6.94 10.18,6.12 11.65,6M15.5,7.6L16.5,6.8C15.62,5.66 14.4,4.92 12.85,4.77V3.8H11.65V3.8L11.65,4.75C9.5,4.89 7.68,6.17 7.68,8.5C7.68,11 9.74,11.78 11.65,12.29V17.96C10.54,17.84 9.29,17.31 8.43,16.03L7.3,16.78C8.2,18.12 9.76,19 11.65,19.14V20.2H12.07L12.85,20.2V19.16C15.35,19 16.7,17.34 16.7,15.14C16.7,12.58 14.81,11.76 12.85,11.19V6.05C14,6.22 14.85,6.76 15.5,7.6Z", - "name": "square-inc-cash" - }, - { - "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V15L6.19,16.31C6.45,17.6 7.6,18.58 8.97,18.58C10.53,18.58 11.8,17.31 11.8,15.75V15.62L15.2,13.19H15.28C17.36,13.19 19.05,11.5 19.05,9.42C19.05,7.34 17.36,5.65 15.28,5.65C13.2,5.65 11.5,7.34 11.5,9.42V9.47L9.13,12.93L8.97,12.92C8.38,12.92 7.83,13.1 7.38,13.41L3,11.6V5A2,2 0 0,1 5,3H19M8.28,17.17C9.08,17.5 10,17.13 10.33,16.33C10.66,15.53 10.28,14.62 9.5,14.29L8.22,13.76C8.71,13.58 9.26,13.57 9.78,13.79C10.31,14 10.72,14.41 10.93,14.94C11.15,15.46 11.15,16.04 10.93,16.56C10.5,17.64 9.23,18.16 8.15,17.71C7.65,17.5 7.27,17.12 7.06,16.67L8.28,17.17M17.8,9.42C17.8,10.81 16.67,11.94 15.28,11.94C13.9,11.94 12.77,10.81 12.77,9.42A2.51,2.51 0 0,1 15.28,6.91C16.67,6.91 17.8,8.04 17.8,9.42M13.4,9.42C13.4,10.46 14.24,11.31 15.29,11.31C16.33,11.31 17.17,10.46 17.17,9.42C17.17,8.38 16.33,7.53 15.29,7.53C14.24,7.53 13.4,8.38 13.4,9.42Z", - "name": "steam-box" - }, - { - "path": "M14.92,17.16L16.75,13.53H19.45L14.94,22.5L10.37,13.53H13.07L14.92,17.16M10.63,8.66L8.18,13.55H4.55L10.61,1.5L16.74,13.55H13.11L10.63,8.66Z", - "name": "strava" - }, - { - "path": "M12,14C11,14 9,15 9,16C9,18 12,18 12,18V17A1,1 0 0,1 11,16A1,1 0 0,1 12,15V14M12,19C12,19 8,18.5 8,16.5C8,13.5 11,12.75 12,12.75V11.5C11,11.5 7,13 7,16C7,20 12,20 12,20V19M10.07,7.03L11.26,7.56C11.69,5.12 12.84,3.5 12.84,3.5C12.41,4.53 12.13,5.38 11.95,6.05C13.16,3.55 15.61,2 15.61,2C14.43,3.18 13.56,4.46 12.97,5.53C14.55,3.85 16.74,2.75 16.74,2.75C14.05,4.47 12.84,7.2 12.54,7.96L13.09,8.04C13.09,8.56 13.09,9.04 13.34,9.42C14.1,11.31 18,11.47 18,16C18,20.53 13.97,22 11.83,22C9.69,22 5,21.03 5,16C5,10.97 9.95,10.93 10.83,8.92C10.95,8.54 10.07,7.03 10.07,7.03Z", - "name": "tor" - }, - { - "path": "M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17", - "name": "tumblr" - }, - { - "path": "M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z", - "name": "tumblr-box" - }, - { - "path": "M3.75,17L8,12.75V16H18V11.5L20,9.5V16A2,2 0 0,1 18,18H8V21.25L3.75,17M20.25,7L16,11.25V8H6V12.5L4,14.5V8A2,2 0 0,1 6,6H16V2.75L20.25,7Z", - "name": "tumblr-reblog" - }, - { - "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z", - "name": "twitter-box" - }, - { - "path": "M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z", - "name": "twitter-circle" - }, - { - "path": "M6.38,13.24V13.24C6.38,11.84 6.38,10.44 6.38,9.04H7.4V15.84H6.39C6.39,15.63 6.39,15.42 6.39,15.21C5.93,15.68 5.29,15.96 4.58,15.96C3.12,15.96 2,14.9 2,13.3V9.04H3V13.24C3,14.33 3.74,15.04 4.7,15.04C5.64,15.04 6.38,14.31 6.38,13.24M9.14,9.04V11.5C9.37,11.29 9.65,11.1 9.95,10.97C10.25,10.85 10.58,10.78 10.91,10.78C12.37,10.78 13.5,11.94 13.5,13.37C13.5,14.8 12.37,15.96 10.91,15.96C10.58,15.96 10.25,15.89 9.95,15.77C9.64,15.64 9.37,15.45 9.13,15.22C9.13,15.43 9.13,15.63 9.13,15.84C8.81,15.84 8.5,15.84 8.16,15.84V9.04H9.14M12.55,13.37V13.37C12.55,12.41 11.77,11.65 10.84,11.65C9.89,11.65 9.13,12.41 9.13,13.37C9.13,14.32 9.88,15.09 10.84,15.09C11.77,15.09 12.55,14.32 12.55,13.37M16.46,10.79C17.9,10.79 18.95,11.89 18.95,13.36V13.69H14.91C15.04,14.5 15.71,15.09 16.55,15.09C17.13,15.09 17.61,14.86 18,14.36L18.7,14.89C18.2,15.55 17.46,15.95 16.55,15.95C15.06,15.95 13.91,14.84 13.91,13.36C13.91,11.97 15,10.79 16.46,10.79M14.92,12.91H17.95C17.79,12.15 17.18,11.65 16.44,11.65C15.71,11.65 15.1,12.15 14.92,12.91M20.5,13V15.84H19.5V10.89C19.82,10.89 20.14,10.89 20.47,10.89V11.5C20.71,11.1 21.11,10.85 21.66,10.85H22V11.76H21.59C20.95,11.76 20.5,12.26 20.5,13", - "name": "uber" - }, - { - "path": "M19.5,3C20.14,4.08 20.44,5.19 20.44,6.6C20.44,11.08 16.61,16.91 13.5,21H6.41L3.56,4L9.77,3.39L11.28,15.5C12.69,13.21 14.42,9.61 14.42,7.16C14.42,5.81 14.19,4.9 13.83,4.15L19.5,3Z", - "name": "venmo" - }, - { - "path": "M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z", - "name": "vk-box" - }, - { - "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z", - "name": "vk-circle" - }, - { - "path": "M17,17.5L12,15L7,17.5V5H5V19H19V5H17V17.5M12,12.42L14.25,13.77L13.65,11.22L15.64,9.5L13,9.27L12,6.86L11,9.27L8.36,9.5L10.35,11.22L9.75,13.77L12,12.42M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z", - "name": "wunderlist" - }, - { - "path": "M0 16.7L3.2 12.9L0 9.1L1.5 7.8L4.5 11.3L7.5 7.8L9 9.1L5.8 12.9L9 16.7L7.5 18L4.5 14.4L1.5 18L0 16.7M24 16.9C24 17.4 23.6 17.9 23 17.9H20C18.9 17.9 18 17 18 15.9V13.9C18 12.8 18.9 11.9 20 11.9H22V9.9H18V8H23C23.5 8 24 8.4 24 9M22 14H20V16H22V14M16 16.9C16 17.4 15.6 17.9 15 17.9H12C10.9 17.9 10 17 10 15.9V9.9C10 8.8 10.9 7.9 12 7.9H14V5H16V16.9M14 15.9V9.9H12V15.9H14Z", - "name": "xda" - }, - { - "path": "M4.8,3C3.8,3 3,3.8 3,4.8V19.2C3,20.2 3.8,21 4.8,21H19.2C20.2,21 21,20.2 21,19.2V4.8C21,3.8 20.2,3 19.2,3M16.07,5H18.11C18.23,5 18.33,5.04 18.37,5.13C18.43,5.22 18.43,5.33 18.37,5.44L13.9,13.36L16.75,18.56C16.81,18.67 16.81,18.78 16.75,18.87C16.7,18.95 16.61,19 16.5,19H14.47C14.16,19 14,18.79 13.91,18.61L11.04,13.35C11.18,13.1 15.53,5.39 15.53,5.39C15.64,5.19 15.77,5 16.07,5M7.09,7.76H9.1C9.41,7.76 9.57,7.96 9.67,8.15L11.06,10.57C10.97,10.71 8.88,14.42 8.88,14.42C8.77,14.61 8.63,14.81 8.32,14.81H6.3C6.18,14.81 6.09,14.76 6.04,14.67C6,14.59 6,14.47 6.04,14.36L8.18,10.57L6.82,8.2C6.77,8.09 6.75,8 6.81,7.89C6.86,7.81 6.96,7.76 7.09,7.76Z", - "name": "xing-box" - }, - { - "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.85,6H17.74C17.86,6 17.94,6.04 18,6.12C18.04,6.2 18.04,6.3 18,6.41L13.84,13.76L16.5,18.59C16.53,18.69 16.53,18.8 16.5,18.88C16.43,18.96 16.35,19 16.24,19H14.36C14.07,19 13.93,18.81 13.84,18.64L11.17,13.76C11.31,13.5 15.35,6.36 15.35,6.36C15.45,6.18 15.57,6 15.85,6M7.5,8.57H9.39C9.67,8.57 9.81,8.75 9.9,8.92L11.19,11.17C11.12,11.3 9.17,14.75 9.17,14.75C9.07,14.92 8.94,15.11 8.66,15.11H6.78C6.67,15.11 6.59,15.06 6.54,15C6.5,14.9 6.5,14.8 6.54,14.69L8.53,11.17L7.27,9C7.21,8.87 7.2,8.77 7.25,8.69C7.3,8.61 7.39,8.57 7.5,8.57Z", - "name": "xing-circle" - }, - { - "path": "M10.59,2C11.23,2 11.5,2.27 11.58,2.97L11.79,6.14L12.03,10.29C12.05,10.64 12,11 11.86,11.32C11.64,11.77 11.14,11.89 10.73,11.58C10.5,11.39 10.31,11.14 10.15,10.87L6.42,4.55C6.06,3.94 6.17,3.54 6.77,3.16C7.5,2.68 9.73,2 10.59,2M14.83,14.85L15.09,14.91L18.95,16.31C19.61,16.55 19.79,16.92 19.5,17.57C19.06,18.7 18.34,19.66 17.42,20.45C16.96,20.85 16.5,20.78 16.21,20.28L13.94,16.32C13.55,15.61 14.03,14.8 14.83,14.85M4.5,14C4.5,13.26 4.5,12.55 4.75,11.87C4.97,11.2 5.33,11 6,11.27L9.63,12.81C10.09,13 10.35,13.32 10.33,13.84C10.3,14.36 9.97,14.58 9.53,14.73L5.85,15.94C5.15,16.17 4.79,15.96 4.64,15.25C4.55,14.83 4.47,14.4 4.5,14M11.97,21C11.95,21.81 11.6,22.12 10.81,22C9.77,21.8 8.81,21.4 7.96,20.76C7.54,20.44 7.45,19.95 7.76,19.53L10.47,15.97C10.7,15.67 11.03,15.6 11.39,15.74C11.77,15.88 11.97,16.18 11.97,16.59V21M14.45,13.32C13.73,13.33 13.23,12.5 13.64,11.91C14.47,10.67 15.35,9.46 16.23,8.26C16.5,7.85 16.94,7.82 17.31,8.16C18.24,9 18.91,10 19.29,11.22C19.43,11.67 19.25,12.08 18.83,12.2L15.09,13.17L14.45,13.32Z", - "name": "yelp" - } -] +[] diff --git a/cast/src/launcher/entrypoint.ts b/cast/src/launcher/entrypoint.ts index dd4711e379..2e184b830f 100644 --- a/cast/src/launcher/entrypoint.ts +++ b/cast/src/launcher/entrypoint.ts @@ -1,3 +1,4 @@ +import "../../../src/resources/safari-14-attachshadow-patch"; import "../../../src/resources/ha-style"; import "../../../src/resources/roboto"; import "./layout/hc-connect"; diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts index 5ddbcc0ca4..ebaa3172a8 100644 --- a/demo/src/entrypoint.ts +++ b/demo/src/entrypoint.ts @@ -1,3 +1,4 @@ +import "../../src/resources/safari-14-attachshadow-patch"; import "@polymer/polymer/lib/elements/dom-if"; import "@polymer/polymer/lib/elements/dom-repeat"; import "../../src/resources/ha-style"; diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js index 9def4e6095..9e4a34023f 100644 --- a/gallery/src/components/demo-more-info.js +++ b/gallery/src/components/demo-more-info.js @@ -2,8 +2,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../src/components/ha-card"; -import "../../../src/dialogs/more-info/more-info-content"; import "../../../src/state-summary/state-card-content"; +import "./more-info-content"; class DemoMoreInfo extends PolymerElement { static get template() { diff --git a/gallery/src/components/more-info-content.ts b/gallery/src/components/more-info-content.ts new file mode 100644 index 0000000000..6d7271155e --- /dev/null +++ b/gallery/src/components/more-info-content.ts @@ -0,0 +1,73 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { property, PropertyValues, UpdatingElement } from "lit-element"; +import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater"; +import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type"; +import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel"; +import "../../../src/dialogs/more-info/controls/more-info-automation"; +import "../../../src/dialogs/more-info/controls/more-info-camera"; +import "../../../src/dialogs/more-info/controls/more-info-climate"; +import "../../../src/dialogs/more-info/controls/more-info-configurator"; +import "../../../src/dialogs/more-info/controls/more-info-counter"; +import "../../../src/dialogs/more-info/controls/more-info-cover"; +import "../../../src/dialogs/more-info/controls/more-info-default"; +import "../../../src/dialogs/more-info/controls/more-info-fan"; +import "../../../src/dialogs/more-info/controls/more-info-group"; +import "../../../src/dialogs/more-info/controls/more-info-humidifier"; +import "../../../src/dialogs/more-info/controls/more-info-input_datetime"; +import "../../../src/dialogs/more-info/controls/more-info-light"; +import "../../../src/dialogs/more-info/controls/more-info-lock"; +import "../../../src/dialogs/more-info/controls/more-info-media_player"; +import "../../../src/dialogs/more-info/controls/more-info-person"; +import "../../../src/dialogs/more-info/controls/more-info-script"; +import "../../../src/dialogs/more-info/controls/more-info-sun"; +import "../../../src/dialogs/more-info/controls/more-info-timer"; +import "../../../src/dialogs/more-info/controls/more-info-vacuum"; +import "../../../src/dialogs/more-info/controls/more-info-water_heater"; +import "../../../src/dialogs/more-info/controls/more-info-weather"; +import { HomeAssistant } from "../../../src/types"; + +class MoreInfoContent extends UpdatingElement { + @property({ attribute: false }) public hass?: HomeAssistant; + + @property() public stateObj?: HassEntity; + + private _detachedChild?: ChildNode; + + protected firstUpdated(): void { + this.style.position = "relative"; + this.style.display = "block"; + } + + // This is not a lit element, but an updating element, so we implement update + protected update(changedProps: PropertyValues): void { + super.update(changedProps); + const stateObj = this.stateObj; + const hass = this.hass; + + if (!stateObj || !hass) { + if (this.lastChild) { + this._detachedChild = this.lastChild; + // Detach child to prevent it from doing work. + this.removeChild(this.lastChild); + } + return; + } + + if (this._detachedChild) { + this.appendChild(this._detachedChild); + this._detachedChild = undefined; + } + + const moreInfoType = + stateObj.attributes && "custom_ui_more_info" in stateObj.attributes + ? stateObj.attributes.custom_ui_more_info + : "more-info-" + stateMoreInfoType(stateObj); + + dynamicContentUpdater(this, moreInfoType.toUpperCase(), { + hass, + stateObj, + }); + } +} + +customElements.define("more-info-content", MoreInfoContent); diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 19677825d5..8c5ac611e9 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -3,10 +3,10 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../src/components/ha-card"; import { SUPPORT_BRIGHTNESS } from "../../../src/data/light"; -import "../../../src/dialogs/more-info/more-info-content"; import { getEntity } from "../../../src/fake_data/entity"; import { provideHass } from "../../../src/fake_data/provide_hass"; import "../components/demo-more-infos"; +import "../components/more-info-content"; const ENTITIES = [ getEntity("light", "bed_light", "on", { diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index dfb07486d8..a464deb51f 100644 --- a/gallery/src/ha-gallery.js +++ b/gallery/src/ha-gallery.js @@ -1,16 +1,17 @@ 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 "../../src/components/ha-icon-button"; -import "../../src/components/ha-icon"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../src/components/ha-card"; +import "../../src/components/ha-icon"; +import "../../src/components/ha-icon-button"; import "../../src/managers/notification-manager"; import "../../src/styles/polymer-ha-style"; +// eslint-disable-next-line import/extensions import { DEMOS } from "../build/import-demos"; const fixPath = (path) => path.substr(2, path.length - 5); diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index c02d8c1b12..baf2fef515 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -1,12 +1,13 @@ import "@material/mwc-icon-button/mwc-icon-button"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { css, CSSResult, + internalProperty, LitElement, property, - internalProperty, PropertyValues, } from "lit-element"; import { html, TemplateResult } from "lit-html"; @@ -19,13 +20,13 @@ import { HassioAddonRepository, reloadHassioAddons, } from "../../../src/data/hassio/addon"; -import "../../../src/layouts/hass-tabs-subpage"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import "../../../src/layouts/hass-loading-screen"; +import "../../../src/layouts/hass-tabs-subpage"; import { HomeAssistant, Route } from "../../../src/types"; import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories"; import { supervisorTabs } from "../hassio-tabs"; import "./hassio-addon-repository"; -import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { if (a.slug === "local") { @@ -179,7 +180,7 @@ class HassioAddonStore extends LitElement { this._repos.sort(sortRepos); this._addons = addonsInfo.addons; } catch (err) { - alert("Failed to fetch add-on info"); + alert(extractApiErrorMessage(err)); } } diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts index 17dde2fb41..71ef1170d5 100644 --- a/hassio/src/addon-view/config/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -28,6 +28,7 @@ import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart"; import { hassioStyle } from "../../resources/hassio-style"; +import "../../../../src/components/buttons/ha-progress-button"; @customElement("hassio-addon-audio") class HassioAddonAudio extends LitElement { @@ -91,7 +92,9 @@ class HassioAddonAudio extends LitElement {
- Save + + Save +
`; @@ -172,7 +175,10 @@ class HassioAddonAudio extends LitElement { } } - private async _saveSettings(): Promise { + private async _saveSettings(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + this._error = undefined; const data: HassioAddonSetOptionParams = { audio_input: @@ -182,12 +188,14 @@ class HassioAddonAudio extends LitElement { }; try { await setHassioAddonOption(this.hass, this.addon.slug, data); + if (this.addon?.state === "started") { + await suggestAddonRestart(this, this.hass, this.addon); + } } catch { this._error = "Failed to set addon audio device"; } - if (!this._error && this.addon?.state === "started") { - await suggestAddonRestart(this, this.hass, this.addon); - } + + button.progress = false; } } diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index 2e3e4ee0cd..82755a9840 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -5,14 +5,15 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, query, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor"; @@ -21,6 +22,7 @@ import { HassioAddonSetOptionParams, setHassioAddonOption, } from "../../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; @@ -55,20 +57,103 @@ class HassioAddonConfig extends LitElement { ${valid ? "" : html`
Invalid YAML
`}
- + Reset to defaults - - + Save - +
`; } + 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(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + + const confirmed = await showConfirmationDialog(this, { + title: this.addon.name, + text: "Are you sure you want to reset all your options?", + confirmText: "reset options", + dismissText: "no", + }); + + if (!confirmed) { + button.progress = false; + 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, ${extractApiErrorMessage( + err + )}`; + } + button.progress = false; + } + + private async _saveTapped(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + + 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); + if (this.addon?.state === "started") { + await suggestAddonRestart(this, this.hass, this.addon); + } + } catch (err) { + this._error = `Failed to save addon configuration, ${extractApiErrorMessage( + err + )}`; + } + button.progress = false; + } + static get styles(): CSSResult[] { return [ haStyle, @@ -98,80 +183,6 @@ class HassioAddonConfig extends LitElement { `, ]; } - - 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 { - const confirmed = await showConfirmationDialog(this, { - title: this.addon.name, - text: "Are you sure you want to reset all your options?", - confirmText: "reset options", - dismissText: "no", - }); - - 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 { - 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 - }`; - } - if (!this._error && this.addon?.state === "started") { - await suggestAddonRestart(this, this.hass, this.addon); - } - } } declare global { diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index ea16c73a4a..99f871be99 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -4,19 +4,21 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-card"; import { HassioAddonDetails, HassioAddonSetOptionParams, setHassioAddonOption, } from "../../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart"; @@ -85,38 +87,17 @@ class HassioAddonNetwork extends LitElement {
- + Reset to defaults - - Save + + + Save +
`; } - static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - :host { - display: block; - } - ha-card { - display: block; - } - .errors { - color: var(--error-color); - margin-bottom: 16px; - } - .card-actions { - display: flex; - justify-content: space-between; - } - `, - ]; - } - protected update(changedProperties: PropertyValues): void { super.update(changedProperties); if (changedProperties.has("addon")) { @@ -149,7 +130,10 @@ class HassioAddonNetwork extends LitElement { }); } - private async _resetTapped(): Promise { + private async _resetTapped(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const data: HassioAddonSetOptionParams = { network: null, }; @@ -162,17 +146,22 @@ class HassioAddonNetwork extends LitElement { path: "option", }; fireEvent(this, "hass-api-called", eventdata); + if (this.addon?.state === "started") { + await suggestAddonRestart(this, this.hass, this.addon); + } } catch (err) { - this._error = `Failed to set addon network configuration, ${ - err.body?.message || err - }`; - } - if (!this._error && this.addon?.state === "started") { - await suggestAddonRestart(this, this.hass, this.addon); + this._error = `Failed to set addon network configuration, ${extractApiErrorMessage( + err + )}`; } + + button.progress = false; } - private async _saveTapped(): Promise { + private async _saveTapped(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + this._error = undefined; const networkconfiguration = {}; this._config!.forEach((item) => { @@ -191,14 +180,38 @@ class HassioAddonNetwork extends LitElement { path: "option", }; fireEvent(this, "hass-api-called", eventdata); + if (this.addon?.state === "started") { + await suggestAddonRestart(this, this.hass, this.addon); + } } catch (err) { - this._error = `Failed to set addon network configuration, ${ - err.body?.message || err - }`; - } - if (!this._error && this.addon?.state === "started") { - await suggestAddonRestart(this, this.hass, this.addon); + this._error = `Failed to set addon network configuration, ${extractApiErrorMessage( + err + )}`; } + button.progress = false; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + :host { + display: block; + } + ha-card { + display: block; + } + .errors { + color: var(--error-color); + margin-bottom: 16px; + } + .card-actions { + display: flex; + justify-content: space-between; + } + `, + ]; } } diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts index 7e5b519886..3d604e03bb 100644 --- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts +++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts @@ -3,18 +3,19 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-markdown"; import { fetchHassioAddonDocumentation, HassioAddonDetails, } from "../../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import "../../../../src/layouts/hass-loading-screen"; -import "../../../../src/components/ha-circular-progress"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { hassioStyle } from "../../resources/hassio-style"; @@ -80,9 +81,9 @@ class HassioAddonDocumentationDashboard extends LitElement { this.addon!.slug ); } catch (err) { - this._error = `Failed to get addon documentation, ${ - err.body?.message || err - }`; + this._error = `Failed to get addon documentation, ${extractApiErrorMessage( + err + )}`; } } } diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 0be5862955..1de072ee99 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -9,21 +9,19 @@ import { mdiExclamationThick, mdiFlask, mdiHomeAssistant, - mdiInformation, mdiKey, mdiNetwork, mdiPound, mdiShield, } from "@mdi/js"; -import "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -35,19 +33,27 @@ import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-label-badge"; import "../../../../src/components/ha-markdown"; +import "../../../../src/components/ha-settings-row"; import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-switch"; import { fetchHassioAddonChangelog, + fetchHassioAddonInfo, HassioAddonDetails, HassioAddonSetOptionParams, HassioAddonSetSecurityParams, installHassioAddon, setHassioAddonOption, setHassioAddonSecurity, + startHassioAddon, uninstallHassioAddon, + validateHassioAddonOption, } from "../../../../src/data/hassio/addon"; -import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../../src/dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import "../../components/hassio-card-content"; @@ -127,8 +133,6 @@ class HassioAddonInfo extends LitElement { @internalProperty() private _error?: string; - @property({ type: Boolean }) private _installing = false; - protected render(): TemplateResult { return html` ${this._computeUpdateAvailable @@ -386,67 +390,94 @@ class HassioAddonInfo extends LitElement { ${this.addon.version ? html` -
-
Start on boot
- -
- ${this.addon.auto_update || this.hass.userData?.showAdvanced - ? html` -
-
Auto update
- -
- ` - : ""} - ${this.addon.ingress - ? html` -
-
Show in sidebar
- - ${this._computeCannotIngressSidebar - ? html` - - This option requires Home Assistant 0.92 or - later. - - ` - : ""} -
- ` - : ""} - ${this._computeUsesProtectedOptions - ? html` -
-
- Protection mode - - - - Grant the add-on elevated system access. - +
+ + + Start on boot + + + Make the add-on start during a system boot + + + + + ${this.addon.startup !== "once" + ? html` + + + Watchdog -
- -
- ` - : ""} + + This will start the add-on if it crashes + + + + ` + : ""} + ${this.addon.auto_update || this.hass.userData?.showAdvanced + ? html` + + + Auto update + + + Auto update the add-on when there is a new version + available + + + + ` + : ""} + ${this.addon.ingress + ? html` + + + Show in sidebar + + + ${this._computeCannotIngressSidebar + ? "This option requires Home Assistant 0.92 or later." + : "Add this add-on to your sidebar"} + + + + ` + : ""} + ${this._computeUsesProtectedOptions + ? html` + + + Protection mode + + + Blocks elevated system access from the add-on + + + + ` + : ""} +
` : ""} ${this._error ? html`
${this._error}
` : ""} @@ -472,12 +503,9 @@ class HassioAddonInfo extends LitElement { ` : html` - + Start - + `} ${this._computeShowWebUI ? html` @@ -501,12 +529,12 @@ class HassioAddonInfo extends LitElement { ` : ""} - Uninstall - + ${this.addon.build ? html` Install @@ -552,137 +579,6 @@ class HassioAddonInfo extends LitElement { `; } - static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - :host { - display: block; - } - ha-card { - display: block; - margin-bottom: 16px; - } - ha-card.warning { - background-color: var(--error-color); - color: white; - } - ha-card.warning .card-header { - color: white; - } - ha-card.warning .card-content { - color: white; - } - ha-card.warning mwc-button { - --mdc-theme-primary: white !important; - } - .warning { - color: var(--error-color); - --mdc-theme-primary: var(--error-color); - } - .light-color { - color: var(--secondary-text-color); - } - .addon-header { - padding-left: 8px; - font-size: 24px; - color: var(--ha-card-header-color, --primary-text-color); - } - .addon-version { - float: right; - font-size: 15px; - vertical-align: middle; - } - .errors { - color: var(--error-color); - margin-bottom: 16px; - } - .description { - margin-bottom: 16px; - } - img.logo { - max-height: 60px; - margin: 16px 0; - display: block; - } - .state { - display: flex; - margin: 33px 0; - } - .state div { - width: 180px; - display: inline-block; - } - .state ha-svg-icon { - width: 16px; - height: 16px; - color: var(--secondary-text-color); - } - ha-switch { - display: flex; - } - ha-svg-icon.running { - color: var(--paper-green-400); - } - ha-svg-icon.stopped { - color: var(--google-red-300); - } - ha-call-api-button { - font-weight: 500; - color: var(--primary-color); - } - .right { - float: right; - } - protection-enable mwc-button { - --mdc-theme-primary: white; - } - .description 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; - --ha-label-badge-padding: 8px 0 0 0; - } - .changelog { - display: contents; - } - .changelog-link { - color: var(--primary-color); - text-decoration: underline; - cursor: pointer; - } - ha-markdown { - padding: 16px; - } - `, - ]; - } - private get _computeHassioApi(): boolean { return ( this.addon.hassio_api && @@ -767,7 +663,29 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to set addon option, ${err.body?.message || err}`; + this._error = `Failed to set addon option, ${extractApiErrorMessage( + err + )}`; + } + } + + private async _watchdogToggled(): Promise { + this._error = undefined; + const data: HassioAddonSetOptionParams = { + watchdog: !this.addon.watchdog, + }; + 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, ${extractApiErrorMessage( + err + )}`; } } @@ -785,7 +703,9 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to set addon option, ${err.body?.message || err}`; + this._error = `Failed to set addon option, ${extractApiErrorMessage( + err + )}`; } } @@ -803,9 +723,9 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to set addon security option, ${ - err.body?.message || err - }`; + this._error = `Failed to set addon security option, ${extractApiErrorMessage( + err + )}`; } } @@ -823,12 +743,13 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to set addon option, ${err.body?.message || err}`; + this._error = `Failed to set addon option, ${extractApiErrorMessage( + err + )}`; } } private async _openChangelog(): Promise { - this._error = undefined; try { const content = await fetchHassioAddonChangelog( this.hass, @@ -839,15 +760,17 @@ class HassioAddonInfo extends LitElement { content, }); } catch (err) { - this._error = `Failed to get addon changelog, ${ - err.body?.message || err - }`; + showAlertDialog(this, { + title: "Failed to get addon changelog", + text: extractApiErrorMessage(err), + }); } } - private async _installClicked(): Promise { - this._error = undefined; - this._installing = true; + private async _installClicked(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + try { await installHassioAddon(this.hass, this.addon.slug); const eventdata = { @@ -857,12 +780,62 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to install addon, ${err.body?.message || err}`; + showAlertDialog(this, { + title: "Failed to install addon", + text: extractApiErrorMessage(err), + }); } - this._installing = false; + button.progress = false; } - private async _uninstallClicked(): Promise { + private async _startClicked(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + try { + const validate = await validateHassioAddonOption( + this.hass, + this.addon.slug + ); + if (!validate.data.valid) { + await showConfirmationDialog(this, { + title: "Failed to start addon - configruation validation faled!", + text: validate.data.message.split(" Got ")[0], + confirm: () => this._openConfiguration(), + confirmText: "Go to configruation", + dismissText: "Cancel", + }); + button.progress = false; + return; + } + } catch (err) { + showAlertDialog(this, { + title: "Failed to validate addon configuration", + text: extractApiErrorMessage(err), + }); + button.progress = false; + return; + } + + try { + await startHassioAddon(this.hass, this.addon.slug); + this.addon = await fetchHassioAddonInfo(this.hass, this.addon.slug); + } catch (err) { + showAlertDialog(this, { + title: "Failed to start addon", + text: extractApiErrorMessage(err), + }); + } + button.progress = false; + } + + private _openConfiguration(): void { + navigate(this, `/hassio/addon/${this.addon.slug}/config`); + } + + private async _uninstallClicked(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: this.addon.name, text: "Are you sure you want to uninstall this add-on?", @@ -871,6 +844,7 @@ class HassioAddonInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } @@ -884,8 +858,152 @@ class HassioAddonInfo extends LitElement { }; fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._error = `Failed to uninstall addon, ${err.body?.message || err}`; + showAlertDialog(this, { + title: "Failed to uninstall addon", + text: extractApiErrorMessage(err), + }); } + button.progress = false; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + :host { + display: block; + } + ha-card { + display: block; + margin-bottom: 16px; + } + ha-card.warning { + background-color: var(--error-color); + color: white; + } + ha-card.warning .card-header { + color: white; + } + ha-card.warning .card-content { + color: white; + } + ha-card.warning mwc-button { + --mdc-theme-primary: white !important; + } + .warning { + color: var(--error-color); + --mdc-theme-primary: var(--error-color); + } + .light-color { + color: var(--secondary-text-color); + } + .addon-header { + padding-left: 8px; + font-size: 24px; + color: var(--ha-card-header-color, --primary-text-color); + } + .addon-version { + float: right; + font-size: 15px; + vertical-align: middle; + } + .errors { + color: var(--error-color); + margin-bottom: 16px; + } + .description { + margin-bottom: 16px; + } + img.logo { + max-height: 60px; + margin: 16px 0; + display: block; + } + + ha-switch { + display: flex; + } + ha-svg-icon.running { + color: var(--paper-green-400); + } + ha-svg-icon.stopped { + color: var(--google-red-300); + } + ha-call-api-button { + font-weight: 500; + color: var(--primary-color); + } + .right { + float: right; + } + protection-enable mwc-button { + --mdc-theme-primary: white; + } + .description 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; + --ha-label-badge-padding: 8px 0 0 0; + } + .changelog { + display: contents; + } + .changelog-link { + color: var(--primary-color); + text-decoration: underline; + cursor: pointer; + } + ha-markdown { + padding: 16px; + } + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row > span[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + } + ha-settings-row[three-line] { + height: 74px; + } + + .addon-options { + max-width: 50%; + } + @media (max-width: 720px) { + .addon-options { + max-width: 100%; + } + } + `, + ]; } } declare global { diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts index e9f6703c2c..314dc29c09 100644 --- a/hassio/src/addon-view/log/hassio-addon-logs.ts +++ b/hassio/src/addon-view/log/hassio-addon-logs.ts @@ -4,9 +4,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import "../../../../src/components/ha-card"; @@ -14,6 +14,7 @@ import { fetchHassioAddonLogs, HassioAddonDetails, } from "../../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import "../../components/hassio-ansi-to-html"; @@ -75,7 +76,7 @@ class HassioAddonLogs extends LitElement { try { this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug); } catch (err) { - this._error = `Failed to get addon logs, ${err.body?.message || err}`; + this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`; } } diff --git a/hassio/src/components/hassio-ansi-to-html.ts b/hassio/src/components/hassio-ansi-to-html.ts index b553367b8a..b957b172b4 100644 --- a/hassio/src/components/hassio-ansi-to-html.ts +++ b/hassio/src/components/hassio-ansi-to-html.ts @@ -21,7 +21,7 @@ interface State { class HassioAnsiToHtml extends LitElement { @property() public content!: string; - public render(): TemplateResult | void { + protected render(): TemplateResult | void { return html`${this._parseTextToColoredPre(this.content)}`; } diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 2fee6b61dc..a95eafbd76 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -5,19 +5,28 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; -import "../../../src/components/buttons/ha-call-api-button"; +import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-card"; import "../../../src/components/ha-svg-icon"; +import { + extractApiErrorMessage, + HassioResponse, + ignoredStatusCodes, +} from "../../../src/data/hassio/common"; import { HassioHassOSInfo } from "../../../src/data/hassio/host"; import { HassioHomeAssistantInfo, HassioSupervisorInfo, } from "../../../src/data/hassio/supervisor"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../src/dialogs/generic/show-dialog-box"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import { hassioStyle } from "../resources/hassio-style"; @@ -126,31 +135,46 @@ export class HassioUpdate extends LitElement { Release notes - Update - + `; } - private _apiCalled(ev): void { - if (ev.detail.success) { - this._error = ""; + private async _confirmUpdate(ev): Promise { + const item = ev.currentTarget; + item.progress = true; + const confirmed = await showConfirmationDialog(this, { + title: `Update ${item.name}`, + text: `Are you sure you want to update ${item.name} to version ${item.version}?`, + confirmText: "update", + dismissText: "cancel", + }); + + if (!confirmed) { + item.progress = false; return; } - - const response = ev.detail.response; - - if (typeof response.body === "object") { - this._error = response.body.message || "Unknown error"; - } else { - this._error = response.body; + try { + await this.hass.callApi>("POST", item.apiPath); + } catch (err) { + // Only show an error if the status code was not expected (user behind proxy) + // or no status at all(connection terminated) + if (err.status_code && !ignoredStatusCodes.has(err.status_code)) { + showAlertDialog(this, { + title: "Update failed", + text: extractApiErrorMessage(err), + }); + } } + item.progress = false; } static get styles(): CSSResult[] { diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts new file mode 100644 index 0000000000..1ab958891b --- /dev/null +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -0,0 +1,333 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-icon-button"; +import "@material/mwc-tab"; +import "@material/mwc-tab-bar"; +import { mdiClose } from "@mdi/js"; +import { PaperInputElement } from "@polymer/paper-input/paper-input"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import { cache } from "lit-html/directives/cache"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-formfield"; +import "../../../../src/components/ha-header-bar"; +import "../../../../src/components/ha-radio"; +import type { HaRadio } from "../../../../src/components/ha-radio"; +import "../../../../src/components/ha-related-items"; +import "../../../../src/components/ha-svg-icon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; +import { + NetworkInterface, + updateNetworkInterface, +} from "../../../../src/data/hassio/network"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../../src/dialogs/generic/show-dialog-box"; +import { HassDialog } from "../../../../src/dialogs/make-dialog-manager"; +import { haStyleDialog } from "../../../../src/resources/styles"; +import type { HomeAssistant } from "../../../../src/types"; +import { HassioNetworkDialogParams } from "./show-dialog-network"; + +@customElement("dialog-hassio-network") +export class DialogHassioNetwork extends LitElement implements HassDialog { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _prosessing = false; + + @internalProperty() private _params?: HassioNetworkDialogParams; + + @internalProperty() private _network!: { + interface: string; + data: NetworkInterface; + }[]; + + @internalProperty() private _curTabIndex = 0; + + @internalProperty() private _device?: { + interface: string; + data: NetworkInterface; + }; + + @internalProperty() private _dirty = false; + + public async showDialog(params: HassioNetworkDialogParams): Promise { + this._params = params; + this._dirty = false; + this._curTabIndex = 0; + this._network = Object.keys(params.network?.interfaces) + .map((device) => ({ + interface: device, + data: params.network.interfaces[device], + })) + .sort((a, b) => { + return a.data.primary > b.data.primary ? -1 : 1; + }); + this._device = this._network[this._curTabIndex]; + this._device.data.nameservers = String(this._device.data.nameservers); + await this.updateComplete; + } + + public closeDialog(): void { + this._params = undefined; + this._prosessing = false; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + + protected render(): TemplateResult { + if (!this._params || !this._network) { + return html``; + } + + return html` + +
+ + + Network settings + + + + + + ${this._network.length > 1 + ? html` ${this._network.map( + (device) => + html` + ` + )} + ` + : ""} +
+ ${cache(this._renderTab())} + + `; + } + + private _renderTab() { + return html`
+ + + + + + + + + ${this._device!.data.method !== "dhcp" + ? html` + + + NB!: If you are changing IP or gateway addresses, you might lose + the connection.` + : ""} +
+
+ + + ${this._prosessing + ? html`` + : "Update"} + +
`; + } + + private async _updateNetwork() { + this._prosessing = true; + let options: Partial = { + method: this._device!.data.method, + }; + if (options.method !== "dhcp") { + options = { + ...options, + address: this._device!.data.ip_address, + gateway: this._device!.data.gateway, + dns: String(this._device!.data.nameservers).split(","), + }; + } + try { + await updateNetworkInterface(this.hass, this._device!.interface, options); + } catch (err) { + showAlertDialog(this, { + title: "Failed to change network settings", + text: extractApiErrorMessage(err), + }); + this._prosessing = false; + return; + } + this._params?.loadData(); + this.closeDialog(); + } + + private async _handleTabActivated(ev: CustomEvent): Promise { + if (this._dirty) { + const confirm = await showConfirmationDialog(this, { + text: + "You have unsaved changes, these will get lost if you change tabs, do you want to continue?", + confirmText: "yes", + dismissText: "no", + }); + if (!confirm) { + this.requestUpdate("_device"); + return; + } + } + this._curTabIndex = ev.detail.index; + this._device = this._network[ev.detail.index]; + this._device.data.nameservers = String(this._device.data.nameservers); + } + + private _handleRadioValueChanged(ev: CustomEvent): void { + const value = (ev.target as HaRadio).value as "dhcp" | "static"; + + if (!value || !this._device || this._device!.data.method === value) { + return; + } + + this._dirty = true; + + this._device!.data.method = value; + this.requestUpdate("_device"); + } + + private _handleInputValueChanged(ev: CustomEvent): void { + const value: string | null | undefined = (ev.target as PaperInputElement) + .value; + const id = (ev.target as PaperInputElement).id; + + if (!value || !this._device || this._device.data[id] === value) { + return; + } + + this._dirty = true; + + this._device.data[id] = value; + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ha-header-bar { + --mdc-theme-on-primary: var(--primary-text-color); + --mdc-theme-primary: var(--mdc-theme-surface); + flex-shrink: 0; + } + + mwc-tab-bar { + border-bottom: 1px solid + var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); + } + + ha-dialog { + --dialog-content-position: static; + --dialog-content-padding: 0; + --dialog-z-index: 6; + } + + @media all and (min-width: 451px) and (min-height: 501px) { + .container { + width: 400px; + } + } + + .content { + display: block; + padding: 20px 24px; + } + + /* overrule the ha-style-dialog max-height on small screens */ + @media all and (max-width: 450px), all and (max-height: 500px) { + ha-header-bar { + --mdc-theme-primary: var(--app-header-background-color); + --mdc-theme-on-primary: var(--app-header-text-color, white); + } + } + + mwc-button.warning { + --mdc-theme-primary: var(--error-color); + } + + :host([rtl]) app-toolbar { + direction: rtl; + text-align: right; + } + .container { + padding: 20px 24px; + } + .form { + margin-bottom: 53px; + } + .buttons { + position: absolute; + bottom: 0; + width: 100%; + box-sizing: border-box; + border-top: 1px solid + var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); + display: flex; + justify-content: space-between; + padding: 8px; + padding-bottom: max(env(safe-area-inset-bottom), 8px); + background-color: var(--mdc-theme-surface, #fff); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-hassio-network": DialogHassioNetwork; + } +} diff --git a/hassio/src/dialogs/network/show-dialog-network.ts b/hassio/src/dialogs/network/show-dialog-network.ts new file mode 100644 index 0000000000..0f59f8a545 --- /dev/null +++ b/hassio/src/dialogs/network/show-dialog-network.ts @@ -0,0 +1,22 @@ +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import { NetworkInfo } from "../../../../src/data/hassio/network"; +import "./dialog-hassio-network"; + +export interface HassioNetworkDialogParams { + network: NetworkInfo; + loadData: () => Promise; +} + +export const showNetworkDialog = ( + element: HTMLElement, + dialogParams: HassioNetworkDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-hassio-network", + dialogImport: () => + import( + /* webpackChunkName: "dialog-hassio-network" */ "./dialog-hassio-network" + ), + dialogParams, + }); +}; diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 0f9f42f860..150fc2b181 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -5,25 +5,26 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "../../../../src/components/ha-circular-progress"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, query, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; +import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-svg-icon"; import { fetchHassioAddonsInfo, HassioAddonRepository, } from "../../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { setSupervisorOption } from "../../../../src/data/hassio/supervisor"; import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; @@ -190,7 +191,7 @@ class HassioRepositoriesDialog extends LitElement { input.value = ""; } catch (err) { - this._error = err.message; + this._error = extractApiErrorMessage(err); } this._prosessing = false; } @@ -222,7 +223,7 @@ class HassioRepositoriesDialog extends LitElement { await this._dialogParams!.loadData(); } catch (err) { - this._error = err.message; + this._error = extractApiErrorMessage(err); } } } diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts index ff427aca5b..eb70aa51c7 100755 --- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts +++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts @@ -7,18 +7,20 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-svg-icon"; import { getSignedPath } from "../../../../src/data/auth"; +import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { fetchHassioSnapshotInfo, HassioSnapshotDetail, } from "../../../../src/data/hassio/snapshot"; +import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box"; import { PolymerChangedEvent } from "../../../../src/polymer-types"; import { haStyleDialog } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; @@ -266,8 +268,12 @@ class HassioSnapshotDialog extends LitElement { this._snapshotPassword = ev.detail.value; } - private _partialRestoreClicked() { - if (!confirm("Are you sure you want to restore this snapshot?")) { + private async _partialRestoreClicked() { + if ( + !(await showConfirmationDialog(this, { + title: "Are you sure you want partially to restore this snapshot?", + })) + ) { return; } @@ -312,8 +318,13 @@ class HassioSnapshotDialog extends LitElement { ); } - private _fullRestoreClicked() { - if (!confirm("Are you sure you want to restore this snapshot?")) { + private async _fullRestoreClicked() { + if ( + !(await showConfirmationDialog(this, { + title: + "Are you sure you want to wipe your system and restore this snapshot?", + })) + ) { return; } @@ -338,8 +349,12 @@ class HassioSnapshotDialog extends LitElement { ); } - private _deleteClicked() { - if (!confirm("Are you sure you want to delete this snapshot?")) { + private async _deleteClicked() { + if ( + !(await showConfirmationDialog(this, { + title: "Are you sure you want to delete this snapshot?", + })) + ) { return; } @@ -365,7 +380,7 @@ class HassioSnapshotDialog extends LitElement { `/api/hassio/snapshots/${this._snapshot!.slug}/download` ); } catch (err) { - alert(`Error: ${err.message}`); + alert(`Error: ${extractApiErrorMessage(err)}`); return; } diff --git a/hassio/src/dialogs/suggestAddonRestart.ts b/hassio/src/dialogs/suggestAddonRestart.ts index 2af4f31fa4..de4343b379 100644 --- a/hassio/src/dialogs/suggestAddonRestart.ts +++ b/hassio/src/dialogs/suggestAddonRestart.ts @@ -3,6 +3,7 @@ import { HassioAddonDetails, restartHassioAddon, } from "../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { showAlertDialog, showConfirmationDialog, @@ -26,7 +27,7 @@ export const suggestAddonRestart = async ( } catch (err) { showAlertDialog(element, { title: "Failed to restart", - text: err.body.message, + text: extractApiErrorMessage(err), }); } } diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 10f2c3a23f..00c34787e6 100644 --- a/hassio/src/entrypoint.ts +++ b/hassio/src/entrypoint.ts @@ -1,4 +1,5 @@ import "../../src/resources/compatibility"; +import "../../src/resources/safari-14-attachshadow-patch"; import "../../src/resources/roboto"; import "./hassio-main"; diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index d20c690e30..ccabb2e426 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -28,15 +28,7 @@ export class HassioMain extends urlSyncMixin(ProvideHassLitMixin(LitElement)) { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - applyThemesOnElement( - this.parentElement, - this.hass.themes, - (atLeastVersion(this.hass.config.version, 0, 114) - ? this.hass.selectedTheme?.theme - : ((this.hass.selectedTheme as unknown) as string)) || - this.hass.themes.default_theme, - this.hass.selectedTheme - ); + this._applyTheme(); // Paulus - March 17, 2019 // We went to a single hass-toggle-menu event in HA 0.90. However, the @@ -73,6 +65,17 @@ export class HassioMain extends urlSyncMixin(ProvideHassLitMixin(LitElement)) { makeDialogManager(this, this.shadowRoot!); } + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + if (!oldHass) { + return; + } + if (oldHass.themes !== this.hass.themes) { + this._applyTheme(); + } + } + protected render() { return html` `; } + + private _applyTheme() { + let themeName: string; + let options: Partial | undefined; + + if (atLeastVersion(this.hass.config.version, 0, 114)) { + themeName = + this.hass.selectedTheme?.theme || + (this.hass.themes.darkMode && this.hass.themes.default_dark_theme + ? this.hass.themes.default_dark_theme! + : this.hass.themes.default_theme); + + options = this.hass.selectedTheme; + if (themeName === "default" && options?.dark === undefined) { + options = { + ...this.hass.selectedTheme, + dark: this.hass.themes.darkMode, + }; + } + } else { + themeName = + ((this.hass.selectedTheme as unknown) as string) || + this.hass.themes.default_theme; + } + + applyThemesOnElement( + this.parentElement, + this.hass.themes, + themeName, + options + ); + } } declare global { diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts index 79c8f35b2f..18f2b1d0ed 100644 --- a/hassio/src/snapshots/hassio-snapshots.ts +++ b/hassio/src/snapshots/hassio-snapshots.ts @@ -13,15 +13,17 @@ import { CSSResultArray, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../src/common/dom/fire_event"; +import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-card"; import "../../../src/components/ha-svg-icon"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { createHassioFullSnapshot, createHassioPartialSnapshot, @@ -77,11 +79,10 @@ class HassioSnapshots extends LitElement { }, { slug: "ssl", name: "SSL", checked: true }, { slug: "share", name: "Share", checked: true }, + { slug: "media", name: "Media", checked: true }, { slug: "addons/local", name: "Local add-ons", checked: true }, ]; - @internalProperty() private _creatingSnapshot = false; - @internalProperty() private _error = ""; public async refreshData() { @@ -192,12 +193,9 @@ class HassioSnapshots extends LitElement { : undefined}
- + Create - +
@@ -230,7 +228,7 @@ class HassioSnapshots extends LitElement { .icon=${snapshot.type === "full" ? mdiPackageVariantClosed : mdiPackageVariant} - .icon-class="snapshot" + icon-class="snapshot" > @@ -244,7 +242,7 @@ class HassioSnapshots extends LitElement { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - this._updateSnapshots(); + this.refreshData(); } protected updated(changedProps: PropertyValues) { @@ -293,17 +291,20 @@ class HassioSnapshots extends LitElement { this._snapshots = await fetchHassioSnapshots(this.hass); this._snapshots.sort((a, b) => (a.date < b.date ? 1 : -1)); } catch (err) { - this._error = err.message; + this._error = extractApiErrorMessage(err); } } - private async _createSnapshot() { + private async _createSnapshot(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + this._error = ""; if (this._snapshotHasPassword && !this._snapshotPassword.length) { this._error = "Please enter a password."; + button.progress = false; return; } - this._creatingSnapshot = true; await this.updateComplete; const name = @@ -343,10 +344,9 @@ class HassioSnapshots extends LitElement { this._updateSnapshots(); fireEvent(this, "hass-api-called", { success: true, response: null }); } catch (err) { - this._error = err.message; - } finally { - this._creatingSnapshot = false; + this._error = extractApiErrorMessage(err); } + button.progress = false; } private _computeDetails(snapshot: HassioSnapshot) { diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index 3a53925ddb..94400402ae 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -1,18 +1,31 @@ import "@material/mwc-button"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; +import { mdiDotsVertical } from "@mdi/js"; +import { safeDump } from "js-yaml"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; -import "../../../src/components/buttons/ha-call-api-button"; +import memoizeOne from "memoize-one"; +import "../../../src/components/buttons/ha-progress-button"; +import "../../../src/components/ha-button-menu"; +import "../../../src/components/ha-card"; +import "../../../src/components/ha-settings-row"; +import { + extractApiErrorMessage, + ignoredStatusCodes, +} from "../../../src/data/hassio/common"; import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware"; import { changeHostOptions, + configSyncOS, fetchHassioHostInfo, HassioHassOSInfo, HassioHostInfo as HassioHostInfoType, @@ -20,6 +33,10 @@ import { shutdownHost, updateOS, } from "../../../src/data/hassio/host"; +import { + fetchNetworkInfo, + NetworkInfo, +} from "../../../src/data/hassio/network"; import { HassioInfo } from "../../../src/data/hassio/supervisor"; import { showAlertDialog, @@ -29,6 +46,7 @@ import { import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown"; +import { showNetworkDialog } from "../dialogs/network/show-dialog-network"; import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-host-info") @@ -41,164 +59,178 @@ class HassioHostInfo extends LitElement { @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo; - @internalProperty() private _errors?: string; + @internalProperty() public _networkInfo?: NetworkInfo; - public render(): TemplateResult | void { + protected render(): TemplateResult | void { + const primaryIpAddress = this.hostInfo.features.includes("network") + ? this._primaryIpAddress(this._networkInfo!) + : ""; return html` - +
-

Host system

- - - - - - - - - - - ${!this.hostInfo.features.includes("hassos") - ? html` - - - ` - : ""} - ${this.hostInfo.deployment - ? html` - - - - - ` - : ""} - -
Hostname${this.hostInfo.hostname}
System${this.hostInfo.operating_system}
Docker version${this.hassioInfo.docker}
Deployment${this.hostInfo.deployment}
- - Hardware - ${this.hostInfo.features.includes("hostname") - ? html` + ? html` + + Hostname + + + ${this.hostInfo.hostname} + - Change hostname - ` + ` : ""} - ${this._errors - ? html`
Error: ${this._errors}
` + ${this.hostInfo.features.includes("network") + ? html` + + IP address + + + ${primaryIpAddress} + + + + ` + : ""} + + + + Operating system + + + ${this.hostInfo.operating_system} + + ${this.hostInfo.version !== this.hostInfo.version_latest && + this.hostInfo.features.includes("hassos") + ? html` + + Update + + ` + : ""} + + ${!this.hostInfo.features.includes("hassos") + ? html` + + Docker version + + + ${this.hassioInfo.docker} + + ` + : ""} + ${this.hostInfo.deployment + ? html` + + Deployment + + + ${this.hostInfo.deployment} + + ` : ""}
${this.hostInfo.features.includes("reboot") ? html` - Reboot + Reboot + ` : ""} ${this.hostInfo.features.includes("shutdown") ? html` - Shutdown - ` - : ""} - ${this.hostInfo.features.includes("hassos") - ? html` - Import from USB + Shutdown + ` : ""} - ${this.hostInfo.version !== this.hostInfo.version_latest - ? html` Update ` - : ""} + + + + + + + Hardware + + ${this.hostInfo.features.includes("hassos") + ? html` + Import from USB + ` + : ""} +
`; } - static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - ha-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(--error-color); - margin-top: 16px; - } - mwc-button.info { - max-width: calc(50% - 12px); - } - table.info { - margin-bottom: 10px; - } - .warning { - --mdc-theme-primary: var(--error-color); - } - `, - ]; - } - protected firstUpdated(): void { - this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev)); + this._loadData(); } - private _apiCalled(ev): void { - if (ev.detail.success) { - this._errors = undefined; - return; + private _primaryIpAddress = memoizeOne((network_info: NetworkInfo) => { + if (!network_info) { + return ""; } + return Object.keys(network_info?.interfaces) + .map((device) => network_info.interfaces[device]) + .find((device) => device.primary)?.ip_address; + }); - const response = ev.detail.response; - - this._errors = - typeof response.body === "object" - ? response.body.message || "Unknown error" - : response.body; + private async _handleMenuAction(ev: CustomEvent) { + switch (ev.detail.index) { + case 0: + await this._showHardware(); + break; + case 1: + await this._importFromUSB(); + break; + } } private async _showHardware(): Promise { try { - const content = this._objectToMarkdown( - await fetchHassioHardwareInfo(this.hass) - ); + const content = await fetchHassioHardwareInfo(this.hass); showHassioMarkdownDialog(this, { title: "Hardware", - content, + content: `
${safeDump(content, { indent: 2 })}
`, }); } catch (err) { - showHassioMarkdownDialog(this, { - title: "Hardware", - content: "Error getting hardware info", + showAlertDialog(this, { + title: "Failed to get Hardware list", + text: extractApiErrorMessage(err), }); } } - private async _rebootHost(): Promise { + private async _hostReboot(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Reboot", text: "Are you sure you want to reboot the host?", @@ -207,20 +239,28 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } try { await rebootHost(this.hass); } catch (err) { - showAlertDialog(this, { - title: "Failed to reboot", - text: err.body.message, - }); + // Ignore connection errors, these are all expected + if (err.status_code && !ignoredStatusCodes.has(err.status_code)) { + showAlertDialog(this, { + title: "Failed to reboot", + text: extractApiErrorMessage(err), + }); + } } + button.progress = false; } - private async _shutdownHost(): Promise { + private async _hostShutdown(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Shutdown", text: "Are you sure you want to shutdown the host?", @@ -229,20 +269,28 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } try { await shutdownHost(this.hass); } catch (err) { - showAlertDialog(this, { - title: "Failed to shutdown", - text: err.body.message, - }); + // Ignore connection errors, these are all expected + if (err.status_code && !ignoredStatusCodes.has(err.status_code)) { + showAlertDialog(this, { + title: "Failed to shutdown", + text: extractApiErrorMessage(err), + }); + } } + button.progress = false; } - private async _updateOS(): Promise { + private async _osUpdate(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Update", text: "Are you sure you want to update the OS?", @@ -251,6 +299,7 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } @@ -259,30 +308,17 @@ class HassioHostInfo extends LitElement { } catch (err) { showAlertDialog(this, { title: "Failed to update", - text: err.body.message, + text: extractApiErrorMessage(err), }); } + button.progress = false; } - 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}`); - } - } + private async _changeNetworkClicked(): Promise { + showNetworkDialog(this, { + network: this._networkInfo!, + loadData: () => this._loadData(), }); - - return data; } private async _changeHostnameClicked(): Promise { @@ -301,11 +337,83 @@ class HassioHostInfo extends LitElement { } catch (err) { showAlertDialog(this, { title: "Setting hostname failed", - text: err.body.message, + text: extractApiErrorMessage(err), }); } } } + + private async _importFromUSB(): Promise { + try { + await configSyncOS(this.hass); + this.hostInfo = await fetchHassioHostInfo(this.hass); + } catch (err) { + showAlertDialog(this, { + title: "Failed to import from USB", + text: extractApiErrorMessage(err), + }); + } + } + + private async _loadData(): Promise { + this._networkInfo = await fetchNetworkInfo(this.hass); + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + ha-card { + height: 100%; + justify-content: space-between; + flex-direction: column; + display: flex; + } + .card-actions { + height: 48px; + border-top: none; + display: flex; + justify-content: space-between; + align-items: center; + } + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row[three-line] { + height: 74px; + } + ha-settings-row > span[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + } + + .warning { + --mdc-theme-primary: var(--error-color); + } + + ha-button-menu { + color: var(--secondary-text-color); + --mdc-menu-min-width: 200px; + } + @media (min-width: 563px) { + paper-listbox { + max-height: 150px; + overflow: auto; + } + } + paper-item { + cursor: pointer; + min-height: 35px; + } + mwc-list-item ha-svg-icon { + color: var(--secondary-text-color); + } + `, + ]; + } } declare global { diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts index 7423da51a8..fcec51d607 100644 --- a/hassio/src/system/hassio-supervisor-info.ts +++ b/hassio/src/system/hassio-supervisor-info.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { css, CSSResult, @@ -6,26 +5,29 @@ import { html, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; -import { fireEvent } from "../../../src/common/dom/fire_event"; -import "../../../src/components/buttons/ha-call-api-button"; +import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-settings-row"; +import "../../../src/components/ha-switch"; +import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host"; import { HassioSupervisorInfo as HassioSupervisorInfoType, + reloadSupervisor, setSupervisorOption, SupervisorOptions, + updateSupervisor, + fetchHassioSupervisorInfo, } from "../../../src/data/hassio/supervisor"; -import "../../../src/components/ha-switch"; import { - showConfirmationDialog, showAlertDialog, + showConfirmationDialog, } from "../../../src/dialogs/generic/show-dialog-box"; -import "../../../src/components/ha-settings-row"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import { hassioStyle } from "../resources/hassio-style"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; @customElement("hassio-supervisor-info") class HassioSupervisorInfo extends LitElement { @@ -33,188 +35,206 @@ class HassioSupervisorInfo extends LitElement { @property() public supervisorInfo!: HassioSupervisorInfoType; - @internalProperty() private _errors?: string; + @property() public hostInfo!: HassioHostInfoType; - public render(): TemplateResult | void { + protected render(): TemplateResult | void { return html` - +
-

Supervisor

- - - - - - - - - - - ${this.supervisorInfo.channel !== "stable" - ? html` - - - - - ` - : ""} - -
Version${this.supervisorInfo.version}
Latest version${this.supervisorInfo.version_latest}
Channel${this.supervisorInfo.channel}
-
- - - Share Diagnostics - - - Share crash reports and diagnostic information. - +
+ + ` + : html`
+ You are running an unsupported installation. + - Learn more - - - - -
- ${this._errors - ? html`
Error: ${this._errors}
` - : ""} + Learn More + +
`}
- Reload - ${this.supervisorInfo.version !== this.supervisorInfo.version_latest - ? html` - Update - ` - : ""} - ${this.supervisorInfo.channel === "beta" - ? html` - Leave beta channel - ` - : ""} - ${this.supervisorInfo.channel === "stable" - ? html` - Join beta channel - ` - : ""} + Reload +
`; } - static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - ha-card { - height: 100%; - width: 100%; - } - .card-content { - color: var(--primary-text-color); - box-sizing: border-box; - height: calc(100% - 47px); - } - .info, - .options { - width: 100%; - } - .info td:nth-child(2) { - text-align: right; - } - .errors { - color: var(--error-color); - margin-top: 16px; - } - ha-settings-row { - padding: 0; - } - button.link { - color: var(--primary-color); - } - `, - ]; - } + private async _toggleBeta(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; - protected firstUpdated(): void { - this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev)); - } + if (this.supervisorInfo.channel === "stable") { + const confirmed = await showConfirmationDialog(this, { + title: "WARNING", + text: html` 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 Core
    • +
  • Home Assistant Supervisor
    • +
  • Home Assistant Operating System
    • +
    + Do you want to join the beta channel?`, + confirmText: "join beta", + dismissText: "no", + }); - private _apiCalled(ev): void { - if (ev.detail.success) { - this._errors = undefined; - return; + if (!confirmed) { + button.progress = false; + return; + } } - const response = ev.detail.response; - - this._errors = - typeof response.body === "object" - ? response.body.message || "Unknown error" - : response.body; + try { + const data: Partial = { + channel: this.supervisorInfo.channel === "stable" ? "beta" : "stable", + }; + await setSupervisorOption(this.hass, data); + await reloadSupervisor(this.hass); + this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass); + } catch (err) { + showAlertDialog(this, { + title: "Failed to set supervisor option", + text: extractApiErrorMessage(err), + }); + } + button.progress = false; } - private async _joinBeta() { + private async _supervisorReload(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + + try { + await reloadSupervisor(this.hass); + this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass); + } catch (err) { + showAlertDialog(this, { + title: "Failed to reload the supervisor", + text: extractApiErrorMessage(err), + }); + } + button.progress = false; + } + + private async _supervisorUpdate(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { - title: "WARNING", - text: html` 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 Core
    • -
  • Home Assistant Supervisor
    • -
  • Home Assistant Operating System
    • -
    - Do you want to join the beta channel?`, - confirmText: "join beta", - dismissText: "no", + title: "Update supervisor", + text: `Are you sure you want to update supervisor to version ${this.supervisorInfo.version_latest}?`, + confirmText: "update", + dismissText: "cancel", }); if (!confirmed) { + button.progress = false; 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); + await updateSupervisor(this.hass); } catch (err) { - this._errors = `Error joining beta channel, ${err.body?.message || err}`; + showAlertDialog(this, { + title: "Failed to update the supervisor", + text: extractApiErrorMessage(err), + }); } + button.progress = false; } - private async _diagnosticsInformationDialog() { + private async _diagnosticsInformationDialog(): Promise { await showAlertDialog(this, { title: "Help Improve Home Assistant", text: html`Would you want to automatically share crash reports and @@ -224,29 +244,61 @@ class HassioSupervisorInfo extends LitElement { accessible to the Home Assistant Core team and will not be shared with others.

    - The data does not include any private/sensetive information and you can + The data does not include any private/sensitive information and you can disable this in settings at any time you want.`, }); } - private async _toggleDiagnostics() { + private async _toggleDiagnostics(): Promise { try { const data: SupervisorOptions = { diagnostics: !this.supervisorInfo?.diagnostics, }; await setSupervisorOption(this.hass, data); - const eventdata = { - success: true, - response: undefined, - path: "option", - }; - fireEvent(this, "hass-api-called", eventdata); } catch (err) { - this._errors = `Error changing supervisor setting, ${ - err.body?.message || err - }`; + showAlertDialog(this, { + title: "Failed to set supervisor option", + text: extractApiErrorMessage(err), + }); } } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + ha-card { + height: 100%; + justify-content: space-between; + flex-direction: column; + display: flex; + } + .card-actions { + height: 48px; + border-top: none; + display: flex; + justify-content: space-between; + align-items: center; + } + button.link { + color: var(--primary-color); + } + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row[three-line] { + height: 74px; + } + ha-settings-row > div[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + } + `, + ]; + } } declare global { diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index ec2dbe7031..88528eb431 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -7,12 +7,14 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-card"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; import "../../../src/layouts/hass-loading-screen"; import { haStyle } from "../../../src/resources/styles"; @@ -67,7 +69,7 @@ class HassioSupervisorLog extends LitElement { await this._loadData(); } - public render(): TemplateResult | void { + protected render(): TemplateResult | void { return html` ${this._error ? html`
    ${this._error}
    ` : ""} @@ -102,18 +104,49 @@ class HassioSupervisorLog extends LitElement { : html``}
    - Refresh + + Refresh +
    `; } + private async _setLogProvider(ev): Promise { + const provider = ev.detail.item.getAttribute("provider"); + this._selectedLogProvider = provider; + this._loadData(); + } + + private async _refresh(ev: CustomEvent): Promise { + const button = ev.currentTarget as any; + button.progress = true; + await this._loadData(); + button.progress = false; + } + + private async _loadData(): Promise { + this._error = undefined; + + try { + this._content = await fetchHassioLogs( + this.hass, + this._selectedLogProvider + ); + } catch (err) { + this._error = `Failed to get supervisor logs, ${extractApiErrorMessage( + err + )}`; + } + } + static get styles(): CSSResult[] { return [ haStyle, hassioStyle, css` ha-card { + margin-top: 8px; width: 100%; } pre { @@ -127,38 +160,9 @@ class HassioSupervisorLog extends LitElement { color: var(--error-color); margin-bottom: 16px; } - .card-content { - padding-top: 0px; - } `, ]; } - - private async _setLogProvider(ev): Promise { - const provider = ev.detail.item.getAttribute("provider"); - this._selectedLogProvider = provider; - await this._loadData(); - } - - private async _loadData(): Promise { - this._error = undefined; - this._content = undefined; - - try { - this._content = await fetchHassioLogs( - this.hass, - this._selectedLogProvider - ); - } catch (err) { - this._error = `Failed to get supervisor logs, ${ - err.body?.message || err - }`; - } - } - - private async _refresh(): Promise { - await this._loadData(); - } } declare global { diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index 00a304ed03..f2ffc2cc62 100644 --- a/hassio/src/system/hassio-system.ts +++ b/hassio/src/system/hassio-system.ts @@ -12,8 +12,8 @@ import { HassioHostInfo, } from "../../../src/data/hassio/host"; import { - HassioSupervisorInfo, HassioInfo, + HassioSupervisorInfo, } from "../../../src/data/hassio/supervisor"; import "../../../src/layouts/hass-tabs-subpage"; import { haStyle } from "../../../src/resources/styles"; @@ -40,7 +40,7 @@ class HassioSystem extends LitElement { @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo; - public render(): TemplateResult | void { + protected render(): TemplateResult | void { return html` System
    -

    Information

    -

    System log

     diff --git a/package.json b/package.json index 47bf3b8ec9..dd550682fe 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,12 @@ "version": "1.0.0", "scripts": { "build": "script/build_frontend", - "lint:eslint": "eslint '**/src/**/*.{js,ts,html}' --ignore-path .gitignore", - "format:eslint": "eslint '**/src/**/*.{js,ts,html}' --fix --ignore-path .gitignore", - "lint:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --check", - "format:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --write", + "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --ignore-path .gitignore", + "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --fix --ignore-path .gitignore", + "lint:prettier": "prettier \"**/src/**/*.{js,ts,json,css,md}\" --check", + "format:prettier": "prettier \"**/src/**/*.{js,ts,json,css,md}\" --write", "lint:types": "tsc", - "lint:lit": "lit-analyzer '**/src/**/*.ts' --format markdown --outFile result.md", + "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md", "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types", "format": "npm run format:eslint && npm run format:prettier", "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts", @@ -23,8 +23,11 @@ "license": "Apache-2.0", "dependencies": { "@formatjs/intl-pluralrules": "^1.5.8", - "@fullcalendar/core": "^5.0.0-beta.2", - "@fullcalendar/daygrid": "^5.0.0-beta.2", + "@fullcalendar/common": "5.1.0", + "@fullcalendar/core": "5.1.0", + "@fullcalendar/daygrid": "5.1.0", + "@fullcalendar/interaction": "5.1.0", + "@fullcalendar/list": "5.1.0", "@material/chips": "=8.0.0-canary.096a7a066.0", "@material/circular-progress": "=8.0.0-canary.a78ceb112.0", "@material/mwc-button": "^0.18.0", @@ -41,8 +44,8 @@ "@material/mwc-tab": "^0.18.0", "@material/mwc-tab-bar": "^0.18.0", "@material/top-app-bar": "=8.0.0-canary.096a7a066.0", - "@mdi/js": "5.4.55", - "@mdi/svg": "5.4.55", + "@mdi/js": "5.5.55", + "@mdi/svg": "5.5.55", "@polymer/app-layout": "^3.0.2", "@polymer/app-route": "^3.0.2", "@polymer/app-storage": "^3.0.2", @@ -76,6 +79,7 @@ "@polymer/polymer": "3.1.0", "@thomasloven/round-slider": "0.5.0", "@types/chromecast-caf-sender": "^1.0.3", + "@types/sortablejs": "^1.10.6", "@vaadin/vaadin-combo-box": "^5.0.10", "@vaadin/vaadin-date-picker": "^4.0.7", "@vue/web-component-wrapper": "^1.2.0", @@ -85,6 +89,7 @@ "codemirror": "^5.49.0", "comlink": "^4.3.0", "cpx": "^1.5.0", + "cropperjs": "^1.5.7", "deep-clone-simple": "^1.1.1", "deep-freeze": "^0.0.1", "es6-object-assign": "^1.1.0", @@ -110,6 +115,7 @@ "regenerator-runtime": "^0.13.2", "resize-observer-polyfill": "^1.5.1", "roboto-fontface": "^0.10.0", + "sortablejs": "^1.10.2", "superstruct": "^0.10.12", "unfetch": "^4.1.0", "vue": "^2.6.11", @@ -145,7 +151,7 @@ "@types/leaflet-draw": "^1.0.1", "@types/marked": "^1.1.0", "@types/memoize-one": "4.1.0", - "@types/mocha": "^5.2.6", + "@types/mocha": "^7.0.2", "@types/resize-observer-browser": "^0.1.3", "@types/webspeechapi": "^0.0.29", "@typescript-eslint/eslint-plugin": "^2.28.0", @@ -156,7 +162,7 @@ "eslint": "^6.8.0", "eslint-config-airbnb-typescript": "^7.2.1", "eslint-config-prettier": "^6.10.1", - "eslint-import-resolver-webpack": "^0.12.1", + "eslint-import-resolver-webpack": "^0.12.2", "eslint-plugin-disable": "^2.0.1", "eslint-plugin-import": "^2.20.2", "eslint-plugin-lit": "^1.2.0", @@ -179,7 +185,7 @@ "magic-string": "^0.25.7", "map-stream": "^0.0.7", "merge-stream": "^1.0.1", - "mocha": "^6.0.2", + "mocha": "^7.2.0", "object-hash": "^2.0.3", "open": "^7.0.4", "prettier": "^2.0.4", @@ -196,7 +202,7 @@ "systemjs": "^6.3.2", "terser-webpack-plugin": "^3.0.6", "ts-lit-plugin": "^1.2.0", - "ts-mocha": "^6.0.0", + "ts-mocha": "^7.0.0", "typescript": "^3.8.3", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", diff --git a/setup.py b/setup.py index 834ffe3aab..9f9a06db68 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ from setuptools import setup, find_packages setup( name="home-assistant-frontend", - version="20200807.1", + version="20200918.0", description="The Home Assistant frontend", url="https://github.com/home-assistant/home-assistant-polymer", author="The Home Assistant Authors", diff --git a/src/common/config/components_with_service.ts b/src/common/config/components_with_service.ts new file mode 100644 index 0000000000..9775b8c6f6 --- /dev/null +++ b/src/common/config/components_with_service.ts @@ -0,0 +1,9 @@ +import { HomeAssistant } from "../../types"; + +/** Return an array of domains with the service. */ +export const componentsWithService = ( + hass: HomeAssistant, + service: string +): Array => + hass && + Object.keys(hass.services).filter((key) => service in hass.services[key]); diff --git a/src/common/config/is_service_loaded.ts b/src/common/config/is_service_loaded.ts new file mode 100644 index 0000000000..c8a7824a5a --- /dev/null +++ b/src/common/config/is_service_loaded.ts @@ -0,0 +1,9 @@ +import { HomeAssistant } from "../../types"; + +/** Return if a service is loaded. */ +export const isServiceLoaded = ( + hass: HomeAssistant, + domain: string, + service: string +): boolean => + hass && domain in hass.services && service in hass.services[domain]; diff --git a/src/common/const.ts b/src/common/const.ts index dc2bf20595..640c4fb13a 100644 --- a/src/common/const.ts +++ b/src/common/const.ts @@ -44,7 +44,6 @@ export const DOMAINS_WITH_MORE_INFO = [ "script", "sun", "timer", - "updater", "vacuum", "water_heater", "weather", diff --git a/src/common/datetime/relative_time.ts b/src/common/datetime/relative_time.ts index cc414b1e12..c2a761394b 100644 --- a/src/common/datetime/relative_time.ts +++ b/src/common/datetime/relative_time.ts @@ -21,6 +21,11 @@ export default function relativeTime( const tense = delta >= 0 ? "past" : "future"; delta = Math.abs(delta); let roundedDelta = Math.round(delta); + + if (roundedDelta === 0) { + return localize("ui.components.relative_time.just_now"); + } + let unit = "week"; for (let i = 0; i < tests.length; i++) { diff --git a/src/common/decorators/local-storage.ts b/src/common/decorators/local-storage.ts new file mode 100644 index 0000000000..d4034ae25f --- /dev/null +++ b/src/common/decorators/local-storage.ts @@ -0,0 +1,155 @@ +import { UnsubscribeFunc } from "home-assistant-js-websocket"; +import { PropertyDeclaration, UpdatingElement } from "lit-element"; +import type { ClassElement } from "../../types"; + +type Callback = (oldValue: any, newValue: any) => void; + +class Storage { + constructor() { + window.addEventListener("storage", (ev: StorageEvent) => { + if (ev.key && this.hasKey(ev.key)) { + this._storage[ev.key] = ev.newValue + ? JSON.parse(ev.newValue) + : ev.newValue; + if (this._listeners[ev.key]) { + this._listeners[ev.key].forEach((listener) => + listener( + ev.oldValue ? JSON.parse(ev.oldValue) : ev.oldValue, + this._storage[ev.key!] + ) + ); + } + } + }); + } + + private _storage: { [storageKey: string]: any } = {}; + + private _listeners: { + [storageKey: string]: Callback[]; + } = {}; + + public addFromStorage(storageKey: any): void { + if (!this._storage[storageKey]) { + const data = window.localStorage.getItem(storageKey); + if (data) { + this._storage[storageKey] = JSON.parse(data); + } + } + } + + public subscribeChanges( + storageKey: string, + callback: Callback + ): UnsubscribeFunc { + if (this._listeners[storageKey]) { + this._listeners[storageKey].push(callback); + } else { + this._listeners[storageKey] = [callback]; + } + return () => { + this.unsubscribeChanges(storageKey, callback); + }; + } + + public unsubscribeChanges(storageKey: string, callback: Callback) { + if (!(storageKey in this._listeners)) { + return; + } + const index = this._listeners[storageKey].indexOf(callback); + if (index !== -1) { + this._listeners[storageKey].splice(index, 1); + } + } + + public hasKey(storageKey: string): any { + return storageKey in this._storage; + } + + public getValue(storageKey: string): any { + return this._storage[storageKey]; + } + + public setValue(storageKey: string, value: any): any { + this._storage[storageKey] = value; + try { + window.localStorage.setItem(storageKey, JSON.stringify(value)); + } catch (err) { + // Safari in private mode doesn't allow localstorage + } + } +} + +const storage = new Storage(); + +export const LocalStorage = ( + storageKey?: string, + property?: boolean, + propertyOptions?: PropertyDeclaration +): any => { + return (clsElement: ClassElement) => { + const key = String(clsElement.key); + storageKey = storageKey || String(clsElement.key); + const initVal = clsElement.initializer + ? clsElement.initializer() + : undefined; + + storage.addFromStorage(storageKey); + + const subscribe = (el: UpdatingElement): UnsubscribeFunc => + storage.subscribeChanges(storageKey!, (oldValue) => { + el.requestUpdate(clsElement.key, oldValue); + }); + + const getValue = (): any => { + return storage.hasKey(storageKey!) + ? storage.getValue(storageKey!) + : initVal; + }; + + const setValue = (el: UpdatingElement, value: any) => { + let oldValue: unknown | undefined; + if (property) { + oldValue = getValue(); + } + storage.setValue(storageKey!, value); + if (property) { + el.requestUpdate(clsElement.key, oldValue); + } + }; + + return { + kind: "method", + placement: "prototype", + key: clsElement.key, + descriptor: { + set(this: UpdatingElement, value: unknown) { + setValue(this, value); + }, + get() { + return getValue(); + }, + enumerable: true, + configurable: true, + }, + finisher(cls: typeof UpdatingElement) { + if (property) { + const connectedCallback = cls.prototype.connectedCallback; + const disconnectedCallback = cls.prototype.disconnectedCallback; + cls.prototype.connectedCallback = function () { + connectedCallback.call(this); + this[`__unbsubLocalStorage${key}`] = subscribe(this); + }; + cls.prototype.disconnectedCallback = function () { + disconnectedCallback.call(this); + this[`__unbsubLocalStorage${key}`](); + }; + cls.createProperty(clsElement.key, { + noAccessor: true, + ...propertyOptions, + }); + } + }, + }; + }; +}; diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index f994f0d99d..902a1a196a 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -1,14 +1,14 @@ -import { derivedStyles, darkStyles } from "../../resources/styles"; +import { darkStyles, derivedStyles } from "../../resources/styles"; import { HomeAssistant, Theme } from "../../types"; import { hex2rgb, + lab2hex, + lab2rgb, rgb2hex, rgb2lab, - lab2rgb, - lab2hex, } from "../color/convert-color"; +import { labBrighten, labDarken } from "../color/lab"; import { rgbContrast } from "../color/rgb"; -import { labDarken, labBrighten } from "../color/lab"; interface ProcessedTheme { keys: { [key: string]: "" }; @@ -105,7 +105,7 @@ const processTheme = ( const keys = {}; for (const key of Object.keys(combinedTheme)) { const prefixedKey = `--${key}`; - const value = combinedTheme[key]!; + const value = String(combinedTheme[key]); styles[prefixedKey] = value; keys[prefixedKey] = ""; diff --git a/src/common/dom/load_resource.ts b/src/common/dom/load_resource.ts index c4933ed8e5..f5288b886d 100644 --- a/src/common/dom/load_resource.ts +++ b/src/common/dom/load_resource.ts @@ -22,9 +22,6 @@ const _load = ( (element as HTMLScriptElement).async = true; if (type) { (element as HTMLScriptElement).type = type; - // https://github.com/home-assistant/frontend/pull/6328 - (element as HTMLScriptElement).crossOrigin = - url.substr(0, 1) === "/" ? "use-credentials" : "anonymous"; } break; case "link": diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts index c1eb694afe..5442e432ff 100644 --- a/src/common/entity/binary_sensor_icon.ts +++ b/src/common/entity/binary_sensor_icon.ts @@ -3,49 +3,51 @@ import { HassEntity } from "home-assistant-js-websocket"; /** Return an icon representing a binary sensor state. */ export const binarySensorIcon = (state: HassEntity) => { - const activated = state.state && state.state === "off"; + const is_off = state.state && state.state === "off"; switch (state.attributes.device_class) { case "battery": - return activated ? "hass:battery" : "hass:battery-outline"; + return is_off ? "hass:battery" : "hass:battery-outline"; + case "battery_charging": + return is_off ? "hass:battery" : "hass:battery-charging"; case "cold": - return activated ? "hass:thermometer" : "hass:snowflake"; + return is_off ? "hass:thermometer" : "hass:snowflake"; case "connectivity": - return activated ? "hass:server-network-off" : "hass:server-network"; + return is_off ? "hass:server-network-off" : "hass:server-network"; case "door": - return activated ? "hass:door-closed" : "hass:door-open"; + return is_off ? "hass:door-closed" : "hass:door-open"; case "garage_door": - return activated ? "hass:garage" : "hass:garage-open"; + return is_off ? "hass:garage" : "hass:garage-open"; case "gas": case "power": case "problem": case "safety": case "smoke": - return activated ? "hass:shield-check" : "hass:alert"; + return is_off ? "hass:shield-check" : "hass:alert"; case "heat": - return activated ? "hass:thermometer" : "hass:fire"; + return is_off ? "hass:thermometer" : "hass:fire"; case "light": - return activated ? "hass:brightness-5" : "hass:brightness-7"; + return is_off ? "hass:brightness-5" : "hass:brightness-7"; case "lock": - return activated ? "hass:lock" : "hass:lock-open"; + return is_off ? "hass:lock" : "hass:lock-open"; case "moisture": - return activated ? "hass:water-off" : "hass:water"; + return is_off ? "hass:water-off" : "hass:water"; case "motion": - return activated ? "hass:walk" : "hass:run"; + return is_off ? "hass:walk" : "hass:run"; case "occupancy": - return activated ? "hass:home-outline" : "hass:home"; + return is_off ? "hass:home-outline" : "hass:home"; case "opening": - return activated ? "hass:square" : "hass:square-outline"; + return is_off ? "hass:square" : "hass:square-outline"; case "plug": - return activated ? "hass:power-plug-off" : "hass:power-plug"; + return is_off ? "hass:power-plug-off" : "hass:power-plug"; case "presence": - return activated ? "hass:home-outline" : "hass:home"; + return is_off ? "hass:home-outline" : "hass:home"; case "sound": - return activated ? "hass:music-note-off" : "hass:music-note"; + return is_off ? "hass:music-note-off" : "hass:music-note"; case "vibration": - return activated ? "hass:crop-portrait" : "hass:vibrate"; + return is_off ? "hass:crop-portrait" : "hass:vibrate"; case "window": - return activated ? "hass:window-closed" : "hass:window-open"; + return is_off ? "hass:window-closed" : "hass:window-open"; default: - return activated ? "hass:radiobox-blank" : "hass:checkbox-marked-circle"; + return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle"; } }; diff --git a/src/common/entity/sensor_icon.ts b/src/common/entity/sensor_icon.ts index 1ec97ff5d9..7c8d264027 100644 --- a/src/common/entity/sensor_icon.ts +++ b/src/common/entity/sensor_icon.ts @@ -5,12 +5,16 @@ import { domainIcon } from "./domain_icon"; import { batteryIcon } from "./battery_icon"; const fixedDeviceClassIcons = { + current: "hass:current-ac", + energy: "hass:flash", humidity: "hass:water-percent", illuminance: "hass:brightness-5", temperature: "hass:thermometer", pressure: "hass:gauge", power: "hass:flash", + power_factor: "hass:angle-acute", signal_strength: "hass:wifi", + voltage: "hass:sine-wave", }; export const sensorIcon = (state: HassEntity) => { diff --git a/src/common/entity/state_card_type.ts b/src/common/entity/state_card_type.ts index a24994d5b3..2013ee2058 100644 --- a/src/common/entity/state_card_type.ts +++ b/src/common/entity/state_card_type.ts @@ -3,9 +3,10 @@ import { HomeAssistant } from "../../types"; import { DOMAINS_WITH_CARD } from "../const"; import { canToggleState } from "./can_toggle_state"; import { computeStateDomain } from "./compute_state_domain"; +import { UNAVAILABLE } from "../../data/entity"; export const stateCardType = (hass: HomeAssistant, stateObj: HassEntity) => { - if (stateObj.state === "unavailable") { + if (stateObj.state === UNAVAILABLE) { return "display"; } diff --git a/src/common/entity/timer_time_remaining.ts b/src/common/entity/timer_time_remaining.ts index cd7c90ef8f..5b2f54654d 100644 --- a/src/common/entity/timer_time_remaining.ts +++ b/src/common/entity/timer_time_remaining.ts @@ -1,7 +1,12 @@ import { HassEntity } from "home-assistant-js-websocket"; import durationToSeconds from "../datetime/duration_to_seconds"; -export const timerTimeRemaining = (stateObj: HassEntity) => { +export const timerTimeRemaining = ( + stateObj: HassEntity +): undefined | number => { + if (!stateObj.attributes.remaining) { + return undefined; + } let timeRemaining = durationToSeconds(stateObj.attributes.remaining); if (stateObj.state === "active") { diff --git a/src/common/mwc/handle-request-selected-event.ts b/src/common/mwc/handle-request-selected-event.ts index 3081ac5af0..239f53e5c3 100644 --- a/src/common/mwc/handle-request-selected-event.ts +++ b/src/common/mwc/handle-request-selected-event.ts @@ -1,14 +1,14 @@ import { - RequestSelectedDetail, ListItem, + RequestSelectedDetail, } from "@material/mwc-list/mwc-list-item"; export const shouldHandleRequestSelectedEvent = ( ev: CustomEvent ): boolean => { - if (!ev.detail.selected && ev.detail.source !== "property") { + if (!ev.detail.selected || ev.detail.source !== "property") { return false; } - (ev.target as ListItem).selected = false; + (ev.currentTarget as ListItem).selected = false; return true; }; diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts index 8f55eba461..58732e7b17 100644 --- a/src/common/style/icon_color_css.ts +++ b/src/common/style/icon_color_css.ts @@ -24,8 +24,7 @@ export const iconColorCSS = css` ha-icon[data-domain="group"][data-state="home"], ha-icon[data-domain="group"][data-state="open"], ha-icon[data-domain="group"][data-state="locked"], - ha-icon[data-domain="group"][data-state="problem"] - { + ha-icon[data-domain="group"][data-state="problem"] { color: var(--paper-item-icon-active-color, #fdd835); } diff --git a/src/common/util/throttle.ts b/src/common/util/throttle.ts new file mode 100644 index 0000000000..1cd98ea188 --- /dev/null +++ b/src/common/util/throttle.ts @@ -0,0 +1,50 @@ +// From: underscore.js https://github.com/jashkenas/underscore/blob/master/underscore.js + +// Returns a function, that, when invoked, will only be triggered at most once +// during a given window of time. Normally, the throttled function will run +// as much as it can, without ever going more than once per `wait` duration; +// but if you'd like to disable the execution on the leading edge, pass +// `false for leading`. To disable execution on the trailing edge, ditto. +export const throttle = ( + func: T, + wait: number, + leading = true, + trailing = true +): T => { + let timeout: number | undefined; + let previous = 0; + let context: any; + let args: any; + const later = () => { + previous = leading === false ? 0 : Date.now(); + timeout = undefined; + func.apply(context, args); + if (!timeout) { + context = null; + args = null; + } + }; + // @ts-ignore + return function (...argmnts) { + // @ts-ignore + // @typescript-eslint/no-this-alias + context = this; + args = argmnts; + + const now = Date.now(); + if (!previous && leading === false) { + previous = now; + } + const remaining = wait - (now - previous); + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = undefined; + } + previous = now; + func.apply(context, args); + } else if (!timeout && trailing !== false) { + timeout = window.setTimeout(later, remaining); + } + }; +}; diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js deleted file mode 100644 index ea4f90184c..0000000000 --- a/src/components/buttons/ha-progress-button.js +++ /dev/null @@ -1,110 +0,0 @@ -import "@material/mwc-button"; -import "../ha-circular-progress"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -class HaProgressButton extends PolymerElement { - static get template() { - return html` - -
    - - - - -
    - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - - progress: { - type: Boolean, - value: false, - }, - - disabled: { - type: Boolean, - value: false, - }, - }; - } - - tempClass(className) { - const classList = this.$.container.classList; - classList.add(className); - setTimeout(() => { - classList.remove(className); - }, 1000); - } - - ready() { - super.ready(); - this.addEventListener("click", (ev) => this.buttonTapped(ev)); - } - - buttonTapped(ev) { - if (this.progress) ev.stopPropagation(); - } - - actionSuccess() { - this.tempClass("success"); - } - - actionError() { - this.tempClass("error"); - } - - computeDisabled(disabled, progress) { - return disabled || progress; - } -} - -customElements.define("ha-progress-button", HaProgressButton); diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts new file mode 100644 index 0000000000..a446d456fc --- /dev/null +++ b/src/components/buttons/ha-progress-button.ts @@ -0,0 +1,114 @@ +import "@material/mwc-button"; +import type { Button } from "@material/mwc-button"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, + query, +} from "lit-element"; + +import "../ha-circular-progress"; + +@customElement("ha-progress-button") +class HaProgressButton extends LitElement { + @property({ type: Boolean }) public disabled = false; + + @property({ type: Boolean }) public progress = false; + + @property({ type: Boolean }) public raised = false; + + @query("mwc-button") private _button?: Button; + + public render(): TemplateResult { + return html` + + + + ${this.progress + ? html`
    + +
    ` + : ""} + `; + } + + public actionSuccess(): void { + this._tempClass("success"); + } + + public actionError(): void { + this._tempClass("error"); + } + + private _tempClass(className: string): void { + this._button!.classList.add(className); + setTimeout(() => { + this._button!.classList.remove(className); + }, 1000); + } + + private _buttonTapped(ev: Event): void { + if (this.progress) { + ev.stopPropagation(); + } + } + + static get styles(): CSSResult { + return css` + :host { + outline: none; + display: inline-block; + position: relative; + } + + mwc-button { + transition: all 1s; + } + + mwc-button.success { + --mdc-theme-primary: white; + background-color: var(--success-color); + transition: none; + } + + mwc-button[raised].success { + --mdc-theme-primary: var(--success-color); + --mdc-theme-on-primary: white; + } + + mwc-button.error { + --mdc-theme-primary: white; + background-color: var(--error-color); + transition: none; + } + + mwc-button[raised].error { + --mdc-theme-primary: var(--error-color); + --mdc-theme-on-primary: white; + } + + .progress { + bottom: 0; + margin-top: 4px; + position: absolute; + text-align: center; + top: 0; + width: 100%; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-progress-button": HaProgressButton; + } +} diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index ba2bf0f35e..db83db5a6d 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -3,19 +3,21 @@ import { css, CSSResult, customElement, + eventOptions, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, query, TemplateResult, - eventOptions, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import { ifDefined } from "lit-html/directives/if-defined"; import { styleMap } from "lit-html/directives/style-map"; import { scroll } from "lit-virtualizer"; +import memoizeOne from "memoize-one"; +import { restoreScroll } from "../../common/decorators/restore-scroll"; import { fireEvent } from "../../common/dom/fire_event"; import "../../common/search/search-input"; import { debounce } from "../../common/util/debounce"; @@ -24,8 +26,6 @@ import "../ha-checkbox"; import type { HaCheckbox } from "../ha-checkbox"; import "../ha-icon"; import { filterData, sortData } from "./sort-filter"; -import memoizeOne from "memoize-one"; -import { restoreScroll } from "../../common/decorators/restore-scroll"; declare global { // for fire event @@ -70,6 +70,7 @@ export interface DataTableColumnData extends DataTableSortColumnData { maxWidth?: string; grows?: boolean; forceLTR?: boolean; + hidden?: boolean; } export interface DataTableRowData { @@ -214,13 +215,15 @@ export class HaDataTable extends LitElement { class="mdc-data-table__table ${classMap({ "auto-height": this.autoHeight, })}" + role="table" + aria-rowcount=${this._filteredData.length} style=${styleMap({ height: this.autoHeight ? `${(this._filteredData.length || 1) * 53 + 57}px` : `calc(100% - ${this._header?.clientHeight}px)`, })} > -
    +
    ${this.selectable ? html`
    ` : ""} - ${Object.entries(this.columns).map((columnEntry) => { - const [key, column] = columnEntry; + ${Object.entries(this.columns).map(([key, column]) => { + if (column.hidden) { + return ""; + } const sorted = key === this._sortColumn; const classes = { "mdc-data-table__header-cell--numeric": Boolean( @@ -288,8 +293,8 @@ export class HaDataTable extends LitElement { ${!this._filteredData.length ? html`
    -
    -
    +
    +
    ${this.noDataText || "No data"}
    @@ -304,12 +309,14 @@ export class HaDataTable extends LitElement { items: !this.hasFab ? this._filteredData : [...this._filteredData, ...[{ empty: true }]], - renderItem: (row: DataTableRowData) => { + renderItem: (row: DataTableRowData, index) => { if (row.empty) { return html`
    `; } return html`
    ` : ""} - ${Object.entries(this.columns).map((columnEntry) => { - const [key, column] = columnEntry; - return html` -
    - ${column.template - ? column.template(row[key], row) - : row[key]} -
    - `; - })} + ${Object.entries(this.columns).map( + ([key, column]) => { + if (column.hidden) { + return ""; + } + return html` +
    + ${column.template + ? column.template(row[key], row) + : row[key]} +
    + `; + } + )}
    `; }, diff --git a/src/components/data-table/sort_filter_worker.ts b/src/components/data-table/sort_filter_worker.ts index 4c0d6d1987..1c04338a3c 100644 --- a/src/components/data-table/sort_filter_worker.ts +++ b/src/components/data-table/sort_filter_worker.ts @@ -1,11 +1,11 @@ // To use comlink under ES5 -import "proxy-polyfill"; import { expose } from "comlink"; +import "proxy-polyfill"; import type { - DataTableSortColumnData, DataTableRowData, - SortingDirection, + DataTableSortColumnData, SortableColumnContainer, + SortingDirection, } from "./ha-data-table"; const filterData = ( @@ -19,7 +19,7 @@ const filterData = ( const [key, column] = columnEntry; if (column.filterable) { if ( - (column.filterKey ? row[key][column.filterKey] : row[key]) + String(column.filterKey ? row[key][column.filterKey] : row[key]) .toUpperCase() .includes(filter) ) { diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js index 350ea82c68..7df570747c 100644 --- a/src/components/entity/ha-chart-base.js +++ b/src/components/entity/ha-chart-base.js @@ -1,12 +1,12 @@ /* eslint-plugin-disable lit */ import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior"; -import "../ha-icon-button"; import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class"; import { timeOut } from "@polymer/polymer/lib/utils/async"; import { Debouncer } from "@polymer/polymer/lib/utils/debounce"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import { formatTime } from "../../common/datetime/format_time"; +import "../ha-icon-button"; // eslint-disable-next-line no-unused-vars /* global Chart moment Color */ @@ -355,7 +355,7 @@ class HaChartBase extends mixinBehaviors( return value; } const date = new Date(values[index].value); - return formatTime(date); + return formatTime(date, this.hass.language); } drawChart() { @@ -420,7 +420,7 @@ class HaChartBase extends mixinBehaviors( }, }; options = Chart.helpers.merge(options, this.data.options); - options.scales.xAxes[0].ticks.callback = this._formatTickValue; + options.scales.xAxes[0].ticks.callback = this._formatTickValue.bind(this); if (this.data.type === "timeline") { this.set("isTimeline", true); if (this.data.colors !== undefined) { diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts new file mode 100644 index 0000000000..ee2958323b --- /dev/null +++ b/src/components/entity/ha-entity-attribute-picker.ts @@ -0,0 +1,178 @@ +import "@polymer/paper-input/paper-input"; +import "@polymer/paper-item/paper-item"; +import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import { HassEntity } from "home-assistant-js-websocket"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + PropertyValues, + query, + TemplateResult, +} from "lit-element"; +import { fireEvent } from "../../common/dom/fire_event"; +import { PolymerChangedEvent } from "../../polymer-types"; +import { HomeAssistant } from "../../types"; +import "../ha-icon-button"; +import "./state-badge"; + +export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean; + +const rowRenderer = (root: HTMLElement, _owner, model: { item: string }) => { + if (!root.firstElementChild) { + root.innerHTML = ` + + + `; + } + root.querySelector("paper-item")!.textContent = model.item; +}; + +@customElement("ha-entity-attribute-picker") +class HaEntityAttributePicker extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public entityId?: string; + + @property({ type: Boolean }) public autofocus = false; + + @property({ type: Boolean }) public disabled = false; + + @property({ type: Boolean, attribute: "allow-custom-value" }) + public allowCustomValue; + + @property() public label?: string; + + @property() public value?: string; + + @property({ type: Boolean }) private _opened = false; + + @query("vaadin-combo-box-light") private _comboBox!: HTMLElement; + + protected shouldUpdate(changedProps: PropertyValues) { + return !(!changedProps.has("_opened") && this._opened); + } + + protected updated(changedProps: PropertyValues) { + if (changedProps.has("_opened") && this._opened) { + const state = this.entityId ? this.hass.states[this.entityId] : undefined; + (this._comboBox as any).items = state + ? Object.keys(state.attributes) + : []; + } + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + return html` + + + ${this.value + ? html` + + Clear + + ` + : ""} + + + Toggle + + + + `; + } + + private _clearValue(ev: Event) { + ev.stopPropagation(); + this._setValue(""); + } + + private get _value() { + return this.value || ""; + } + + private _openedChanged(ev: PolymerChangedEvent) { + this._opened = ev.detail.value; + } + + private _valueChanged(ev: PolymerChangedEvent) { + const newValue = ev.detail.value; + if (newValue !== this._value) { + this._setValue(newValue); + } + } + + private _setValue(value: string) { + this.value = value; + setTimeout(() => { + fireEvent(this, "value-changed", { value }); + fireEvent(this, "change"); + }, 0); + } + + static get styles(): CSSResult { + return css` + paper-input > ha-icon-button { + --mdc-icon-button-size: 24px; + padding: 0px 2px; + color: var(--secondary-text-color); + } + [hidden] { + display: none; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-entity-attribute-picker": HaEntityAttributePicker; + } +} diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index 300ae57a79..3cafa0a88b 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -1,4 +1,3 @@ -import "../ha-icon-button"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; @@ -7,6 +6,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResult, + customElement, html, LitElement, property, @@ -20,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { PolymerChangedEvent } from "../../polymer-types"; import { HomeAssistant } from "../../types"; +import "../ha-icon-button"; import "./state-badge"; export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean; @@ -51,7 +52,8 @@ const rowRenderer = ( root.querySelector("[secondary]")!.textContent = model.item.entity_id; }; -class HaEntityPicker extends LitElement { +@customElement("ha-entity-picker") +export class HaEntityPicker extends LitElement { @property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public disabled?: boolean; @@ -95,6 +97,8 @@ class HaEntityPicker extends LitElement { @query("vaadin-combo-box-light") private _comboBox!: HTMLElement; + private _initedStates = false; + private _getStates = memoizeOne( ( _opened: boolean, @@ -148,11 +152,18 @@ class HaEntityPicker extends LitElement { ); protected shouldUpdate(changedProps: PropertyValues) { + if ( + changedProps.has("value") || + changedProps.has("label") || + changedProps.has("disabled") + ) { + return true; + } return !(!changedProps.has("_opened") && this._opened); } protected updated(changedProps: PropertyValues) { - if (changedProps.has("_opened") && this._opened) { + if (!this._initedStates || (changedProps.has("_opened") && this._opened)) { const states = this._getStates( this._opened, this.hass, @@ -162,6 +173,7 @@ class HaEntityPicker extends LitElement { this.includeDeviceClasses ); (this._comboBox as any).items = states; + this._initedStates = true; } } @@ -169,7 +181,6 @@ class HaEntityPicker extends LitElement { if (!this.hass) { return html``; } - return html` @@ -108,7 +110,7 @@ export class HaStateLabelBadge extends LitElement { return null; case "sensor": default: - return state.state === "unknown" + return state.state === UNKNOWN ? "-" : state.attributes.unit_of_measurement ? state.state @@ -121,7 +123,7 @@ export class HaStateLabelBadge extends LitElement { } private _computeIcon(domain: string, state: HassEntity) { - if (state.state === "unavailable") { + if (state.state === UNAVAILABLE) { return null; } switch (domain) { @@ -166,7 +168,7 @@ export class HaStateLabelBadge extends LitElement { private _computeLabel(domain, state, _timerTimeRemaining) { if ( - state.state === "unavailable" || + state.state === UNAVAILABLE || ["device_tracker", "alarm_control_panel", "person"].includes(domain) ) { // Localize the state with a special state_badge namespace, which has variations of diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index be8b055f14..c39fe4bf83 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -1,16 +1,16 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import { styleMap } from "lit-html/directives/style-map"; import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; +import { styleMap } from "lit-html/directives/style-map"; import { computeActiveState } from "../../common/entity/compute_active_state"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { stateIcon } from "../../common/entity/state_icon"; @@ -73,10 +73,15 @@ export class StateBadge extends LitElement { if (stateObj) { // hide icon if we have entity picture if ( - ((stateObj.attributes.entity_picture_local || stateObj.attributes.entity_picture) && !this.overrideIcon) || + ((stateObj.attributes.entity_picture_local || + stateObj.attributes.entity_picture) && + !this.overrideIcon) || this.overrideImage ) { - let imageUrl = this.overrideImage || stateObj.attributes.entity_picture_local || stateObj.attributes.entity_picture; + let imageUrl = + this.overrideImage || + stateObj.attributes.entity_picture_local || + stateObj.attributes.entity_picture; if (this.hass) { imageUrl = this.hass.hassUrl(imageUrl); } diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts new file mode 100644 index 0000000000..b9d160bf13 --- /dev/null +++ b/src/components/ha-bar.ts @@ -0,0 +1,67 @@ +import { + css, + CSSResult, + customElement, + LitElement, + property, + svg, + TemplateResult, +} from "lit-element"; + +import { + getValueInPercentage, + normalize, + roundWithOneDecimal, +} from "../util/calculate"; + +@customElement("ha-bar") +export class HaBar extends LitElement { + @property({ type: Number }) public min = 0; + + @property({ type: Number }) public max = 100; + + @property({ type: Number }) public value!: number; + + protected render(): TemplateResult { + const valuePrecentage = roundWithOneDecimal( + getValueInPercentage( + normalize(this.value, this.min, this.max), + this.min, + this.max + ) + ); + + return svg` + + + + + + + `; + } + + static get styles(): CSSResult { + return css` + rect:first-child { + width: 100%; + fill: var(--ha-bar-background-color, var(--secondary-background-color)); + } + rect:last-child { + fill: var(--ha-bar-primary-color, var(--primary-color)); + rx: var(--ha-bar-border-radius, 4px); + } + svg { + border-radius: var(--ha-bar-border-radius, 4px); + height: 12px; + width: 100%; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-bar": HaBar; + } +} diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index e325925d57..7adc266a56 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -1,17 +1,16 @@ -import { - customElement, - html, - TemplateResult, - LitElement, - CSSResult, - css, - query, - property, -} from "lit-element"; import "@material/mwc-button"; import "@material/mwc-menu"; -import type { Menu, Corner } from "@material/mwc-menu"; - +import type { Corner, Menu } from "@material/mwc-menu"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + query, + TemplateResult, +} from "lit-element"; import "./ha-icon-button"; @customElement("ha-button-menu") @@ -22,6 +21,8 @@ export class HaButtonMenu extends LitElement { @property({ type: Boolean }) public activatable = false; + @property({ type: Boolean }) public disabled = false; + @query("mwc-menu") private _menu?: Menu; public get items() { @@ -48,6 +49,9 @@ export class HaButtonMenu extends LitElement { } private _handleClick(): void { + if (this.disabled) { + return; + } this._menu!.anchor = this; this._menu!.show(); } diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts index a9ea972492..cae0562cf0 100644 --- a/src/components/ha-button-toggle-group.ts +++ b/src/components/ha-button-toggle-group.ts @@ -1,21 +1,20 @@ +import "@material/mwc-icon-button/mwc-icon-button"; import { + css, + CSSResult, customElement, html, - TemplateResult, - property, LitElement, - CSSResult, - css, + property, + TemplateResult, } from "lit-element"; - -import "./ha-icon-button"; - import { fireEvent } from "../common/dom/fire_event"; import type { ToggleButton } from "../types"; +import "./ha-svg-icon"; @customElement("ha-button-toggle-group") export class HaButtonToggleGroup extends LitElement { - @property() public buttons!: ToggleButton[]; + @property({ attribute: false }) public buttons!: ToggleButton[]; @property() public active?: string; @@ -23,21 +22,23 @@ export class HaButtonToggleGroup extends LitElement { return html`
    ${this.buttons.map( - (button) => html` - ` + (button) => html` + + + + ` )}
    `; } private _handleClick(ev): void { - this.active = ev.target.value; + this.active = ev.currentTarget.value; fireEvent(this, "value-changed", { value: this.active }); } @@ -48,12 +49,13 @@ export class HaButtonToggleGroup extends LitElement { --mdc-icon-button-size: var(--button-toggle-size, 36px); --mdc-icon-size: var(--button-toggle-icon-size, 20px); } - ha-icon-button { + mwc-icon-button { border: 1px solid var(--primary-color); border-right-width: 0px; position: relative; + cursor: pointer; } - ha-icon-button::before { + mwc-icon-button::before { top: 0; left: 0; width: 100%; @@ -65,22 +67,26 @@ export class HaButtonToggleGroup extends LitElement { content: ""; transition: opacity 15ms linear, background-color 15ms linear; } - ha-icon-button[active]::before { + mwc-icon-button[active]::before { opacity: var(--mdc-icon-button-ripple-opacity, 0.12); } - ha-icon-button:first-child { + mwc-icon-button:first-child { border-radius: 4px 0 0 4px; } - ha-icon-button:last-child { + mwc-icon-button:last-child { border-radius: 0 4px 4px 0; border-right-width: 1px; } + mwc-icon-button:only-child { + border-radius: 4px; + border-right-width: 1px; + } `; } } declare global { interface HTMLElementTagNameMap { - "ha-button-toggle-button": HaButtonToggleGroup; + "ha-button-toggle-group": HaButtonToggleGroup; } } diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts index 61b3d89d96..eb9ce99718 100644 --- a/src/components/ha-camera-stream.ts +++ b/src/components/ha-camera-stream.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -18,37 +18,31 @@ import { fetchStreamUrl, } from "../data/camera"; import { CameraEntity, HomeAssistant } from "../types"; - -type HLSModule = typeof import("hls.js"); +import "./ha-hls-player"; @customElement("ha-camera-stream") class HaCameraStream extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @property() public stateObj?: CameraEntity; + @property({ attribute: false }) public stateObj?: CameraEntity; - @property({ type: Boolean }) public showControls = false; + @property({ type: Boolean, attribute: "controls" }) + public controls = false; - @internalProperty() private _attached = false; + @property({ type: Boolean, attribute: "muted" }) + public muted = false; + + @property({ type: Boolean, attribute: "allow-exoplayer" }) + public allowExoPlayer = false; // We keep track if we should force MJPEG with a string // that way it automatically resets if we change entity. - @internalProperty() private _forceMJPEG: string | undefined = undefined; + @internalProperty() private _forceMJPEG?: string; - private _hlsPolyfillInstance?: Hls; - - public connectedCallback() { - super.connectedCallback(); - this._attached = true; - } - - public disconnectedCallback() { - super.disconnectedCallback(); - this._attached = false; - } + @internalProperty() private _url?: string; protected render(): TemplateResult { - if (!this.stateObj || !this._attached) { + if (!this.stateObj) { return html``; } @@ -65,51 +59,26 @@ class HaCameraStream extends LitElement { )} camera.`} /> ` - : html` - - `} + .allowExoPlayer=${this.allowExoPlayer} + .muted=${this.muted} + .controls=${this.controls} + .hass=${this.hass} + .url=${this._url} + > + ` + : ""} `; } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - - const stateObjChanged = changedProps.has("stateObj"); - const attachedChanged = changedProps.has("_attached"); - - const oldState = changedProps.get("stateObj") as this["stateObj"]; - const oldEntityId = oldState ? oldState.entity_id : undefined; - const curEntityId = this.stateObj ? this.stateObj.entity_id : undefined; - - if ( - (!stateObjChanged && !attachedChanged) || - (stateObjChanged && oldEntityId === curEntityId) - ) { - return; - } - - // If we are no longer attached, destroy polyfill. - if (attachedChanged && !this._attached) { - this._destroyPolyfill(); - return; - } - - // Nothing to do if we are render MJPEG. - if (this._shouldRenderMJPEG) { - return; - } - - // Tear down existing polyfill, if available - this._destroyPolyfill(); - - if (curEntityId) { - this._startHls(); + protected updated(changedProps: PropertyValues): void { + if (changedProps.has("stateObj") && !this._shouldRenderMJPEG) { + this._forceMJPEG = undefined; + this._getStreamUrl(); } } @@ -121,96 +90,35 @@ class HaCameraStream extends LitElement { ); } - private get _videoEl(): HTMLVideoElement { - return this.shadowRoot!.querySelector("video")!; - } - - private async _startHls(): Promise { - // eslint-disable-next-line - const Hls = ((await import( - /* webpackChunkName: "hls.js" */ "hls.js" - )) as any).default as HLSModule; - let hlsSupported = Hls.isSupported(); - const videoEl = this._videoEl; - - if (!hlsSupported) { - hlsSupported = - videoEl.canPlayType("application/vnd.apple.mpegurl") !== ""; - } - - if (!hlsSupported) { - this._forceMJPEG = this.stateObj!.entity_id; - return; - } - + private async _getStreamUrl(): Promise { try { const { url } = await fetchStreamUrl( this.hass!, this.stateObj!.entity_id ); - if (Hls.isSupported()) { - this._renderHLSPolyfill(videoEl, Hls, url); - } else { - this._renderHLSNative(videoEl, url); - } - return; + this._url = url; } catch (err) { // Fails if we were unable to get a stream // eslint-disable-next-line console.error(err); + this._forceMJPEG = this.stateObj!.entity_id; } } - private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) { - videoEl.src = url; - await new Promise((resolve) => - videoEl.addEventListener("loadedmetadata", resolve) - ); - videoEl.play(); - } - - private async _renderHLSPolyfill( - videoEl: HTMLVideoElement, - // eslint-disable-next-line - Hls: HLSModule, - url: string - ) { - const hls = new Hls({ - liveBackBufferLength: 60, - fragLoadingTimeOut: 30000, - manifestLoadingTimeOut: 30000, - levelLoadingTimeOut: 30000, - }); - this._hlsPolyfillInstance = hls; - hls.attachMedia(videoEl); - hls.on(Hls.Events.MEDIA_ATTACHED, () => { - hls.loadSource(url); - }); - } - private _elementResized() { fireEvent(this, "iron-resize"); } - private _destroyPolyfill(): void { - if (this._hlsPolyfillInstance) { - this._hlsPolyfillInstance.destroy(); - this._hlsPolyfillInstance = undefined; - } - } - static get styles(): CSSResult { return css` :host, - img, - video { + img { display: block; } - img, - video { + img { width: 100%; } `; diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts index e219f52e47..d28837872e 100644 --- a/src/components/ha-circular-progress.ts +++ b/src/components/ha-circular-progress.ts @@ -1,16 +1,16 @@ -import { - LitElement, - TemplateResult, - property, - svg, - html, - customElement, - unsafeCSS, - SVGTemplateResult, - css, -} from "lit-element"; // @ts-ignore import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css"; +import { + css, + customElement, + html, + LitElement, + property, + svg, + SVGTemplateResult, + TemplateResult, + unsafeCSS, +} from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @customElement("ha-circular-progress") @@ -24,7 +24,7 @@ export class HaCircularProgress extends LitElement { @property() public size: "small" | "medium" | "large" = "medium"; - protected render(): TemplateResult | void { + protected render(): TemplateResult { let indeterminatePart: SVGTemplateResult; if (this.size === "small") { diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index aac917e31a..b49d57c897 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -1,8 +1,8 @@ import { Editor } from "codemirror"; import { customElement, - property, internalProperty, + property, PropertyValues, UpdatingElement, } from "lit-element"; @@ -97,15 +97,11 @@ export class HaCodeEditor extends UpdatingElement { .CodeMirror { height: var(--code-mirror-height, auto); direction: var(--code-mirror-direction, ltr); + font-family: var(--code-font-family, monospace); } .CodeMirror-scroll { max-height: var(--code-mirror-max-height, --code-mirror-height); } - .CodeMirror-gutters { - border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color)); - background-color: var(--paper-dialog-background-color, var(--primary-background-color)); - transition: 0.2s ease border-right; - } :host(.error-state) .CodeMirror-gutters { border-color: var(--error-state-color, red); } @@ -113,7 +109,7 @@ export class HaCodeEditor extends UpdatingElement { border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color)); } .CodeMirror-linenumber { - color: var(--paper-dialog-color, var(--primary-text-color)); + color: var(--paper-dialog-color, var(--secondary-text-color)); } .rtl .CodeMirror-vscrollbar { right: auto; @@ -122,6 +118,100 @@ export class HaCodeEditor extends UpdatingElement { .rtl-gutter { width: 20px; } + .CodeMirror-gutters { + border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color)); + background-color: var(--paper-dialog-background-color, var(--primary-background-color)); + transition: 0.2s ease border-right; + } + .cm-s-default.CodeMirror { + background-color: var(--code-editor-background-color, var(--card-background-color)); + color: var(--primary-text-color); + } + .cm-s-default .CodeMirror-cursor { + border-left: 1px solid var(--secondary-text-color); + } + + .cm-s-default div.CodeMirror-selected, .cm-s-default.CodeMirror-focused div.CodeMirror-selected { + background: rgba(var(--rgb-primary-color), 0.2); + } + + .cm-s-default .CodeMirror-line::selection, + .cm-s-default .CodeMirror-line>span::selection, + .cm-s-default .CodeMirror-line>span>span::selection { + background: rgba(var(--rgb-primary-color), 0.2); + } + + .cm-s-default .cm-keyword { + color: var(--codemirror-keyword, #6262FF); + } + + .cm-s-default .cm-operator { + color: var(--codemirror-operator, #cda869); + } + + .cm-s-default .cm-variable-2 { + color: var(--codemirror-variable-2, #690); + } + + .cm-s-default .cm-builtin { + color: var(--codemirror-builtin, #9B7536); + } + + .cm-s-default .cm-atom { + color: var(--codemirror-atom, #F90); + } + + .cm-s-default .cm-number { + color: var(--codemirror-number, #ca7841); + } + + .cm-s-default .cm-def { + color: var(--codemirror-def, #8DA6CE); + } + + .cm-s-default .cm-string { + color: var(--codemirror-string, #07a); + } + + .cm-s-default .cm-string-2 { + color: var(--codemirror-string-2, #bd6b18); + } + + .cm-s-default .cm-comment { + color: var(--codemirror-comment, #777); + } + + .cm-s-default .cm-variable { + color: var(--codemirror-variable, #07a); + } + + .cm-s-default .cm-tag { + color: var(--codemirror-tag, #997643); + } + + .cm-s-default .cm-meta { + color: var(--codemirror-meta, var(--primary-text-color)); + } + + .cm-s-default .cm-attribute { + color: var(--codemirror-attribute, #d6bb6d); + } + + .cm-s-default .cm-property { + color: var(--codemirror-property, #905); + } + + .cm-s-default .cm-qualifier { + color: var(--codemirror-qualifier, #690); + } + + .cm-s-default .cm-variable-3 { + color: var(--codemirror-variable-3, #07a); + } + + .cm-s-default .cm-type { + color: var(--codemirror-type, #07a); + } `; this.codemirror = codeMirror(shadowRoot, { diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js index 49fce6c7f5..a50601c0ea 100644 --- a/src/components/ha-color-picker.js +++ b/src/components/ha-color-picker.js @@ -176,6 +176,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) { this.drawColorWheel(); this.drawMarker(); + if (this.desiredHsColor) { + this.setMarkerOnColor(this.desiredHsColor); + this.applyColorToCanvas(this.desiredHsColor); + } + this.interactionLayer.addEventListener("mousedown", (ev) => this.onMouseDown(ev) ); @@ -319,6 +324,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) { // set marker position to the given color setMarkerOnColor(hs) { + if (!this.marker || !this.tooltip) { + return; + } const dist = hs.s * this.radius; const theta = ((hs.h - 180) / 180) * Math.PI; const markerdX = -dist * Math.cos(theta); @@ -330,6 +338,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) { // apply given color to interface elements applyColorToCanvas(hs) { + if (!this.interactionLayer) { + return; + } // we're not really converting hs to hsl here, but we keep it cheap // setting the color on the interactionLayer, the svg elements can inherit this.interactionLayer.style.color = `hsl(${hs.h}, 100%, ${ diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index f18163ea7a..8c34add0e3 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -1,16 +1,16 @@ import "@material/mwc-dialog"; import type { Dialog } from "@material/mwc-dialog"; import { style } from "@material/mwc-dialog/mwc-dialog-css"; -import "./ha-icon-button"; -import { css, CSSResult, customElement, html } from "lit-element"; -import type { Constructor, HomeAssistant } from "../types"; import { mdiClose } from "@mdi/js"; +import { css, CSSResult, customElement, html } from "lit-element"; import { computeRTLDirection } from "../common/util/compute_rtl"; +import type { Constructor, HomeAssistant } from "../types"; +import "./ha-icon-button"; const MwcDialog = customElements.get("mwc-dialog") as Constructor; export const createCloseHeading = (hass: HomeAssistant, title: string) => html` - ${title} + ${title} html` @customElement("ha-dialog") export class HaDialog extends MwcDialog { + public scrollToPos(x: number, y: number) { + this.contentElement.scrollTo(x, y); + } + protected renderHeading() { return html` ${super.renderHeading()} @@ -60,8 +64,13 @@ export class HaDialog extends MwcDialog { } .mdc-dialog .mdc-dialog__surface { position: var(--dialog-surface-position, relative); + top: var(--dialog-surface-top); min-height: var(--mdc-dialog-min-height, auto); } + :host([flexContent]) .mdc-dialog .mdc-dialog__content { + display: flex; + flex-direction: column; + } .header_button { position: absolute; right: 16px; @@ -69,10 +78,17 @@ export class HaDialog extends MwcDialog { text-decoration: none; color: inherit; } + .header_title { + margin-right: 40px; + } [dir="rtl"].header_button { right: auto; left: 16px; } + [dir="rtl"].header_title { + margin-left: 40px; + margin-right: 0px; + } `, ]; } diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts index e00aa40a0e..27ef43a53e 100644 --- a/src/components/ha-form/ha-form-integer.ts +++ b/src/components/ha-form/ha-form-integer.ts @@ -54,7 +54,8 @@ export class HaFormInteger extends LitElement implements HaFormElement { ` : ""} + - + `; } @@ -74,7 +74,7 @@ export class HaFormSelect extends LitElement implements HaFormElement { static get styles(): CSSResult { return css` - paper-dropdown-menu { + ha-paper-dropdown-menu { display: block; } `; diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts index 6cb3391f2e..5e1adbf351 100644 --- a/src/components/ha-gauge.ts +++ b/src/components/ha-gauge.ts @@ -11,23 +11,13 @@ import { styleMap } from "lit-html/directives/style-map"; import { afterNextRender } from "../common/util/render-status"; import { ifDefined } from "lit-html/directives/if-defined"; +import { getValueInPercentage, normalize } from "../util/calculate"; + const getAngle = (value: number, min: number, max: number) => { const percentage = getValueInPercentage(normalize(value, min, max), min, max); return (percentage * 180) / 100; }; -const normalize = (value: number, min: number, max: number) => { - if (value > max) return max; - if (value < min) return min; - return value; -}; - -const getValueInPercentage = (value: number, min: number, max: number) => { - const newMax = max - min; - const newVal = value - min; - return (100 * newVal) / newMax; -}; - // Workaround for https://github.com/home-assistant/frontend/issues/6467 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts index 946c1979de..0677e96673 100644 --- a/src/components/ha-header-bar.ts +++ b/src/components/ha-header-bar.ts @@ -1,6 +1,6 @@ -import { customElement, LitElement, html, unsafeCSS, css } from "lit-element"; // @ts-ignore import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css"; +import { css, customElement, html, LitElement, unsafeCSS } from "lit-element"; @customElement("ha-header-bar") export class HaHeaderBar extends LitElement { diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts new file mode 100644 index 0000000000..b613a5ad05 --- /dev/null +++ b/src/components/ha-hls-player.ts @@ -0,0 +1,217 @@ +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + query, + TemplateResult, +} from "lit-element"; +import { fireEvent } from "../common/dom/fire_event"; +import { nextRender } from "../common/util/render-status"; +import type { HomeAssistant } from "../types"; + +type HLSModule = typeof import("hls.js"); + +@customElement("ha-hls-player") +class HaHLSPlayer extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public url!: string; + + @property({ type: Boolean, attribute: "controls" }) + public controls = false; + + @property({ type: Boolean, attribute: "muted" }) + public muted = false; + + @property({ type: Boolean, attribute: "autoplay" }) + public autoPlay = false; + + @property({ type: Boolean, attribute: "playsinline" }) + public playsInline = false; + + @property({ type: Boolean, attribute: "allow-exoplayer" }) + public allowExoPlayer = false; + + @query("video") private _videoEl!: HTMLVideoElement; + + @internalProperty() private _attached = false; + + private _hlsPolyfillInstance?: Hls; + + private _useExoPlayer = false; + + public connectedCallback() { + super.connectedCallback(); + this._attached = true; + } + + public disconnectedCallback() { + super.disconnectedCallback(); + this._attached = false; + } + + protected render(): TemplateResult { + if (!this._attached) { + return html``; + } + + return html` + + `; + } + + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + + const attachedChanged = changedProps.has("_attached"); + const urlChanged = changedProps.has("url"); + + if (!urlChanged && !attachedChanged) { + return; + } + + // If we are no longer attached, destroy polyfill + if (attachedChanged && !this._attached) { + // Tear down existing polyfill, if available + this._destroyPolyfill(); + return; + } + + this._destroyPolyfill(); + this._startHls(); + } + + private async _getUseExoPlayer(): Promise { + return false; + } + + private async _startHls(): Promise { + let hls: any; + const videoEl = this._videoEl; + this._useExoPlayer = await this._getUseExoPlayer(); + if (!this._useExoPlayer) { + hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any) + .default as HLSModule; + let hlsSupported = hls.isSupported(); + + if (!hlsSupported) { + hlsSupported = + videoEl.canPlayType("application/vnd.apple.mpegurl") !== ""; + } + + if (!hlsSupported) { + this._videoEl.innerHTML = this.hass.localize( + "ui.components.media-browser.video_not_supported" + ); + return; + } + } + + const url = this.url; + + if (this._useExoPlayer) { + this._renderHLSExoPlayer(url); + } else if (hls.isSupported()) { + this._renderHLSPolyfill(videoEl, hls, url); + } else { + this._renderHLSNative(videoEl, url); + } + } + + private async _renderHLSExoPlayer(url: string) { + window.addEventListener("resize", this._resizeExoPlayer); + this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer); + this._videoEl.style.visibility = "hidden"; + await this.hass!.auth.external!.sendMessage({ + type: "exoplayer/play_hls", + payload: { + url: new URL(url, window.location.href).toString(), + muted: this.muted, + }, + }); + } + + private _resizeExoPlayer = () => { + const rect = this._videoEl.getBoundingClientRect(); + this.hass!.auth.external!.fireMessage({ + type: "exoplayer/resize", + payload: { + left: rect.left, + top: rect.top, + right: rect.right, + bottom: rect.bottom, + }, + }); + }; + + private async _renderHLSPolyfill( + videoEl: HTMLVideoElement, + Hls: HLSModule, + url: string + ) { + const hls = new Hls({ + liveBackBufferLength: 60, + fragLoadingTimeOut: 30000, + manifestLoadingTimeOut: 30000, + levelLoadingTimeOut: 30000, + }); + this._hlsPolyfillInstance = hls; + hls.attachMedia(videoEl); + hls.on(Hls.Events.MEDIA_ATTACHED, () => { + hls.loadSource(url); + }); + } + + private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) { + videoEl.src = url; + await new Promise((resolve) => + videoEl.addEventListener("loadedmetadata", resolve) + ); + videoEl.play(); + } + + private _elementResized() { + fireEvent(this, "iron-resize"); + } + + private _destroyPolyfill() { + if (this._hlsPolyfillInstance) { + this._hlsPolyfillInstance.destroy(); + this._hlsPolyfillInstance = undefined; + } + if (this._useExoPlayer) { + window.removeEventListener("resize", this._resizeExoPlayer); + this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" }); + } + } + + static get styles(): CSSResult { + return css` + :host, + video { + display: block; + } + + video { + width: 100%; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-hls-player": HaHLSPlayer; + } +} diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts index 8eeac2e2d4..4dc27b2205 100644 --- a/src/components/ha-icon.ts +++ b/src/components/ha-icon.ts @@ -24,206 +24,16 @@ import { import { debounce } from "../common/util/debounce"; import { fireEvent } from "../common/dom/fire_event"; -const mdiRenameMapping = { - "account-badge": "badge-account", - "account-badge-alert": "badge-account-alert", - "account-badge-alert-outline": "badge-account-alert-outline", - "account-badge-horizontal": "badge-account-horizontal", - "account-badge-horizontal-outline": "badge-account-horizontal-outline", - "account-badge-outline": "badge-account-outline", - "account-card-details": "card-account-details", - "account-card-details-outline": "card-account-details-outline", - airplay: "apple-airplay", - artist: "account-music", - "artist-outline": "account-music-outline", - audiobook: "book-music", - azure: "microsoft-azure", - "azure-devops": "microsoft-azure-devops", - bible: "book-cross", - bowl: "bowl-mix", - "calendar-repeat": "calendar-sync", - "calendar-repeat-outline": "calendar-sync-outline", - "camcorder-box": "video-box", - "camcorder-box-off": "video-box-off", - "cellphone-settings-variant": "cellphone-cog", - "chart-snakey": "chart-sankey", - "chart-snakey-variant": "chart-sankey-variant", - coin: "currency-usd-circle", - "coin-outline": "currency-usd-circle-outline", - "coins-outline": "circle-multiple-outline", - "contact-mail": "card-account-mail", - "contact-mail-outline": "card-account-mail-outline", - "contact-phone": "card-account-phone", - "contact-phone-outline": "card-account-phone-outline", - cowboy: "account-cowboy-hat", - "database-refresh": "database-sync", - dictionary: "book-alphabet", - edge: "microsoft-edge", - "edge-legacy": "microsoft-edge-legacy", - "file-document-box": "text-box", - "file-document-box-check-outline": "text-box-check-outline", - "file-document-box-minus": "text-box-minus", - "file-document-box-minus-outline": "text-box-minus-outline", - "file-document-box-multiple": "text-box-multiple", - "file-document-box-multiple-outline": "text-box-multiple-outline", - "file-document-box-outline": "text-box-outline", - "file-document-box-plus": "text-box-plus", - "file-document-box-plus-outline": "text-box-plus-outline", - "file-document-box-remove": "text-box-remove", - "file-document-box-remove-outline": "text-box-remove-outline", - "file-document-box-search": "text-box-search", - "file-document-box-search-outline": "text-box-search-outline", - "file-settings-variant": "file-cog", - "file-settings-variant-outline": "file-cog-outline", - "folder-settings-variant": "folder-cog", - "folder-settings-variant-outline": "folder-cog-outline", - "github-circle": "github", - "google-adwords": "google-ads", - hackernews: "y-combinator", - hotel: "bed", - "image-filter": "image-multiple-outline", - "internet-explorer": "microsoft-internet-explorer", - json: "code-json", - kotlin: "language-kotlin", - "library-books": "filmstrip-box", - "library-movie": "filmstrip-box-multiple", - "library-music": "music-box-multiple", - "library-music-outline": "music-box-multiple-outline", - "library-video": "play-box-multiple", - markdown: "language-markdown", - "markdown-outline": "language-markdown-outline", - "message-settings-variant": "message-cog", - "message-settings-variant-outline": "message-cog-outline", - "microsoft-dynamics": "microsoft-dynamics-365", - "network-router": "router-network", - office: "microsoft-office", - onedrive: "microsoft-onedrive", - onenote: "microsoft-onenote", - outlook: "microsoft-outlook", - playstation: "sony-playstation", - "periodic-table-co": "molecule-co", - "periodic-table-co2": "molecule-co2", - pot: "pot-steam", - ruby: "language-ruby", - sailing: "sail-boat", - settings: "cog", - "settings-box": "cog-box", - "settings-outline": "cog-outline", - "settings-transfer": "cog-transfer", - "settings-transfer-outline": "cog-transfer-outline", - "shield-refresh": "shield-sync", - "shield-refresh-outline": "shield-sync-outline", - "sort-alphabetical": "sort-alphabetical-variant", - "sort-alphabetical-ascending": "sort-alphabetical-ascending-variant", - "sort-alphabetical-descending": "sort-alphabetical-descending-variant", - "sort-numeric": "sort-numeric-variant", - "star-half": "star-half-full", - storefront: "storefront-outline", - timer: "timer-outline", - "timer-off": "timer-off-outline", - towing: "tow-truck", - voice: "account-voice", - "wall-sconce-variant": "wall-sconce-round-variant", - wii: "nintendo-wii", - wiiu: "nintendo-wiiu", - windows: "microsoft-windows", - "windows-classic": "microsoft-windows-classic", - worker: "account-hard-hat", - xbox: "microsoft-xbox", - "xbox-controller": "microsoft-xbox-controller", - "xbox-controller-battery-alert": "microsoft-xbox-controller-battery-alert", - "xbox-controller-battery-charging": - "microsoft-xbox-controller-battery-charging", - "xbox-controller-battery-empty": "microsoft-xbox-controller-battery-empty", - "xbox-controller-battery-full": "microsoft-xbox-controller-battery-full", - "xbox-controller-battery-low": "microsoft-xbox-controller-battery-low", - "xbox-controller-battery-medium": "microsoft-xbox-controller-battery-medium", - "xbox-controller-battery-unknown": - "microsoft-xbox-controller-battery-unknown", - "xbox-controller-menu": "microsoft-xbox-controller-menu", - "xbox-controller-off": "microsoft-xbox-controller-off", - "xbox-controller-view": "microsoft-xbox-controller-view", - yammer: "microsoft-yammer", - "youtube-creator-studio": "youtube-studio", - "selection-mutliple": "selection-multiple", - textarea: "form-textarea", - textbox: "form-textbox", - "textbox-lock": "form-textbox-lock", - "textbox-password": "form-textbox-password", - "syllabary-katakana-half-width": "syllabary-katakana-halfwidth", - "visual-studio-code": "microsoft-visual-studio-code", - "visual-studio": "microsoft-visual-studio", -}; +interface DeprecatedIcon { + [key: string]: { + removeIn: string; + newName?: string; + }; +} -const mdiRemovedIcons = new Set([ - "accusoft", - "amazon-drive", - "android-head", - "basecamp", - "beats", - "behance", - "blackberry", - "cisco-webex", - "disqus-outline", - "dribbble", - "dribbble-box", - "etsy", - "eventbrite", - "facebook-box", - "flattr", - "flickr", - "foursquare", - "github-box", - "github-face", - "glassdoor", - "google-adwords", - "google-pages", - "google-physical-web", - "google-plus-box", - "houzz", - "houzz-box", - "instapaper", - "itunes", - "language-python-text", - "lastfm", - "linkedin-box", - "lyft", - "mail-ru", - "mastodon-variant", - "medium", - "meetup", - "mixcloud", - "mixer", - "nfc-off", - "npm-variant", - "npm-variant-outline", - "paypal", - "periscope", - "pinterest-box", - "pocket", - "quicktime", - "shopify", - "slackware", - "square-inc", - "square-inc-cash", - "steam-box", - "strava", - "tor", - "tumblr", - "tumblr-box", - "tumblr-reblog", - "twitter-box", - "twitter-circle", - "uber", - "venmo", - "vk-box", - "vk-circle", - "wunderlist", - "xda", - "xing-box", - "xing-circle", - "yelp", -]); +const mdiDeprecatedIcons: DeprecatedIcon = { + scooter: { removeIn: "117", newName: "human-scooter" }, +}; const chunks: Chunks = {}; @@ -290,17 +100,16 @@ export class HaIcon extends LitElement { this._legacy = false; - if (iconName in mdiRenameMapping) { - iconName = mdiRenameMapping[iconName]; - const message = `Icon ${iconPrefix}:${origIconName} was renamed to ${iconPrefix}:${iconName}, please change your config, it will be removed in version 0.115.`; - // eslint-disable-next-line no-console - console.warn(message); - fireEvent(this, "write_log", { - level: "warning", - message, - }); - } else if (mdiRemovedIcons.has(iconName)) { - const message = `Icon ${this.icon} was removed from MDI, please replace this icon with an other icon in your config, it will be removed in version 0.115.`; + if (iconName in mdiDeprecatedIcons) { + const deprecatedIcon = mdiDeprecatedIcons[iconName]; + let message: string; + + if (deprecatedIcon.newName) { + message = `Icon ${iconPrefix}:${iconName} was renamed to ${iconPrefix}:${deprecatedIcon.newName}, please change your config, it will be removed in version ${deprecatedIcon.removeIn}.`; + iconName = deprecatedIcon.newName!; + } else { + message = `Icon ${iconPrefix}:${iconName} was removed from MDI, please replace this icon with an other icon in your config, it will be removed in version ${deprecatedIcon.removeIn}.`; + } // eslint-disable-next-line no-console console.warn(message); fireEvent(this, "write_log", { @@ -333,6 +142,7 @@ export class HaIcon extends LitElement { this._setPath(chunks[chunk], iconName); return; } + const iconPromise = fetch(`/static/mdi/${chunk}.json`).then((response) => response.json() ); diff --git a/src/components/ha-paper-slider.js b/src/components/ha-paper-slider.js index 9070dbe2eb..068a6d14c9 100644 --- a/src/components/ha-paper-slider.js +++ b/src/components/ha-paper-slider.js @@ -68,6 +68,10 @@ class HaPaperSlider extends PaperSliderClass { -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important; transform: scale(1) translate(0, -17px) scaleX(-1) !important; } + + .slider-input { + width: 54px; + } `; tpl.content.appendChild(styleEl); return tpl; diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts new file mode 100644 index 0000000000..411984d555 --- /dev/null +++ b/src/components/ha-picture-upload.ts @@ -0,0 +1,226 @@ +import "@material/mwc-icon-button/mwc-icon-button"; +import { mdiClose, mdiImagePlus } from "@mdi/js"; +import "@polymer/iron-input/iron-input"; +import "@polymer/paper-input/paper-input-container"; +import { + css, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { fireEvent } from "../common/dom/fire_event"; +import { createImage, generateImageThumbnailUrl } from "../data/image"; +import { HomeAssistant } from "../types"; +import "./ha-circular-progress"; +import "./ha-svg-icon"; +import { + showImageCropperDialog, + CropOptions, +} from "../dialogs/image-cropper-dialog/show-image-cropper-dialog"; + +@customElement("ha-picture-upload") +export class HaPictureUpload extends LitElement { + public hass!: HomeAssistant; + + @property() public value: string | null = null; + + @property() public label?: string; + + @property({ type: Boolean }) public crop = false; + + @property({ attribute: false }) public cropOptions?: CropOptions; + + @property({ type: Number }) public size = 512; + + @internalProperty() private _error = ""; + + @internalProperty() private _uploading = false; + + @internalProperty() private _drag = false; + + protected updated(changedProperties: PropertyValues) { + if (changedProperties.has("_drag")) { + (this.shadowRoot!.querySelector( + "paper-input-container" + ) as any)._setFocused(this._drag); + } + } + + public render(): TemplateResult { + return html` + ${this._uploading + ? html`` + : html` + ${this._error ? html`
    ${this._error}
    ` : ""} + + `} + `; + } + + private _handleDrop(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + if (ev.dataTransfer?.files) { + if (this.crop) { + this._cropFile(ev.dataTransfer.files[0]); + } else { + this._uploadFile(ev.dataTransfer.files[0]); + } + } + this._drag = false; + } + + private _handleDragStart(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + this._drag = true; + } + + private _handleDragEnd(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + this._drag = false; + } + + private async _handleFilePicked(ev) { + if (this.crop) { + this._cropFile(ev.target.files[0]); + } else { + this._uploadFile(ev.target.files[0]); + } + } + + private async _cropFile(file: File) { + if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) { + this._error = this.hass.localize( + "ui.components.picture-upload.unsupported_format" + ); + return; + } + showImageCropperDialog(this, { + file, + options: this.cropOptions || { + round: false, + aspectRatio: NaN, + }, + croppedCallback: (croppedFile) => { + this._uploadFile(croppedFile); + }, + }); + } + + private async _uploadFile(file: File) { + if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) { + this._error = this.hass.localize( + "ui.components.picture-upload.unsupported_format" + ); + return; + } + this._uploading = true; + this._error = ""; + try { + const media = await createImage(this.hass, file); + this.value = generateImageThumbnailUrl(media.id, this.size); + fireEvent(this, "change"); + } catch (err) { + this._error = err.toString(); + } finally { + this._uploading = false; + } + } + + private _clearPicture(ev: Event) { + ev.preventDefault(); + this.value = null; + this._error = ""; + fireEvent(this, "change"); + } + + static get styles() { + return css` + .error { + color: var(--error-color); + } + paper-input-container { + position: relative; + padding: 8px; + margin: 0 -8px; + } + paper-input-container.dragged:before { + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); + background: currentColor; + content: ""; + opacity: var(--dark-divider-opacity); + pointer-events: none; + border-radius: 4px; + } + img { + max-width: 125px; + max-height: 125px; + } + input.file { + display: none; + } + mwc-icon-button { + --mdc-icon-button-size: 24px; + --mdc-icon-size: 20px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-picture-upload": HaPictureUpload; + } +} diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 43c886ab99..4fdae88f3e 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -1,3 +1,4 @@ +import "@polymer/paper-item/paper-item-body"; import { css, CSSResult, @@ -7,7 +8,6 @@ import { property, SVGTemplateResult, } from "lit-element"; -import "@polymer/paper-item/paper-item-body"; @customElement("ha-settings-row") export class HaSettingsRow extends LitElement { @@ -25,7 +25,7 @@ export class HaSettingsRow extends LitElement {
    @@ -49,6 +49,9 @@ export class HaSettingsRow extends LitElement { border-top: 1px solid var(--divider-color); padding-bottom: 8px; } + ::slotted(ha-switch) { + padding: 16px 0; + } `; } } diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 4454ac122d..12ac252e73 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -1,9 +1,12 @@ +import "@material/mwc-button/mwc-button"; import "@material/mwc-icon-button"; import { mdiBell, mdiCellphoneCog, - mdiMenuOpen, + mdiClose, mdiMenu, + mdiMenuOpen, + mdiPlus, mdiViewDashboard, } from "@mdi/js"; import "@polymer/paper-item/paper-icon-item"; @@ -13,20 +16,23 @@ import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResult, + customElement, eventOptions, html, - customElement, + internalProperty, LitElement, property, - internalProperty, PropertyValues, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; +import { guard } from "lit-html/directives/guard"; +import memoizeOne from "memoize-one"; +import { LocalStorage } from "../common/decorators/local-storage"; import { fireEvent } from "../common/dom/fire_event"; import { computeDomain } from "../common/entity/compute_domain"; import { compare } from "../common/string/compare"; import { computeRTL } from "../common/util/compute_rtl"; -import { getDefaultPanel } from "../data/panel"; +import { ActionHandlerDetail } from "../data/lovelace"; import { PersistentNotification, subscribeNotifications, @@ -35,6 +41,8 @@ import { ExternalConfig, getExternalConfig, } from "../external_app/external_config"; +import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive"; +import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant, PanelInfo } from "../types"; import "./ha-icon"; import "./ha-menu-button"; @@ -54,11 +62,39 @@ const SORT_VALUE_URL_PATHS = { config: 11, }; -const panelSorter = (a: PanelInfo, b: PanelInfo) => { +const panelSorter = ( + reverseSort: string[], + defaultPanel: string, + a: PanelInfo, + b: PanelInfo +) => { + const indexA = reverseSort.indexOf(a.url_path); + const indexB = reverseSort.indexOf(b.url_path); + if (indexA !== indexB) { + if (indexA < indexB) { + return 1; + } + return -1; + } + return defaultPanelSorter(defaultPanel, a, b); +}; + +const defaultPanelSorter = ( + defaultPanel: string, + a: PanelInfo, + b: PanelInfo +) => { // Put all the Lovelace at the top. const aLovelace = a.component_name === "lovelace"; const bLovelace = b.component_name === "lovelace"; + if (a.url_path === defaultPanel) { + return -1; + } + if (b.url_path === defaultPanel) { + return 1; + } + if (aLovelace && bLovelace) { return compare(a.title!, b.title!); } @@ -85,41 +121,56 @@ const panelSorter = (a: PanelInfo, b: PanelInfo) => { return compare(a.title!, b.title!); }; -const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => { - const panels = hass.panels; - if (!panels) { - return [[], []]; - } - - const beforeSpacer: PanelInfo[] = []; - const afterSpacer: PanelInfo[] = []; - - Object.values(panels).forEach((panel) => { - if (!panel.title || panel.url_path === hass.defaultPanel) { - return; +const computePanels = memoizeOne( + ( + panels: HomeAssistant["panels"], + defaultPanel: HomeAssistant["defaultPanel"], + panelsOrder: string[], + hiddenPanels: string[] + ): [PanelInfo[], PanelInfo[]] => { + if (!panels) { + return [[], []]; } - (SHOW_AFTER_SPACER.includes(panel.url_path) - ? afterSpacer - : beforeSpacer - ).push(panel); - }); - beforeSpacer.sort(panelSorter); - afterSpacer.sort(panelSorter); + const beforeSpacer: PanelInfo[] = []; + const afterSpacer: PanelInfo[] = []; - return [beforeSpacer, afterSpacer]; -}; + Object.values(panels).forEach((panel) => { + if ( + hiddenPanels.includes(panel.url_path) || + (!panel.title && panel.url_path !== defaultPanel) + ) { + return; + } + (SHOW_AFTER_SPACER.includes(panel.url_path) + ? afterSpacer + : beforeSpacer + ).push(panel); + }); + + const reverseSort = [...panelsOrder].reverse(); + + beforeSpacer.sort((a, b) => panelSorter(reverseSort, defaultPanel, a, b)); + afterSpacer.sort((a, b) => panelSorter(reverseSort, defaultPanel, a, b)); + + return [beforeSpacer, afterSpacer]; + } +); + +let Sortable; @customElement("ha-sidebar") class HaSidebar extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public narrow!: boolean; + @property({ type: Boolean, reflect: true }) public narrow!: boolean; @property({ type: Boolean }) public alwaysExpand = false; @property({ type: Boolean, reflect: true }) public expanded = false; + @property({ type: Boolean }) public editMode = false; + @internalProperty() private _externalConfig?: ExternalConfig; @internalProperty() private _notifications?: PersistentNotification[]; @@ -128,12 +179,28 @@ class HaSidebar extends LitElement { // @ts-ignore @property({ type: Boolean, reflect: true }) public rtl = false; + @internalProperty() private _renderEmptySortable = false; + private _mouseLeaveTimeout?: number; private _tooltipHideTimeout?: number; private _recentKeydownActiveUntil = 0; + // @ts-ignore + @LocalStorage("sidebarPanelOrder", true, { + attribute: false, + }) + private _panelOrder: string[] = []; + + // @ts-ignore + @LocalStorage("sidebarHiddenPanels", true, { + attribute: false, + }) + private _hiddenPanels: string[] = []; + + private _sortable?; + protected render() { const hass = this.hass; @@ -141,7 +208,12 @@ class HaSidebar extends LitElement { return html``; } - const [beforeSpacer, afterSpacer] = computePanels(hass); + const [beforeSpacer, afterSpacer] = computePanels( + hass.panels, + hass.defaultPanel, + this._panelOrder, + this._hiddenPanels + ); let notificationCount = this._notifications ? this._notifications.length @@ -152,15 +224,20 @@ class HaSidebar extends LitElement { } } - const defaultPanel = getDefaultPanel(hass); - return html` -
    +
    ${!this.narrow ? html` ` : ""} - Home Assistant +
    + ${this.editMode + ? html` + ${hass.localize("ui.sidebar.done")} + ` + : "Home Assistant"} +
    - ${this._renderPanel( - defaultPanel.url_path, - defaultPanel.title || hass.localize("panel.states"), - defaultPanel.icon, - !defaultPanel.icon ? mdiViewDashboard : undefined - )} - ${beforeSpacer.map((panel) => - this._renderPanel( - panel.url_path, - hass.localize(`panel.${panel.title}`) || panel.title, - panel.icon, - undefined - ) - )} + ${this.editMode + ? html`
    + ${guard([this._hiddenPanels, this._renderEmptySortable], () => + this._renderEmptySortable + ? "" + : this._renderPanels(beforeSpacer) + )} +
    ` + : this._renderPanels(beforeSpacer)}
    - - ${afterSpacer.map((panel) => - this._renderPanel( - panel.url_path, - hass.localize(`panel.${panel.title}`) || panel.title, - panel.icon, - undefined - ) - )} + ${this.editMode && this._hiddenPanels.length + ? html` + ${this._hiddenPanels.map((url) => { + const panel = this.hass.panels[url]; + if (!panel) { + return ""; + } + return html` + + ${panel.url_path === this.hass.defaultPanel + ? hass.localize("panel.states") + : hass.localize(`panel.${panel.title}`) || + panel.title} + + + + `; + })} +
    + ` + : ""} + ${this._renderPanels(afterSpacer)} ${this._externalConfig && this._externalConfig.hasSettingsScreen ? html` - + ${hass.user ? hass.user.name : ""} @@ -295,7 +402,11 @@ class HaSidebar extends LitElement { changedProps.has("narrow") || changedProps.has("alwaysExpand") || changedProps.has("_externalConfig") || - changedProps.has("_notifications") + changedProps.has("_notifications") || + changedProps.has("editMode") || + changedProps.has("_renderEmptySortable") || + changedProps.has("_hiddenPanels") || + (changedProps.has("_panelOrder") && !this.editMode) ) { return true; } @@ -336,6 +447,13 @@ class HaSidebar extends LitElement { if (changedProps.has("alwaysExpand")) { this.expanded = this.alwaysExpand; } + if (changedProps.has("editMode")) { + if (this.editMode) { + this._activateEditMode(); + } else { + this._deactivateEditMode(); + } + } if (!changedProps.has("hass")) { return; } @@ -361,6 +479,88 @@ class HaSidebar extends LitElement { return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement; } + private _handleAction(ev: CustomEvent) { + if (ev.detail.action !== "hold") { + return; + } + + fireEvent(this, "hass-edit-sidebar", { editMode: true }); + } + + private async _activateEditMode() { + if (!Sortable) { + const [sortableImport, sortStylesImport] = await Promise.all([ + import("sortablejs/modular/sortable.core.esm"), + import("../resources/ha-sortable-style"), + ]); + + const style = document.createElement("style"); + style.innerHTML = sortStylesImport.sortableStyles.cssText; + this.shadowRoot!.appendChild(style); + + Sortable = sortableImport.Sortable; + Sortable.mount(sortableImport.OnSpill); + Sortable.mount(sortableImport.AutoScroll()); + } + + await this.updateComplete; + + this._createSortable(); + } + + private _createSortable() { + this._sortable = new Sortable(this.shadowRoot!.getElementById("sortable"), { + animation: 150, + fallbackClass: "sortable-fallback", + dataIdAttr: "data-panel", + handle: "paper-icon-item", + onSort: async () => { + this._panelOrder = this._sortable.toArray(); + }, + }); + } + + private _deactivateEditMode() { + this._sortable?.destroy(); + this._sortable = undefined; + } + + private _closeEditMode() { + fireEvent(this, "hass-edit-sidebar", { editMode: false }); + } + + private async _hidePanel(ev: Event) { + ev.preventDefault(); + const panel = (ev.currentTarget as any).panel; + if (this._hiddenPanels.includes(panel)) { + return; + } + // Make a copy for Memoize + this._hiddenPanels = [...this._hiddenPanels, panel]; + this._renderEmptySortable = true; + await this.updateComplete; + const container = this.shadowRoot!.getElementById("sortable")!; + while (container.lastElementChild) { + container.removeChild(container.lastElementChild); + } + this._renderEmptySortable = false; + } + + private async _unhidePanel(ev: Event) { + ev.preventDefault(); + const panel = (ev.currentTarget as any).panel; + this._hiddenPanels = this._hiddenPanels.filter( + (hidden) => hidden !== panel + ); + this._renderEmptySortable = true; + await this.updateComplete; + const container = this.shadowRoot!.getElementById("sortable")!; + while (container.lastElementChild) { + container.removeChild(container.lastElementChild); + } + this._renderEmptySortable = false; + } + private _itemMouseEnter(ev: MouseEvent) { // On keypresses on the listbox, we're going to ignore mouse enter events // for 100ms so that we ignore it when pressing down arrow scrolls the @@ -453,10 +653,28 @@ class HaSidebar extends LitElement { }); } - private _toggleSidebar() { + private _toggleSidebar(ev: CustomEvent) { + if (ev.detail.action !== "tap") { + return; + } fireEvent(this, "hass-toggle-menu"); } + private _renderPanels(panels: PanelInfo[]) { + return panels.map((panel) => + this._renderPanel( + panel.url_path, + panel.url_path === this.hass.defaultPanel + ? panel.title || this.hass.localize("panel.states") + : this.hass.localize(`panel.${panel.title}`) || panel.title, + panel.icon, + panel.url_path === this.hass.defaultPanel && !panel.icon + ? mdiViewDashboard + : undefined + ) + ); + } + private _renderPanel( urlPath: string, title: string | null, @@ -466,8 +684,8 @@ class HaSidebar extends LitElement { return html` `} ${title} + ${this.editMode + ? html` + + ` + : ""} `; } - static get styles(): CSSResult { - return css` - :host { - height: 100%; - display: block; - overflow: hidden; - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - border-right: 1px solid var(--divider-color); - background-color: var(--sidebar-background-color); - width: 64px; - } - :host([expanded]) { - width: calc(256px + env(safe-area-inset-left)); - } - :host([rtl]) { - border-right: 0; - border-left: 1px solid var(--divider-color); - } - .menu { - box-sizing: border-box; - height: 65px; - display: flex; - padding: 0 8.5px; - border-bottom: 1px solid transparent; - white-space: nowrap; - font-weight: 400; - color: var(--primary-text-color); - border-bottom: 1px solid var(--divider-color); - background-color: var(--primary-background-color); - font-size: 20px; - align-items: center; - padding-left: calc(8.5px + env(safe-area-inset-left)); - } - :host([rtl]) .menu { - padding-left: 8.5px; - padding-right: calc(8.5px + env(safe-area-inset-right)); - } - :host([expanded]) .menu { - width: calc(256px + env(safe-area-inset-left)); - } - :host([rtl][expanded]) .menu { - width: calc(256px + env(safe-area-inset-right)); - } - .menu mwc-icon-button { - color: var(--sidebar-icon-color); - } - :host([expanded]) .menu mwc-icon-button { - margin-right: 23px; - } - :host([expanded][rtl]) .menu mwc-icon-button { - margin-right: 0px; - margin-left: 23px; - } + static get styles(): CSSResult[] { + return [ + haStyleScrollbar, + css` + :host { + height: 100%; + display: block; + overflow: hidden; + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + border-right: 1px solid var(--divider-color); + background-color: var(--sidebar-background-color); + width: 64px; + } + :host([expanded]) { + width: calc(256px + env(safe-area-inset-left)); + } + :host([rtl]) { + border-right: 0; + border-left: 1px solid var(--divider-color); + } + .menu { + box-sizing: border-box; + height: 65px; + display: flex; + padding: 0 8.5px; + border-bottom: 1px solid transparent; + white-space: nowrap; + font-weight: 400; + color: var(--primary-text-color); + border-bottom: 1px solid var(--divider-color); + background-color: var(--primary-background-color); + font-size: 20px; + align-items: center; + padding-left: calc(8.5px + env(safe-area-inset-left)); + } + :host([rtl]) .menu { + padding-left: 8.5px; + padding-right: calc(8.5px + env(safe-area-inset-right)); + } + :host([expanded]) .menu { + width: calc(256px + env(safe-area-inset-left)); + } + :host([rtl][expanded]) .menu { + width: calc(256px + env(safe-area-inset-right)); + } + .menu mwc-icon-button { + color: var(--sidebar-icon-color); + } + :host([expanded]) .menu mwc-icon-button { + margin-right: 23px; + } + :host([expanded][rtl]) .menu mwc-icon-button { + margin-right: 0px; + margin-left: 23px; + } - .title { - display: none; - } - :host([expanded]) .title { - display: initial; - } + .title { + width: 100%; + display: none; + } + :host([narrow]) .title { + padding: 0 16px; + } + :host([expanded]) .title { + display: initial; + } + .title mwc-button { + width: 100%; + } + #sortable, + .hidden-panel { + display: none; + } - paper-listbox::-webkit-scrollbar { - width: 0.4rem; - height: 0.4rem; - } + paper-listbox { + padding: 4px 0; + display: flex; + flex-direction: column; + box-sizing: border-box; + height: calc(100% - 196px - env(safe-area-inset-bottom)); + overflow-x: hidden; + background: none; + margin-left: env(safe-area-inset-left); + } - paper-listbox::-webkit-scrollbar-thumb { - -webkit-border-radius: 4px; - border-radius: 4px; - background: var(--scrollbar-thumb-color); - } + :host([rtl]) paper-listbox { + margin-left: initial; + margin-right: env(safe-area-inset-right); + } - paper-listbox { - padding: 4px 0; - display: flex; - flex-direction: column; - box-sizing: border-box; - height: calc(100% - 196px - env(safe-area-inset-bottom)); - overflow-y: auto; - overflow-x: hidden; - scrollbar-color: var(--scrollbar-thumb-color) transparent; - scrollbar-width: thin; - background: none; - margin-left: env(safe-area-inset-left); - } + a { + text-decoration: none; + color: var(--sidebar-text-color); + font-weight: 500; + font-size: 14px; + position: relative; + display: block; + outline: 0; + } - :host([rtl]) paper-listbox { - margin-left: initial; - margin-right: env(safe-area-inset-right); - } + paper-icon-item { + box-sizing: border-box; + margin: 4px 8px; + padding-left: 12px; + border-radius: 4px; + --paper-item-min-height: 40px; + width: 48px; + } + :host([expanded]) paper-icon-item { + width: 240px; + } + :host([rtl]) paper-icon-item { + padding-left: auto; + padding-right: 12px; + } - a { - text-decoration: none; - color: var(--sidebar-text-color); - font-weight: 500; - font-size: 14px; - position: relative; - display: block; - outline: 0; - } + ha-icon[slot="item-icon"], + ha-svg-icon[slot="item-icon"] { + color: var(--sidebar-icon-color); + } - paper-icon-item { - box-sizing: border-box; - margin: 4px 8px; - padding-left: 12px; - border-radius: 4px; - --paper-item-min-height: 40px; - width: 48px; - } - :host([expanded]) paper-icon-item { - width: 240px; - } - :host([rtl]) paper-icon-item { - padding-left: auto; - padding-right: 12px; - } + .iron-selected paper-icon-item::before, + a:not(.iron-selected):focus::before { + border-radius: 4px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + content: ""; + transition: opacity 15ms linear; + will-change: opacity; + } + .iron-selected paper-icon-item::before { + background-color: var(--sidebar-selected-icon-color); + opacity: 0.12; + } + a:not(.iron-selected):focus::before { + background-color: currentColor; + opacity: var(--dark-divider-opacity); + margin: 4px 8px; + } + .iron-selected paper-icon-item:focus::before, + .iron-selected:focus paper-icon-item::before { + opacity: 0.2; + } - ha-icon[slot="item-icon"], - ha-svg-icon[slot="item-icon"] { - color: var(--sidebar-icon-color); - } + .iron-selected paper-icon-item[pressed]:before { + opacity: 0.37; + } - .iron-selected paper-icon-item::before, - a:not(.iron-selected):focus::before { - border-radius: 4px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ""; - transition: opacity 15ms linear; - will-change: opacity; - } - .iron-selected paper-icon-item::before { - background-color: var(--sidebar-selected-icon-color); - opacity: 0.12; - } - a:not(.iron-selected):focus::before { - background-color: currentColor; - opacity: var(--dark-divider-opacity); - margin: 4px 8px; - } - .iron-selected paper-icon-item:focus::before, - .iron-selected:focus paper-icon-item::before { - opacity: 0.2; - } + paper-icon-item span { + color: var(--sidebar-text-color); + font-weight: 500; + font-size: 14px; + } - .iron-selected paper-icon-item[pressed]:before { - opacity: 0.37; - } + a.iron-selected paper-icon-item ha-icon, + a.iron-selected paper-icon-item ha-svg-icon { + color: var(--sidebar-selected-icon-color); + } - paper-icon-item span { - color: var(--sidebar-text-color); - font-weight: 500; - font-size: 14px; - } + a.iron-selected .item-text { + color: var(--sidebar-selected-text-color); + } - a.iron-selected paper-icon-item ha-icon, - a.iron-selected paper-icon-item ha-svg-icon { - color: var(--sidebar-selected-icon-color); - } + paper-icon-item .item-text { + display: none; + max-width: calc(100% - 56px); + } + :host([expanded]) paper-icon-item .item-text { + display: block; + } - a.iron-selected .item-text { - color: var(--sidebar-selected-text-color); - } + .divider { + bottom: 112px; + padding: 10px 0; + } + .divider::before { + content: " "; + display: block; + height: 1px; + background-color: var(--divider-color); + } + .notifications-container { + display: flex; + margin-left: env(safe-area-inset-left); + } + :host([rtl]) .notifications-container { + margin-left: initial; + margin-right: env(safe-area-inset-right); + } + .notifications { + cursor: pointer; + } + .notifications .item-text { + flex: 1; + } + .profile { + margin-left: env(safe-area-inset-left); + } + :host([rtl]) .profile { + margin-left: initial; + margin-right: env(safe-area-inset-right); + } + .profile paper-icon-item { + padding-left: 4px; + } + :host([rtl]) .profile paper-icon-item { + padding-left: auto; + padding-right: 4px; + } + .profile .item-text { + margin-left: 8px; + } + :host([rtl]) .profile .item-text { + margin-right: 8px; + } - paper-icon-item .item-text { - display: none; - max-width: calc(100% - 56px); - } - :host([expanded]) paper-icon-item .item-text { - display: block; - } + .notification-badge { + min-width: 20px; + box-sizing: border-box; + border-radius: 50%; + font-weight: 400; + background-color: var(--accent-color); + line-height: 20px; + text-align: center; + padding: 0px 6px; + color: var(--text-accent-color, var(--text-primary-color)); + } + ha-svg-icon + .notification-badge { + position: absolute; + bottom: 14px; + left: 26px; + font-size: 0.65em; + } - .divider { - bottom: 112px; - padding: 10px 0; - } - .divider::before { - content: " "; - display: block; - height: 1px; - background-color: var(--divider-color); - } - .notifications-container { - display: flex; - margin-left: env(safe-area-inset-left); - } - :host([rtl]) .notifications-container { - margin-left: initial; - margin-right: env(safe-area-inset-right); - } - .notifications { - cursor: pointer; - } - .notifications .item-text { - flex: 1; - } - .profile { - margin-left: env(safe-area-inset-left); - } - :host([rtl]) .profile { - margin-left: initial; - margin-right: env(safe-area-inset-right); - } - .profile paper-icon-item { - padding-left: 4px; - } - :host([rtl]) .profile paper-icon-item { - padding-left: auto; - padding-right: 4px; - } - .profile .item-text { - margin-left: 8px; - } - :host([rtl]) .profile .item-text { - margin-right: 8px; - } + .spacer { + flex: 1; + pointer-events: none; + } - .notification-badge { - min-width: 20px; - box-sizing: border-box; - border-radius: 50%; - font-weight: 400; - background-color: var(--accent-color); - line-height: 20px; - text-align: center; - padding: 0px 6px; - color: var(--text-accent-color, var(--text-primary-color)); - } - ha-svg-icon + .notification-badge { - position: absolute; - bottom: 14px; - left: 26px; - font-size: 0.65em; - } + .subheader { + color: var(--sidebar-text-color); + font-weight: 500; + font-size: 14px; + padding: 16px; + white-space: nowrap; + } - .spacer { - flex: 1; - pointer-events: none; - } + .dev-tools { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 8px; + width: 256px; + box-sizing: border-box; + } - .subheader { - color: var(--sidebar-text-color); - font-weight: 500; - font-size: 14px; - padding: 16px; - white-space: nowrap; - } + .dev-tools a { + color: var(--sidebar-icon-color); + } - .dev-tools { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0 8px; - width: 256px; - box-sizing: border-box; - } + .tooltip { + display: none; + position: absolute; + opacity: 0.9; + border-radius: 2px; + white-space: nowrap; + color: var(--sidebar-background-color); + background-color: var(--sidebar-text-color); + padding: 4px; + font-weight: 500; + } - .dev-tools a { - color: var(--sidebar-icon-color); - } - - .tooltip { - display: none; - position: absolute; - opacity: 0.9; - border-radius: 2px; - white-space: nowrap; - color: var(--sidebar-background-color); - background-color: var(--sidebar-text-color); - padding: 4px; - font-weight: 500; - } - - :host([rtl]) .menu mwc-icon-button { - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - } - `; + :host([rtl]) .menu mwc-icon-button { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + `, + ]; } } diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts index a1775f1a58..3b42fd38cc 100644 --- a/src/components/map/ha-location-editor.ts +++ b/src/components/map/ha-location-editor.ts @@ -21,8 +21,8 @@ import { import { fireEvent } from "../../common/dom/fire_event"; import { LeafletModuleType, - setupLeafletMap, replaceTileLayer, + setupLeafletMap, } from "../../common/dom/setup-leaflet-map"; import { nextRender } from "../../common/util/render-status"; import { defaultRadiusColor } from "../../data/zone"; @@ -40,6 +40,8 @@ class LocationEditor extends LitElement { @property() public icon?: string; + @property({ type: Boolean }) public darkMode?: boolean; + public fitZoom = 16; private _iconEl?: DivIcon; @@ -129,7 +131,7 @@ class LocationEditor extends LitElement { private async _initMap(): Promise { [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap( this._mapEl, - this.hass.themes?.darkMode, + this.darkMode ?? this.hass.themes?.darkMode, Boolean(this.radius) ); this._leafletMap.addEventListener( @@ -277,6 +279,7 @@ class LocationEditor extends LitElement { } #map { height: 100%; + background: inherit; } .leaflet-edit-move { border-radius: 50%; diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts new file mode 100644 index 0000000000..311536844f --- /dev/null +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -0,0 +1,113 @@ +import { + css, + CSSResultArray, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event"; +import type { + MediaPickedEvent, + MediaPlayerBrowseAction, +} from "../../data/media-player"; +import { haStyleDialog } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import "../ha-dialog"; +import "./ha-media-player-browse"; +import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog"; + +@customElement("dialog-media-player-browse") +class DialogMediaPlayerBrowse extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _entityId!: string; + + @internalProperty() private _mediaContentId?: string; + + @internalProperty() private _mediaContentType?: string; + + @internalProperty() private _action?: MediaPlayerBrowseAction; + + @internalProperty() private _params?: MediaPlayerBrowseDialogParams; + + public showDialog(params: MediaPlayerBrowseDialogParams): void { + this._params = params; + this._entityId = this._params.entityId; + this._mediaContentId = this._params.mediaContentId; + this._mediaContentType = this._params.mediaContentType; + this._action = this._params.action || "play"; + } + + public closeDialog() { + this._params = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + + protected render(): TemplateResult { + if (!this._params) { + return html``; + } + + return html` + + + + `; + } + + private _mediaPicked(ev: HASSDomEvent): void { + this._params!.mediaPickedCallback(ev.detail); + if (this._action !== "play") { + this.closeDialog(); + } + } + + static get styles(): CSSResultArray { + return [ + haStyleDialog, + css` + ha-dialog { + --dialog-z-index: 8; + --dialog-content-padding: 0; + } + + @media (min-width: 800px) { + ha-dialog { + --mdc-dialog-max-width: 800px; + --dialog-surface-position: fixed; + --dialog-surface-top: 40px; + --mdc-dialog-max-height: calc(100% - 72px); + } + ha-media-player-browse { + width: 700px; + } + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-media-player-browse": DialogMediaPlayerBrowse; + } +} diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts new file mode 100644 index 0000000000..e8b42a973c --- /dev/null +++ b/src/components/media-player/ha-media-player-browse.ts @@ -0,0 +1,958 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-fab/mwc-fab"; +import "@material/mwc-list/mwc-list"; +import "@material/mwc-list/mwc-list-item"; +import { mdiArrowLeft, mdiClose, mdiPlay, mdiPlus } from "@mdi/js"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; +import { + css, + CSSResultArray, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { ifDefined } from "lit-html/directives/if-defined"; +import { styleMap } from "lit-html/directives/style-map"; +import { fireEvent } from "../../common/dom/fire_event"; +import { computeRTLDirection } from "../../common/util/compute_rtl"; +import { debounce } from "../../common/util/debounce"; +import type { MediaPlayerItem } from "../../data/media-player"; +import { + browseLocalMediaPlayer, + browseMediaPlayer, + BROWSER_PLAYER, + MediaClassBrowserSettings, + MediaPickedEvent, + MediaPlayerBrowseAction, +} from "../../data/media-player"; +import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; +import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer"; +import { haStyle } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import { documentationUrl } from "../../util/documentation-url"; +import "../entity/ha-entity-picker"; +import "../ha-button-menu"; +import "../ha-card"; +import "../ha-circular-progress"; +import "../ha-paper-dropdown-menu"; +import "../ha-svg-icon"; + +declare global { + interface HASSDomEvents { + "media-picked": MediaPickedEvent; + } +} + +@customElement("ha-media-player-browse") +export class HaMediaPlayerBrowse extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public entityId!: string; + + @property() public mediaContentId?: string; + + @property() public mediaContentType?: string; + + @property() public action: MediaPlayerBrowseAction = "play"; + + @property({ type: Boolean }) public dialog = false; + + @property({ type: Boolean, attribute: "narrow", reflect: true }) + private _narrow = false; + + @internalProperty() private _loading = false; + + @internalProperty() private _error?: { message: string; code: string }; + + @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = []; + + private _resizeObserver?: ResizeObserver; + + public connectedCallback(): void { + super.connectedCallback(); + this.updateComplete.then(() => this._attachObserver()); + } + + public disconnectedCallback(): void { + if (this._resizeObserver) { + this._resizeObserver.disconnect(); + } + } + + public navigateBack() { + this._mediaPlayerItems!.pop(); + const item = this._mediaPlayerItems!.pop(); + if (!item) { + return; + } + this._navigate(item); + } + + protected render(): TemplateResult { + if (this._loading) { + return html``; + } + + if (this._error && !this._mediaPlayerItems.length) { + if (this.dialog) { + this._closeDialogAction(); + showAlertDialog(this, { + title: this.hass.localize( + "ui.components.media-browser.media_browsing_error" + ), + text: this._renderError(this._error), + }); + } else { + return html` +
    + ${this._renderError(this._error)} +
    + `; + } + } + + if (!this._mediaPlayerItems.length) { + return html``; + } + + const currentItem = this._mediaPlayerItems[ + this._mediaPlayerItems.length - 1 + ]; + + const previousItem: MediaPlayerItem | undefined = + this._mediaPlayerItems.length > 1 + ? this._mediaPlayerItems[this._mediaPlayerItems.length - 2] + : undefined; + + const subtitle = this.hass.localize( + `ui.components.media-browser.class.${currentItem.media_class}` + ); + const mediaClass = MediaClassBrowserSettings[currentItem.media_class]; + const childrenMediaClass = + MediaClassBrowserSettings[currentItem.children_media_class]; + + return html` +
    +
    +
    + ${currentItem.thumbnail + ? html` +
    + ${this._narrow && currentItem?.can_play + ? html` + + + ${this.hass.localize( + `ui.components.media-browser.${this.action}` + )} + + ` + : ""} +
    + ` + : html``} +
    +
    + ${previousItem + ? html` +
    + + ${previousItem.title} +
    + ` + : ""} +

    ${currentItem.title}

    + ${subtitle + ? html` +

    + ${subtitle} +

    + ` + : ""} +
    + ${currentItem.can_play && + (!currentItem.thumbnail || !this._narrow) + ? html` + + + ${this.hass.localize( + `ui.components.media-browser.${this.action}` + )} + + ` + : ""} +
    +
    + ${this.dialog + ? html` + + + + ` + : ""} +
    +
    + ${this._error + ? html` +
    + ${this._renderError(this._error)} +
    + ` + : currentItem.children?.length + ? childrenMediaClass.layout === "grid" + ? html` +
    + ${currentItem.children.map( + (child) => html` +
    +
    + + ${!child.thumbnail + ? html` + + ` + : ""} + + ${child.can_play + ? html` + + + + ` + : ""} +
    +
    ${child.title}
    +
    + ${this.hass.localize( + `ui.components.media-browser.content-type.${child.media_content_type}` + )} +
    +
    + ` + )} +
    + ` + : html` + + ${currentItem.children.map( + (child) => html` + +
    + + + +
    + ${child.title} +     +
  • + ` + )} +     + ` + : html` +
    + ${this.hass.localize("ui.components.media-browser.no_items")} + ${currentItem.media_content_id === + "media-source://media_source/local/." + ? html`
    ${this.hass.localize( + "ui.components.media-browser.learn_adding_local_media", + "documentation", + html`${this.hass.localize( + "ui.components.media-browser.documentation" + )}` + )} +
    + ${this.hass.localize( + "ui.components.media-browser.local_media_files" + )}.` + : ""} +
    + `} + `; + } + + protected firstUpdated(): void { + this._measureCard(); + this._attachObserver(); + + this.addEventListener("scroll", this._scroll, { passive: true }); + this.addEventListener("touchmove", this._scroll, { + passive: true, + }); + } + + protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); + + if ( + !changedProps.has("entityId") && + !changedProps.has("mediaContentId") && + !changedProps.has("mediaContentType") && + !changedProps.has("action") + ) { + return; + } + + if (changedProps.has("entityId")) { + this._error = undefined; + this._mediaPlayerItems = []; + } + + this._fetchData(this.mediaContentId, this.mediaContentType) + .then((itemData) => { + if (!itemData) { + return; + } + + this._mediaPlayerItems = [itemData]; + }) + .catch((err) => { + this._error = err; + }); + } + + private _actionClicked(ev: MouseEvent): void { + ev.stopPropagation(); + const item = (ev.currentTarget as any).item; + + this._runAction(item); + } + + private _runAction(item: MediaPlayerItem): void { + fireEvent(this, "media-picked", { item }); + } + + private async _childClicked(ev: MouseEvent): Promise { + const target = ev.currentTarget as any; + const item: MediaPlayerItem = target.item; + + if (!item) { + return; + } + + if (!item.can_expand) { + this._runAction(item); + return; + } + + this._navigate(item); + } + + private async _navigate(item: MediaPlayerItem) { + this._error = undefined; + + let itemData: MediaPlayerItem; + + try { + itemData = await this._fetchData( + item.media_content_id, + item.media_content_type + ); + } catch (err) { + showAlertDialog(this, { + title: this.hass.localize( + "ui.components.media-browser.media_browsing_error" + ), + text: this._renderError(err), + }); + return; + } + + this.scrollTo(0, 0); + this._mediaPlayerItems = [...this._mediaPlayerItems, itemData]; + } + + private async _fetchData( + mediaContentId?: string, + mediaContentType?: string + ): Promise { + this._loading = true; + const itemData = + this.entityId !== BROWSER_PLAYER + ? await browseMediaPlayer( + this.hass, + this.entityId, + mediaContentId, + mediaContentType + ) + : await browseLocalMediaPlayer(this.hass, mediaContentId); + + this._loading = false; + return itemData; + } + + private _measureCard(): void { + this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450; + } + + private _scroll(): void { + if (this.scrollTop > (this._narrow ? 224 : 125)) { + this.setAttribute("scroll", ""); + } else if (this.scrollTop === 0) { + this.removeAttribute("scroll"); + } + } + + private async _attachObserver(): Promise { + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureCard(), 250, false) + ); + } + + this._resizeObserver.observe(this); + } + + private _closeDialogAction(): void { + fireEvent(this, "close-dialog"); + } + + private _renderError(err: { message: string; code: string }) { + if (err.message === "Media directory does not exist.") { + return html` +

    + ${this.hass.localize( + "ui.components.media-browser.no_local_media_found" + )} +

    +

    + ${this.hass.localize("ui.components.media-browser.no_media_folder")} +
    + ${this.hass.localize( + "ui.components.media-browser.setup_local_help", + "documentation", + html`${this.hass.localize( + "ui.components.media-browser.documentation" + )}` + )} +
    + ${this.hass.localize("ui.components.media-browser.local_media_files")} +

    + `; + } + return html`${err.message}`; + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + :host { + display: block; + overflow-y: auto; + display: flex; + padding: 0px 0px 20px; + flex-direction: column; + } + + ha-circular-progress { + --mdc-theme-primary: var(--primary-color); + display: flex; + justify-content: center; + margin-top: 40px; + } + + .container { + padding: 16px; + } + + .header { + display: block; + justify-content: space-between; + border-bottom: 1px solid var(--divider-color); + background-color: var(--card-background-color); + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 5; + padding: 20px 24px 10px; + } + + .header-wrapper { + display: flex; + } + + .header-content { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + align-items: flex-start; + } + + .header-content .img { + height: 200px; + width: 200px; + margin-right: 16px; + background-size: cover; + border-radius: 4px; + transition: width 0.4s, height 0.4s; + } + + .header-info { + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: stretch; + min-width: 0; + flex: 1; + } + + .header-info mwc-button { + display: block; + --mdc-theme-primary: var(--primary-color); + } + + .breadcrumb { + display: flex; + flex-direction: column; + overflow: hidden; + flex-grow: 1; + } + + .breadcrumb .title { + font-size: 32px; + line-height: 1.2; + font-weight: bold; + margin: 0; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + padding-right: 8px; + } + + .breadcrumb .previous-title { + font-size: 14px; + padding-bottom: 8px; + color: var(--secondary-text-color); + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + --mdc-icon-size: 14px; + } + + .breadcrumb .subtitle { + font-size: 16px; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + transition: height 0.5s, margin 0.5s; + } + + /* ============= CHILDREN ============= */ + + mwc-list { + --mdc-list-vertical-padding: 0; + --mdc-list-item-graphic-margin: 0; + --mdc-theme-text-icon-on-background: var(--secondary-text-color); + margin-top: 10px; + } + + mwc-list li:last-child { + display: none; + } + + mwc-list li[divider] { + border-bottom-color: var(--divider-color); + } + + .children { + display: grid; + grid-template-columns: repeat( + auto-fit, + minmax(var(--media-browse-item-size, 175px), 0.1fr) + ); + grid-gap: 16px; + margin: 8px 0px; + padding: 0px 24px; + } + + :host([dialog]) .children { + grid-template-columns: repeat( + auto-fit, + minmax(var(--media-browse-item-size, 175px), 0.33fr) + ); + } + + .child { + display: flex; + flex-direction: column; + cursor: pointer; + } + + .ha-card-parent { + position: relative; + width: 100%; + } + + .children ha-card { + width: 100%; + padding-bottom: 100%; + position: relative; + box-sizing: border-box; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + transition: padding-bottom 0.1s ease-out; + } + + .portrait.children ha-card { + padding-bottom: 150%; + } + + .child .folder, + .child .play { + position: absolute; + } + + .child .folder { + color: var(--secondary-text-color); + top: calc(50% - (var(--mdc-icon-size) / 2)); + left: calc(50% - (var(--mdc-icon-size) / 2)); + --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4); + } + + .child .play { + transition: color 0.5s; + border-radius: 50%; + bottom: calc(50% - 35px); + right: calc(50% - 35px); + opacity: 0; + transition: opacity 0.1s ease-out; + } + + .child .play:not(.can_expand) { + --mdc-icon-button-size: 70px; + --mdc-icon-size: 48px; + } + + .ha-card-parent:hover .play:not(.can_expand) { + opacity: 1; + color: var(--primary-color); + } + + .child .play.can_expand { + opacity: 1; + background-color: rgba(var(--rgb-card-background-color), 0.5); + bottom: 4px; + right: 4px; + } + + .child .play:hover { + color: var(--primary-color); + } + + .ha-card-parent:hover ha-card { + opacity: 0.5; + } + + .child .title { + font-size: 16px; + padding-top: 8px; + padding-left: 2px; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .child .type { + font-size: 12px; + color: var(--secondary-text-color); + padding-left: 2px; + } + + mwc-list-item .graphic { + background-size: cover; + } + + mwc-list-item .graphic .play { + opacity: 0; + transition: all 0.5s; + background-color: rgba(var(--rgb-card-background-color), 0.5); + border-radius: 50%; + --mdc-icon-button-size: 40px; + } + + mwc-list-item:hover .graphic .play { + opacity: 1; + color: var(--primary-color); + } + + mwc-list-item .graphic .play.show { + opacity: 1; + background-color: transparent; + } + + mwc-list-item .title { + margin-left: 16px; + } + mwc-list-item[dir="rtl"] .title { + margin-right: 16px; + margin-left: 0; + } + + /* ============= Narrow ============= */ + + :host([narrow]) { + padding: 0; + } + + :host([narrow]) .breadcrumb .title { + font-size: 24px; + } + + :host([narrow]) .header { + padding: 0; + } + + :host([narrow]) .header.no-dialog { + display: block; + } + + :host([narrow]) .header_button { + position: absolute; + top: 14px; + right: 8px; + } + + :host([narrow]) .header-content { + flex-direction: column; + flex-wrap: nowrap; + } + + :host([narrow]) .header-content .img { + height: auto; + width: 100%; + margin-right: 0; + padding-bottom: 50%; + margin-bottom: 8px; + position: relative; + background-position: center; + border-radius: 0; + transition: width 0.4s, height 0.4s, padding-bottom 0.4s; + } + + mwc-fab { + position: absolute; + --mdc-theme-secondary: var(--primary-color); + bottom: -20px; + right: 20px; + } + + :host([narrow]) .header-info mwc-button { + margin-top: 16px; + margin-bottom: 8px; + } + + :host([narrow]) .header-info { + padding: 20px 24px 10px; + } + + :host([narrow]) .media-source { + padding: 0 24px; + } + + :host([narrow]) .children { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; + } + + /* ============= Scroll ============= */ + + :host([scroll]) .breadcrumb .subtitle { + height: 0; + margin: 0; + } + + :host([scroll]) .breadcrumb .title { + -webkit-line-clamp: 1; + } + + :host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button { + align-self: center; + } + + :host([scroll]) .header-info mwc-button, + .no-img .header-info mwc-button { + padding-right: 4px; + } + + :host([scroll][narrow]) .no-img .header-info mwc-button { + padding-right: 16px; + } + + :host([scroll]) .header-info { + flex-direction: row; + } + + :host([scroll]) .header-info mwc-button { + align-self: center; + margin-top: 0; + margin-bottom: 0; + } + + :host([scroll][narrow]) .no-img .header-info { + flex-direction: row-reverse; + } + + :host([scroll][narrow]) .header-info { + padding: 20px 24px 10px 24px; + align-items: center; + } + + :host([scroll]) .header-content { + align-items: flex-end; + flex-direction: row; + } + + :host([scroll]) .header-content .img { + height: 75px; + width: 75px; + } + + :host([scroll][narrow]) .header-content .img { + height: 100px; + width: 100px; + padding-bottom: initial; + margin-bottom: 0; + } + + :host([scroll]) mwc-fab { + bottom: 4px; + right: 4px; + --mdc-fab-box-shadow: none; + --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-media-player-browse": HaMediaPlayerBrowse; + } +} diff --git a/src/components/media-player/show-media-browser-dialog.ts b/src/components/media-player/show-media-browser-dialog.ts new file mode 100644 index 0000000000..7574cdf81d --- /dev/null +++ b/src/components/media-player/show-media-browser-dialog.ts @@ -0,0 +1,27 @@ +import { fireEvent } from "../../common/dom/fire_event"; +import { + MediaPickedEvent, + MediaPlayerBrowseAction, +} from "../../data/media-player"; + +export interface MediaPlayerBrowseDialogParams { + action: MediaPlayerBrowseAction; + entityId: string; + mediaPickedCallback: (pickedMedia: MediaPickedEvent) => void; + mediaContentId?: string; + mediaContentType?: string; +} + +export const showMediaBrowserDialog = ( + element: HTMLElement, + dialogParams: MediaPlayerBrowseDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-media-player-browse", + dialogImport: () => + import( + /* webpackChunkName: "dialog-media-player-browse" */ "./dialog-media-player-browse" + ), + dialogParams, + }); +}; diff --git a/src/components/state-history-chart-line.js b/src/components/state-history-chart-line.js index 3a857b8663..ba71b0358c 100644 --- a/src/components/state-history-chart-line.js +++ b/src/components/state-history-chart-line.js @@ -19,6 +19,7 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
    `; + } + const initials = computeInitials(this.person.name); + return html`
    + ${initials} +
    `; + } + + static get styles(): CSSResult { + return css` + :host { + display: contents; + } + .picture { + width: 40px; + height: 40px; + background-size: cover; + border-radius: 50%; + } + .initials { + display: inline-block; + box-sizing: border-box; + width: 40px; + line-height: 40px; + border-radius: 50%; + text-align: center; + background-color: var(--light-primary-color); + text-decoration: none; + color: var(--text-light-primary-color, var(--primary-text-color)); + overflow: hidden; + } + .initials.long { + font-size: 80%; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-person-badge": PersonBadge; + } +} diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index 3e418ff596..cb978dd004 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -3,17 +3,20 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, TemplateResult, } from "lit-element"; -import { toggleAttribute } from "../../common/dom/toggle_attribute"; +import { classMap } from "lit-html/directives/class-map"; +import { styleMap } from "lit-html/directives/style-map"; +import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { User } from "../../data/user"; -import { CurrentUser } from "../../types"; +import { CurrentUser, HomeAssistant } from "../../types"; -const computeInitials = (name: string) => { +export const computeInitials = (name: string) => { if (!name) { - return "user"; + return "?"; } return ( name @@ -28,27 +31,89 @@ const computeInitials = (name: string) => { }; @customElement("ha-user-badge") -class StateBadge extends LitElement { - @property() public user?: User | CurrentUser; +class UserBadge extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; - protected render(): TemplateResult { - const user = this.user; - const initials = user ? computeInitials(user.name) : "?"; - return html` ${initials} `; - } + @property({ attribute: false }) public user?: User | CurrentUser; + + @internalProperty() private _personPicture?: string; + + private _personEntityId?: string; protected updated(changedProps) { super.updated(changedProps); - toggleAttribute( - this, - "long", - (this.user ? computeInitials(this.user.name) : "?").length > 2 - ); + if (changedProps.has("user")) { + this._getPersonPicture(); + return; + } + const oldHass = changedProps.get("hass"); + if ( + this._personEntityId && + oldHass && + this.hass.states[this._personEntityId] !== + oldHass.states[this._personEntityId] + ) { + const state = this.hass.states[this._personEntityId]; + if (state) { + this._personPicture = state.attributes.entity_picture; + } else { + this._getPersonPicture(); + } + } else if (!this._personEntityId && oldHass) { + this._getPersonPicture(); + } + } + + protected render(): TemplateResult { + if (!this.hass || !this.user) { + return html``; + } + const picture = this._personPicture; + + if (picture) { + return html`
    `; + } + const initials = computeInitials(this.user.name); + return html`
    + ${initials} +
    `; + } + + private _getPersonPicture() { + this._personEntityId = undefined; + this._personPicture = undefined; + if (!this.hass || !this.user) { + return; + } + for (const entity of Object.values(this.hass.states)) { + if ( + entity.attributes.user_id === this.user.id && + computeStateDomain(entity) === "person" + ) { + this._personEntityId = entity.entity_id; + this._personPicture = entity.attributes.entity_picture; + break; + } + } } static get styles(): CSSResult { return css` :host { + display: contents; + } + .picture { + width: 40px; + height: 40px; + background-size: cover; + border-radius: 50%; + } + .initials { display: inline-block; box-sizing: border-box; width: 40px; @@ -60,8 +125,7 @@ class StateBadge extends LitElement { color: var(--text-light-primary-color, var(--primary-text-color)); overflow: hidden; } - - :host([long]) { + .initials.long { font-size: 80%; } `; @@ -70,6 +134,6 @@ class StateBadge extends LitElement { declare global { interface HTMLElementTagNameMap { - "ha-user-badge": StateBadge; + "ha-user-badge": UserBadge; } } diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index d9a7fda1ec..ecd99f188f 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -53,7 +53,11 @@ class HaUserPicker extends LitElement { ${this._sortedUsers(this.users).map( (user) => html` - + ${user.name} ` diff --git a/src/data/auth.ts b/src/data/auth.ts index 162ade2fbd..aea90dd335 100644 --- a/src/data/auth.ts +++ b/src/data/auth.ts @@ -44,3 +44,14 @@ export const createAuthForUser = async ( username, password, }); + +export const adminChangePassword = async ( + hass: HomeAssistant, + userId: string, + password: string +) => + hass.callWS({ + type: "config/auth_provider/homeassistant/admin_change_password", + user_id: userId, + password, + }); diff --git a/src/data/automation.ts b/src/data/automation.ts index b3e8d0b0f8..7ef285e1e7 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -3,7 +3,7 @@ import { HassEntityBase, } from "home-assistant-js-websocket"; import { navigate } from "../common/navigate"; -import { HomeAssistant } from "../types"; +import { Context, HomeAssistant } from "../types"; import { DeviceCondition, DeviceTrigger } from "./device_automation"; import { Action } from "./script"; @@ -15,6 +15,7 @@ export interface AutomationEntity extends HassEntityBase { } export interface AutomationConfig { + id?: string; alias: string; description: string; trigger: Trigger[]; @@ -32,7 +33,8 @@ export interface ForDict { export interface StateTrigger { platform: "state"; - entity_id?: string; + entity_id: string; + attribute?: string; from?: string | number; to?: string | number; for?: string | number | ForDict; @@ -59,6 +61,7 @@ export interface HassTrigger { export interface NumericStateTrigger { platform: "numeric_state"; entity_id: string; + attribute?: string; above?: number; below?: number; value_template?: string; @@ -90,6 +93,12 @@ export interface ZoneTrigger { event: "enter" | "leave"; } +export interface TagTrigger { + platform: "tag"; + tag_id: string; + device_id?: string; +} + export interface TimeTrigger { platform: "time"; at: string; @@ -116,6 +125,7 @@ export type Trigger = | TimePatternTrigger | WebhookTrigger | ZoneTrigger + | TagTrigger | TimeTrigger | TemplateTrigger | EventTrigger @@ -129,12 +139,14 @@ export interface LogicalCondition { export interface StateCondition { condition: "state"; entity_id: string; + attribute?: string; state: string | number; } export interface NumericStateCondition { condition: "numeric_state"; entity_id: string; + attribute?: string; above?: number; below?: number; value_template?: string; @@ -199,3 +211,31 @@ export const getAutomationEditorInitData = () => { inititialAutomationEditorData = undefined; return data; }; + +export const subscribeTrigger = ( + hass: HomeAssistant, + onChange: (result: { + variables: { + trigger: {}; + }; + context: Context; + }) => void, + trigger: Trigger | Trigger[], + variables?: {} +) => + hass.connection.subscribeMessage(onChange, { + type: "subscribe_trigger", + trigger, + variables, + }); + +export const testCondition = ( + hass: HomeAssistant, + condition: Condition | Condition[], + variables?: {} +) => + hass.callWS<{ result: boolean }>({ + type: "test_condition", + condition, + variables, + }); diff --git a/src/data/cloud.ts b/src/data/cloud.ts index c642841584..e261805f50 100644 --- a/src/data/cloud.ts +++ b/src/data/cloud.ts @@ -9,14 +9,14 @@ interface CloudStatusBase { } export interface GoogleEntityConfig { - should_expose?: boolean; + should_expose?: boolean | null; override_name?: string; aliases?: string[]; disable_2fa?: boolean; } export interface AlexaEntityConfig { - should_expose?: boolean; + should_expose?: boolean | null; } export interface CertificateInformation { @@ -31,9 +31,11 @@ export interface CloudPreferences { remote_enabled: boolean; google_secure_devices_pin: string | undefined; cloudhooks: { [webhookId: string]: CloudWebhook }; + google_default_expose: string[] | null; google_entity_configs: { [entityId: string]: GoogleEntityConfig; }; + alexa_default_expose: string[] | null; alexa_entity_configs: { [entityId: string]: AlexaEntityConfig; }; @@ -106,8 +108,10 @@ export const updateCloudPref = ( prefs: { google_enabled?: CloudPreferences["google_enabled"]; alexa_enabled?: CloudPreferences["alexa_enabled"]; + alexa_default_expose?: CloudPreferences["alexa_default_expose"]; alexa_report_state?: CloudPreferences["alexa_report_state"]; google_report_state?: CloudPreferences["google_report_state"]; + google_default_expose?: CloudPreferences["google_default_expose"]; google_secure_devices_pin?: CloudPreferences["google_secure_devices_pin"]; } ) => diff --git a/src/data/config_entries.ts b/src/data/config_entries.ts index 527838ff3b..925d9cc9b1 100644 --- a/src/data/config_entries.ts +++ b/src/data/config_entries.ts @@ -8,6 +8,7 @@ export interface ConfigEntry { state: string; connection_class: string; supports_options: boolean; + supports_unload: boolean; } export interface ConfigEntryMutableParams { @@ -37,6 +38,11 @@ export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) => require_restart: boolean; }>("DELETE", `config/config_entries/entry/${configEntryId}`); +export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) => + hass.callApi<{ + require_restart: boolean; + }>("POST", `config/config_entries/entry/${configEntryId}/reload`); + export const getConfigEntrySystemOptions = ( hass: HomeAssistant, configEntryId: string diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts index a06f8f42ec..94cce83ba8 100644 --- a/src/data/config_flow.ts +++ b/src/data/config_flow.ts @@ -13,6 +13,8 @@ export const DISCOVERY_SOURCES = [ "discovery", ]; +export const ATTENTION_SOURCES = ["reauth"]; + export const createConfigFlow = (hass: HomeAssistant, handler: string) => hass.callApi("POST", "config/config_entries/flow", { handler, diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts index a6c20faf54..d500ad4311 100644 --- a/src/data/hassio/addon.ts +++ b/src/data/hassio/addon.ts @@ -51,6 +51,7 @@ export interface HassioAddonDetails extends HassioAddonInfo { changelog: boolean; hassio_api: boolean; hassio_role: "default" | "homeassistant" | "manager" | "admin"; + startup: "initialize" | "system" | "services" | "application" | "once"; homeassistant_api: boolean; auth_api: boolean; full_access: boolean; @@ -72,6 +73,7 @@ export interface HassioAddonDetails extends HassioAddonInfo { ingress_panel: boolean; ingress_entry: null | string; ingress_url: null | string; + watchdog: null | boolean; } export interface HassioAddonsInfo { @@ -99,6 +101,7 @@ export interface HassioAddonSetOptionParams { auto_update?: boolean; ingress_panel?: boolean; network?: object | null; + watchdog?: boolean; } export const reloadHassioAddons = async (hass: HomeAssistant) => { @@ -156,6 +159,19 @@ export const setHassioAddonOption = async ( ); }; +export const validateHassioAddonOption = async ( + hass: HomeAssistant, + slug: string +) => { + return await hass.callApi< + HassioResponse<{ message: string; valid: boolean }> + >("POST", `hassio/addons/${slug}/options/validate`); +}; + +export const startHassioAddon = async (hass: HomeAssistant, slug: string) => { + return hass.callApi("POST", `hassio/addons/${slug}/start`); +}; + export const setHassioAddonSecurity = async ( hass: HomeAssistant, slug: string, diff --git a/src/data/hassio/common.ts b/src/data/hassio/common.ts index b96d410c51..ad315096a3 100644 --- a/src/data/hassio/common.ts +++ b/src/data/hassio/common.ts @@ -5,3 +5,13 @@ export interface HassioResponse { export const hassioApiResultExtractor = (response: HassioResponse) => response.data; + +export const extractApiErrorMessage = (error: any): string => { + return typeof error === "object" + ? typeof error.body === "object" + ? error.body.message || "Unknown error, see logs" + : error.body || "Unknown error, see logs" + : error; +}; + +export const ignoredStatusCodes = new Set([502, 503, 504]); diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts index bdefe66dde..a8db6dbc71 100644 --- a/src/data/hassio/host.ts +++ b/src/data/hassio/host.ts @@ -40,6 +40,10 @@ export const updateOS = async (hass: HomeAssistant) => { return hass.callApi>("POST", "hassio/os/update"); }; +export const configSyncOS = async (hass: HomeAssistant) => { + return hass.callApi>("POST", "hassio/os/config/sync"); +}; + export const changeHostOptions = async (hass: HomeAssistant, options: any) => { return hass.callApi>( "POST", diff --git a/src/data/hassio/network.ts b/src/data/hassio/network.ts new file mode 100644 index 0000000000..5e2e7c20e1 --- /dev/null +++ b/src/data/hassio/network.ts @@ -0,0 +1,43 @@ +import { HomeAssistant } from "../../types"; +import { hassioApiResultExtractor, HassioResponse } from "./common"; + +export interface NetworkInterface { + gateway: string; + id: string; + ip_address: string; + address?: string; + method: "static" | "dhcp"; + nameservers: string[] | string; + dns?: string[]; + primary: boolean; + type: string; +} + +export interface NetworkInterfaces { + [key: string]: NetworkInterface; +} + +export interface NetworkInfo { + interfaces: NetworkInterfaces; +} + +export const fetchNetworkInfo = async (hass: HomeAssistant) => { + return hassioApiResultExtractor( + await hass.callApi>( + "GET", + "hassio/network/info" + ) + ); +}; + +export const updateNetworkInterface = async ( + hass: HomeAssistant, + network_interface: string, + options: Partial +) => { + await hass.callApi>( + "POST", + `hassio/network/interface/${network_interface}/update`, + options + ); +}; diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts index 51454ad610..992425b8bc 100644 --- a/src/data/hassio/supervisor.ts +++ b/src/data/hassio/supervisor.ts @@ -35,6 +35,14 @@ export interface SupervisorOptions { addons_repositories?: string[]; } +export const reloadSupervisor = async (hass: HomeAssistant) => { + await hass.callApi>("POST", `hassio/supervisor/reload`); +}; + +export const updateSupervisor = async (hass: HomeAssistant) => { + await hass.callApi>("POST", `hassio/supervisor/update`); +}; + export const fetchHassioHomeAssistantInfo = async (hass: HomeAssistant) => { return hassioApiResultExtractor( await hass.callApi>( @@ -71,7 +79,11 @@ export const createHassioSession = async (hass: HomeAssistant) => { "POST", "hassio/ingress/session" ); - document.cookie = `ingress_session=${response.data.session};path=/api/hassio_ingress/`; + document.cookie = `ingress_session=${ + response.data.session + };path=/api/hassio_ingress/;SameSite=Strict${ + location.protocol === "https:" ? ";Secure" : "" + }`; }; export const setSupervisorOption = async ( diff --git a/src/data/image.ts b/src/data/image.ts new file mode 100644 index 0000000000..b81499f002 --- /dev/null +++ b/src/data/image.ts @@ -0,0 +1,54 @@ +import { HomeAssistant } from "../types"; + +interface Image { + filesize: number; + name: string; + uploaded_at: string; // isoformat date + content_type: string; + id: string; +} + +export interface ImageMutableParams { + name: string; +} + +export const generateImageThumbnailUrl = (mediaId: string, size: number) => + `/api/image/serve/${mediaId}/${size}x${size}`; + +export const fetchImages = (hass: HomeAssistant) => + hass.callWS({ type: "image/list" }); + +export const createImage = async ( + hass: HomeAssistant, + file: File +): Promise => { + const fd = new FormData(); + fd.append("file", file); + const resp = await hass.fetchWithAuth("/api/image/upload", { + method: "POST", + body: fd, + }); + if (resp.status === 413) { + throw new Error("Uploaded image is too large"); + } else if (resp.status !== 200) { + throw new Error("Unknown error"); + } + return await resp.json(); +}; + +export const updateImage = ( + hass: HomeAssistant, + id: string, + updates: Partial +) => + hass.callWS({ + type: "image/update", + media_id: id, + ...updates, + }); + +export const deleteImage = (hass: HomeAssistant, id: string) => + hass.callWS({ + type: "image/delete", + media_id: id, + }); diff --git a/src/data/logbook.ts b/src/data/logbook.ts index fd79c87301..00fd8e937d 100644 --- a/src/data/logbook.ts +++ b/src/data/logbook.ts @@ -7,6 +7,12 @@ export interface LogbookEntry { entity_id?: string; domain: string; context_user_id?: string; + context_event_type?: string; + context_domain?: string; + context_service?: string; + context_entity_id?: string; + context_entity_id_name?: string; + context_name?: string; } const DATA_CACHE: { @@ -17,7 +23,8 @@ export const getLogbookData = ( hass: HomeAssistant, startDate: string, endDate: string, - entityId?: string + entityId?: string, + entity_matches_only?: boolean ) => { const ALL_ENTITIES = "*"; @@ -45,7 +52,8 @@ export const getLogbookData = ( hass, startDate, endDate, - entityId !== ALL_ENTITIES ? entityId : undefined + entityId !== ALL_ENTITIES ? entityId : undefined, + entity_matches_only ).then((entries) => entries.reverse()); return DATA_CACHE[cacheKey][entityId]; }; @@ -54,11 +62,13 @@ const getLogbookDataFromServer = async ( hass: HomeAssistant, startDate: string, endDate: string, - entityId?: string + entityId?: string, + entity_matches_only?: boolean ) => { const url = `logbook/${startDate}?end_time=${endDate}${ entityId ? `&entity=${entityId}` : "" - }`; + }${entity_matches_only ? `&entity_matches_only` : ""}`; + return hass.callApi("GET", url); }; diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts index 234825d018..4431730218 100644 --- a/src/data/lovelace.ts +++ b/src/data/lovelace.ts @@ -318,10 +318,11 @@ export interface WindowWithLovelaceProm extends Window { export interface ActionHandlerOptions { hasHold?: boolean; hasDoubleClick?: boolean; + disabled?: boolean; } export interface ActionHandlerDetail { - action: string; + action: "hold" | "tap" | "double_tap"; } export type ActionHandlerEvent = HASSDomEvent; diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 1f716cbee1..393c06cb71 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -1,4 +1,23 @@ -import { HassEntity } from "home-assistant-js-websocket"; +import { + mdiAccountMusic, + mdiAccountMusicOutline, + mdiAlbum, + mdiApplication, + mdiDramaMasks, + mdiFileMusic, + mdiFolder, + mdiGamepadVariant, + mdiImage, + mdiMovie, + mdiMusic, + mdiPlaylistMusic, + mdiPodcast, + mdiTelevisionClassic, + mdiVideo, + mdiWeb, +} from "@mdi/js"; +import type { HassEntity } from "home-assistant-js-websocket"; +import type { HomeAssistant } from "../types"; export const SUPPORT_PAUSE = 1; export const SUPPORT_SEEK = 2; @@ -14,13 +33,121 @@ export const SUPPORT_SELECT_SOURCE = 2048; export const SUPPORT_STOP = 4096; export const SUPPORTS_PLAY = 16384; export const SUPPORT_SELECT_SOUND_MODE = 65536; +export const SUPPORT_BROWSE_MEDIA = 131072; export const CONTRAST_RATIO = 4.5; +export type MediaPlayerBrowseAction = "pick" | "play"; + +export const BROWSER_PLAYER = "browser"; + +export type MediaClassBrowserSetting = { + icon: string; + thumbnail_ratio?: string; + layout?: string; + show_list_images?: boolean; +}; + +export const MediaClassBrowserSettings: { + [type: string]: MediaClassBrowserSetting; +} = { + album: { icon: mdiAlbum, layout: "grid" }, + app: { icon: mdiApplication, layout: "grid" }, + artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true }, + channel: { + icon: mdiTelevisionClassic, + thumbnail_ratio: "portrait", + layout: "grid", + }, + composer: { + icon: mdiAccountMusicOutline, + layout: "grid", + show_list_images: true, + }, + contributing_artist: { + icon: mdiAccountMusic, + layout: "grid", + show_list_images: true, + }, + directory: { icon: mdiFolder, layout: "grid", show_list_images: true }, + episode: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + game: { + icon: mdiGamepadVariant, + layout: "grid", + thumbnail_ratio: "portrait", + }, + genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true }, + image: { icon: mdiImage, layout: "grid" }, + movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" }, + music: { icon: mdiMusic }, + playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true }, + podcast: { icon: mdiPodcast, layout: "grid" }, + season: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + track: { icon: mdiFileMusic }, + tv_show: { + icon: mdiTelevisionClassic, + layout: "grid", + thumbnail_ratio: "portrait", + }, + url: { icon: mdiWeb }, + video: { icon: mdiVideo, layout: "grid" }, +}; + +export interface MediaPickedEvent { + item: MediaPlayerItem; +} + export interface MediaPlayerThumbnail { content_type: string; content: string; } +export interface ControlButton { + icon: string; + action: string; +} + +export interface MediaPlayerItem { + title: string; + media_content_type: string; + media_content_id: string; + media_class: string; + children_media_class: string; + can_play: boolean; + can_expand: boolean; + thumbnail?: string; + children?: MediaPlayerItem[]; +} + +export const browseMediaPlayer = ( + hass: HomeAssistant, + entityId: string, + mediaContentId?: string, + mediaContentType?: string +): Promise => + hass.callWS({ + type: "media_player/browse_media", + entity_id: entityId, + media_content_id: mediaContentId, + media_content_type: mediaContentType, + }); + +export const browseLocalMediaPlayer = ( + hass: HomeAssistant, + mediaContentId?: string +): Promise => + hass.callWS({ + type: "media_source/browse_media", + media_content_id: mediaContentId, + }); + export const getCurrentProgress = (stateObj: HassEntity): number => { let progress = stateObj.attributes.media_position; diff --git a/src/data/ozw.ts b/src/data/ozw.ts index 491b0168a2..80ad9882b7 100644 --- a/src/data/ozw.ts +++ b/src/data/ozw.ts @@ -1,4 +1,10 @@ import { HomeAssistant } from "../types"; +import { DeviceRegistryEntry } from "./device_registry"; + +export interface OZWNodeIdentifiers { + ozw_instance: number; + node_id: number; +} export interface OZWDevice { node_id: number; @@ -7,15 +13,180 @@ export interface OZWDevice { is_failed: boolean; is_zwave_plus: boolean; ozw_instance: number; + event: string; + node_manufacturer_name: string; + node_product_name: string; } +export interface OZWDeviceMetaDataResponse { + node_id: number; + ozw_instance: number; + metadata: OZWDeviceMetaData; +} + +export interface OZWDeviceMetaData { + OZWInfoURL: string; + ZWAProductURL: string; + ProductPic: string; + Description: string; + ProductManualURL: string; + ProductPageURL: string; + InclusionHelp: string; + ExclusionHelp: string; + ResetHelp: string; + WakeupHelp: string; + ProductSupportURL: string; + Frequency: string; + Name: string; + ProductPicBase64: string; +} + +export interface OZWInstance { + ozw_instance: number; + OZWDaemon_Version: string; + OpenZWave_Version: string; + QTOpenZWave_Version: string; + Status: string; + getControllerPath: string; + homeID: string; +} + +export interface OZWNetworkStatistics { + ozw_instance: number; + node_count: number; + readCnt: number; + writeCnt: number; + ACKCnt: number; + CANCnt: number; + NAKCnt: number; + dropped: number; + retries: number; +} + +export const nodeQueryStages = [ + "ProtocolInfo", + "Probe", + "WakeUp", + "ManufacturerSpecific1", + "NodeInfo", + "NodePlusInfo", + "ManufacturerSpecific2", + "Versions", + "Instances", + "Static", + "CacheLoad", + "Associations", + "Neighbors", + "Session", + "Dynamic", + "Configuration", + "Complete", +]; + +export const networkOnlineStatuses = [ + "driverAllNodesQueried", + "driverAllNodesQueriedSomeDead", + "driverAwakeNodesQueried", +]; +export const networkStartingStatuses = [ + "starting", + "started", + "Ready", + "driverReady", +]; +export const networkOfflineStatuses = [ + "Offline", + "stopped", + "driverFailed", + "driverReset", + "driverRemoved", + "driverAllNodesOnFire", +]; + +export const getIdentifiersFromDevice = function ( + device: DeviceRegistryEntry +): OZWNodeIdentifiers | undefined { + if (!device) { + return undefined; + } + + const ozwIdentifier = device.identifiers.find( + (identifier) => identifier[0] === "ozw" + ); + if (!ozwIdentifier) { + return undefined; + } + + const identifiers = ozwIdentifier[1].split("."); + return { + node_id: parseInt(identifiers[1]), + ozw_instance: parseInt(identifiers[0]), + }; +}; + +export const fetchOZWInstances = ( + hass: HomeAssistant +): Promise => + hass.callWS({ + type: "ozw/get_instances", + }); + +export const fetchOZWNetworkStatus = ( + hass: HomeAssistant, + ozw_instance: number +): Promise => + hass.callWS({ + type: "ozw/network_status", + ozw_instance: ozw_instance, + }); + +export const fetchOZWNetworkStatistics = ( + hass: HomeAssistant, + ozw_instance: number +): Promise => + hass.callWS({ + type: "ozw/network_statistics", + ozw_instance: ozw_instance, + }); + +export const fetchOZWNodes = ( + hass: HomeAssistant, + ozw_instance: number +): Promise => + hass.callWS({ + type: "ozw/get_nodes", + ozw_instance: ozw_instance, + }); + export const fetchOZWNodeStatus = ( hass: HomeAssistant, - ozw_instance: string, - node_id: string + ozw_instance: number, + node_id: number ): Promise => hass.callWS({ type: "ozw/node_status", ozw_instance: ozw_instance, node_id: node_id, }); + +export const fetchOZWNodeMetadata = ( + hass: HomeAssistant, + ozw_instance: number, + node_id: number +): Promise => + hass.callWS({ + type: "ozw/node_metadata", + ozw_instance: ozw_instance, + node_id: node_id, + }); + +export const refreshNodeInfo = ( + hass: HomeAssistant, + ozw_instance: number, + node_id: number +): Promise => + hass.callWS({ + type: "ozw/refresh_node_info", + ozw_instance: ozw_instance, + node_id: node_id, + }); diff --git a/src/data/panel.ts b/src/data/panel.ts index 24e6e31627..eb205c65b0 100644 --- a/src/data/panel.ts +++ b/src/data/panel.ts @@ -17,7 +17,9 @@ export const setDefaultPanel = ( }; export const getDefaultPanel = (hass: HomeAssistant): PanelInfo => - hass.panels[hass.defaultPanel]; + hass.panels[hass.defaultPanel] + ? hass.panels[hass.defaultPanel] + : hass.panels[DEFAULT_PANEL]; export const getPanelTitle = (hass: HomeAssistant): string | undefined => { if (!hass.panels) { diff --git a/src/data/person.ts b/src/data/person.ts index 00e77a838f..eb3b358729 100644 --- a/src/data/person.ts +++ b/src/data/person.ts @@ -5,12 +5,14 @@ export interface Person { name: string; user_id?: string; device_trackers?: string[]; + picture?: string; } export interface PersonMutableParams { name: string; user_id: string | null; device_trackers: string[]; + picture: string | null; } export const fetchPersons = (hass: HomeAssistant) => diff --git a/src/data/refresh_token.ts b/src/data/refresh_token.ts new file mode 100644 index 0000000000..bc2752bdf0 --- /dev/null +++ b/src/data/refresh_token.ts @@ -0,0 +1,17 @@ +declare global { + interface HASSDomEvents { + "hass-refresh-tokens": undefined; + } +} + +export interface RefreshToken { + client_icon?: string; + client_id: string; + client_name?: string; + created_at: string; + id: string; + is_current: boolean; + last_used_at?: string; + last_used_ip?: string; + type: "normal" | "long_lived_access_token"; +} diff --git a/src/data/script.ts b/src/data/script.ts index 7a8e83d717..240472f743 100644 --- a/src/data/script.ts +++ b/src/data/script.ts @@ -5,7 +5,7 @@ import { import { computeObjectId } from "../common/entity/compute_object_id"; import { navigate } from "../common/navigate"; import { HomeAssistant } from "../types"; -import { Condition } from "./automation"; +import { Condition, Trigger } from "./automation"; export const MODES = ["single", "restart", "queued", "parallel"]; export const MODES_MAX = ["queued", "parallel"]; @@ -56,6 +56,13 @@ export interface SceneAction { export interface WaitAction { wait_template: string; timeout?: number; + continue_on_timeout?: boolean; +} + +export interface WaitForTriggerAction { + wait_for_trigger: Trigger[]; + timeout?: number; + continue_on_timeout?: boolean; } export interface RepeatAction { @@ -91,6 +98,7 @@ export type Action = | DelayAction | SceneAction | WaitAction + | WaitForTriggerAction | RepeatAction | ChooseAction; diff --git a/src/data/tag.ts b/src/data/tag.ts new file mode 100644 index 0000000000..870777f7cb --- /dev/null +++ b/src/data/tag.ts @@ -0,0 +1,57 @@ +import { HomeAssistant } from "../types"; +import { HassEventBase } from "home-assistant-js-websocket"; + +export const EVENT_TAG_SCANNED = "tag_scanned"; + +export interface TagScannedEvent extends HassEventBase { + event_type: "tag_scanned"; + data: { + tag_id: string; + device_id?: string; + }; +} + +export interface Tag { + id: string; + name?: string; + description?: string; + last_scanned?: string; +} + +export interface UpdateTagParams { + name?: Tag["name"]; + description?: Tag["description"]; +} + +export const fetchTags = async (hass: HomeAssistant) => + hass.callWS({ + type: "tag/list", + }); + +export const createTag = async ( + hass: HomeAssistant, + params: UpdateTagParams, + tagId?: string +) => + hass.callWS({ + type: "tag/create", + tag_id: tagId, + ...params, + }); + +export const updateTag = async ( + hass: HomeAssistant, + tagId: string, + params: UpdateTagParams +) => + hass.callWS({ + ...params, + type: "tag/update", + tag_id: tagId, + }); + +export const deleteTag = async (hass: HomeAssistant, tagId: string) => + hass.callWS({ + type: "tag/delete", + tag_id: tagId, + }); diff --git a/src/data/weather.ts b/src/data/weather.ts index 199a5e68e9..fa6f6354b0 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -2,6 +2,7 @@ import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; import type { HomeAssistant, WeatherEntity } from "../types"; +import { roundWithOneDecimal } from "../util/calculate"; export const weatherSVGs = new Set([ "clear-night", @@ -135,7 +136,7 @@ export const getSecondaryWeatherAttribute = ( return ` ${hass!.localize( `ui.card.weather.attributes.${attribute}` - )} ${value} ${getWeatherUnit(hass!, attribute)} + )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)} `; }; @@ -199,7 +200,7 @@ export const weatherSVGStyles = css` fill: var(--weather-icon-sun-color, #fdd93c); } .moon { - fill: var(--weather-icon-moon-color, #fdf9cc); + fill: var(--weather-icon-moon-color, #fcf497); } .cloud-back { fill: var(--weather-icon-cloud-back-color, #d4d4d4); diff --git a/src/data/ws-templates.ts b/src/data/ws-templates.ts index aec9903803..6a331e1b11 100644 --- a/src/data/ws-templates.ts +++ b/src/data/ws-templates.ts @@ -1,20 +1,27 @@ import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket"; -interface RenderTemplateResult { +export interface RenderTemplateResult { result: string; + listeners: TemplateListeners; +} + +interface TemplateListeners { + all: boolean; + domains: string[]; + entities: string[]; } export const subscribeRenderTemplate = ( conn: Connection, - onChange: (result: string) => void, + onChange: (result: RenderTemplateResult) => void, params: { template: string; entity_ids?: string | string[]; variables?: object; } ): Promise => { - return conn.subscribeMessage( - (msg: RenderTemplateResult) => onChange(msg.result), - { type: "render_template", ...params } - ); + return conn.subscribeMessage((msg: RenderTemplateResult) => onChange(msg), { + type: "render_template", + ...params, + }); }; diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index 976a98d301..79a95c2bc2 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -1,21 +1,22 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "../../components/ha-icon-button"; -import "../../components/ha-circular-progress"; -import "@polymer/paper-tooltip/paper-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultArray, customElement, html, - LitElement, internalProperty, + LitElement, PropertyValues, TemplateResult, } from "lit-element"; +import { fireEvent } from "../../common/dom/fire_event"; +import { computeRTL } from "../../common/util/compute_rtl"; +import "../../components/ha-circular-progress"; import "../../components/ha-dialog"; import "../../components/ha-form/ha-form"; +import "../../components/ha-icon-button"; import "../../components/ha-markdown"; import { AreaRegistryEntry, @@ -35,8 +36,6 @@ import "./step-flow-external"; import "./step-flow-form"; import "./step-flow-loading"; import "./step-flow-pick-handler"; -import { fireEvent } from "../../common/dom/fire_event"; -import { computeRTL } from "../../common/util/compute_rtl"; let instance = 0; diff --git a/src/dialogs/config-flow/show-dialog-config-flow.ts b/src/dialogs/config-flow/show-dialog-config-flow.ts index 1ac015ecde..92bbb21597 100644 --- a/src/dialogs/config-flow/show-dialog-config-flow.ts +++ b/src/dialogs/config-flow/show-dialog-config-flow.ts @@ -97,8 +97,13 @@ export const showConfigFlowDialog = ( }, renderExternalStepHeader(hass, step) { - return hass.localize( - `component.${step.handler}.config.step.${step.step_id}.title` + return ( + hass.localize( + `component.${step.handler}.config.step.${step.step_id}.title` + ) || + hass.localize( + "ui.panel.config.integrations.config_flow.external_step.open_site" + ) ); }, diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index a0d13a98e6..660595b2f3 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "../../components/ha-circular-progress"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, @@ -12,6 +11,7 @@ import { TemplateResult, } from "lit-element"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-circular-progress"; import "../../components/ha-form/ha-form"; import type { HaFormSchema } from "../../components/ha-form/ha-form"; import "../../components/ha-markdown"; @@ -91,7 +91,7 @@ class StepFlowForm extends LitElement { ${!allRequiredInfoFilledIn ? html` - ${this.hass.localize( "ui.panel.config.integrations.config_flow.not_all_required_fields" )} diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index c875a58218..cbfcf3b8d5 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -20,6 +20,7 @@ import { LocalizeFunc } from "../../common/translations/localize"; import "../../components/ha-icon-next"; import { domainToName } from "../../data/integration"; import { HomeAssistant } from "../../types"; +import { documentationUrl } from "../../util/documentation-url"; import { FlowConfig } from "./show-dialog-data-entry-flow"; import { configFlowContentStyles } from "./styles"; @@ -122,7 +123,7 @@ class StepFlowPickHandler extends LitElement { ${this.hass.localize( "ui.panel.config.integrations.note_about_website_reference" )}${this.hass.localize( diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts index 326fb40c01..4fb23c79de 100644 --- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts +++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts @@ -4,27 +4,35 @@ import { CSSResultArray, customElement, html, - LitElement, internalProperty, + LitElement, TemplateResult, } from "lit-element"; -import "../../components/dialog/ha-paper-dialog"; +import { fireEvent } from "../../common/dom/fire_event"; +import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-formfield"; +import "../../components/ha-switch"; import { domainToName } from "../../data/integration"; -import { PolymerChangedEvent } from "../../polymer-types"; import { haStyleDialog } from "../../resources/styles"; import { HomeAssistant } from "../../types"; +import { HassDialog } from "../make-dialog-manager"; import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler"; @customElement("dialog-domain-toggler") -class DomainTogglerDialog extends LitElement { +class DomainTogglerDialog extends LitElement implements HassDialog { public hass!: HomeAssistant; @internalProperty() private _params?: HaDomainTogglerDialogParams; - public async showDialog(params: HaDomainTogglerDialogParams): Promise { + public showDialog(params: HaDomainTogglerDialogParams): void { this._params = params; } + public closeDialog() { + this._params = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + protected render(): TemplateResult { if (!this._params) { return html``; @@ -35,46 +43,49 @@ class DomainTogglerDialog extends LitElement { .sort(); return html` - -

    - ${this.hass.localize("ui.dialogs.domain_toggler.title")} -

    ${domains.map( (domain) => html` -
    ${domain[0]}
    - - ${this.hass.localize("state.default.off")} - - - ${this.hass.localize("state.default.on")} + + + + + + ${this.hass.localize( + "ui.dialogs.domain_toggler.reset_entities" + )} ` )}
    -     + `; } - private _openedChanged(ev: PolymerChangedEvent): void { - // Closed dialog by clicking on the overlay - if (!ev.detail.value) { - this._params = undefined; - } - } - - private _handleOff(ev) { - this._params!.toggleDomain(ev.currentTarget.domain, false); + private _handleSwitch(ev) { + this._params!.toggleDomain(ev.currentTarget.domain, ev.target.checked); ev.currentTarget.blur(); } - private _handleOn(ev) { - this._params!.toggleDomain(ev.currentTarget.domain, true); + private _handleReset(ev) { + this._params!.resetDomain(ev.currentTarget.domain); ev.currentTarget.blur(); } @@ -82,12 +93,13 @@ class DomainTogglerDialog extends LitElement { return [ haStyleDialog, css` - ha-paper-dialog { - max-width: 500px; + ha-dialog { + --mdc-dialog-max-width: 500px; } div { display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: auto auto; + grid-row-gap: 8px; align-items: center; } `, diff --git a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts index 509075c4d5..e5ee6bad5b 100644 --- a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts +++ b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts @@ -2,7 +2,9 @@ import { fireEvent } from "../../common/dom/fire_event"; export interface HaDomainTogglerDialogParams { domains: string[]; + exposedDomains: string[] | null; toggleDomain: (domain: string, turnOn: boolean) => void; + resetDomain: (domain: string) => void; } export const loadDomainTogglerDialog = () => diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 0663b6bfe7..5df7cb4f1e 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -5,19 +5,19 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; +import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-dialog"; import "../../components/ha-switch"; import { PolymerChangedEvent } from "../../polymer-types"; import { haStyleDialog } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import { DialogParams } from "./show-dialog-box"; -import { fireEvent } from "../../common/dom/fire_event"; @customElement("dialog-box") class DialogBox extends LitElement { @@ -55,9 +55,10 @@ class DialogBox extends LitElement { return html` `} - + ${this._params.confirmText ? this._params.confirmText : this.hass.localize("ui.dialogs.generic.ok")} @@ -114,8 +119,8 @@ class DialogBox extends LitElement { } private _dismiss(): void { - if (this._params!.cancel) { - this._params!.cancel(); + if (this._params?.cancel) { + this._params.cancel(); } this._close(); } @@ -133,7 +138,17 @@ class DialogBox extends LitElement { this._close(); } + private _dialogClosed(ev) { + if (ev.detail.action === "ignore") { + return; + } + this.closeDialog(); + } + private _close(): void { + if (!this._params) { + return; + } this._params = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts new file mode 100644 index 0000000000..ed9e3a05aa --- /dev/null +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -0,0 +1,136 @@ +import "@material/mwc-button/mwc-button"; +import Cropper from "cropperjs"; +// @ts-ignore +import cropperCss from "cropperjs/dist/cropper.css"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + query, + TemplateResult, + unsafeCSS, +} from "lit-element"; +import "../../components/ha-dialog"; +import { haStyleDialog } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; +import { classMap } from "lit-html/directives/class-map"; + +@customElement("image-cropper-dialog") +export class HaImagecropperDialog extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _params?: HaImageCropperDialogParams; + + @internalProperty() private _open = false; + + @query("img") private _image!: HTMLImageElement; + + private _cropper?: Cropper; + + public showDialog(params: HaImageCropperDialogParams): void { + this._params = params; + this._open = true; + } + + public closeDialog() { + this._open = false; + this._params = undefined; + this._cropper?.destroy(); + } + + protected updated(changedProperties: PropertyValues) { + if (!changedProperties.has("_params") || !this._params) { + return; + } + if (!this._cropper) { + this._image.src = URL.createObjectURL(this._params.file); + this._cropper = new Cropper(this._image, { + aspectRatio: this._params.options.aspectRatio, + viewMode: 1, + dragMode: "move", + minCropBoxWidth: 50, + ready: () => { + URL.revokeObjectURL(this._image!.src); + }, + }); + } else { + this._cropper.replace(URL.createObjectURL(this._params.file)); + } + } + + protected render(): TemplateResult { + return html` +
    + +
    + + ${this.hass.localize("ui.common.cancel")} + + + ${this.hass.localize("ui.dialogs.image_cropper.crop")} + +     `; + } + + private _cropImage() { + this._cropper!.getCroppedCanvas().toBlob( + (blob) => { + if (!blob) { + return; + } + const file = new File([blob], this._params!.file.name, { + type: this._params!.options.type || this._params!.file.type, + }); + this._params!.croppedCallback(file); + this.closeDialog(); + }, + this._params!.options.type || this._params!.file.type, + this._params!.options.quality + ); + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ${unsafeCSS(cropperCss)} + .container { + max-width: 640px; + } + img { + max-width: 100%; + } + .container.round .cropper-view-box, + .container.round .cropper-face { + border-radius: 50%; + } + .cropper-line, + .cropper-point, + .cropper-point.point-se::before { + background-color: var(--primary-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "image-cropper-dialog": HaImagecropperDialog; + } +} diff --git a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts new file mode 100644 index 0000000000..3ca19001c8 --- /dev/null +++ b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts @@ -0,0 +1,30 @@ +import { fireEvent } from "../../common/dom/fire_event"; + +export interface CropOptions { + round: boolean; + type?: "image/jpeg" | "image/png"; + quality?: number; + aspectRatio: number; +} + +export interface HaImageCropperDialogParams { + file: File; + options: CropOptions; + croppedCallback: (file: File) => void; +} + +const loadImageCropperDialog = () => + import( + /* webpackChunkName: "image-cropper-dialog" */ "./image-cropper-dialog" + ); + +export const showImageCropperDialog = ( + element: HTMLElement, + dialogParams: HaImageCropperDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "image-cropper-dialog", + dialogImport: loadImageCropperDialog, + dialogParams, + }); +}; diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index 8a25e93fe4..6a1a789b99 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -12,12 +12,13 @@ import { import "../../../components/ha-relative-time"; import { triggerAutomation } from "../../../data/automation"; import { HomeAssistant } from "../../../types"; +import { UNAVAILABLE_STATES } from "../../../data/entity"; @customElement("more-info-automation") class MoreInfoAutomation extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public stateObj?: HassEntity; + @property({ attribute: false }) public stateObj?: HassEntity; protected render(): TemplateResult { if (!this.hass || !this.stateObj) { @@ -34,7 +35,10 @@ class MoreInfoAutomation extends LitElement {
    - + ${this.hass.localize("ui.card.automation.trigger")}
    @@ -52,7 +56,7 @@ class MoreInfoAutomation extends LitElement { justify-content: space-between; } .actions { - margin: 36px 0 8px 0; + margin: 8px 0; text-align: right; } `; diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index d990cf25a0..7fa55778b2 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -4,9 +4,9 @@ import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -47,8 +47,9 @@ class MoreInfoCamera extends LitElement { return html` ${this._cameraPrefs ? html` diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js deleted file mode 100644 index 0362e44822..0000000000 --- a/src/dialogs/more-info/controls/more-info-light.js +++ /dev/null @@ -1,361 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { featureClassNames } from "../../../common/entity/feature_class_names"; -import "../../../components/ha-attributes"; -import "../../../components/ha-color-picker"; -import "../../../components/ha-labeled-slider"; -import "../../../components/ha-paper-dropdown-menu"; -import { EventsMixin } from "../../../mixins/events-mixin"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import "../../../components/ha-icon-button"; - -const FEATURE_CLASS_NAMES = { - 1: "has-brightness", - 2: "has-color_temp", - 4: "has-effect_list", - 16: "has-color", - 128: "has-white_value", -}; -/* - * @appliesMixin EventsMixin - */ -class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) { - static get template() { - return html` - - - -
    -
    - -
    - -
    - -
    - -
    - -
    -
    - - - -
    - -
    - - - - - -
    - - -
    - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - - stateObj: { - type: Object, - observer: "stateObjChanged", - }, - - brightnessSliderValue: { - type: Number, - value: 0, - }, - - ctSliderValue: { - type: Number, - value: 0, - }, - - wvSliderValue: { - type: Number, - value: 0, - }, - - hueSegments: { - type: Number, - value: 24, - }, - - saturationSegments: { - type: Number, - value: 8, - }, - - colorPickerColor: { - type: Object, - }, - }; - } - - stateObjChanged(newVal, oldVal) { - const props = { - brightnessSliderValue: 0, - }; - - if (newVal && newVal.state === "on") { - props.brightnessSliderValue = newVal.attributes.brightness; - props.ctSliderValue = newVal.attributes.color_temp; - props.wvSliderValue = newVal.attributes.white_value; - if (newVal.attributes.hs_color) { - props.colorPickerColor = { - h: newVal.attributes.hs_color[0], - s: newVal.attributes.hs_color[1] / 100, - }; - } - } - - this.setProperties(props); - - if (oldVal) { - setTimeout(() => { - this.fire("iron-resize"); - }, 500); - } - } - - computeClassNames(stateObj) { - const classes = [ - "content", - featureClassNames(stateObj, FEATURE_CLASS_NAMES), - ]; - if (stateObj && stateObj.state === "on") { - classes.push("is-on"); - } - if (stateObj && stateObj.state === "unavailable") { - classes.push("is-unavailable"); - } - return classes.join(" "); - } - - effectChanged(ev) { - const oldVal = this.stateObj.attributes.effect; - const newVal = ev.detail.value; - - if (!newVal || oldVal === newVal) return; - - this.hass.callService("light", "turn_on", { - entity_id: this.stateObj.entity_id, - effect: newVal, - }); - } - - brightnessSliderChanged(ev) { - const bri = parseInt(ev.target.value, 10); - - if (isNaN(bri)) return; - - this.hass.callService("light", "turn_on", { - entity_id: this.stateObj.entity_id, - brightness: bri, - }); - } - - ctSliderChanged(ev) { - const ct = parseInt(ev.target.value, 10); - - if (isNaN(ct)) return; - - this.hass.callService("light", "turn_on", { - entity_id: this.stateObj.entity_id, - color_temp: ct, - }); - } - - wvSliderChanged(ev) { - const wv = parseInt(ev.target.value, 10); - - if (isNaN(wv)) return; - - this.hass.callService("light", "turn_on", { - entity_id: this.stateObj.entity_id, - white_value: wv, - }); - } - - segmentClick() { - if (this.hueSegments === 24 && this.saturationSegments === 8) { - this.setProperties({ hueSegments: 0, saturationSegments: 0 }); - } else { - this.setProperties({ hueSegments: 24, saturationSegments: 8 }); - } - } - - serviceChangeColor(hass, entityId, color) { - hass.callService("light", "turn_on", { - entity_id: entityId, - hs_color: [color.h, color.s * 100], - }); - } - - /** - * Called when a new color has been picked. - * should be throttled with the 'throttle=' attribute of the color picker - */ - colorPicked(ev) { - this.serviceChangeColor(this.hass, this.stateObj.entity_id, ev.detail.hs); - } -} - -customElements.define("more-info-light", MoreInfoLight); diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts new file mode 100644 index 0000000000..7ce5896ad6 --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -0,0 +1,305 @@ +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { supportsFeature } from "../../../common/entity/supports-feature"; +import "../../../components/ha-attributes"; +import "../../../components/ha-color-picker"; +import "../../../components/ha-icon-button"; +import "../../../components/ha-labeled-slider"; +import "../../../components/ha-paper-dropdown-menu"; +import { + SUPPORT_BRIGHTNESS, + SUPPORT_COLOR, + SUPPORT_COLOR_TEMP, + SUPPORT_EFFECT, + SUPPORT_WHITE_VALUE, +} from "../../../data/light"; +import type { HomeAssistant, LightEntity } from "../../../types"; + +interface HueSatColor { + h: number; + s: number; +} + +@customElement("more-info-light") +class MoreInfoLight extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public stateObj?: LightEntity; + + @internalProperty() private _brightnessSliderValue = 0; + + @internalProperty() private _ctSliderValue = 0; + + @internalProperty() private _wvSliderValue = 0; + + @internalProperty() private _hueSegments = 24; + + @internalProperty() private _saturationSegments = 8; + + @internalProperty() private _colorPickerColor?: HueSatColor; + + protected render(): TemplateResult { + if (!this.hass || !this.stateObj) { + return html``; + } + + return html` +
    + ${supportsFeature(this.stateObj!, SUPPORT_BRIGHTNESS) + ? html` + + ` + : ""} + ${this.stateObj.state === "on" + ? html` + ${supportsFeature(this.stateObj, SUPPORT_COLOR_TEMP) + ? html` + + ` + : ""} + ${supportsFeature(this.stateObj, SUPPORT_WHITE_VALUE) + ? html` + + ` + : ""} + ${supportsFeature(this.stateObj, SUPPORT_COLOR) + ? html` +
    + + + +
    + ` + : ""} + ${supportsFeature(this.stateObj, SUPPORT_EFFECT) && + this.stateObj!.attributes.effect_list?.length + ? html` + + ${this.stateObj.attributes.effect_list.map( + (effect: string) => html` + ${effect} + ` + )} + + + ` + : ""} + ` + : ""} + +
    + `; + } + + protected updated(changedProps: PropertyValues): void { + const stateObj = this.stateObj! as LightEntity; + if (changedProps.has("stateObj") && stateObj.state === "on") { + this._brightnessSliderValue = stateObj.attributes.brightness; + this._ctSliderValue = stateObj.attributes.color_temp; + this._wvSliderValue = stateObj.attributes.white_value; + + if (stateObj.attributes.hs_color) { + this._colorPickerColor = { + h: stateObj.attributes.hs_color[0], + s: stateObj.attributes.hs_color[1] / 100, + }; + } + } + } + + private _effectChanged(ev: CustomEvent) { + const newVal = ev.detail.item.itemName; + + if (!newVal || this.stateObj!.attributes.effect === newVal) { + return; + } + + this.hass.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + effect: newVal, + }); + } + + private _brightnessSliderChanged(ev: CustomEvent) { + const bri = parseInt((ev.target as any).value, 10); + + if (isNaN(bri)) { + return; + } + + this.hass.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + brightness: bri, + }); + } + + private _ctSliderChanged(ev: CustomEvent) { + const ct = parseInt((ev.target as any).value, 10); + + if (isNaN(ct)) { + return; + } + + this.hass.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + color_temp: ct, + }); + } + + private _wvSliderChanged(ev: CustomEvent) { + const wv = parseInt((ev.target as any).value, 10); + + if (isNaN(wv)) { + return; + } + + this.hass.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + white_value: wv, + }); + } + + private _segmentClick() { + if (this._hueSegments === 24 && this._saturationSegments === 8) { + this._hueSegments = 0; + this._saturationSegments = 0; + } else { + this._hueSegments = 24; + this._saturationSegments = 8; + } + } + + /** + * Called when a new color has been picked. + * should be throttled with the 'throttle=' attribute of the color picker + */ + private _colorPicked(ev: CustomEvent) { + this.hass.callService("light", "turn_on", { + entity_id: this.stateObj!.entity_id, + hs_color: [ev.detail.hs.h, ev.detail.hs.s * 100], + }); + } + + static get styles(): CSSResult { + return css` + .content { + display: flex; + flex-direction: column; + align-items: center; + } + + .content.is-on { + margin-top: -16px; + } + + .content > * { + width: 100%; + max-height: 84px; + overflow: hidden; + padding-top: 16px; + } + + .color_temp { + --ha-slider-background: -webkit-linear-gradient( + right, + rgb(255, 160, 0) 0%, + white 50%, + rgb(166, 209, 255) 100% + ); + /* The color temp minimum value shouldn't be rendered differently. It's not "off". */ + --paper-slider-knob-start-border-color: var(--primary-color); + } + + .segmentationContainer { + position: relative; + max-height: 500px; + } + + ha-color-picker { + --ha-color-picker-wheel-borderwidth: 5; + --ha-color-picker-wheel-bordercolor: white; + --ha-color-picker-wheel-shadow: none; + --ha-color-picker-marker-borderwidth: 2; + --ha-color-picker-marker-bordercolor: white; + } + + .segmentationButton { + position: absolute; + top: 5%; + color: var(--secondary-text-color); + } + + paper-item { + cursor: pointer; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "more-info-light": MoreInfoLight; + } +} diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js deleted file mode 100644 index 2e45403793..0000000000 --- a/src/dialogs/more-info/controls/more-info-media_player.js +++ /dev/null @@ -1,421 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "../../../components/ha-icon-button"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import { attributeClassNames } from "../../../common/entity/attribute_class_names"; -import { computeRTLDirection } from "../../../common/util/compute_rtl"; -import "../../../components/ha-paper-dropdown-menu"; -import "../../../components/ha-paper-slider"; -import "../../../components/ha-icon"; -import { EventsMixin } from "../../../mixins/events-mixin"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import HassMediaPlayerEntity from "../../../util/hass-media-player-model"; - -/* - * @appliesMixin LocalizeMixin - * @appliesMixin EventsMixin - */ -class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) { - static get template() { - return html` - - - -
    -
    -
    - -
    -
    - -
    -
    - -
    - - - -
    -
    - - - -
    - -
    - - - - - - -
    - - - -
    - - -
    -
    - `; - } - - static get properties() { - return { - hass: Object, - stateObj: Object, - playerObj: { - type: Object, - computed: "computePlayerObj(hass, stateObj)", - observer: "playerObjChanged", - }, - - ttsLoaded: { - type: Boolean, - computed: "computeTTSLoaded(hass)", - }, - - ttsMessage: { - type: String, - value: "", - }, - - rtl: { - type: String, - computed: "_computeRTLDirection(hass)", - }, - }; - } - - computePlayerObj(hass, stateObj) { - return new HassMediaPlayerEntity(hass, stateObj); - } - - playerObjChanged(newVal, oldVal) { - if (oldVal) { - setTimeout(() => { - this.fire("iron-resize"); - }, 500); - } - } - - computeClassNames(stateObj) { - return attributeClassNames(stateObj, ["volume_level"]); - } - - computeMuteVolumeIcon(playerObj) { - return playerObj.isMuted ? "hass:volume-off" : "hass:volume-high"; - } - - computeHideVolumeButtons(playerObj) { - return !playerObj.supportsVolumeButtons || playerObj.isOff; - } - - computeShowPlaybackControls(playerObj) { - return !playerObj.isOff && playerObj.hasMediaControl; - } - - 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 ""; - } - - computeHidePowerButton(playerObj) { - return playerObj.isOff - ? !playerObj.supportsTurnOn - : !playerObj.supportsTurnOff; - } - - computeHideSelectSource(playerObj) { - return ( - playerObj.isOff || - !playerObj.supportsSelectSource || - !playerObj.sourceList - ); - } - - computeHideSelectSoundMode(playerObj) { - return ( - playerObj.isOff || - !playerObj.supportsSelectSoundMode || - !playerObj.soundModeList - ); - } - - computeHideTTS(ttsLoaded, playerObj) { - return !ttsLoaded || !playerObj.supportsPlayMedia; - } - - computeTTSLoaded(hass) { - return isComponentLoaded(hass, "tts"); - } - - handleTogglePower() { - this.playerObj.togglePower(); - } - - handlePrevious() { - this.playerObj.previousTrack(); - } - - handlePlaybackControl() { - this.playerObj.mediaPlayPause(); - } - - handleNext() { - this.playerObj.nextTrack(); - } - - handleSourceChanged(ev) { - if (!this.playerObj) return; - - const oldVal = this.playerObj.source; - const newVal = ev.detail.value; - - if (!newVal || oldVal === newVal) return; - - this.playerObj.selectSource(newVal); - } - - handleSoundModeChanged(ev) { - if (!this.playerObj) return; - - const oldVal = this.playerObj.soundMode; - const newVal = ev.detail.value; - - if (!newVal || oldVal === newVal) return; - - this.playerObj.selectSoundMode(newVal); - } - - handleVolumeTap() { - if (!this.playerObj.supportsVolumeMute) { - return; - } - this.playerObj.volumeMute(!this.playerObj.isMuted); - } - - handleVolumeTouchEnd(ev) { - /* when touch ends, we must prevent this from - * becoming a mousedown, up, click by emulation */ - ev.preventDefault(); - } - - handleVolumeUp() { - const obj = this.$.volumeUp; - this.handleVolumeWorker("volume_up", obj, true); - } - - handleVolumeDown() { - const obj = this.$.volumeDown; - this.handleVolumeWorker("volume_down", obj, true); - } - - handleVolumeWorker(service, obj, force) { - if (force || (obj !== undefined && obj.pointerDown)) { - this.playerObj.callService(service); - setTimeout(() => this.handleVolumeWorker(service, obj, false), 500); - } - } - - volumeSliderChanged(ev) { - const volPercentage = parseFloat(ev.target.value); - const volume = volPercentage > 0 ? volPercentage / 100 : 0; - this.playerObj.setVolume(volume); - } - - ttsCheckForEnter(ev) { - if (ev.keyCode === 13) this.sendTTS(); - } - - sendTTS() { - const services = this.hass.services.tts; - const serviceKeys = Object.keys(services).sort(); - let service; - let i; - - for (i = 0; i < serviceKeys.length; i++) { - if (serviceKeys[i].indexOf("_say") !== -1) { - service = serviceKeys[i]; - break; - } - } - - if (!service) { - return; - } - - this.hass.callService("tts", service, { - entity_id: this.stateObj.entity_id, - message: this.ttsMessage, - }); - this.ttsMessage = ""; - this.$.ttsInput.focus(); - } - - _computeRTLDirection(hass) { - return computeRTLDirection(hass); - } -} - -customElements.define("more-info-media_player", MoreInfoMediaPlayer); diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts new file mode 100644 index 0000000000..2a54b7053c --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -0,0 +1,434 @@ +import "@material/mwc-button/mwc-button"; +import "@polymer/paper-input/paper-input"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + query, + TemplateResult, +} from "lit-element"; +import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { supportsFeature } from "../../../common/entity/supports-feature"; +import { computeRTLDirection } from "../../../common/util/compute_rtl"; +import "../../../components/ha-icon"; +import "../../../components/ha-icon-button"; +import "../../../components/ha-paper-dropdown-menu"; +import "../../../components/ha-slider"; +import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; +import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity"; +import { + ControlButton, + MediaPickedEvent, + SUPPORTS_PLAY, + SUPPORT_BROWSE_MEDIA, + SUPPORT_NEXT_TRACK, + SUPPORT_PAUSE, + SUPPORT_PLAY_MEDIA, + SUPPORT_PREVIOUS_TRACK, + SUPPORT_SELECT_SOUND_MODE, + SUPPORT_SELECT_SOURCE, + SUPPORT_STOP, + SUPPORT_TURN_OFF, + SUPPORT_TURN_ON, + SUPPORT_VOLUME_BUTTONS, + SUPPORT_VOLUME_MUTE, + SUPPORT_VOLUME_SET, +} from "../../../data/media-player"; +import { HomeAssistant, MediaEntity } from "../../../types"; + +@customElement("more-info-media_player") +class MoreInfoMediaPlayer extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public stateObj?: MediaEntity; + + @query("#ttsInput") private _ttsInput?: HTMLInputElement; + + protected render(): TemplateResult { + if (!this.stateObj) { + return html``; + } + + const controls = this._getControls(); + const stateObj = this.stateObj; + + return html` + ${!controls + ? "" + : html` +
    +
    + ${controls!.map( + (control) => html` + + ` + )} +
    + ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA) + ? html` + + + ` + : ""} +
    + `} + ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) || + supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) && + ![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) + ? html` +
    + ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE) + ? html` + + ` + : ""} + ${supportsFeature(stateObj, SUPPORT_VOLUME_SET) + ? html` + + ` + : supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS) + ? html` + + + ` + : ""} +
    + ` + : ""} + ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) && + supportsFeature(stateObj, SUPPORT_SELECT_SOURCE) && + stateObj.attributes.source_list?.length + ? html` +
    + + + + ${stateObj.attributes.source_list!.map( + (source) => + html` + ${source} + ` + )} + + +
    + ` + : ""} + ${supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) && + stateObj.attributes.sound_mode_list?.length + ? html` +
    + + + + ${stateObj.attributes.sound_mode_list.map( + (mode) => html` + ${mode} + ` + )} + + +
    + ` + : ""} + ${isComponentLoaded(this.hass, "tts") && + supportsFeature(stateObj, SUPPORT_PLAY_MEDIA) + ? html` +
    + + +
    +
    + ` + : ""} + `; + } + + static get styles(): CSSResult { + return css` + ha-icon-button[action="turn_off"], + ha-icon-button[action="turn_on"], + ha-slider, + #ttsInput { + flex-grow: 1; + } + + .controls { + display: flex; + align-items: center; + } + + .basic-controls { + flex-grow: 1; + } + + .volume, + .source-input, + .sound-input, + .tts { + display: flex; + align-items: center; + justify-content: space-between; + } + + .source-input ha-icon, + .sound-input ha-icon { + padding: 7px; + margin-top: 24px; + } + + .source-input ha-paper-dropdown-menu, + .sound-input ha-paper-dropdown-menu { + margin-left: 10px; + flex-grow: 1; + } + + paper-item { + cursor: pointer; + } + `; + } + + private _getControls(): ControlButton[] | undefined { + const stateObj = this.stateObj; + + if (!stateObj) { + return undefined; + } + + const state = stateObj.state; + + if (UNAVAILABLE_STATES.includes(state)) { + return undefined; + } + + if (state === "off") { + return supportsFeature(stateObj, SUPPORT_TURN_ON) + ? [ + { + icon: "hass:power", + action: "turn_on", + }, + ] + : undefined; + } + + if (state === "idle") { + return supportsFeature(stateObj, SUPPORTS_PLAY) + ? [ + { + icon: "hass:play", + action: "media_play", + }, + ] + : undefined; + } + + const buttons: ControlButton[] = []; + + if (supportsFeature(stateObj, SUPPORT_TURN_OFF)) { + buttons.push({ + icon: "hass:power", + action: "turn_off", + }); + } + + if (supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)) { + buttons.push({ + icon: "hass:skip-previous", + action: "media_previous_track", + }); + } + + if ( + (state === "playing" && + (supportsFeature(stateObj, SUPPORT_PAUSE) || + supportsFeature(stateObj, SUPPORT_STOP))) || + (state === "paused" && supportsFeature(stateObj, SUPPORTS_PLAY)) + ) { + buttons.push({ + icon: + state !== "playing" + ? "hass:play" + : supportsFeature(stateObj, SUPPORT_PAUSE) + ? "hass:pause" + : "hass:stop", + action: "media_play_pause", + }); + } + + if (supportsFeature(stateObj, SUPPORT_NEXT_TRACK)) { + buttons.push({ + icon: "hass:skip-next", + action: "media_next_track", + }); + } + + return buttons.length > 0 ? buttons : undefined; + } + + private _handleClick(e: MouseEvent): void { + this.hass!.callService( + "media_player", + (e.currentTarget! as HTMLElement).getAttribute("action")!, + { + entity_id: this.stateObj!.entity_id, + } + ); + } + + private _toggleMute() { + this.hass!.callService("media_player", "volume_mute", { + entity_id: this.stateObj!.entity_id, + is_volume_muted: !this.stateObj!.attributes.is_volume_muted, + }); + } + + private _selectedValueChanged(e: Event): void { + this.hass!.callService("media_player", "volume_set", { + entity_id: this.stateObj!.entity_id, + volume_level: + Number((e.currentTarget! as HTMLElement).getAttribute("value")!) / 100, + }); + } + + private _handleSourceChanged(e: CustomEvent) { + const newVal = e.detail.item.itemName; + + if (!newVal || this.stateObj!.attributes.source === newVal) { + return; + } + + this.hass.callService("media_player", "select_source", { + entity_id: this.stateObj!.entity_id, + source: newVal, + }); + } + + private _handleSoundModeChanged(e: CustomEvent) { + const newVal = e.detail.item.itemName; + + if (!newVal || this.stateObj?.attributes.sound_mode === newVal) { + return; + } + + this.hass.callService("media_player", "select_sound_mode", { + entity_id: this.stateObj!.entity_id, + sound_mode: newVal, + }); + } + + private _ttsCheckForEnter(e: KeyboardEvent) { + if (e.keyCode === 13) this._sendTTS(); + } + + private _sendTTS() { + const ttsInput = this._ttsInput; + if (!ttsInput) { + return; + } + + const services = this.hass.services.tts; + const serviceKeys = Object.keys(services).sort(); + + const service = serviceKeys.find((key) => key.indexOf("_say") !== -1); + + if (!service) { + return; + } + + this.hass.callService("tts", service, { + entity_id: this.stateObj!.entity_id, + message: ttsInput.value, + }); + ttsInput.value = ""; + } + + private _showBrowseMedia(): void { + showMediaBrowserDialog(this, { + action: "play", + entityId: this.stateObj!.entity_id, + mediaPickedCallback: (pickedMedia: MediaPickedEvent) => + this._playMedia( + pickedMedia.item.media_content_id, + pickedMedia.item.media_content_type + ), + }); + } + + private _playMedia(media_content_id: string, media_content_type: string) { + this.hass!.callService("media_player", "play_media", { + entity_id: this.stateObj!.entity_id, + media_content_id, + media_content_type, + }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "more-info-media_player": MoreInfoMediaPlayer; + } +} diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index ef8b3f803b..84fa6a733b 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -32,7 +32,7 @@ class MoreInfoPerson extends LitElement { return html` ${this.stateObj.attributes.latitude && this.stateObj.attributes.longitude ? html` @@ -78,6 +78,9 @@ class MoreInfoPerson extends LitElement { margin: 36px 0 8px 0; text-align: right; } + ha-map { + margin-top: 16px; + } `; } } diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 809d697c70..c06f549896 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -26,15 +26,12 @@ class MoreInfoTimer extends LitElement { return html`
    ${this.stateObj.state === "idle" || this.stateObj.state === "paused" ? html` - + ${this.hass!.localize("ui.card.timer.actions.start")} ` @@ -42,7 +39,7 @@ class MoreInfoTimer extends LitElement { ${this.stateObj.state === "active" ? html` ${this.hass!.localize("ui.card.timer.actions.pause")} @@ -52,13 +49,13 @@ class MoreInfoTimer extends LitElement { ${this.stateObj.state === "active" || this.stateObj.state === "paused" ? html` ${this.hass!.localize("ui.card.timer.actions.cancel")} ${this.hass!.localize("ui.card.timer.actions.finish")} diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index 0c131333f1..ce947e9929 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -68,7 +68,7 @@ const VACUUM_COMMANDS: VacuumCommand[] = [ }, { translationKey: "clean_spot", - icon: "hass:broom", + icon: "hass:target-variant", serviceName: "clean_spot", isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_CLEAN_SPOT), diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index b1953f678d..4d787863d8 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -1,38 +1,70 @@ import "@material/mwc-button"; import "@material/mwc-icon-button"; -import "../../components/ha-header-bar"; -import "../../components/ha-dialog"; -import "../../components/ha-svg-icon"; -import { isComponentLoaded } from "../../common/config/is_component_loaded"; -import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const"; -import { computeStateName } from "../../common/entity/compute_state_name"; -import { navigate } from "../../common/navigate"; -import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/state-history-charts"; -import { removeEntityRegistryEntry } from "../../data/entity_registry"; -import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor"; -import "../../state-summary/state-card-content"; -import { showConfirmationDialog } from "../generic/show-dialog-box"; -import "./more-info-content"; +import "@material/mwc-tab"; +import "@material/mwc-tab-bar"; +import { mdiClose, mdiCog, mdiPencil } from "@mdi/js"; import { + css, customElement, + html, + internalProperty, LitElement, property, - internalProperty, - css, - html, } from "lit-element"; -import { haStyleDialog } from "../../resources/styles"; -import { HomeAssistant } from "../../types"; -import { getRecentWithCache } from "../../data/cached-history"; +import { cache } from "lit-html/directives/cache"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { + DOMAINS_MORE_INFO_NO_HISTORY, + DOMAINS_WITH_MORE_INFO, +} from "../../common/const"; +import { dynamicElement } from "../../common/dom/dynamic-element-directive"; +import { fireEvent } from "../../common/dom/fire_event"; import { computeDomain } from "../../common/entity/compute_domain"; -import { mdiClose, mdiCog, mdiPencil } from "@mdi/js"; -import { HistoryResult } from "../../data/history"; +import { computeStateName } from "../../common/entity/compute_state_name"; +import { stateMoreInfoType } from "../../common/entity/state_more_info_type"; +import { navigate } from "../../common/navigate"; +import "../../components/ha-dialog"; +import "../../components/ha-header-bar"; +import "../../components/ha-svg-icon"; +import { removeEntityRegistryEntry } from "../../data/entity_registry"; +import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor"; +import { haStyleDialog } from "../../resources/styles"; +import "../../state-summary/state-card-content"; +import { HomeAssistant } from "../../types"; +import { showConfirmationDialog } from "../generic/show-dialog-box"; +import "./ha-more-info-history"; +import "./ha-more-info-logbook"; const DOMAINS_NO_INFO = ["camera", "configurator"]; const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"]; const EDITABLE_DOMAINS = ["script"]; +const MORE_INFO_CONTROL_IMPORT = { + alarm_control_panel: () => import("./controls/more-info-alarm_control_panel"), + automation: () => import("./controls/more-info-automation"), + camera: () => import("./controls/more-info-camera"), + climate: () => import("./controls/more-info-climate"), + configurator: () => import("./controls/more-info-configurator"), + counter: () => import("./controls/more-info-counter"), + cover: () => import("./controls/more-info-cover"), + fan: () => import("./controls/more-info-fan"), + group: () => import("./controls/more-info-group"), + humidifier: () => import("./controls/more-info-humidifier"), + input_datetime: () => import("./controls/more-info-input_datetime"), + light: () => import("./controls/more-info-light"), + lock: () => import("./controls/more-info-lock"), + media_player: () => import("./controls/more-info-media_player"), + person: () => import("./controls/more-info-person"), + script: () => import("./controls/more-info-script"), + sun: () => import("./controls/more-info-sun"), + timer: () => import("./controls/more-info-timer"), + vacuum: () => import("./controls/more-info-vacuum"), + water_heater: () => import("./controls/more-info-water_heater"), + weather: () => import("./controls/more-info-weather"), + hidden: () => {}, + default: () => import("./controls/more-info-default"), +}; + export interface MoreInfoDialogParams { entityId: string | null; } @@ -43,11 +75,11 @@ export class MoreInfoDialog extends LitElement { @property({ type: Boolean, reflect: true }) public large = false; - @internalProperty() private _stateHistory?: HistoryResult; - @internalProperty() private _entityId?: string | null; - private _historyRefreshInterval?: number; + @internalProperty() private _moreInfoType?: string; + + @internalProperty() private _currTabIndex = 0; public showDialog(params: MoreInfoDialogParams) { this._entityId = params.entityId; @@ -55,24 +87,31 @@ export class MoreInfoDialog extends LitElement { this.closeDialog(); } this.large = false; - this._stateHistory = undefined; - if (this._computeShowHistoryComponent(this._entityId)) { - this._getStateHistory(); - clearInterval(this._historyRefreshInterval); - this._historyRefreshInterval = window.setInterval(() => { - this._getStateHistory(); - }, 60 * 1000); - } } public closeDialog() { this._entityId = undefined; - this._stateHistory = undefined; - clearInterval(this._historyRefreshInterval); - this._historyRefreshInterval = undefined; + this._currTabIndex = 0; fireEvent(this, "dialog-closed", { dialog: this.localName }); } + protected updated(changedProperties) { + if (!this.hass || !this._entityId || !changedProperties.has("_entityId")) { + return; + } + const stateObj = this.hass.states[this._entityId]; + if (!stateObj) { + return; + } + if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) { + this._moreInfoType = stateObj.attributes.custom_ui_more_info; + } else { + const type = stateMoreInfoType(stateObj); + this._moreInfoType = `more-info-${type}`; + MORE_INFO_CONTROL_IMPORT[type](); + } + } + protected render() { if (!this._entityId) { return html``; @@ -93,85 +132,135 @@ export class MoreInfoDialog extends LitElement { hideActions data-domain=${domain} > - - - - -
    - ${computeStateName(stateObj)} -
    - ${this.hass.user!.is_admin - ? html` - - ` - : ""} - ${this.hass.user!.is_admin && - ((EDITABLE_DOMAINS_WITH_ID.includes(domain) && - stateObj.attributes.id) || - EDITABLE_DOMAINS.includes(domain)) - ? html` - - ` - : ""} -     -
    - ${DOMAINS_NO_INFO.includes(domain) - ? "" - : html` - - `} - ${this._computeShowHistoryComponent(entityId) +
    + + + + +
    + ${computeStateName(stateObj)} +
    + ${this.hass.user!.is_admin + ? html` + + + + ` + : ""} + ${this.hass.user!.is_admin && + ((EDITABLE_DOMAINS_WITH_ID.includes(domain) && + stateObj.attributes.id) || + EDITABLE_DOMAINS.includes(domain)) + ? html` + + + + ` + : ""} +     + ${DOMAINS_WITH_MORE_INFO.includes(domain) && + this._computeShowHistoryComponent(entityId) ? html` - + + + + ` : ""} - - - ${stateObj.attributes.restored - ? html`

    - ${this.hass.localize( - "ui.dialogs.more_info_control.restored.not_provided" - )} -

    -

    - ${this.hass.localize( - "ui.dialogs.more_info_control.restored.remove_intro" - )} -

    - - ${this.hass.localize( - "ui.dialogs.more_info_control.restored.remove_action" - )} - ` - : ""} +
    +
    + ${cache( + this._currTabIndex === 0 + ? html` + ${DOMAINS_NO_INFO.includes(domain) + ? "" + : html` + + `} + ${DOMAINS_WITH_MORE_INFO.includes(domain) || + !this._computeShowHistoryComponent(entityId) + ? "" + : html` + `} + ${this._moreInfoType + ? dynamicElement(this._moreInfoType, { + hass: this.hass, + stateObj, + }) + : ""} + ${stateObj.attributes.restored + ? html` +

    + ${this.hass.localize( + "ui.dialogs.more_info_control.restored.not_provided" + )} +

    +

    + ${this.hass.localize( + "ui.dialogs.more_info_control.restored.remove_intro" + )} +

    + + ${this.hass.localize( + "ui.dialogs.more_info_control.restored.remove_action" + )} + + ` + : ""} + ` + : html` + + + ` + )}
    `; @@ -181,26 +270,10 @@ export class MoreInfoDialog extends LitElement { this.large = !this.large; } - private async _getStateHistory(): Promise { - if (!this._entityId) { - return; - } - this._stateHistory = await getRecentWithCache( - this.hass!, - this._entityId, - { - refresh: 60, - cacheKey: `more_info.${this._entityId}`, - hoursToShow: 24, - }, - this.hass!.localize, - this.hass!.language - ); - } - private _computeShowHistoryComponent(entityId) { return ( - isComponentLoaded(this.hass, "history") && + (isComponentLoaded(this.hass, "history") || + isComponentLoaded(this.hass, "logbook")) && !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId)) ); } @@ -243,6 +316,15 @@ export class MoreInfoDialog extends LitElement { this.closeDialog(); } + private _handleTabChanged(ev: CustomEvent): void { + const newTab = ev.detail.index; + if (newTab === this._currTabIndex) { + return; + } + + this._currTabIndex = ev.detail.index; + } + static get styles() { return [ haStyleDialog, @@ -256,8 +338,7 @@ export class MoreInfoDialog extends LitElement { --mdc-theme-on-primary: var(--primary-text-color); --mdc-theme-primary: var(--mdc-theme-surface); flex-shrink: 0; - border-bottom: 1px solid - var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); + display: block; } @media all and (max-width: 450px), all and (max-height: 500px) { @@ -268,6 +349,11 @@ export class MoreInfoDialog extends LitElement { } } + .heading { + border-bottom: 1px solid + var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); + } + @media all and (min-width: 451px) and (min-height: 501px) { ha-dialog { --mdc-dialog-max-width: 90vw; @@ -307,7 +393,8 @@ export class MoreInfoDialog extends LitElement { } state-card-content, - state-history-charts { + ha-more-info-history, + ha-more-info-logbook:not(:last-child) { display: block; margin-bottom: 16px; } @@ -315,3 +402,9 @@ export class MoreInfoDialog extends LitElement { ]; } } + +declare global { + interface HTMLElementTagNameMap { + "ha-more-info-dialog": MoreInfoDialog; + } +} diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts new file mode 100644 index 0000000000..93970b7b93 --- /dev/null +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -0,0 +1,95 @@ +import { + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { throttle } from "../../common/util/throttle"; +import "../../components/state-history-charts"; +import { getRecentWithCache } from "../../data/cached-history"; +import { HistoryResult } from "../../data/history"; +import { HomeAssistant } from "../../types"; + +@customElement("ha-more-info-history") +export class MoreInfoHistory extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public entityId!: string; + + @internalProperty() private _stateHistory?: HistoryResult; + + private _throttleGetStateHistory = throttle(() => { + this._getStateHistory(); + }, 10000); + + protected render(): TemplateResult { + if (!this.entityId) { + return html``; + } + + return html`${isComponentLoaded(this.hass, "history") + ? html`` + : ""} `; + } + + protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); + + if (changedProps.has("entityId")) { + this._stateHistory = undefined; + + if (!this.entityId) { + return; + } + + this._throttleGetStateHistory(); + return; + } + + if (!this.entityId || !changedProps.has("hass")) { + return; + } + + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + + if ( + oldHass && + this.hass.states[this.entityId] !== oldHass?.states[this.entityId] + ) { + // wait for commit of data (we only account for the default setting of 1 sec) + setTimeout(this._throttleGetStateHistory, 1000); + } + } + + private async _getStateHistory(): Promise { + if (!isComponentLoaded(this.hass, "history")) { + return; + } + this._stateHistory = await getRecentWithCache( + this.hass!, + this.entityId, + { + refresh: 60, + cacheKey: `more_info.${this.entityId}`, + hoursToShow: 24, + }, + this.hass!.localize, + this.hass!.language + ); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-more-info-history": MoreInfoHistory; + } +} diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts new file mode 100644 index 0000000000..6c559e7dae --- /dev/null +++ b/src/dialogs/more-info/ha-more-info-logbook.ts @@ -0,0 +1,169 @@ +import { + css, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { computeStateDomain } from "../../common/entity/compute_state_domain"; +import { throttle } from "../../common/util/throttle"; +import "../../components/ha-circular-progress"; +import "../../components/state-history-charts"; +import { getLogbookData, LogbookEntry } from "../../data/logbook"; +import "../../panels/logbook/ha-logbook"; +import { haStyle, haStyleScrollbar } from "../../resources/styles"; +import { HomeAssistant } from "../../types"; + +@customElement("ha-more-info-logbook") +export class MoreInfoLogbook extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public entityId!: string; + + @internalProperty() private _logbookEntries?: LogbookEntry[]; + + @internalProperty() private _persons = {}; + + private _lastLogbookDate?: Date; + + private _throttleGetLogbookEntries = throttle(() => { + this._getLogBookData(); + }, 10000); + + protected render(): TemplateResult { + if (!this.entityId) { + return html``; + } + const stateObj = this.hass.states[this.entityId]; + + if (!stateObj) { + return html``; + } + + return html` + ${isComponentLoaded(this.hass, "logbook") + ? !this._logbookEntries + ? html` + + ` + : this._logbookEntries.length + ? html` + + ` + : html`
    + ${this.hass.localize("ui.components.logbook.entries_not_found")} +
    ` + : ""} + `; + } + + protected firstUpdated(): void { + this._fetchPersonNames(); + } + + protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); + + if (changedProps.has("entityId")) { + this._lastLogbookDate = undefined; + this._logbookEntries = undefined; + + if (!this.entityId) { + return; + } + + this._throttleGetLogbookEntries(); + return; + } + + if (!this.entityId || !changedProps.has("hass")) { + return; + } + + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + + if ( + oldHass && + this.hass.states[this.entityId] !== oldHass?.states[this.entityId] + ) { + // wait for commit of data (we only account for the default setting of 1 sec) + setTimeout(this._throttleGetLogbookEntries, 1000); + } + } + + private async _getLogBookData() { + if (!isComponentLoaded(this.hass, "logbook")) { + return; + } + const lastDate = + this._lastLogbookDate || + new Date(new Date().getTime() - 24 * 60 * 60 * 1000); + const now = new Date(); + const newEntries = await getLogbookData( + this.hass, + lastDate.toISOString(), + now.toISOString(), + this.entityId, + true + ); + this._logbookEntries = this._logbookEntries + ? [...newEntries, ...this._logbookEntries] + : newEntries; + this._lastLogbookDate = now; + } + + private _fetchPersonNames() { + Object.values(this.hass.states).forEach((entity) => { + if ( + entity.attributes.user_id && + computeStateDomain(entity) === "person" + ) { + this._persons[entity.attributes.user_id] = + entity.attributes.friendly_name; + } + }); + } + + static get styles() { + return [ + haStyle, + haStyleScrollbar, + css` + .no-entries { + text-align: center; + padding: 16px; + color: var(--secondary-text-color); + } + ha-logbook { + max-height: 250px; + overflow: auto; + } + ha-circular-progress { + display: flex; + justify-content: center; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-more-info-logbook": MoreInfoLogbook; + } +} diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts deleted file mode 100644 index 369d9e8d4f..0000000000 --- a/src/dialogs/more-info/more-info-content.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { HassEntity } from "home-assistant-js-websocket"; -import { property, PropertyValues, UpdatingElement } from "lit-element"; -import dynamicContentUpdater from "../../common/dom/dynamic_content_updater"; -import { stateMoreInfoType } from "../../common/entity/state_more_info_type"; -import { HomeAssistant } from "../../types"; -import "./controls/more-info-alarm_control_panel"; -import "./controls/more-info-automation"; -import "./controls/more-info-camera"; -import "./controls/more-info-climate"; -import "./controls/more-info-configurator"; -import "./controls/more-info-counter"; -import "./controls/more-info-cover"; -import "./controls/more-info-default"; -import "./controls/more-info-fan"; -import "./controls/more-info-group"; -import "./controls/more-info-humidifier"; -import "./controls/more-info-input_datetime"; -import "./controls/more-info-light"; -import "./controls/more-info-lock"; -import "./controls/more-info-media_player"; -import "./controls/more-info-person"; -import "./controls/more-info-script"; -import "./controls/more-info-sun"; -import "./controls/more-info-timer"; -import "./controls/more-info-vacuum"; -import "./controls/more-info-water_heater"; -import "./controls/more-info-weather"; - -class MoreInfoContent extends UpdatingElement { - @property({ attribute: false }) public hass?: HomeAssistant; - - @property() public stateObj?: HassEntity; - - private _detachedChild?: ChildNode; - - protected firstUpdated(): void { - this.style.position = "relative"; - this.style.display = "block"; - } - - // This is not a lit element, but an updating element, so we implement update - protected update(changedProps: PropertyValues): void { - super.update(changedProps); - const stateObj = this.stateObj; - const hass = this.hass; - - if (!stateObj || !hass) { - if (this.lastChild) { - this._detachedChild = this.lastChild; - // Detach child to prevent it from doing work. - this.removeChild(this.lastChild); - } - return; - } - - if (this._detachedChild) { - this.appendChild(this._detachedChild); - this._detachedChild = undefined; - } - - const moreInfoType = - stateObj.attributes && "custom_ui_more_info" in stateObj.attributes - ? stateObj.attributes.custom_ui_more_info - : "more-info-" + stateMoreInfoType(stateObj); - - dynamicContentUpdater(this, moreInfoType.toUpperCase(), { - hass, - stateObj, - }); - } -} - -customElements.define("more-info-content", MoreInfoContent); diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index a8f2a20777..cc5359f306 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -43,12 +43,9 @@ export class HuiPersistentNotificationItem extends LitElement { .hass=${this.hass} .datetime="${this.notification.created_at}" > - ${this._computeTooltip( - this.hass, - this.notification - )} + + ${this._computeTooltip(this.hass, this.notification)} +
    diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts index bb4b54b6e7..a4dd8580d4 100644 --- a/src/entrypoints/app.ts +++ b/src/entrypoints/app.ts @@ -7,5 +7,3 @@ import "../util/legacy-support"; setPassiveTouchGestures(true); (window as any).frontendVersion = __VERSION__; - -import("../resources/html-import/polyfill"); diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts index 2a691c973f..8ecbd26ebb 100644 --- a/src/entrypoints/authorize.ts +++ b/src/entrypoints/authorize.ts @@ -1,5 +1,6 @@ // Compat needs to be first import import "../resources/compatibility"; +import "../resources/safari-14-attachshadow-patch"; import "@polymer/polymer/lib/elements/dom-if"; import "@polymer/polymer/lib/elements/dom-repeat"; import "../auth/ha-authorize"; diff --git a/src/entrypoints/core.ts b/src/entrypoints/core.ts index 8a6bedf9db..c6093ac056 100644 --- a/src/entrypoints/core.ts +++ b/src/entrypoints/core.ts @@ -1,5 +1,6 @@ // Compat needs to be first import import "../resources/compatibility"; +import "../resources/safari-14-attachshadow-patch"; import { Auth, Connection, diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts index d43d881679..4ff9160025 100644 --- a/src/entrypoints/custom-panel.ts +++ b/src/entrypoints/custom-panel.ts @@ -1,4 +1,5 @@ import "../resources/compatibility"; +import "../resources/safari-14-attachshadow-patch"; import { PolymerElement } from "@polymer/polymer"; import { fireEvent } from "../common/dom/fire_event"; import { loadJS } from "../common/dom/load_resource"; diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts index 0c30daed0a..56054746e8 100644 --- a/src/entrypoints/onboarding.ts +++ b/src/entrypoints/onboarding.ts @@ -1,5 +1,6 @@ // Compat needs to be first import import "../resources/compatibility"; +import "../resources/safari-14-attachshadow-patch"; import "../onboarding/ha-onboarding"; import "../resources/ha-style"; import "../resources/roboto"; diff --git a/src/external_app/external_config.ts b/src/external_app/external_config.ts index 7651b1307b..27728deaf0 100644 --- a/src/external_app/external_config.ts +++ b/src/external_app/external_config.ts @@ -2,6 +2,8 @@ import { ExternalMessaging } from "./external_messaging"; export interface ExternalConfig { hasSettingsScreen: boolean; + canWriteTag: boolean; + hasExoPlayer: boolean; } export const getExternalConfig = ( diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template index 62b1fdf87b..46bca88dd4 100644 --- a/src/html/authorize.html.template +++ b/src/html/authorize.html.template @@ -22,6 +22,14 @@ .header img { margin-right: 16px; } + @media (prefers-color-scheme: dark) { + body { + background-color: #111111; + color: #e1e1e1; + --primary-text-color: #e1e1e1; + --secondary-text-color: #9b9b9b; + } + } diff --git a/src/html/index.html.template b/src/html/index.html.template index fe4271c0fb..f5d8be97d1 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -100,9 +100,5 @@ {% endfor -%} } - - {% for extra_url in extra_urls -%} - - {% endfor -%} diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index 126f67ab71..f4bc333ede 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -5,6 +5,20 @@ <%= renderTemplate('_header') %> @@ -84,7 +106,28 @@ class HomeAssistantMain extends LitElement { protected firstUpdated() { import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar"); + this.addEventListener( + "hass-edit-sidebar", + (ev: HASSDomEvent) => { + this._sidebarEditMode = ev.detail.editMode; + + if (this._sidebarEditMode) { + if (this._sidebarNarrow) { + this.drawer.open(); + } else { + fireEvent(this, "hass-dock-sidebar", { + dock: "docked", + }); + setTimeout(() => this.appLayout.resetLayout()); + } + } + } + ); + this.addEventListener("hass-toggle-menu", () => { + if (this._sidebarEditMode) { + return; + } if (this._sidebarNarrow) { if (this.drawer.opened) { this.drawer.close(); diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index 280a32eb16..ad04160caa 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/src/layouts/partial-panel-resolver.ts @@ -1,6 +1,13 @@ import { PolymerElement } from "@polymer/polymer"; +import { + STATE_NOT_RUNNING, + STATE_RUNNING, + STATE_STARTING, +} from "home-assistant-js-websocket"; import { customElement, property, PropertyValues } from "lit-element"; +import { deepActiveElement } from "../common/dom/deep-active-element"; import { deepEqual } from "../common/util/deep-equal"; +import { CustomPanelInfo } from "../data/panel_custom"; import { HomeAssistant, Panels } from "../types"; import { removeInitSkeleton } from "../util/init-skeleton"; import { @@ -8,13 +15,6 @@ import { RouteOptions, RouterOptions, } from "./hass-router-page"; -import { - STATE_STARTING, - STATE_NOT_RUNNING, - STATE_RUNNING, -} from "home-assistant-js-websocket"; -import { CustomPanelInfo } from "../data/panel_custom"; -import { deepActiveElement } from "../common/dom/deep-active-element"; const CACHE_URL_PATHS = ["lovelace", "developer-tools"]; const COMPONENTS = { @@ -64,6 +64,10 @@ const COMPONENTS = { import( /* webpackChunkName: "panel-shopping-list" */ "../panels/shopping-list/ha-panel-shopping-list" ), + "media-browser": () => + import( + /* webpackChunkName: "panel-media-browser" */ "../panels/media-browser/ha-panel-media-browser" + ), }; const getRoutes = (panels: Panels): RouterOptions => { diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index 1a9dd0c224..a983a2288b 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -8,9 +8,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; @@ -27,6 +27,7 @@ import type { PolymerChangedEvent } from "../polymer-types"; import type { HomeAssistant } from "../types"; const amsterdam = [52.3731339, 4.8903147]; +const mql = matchMedia("(prefers-color-scheme: dark)"); @customElement("onboarding-core-config") class OnboardingCoreConfig extends LitElement { @@ -93,6 +94,7 @@ class OnboardingCoreConfig extends LitElement { .hass=${this.hass} .location=${this._locationValue} .fitZoom=${14} + .darkMode=${mql.matches} @change=${this._locationChanged} >
    diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index d12fcd97ce..bb3f27ba2e 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -6,9 +6,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index e3b0e6af15..2607dae6e2 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -1,67 +1,85 @@ -import { - property, - internalProperty, - PropertyValues, - LitElement, - CSSResult, - html, - css, - unsafeCSS, - TemplateResult, -} from "lit-element"; +// @ts-ignore +import fullcalendarStyle from "@fullcalendar/common/main.css"; import { Calendar } from "@fullcalendar/core"; +import type { CalendarOptions } from "@fullcalendar/core"; import dayGridPlugin from "@fullcalendar/daygrid"; // @ts-ignore -import fullcalendarStyle from "@fullcalendar/core/main.css"; -// @ts-ignore import daygridStyle from "@fullcalendar/daygrid/main.css"; +import interactionPlugin from "@fullcalendar/interaction"; +import listPlugin from "@fullcalendar/list"; +// @ts-ignore +import listStyle from "@fullcalendar/list/main.css"; import "@material/mwc-button"; - -import "../../components/ha-icon-button"; -import "../../components/ha-button-toggle-group"; - -import type { - CalendarViewChanged, - CalendarEvent, - ToggleButton, - HomeAssistant, -} from "../../types"; +import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js"; +import { + css, + CSSResult, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, + unsafeCSS, +} from "lit-element"; +import memoize from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-button-toggle-group"; +import "../../components/ha-icon-button"; import { haStyle } from "../../resources/styles"; +import type { + CalendarEvent, + CalendarViewChanged, + FullCalendarView, + HomeAssistant, + ToggleButton, +} from "../../types"; declare global { + interface HTMLElementTagNameMap { + "ha-full-calendar": HAFullCalendar; + } interface HASSDomEvents { "view-changed": CalendarViewChanged; } } -const fullCalendarConfig = { +const defaultFullCalendarConfig: CalendarOptions = { headerToolbar: false, - plugins: [dayGridPlugin], + plugins: [dayGridPlugin, listPlugin, interactionPlugin], initialView: "dayGridMonth", dayMaxEventRows: true, height: "parent", + eventDisplay: "list-item", }; const viewButtons: ToggleButton[] = [ - { label: "Month View", value: "dayGridMonth", icon: "hass:view-module" }, - { label: "Week View", value: "dayGridWeek", icon: "hass:view-week" }, - { label: "Day View", value: "dayGridDay", icon: "hass:view-day" }, + { label: "Month View", value: "dayGridMonth", iconPath: mdiViewModule }, + { label: "Week View", value: "dayGridWeek", iconPath: mdiViewWeek }, + { label: "Day View", value: "dayGridDay", iconPath: mdiViewDay }, + { label: "List View", value: "listWeek", iconPath: mdiViewAgenda }, ]; class HAFullCalendar extends LitElement { public hass!: HomeAssistant; - @property() public events: CalendarEvent[] = []; + @property({ type: Boolean, reflect: true }) public narrow = false; - @property({ type: Boolean, reflect: true }) - public narrow!: boolean; + @property({ attribute: false }) public events: CalendarEvent[] = []; + + @property({ attribute: false }) public views: FullCalendarView[] = [ + "dayGridMonth", + "dayGridWeek", + "dayGridDay", + ]; @internalProperty() private calendar?: Calendar; - @internalProperty() private _activeView = "dayGridMonth"; + @internalProperty() private _activeView: FullCalendarView = "dayGridMonth"; protected render(): TemplateResult { + const viewToggleButtons = this._viewToggleButtons(this.views); + return html` ${this.calendar ? html` @@ -96,27 +114,12 @@ class HAFullCalendar extends LitElement { ${this.calendar.view.title} ` : html` -
    - ${this.hass.localize( - "ui.panel.calendar.today" - )} - -

    ${this.calendar.view.title} @@ -138,6 +141,21 @@ class HAFullCalendar extends LitElement {

    +
    + ${this.hass.localize( + "ui.panel.calendar.today" + )} + +
    `}
    ` @@ -157,14 +175,25 @@ class HAFullCalendar extends LitElement { this.calendar.removeAllEventSources(); this.calendar.addEventSource(this.events); } + + if (changedProps.has("views") && !this.views.includes(this._activeView)) { + this._activeView = this.views[0]; + this.calendar!.changeView(this._activeView); + this._fireViewChanged(); + } } protected firstUpdated(): void { - const config = { ...fullCalendarConfig, locale: this.hass.language }; + const config: CalendarOptions = { + ...defaultFullCalendarConfig, + locale: this.hass.language, + }; + + config.dateClick = (info) => this._handleDateClick(info); + config.eventClick = (info) => this._handleEventClick(info); this.calendar = new Calendar( this.shadowRoot!.getElementById("calendar")!, - // @ts-ignore config ); @@ -172,6 +201,25 @@ class HAFullCalendar extends LitElement { this._fireViewChanged(); } + private _handleEventClick(info): void { + if (info.view.type !== "dayGridMonth") { + return; + } + + this._activeView = "dayGridDay"; + this.calendar!.changeView("dayGridDay"); + this.calendar!.gotoDate(info.event.startStr); + } + + private _handleDateClick(info): void { + if (info.view.type !== "dayGridMonth") { + return; + } + this._activeView = "dayGridDay"; + this.calendar!.changeView("dayGridDay"); + this.calendar!.gotoDate(info.dateStr); + } + private _handleNext(): void { this.calendar!.next(); this._fireViewChanged(); @@ -201,14 +249,21 @@ class HAFullCalendar extends LitElement { }); } + private _viewToggleButtons = memoize((views) => + viewButtons.filter((button) => + views.includes(button.value as FullCalendarView) + ) + ); + static get styles(): CSSResult[] { return [ haStyle, css` ${unsafeCSS(fullcalendarStyle)} ${unsafeCSS(daygridStyle)} - - :host { + ${unsafeCSS(listStyle)} + + :host { display: flex; flex-direction: column; --fc-theme-standard-border-color: var(--divider-color); @@ -262,6 +317,15 @@ class HAFullCalendar extends LitElement { #calendar { flex-grow: 1; background-color: var(--card-background-color); + min-height: 400px; + --fc-neutral-bg-color: var(--card-background-color); + --fc-list-event-hover-bg-color: var(--card-background-color); + --fc-theme-standard-border-color: var(--divider-color); + --fc-border-color: var(--divider-color); + } + + a { + color: inherit !important; } .fc-theme-standard .fc-scrollgrid { @@ -273,15 +337,20 @@ class HAFullCalendar extends LitElement { } th.fc-col-header-cell.fc-day { - color: #70757a; + color: var(--secondary-text-color); font-size: 11px; font-weight: 400; text-transform: uppercase; } + .fc-daygrid-dot-event:hover { + background-color: inherit + } + .fc-daygrid-day-top { text-align: center; - padding-top: 8px; + padding-top: 5px; + justify-content: center; } table.fc-scrollgrid-sync-table @@ -296,13 +365,21 @@ class HAFullCalendar extends LitElement { font-size: 12px; } - td.fc-day-today { + .fc .fc-daygrid-day-number { + padding: 3px !important; + } + + .fc .fc-daygrid-day.fc-day-today { background: inherit; } + td.fc-day-today .fc-daygrid-day-top { + padding-top: 4px; + } + td.fc-day-today .fc-daygrid-day-number { height: 24px; - color: var(--text-primary-color); + color: var(--text-primary-color) !important; background-color: var(--primary-color); border-radius: 50%; display: inline-block; @@ -342,6 +419,66 @@ class HAFullCalendar extends LitElement { .fc-popover-header { background-color: var(--secondary-background-color) !important; } + + .fc-theme-standard .fc-list-day-frame { + background-color: transparent; + } + + .fc-list.fc-view, + .fc-list-event.fc-event td { + border: none; + } + + .fc-list-day.fc-day th { + border-bottom: none; + border-top: 1px solid var(--fc-theme-standard-border-color, #ddd) !important; + } + + .fc-list-day-text { + font-size: 16px; + font-weight: 400; + } + + .fc-list-day-side-text { + font-weight: 400; + font-size: 16px; + color: var(--primary-color); + } + + .fc-list-table td, + .fc-list-day-frame { + padding-top: 12px; + padding-bottom: 12px; + } + + :host([narrow]) .fc-dayGridMonth-view + .fc-daygrid-dot-event + .fc-event-time, + :host([narrow]) .fc-dayGridMonth-view + .fc-daygrid-dot-event + .fc-event-title, + :host([narrow]) .fc-dayGridMonth-view .fc-daygrid-day-bottom { + display: none; + } + + :host([narrow]) .fc .fc-dayGridMonth-view .fc-daygrid-event-harness-abs { + visibility: visible !important; + position: static; + } + + :host([narrow]) .fc-dayGridMonth-view .fc-daygrid-day-events { + display: flex; + min-height: 2em !important; + justify-content: center; + flex-wrap: wrap; + max-height: 2em; + height: 2em; + overflow: hidden; + } + + :host([narrow]) .fc-dayGridMonth-view .fc-scrollgrid-sync-table { + overflow: hidden; + } `, ]; } diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index ea7d2bb69b..58aefd8146 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -53,12 +53,6 @@ class PanelCalendar extends LitElement { selected: true, calendar, })); - - if (!this._start || !this._end) { - return; - } - - this._fetchEvents(this._start, this._end, this._selectedCalendars); } protected render(): TemplateResult { @@ -88,8 +82,8 @@ class PanelCalendar extends LitElement { ${!state.attributes.id ? html` - ${this.hass.localize( + + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} @@ -228,8 +228,8 @@ class HaConfigAreaPage extends LitElement { ${!state.attributes.id ? html` - ${this.hass.localize( + + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index d5c776baa7..3b2262ee75 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -1,3 +1,5 @@ +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { @@ -16,7 +18,8 @@ import { DataTableColumnContainer, RowClickedEvent, } from "../../../components/data-table/ha-data-table"; -import "@material/mwc-fab"; +import "../../../components/ha-icon-button"; +import "../../../components/ha-svg-icon"; import { AreaRegistryEntry, createAreaRegistryEntry, @@ -26,8 +29,6 @@ import { devicesInArea, } from "../../../data/device_registry"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; -import "../../../components/ha-icon-button"; -import "../../../components/ha-svg-icon"; import "../../../layouts/hass-loading-screen"; import "../../../layouts/hass-tabs-subpage-data-table"; import { HomeAssistant, Route } from "../../../types"; @@ -37,7 +38,6 @@ import { loadAreaRegistryDetailDialog, showAreaRegistryDetailDialog, } from "./show-dialog-area-registry-detail"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-config-areas-dashboard") export class HaConfigAreasDashboard extends LitElement { diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 4a40b0ee51..f9f82bbd5b 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -1,9 +1,8 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@material/mwc-list/mwc-list-item"; import "@material/mwc-icon-button"; -import "../../../../components/ha-button-menu"; -import "../../../../components/ha-svg-icon"; -import { mdiDotsVertical, mdiArrowUp, mdiArrowDown } from "@mdi/js"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; +import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; @@ -12,29 +11,31 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, } from "lit-element"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; +import "../../../../components/ha-svg-icon"; import type { Action } from "../../../../data/script"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; +import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; +import { handleStructError } from "../../../lovelace/common/structs/handle-errors"; +import "./types/ha-automation-action-choose"; import "./types/ha-automation-action-condition"; import "./types/ha-automation-action-delay"; import "./types/ha-automation-action-device_id"; import "./types/ha-automation-action-event"; +import "./types/ha-automation-action-repeat"; import "./types/ha-automation-action-scene"; import "./types/ha-automation-action-service"; +import "./types/ha-automation-action-wait_for_trigger"; import "./types/ha-automation-action-wait_template"; -import "./types/ha-automation-action-repeat"; -import "./types/ha-automation-action-choose"; -import { handleStructError } from "../../../lovelace/common/structs/handle-errors"; -import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; -import { haStyle } from "../../../../resources/styles"; const OPTIONS = [ "condition", @@ -44,6 +45,7 @@ const OPTIONS = [ "scene", "service", "wait_template", + "wait_for_trigger", "repeat", "choose", ]; @@ -166,12 +168,12 @@ export default class HaAutomationActionRow extends LitElement { "ui.panel.config.automation.editor.edit_yaml" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -261,6 +263,7 @@ export default class HaAutomationActionRow extends LitElement { this._switchYamlMode(); break; case 1: + fireEvent(this, "duplicate"); break; case 2: this._onDelete(); @@ -333,7 +336,6 @@ export default class HaAutomationActionRow extends LitElement { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } .warning { - color: var(--warning-color); margin-bottom: 8px; } .warning ul { diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index d6e815ea63..77db982c3b 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -28,6 +28,7 @@ export default class HaAutomationAction extends LitElement { .index=${idx} .totalActions=${this.actions.length} .action=${action} + @duplicate=${this._duplicateAction} @move-action=${this._move} @value-changed=${this._actionChanged} .hass=${this.hass} @@ -78,6 +79,14 @@ export default class HaAutomationAction extends LitElement { fireEvent(this, "value-changed", { value: actions }); } + private _duplicateAction(ev: CustomEvent) { + ev.stopPropagation(); + const index = (ev.target as any).index; + fireEvent(this, "value-changed", { + value: this.actions.concat(this.actions[index]), + }); + } + static get styles(): CSSResult { return css` ha-automation-action-row, diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts index 0bca89bf91..fa1f52f349 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts @@ -1,22 +1,21 @@ +import { mdiDelete } from "@mdi/js"; import "@polymer/paper-input/paper-input"; +import "@polymer/paper-listbox/paper-listbox"; import { + css, + CSSResult, customElement, LitElement, property, - CSSResult, - css, } from "lit-element"; import { html } from "lit-html"; -import { Action, ChooseAction } from "../../../../../data/script"; -import { HomeAssistant } from "../../../../../types"; -import { ActionElement } from "../ha-automation-action-row"; -import "../../condition/ha-automation-condition-editor"; -import "@polymer/paper-listbox/paper-listbox"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../ha-automation-action"; import { Condition } from "../../../../../data/automation"; +import { Action, ChooseAction } from "../../../../../data/script"; import { haStyle } from "../../../../../resources/styles"; -import { mdiDelete } from "@mdi/js"; +import { HomeAssistant } from "../../../../../types"; +import "../ha-automation-action"; +import { ActionElement } from "../ha-automation-action-row"; @customElement("ha-automation-action-choose") export class HaChooseAction extends LitElement implements ActionElement { diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts index 8849117902..03eb234832 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts @@ -15,7 +15,7 @@ export class HaConditionAction extends LitElement implements ActionElement { return { condition: "state" }; } - public render() { + protected render() { return html` +
    + + + + + `; + } + + private _continueChanged(ev) { + fireEvent(this, "value-changed", { + value: { ...this.action, continue_on_timeout: ev.target.checked }, + }); + } + + private _valueChanged(ev: CustomEvent): void { + handleChangeEvent(this, ev); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-automation-action-wait_for_trigger": HaWaitForTriggerAction; + } +} diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts index e585d52032..2cf6a86299 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts @@ -2,6 +2,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-textarea"; import { customElement, LitElement, property } from "lit-element"; import { html } from "lit-html"; +import { fireEvent } from "../../../../../common/dom/fire_event"; import { WaitAction } from "../../../../../data/script"; import { HomeAssistant } from "../../../../../types"; import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; @@ -13,11 +14,11 @@ export class HaWaitAction extends LitElement implements ActionElement { @property() public action!: WaitAction; public static get defaultConfig() { - return { wait_template: "", timeout: "" }; + return { wait_template: "" }; } protected render() { - const { wait_template, timeout } = this.action; + const { wait_template, timeout, continue_on_timeout } = this.action; return html` +
    + + + `; } + private _continueChanged(ev) { + fireEvent(this, "value-changed", { + value: { ...this.action, continue_on_timeout: ev.target.checked }, + }); + } + private _valueChanged(ev: CustomEvent): void { handleChangeEvent(this, ev); } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 1afc44967c..89bbfcab54 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -1,24 +1,25 @@ -import "../../../../components/ha-icon-button"; -import "@polymer/paper-item/paper-item"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; -import "../../../../components/ha-button-menu"; import { mdiDotsVertical } from "@mdi/js"; +import "@polymer/paper-item/paper-item"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import { Condition } from "../../../../data/automation"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import { HomeAssistant } from "../../../../types"; import "./ha-automation-condition-editor"; -import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import { haStyle } from "../../../../resources/styles"; export interface ConditionElement extends LitElement { condition: Condition; @@ -81,12 +82,12 @@ export default class HaAutomationConditionRow extends LitElement { "ui.panel.config.automation.editor.edit_yaml" )}     - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -109,6 +110,7 @@ export default class HaAutomationConditionRow extends LitElement { this._switchYamlMode(); break; case 1: + fireEvent(this, "duplicate"); break; case 2: this._onDelete(); @@ -133,20 +135,23 @@ export default class HaAutomationConditionRow extends LitElement { this._yamlMode = !this._yamlMode; } - static get styles(): CSSResult { - return css` - .card-menu { - float: right; - z-index: 3; - --mdc-theme-text-primary-on-background: var(--primary-text-color); - } - .rtl .card-menu { - float: left; - } - mwc-list-item[disabled] { - --mdc-theme-text-primary-on-background: var(--disabled-text-color); - } - `; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + .card-menu { + float: right; + z-index: 3; + --mdc-theme-text-primary-on-background: var(--primary-text-color); + } + .rtl .card-menu { + float: left; + } + mwc-list-item[disabled] { + --mdc-theme-text-primary-on-background: var(--disabled-text-color); + } + `, + ]; } } diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 05367bd6a2..b4529c4650 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + PropertyValues, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; @@ -20,13 +21,43 @@ export default class HaAutomationCondition extends LitElement { @property() public conditions!: Condition[]; + protected updated(changedProperties: PropertyValues) { + if (!changedProperties.has("conditions")) { + return; + } + let updatedConditions: Condition[] | undefined; + if (!Array.isArray(this.conditions)) { + updatedConditions = [this.conditions]; + } + + (updatedConditions || this.conditions).forEach((condition, index) => { + if (typeof condition === "string") { + updatedConditions = updatedConditions || [...this.conditions]; + updatedConditions[index] = { + condition: "template", + value_template: condition, + }; + } + }); + + if (updatedConditions) { + fireEvent(this, "value-changed", { + value: updatedConditions, + }); + } + } + protected render() { + if (!Array.isArray(this.conditions)) { + return html``; + } return html` ${this.conditions.map( (cond, idx) => html` @@ -68,6 +99,14 @@ export default class HaAutomationCondition extends LitElement { fireEvent(this, "value-changed", { value: conditions }); } + private _duplicateCondition(ev: CustomEvent) { + ev.stopPropagation(); + const index = (ev.target as any).index; + fireEvent(this, "value-changed", { + value: this.conditions.concat(this.conditions[index]), + }); + } + static get styles(): CSSResult { return css` ha-automation-condition-row, diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts index 1c3adae50d..71259efe5d 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts @@ -1,8 +1,7 @@ import "@polymer/paper-input/paper-input"; -import { customElement, html, LitElement, property } from "lit-element"; -import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/entity/ha-entity-picker"; import "@polymer/paper-input/paper-textarea"; +import { customElement, html, LitElement, property } from "lit-element"; +import "../../../../../components/entity/ha-entity-picker"; import { NumericStateCondition } from "../../../../../data/automation"; import { HomeAssistant } from "../../../../../types"; import { handleChangeEvent } from "../ha-automation-condition-row"; @@ -20,15 +19,33 @@ export default class HaNumericStateCondition extends LitElement { } public render() { - const { value_template, entity_id, below, above } = this.condition; + const { + value_template, + entity_id, + attribute, + below, + above, + } = this.condition; return html` + + ) { - ev.stopPropagation(); - fireEvent(this, "value-changed", { - value: { ...this.condition, entity_id: ev.detail.value }, - }); - } } declare global { diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts index 7f790194fc..baac37cf35 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts @@ -1,5 +1,14 @@ +import { Radio } from "@material/mwc-radio"; import "@polymer/paper-input/paper-input"; -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + internalProperty, + LitElement, + property, +} from "lit-element"; +import "../../../../../components/ha-formfield"; +import "../../../../../components/ha-radio"; import { TimeCondition } from "../../../../../data/automation"; import { HomeAssistant } from "../../../../../types"; import { @@ -7,38 +16,130 @@ import { handleChangeEvent, } from "../ha-automation-condition-row"; +const includeDomains = ["input_datetime"]; + @customElement("ha-automation-condition-time") export class HaTimeCondition extends LitElement implements ConditionElement { @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: TimeCondition; + @internalProperty() private _inputModeBefore?: boolean; + + @internalProperty() private _inputModeAfter?: boolean; + public static get defaultConfig() { return {}; } protected render() { const { after, before } = this.condition; + + const inputModeBefore = + this._inputModeBefore ?? before?.startsWith("input_datetime."); + const inputModeAfter = + this._inputModeAfter ?? after?.startsWith("input_datetime."); + return html` - - + + + + > + + + ${inputModeAfter + ? html`` + : html``} + + + + + + + + ${inputModeBefore + ? html`` + : html``} `; } + private _handleModeChanged(ev: Event) { + const target = ev.target as Radio; + if (target.getAttribute("name") === "mode_after") { + this._inputModeAfter = target.value === "input"; + } else { + this._inputModeBefore = target.value === "input"; + } + } + private _valueChanged(ev: CustomEvent): void { handleChangeEvent(this, ev); } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 2a935d0f38..5a39e7eac8 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,28 +1,32 @@ +import "@material/mwc-fab"; +import { mdiContentDuplicate, mdiContentSave, mdiDelete } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/paper-input/paper-textarea"; -import "../../../components/ha-icon-button"; +import { PaperListboxElement } from "@polymer/paper-listbox"; import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import { navigate } from "../../../common/navigate"; import "../../../components/ha-card"; +import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; -import "@material/mwc-fab"; import { AutomationConfig, AutomationEntity, Condition, deleteAutomation, getAutomationEditorInitData, + showAutomationEditor, Trigger, triggerAutomation, } from "../../../data/automation"; @@ -35,6 +39,7 @@ import "../../../layouts/ha-app-layout"; import "../../../layouts/hass-tabs-subpage"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; +import { documentationUrl } from "../../../util/documentation-url"; import "../ha-config-section"; import { configSections } from "../ha-panel-config"; import "./action/ha-automation-action"; @@ -42,9 +47,6 @@ import { HaDeviceAction } from "./action/types/ha-automation-action-device_id"; import "./condition/ha-automation-condition"; import "./trigger/ha-automation-trigger"; import { HaDeviceTrigger } from "./trigger/types/ha-automation-trigger-device"; -import { mdiContentSave } from "@mdi/js"; -import { PaperListboxElement } from "@polymer/paper-listbox"; -import { classMap } from "lit-html/directives/class-map"; const MODES = ["single", "restart", "queued", "parallel"]; const MODES_MAX = ["queued", "parallel"]; @@ -53,6 +55,7 @@ declare global { // for fire event interface HASSDomEvents { "ui-mode-not-available": Error; + duplicate: undefined; } } @@ -92,14 +95,25 @@ export class HaAutomationEditor extends LitElement { ${!this.automationId ? "" : html` - + + + + > + + `} ${this._config ? html` @@ -146,7 +160,10 @@ export class HaAutomationEditor extends LitElement { "ui.panel.config.automation.editor.modes.description", "documentation_link", html`${this.hass.localize( @@ -234,7 +251,10 @@ export class HaAutomationEditor extends LitElement { )}

    @@ -263,7 +283,10 @@ export class HaAutomationEditor extends LitElement { )}

    @@ -292,7 +315,10 @@ export class HaAutomationEditor extends LitElement { )}

    @@ -473,6 +499,31 @@ export class HaAutomationEditor extends LitElement { } } + private async _duplicate() { + if (this._dirty) { + if ( + !(await showConfirmationDialog(this, { + text: this.hass!.localize( + "ui.panel.config.automation.editor.unsaved_confirm" + ), + confirmText: this.hass!.localize("ui.common.yes"), + dismissText: this.hass!.localize("ui.common.no"), + })) + ) { + return; + } + // Wait for dialog to complate closing + await new Promise((resolve) => setTimeout(resolve, 0)); + } + showAutomationEditor(this, { + ...this._config, + id: undefined, + alias: `${this._config?.alias} (${this.hass.localize( + "ui.panel.config.automation.picker.duplicate" + )})`, + }); + } + private async _deleteConfirm() { showConfirmationDialog(this, { text: this.hass.localize( diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 57286eccd4..d95e80f079 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -1,12 +1,13 @@ -import "../../../components/ha-icon-button"; +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { + CSSResult, customElement, html, LitElement, property, TemplateResult, - CSSResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; import memoizeOne from "memoize-one"; @@ -16,28 +17,28 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "../../../components/entity/ha-entity-toggle"; -import "@material/mwc-fab"; +import "../../../components/ha-icon-button"; +import "../../../components/ha-svg-icon"; import { AutomationConfig, AutomationEntity, showAutomationEditor, triggerAutomation, } from "../../../data/automation"; +import { UNAVAILABLE_STATES } from "../../../data/entity"; import "../../../layouts/hass-tabs-subpage-data-table"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; import { configSections } from "../ha-panel-config"; import { showThingtalkDialog } from "./show-dialog-thingtalk"; -import "../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-automation-picker") class HaAutomationPicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public isWide!: boolean; + @property({ type: Boolean }) public isWide!: boolean; - @property() public narrow!: boolean; + @property({ type: Boolean }) public narrow!: boolean; @property() public route!: Route; @@ -58,7 +59,7 @@ class HaAutomationPicker extends LitElement { toggle: { title: "", type: "icon", - template: (_toggle, automation) => + template: (_toggle, automation: any) => html` html` + template: (_info, automation: any) => html` this._execute(ev)} + .disabled=${UNAVAILABLE_STATES.includes(automation.state)} > ${this.hass.localize("ui.card.automation.trigger")} @@ -138,7 +140,7 @@ class HaAutomationPicker extends LitElement { ${!automation.attributes.id ? html` - + ${this.hass.localize( "ui.panel.config.automation.picker.only_editable" )} diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index c88c644683..aa80ff1a96 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -1,25 +1,27 @@ +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; +import { mdiDotsVertical } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "../../../../components/ha-icon-button"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; -import "@material/mwc-list/mwc-list-item"; -import "../../../../components/ha-button-menu"; -import { mdiDotsVertical } from "@mdi/js"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, } from "lit-element"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; +import "../../../../components/ha-icon-button"; import type { Trigger } from "../../../../data/automation"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; +import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "./types/ha-automation-trigger-device"; import "./types/ha-automation-trigger-event"; @@ -29,13 +31,12 @@ import "./types/ha-automation-trigger-mqtt"; import "./types/ha-automation-trigger-numeric_state"; import "./types/ha-automation-trigger-state"; import "./types/ha-automation-trigger-sun"; +import "./types/ha-automation-trigger-tag"; import "./types/ha-automation-trigger-template"; import "./types/ha-automation-trigger-time"; import "./types/ha-automation-trigger-time_pattern"; import "./types/ha-automation-trigger-webhook"; import "./types/ha-automation-trigger-zone"; -import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; -import { haStyle } from "../../../../resources/styles"; const OPTIONS = [ "device", @@ -46,6 +47,7 @@ const OPTIONS = [ "mqtt", "numeric_state", "sun", + "tag", "template", "time", "time_pattern", @@ -111,12 +113,12 @@ export default class HaAutomationTriggerRow extends LitElement { "ui.panel.config.automation.editor.edit_yaml" )}     - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} @@ -181,6 +183,7 @@ export default class HaAutomationTriggerRow extends LitElement { this._switchYamlMode(); break; case 1: + fireEvent(this, "duplicate"); break; case 2: this._onDelete(); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index a074cbb881..953ec67037 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -27,6 +27,7 @@ export default class HaAutomationTrigger extends LitElement { @@ -68,6 +69,14 @@ export default class HaAutomationTrigger extends LitElement { fireEvent(this, "value-changed", { value: triggers }); } + private _duplicateTrigger(ev: CustomEvent) { + ev.stopPropagation(); + const index = (ev.target as any).index; + fireEvent(this, "value-changed", { + value: this.triggers.concat(this.triggers[index]), + }); + } + static get styles(): CSSResult { return css` ha-automation-trigger-row, diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index fd1555c598..cb7bd866ca 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -19,7 +19,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { return { event_type: "", event_data: {} }; } - public render() { + protected render() { const { event_type, event_data } = this.trigger; return html` diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts index 6d10f83c2d..0c54205b2b 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts @@ -1,8 +1,7 @@ import "@polymer/paper-input/paper-input"; -import { customElement, html, LitElement, property } from "lit-element"; -import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/entity/ha-entity-picker"; import "@polymer/paper-input/paper-textarea"; +import { customElement, html, LitElement, property } from "lit-element"; +import "../../../../../components/entity/ha-entity-picker"; import { ForDict, NumericStateTrigger } from "../../../../../data/automation"; import { HomeAssistant } from "../../../../../types"; import { handleChangeEvent } from "../ha-automation-trigger-row"; @@ -20,7 +19,7 @@ export default class HaNumericStateTrigger extends LitElement { } public render() { - const { value_template, entity_id, below, above } = this.trigger; + const { value_template, entity_id, attribute, below, above } = this.trigger; let trgFor = this.trigger.for; if ( @@ -41,10 +40,22 @@ export default class HaNumericStateTrigger extends LitElement { return html` + + ) { - ev.stopPropagation(); - fireEvent(this, "value-changed", { - value: { ...this.trigger, entity_id: ev.detail.value }, - }); - } } declare global { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts new file mode 100644 index 0000000000..954e1ef144 --- /dev/null +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts @@ -0,0 +1,72 @@ +import "@polymer/paper-input/paper-input"; +import { + customElement, + html, + LitElement, + property, + internalProperty, + PropertyValues, +} from "lit-element"; +import { TagTrigger } from "../../../../../data/automation"; +import { HomeAssistant } from "../../../../../types"; +import { TriggerElement } from "../ha-automation-trigger-row"; +import { Tag, fetchTags } from "../../../../../data/tag"; +import { fireEvent } from "../../../../../common/dom/fire_event"; + +@customElement("ha-automation-trigger-tag") +export class HaTagTrigger extends LitElement implements TriggerElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public trigger!: TagTrigger; + + @internalProperty() private _tags: Tag[] = []; + + public static get defaultConfig() { + return { tag_id: "" }; + } + + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + this._fetchTags(); + } + + protected render() { + const { tag_id } = this.trigger; + return html` + + + ${this._tags.map( + (tag) => html` + + ${tag.name || tag.id} + + ` + )} + + + `; + } + + private async _fetchTags() { + this._tags = await fetchTags(this.hass); + } + + private _tagChanged(ev) { + fireEvent(this, "value-changed", { + value: { + ...this.trigger, + tag_id: ev.detail.item.tag.id, + }, + }); + } +} diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts index 7ea3043660..1d9e6fa677 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts @@ -1,5 +1,14 @@ import "@polymer/paper-input/paper-input"; -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + internalProperty, + LitElement, + property, +} from "lit-element"; +import "../../../../../components/entity/ha-entity-picker"; +import "../../../../../components/ha-formfield"; +import "../../../../../components/ha-radio"; import { TimeTrigger } from "../../../../../data/automation"; import { HomeAssistant } from "../../../../../types"; import { @@ -7,31 +16,81 @@ import { TriggerElement, } from "../ha-automation-trigger-row"; +const includeDomains = ["input_datetime"]; + @customElement("ha-automation-trigger-time") export class HaTimeTrigger extends LitElement implements TriggerElement { @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: TimeTrigger; + @internalProperty() private _inputMode?: boolean; + public static get defaultConfig() { return { at: "" }; } protected render() { const { at } = this.trigger; + const inputMode = this._inputMode ?? at?.startsWith("input_datetime."); return html` - + > + + + + + + ${inputMode + ? html`` + : html``} `; } + private _handleModeChanged(ev: Event) { + this._inputMode = (ev.target as any).value === "input"; + } + private _valueChanged(ev: CustomEvent): void { handleChangeEvent(this, ev); } } + +declare global { + interface HTMLElementTagNameMap { + "ha-automation-trigger-time": HaTimeTrigger; + } +} diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts index 3dd625cc6c..9fb80369d9 100644 --- a/src/panels/config/cloud/alexa/cloud-alexa.ts +++ b/src/panels/config/cloud/alexa/cloud-alexa.ts @@ -1,14 +1,22 @@ -import "../../../../components/ha-icon-button"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; +import { + mdiCheckboxMarked, + mdiCheckboxMultipleMarked, + mdiCloseBox, + mdiCloseBoxMultiple, +} from "@mdi/js"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeDomain } from "../../../../common/entity/compute_domain"; @@ -20,31 +28,28 @@ import { } from "../../../../common/entity/entity_filter"; import { compare } from "../../../../common/string/compare"; import "../../../../components/entity/state-info"; +import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; +import "../../../../components/ha-formfield"; +import "../../../../components/ha-icon-button"; import "../../../../components/ha-switch"; -import type { HaSwitch } from "../../../../components/ha-switch"; import { AlexaEntity, fetchCloudAlexaEntities } from "../../../../data/alexa"; import { AlexaEntityConfig, CloudPreferences, CloudStatusLoggedIn, updateCloudAlexaEntityConfig, + updateCloudPref, } from "../../../../data/cloud"; import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler"; import "../../../../layouts/hass-loading-screen"; import "../../../../layouts/hass-subpage"; +import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; -import "../../../../components/ha-formfield"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; const DEFAULT_CONFIG_EXPOSE = true; const IGNORE_INTERFACES = ["Alexa.EndpointHealth"]; -const configIsExposed = (config: AlexaEntityConfig) => - config.should_expose === undefined - ? DEFAULT_CONFIG_EXPOSE - : config.should_expose; - @customElement("cloud-alexa") class CloudAlexa extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -98,9 +103,14 @@ class CloudAlexa extends LitElement { this._entities.forEach((entity) => { const stateObj = this.hass.states[entity.entity_id]; - const config = this._entityConfigs[entity.entity_id] || {}; + const config = this._entityConfigs[entity.entity_id] || { + should_expose: null, + }; const isExposed = emptyFilter - ? configIsExposed(config) + ? this._configIsExposed(entity.entity_id, config) + : filterFunc(entity.entity_id); + const isDomainExposed = emptyFilter + ? this._configIsDomainExposed(entity.entity_id) : filterFunc(entity.entity_id); if (isExposed) { selected++; @@ -114,36 +124,86 @@ class CloudAlexa extends LitElement { ? exposedCards : notExposedCards; + const iconButton = html` + + `; + target.push(html`
    - - ${entity.interfaces - .filter((ifc) => !IGNORE_INTERFACES.includes(ifc)) - .map((ifc) => - ifc.replace("Alexa.", "").replace("Controller", "") - ) - .join(", ")} - - - + - - + ${entity.interfaces + .filter((ifc) => !IGNORE_INTERFACES.includes(ifc)) + .map((ifc) => ifc.replace(/(Alexa.|Controller)/g, "")) + .join(", ")} + + ${!emptyFilter + ? html`${iconButton}` + : html` + ${iconButton} + + ${this.hass!.localize( + "ui.panel.config.cloud.google.expose_entity" + )} + + + + ${this.hass!.localize( + "ui.panel.config.cloud.google.dont_expose_entity" + )} + + + + ${this.hass!.localize( + "ui.panel.config.cloud.google.follow_domain" + )} + + + `} +
    `); @@ -157,17 +217,16 @@ class CloudAlexa extends LitElement { - - ${selected}${!this.narrow ? html` selected ` : ""} - ${ emptyFilter ? html` - + >${this.hass!.localize( + "ui.panel.config.cloud.alexa.manage_domains" + )} ` : "" } @@ -183,11 +242,20 @@ class CloudAlexa extends LitElement { ${ exposedCards.length > 0 ? html` -

    - ${this.hass!.localize( - "ui.panel.config.cloud.alexa.exposed_entities" - )} -

    +
    +

    + ${this.hass!.localize( + "ui.panel.config.cloud.alexa.exposed_entities" + )} +

    + ${!this.narrow + ? this.hass!.localize( + "ui.panel.config.cloud.alexa.exposed", + "selected", + selected + ) + : selected} +
    ${exposedCards}
    ` : "" @@ -195,11 +263,20 @@ class CloudAlexa extends LitElement { ${ notExposedCards.length > 0 ? html` -

    - ${this.hass!.localize( - "ui.panel.config.cloud.alexa.not_exposed_entities" - )} -

    +
    +

    + ${this.hass!.localize( + "ui.panel.config.cloud.alexa.not_exposed_entities" + )} +

    + ${!this.narrow + ? this.hass!.localize( + "ui.panel.config.cloud.alexa.not_exposed", + "selected", + this._entities.length - selected + ) + : this._entities.length - selected} +
    ${notExposedCards}
    ` : "" @@ -239,17 +316,35 @@ class CloudAlexa extends LitElement { fireEvent(this, "hass-more-info", { entityId }); } - private async _exposeChanged(ev: Event) { - const entityId = (ev.currentTarget as any).entityId; - const newExposed = (ev.target as HaSwitch).checked; - await this._updateExposed(entityId, newExposed); + private _configIsDomainExposed(entityId: string) { + const domain = computeDomain(entityId); + return this.cloudStatus.prefs.alexa_default_expose + ? this.cloudStatus.prefs.alexa_default_expose.includes(domain) + : DEFAULT_CONFIG_EXPOSE; } - private async _updateExposed(entityId: string, newExposed: boolean) { - const curExposed = configIsExposed(this._entityConfigs[entityId] || {}); - if (newExposed === curExposed) { - return; + private _configIsExposed(entityId: string, config: AlexaEntityConfig) { + return config.should_expose ?? this._configIsDomainExposed(entityId); + } + + private async _exposeChanged(ev: CustomEvent) { + const entityId = (ev.currentTarget as any).entityId; + let newVal: boolean | null = null; + switch (ev.detail.index) { + case 0: + newVal = true; + break; + case 1: + newVal = false; + break; + case 2: + newVal = null; + break; } + await this._updateExposed(entityId, newVal); + } + + private async _updateExposed(entityId: string, newExposed: boolean | null) { await this._updateConfig(entityId, { should_expose: newExposed, }); @@ -274,16 +369,46 @@ class CloudAlexa extends LitElement { domains: this._entities!.map((entity) => computeDomain(entity.entity_id) ).filter((value, idx, self) => self.indexOf(value) === idx), - toggleDomain: (domain, turnOn) => { + exposedDomains: this.cloudStatus.prefs.alexa_default_expose, + toggleDomain: (domain, expose) => { + this._updateDomainExposed(domain, expose); + }, + resetDomain: (domain) => { this._entities!.forEach((entity) => { if (computeDomain(entity.entity_id) === domain) { - this._updateExposed(entity.entity_id, turnOn); + this._updateExposed(entity.entity_id, null); } }); }, }); } + private async _updateDomainExposed(domain: string, expose: boolean) { + const defaultExpose = + this.cloudStatus.prefs.alexa_default_expose || + this._entities!.map((entity) => computeDomain(entity.entity_id)).filter( + (value, idx, self) => self.indexOf(value) === idx + ); + + if ( + (expose && defaultExpose.includes(domain)) || + (!expose && !defaultExpose.includes(domain)) + ) { + return; + } + + if (expose) { + defaultExpose.push(domain); + } else { + defaultExpose.splice(defaultExpose.indexOf(domain), 1); + } + + await updateCloudPref(this.hass!, { + alexa_default_expose: defaultExpose, + }); + fireEvent(this, "ha-refresh-cloud-status"); + } + private _ensureStatusReload() { if (this._popstateReloadStatusAttached) { return; @@ -306,61 +431,75 @@ class CloudAlexa extends LitElement { this._popstateSyncAttached = true; // Cache parent because by the time popstate happens, // this element is detached - // const parent = this.parentElement!; window.addEventListener( "popstate", () => { // We don't have anything yet. - // showToast(parent, { message: "Synchronizing changes to Google." }); - // cloudSyncGoogleAssistant(this.hass); }, { once: true } ); } - static get styles(): CSSResult { - return css` - .banner { - color: var(--primary-text-color); - background-color: var( - --ha-card-background, - var(--card-background-color, white) - ); - padding: 16px 8px; - text-align: center; - } - h1 { - color: var(--primary-text-color); - font-size: 24px; - letter-spacing: -0.012em; - margin-bottom: 0; - padding: 0 8px; - } - .content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - grid-gap: 8px 8px; - padding: 8px; - } - ha-switch { - clear: both; - } - .card-content { - padding-bottom: 12px; - } - state-info { - cursor: pointer; - } - ha-switch { - padding: 8px 0; - } - - @media all and (max-width: 450px) { - ha-card { - max-width: 100%; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + mwc-list-item > [slot="meta"] { + margin-left: 4px; } - } - `; + .banner { + color: var(--primary-text-color); + background-color: var( + --ha-card-background, + var(--card-background-color, white) + ); + padding: 16px 8px; + text-align: center; + } + .content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 8px 8px; + padding: 8px; + } + .card-content { + padding-bottom: 12px; + } + state-info { + cursor: pointer; + } + ha-switch { + padding: 8px 0; + } + .top-line { + display: flex; + align-items: center; + justify-content: space-between; + } + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + border-bottom: 1px solid var(--divider-color); + background: var(--app-header-background-color); + } + .header.second { + border-top: 1px solid var(--divider-color); + } + .exposed { + color: var(--success-color); + } + .not-exposed { + color: var(--error-color); + } + @media all and (max-width: 450px) { + ha-card { + max-width: 100%; + } + } + `, + ]; } } diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts index b590848f99..1561ed7420 100644 --- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts +++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts @@ -14,6 +14,7 @@ import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialo import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; +import { documentationUrl } from "../../../../util/documentation-url"; import { WebhookDialogParams } from "./show-dialog-manage-cloudhook"; const inputLabel = "Public URL – Click to copy to clipboard"; @@ -37,8 +38,11 @@ export class DialogManageCloudhook extends LitElement { const { webhook, cloudhook } = this._params; const docsUrl = webhook.domain === "automation" - ? "https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger" - : `https://www.home-assistant.io/integrations/${webhook.domain}/`; + ? documentationUrl( + this.hass!, + "/docs/automation/trigger/#webhook-trigger" + ) + : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`); return html`

    diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts index bdf23ec5f5..40067a0eaf 100644 --- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts +++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts @@ -1,14 +1,22 @@ -import "../../../../components/ha-icon-button"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; +import { + mdiCheckboxMarked, + mdiCheckboxMultipleMarked, + mdiCloseBox, + mdiCloseBoxMultiple, +} from "@mdi/js"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeDomain } from "../../../../common/entity/compute_domain"; @@ -19,8 +27,12 @@ import { isEmptyFilter, } from "../../../../common/entity/entity_filter"; import { compare } from "../../../../common/string/compare"; +import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import "../../../../components/entity/state-info"; +import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; +import "../../../../components/ha-formfield"; +import "../../../../components/ha-icon-button"; import "../../../../components/ha-switch"; import type { HaSwitch } from "../../../../components/ha-switch"; import { @@ -29,6 +41,7 @@ import { cloudSyncGoogleAssistant, GoogleEntityConfig, updateCloudGoogleEntityConfig, + updateCloudPref, } from "../../../../data/cloud"; import { fetchCloudGoogleEntities, @@ -37,18 +50,12 @@ import { import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler"; import "../../../../layouts/hass-loading-screen"; import "../../../../layouts/hass-subpage"; +import { haStyle } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import { showToast } from "../../../../util/toast"; -import "../../../../components/ha-formfield"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; const DEFAULT_CONFIG_EXPOSE = true; -const configIsExposed = (config: GoogleEntityConfig) => - config.should_expose === undefined - ? DEFAULT_CONFIG_EXPOSE - : config.should_expose; - @customElement("cloud-google-assistant") class CloudGoogleAssistant extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -102,9 +109,14 @@ class CloudGoogleAssistant extends LitElement { this._entities.forEach((entity) => { const stateObj = this.hass.states[entity.entity_id]; - const config = this._entityConfigs[entity.entity_id] || {}; + const config = this._entityConfigs[entity.entity_id] || { + should_expose: null, + }; const isExposed = emptyFilter - ? configIsExposed(config) + ? this._configIsExposed(entity.entity_id, config) + : filterFunc(entity.entity_id); + const isDomainExposed = emptyFilter + ? this._configIsDomainExposed(entity.entity_id) : filterFunc(entity.entity_id); if (isExposed) { selected++; @@ -118,34 +130,84 @@ class CloudGoogleAssistant extends LitElement { ? exposedCards : notExposedCards; + const iconButton = html` + + `; + target.push(html`
    - - ${entity.traits - .map((trait) => trait.substr(trait.lastIndexOf(".") + 1)) - .join(", ")} - -
    - + - - - + ${entity.traits + .map((trait) => trait.substr(trait.lastIndexOf(".") + 1)) + .join(", ")} + + ${!emptyFilter + ? html`${iconButton}` + : html` + ${iconButton} + + ${this.hass!.localize( + "ui.panel.config.cloud.google.expose_entity" + )} + + + + ${this.hass!.localize( + "ui.panel.config.cloud.google.dont_expose_entity" + )} + + + + ${this.hass!.localize( + "ui.panel.config.cloud.google.follow_domain" + )} + + + `}
    ${entity.might_2fa ? html` @@ -178,17 +240,16 @@ class CloudGoogleAssistant extends LitElement { - - ${selected}${!this.narrow ? html` selected ` : ""} - ${ emptyFilter ? html` - + >${this.hass!.localize( + "ui.panel.config.cloud.google.manage_domains" + )} ` : "" } @@ -204,11 +265,20 @@ class CloudGoogleAssistant extends LitElement { ${ exposedCards.length > 0 ? html` -

    - ${this.hass!.localize( - "ui.panel.config.cloud.google.exposed_entities" - )} -

    +
    +

    + ${this.hass!.localize( + "ui.panel.config.cloud.google.exposed_entities" + )} +

    + ${!this.narrow + ? this.hass!.localize( + "ui.panel.config.cloud.alexa.exposed", + "selected", + selected + ) + : selected} +
    ${exposedCards}
    ` : "" @@ -216,11 +286,20 @@ class CloudGoogleAssistant extends LitElement { ${ notExposedCards.length > 0 ? html` -

    - ${this.hass!.localize( - "ui.panel.config.cloud.google.not_exposed_entities" - )} -

    +
    +

    + ${this.hass!.localize( + "ui.panel.config.cloud.google.not_exposed_entities" + )} +

    + ${!this.narrow + ? this.hass!.localize( + "ui.panel.config.cloud.alexa.not_exposed", + "selected", + this._entities.length - selected + ) + : this._entities.length - selected} +
    ${notExposedCards}
    ` : "" @@ -242,6 +321,17 @@ class CloudGoogleAssistant extends LitElement { } } + private _configIsDomainExposed(entityId: string) { + const domain = computeDomain(entityId); + return this.cloudStatus.prefs.google_default_expose + ? this.cloudStatus.prefs.google_default_expose.includes(domain) + : DEFAULT_CONFIG_EXPOSE; + } + + private _configIsExposed(entityId: string, config: GoogleEntityConfig) { + return config.should_expose ?? this._configIsDomainExposed(entityId); + } + private async _fetchData() { const entities = await fetchCloudGoogleEntities(this.hass); entities.sort((a, b) => { @@ -260,17 +350,24 @@ class CloudGoogleAssistant extends LitElement { fireEvent(this, "hass-more-info", { entityId }); } - private async _exposeChanged(ev: Event) { + private async _exposeChanged(ev: CustomEvent) { const entityId = (ev.currentTarget as any).entityId; - const newExposed = (ev.target as HaSwitch).checked; - await this._updateExposed(entityId, newExposed); + let newVal: boolean | null = null; + switch (ev.detail.index) { + case 0: + newVal = true; + break; + case 1: + newVal = false; + break; + case 2: + newVal = null; + break; + } + await this._updateExposed(entityId, newVal); } - private async _updateExposed(entityId: string, newExposed: boolean) { - const curExposed = configIsExposed(this._entityConfigs[entityId] || {}); - if (newExposed === curExposed) { - return; - } + private async _updateExposed(entityId: string, newExposed: boolean | null) { await this._updateConfig(entityId, { should_expose: newExposed, }); @@ -309,16 +406,46 @@ class CloudGoogleAssistant extends LitElement { domains: this._entities!.map((entity) => computeDomain(entity.entity_id) ).filter((value, idx, self) => self.indexOf(value) === idx), - toggleDomain: (domain, turnOn) => { + exposedDomains: this.cloudStatus.prefs.google_default_expose, + toggleDomain: (domain, expose) => { + this._updateDomainExposed(domain, expose); + }, + resetDomain: (domain) => { this._entities!.forEach((entity) => { if (computeDomain(entity.entity_id) === domain) { - this._updateExposed(entity.entity_id, turnOn); + this._updateExposed(entity.entity_id, null); } }); }, }); } + private async _updateDomainExposed(domain: string, expose: boolean) { + const defaultExpose = + this.cloudStatus.prefs.google_default_expose || + this._entities!.map((entity) => computeDomain(entity.entity_id)).filter( + (value, idx, self) => self.indexOf(value) === idx + ); + + if ( + (expose && defaultExpose.includes(domain)) || + (!expose && !defaultExpose.includes(domain)) + ) { + return; + } + + if (expose) { + defaultExpose.push(domain); + } else { + defaultExpose.splice(defaultExpose.indexOf(domain), 1); + } + + await updateCloudPref(this.hass!, { + google_default_expose: defaultExpose, + }); + fireEvent(this, "ha-refresh-cloud-status"); + } + private _ensureStatusReload() { if (this._popstateReloadStatusAttached) { return; @@ -356,46 +483,66 @@ class CloudGoogleAssistant extends LitElement { ); } - static get styles(): CSSResult { - return css` - .banner { - color: var(--primary-text-color); - background-color: var( - --ha-card-background, - var(--card-background-color, white) - ); - padding: 16px 8px; - text-align: center; - } - h1 { - color: var(--primary-text-color); - font-size: 24px; - letter-spacing: -0.012em; - margin-bottom: 0; - padding: 0 8px; - } - .content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - grid-gap: 8px 8px; - padding: 8px; - } - .card-content { - padding-bottom: 12px; - } - state-info { - cursor: pointer; - } - ha-switch { - padding: 8px 0; - } - - @media all and (max-width: 450px) { - ha-card { - max-width: 100%; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + mwc-list-item > [slot="meta"] { + margin-left: 4px; } - } - `; + .banner { + color: var(--primary-text-color); + background-color: var( + --ha-card-background, + var(--card-background-color, white) + ); + padding: 16px 8px; + text-align: center; + } + .content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 8px 8px; + padding: 8px; + } + .card-content { + padding-bottom: 12px; + } + state-info { + cursor: pointer; + } + ha-switch { + padding: 8px 0; + } + .top-line { + display: flex; + align-items: center; + justify-content: space-between; + } + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + border-bottom: 1px solid var(--divider-color); + background: var(--app-header-background-color); + } + .header.second { + border-top: 1px solid var(--divider-color); + } + .exposed { + color: var(--success-color); + } + .not-exposed { + color: var(--error-color); + } + @media all and (max-width: 450px) { + ha-card { + max-width: 100%; + } + } + `, + ]; } } diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js index 8b5b04c5b1..382effb34f 100644 --- a/src/panels/config/cloud/register/cloud-register.js +++ b/src/panels/config/cloud/register/cloud-register.js @@ -8,6 +8,7 @@ import "../../../../layouts/hass-subpage"; import { EventsMixin } from "../../../../mixins/events-mixin"; import LocalizeMixin from "../../../../mixins/localize-mixin"; import "../../../../styles/polymer-ha-style"; +import { documentationUrl } from "../../../../util/documentation-url"; import "../../ha-config-section"; /* @@ -70,8 +71,8 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {

    [[localize('ui.panel.config.cloud.register.information4')]]

    @@ -137,6 +138,14 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) { } } + _computeDocumentationUrlTos(hass) { + return documentationUrl(hass, "/tos/"); + } + + _computeDocumentationUrlPrivacy(hass) { + return documentationUrl(hass, "/privacy/"); + } + _handleRegister() { let invalid = false; diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js index 4c85d7b27f..2ad523125d 100644 --- a/src/panels/config/customize/ha-form-customize.js +++ b/src/panels/config/customize/ha-form-customize.js @@ -6,10 +6,11 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import LocalizeMixin from "../../../mixins/localize-mixin"; -import hassAttributeUtil from "../../../util/hass-attributes-util"; -import "./ha-form-customize-attributes"; -import "../ha-form-style"; import "../../../styles/polymer-ha-style"; +import { documentationUrl } from "../../../util/documentation-url"; +import hassAttributeUtil from "../../../util/hass-attributes-util"; +import "../ha-form-style"; +import "./ha-form-customize-attributes"; class HaFormCustomize extends LocalizeMixin(PolymerElement) { static get template() { @@ -30,7 +31,7 @@ class HaFormCustomize extends LocalizeMixin(PolymerElement) {
    [[localize('ui.panel.config.customize.warning.include_sentence')]] [[localize('ui.panel.config.customize.warning.include_link')]] + ${this.hass.localize("ui.panel.config.ozw.node.button")} + + + ${this.hass.localize("ui.panel.config.ozw.refresh_node.button")} + + `; + } + + private async _refreshNodeClicked() { + showOZWRefreshNodeDialog(this, { + node_id: this.node_id, + ozw_instance: this.ozw_instance, + }); + } + + private async _nodeDetailsClicked() { + navigate( + this, + `/config/ozw/network/${this.ozw_instance}/node/${this.node_id}/dashboard` + ); + } + + static get styles(): CSSResult[] { + return [ + haStyle, + css` + :host { + display: flex; + flex-direction: column; + align-items: flex-start; + } + `, + ]; + } +} diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts index b82ba363f0..ce639c75b8 100644 --- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts +++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts @@ -12,7 +12,12 @@ import { import { DeviceRegistryEntry } from "../../../../../../data/device_registry"; import { haStyle } from "../../../../../../resources/styles"; import { HomeAssistant } from "../../../../../../types"; -import { OZWDevice, fetchOZWNodeStatus } from "../../../../../../data/ozw"; +import { + OZWDevice, + fetchOZWNodeStatus, + getIdentifiersFromDevice, + OZWNodeIdentifiers, +} from "../../../../../../data/ozw"; @customElement("ha-device-info-ozw") export class HaDeviceInfoOzw extends LitElement { @@ -20,26 +25,34 @@ export class HaDeviceInfoOzw extends LitElement { @property() public device!: DeviceRegistryEntry; + @property() + private node_id = 0; + + @property() + private ozw_instance = 1; + @internalProperty() private _ozwDevice?: OZWDevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { - this._fetchNodeDetails(this.device); + const identifiers: + | OZWNodeIdentifiers + | undefined = getIdentifiersFromDevice(this.device); + if (!identifiers) { + return; + } + this.ozw_instance = identifiers.ozw_instance; + this.node_id = identifiers.node_id; + + this._fetchNodeDetails(); } } - protected async _fetchNodeDetails(device) { - const ozwIdentifier = device.identifiers.find( - (identifier) => identifier[0] === "ozw" - ); - if (!ozwIdentifier) { - return; - } - const identifiers = ozwIdentifier[1].split("."); + protected async _fetchNodeDetails() { this._ozwDevice = await fetchOZWNodeStatus( this.hass, - identifiers[0], - identifiers[1] + this.ozw_instance, + this.node_id ); } diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index d5d98dc68d..d6629b58c5 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -119,9 +119,11 @@ export class HaDeviceActionsZha extends LitElement { return; } - this.hass.callService("zha", "remove", { + await this.hass.callService("zha", "remove", { ieee_address: this._zhaDevice!.ieee, }); + + history.back(); } static get styles(): CSSResult[] { diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index ec2e67ea68..22c2ea190a 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -4,9 +4,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -14,6 +14,7 @@ import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { compare } from "../../../common/string/compare"; +import { slugify } from "../../../common/string/slugify"; import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-icon-next"; import { AreaRegistryEntry } from "../../../data/area_registry"; @@ -25,8 +26,8 @@ import { } from "../../../data/device_registry"; import { EntityRegistryEntry, - findBatteryEntity, findBatteryChargingEntity, + findBatteryEntity, updateEntityRegistryEntry, } from "../../../data/entity_registry"; import { SceneEntities, showSceneEditor } from "../../../data/scene"; @@ -35,6 +36,7 @@ import { loadDeviceRegistryDetailDialog, showDeviceRegistryDetailDialog, } from "../../../dialogs/device-registry-detail/show-dialog-device-registry-detail"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/hass-error-screen"; import "../../../layouts/hass-tabs-subpage"; import { HomeAssistant, Route } from "../../../types"; @@ -43,7 +45,6 @@ import { configSections } from "../ha-panel-config"; import "./device-detail/ha-device-entities-card"; import "./device-detail/ha-device-info-card"; import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation"; -import { slugify } from "../../../common/string/slugify"; export interface EntityRegistryStateEntry extends EntityRegistryEntry { stateName?: string | null; @@ -295,8 +296,8 @@ export class HaConfigDevicePage extends LitElement { ${!state.attributes.id ? html` - ${this.hass.localize( + + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} @@ -307,11 +308,15 @@ export class HaConfigDevicePage extends LitElement { : ""; }) : html` - ${this.hass.localize( - "ui.panel.config.devices.automation.no_automations" - )} + + ${this.hass.localize( + "ui.panel.config.devices.add_prompt", + "name", + this.hass.localize( + "ui.panel.config.devices.automation.automations" + ) + )} + `} ` @@ -364,7 +369,9 @@ export class HaConfigDevicePage extends LitElement { ${!state.attributes.id ? html` ${this.hass.localize( + animation-delay="0" + > + ${this.hass.localize( "ui.panel.config.devices.cant_edit" )} @@ -375,11 +382,15 @@ export class HaConfigDevicePage extends LitElement { : ""; }) : html` - ${this.hass.localize( - "ui.panel.config.devices.scene.no_scenes" - )} + + ${this.hass.localize( + "ui.panel.config.devices.add_prompt", + "name", + this.hass.localize( + "ui.panel.config.devices.scene.scenes" + ) + )} + ` } @@ -428,9 +439,13 @@ export class HaConfigDevicePage extends LitElement { : html` ${this.hass.localize( - "ui.panel.config.devices.script.no_scripts" - )} + "ui.panel.config.devices.add_prompt", + "name", + this.hass.localize( + "ui.panel.config.devices.script.scripts" + ) + )} + `} ` @@ -502,12 +517,19 @@ export class HaConfigDevicePage extends LitElement { `); } if (integrations.includes("ozw")) { + import("./device-detail/integration-elements/ozw/ha-device-actions-ozw"); import("./device-detail/integration-elements/ozw/ha-device-info-ozw"); templates.push(html` +
    + +
    `); } if (integrations.includes("zha")) { @@ -549,11 +571,14 @@ export class HaConfigDevicePage extends LitElement { const renameEntityid = this.showAdvanced && - confirm( - this.hass.localize( + (await showConfirmationDialog(this, { + title: this.hass.localize( "ui.panel.config.devices.confirm_rename_entity_ids" - ) - ); + ), + text: this.hass.localize( + "ui.panel.config.devices.confirm_rename_entity_ids_warning" + ), + })); const updateProms = entities.map((entity) => { const name = entity.name || entity.stateName; @@ -702,6 +727,10 @@ export class HaConfigDevicePage extends LitElement { color: var(--primary-color); } + ha-card { + padding-bottom: 8px; + } + ha-card a { color: var(--primary-text-color); } diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 884c7c16dc..274eecf5e0 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -1,9 +1,9 @@ import { customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -25,8 +25,8 @@ import { } from "../../../data/device_registry"; import { EntityRegistryEntry, - findBatteryEntity, findBatteryChargingEntity, + findBatteryEntity, } from "../../../data/entity_registry"; import { domainToName } from "../../../data/integration"; import "../../../layouts/hass-tabs-subpage-data-table"; @@ -181,8 +181,8 @@ export class HaConfigDeviceDashboard extends LitElement { ); private _columns = memoizeOne( - (narrow: boolean): DataTableColumnContainer => - narrow + (narrow: boolean): DataTableColumnContainer => { + const columns: DataTableColumnContainer = narrow ? { name: { title: "Device", @@ -199,36 +199,6 @@ export class HaConfigDeviceDashboard extends LitElement { `; }, }, - battery_entity: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.battery" - ), - sortable: true, - type: "numeric", - width: "90px", - template: ( - batteryEntityPair: DeviceRowData["battery_entity"] - ) => { - const battery = - batteryEntityPair && batteryEntityPair[0] - ? this.hass.states[batteryEntityPair[0]] - : undefined; - const batteryCharging = - batteryEntityPair && batteryEntityPair[1] - ? this.hass.states[batteryEntityPair[1]] - : undefined; - return battery - ? html` - ${isNaN(battery.state as any) ? "-" : battery.state}% - - ` - : html` - `; - }, - }, } : { name: { @@ -240,70 +210,69 @@ export class HaConfigDeviceDashboard extends LitElement { grows: true, direction: "asc", }, - manufacturer: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.manufacturer" - ), - sortable: true, - filterable: true, - width: "15%", - }, - model: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.model" - ), - sortable: true, - filterable: true, - width: "15%", - }, - area: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.area" - ), - sortable: true, - filterable: true, - width: "15%", - }, - integration: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.integration" - ), - sortable: true, - filterable: true, - width: "15%", - }, - battery_entity: { - title: this.hass.localize( - "ui.panel.config.devices.data_table.battery" - ), - sortable: true, - type: "numeric", - width: "15%", - maxWidth: "90px", - template: ( - batteryEntityPair: DeviceRowData["battery_entity"] - ) => { - const battery = - batteryEntityPair && batteryEntityPair[0] - ? this.hass.states[batteryEntityPair[0]] - : undefined; - const batteryCharging = - batteryEntityPair && batteryEntityPair[1] - ? this.hass.states[batteryEntityPair[1]] - : undefined; - return battery && !isNaN(battery.state as any) - ? html` - ${battery.state}% - - ` - : html` - `; - }, - }, - } + }; + + columns.manufacturer = { + title: this.hass.localize( + "ui.panel.config.devices.data_table.manufacturer" + ), + sortable: true, + hidden: narrow, + filterable: true, + width: "15%", + }; + columns.model = { + title: this.hass.localize("ui.panel.config.devices.data_table.model"), + sortable: true, + hidden: narrow, + filterable: true, + width: "15%", + }; + columns.area = { + title: this.hass.localize("ui.panel.config.devices.data_table.area"), + sortable: true, + hidden: narrow, + filterable: true, + width: "15%", + }; + columns.integration = { + title: this.hass.localize( + "ui.panel.config.devices.data_table.integration" + ), + sortable: true, + hidden: narrow, + filterable: true, + width: "15%", + }; + columns.battery_entity = { + title: this.hass.localize("ui.panel.config.devices.data_table.battery"), + sortable: true, + type: "numeric", + width: narrow ? "90px" : "15%", + maxWidth: "90px", + template: (batteryEntityPair: DeviceRowData["battery_entity"]) => { + const battery = + batteryEntityPair && batteryEntityPair[0] + ? this.hass.states[batteryEntityPair[0]] + : undefined; + const batteryCharging = + batteryEntityPair && batteryEntityPair[1] + ? this.hass.states[batteryEntityPair[1]] + : undefined; + return battery && !isNaN(battery.state as any) + ? html` + ${battery.state}% + + ` + : html` - `; + }, + }; + return columns; + } ); public constructor() { diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index 5a1cac4066..bd9790ab09 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -1,25 +1,26 @@ -import "@material/mwc-tab-bar"; -import "@material/mwc-tab"; import "@material/mwc-icon-button"; +import "@material/mwc-tab"; +import "@material/mwc-tab-bar"; +import { mdiClose, mdiTune } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { cache } from "lit-html/directives/cache"; -import { fireEvent } from "../../../common/dom/fire_event"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; +import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-dialog"; import "../../../components/ha-header-bar"; -import "../../../components/ha-svg-icon"; import "../../../components/ha-related-items"; +import "../../../components/ha-svg-icon"; import { EntityRegistryEntry, ExtEntityRegistryEntry, @@ -30,7 +31,6 @@ import type { HomeAssistant } from "../../../types"; import { PLATFORMS_WITH_SETTINGS_TAB } from "./const"; import "./entity-registry-settings"; import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor"; -import { mdiClose, mdiTune } from "@mdi/js"; interface Tabs { [key: string]: Tab; @@ -252,7 +252,7 @@ export class DialogEntityEditor extends LitElement { @media all and (min-width: 451px) and (min-height: 501px) { .wrapper { - width: 400px; + min-width: 400px; } } diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 9d3ad306d6..366c852fa9 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1,4 +1,6 @@ import "@material/mwc-list/mwc-list-item"; +import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; +import { mdiFilterVariant } from "@mdi/js"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-icon-item"; @@ -10,9 +12,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, query, TemplateResult, } from "lit-element"; @@ -56,8 +58,8 @@ import { loadEntityEditorDialog, showEntityEditorDialog, } from "./show-dialog-entity-editor"; -import { mdiFilterVariant } from "@mdi/js"; -import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; +import { haStyle } from "../../../resources/styles"; +import { UNAVAILABLE } from "../../../data/entity"; export interface StateEntity extends EntityRegistryEntry { readonly?: boolean; @@ -192,7 +194,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { ? "hass:cancel" : "hass:pencil-off"} > - + ${entity.restored ? this.hass.localize( "ui.panel.config.entities.picker.status.restored" @@ -280,7 +282,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { for (const entry of entities) { const entity = this.hass.states[entry.entity_id]; - const unavailable = entity?.state === "unavailable"; + const unavailable = entity?.state === UNAVAILABLE; const restored = entity?.attributes.restored; if (!showUnavailable && unavailable) { @@ -378,7 +380,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { "ui.panel.config.entities.picker.disable_selected.button" )} - ${this.hass.localize( "ui.panel.config.entities.picker.remove_selected.button" )} - + ${this.hass.localize( "ui.panel.config.entities.picker.enable_selected.button" )} @@ -400,17 +402,18 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { icon="hass:cancel" @click=${this._disableSelected} > - + ${this.hass.localize( "ui.panel.config.entities.picker.disable_selected.button" )} - + ${this.hass.localize( "ui.panel.config.entities.picker.remove_selected.button" )} @@ -433,7 +436,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { ${this.narrow ? html`
    - + ${this.hass.localize( "ui.panel.config.filtering.filtering_by" )} @@ -721,111 +724,114 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { navigate(this, window.location.pathname, true); } - static get styles(): CSSResult { - return css` - hass-loading-screen { - --app-header-background-color: var(--sidebar-background-color); - --app-header-text-color: var(--sidebar-text-color); - } - a { - color: var(--primary-color); - } - h2 { - margin-top: 0; - 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); - opacity: var(--dark-primary-opacity); - } - p { - font-family: var(--paper-font-subhead_-_font-family); - -webkit-font-smoothing: var( - --paper-font-subhead_-_-webkit-font-smoothing - ); - font-weight: var(--paper-font-subhead_-_font-weight); - line-height: var(--paper-font-subhead_-_line-height); - } - ha-data-table { - width: 100%; - --data-table-border-width: 0; - } - :host(:not([narrow])) ha-data-table { - height: calc(100vh - 65px); - display: block; - } - ha-button-menu { - margin-right: 8px; - } - .table-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12); - } - search-input { - margin-left: 16px; - flex-grow: 1; - position: relative; - top: 2px; - } - .search-toolbar search-input { - margin-left: 8px; - top: 1px; - } - .search-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - color: var(--secondary-text-color); - } - .search-toolbar ha-button-menu { - position: static; - } - .selected-txt { - font-weight: bold; - padding-left: 16px; - } - .table-header .selected-txt { - margin-top: 20px; - } - .search-toolbar .selected-txt { - font-size: 16px; - } - .header-btns > mwc-button, - .header-btns > ha-icon-button { - margin: 8px; - } - .active-filters { - color: var(--primary-text-color); - position: relative; - display: flex; - align-items: center; - padding: 2px 2px 2px 8px; - margin-left: 4px; - font-size: 14px; - } - .active-filters ha-icon { - color: var(--primary-color); - } - .active-filters mwc-button { - margin-left: 8px; - } - .active-filters::before { - background-color: var(--primary-color); - opacity: 0.12; - border-radius: 4px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - content: ""; - } - `; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + hass-loading-screen { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + } + a { + color: var(--primary-color); + } + h2 { + margin-top: 0; + 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); + opacity: var(--dark-primary-opacity); + } + p { + font-family: var(--paper-font-subhead_-_font-family); + -webkit-font-smoothing: var( + --paper-font-subhead_-_-webkit-font-smoothing + ); + font-weight: var(--paper-font-subhead_-_font-weight); + line-height: var(--paper-font-subhead_-_line-height); + } + ha-data-table { + width: 100%; + --data-table-border-width: 0; + } + :host(:not([narrow])) ha-data-table { + height: calc(100vh - 65px); + display: block; + } + ha-button-menu { + margin-right: 8px; + } + .table-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12); + } + search-input { + margin-left: 16px; + flex-grow: 1; + position: relative; + top: 2px; + } + .search-toolbar search-input { + margin-left: 8px; + top: 1px; + } + .search-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--secondary-text-color); + } + .search-toolbar ha-button-menu { + position: static; + } + .selected-txt { + font-weight: bold; + padding-left: 16px; + } + .table-header .selected-txt { + margin-top: 20px; + } + .search-toolbar .selected-txt { + font-size: 16px; + } + .header-btns > mwc-button, + .header-btns > ha-icon-button { + margin: 8px; + } + .active-filters { + color: var(--primary-text-color); + position: relative; + display: flex; + align-items: center; + padding: 2px 2px 2px 8px; + margin-left: 4px; + font-size: 14px; + } + .active-filters ha-icon { + color: var(--primary-color); + } + .active-filters mwc-button { + margin-left: 8px; + } + .active-filters::before { + background-color: var(--primary-color); + opacity: 0.12; + border-radius: 4px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ""; + } + `, + ]; } } diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 649e6168ae..1857338ac7 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -32,6 +32,7 @@ import { mdiInformation, mdiMathLog, mdiPencil, + mdiNfcVariant, } from "@mdi/js"; declare global { @@ -99,6 +100,15 @@ export const configSections: { [name: string]: PageNavigation[] } = { core: true, }, ], + experimental: [ + { + component: "tags", + path: "/config/tags", + translationKey: "ui.panel.config.tags.caption", + iconPath: mdiNfcVariant, + core: true, + }, + ], lovelace: [ { component: "lovelace", @@ -195,6 +205,13 @@ class HaPanelConfig extends HassRouterPage { /* webpackChunkName: "panel-config-automation" */ "./automation/ha-config-automation" ), }, + tags: { + tag: "ha-config-tags", + load: () => + import( + /* webpackChunkName: "panel-config-tags" */ "./tags/ha-config-tags" + ), + }, cloud: { tag: "ha-config-cloud", load: () => @@ -335,6 +352,13 @@ class HaPanelConfig extends HassRouterPage { /* webpackChunkName: "panel-config-mqtt" */ "./integrations/integration-panels/mqtt/mqtt-config-panel" ), }, + ozw: { + tag: "ozw-config-router", + load: () => + import( + /* webpackChunkName: "panel-config-ozw" */ "./integrations/integration-panels/ozw/ozw-config-router" + ), + }, }, }; diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index b752a5037d..a7320a5e0e 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -6,9 +6,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, query, TemplateResult, } from "lit-element"; @@ -136,7 +136,7 @@ export class DialogHelperDetail extends LitElement { ${!isLoaded ? html` - ${this.hass.localize( "ui.dialogs.helper_settings.platform_not_loaded", "platform", diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts index ddc675821f..0439227315 100644 --- a/src/panels/config/helpers/forms/ha-input_number-form.ts +++ b/src/panels/config/helpers/forms/ha-input_number-form.ts @@ -6,9 +6,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -48,12 +48,12 @@ class HaInputNumberForm extends LitElement { this._max = item.max ?? 100; this._min = item.min ?? 0; this._mode = item.mode || "slider"; - this._step = item.step || 1; + this._step = item.step ?? 1; this._unit_of_measurement = item.unit_of_measurement; } else { this._item = { min: 0, - max: 0, + max: 100, }; this._name = ""; this._icon = ""; @@ -176,8 +176,10 @@ class HaInputNumberForm extends LitElement { return; } ev.stopPropagation(); - const configValue = (ev.target as any).configValue; - const value = ev.detail.value; + const target = ev.target as any; + const configValue = target.configValue; + const value = + target.type === "number" ? Number(ev.detail.value) : ev.detail.value; if (this[`_${configValue}`] === value) { return; } diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index e03b5463ad..fe96b3389e 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -1,3 +1,5 @@ +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-icon-item"; @@ -7,9 +9,9 @@ import { HassEntity } from "home-assistant-js-websocket"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -21,8 +23,8 @@ import { DataTableColumnContainer, RowClickedEvent, } from "../../../components/data-table/ha-data-table"; -import "@material/mwc-fab"; import "../../../components/ha-icon"; +import "../../../components/ha-svg-icon"; import "../../../layouts/hass-loading-screen"; import "../../../layouts/hass-tabs-subpage-data-table"; import { HomeAssistant, Route } from "../../../types"; @@ -30,8 +32,6 @@ import { showEntityEditorDialog } from "../entities/show-dialog-entity-editor"; import { configSections } from "../ha-panel-config"; import { HELPER_DOMAINS } from "./const"; import { showHelperDetailDialog } from "./show-dialog-helper-detail"; -import "../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-config-helpers") export class HaConfigHelpers extends LitElement { @@ -110,7 +110,7 @@ export class HaConfigHelpers extends LitElement { style="display:inline-block; position: relative;" > - + ${this.hass.localize( "ui.panel.config.entities.picker.status.readonly" )} diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index 178b8ca0ae..d527c7868b 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -12,6 +12,7 @@ import "./integrations-card"; import "./system-health-card"; import { configSections } from "../ha-panel-config"; import "../../../layouts/hass-tabs-subpage"; +import { documentationUrl } from "../../../util/documentation-url"; const JS_TYPE = __BUILD__; const JS_VERSION = __VERSION__; @@ -42,7 +43,7 @@ class HaConfigInfo extends LitElement { >

    diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index dd738133f7..99d7f6b266 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -10,12 +10,13 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import memoizeOne from "memoize-one"; import { HASSDomEvent } from "../../../common/dom/fire_event"; import "../../../common/search/search-input"; @@ -32,6 +33,7 @@ import { getConfigEntries, } from "../../../data/config_entries"; import { + ATTENTION_SOURCES, DISCOVERY_SOURCES, getConfigFlowInProgressCollection, ignoreConfigFlow, @@ -355,52 +357,67 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { : ""} ${configEntriesInProgress.length ? configEntriesInProgress.map( - (flow: DataEntryFlowProgressExtended) => html` - -

    - ${this.hass.localize( - "ui.panel.config.integrations.discovered" - )} -
    -
    -
    - + (flow: DataEntryFlowProgressExtended) => { + const attention = ATTENTION_SOURCES.includes( + flow.context.source + ); + return html` + +
    + ${this.hass.localize( + `ui.panel.config.integrations.${ + attention ? "attention" : "discovered" + }` + )}
    -

    - ${flow.localized_title} -

    -
    - - ${this.hass.localize( - "ui.panel.config.integrations.configure" - )} - - ${DISCOVERY_SOURCES.includes(flow.context.source) && - flow.context.unique_id - ? html` - - ${this.hass.localize( - "ui.panel.config.integrations.ignore.ignore" - )} - - ` - : ""} +
    +
    + +
    +

    + ${flow.localized_title} +

    +
    + + ${this.hass.localize( + `ui.panel.config.integrations.${ + attention ? "reconfigure" : "configure" + }` + )} + + ${DISCOVERY_SOURCES.includes(flow.context.source) && + flow.context.unique_id + ? html` + + ${this.hass.localize( + "ui.panel.config.integrations.ignore.ignore" + )} + + ` + : ""} +
    -
    -     - ` + + `; + } ) : ""} ${groupedConfigEntries.size @@ -639,6 +656,18 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { flex-direction: column; justify-content: space-between; } + .attention { + --ha-card-border-color: var(--error-color); + } + .attention .header { + background: var(--error-color); + color: var(--text-primary-color); + padding: 8px; + text-align: center; + } + .attention mwc-button { + --mdc-theme-primary: var(--error-color); + } .discovered { --ha-card-border-color: var(--primary-color); } diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index d88b075a10..a1625c7c2c 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -14,6 +14,7 @@ import { ConfigEntry, updateConfigEntry, deleteConfigEntry, + reloadConfigEntry, } from "../../../data/config_entries"; import { EntityRegistryEntry } from "../../../data/entity_registry"; import { DeviceRegistryEntry } from "../../../data/device_registry"; @@ -28,7 +29,8 @@ import { haStyle } from "../../../resources/styles"; import "../../../components/ha-icon-next"; import { fireEvent } from "../../../common/dom/fire_event"; import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js"; -import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; +import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event"; export interface ConfigEntryUpdatedEvent { entry: ConfigEntry; @@ -55,6 +57,10 @@ const integrationsWithPanel = { buttonLocalizeKey: "ui.panel.config.zha.button", path: "/config/zha/dashboard", }, + ozw: { + buttonLocalizeKey: "ui.panel.config.ozw.button", + path: "/config/ozw/dashboard", + }, zwave: { buttonLocalizeKey: "ui.panel.config.zwave.button", path: "/config/zwave", @@ -131,6 +137,7 @@ export class HaIntegrationCard extends LitElement { private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult { const devices = this._getDevices(item); + const services = this._getServices(item); const entities = this._getEntities(item); return html` @@ -162,7 +169,7 @@ export class HaIntegrationCard extends LitElement {

    ${item.localized_domain_name === item.title ? "" : item.title}

    - ${devices.length || entities.length + ${devices.length || services.length || entities.length ? html`
    ${devices.length @@ -174,10 +181,22 @@ export class HaIntegrationCard extends LitElement { "count", devices.length )}${services.length ? "," : ""} + ` + : ""} + ${services.length + ? html` + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.services", + "count", + services.length + )} ` : ""} - ${devices.length && entities.length + ${(devices.length || services.length) && entities.length ? this.hass.localize("ui.common.and") : ""} ${entities.length @@ -224,7 +243,7 @@ export class HaIntegrationCard extends LitElement { ` : ""}
    - + - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.system_options" )} @@ -255,7 +274,17 @@ export class HaIntegrationCard extends LitElement { `} - + ${item.state === "loaded" && item.supports_unload + ? html` + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.reload" + )} + ` + : ""} + ${this.hass.localize( "ui.panel.config.integrations.config_entry.delete" )} @@ -288,8 +317,21 @@ export class HaIntegrationCard extends LitElement { if (!this.deviceRegistryEntries) { return []; } - return this.deviceRegistryEntries.filter((device) => - device.config_entries.includes(configEntry.entry_id) + return this.deviceRegistryEntries.filter( + (device) => + device.config_entries.includes(configEntry.entry_id) && + device.entry_type !== "service" + ); + } + + private _getServices(configEntry: ConfigEntry): DeviceRegistryEntry[] { + if (!this.deviceRegistryEntries) { + return []; + } + return this.deviceRegistryEntries.filter( + (device) => + device.config_entries.includes(configEntry.entry_id) && + device.entry_type === "service" ); } @@ -305,17 +347,31 @@ export class HaIntegrationCard extends LitElement { showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry); } - private _handleAction(ev: CustomEvent) { - const configEntry = ((ev.target as HTMLElement).closest("ha-card") as any) - .configEntry; - switch (ev.detail.index) { - case 0: - this._showSystemOptions(configEntry); - break; - case 1: - this._removeIntegration(configEntry); - break; + private _handleReload(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; } + this._reloadIntegration( + ((ev.target as HTMLElement).closest("ha-card") as any).configEntry + ); + } + + private _handleDelete(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } + this._removeIntegration( + ((ev.target as HTMLElement).closest("ha-card") as any).configEntry + ); + } + + private _handleSystemOptions(ev: CustomEvent): void { + if (!shouldHandleRequestSelectedEvent(ev)) { + return; + } + this._showSystemOptions( + ((ev.target as HTMLElement).closest("ha-card") as any).configEntry + ); } private _showSystemOptions(configEntry: ConfigEntry) { @@ -349,6 +405,21 @@ export class HaIntegrationCard extends LitElement { }); } + private async _reloadIntegration(configEntry: ConfigEntry) { + const entryId = configEntry.entry_id; + + reloadConfigEntry(this.hass, entryId).then((result) => { + const locale_key = result.require_restart + ? "reload_restart_confirm" + : "reload_confirm"; + showAlertDialog(this, { + text: this.hass.localize( + `ui.panel.config.integrations.config_entry.${locale_key}` + ), + }); + }); + } + private async _editEntryName(ev) { const configEntry = ev.target.closest("ha-card").configEntry; const newName = await showPromptDialog(this, { diff --git a/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts new file mode 100644 index 0000000000..6f86fbc7bc --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts @@ -0,0 +1,272 @@ +import { + CSSResult, + customElement, + html, + LitElement, + property, + internalProperty, + TemplateResult, + PropertyValues, + css, +} from "lit-element"; +import "../../../../../components/ha-code-editor"; +import "../../../../../components/ha-circular-progress"; +import { createCloseHeading } from "../../../../../components/ha-dialog"; +import { haStyleDialog } from "../../../../../resources/styles"; +import { HomeAssistant } from "../../../../../types"; +import { OZWRefreshNodeDialogParams } from "./show-dialog-ozw-refresh-node"; + +import { + fetchOZWNodeMetadata, + OZWDeviceMetaData, + OZWDevice, + nodeQueryStages, +} from "../../../../../data/ozw"; + +@customElement("dialog-ozw-refresh-node") +class DialogOZWRefreshNode extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _node_id?: number; + + @internalProperty() private _ozw_instance = 1; + + @internalProperty() private _nodeMetaData?: OZWDeviceMetaData; + + @internalProperty() private _node?: OZWDevice; + + @internalProperty() private _active = false; + + @internalProperty() private _complete = false; + + private _refreshDevicesTimeoutHandle?: number; + + private _subscribed?: Promise<() => Promise>; + + public disconnectedCallback(): void { + super.disconnectedCallback(); + this._unsubscribe(); + } + + protected updated(changedProperties: PropertyValues): void { + super.update(changedProperties); + if (changedProperties.has("node_id")) { + this._fetchData(); + } + } + + private async _fetchData() { + if (!this._node_id) { + return; + } + const metaDataResponse = await fetchOZWNodeMetadata( + this.hass, + this._ozw_instance, + this._node_id + ); + + this._nodeMetaData = metaDataResponse.metadata; + } + + public async showDialog(params: OZWRefreshNodeDialogParams): Promise { + this._node_id = params.node_id; + this._ozw_instance = params.ozw_instance; + this._fetchData(); + } + + protected render(): TemplateResult { + if (!this._node_id) { + return html``; + } + + return html` + + ${this._complete + ? html` +

    + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.complete" + )} +

    + + ${this.hass.localize("ui.common.close")} + + ` + : html` + ${this._active + ? html` +
    + +
    +

    + + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.refreshing_description" + )} + +

    + ${this._node + ? html` +

    + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.node_status" + )}: + ${this._node.node_query_stage} + (${this.hass.localize( + "ui.panel.config.ozw.refresh_node.step" + )} + ${nodeQueryStages.indexOf( + this._node.node_query_stage + ) + 1}/17) +

    +

    + + ${this.hass.localize( + "ui.panel.config.ozw.node_query_stages." + + this._node.node_query_stage.toLowerCase() + )} +

    + ` + : ``} +
    +
    + ` + : html` + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.description" + )} +

    + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.battery_note" + )} +

    + `} + ${this._nodeMetaData?.WakeupHelp !== "" + ? html` + + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.wakeup_header" + )} + ${this._nodeMetaData!.Name} + +
    + ${this._nodeMetaData!.WakeupHelp} +
    + + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.wakeup_instructions_source" + )} + +
    + ` + : ""} + ${!this._active + ? html` + + ${this.hass.localize( + "ui.panel.config.ozw.refresh_node.start_refresh_button" + )} + + ` + : html``} + `} +     + `; + } + + private _startRefresh(): void { + this._subscribe(); + } + + private _handleMessage(message: any): void { + if (message.type === "node_updated") { + this._node = message; + if (message.node_query_stage === "Complete") { + this._unsubscribe(); + this._complete = true; + } + } + } + + private _unsubscribe(): void { + this._active = false; + if (this._refreshDevicesTimeoutHandle) { + clearTimeout(this._refreshDevicesTimeoutHandle); + } + if (this._subscribed) { + this._subscribed.then((unsub) => unsub()); + this._subscribed = undefined; + } + } + + private _subscribe(): void { + if (!this.hass) { + return; + } + this._active = true; + this._subscribed = this.hass.connection.subscribeMessage( + (message) => this._handleMessage(message), + { + type: "ozw/refresh_node_info", + node_id: this._node_id, + ozw_instance: this._ozw_instance, + } + ); + this._refreshDevicesTimeoutHandle = window.setTimeout( + () => this._unsubscribe(), + 120000 + ); + } + + private _close(): void { + this._complete = false; + this._node_id = undefined; + this._node = undefined; + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + blockquote { + display: block; + background-color: #ddd; + padding: 8px; + margin: 8px 0; + font-size: 0.9em; + } + + blockquote em { + font-size: 0.9em; + margin-top: 6px; + } + + .flex-container { + display: flex; + align-items: center; + } + + .flex-container ha-circular-progress { + margin-right: 20px; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-ozw-refresh-node": DialogOZWRefreshNode; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts new file mode 100644 index 0000000000..478ede0f8e --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts @@ -0,0 +1,224 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-fab"; +import { mdiCheckCircle, mdiCircle, mdiCloseCircle, mdiZWave } from "@mdi/js"; +import "@polymer/paper-item/paper-icon-item"; +import "@polymer/paper-item/paper-item-body"; +import { + css, + CSSResultArray, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import { navigate } from "../../../../../common/navigate"; +import "../../../../../components/ha-card"; +import "../../../../../components/ha-icon-next"; +import { + fetchOZWInstances, + networkOfflineStatuses, + networkOnlineStatuses, + networkStartingStatuses, + OZWInstance, +} from "../../../../../data/ozw"; +import "../../../../../layouts/hass-tabs-subpage"; +import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../../../resources/styles"; +import type { HomeAssistant, Route } from "../../../../../types"; +import "../../../ha-config-section"; + +export const ozwTabs: PageNavigation[] = []; + +@customElement("ozw-config-dashboard") +class OZWConfigDashboard extends LitElement { + @property({ type: Object }) public hass!: HomeAssistant; + + @property({ type: Object }) public route!: Route; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ type: Boolean }) public isWide!: boolean; + + @property() public configEntryId?: string; + + @internalProperty() private _instances: OZWInstance[] = []; + + protected firstUpdated() { + this._fetchData(); + } + + protected render(): TemplateResult { + return html` + + +
    + ${this.hass.localize("ui.panel.config.ozw.select_instance.header")} +
    + +
    + ${this.hass.localize( + "ui.panel.config.ozw.select_instance.introduction" + )} +
    + ${this._instances.length > 0 + ? html` + ${this._instances.map((instance) => { + let status = "unknown"; + let icon = mdiCircle; + if (networkOnlineStatuses.includes(instance.Status)) { + status = "online"; + icon = mdiCheckCircle; + } + if (networkStartingStatuses.includes(instance.Status)) { + status = "starting"; + } + if (networkOfflineStatuses.includes(instance.Status)) { + status = "offline"; + icon = mdiCloseCircle; + } + + return html` + + + + + + + ${this.hass.localize( + "ui.panel.config.ozw.common.instance" + )} + ${instance.ozw_instance} +
    + + ${this.hass.localize( + "ui.panel.config.ozw.network_status." + status + )} + - + ${this.hass.localize( + "ui.panel.config.ozw.network_status.details." + + instance.Status.toLowerCase() + )}
    + ${this.hass.localize( + "ui.panel.config.ozw.common.controller" + )} + : ${instance.getControllerPath}
    + OZWDaemon ${instance.OZWDaemon_Version} (OpenZWave + ${instance.OpenZWave_Version}) +
    +     + +     +     +     + `; + })} + ` + : ""} +     +     + `; + } + + private async _fetchData() { + this._instances = await fetchOZWInstances(this.hass!); + if (this._instances.length === 1) { + navigate( + this, + `/config/ozw/network/${this._instances[0].ozw_instance}`, + true + ); + } + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + ha-card:last-child { + margin-bottom: 24px; + } + ha-config-section { + margin-top: -12px; + } + :host([narrow]) ha-config-section { + margin-top: -20px; + } + ha-card { + overflow: hidden; + } + ha-card a { + text-decoration: none; + color: var(--primary-text-color); + } + paper-item-body { + margin: 16px 0; + } + a { + text-decoration: none; + color: var(--primary-text-color); + position: relative; + display: block; + outline: 0; + } + ha-svg-icon.network-status-icon { + height: 14px; + width: 14px; + } + .online { + color: green; + } + .starting { + color: orange; + } + .offline { + color: red; + } + ha-svg-icon, + ha-icon-next { + color: var(--secondary-text-color); + } + .iron-selected paper-item::before, + a:not(.iron-selected):focus::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + content: ""; + transition: opacity 15ms linear; + will-change: opacity; + } + a:not(.iron-selected):focus::before { + background-color: currentColor; + opacity: var(--dark-divider-opacity); + } + .iron-selected paper-item:focus::before, + .iron-selected:focus paper-item::before { + opacity: 0.2; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-config-dashboard": OZWConfigDashboard; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts new file mode 100644 index 0000000000..804e2073af --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts @@ -0,0 +1,73 @@ +import { customElement, property } from "lit-element"; +import memoizeOne from "memoize-one"; +import { + HassRouterPage, + RouterOptions, +} from "../../../../../layouts/hass-router-page"; +import { HomeAssistant, Route } from "../../../../../types"; + +export const computeTail = memoizeOne((route: Route) => { + const dividerPos = route.path.indexOf("/", 1); + return dividerPos === -1 + ? { + prefix: route.prefix + route.path, + path: "", + } + : { + prefix: route.prefix + route.path.substr(0, dividerPos), + path: route.path.substr(dividerPos), + }; +}); + +@customElement("ozw-config-router") +class OZWConfigRouter extends HassRouterPage { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public isWide!: boolean; + + @property() public narrow!: boolean; + + private _configEntry = new URLSearchParams(window.location.search).get( + "config_entry" + ); + + protected routerOptions: RouterOptions = { + defaultPage: "dashboard", + showLoading: true, + routes: { + dashboard: { + tag: "ozw-config-dashboard", + load: () => + import( + /* webpackChunkName: "ozw-config-dashboard" */ "./ozw-config-dashboard" + ), + }, + network: { + tag: "ozw-network-router", + load: () => + import( + /* webpackChunkName: "ozw-network-router" */ "./ozw-network-router" + ), + }, + }, + }; + + protected updatePageEl(el): void { + el.route = this.routeTail; + el.hass = this.hass; + el.isWide = this.isWide; + el.narrow = this.narrow; + el.configEntryId = this._configEntry; + if (this._currentPage === "network") { + const path = this.routeTail.path.split("/"); + el.ozwInstance = path[1]; + el.route = computeTail(this.routeTail); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-config-router": OZWConfigRouter; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts new file mode 100644 index 0000000000..013f2b794b --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts @@ -0,0 +1,254 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-fab"; +import { mdiCheckCircle, mdiCircle, mdiCloseCircle } from "@mdi/js"; +import { + css, + CSSResultArray, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { navigate } from "../../../../../common/navigate"; +import "../../../../../components/buttons/ha-call-service-button"; +import "../../../../../components/ha-card"; +import "../../../../../components/ha-icon-next"; +import { + fetchOZWNetworkStatistics, + fetchOZWNetworkStatus, + networkOfflineStatuses, + networkOnlineStatuses, + networkStartingStatuses, + OZWInstance, + OZWNetworkStatistics, +} from "../../../../../data/ozw"; +import "../../../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../../../resources/styles"; +import type { HomeAssistant, Route } from "../../../../../types"; +import "../../../ha-config-section"; +import { ozwNetworkTabs } from "./ozw-network-router"; + +@customElement("ozw-network-dashboard") +class OZWNetworkDashboard extends LitElement { + @property({ type: Object }) public hass!: HomeAssistant; + + @property({ type: Object }) public route!: Route; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ type: Boolean }) public isWide!: boolean; + + @property() public configEntryId?: string; + + @property() public ozwInstance?: number; + + @internalProperty() private _network?: OZWInstance; + + @internalProperty() private _statistics?: OZWNetworkStatistics; + + @internalProperty() private _status = "unknown"; + + @internalProperty() private _icon = mdiCircle; + + protected firstUpdated() { + if (!this.ozwInstance) { + navigate(this, "/config/ozw/dashboard", true); + } else if (this.hass) { + this._fetchData(); + } + } + + protected render(): TemplateResult { + return html` + + +
    + ${this.hass.localize("ui.panel.config.ozw.network.header")} +
    + +
    + ${this.hass.localize("ui.panel.config.ozw.network.introduction")} +
    + ${this._network + ? html` + +
    +
    + + ${this.hass.localize( + "ui.panel.config.ozw.common.network" + )} + ${this.hass.localize( + `ui.panel.config.ozw.network_status.${this._status}` + )} +
    + + ${this.hass.localize( + `ui.panel.config.ozw.network_status.details.${this._network.Status.toLowerCase()}` + )} + +
    +
    + ${this.hass.localize( + "ui.panel.config.ozw.common.ozw_instance" + )} + ${this._network.ozw_instance} + ${this._statistics + ? html` + • + ${this.hass.localize( + "ui.panel.config.ozw.network.node_count", + "count", + this._statistics.node_count + )} + ` + : ``} +
    + ${this.hass.localize( + "ui.panel.config.ozw.common.controller" + )}: + ${this._network.getControllerPath}
    + OZWDaemon ${this._network.OZWDaemon_Version} (OpenZWave + ${this._network.OpenZWave_Version}) +
    +
    +
    + ${this._generateServiceButton("add_node")} + ${this._generateServiceButton("remove_node")} +
    +     + ` + : ``} +     +     + `; + } + + private async _fetchData() { + if (!this.ozwInstance) return; + this._network = await fetchOZWNetworkStatus(this.hass!, this.ozwInstance); + this._statistics = await fetchOZWNetworkStatistics( + this.hass!, + this.ozwInstance + ); + if (networkOnlineStatuses.includes(this._network!.Status)) { + this._status = "online"; + this._icon = mdiCheckCircle; + } + if (networkStartingStatuses.includes(this._network!.Status)) { + this._status = "starting"; + } + if (networkOfflineStatuses.includes(this._network!.Status)) { + this._status = "offline"; + this._icon = mdiCloseCircle; + } + } + + private _generateServiceButton(service: string) { + const serviceData = { instance_id: this.ozwInstance }; + return html` + + ${this.hass!.localize(`ui.panel.config.ozw.services.${service}`)} + + `; + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + .secondary { + color: var(--secondary-text-color); + } + .online { + color: green; + } + .starting { + color: orange; + } + .offline { + color: red; + } + .content { + margin-top: 24px; + } + + .sectionHeader { + position: relative; + padding-right: 40px; + } + + .network-status { + text-align: center; + } + + .network-status div.details { + font-size: 1.5rem; + margin-bottom: 16px; + } + + .network-status ha-svg-icon { + display: block; + margin: 0px auto 16px; + width: 48px; + height: 48px; + } + + .network-status small { + font-size: 1rem; + } + + ha-card { + margin: 0 auto; + max-width: 600px; + } + + .card-actions.warning ha-call-service-button { + color: var(--error-color); + } + + .toggle-help-icon { + position: absolute; + top: -6px; + right: 0; + color: var(--primary-color); + } + + ha-service-description { + display: block; + color: grey; + padding: 0 8px 12px; + } + + [hidden] { + display: none; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-network-dashboard": OZWNetworkDashboard; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts new file mode 100644 index 0000000000..f492cf579f --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts @@ -0,0 +1,143 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-fab"; +import { mdiAlert, mdiCheck } from "@mdi/js"; +import { + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import memoizeOne from "memoize-one"; +import { HASSDomEvent } from "../../../../../common/dom/fire_event"; +import { navigate } from "../../../../../common/navigate"; +import "../../../../../components/buttons/ha-call-service-button"; +import { + DataTableColumnContainer, + RowClickedEvent, +} from "../../../../../components/data-table/ha-data-table"; +import "../../../../../components/ha-card"; +import "../../../../../components/ha-icon-next"; +import { fetchOZWNodes, OZWDevice } from "../../../../../data/ozw"; +import "../../../../../layouts/hass-tabs-subpage"; +import "../../../../../layouts/hass-tabs-subpage-data-table"; +import { haStyle } from "../../../../../resources/styles"; +import type { HomeAssistant, Route } from "../../../../../types"; +import "../../../ha-config-section"; +import { ozwNetworkTabs } from "./ozw-network-router"; + +export interface NodeRowData extends OZWDevice { + node?: NodeRowData; + id?: number; +} + +@customElement("ozw-network-nodes") +class OZWNetworkNodes extends LitElement { + @property({ type: Object }) public hass!: HomeAssistant; + + @property({ type: Object }) public route!: Route; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ type: Boolean }) public isWide!: boolean; + + @property() public configEntryId?: string; + + @property() public ozwInstance = 0; + + @internalProperty() private _nodes: OZWDevice[] = []; + + private _columns = memoizeOne( + (narrow: boolean): DataTableColumnContainer => { + return { + node_id: { + title: this.hass.localize("ui.panel.config.ozw.nodes_table.id"), + sortable: true, + type: "numeric", + width: "72px", + filterable: true, + direction: "asc", + }, + node_product_name: { + title: this.hass.localize("ui.panel.config.ozw.nodes_table.model"), + sortable: true, + width: narrow ? "75%" : "25%", + }, + node_manufacturer_name: { + title: this.hass.localize( + "ui.panel.config.ozw.nodes_table.manufacturer" + ), + sortable: true, + hidden: narrow, + width: "25%", + }, + node_query_stage: { + title: this.hass.localize( + "ui.panel.config.ozw.nodes_table.query_stage" + ), + sortable: true, + width: narrow ? "25%" : "15%", + }, + is_zwave_plus: { + title: this.hass.localize( + "ui.panel.config.ozw.nodes_table.zwave_plus" + ), + hidden: narrow, + template: (value: boolean) => + value ? html` ` : "", + }, + is_failed: { + title: this.hass.localize("ui.panel.config.ozw.nodes_table.failed"), + hidden: narrow, + template: (value: boolean) => + value ? html` ` : "", + }, + }; + } + ); + + protected firstUpdated() { + if (!this.ozwInstance) { + navigate(this, "/config/ozw/dashboard", true); + } else if (this.hass) { + this._fetchData(); + } + } + + protected render(): TemplateResult { + return html` + + + `; + } + + private async _fetchData() { + this._nodes = await fetchOZWNodes(this.hass!, this.ozwInstance!); + } + + private _handleRowClicked(ev: HASSDomEvent) { + const nodeId = ev.detail.id; + navigate(this, `/config/ozw/network/${this.ozwInstance}/node/${nodeId}`); + } + + static get styles(): CSSResult { + return haStyle; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-network-nodes": OZWNetworkNodes; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts new file mode 100644 index 0000000000..f98660bed0 --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts @@ -0,0 +1,83 @@ +import { customElement, property } from "lit-element"; +import { + HassRouterPage, + RouterOptions, +} from "../../../../../layouts/hass-router-page"; +import { HomeAssistant } from "../../../../../types"; +import { computeTail } from "./ozw-config-router"; +import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage"; +import { mdiServerNetwork, mdiNetwork } from "@mdi/js"; + +export const ozwNetworkTabs = (instance: number): PageNavigation[] => { + return [ + { + translationKey: "ui.panel.config.ozw.navigation.network", + path: `/config/ozw/network/${instance}/dashboard`, + iconPath: mdiServerNetwork, + }, + { + translationKey: "ui.panel.config.ozw.navigation.nodes", + path: `/config/ozw/network/${instance}/nodes`, + iconPath: mdiNetwork, + }, + ]; +}; + +@customElement("ozw-network-router") +class OZWNetworkRouter extends HassRouterPage { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public isWide!: boolean; + + @property() public narrow!: boolean; + + @property() public ozwInstance!: number; + + private _configEntry = new URLSearchParams(window.location.search).get( + "config_entry" + ); + + protected routerOptions: RouterOptions = { + defaultPage: "dashboard", + showLoading: true, + routes: { + dashboard: { + tag: "ozw-network-dashboard", + load: () => + import( + /* webpackChunkName: "ozw-network-dashboard" */ "./ozw-network-dashboard" + ), + }, + nodes: { + tag: "ozw-network-nodes", + load: () => + import( + /* webpackChunkName: "ozw-network-nodes" */ "./ozw-network-nodes" + ), + }, + node: { + tag: "ozw-node-router", + load: () => + import(/* webpackChunkName: "ozw-node-router" */ "./ozw-node-router"), + }, + }, + }; + + protected updatePageEl(el): void { + el.route = computeTail(this.routeTail); + el.hass = this.hass; + el.isWide = this.isWide; + el.narrow = this.narrow; + el.configEntryId = this._configEntry; + el.ozwInstance = this.ozwInstance; + if (this._currentPage === "node") { + el.nodeId = this.routeTail.path.split("/")[1]; + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-network-router": OZWNetworkRouter; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts new file mode 100644 index 0000000000..bd2fa6af3e --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts @@ -0,0 +1,231 @@ +import "@material/mwc-button/mwc-button"; +import "@material/mwc-fab"; +import { + css, + CSSResultArray, + customElement, + html, + LitElement, + internalProperty, + property, + TemplateResult, +} from "lit-element"; +import { navigate } from "../../../../../common/navigate"; +import "../../../../../components/buttons/ha-call-service-button"; +import "../../../../../components/ha-card"; +import "../../../../../components/ha-icon-next"; +import "../../../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../../../resources/styles"; +import type { HomeAssistant, Route } from "../../../../../types"; +import "../../../ha-config-section"; +import { + fetchOZWNodeStatus, + fetchOZWNodeMetadata, + OZWDevice, + OZWDeviceMetaDataResponse, +} from "../../../../../data/ozw"; +import { ERR_NOT_FOUND } from "../../../../../data/websocket_api"; +import { showOZWRefreshNodeDialog } from "./show-dialog-ozw-refresh-node"; +import { ozwNetworkTabs } from "./ozw-network-router"; + +@customElement("ozw-node-dashboard") +class OZWNodeDashboard extends LitElement { + @property({ type: Object }) public hass!: HomeAssistant; + + @property({ type: Object }) public route!: Route; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ type: Boolean }) public isWide!: boolean; + + @property() public configEntryId?: string; + + @property() public ozwInstance?; + + @property() public nodeId?; + + @internalProperty() private _node?: OZWDevice; + + @internalProperty() private _metadata?: OZWDeviceMetaDataResponse; + + @internalProperty() private _not_found = false; + + protected firstUpdated() { + if (!this.ozwInstance) { + navigate(this, "/config/ozw/dashboard", true); + } else if (!this.nodeId) { + navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true); + } else if (this.hass) { + this._fetchData(); + } + } + + protected render(): TemplateResult { + if (this._not_found) { + return html` + + `; + } + + return html` + + +
    + Node Management +
    + +
    + View the status of a node and manage its configuration. +
    + ${this._node + ? html` + +
    + ${this._node.node_manufacturer_name} + ${this._node.node_product_name}
    + Node ID: ${this._node.node_id}
    + Query Stage: ${this._node.node_query_stage} + ${this._metadata?.metadata.ProductManualURL + ? html` +

    Product Manual

    +     ` + : ``} +
    +
    + + Refresh Node + +
    +     + + ${this._metadata + ? html` + +
    + ${this._metadata.metadata.Description} +
    +     + +
    + ${this._metadata.metadata.InclusionHelp} +
    +     + +
    + ${this._metadata.metadata.ExclusionHelp} +
    +     + +
    + ${this._metadata.metadata.ResetHelp} +
    +     + +
    + ${this._metadata.metadata.WakeupHelp} +
    +     + ` + : ``} + ` + : ``} +     +     + `; + } + + private async _fetchData() { + if (!this.ozwInstance || !this.nodeId) { + return; + } + + try { + this._node = await fetchOZWNodeStatus( + this.hass!, + this.ozwInstance, + this.nodeId + ); + this._metadata = await fetchOZWNodeMetadata( + this.hass!, + this.ozwInstance, + this.nodeId + ); + } catch (err) { + if (err.code === ERR_NOT_FOUND) { + this._not_found = true; + return; + } + throw err; + } + } + + private async _refreshNodeClicked() { + showOZWRefreshNodeDialog(this, { + node_id: this.nodeId, + ozw_instance: this.ozwInstance, + }); + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + .secondary { + color: var(--secondary-text-color); + } + + .content { + margin-top: 24px; + } + + .sectionHeader { + position: relative; + padding-right: 40px; + } + + ha-card { + margin: 0 auto; + max-width: 600px; + } + + .card-actions.warning ha-call-service-button { + color: var(--error-color); + } + + .toggle-help-icon { + position: absolute; + top: -6px; + right: 0; + color: var(--primary-color); + } + + ha-service-description { + display: block; + color: grey; + padding: 0 8px 12px; + } + + [hidden] { + display: none; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-node-dashboard": OZWNodeDashboard; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts new file mode 100644 index 0000000000..baf68ddc96 --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts @@ -0,0 +1,66 @@ +import { customElement, property } from "lit-element"; +import { navigate } from "../../../../../common/navigate"; +import { + HassRouterPage, + RouterOptions, +} from "../../../../../layouts/hass-router-page"; +import { HomeAssistant } from "../../../../../types"; + +@customElement("ozw-node-router") +class OZWNodeRouter extends HassRouterPage { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public isWide!: boolean; + + @property() public narrow!: boolean; + + @property() public ozwInstance!: number; + + @property() public nodeId!: number; + + private _configEntry = new URLSearchParams(window.location.search).get( + "config_entry" + ); + + protected routerOptions: RouterOptions = { + defaultPage: "dashboard", + showLoading: true, + routes: { + dashboard: { + tag: "ozw-node-dashboard", + load: () => + import( + /* webpackChunkName: "ozw-node-dashboard" */ "./ozw-node-dashboard" + ), + }, + }, + }; + + protected updatePageEl(el): void { + el.route = this.routeTail; + el.hass = this.hass; + el.isWide = this.isWide; + el.narrow = this.narrow; + el.configEntryId = this._configEntry; + el.ozwInstance = this.ozwInstance; + el.nodeId = this.nodeId; + + const searchParams = new URLSearchParams(window.location.search); + if (this._configEntry && !searchParams.has("config_entry")) { + searchParams.append("config_entry", this._configEntry); + navigate( + this, + `${this.routeTail.prefix}${ + this.routeTail.path + }?${searchParams.toString()}`, + true + ); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "ozw-node-router": OZWNodeRouter; + } +} diff --git a/src/panels/config/integrations/integration-panels/ozw/show-dialog-ozw-refresh-node.ts b/src/panels/config/integrations/integration-panels/ozw/show-dialog-ozw-refresh-node.ts new file mode 100644 index 0000000000..0c956f9ffe --- /dev/null +++ b/src/panels/config/integrations/integration-panels/ozw/show-dialog-ozw-refresh-node.ts @@ -0,0 +1,22 @@ +import { fireEvent } from "../../../../../common/dom/fire_event"; + +export interface OZWRefreshNodeDialogParams { + ozw_instance: number; + node_id: number; +} + +export const loadRefreshNodeDialog = () => + import( + /* webpackChunkName: "dialog-ozw-refresh-node" */ "./dialog-ozw-refresh-node" + ); + +export const showOZWRefreshNodeDialog = ( + element: HTMLElement, + refreshNodeDialogParams: OZWRefreshNodeDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-ozw-refresh-node", + dialogImport: loadRefreshNodeDialog, + dialogParams: refreshNodeDialogParams, + }); +}; diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts index 7d220ba93c..b9860c0589 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts @@ -1,20 +1,20 @@ -import "../../../../../components/ha-icon-button"; -import "../../../../../components/ha-circular-progress"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import "../../../../../components/buttons/ha-call-api-button"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-circular-progress"; import "../../../../../components/ha-icon"; +import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-service-description"; import { fetchNetworkStatus, @@ -26,6 +26,7 @@ import { } from "../../../../../data/zwave"; import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant } from "../../../../../types"; +import { documentationUrl } from "../../../../../util/documentation-url"; import "../../../ha-config-section"; @customElement("zwave-network") @@ -71,7 +72,10 @@ export class ZwaveNetwork extends LitElement { )}

    diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index ad5f28c648..7771c5e3fb 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -1,14 +1,21 @@ +import "@material/mwc-icon-button/mwc-icon-button"; +import { mdiContentCopy } from "@mdi/js"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; +import "@polymer/paper-tooltip/paper-tooltip"; +import type { PaperTooltipElement } from "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, + query, TemplateResult, } from "lit-element"; +import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/dialog/ha-paper-dialog"; +import "../../../components/ha-svg-icon"; import { domainToName, fetchIntegrationManifest, @@ -16,12 +23,11 @@ import { IntegrationManifest, } from "../../../data/integration"; import { getLoggedErrorIntegration } from "../../../data/system_log"; -import { PolymerChangedEvent } from "../../../polymer-types"; +import type { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; -import { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail"; +import type { HomeAssistant } from "../../../types"; +import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail"; import { formatSystemLogTime } from "./util"; -import { fireEvent } from "../../../common/dom/fire_event"; class DialogSystemLogDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -30,6 +36,8 @@ class DialogSystemLogDetail extends LitElement { @internalProperty() private _manifest?: IntegrationManifest; + @query("paper-tooltip") private _toolTip?: PaperTooltipElement; + public async showDialog(params: SystemLogDetailDialogParams): Promise { this._params = params; this._manifest = undefined; @@ -66,13 +74,26 @@ class DialogSystemLogDetail extends LitElement { opened @opened-changed="${this._openedChanged}" > -

    - ${this.hass.localize( - "ui.panel.config.logs.details", - "level", - item.level - )} -

    +
    +

    + ${this.hass.localize( + "ui.panel.config.logs.details", + "level", + item.level + )} +

    + + + + ${this.hass.localize("ui.common.copied")} +

    Logger: ${item.name}
    @@ -148,6 +169,25 @@ class DialogSystemLogDetail extends LitElement { } } + private _copyLog(): void { + const copyElement = this.shadowRoot?.querySelector( + "paper-dialog-scrollable" + ) as HTMLElement; + + const selection = window.getSelection()!; + const range = document.createRange(); + + range.selectNodeContents(copyElement); + selection.removeAllRanges(); + selection.addRange(range); + + document.execCommand("copy"); + window.getSelection()!.removeAllRanges(); + + this._toolTip!.show(); + setTimeout(() => this._toolTip?.hide(), 3000); + } + static get styles(): CSSResult[] { return [ haStyleDialog, @@ -164,6 +204,15 @@ class DialogSystemLogDetail extends LitElement { pre { margin-bottom: 0; } + .heading { + display: flex; + display: flex; + align-items: center; + justify-content: space-between; + } + .heading ha-svg-icon { + cursor: pointer; + } `, ]; } diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 2edb4d0b8e..90205aa8a7 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -1,11 +1,12 @@ import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -18,6 +19,7 @@ import { } from "../../../../components/data-table/ha-data-table"; import "../../../../components/ha-icon"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-svg-icon"; import { createDashboard, deleteDashboard, @@ -33,8 +35,6 @@ import "../../../../layouts/hass-tabs-subpage-data-table"; import { HomeAssistant, Route } from "../../../../types"; import { lovelaceTabs } from "../ha-config-lovelace"; import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail"; -import "../../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-config-lovelace-dashboards") export class HaConfigLovelaceDashboards extends LitElement { @@ -76,7 +76,7 @@ export class HaConfigLovelaceDashboards extends LitElement { style="padding-left: 10px;" icon="hass:check-circle-outline" > - + ${this.hass.localize( `ui.panel.config.lovelace.dashboards.default_dashboard` )} diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index 0bfb4d68ca..5d35134956 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts @@ -1,15 +1,15 @@ +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-listbox/paper-listbox"; -import "@polymer/paper-tooltip/paper-tooltip"; -import "@material/mwc-fab"; import { customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -20,6 +20,7 @@ import { RowClickedEvent, } from "../../../../components/data-table/ha-data-table"; import "../../../../components/ha-icon"; +import "../../../../components/ha-svg-icon"; import { createResource, deleteResource, @@ -37,8 +38,6 @@ import { HomeAssistant, Route } from "../../../../types"; import { loadLovelaceResources } from "../../../lovelace/common/load-resources"; import { lovelaceTabs } from "../ha-config-lovelace"; import { showResourceDetailDialog } from "./show-dialog-lovelace-resource-detail"; -import "../../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-config-lovelace-resources") export class HaConfigLovelaceRescources extends LitElement { diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index b146cf4074..043d407607 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -4,23 +4,34 @@ import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; import "../../../components/entity/ha-entities-picker"; import { createCloseHeading } from "../../../components/ha-dialog"; +import "../../../components/ha-picture-upload"; +import type { HaPictureUpload } from "../../../components/ha-picture-upload"; import "../../../components/user/ha-user-picker"; import { PersonMutableParams } from "../../../data/person"; +import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; +import { documentationUrl } from "../../../util/documentation-url"; import { PersonDetailDialogParams } from "./show-dialog-person-detail"; const includeDomains = ["device_tracker"]; +const cropOptions: CropOptions = { + round: true, + type: "image/jpeg", + quality: 0.75, + aspectRatio: 1, +}; + class DialogPersonDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -30,6 +41,8 @@ class DialogPersonDetail extends LitElement { @internalProperty() private _deviceTrackers!: string[]; + @internalProperty() private _picture!: string | null; + @internalProperty() private _error?: string; @internalProperty() private _params?: PersonDetailDialogParams; @@ -50,10 +63,12 @@ class DialogPersonDetail extends LitElement { this._name = this._params.entry.name || ""; this._userId = this._params.entry.user_id || undefined; this._deviceTrackers = this._params.entry.device_trackers || []; + this._picture = this._params.entry.picture || null; } else { this._name = ""; this._userId = undefined; this._deviceTrackers = []; + this._picture = null; } await this.updateComplete; } @@ -66,7 +81,7 @@ class DialogPersonDetail extends LitElement { return html` + +

  • ${this.hass!.localize( @@ -197,6 +223,11 @@ class DialogPersonDetail extends LitElement { this._deviceTrackers = ev.detail.value; } + private _pictureChanged(ev: PolymerChangedEvent) { + this._error = undefined; + this._picture = (ev.target as HaPictureUpload).value; + } + private async _updateEntry() { this._submitting = true; try { @@ -204,6 +235,7 @@ class DialogPersonDetail extends LitElement { name: this._name.trim(), device_trackers: this._deviceTrackers, user_id: this._userId || null, + picture: this._picture, }; if (this._params!.entry) { await this._params!.updateEntry(values); @@ -240,6 +272,9 @@ class DialogPersonDetail extends LitElement { .form { padding-bottom: 24px; } + ha-picture-upload { + display: block; + } ha-user-picker { margin-top: 16px; } diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 94934fe200..3d1de87bd0 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,17 +1,19 @@ -import "@polymer/paper-item/paper-item"; +import { mdiPlus } from "@mdi/js"; +import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, CSSResult, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; import { compare } from "../../../common/string/compare"; import "../../../components/ha-card"; -import "@material/mwc-fab"; +import "../../../components/ha-svg-icon"; +import "../../../components/user/ha-person-badge"; import { createPerson, deletePerson, @@ -30,8 +32,6 @@ import { loadPersonDetailDialog, showPersonDetailDialog, } from "./show-dialog-person-detail"; -import "../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; class HaConfigPerson extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @@ -84,11 +84,15 @@ class HaConfigPerson extends LitElement { ${this._storageItems.map((entry) => { return html` - + + ${entry.name} - + `; })} ${this._storageItems.length === 0 @@ -111,11 +115,15 @@ class HaConfigPerson extends LitElement { ${this._configItems.map((entry) => { return html` - + + ${entry.name} - + `; })} @@ -232,11 +240,11 @@ class HaConfigPerson extends LitElement { text-align: center; padding: 8px; } - paper-item { + paper-icon-item { padding-top: 4px; padding-bottom: 4px; } - ha-card.storage paper-item { + ha-card.storage paper-icon-item { cursor: pointer; } `; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index f2835f405b..fcea68d01a 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -1,4 +1,5 @@ -import "../../../components/ha-icon-button"; +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, @@ -13,20 +14,20 @@ import { ifDefined } from "lit-html/directives/if-defined"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import { stateIcon } from "../../../common/entity/state_icon"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; -import "@material/mwc-fab"; +import "../../../components/ha-icon"; +import "../../../components/ha-icon-button"; +import "../../../components/ha-svg-icon"; import { forwardHaptic } from "../../../data/haptics"; import { activateScene, SceneEntity } from "../../../data/scene"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/hass-tabs-subpage-data-table"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; +import { documentationUrl } from "../../../util/documentation-url"; import { showToast } from "../../../util/toast"; import { configSections } from "../ha-panel-config"; -import "../../../components/ha-icon"; -import "../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; -import { stateIcon } from "../../../common/entity/state_icon"; @customElement("ha-scene-dashboard") class HaSceneDashboard extends LitElement { @@ -117,7 +118,7 @@ class HaSceneDashboard extends LitElement { ${!scene.attributes.id ? html` - + ${this.hass.localize( "ui.panel.config.scene.picker.only_editable" )} @@ -191,7 +192,7 @@ class HaSceneDashboard extends LitElement { ${this.hass.localize("ui.panel.config.scene.picker.introduction")}

    diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 77bec1b7db..73f0e29ce3 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -198,6 +198,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { ? "" : html` ${this.hass.localize( @@ -192,6 +199,24 @@ export class HaScriptEditor extends LitElement { ` : html``}

    • + ${this.scriptEntityId + ? html` +
    + + + ${this.hass.localize("ui.card.script.execute")} + +
    + ` + : ``} @@ -208,7 +233,7 @@ export class HaScriptEditor extends LitElement { )}

    @@ -300,6 +325,18 @@ export class HaScriptEditor extends LitElement { } } + private async _runScript(ev) { + ev.stopPropagation(); + await triggerScript(this.hass, this.scriptEntityId); + showToast(this, { + message: this.hass.localize( + "ui.notification_toast.triggered", + "name", + this._config!.alias + ), + }); + } + private _modeChanged(ev: CustomEvent) { const mode = ((ev.target as PaperListboxElement)?.selectedItem as any) ?.mode; diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 99b6dce17e..d7b713596c 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -25,6 +25,7 @@ import { configSections } from "../ha-panel-config"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; import { stateIcon } from "../../../common/entity/state_icon"; +import { documentationUrl } from "../../../util/documentation-url"; @customElement("ha-script-picker") class HaScriptPicker extends LitElement { @@ -187,7 +188,7 @@ class HaScriptPicker extends LitElement { ${this.hass.localize("ui.panel.config.script.picker.introduction")}

    diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts index a08b26f072..62622baeab 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -1,41 +1,27 @@ +import "@material/mwc-button"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "../../../layouts/hass-tabs-subpage"; -import { configSections } from "../ha-panel-config"; +import "@polymer/paper-input/paper-input"; import { - LitElement, - property, - internalProperty, - customElement, - html, css, CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, TemplateResult, } from "lit-element"; -import { HomeAssistant, Route } from "../../../types"; - -import "@material/mwc-button"; -import "@polymer/paper-input/paper-input"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { componentsWithService } from "../../../common/config/components_with_service"; import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-card"; -import "../ha-config-section"; -import { haStyle } from "../../../resources/styles"; import { checkCoreConfig } from "../../../data/core"; - -const reloadableDomains = [ - "group", - "automation", - "script", - "scene", - "person", - "zone", - "input_boolean", - "input_text", - "input_number", - "input_datetime", - "input_select", -]; +import { domainToName } from "../../../data/integration"; +import "../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant, Route } from "../../../types"; +import "../ha-config-section"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-server-control") export class HaConfigServerControl extends LitElement { @@ -51,10 +37,25 @@ export class HaConfigServerControl extends LitElement { @internalProperty() private _validating = false; + @internalProperty() private _reloadableDomains: string[] = []; + private _validateLog = ""; private _isValid: boolean | null = null; + protected updated(changedProperties) { + const oldHass = changedProperties.get("hass"); + if ( + changedProperties.has("hass") && + (!oldHass || oldHass.config.components !== this.hass.config.components) + ) { + this._reloadableDomains = componentsWithService( + this.hass, + "reload" + ).sort(); + } + } + protected render(): TemplateResult { return html`

    - ${reloadableDomains.map((domain) => - isComponentLoaded(this.hass, domain) - ? html`
    - ${this.hass.localize( - `ui.panel.config.server_control.section.reloading.${domain}` - )} - -
    ` - : "" + ${this._reloadableDomains.map( + (domain) => + html`
    + ${this.hass.localize( + `ui.panel.config.server_control.section.reloading.${domain}` + ) || + this.hass.localize( + "ui.panel.config.server_control.section.reloading.reload", + "domain", + domainToName(this.hass.localize, domain) + )} + +
    ` )} ` @@ -268,6 +273,10 @@ export class HaConfigServerControl extends LitElement { white-space: pre-wrap; direction: ltr; } + + ha-config-section { + padding-bottom: 24px; + } `, ]; } diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts new file mode 100644 index 0000000000..d34ed4e206 --- /dev/null +++ b/src/panels/config/tags/dialog-tag-detail.ts @@ -0,0 +1,210 @@ +import "@material/mwc-button"; +import "@polymer/paper-input/paper-input"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import { fireEvent } from "../../../common/dom/fire_event"; +import { createCloseHeading } from "../../../components/ha-dialog"; +import "../../../components/ha-formfield"; +import "../../../components/ha-switch"; +import "../../../components/map/ha-location-editor"; +import { Tag, UpdateTagParams } from "../../../data/tag"; +import { HassDialog } from "../../../dialogs/make-dialog-manager"; +import { haStyleDialog } from "../../../resources/styles"; +import { HomeAssistant } from "../../../types"; +import { TagDetailDialogParams } from "./show-dialog-tag-detail"; + +@customElement("dialog-tag-detail") +class DialogTagDetail extends LitElement implements HassDialog { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _id?: string; + + @internalProperty() private _name!: string; + + @internalProperty() private _error?: string; + + @internalProperty() private _params?: TagDetailDialogParams; + + @internalProperty() private _submitting = false; + + public showDialog(params: TagDetailDialogParams): void { + this._params = params; + this._error = undefined; + if (this._params.entry) { + this._name = this._params.entry.name || ""; + } else { + this._id = ""; + this._name = ""; + } + } + + public closeDialog(): void { + this._params = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + + protected render(): TemplateResult { + if (!this._params) { + return html``; + } + + return html` + +
    + ${this._error ? html`
    ${this._error}
    ` : ""} +
    + ${this._params.entry + ? html`${this.hass!.localize( + "ui.panel.config.tags.detail.tag_id" + )}: + ${this._params.entry.id}` + : ""} + + ${!this._params.entry + ? html` ` + : ""} +
    +
    + ${this._params.entry + ? html` + + ${this.hass!.localize("ui.panel.config.tags.detail.delete")} + + ` + : html``} + + ${this._params.entry + ? this.hass!.localize("ui.panel.config.tags.detail.update") + : this.hass!.localize("ui.panel.config.tags.detail.create")} + + ${this._params.openWrite && !this._params.entry + ? html` + ${this.hass!.localize( + "ui.panel.config.tags.detail.create_and_write" + )} + ` + : ""} +     + `; + } + + private _valueChanged(ev: CustomEvent) { + const configValue = (ev.target as any).configValue; + + this._error = undefined; + this[`_${configValue}`] = ev.detail.value; + } + + private async _updateEntry() { + this._submitting = true; + let newValue: Tag | undefined; + try { + const values: UpdateTagParams = { + name: this._name.trim(), + }; + if (this._params!.entry) { + newValue = await this._params!.updateEntry!(values); + } else { + newValue = await this._params!.createEntry(values, this._id); + } + this.closeDialog(); + } catch (err) { + this._error = err ? err.message : "Unknown error"; + } finally { + this._submitting = false; + } + return newValue; + } + + private async _updateWriteEntry() { + const openWrite = this._params?.openWrite; + const tag = await this._updateEntry(); + if (!tag || !openWrite) { + return; + } + openWrite(tag); + } + + private async _deleteEntry() { + this._submitting = true; + try { + if (await this._params!.removeEntry!()) { + this._params = undefined; + } + } finally { + this._submitting = false; + } + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + a { + color: var(--primary-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-tag-detail": DialogTagDetail; + } +} diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts new file mode 100644 index 0000000000..a0dd7e32b8 --- /dev/null +++ b/src/panels/config/tags/ha-config-tags.ts @@ -0,0 +1,293 @@ +import "@material/mwc-fab"; +import { mdiCog, mdiContentDuplicate, mdiPlus, mdiRobot } from "@mdi/js"; +import { + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, +} from "lit-element"; +import memoizeOne from "memoize-one"; +import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; +import "../../../components/ha-card"; +import "../../../components/ha-relative-time"; +import { showAutomationEditor, TagTrigger } from "../../../data/automation"; +import { + createTag, + deleteTag, + EVENT_TAG_SCANNED, + fetchTags, + Tag, + TagScannedEvent, + updateTag, + UpdateTagParams, +} from "../../../data/tag"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; +import { getExternalConfig } from "../../../external_app/external_config"; +import "../../../layouts/hass-tabs-subpage-data-table"; +import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; +import { HomeAssistant, Route } from "../../../types"; +import { configSections } from "../ha-panel-config"; +import { showTagDetailDialog } from "./show-dialog-tag-detail"; +import "./tag-image"; + +export interface TagRowData extends Tag { + last_scanned_datetime: Date | null; +} + +@customElement("ha-config-tags") +export class HaConfigTags extends SubscribeMixin(LitElement) { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public isWide!: boolean; + + @property() public narrow!: boolean; + + @property() public route!: Route; + + @internalProperty() private _tags: Tag[] = []; + + @internalProperty() private _canWriteTags = false; + + private _columns = memoizeOne( + ( + narrow: boolean, + canWriteTags: boolean, + _language + ): DataTableColumnContainer => { + const columns: DataTableColumnContainer = { + icon: { + title: "", + type: "icon", + template: (_icon, tag) => html``, + }, + display_name: { + title: this.hass.localize("ui.panel.config.tags.headers.name"), + sortable: true, + filterable: true, + grows: true, + template: (name, tag: any) => html`${name} + ${narrow + ? html`
    + ${tag.last_scanned_datetime + ? html`` + : this.hass.localize("ui.panel.config.tags.never_scanned")} +
    ` + : ""}`, + }, + }; + if (!narrow) { + columns.last_scanned_datetime = { + title: this.hass.localize( + "ui.panel.config.tags.headers.last_scanned" + ), + sortable: true, + direction: "desc", + width: "20%", + template: (last_scanned_datetime) => html` + ${last_scanned_datetime + ? html`` + : this.hass.localize("ui.panel.config.tags.never_scanned")} + `, + }; + } + if (canWriteTags) { + columns.write = { + title: "", + type: "icon-button", + template: (_write, tag: any) => html` + this._openWrite((ev.currentTarget as any).tag)} + title=${this.hass.localize("ui.panel.config.tags.write")} + > + + `, + }; + } + columns.automation = { + title: "", + type: "icon-button", + template: (_automation, tag: any) => html` + this._createAutomation((ev.currentTarget as any).tag)} + title=${this.hass.localize("ui.panel.config.tags.create_automation")} + > + + `, + }; + columns.edit = { + title: "", + type: "icon-button", + template: (_settings, tag: any) => html` + this._openDialog((ev.currentTarget as any).tag)} + title=${this.hass.localize("ui.panel.config.tags.edit")} + > + + `, + }; + return columns; + } + ); + + private _data = memoizeOne((tags: Tag[]): TagRowData[] => { + return tags.map((tag) => { + return { + ...tag, + display_name: tag.name || tag.id, + last_scanned_datetime: tag.last_scanned + ? new Date(tag.last_scanned) + : null, + }; + }); + }); + + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + this._fetchTags(); + if (this.hass && this.hass.auth.external) { + getExternalConfig(this.hass.auth.external).then((conf) => { + this._canWriteTags = conf.canWriteTag; + }); + } + } + + protected hassSubscribe() { + return [ + this.hass.connection.subscribeEvents((ev) => { + const foundTag = this._tags.find((tag) => tag.id === ev.data.tag_id); + if (!foundTag) { + this._fetchTags(); + return; + } + foundTag.last_scanned = ev.time_fired; + this._tags = [...this._tags]; + }, EVENT_TAG_SCANNED), + ]; + } + + protected render() { + return html` + + + + + + `; + } + + private async _fetchTags() { + this._tags = await fetchTags(this.hass); + } + + private _openWrite(tag: Tag) { + this.hass.auth.external!.fireMessage({ + type: "tag/write", + payload: { name: tag.name || null, tag: tag.id }, + }); + } + + private _createAutomation(tag: Tag) { + const data = { + alias: this.hass.localize( + "ui.panel.config.tags.automation_title", + "name", + tag.name || tag.id + ), + trigger: [{ platform: "tag", tag_id: tag.id } as TagTrigger], + }; + showAutomationEditor(this, data); + } + + private _addTag() { + this._openDialog(); + } + + private _openDialog(entry?: Tag) { + showTagDetailDialog(this, { + entry, + openWrite: this._canWriteTags ? (tag) => this._openWrite(tag) : undefined, + createEntry: (values, tagId) => this._createTag(values, tagId), + updateEntry: entry + ? (values) => this._updateTag(entry, values) + : undefined, + removeEntry: entry ? () => this._removeTag(entry) : undefined, + }); + } + + private async _createTag( + values: Partial, + tagId?: string + ): Promise { + const newTag = await createTag(this.hass, values, tagId); + this._tags = [...this._tags, newTag]; + return newTag; + } + + private async _updateTag( + selectedTag: Tag, + values: Partial + ): Promise { + const updated = await updateTag(this.hass, selectedTag.id, values); + this._tags = this._tags.map((tag) => + tag.id === selectedTag.id ? updated : tag + ); + return updated; + } + + private async _removeTag(selectedTag: Tag) { + if ( + !(await showConfirmationDialog(this, { + title: "Remove tag?", + text: `Are you sure you want to remove tag ${ + selectedTag.name || selectedTag.id + }?`, + dismissText: this.hass!.localize("ui.common.no"), + confirmText: this.hass!.localize("ui.common.yes"), + })) + ) { + return false; + } + try { + await deleteTag(this.hass, selectedTag.id); + this._tags = this._tags.filter((tag) => tag.id !== selectedTag.id); + return true; + } catch (err) { + return false; + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-config-tags": HaConfigTags; + } +} diff --git a/src/panels/config/tags/show-dialog-tag-detail.ts b/src/panels/config/tags/show-dialog-tag-detail.ts new file mode 100644 index 0000000000..1088a0778c --- /dev/null +++ b/src/panels/config/tags/show-dialog-tag-detail.ts @@ -0,0 +1,27 @@ +import { fireEvent } from "../../../common/dom/fire_event"; +import { Tag, UpdateTagParams } from "../../../data/tag"; + +export interface TagDetailDialogParams { + entry?: Tag; + openWrite?: (tag: Tag) => void; + createEntry: ( + values: Partial, + tagId?: string + ) => Promise; + updateEntry?: (updates: Partial) => Promise; + removeEntry?: () => Promise; +} + +export const loadTagDetailDialog = () => + import(/* webpackChunkName: "dialog-tag-detail" */ "./dialog-tag-detail"); + +export const showTagDetailDialog = ( + element: HTMLElement, + systemLogDetailParams: TagDetailDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-tag-detail", + dialogImport: loadTagDetailDialog, + dialogParams: systemLogDetailParams, + }); +}; diff --git a/src/panels/config/tags/tag-image.ts b/src/panels/config/tags/tag-image.ts new file mode 100644 index 0000000000..c1b10ca86c --- /dev/null +++ b/src/panels/config/tags/tag-image.ts @@ -0,0 +1,93 @@ +import { + property, + customElement, + LitElement, + html, + CSSResult, + css, +} from "lit-element"; +import "../../../components/ha-svg-icon"; +import { mdiNfcVariant } from "@mdi/js"; +import { TagRowData } from "./ha-config-tags"; + +@customElement("tag-image") +export class HaTagImage extends LitElement { + @property() public tag?: TagRowData; + + private _timeout?: number; + + protected updated() { + const msSinceLastScaned = this.tag?.last_scanned_datetime + ? new Date().getTime() - this.tag.last_scanned_datetime.getTime() + : undefined; + + if (msSinceLastScaned && msSinceLastScaned < 1000) { + if (this._timeout) { + clearTimeout(this._timeout); + this._timeout = undefined; + this.classList.remove("just-scanned"); + requestAnimationFrame(() => this.classList.add("just-scanned")); + } else { + this.classList.add("just-scanned"); + } + this._timeout = window.setTimeout(() => { + this.classList.remove("just-scanned"); + this._timeout = undefined; + }, 10000); + } else if (!msSinceLastScaned || msSinceLastScaned > 10000) { + clearTimeout(this._timeout); + this._timeout = undefined; + this.classList.remove("just-scanned"); + } + } + + protected render() { + if (!this.tag) { + return html``; + } + return html`
    +
    + +
    +
    `; + } + + static get styles(): CSSResult { + return css` + .image { + height: 100%; + width: 100%; + background-size: cover; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .container { + height: 40px; + width: 40px; + border-radius: 50%; + } + :host(.just-scanned) .container { + animation: glow 10s; + } + @keyframes glow { + 0% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); + } + 10% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 1); + } + 100% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); + } + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "tag-image": HaTagImage; + } +} diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index f9f83566fb..6d6fd0ce76 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -1,20 +1,21 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; -import "../../../components/ha-circular-progress"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; +import { computeRTLDirection } from "../../../common/util/compute_rtl"; +import "../../../components/ha-circular-progress"; import "../../../components/ha-dialog"; -import "../../../components/ha-switch"; import "../../../components/ha-formfield"; +import "../../../components/ha-switch"; import { createAuthForUser } from "../../../data/auth"; import { createUser, @@ -27,7 +28,6 @@ import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { AddUserDialogParams } from "./show-dialog-add-user"; -import { computeRTLDirection } from "../../../common/util/compute_rtl"; @customElement("dialog-add-user") export class DialogAddUser extends LitElement { @@ -46,6 +46,8 @@ export class DialogAddUser extends LitElement { @internalProperty() private _password?: string; + @internalProperty() private _passwordConfirm?: string; + @internalProperty() private _isAdmin?: boolean; public showDialog(params: AddUserDialogParams) { @@ -53,6 +55,7 @@ export class DialogAddUser extends LitElement { this._name = ""; this._username = ""; this._password = ""; + this._passwordConfirm = ""; this._isAdmin = false; this._error = undefined; this._loading = false; @@ -83,17 +86,20 @@ export class DialogAddUser extends LitElement { ${this._error ? html`
    ${this._error}
    ` : ""} + + + + + ${this.hass.localize("ui.panel.config.users.add_user.create")} @@ -173,19 +202,10 @@ export class DialogAddUser extends LitElement { } } - private _nameChanged(ev: PolymerChangedEvent) { + private _handleValueChanged(ev: PolymerChangedEvent): void { this._error = undefined; - this._name = ev.detail.value; - } - - private _usernameChanged(ev: PolymerChangedEvent) { - this._error = undefined; - this._username = ev.detail.value; - } - - private _passwordChanged(ev: PolymerChangedEvent) { - this._error = undefined; - this._password = ev.detail.value; + const name = (ev.target as any).name; + this[`_${name}`] = ev.detail.value; } private async _adminChanged(ev): Promise { diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index 504ef0a4b5..d662248f02 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -6,23 +6,28 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, TemplateResult, } from "lit-element"; +import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { createCloseHeading } from "../../../components/ha-dialog"; -import "../../../components/ha-switch"; import "../../../components/ha-formfield"; +import "../../../components/ha-switch"; +import { adminChangePassword } from "../../../data/auth"; import { SYSTEM_GROUP_ID_ADMIN, SYSTEM_GROUP_ID_USER, } from "../../../data/user"; +import { + showAlertDialog, + showPromptDialog, +} from "../../../dialogs/generic/show-dialog-box"; import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { UserDetailDialogParams } from "./show-dialog-user-detail"; -import { computeRTLDirection } from "../../../common/util/compute_rtl"; @customElement("dialog-user-detail") class DialogUserDetail extends LitElement { @@ -134,14 +139,22 @@ class DialogUserDetail extends LitElement { ${user.system_generated ? html` - + ${this.hass.localize( "ui.panel.config.users.editor.system_generated_users_not_removable" )} ` : ""} + ${!user.system_generated && this.hass.user?.is_owner + ? html` + ${this.hass.localize( + "ui.panel.config.users.editor.change_password" + )} + ` + : ""}
    +
    ${user.system_generated ? html` - + ${this.hass.localize( "ui.panel.config.users.editor.system_generated_users_not_editable" )} @@ -202,6 +215,52 @@ class DialogUserDetail extends LitElement { } } + private async _changePassword() { + const credential = this._params?.entry.credentials.find( + (cred) => cred.type === "homeassistant" + ); + if (!credential) { + showAlertDialog(this, { + title: "No Home Assistant credentials found.", + }); + return; + } + const newPassword = await showPromptDialog(this, { + title: this.hass.localize("ui.panel.config.users.editor.change_password"), + inputType: "password", + inputLabel: this.hass.localize( + "ui.panel.config.users.editor.new_password" + ), + }); + if (!newPassword) { + return; + } + const confirmPassword = await showPromptDialog(this, { + title: this.hass.localize("ui.panel.config.users.editor.change_password"), + inputType: "password", + inputLabel: this.hass.localize( + "ui.panel.config.users.add_user.password_confirm" + ), + }); + if (!confirmPassword) { + return; + } + if (newPassword !== confirmPassword) { + showAlertDialog(this, { + title: this.hass.localize( + "ui.panel.config.users.add_user.password_not_match" + ), + }); + return; + } + await adminChangePassword(this.hass, this._params!.entry.id, newPassword); + showAlertDialog(this, { + title: this.hass.localize( + "ui.panel.config.users.add_user.password_changed" + ), + }); + } + private _close(): void { this._params = undefined; } diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index 2e9432b8d1..30ed2e8093 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -1,3 +1,5 @@ +import "@material/mwc-fab"; +import { mdiPlus } from "@mdi/js"; import { customElement, LitElement, @@ -11,7 +13,7 @@ import { DataTableColumnContainer, RowClickedEvent, } from "../../../components/data-table/ha-data-table"; -import "@material/mwc-fab"; +import "../../../components/ha-svg-icon"; import { deleteUser, fetchUsers, updateUser, User } from "../../../data/user"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/hass-tabs-subpage-data-table"; @@ -19,8 +21,6 @@ import { HomeAssistant, Route } from "../../../types"; import { configSections } from "../ha-panel-config"; import { showAddUserDialog } from "./show-dialog-add-user"; import { showUserDetailDialog } from "./show-dialog-user-detail"; -import "../../../components/ha-svg-icon"; -import { mdiPlus } from "@mdi/js"; @customElement("ha-config-users") export class HaConfigUsers extends LitElement { @@ -56,7 +56,7 @@ export class HaConfigUsers extends LitElement { ), sortable: true, filterable: true, - width: "25%", + width: "30%", template: (groupIds) => html` ${this.hass.localize(`groups.${groupIds[0]}`)} `, @@ -66,6 +66,7 @@ export class HaConfigUsers extends LitElement { "ui.panel.config.users.picker.headers.system" ), type: "icon", + width: "80px", sortable: true, filterable: true, template: (generated) => html` diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index b1690c6930..83910d3c15 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -11,9 +11,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, query, TemplateResult, @@ -198,7 +198,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { : mdiPencilOff} > - + ${state.entity_id === "zone.home" ? this.hass.localize( `ui.panel.config.zone.${ diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index 4466d48f10..ec7526fee9 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -9,6 +9,7 @@ import "../../../components/ha-code-editor"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { documentationUrl } from "../../../util/documentation-url"; import "../../../styles/polymer-ha-style"; import "./event-subscribe-card"; import "./events-list"; @@ -61,7 +62,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {

    [[localize( 'ui.panel.developer-tools.tabs.events.description' )]] @@ -149,6 +150,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { } } + _computeDocumentationUrl(hass) { + return documentationUrl(hass, "/docs/configuration/events/"); + } + _computeValidJSON(parsedJSON) { return parsedJSON !== ERROR_SENTINEL; } diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js index 51db6e7645..a0478ac55d 100644 --- a/src/panels/developer-tools/service/developer-tools-service.js +++ b/src/panels/developer-tools/service/developer-tools-service.js @@ -1,8 +1,9 @@ -import "@material/mwc-button"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { safeDump, safeLoad } from "js-yaml"; +import { computeRTL } from "../../../common/util/compute_rtl"; +import "../../../components/buttons/ha-progress-button"; import "../../../components/entity/ha-entity-picker"; import "../../../components/ha-code-editor"; import "../../../components/ha-service-picker"; @@ -11,7 +12,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import LocalizeMixin from "../../../mixins/localize-mixin"; import "../../../styles/polymer-ha-style"; import "../../../util/app-localstorage-document"; -import { computeRTL } from "../../../common/util/compute_rtl"; const ERROR_SENTINEL = {}; /* @@ -34,7 +34,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { max-width: 400px; } - mwc-button { + ha-progress-button { margin-top: 8px; } @@ -136,9 +136,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { error="[[!validJSON]]" on-value-changed="_yamlChanged" > - + [[localize('ui.panel.developer-tools.tabs.services.call_service')]] - +