Deploy: View Demo
The Equipment class is instantiated based on values retrieved from .JSON files, generating objects for each piece of equipment. Supporting classes for the Position and State entities are established, and every equipment object contains arrays from these classes. Within App.tsx, all equipment objects are propagated to the sidebar and map components.
The sidebar has a scrolling section (utilizing Radix scrollArea) that presents a "card" for each piece of equipment, detailing its attributes such as name, model, current state, and so forth. Each "card" further embeds an "accordion" which unveils another scrollArea that showcases the state history of that specific equipment. At the top of the sidebar, there are three "select" components that aid in filtering equipment by name, model, or their current state.
The map component, powered by Leaflet, displays geographical coordinates. A distinct "marker" on the map represents each equipment. These markers are visually differentiated by their icons and colors, correlating to their model (cargo truck, trace grapple, or harvester) and state (idle, working, or under maintenance). Clicking on a marker pops up more details about the corresponding equipment, along with an option to view its state history.
git clone <repository_link>
cd client
npm install
npm run dev