123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
import { Helmet } from "react-helmet";
|
||
import "./DevicesPage.css";
|
||
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
|
||
import { Alert } from "@mantine/core";
|
||
import { Link } from "react-router";
|
||
import { useDeviceStore } from "Stores/DeviceStore";
|
||
import { useEffect, useState } from "react";
|
||
import { useAuthenticationStore } from "Stores/AuthenticationStore";
|
||
import { getMySystems } from "Api/QuantumBackend/MachineManagment";
|
||
import MachinesListCard from "Components/ListCard/MachineListCard/MachinesListCard";
|
||
|
||
function DevicesPage() {
|
||
const { devices, setDevices, setTotalDevices, totalDevices, removeDevice } =
|
||
useDeviceStore();
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const { profile } = useAuthenticationStore();
|
||
const [cur_page, set_cur_page] = useState<number>(1);
|
||
const [page_size, set_page_size] = useState<number>(256);
|
||
|
||
useEffect(() => {
|
||
setIsLoading(true);
|
||
if (profile) {
|
||
getMySystems({ page_num: cur_page })
|
||
.then((devices) => {
|
||
setDevices(devices.systems);
|
||
set_cur_page(devices.cur_page);
|
||
setTotalDevices(devices.total_systems);
|
||
set_page_size(devices.page_size);
|
||
setIsLoading(false);
|
||
})
|
||
.catch(() => setIsLoading(false));
|
||
}
|
||
}, [profile]);
|
||
|
||
useEffect(() => {
|
||
if (profile) {
|
||
if (devices && devices.length > 0 && devices.length > page_size) {
|
||
removeDevice(devices[devices.length - 1].system.id);
|
||
}
|
||
if (
|
||
devices &&
|
||
devices.length > 0 &&
|
||
cur_page > Math.ceil(totalDevices / page_size)
|
||
) {
|
||
setIsLoading(true);
|
||
getMySystems({ page_num: Math.max(1, cur_page - 1) })
|
||
.then((devices) => {
|
||
setDevices(devices.systems);
|
||
set_cur_page(devices.cur_page);
|
||
setTotalDevices(devices.total_systems);
|
||
set_page_size(devices.page_size);
|
||
setIsLoading(false);
|
||
scroll({ top: 0 });
|
||
})
|
||
.catch(() => setIsLoading(false));
|
||
set_cur_page(Math.max(1, cur_page - 1));
|
||
}
|
||
if (
|
||
devices &&
|
||
devices.length > 0 &&
|
||
devices.length < Math.min(page_size, totalDevices) &&
|
||
cur_page != Math.ceil(totalDevices / page_size)
|
||
) {
|
||
getMySystems({ page_num: cur_page })
|
||
.then((devices) => {
|
||
setDevices(devices.systems);
|
||
set_cur_page(devices.cur_page);
|
||
setTotalDevices(devices.total_systems);
|
||
set_page_size(devices.page_size);
|
||
setIsLoading(false);
|
||
scroll({ top: 0 });
|
||
})
|
||
.catch(() => setIsLoading(false));
|
||
}
|
||
}
|
||
}, [profile, devices]);
|
||
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Device Page | QMolSim</title>
|
||
<meta
|
||
name="description"
|
||
content="Get all the devices connected to your or your team account"
|
||
/>
|
||
</Helmet>
|
||
<div className="DevicesPage">
|
||
<PaginationContainer
|
||
numberOfPages={Math.ceil(totalDevices / page_size)}
|
||
isLoading={isLoading}
|
||
activePage={cur_page}
|
||
setPage={(page) => {
|
||
getMySystems({ page_num: page })
|
||
.then((devices) => {
|
||
setDevices(devices.systems);
|
||
set_cur_page(devices.cur_page);
|
||
setTotalDevices(devices.total_systems);
|
||
set_page_size(devices.page_size);
|
||
setIsLoading(false);
|
||
scroll({ top: 0 });
|
||
})
|
||
.catch(() => setIsLoading(false));
|
||
}}
|
||
>
|
||
{devices.length == 0 && !isLoading && (
|
||
<Alert title="Подключенные устройства не найдены" color="blue">
|
||
Для того, чтобы добавить устройство, простмотрите{" "}
|
||
<Link to={"documentaion"} className="invisible_link">
|
||
документацию
|
||
</Link>
|
||
</Alert>
|
||
)}
|
||
{devices.map((machine) => {
|
||
return <MachinesListCard {...machine} />;
|
||
})}
|
||
</PaginationContainer>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default DevicesPage;
|