mathtrainingstuff/qml/calender/CalenderRunningPage.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import "./"

Page {
    id: root

    signal pageOpened()

    background: Rectangle {
        color: settings.theme("PageBackgroundColor")
    }

    Label {
        id: date
        anchors.centerIn: parent
        font.pixelSize: parent.height * 0.2
        text: calender.nextDate
        visible: calender.runningPageState ? true:false
        color: settings.theme("PageTextColor")
    }

    Label {
        id: gameProcess
        text: calender.actualDateCount + " of " + calender.dateCount
        font.pixelSize: parent.width * 0.05
        color: settings.theme("PageTextColor")
        anchors {
            right: parent.right
            rightMargin: parent.width * 0.025
            bottom: parent.bottom
            bottomMargin: parent.height * 0.05
        }
    }


    ProgressBar {
        id: prog
        property int progress: 0
        property string color: "green"
        value: progress/100
        anchors {
            bottom: parent.bottom
            bottomMargin: parent.height * 0.02
            left: parent.left
            leftMargin: parent.width * 0.01
            right: parent.right
            rightMargin: parent.width * 0.01
        }
        visible: calender.runningPageState ? true:false
        contentItem: Item {
            Rectangle {
                width: prog.visualPosition * parent.width
                height: parent.height
                color: prog.color
            }
        }

        NumberAnimation {
            id: progNumAnim
            target: prog
            property: "progress"
            from: 100
            to: 0
            duration: tick.interval
            easing.type: Easing.Linear
        }

        SequentialAnimation {
            id: progColAnim
            loops: 1
            ColorAnimation {
                id: progColAnim1
                target: prog
                property: "color"
                from: "green"
                to: "goldenrod"
                duration: tick.interval/2
                easing.type: Easing.Linear
            }
            ColorAnimation {
                id: progColAnim2
                target: prog
                property: "color"
                from: "goldenrod"
                to: "darkRed"
                duration: tick.interval/2
                easing.type: Easing.Linear
            }
        }
    }

    ComboBox {
        id: comboBox
        model: ["None", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
        anchors.centerIn: parent
        visible: calender.runningPageState ? false:true
        onCurrentTextChanged: {
            if (currentIndex !== 0) {
                if (currentIndex === calender.weekDay) {
                    calender.correct += 1
                }
                else {
                    calender.wrong += 1
                }
                /*
                Timer, {
                    id: pause
                    interval: 200
                    repeat: false
                }
                */

                if (calender.actualDateCount < calender.dateCount) {
                    calender.generateNextDate()
                    tick.start()
                    calender.runningPageState = true
                }
                else {
                    calender.state = "gameOver"
                }
            }
        }
    }

    Timer {
        id: tick
        interval: calender.tickInterval
        repeat: false
        running: calender.state === "running"

        onTriggered: {
            calender.runningPageState = false
            comboBox.currentIndex = 0
        }

        onRunningChanged: {
            if(running){
                progNumAnim.start()
                progColAnim.start()
            }
        }
    }
}