feat(qtquick): chat example to build up on

CMakeLists.txt

@@ -18,6 +18,8 @@ qt_add_qml_module(itat_challange_olympics
     URI itat
     QML_FILES
         res/gui/application.qml
+        res/gui/EventInfoPage.qml
+        res/gui/EventsPage.qml
     
     RESOURCES
         res/pictograms/ARC_small.svg

application.qrc

@@ -0,0 +1,6 @@
+<!DOCTYPE RCC><RCC version="1.0">
+<qresource prefix="/">
+    <file>qtquickcontrols2.conf</file>
+</qresource>
+</RCC>
+

qtquickcontrols2.conf

@@ -0,0 +1,12 @@
+[Controls]
+Style=Material
+
+[Universal]
+Theme=Material
+Accent=Red
+
+[Material]
+Theme=Light
+Accent=Teal
+Primary=BlueGrey
+

res/gui/EventInfoPage.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Page {
+  id: root
+  property string event_id
+
+  header: ToolBar {
+    ToolButton {
+      text: qsTr("Back")
+      anchors.left: parent.left
+      anchors.leftMargin: 10
+      anchors.verticalCenter: parent.verticalCenter
+      onClicked: root.StackView.view.pop()
+    }
+    Label {
+      id: pageTitle
+      font.pixelSize: 20
+      anchors.centerIn: parent
+      text: qsTr("Event Info")
+    }
+  }
+
+
+}
+

res/gui/EventsPage.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+
+Page {
+  id: root
+  header: ToolBar {
+    Label {
+      text: qsTr("Olympia 2024 Events")
+      font.pixelSize: 20
+      anchors.centerIn: parent
+    }
+  }
+
+  ListView {
+    id: listView
+    anchors.fill: parent
+    topMargin: 48
+    leftMargin: 48
+    bottomMargin: 48
+    rightMargin: 48
+    spacing: 20
+    model: ["Albert Einstein", "Ernest Hemingway", "Hans Gude"]
+    delegate: ItemDelegate {
+      text: modelData
+      width: listView.width - listView.leftMargin - listView.rightMargin
+      height: avatar.implicitHeight + 32
+      leftPadding: avatar.implicitWidth + 32
+      onClicked: root.StackView.view.push("EventInfoPage.qml", { event_id: 1 })
+
+      Image {
+        id: avatar
+        // source: "images/" + modelData.replace(" ", "_") + ".png"
+      }
+    }
+  }
+}
+

res/gui/application.qml

@@ -2,12 +2,14 @@ import QtQuick
 import QtQuick.Controls
 
 ApplicationWindow {
-    width: 400
+  width: 400
-    height: 400
+  height: 400
-    visible: true
+  visible: true
 
-    Button {
+  StackView {
-        id: button
+    id: stackView
-        text: "A Special Button"
+    anchors.fill: parent
-    }
+    initialItem: EventsPage {}
+  }
 }
+