|
|
| Line 30: |
Line 30: |
| ==== 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.
| | Sidebar consists of a TSX file and a TS file. The TSX file defines the |
| | |
| 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 ==== |
|
| |
|
| 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.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 ==== |
| | |
| 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.
| |
| | |
| 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.
| |
| | |
| 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.
| |
| | |
| 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.
| |
| | |
| 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.
| |
| | |
| | |
| 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.
| |
|
| |
|
| ==== 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 === |
Frontend
The frontend is mainly structured around components, each responsible for specific functions. These components are used within pages, where they are combined to create complete pages with the required functionality. The frontend is developed using TypeScript, React, and Redux, with Tailwind CSS used for styling.
Components
Currently, the frontend consists of seven different components, organized as follows:
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.
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
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 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 consists of a TSX file and a TS file. The TSX file defines the
tabbar
widget
Pages
