Remove advanced option for settings_group (#201)

Author: farmio

src/components/knx-configure-entity.ts

@@ -76,25 +76,8 @@ export class KNXConfigureEntity extends LitElement {
   }
 
   generateRootGroups(schema: SettingsGroup[], errors?: ErrorDescription[]) {
-    const regular_items: SettingsGroup[] = [];
-    const advanced_items: SettingsGroup[] = [];
-
-    schema.forEach((item: SettingsGroup) => {
-      if (item.advanced) {
-        advanced_items.push(item);
-      } else {
-        regular_items.push(item);
-      }
-    });
     return html`
-      ${regular_items.map((group: SettingsGroup) => this._generateSettingsGroup(group, errors))}
-      ${advanced_items.length
-        ? html` <ha-expansion-panel .header=${"Advanced"} outlined>
-            ${advanced_items.map((group: SettingsGroup) =>
-              this._generateSettingsGroup(group, errors),
-            )}
-          </ha-expansion-panel>`
-        : nothing}
+      ${schema.map((group: SettingsGroup) => this._generateSettingsGroup(group, errors))}
     `;
   }
 

src/components/knx-sync-state-selector-row.ts

@@ -38,46 +38,49 @@ export class KnxSyncStateSelectorRow extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html` <div class="inline">
-      <ha-selector-select
-        .hass=${this.hass}
-        .label=${"Strategy"}
-        .selector=${{
-          select: {
-            multiple: false,
-            custom_value: false,
-            mode: "dropdown",
-            options: [
-              { value: true, label: "Default" },
-              ...(this.noneValid ? [{ value: false, label: "Never" }] : []),
-              { value: "init", label: "Once when connection established" },
-              { value: "expire", label: "Expire after last value update" },
-              { value: "every", label: "Scheduled every" },
-            ],
-          },
-        }}
-        .key=${"strategy"}
-        .value=${this._strategy}
-        @value-changed=${this._handleChange}
-      >
-      </ha-selector-select>
-      <ha-selector-number
-        .hass=${this.hass}
-        .disabled=${!this._hasMinutes(this._strategy)}
-        .selector=${{
-          number: {
-            min: 2,
-            max: 1440,
-            step: 1,
-            unit_of_measurement: "minutes",
-          },
-        }}
-        .key=${"minutes"}
-        .value=${this._minutes}
-        @value-changed=${this._handleChange}
-      >
-      </ha-selector-number>
-    </div>`;
+    return html` <p class="description">
+        Actively request state updates from KNX bus for state addresses.
+      </p>
+      <div class="inline">
+        <ha-selector-select
+          .hass=${this.hass}
+          .label=${"Strategy"}
+          .selector=${{
+            select: {
+              multiple: false,
+              custom_value: false,
+              mode: "dropdown",
+              options: [
+                { value: true, label: "Default" },
+                ...(this.noneValid ? [{ value: false, label: "Never" }] : []),
+                { value: "init", label: "Once when connection established" },
+                { value: "expire", label: "Expire after last value update" },
+                { value: "every", label: "Scheduled every" },
+              ],
+            },
+          }}
+          .key=${"strategy"}
+          .value=${this._strategy}
+          @value-changed=${this._handleChange}
+        >
+        </ha-selector-select>
+        <ha-selector-number
+          .hass=${this.hass}
+          .disabled=${!this._hasMinutes(this._strategy)}
+          .selector=${{
+            number: {
+              min: 2,
+              max: 1440,
+              step: 1,
+              unit_of_measurement: "minutes",
+            },
+          }}
+          .key=${"minutes"}
+          .value=${this._minutes}
+          @value-changed=${this._handleChange}
+        >
+        </ha-selector-number>
+      </div>`;
   }
 
   private _handleChange(ev) {
@@ -97,14 +100,28 @@ export class KnxSyncStateSelectorRow extends LitElement {
 
   static get styles() {
     return css`
+      .description {
+        margin: 0;
+        display: block;
+        padding-top: 4px;
+        padding-bottom: 8px;
+        font-family: var(
+          --mdc-typography-body2-font-family,
+          var(--mdc-typography-font-family, Roboto, sans-serif)
+        );
+        -webkit-font-smoothing: antialiased;
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        font-weight: var(--mdc-typography-body2-font-weight, 400);
+        line-height: normal;
+        color: var(--secondary-text-color);
+      }
       .inline {
         width: 100%;
         display: inline-flex;
         flex-flow: row wrap;
         gap: 16px;
         justify-content: space-between;
       }
-
       .inline > * {
         flex: 1;
         width: 100%; /* to not overflow when wrapped */

src/utils/schema.ts

@@ -4,9 +4,8 @@ import type { DPT } from "../types/websocket";
 export type SettingsGroup = {
   type: "settings_group";
   heading: string;
-  description: string;
+  description?: string;
   selectors: SelectorSchema[];
-  advanced?: boolean;
   collapsible?: boolean;
 };
 
@@ -122,9 +121,8 @@ export const binarySensorSchema: SettingsGroup[] = [
   },
   {
     type: "settings_group",
-    advanced: true,
+    collapsible: true,
     heading: "State updater",
-    description: "Actively request state updates from KNX bus for state addresses.",
     selectors: [
       {
         name: "sync_state",
@@ -169,9 +167,8 @@ export const switchSchema: SettingsGroup[] = [
   },
   {
     type: "settings_group",
-    advanced: true,
+    collapsible: true,
     heading: "State updater",
-    description: "Actively request state updates from KNX bus for state addresses.",
     selectors: [
       {
         name: "sync_state",
@@ -500,9 +497,8 @@ export const lightSchema: SettingsGroup[] = [
   },
   {
     type: "settings_group",
-    advanced: true,
+    collapsible: true,
     heading: "State updater",
-    description: "Actively request state updates from KNX bus for state addresses.",
     selectors: [
       {
         name: "sync_state",