app/resources/qml/MainPage/CenterContent.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.0

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

Item {
    id: control

    GridLayout {
        id: centerLayout

        //anchors.centerIn: parent

        anchors {
            right: parent.right
            bottom: parent.bottom
        }

        width: parent.width
        height: parent.height

        columns: app.landscape() ? 3:1
        rows: app.landscape() ? 1:3

        Item {
            id: centerExtraContentTop

            property double size

            Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.6:Math.min(centerLayout.width * size, centerLayout.height * size)
            Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width * 0.8
            Layout.alignment: Layout.Center


            Behavior on size {
                NumberAnimation {
                    duration: 800
                    easing.type: Easing.InOutQuart
                }
            }

            StackView {
                id: centerExtraContentTopStack

                anchors.fill: parent
                anchors.margins: 1

                property QtObject newItem: emptyComp

                onNewItemChanged: {
                    centerExtraContentTopStack.replace(newItem)
                }

                replaceEnter: Transition {
                    SequentialAnimation {
                        PauseAnimation {
                            duration: 400
                        }

                        NumberAnimation {
                            property: "opacity"
                            from: 0
                            to: 1
                            duration: 400
                            easing.type: Easing.InOutQuart
                        }
                    }
                }

                replaceExit: Transition {
                    NumberAnimation {
                        property: "opacity"
                        from: 1
                        to: 0
                        duration: 400
                        easing.type: Easing.InOutQuart
                    }
                }


                Component {
                    id: waitingDetailsComp

                    Column {

                        opacity: 0

                        Row {
                            id: stateIndicatorRow

                            property int delegateWidth: width / stateIndicatorRepeater.model - (spacing * (stateIndicatorRepeater.model - 1) / stateIndicatorRepeater.model)
                            property int delegateHeight: height

                            width: parent.width
                            height: parent.height * 0.9

                            spacing: width * 0.1

                            Repeater {
                                id: stateIndicatorRepeater

                                model: scStwRemoteRace.timers.length

                                delegate: ColumnLayout {
                                    id: timerStatusColumn

                                    property var thisTimer: scStwRemoteRace.timers[index]

                                    width: parent.delegateWidth
                                    height: parent.delegateHeight

                                    Label {
                                        Layout.preferredWidth: parent.width
                                        Layout.preferredHeight: parent.height * 0.15

                                        font.pixelSize: height * 0.8
                                        fontSizeMode: Text.Fit
                                        minimumPointSize: 1
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter

                                        color: appTheme.theme.colors.text

                                        text: "Lane " + timerStatusColumn.thisTimer["letter"]
                                    }

                                    StateIndicator {

                                        Layout.fillWidth: true
                                        Layout.maximumWidth: height * 0.7
                                        Layout.fillHeight: true
                                        Layout.alignment: Layout.Center

                                        backgroundColor: appTheme.theme.colors.background
                                        successColor: appTheme.theme.colors.success
                                        warningColor: appTheme.theme.colors.warning

                                        state: timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsReady ?
                                                   "success":timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsDisabled ?
                                                       "unknown":"warn"

                                        indicatorSize: 0.8

                                        MouseArea {
                                            anchors.fill: parent

                                            onClicked: {
                                                if(scStwRemoteRace.timers.length > 1) {
                                                    var disabled = timerStatusColumn.thisTimer["state"] !== ScStwTimer.DISABLED
                                                    console.log("setting timer to disabled: " + disabled)
                                                    scStwRemoteRace.setTimerDisabled(timerStatusColumn.thisTimer["id"], disabled)
                                                }
                                                else {
                                                    console.log("skipping timer disabling, only one timer!")
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        Label {
                            width: parent.width
                            height: parent.height * 0.1

                            visible: scStwRemoteRace.timers.length > 1

                            font.pixelSize: height * 0.6
                            fontSizeMode: Text.Fit
                            minimumPointSize: 1
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter

                            color: appTheme.theme.colors.text

                            text: "Tap a lane to disable it"
                        }

                    }
                }

                Component {
                    id: incidentDetailsComp

                    ExtensionOverview {
                        opacity: 0
                        backgroundColor: appTheme.theme.colors.background
                        delegateHeight: centerExtraContentTopStack.height / 5
                    }
                }

                Component {
                    id: emptyComp
                    Item {}
                }

            }
        }

        MainActionButton {
            id: mainActionButton

            property double size
            startProgress: scStwRemoteRace.currentStartDelay["progress"]

            Layout.alignment: Layout.Center

            Layout.preferredHeight: app.landscape() ? width:Math.min(centerLayout.width * size, centerLayout.height * size)
            Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):height

            onClicked: {
                if(progressControlActivated && progress < 1.0)
                    return

                var ret;

                switch(scStwRemoteRace.state) {
                case ScStwRace.IDLE:
                    ret = scStwRemoteRace.start()
                    break;
                case ScStwRace.WAITING:
                    if(!scStwRemoteRace.readySoundEnabled && scStwRemoteRace.isReadyForNextState)
                        ret = scStwRemoteRace.start()
                    else
                        ret = scStwRemoteRace.cancel()
                    break;
                case ScStwRace.PREPAIRING:
                case ScStwRace.STARTING:
                    ret = scStwRemoteRace.cancel()
                    break;
                case ScStwRace.RUNNING:
                    ret = scStwRemoteRace.stop()
                    break;
                case ScStwRace.STOPPED:
                case ScStwRace.INCIDENT:
                    ret = scStwRemoteRace.reset()
                    break;
                }

                if(ret !== 200)
                    console.log("Error executing main button action: " + ret)

                progress = 0
            }

            Behavior on size {
                NumberAnimation {
                    duration: 800
                    easing.type: Easing.InOutQuart
                }
            }
        }

        Item {
            id: centerExtraContentBottom

            property double size

            Layout.preferredHeight: app.landscape() ? centerLayout.height:Math.min(centerLayout.width * size, centerLayout.height * size)
            Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width

            Behavior on size {
                NumberAnimation {
                    duration: 400
                    easing.type: Easing.InOutQuart
                }
            }
        }

    }

    states: [
        State {
            name: ScStwRace.IDLE
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: "start"
            }

            PropertyChanges {
                target:  centerLayout

                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
            }
        },

        State {
            name: ScStwRace.PREPAIRING
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: "cancel"
            }
        },

        State {
            name: ScStwRace.WAITING

            PropertyChanges {
                target: mainActionButton
                size: scStwRemoteRace.competitionMode ? 0.3:0.9
                text: scStwRemoteRace.readySoundEnabled ? "cancel": scStwRemoteRace.isReadyForNextState ? "ready":"cancel"
                progressControlActivated: scStwRemoteRace.competitionMode && !scStwRemoteRace.readySoundEnabled && !scStwRemoteRace.isReadyForNextState
            }

            PropertyChanges {
                target: centerExtraContentTop

                size: scStwRemoteRace.competitionMode ? 0.7:0
            }

            PropertyChanges {
                target: centerExtraContentBottom

                size: scStwRemoteRace.competitionMode ? 0.05:0
            }

            PropertyChanges {
                target: centerExtraContentTopStack

                newItem: scStwRemoteRace.competitionMode ? waitingDetailsComp:emptyComp
            }
        },

        State {
            name: ScStwRace.STARTING
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: "cancel"
            }
        },

        State {
            name: ScStwRace.RUNNING
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: scStwRemoteRace.competitionMode ? "cancel":"stop"
                progressControlActivated: scStwRemoteRace.competitionMode
            }
        },

        State {
            name: ScStwRace.STOPPED

            PropertyChanges {
                target: mainActionButton

                size: 0.5

                text: "reset"
            }

            PropertyChanges {
                target:  centerLayout

                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
            }
        },

        State {
            name: ScStwRace.INCIDENT

            PropertyChanges {
                target: mainActionButton

                size: 0.5

                text: "reset"
            }

            PropertyChanges {
                target: centerExtraContentTop

                size: scStwRemoteRace.competitionMode ? 0.7:0
            }

            PropertyChanges {
                target: centerExtraContentBottom

                size: scStwRemoteRace.competitionMode ? 0.05:0
            }

            PropertyChanges {
                target: centerExtraContentTopStack

                newItem: scStwRemoteRace.competitionMode ? incidentDetailsComp:emptyComp
            }
        }

    ]
}