new structure for Calculator

CalculateEndPage.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

CalculatePage.qml

@@ -3,116 +3,8 @@ import QtQuick.Controls 2.4
 import "./"
 
 Page {
-    id: calculator
+    id: root
 
-    property var nums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-    property int currIndex: -1
-    property int tickInterval: 1000
-    property int numCount: 10
-
-    signal pageOpened()
-
-    onPageOpened: {
-        console.log("opened calculator")
-        calculator.state = "starting"
-    }
-
-    states: [
-        State {
-            name: "starting"
-            PropertyChanges {
-                target: calculatorStack
-                currPage: calculatorStartPageComp
-            }
-        },
-
-        State {
-            name: "running"
-            PropertyChanges {
-                target: calculatorStack
-                currPage: calculatorGamePageComp
-            }
-        }
-    ]
-
-    StackView {
-        id: calculatorStack
-
-        property var currPage;
-
-        anchors.fill: parent
-
-        onCurrPageChanged: {
-            calculatorStack.replace(currPage)
-        }
-        onCurrentItemChanged: {
-            calculatorStack.currentItem.pageOpened()
-        }
-
-        Component {
-            id: calculatorStartPageComp
-            Page {
-                id: calculatorStartPage
-                Label {
-                    id: calculatorStartPageHeading
-                    anchors {
-                        top: parent.top
-                        topMargin: parent.height * 0.05
-                        horizontalCenter: parent.horizontalCenter
-                    }
-                    font.pixelSize: parent.height * 0.15
-                    text: "Calculator"
-                }
-                SpinBox {
-                    id: calculatorTickInterval
-                    from: 1
-                    to: 100000
-                    stepSize: 1
-                    value: 1000
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    editable: true
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        leftMargin: parent.width * 0.5 - width * 0.5
-                        topMargin: parent.height * 0.3 - height * 0.5
-                    }
-                    onValueChanged: {
-                        calculator.tickInterval = calculatorTickInterval.value
-                    }
-
-                }
-                SpinBox {
-                    id: calculatorNumCount
-                    from: 1
-                    to: 100000
-                    stepSize: 1
-                    value: 10
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    editable: true
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        leftMargin: parent.width * 0.5 - width * 0.5
-                        topMargin: parent.height * 0.6 - height * 0.5
-                    }
-                    onValueChanged: {
-                        calculator.numCount = calculatorNumCount.value
-                    }
-                }
-                Button {
-                    id: calculatorStartButton
-                    text: "start"
-                    onClicked: {
-                        calculator.start()
-                    }
-                }
-            }
-        }
-
-        Component {
-            id: calculatorGamePageComp
-            Page {
     Label {
         id: num
         anchors.centerIn: parent
@@ -133,10 +25,6 @@ Page {
             rightMargin: parent.width * 0.01
         }
         value: progress/100
-                    onValueChanged: {
-                        console.log(value)
-                    }
-
         NumberAnimation {
             id: progAnim
             target: prog
@@ -171,47 +59,3 @@ Page {
         }
     }
 }
-        }
-
-
-        replaceExit: Transition {
-            NumberAnimation {
-                from: 1
-                to: 0
-                property: "opacity"
-                duration: 200
-                easing.type: Easing.InOutQuad
-            }
-        }
-
-        replaceEnter: Transition {
-            NumberAnimation {
-                from: 0
-                to: 1
-                property: "opacity"
-                duration: 200
-                easing.type: Easing.InOutQuad
-            }
-        }
-    }
-
-
-    /*-------------------------
-    ---------functions---------
-    -------------------------*/
-
-    function nextNumber(){
-        var randNum = 0
-        while(randNum === 0 || randNum === calculator.nums[currIndex]){
-            randNum = Math.floor(Math.random() * 9)
-        }
-        calculator.nums[calculator.currIndex+1] = randNum
-        console.log(randNum)
-        calculator.currIndex += 1
-    }
-
-    function start(){
-        calculator.nextNumber()
-        calculator.state = "running"
-    }
-}

CalculateStartPage.qml

@@ -0,0 +1,64 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+Page {
+    id: calculatorStartPage
+
+    Label {
+        id: calculatorStartPageHeading
+        anchors {
+            top: parent.top
+            topMargin: parent.height * 0.05
+            horizontalCenter: parent.horizontalCenter
+        }
+        font.pixelSize: parent.height * 0.15
+        text: "Calculator"
+    }
+
+    SpinBox {
+        id: calculatorTickInterval
+        from: 1
+        to: 100000
+        stepSize: 1
+        value: 1000
+        anchors.horizontalCenter: parent.horizontalCenter
+        editable: true
+        anchors {
+            left: parent.left
+            top: parent.top
+            leftMargin: parent.width * 0.5 - width * 0.5
+            topMargin: parent.height * 0.3 - height * 0.5
+        }
+        onValueChanged: {
+            calculator.tickInterval = calculatorTickInterval.value
+        }
+
+    }
+
+    SpinBox {
+        id: calculatorNumCount
+        from: 1
+        to: 100000
+        stepSize: 1
+        value: 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        editable: true
+        anchors {
+            left: parent.left
+            top: parent.top
+            leftMargin: parent.width * 0.5 - width * 0.5
+            topMargin: parent.height * 0.6 - height * 0.5
+        }
+        onValueChanged: {
+            calculator.numCount = calculatorNumCount.value
+        }
+    }
+
+    Button {
+        id: calculatorStartButton
+        text: "start"
+        onClicked: {
+            calculator.start()
+        }
+    }
+}

Calculator.qml

@@ -0,0 +1,104 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+Item {
+    id: calculator
+
+    property var nums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    property int currIndex: -1
+    property int tickInterval: 1000
+    property int numCount: 10
+
+    signal pageOpened()
+
+    onPageOpened: {
+        calculator.state = "starting"
+    }
+
+    states: [
+        State {
+            name: "starting"
+            PropertyChanges {
+                target: calculatorStack
+                currPage: calculatorStartPageComp
+            }
+        },
+
+        State {
+            name: "running"
+            PropertyChanges {
+                target: calculatorStack
+                currPage: calculatorGamePageComp
+            }
+        }
+    ]
+
+    StackView {
+        id: calculatorStack
+
+        property var currPage;
+
+        anchors.fill: parent
+
+        onCurrPageChanged: {
+            calculatorStack.replace(currPage)
+        }
+        onCurrentItemChanged: {
+            calculatorStack.currentItem.pageOpened()
+        }
+
+        Component {
+            id: calculatorStartPageComp
+            CalculateStartPage {
+                id: calculatorStartPage
+            }
+        }
+
+        Component {
+            id: calculatorGamePageComp
+            CalculatePage {
+
+            }
+        }
+
+
+        replaceExit: Transition {
+            NumberAnimation {
+                from: 1
+                to: 0
+                property: "opacity"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+
+        replaceEnter: Transition {
+            NumberAnimation {
+                from: 0
+                to: 1
+                property: "opacity"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+    }
+
+
+    /*-------------------------
+    ---------functions---------
+    -------------------------*/
+
+    function nextNumber(){
+        var randNum = 0
+        while(randNum === 0 || randNum === calculator.nums[currIndex]){
+            randNum = Math.floor(Math.random() * 9)
+        }
+        calculator.nums[calculator.currIndex+1] = randNum
+        calculator.currIndex += 1
+    }
+
+    function start(){
+        calculator.nextNumber()
+        calculator.state = "running"
+    }
+}

StartPage.qml

@@ -4,6 +4,7 @@ import "./"
 
 Page {
     id: root
+
     signal pageOpened()
     Button {
         id: calenderButton

qml.qrc

@@ -4,5 +4,8 @@
         <file>CalenderPage.qml</file>
         <file>StartPage.qml</file>
         <file>CalculatePage.qml</file>
+        <file>CalculateStartPage.qml</file>
+        <file>CalculateEndPage.qml</file>
+        <file>Calculator.qml</file>
     </qresource>
 </RCC>