Draft: Add features to popups

[elro444]

TODO:

• Make the popup expand upon clicking it.
• Stop propagation on the click event when clicking on the popup
• Add a "handler" depending on the type of the cell
• Red - Add tips ("make sure the cable is connected")
• Green - Show details about the device
• Blue - Add a button for "quick fix"
• Yellow - Add a button that opens a form for "add a new device"
  • Maybe open a capture to suggest address?
• Magenta - Add an explanation for this error

[elro444]

Added a popup with more details for "down" cells

[elro444]

Added also for "misconfigured" cells, with a button (that does nothing for now) for a quick fix

[elro444]

The general design is like this:

@popup_maker(Status.DOWN)
@component
def _popup_down(details: 'cell.CellDetails'):
    return html.div(
        {
            'style': {
                'width': POPUP_WIDTH,
            },
        },
        f'The interface in cell {details.cell_id} is ',
        colorize('DOWN', COLORS[Status.DOWN]),
        '. Please make sure the cable is connected!',
    )

@popup_maker(Status.MISCONFIGURED)
@component
def _popup_misconfigured(details: 'cell.CellDetails'):
    # TODO: Improve the styling on the button in this component
    def quick_fix(_):
        # TODO: Reconfigure the DB
        ...

    return html.div(
        {
            'style': {
                'width': POPUP_WIDTH,
            },
        },
        # TODO: Fix this message
        f'Device #100 is in this cell, but is configured to cell A-1.\n',
        f'Click the button below to move it to {details.cell_id}\n',
        PopupButton('Quick Fix', quick_fix),
    )

There will be a function for each "status", that is responsible for creating the popup contents, with the details and/or the buttons for additional actions related to this cell.