109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import { Alert, Center, Text } from "@mantine/core";
|
||
import "./ExperimentPage.css";
|
||
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
|
||
import { NewMoleculeModal } from "Modals/NewMolecule/NewMolecule";
|
||
import { useState } from "react";
|
||
import { Helmet } from "react-helmet";
|
||
import { IconPlus, IconSettings } from "@tabler/icons-react";
|
||
import { useParams } from "react-router";
|
||
import {
|
||
useExperimentStore,
|
||
useSelectedExperiment,
|
||
} from "Stores/ExperimentStore";
|
||
import CustomButton from "Components/CustomButton/CustomButton";
|
||
function ExperimentPage() {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const { experiment_id } = useParams();
|
||
const { selectedExperimentId, selectExperiment } = useExperimentStore();
|
||
|
||
if (
|
||
!selectedExperimentId ||
|
||
(Number(experiment_id) != selectedExperimentId && experiment_id)
|
||
) {
|
||
console.log(Number(experiment_id));
|
||
selectExperiment(Number(experiment_id));
|
||
}
|
||
|
||
const experiment = useSelectedExperiment();
|
||
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>
|
||
{experiment
|
||
? "Experiment " + experiment.id + " | QMolSim"
|
||
: "Error |QmolSim"}
|
||
</title>
|
||
<meta
|
||
name="description"
|
||
content="See the documentation on how to setup and use the qunatum computational system"
|
||
/>
|
||
</Helmet>
|
||
{experiment && (
|
||
<div className="ExperimentPage">
|
||
<NewMoleculeModal
|
||
isOpened={isOpen}
|
||
setIsOpened={(toOpen: boolean) => setIsOpen(toOpen)}
|
||
/>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "10px",
|
||
marginBottom: "15px",
|
||
}}
|
||
>
|
||
<div className="experimentButtons">
|
||
<CustomButton
|
||
color="contrast"
|
||
onClick={() => {
|
||
setIsOpen(true);
|
||
}}
|
||
icon={<IconPlus />}
|
||
text="Добавить задачу"
|
||
/>
|
||
<CustomButton
|
||
color="contrast"
|
||
style="outline"
|
||
onClick={() => {
|
||
setIsOpen(true);
|
||
}}
|
||
icon={<IconSettings />}
|
||
text="Параметры эксперимента"
|
||
/>
|
||
</div>
|
||
</div>
|
||
{experiment.tasks_ids.length > 0 && (
|
||
<PaginationContainer>
|
||
{experiment.tasks_ids.map((task: ExperimentTask) => {
|
||
return <div>{task.data.name}</div>;
|
||
})}
|
||
</PaginationContainer>
|
||
)}
|
||
{experiment.tasks_ids.length == 0 && (
|
||
<Alert>
|
||
<Center>
|
||
<Text size={"xl"} c="contrast">
|
||
Нет задач
|
||
</Text>
|
||
</Center>
|
||
</Alert>
|
||
)}
|
||
</div>
|
||
)}
|
||
{!experiment && (
|
||
<Alert color="red">
|
||
<Center>
|
||
{" "}
|
||
<Text c="contrast" size={"xl"} size="md">
|
||
Ошибка. Эксперимент не найден
|
||
</Text>{" "}
|
||
</Center>
|
||
</Alert>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default ExperimentPage;
|