+ {loadBackend.state === "fulfilled" &&
+
+ }
+ {loadBackend.state === "pending" &&
+ {`${loadBackend.error}`}
}
+
+
+
+
+
+ {state.kind == "empty" && removeFile()}
+ />
+ )}
+ {state.kind == "awaiting" && (
+ setBoard(board)}
+ onDownloadClick={() => download(board)}
+ onUploadClick={() => {
+ if (state.kind == "send") upload(board, state.file);
+ }}
+ />
+ )}
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.module.scss b/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.module.scss
new file mode 100644
index 000000000..0989f4dfd
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.module.scss
@@ -0,0 +1,30 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.dropElementWrapper {
+ flex: 1 1 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ outline: 1px dashed colors.getThemeColor("border");
+ border-radius: styles.$large-border-radius;
+
+ text-align: center;
+ overflow: hidden;
+ min-width: 6rem;
+}
+
+.dragOver {
+ outline: 2px solid colors.getThemeColor("primary");
+ background-color: colors.getThemeColor("primary-surface");
+}
+
+.link {
+ font-weight: bold;
+ color: colors.getThemeColor("primary");
+
+ &:hover {
+ color: colors.getThemeColor("primary-hover");
+ }
+}
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.tsx b/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.tsx
new file mode 100644
index 000000000..9c788d6af
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/DropElement/DropElement.tsx
@@ -0,0 +1,48 @@
+import styles from "./DropElement.module.scss";
+import { useState } from "react";
+import { FileInput } from "components/FormComponents/FileInput/FileInput";
+import { getFile } from "../getFile";
+
+type Props = {
+ onFile: (file: File) => void;
+};
+
+export const DropElement = ({ onFile }: Props) => {
+ const [isDragOver, setDragOver] = useState(false);
+
+ return (
+ {
+ setDragOver(true);
+ }}
+ onDragLeave={(ev) => {
+ if (ev.currentTarget.contains(ev.relatedTarget as Node)) {
+ return;
+ }
+ setDragOver(false);
+ }}
+ // onDragLeaveCapture={() => setDragOver(false)}
+ onDrop={(ev) => {
+ const file = getFile(ev, "bin");
+ if (file) {
+ onFile(file);
+ }
+ }}
+ onDragOver={(ev) => ev.preventDefault()}
+ >
+
+ );
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/AnimatedEllipsis/AnimatedEllipsis.tsx b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/AnimatedEllipsis/AnimatedEllipsis.tsx
new file mode 100644
index 000000000..7c86c5d5d
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/AnimatedEllipsis/AnimatedEllipsis.tsx
@@ -0,0 +1,14 @@
+import { useInterval } from "hooks/useInterval";
+import { useState } from "react";
+
+export const AnimatedEllipsis = () => {
+ const [points, setPoints] = useState(["."]);
+
+ useInterval(() => {
+ setPoints((prevPoints) => {
+ return new Array((prevPoints.length + 1) % 4).fill(".");
+ });
+ }, 800);
+
+ return {points};
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.module.scss b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.module.scss
new file mode 100644
index 000000000..d4400dfb5
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.module.scss
@@ -0,0 +1,10 @@
+.awaitElementWrapper {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: stretch;
+ font-size: 1.5rem;
+ text-align: center;
+ gap: 1rem;
+}
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.tsx b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.tsx
new file mode 100644
index 000000000..d814eb2ea
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/LoadingElement/LoadingElement.tsx
@@ -0,0 +1,15 @@
+import styles from "./LoadingElement.module.scss";
+import { ProgressBar } from "components/ProgressBar/ProgressBar";
+
+type Props = {
+ progress: number;
+};
+
+export const LoadingElement = ({ progress }: Props) => {
+ return (
+
+ Drop or
+
+
+ Loading
+
+ );
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.module.scss b/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.module.scss
new file mode 100644
index 000000000..313614f38
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.module.scss
@@ -0,0 +1,22 @@
+@use "src/styles/colors" as colors;
+
+.responseElementWrapper {
+ flex: 1 1 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5rem;
+ gap: 0.5rem;
+}
+
+.icon {
+ font-size: 2rem;
+}
+
+.successIcon {
+ color: colors.getThemeColor("success");
+}
+
+.failureIcon {
+ color: colors.getThemeColor("error");
+}
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.tsx b/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.tsx
new file mode 100644
index 000000000..f9bfcfc2e
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/ResponseElement/ResponseElement.tsx
@@ -0,0 +1,30 @@
+import styles from "./ResponseElement.module.scss";
+import { HiCheckCircle } from "react-icons/hi";
+import { MdCancel } from "react-icons/md";
+
+type Props = {
+ success: boolean;
+};
+
+export const ResponseElement = ({ success }: Props) => {
+ return (
+
+ {success && (
+ <>
+
+ );
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.module.scss b/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.module.scss
new file mode 100644
index 000000000..e3365be57
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.module.scss
@@ -0,0 +1,46 @@
+@use "src/styles/colors" as colors;
+
+.sendElementWrapper {
+ flex: 1 1 0;
+ align-self: center;
+ height: fit-content;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem 0.5rem;
+ border-radius: 1rem;
+ background-color: colors.getThemeColor("surface-variant");
+}
+
+.fileIcon {
+ font-size: 0.9rem;
+ color: colors.getThemeColor("secondary");
+}
+
+.fileData {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ text-overflow: ellipsis;
+ font-size: 1rem;
+ color: colors.getThemeColor("text-primary");
+}
+
+.name {
+ flex: 1 1 0;
+ font-weight: bold;
+ text-overflow: ellipsis;
+}
+
+.removeBtn {
+ cursor: pointer;
+ width: 25px;
+ height: 25px;
+ color: colors.getThemeColor("text-secondary");
+
+ &:hover {
+ color: colors.getThemeColor("error");
+ }
+}
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.tsx b/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.tsx
new file mode 100644
index 000000000..400e87a0f
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/SendElement/SendElement.tsx
@@ -0,0 +1,24 @@
+import styles from "./SendElement.module.scss";
+import { ReactComponent as FileIcon } from "assets/svg/binary-file.svg";
+import { ReactComponent as Cross } from "assets/svg/cross.svg";
+
+type Props = {
+ file: { name: string; size: number };
+ onRemove: () => void;
+};
+
+export const SendElement = ({ file, onRemove }: Props) => {
+ return (
+
+ onRemove()}
+ />
+
+ );
+};
diff --git a/ethernet-view/src/components/BootloaderContainer/Bootloader/getFile.ts b/ethernet-view/src/components/BootloaderContainer/Bootloader/getFile.ts
new file mode 100644
index 000000000..158884fbd
--- /dev/null
+++ b/ethernet-view/src/components/BootloaderContainer/Bootloader/getFile.ts
@@ -0,0 +1,57 @@
+import { DragEvent } from "react";
+
+function isCorrectFormat(fileName: string, fileFormat: string): boolean {
+ return fileName.endsWith(`.${fileFormat}`);
+}
+
+export function getFile(
+ ev: DragEvent
+
+ {file.name}
+ {file.size} B
+
+ {
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/ChartElement/ChartCanvas/ChartCanvas.tsx b/ethernet-view/src/components/ChartMenu/ChartElement/ChartCanvas/ChartCanvas.tsx
new file mode 100644
index 000000000..323cb324e
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/ChartElement/ChartCanvas/ChartCanvas.tsx
@@ -0,0 +1,140 @@
+import {
+ MeasurementId,
+ NumericMeasurementInfo,
+ UpdateFunctionNumeric,
+ useGlobalTicker,
+} from "common";
+import {
+ ColorType,
+ IChartApi,
+ ISeriesApi,
+ UTCTimestamp,
+ createChart,
+} from "lightweight-charts";
+import { useEffect, useRef } from "react";
+
+type DataSerieAndUpdater = Map<
+ MeasurementId,
+ [ISeriesApi<"Line">, UpdateFunctionNumeric]
+>;
+
+interface Props {
+ measurementsInChart: NumericMeasurementInfo[];
+}
+
+const CHART_HEIGHT = 300;
+
+export const ChartCanvas = ({ measurementsInChart }: Props) => {
+ const chart = useRef ev.preventDefault()}
+ onDragOver={(ev) => ev.preventDefault()}
+ >
+
+ );
+});
diff --git a/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.module.scss b/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.module.scss
new file mode 100644
index 000000000..a1bcc5880
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.module.scss
@@ -0,0 +1,49 @@
+@use "src/styles/colors" as colors;
+
+.chartLegend {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 0.8rem;
+}
+
+:global([data-theme="dark"]) .chartLegend {
+ background-color: colors.getThemeColor("surface-variant");
+ border-radius: 0.5rem;
+}
+
+.chartLegendItem {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+:global([data-theme="dark"]) .chartLegendItem {
+ padding: 0.25rem 0.5rem;
+ border-radius: 0.25rem;
+ background-color: colors.getThemeColor("surface");
+ color: colors.getThemeColor("text-primary");
+
+ &:hover {
+ background-color: colors.getThemeColor("surface-hover");
+ transform: translateY(-1px);
+ box-shadow: colors.getThemeColor("shadow-sm");
+ }
+}
+
+.chartLegendItemColor {
+ width: 1rem;
+ height: 1rem;
+}
+
+:global([data-theme="dark"]) .chartLegendItemColor {
+ border-radius: 0.125rem;
+}
\ No newline at end of file
diff --git a/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.tsx b/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.tsx
new file mode 100644
index 000000000..3b2f5f7af
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/ChartElement/ChartLegend/ChartLegend.tsx
@@ -0,0 +1,54 @@
+import styles from "./ChartLegend.module.scss";
+import { useEffect, useRef } from "react";
+import { MeasurementId, NumericMeasurementInfo } from "common";
+import { ChartId } from "components/ChartMenu/ChartMenu";
+
+
+interface Props {
+ chartId: ChartId;
+ measurementsInChart: NumericMeasurementInfo[];
+ removeMeasurementFromChart: (measurementId: MeasurementId) => void;
+ removeChart: (chartId: ChartId) => void;
+}
+
+export const ChartLegend = ({ chartId, measurementsInChart, removeMeasurementFromChart, removeChart }: Props) => {
+
+ const legendRef = useRef
+ removeChart(chartId)}
+ />
+
+
+ No available values to chart. This might happen if none of the
+ measurements are numeric (only numeric measurements are
+ chartable).
+
+ );
+ } else {
+ return (
+
+ {sidebarVisible &&
+ );
+ }
+});
+
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.module.scss
new file mode 100644
index 000000000..d953a5c81
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.module.scss
@@ -0,0 +1,36 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.section {
+ display: flex;
+ flex-direction: column;
+
+ cursor: pointer;
+}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.5rem;
+ background-color: colors.getColor("primary", 80);
+ color: colors.getColor("primary", 50);
+ font-weight: bold;
+ border-bottom: 1px solid colors.getColor("primary", 70);
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: colors.getColor("primary", 75);
+ }
+}
+
+:global([data-theme="dark"]) .header {
+ background-color: colors.getThemeColor("surface-variant");
+ color: colors.getThemeColor("text-primary");
+ border-bottom: 1px solid colors.getThemeColor("border");
+
+ &:hover {
+ background-color: colors.getThemeColor("surface-hover");
+ }
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.tsx
new file mode 100644
index 000000000..1f700c9dc
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Section.tsx
@@ -0,0 +1,37 @@
+import styles from "./Section.module.scss";
+import { Caret } from "components/Caret/Caret";
+import { useState } from "react";
+import { SubsectionsView } from "./Subsection/Subsections";
+import { Subsection } from "./Subsection/Subsection/Subsection";
+
+export type Section = {
+ name: string;
+ subsections: Subsection[];
+};
+
+type Props = {
+ section: Section;
+};
+
+export const Section = ({ section }: Props) => {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+
+
+
+ ev.preventDefault()}
+ onDragOver={(ev) => ev.preventDefault()}
+ >
+ {charts.map((chart) => (
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.module.scss
new file mode 100644
index 000000000..24df18c4e
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.module.scss
@@ -0,0 +1,10 @@
+@use "src/styles/styles";
+
+.item {
+ display: grid;
+ align-items: center;
+ grid-template-columns: auto 1fr;
+ column-gap: 0.3rem;
+ font-weight: 500;
+ cursor: pointer;
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.tsx
new file mode 100644
index 000000000..3953bb790
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Item/ItemView.tsx
@@ -0,0 +1,28 @@
+import styles from "./ItemView.module.scss";
+import { DragEvent } from "react";
+import { FiBox } from "react-icons/fi";
+
+export type Item = {
+ id: string;
+ name: string;
+};
+
+type Props = {
+ item: Item;
+};
+
+export const ItemView = ({ item }: Props) => {
+ function handleDragStart(ev: DragEvent {
+ setIsOpen((prev) => !prev);
+ }}
+ >
+
+ {isOpen && (
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.module.scss
new file mode 100644
index 000000000..0d8711e99
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.module.scss
@@ -0,0 +1,6 @@
+.items {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding-left: 1rem;
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.tsx
new file mode 100644
index 000000000..0a6ba7a84
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Items/Items.tsx
@@ -0,0 +1,21 @@
+import { ItemView, Item } from "./Item/ItemView";
+import styles from "./Items.module.scss";
+
+type Props = {
+ items: Item[];
+};
+
+export const Items = ({ items }: Props) => {
+ return (
+
+ {items.map((item) => {
+ return (
+
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.module.scss
new file mode 100644
index 000000000..60c8be652
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.module.scss
@@ -0,0 +1,13 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.subsection {
+ display: flex;
+ flex-direction: column;
+}
+
+.name {
+ margin-bottom: 0.5rem;
+ font-style: italic;
+ color: colors.getThemeColor("text-tertiary");
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.tsx
new file mode 100644
index 000000000..dba1b75da
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsection/Subsection.tsx
@@ -0,0 +1,21 @@
+import styles from "./Subsection.module.scss";
+import { Items } from "./Items/Items";
+import { Item } from "./Items/Item/ItemView";
+
+export type Subsection = {
+ name: string;
+ items: Item[];
+};
+
+type Props = {
+ subsection: Subsection;
+};
+
+export const SubsectionView = ({ subsection }: Props) => {
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.module.scss
new file mode 100644
index 000000000..a17d0de74
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.module.scss
@@ -0,0 +1,12 @@
+.subsections {
+ display: flex;
+ flex-direction: column;
+ padding-top: 0.5rem;
+ padding-left: 1rem;
+ padding-right: 1.5rem;
+ overflow: hidden;
+
+ > * {
+ margin-bottom: 0.8rem;
+ }
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.tsx
new file mode 100644
index 000000000..6bbcd7b74
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Section/Subsection/Subsections.tsx
@@ -0,0 +1,25 @@
+import styles from "./Subsections.module.scss";
+import { Subsection, SubsectionView } from "./Subsection/Subsection";
+
+type Props = {
+ subsections: Subsection[];
+ isVisible: boolean;
+};
+
+export const SubsectionsView = ({ subsections, isVisible }: Props) => {
+ return (
+ {subsection.name}
+
+ {subsections.map((subsection) => {
+ return (
+
+ );
+};
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.module.scss b/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.module.scss
new file mode 100644
index 000000000..c12d35c6c
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.module.scss
@@ -0,0 +1,17 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.sidebar {
+ width: auto;
+ height: 100%;
+
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+
+ background-color: colors.getThemeColor("primary-surface");
+}
+
+:global([data-theme="dark"]) .sidebar {
+ background-color: colors.getColor("neutral", 20);
+}
diff --git a/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.tsx b/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.tsx
new file mode 100644
index 000000000..dccc98d3d
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/Sidebar/Sidebar.tsx
@@ -0,0 +1,43 @@
+import styles from "./Sidebar.module.scss";
+import { Section } from "./Section/Section";
+import { memo } from "react";
+import { Item, ItemView } from "./Section/Subsection/Subsection/Items/Item/ItemView";
+
+type Props = {
+ sections?: Section[];
+ items?: Item[];
+};
+
+const Sidebar = ({ sections, items }: Props) => {
+
+ return sections && sections.length > 0 ?
+ (
+
+ {sections.map((section) => {
+ return (
+
+ );
+ })}
+
+ ) : (items && items.length > 0 ? (
+
+ {items.map((item) => {
+ return (
+ //
+ ) : null);
+
+};
+
+export default memo(Sidebar);
diff --git a/ethernet-view/src/components/ChartMenu/sidebar.ts b/ethernet-view/src/components/ChartMenu/sidebar.ts
new file mode 100644
index 000000000..6a07538e2
--- /dev/null
+++ b/ethernet-view/src/components/ChartMenu/sidebar.ts
@@ -0,0 +1,44 @@
+import { Board, PodData, isNumericMeasurement } from "common";
+import { Packet } from "common";
+import { Section } from "./Sidebar/Section/Section";
+import { Subsection } from "./Sidebar/Section/Subsection/Subsection/Subsection";
+import { Item } from "./Sidebar/Section/Subsection/Subsection/Items/Item/ItemView";
+
+export function createSidebarSections(podData: PodData): Section[] {
+ const sections: Section[] = [];
+
+ podData.boards.forEach((board) => {
+ const subsections = getNumericPacketSubsections(board);
+ if (subsections.length > 0) {
+ sections.push({ name: board.name, subsections });
+ }
+ });
+
+ return sections;
+}
+
+function getNumericPacketSubsections(board: Board): Subsection[] {
+ const packets: Subsection[] = [];
+
+ board.packets.forEach((packet) => {
+ const items = getNumericMeasurementItems(packet);
+ if (items.length > 0) {
+ packets.push({ name: packet.name, items });
+ }
+ });
+
+ return packets;
+}
+
+function getNumericMeasurementItems(packet: Packet): Item[] {
+ const items: Item[] = [];
+ packet.measurements.forEach((measurement) => {
+ if (isNumericMeasurement(measurement)) {
+ items.push({
+ id: measurement.id,
+ name: measurement.name,
+ });
+ }
+ });
+ return items;
+}
diff --git a/ethernet-view/src/components/ConfigPopup/ConfigPopup.module.scss b/ethernet-view/src/components/ConfigPopup/ConfigPopup.module.scss
new file mode 100644
index 000000000..4fd18ec37
--- /dev/null
+++ b/ethernet-view/src/components/ConfigPopup/ConfigPopup.module.scss
@@ -0,0 +1,243 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.loadingOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: styles.$normal-border-radius;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 20;
+ backdrop-filter: blur(2px);
+
+ &::after {
+ content: "";
+ width: 40px;
+ height: 40px;
+ border: 4px solid colors.getThemeColor("border");
+ border-top-color: colors.getThemeColor("primary");
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
+ }
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.popup {
+ position: relative;
+ background-color: colors.getThemeColor("surface");
+ border-radius: styles.$normal-border-radius;
+ width: 90%;
+ max-width: 1000px;
+ max-height: 90vh;
+ display: flex;
+ flex-direction: column;
+ @include styles.shadow;
+ box-shadow: colors.getThemeColor("shadow-lg");
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: styles.$normal-padding;
+ border-bottom: styles.$normal-border-width solid
+ colors.getThemeColor("border");
+}
+
+.headerActions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.importButton {
+ flex: 0 0 auto;
+ min-width: 100px;
+}
+
+.title {
+ @include styles.title-text;
+ font-size: 1.5rem;
+ margin: 0;
+}
+
+.closeButton {
+ background: none;
+ border: none;
+ font-size: 2rem;
+ line-height: 1;
+ color: colors.getThemeColor("text-secondary");
+ cursor: pointer;
+ padding: 0;
+ width: 2rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: styles.$normal-border-radius;
+ transition: styles.$background-color-transition;
+
+ &:hover {
+ background-color: colors.getThemeColor("surface-hover");
+ color: colors.getThemeColor("text-primary");
+ }
+}
+
+.content {
+ padding: styles.$normal-padding;
+ overflow-y: auto;
+ flex: 1;
+}
+
+.field {
+ margin-bottom: 1.5rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.label {
+ @include styles.normal-text;
+ display: block;
+ margin-bottom: 0.5rem;
+ color: colors.getThemeColor("text-primary");
+}
+
+.input {
+ width: 100%;
+ padding: 0.75rem;
+ border: styles.$normal-border-width solid colors.getThemeColor("border");
+ border-radius: styles.$normal-border-radius;
+ background-color: colors.getThemeColor("input-bg");
+ color: colors.getThemeColor("text-primary");
+ font-family: styles.$sans-font;
+ font-size: styles.$normal-font-size;
+ transition: styles.$background-color-transition,
+ border-color styles.$normal-transition-time linear;
+
+ &:focus {
+ outline: none;
+ border-color: colors.getThemeColor("primary");
+ background-color: colors.getThemeColor("surface");
+ }
+
+ &:hover {
+ border-color: colors.getThemeColor("border-hover");
+ }
+}
+
+.footer {
+ display: flex;
+ gap: 1rem;
+ padding: styles.$normal-padding;
+ border-top: styles.$normal-border-width solid colors.getThemeColor("border");
+ justify-content: flex-end;
+}
+
+.cancelButton {
+ flex: 0 0 auto;
+ min-width: 100px;
+}
+
+.saveButton {
+ flex: 0 0 auto;
+ min-width: 100px;
+}
+
+.section {
+ margin-bottom: 2rem;
+ padding-bottom: 1.5rem;
+ border-bottom: styles.$normal-border-width solid
+ colors.getThemeColor("border");
+
+ &:last-of-type {
+ border-bottom: none;
+ margin-bottom: 0;
+ }
+}
+
+.sectionTitle {
+ @include styles.normal-text;
+ font-size: 1.1rem;
+ font-weight: styles.$bold-font-weight;
+ color: colors.getThemeColor("text-primary");
+ margin: 0 0 1rem 0;
+}
+
+.checkboxGroup {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.checkboxLabel {
+ @include styles.normal-text;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ color: colors.getThemeColor("text-primary");
+}
+
+.folderPickerContainer {
+ display: flex;
+ gap: 0.5rem;
+ align-items: stretch;
+}
+
+.folderInput {
+ flex: 1;
+}
+
+.browseButton {
+ flex: 0 0 auto;
+ min-width: 80px;
+}
+
+.select {
+ width: 100%;
+ padding: 0.75rem;
+ border: styles.$normal-border-width solid colors.getThemeColor("border");
+ border-radius: styles.$normal-border-radius;
+ background-color: colors.getThemeColor("input-bg");
+ color: colors.getThemeColor("text-primary");
+ font-family: styles.$sans-font;
+ font-size: styles.$normal-font-size;
+ cursor: pointer;
+ transition: styles.$background-color-transition,
+ border-color styles.$normal-transition-time linear;
+
+ &:focus {
+ outline: none;
+ border-color: colors.getThemeColor("primary");
+ background-color: colors.getThemeColor("surface");
+ }
+
+ &:hover {
+ border-color: colors.getThemeColor("border-hover");
+ }
+}
diff --git a/ethernet-view/src/components/ConfigPopup/ConfigPopup.tsx b/ethernet-view/src/components/ConfigPopup/ConfigPopup.tsx
new file mode 100644
index 000000000..7c57b3e1c
--- /dev/null
+++ b/ethernet-view/src/components/ConfigPopup/ConfigPopup.tsx
@@ -0,0 +1,651 @@
+import { useEffect, useState } from "react";
+import styles from "./ConfigPopup.module.scss";
+import { Button } from "../FormComponents/Button/Button";
+import { CheckBox } from "../FormComponents/CheckBox/CheckBox";
+import { TextInput } from "../FormComponents/TextInput/TextInput";
+import { NumericInput } from "../FormComponents/NumericInput/NumericInput";
+import type { ConfigData } from "../../types/ConfigData";
+
+type Props = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+const AVAILABLE_BOARDS = [
+ "BCU",
+ "BMSL",
+ "HVSCU",
+ "HVSCU-Cabinet",
+ "LCU",
+ "PCU",
+ "VCU",
+ "BLCU",
+];
+
+const TIME_UNITS = ["ns", "us", "ms", "s"];
+
+const DEFAULT_CONFIG: ConfigData = {
+ vehicle: {
+ boards: [
+ "BCU",
+ "BMSL",
+ "HVSCU",
+ "HVSCU-Cabinet",
+ "LCU",
+ "PCU",
+ "VCU",
+ "BLCU",
+ ],
+ },
+ adj: {
+ branch: "main",
+ },
+ network: {
+ manual: false,
+ },
+ transport: {
+ propagate_fault: false,
+ },
+ tcp: {
+ backoff_min_ms: 100,
+ backoff_max_ms: 5000,
+ backoff_multiplier: 1.5,
+ max_retries: 0,
+ connection_timeout_ms: 1000,
+ keep_alive_ms: 1000,
+ },
+ blcu: {
+ ip: "127.0.0.1",
+ download_order_id: 0,
+ upload_order_id: 0,
+ },
+ tftp: {
+ block_size: 131072,
+ retries: 3,
+ timeout_ms: 5000,
+ backoff_factor: 2,
+ enable_progress: true,
+ },
+ logging: {
+ time_unit: "us",
+ logging_path: "",
+ },
+};
+
+export const ConfigPopup = ({ isOpen, onClose }: Props) => {
+ const [config, setConfig] = useState
+ //
+ {item.name}
+ //
+
+ );
+};
diff --git a/ethernet-view/src/components/FormComponents/Button/Button.module.scss b/ethernet-view/src/components/FormComponents/Button/Button.module.scss
new file mode 100644
index 000000000..00d054e9a
--- /dev/null
+++ b/ethernet-view/src/components/FormComponents/Button/Button.module.scss
@@ -0,0 +1,41 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.buttonWrapper {
+ flex: 1 1 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ padding: 0.5rem;
+ text-align: center;
+ border-radius: styles.$normal-border-radius;
+ background-color: colors.getThemeColor("secondary");
+ color: colors.getThemeColor("surface");
+ user-select: none;
+
+ @include styles.shadow;
+
+ &.enabled {
+ cursor: pointer;
+
+ &:hover {
+ background-color: colors.getThemeColor("secondary-hover");
+ }
+ }
+
+ &.disabled {
+ cursor: auto;
+ background-color: colors.getThemeColor("border");
+ color: colors.getThemeColor("text-disabled");
+ }
+}
+
+.label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.icon {
+ width: 75%;
+}
\ No newline at end of file
diff --git a/ethernet-view/src/components/FormComponents/Button/Button.tsx b/ethernet-view/src/components/FormComponents/Button/Button.tsx
new file mode 100644
index 000000000..eb5d763f5
--- /dev/null
+++ b/ethernet-view/src/components/FormComponents/Button/Button.tsx
@@ -0,0 +1,64 @@
+import styles from "components/FormComponents/Button/Button.module.scss";
+import { animated, useSpring } from "@react-spring/web";
+import { lightenHSL } from "utils/color";
+
+type Props = {
+ label?: string;
+ icon?: string;
+ onClick?: (ev: React.MouseEvent) => void;
+ disabled?: boolean;
+ color?: string;
+ className?: string;
+};
+
+export const Button = ({
+ label = undefined,
+ icon = undefined,
+ color = "hsl(29, 88%, 57%)",
+ onClick = () => {},
+ disabled = false,
+ className = "",
+}: Props) => {
+ const [springs, api] = useSpring(() => ({
+ from: { backgroundColor: color },
+ config: {
+ mass: 5,
+ tension: 3000,
+ friction: 1,
+ clamp: true,
+ },
+ }));
+
+ return (
+
+ {isLoading && }
+
+
+
+
+
+ {isLoadingConfig ? (
+ Configuration
+
+
+
+
+
+
+
+ ) : config || config != null ? (
+ Loading configuration...
+
+ {/* Vehicle Configuration */}
+
+
+
+ {/* ADJ Configuration */}
+
+
+
+ {/* Network Configuration */}
+
+
+
+ {/* Transport Configuration */}
+
+
+
+ {/* TCP Configuration */}
+
+
+
+ {/* BLCU Configuration */}
+
+
+
+ {/* TFTP Configuration */}
+
+
+
+ {/* Logging Configuration */}
+
+
+
+ ) : (
+ Vehicle Configuration
+
+
+
+
+ {AVAILABLE_BOARDS.map((board) => (
+
+ ))}
+
+ ADJ Configuration
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ adj: { ...prev.adj, branch: e.target.value },
+ }))
+ }
+ placeholder="main"
+ disabled={isDisabled}
+ />
+
+ Network Configuration
+
+
+
+ Transport Configuration
+
+
+
+ TCP Configuration
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: { ...prev.tcp, backoff_min_ms: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: { ...prev.tcp, backoff_max_ms: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: {
+ ...prev.tcp,
+ backoff_multiplier: Number(value) || 0,
+ },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: { ...prev.tcp, max_retries: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: {
+ ...prev.tcp,
+ connection_timeout_ms: Number(value) || 0,
+ },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tcp: { ...prev.tcp, keep_alive_ms: Number(value) || 0 },
+ }))
+ }
+ />
+
+ BLCU Configuration
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ blcu: { ...prev.blcu, ip: e.target.value },
+ }))
+ }
+ placeholder="127.0.0.1"
+ disabled={isDisabled}
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ blcu: {
+ ...prev.blcu,
+ download_order_id: Number(value) || 0,
+ },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ blcu: {
+ ...prev.blcu,
+ upload_order_id: Number(value) || 0,
+ },
+ }))
+ }
+ />
+
+ TFTP Configuration
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tftp: { ...prev.tftp, block_size: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tftp: { ...prev.tftp, retries: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tftp: { ...prev.tftp, timeout_ms: Number(value) || 0 },
+ }))
+ }
+ />
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ tftp: {
+ ...prev.tftp,
+ backoff_factor: Number(value) || 0,
+ },
+ }))
+ }
+ />
+
+
+
+
+ Logger Configuration
+
+
+
+
+
+
+
+
+
+ updateConfig((prev) => ({
+ ...prev,
+ logging: {
+ ...prev.logging,
+ logging_path: e.target.value,
+ },
+ }))
+ }
+ placeholder="Select logging folder..."
+ disabled={isDisabled}
+ className={styles.folderInput}
+ />
+
+ Config not found
+ )} + +
+
+
+
+
+ {children}
+
+ );
+};
diff --git a/ethernet-view/src/components/Logger/Logger.module.scss b/ethernet-view/src/components/Logger/Logger.module.scss
new file mode 100644
index 000000000..a3d104015
--- /dev/null
+++ b/ethernet-view/src/components/Logger/Logger.module.scss
@@ -0,0 +1,36 @@
+@use "src/styles/styles";
+
+.logger {
+ height: min-content;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.state {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: bold;
+}
+
+.buttons {
+ flex: 2;
+ width: 10rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+
+ > * {
+ min-width: 0;
+ min-height: 0;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ }
+}
diff --git a/ethernet-view/src/components/Logger/Logger.tsx b/ethernet-view/src/components/Logger/Logger.tsx
new file mode 100644
index 000000000..a55b4011b
--- /dev/null
+++ b/ethernet-view/src/components/Logger/Logger.tsx
@@ -0,0 +1,43 @@
+import styles from "components/Logger/Logger.module.scss";
+import { useLogger } from "./useLogger";
+import { Island } from "components/Island/Island";
+import { Button } from "components/FormComponents/Button/Button";
+import oscilloscope from "assets/svg/oscilloscope.svg";
+import { useConfig } from "common";
+
+export const Logger = () => {
+
+ const [state, startLogging, stopLogging] = useLogger();
+ const config = useConfig();
+
+ return (
+
+ Logging: {`${state}`}
+
+
+
+
+
+
+
+ {count}
;
+};
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.module.scss
new file mode 100644
index 000000000..88b98cd43
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.module.scss
@@ -0,0 +1,18 @@
+.infoMessageView {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ min-width: 0;
+}
+
+.board {
+ color: var(--main-color);
+ font-weight: bold;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.payload {
+ font-size: 0.9rem;
+ color: black; // Inherit from parent which has proper theme color
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.tsx b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.tsx
new file mode 100644
index 000000000..ba747e78c
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/InfoMessageView/InfoMessageView.tsx
@@ -0,0 +1,17 @@
+import styles from "./InfoMessageView.module.scss";
+
+import { InfoMessage } from "common";
+
+type Props = {
+ message: InfoMessage;
+ className: string;
+};
+
+export const InfoMessageView = ({ message, className }: Props) => {
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.module.scss
new file mode 100644
index 000000000..3352dfe76
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.module.scss
@@ -0,0 +1,60 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+//TODO: increase contrast info
+.message.info {
+ --main-color: #{colors.getThemeColor("success")};
+ --light-color: #{colors.getColor("success", 75)};
+ --background-color: #{colors.getColor("success", 95)};
+}
+
+.message.fault {
+ --main-color: #{colors.getThemeColor("error")};
+ --light-color: #{colors.getColor("error", 75)};
+ --background-color: #{colors.getColor("error", 95)};
+}
+
+.message.warning {
+ --main-color: #{colors.getThemeColor("warning")};
+ --light-color: #{colors.getColor("warning", 75)};
+ --background-color: #{colors.getColor("warning", 95)};
+}
+
+.message {
+ display: grid;
+ grid-template:
+ "icon content counter" auto
+ "icon content counter" auto
+ "icon timestamp timestamp" auto / auto 1fr auto;
+
+ gap: 0.4rem 0.8rem;
+
+ padding: 0.6rem;
+ background-color: var(--background-color);
+ border-radius: 1rem;
+ @include styles.shadow;
+ color: colors.getThemeColor("text-primary");
+}
+
+.icon {
+ grid-area: icon;
+ color: var(--main-color);
+}
+
+.counter {
+ grid-area: counter;
+}
+
+.content {
+ grid-area: content;
+}
+
+.idAndCounter {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.timestamp {
+ grid-area: timestamp;
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.tsx b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.tsx
new file mode 100644
index 000000000..2912c69af
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/MessageView.tsx
@@ -0,0 +1,63 @@
+import styles from "./MessageView.module.scss";
+import React from "react";
+import { Counter } from "./Counter/Counter";
+import { Message } from "common";
+
+import { ReactComponent as Info } from "assets/svg/info.svg";
+import { ReactComponent as Warning } from "assets/svg/warning.svg";
+import { ReactComponent as Fault } from "assets/svg/fault.svg";
+
+import { TimestampView } from "./TimestampView/TimestampView";
+import { ProtectionMessageView } from "./ProtectionMessageView/ProtectionMessageView";
+import { InfoMessageView } from "./InfoMessageView/InfoMessageView";
+
+type Props = {
+ message: Message;
+};
+
+const icons = {
+ info: Info,
+ fault: Fault,
+ warning: Warning,
+ ok: Info,
+};
+
+const appearances = {
+ info: styles.info,
+ warning: styles.warning,
+ fault: styles.fault,
+ ok: styles.info,
+};
+
+export const MessageView = React.memo(({ message }: Props) => {
+ const Icon = icons[message.kind];
+ const appearance = appearances[message.kind];
+
+ const Message =
+ message.kind == "warning" || message.kind == "fault" || message.kind == "ok" ? (
+ {message.board}
+ {message.payload}
+
+ {board}
+
+ );
+};
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.module.scss
new file mode 100644
index 000000000..636a1ffc2
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.module.scss
@@ -0,0 +1,32 @@
+.protectionMessage {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ gap: 0.5rem;
+ color: black;
+}
+
+.kindAndOrigin {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ overflow: hidden;
+
+ column-gap: 0.8rem;
+ row-gap: 0.5rem;
+}
+
+.protectionKind {
+ width: fit-content;
+ height: fit-content;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 0.15rem 0.4rem;
+ border-radius: 0.5rem;
+ background-color: var(--main-color);
+ color: white;
+ font-weight: bold;
+}
+
+.origin {
+ overflow: hidden;
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.tsx b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.tsx
new file mode 100644
index 000000000..79368b0cc
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionMessageView.tsx
@@ -0,0 +1,27 @@
+import { ProtectionMessage } from "common";
+import styles from "./ProtectionMessageView.module.scss";
+import { Origin } from "./Origin/Origin";
+import { ProtectionView } from "./ProtectionView/ProtectionView";
+
+type Props = {
+ message: ProtectionMessage;
+ className: string;
+};
+
+export const ProtectionMessageView = ({ message, className }: Props) => {
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.module.scss
new file mode 100644
index 000000000..0153c8e22
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.module.scss
@@ -0,0 +1,6 @@
+.protectionView {
+ display: inline-flex;
+ flex-wrap: wrap;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.tsx b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.tsx
new file mode 100644
index 000000000..7a98e98d5
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/ProtectionMessageView/ProtectionView/ProtectionView.tsx
@@ -0,0 +1,78 @@
+import styles from './ProtectionView.module.scss';
+import { ProtectionMessage } from 'common';
+
+type Props = {
+ protection: ProtectionMessage;
+};
+
+const DECIMALS = 2;
+
+function safeFixed(val: any, decimals = DECIMALS) {
+ return typeof val === "number" ? val.toFixed(decimals) : String(val);
+}
+
+export const ProtectionView = ({ protection }: Props) => {
+ const ProtectionText = getProtectionText(protection);
+
+ return
+
+
+ {message.payload.kind}
+
+ {ProtectionText}
;
+};
+
+function getProtectionText(protection: ProtectionMessage) {
+ switch (protection.payload.kind) {
+ case "OUT_OF_BOUNDS":
+ return (
+ <>
+
+ {" "}
+ Want: [
+ {safeFixed(protection.payload.data.bounds?.[0])}, {safeFixed(protection.payload.data.bounds?.[1])}]
+ {" "}
+ Got: {safeFixed(protection.payload.data.value)}
+
+ );
+ case "UPPER_BOUND":
+ return (
+ <>
+
+ Want: [{protection.name}] {"<"} {safeFixed(protection.payload.data.bound)}
+ {" "}
+ Got: {safeFixed(protection.payload.data.value)}
+
+ );
+ case "LOWER_BOUND":
+ return (
+ <>
+
+ Want: [{protection.name}] {">"} {safeFixed(protection.payload.data.bound)}
+ {" "}
+ Got: {safeFixed(protection.payload.data.value)}
+
+ );
+ case "EQUALS":
+ return (
+ <>
+
+ Mustn't be {safeFixed(protection.payload.data.value)}
+
+
+ );
+ case "NOT_EQUALS":
+ return (
+ <>
+
+ Must be {safeFixed(protection.payload.data.want)} but is{" "}
+ {safeFixed(protection.payload.data.value)}
+
+
+ );
+ case "TIME_ACCUMULATION":
+ return (
+
+ Value was {safeFixed(protection.payload.data.value)} for{" "}
+ {safeFixed(protection.payload.data.timelimit)} seconds
+
+ );
+ case "ERROR_HANDLER":
+ return {protection.payload.data};
+ }
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.module.scss
new file mode 100644
index 000000000..fda725afd
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.module.scss
@@ -0,0 +1,5 @@
+.timestamp {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--main-color);
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.tsx b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.tsx
new file mode 100644
index 000000000..59ecd1240
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/MessageView/TimestampView/TimestampView.tsx
@@ -0,0 +1,19 @@
+import styles from "./TimestampView.module.scss";
+import { Timestamp } from "common";
+
+type Props = {
+ timestamp: Timestamp;
+ className: string;
+};
+
+export const TimestampView = ({ timestamp, className }: Props) => {
+ return (
+
+ {getTimestampString(timestamp)}
+
+ );
+};
+
+function getTimestampString(timestamp: Timestamp): string {
+ return `${timestamp.hour}:${timestamp.minute}:${timestamp.second} ${timestamp.day}/${timestamp.month}/${timestamp.year}`;
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss b/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss
new file mode 100644
index 000000000..5ac818e20
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/Messages.module.scss
@@ -0,0 +1,31 @@
+.messagesWrapper {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 1rem;
+}
+
+.messages {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 0.6rem;
+ min-height: 0;
+ overflow-y: auto;
+ height: 100%;
+
+}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 1rem;
+}
+
+.clearBtn {
+ flex: 0 0 auto;
+ height: min-content;
+}
diff --git a/ethernet-view/src/components/MessagesContainer/Messages/Messages.tsx b/ethernet-view/src/components/MessagesContainer/Messages/Messages.tsx
new file mode 100644
index 000000000..6eb01af64
--- /dev/null
+++ b/ethernet-view/src/components/MessagesContainer/Messages/Messages.tsx
@@ -0,0 +1,48 @@
+import { Message } from "common";
+import styles from "./Messages.module.scss";
+import { MessageView } from "./MessageView/MessageView";
+import { useAutoScroll } from "./useAutoScroll";
+import { Button } from "components/FormComponents/Button/Button";
+import { useMessagesStore } from "common";
+
+type Props = {
+ messages: Message[];
+};
+
+export const Messages = ({ messages }: Props) => {
+ const { ref, handleScroll } = useAutoScroll(messages);
+ const clearMessages = useMessagesStore((state) => state.clearMessages);
+
+ return (
+
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.module.scss b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.module.scss
new file mode 100644
index 000000000..e4ba258a0
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.module.scss
@@ -0,0 +1,41 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.boardOrders {
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+}
+
+.name {
+ display: flex;
+ gap: 0.6rem;
+ font-family: Inter;
+ font-weight: 600;
+ color: hsl(29, 88%, 70%);
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 0.25rem;
+
+ &:hover {
+ background-color: rgba(235, 137, 33, 0.15);
+ }
+}
+
+:global([data-theme="dark"]) .name {
+ &:hover {
+ background-color: rgba(235, 137, 33, 0.08);
+ }
+}
+
+.orders,
+.stateOrders {
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+
+ .title {
+ color: rgb(145, 145, 145);
+ font-weight: 600;
+ }
+}
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.tsx b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.tsx
new file mode 100644
index 000000000..5a6a095d6
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.tsx
@@ -0,0 +1,60 @@
+import { BoardOrders } from "common";
+import styles from "./BoardOrders.module.scss";
+import { OrderForm } from "./OrderForm/OrderForm";
+import { useState } from "react";
+import { Caret } from "components/Caret/Caret";
+
+type Props = {
+ boardOrders: BoardOrders;
+ alwaysShowStateOrders: boolean;
+};
+
+export const BoardOrdersView = ({
+ boardOrders,
+ alwaysShowStateOrders,
+}: Props) => {
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ 
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.module.scss b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.module.scss
new file mode 100644
index 000000000..5fe5bad44
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.module.scss
@@ -0,0 +1,19 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.fieldWrapper {
+ width: 100%;
+ display: grid;
+ grid-template-columns: minmax(10rem, 1fr) 1fr auto; //TODO: show tooltip in names (to account for overflow)
+ gap: 1rem;
+ align-items: center;
+}
+
+.name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.disabled {
+ color: colors.getThemeColor("text-disabled");
+}
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.tsx b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.tsx
new file mode 100644
index 000000000..6f06d08cb
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/Field.tsx
@@ -0,0 +1,74 @@
+import styles from "./Field.module.scss";
+import { CheckBox } from "components/FormComponents/CheckBox/CheckBox";
+import { Dropdown } from "components/FormComponents/Dropdown/Dropdown";
+import { NumericType } from "common";
+import { isNumberValid } from "./validation";
+import { NumericInput } from "components/FormComponents/NumericInput/NumericInput";
+import { FormField } from "../../form";
+
+type Props = {
+ name: string;
+ field: FormField;
+ onChange: (newValue: boolean | string | number, isValid: boolean) => void;
+ changeEnabled: (isEnabled: boolean) => void;
+};
+
+export const Field = ({ name, field, onChange, changeEnabled }: Props) => {
+ function handleTextInputChange(
+ value: string,
+ type: NumericType,
+ range: [number | null, number | null]
+ ) {
+ const isValid = isNumberValid(value, type, range);
+ onChange(Number.parseFloat(value), isValid);
+ }
+
+ return (
+ setIsOpen((prev) => !prev)} >
+
+
+
+ Permanent orders
+ {boardOrders.orders.map((desc) => {
+ return (
+
+
+ {(boardOrders.stateOrders.length > 0 &&
+ (alwaysShowStateOrders || boardOrders.stateOrders.some((item) => item.enabled))) && (
+
+ State orders
+ {boardOrders.stateOrders.map((desc) => {
+ if (alwaysShowStateOrders || desc.enabled) {
+ return (
+
+ )}
+
+
+ handleTextInputChange(
+ value,
+ field.type,
+ field.safeRange
+ )
+ }
+ />
+ ) : field.kind == "boolean" ? (
+ {
+ onChange(value, true);
+ }}
+ />
+ ) : (
+ {
+ onChange(newValue, true);
+ }}
+ />
+ )}
+
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/validation.ts b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/validation.ts
new file mode 100644
index 000000000..975d7e568
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Field/validation.ts
@@ -0,0 +1,111 @@
+import {
+ NumericType,
+ isSignedIntegerType,
+ isUnsignedIntegerType,
+} from "BackendTypes";
+
+export function isNumberValid(
+ valueStr: string,
+ numberType: NumericType,
+ range: [number | null, number | null]
+): boolean {
+ if (stringIsNumber(valueStr, numberType)) {
+ if (isUnsignedIntegerType(numberType)) {
+ let isValid = true;
+ if (range[0]) {
+ isValid &&= Number.parseInt(valueStr) >= range[0];
+ }
+
+ if (range[1]) {
+ isValid &&= Number.parseInt(valueStr) <= range[1];
+ }
+
+ return (
+ isValid &&
+ checkUnsignedIntegerOverflow(
+ Number.parseInt(valueStr),
+ getBits(numberType)
+ )
+ );
+ } else if (isSignedIntegerType(numberType)) {
+ let isValid = true;
+ if (range[0]) {
+ isValid &&= Number.parseInt(valueStr) >= range[0];
+ }
+
+ if (range[1]) {
+ isValid &&= Number.parseInt(valueStr) <= range[1];
+ }
+
+ return (
+ isValid &&
+ checkSignedIntegerOverflow(
+ Number.parseInt(valueStr),
+ getBits(numberType)
+ )
+ );
+ } else {
+ let isValid = true;
+ if (range[0]) {
+ isValid &&= Number.parseFloat(valueStr) >= range[0];
+ }
+
+ if (range[1]) {
+ isValid &&= Number.parseFloat(valueStr) <= range[1];
+ }
+
+ return isValid && checkFloatOverflow(Number.parseFloat(valueStr));
+ }
+ } else {
+ return false;
+ }
+}
+
+function stringIsNumber(valueStr: string, numberType: NumericType): boolean {
+ if (isUnsignedIntegerType(numberType)) {
+ return /^\d+$/.test(valueStr);
+ } else if (isSignedIntegerType(numberType)) {
+ return /^-?\d+$/.test(valueStr);
+ } else {
+ return /^-?\d+(?:\.\d+)?$/.test(valueStr);
+ }
+}
+
+function checkUnsignedIntegerOverflow(value: number, bits: number): boolean {
+ return value >= 0 && value <= Math.pow(2, bits) - 1;
+}
+
+function checkSignedIntegerOverflow(value: number, bits: number): boolean {
+ const min = -Math.pow(2, bits - 1);
+ const max = Math.pow(2, bits - 1) - 1;
+ return value >= min && value <= max;
+}
+
+function checkFloatOverflow(value: number): boolean {
+ return !Number.isNaN(value);
+}
+
+function getBits(type: NumericType): number {
+ switch (type) {
+ case "uint8":
+ return 8;
+ case "uint16":
+ return 16;
+ case "uint32":
+ return 32;
+ case "uint64":
+ return 64;
+ case "int8":
+ return 8;
+ case "int16":
+ return 16;
+ case "int32":
+ return 32;
+ case "int64":
+ return 64;
+ case "float32":
+ return 32;
+ case "float64":
+ return 64;
+ }
+}
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.module.scss b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.module.scss
new file mode 100644
index 000000000..f2b0dc058
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.module.scss
@@ -0,0 +1,17 @@
+@use "src/styles/styles";
+
+.fieldsWrapper {
+ width: 100%;
+ padding: 1rem;
+ border-top: 1px solid styles.$orange;
+
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ overflow-x: auto;
+}
+
+:global([data-theme="dark"]) .fieldsWrapper {
+ border-top-color: rgba(235, 137, 33, 0.8);
+}
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.tsx b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.tsx
new file mode 100644
index 000000000..e2a53d5fe
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Fields/Fields.tsx
@@ -0,0 +1,36 @@
+import styles from "./Fields.module.scss";
+import { Field } from "./Field/Field";
+import { FormField } from "../form";
+
+type Props = {
+ fields: FormField[];
+ updateField: (
+ id: string,
+ value: boolean | string | number,
+ isValid: boolean
+ ) => void;
+ changeEnable: (id: string, isEnabled: boolean) => void;
+};
+
+export const Fields = ({ fields, updateField, changeEnable }: Props) => {
+ return (
+ {name}
+ {field.kind == "numeric" ? (
+
+ {fields.map((field) => {
+ return (
+ {
+ updateField(field.id, newValue, isValid);
+ }}
+ changeEnabled={(value) => changeEnable(field.id, value)}
+ />
+ );
+ })}
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.module.scss b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.module.scss
new file mode 100644
index 000000000..d9a6a83b0
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.module.scss
@@ -0,0 +1,81 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.headerWrapper {
+ flex: 0 0 0;
+ padding: 0.5rem;
+ display: grid;
+ grid-template:
+ "caret name target button" auto
+ / auto 1fr auto 5rem;
+ align-items: center;
+ gap: 0.5rem;
+ background-color: #ffe4cc;
+ cursor: pointer;
+}
+
+:global([data-theme="dark"]) .headerWrapper {
+ background-color: rgba(235, 137, 33, 0.2);
+}
+
+.caret {
+ grid-area: caret;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.caret > * {
+ color: styles.$orange;
+}
+
+.visible {
+ visibility: visible;
+}
+
+.hidden {
+ visibility: hidden;
+}
+
+.name {
+ grid-area: name;
+ color: styles.$orange;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+:global([data-theme="dark"]) .name,
+:global([data-theme="dark"]) .caret > * {
+ color: #f5b575;
+}
+
+.target {
+ grid-area: target;
+ color: colors.getThemeColor("error");
+ font-size: 0.8rem;
+ margin: 0 0.5rem;
+ opacity: 0;
+ cursor: pointer;
+ transition: opacity 0.07s linear;
+}
+
+.targetVisible {
+ opacity: 1;
+}
+
+.headerWrapper:hover {
+ .target:not(.targetVisible) {
+ opacity: 0.5;
+ }
+}
+
+.sendBtn {
+ grid-area: button;
+ height: 100%;
+ button {
+ height: 100%;
+ }
+}
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.tsx b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.tsx
new file mode 100644
index 000000000..c61d7c97f
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/Header/Header.tsx
@@ -0,0 +1,82 @@
+import styles from './Header.module.scss';
+import { useState, useEffect } from 'react';
+import { Button } from 'components/FormComponents/Button/Button';
+import { Caret } from 'components/Caret/Caret';
+import { SpringValue, animated } from '@react-spring/web';
+import { ReactComponent as Target } from 'assets/svg/target.svg';
+
+export type HeaderInfo = ToggableHeader | FixedHeader;
+
+type ToggableHeader = {
+ type: 'toggable';
+ isOpen: boolean;
+ toggleDropdown: () => void;
+};
+
+type FixedHeader = {
+ type: 'fixed';
+};
+
+type Props = {
+ name: string;
+ disabled: boolean;
+ info: HeaderInfo;
+ springs: Record{name}
+
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/form.ts b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/form.ts
new file mode 100644
index 000000000..3c2181f29
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/OrderForm/form.ts
@@ -0,0 +1,102 @@
+import {
+ BooleanDescription,
+ EnumDescription,
+ NumericDescription,
+ OrderFieldDescription,
+} from "common";
+
+export type FormField = NumericField | BooleanField | EnumField;
+
+type AbstractFormField = {
+ id: string;
+ isValid: boolean;
+ isEnabled: boolean;
+};
+
+export type NumericField = AbstractFormField &
+ NumericDescription & {
+ value: number;
+ };
+
+export type BooleanField = AbstractFormField &
+ BooleanDescription & {
+ value: boolean;
+ };
+
+export type EnumField = AbstractFormField &
+ EnumDescription & {
+ value: string;
+ };
+
+export type Form = {
+ fields: FormField[];
+ isValid: boolean;
+};
+
+export function areFieldsValid(fields: Array
+
+
+ Always show state orders:{' '}
+
+
+ {boards.map((board) => {
+ return (
+ (board.orders.length > 0 ||
+ board.stateOrders.length > 0) && (
+
+
+ {orders.length == 0 ? (
+
+ Orders added to ADE will appear here
+
+ ) : (
+
+ );
+};
diff --git a/ethernet-view/src/components/OrdersContainer/useSendOrder.ts b/ethernet-view/src/components/OrdersContainer/useSendOrder.ts
new file mode 100644
index 000000000..5b510bad0
--- /dev/null
+++ b/ethernet-view/src/components/OrdersContainer/useSendOrder.ts
@@ -0,0 +1,9 @@
+import { Order, useWsHandler } from "common";
+
+export function useSendOrder() {
+ const handler = useWsHandler();
+
+ return (order: Order) => {
+ handler.post("order/send", order);
+ };
+}
diff --git a/ethernet-view/src/components/ProgressBar/ProgressBar.module.scss b/ethernet-view/src/components/ProgressBar/ProgressBar.module.scss
new file mode 100644
index 000000000..ec3333de9
--- /dev/null
+++ b/ethernet-view/src/components/ProgressBar/ProgressBar.module.scss
@@ -0,0 +1,15 @@
+@use "src/styles/colors" as colors;
+
+.progressBar {
+ height: 1rem;
+ display: flex;
+ align-items: stretch;
+ border-radius: 0.25rem;
+ overflow: hidden;
+ background-color: colors.getThemeColor("surface-variant");
+}
+
+.fill {
+ background-color: colors.getThemeColor("success");
+ transition: width 0.3s ease;
+}
diff --git a/ethernet-view/src/components/ProgressBar/ProgressBar.tsx b/ethernet-view/src/components/ProgressBar/ProgressBar.tsx
new file mode 100644
index 000000000..4458d0e4b
--- /dev/null
+++ b/ethernet-view/src/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,16 @@
+import styles from "./ProgressBar.module.scss";
+
+type Props = {
+ progress: number; // Between 0 and 100
+};
+
+export const ProgressBar = ({ progress }: Props) => {
+ return (
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.module.scss b/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.module.scss
new file mode 100644
index 000000000..2050fd1e7
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.module.scss
@@ -0,0 +1,19 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.boardView {
+ display: flex;
+ flex-direction: column;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ overflow-x: auto;
+ flex: 0 0 auto;
+ border: 1px solid var(--main-color);
+ color: var(--light-main-color);
+ background-color: colors.getThemeColor("surface-variant");
+ @include styles.shadow;
+}
+
+:global([data-theme="dark"]) .boardView {
+ background-color: colors.getThemeColor("surface");
+}
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.tsx b/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.tsx
new file mode 100644
index 000000000..3da5fa922
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/BoardView.tsx
@@ -0,0 +1,32 @@
+import { Board } from "common";
+import styles from "./BoardView.module.scss";
+import { PacketView } from "./PacketView/PacketView";
+import { useState } from "react";
+import { Header } from "./Header/Header";
+
+type Props = {
+ board: Board;
+};
+
+export const BoardView = ({ board }: Props) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ setOpen((prev) => !prev)}
+ >
+ {open &&
+ board.packets.map((packet) => {
+ return (
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.module.scss b/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.module.scss
new file mode 100644
index 000000000..a3bf739a3
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.module.scss
@@ -0,0 +1,12 @@
+@use "src/styles/colors" as colors;
+
+.header {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem;
+ gap: 0.5rem;
+ font-weight: bold;
+ background-color: var(--light-bg-color);
+ cursor: pointer;
+}
+
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.tsx b/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.tsx
new file mode 100644
index 000000000..6b2cc93bc
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/Header/Header.tsx
@@ -0,0 +1,20 @@
+import { Caret } from "components/Caret/Caret";
+import styles from "./Header.module.scss";
+
+type Props = {
+ name: string;
+ open: boolean;
+ onClick: () => void;
+};
+
+export const Header = ({ name, open, onClick }: Props) => {
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.module.scss b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.module.scss
new file mode 100644
index 000000000..186aa21da
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.module.scss
@@ -0,0 +1,8 @@
+.hexValue {
+ display: inline-flex;
+ flex-wrap: wrap;
+ column-gap: 1rem;
+ row-gap: 0.5rem;
+ font-family: Consolas;
+ font-weight: bold;
+}
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.tsx b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.tsx
new file mode 100644
index 000000000..4ce2d8152
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/HexValue/HexValue.tsx
@@ -0,0 +1,39 @@
+import styles from "./HexValue.module.scss";
+import { useMemo } from "react";
+
+function getByteArr(hex: string): string[] {
+ const byteArr = [] as string[];
+
+ for (let i = 0; i < hex.length - 1; i += 2) {
+ byteArr.push(hex[i] + hex[i + 1]);
+ }
+
+ if (hex.length % 2 != 0) {
+ byteArr.push(hex[hex.length - 1]);
+ }
+
+ return byteArr;
+}
+
+type Props = {
+ hex: string;
+};
+
+export const HexValue = ({ hex }: Props) => {
+ const byteArr = useMemo(() => getByteArr(hex.toUpperCase()), [hex]);
+
+ return (
+
+ {byteArr.map((byte, index) => {
+ return (
+
+ {byte}
+
+ );
+ })}
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.module.scss b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.module.scss
new file mode 100644
index 000000000..da95e0b1f
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.module.scss
@@ -0,0 +1,49 @@
+@use "src/styles/colors" as colors;
+
+// .measurementView {
+// display: flex;
+// align-items: center;
+// gap: 2rem;
+// padding: 0.4rem 0;
+// overflow: hidden;
+// }
+
+// .measurementView:not(:last-child) {
+// border-bottom: 1px solid var(--border-color);
+// }
+
+.name,
+.value {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.name {
+ grid-column: 1;
+ color: colors.getThemeColor("text-secondary");
+}
+
+.show_last {
+ grid-column: 2;
+}
+
+.value {
+ grid-column: 3;
+ text-align: right;
+ color: colors.getThemeColor("secondary");
+ font-family: Consolas;
+ font-size: 1.2rem;
+}
+
+.units {
+ grid-column: 4;
+ text-align: center;
+ color: colors.getThemeColor("text-tertiary");
+}
+
+.type {
+ grid-column: 5;
+ text-align: center;
+ color: colors.getThemeColor("text-tertiary");
+}
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.tsx b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.tsx
new file mode 100644
index 000000000..26c7b2566
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.tsx
@@ -0,0 +1,90 @@
+import styles from './MeasurementView.module.scss';
+import {
+ Measurement,
+ isNumericMeasurement,
+ useMeasurementsStore,
+} from 'common';
+import { useUpdater } from './useUpdater';
+import { FormEvent } from 'react';
+
+type Props = {
+ measurement: Measurement;
+};
+
+export const MeasurementView = ({ measurement }: Props) => {
+ const setShowMeasurementLatest = useMeasurementsStore(
+ (state) => (showLatest: boolean) =>
+ state.showMeasurementLatest(measurement.id, showLatest)
+ );
+ const isNumeric = isNumericMeasurement(measurement);
+
+ const { valueRef } = useUpdater(
+ measurement.id,
+ isNumeric
+ ? measurement.value.showLatest
+ ? measurement.value.last.toFixed(3)
+ : measurement.value.average.toFixed(3)
+ : measurement.value.toString()
+ );
+
+ const onLatestValueChange = (event: FormEvent
+
+ );
+});
diff --git a/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/useUpdater.ts b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/useUpdater.ts
new file mode 100644
index 000000000..0d75bd08d
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/BoardView/PacketView/useUpdater.ts
@@ -0,0 +1,34 @@
+import { Packet } from "common";
+import { useLayoutEffect, useRef, useContext } from "react";
+import { TableContext } from "../../TableUpdater";
+
+export function useUpdater(packet: Packet) {
+ const updater = useContext(TableContext);
+
+ const countRef = useRef
+
+ {Object.keys(packet.measurements).length > 0 && (
+ {packet.id}
+ {packet.name}
+
+
+
+ {packet.measurements.map((measurement) => {
+ return (
+
+ )}
+
+ {items.map((item, index) => {
+ if (index < items.length - 1) {
+ return (
+ handleMouseDown(index, ev)}
+ />
+ );
+ }
+
+ return (
+
+ );
+};
+
+const CellWithSeparator = ({
+ label,
+ flexBasis,
+ onMouseDown,
+}: {
+ label: string;
+ flexBasis: string;
+ onMouseDown: (ev: React.MouseEvent) => void;
+}) => {
+ return (
+ <>
+
+ {label}
+
+
+ {label}
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.module.scss b/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.module.scss
new file mode 100644
index 000000000..5a1df27d4
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.module.scss
@@ -0,0 +1,11 @@
+.separator {
+ padding: 0 0.6rem;
+ display: flex;
+ justify-content: center;
+ cursor: e-resize;
+}
+
+.line {
+ width: 1px;
+ background-color: var(--main-color);
+}
diff --git a/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.tsx b/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.tsx
new file mode 100644
index 000000000..f39cfd555
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/Header/Separator/Separator.tsx
@@ -0,0 +1,17 @@
+import styles from "./Separator.module.scss";
+import { MouseEvent } from "react";
+
+type Props = {
+ onMouseDown: (ev: MouseEvent) => void;
+};
+
+export const Separator = ({ onMouseDown }: Props) => {
+ return (
+
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ReceiveTable/ReceiveTable.module.scss b/ethernet-view/src/components/ReceiveTable/ReceiveTable.module.scss
new file mode 100644
index 000000000..cb97d7809
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/ReceiveTable.module.scss
@@ -0,0 +1,30 @@
+@use "src/styles/colors" as colors;
+
+.newReceiveTable {
+ --main-color: #{colors.getThemeColor("primary")};
+ --bg-color: #{colors.getColor("primary", 85)};
+ --light-main-color: #{colors.getColor("primary", 65)};
+ --light-bg-color: #{colors.getColor("primary", 95)};
+
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ border-radius: 0.5rem; // Para que la tabla no se veo en las esquinas superiores debido al hueco que deja el border-radius del header
+ flex: 1 1 0;
+}
+
+:global([data-theme="dark"]) .newReceiveTable {
+ --main-color: #{colors.getThemeColor("text-primary")};
+ --bg-color: #{colors.getColor("neutral", 20)};
+ --light-main-color: #{colors.getThemeColor("text-secondary")};
+ --light-bg-color: #{colors.getThemeColor("surface-variant")};
+}
+
+.boards {
+ padding-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow-y: auto;
+ gap: 1rem;
+}
diff --git a/ethernet-view/src/components/ReceiveTable/ReceiveTable.tsx b/ethernet-view/src/components/ReceiveTable/ReceiveTable.tsx
new file mode 100644
index 000000000..f5cb00aeb
--- /dev/null
+++ b/ethernet-view/src/components/ReceiveTable/ReceiveTable.tsx
@@ -0,0 +1,68 @@
+import styles from "./ReceiveTable.module.scss";
+import { BoardView } from "./BoardView/BoardView";
+import { Header } from "./Header/Header";
+import { TableUpdater } from "./TableUpdater";
+import { Board, useMeasurementsStore} from "common";
+
+type Props = {
+ boards: Board[];
+};
+
+export const ReceiveTable = ({ boards }: Props) => {
+ const handleLogAll = (log: boolean) => {
+ useMeasurementsStore.getState().setLogAll(log);
+ };
+
+ const handleShowAllLatest = (showLatest: boolean) => {
+ useMeasurementsStore.getState().setShowAllLatest(showLatest);
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {boards
+ .filter((item) => item.packets.length > 0)
+ .map((board) => {
+ return (
+
+
+
+ 🐒
+
+
+ );
+};
diff --git a/ethernet-view/src/components/ThemeToggle/ThemeToggle.module.scss b/ethernet-view/src/components/ThemeToggle/ThemeToggle.module.scss
new file mode 100644
index 000000000..476b8d932
--- /dev/null
+++ b/ethernet-view/src/components/ThemeToggle/ThemeToggle.module.scss
@@ -0,0 +1,34 @@
+@use "../../styles/colors.scss" as colors;
+
+.themeToggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border: 1px solid colors.getThemeColor("border");
+ border-radius: 8px;
+ background-color: colors.getThemeColor("surface");
+ color: colors.getThemeColor("text-primary");
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: colors.getThemeColor("surface-hover");
+ border-color: colors.getThemeColor("border-hover");
+ transform: translateY(-1px);
+ box-shadow: colors.getThemeColor("shadow-sm");
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+}
+
+.icon {
+ font-size: 20px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/ethernet-view/src/components/ThemeToggle/ThemeToggle.tsx b/ethernet-view/src/components/ThemeToggle/ThemeToggle.tsx
new file mode 100644
index 000000000..61fecf92c
--- /dev/null
+++ b/ethernet-view/src/components/ThemeToggle/ThemeToggle.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import styles from "./ThemeToggle.module.scss";
+
+export function ThemeToggle() {
+ const [theme, setTheme] = useState<"light" | "dark">(() => {
+ const savedTheme = localStorage.getItem("theme");
+ return (savedTheme as "light" | "dark") || "light";
+ });
+
+ useEffect(() => {
+ document.documentElement.setAttribute("data-theme", theme);
+ localStorage.setItem("theme", theme);
+ }, [theme]);
+
+ const toggleTheme = () => {
+ setTheme((prev) => (prev === "light" ? "dark" : "light"));
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/ethernet-view/src/hooks/useBounds.ts b/ethernet-view/src/hooks/useBounds.ts
new file mode 100644
index 000000000..d2d20dedb
--- /dev/null
+++ b/ethernet-view/src/hooks/useBounds.ts
@@ -0,0 +1,39 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function useBounds
+
+ );
+};
diff --git a/ethernet-view/src/layouts/SplitLayout/Pane/Pane.module.scss b/ethernet-view/src/layouts/SplitLayout/Pane/Pane.module.scss
new file mode 100644
index 000000000..8cd0af2ef
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/Pane/Pane.module.scss
@@ -0,0 +1,23 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.wrapper {
+ min-width: 0;
+ min-height: 0;
+}
+
+.collapsed {
+ padding: .6rem;
+ background-color: colors.getThemeColor("primary");
+ border-radius: .8rem;
+}
+
+.icon {
+ width: 2rem;
+
+ img {
+ filter: invert(1);
+ width: 100%;
+ color: colors.getThemeColor("primary-text");
+ }
+}
\ No newline at end of file
diff --git a/ethernet-view/src/layouts/SplitLayout/Pane/Pane.tsx b/ethernet-view/src/layouts/SplitLayout/Pane/Pane.tsx
new file mode 100644
index 000000000..8d7deb717
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/Pane/Pane.tsx
@@ -0,0 +1,32 @@
+import styles from "layouts/SplitLayout/Pane/Pane.module.scss";
+
+type Props = {
+ component: React.ReactNode;
+ normalizedLength: number;
+ collapsedIcon: string;
+};
+
+export const Pane = ({ component, normalizedLength, collapsedIcon }: Props) => {
+
+ const isCollapsed = normalizedLength === 0;
+
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/layouts/SplitLayout/Separator/Separator.module.scss b/ethernet-view/src/layouts/SplitLayout/Separator/Separator.module.scss
new file mode 100644
index 000000000..dc0d0d853
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/Separator/Separator.module.scss
@@ -0,0 +1,21 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.wrapper {
+ flex: 0 1 0rem;
+ padding: 0.5rem;
+ .line {
+ width: 100%;
+ height: 100%;
+ padding: 1px;
+ border-radius: 1rem;
+ background-color: none;
+ transition: styles.$background-color-transition;
+ }
+
+ &:hover {
+ .line {
+ background-color: colors.getThemeColor("border-hover");
+ }
+ }
+}
diff --git a/ethernet-view/src/layouts/SplitLayout/Separator/Separator.tsx b/ethernet-view/src/layouts/SplitLayout/Separator/Separator.tsx
new file mode 100644
index 000000000..69b798c25
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/Separator/Separator.tsx
@@ -0,0 +1,27 @@
+import { Orientation } from "hooks/useSplit/Orientation";
+import styles from "layouts/SplitLayout/Separator/Separator.module.scss";
+import { MouseEvent } from "react";
+
+type Props = {
+ orientation: Orientation;
+ onMouseDown: (ev: MouseEvent) => void;
+};
+
+export const Separator = ({ orientation, onMouseDown }: Props) => {
+ return (
+
+ 
+
+
+
+ {component}
+
+
+ {
+ onMouseDown(ev);
+ }}
+ >
+
+
+ );
+};
diff --git a/ethernet-view/src/layouts/SplitLayout/SplitLayout.module.scss b/ethernet-view/src/layouts/SplitLayout/SplitLayout.module.scss
new file mode 100644
index 000000000..7d2ec976e
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/SplitLayout.module.scss
@@ -0,0 +1,7 @@
+.wrapper {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/ethernet-view/src/layouts/SplitLayout/SplitLayout.tsx b/ethernet-view/src/layouts/SplitLayout/SplitLayout.tsx
new file mode 100644
index 000000000..1d17b24e2
--- /dev/null
+++ b/ethernet-view/src/layouts/SplitLayout/SplitLayout.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import styles from "layouts/SplitLayout/SplitLayout.module.scss";
+import { useSplit } from "hooks/useSplit/useSplit";
+import { Pane } from "layouts/SplitLayout/Pane/Pane";
+import { Separator } from "layouts/SplitLayout/Separator/Separator";
+import { Orientation } from "hooks/useSplit/Orientation";
+
+type Props = {
+ components: {
+ component: React.ReactNode;
+ collapsedIcon: string;
+ }[];
+ orientation?: Orientation;
+ initialLengths?: number[];
+};
+
+export const SplitLayout = ({ initialLengths, components, orientation = Orientation.HORIZONTAL }: Props) => {
+
+ const minLengths = components.map(() => 0.05);
+ const [splitElements, onSeparatorMouseDown] = useSplit(minLengths, orientation, initialLengths);
+
+ return (
+
+ {components.map((component, index) => {
+ return (
+
+
+ onSeparatorMouseDown(index, ev)
+ }
+ />
+ )}
+
+ );
+ })}
+
+ );
+};
diff --git a/ethernet-view/src/layouts/TabLayout/Header/Header.module.scss b/ethernet-view/src/layouts/TabLayout/Header/Header.module.scss
new file mode 100644
index 000000000..590c94c07
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/Header.module.scss
@@ -0,0 +1,19 @@
+@use "src/styles/styles";
+
+.headerWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ flex: 0 0 2.5rem;
+ overflow-x: clip;
+
+ margin-bottom: 1.2rem;
+ .name {
+ display: flex;
+ align-items: center;
+ @include styles.title-text;
+ line-height: 95%;
+ }
+}
diff --git a/ethernet-view/src/layouts/TabLayout/Header/Header.tsx b/ethernet-view/src/layouts/TabLayout/Header/Header.tsx
new file mode 100644
index 000000000..b8245ab0f
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/Header.tsx
@@ -0,0 +1,24 @@
+import styles from "./Header.module.scss";
+import { TabBar } from "./TabBar/TabBar";
+import { TabItem } from "layouts/TabLayout/TabItem";
+
+type Props = {
+ tabs: TabItem[];
+ visibleTab: TabItem;
+ onTabClick: (tab: TabItem) => void;
+};
+
+export const Header = ({ tabs, visibleTab, onTabClick }: Props) => {
+ return (
+
+
+ );
+};
diff --git a/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.module.scss b/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.module.scss
new file mode 100644
index 000000000..64e5e5f8e
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.module.scss
@@ -0,0 +1,23 @@
+@use "src/styles/styles";
+@use "src/styles/colors" as colors;
+
+.wrapper {
+ display: grid;
+ grid-template: "icon title" / auto auto;
+ align-items: center;
+ gap: 0.5rem;
+ height: auto;
+ padding: 0.5rem;
+ //border: 2px solid styles.$alternate-text-color;
+ background-color: colors.getThemeColor("surface-variant");
+ border-radius: 0.8rem;
+ cursor: pointer;
+}
+
+.icon {
+ grid-area: icon;
+
+ align-self: center;
+ justify-self: center;
+ font-size: 1.5rem;
+}
diff --git a/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.tsx b/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.tsx
new file mode 100644
index 000000000..32b3ceff8
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/TabBar/Tab/Tab.tsx
@@ -0,0 +1,19 @@
+import styles from "./Tab.module.scss";
+
+type Props = {
+ name: string;
+ className?: string;
+ icon?: React.ReactNode;
+ onClick: () => void;
+};
+export const Tab = ({ name, icon, onClick, className = "" }: Props) => {
+ return (
+ {visibleTab.name}
+ {tabs.length > 1 && (
+
+ {icon}
+
+ );
+};
diff --git a/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.module.scss b/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.module.scss
new file mode 100644
index 000000000..9141c4373
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.module.scss
@@ -0,0 +1,5 @@
+.wrapper {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+}
diff --git a/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.tsx b/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.tsx
new file mode 100644
index 000000000..65e1bae37
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.tsx
@@ -0,0 +1,27 @@
+import styles from "./TabBar.module.scss";
+import { Tab } from "./Tab/Tab";
+import { TabItem } from "layouts/TabLayout/TabItem";
+
+type Props = {
+ tabs: TabItem[];
+ onTabClick: (tab: TabItem) => void;
+ visibleTabId: string;
+};
+
+export const TabBar = ({ tabs, onTabClick, visibleTabId }: Props) => {
+ return (
+ {name}
+
+ {tabs.map((tab) => {
+ return (
+ onTabClick(tab)}
+ >
+ );
+ })}
+
+ );
+};
diff --git a/ethernet-view/src/layouts/TabLayout/TabItem.ts b/ethernet-view/src/layouts/TabLayout/TabItem.ts
new file mode 100644
index 000000000..aa3a5643a
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/TabItem.ts
@@ -0,0 +1,7 @@
+export type TabItem = {
+ id: string;
+ name: string;
+ //FIXME: cambiar a obligatorio cuando arregle el bug de aria-hidden
+ icon?: React.ReactNode;
+ component: React.ReactNode;
+};
diff --git a/ethernet-view/src/layouts/TabLayout/TabLayout.module.scss b/ethernet-view/src/layouts/TabLayout/TabLayout.module.scss
new file mode 100644
index 000000000..7adc57f6a
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/TabLayout.module.scss
@@ -0,0 +1,21 @@
+@use "src/styles/styles";
+
+.body {
+ width: 100%;
+ min-width: 0;
+ min-height: 0;
+ flex-grow: 1;
+}
+
+.componentWrapper {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.visibilityWrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/ethernet-view/src/layouts/TabLayout/TabLayout.tsx b/ethernet-view/src/layouts/TabLayout/TabLayout.tsx
new file mode 100644
index 000000000..395915439
--- /dev/null
+++ b/ethernet-view/src/layouts/TabLayout/TabLayout.tsx
@@ -0,0 +1,46 @@
+import styles from "layouts/TabLayout/TabLayout.module.scss";
+import { TabItem } from "layouts/TabLayout/TabItem";
+import { Header } from "layouts/TabLayout/Header/Header";
+import { Island } from "components/Island/Island";
+import { useState } from "react";
+type Props = {
+ tabs: TabItem[];
+};
+
+export const TabLayout = ({ tabs }: Props) => {
+ const [visibleTab, setVisibleTab] = useState(tabs[0]);
+
+ function onTabClick(tab: TabItem) {
+ setVisibleTab(tab);
+ }
+
+ return (
+
+
+
+ {tabs.map((tab) => {
+ return (
+
+
+ {tab.component}
+
+ );
+ })}
+
+
+ );
+};
diff --git a/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartCanvas.tsx b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartCanvas.tsx
new file mode 100644
index 000000000..fc6100748
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartCanvas.tsx
@@ -0,0 +1,127 @@
+import {
+ ColorType,
+ createChart,
+ IChartApi,
+ UTCTimestamp,
+} from 'lightweight-charts';
+import { ChartPoint } from 'pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor';
+import { useEffect, useRef } from 'react';
+import { MeasurementLogger } from './ChartElement';
+
+const CHART_HEIGHT = 300;
+
+interface Props {
+ measurementsInChart: MeasurementLogger[];
+ getDataFromLogSession: (measurement: string) => ChartPoint[];
+}
+
+export const ChartCanvas = ({
+ measurementsInChart,
+ getDataFromLogSession,
+}: Props) => {
+ const chart = useRef
+
+
+
+
+
+ setCameraLeftURL(e.target.value)}
+ />
+
+
+
+
+
+ setCameraRightURL(e.target.value)}
+ />
+
+
+ ev.preventDefault()}
+ onDragOver={(ev) => ev.preventDefault()}
+ >
+
+ )
+}
+
+function getRandomColor() {
+ var r = Math.floor(Math.random() * 256);
+ var g = Math.floor(Math.random() * 256);
+ var b = Math.floor(Math.random() * 256);
+ var hexR = r.toString(16).padStart(2, '0');
+ var hexG = g.toString(16).padStart(2, '0');
+ var hexB = b.toString(16).padStart(2, '0');
+ return '#' + hexR + hexG + hexB;
+ }
\ No newline at end of file
diff --git a/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartLegend.tsx b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartLegend.tsx
new file mode 100644
index 000000000..efea169f9
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartMenu/ChartElement/ChartLegend.tsx
@@ -0,0 +1,54 @@
+import { MeasurementId } from "common";
+import { ChartId } from "components/ChartMenu/ChartMenu";
+import { useEffect, useRef } from "react";
+import styles from "components/ChartMenu/ChartElement/ChartLegend/ChartLegend.module.scss"
+import { MeasurementLogger } from "./ChartElement";
+
+interface Props {
+ chartId: ChartId;
+ measurementsInChart: MeasurementLogger[];
+ removeMeasurementFromChart: (measurementId: MeasurementId) => void;
+ removeChart: (chartId: ChartId) => void;
+}
+
+export const ChartLegend = ({ chartId, measurementsInChart, removeMeasurementFromChart, removeChart }: Props) => {
+
+ const legendRef = useRef
+ removeChart(chartId)}
+ />
+ setMeasurementsInChart(measurementsInChart.filter(measurement => measurement.id !== measurementId))}
+ />
+
+
+
+
+ )
+}
diff --git a/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartsColumn.tsx b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartsColumn.tsx
new file mode 100644
index 000000000..2d9b00222
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/ChartsColumn/ChartsColumn.tsx
@@ -0,0 +1,16 @@
+import { TabLayout } from "layouts/TabLayout/TabLayout";
+import { ChartMenu } from "./ChartMenu/ChartMenu";
+import { ReactComponent as Chart } from "assets/svg/chart.svg";
+
+export const ChartsColumn = () => {
+ const chartsColumnTabItems = [
+ {
+ id: "charts",
+ name: "Charts",
+ icon: ev.preventDefault()}
+ onDragOver={(ev) => ev.preventDefault()}
+ >
+ {charts.map((chart) => (
+ removeChart(chartId)}
+ getDataFromLogSession={getDataFromLogSession}
+ />
+ ))}
+
+
+
+
+ )
+}
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.module.scss b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.module.scss
new file mode 100644
index 000000000..dad168642
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.module.scss
@@ -0,0 +1,43 @@
+@use "src/styles/styles.scss";
+@use "src/styles/colors" as colors;
+
+.dropZone {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 3rem 2rem;
+ border: dashed colors.getThemeColor("border");
+ border-radius: styles.$large-border-radius;
+
+ &Text {
+ font-weight: styles.$normal-font-weight;
+ font-size: styles.$normal-font-size;
+ color: colors.getThemeColor("text-secondary");
+ font-family: styles.$code-font;
+ }
+
+ &.Active {
+ background-color: colors.getThemeColor("primary-surface");
+ }
+
+ &.Uploading {
+ background-color: colors.getThemeColor("primary-surface");
+ }
+
+ &.Success {
+ background-color: colors.getThemeColor("success");
+ opacity: 0.15;
+ }
+
+ &.Error {
+ background-color: colors.getThemeColor("error");
+ opacity: 0.15;
+ }
+}
+
+.selectLabel {
+ cursor: pointer;
+ font-weight: bold;
+ color: colors.getThemeColor("primary");
+}
\ No newline at end of file
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.tsx b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.tsx
new file mode 100644
index 000000000..4f0d117eb
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { UploadInformation, UploadState } from "../LogLoader";
+import styles from "./Dropzone.module.scss"
+import { extractLoggerSession } from "../LogsProcessor";
+import { Controls } from "./Controls/Controls";
+import { useDropzone } from "./useDropzone";
+import { LogSession, useLogStore } from "pages/LoggerPage/useLogStore";
+
+export const Dropzone = () => {
+
+ const [uploadInformation, setUploadInformation] = useState
+ {
+ if(draftSession) {
+ addLogSession(draftSession);
+ setUploadInformation({state: UploadState.IDLE});
+ setDraftSession(undefined);
+ }
+ }}
+ onRemove={() => {
+ setUploadInformation({state: UploadState.IDLE});
+ setDraftSession(undefined);
+ }}
+ />
+
+
+ )
+}
+
+/**
+ * The function `validateEntry` checks if only one directory is selected from a list of files.
+ * @param {DataTransferItemList} files - The `files` parameter in the `validateEntry` function is of
+ * type `DataTransferItemList`, which represents a list of items.
+ */
+function validateEntry(files: DataTransferItemList) {
+ if(files.length != 1) throw new Error("Only one file or directory is allowed");
+ let file = files[0].webkitGetAsEntry();
+ if(!file) throw new Error("Invalid file");
+ if(!file.isDirectory) throw new Error("Only directories are allowed");
+}
\ No newline at end of file
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/useDropzone.ts b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/useDropzone.ts
new file mode 100644
index 000000000..a0ba6822d
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/useDropzone.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { UploadInformation, UploadState } from "../LogLoader";
+import { LogSession } from "pages/LoggerPage/useLogStore";
+
+interface Props {
+ uploadInformation: UploadInformation;
+}
+
+export const useDropzone = ({uploadInformation}: Props) => {
+
+ const [dropZoneText, setDropZoneText] = useState {
+ e.preventDefault();
+ setIsDraggingOver(true);
+ }}
+ onDragLeave={e => {
+ e.preventDefault();
+ if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+ setIsDraggingOver(false);
+ }}
+ onDragOver={e => e.preventDefault()}
+ onDrop={handleDrop}
+ >
+
+
+
+
+
+ + {dropZoneText} + {uploadInformation.state === UploadState.IDLE && +
+
+ {
+ if(ev.target.files && ev.target.files.length === 1) {
+
+ }
+ }}
+ >
+
+
+ }
+ {uploadInformation.errorMessage}
+
+ setOpenLogSession(logName)}>
+
+ )
+}
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.module.scss b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.module.scss
new file mode 100644
index 000000000..e7855b329
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.module.scss
@@ -0,0 +1,5 @@
+.logListWrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.tsx b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.tsx
new file mode 100644
index 000000000..eb6c450f7
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogList.tsx
@@ -0,0 +1,16 @@
+import { LogItem } from "./LogItem/LogItem";
+import styles from "./LogList.module.scss"
+
+interface Props {
+ logNames: string[];
+}
+
+export const LogList = ({logNames}: Props) => {
+ return (
+
+ 
+
+
+ {logName}
+
+
+ 
+
+
+ {logNames.map((logName) => (
+
+ )
+}
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.module.scss b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.module.scss
new file mode 100644
index 000000000..09d378956
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.module.scss
@@ -0,0 +1,6 @@
+.logLoaderWrapper {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
\ No newline at end of file
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.tsx b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.tsx
new file mode 100644
index 000000000..a0e70d54b
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogLoader.tsx
@@ -0,0 +1,31 @@
+import { Dropzone } from "./Dropzone/Dropzone"
+import styles from "./LogLoader.module.scss"
+import { LogList } from "./LogList/LogList";
+import { useLogStore } from "pages/LoggerPage/useLogStore";
+
+export enum UploadState {
+ IDLE = "idle",
+ UPLOADING = "uploading",
+ SUCCESS = "success",
+ ERROR = "error",
+}
+
+export interface UploadInformation {
+ state: UploadState;
+ errorMessage?: string;
+}
+
+export const LogLoader = () => {
+
+ const logSessions = useLogStore(state => state.logSessions);
+
+ return (
+
+
+ logSession.name)} />
+
+
+ )
+}
diff --git a/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor.ts b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor.ts
new file mode 100644
index 000000000..6e722fc8d
--- /dev/null
+++ b/ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogsProcessor.ts
@@ -0,0 +1,108 @@
+import Papa from 'papaparse';
+
+/**
+ * The function `processLoggerSession` reads CSV files from a directory, parses the data, filters out
+ * invalid logs, and returns a map of file names to arrays of valid log entries with timestamps and
+ * values.
+ * @param {FileSystemDirectoryEntry} directory - The `directory` parameter in the
+ * `processLoggerSession` function is expected to be a FileSystemDirectoryEntry object representing a
+ * directory in the file system. This directory is used to retrieve files for processing in the
+ * function.
+ * @returns The `processLoggerSession` function returns a Promise that resolves to a Map
+ ,
+ collapsedIcon: letter,
+ },
+ {
+ component:
+
+ );
+};
diff --git a/ethernet-view/src/pages/TestingPage/OrderColumn/OrderColumn.tsx b/ethernet-view/src/pages/TestingPage/OrderColumn/OrderColumn.tsx
new file mode 100644
index 000000000..145c64c58
--- /dev/null
+++ b/ethernet-view/src/pages/TestingPage/OrderColumn/OrderColumn.tsx
@@ -0,0 +1,18 @@
+import { TabLayout } from "layouts/TabLayout/TabLayout";
+import { nanoid } from "nanoid";
+import { OrdersContainer } from "components/OrdersContainer/OrdersContainer";
+import { useRef } from "react";
+import { ReactComponent as OutgoingMessage } from "assets/svg/outgoing-message.svg";
+
+export const OrderColumn = () => {
+ const orderTabItems = useRef([
+ {
+ id: nanoid(),
+ name: "Orders",
+ icon:
+
+ );
+};
diff --git a/ethernet-view/src/services/public/images/logo-white.png b/ethernet-view/src/services/public/images/logo-white.png
new file mode 100644
index 000000000..d11903fc9
Binary files /dev/null and b/ethernet-view/src/services/public/images/logo-white.png differ
diff --git a/ethernet-view/src/services/public/svg/tab-edge.svg b/ethernet-view/src/services/public/svg/tab-edge.svg
new file mode 100644
index 000000000..c3380d31d
--- /dev/null
+++ b/ethernet-view/src/services/public/svg/tab-edge.svg
@@ -0,0 +1,37 @@
+
+
diff --git a/ethernet-view/src/services/useBootloader.ts b/ethernet-view/src/services/useBootloader.ts
new file mode 100644
index 000000000..ef317b445
--- /dev/null
+++ b/ethernet-view/src/services/useBootloader.ts
@@ -0,0 +1,49 @@
+import { useWsHandler } from "common";
+import { nanoid } from "nanoid";
+
+export type BootloaderUpload = { board: string; file: File };
+
+export function useBootloader(
+ onDownloadSuccess: (file: File) => void,
+ onDownloadFailure: () => void,
+ onSendSuccess: () => void,
+ onSendFailure: () => void,
+ onProgress: (progress: number) => void // progress between 0 and 100
+) {
+ const handler = useWsHandler();
+
+ //TODO: timeout if it takes to long
+ const uploader = (board: string, file: string) => {
+ const id = nanoid();
+
+ handler.exchange("blcu/upload", { board, file }, id, (res, _, end) => {
+ if (res.percentage == 100) {
+ onSendSuccess();
+ end();
+ } else if (res.failure) {
+ onSendFailure();
+ end();
+ } else {
+ onProgress(res.percentage);
+ }
+ });
+ };
+
+ //TODO: timeout if it takes to long
+ const downloader = (board: string) => {
+ const id = nanoid();
+ handler.exchange("blcu/download", { board }, id, (res, _, end) => {
+ if (res.percentage == 100) {
+ onDownloadSuccess(new File([res.file], "program"));
+ end();
+ } else if (res.failure) {
+ onDownloadFailure();
+ end();
+ } else {
+ onProgress(res.percentage);
+ }
+ });
+ };
+
+ return { uploader, downloader } as const;
+}
diff --git a/ethernet-view/src/store/columnsStore.ts b/ethernet-view/src/store/columnsStore.ts
new file mode 100644
index 000000000..0aa1fc3ed
--- /dev/null
+++ b/ethernet-view/src/store/columnsStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+export interface ColumnsStore {
+ columnSizes: string[];
+ setColumnSizes: (setColumnSizes: string[]) => void;
+};
+
+// Zustand store for keeping track of column sizes.
+// It is useful to the layout of the application.
+export const useColumnsStore = create
+
+