feat(master/manager/device): Enhance device management with new detail view, API updates, and improved request handling

2026-01-27 12:18:28 +07:00
parent a11e2c2991
commit 6d1c085ff7
20 changed files with 516 additions and 20 deletions
--- a/src/pages/Manager/Device/Detail/index.tsx
+++ b/src/pages/Manager/Device/Detail/index.tsx
@@ -0,0 +1,90 @@
+import TooltipIconFontButton from '@/components/shared/TooltipIconFontButton';
+import { ROUTER_HOME } from '@/constants/routes';
+import { apiQueryMessage } from '@/services/master/MessageController';
+import { apiGetThingDetail } from '@/services/master/ThingController';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useModel, useParams } from '@umijs/max';
+import { useEffect, useState } from 'react';
+import ThingTitle from './components/ThingTitle';
+
+const DetailDevicePage = () => {
+  const { thingId } = useParams();
+  const [thing, setThing] = useState<MasterModel.Thing | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { initialState } = useModel('@@initialState');
+  const getThingDetail = async () => {
+    setIsLoading(true);
+    try {
+      const thing = await apiGetThingDetail(thingId || '');
+      setThing(thing);
+    } catch (error) {
+      console.error('Error when get Thing: ', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const getDeviceConfig = async () => {
+    try {
+      const resp = await apiQueryMessage(
+        thing?.metadata?.data_channel_id || '',
+        initialState?.currentUserProfile?.metadata?.frontend_thing_key || '',
+        {
+          offset: 0,
+          limit: 1,
+          subtopic: `config.${thing?.metadata?.type}.node`,
+        },
+      );
+      console.log('Device Config:', resp.messages![0].string_value_parsed);
+    } catch (error) {}
+  };
+  useEffect(() => {
+    if (thingId) {
+      getThingDetail();
+    }
+  }, [thingId]);
+  useEffect(() => {
+    if (thing) {
+      getDeviceConfig();
+    }
+  }, [thing]);
+
+  return (
+    <PageContainer
+      title={isLoading ? 'Loading...' : <ThingTitle thing={thing} />}
+      header={{
+        onBack: () => history.push(ROUTER_HOME),
+        breadcrumb: undefined,
+      }}
+      extra={[
+        <TooltipIconFontButton
+          key="logs"
+          tooltip="Nhật ký"
+          iconFontName="icon-system-diary"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+        <TooltipIconFontButton
+          key="notifications"
+          tooltip="Thông báo"
+          iconFontName="icon-bell"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+        <TooltipIconFontButton
+          key="settings"
+          tooltip="Cài đặt"
+          iconFontName="icon-setting-device"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+      ]}
+    >
+      Thing ID: {thingId}
+    </PageContainer>
+  );
+};
+
+export default DetailDevicePage;