This project is a simple simulation of features and their data, created using React and TypeScript.
To get started, clone the repository and install the dependencies with npm:
git clone https://github.com/stygmah/ABB_PartsInterface
cd ABB_PartsInterface
npm install
Once the dependencies are installed, you can start the project by running:
npm run start
This will start a development server and open the application in your default web browser.
The project was created using create-react-app
and adding typescript support.
The main component is App
which renders the Part
component. The Part
component receives features
and partName
as props and renders the Feature
component for each feature in the array.
The Feature
component receives data
, featureName
, and quality
as props and displays the feature data in a table.
The App
component simulates the updating of the data in each feature by using setInterval
in a useEffect
hook. The updateFeatures
function is called every 10 seconds, which updates the data and quality of each feature.
- One of the next steps would be to fit all the features perfectly in a grid. For that, a function could be created to calculate the length of each feature and use a grid layout.
- Additionally, the styled components could be updated accordingly to make sure that they are aligned correctly and the display is optimized.
- Update the quality symbols with provided ones that fit.