feature: make it possible to change order in groups section using con…

…fig.entities

README.md

@@ -92,7 +92,7 @@ entityPlatform: sonos # will select all entities for this platform. Will overrid
 <!-- //#ONLY_SONOS_CARD_START -->
 ```yaml
 type: custom:sonos-card
-entities: # Entities are automatically discovered if you don't supply this setting
+entities: # Entities are automatically discovered if you don't supply this setting. You can also use this sort your entities in a specific order (instead of alphabetically).
   - media_player.sonos_kitchen
   - media_player.sonos_hallway
   - media_player.sonos_bedroom
@@ -315,6 +315,22 @@ Append `#media_player.my_sonos_player` to page URL to have that player selected.
 
 If `entityId` is configured for the card, the url param will be ignored. See more in the Usage section above.
 
+## Sort order of entities
+
+If you want to have a custom sorting for your entities in the groups section you can use the `entities` configuration. 
+Default is otherwise to sort by entity name.
+
+Example:
+```yaml
+type: custom:sonos-card
+entities:
+  - media_player.sonos_kitchen
+  - media_player.sonos_hallway
+  - media_player.sonos_bedroom
+  - media_player.sonos_livingroom
+```
+
+
 ## CSS Styling
 
 The recommend way to change look and feel is to use the built-in theming capabilities in Home Assistant. If that is not enough this card supports being styled with [card_mod](https://github.com/thomasloven/lovelace-card-mod).

src/model/store.ts

@@ -12,7 +12,14 @@ import {
   PredefinedGroupPlayer,
   Section,
 } from '../types';
-import { entityMatchMxmp, entityMatchSonos, getGroupPlayerIds, isSonosCard, supportsTurnOn } from '../utils/utils';
+import {
+  entityMatchMxmp,
+  entityMatchSonos,
+  getGroupPlayerIds,
+  isSonosCard,
+  sortEntities,
+  supportsTurnOn,
+} from '../utils/utils';
 import { MediaPlayer } from './media-player';
 import { HassEntity } from 'home-assistant-js-websocket';
 
@@ -119,18 +126,17 @@ export default class Store {
 
   public getMediaPlayerHassEntities(hass: HomeAssistant) {
     const hassWithEntities = hass as HomeAssistantWithEntities;
-    return Object.values(hass.states)
-      .filter((hassEntity) => {
-        if (hassEntity.entity_id.includes('media_player')) {
-          if (isSonosCard(this.config)) {
-            return entityMatchSonos(this.config, hassEntity, hassWithEntities);
-          } else {
-            return entityMatchMxmp(this.config, hassEntity, hassWithEntities);
-          }
+    const filtered = Object.values(hass.states).filter((hassEntity) => {
+      if (hassEntity.entity_id.includes('media_player')) {
+        if (isSonosCard(this.config)) {
+          return entityMatchSonos(this.config, hassEntity, hassWithEntities);
+        } else {
+          return entityMatchMxmp(this.config, hassEntity, hassWithEntities);
         }
-        return false;
-      })
-      .sort((a, b) => a.entity_id.localeCompare(b.entity_id));
+      }
+      return false;
+    });
+    return sortEntities(this.config, filtered);
   }
 
   private createPlayerGroups(mediaPlayerHassEntities: HassEntity[]) {

src/utils/utils.ts

@@ -129,3 +129,15 @@ export function entityMatchMxmp(
 export function isSonosCard(config: CardConfig) {
   return config.type.indexOf('sonos') > -1;
 }
+
+export function sortEntities(config: CardConfig, filtered: HassEntity[]) {
+  if (config.entities) {
+    return filtered.sort((a, b) => {
+      const aIndex = config.entities?.indexOf(a.entity_id) ?? -1;
+      const bIndex = config.entities?.indexOf(b.entity_id) ?? -1;
+      return aIndex - bIndex;
+    });
+  } else {
+    return filtered.sort((a, b) => a.entity_id.localeCompare(b.entity_id));
+  }
+}