-
+ );
};
diff --git a/frontend/src/src/components/Button.tsx b/frontend/src/src/components/Button.tsx
index c5c1f9a3..fd0f4ec8 100644
--- a/frontend/src/src/components/Button.tsx
+++ b/frontend/src/src/components/Button.tsx
@@ -1,21 +1,21 @@
interface ButtonProps {
- readonly label: string;
- readonly disabled?: boolean;
- readonly className?: string;
- readonly onClick?: () => void;
+ readonly label: string;
+ readonly disabled?: boolean;
+ readonly className?: string;
+ readonly onClick?: () => void;
}
export const Button = (props: ButtonProps) => {
- const { className, label, onClick } = props;
+ const { className, label, onClick } = props;
- return (
-
- );
+ return (
+
+ );
};
diff --git a/frontend/src/src/components/Chart.tsx b/frontend/src/src/components/Chart.tsx
index 5cf9a9d1..e1d92367 100644
--- a/frontend/src/src/components/Chart.tsx
+++ b/frontend/src/src/components/Chart.tsx
@@ -1,166 +1,149 @@
-import { ForwardedRef, forwardRef, useEffect, useState } from "react";
+import { Options, SeriesOptionsType } from "highcharts";
import HighCharts from "highcharts/highcharts";
-import {
- HighchartsReact,
- HighchartsReactRefObject,
-} from "highcharts-react-official";
import HighchartsBoost from "highcharts/modules/boost";
-import { Options, SeriesOptionsType } from "highcharts";
+import { HighchartsReact, HighchartsReactRefObject } from "highcharts-react-official";
+import { ForwardedRef, forwardRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
const hasWebGLSupport = () => {
- if (!!window.WebGLRenderingContext) {
- const canvas = document.createElement("canvas");
- const names = [
- "webgl",
- "experimental-webgl",
- "webgl2",
- "moz-webgl",
- "webkit-3d",
- ];
- return names.some((name) => {
- try {
- return !!canvas.getContext(name);
- } catch (e) {
- return false;
- }
- });
- }
+ if (window.WebGLRenderingContext) {
+ const canvas = document.createElement("canvas");
+ const names = ["webgl", "experimental-webgl", "webgl2", "moz-webgl", "webkit-3d"];
+ return names.some((name) => {
+ try {
+ return !!canvas.getContext(name);
+ } catch (e) {
+ return false;
+ }
+ });
+ }
- return false;
+ return false;
};
export interface ChartProps {
- readonly boost?: boolean;
- readonly title?: string;
- readonly height?: number;
- readonly legend?: boolean;
- readonly tooltip?: boolean;
- readonly zooming?: boolean;
- readonly lineWidth?: number;
- readonly lineColor?: string;
- readonly animation?: boolean;
- readonly tickInterval?: number;
- readonly tickPrecision?: number;
- readonly backgroundColor?: string;
- readonly series: SeriesOptionsType;
+ readonly boost?: boolean;
+ readonly title?: string;
+ readonly height?: number;
+ readonly legend?: boolean;
+ readonly tooltip?: boolean;
+ readonly zooming?: boolean;
+ readonly lineWidth?: number;
+ readonly lineColor?: string;
+ readonly animation?: boolean;
+ readonly tickInterval?: number;
+ readonly tickPrecision?: number;
+ readonly backgroundColor?: string;
+ readonly series: SeriesOptionsType;
}
export const Chart = forwardRef(
- (props: ChartProps, ref: ForwardedRef
-
+
- 
- 
- 
- {title}
-
+ return (
+
+
- );
+
+ {content.split("\n").map((item) => (
+
+
-
+
+
+
+ {title}
+
-
- {content.split("\n").map((item) => (
-
- {item}
-
-
+ {item}
+
+
-
- {children}
-
-
- );
+ return (
+
-
- {
- void handleCopy(children);
- }}
- >
- 
- 
-
- {!!fileName?.length && (
- {
- handleDownload(children);
- }}
- >
- 
-
- )}
-
+
+ {children}
+
+
+ );
};
diff --git a/frontend/src/src/components/Container.tsx b/frontend/src/src/components/Container.tsx
index 6ca7da28..3c6ce0d6 100644
--- a/frontend/src/src/components/Container.tsx
+++ b/frontend/src/src/components/Container.tsx
@@ -1,29 +1,27 @@
-import { ForwardedRef, ReactNode, forwardRef } from "react";
+import { ForwardedRef, forwardRef, ReactNode } from "react";
import { Toaster } from "react-hot-toast";
export interface ContainerProps
+
+ {
+ void handleCopy(children);
+ }}
+ >
+
+
+
+ {!!fileName?.length && (
+ {
+ handleDownload(children);
+ }}
+ >
+
+
+ )}
+
- {children}
- {toaster &&
- );
- }
-);
+ return (
+
+ {children}
+ {toaster &&
+ );
+});
diff --git a/frontend/src/src/components/Footer.tsx b/frontend/src/src/components/Footer.tsx
index 169b56c3..131b1419 100644
--- a/frontend/src/src/components/Footer.tsx
+++ b/frontend/src/src/components/Footer.tsx
@@ -1,35 +1,34 @@
import { useState } from "react";
-import { i18nConfig } from "../config/i18n";
-import repositoryIcon from "../assets/icons/github.svg";
import { Link } from "react-router-dom";
+import repositoryIcon from "../assets/icons/github.svg";
+import { i18nConfig } from "../config/i18n";
+
interface FooterProps {
- readonly author: string;
- readonly homepage: string;
- readonly repository: string;
- readonly currentLocale: string;
- readonly text: Record{title}
-
- 
-
-
- {title}
+
+
+
+
+
-
+ );
};
diff --git a/frontend/src/src/components/Input.tsx b/frontend/src/src/components/Input.tsx
index ab2da48a..52be143a 100644
--- a/frontend/src/src/components/Input.tsx
+++ b/frontend/src/src/components/Input.tsx
@@ -2,60 +2,52 @@ import { TextField } from "@mui/material";
import { ChangeEvent, InputHTMLAttributes } from "react";
interface InputProps {
- readonly label: string;
- readonly disabled?: boolean;
- readonly className?: string;
- readonly defaultValue: string | number;
- readonly numberLimit?: { max: number; min: number };
- readonly type: InputHTMLAttributes
- {children}
-
+ return (
+
+
- );
+ {children}
-
- {
- collapse_is_enabled && setCollapsed(!collapsed);
- }}
- >
- {collapse_is_enabled && (
-
- {text && !collapsed && (
-
- {
- collapse_is_enabled && setCollapsed(!collapsed);
- }}
- >
- {collapse_is_enabled && (
- 
- )}
- {label}
-
- {text && !collapsed && (
-
- {text.split("\n").map((item) => (
-
- )}
- {advanced && (
- {item}
- ))}
-
-
- )}
- {
- setAdvancedOpen(!advancedOpen);
- }}
- >
- 
- 
-
-
- {advanced}
-
-
+ {
+ collapseIsEnabled && setCollapsed(!collapsed);
+ }}
+ >
+ {collapseIsEnabled && (
+
+ {text && !collapsed && (
+
+ {
+ collapseIsEnabled && setCollapsed(!collapsed);
+ }}
+ >
+ {collapseIsEnabled && (
+
+ )}
+ {label}
+
+ {text && !collapsed && (
+
+ {text.split("\n").map((item) => (
+
+ )}
+ {advanced && (
+ {item}
+ ))}
+
+
+ )}
+ {
+ setAdvancedOpen(!advancedOpen);
+ }}
+ >
+
+
+
+ {advanced}
+
-
+ );
};
diff --git a/frontend/src/src/components/MapBox.tsx b/frontend/src/src/components/MapBox.tsx
index b8466321..c504e19b 100644
--- a/frontend/src/src/components/MapBox.tsx
+++ b/frontend/src/src/components/MapBox.tsx
@@ -1,71 +1,73 @@
+import "leaflet/dist/leaflet.css";
+
+import L from "leaflet";
import { useEffect, useRef } from "react";
import { MapContainer, Marker, TileLayer } from "react-leaflet";
+
import LocationIcon from "../assets/icons/location-dot-solid.svg";
-import "leaflet/dist/leaflet.css";
-import L from "leaflet";
export interface MapBoxProps {
- readonly className?: string;
- readonly minZoom: number;
- readonly maxZoom: number;
- readonly zoom: number;
- readonly tile: string;
- readonly center: [number, number];
- readonly marker?: [number, number];
- readonly scrollWheelZoom?: boolean;
- readonly zoomControl?: boolean;
- readonly flyTo?: boolean;
- readonly dragging?: boolean;
+ readonly className?: string;
+ readonly minZoom: number;
+ readonly maxZoom: number;
+ readonly zoom: number;
+ readonly tile: string;
+ readonly center: [number, number];
+ readonly marker?: [number, number];
+ readonly scrollWheelZoom?: boolean;
+ readonly zoomControl?: boolean;
+ readonly flyTo?: boolean;
+ readonly dragging?: boolean;
}
export const MapBox = (props: MapBoxProps) => {
- const {
- className,
- minZoom,
- flyTo,
- maxZoom,
- zoom,
- tile,
- center,
- marker,
- scrollWheelZoom,
- zoomControl,
- dragging,
- } = props;
- const icon = new L.Icon({
- iconUrl: LocationIcon,
- iconAnchor: [9, 24],
- iconSize: [18, 25],
- });
+ const {
+ className,
+ minZoom,
+ flyTo,
+ maxZoom,
+ zoom,
+ tile,
+ center,
+ marker,
+ scrollWheelZoom,
+ zoomControl,
+ dragging
+ } = props;
+ const icon = new L.Icon({
+ iconUrl: LocationIcon,
+ iconAnchor: [9, 24],
+ iconSize: [18, 25]
+ });
- const mapRef = useRef
- {icon && (
- 
- )}
+ return (
+
+
+
- );
+
+ {icon && (
+
+ )}
-
-
-
-
- {label}
-
-
- {`${value} ${unit ?? ""}`}
-
-
+
+
+ {label}
+
+
+ {`${value} ${unit ?? ""}`}
+
+
-
- );
+ return (
+
-
-
- {sublabel && (
-
- {sublabel}
- )} -- {label} -
-
- {children}
-
-
+
+ );
};
diff --git a/frontend/src/src/components/Progress.tsx b/frontend/src/src/components/Progress.tsx
index ec9876fd..e31f691d 100644
--- a/frontend/src/src/components/Progress.tsx
+++ b/frontend/src/src/components/Progress.tsx
@@ -1,43 +1,40 @@
import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
+
import cancelIcon from "../assets/icons/xmark-solid.svg";
export interface ProgressProps {
- readonly precision?: number;
- readonly label?: string;
- readonly value: number;
- readonly onCancel?: () => void;
+ readonly precision?: number;
+ readonly label?: string;
+ readonly value: number;
+ readonly onCancel?: () => void;
}
export const Progress = (props: ProgressProps) => {
- const { value, label, precision, onCancel } = props;
+ const { value, label, precision, onCancel } = props;
- return (
-
+
+
+ {sublabel &&
+ {sublabel}
} +{label}
+
+ {children}
+
+
- 
-
-
+
+
+
- {[...new Array(skeletonRows)].map((_, index) => (
-
- );
+ return (
+
-
-
-
-
-
-
-
- ))}
-
+ {[...new Array(skeletonRows)].map((_, index) => (
+
+ );
};
diff --git a/frontend/src/src/components/Table.tsx b/frontend/src/src/components/Table.tsx
index 060058c2..b7821f0f 100644
--- a/frontend/src/src/components/Table.tsx
+++ b/frontend/src/src/components/Table.tsx
@@ -1,141 +1,118 @@
import { useState } from "react";
+
import folderIcon from "../assets/icons/folder-open-regular.svg";
export interface TableColumn {
- key: string;
- label: string;
+ key: string;
+ label: string;
}
export interface TableData {
- [key: TableColumn["key"]]: string | number;
+ [key: TableColumn["key"]]: string | number;
}
export interface TableAction {
- icon: string;
- label: string;
- onClick?: (data: TableData) => void;
+ icon: string;
+ label: string;
+ onClick?: (data: TableData) => void;
}
export interface TableProps {
- data?: TableData[];
- columns: TableColumn[];
- actions: TableAction[];
- placeholder: string;
- rowsLimit?: number;
- loadMoreText?: string;
+ data?: TableData[];
+ columns: TableColumn[];
+ actions: TableAction[];
+ placeholder: string;
+ rowsLimit?: number;
+ loadMoreText?: string;
}
export const Table = (props: TableProps) => {
- const { columns, actions, data, placeholder, rowsLimit, loadMoreText } =
- props;
+ const { columns, actions, data, placeholder, rowsLimit, loadMoreText } = props;
- const [rowsLength, setRowsLength] = useState(rowsLimit ?? -1);
+ const [rowsLength, setRowsLength] = useState(rowsLimit ?? -1);
- const loadMoreRows = () => {
- setRowsLength((currentLength) => currentLength + (rowsLimit ?? 0));
- };
+ const loadMoreRows = () => {
+ setRowsLength((currentLength) => currentLength + (rowsLimit ?? 0));
+ };
- return (
-
+
+
+
+
+
+
+
+ ))}
+
- {!!data?.length ? (
-
- );
+ return (
+
-
-
-
- {rowsLength !== -1 && data.length > rowsLength && (
-
- ) : (
- | - {label} - | - ))} - {actions.map(({ label }) => ( -- {label} - | - ))} -
|---|---|
| - {columns - .filter( - ({ key }) => - key === - columns[_index] - .key - ) - .map( - ({ key }) => - item[key] - ) || _item} - | - ) - )} - {actions.map( - ({ icon, label, onClick }) => ( - {
- onClick &&
- onClick(item);
- }}
- >
- |
- )
- )}
-
- {loadMoreText ?? "Load more..."}
-
- )}
-
- 
-
- )}
- - {placeholder} -
-
+ {data?.length ? (
+
+ );
};
diff --git a/frontend/src/src/components/TimePicker.tsx b/frontend/src/src/components/TimePicker.tsx
index 7834d900..909d844a 100644
--- a/frontend/src/src/components/TimePicker.tsx
+++ b/frontend/src/src/components/TimePicker.tsx
@@ -1,84 +1,73 @@
-import {
- DateTimePicker,
- LocalizationProvider,
- renderTimeViewClock,
-} from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { DateTimePicker, LocalizationProvider, renderTimeViewClock } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import * as XDatePickers from "@mui/x-date-pickers/locales";
import * as DateFnsLang from "date-fns/locale";
export interface TimePickerProps {
- readonly label: string;
- readonly value?: number;
- readonly defaultValue?: number;
- readonly currentLocale: string;
- readonly onChange: (value: number) => void;
+ readonly label: string;
+ readonly value?: number;
+ readonly defaultValue?: number;
+ readonly currentLocale: string;
+ readonly onChange: (value: number) => void;
}
export const TimePicker = (props: TimePickerProps) => {
- const { label, onChange, value, defaultValue, currentLocale } = props;
+ const { label, onChange, value, defaultValue, currentLocale } = props;
- const themeRecords = Object.entries(XDatePickers).reduce(
- (acc, [locale, value]) => {
- acc[locale] = value;
- return acc;
- },
- {} as Record
+
+
+
+ {rowsLength !== -1 && data.length > rowsLength && (
+
+ ) : (
+ | + {label} + | + ))} + {actions.map(({ label }) => ( ++ {label} + | + ))} +
|---|---|
| + {columns + .filter( + ({ key }) => key === columns[_index].key + ) + .map(({ key }) => item[key]) || _item} + | + ))} + {actions.map(({ icon, label, onClick }) => ( + {
+ onClick && onClick(item);
+ }}
+ >
+ |
+ ))}
+
+ {loadMoreText ?? "Load more..."}
+
+ )}
+
+
+
+ )}
+