mathtrainingstuff/qml/calculator/CalculatorStartPage.qml

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import "./"
import "../components"

Page {
    id: root

    signal pageOpened()

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

    property int itemHeight: heading.height + tickIntervalInfo.height + tickInterval.height + numCountInfo.height + numCount.height + minInfo.height + min.height + maxInfo.height + max.height + startButton.height
    property int columnItems: 10

    Column {
        id: column
        spacing: (column.height - itemHeight) / columnItems
        width: parent.width
        anchors.fill: parent
        anchors.topMargin: parent.height * 0.02
        anchors.bottomMargin: parent.height * 0.02

        Label {
            id: heading
            font.pixelSize: parent.width * 0.125
            text: "Calculator"
            color: settings.theme("PageTextColor")
            anchors {
                horizontalCenter: parent.horizontalCenter
            }
        }

        Label {
            id: tickIntervalInfo
            text: "Interval:"
            color: settings.theme("PageTextColor")
            font.pixelSize: parent.height * 0.05
            anchors {
                horizontalCenter: parent.horizontalCenter
            }
        }


        TextField {
            id: tickInterval
            text: calculator.tickInterval
            placeholderText: "interval"
            validator: IntValidator {bottom: 1; top: 100000;}
            horizontalAlignment: Qt.AlignHCenter
            anchors {
                left: parent.left
                right: parent.right
                leftMargin: parent.width * 0.05
                rightMargin: parent.width * 0.05
            }
            Keys.onReturnPressed: root.start()
        }

        Label {
            id: numCountInfo
            text: "Summands:"
            font.pixelSize: parent.height * 0.05
            color: settings.theme("PageTextColor")
            anchors {
                horizontalCenter: parent.horizontalCenter
            }
        }

        TextField {
            id: numCount
            text: calculator.numCount
            placeholderText: "summands"
            validator: IntValidator {bottom: 1; top: 100000;}
            horizontalAlignment: Qt.AlignHCenter
            anchors {
                left: parent.left
                right: parent.right
                leftMargin: parent.width * 0.05
                rightMargin: parent.width * 0.05
            }
            Keys.onReturnPressed: root.start()
        }

        Label {
            id: minInfo
            text: "Minimum:"
            font.pixelSize: parent.height * 0.05
            color: settings.theme("PageTextColor")
            anchors {
                horizontalCenter: parent.horizontalCenter
            }
        }

        TextField {
            id: min
            text: calculator.min
            placeholderText: "minimum"
            validator: IntValidator {bottom: -100000; top: 100000;}
            horizontalAlignment: Qt.AlignHCenter
            anchors {
                left: parent.left
                right: parent.right
                leftMargin: parent.width * 0.05
                rightMargin: parent.width * 0.05
            }
            Keys.onReturnPressed: root.start()
        }

        Label {
            id: maxInfo
            text: "Maximum:"
            font.pixelSize: parent.height * 0.05
            color: settings.theme("PageTextColor")
            anchors {
                horizontalCenter: parent.horizontalCenter
            }
        }

        TextField {
            id: max
            text: calculator.max
            placeholderText: "maximum"
            validator: IntValidator {bottom: -100000; top: 100000;}
            horizontalAlignment: Qt.AlignHCenter
            anchors {
                left: parent.left
                right: parent.right
                leftMargin: parent.width * 0.05
                rightMargin: parent.width * 0.05
            }
        }

        GameButton {
            id: startButton
            text: "start"
            height: parent.width * 0.1
            font.pixelSize: parent.width * 0.0625
            anchors {
                left: parent.left
                right: parent.right
                leftMargin: parent.width * 0.05
                rightMargin: parent.width * 0.05
            }
            onClicked: {
                root.start()
            }
        }
    }
    function start() {
        if (tickInterval.text > 0 && numCount.text > 0 && max.text > min.text) {
            root.updateVars()
            calculator.run()
        }
    }

    function updateVars() {
        calculator.tickInterval = tickInterval.text
        calculator.numCount = numCount.text
        calculator.min = min.text
        calculator.max = max.text

    }
}