LedDisplay/OmobiDisplayApp/ressources/qml/ConnectPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.0
import de.itsblue.omobidisplayapp 1.0
import de.itsblue.bluetoothleuart 1.0
import QtQuick.Controls.Material 2.0

Page {
    id: root

    property string statusText
    property bool working

    ColumnLayout {
        anchors {
            fill: parent
            margins: parent.height * 0.05
            topMargin: 0
        }

        Text {
            Layout.preferredWidth: parent.width * 0.6
            Layout.preferredHeight: parent.height * 0.1
            Layout.alignment: Layout.Center


            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            fontSizeMode: Text.Fit
            font.pixelSize: 500
            minimumPixelSize: 1

            text: qsTr("Available devices")
        }

        ListView {
            id: availableDevicesListView

            Layout.preferredWidth: parent.width
            Layout.fillHeight: true
            Layout.alignment: Layout.Center

            clip: true

            model: backend.bleController.availableDevicesModel

            add: Transition {
                NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200 }
                NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: 200 }
            }

            remove: Transition {
                NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200 }
                NumberAnimation { property: "scale"; from: 1; to: 0.9; duration: 200 }
            }

            spacing: 5

            header: ItemDelegate {
                    id: headerDelegate

                    width: parent.width
                    height: implicitHeight * 0.8

                    topInset: 10
                    bottomInset: 10

                    text: root.statusText

                    onClicked: backend.bleController.startScanningForDevices()

                    Rectangle {
                        anchors.fill: parent
                        anchors.topMargin: 10
                        anchors.bottomMargin: 10
                        color: "transparent"
                        border.color: "lightgrey"
                        border.width: 3
                    }

                    Item {
                        anchors {
                            right: parent.right
                            rightMargin: parent.height * 0.15
                            verticalCenter: parent.verticalCenter
                        }

                        height: (parent.height - 20) * 0.7
                        width: height

                        BusyIndicator {
                            id: busyIndicator

                            anchors.centerIn: parent

                            width: parent.width
                            height: parent.height

                            opacity: root.working ? 1:0
                        }
                    }
                }

            delegate: ItemDelegate {
                width: parent.width

                text: name

                onClicked: backend.bleController.connectToDevice(device)

                Rectangle {
                    anchors.fill: parent
                    color: "transparent"
                    border.color: "lightgrey"
                    border.width: 3
                }
            }
        }
    }


    Popup {
        id: connectingPopup

        property bool shouldBeOpened: false

        parent: Overlay.overlay

        x: (parent.width - width) / 2
        y: (parent.height - height) / 2

        closePolicy: Popup.NoAutoClose

        dim: true

        contentItem: Column {
            BusyIndicator {
                running: true
            }
        }

        onShouldBeOpenedChanged: {
            if(shouldBeOpened)
                connectingPopup.open()
            else
                connectingPopup.close()
        }
    }

    states: [
        State {
            name: OmobiDisplayBackend.Idle

            PropertyChanges {
                target: root
                statusText: "Tap here to scan"
                working: false
            }
        },
        State {
            name: OmobiDisplayBackend.Scanning

            PropertyChanges {
                target: root
                statusText: "Scanning..."
                working: true
            }
        },
        State {
            name: OmobiDisplayBackend.ReadyToConnect

            PropertyChanges {
                target: root
                statusText: availableDevicesListView.model.rowCount() > 0 ? "Please select a device or tap to scan again":"No devices found. Tap to scan again"
                working: false
            }
        },
        State {
            name: OmobiDisplayBackend.Connecting

            PropertyChanges {
                target: availableDevicesListView
                enabled: false
            }

            PropertyChanges {
                target: root
                statusText: "trying to connect..."
                working: true
            }
        }
    ]
}