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 batteryState: "unknown"

    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 = ""
        }
    }

    Row {
        anchors {
            right: parent.right
            rightMargin: ( height / control.height / 2 ) * height
            verticalCenter: parent.verticalCenter
        }

        spacing: height * 0.4

        BatteryIndicator {
            id: batteryIndicator

            height: control.height * 0.4
            width: height

            opacity: control.batteryState === "unknown" ? 0:1

            backgroundColor: "transparent"
            chargingColor: fineColor
            fineColor: appTheme.theme.colors.success
            warningColor: appTheme.theme.colors.warning
            criticalColor: appTheme.theme.colors.error

            state: control.batteryState

            indicatorSize: 0.8

            Behavior on opacity {
                NumberAnimation {
                    duration: 200
                }
            }
        }

        StateIndicator {
            id: statusIndicator
            property string color_override: ""

            height: control.height * 0.4
            width: height

            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
        }
    }


}