app/resources/qml/MainPage/TopToolBar.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

import "../components"
import "../components/layout"

import de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0

ToolBar {
    id: control

    property string statusText

    Loader {
        id: topContentLoader

        anchors.fill: parent

        Behavior on state {
            FadeAnimation {
                target: topContentLoader
                fadeDuration: 300
            }
        }

        Component {
            id: raceStatusLabelComponent
            Text {
                id: raceStatusLabel

                padding: width * 0.06

                text: control.statusText

                color: appTheme.theme.colors.text

                fontSizeMode: Text.Fit

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                font.pixelSize: height

                minimumPixelSize: 1

                Behavior on text {
                    FadeAnimation {
                        target: raceStatusLabel
                        fadeDuration: 100
                    }
                }
            }
        }

        Component {
            id: timerColumnComponent
            TimerColumn {
                id: timerColumn

                anchors.fill: parent
                anchors.topMargin: app.landscape() ? 0:parent.height * 0.1
                anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1

                timers: speedBackend.race.timers
                colors: appTheme.theme.colors
                fontName: appTheme.theme.fonts.timers
                showTimerLetter: true


                // make text smaller for much better performance
                textScale: app.landscape() ? 0.7 : 0.5

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


    Item {
        id: connectionIconContainer

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            bottomMargin: app.landscape() ? parent.height * 0.8:0
            rightMargin: app.landscape() ? 0:parent.width * 0.8
        }

        opacity: speedBackend.race.state === ScStwRace.IDLE ? 1:0

        ConnectionIcon {
            id: baseConnConnIcon

            function clientStateToString(state) {
                switch(state) {
                case ScStwClient.DISCONNECTED:
                    return "disconnected"
                case ScStwClient.CONNECTING:
                    return "connecting"
                case ScStwClient.INITIALISING:
                    return "connecting"
                case ScStwClient.CONNECTED:
                    return "connected"
                }
            }

            status: clientStateToString(speedBackend.scStwClient.state)

            source: appTheme.theme.images.baseStationIcon

            anchors {
                top: parent.top
                topMargin: 10
                left: parent.left
                leftMargin: 10
            }

            height: !app.landscape()? parent.height*0.4:parent.width*0.4
        }

        Row {
            id: extensionStatusRow

            anchors {
                top: parent.top
                topMargin: 10
                left: baseConnConnIcon.right
                leftMargin: 1
            }

            height: baseConnConnIcon.height * 0.4
            spacing: 5

            Repeater {
                id: extensionStatusRep

                model: Object.keys(speedBackend.scStwClient.extensions)
                delegate: Rectangle {
                    id: statusRect

                    property string thisLetter: modelData
                    property var thisExtensions: speedBackend.scStwClient.extensions[modelData]
                    property int thisLaneState: getLaneState(thisExtensions)

                    width: height
                    height: parent.height

                    radius: width * 0.1

                    color: appTheme.theme.colors.background
                    border.color: [appTheme.theme.colors.success, appTheme.theme.colors.warning, appTheme.theme.colors.error][thisLaneState]
                    border.width: width * 0.08

                    onThisExtensionsChanged: {
                        thisLaneState = getLaneState(thisExtensions)
                    }

                    function getLaneState(extensions) {
                        var batteryWarning = false;
                        for(var i = 0; i < extensions.length; i++) {
                            console.log(JSON.stringify(extensions[i]))
                            if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] === ScStw.BatteryCritical)
                                return 2
                            if(extensions[i]["batteryState"] === ScStw.BatteryWarning)
                                batteryWarning = true
                        }

                        return batteryWarning ? 1:0
                    }

                    Behavior on border.color {
                        ColorAnimation {
                            duration: 200
                        }
                    }

                    Behavior on color {
                        ColorAnimation {
                            duration: 200
                        }
                    }

                    Text {
                        anchors.fill: parent

                        text: parent.thisLetter

                        fontSizeMode: Text.Fit
                        font.pixelSize: height * 0.7
                        font.bold: true

                        color: statusRect.border.color

                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }

                }
            }
        }

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

    states: [
        State {
            name: ScStwRace.IDLE

            PropertyChanges {
                target: control
                statusText: app.landscape() ? "Press\nstart":"Press start"
            }

            PropertyChanges {
                target: topContentLoader
                sourceComponent: raceStatusLabelComponent
            }
        },

        State {
            name: ScStwRace.PREPAIRING

            PropertyChanges {
                target: control
                statusText: "At your\nmarks"
            }

            PropertyChanges {
                target: topContentLoader
                sourceComponent: raceStatusLabelComponent
            }
        },

        State {
            name: ScStwRace.WAITING

            PropertyChanges {
                target: control
                statusText: "Ready"
            }

            PropertyChanges {
                target: topContentLoader
                sourceComponent: raceStatusLabelComponent
            }
        },

        State {
            name: ScStwRace.STARTING

            PropertyChanges {
                target: control
                statusText: "Starting"
            }

            PropertyChanges {
                target: topContentLoader
                sourceComponent: raceStatusLabelComponent
            }
        },

        State {
            name: ScStwRace.RUNNING

            PropertyChanges {
                target: topContentLoader
                sourceComponent: timerColumnComponent
            }
        },

        State {
            name: ScStwRace.STOPPED

            PropertyChanges {
                target: topContentLoader
                sourceComponent: timerColumnComponent
            }
        },

        State {
            name: ScStwRace.INCIDENT

            PropertyChanges {
                target: control
                statusText: app.landscape() ? "Technical\nincident!":"Technical incident!"
            }

            PropertyChanges {
                target: topContentLoader
                sourceComponent: raceStatusLabelComponent
            }
        }

    ]

}