main.qml: add basic layout

This adds a basic home page for the app, with a steps display and a history for the past week.

1 files changed, 81 insertions, 6 deletions

diff --git a/src/main.qml b/src/main.qml
index 04e5c21..e8a8958 100644
--- a/src/main.qml
+++ b/src/main.qml
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import QtQuick 2.9
+import QtQuick 2.15
 import org.asteroid.controls 1.0
 
 import org.asteroid.sensorlogd 1.0
@@ -28,12 +28,87 @@ Application {
     outerColor: "#421c0a"
 
     StepsDataLoader {
-        Component.onCompleted: stepsLabel.text = getTodayData()
+        id: stepsDataLoader
+        // Component.onCompleted: stepsLabel.text = getTodayData()
     }
 
-    Label {
-        id: stepsLabel
-        anchors.centerIn: parent
-        horizontalAlignment: Text.AlignHCenter
+    PageHeader {
+        id: title
+        text: "Overview"
+    }
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: contentColumn.implicitHeight
+        Column {
+            id: contentColumn
+            anchors.fill: parent
+
+            Item { width: parent.width; height: parent.width*0.2}
+
+            Label {
+                width: parent.width*0.8
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: "You've walked " + stepsDataLoader.getTodayData() + " steps today, keep it up!"
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignHCenter
+            }
+
+            Item { width: parent.width; height: parent.width*0.1}
+
+            Column { //this is the graph of steps for the past week
+                id: stepsGraph
+                width: parent.width*0.9
+                anchors.horizontalCenter: parent.horizontalCenter
+                property var valuesArr: []
+                property var maxValue: 0
+                Component.onCompleted: {
+                    var currDate = new Date()
+                    currDate.setDate(currDate.getDate() - 7)
+                    for (var i = 0; i < 7; i++) {
+                        currDate.setDate(currDate.getDate() + 1)
+                        console.log(currDate)
+                        var currvalue = stepsDataLoader.getDataForDate(currDate)
+                        if (currvalue > 0 || valuesArr.count>0) {
+                            if (currvalue > maxValue) {
+                                maxValue = currvalue
+                            }
+                            valuesArr.push(currvalue)
+                        }
+                        graphRepeater.model = valuesArr.length
+                    }
+                }
+                Label {
+                    anchors {
+                        left: parent.left
+                        margins: app.width*0.1
+                    }
+                    text: "Steps"
+                }
+                Row {
+                    height: app.height/2
+                    anchors {
+                        margins: app.width*0.1
+                    }
+                    Repeater {
+                        id: graphRepeater
+                        delegate: Item { //this contains the graph column and positions it correctly
+                            width: contentColumn.width/7
+                            height: stepsGraph.height
+                            Rectangle {
+                                anchors.bottom: parent.bottom
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                width: parent.width*2/3
+                                radius: width/2
+                                property int value: stepsGraph.valuesArr[index]
+                                height: value/stepsGraph.maxValue*parent.height
+                            }
+                        }
+                    }
+                }
+            }
+
+            Item { width: parent.width; height: parent.width*0.2}
+        }
     }
 }