LedDisplay/LedDisplayController/ressources/qml/main.qml

import QtQuick 2.12
import QtQuick.Controls 2.0
import QtQuick.Window 2.12
import de.itsblue.LedDisplayController 1.0
import de.itsblue.bluetoothleuart 1.0
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    width: 540
    height: 960
    visible: true
    title: qsTr("Itsblue smart display")

    Page {
        id: app

        state: backend.state

        onStateChanged: {
            console.log("new state: " + state)
        }

        anchors.fill: parent

        Material.accent: "#0094ff"
        Material.theme: Material.Dark

        header: ToolBar {
            id: headerToolBar

            height: 50
            implicitWidth: parent.width

            Material.background: "white"

            RowLayout {
                anchors.fill: parent

                ToolButton {
                    id: backToolButton

                    enabled: false
                    Layout.fillHeight: true
                    Layout.preferredWidth: height

                    opacity: mainStack.currentItem.backButtonVisible ? 1:0

                    font.family: fontAwesome.name
                    font.pixelSize: height * 0.6
                    Material.foreground: "black"

                    text: "\uf104"

                    contentItem: Item {}

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: parent.font.pixelSize
                        text: parent.text
                    }

                    onClicked: mainStack.currentItem.backButtonClicked()
                }

                Label {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.alignment: Layout.Center

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    color: "black"
                    text: mainStack.currentItem.title
                }

                ToolButton {
                    id: actionToolButton

                    Layout.fillHeight: true
                    Layout.preferredWidth: height

                    opacity: mainStack.currentItem.actionButtonVisible ? 1:0

                    font.family: fontAwesome.name
                    font.pixelSize: height * 0.4
                    Material.foreground: "black"

                    flat: true

                    text: "\uf013"

                    onClicked: mainStack.currentItem.actionButtonClicked()

                }
            }
        }

        LedDisplayBackend {
            id: backend
        }

        FontLoader {
            id: fontAwesome
            source: "qrc:/fa5solid.woff"

            Component.onCompleted: {
                console.log("Font name: " + fontAwesome.name)
            }
        }

        FontLoader {
            id: fontAwesomeBrands
            source: "qrc:/fa5brands.woff"

            Component.onCompleted: {
                console.log("Font name: " + fontAwesome.name)
            }
        }

        StackView {
            id: mainStack

            anchors.fill: parent

            property Component currentComponent

            onCurrentComponentChanged: {
                if(currentComponent != currentItem)
                    mainStack.replace(currentComponent)
            }

            onCurrentItemChanged: {
                currentItem.opened()
            }

            initialItem: connectedPageComp

            replaceEnter: Transition {
                NumberAnimation {
                    properties: "opacity"
                    from: 0
                    to: 1
                }
            }

            replaceExit: Transition {
                NumberAnimation {
                    properties: "opacity"
                    from: 1
                    to: 0
                }
            }

            Component {
                id: connectPageComp
                ConnectPage {
                    state: app.state
                }
            }

            Component {
                id: connectedPageComp
                ConnectedPage {
                    opacity: 0
                    state: app.state
                }
            }
        }

        states: [
            State {
                name: LedDisplayBackend.Idle
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.BluetoothOff
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.LocationPermissionDenied
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Scanning
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.ReadyToConnect
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Connecting
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.AuthenticationRequired
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Authenticating
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Initing
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Connected
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectedPageComp
                }
                 PropertyChanges {
                     target: headerToolBar
                     state: "open"
                 }
                 PropertyChanges {
                     target: backToolButton
                     enabled: true
                 }
            },

            State {
                name: LedDisplayBackend.Loading
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectedPageComp
                }
                PropertyChanges {
                    target: headerToolBar
                    state: "open"
                }
                PropertyChanges {
                    target: backToolButton
                    enabled: true
                }
            }
        ]
    }
}