Add support for todo component

demo/src/stubs/shopping_list.ts

@@ -1,4 +1,4 @@
-import { ShoppingListItem } from "../../../src/data/shopping-list";
+import { ShoppingListItem } from "../../../src/data/todo";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 let items: ShoppingListItem[] = [

package.json

@@ -52,6 +52,7 @@
     "@lezer/highlight": "1.1.6",
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.4",
+    "@lit-labs/observers": "2.0.1",
     "@lit-labs/virtualizer": "2.0.7",
     "@lrnwebcomponents/simple-tooltip": "7.0.18",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",

src/common/const.ts

@@ -16,6 +16,7 @@ import {
   mdiCarCoolantLevel,
   mdiCash,
   mdiChatSleep,
+  mdiClipboardCheck,
   mdiClock,
   mdiCloudUpload,
   mdiCog,
@@ -120,6 +121,7 @@ export const FIXED_DOMAIN_ICONS = {
   siren: mdiBullhorn,
   stt: mdiMicrophoneMessage,
   text: mdiFormTextbox,
+  todo: mdiClipboardCheck,
   time: mdiClock,
   timer: mdiTimerOutline,
   tts: mdiSpeakerMessage,

src/components/ha-sidebar.ts

@@ -2,9 +2,9 @@ import "@material/mwc-button/mwc-button";
 import {
   mdiBell,
   mdiCalendar,
-  mdiCart,
   mdiCellphoneCog,
   mdiChartBox,
+  mdiClipboardList,
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
@@ -81,7 +81,7 @@ const PANEL_ICONS = {
   lovelace: mdiViewDashboard,
   map: mdiTooltipAccount,
   "media-browser": mdiPlayBoxMultiple,
-  "shopping-list": mdiCart,
+  todo: mdiClipboardList,
 };
 
 const panelSorter = (

src/data/todo.ts

@@ -0,0 +1,104 @@
+import { HomeAssistant, ServiceCallResponse } from "../types";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { isUnavailableState } from "./entity";
+
+export enum TodoItemStatus {
+  NeedsAction = "needs-action",
+  Completed = "completed",
+}
+
+export interface TodoList {
+  entity_id: string;
+  name: string;
+}
+
+export interface TodoItem {
+  uid?: string;
+  summary: string;
+  status: TodoItemStatus;
+}
+
+export const enum TodoListEntityFeature {
+  CREATE_TODO_ITEM = 1,
+  DELETE_TODO_ITEM = 2,
+  UPDATE_TODO_ITEM = 4,
+  MOVE_TODO_ITEM = 8,
+}
+
+export const getTodoLists = (hass: HomeAssistant): TodoList[] =>
+  Object.keys(hass.states)
+    .filter(
+      (entityId) =>
+        computeDomain(entityId) === "todo" &&
+        !isUnavailableState(hass.states[entityId].state)
+    )
+    .sort()
+    .map((entityId) => ({
+      ...hass.states[entityId],
+      entity_id: entityId,
+      name: computeStateName(hass.states[entityId]),
+    }));
+
+export interface TodoItems {
+  items: TodoItem[];
+}
+
+export const fetchItems = async (
+  hass: HomeAssistant,
+  entityId: string
+): Promise<TodoItem[]> => {
+  const result = await hass.callWS<TodoItems>({
+    type: "todo/item/list",
+    entity_id: entityId,
+  });
+  return result.items;
+};
+
+export const updateItem = (
+  hass: HomeAssistant,
+  entity_id: string,
+  item: TodoItem
+): Promise<ServiceCallResponse> =>
+  hass.callService("todo", "update_item", item, { entity_id });
+
+export const createItem = (
+  hass: HomeAssistant,
+  entity_id: string,
+  summary: string
+): Promise<ServiceCallResponse> =>
+  hass.callService(
+    "todo",
+    "create_item",
+    {
+      summary,
+    },
+    { entity_id }
+  );
+
+export const deleteItem = (
+  hass: HomeAssistant,
+  entity_id: string,
+  uid: string
+): Promise<ServiceCallResponse> =>
+  hass.callService(
+    "todo",
+    "delete_item",
+    {
+      uid,
+    },
+    { entity_id }
+  );
+
+export const moveItem = (
+  hass: HomeAssistant,
+  entity_id: string,
+  uid: string,
+  pos: number
+): Promise<void> =>
+  hass.callWS({
+    type: "todo/item/move",
+    entity_id,
+    uid,
+    pos,
+  });

src/layouts/partial-panel-resolver.ts

@@ -34,8 +34,7 @@ const COMPONENTS = {
   map: () => import("../panels/map/ha-panel-map"),
   my: () => import("../panels/my/ha-panel-my"),
   profile: () => import("../panels/profile/ha-panel-profile"),
-  "shopping-list": () =>
-    import("../panels/shopping-list/ha-panel-shopping-list"),
+  todo: () => import("../panels/todo/ha-panel-todo"),
   "media-browser": () =>
     import("../panels/media-browser/ha-panel-media-browser"),
 };