deleted unnecessary files
added new features
This commit is contained in:
IDONTSUDO
parent
6840402b1f
commit
c17515d571
47 changed files with 1039 additions and 479 deletions
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 5.75C2 5.33579 2.33579 5 2.75 5H20.75C21.1642 5 21.5 5.33579 21.5 5.75C21.5 6.16421 21.1642 6.5 20.75 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75ZM2 9.75C2 9.33579 2.33579 9 2.75 9H20.75C21.1642 9 21.5 9.33579 21.5 9.75C21.5 10.1642 21.1642 10.5 20.75 10.5H2.75C2.33579 10.5 2 10.1642 2 9.75ZM20.2113 12.6586C20.5379 12.9134 20.5961 13.3847 20.3414 13.7113L16.4414 18.7113C16.3022 18.8897 16.0899 18.9958 15.8636 18.9999C15.6373 19.004 15.4213 18.9057 15.2757 18.7324L13.1757 16.2324C12.9093 15.9152 12.9504 15.4421 13.2676 15.1757C13.5848 14.9093 14.0579 14.9504 14.3243 15.2676L15.8284 17.0582L19.1586 12.7887C19.4134 12.4621 19.8847 12.4039 20.2113 12.6586ZM2 13.75C2 13.3358 2.33579 13 2.75 13H9.75C10.1642 13 10.5 13.3358 10.5 13.75C10.5 14.1642 10.1642 14.5 9.75 14.5H2.75C2.33579 14.5 2 14.1642 2 13.75ZM2 17.75C2 17.3358 2.33579 17 2.75 17H9.75C10.1642 17 10.5 17.3358 10.5 17.75C10.5 18.1642 10.1642 18.5 9.75 18.5H2.75C2.33579 18.5 2 18.1642 2 17.75Z" fill="#f46036"/> </g>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
ui/src/core/assets/images/pose_estemation.jpg
Normal file
BIN
ui/src/core/assets/images/pose_estemation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -22,7 +22,10 @@ declare global {
|
|||
}
|
||||
interface Number {
|
||||
fromArray(): number[];
|
||||
toPx(): string;
|
||||
unixFromDate(): string;
|
||||
}
|
||||
|
||||
interface String {
|
||||
isEmpty(): boolean;
|
||||
isNotEmpty(): boolean;
|
||||
|
|
|
|||
|
|
@ -5,4 +5,17 @@ export const NumberExtensions = () => {
|
|||
return Array.from(this.toString()).map((el) => Number(el));
|
||||
};
|
||||
}
|
||||
if (Number().toPx === undefined) {
|
||||
// eslint-disable-next-line no-extend-native
|
||||
Number.prototype.toPx = function () {
|
||||
return String(this) + "px";
|
||||
};
|
||||
}
|
||||
if (Number().unixFromDate === undefined) {
|
||||
// eslint-disable-next-line no-extend-native
|
||||
Number.prototype.unixFromDate = function () {
|
||||
const date = new Date(Number(this) * 1000);
|
||||
return `${date.getUTCFullYear()}.${date.getMonth()}.${date.getDay()} ${date.getHours()}:${date.getMinutes()}`;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,8 +15,12 @@ import {
|
|||
import {
|
||||
StickObjectsMarkingScreen,
|
||||
StickObjectsMarkingScreenPath,
|
||||
} from "../../features/stick_objects_marking/stick_objects_marking_screen";
|
||||
} from "../../features/_stick_objects_marking/stick_objects_marking_screen";
|
||||
import { DataSetScreen, DatasetsScreenPath } from "../../features/dataset/dataset_screen";
|
||||
import DetailsScreen, { DetailsScreenPath } from "../../features/details/details_screen";
|
||||
import { AssemblesScreen, AssemblesScreenPath } from "../../features/assembles/assembles_screen";
|
||||
import SimulationScreen, { SimulationScreenPath } from "../../features/simulations/simulations_screen";
|
||||
import { EstimateScreen, EstimateScreenPath } from "../../features/estimate/estimate_screen";
|
||||
|
||||
const idURL = ":id";
|
||||
|
||||
|
|
@ -51,4 +55,21 @@ export const router = createBrowserRouter([
|
|||
path: DatasetsScreenPath,
|
||||
element: <DataSetScreen />,
|
||||
},
|
||||
{
|
||||
path: DetailsScreenPath,
|
||||
element: <DetailsScreen />,
|
||||
},
|
||||
{
|
||||
path: AssemblesScreenPath,
|
||||
element: <AssemblesScreen />,
|
||||
},
|
||||
{
|
||||
path: SimulationScreenPath,
|
||||
element: <SimulationScreen />,
|
||||
},
|
||||
|
||||
{
|
||||
path: EstimateScreenPath,
|
||||
element: <EstimateScreen />,
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
32
ui/src/core/ui/button/button.tsx
Normal file
32
ui/src/core/ui/button/button.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import * as React from "react";
|
||||
import { CoreText, CoreTextType } from "../text/text";
|
||||
|
||||
export interface IButtonProps {
|
||||
block?: boolean;
|
||||
filled?: boolean;
|
||||
text?: string;
|
||||
onClick?: any;
|
||||
}
|
||||
|
||||
export function CoreButton(props: IButtonProps) {
|
||||
return (
|
||||
<div
|
||||
onClick={() => props.onClick?.call()}
|
||||
style={{
|
||||
backgroundColor: props.filled ? "rgba(103, 80, 164, 1)" : "",
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
borderRadius: 24,
|
||||
border: props.block ? "1px solid rgba(29, 27, 32, 0.12)" : props.filled ? "" : "1px solid black",
|
||||
}}
|
||||
>
|
||||
<CoreText
|
||||
text={props.text ?? ""}
|
||||
type={CoreTextType.medium}
|
||||
color={props.block ? "#1D1B20" : props.filled ? "white" : "rgba(103, 80, 164, 1)"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
ui/src/core/ui/card/card_dataset.tsx
Normal file
97
ui/src/core/ui/card/card_dataset.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { Spin } from "antd";
|
||||
import { LoadingOutlined } from "@ant-design/icons";
|
||||
import poseIMG from "../../assets/images/pose_estemation.jpg";
|
||||
import { Icon } from "../icons/icons";
|
||||
import { CoreText, CoreTextType } from "../text/text";
|
||||
import { CoreButton } from "../button/button";
|
||||
|
||||
export const enum CardDataSetType {
|
||||
EMPTY = "EMPTY",
|
||||
COMPLETED = "COMPLETED",
|
||||
}
|
||||
|
||||
interface ICardDataSetProps {
|
||||
type: CardDataSetType;
|
||||
neuralNetworkAction?: string;
|
||||
neuralNetworkName?: string;
|
||||
objects?: string[];
|
||||
unixDate?: number;
|
||||
processStatus?: string;
|
||||
onClickButton?: (id: string) => void;
|
||||
onClickEmptyCard?: Function;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const CardDataSet = (props: ICardDataSetProps) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: 272,
|
||||
height: 372,
|
||||
borderRadius: 12,
|
||||
border: "1px solid #CAC4D0",
|
||||
backgroundColor: "rgba(254, 247, 255, 1)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (props.type.isEqual(CardDataSetType.EMPTY) && props.onClickEmptyCard) {
|
||||
props.onClickEmptyCard();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style={{ height: 80 }}>
|
||||
{props.type.isEqual(CardDataSetType.EMPTY) ? null : (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div style={{ width: 70, marginTop: 11 }}></div>
|
||||
<div style={{ height: 80, alignContent: "center", marginRight: 40 }}>
|
||||
<CoreText text={props.neuralNetworkName ?? ""} type={CoreTextType.header} />
|
||||
<CoreText text={props.neuralNetworkAction ?? ""} type={CoreTextType.medium} />
|
||||
</div>
|
||||
<div>
|
||||
<Icon type="Settings" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<img alt="pose" style={{ width: "100%" }} src={poseIMG}></img>
|
||||
<div
|
||||
style={{
|
||||
textAlignLast: props.type.isEqual(CardDataSetType.EMPTY) ? "center" : "auto",
|
||||
marginTop: props.type.isEqual(CardDataSetType.EMPTY) ? 80 : 10,
|
||||
}}
|
||||
>
|
||||
{props.type === CardDataSetType.EMPTY ? (
|
||||
<Icon type="PlusCircle" />
|
||||
) : (
|
||||
<div style={{ margin: 10 }}>
|
||||
<CoreText text={`Объектов: ${props.objects?.length ?? 0}`} type={CoreTextType.large} />
|
||||
<CoreText text={Number(props.unixDate).unixFromDate()} type={CoreTextType.medium} color="#49454F" />
|
||||
<div style={{ height: 40 }} />
|
||||
<div style={{ width: 240, overflow: "hidden", whiteSpace: "nowrap", height: 40 }}>
|
||||
<CoreText text={props.objects?.join(", ") ?? ""} type={CoreTextType.medium} color="#49454F" />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end", alignItems: "center" }}>
|
||||
{props.processStatus === "exec" ? (
|
||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 34, color: "rgba(103, 80, 164, 1)" }} spin />} />
|
||||
) : null}
|
||||
<div style={{ width: 20 }} />
|
||||
{props.processStatus === "new" ? (
|
||||
<CoreButton
|
||||
onClick={() => {
|
||||
if (props.type.isEqual(CardDataSetType.COMPLETED) && props.onClickButton && props.id) {
|
||||
props.onClickButton(props.id);
|
||||
}
|
||||
}}
|
||||
filled={true}
|
||||
text="Старт"
|
||||
/>
|
||||
) : (
|
||||
<CoreButton text="Завершено" block={true} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -3,9 +3,7 @@ import { Input, Select, Button } from "antd";
|
|||
import { InputBuilderViewModel, InputType } from "./form_view_model";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { FormBuilderStore } from "./form_builder_store";
|
||||
import { extensions } from "../../extensions/extensions";
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_store";
|
||||
extensions();
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_model";
|
||||
|
||||
export interface IFormBuilder {
|
||||
context: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { makeAutoObservable } from "mobx";
|
||||
import { FormViewModel } from "./form_view_model";
|
||||
import { TypedEvent } from "../../helper/typed_event";
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_store";
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_model";
|
||||
|
||||
export class ChangerForm extends TypedEvent<FormBuilderValidationModel | undefined> {}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { makeAutoObservable, observable } from "mobx";
|
||||
import { Result } from "../../helper/result";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_store";
|
||||
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_model";
|
||||
|
||||
export enum InputType {
|
||||
NUMBER = "number",
|
||||
|
|
@ -48,16 +48,16 @@ export class FormViewModel {
|
|||
this.inputs = inputs;
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
public fromFormBuilderValidationModel() {
|
||||
console.log(this.toResult());
|
||||
return new FormBuilderValidationModel(
|
||||
this.context,
|
||||
this.result,
|
||||
this.inputs.map((el) => el.toJson()),
|
||||
this.toResult()
|
||||
JSON.parse(this.toResult().replaceAll("\n", "").replaceAll("\\", "").replaceAll("/", ""))
|
||||
);
|
||||
}
|
||||
public toResult() {
|
||||
public toResult(): string {
|
||||
let result = this.result;
|
||||
|
||||
this.inputs.forEach((element) => {
|
||||
|
|
@ -97,6 +97,7 @@ export class FormViewModel {
|
|||
if (inputResult instanceof Array) inputResult = JSON.stringify(inputResult);
|
||||
result = result.replace(new RegExp("\\${" + element.name + ".*?}"), inputResult);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
static fromString(result: string, context: string): Result<void, FormViewModel> {
|
||||
|
|
|
|||
89
ui/src/core/ui/icons/icons.tsx
Normal file
89
ui/src/core/ui/icons/icons.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import * as React from "react";
|
||||
import { Result } from "../../helper/result";
|
||||
|
||||
export interface IIconsProps {
|
||||
type: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export function Icon(props: IIconsProps) {
|
||||
const icon = getIconSvg(props.type);
|
||||
return icon.fold(
|
||||
(node) => {
|
||||
return <div style={props.style}>{node}</div>;
|
||||
},
|
||||
() => (
|
||||
<div style={props.style}>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z"
|
||||
fill="#49454F"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
const getIconSvg = (type: string): Result<undefined, React.JSX.Element> => {
|
||||
switch (type) {
|
||||
case "PlusCircle":
|
||||
return Result.ok(
|
||||
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.5003 1.32007C8.09487 1.32007 1.32031 8.09463 1.32031 16.5001C1.32031 24.9055 8.09487 31.6801 16.5003 31.6801C24.9058 31.6801 31.6803 24.9055 31.6803 16.5001C31.6803 8.09463 24.9058 1.32007 16.5003 1.32007ZM16.5003 2.64007C24.1989 2.64007 30.3603 8.80151 30.3603 16.5001C30.3603 24.1986 24.1989 30.3601 16.5003 30.3601C8.80176 30.3601 2.64031 24.1986 2.64031 16.5001C2.64031 8.80151 8.80176 2.64007 16.5003 2.64007ZM15.8403 8.58007V15.8401H8.58031V17.1601H15.8403V24.4201H17.1603V17.1601H24.4203V15.8401H17.1603V8.58007H15.8403Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case "Pencil":
|
||||
return Result.ok(
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.06 0.589883L17.41 1.93988C18.2 2.71988 18.2 3.98988 17.41 4.76988L4.18 17.9999H0V13.8199L10.4 3.40988L13.23 0.589883C14.01 -0.190117 15.28 -0.190117 16.06 0.589883ZM2 15.9999L3.41 16.0599L13.23 6.22988L11.82 4.81988L2 14.6399V15.9999Z"
|
||||
fill="#31111D"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case "MenuFab":
|
||||
return Result.ok(
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_54850_114)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11 16V14L29 14V16L11 16ZM11 21H29V19H11V21ZM11 26H29V24H11V26Z"
|
||||
fill="#49454F"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_54850_114">
|
||||
<rect width="40" height="40" rx="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
case "Settings":
|
||||
return Result.ok(
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_54841_7268)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M27.3102 33.03C27.2102 33.71 26.5902 34.25 25.8502 34.25H22.1502C21.4102 34.25 20.7902 33.71 20.7002 32.98L20.4302 31.09C20.1602 30.95 19.9002 30.8 19.6402 30.63L17.8402 31.35C17.1402 31.61 16.3702 31.32 16.0302 30.7L14.2002 27.53C13.8502 26.87 14.0002 26.09 14.5602 25.65L16.0902 24.46C16.0802 24.31 16.0702 24.16 16.0702 24C16.0702 23.85 16.0802 23.69 16.0902 23.54L14.5702 22.35C13.9802 21.9 13.8302 21.09 14.2002 20.47L16.0502 17.28C16.3902 16.66 17.1602 16.38 17.8402 16.65L19.6502 17.38C19.9102 17.21 20.1702 17.06 20.4302 16.92L20.7002 15.01C20.7902 14.31 21.4102 13.76 22.1402 13.76H25.8402C26.5802 13.76 27.2002 14.3 27.2902 15.03L27.5602 16.92C27.8302 17.06 28.0902 17.21 28.3502 17.38L30.1502 16.66C30.8602 16.4 31.6302 16.69 31.9702 17.31L33.8102 20.49C34.1702 21.15 34.0102 21.93 33.4502 22.37L31.9302 23.56C31.9402 23.71 31.9502 23.86 31.9502 24.02C31.9502 24.18 31.9402 24.33 31.9302 24.48L33.4502 25.67C34.0102 26.12 34.1702 26.9 33.8202 27.53L31.9602 30.75C31.6202 31.37 30.8502 31.65 30.1602 31.38L28.3602 30.66C28.1002 30.83 27.8402 30.98 27.5802 31.12L27.3102 33.03ZM22.6202 32.25H25.3802L25.7502 29.7L26.2802 29.48C26.7202 29.3 27.1602 29.04 27.6202 28.7L28.0702 28.36L30.4502 29.32L31.8302 26.92L29.8002 25.34L29.8702 24.78L29.8733 24.7531C29.9023 24.5027 29.9302 24.2607 29.9302 24C29.9302 23.73 29.9002 23.47 29.8702 23.22L29.8002 22.66L31.8302 21.08L30.4402 18.68L28.0502 19.64L27.6002 19.29C27.1802 18.97 26.7302 18.71 26.2702 18.52L25.7502 18.3L25.3802 15.75H22.6202L22.2502 18.3L21.7202 18.51C21.2802 18.7 20.8402 18.95 20.3802 19.3L19.9302 19.63L17.5502 18.68L16.1602 21.07L18.1902 22.65L18.1202 23.21C18.0902 23.47 18.0602 23.74 18.0602 24C18.0602 24.26 18.0802 24.53 18.1202 24.78L18.1902 25.34L16.1602 26.92L17.5402 29.32L19.9302 28.36L20.3802 28.71C20.8102 29.04 21.2402 29.29 21.7102 29.48L22.2402 29.7L22.6202 32.25ZM27.5002 24C27.5002 25.933 25.9332 27.5 24.0002 27.5C22.0672 27.5 20.5002 25.933 20.5002 24C20.5002 22.067 22.0672 20.5 24.0002 20.5C25.9332 20.5 27.5002 22.067 27.5002 24Z"
|
||||
fill="#49454F"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_54841_7268">
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return Result.error(undefined);
|
||||
};
|
||||
126
ui/src/core/ui/pages/main_page.tsx
Normal file
126
ui/src/core/ui/pages/main_page.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { DatasetsScreenPath } from "../../../features/dataset/dataset_screen";
|
||||
import { Icon } from "../icons/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Spin } from "antd";
|
||||
import { LoadingOutlined } from "@ant-design/icons";
|
||||
import React from "react";
|
||||
import { SceneManagerPath } from "../../../features/scene_manager/presentation/scene_manager";
|
||||
import { AssemblesScreenPath } from "../../../features/assembles/assembles_screen";
|
||||
import { DetailsScreenPath } from "../../../features/details/details_screen";
|
||||
import { SimulationScreenPath } from "../../../features/simulations/simulations_screen";
|
||||
import { EstimateScreenPath } from "../../../features/estimate/estimate_screen";
|
||||
import { BehaviorTreeBuilderPath } from "../../../features/behavior_tree_builder/presentation/behavior_tree_builder_screen";
|
||||
export interface IBlockProps {
|
||||
name: string;
|
||||
isActive: boolean;
|
||||
path: string;
|
||||
}
|
||||
const Block = (props: IBlockProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div onClick={() => navigate(props.path)} style={{ height: 56, cursor: "pointer" }}>
|
||||
<div
|
||||
style={
|
||||
props.isActive
|
||||
? {
|
||||
textAlignLast: "center",
|
||||
height: 32,
|
||||
backgroundColor: "rgba(232, 222, 248, 1)",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
alignContent: "center",
|
||||
borderRadius: 12,
|
||||
}
|
||||
: { textAlignLast: "center", alignContent: "center" }
|
||||
}
|
||||
>
|
||||
<Icon type={props.name} />
|
||||
</div>
|
||||
<div style={{ textAlignLast: "center" }}>{props.name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export interface IMainPageProps {
|
||||
page: string;
|
||||
bodyChildren?: JSX.Element;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
export const MainPage = (props: IMainPageProps) => {
|
||||
const blocksNames = [
|
||||
{ name: "Детали", path: DetailsScreenPath },
|
||||
{ name: "Сборки", path: AssemblesScreenPath },
|
||||
{ name: "Датасеты", path: DatasetsScreenPath },
|
||||
{ name: "Сцена", path: SceneManagerPath },
|
||||
{ name: "Навыки", path: BehaviorTreeBuilderPath },
|
||||
{ name: "Симуляция", path: SimulationScreenPath },
|
||||
{ name: "Оценка", path: EstimateScreenPath },
|
||||
];
|
||||
const blocks: IBlockProps[] = blocksNames
|
||||
.map((el) => {
|
||||
return { name: el.name, isActive: false, path: el.path };
|
||||
})
|
||||
.map((el) => {
|
||||
if (el.name.isEqual(props.page)) {
|
||||
el.isActive = true;
|
||||
return el;
|
||||
}
|
||||
return el;
|
||||
});
|
||||
React.useEffect(() => {
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.body.style.overflow = "scroll";
|
||||
};
|
||||
});
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
height: window.innerHeight,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ paddingTop: 43 }}>
|
||||
<div style={{ textAlignLast: "center" }}>
|
||||
<Icon type="MenuFab" />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
textAlignLast: "center",
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "#ffd9e4",
|
||||
alignContent: "center",
|
||||
}}
|
||||
>
|
||||
<Icon style={{ marginTop: 3 }} type="Pencil" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{blocks.map((el) => (
|
||||
<Block isActive={el.isActive} name={el.name} path={el.path} />
|
||||
))}
|
||||
</div>
|
||||
<div style={{ paddingBottom: 10 }}>
|
||||
<Icon type={"Settings"} />
|
||||
</div>
|
||||
</div>
|
||||
{props.isLoading ? (
|
||||
<div style={{ alignContent: "center", width: "100%", textAlign: "center" }}>
|
||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 68, color: "rgba(103, 80, 164, 1)" }} spin />} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ width: 241, height: window.innerHeight, backgroundColor: "#F7F2FA", borderRadius: 16 }}> </div>
|
||||
{props.bodyChildren}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,14 +2,63 @@ import * as React from "react";
|
|||
|
||||
export enum CoreTextType {
|
||||
header,
|
||||
medium,
|
||||
large,
|
||||
}
|
||||
|
||||
export interface ITextProps {
|
||||
text: string;
|
||||
type: CoreTextType;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export function CoreText(props: ITextProps) {
|
||||
if (props.type === CoreTextType.header) return <div style={{ color: "white", fontSize: "20px" }}>{props.text}</div>;
|
||||
if (props.type === CoreTextType.large) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
color: props.color ?? "#1D1B20",
|
||||
fontSize: 16,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: 400,
|
||||
fontSizeAdjust: 14,
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{props.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (props.type === CoreTextType.medium)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
color: props.color ?? "#1D1B20",
|
||||
fontSize: 14,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: 400,
|
||||
textOverflow: "ellipsis",
|
||||
fontSizeAdjust: 14,
|
||||
}}
|
||||
>
|
||||
{props.text}
|
||||
</div>
|
||||
);
|
||||
if (props.type === CoreTextType.header)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
color: props.color ?? "#1D1B20",
|
||||
fontSize: 20,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: 500,
|
||||
textOverflow: "ellipsis",
|
||||
|
||||
fontSizeAdjust: 16,
|
||||
}}
|
||||
>
|
||||
{props.text}
|
||||
</div>
|
||||
);
|
||||
return <div>{props.text}</div>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue