Frontend - Revision history

Spring2026 at 12:32, 13 October 2026

2026-10-13T12:32:45Z

@@ Line 30: / Line 30: @@
 ==== sidebar ====
-The Sidebar component consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the sidebar, including the ability to open, close, and resize it. It also stores the sidebar's state and previous width, allowing the user's settings to be preserved during the session.
+Sidebar consists of a TSX file and a TS file. The TSX file defines the
 ==== tabbar ====
-The tabbar.tsx file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.
+==== widget ====
 === Pages ===

Spring2026 at 11:01, 13 October 2026

2026-10-13T11:01:54Z

← Older revision		Revision as of 12:01, 13 October 2026
Line 64:		Line 64:

	This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.		This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.


	==== widget ====		==== widget ====

Spring2026 at 11:01, 13 October 2026

2026-10-13T11:01:38Z

← Older revision		Revision as of 12:01, 13 October 2026
Line 68:		Line 68:
	==== widget ====		==== widget ====

			The widget.tsx file acts as a central placeholder for the different widgets. It determines which widget should be displayed based on the provided widget name.
			The widgets folder contains the individual widget components, where their specific content, functionality, and styling are developed.
			When creating a new widget, developers should create a new component in the widgets folder and register it in widget.tsx so it can be displayed in the application.

			Each widget is developed as an individual TSX component inside the widgets folder, containing its own functionality and styling. For example, TiltGraphWidget.tsx receives data from the backend using Socket.IO and displays it in a graph using Recharts.
			A tab can contain from one and up to four individual widgets, depending on the selected layout. The widgets displayed in each tab are defined in tabs.tsx, while tabLayout.tsx determines how they are arranged on the screen.
			This structure allows developers to create and modify individual widgets independently and reuse them across different tabs without changing their internal functionality.

	=== Pages ===		=== Pages ===

Spring2026 at 10:37, 13 October 2026

2026-10-13T10:37:35Z

← Older revision		Revision as of 11:37, 13 October 2026
Line 37:		Line 37:

	The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.		The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.


	==== tabbar ====		==== tabbar ====

Spring2026 at 10:25, 13 October 2026

2026-10-13T10:25:32Z

← Older revision		Revision as of 11:25, 13 October 2026
Line 40:		Line 40:

	==== tabbar ====		==== tabbar ====

	~~### Tabbar~~

	The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.		The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

Spring2026 at 10:25, 13 October 2026

2026-10-13T10:25:05Z

← Older revision		Revision as of 11:25, 13 October 2026
Line 45:		Line 45:
	The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.		The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

	tabbar.tsx		The tabbar.tsx file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.

	This file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.		The tabs.tsx file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

	tabs.tsx

	~~This~~ file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

	If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.		If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.

	tabLayout.tsx		The tabLayout.tsx file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

	~~This~~ file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

	The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.		The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.
Line 63:		Line 57:
	If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.		If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.

	tabMap.tsx		The tabMap.tsx file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

	~~This~~ file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

	~~### Adding a new tab~~

	When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.		When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.

Spring2026 at 10:23, 13 October 2026

2026-10-13T10:23:31Z

← Older revision		Revision as of 11:23, 13 October 2026
Line 29:		Line 29:

	==== sidebar ====		==== sidebar ====

			The Sidebar component consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the sidebar, including the ability to open, close, and resize it. It also stores the sidebar's state and previous width, allowing the user's settings to be preserved during the session.

			The TS file defines the styling using Tailwind CSS. This includes the sidebar colors, the positioning of the toggle button and resize bar, and the rotation of the arrow when the sidebar is opened or closed.

			The `SidebarContent` folder contains the left and right sidebar components. This is where developers can modify the content and functionality of each individual sidebar without changing the general Sidebar component.

			The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.


	==== tabbar ====		==== tabbar ====

			### Tabbar

			The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

			tabbar.tsx

			This file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.

			tabs.tsx

			This file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

			If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.

			tabLayout.tsx

			This file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

			The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.

			If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.

			tabMap.tsx

			This file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

			### Adding a new tab

			When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.

			If the desired layout does not already exist, a new layout can be created in `tabLayout.tsx`.

			The new tab must then be registered in the tab mapping and management logic in `tabbar.tsx` so that it can be opened and displayed through the tab bar. If `tabMap.tsx` is used elsewhere in the application, the new tab should also be added there.

			This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.

Spring2026 at 09:22, 13 October 2026

2026-10-13T09:22:01Z

← Older revision		Revision as of 10:22, 13 October 2026
Line 18:		Line 18:
	==== inputfield ====		==== inputfield ====

			The InputField component It supports both text and password inputs and handles user interactions through event handlers such as onChange and onKeyDown. This component also uses Tailwind CSS for styling, which is defined directly within the tsx.

	==== popupwindow ====		==== popupwindow ====

			PopupWindow consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the popup window, providing a default version that can be reused. The TS file defines the styling using Tailwind CSS, allowing the popup window to be customized with different sizes and colors.

			The PopupWindowContent folder contains the completed popup windows, which currently consist of two different components: SettingsPopupWindow and WidgetPopupWindow.

			The reason these two components are not included in the general TS and TSX files is that they contain different content and functionality. When a new type of popup window is needed, a new component can be created under PopupWindowContent, where its specific content and functionality are defined, while the basic structure and styling are reused from PopupWindow.

	==== sidebar ====		==== sidebar ====

Spring2026 at 08:36, 13 October 2026

2026-10-13T08:36:56Z

← Older revision		Revision as of 09:36, 13 October 2026
Line 14:		Line 14:
	==== dropdown ====		==== dropdown ====

			The dropdown menu does not have any specific properties of its own. It is mainly used as a placeholder that appears on the screen when the user clicks a button or hovers over it. The dropdown menu contains different buttons and does not require a separate `.ts` file, as it does not have any styling of its own.

	==== inputfield ====		==== inputfield ====

Spring2026 at 08:24, 13 October 2026

2026-10-13T08:24:00Z

← Older revision		Revision as of 09:24, 13 October 2026
Line 8:		Line 8:
	==== button ====		==== button ====

	the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element (`<button>`) that can be used in the page you want to add a button.		the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element <button> that can be used in the page you want to add a button.

	the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.		the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.