Merge pull request #321 from dermotduffy/editor-overrides

Add warning in editor if overrides are present

src/editor.ts

@@ -155,6 +155,12 @@ const options: EditorOptions = {
     secondary: localize('editor.dimensions_secondary'),
     show: false,
   },
+  overrides: {
+    icon: 'file-replace',
+    name: localize('editor.overrides'),
+    secondary: localize('editor.overrides_secondary'),
+    show: false,
+  },
 };
 
 @customElement('frigate-card-editor')
@@ -302,7 +308,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     return html`
       <div
-        class="option"
+        class="option option-${optionSetName}"
         @click=${this._toggleOptionHandler}
         .optionSetName=${optionSetName}
       >
@@ -364,6 +370,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     `;
   }
 
+  /**
+   * Render a number slider.
+   * @param configPath Configuration path of the variable.
+   * @param valueDefault The default value.
+   * @param icon The icon to use on the slider.
+   * @param min The minimum value.
+   * @param max The maximum value.
+   * @returns A rendered template.
+   */
   protected _renderSlider(
     configPath: string,
     valueDefault: number,
@@ -388,6 +403,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     </ha-labeled-slider>`;
   }
 
+  /**
+   * Render a simple text info box.
+   * @param info The string to display.
+   * @returns A rendered template.
+   */
+  protected _renderInfo(info: string): TemplateResult {
+    return html` <span class="info">${info}</span>`;
+  }
+
   /**
    * Render a camera header.
    * @param cameraIndex The index of the camera to edit/add.
@@ -856,6 +880,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._renderStringInput(CONF_DIMENSIONS_ASPECT_RATIO)}
             </div>`
           : ''}
+        ${this._config['overrides'] !== undefined
+          ? html` ${this._renderOptionSetHeader('overrides')}
+            ${options.overrides.show
+              ? html` <div class="values">
+                  ${this._renderInfo(localize('config.overrides.info'))}
+                </div>`
+              : ''}`
+          : html``}
       </div>
     `;
   }

src/localize/languages/en.json

@@ -160,6 +160,9 @@
         "dynamic": "Aspect ratio adjusts to media",
         "static": "Static aspect ratio"
       }
+    },
+    "overrides": {
+      "info": "This card configuration has manually specified overrides configured which may override values shown in the visual editor, please consult the code editor to view/modify these overrides"
     }
   },
   "editor": {
@@ -186,7 +189,9 @@
     "move_up": "Move up",
     "move_down": "Move down",
     "add_new_camera": "Add new camera",
-    "camera": "Camera"
+    "camera": "Camera",
+    "overrides": "Overrides are active",
+    "overrides_secondary": "Dynamic configuration overrides detected"
   },
   "error": {
     "empty_response": "Received empty response from Home Assistant for request",

src/scss/editor.scss

@@ -1,9 +1,12 @@
 @use './button.scss';
 
 .option {
-  padding: 4px 0px;
+  padding: 4px 4px;
   cursor: pointer;
 }
+.option.option-overrides .title {
+  color: var(--warning-color);
+}
 .row {
   display: flex;
   margin-bottom: -14px;
@@ -70,4 +73,7 @@ div.upgrade span {
 .cameras .controls ha-icon-button.button {
   --mdc-icon-button-size: 32px;
   --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
+}
+span.info {
+  padding: 4px;
 }