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

    // ----------------------------------
    // -- Start / Stop / Reset button ---
    // ----------------------------------

    GridLayout {
        id: centerLayout

        anchors.centerIn: parent

        width: parent.width
        height: parent.height

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

        Item {

            Rectangle {
                anchors.fill: parent
                color: "green"
            }
        }

        FancyButton {
            id: mainActionButton

            property double size

            Layout.alignment: Layout.Center

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

            onClicked: {
                var ret;

                switch(speedBackend.race.state) {
                case ScStwRace.IDLE:
                    ret = speedBackend.race.start()
                    break;
                case ScStwRace.PREPAIRING:
                case ScStwRace.WAITING:
                case ScStwRace.STARTING:
                    ret = speedBackend.race.cancel()
                    break;
                case ScStwRace.RUNNING:
                    ret = speedBackend.race.stop()
                    break;
                case ScStwRace.STOPPED:
                    ret = speedBackend.race.reset()
                    break;
                }

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

            /*Behavior on Layout.preferredWidth {
                enabled: !app.landscape()
                NumberAnimation {
                    duration: 3000
                }
            }

            Behavior on Layout.preferredHeight {
                enabled:  app.landscape()
                NumberAnimation {
                    duration: 3000
                }
            }*/
        }

    }

    states: [
        State {
            name: ScStwRace.IDLE
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                Layout.preferredHeight: app.landscape() ? control.height * 0.8 : Math.min(control.width * 0.8, control.height * 0.8)
                Layout.preferredWidth: app.landscape() ? Math.min(control.width * 0.8, control.height * 0.8) : control.width * 0.8
                text: "start"
            }

            PropertyChanges {
                target:  centerLayout

                anchors.verticalCenterOffset: 0
                anchors.horizontalCenterOffset: 0
            }
        },

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

        State {
            name: ScStwRace.WAITING
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                text: "cancel"
            }
        },

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

        State {
            name: ScStwRace.STOPPED

            PropertyChanges {
                target: mainActionButton

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

                text: "reset"
            }

            PropertyChanges {
                target:  centerLayout

                //anchors.verticalCenterOffset: app.landscape() ? 0:-centerLayout.height * 0.5
                //anchors.horizontalCenterOffset: app.landscape() ? -centerLayout.width * 0.5:0
            }
        }

    ]

    /*
    DelayButton {
        id : startButt

        text: "start"
        property int size: app.landscape() ? parent.width * 0.5:parent.height * 0.5
        property color backgroundColor: appTheme.theme.colors.button
        property bool progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED && app.state === "RUNNING"
        delay: progressControlActivated ? 2000:0

        anchors {
            bottom: parent.bottom
            bottomMargin: app.height * 0.5 - height * 0.5
            right: parent.right
            rightMargin: app.width * 0.5 - width * 0.5
        }

        height: app.landscape() ? Math.min(size, parent.height * 0.9) : Math.min(size, parent.width * 0.9)
        width: height

        Text {
            id: startButt_text
            text: startButt.text
            anchors.centerIn: parent
            font.pixelSize: parent.height * 0.16
            font.family: "Helvetica"
            color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
        }

        Behavior on text {
            //animate a text change
            enabled: true
            FadeAnimation {
                target: startButt_text
            }
        }

        onClicked: {
            if(startButt.progressControlActivated && progress < 1.0)
                return
            startButt.progress = 0
            switch(app.state) {
            case "IDLE":
                app.start()
                break
            case "RUNNING":
                app.stop()
                break
            case "STOPPED":
            case "INCIDENT":
                app.reset()
                break
            }
        }

        contentItem: Text {
        }

        background: Item {
            RectangularGlow {
                glowRadius: 0.001
                spread: 0.2
                color: "black"

                visible: true

                cornerRadius: startButtBackground.radius
                anchors.fill: startButtBackground
                scale: 0.75
                opacity: Math.pow( startButt.opacity, 100 )
            }

            Rectangle {
                id: startButtBackground
                implicitWidth: 100
                implicitHeight: 100
                color: startButt.down ? Qt.darker(startButt.backgroundColor, 1.2) : startButt.backgroundColor
                radius: size / 2

                readonly property real size: Math.min(startButt.width, startButt.height)
                width: size
                height: size
                anchors.fill: parent

                Behavior on color {
                    ColorAnimation {
                        duration: 200
                    }
                }

                Canvas {
                    id: canvas
                    anchors.fill: parent

                    visible: startButt.progressControlActivated

                    Connections {
                        target: startButt
                        onProgressChanged: canvas.requestPaint()
                    }

                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.clearRect(0, 0, width, height)
                        ctx.strokeStyle = "grey"
                        ctx.lineWidth = parent.width * 0.02
                        ctx.beginPath()
                        var startAngle = Math.PI * 0.5
                        var endAngle = startAngle + startButt.progress * Math.PI * 2
                        ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
                        ctx.stroke()
                    }
                }
            }
        }
    }

    ProgressCircle {
        id: prog

        property double progress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress]

        anchors.fill: startButt
        opacity: app.state === "STARTING" ? 1:0

        scale: startButt.scale

        lineWidth: prog.width * 0.02

        arcBegin: 0
        arcEnd: 360 * (1 - (progress > 0 ? progress:1))

        colorCircle: "grey"

        Behavior on opacity {
            NumberAnimation {
                duration: 200
            }
        }

        animationDuration: 0
    }

    FancyButton {
        id: cancelButt

        text: "cancel"
        anchors {
            right: startButt.right
            bottom: startButt.bottom
        }
        contentItem: Text {
            //make text disappear
        }
        height: startButt.height * 0.3
        scale: 0
        width: height

        enabled: app.state === "STARTING"

        onClicked: {
            app.cancel()
        }

        Behavior on scale {
            PropertyAnimation {
                duration: 200
            }
        }

        Text {
            id: cancelButt_text
            text: cancelButt.text
            anchors.centerIn: parent
            font.pixelSize: parent.height * 0.16
            font.family: "Helvetica"
            color: appTheme.theme.colors.text
        }

        backgroundColor: appTheme.theme.colors.button
    }*/

}