feat: Add edit/create/list sight page

src/widgets/DevicesTable/index.tsx

@@ -6,7 +6,13 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import { Check, RotateCcw, Send, X } from "lucide-react";
-import { devicesStore, Modal, snapshotStore, vehicleStore } from "@shared";
+import {
+  authInstance,
+  devicesStore,
+  Modal,
+  snapshotStore,
+  vehicleStore,
+} from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Button, Checkbox } from "@mui/material";
@@ -82,13 +88,15 @@ export const DevicesTable = observer(() => {
     fetchData();
   }, []);
 
-  const handleSendSnapshot = (uuid: string[]) => {
+  const handleSendSnapshot = (uuid: string) => {
     setSelectedDevice(uuid);
     toggleSendSnapshotModal();
   };
 
-  const handleReloadStatus = (uuid: string) => {
+  const handleReloadStatus = async (uuid: string) => {
     setSelectedDevice(uuid);
+    await authInstance.post(`/devices/${uuid}/request-status`);
+    await getDevices();
   };
 
   const handleSelectDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -101,6 +109,13 @@ export const DevicesTable = observer(() => {
     }
   };
 
+  const handleSendSnapshotAction = async (uuid: string, snapshotId: string) => {
+    await authInstance.post(`/devices/${uuid}/force-snapshot`, {
+      snapshot_id: snapshotId,
+    });
+    await getDevices();
+  };
+
   return (
     <>
       <TableContainer component={Paper}>
@@ -113,7 +128,7 @@ export const DevicesTable = observer(() => {
             color="primary"
             disabled={selectedDevices.length === 0}
             className="ml-auto"
-            onClick={() => handleSendSnapshot(selectedDevices)}
+            onClick={() => handleSendSnapshot(uuid ?? "")}
           >
             Отправить снапшот
           </Button>
@@ -195,7 +210,11 @@ export const DevicesTable = observer(() => {
         <div className="mt-5 flex flex-col gap-2 max-h-[300px] overflow-y-auto">
           {snapshots &&
             snapshots.map((snapshot) => (
-              <button className="p-2 rounded-xl bg-slate-100" key={snapshot.id}>
+              <button
+                onClick={() => handleSendSnapshotAction(uuid!, snapshot.ID)}
+                className="p-2 rounded-xl bg-slate-100"
+                key={snapshot.ID}
+              >
                 {snapshot.Name}
               </button>
             ))}