Add domain icon component and clean old files

src/common/const.ts

@@ -1,6 +1,7 @@
 /** Constants to be used in the frontend. */
 
 import {
+  mdiAccount,
   mdiAirFilter,
   mdiAlert,
   mdiAngleAcute,
@@ -50,8 +51,10 @@ import {
   mdiProgressClock,
   mdiRayVertex,
   mdiRemote,
+  mdiRobot,
   mdiRobotMower,
   mdiRobotVacuum,
+  mdiRoomService,
   mdiScriptText,
   mdiSineWave,
   mdiSpeakerMessage,
@@ -61,6 +64,7 @@ import {
   mdiThermometerLines,
   mdiThermostat,
   mdiTimerOutline,
+  mdiToggleSwitch,
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
@@ -69,6 +73,7 @@ import {
   mdiWeatherRainy,
   mdiWeatherWindy,
   mdiWeight,
+  mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
 
@@ -78,27 +83,33 @@ import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
+/** Icon to use when no icon specified for service. */
+export const DEFAULT_SERVICE_ICON = mdiRoomService;
+
 /** Icon to use when no icon specified for domain. */
 export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
   air_quality: mdiAirFilter,
   alert: mdiAlert,
+  automation: mdiRobot,
   calendar: mdiCalendar,
   climate: mdiThermostat,
   configurator: mdiCog,
   conversation: mdiMicrophoneMessage,
   counter: mdiCounter,
-  datetime: mdiCalendarClock,
   date: mdiCalendar,
+  datetime: mdiCalendarClock,
   demo: mdiHomeAssistant,
+  device_tracker: mdiAccount,
   google_assistant: mdiGoogleAssistant,
   group: mdiGoogleCirclesCommunities,
   homeassistant: mdiHomeAssistant,
   homekit: mdiHomeAutomation,
-  image: mdiImage,
   image_processing: mdiImageFilterFrames,
+  image: mdiImage,
+  input_boolean: mdiToggleSwitch,
   input_button: mdiButtonPointer,
   input_datetime: mdiCalendarClock,
   input_number: mdiRayVertex,
@@ -110,6 +121,7 @@ export const FIXED_DOMAIN_ICONS = {
   notify: mdiCommentAlert,
   number: mdiRayVertex,
   persistent_notification: mdiBell,
+  person: mdiAccount,
   plant: mdiFlower,
   proximity: mdiAppleSafari,
   remote: mdiRemote,
@@ -121,10 +133,11 @@ export const FIXED_DOMAIN_ICONS = {
   simple_alarm: mdiBell,
   siren: mdiBullhorn,
   stt: mdiMicrophoneMessage,
+  sun: mdiWhiteBalanceSunny,
   text: mdiFormTextbox,
-  todo: mdiClipboardList,
   time: mdiClock,
   timer: mdiTimerOutline,
+  todo: mdiClipboardList,
   tts: mdiSpeakerMessage,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,

src/common/entity/battery_icon.ts

@@ -1,92 +1,59 @@
-/** Return an icon representing a battery state. */
-import {
-  mdiBattery,
-  mdiBattery10,
-  mdiBattery20,
-  mdiBattery30,
-  mdiBattery40,
-  mdiBattery50,
-  mdiBattery60,
-  mdiBattery70,
-  mdiBattery80,
-  mdiBattery90,
-  mdiBatteryAlert,
-  mdiBatteryAlertVariantOutline,
-  mdiBatteryCharging,
-  mdiBatteryCharging10,
-  mdiBatteryCharging20,
-  mdiBatteryCharging30,
-  mdiBatteryCharging40,
-  mdiBatteryCharging50,
-  mdiBatteryCharging60,
-  mdiBatteryCharging70,
-  mdiBatteryCharging80,
-  mdiBatteryCharging90,
-  mdiBatteryChargingOutline,
-  mdiBatteryUnknown,
-} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
 const BATTERY_ICONS = {
-  10: mdiBattery10,
-  20: mdiBattery20,
-  30: mdiBattery30,
-  40: mdiBattery40,
-  50: mdiBattery50,
-  60: mdiBattery60,
-  70: mdiBattery70,
-  80: mdiBattery80,
-  90: mdiBattery90,
-  100: mdiBattery,
+  10: "mdi:battery-10",
+  20: "mdi:battery-20",
+  30: "mdi:battery-30",
+  40: "mdi:battery-40",
+  50: "mdi:battery-50",
+  60: "mdi:battery-60",
+  70: "mdi:battery-70",
+  80: "mdi:battery-80",
+  90: "mdi:battery-90",
+  100: "mdi:battery",
 };
 const BATTERY_CHARGING_ICONS = {
-  10: mdiBatteryCharging10,
-  20: mdiBatteryCharging20,
-  30: mdiBatteryCharging30,
-  40: mdiBatteryCharging40,
-  50: mdiBatteryCharging50,
-  60: mdiBatteryCharging60,
-  70: mdiBatteryCharging70,
-  80: mdiBatteryCharging80,
-  90: mdiBatteryCharging90,
-  100: mdiBatteryCharging,
+  10: "mdi:battery-charging-10",
+  20: "mdi:battery-charging-20",
+  30: "mdi:battery-charging-30",
+  40: "mdi:battery-charging-40",
+  50: "mdi:battery-charging-50",
+  60: "mdi:battery-charging-60",
+  70: "mdi:battery-charging-70",
+  80: "mdi:battery-charging-80",
+  90: "mdi:battery-charging-90",
+  100: "mdi:battery-charging",
 };
 
-export const batteryStateIcon = (
-  batteryState: HassEntity,
-  batteryChargingState?: HassEntity
-) => {
-  const battery = batteryState.state;
-  const batteryCharging =
-    batteryChargingState && batteryChargingState.state === "on";
-
-  return batteryIcon(battery, batteryCharging);
+export const batteryIcon = (stateObj: HassEntity, state?: string) => {
+  const level = state ?? stateObj.state;
+  return batteryLevelIcon(level);
 };
 
-export const batteryIcon = (
-  batteryState: number | string,
-  batteryCharging?: boolean
-) => {
-  const batteryValue = Number(batteryState);
+export const batteryLevelIcon = (
+  batteryLevel: number | string,
+  isBatteryCharging?: boolean
+): string => {
+  const batteryValue = Number(batteryLevel);
   if (isNaN(batteryValue)) {
-    if (batteryState === "off") {
-      return mdiBattery;
+    if (batteryLevel === "off") {
+      return "mdi:battery";
     }
-    if (batteryState === "on") {
-      return mdiBatteryAlert;
+    if (batteryLevel === "on") {
+      return "mdi:battery-alert";
     }
-    return mdiBatteryUnknown;
+    return "mdi:battery-unknown";
   }
 
   const batteryRound = Math.round(batteryValue / 10) * 10;
-  if (batteryCharging && batteryValue >= 10) {
+  if (isBatteryCharging && batteryValue >= 10) {
     return BATTERY_CHARGING_ICONS[batteryRound];
   }
-  if (batteryCharging) {
-    return mdiBatteryChargingOutline;
+  if (isBatteryCharging) {
+    return "mdi:battery-charging-outline";
   }
   if (batteryValue <= 5) {
-    return mdiBatteryAlertVariantOutline;
+    return "mdi:battery-alert-variant-outline";
   }
   return BATTERY_ICONS[batteryRound];
 };

src/common/entity/cover_icon.ts

@@ -1,132 +1,12 @@
 /** Return an icon representing a cover state. */
 import {
-  mdiArrowUpBox,
-  mdiArrowDownBox,
-  mdiGarage,
-  mdiGarageOpen,
-  mdiGateArrowRight,
-  mdiGate,
-  mdiGateOpen,
-  mdiDoorOpen,
-  mdiDoorClosed,
-  mdiCircle,
-  mdiWindowShutter,
-  mdiWindowShutterOpen,
-  mdiBlindsHorizontal,
-  mdiBlindsHorizontalClosed,
-  mdiRollerShade,
-  mdiRollerShadeClosed,
-  mdiWindowClosed,
-  mdiWindowOpen,
-  mdiArrowExpandHorizontal,
-  mdiArrowUp,
   mdiArrowCollapseHorizontal,
   mdiArrowDown,
-  mdiCircleSlice8,
-  mdiArrowSplitVertical,
-  mdiCurtains,
-  mdiCurtainsClosed,
+  mdiArrowExpandHorizontal,
+  mdiArrowUp,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
-export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
-  const open = state !== "closed";
-
-  switch (stateObj?.attributes.device_class) {
-    case "garage":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiGarage;
-        default:
-          return mdiGarageOpen;
-      }
-    case "gate":
-      switch (state) {
-        case "opening":
-        case "closing":
-          return mdiGateArrowRight;
-        case "closed":
-          return mdiGate;
-        default:
-          return mdiGateOpen;
-      }
-    case "door":
-      return open ? mdiDoorOpen : mdiDoorClosed;
-    case "damper":
-      return open ? mdiCircle : mdiCircleSlice8;
-    case "shutter":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiWindowShutter;
-        default:
-          return mdiWindowShutterOpen;
-      }
-    case "curtain":
-      switch (state) {
-        case "opening":
-          return mdiArrowSplitVertical;
-        case "closing":
-          return mdiArrowCollapseHorizontal;
-        case "closed":
-          return mdiCurtainsClosed;
-        default:
-          return mdiCurtains;
-      }
-    case "blind":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiBlindsHorizontalClosed;
-        default:
-          return mdiBlindsHorizontal;
-      }
-    case "shade":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiRollerShadeClosed;
-        default:
-          return mdiRollerShade;
-      }
-    case "window":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiWindowClosed;
-        default:
-          return mdiWindowOpen;
-      }
-  }
-
-  switch (state) {
-    case "opening":
-      return mdiArrowUpBox;
-    case "closing":
-      return mdiArrowDownBox;
-    case "closed":
-      return mdiWindowClosed;
-    default:
-      return mdiWindowOpen;
-  }
-};
-
 export const computeOpenIcon = (stateObj: HassEntity): string => {
   switch (stateObj.attributes.device_class) {
     case "awning":