We require a set of VueJS components that will allow the user to position electrical components on a floor plan.
· A canvas displaying the floor plan
· A list of available electrical items for the user to drag and drop on the canvas, organised by category.
· A tree list view representing the rooms and the equipment/equipment groups within them.
The user must be able to:
· Upload a PDF floor plan and display it in a zoomable and pannable canvas.
· Designate room boundaries by drawing polygons on top of the floor plan.
· Drag and drop equipment from the equipment list inside room boundaries.
· Create a named group of equipment within a room and toggle each group's visibility on the canvas.
Events must be created for all operations to facilitate the ability to easily update the backend live as the user is interacting with the interface, this must include:
· Room created
· Room deleted
· Item added to room
· Item deleted from room
· Item repositioned
· Group created
· Group deleted
· Item added to group
· Item removed from group
· Group visibility changed
A programmatic method for creating rooms, as well as adding and positioning equipment must be present so we can facilitate restoring the components from saved data