Add option to render UI and devcontainer setup

.devcontainer/configuration.yaml

@@ -0,0 +1,119 @@
+default_config:
+lovelace:
+  mode: yaml
+demo:
+frontend:
+  themes:
+    amoled:
+      accent-color: '#E45E65'
+      card-background-color: 'var(--paper-card-background-color)'
+      dark-primary-color: 'var(--accent-color)'
+      disabled-text-color: '#7F848E'
+      divider-color: 'rgba(0, 0, 0, .12)'
+      google-green-500: '#39E949'
+      google-red-500: '#E45E65'
+      ha-card-background: '#000000'
+      label-badge-background-color: '#2E333A'
+      label-badge-border-color: 'green'
+      label-badge-red: 'var(--accent-color)'
+      label-badge-text-color: 'var(--primary-text-color)'
+      light-primary-color: 'var(--accent-color)'
+      paper-button-color: '#5294E2'
+      paper-button-ink-color: '#5294E2'
+      paper-card-background-color: '#000000'
+      paper-card-header-color: 'var(--accent-color)'
+      paper-dialog-background-color: '#000000'
+      paper-grey-200: '#414A59'
+      paper-grey-50: 'var(--primary-text-color)'
+      paper-item-icon-active-color: '#F9C536'
+      paper-item-icon-color: 'var(--primary-text-color)'
+      paper-item-icon_-_color: 'green'
+      paper-item-selected_-_background-color: '#434954'
+      paper-listbox-background-color: '#000000'
+      paper-listbox-color: '#FFFFFF)'
+      paper-slider-active-color: 'var(--accent-color)'
+      paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
+      paper-slider-disabled-active-color: 'var(--disabled-text-color)'
+      paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
+      paper-slider-knob-color: 'var(--accent-color)'
+      paper-slider-knob-start-color: 'var(--accent-color)'
+      paper-slider-pin-color: 'var(--accent-color)'
+      paper-slider-secondary-color: 'var(--secondary-background-color)'
+      paper-tabs-selection-bar-color: 'green'
+      paper-toggle-button-checked-bar-color: 'var(--accent-color)'
+      paper-toggle-button-checked-button-color: 'var(--accent-color)'
+      paper-toggle-button-checked-ink-color: 'var(--accent-color)'
+      paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
+      paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
+      paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
+      primary-background-color: '#000000'
+      primary-color: '#434954'
+      primary-text-color: '#FFFFFF'
+      secondary-background-color: '#383C45'
+      secondary-text-color: '#5294E2'
+      sidebar-icon-color: 'var(--primary-color)'
+      sidebar-selected-icon-color: 'var(--primary-text-color)'
+      sidebar-selected-text-color: 'var(--primary-text-color)'
+      sidebar-text-color: '#F1F1F1'
+      switch-unchecked-button-color: '#333333'
+      switch-unchecked-track-color: '#333333'
+      table-row-alternative-background-color: '#222429'
+      table-row-background-color: '#000000'
+      text-primary-color: 'var(--primary-text-color)'
+    day:
+      ### Main Interface Colors ###
+      primary-color: '#93abca'
+      light-primary-color: '#5F81B0'
+      primary-background-color: '#F0F5FF'
+      secondary-background-color: var(--primary-background-color)
+      secondary-background-color-alpha: 'rgba(220, 225, 235, 0.6)'
+      divider-color: '#D6DFEB'
+      ### Text ###
+      primary-text-color: '#395274'
+      secondary-text-color: '#5294E2'
+      text-primary-color: '#FFFFFF'
+      disabled-text-color: '#88A1C4'
+      ### Sidebar Menu ###
+      sidebar-icon-color: '#395274'
+      sidebar-text-color: var(--sidebar-icon-color)
+      sidebar-selected-background-color: var(--primary-background-color)
+      sidebar-selected-icon-color: '#FF6262'
+      sidebar-selected-text-color: var(--sidebar-selected-icon-color)
+      ### States and Badges ###
+      state-icon-color: '#395274'
+      state-icon-active-color: '#ebb307'
+      state-icon-unavailable-color: var(--disabled-text-color)
+      ### Sliders ###
+      paper-slider-knob-color: '#FF6262'
+      paper-slider-knob-start-color: var(--paper-slider-knob-color)
+      paper-slider-pin-color: var(--paper-slider-knob-color)
+      paper-slider-active-color: var(--paper-slider-knob-color)
+      paper-slider-secondary-color: var(--light-primary-color)
+      ### Labels ###
+      label-badge-background-color: '#FFFFFF'
+      label-badge-text-color: '#395274'
+      label-badge-red: '#FF8888'
+      ### Cards ###
+      paper-card-background-color: 'rgba(255, 255, 255, 0.4)'
+      paper-listbox-background-color: '#F0F1F3'
+      card-background-color: 'var(--primary-background-color)'
+
+      ha-card-border-radius: 10px
+      border-color: 'var(--primary-text-color)'
+      background-image: 'center / cover no-repeat url("/local/background/day.jpg") fixed'
+
+      ### Toggles ###
+      paper-toggle-button-checked-button-color: '#FF6262'
+      paper-toggle-button-checked-bar-color: '#FF6262'
+      paper-toggle-button-unchecked-button-color: '#395274'
+      paper-toggle-button-unchecked-bar-color: '#9CB2CE'
+      switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
+      switch-unchecked-button-color: 'var(--paper-toggle-button-unchecked-button-color)'
+      switch-unchecked-color: 'var(--paper-toggle-button-unchecked-bar-color)'
+      switch-unchecked-track-color: 'var(--paper-toggle-button-unchecked-bar-color)'
+      ### Table row ###
+      table-row-background-color: var(--primary-background-color)
+      table-row-alternative-background-color: var(--secondary-background-color)
+
+      sc-background-filter: none
+

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+// See https://aka.ms/vscode-remote/devcontainer.json for format details.
+{
+    "name": "Settings Sync Development",
+    "image": "ludeeus/container:monster",
+    "context": "..",
+    "appPort": ["5000:5000", "9123:8123"],
+    "postCreateCommand": "npm install",
+    "runArgs": [
+      "-v",
+      "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+    ],
+    "extensions": [
+      "github.vscode-pull-request-github",
+      "eamodio.gitlens",
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "bierner.lit-html",
+      "runem.lit-plugin",
+      "auchenberg.vscode-browser-preview",
+      "davidanson.vscode-markdownlint",
+      "redhat.vscode-yaml"
+    ],
+    "settings": {
+      "files.eol": "\n",
+      "editor.tabSize": 4,
+      "terminal.integrated.shell.linux": "/bin/bash",
+      "editor.formatOnPaste": false,
+      "editor.formatOnSave": true,
+      "editor.formatOnType": true,
+      "files.trimTrailingWhitespace": true
+    }
+  }

.devcontainer/ui-lovelace.yaml

@@ -0,0 +1,10 @@
+resources:
+  - url: http://127.0.0.1:5000/settings-sync.js
+    type: module
+views:
+  - cards:
+      - type: custom:settings-sync
+        enabled: true
+        sensor: sensor.settings_sync
+        username: admin
+        render_ui: true

.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
 /.rpt2_cache/
+/dist/

README.md

@@ -30,6 +30,7 @@ resources:
 | type          | string  | **Required** | `custom:custom:settings-sync`                                                                   |
 | enabled       | boolean | **Required** | Enable card                                                                                     |
 | sensor        | sensor  | **Required** | The Sensor that holds the User Settings JSON retrieved by the REST API                          |
+| render_ui     | boolean | **Required** | If the UI should be rendered                                                                    |
 | username      | string  | **Optional** | Optional Username or default is the Logged In User (this matches up with the JSON)              |
 
 [commits-shield]: https://img.shields.io/github/commit-activity/y/ajagnanan/ha-settings-sync.svg?style=for-the-badge
@@ -41,10 +42,20 @@ resources:
 
 ## Configuration
 
+### Sensor
+
+This card will need a REST endpoint which will store the Settings JSON. A REST Sensor will be needed that will then store these settings in Home Assistant. An example of the [rest sensor](samples/rest_sensor.yaml) and [settings.json](samples/settings.json) are provided. The "Key" is the Username of the Setting.
+**The REST Sensor is needed because we can use Attributes to store a String lenght greater than 255, which is the limit of the State value.**
+
+CloudFlare Workers offers a way to host the REST endpoint. See [cf_worker.js](samples/cf_worker.js) for a basic example of the worker code.
+
+### Card
+
 ```yaml
 type: custom:settings-sync
 enabled: true
 sensor: sensor.settings_sync
+render_ui: true
 username: admin
 ```