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.width * 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: dateBox
        model: ["None", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
        anchors.centerIn: parent
        visible: calender.runningPageState ? false:true

        indicator: Canvas {
            id: canvas
            x: dateBox.width - width - dateBox.rightPadding
            y: dateBox.topPadding + (dateBox.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"

            Connections {
                target: dateBox
                onPressedChanged: canvas.requestPaint()
            }

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = dateBox.pressed ? "#17a81a" : "#21be2b";
                context.fill();
            }
        }

        delegate: ItemDelegate {
            width: dateBox.width
            contentItem: Text {
            text: modelData
            color: "green"
            font: dateBox.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
            }
            highlighted: dateBox.highlightedIndex === index
        }

        contentItem: Text {
            leftPadding: 10 // should be in reference to width
            rightPadding: dateBox.indicator.width + dateBox.spacing

            text: dateBox.displayText
            font: dateBox.font
            color: "red"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            border.color: settings.theme("ComboBoxBorderColor")
            border.width: settings.theme("ComboBoxBorderWidth")
            radius: settings.theme("ComboBoxRadius")
        }

        popup: Popup {
                y: dateBox.height - 1
                width: dateBox.width
                implicitHeight: contentItem.implicitHeight
                padding: 1

                contentItem: ListView {
                    clip: true
                    implicitHeight: contentHeight
                    model: dateBox.popup.visible ? dateBox.delegateModel : null
                    currentIndex: dateBox.highlightedIndex

                    ScrollIndicator.vertical: ScrollIndicator { }
                }

                background: Rectangle {
                    border.color: "blue"
                    border.width: 10
                    color: "yellow"
                    radius: 0
                }
            }


        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
            dateBox.currentIndex = 0
        }

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