app/resources/qml/components/ConnectionDelegate.qml

import QtQuick 2.0
import QtQuick.Controls 2.2

SmoothItemDelegate {
    id: control

    property var status
    property string oldState: ""
    property var connect: null
    property var disconnect

    property string type

    text: qsTr(type)

    enabled: (status.status === "disconnected" && control.connect !== undefined) || ( status.status === "connected" && control.disconnect !== undefined )

    onClicked: {
        if(connect == null)
            return;

        if(status.status === "disconnected")
            connect()
        else
            disconnect()

    }

    onStatusChanged: {
        if(oldState !== status.status) {
            if(status.status === "disconnected" && oldState === "connecting") {
                statusIndicator.color_override = "error"
                shortDelay.start()
            }
            oldState = status.status
        }
    }

    Timer {
        id: shortDelay
        running: false
        repeat: false
        interval: 1500
        onTriggered: {
            statusIndicator.color_override = ""
        }
    }

    Item {
        id: statusItem
        anchors {
            right: parent.right
            rightMargin: ( height / control.height / 2 ) * height
            verticalCenter: parent.verticalCenter
        }
        height: control.height * 0.4
        width: height

        StateIndicator {
            id: statusIndicator
            property string color_override: ""
            anchors.fill: parent
            state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override

            indicatorSize: 0.8

            radius: border.width * 2

            backgroundColor: appTheme.theme.colors.background
            successColor: appTheme.theme.colors.success
            errorColor: appTheme.theme.colors.error
        }
    }
}