Add Calendar

CMakeLists.txt

@@ -53,6 +53,7 @@ qt_add_qml_module(mirai
 		src/qml/forms/FilesForm.qml
 		src/qml/components/TabSelector.qml
 		src/qml/components/Tag.qml
+		src/qml/components/Calendar.qml
 		src/qml/styles/MiraiColorPalette.qml
 		src/qml/styles/CatppuccinFrappe.qml
 		src/qml/views/ListView.qml

src/TaskItem.cpp

@@ -27,6 +27,16 @@ QString QMLTaskItem::getDate()
 	return QString::fromStdString(taskItem->getDate());
 }
 
+QString QMLTaskItem::getStartTime()
+{
+	return QString::fromStdString(taskItem->getStartTime());
+}
+
+QString QMLTaskItem::getEndTime()
+{
+	return QString::fromStdString(taskItem->getEndTime());
+}
+
 QString QMLTaskItem::getTime()
 {
 	if (taskItem->getStartTime() != "" && taskItem->getEndTime() != "") {

src/TaskItem.h

@@ -23,6 +23,8 @@ struct QMLTaskItem {
 	Q_PROPERTY(QList<QString> tags READ getTags)
 	Q_PROPERTY(bool shouldShowDate READ getShouldShowDate)
 	Q_PROPERTY(QString time READ getTime)
+	Q_PROPERTY(QString startTime READ getStartTime)
+	Q_PROPERTY(QString endTime READ getEndTime)
 	QML_VALUE_TYPE(taskItem)
 
   public:
@@ -31,6 +33,8 @@ struct QMLTaskItem {
 	QString getState();
 	QString getDate();
 	QString getTime();
+	QString getStartTime();
+	QString getEndTime();
 	QList<QString> getTags();
 	bool getShouldShowDate();
 

src/qml/Main.qml

@@ -71,8 +71,6 @@ Window {
 				anchors.margins: 10
 				spacing: 16
 
-				
-
 				TabSelector {
 					Layout.fillWidth: true
 					Layout.preferredHeight: childrenRect.height

src/qml/components/Calendar.qml

@@ -0,0 +1,133 @@
+/* 
+ * Mirai. Copyright (C) 2024 Vyn
+ * This file is licensed under version 3 of the GNU General Public License (GPL-3.0-only)
+ * The license can be found in the LICENSE file or at https://www.gnu.org/licenses/gpl-3.0.txt
+ */
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Layouts
+import Mirai
+
+ColumnLayout {
+	id: control
+
+	QtObject {
+		id: internal
+		property date weekStartDate: {
+			const date = new Date()
+			date.setDate(date.getDate() - date.getDay() + 1)
+			return date
+		}
+	}
+
+	RowLayout {
+		AppButton {
+			text: "<-"
+		  	onClicked: {
+				internal.weekStartDate.setDate(internal.weekStartDate.getDate() - 7)
+		  	}
+		}
+		AppButton {
+			text: "->"
+			onClicked: {
+				internal.weekStartDate.setDate(internal.weekStartDate.getDate() + 7)
+		  	}
+		}
+	}
+	RowLayout {
+		spacing: 0
+
+		Layout.fillWidth: true
+		Layout.fillHeight: true
+
+		ColumnLayout {
+			Layout.fillHeight: true
+			spacing: 0
+			AppText {
+				text: ""
+			}
+			Rectangle {
+				color: "transparent"
+				Layout.preferredWidth: childrenRect.width + 10
+				Layout.fillHeight: true	
+				Repeater {
+					model: 23 // Skip 00:00
+					AppText {
+						text: `${index + 1}:00`
+						y: (parent.height / 24 * (index + 1)) - (height / 2)
+						verticalAlignment: Text.AlignVCenter
+					}
+				}
+			}
+		}
+
+		Repeater {
+			model: 7
+			
+			ColumnLayout {
+				
+				spacing: 0
+				property date day: new Date(new Date(internal.weekStartDate).setDate(internal.weekStartDate.getDate() + index))
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				
+				AppText {
+					Layout.fillWidth: true
+					text: parent.day.toLocaleDateString(Qt.locale(), "yyyy-MM-dd")
+					verticalAlignment: Text.AlignVCenter
+					horizontalAlignment: Text.AlignHCenter
+				}
+
+				Rectangle {
+					color: "transparent"
+					Layout.fillWidth: true
+					Layout.fillHeight: true
+					id: daysSurface
+					property real hourHeight: daysSurface.height / 24
+
+					Repeater {
+						model: 23 // Skip 00:00
+						Rectangle {
+							color: colorPalette.selected.calendarLines
+							height: 1
+							width: daysSurface.width
+							y: daysSurface.hourHeight * (index + 1)
+						}
+					}
+					
+					Repeater {
+						model: backend.tasks.filter(task => {
+							const date = new Date(internal.weekStartDate)
+							date.setDate(internal.weekStartDate.getDate() + index)
+							return task.date === date.toLocaleDateString(Qt.locale(), "yyyy-MM-dd")
+						})
+						
+						Rectangle {
+							property string name: modelData.text
+							property int startTime: parseInt(modelData.startTime)
+							property int endTime: parseInt(modelData.endTime)
+							color: colorPalette.selected.calendarEvent
+							anchors.right: parent.right
+							anchors.left: parent.left
+							anchors.rightMargin: 2
+							anchors.leftMargin: 2
+							radius: 4
+							y: daysSurface.hourHeight * startTime
+							height: (endTime - startTime) * daysSurface.hourHeight
+
+							ColumnLayout {
+								anchors.fill: parent
+								anchors.margins: 8
+								AppText {
+									text: name
+								}
+								Item { Layout.fillHeight: true }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

src/qml/styles/MiraiColorPalette.qml

@@ -21,4 +21,6 @@ QtObject {
 	property string filterHovered: CatppuccinFrappe.surface0
 	property string filterSelected: CatppuccinFrappe.surface1
 	property string modalBorder: CatppuccinFrappe.lavender
+	property string calendarLines: CatppuccinFrappe.surface0
+	property string calendarEvent: CatppuccinFrappe.overlay0
 }

src/qml/views/CalendarView.qml

@@ -10,8 +10,14 @@ import QtQuick.Layouts
 import Mirai
 
 ColumnLayout {
-	AppText {
-		Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-		text: "Not implemented yet :)"
+	Rectangle {
+		color: "transparent"
+		Layout.preferredWidth: parent.width
+		Layout.fillHeight: true
+
+		Calendar {
+			width: parent.width
+			height: parent.height
+		}
 	}
 }