z-bar-qt/Modules/Dashboard/WeatherTab.qml

import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Components
import qs.Modules.Dashboard.Weather
import qs.Services
import qs.Helpers

Item {
	id: root

	readonly property var today: Weather.forecast && Weather.forecast.length > 0 ? Weather.forecast[0] : null

	implicitWidth: layout.implicitWidth > 800 ? layout.implicitWidth : 840
	implicitHeight: layout.implicitHeight
	Component.onCompleted: Weather.reload()

	ColumnLayout {
		id: layout

		anchors.fill: parent
		spacing: Tokens.spacing.medium

		RowLayout {
			Layout.leftMargin: Tokens.padding.large
			Layout.rightMargin: Tokens.padding.large
			Layout.fillWidth: true

			Column {
				spacing: Tokens.spacing.extraSmall

				CustomText {
					text: Weather.city || qsTr("Loading...")
					font: Tokens.font.body.builders.large.size(24).weight(Font.DemiBold).build()
					color: Colors.palette.m3onSurface
				}

				CustomText {
					text: new Date().toLocaleDateString(Qt.locale("en_US"), "dddd, MMMM d")
					font: Tokens.font.body.small
					color: Colors.palette.m3onSurfaceVariant
				}
			}

			Item {
				Layout.fillWidth: true
			}

			Row {
				spacing: Tokens.spacing.largeIncreased

				WeatherStat {
					icon: "wb_twilight"
					label: qsTr("Sunrise")
					value: Weather.sunrise
					colour: Colors.palette.m3tertiary
				}

				WeatherStat {
					icon: "bedtime"
					label: qsTr("Sunset")
					value: Weather.sunset
					colour: Colors.palette.m3tertiary
				}
			}
		}

		CustomRect {
			Layout.fillWidth: true
			implicitHeight: bigInfoRow.implicitHeight + bigInfoRow.anchors.margins * 2

			radius: Tokens.rounding.large
			color: Colors.tPalette.m3surfaceContainer

			Graphs {
				id: bigInfoRow
				anchors.fill: parent
				anchors.margins: Tokens.padding.medium
			}
		}

		RowLayout {
			Layout.fillWidth: true
			spacing: Tokens.spacing.medium

			DetailCard {
				icon: Weather.icon
				label: qsTr("Temperature")
				value: Weather.temp
				colour: Colors.palette.m3primary
			}
			DetailCard {
				icon: "thermostat"
				label: qsTr("Feels like", "apparent temperature")
				value: Weather.feelsLike
				colour: Colors.palette.m3primary
			}
			DetailCard {
				icon: "water_drop"
				label: qsTr("Humidity")
				value: Strings.percent(Weather.humidity)
				colour: Colors.palette.m3secondary
			}
			DetailCard {
				icon: "air"
				label: qsTr("Wind")
				value: Weather.windSpeed ? qsTr("%1 km/h").arg(Weather.windSpeed) : "--"
				colour: Colors.palette.m3tertiary
			}
		}

		CustomText {
			Layout.topMargin: Tokens.spacing.medium
			Layout.leftMargin: Tokens.padding.medium
			visible: forecastRepeater.count > 0
			text: qsTr("7-day forecast")
			font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
			color: Colors.palette.m3onSurface
		}

		RowLayout {
			Layout.fillWidth: true
			spacing: Tokens.spacing.medium

			Repeater {
				id: forecastRepeater

				model: Weather.forecast

				CustomRect {
					id: forecastItem

					required property int index
					required property var modelData

					Layout.fillWidth: true
					implicitHeight: forecastItemColumn.implicitHeight + Tokens.padding.medium * 2

					radius: Tokens.rounding.large
					color: Colors.tPalette.m3surfaceContainer

					ColumnLayout {
						id: forecastItemColumn

						anchors.centerIn: parent
						spacing: Tokens.spacing.small

						CustomText {
							Layout.alignment: Qt.AlignHCenter
							text: forecastItem.index === 0 ? qsTr("Today", "forecast column") : new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "ddd")
							font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
							color: Colors.palette.m3primary
						}

						CustomText {
							Layout.topMargin: -Tokens.spacing.extraSmall
							Layout.alignment: Qt.AlignHCenter
							text: new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "MMM d")
							font: Tokens.font.body.small
							opacity: 0.7
							color: Colors.palette.m3onSurfaceVariant
						}

						MaterialIcon {
							Layout.alignment: Qt.AlignHCenter
							text: forecastItem.modelData.icon
							fontStyle: Tokens.font.icon.extraLarge
							color: Colors.palette.m3secondary
						}

						CustomText {
							Layout.alignment: Qt.AlignHCenter
							text: {
								const min = Weather.formatTemp(forecastItem.modelData.minTempC, true);
								const max = Weather.formatTemp(forecastItem.modelData.maxTempC, true);
								return qsTr("%1 / %2", "min/max temperature").arg(min).arg(max);
							}
							font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
							color: Colors.palette.m3tertiary
						}
					}
				}
			}
		}
	}

	component DetailCard: CustomRect {
		id: detailRoot

		property string icon
		property string label
		property string value
		property color colour

		Layout.fillWidth: true
		Layout.preferredHeight: 60
		radius: Tokens.rounding.medium
		color: Colors.tPalette.m3surfaceContainer

		Row {
			anchors.centerIn: parent
			spacing: Tokens.spacing.medium

			MaterialIcon {
				text: detailRoot.icon
				color: detailRoot.colour
				fontStyle: Tokens.font.icon.large
				anchors.verticalCenter: parent.verticalCenter
			}

			Column {
				anchors.verticalCenter: parent.verticalCenter
				spacing: 0

				CustomText {
					text: detailRoot.label
					font: Tokens.font.body.small
					opacity: 0.7
					horizontalAlignment: Text.AlignLeft
				}
				CustomText {
					text: detailRoot.value
					font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
					horizontalAlignment: Text.AlignLeft
				}
			}
		}
	}

	component WeatherStat: RowLayout {
		id: weatherStat

		property string icon
		property string label
		property string value
		property color colour

		spacing: Tokens.spacing.small

		MaterialIcon {
			text: weatherStat.icon
			fontStyle: Tokens.font.icon.extraLarge
			color: weatherStat.colour
		}

		Column {
			Layout.alignment: Qt.AlignVCenter
			CustomText {
				text: weatherStat.label
				font: Tokens.font.body.small
				color: Colors.palette.m3onSurfaceVariant
			}
			CustomText {
				text: weatherStat.value
				font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
				color: Colors.palette.m3onSurface
			}
		}
	}
}